/* XDNA Base site sheet. It loads after the locked, owner-approved component sheet (assets/css/styles.css, never edited) and
   restyles only what this site uses: the shared chrome, the inner pages, the swap card and its two dialogs.
   Pixel-perfect consolidation (2026-10-01): existing palette only; every size on the 4/8px grid; every line-height an integer;
   three radii; one border width; fixed icon sizes and stroke widths. Sections: tokens, foundations, swap card, wallet dialog,
   shared chrome (notice bar, continuity, verify, records), navigation and footers, guide page, documents, brand marks, review dialog. */

/* ========================================================================================================================
   1. Tokens
   ======================================================================================================================== */
.page-base {
  /* layout */
  --max: 1248px;
  --gutter: 32px;
  /* spacing: 4/8px grid */
  --s-1: 4px;
  --s-2: 8px;
  --s-3: 12px;
  --s-4: 16px;
  --s-5: 20px;
  --s-6: 24px;
  --s-8: 32px;
  /* type scale: size / integer line-height */
  --t-10: 10px; --l-10: 16px;
  --t-11: 11px; --l-11: 16px;
  --t-12: 12px; --l-12: 18px;
  --t-13: 13px; --l-13: 20px;
  --t-14: 14px; --l-14: 24px;
  --t-15: 15px; --l-15: 24px;
  --t-16: 16px; --l-16: 24px;
  --t-18: 18px; --l-18: 24px;
  --t-20: 20px; --l-20: 28px;
  --t-24: 24px; --l-24: 28px;
  --t-26: 26px; --l-26: 32px;
  --t-28: 28px; --l-28: 32px;
  --t-32: 32px; --l-32: 36px;
  --t-36: 36px; --l-36: 40px;
  --t-44: 44px; --l-44: 48px;
  --t-56: 56px; --l-56: 60px;
  --t-72: 72px; --l-72: 76px;
  --t-84: 84px; --l-84: 84px;
  /* radii */
  --r-1: 8px;
  --r-2: 12px;
  --r-3: 16px;
  /* border */
  --bw: 1px;
  /* icons: three sizes, one line weight (24-unit viewBox) and one check weight */
  --i-1: 12px;
  --i-2: 16px;
  --i-3: 20px;
  --stroke: 1.75;
  --stroke-check: 3;
  /* controls */
  --tap: 44px;
  --ease: 160ms cubic-bezier(.2, .7, .2, 1);
  /* shared palette (every value already renders on the site) */
  --accent: #2094f3;
  --copy: #d1d5db;
  --line: rgba(133, 178, 225, 0.17);
  --hair: #90b1d017;
  --tile: #0e1625;
  --tile-edge: rgba(0, 212, 255, .16);
  --card-edge: rgba(0, 212, 255, .2);
  --card-bg: linear-gradient(180deg, rgba(17, 26, 44, .7), rgba(11, 17, 30, .8));
  --ink-soft: #e3ebf6;
  --label: #9ca3af;
  --muted: #d1d5db;
  --cyan: #00d4ff;
  --cyan-soft: #33bbff;
  --focus: #8ee5f5;
  /* Small white action labels retain at least 4.5:1 contrast in both states. */
  --cta: #0875c9;
  --cta-2: #0875c9;
  --cta-hover: #0b6fc4;
  --cta-hover-2: #0b6fc4;
  --warn-ink: #ead398;
  --warn-edge: #a68a4c;
  --ok: #8de1b2;
  --mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  /* icon masks (CSP allows data: images); strokes are the --stroke weight at 16px, --stroke-check for check marks */
  --i-wallet: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.75' stroke-linejoin='round'%3E%3Crect x='3.5' y='5' width='17' height='15' rx='3.5'/%3E%3Cpath d='M15 10h5.5v5H15a2.5 2.5 0 0 1 0-5Z'/%3E%3C/svg%3E");
  --i-refresh: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 7v5h-5M4 17v-5h5M6.1 7a7 7 0 0 1 11.8-1L20 9M4 15l2.1 3A7 7 0 0 0 18 17'/%3E%3C/svg%3E");
  --i-check: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5 12.5 4.5 4.5L19 7.5'/%3E%3C/svg%3E");
  --i-ext: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7 17 17 7M9.5 7H17v7.5'/%3E%3C/svg%3E");
  --i-lock: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.75' stroke-linecap='round'%3E%3Crect x='5' y='10.5' width='14' height='10' rx='2.5'/%3E%3Cpath d='M8 10.5V7.5a4 4 0 0 1 8 0v3'/%3E%3C/svg%3E");
  --i-chevron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  font-size: var(--t-15);
  line-height: var(--l-15);
}

/* ========================================================================================================================
   2. Foundations: page, wrap, type, buttons, utilities
   ======================================================================================================================== */
:root { color-scheme: dark; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
.page-base .page { position: relative; isolation: isolate; background: radial-gradient(ellipse 76% 640px at 12% 80px, rgba(32, 148, 243, .12), transparent), var(--bg); }
.page-base [hidden] { display: none !important; }
.page-base :target { scroll-margin-top: 0; }
.page-base p { color: var(--copy); }
.page-base h1, .page-base h2, .page-base h3, .page-base p { margin-top: 0; }
.page-base h1, .page-base h2, .page-base h3 { text-wrap: balance; }
.page-base p { text-wrap: pretty; }
.page-base h1 { margin-bottom: var(--s-6); font-size: var(--t-44); font-weight: 750; line-height: var(--l-44); letter-spacing: -0.05em; }
.page-base h2 { margin-bottom: var(--s-4); font-size: var(--t-28); font-weight: 700; line-height: var(--l-28); letter-spacing: -0.04em; }
.page-base h3 { margin-bottom: var(--s-2); font-size: var(--t-18); line-height: var(--l-18); letter-spacing: -0.02em; }
@media (min-width: 768px) {
  .page-base h1 { font-size: 48px; line-height: 52px; }
  .page-base h2 { font-size: var(--t-32); line-height: var(--l-32); }
}
@media (min-width: 1024px) {
  .page-base h1 { font-size: var(--t-56); line-height: var(--l-56); }
  .page-base h2 { font-size: var(--t-36); line-height: var(--l-36); }
}
@media (min-width: 1280px) {
  .page-base h1 { font-size: var(--t-72); line-height: var(--l-72); }
  .page-base h2 { font-size: 40px; line-height: 44px; }
}
.page-base .base-lede { margin-bottom: var(--s-5); color: #e3ebf7; font-size: var(--t-20); line-height: var(--l-20); letter-spacing: -0.025em; }
@media (min-width: 1024px) { .page-base .base-lede { font-size: var(--t-24); line-height: var(--l-32); } }
.base-intro { max-width: 490px; margin-bottom: var(--s-6); font-size: var(--t-15); line-height: var(--l-15); }
.base-wrap { width: 100%; max-width: var(--max); margin-inline: auto; padding-inline: var(--gutter); }
.base-visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.base-skip { position: absolute; top: var(--s-2); left: var(--s-4); z-index: 100; padding: var(--s-3) var(--s-4); background: #142b45; transform: translateY(-200%); }
.base-skip:focus { transform: translateY(0); }
.base-eyebrow, .base-small-label { display: block; color: var(--label); font-size: var(--t-10); font-weight: 650; letter-spacing: 0.14em; line-height: var(--l-10); }
.base-eyebrow { display: flex; align-items: center; gap: var(--s-3); margin-bottom: var(--s-6); color: var(--cyan); font-size: var(--t-11); line-height: var(--l-11); }
.base-square { display: inline-block; flex-shrink: 0; width: 12px; height: 12px; border: var(--bw) solid #6195ff; border-radius: 3px; background: #2168fa; }
.base-actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-3); }
.base-text-link { display: inline-flex; align-items: center; gap: var(--s-3); min-height: var(--tap); font-size: var(--t-13); font-weight: 550; line-height: var(--l-13); }
/* buttons from the component sheet: white text needs the darker CTA blue the swap card already uses (4.5:1 on #0b6fc4) */
.page-base .btn, .page-base .btn-ghost { min-height: 48px; padding: var(--s-3) var(--s-6); font-size: var(--t-14); line-height: var(--l-14); gap: var(--s-3); border-radius: var(--r-2); text-wrap: balance; }
.page-base .btn { background: var(--cta); box-shadow: none; }
.page-base .btn:hover { background: var(--cta-hover); box-shadow: none; transform: none; }
.page-base .btn--sm { min-height: var(--tap); padding: 0 var(--s-4); font-size: var(--t-12); line-height: var(--l-11); border-radius: var(--r-1); white-space: nowrap; }
.page-base .btn-ghost { width: 288px; max-width: 100%; justify-content: center; }
.page-base .btn:active { transform: scale(.98); }
/* every inline icon: one of three sizes, one stroke weight, drawn centred in its box */
.page-base svg { stroke-width: var(--stroke); }
.base-detail-chevron { flex: none; width: var(--i-2); height: var(--i-2); margin: 0; color: var(--muted); transition: transform var(--ease); }
.page-base details[open] > summary > .base-detail-chevron { transform: rotate(180deg); }
.page-base summary { text-wrap: balance; }
.page-base summary::-webkit-details-marker { display: none; }
/* inline code never extends its line box: WebKit keeps monospace ascent and descent as fractions, so a code span with the
   parent's line-height can leave the line a fraction taller than its integer line-height */
.page-base :where(p, dt, dd, li, figcaption, span, strong, small, td, th, a) > code { line-height: 1; }
@media (max-width: 700px) {
  .page-base { --gutter: 24px; }
  .base-intro { font-size: var(--t-14); line-height: var(--l-14); }
}
@media (max-width: 374px) {
  .page-base h1 { font-size: var(--t-36); line-height: var(--l-36); }
  .page-base h2 { font-size: var(--t-24); line-height: var(--l-24); }
}
@media (max-width: 370px) {
  .page-base { --gutter: 16px; }
}
@media (prefers-reduced-motion: reduce) {
  .page-base *, .page-base *::before, .page-base *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
  .page-base .btn:active { transform: none; }
}

/* ========================================================================================================================
   3. Swap card (home). Scope: .base-purchase--pro, the one card on the swap page. WP-PRO, WP-A and WP-B consolidated.
   Rhythm: card padding 8, text inset 16 (so copy sits 24px from the card edge), 4px between the two panels, 8px between
   every other block; surfaces are 16px radius inside the 24px card so the corners nest. Every row has an integer height.
   ======================================================================================================================== */
.page-base--home { --max: 1376px; }
.page-base--home .page { display: flex; flex-direction: column; min-height: 100vh; }
.page-base--home #main { flex: 1; }
.base-hero { position: relative; }
.base-hero::before { content: ''; position: absolute; inset: 0; background-image: radial-gradient(rgba(46, 150, 200, 0.13) 0.8px, transparent 0.8px); background-size: 28px 28px; mask-image: radial-gradient(ellipse at top, #000, transparent 75%); pointer-events: none; }
.page-base .base-swap-landing { padding: var(--s-6) 0 var(--s-6); }
.base-swap-layout { position: relative; display: grid; grid-template-columns: minmax(0, 480px); justify-content: center; align-items: start; }
@media (min-width: 701px) { .page-base .base-swap-landing { padding: var(--s-8) 0; } }

.base-purchase--pro {
  /* surfaces */
  --card: #0e1625;
  --card-glow: #2094f312;
  --inset: #0a101c;
  --raised: #111a2c;
  --raised-2: #142239;
  --control: #101b2d;
  --control-on: #192d46;
  --control-hover: #16273e;
  --edge-card: #375570b3;
  --edge: #263e56;
  --edge-2: #2b4358;
  --edge-accent: #326782;
  --edge-control: #2e4d63;
  --edge-control-hover: #4f8aa3;
  --hair: #2d4659;
  /* ink */
  --ink: #fff;
  --ink-soft: #ecf4fb;
  --number: #dce8f6;
  --body: #d1d5db;
  --subtle: #8ba6b9;
  --faint: #7599ad;
  --placeholder: #738ba4;
  --cyan: #00d4ff;
  --cyan-soft: #33bbff;
  --output: #ffffff;
  --link-hover: #66ffff;
  --base-blue: #2168fa;
  --focus-field: #77d7ed;
  --ok-edge: #4a847b;
  --warn: #f1c77b;
  --warn-bg: #393421;
  --recovery-bg: #28251c;
  --recovery-edge: #826b40;
  --error: #efc295;
  --danger: #edb794;
  --cta-edge: #62baff66;
  --cta-off: #1a2c3d;
  --cta-off-text: #a9bccd;
  --cta-off-edge: #2f4659;
  --shadow-card: 0 30px 80px #00000080, inset 0 1px 0 #ffffff0f;
  --shadow-cta: 0 0 26px #2094f366;
  --keyline: inset 0 1px 0 rgba(255, 255, 255, .06);
  /* scale */
  --pad: var(--s-2);          /* card padding: surfaces sit 8px inside the card edge */
  --x: var(--s-4);            /* text inset inside surfaces: copy aligns 24px from the card edge */
  --r-card: calc(var(--r-3) + var(--pad));
  --amount: var(--t-32);
  --row: 48px;                /* token + amount row */
  --title: var(--t-24);
  --title-l: var(--l-24);
  --symbol: var(--t-16);
  --icon: 36px;
  --chip: 48px;
  --chip-gap: var(--s-1);
  position: relative;
  isolation: isolate;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  row-gap: 0;
  width: 100%;
  min-width: 0;
  max-width: 480px;
  margin: 0 auto;
  padding: var(--pad);
  border: var(--bw) solid var(--edge-card);
  border-radius: var(--r-card);
  background: radial-gradient(120% 55% at 100% 0, var(--card-glow), transparent 60%), var(--card);
  box-shadow: var(--shadow-card);
  color: var(--ink);
  font-size: var(--t-13);
  line-height: var(--l-13);
  -webkit-font-smoothing: antialiased;
  animation: none;
}
@property --base-beam-angle { syntax: "<angle>"; initial-value: 0deg; inherits: false; }
.base-purchase--pro::before { content: ""; position: absolute; inset: -1px; padding: 1px; border-radius: inherit; background: conic-gradient(from var(--base-beam-angle), transparent 0 78%, #00d4ff66 88%, #a3f5ff99 91%, transparent 94%); -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0); -webkit-mask-composite: xor; mask-composite: exclude; pointer-events: none; animation: base-border-orbit 7s linear infinite; }
@keyframes base-border-orbit { to { --base-beam-angle: 360deg; } }
body:has(#purchase-review-dialog[open]) .base-purchase--pro::before,
.base-purchase--pro[data-purchase-pending="true"]::before,
.base-motion-paused .base-purchase--pro::before { animation-play-state: paused; }
@media (prefers-reduced-motion: reduce) { .base-purchase--pro::before { display: none; animation: none; } }
.base-side-helices { position: absolute; inset: var(--nav-h) 0 0; overflow: hidden; pointer-events: none; z-index: -1; }
.base-purchase--pro > * { grid-column: 1 / -1; min-width: 0; }
.base-purchase--pro :where(p, dl, dd, ol, h1, h2) { margin: 0; }
/* one grid, every block on an explicit row: visual order is fixed by row, tab order by DOM */
.base-purchase--pro > .base-purchase__head { grid-row: 1; }
.base-purchase--pro > .base-preview-fields { grid-row: 2; }
.base-purchase--pro > .base-quote-action { grid-row: 3; }
.base-purchase--pro > .base-rate-row { grid-row: 4; }
.base-purchase--pro > #wallet-summary { grid-row: 5; }
.base-purchase--pro > #wallet-connect, .base-purchase--pro > #purchase-review { grid-row: 8; }
.base-purchase--pro > #purchase-cta-reason { grid-row: 9; }
.base-purchase--pro > #purchase-recovery { grid-row: 11; }
.base-purchase--pro > #wallet-inline-status { grid-row: 12; }
.base-purchase--pro:has(#wallet-summary:not([hidden])) > #wallet-inline-status { grid-row: 6; }
.base-purchase--pro > noscript { grid-row: 13; }

/* ---------- header: title left, network pill right ---------- */
.base-purchase--pro .base-purchase__head { display: flex; align-items: center; justify-content: space-between; gap: var(--s-2); margin: 0; padding: var(--s-2) var(--s-2) var(--s-2) var(--x); }
.base-purchase--pro .base-purchase__head h1 { flex: 1 1 auto; display: block; min-width: 0; margin: 0; color: var(--ink); font-size: var(--title); font-weight: 650; letter-spacing: -.035em; line-height: var(--title-l); white-space: nowrap; }
.base-purchase--pro .base-purchase__network-stack { display: flex; flex: none; align-items: center; margin: 0; }
.base-purchase--pro .base-purchase-network { display: inline-flex; align-items: center; justify-content: center; gap: 6px; width: 112px; height: 24px; margin: 0; padding: 0; border: var(--bw) solid var(--line); border-radius: 999px; background: #0f223299; color: var(--body); font-size: var(--t-12); font-weight: 500; line-height: var(--l-12); letter-spacing: 0; white-space: nowrap; }
.base-purchase--pro .base-purchase-network .base-square { width: 10px; height: 10px; border-color: #6195ff80; border-radius: 3px; background: var(--base-blue); }

/* ---------- amount panels ---------- */
.base-purchase--pro .base-preview-fields { display: flex; flex-direction: column; gap: 0; min-width: 0; margin: 0; padding: 0; border: 0; border-radius: 0; background: transparent; }
.base-purchase--pro .base-field { position: relative; margin: 0; padding: var(--s-3) var(--x) var(--s-4); border: var(--bw) solid var(--edge); border-radius: var(--r-3); background: var(--inset); box-shadow: none; transition: border-color var(--ease); }
.base-purchase--pro .base-field:focus-within { outline: 0; }
.base-purchase--pro .base-field:has(input:focus) { outline: 2px solid var(--focus-field); outline-offset: -2px; } /* amount focus only; chips keep their own ring */
.base-purchase--pro .base-field__label { display: flex; align-items: center; justify-content: space-between; gap: var(--s-3); height: 24px; margin: 0; color: var(--muted); font-size: var(--t-13); font-weight: 500; line-height: var(--l-13); }
.base-purchase--pro .base-field__label label { color: var(--muted); font-size: var(--t-13); font-weight: 500; line-height: var(--l-13); white-space: nowrap; }
/* pay panel: label + quick amounts on top, token + amount, balance bottom-right */
.base-purchase--pro .base-field:not(.base-field--receive) {
  container: pay / inline-size;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-areas: "label presets" "amount amount" "balance balance";
  align-items: center;
  column-gap: var(--s-3);
}
.base-purchase--pro .base-field:not(.base-field--receive) > .base-field__label { display: contents; }
.base-purchase--pro .base-field:not(.base-field--receive) > .base-field__label > label { grid-area: label; align-self: center; }
.base-purchase--pro .base-field:not(.base-field--receive) > .base-field__label > span { grid-area: balance; justify-self: end; display: inline-flex; align-items: center; gap: 6px; height: 20px; margin-top: var(--s-1); color: var(--subtle); font-size: var(--t-12); font-weight: 500; line-height: var(--l-12); font-variant-numeric: tabular-nums; white-space: nowrap; }
.base-purchase--pro .base-field:not(.base-field--receive) > .base-field__label > span::before { content: ""; flex: none; width: var(--i-2); height: var(--i-2); background: currentColor; -webkit-mask: var(--i-wallet) center / contain no-repeat; mask: var(--i-wallet) center / contain no-repeat; }
.base-purchase--pro #wallet-usdc-balance { color: var(--body); font-weight: 600; }
.base-purchase--pro .base-field:not(.base-field--receive) > .base-amount-presets { grid-area: presets; }
.base-purchase--pro .base-field:not(.base-field--receive) > .base-field__amount { grid-area: amount; }
/* quick amounts: 44px hit areas with a 28px drawn pill, in a 24px row (the hit areas overhang the row by 10px each way) */
.base-purchase--pro .base-amount-presets { display: flex; align-items: center; justify-content: flex-end; gap: var(--chip-gap); height: 24px; margin: 0; }
.base-purchase--pro .base-amount-presets > span { position: absolute; width: 1px; height: 1px; margin: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.base-purchase--pro .base-amount-presets button {
  position: relative;
  isolation: isolate;
  flex: none;
  width: var(--chip);
  height: var(--tap);
  min-width: 0;
  min-height: 0;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: none;
  box-shadow: none;
  color: var(--body);
  font: inherit;
  font-size: var(--t-13);
  font-weight: 550;
  font-variant-numeric: tabular-nums;
  line-height: var(--l-13);
  opacity: 1;
  filter: none;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: color var(--ease), transform var(--ease);
}
.base-purchase--pro .base-amount-presets button::before { content: ""; position: absolute; inset: var(--s-2) 0; z-index: -1; border: var(--bw) solid var(--edge-control); border-radius: 999px; background: var(--control); transition: border-color var(--ease), background-color var(--ease), box-shadow var(--ease); }
.base-purchase--pro .base-amount-presets button[aria-pressed="true"] { color: var(--ink); }
.base-purchase--pro .base-amount-presets button[aria-pressed="true"]::before { border-color: #8ce1ec99; background: var(--control-on); }
.base-purchase--pro .base-amount-presets button:focus-visible { outline: 0; }
.base-purchase--pro .base-amount-presets button:focus-visible::before { box-shadow: 0 0 0 2px var(--focus); }
.base-purchase--pro .base-amount-presets button:active:not(:disabled) { transform: scale(.96); filter: none; }
.base-purchase--pro .base-amount-presets button:disabled { color: var(--subtle); opacity: 1; cursor: not-allowed; }
/* Max: a fourth chip, shown only with a known positive balance on Base (purchase/ui.mjs); same pill, cyan label */
.base-purchase--pro #purchase-max { color: var(--cyan); }
.base-purchase--pro #purchase-max::before { border-color: #92e6ee40; }
.base-purchase--pro .base-preview-fields:disabled #purchase-max { color: var(--subtle); }
/* token + amount row: a fixed-width token block, so the amount field is always an integer width */
.base-purchase--pro .base-field__amount { position: relative; display: flex; align-items: center; gap: var(--s-3); height: var(--row); margin: var(--s-3) 0 0; }
.base-purchase--pro .base-asset { flex: none; display: inline-flex; align-items: center; gap: var(--s-2); width: calc(var(--icon) + 88px); min-width: 0; margin: 0; padding: 0; border: 0; border-radius: 0; background: transparent; box-shadow: none; color: inherit; }
.base-purchase--pro .base-asset > span:last-child { display: block; min-width: 0; overflow: hidden; }
.base-purchase--pro .base-asset__icon { position: relative; display: block; flex: none; width: var(--icon); height: var(--icon); }
.base-purchase--pro .base-asset__icon img { display: block; width: var(--icon); height: var(--icon); border-radius: 50%; box-shadow: 0 0 0 1px #85b2e126; object-fit: contain; }
.base-purchase--pro .base-asset__network { position: absolute; right: -2px; bottom: -2px; width: 12px; height: 12px; border: 2px solid var(--inset); border-radius: 4px; background: var(--base-blue); }
.base-purchase--pro .base-field--receive .base-asset__network { border-color: var(--raised); }
.base-purchase--pro .base-asset strong { display: block; color: var(--ink-soft); font-size: var(--symbol); font-weight: 600; letter-spacing: -.015em; line-height: var(--l-13); white-space: nowrap; }
.base-purchase--pro .base-asset__name { position: static; display: block; width: auto; height: auto; overflow: hidden; clip-path: none; color: var(--muted); font-size: var(--t-12); line-height: var(--l-11); white-space: nowrap; text-overflow: ellipsis; }
.base-purchase--pro .base-field :is(input, textarea) {
  display: block;
  flex: 1 1 auto;
  width: 100%;
  min-width: 0;
  height: var(--row);
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  outline: 0;
  box-shadow: none;
  background: transparent;
  color: var(--number);
  -webkit-text-fill-color: currentcolor;
  caret-color: var(--cyan-soft);
  font-family: inherit;
  font-size: var(--amount);
  font-weight: 380;
  font-variant-numeric: tabular-nums;
  letter-spacing: -.04em;
  line-height: var(--row);
  text-align: right;
  opacity: 1;
}
.base-purchase--pro .base-field :is(input, textarea):focus { outline: 0; box-shadow: none; }
.base-purchase--pro .base-field :is(input, textarea)::placeholder { color: var(--placeholder); -webkit-text-fill-color: currentcolor; opacity: 1; }
.base-purchase--pro .base-field textarea { resize: none; overflow: hidden; overflow-wrap: anywhere; }
.base-purchase--pro #purchase-receive { color: var(--output); cursor: default; }
.base-purchase--pro #purchase-receive::placeholder { color: #73b8ca99; font-weight: 250; }
/* a number too long for the row (purchase/ui.mjs) gets its own full-width line */
.base-purchase--pro .base-field__amount--long { flex-wrap: wrap; height: auto; min-height: var(--row); }
.base-purchase--pro .base-field__amount--long :is(input, textarea) { flex-basis: 100%; }
.base-purchase--pro .base-field__amount--long .base-asset { margin-left: 0; }
/* direction mark: static, centred on the 4px gap, with a card-colour moat and a quiet brand ring */
.base-purchase--pro .base-exchange {
  position: relative;
  inset: auto;
  z-index: 2;
  display: grid;
  place-items: center;
  align-self: center;
  justify-self: auto;
  width: 32px;
  height: 32px;
  margin: -14px 0;
  padding: 0;
  border: var(--bw) solid #2a6f8a;
  border-radius: 10px;
  background: var(--raised-2);
  box-shadow: 0 0 0 4px var(--card), 0 2px 8px #0009134d;
  color: var(--cyan);
  transform: none;
  pointer-events: none;
}
.base-purchase--pro .base-exchange svg { width: var(--i-2); height: var(--i-2); }
/* receive panel */
.base-purchase--pro .base-field--receive { border-color: var(--edge-2); background: linear-gradient(180deg, var(--raised), #0e1625); box-shadow: var(--keyline); }
/* quote-state pill in the receive header ("Auto quote" / "Updating..." / "Estimated" are written by JS) */
.base-purchase--pro #purchase-quote-label { display: inline-flex; flex: none; align-items: center; gap: 6px; height: 24px; padding: 0 10px 0 9px; border: var(--bw) solid var(--edge-control); border-radius: 999px; background: #0f223299; color: var(--muted); font-size: var(--t-11); font-weight: 600; letter-spacing: .01em; line-height: var(--l-11); white-space: nowrap; transition: border-color var(--ease), color var(--ease); }
.base-purchase--pro #purchase-quote-label::before { content: ""; flex: none; width: 6px; height: 6px; border-radius: 50%; background: var(--faint); }
.base-purchase--pro:has(#purchase-receive:not(:placeholder-shown)) #purchase-quote-label { border-color: #92e6ee40; color: var(--output); }
.base-purchase--pro:has(#purchase-receive:not(:placeholder-shown)) #purchase-quote-label::before { background: var(--cyan); }
.base-purchase--pro:has(#purchase-receive[aria-busy="true"]) #purchase-quote-label { border-color: #92e6ee4d; color: var(--cyan); }
.base-purchase--pro:has(#purchase-receive[aria-busy="true"]) #purchase-quote-label::before { background: var(--cyan); animation: pro-pulse 1.4s ease-in-out infinite; }
/* amount guards set by purchase/ui.mjs: invalid amount or short balance turns the pay panel edge amber */
.base-purchase--pro .base-field:has(> .base-field__amount > #purchase-pay[aria-invalid="true"]), .base-purchase--pro .base-field[data-funds="short"] { border-color: #efc29559; }
.base-purchase--pro .base-field[data-funds="short"] :is(#wallet-usdc-balance, #purchase-pay) { color: var(--error); }
.base-purchase--pro .base-field[data-funds="short"] > .base-field__label > span { color: var(--error); }
/* fresh-quote cue: a 180ms settle on the output only */
@keyframes base-fresh { from { opacity: .45; transform: translateY(2px); } }
.base-purchase--pro .base-field__amount.is-fresh > #purchase-receive { animation: base-fresh 180ms cubic-bezier(.22, 1, .36, 1); }

/* ---------- quote status: visually hidden unless it reports an error or a required action; the polite region is unchanged ---------- */
.base-purchase--pro .base-quote-action { display: block; min-height: 0; margin: 0; padding: 0; }
.base-purchase--pro #purchase-quote-status { position: absolute; width: 1px; height: 1px; margin: 0; padding: 0; overflow: hidden; clip-path: inset(50%); font-size: var(--t-12); line-height: var(--l-12); white-space: nowrap; }
.base-purchase--pro:is([data-purchase-phase="error"], [data-purchase-phase="expired"], [data-purchase-phase="rejected"], [data-amount-issue]) .base-quote-action { padding: var(--s-2) var(--x) 0; }
.base-purchase--pro:is([data-purchase-phase="error"], [data-purchase-phase="expired"], [data-purchase-phase="rejected"], [data-amount-issue]) #purchase-quote-status { position: relative; width: auto; height: auto; padding: 0 0 0 var(--s-4); overflow: visible; clip-path: none; color: var(--error); font-size: var(--t-12); line-height: var(--l-12); white-space: normal; overflow-wrap: anywhere; text-wrap: pretty; }
.base-purchase--pro:is([data-purchase-phase="error"], [data-purchase-phase="expired"], [data-purchase-phase="rejected"], [data-amount-issue]) #purchase-quote-status::before { content: ""; position: absolute; top: 6px; left: 0; width: 6px; height: 6px; border-radius: 50%; background: var(--error); animation: none; }

/* ---------- rate row: exchange rate and icon-only refresh, without a details dropdown ---------- */
.base-purchase--pro .base-rate-row { position: relative; margin: var(--s-1) 0 0; }
.base-purchase--pro .base-rate-row > #purchase-quote { position: absolute; top: 2px; right: var(--x); z-index: 1; display: inline-flex; align-items: center; justify-content: center; width: var(--tap); height: var(--tap); min-width: 0; min-height: 0; margin: 0; padding: 0; border: 0; border-radius: var(--r-2); background: none; box-shadow: none; color: var(--cyan); opacity: 1; filter: none; cursor: pointer; transition: background-color var(--ease), color var(--ease), transform var(--ease); }
.base-purchase--pro .base-rate-row > #purchase-quote::before { content: ""; flex: none; width: var(--i-2); height: var(--i-2); background: currentColor; -webkit-mask: var(--i-refresh) center / contain no-repeat; mask: var(--i-refresh) center / contain no-repeat; }
.base-purchase--pro .base-rate-row > #purchase-quote:disabled { background: none; color: var(--subtle); cursor: default; }
.base-purchase--pro .base-rate-row > #purchase-quote:focus-visible { outline: 2px solid var(--focus); outline-offset: -2px; }
.base-purchase--pro .base-rate-row > #purchase-quote:active:not(:disabled) { transform: scale(.94); filter: none; }
.base-purchase--pro .base-rate-reference { display: flex; align-items: center; min-height: 48px; margin: 0; padding: 0 var(--x); }
.base-purchase--pro #purchase-rate { flex: 1 1 auto; display: block; min-width: 0; margin: 0 48px 0 0; color: var(--body); font-size: var(--t-13); font-weight: 550; font-variant-numeric: tabular-nums; letter-spacing: -.01em; line-height: var(--l-13); overflow-wrap: anywhere; text-wrap: balance; }
.base-purchase--pro:has(#purchase-receive:not(:placeholder-shown)) #purchase-rate { color: var(--output); }
.base-purchase--pro #purchase-recovery-link::after { content: ""; flex: none; width: var(--i-1); height: var(--i-1); background: currentColor; -webkit-mask: var(--i-ext) center / contain no-repeat; mask: var(--i-ext) center / contain no-repeat; }

/* ---------- wallet row (connected). "Manage wallet" sits inside it once Review purchase exists ---------- */
.base-purchase--pro .base-wallet-summary { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; column-gap: var(--s-2); row-gap: 0; min-height: var(--tap); margin: var(--s-2) 0 0; padding: var(--s-1) var(--x); border: var(--bw) solid #4a847b4d; border-radius: var(--r-3); background: #112b3680; font-size: var(--t-12); line-height: var(--l-12); }
.base-purchase--pro #wallet-summary-network { display: inline-flex; align-items: center; gap: var(--s-2); color: var(--ok); font-size: var(--t-12); font-weight: 600; line-height: var(--l-12); white-space: nowrap; }
.base-purchase--pro #wallet-summary-network::before { content: ""; flex: none; width: 8px; height: 8px; border-radius: 50%; background: currentColor; box-shadow: 0 0 0 3px #8de1b226; }
.base-purchase--pro #wallet-summary-network[data-ready="false"] { color: var(--warn); }
.base-purchase--pro #wallet-summary-network[data-ready="false"]::before { box-shadow: 0 0 0 3px #f1c77b26; }
.base-purchase--pro .base-wallet-summary:has(#wallet-summary-network[data-ready="false"]) { border-color: #a68a4c66; background: #39342180; }
.base-purchase--pro #wallet-summary-address { color: var(--body); font-family: inherit; font-size: var(--t-12); font-weight: 500; line-height: var(--l-12); font-variant-numeric: tabular-nums; white-space: nowrap; }
.base-purchase--pro > #wallet-inline-status { margin: var(--s-2) 0 0; padding: 0 var(--x); color: var(--body); font-size: var(--t-12); line-height: var(--l-12); }
.base-purchase--pro:has(#wallet-summary-network[data-ready="false"]) > #wallet-inline-status { color: var(--warn-ink); }

/* ---------- the one primary action ---------- */
.base-purchase--pro .base-buy:is(:enabled, :disabled) {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--s-2);
  width: 100%;
  height: 56px;
  min-height: 0;
  margin: var(--s-2) 0 0;
  padding: 0 var(--s-5);
  border: var(--bw) solid var(--cta-edge);
  border-radius: var(--r-3);
  background: linear-gradient(105deg, var(--cta), var(--cta-2));
  box-shadow: var(--shadow-cta);
  color: var(--ink);
  font-size: var(--t-16);
  font-weight: 600;
  letter-spacing: -.01em;
  line-height: var(--l-16);
  text-align: center;
  white-space: nowrap;
  opacity: 1;
  filter: none;
  transform: none;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: transform var(--ease), filter var(--ease), box-shadow var(--ease), background var(--ease);
}
.base-purchase--pro .base-buy:disabled { border-color: var(--cta-off-edge); background: var(--cta-off); box-shadow: none; color: var(--cta-off-text); cursor: not-allowed; }
.base-purchase--pro .base-buy:focus-visible { outline: 2px solid var(--focus); outline-offset: 3px; }
.base-purchase--pro .base-buy:not(:disabled):active { transform: scale(.98); filter: brightness(.94); }
.base-purchase--pro #wallet-connect > svg { display: none; }
.base-purchase--pro #wallet-connect::before, .base-purchase--pro #purchase-review:disabled::before { content: ""; flex: none; width: var(--i-2); height: var(--i-2); background: currentColor; -webkit-mask: var(--i-wallet) center / contain no-repeat; mask: var(--i-wallet) center / contain no-repeat; }
.base-purchase--pro #purchase-review:disabled::before { -webkit-mask-image: var(--i-lock); mask-image: var(--i-lock); }
/* wrong network without an in-card switch: the honest "Manage wallet" label turns amber */
.base-purchase--pro:has(#wallet-summary:not([hidden]) #wallet-summary-network[data-ready="false"]) #wallet-connect:not(:disabled) { border-color: var(--warn-edge); background: var(--warn-bg); box-shadow: none; color: var(--warn-ink); }
/* once Review purchase exists, "Manage wallet" is a quiet link at the right end of the wallet row (same grid row) */
.base-purchase--pro:has(#purchase-review:not([hidden])) > #wallet-connect { grid-row: 5; grid-column: 2; align-self: center; justify-self: end; justify-content: flex-end; width: 112px; height: var(--tap); margin: var(--s-2) var(--s-4) 0 0; padding: 0; border: 0; border-radius: var(--r-2); background: none; box-shadow: none; color: var(--cyan); font-size: var(--t-12); font-weight: 600; line-height: var(--l-12); letter-spacing: 0; }
.base-purchase--pro:has(#purchase-review:not([hidden])) > #wallet-connect::before { display: none; }
.base-purchase--pro:has(#purchase-review:not([hidden])) > #wallet-connect:active { transform: none; filter: none; }
.base-purchase--pro:has(#purchase-review:not([hidden])) > #wallet-summary { justify-content: flex-start; padding-right: 120px; }
/* why Review is disabled: one quiet line under the CTA. Its slot stays reserved while a wallet is connected, so a quote
   arriving (which clears "Enter a USDC amount.") never moves the card. Disconnected, the empty line collapses. */
.base-purchase--pro > #purchase-cta-reason { margin: var(--s-2) var(--x) 0; color: var(--copy); font-size: var(--t-12); line-height: var(--l-12); text-align: center; text-wrap: pretty; }
.base-purchase--pro > #purchase-cta-reason:empty { display: none; }
.base-purchase--pro:has(#purchase-review:not([hidden])) > #purchase-cta-reason:empty { display: block; min-height: var(--l-12); }

/* ---------- receipt / recovery (row 11, takes the CTA slot) ---------- */
.base-purchase--pro > #purchase-recovery { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--s-2); margin: var(--s-2) 0 0; padding: var(--s-3) var(--x) var(--s-4); border: var(--bw) solid var(--recovery-edge); border-radius: var(--r-3); background: var(--recovery-bg); }
.base-purchase--pro #purchase-recovery :is(p, label) { margin: 0; overflow-wrap: anywhere; }
.base-purchase--pro #purchase-recovery :is(a, button) { overflow-wrap: anywhere; }
.base-purchase--pro #purchase-recovery-title { margin: 0; color: var(--ink); font-size: var(--t-14); font-weight: 650; letter-spacing: -.01em; line-height: var(--l-13); }
.base-purchase--pro #purchase-recovery-title:focus-visible { outline: 2px solid var(--focus); outline-offset: 4px; border-radius: 4px; }
.base-purchase--pro > #purchase-recovery[data-tone="neutral"], .base-purchase--pro:is([data-purchase-phase="pending"], [data-purchase-phase="approved"], [data-purchase-phase="confirmed"]) > #purchase-recovery { border-color: var(--edge-accent); background: linear-gradient(180deg, var(--raised), #10293ecc); box-shadow: var(--keyline); }
.base-purchase--pro > #purchase-recovery[data-tone="warn"] { border-color: var(--recovery-edge); background: var(--recovery-bg); box-shadow: none; }
.base-purchase--pro > #purchase-recovery[data-tone="warn"] #purchase-recovery-title { color: var(--warn-ink); }
.base-purchase--pro > #purchase-recovery[data-tone="success"] { border-color: var(--ok-edge); background: linear-gradient(180deg, #153b38, #10293ecc); box-shadow: var(--keyline); }
.base-purchase--pro > #purchase-recovery[data-tone="success"] #purchase-recovery-title { color: var(--ok); }
.base-purchase--pro > #purchase-recovery[data-tone="error"] { border-color: #edb79466; background: var(--recovery-bg); box-shadow: none; }
.base-purchase--pro > #purchase-recovery[data-tone="error"] #purchase-recovery-title { color: var(--danger); }
.base-purchase--pro #purchase-recovery-status, .base-purchase--pro #purchase-recovery-result { color: var(--ink-soft); font-size: var(--t-13); line-height: var(--l-13); }
.base-purchase--pro .base-recovery-details { min-width: 0; color: var(--muted); font-size: var(--t-12); }
.base-purchase--pro .base-recovery-details > summary { display: flex; align-items: center; gap: var(--s-2); min-height: var(--tap); cursor: pointer; list-style: none; }
.base-purchase--pro .base-recovery-details > summary::-webkit-details-marker { display: none; }
.base-purchase--pro .base-recovery-details > summary::after { content: ""; width: var(--i-2); height: var(--i-2); background: currentColor; -webkit-mask: var(--i-chevron) center / contain no-repeat; mask: var(--i-chevron) center / contain no-repeat; }
.base-purchase--pro .base-recovery-details[open] > summary::after { transform: rotate(180deg); }
.base-purchase--pro .base-recovery-details > summary:focus-visible { outline: 2px solid var(--focus); outline-offset: 3px; border-radius: 4px; }
.base-purchase--pro .base-recovery-details__body { display: grid; min-width: 0; gap: var(--s-3); padding-bottom: var(--s-2); }
.base-purchase--pro #purchase-recovery-ref { display: grid; gap: var(--s-1); }
.base-purchase--pro #purchase-recovery-ref span { color: var(--muted); font-size: var(--t-10); font-weight: 600; letter-spacing: .08em; line-height: var(--l-10); text-transform: uppercase; }
.base-purchase--pro #purchase-recovery-ref code { color: var(--number); font-family: var(--mono); font-size: var(--t-11); line-height: var(--l-11); overflow-wrap: anywhere; user-select: all; }
.base-purchase--pro .base-recovery-hint { color: var(--muted); font-size: var(--t-12); line-height: var(--l-12); }
.base-purchase--pro .base-recovery-hint:empty { display: none; }
.base-purchase--pro #purchase-recovery-link { justify-self: start; display: inline-flex; align-items: center; gap: var(--s-1); min-height: var(--tap); margin: -4px 0; color: var(--cyan); font-size: var(--t-12); font-weight: 550; line-height: var(--l-12); text-decoration: none; }
/* the replacement-hash reveal: a full-width row with a chevron, like a summary */
.base-purchase--pro #purchase-recovery-replace { display: flex; align-items: center; justify-content: space-between; gap: var(--s-2); width: 100%; min-height: var(--tap); margin: -4px 0; padding: 0; border: 0; background: none; color: var(--cyan); font: inherit; font-size: var(--t-12); font-weight: 600; line-height: var(--l-12); text-align: left; cursor: pointer; }
.base-purchase--pro #purchase-recovery-replace::after { content: ""; flex: none; width: var(--i-2); height: var(--i-2); margin: 0; border: 0; background: currentColor; -webkit-mask: var(--i-chevron) center / contain no-repeat; mask: var(--i-chevron) center / contain no-repeat; transform: none; transition: transform var(--ease); }
.base-purchase--pro #purchase-recovery-replace[aria-expanded="true"]::after { transform: rotate(180deg); }
.base-purchase--pro #purchase-recovery-replace:focus-visible { outline: 2px solid var(--focus); outline-offset: 3px; border-radius: 6px; }
.base-purchase--pro #purchase-recovery-hash-label { color: var(--muted); font-size: var(--t-12); line-height: var(--l-12); }
.base-purchase--pro #purchase-recovery-hash { width: 100%; min-width: 0; height: var(--tap); margin: 0; padding: 0 var(--s-4); border: var(--bw) solid var(--edge); border-radius: var(--r-2); outline: 0; background: var(--inset); color: var(--number); font-family: var(--mono); font-size: var(--t-16); line-height: var(--l-16); }
.base-purchase--pro #purchase-recovery-hash::placeholder { color: var(--placeholder); }
.base-purchase--pro #purchase-recovery-hash:focus-visible { outline: 2px solid var(--focus-field); outline-offset: -2px; }
.base-purchase--pro #purchase-recovery-hash[aria-invalid="true"] { border-color: var(--warn-edge); }
.base-purchase--pro :is(#purchase-recovery-check, #purchase-recovery-continue) { width: 100%; height: 52px; min-height: 0; margin: 0; padding: 0 var(--s-4); border: var(--bw) solid var(--cta-edge); border-radius: var(--r-2); background: linear-gradient(105deg, var(--cta), var(--cta-2)); box-shadow: var(--shadow-cta); color: var(--ink); font: inherit; font-size: var(--t-15); font-weight: 600; line-height: var(--l-15); opacity: 1; cursor: pointer; }
.base-purchase--pro :is(#purchase-recovery-check, #purchase-recovery-continue):disabled { border-color: var(--cta-off-edge); background: var(--cta-off); box-shadow: none; color: var(--cta-off-text); cursor: not-allowed; }
.base-purchase--pro :is(#purchase-recovery-check, #purchase-recovery-continue):focus-visible { outline: 2px solid var(--focus); outline-offset: 3px; }
.base-purchase--pro #purchase-recovery-check { border-color: var(--edge-control); background: transparent; box-shadow: none; color: var(--cyan); }
/* while a record is shown, the disabled Review button, the duplicate status line and Refresh step back */
.base-purchase--pro:has(#purchase-recovery:not([hidden])) #purchase-review:disabled { display: none; }
.base-purchase--pro:has(#purchase-recovery:not([hidden])) .base-quote-action { min-height: 0; padding: 0; }
.base-purchase--pro:has(#purchase-recovery:not([hidden])) #purchase-quote-status { position: absolute; width: 1px; height: 1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.base-purchase--pro:has(#purchase-recovery:not([hidden])) #purchase-quote { display: none; }
.base-purchase--pro[data-purchase-pending="true"] > .base-preview-fields { opacity: .8; }
/* locked fieldset (wallet operation or pending record) */
.base-purchase--pro .base-preview-fields:disabled .base-field { border-color: #263e5680; }
.base-purchase--pro .base-preview-fields:disabled .base-field :is(input, textarea) { color: var(--subtle); }
.base-purchase--pro .base-preview-fields:disabled .base-amount-presets button::before { border-color: #2e4d6380; background: #0f223280; }
.base-purchase--pro .base-preview-fields:disabled .base-amount-presets button[aria-pressed="true"]::before { border-color: #8ce1ec40; }
/* no-JS note and card links */
.base-purchase--pro noscript p { margin: var(--s-2) 0 0; padding: 0 var(--x); color: var(--body); font-size: var(--t-12); line-height: var(--l-12); }
.base-purchase--pro a:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; border-radius: 6px; }
/* loading skeleton (CSS only, no fake digits) */
.base-purchase--pro .base-field__amount:has(> #purchase-receive[aria-busy="true"][data-preview="empty"])::after { content: ""; position: absolute; top: 50%; right: 0; width: min(52%, 176px); height: 24px; border-radius: var(--r-1); background: linear-gradient(90deg, #92e6ee12 20%, #92e6ee33 50%, #92e6ee12 80%) 0 0 / 220% 100%; transform: translateY(-50%); animation: pro-shimmer 1.3s linear infinite; pointer-events: none; }
.base-purchase--pro #purchase-receive[aria-busy="true"][data-preview="empty"], .base-purchase--pro #purchase-receive[aria-busy="true"][data-preview="empty"]::placeholder { color: transparent; }
.base-purchase--pro:has(#purchase-receive[aria-busy="true"][data-preview="empty"]) #purchase-rate { width: min(100%, 132px); border-radius: 4px; background: linear-gradient(90deg, #92e6ee12 20%, #92e6ee33 50%, #92e6ee12 80%) 0 0 / 220% 100%; color: transparent; animation: pro-shimmer 1.3s linear infinite; }
.base-purchase--pro #purchase-receive[data-preview="indicative"] { color: #afcde6; }
@keyframes pro-shimmer { from { background-position: 110% 0; } to { background-position: -110% 0; } }
@keyframes pro-pulse { 0%, 100% { box-shadow: 0 0 0 0 #92e6ee66; } 50% { box-shadow: 0 0 0 4px #92e6ee00; } }
/* hover: fine pointers only (no sticky hover on touch) */
@media (hover: hover) and (pointer: fine) {
  .base-purchase--pro .base-field:not(.base-field--receive):hover { border-color: var(--edge-control); }
  .base-purchase--pro .base-amount-presets button:not(:disabled):hover { color: var(--ink); }
  .base-purchase--pro .base-amount-presets button:not(:disabled):not([aria-pressed="true"]):hover::before { border-color: var(--edge-control-hover); background: var(--control-hover); }
  .base-purchase--pro .base-quote-details > summary:hover { background: #85b2e10a; }
  .base-purchase--pro .base-rate-row > #purchase-quote:not(:disabled):hover { background: #1c415866; }
  .base-purchase--pro :is(.base-quote-details__body > a, #purchase-recovery-link):hover { color: var(--link-hover); }
  .base-purchase--pro .base-buy:not(:disabled):hover { background: linear-gradient(105deg, var(--cta-hover), var(--cta-hover-2)); box-shadow: inset 0 1px 0 #b5eaff40, 0 12px 32px #057fc540, 0 0 0 1px #2094f333; transform: translateY(-1px); }
  .base-purchase--pro .base-buy:not(:disabled):hover:active { transform: scale(.98); }
  .base-purchase--pro:has(#wallet-summary:not([hidden]) #wallet-summary-network[data-ready="false"]) #wallet-connect:not(:disabled):hover { border-color: var(--warn); background: var(--warn-bg); box-shadow: none; }
  .base-purchase--pro:has(#purchase-review:not([hidden])) > #wallet-connect:hover { background: none; box-shadow: none; transform: none; color: var(--link-hover); text-decoration: underline; text-underline-offset: 3px; }
  .base-purchase--pro :is(#purchase-recovery-check, #purchase-recovery-continue):not(:disabled):hover { filter: brightness(1.06); }
}
/* responsive: larger type and token marks from 520px; tighter chips with four visible below 375px (WebKit's classic
   scrollbar leaves 15px less, so the pay panel's own width decides the last step) */
@media (min-width: 420px) {
  .base-purchase--pro { --title: var(--t-26); --title-l: var(--l-26); }
}
@media (min-width: 520px) {
  .base-purchase--pro { --amount: 40px; --row: 56px; --symbol: var(--t-18); --icon: 40px; }
  .base-purchase--pro .base-purchase__head { padding-top: var(--s-3); padding-bottom: var(--s-4); }
}
@media (max-width: 439px) {
  .base-purchase--pro .base-purchase-network { gap: 5px; width: 100px; font-size: var(--t-11); line-height: var(--l-11); }
}
@media (max-width: 374px) {
  .base-purchase--pro { --x: 14px; --r-card: calc(var(--r-3) + var(--pad)); --amount: 28px; --icon: 32px; --symbol: var(--t-15); }
  .base-purchase--pro .base-field:not(.base-field--receive) { column-gap: var(--s-2); }
  .base-purchase--pro .base-amount-presets:has(> #purchase-max:not([hidden])) { --chip: 44px; --chip-gap: 0px; }
  .base-purchase--pro .base-purchase-network { height: 22px; }
  .base-purchase--pro #purchase-recovery-replace { font-size: var(--t-11); line-height: var(--l-11); }
}
@container pay (max-width: 230px) {
  .base-purchase--pro .base-amount-presets:has(> #purchase-max:not([hidden])) { --chip: 40px; }
}
@media (prefers-reduced-motion: reduce) {
  .base-purchase--pro *, .base-purchase--pro *::before, .base-purchase--pro *::after { animation: none !important; transition-duration: 0s !important; }
  .base-purchase--pro .base-buy:not(:disabled):hover, .base-purchase--pro .base-buy:not(:disabled):active, .base-purchase--pro .base-amount-presets button:active, .base-purchase--pro #purchase-quote:active { transform: none !important; }
}

/* ========================================================================================================================
   4. Dialogs: the wallet picker / account view and the transaction review share one surface. Palette: #102130 / #142c3e /
   #1c3b4e / #345166 / #284151, hint #adc5d7 / #9fbecd, cyan #92e6ee, mint #8de1b2, amber #ead398 / #a68a4c.
   The dialog width is rounded to an even pixel, so two-column rows inside it split on whole pixels.
   ======================================================================================================================== */
.base-wallet-dialog { --dialog-pad: var(--s-6); box-sizing: border-box; width: round(down, min(460px, calc(100% - 24px)), 2px); max-height: min(calc(100dvh - 48px), 800px); margin: auto; padding: var(--dialog-pad); overflow-y: auto; overscroll-behavior: contain; border: var(--bw) solid #345166; border-radius: var(--r-3); background: radial-gradient(ellipse at 100% 0, #20576724, transparent 50%), #102130; color: #ecf4fb; box-shadow: 0 32px 100px #0009; font-family: inherit; font-size: var(--t-13); line-height: var(--l-13); }
.base-wallet-dialog::backdrop { background: #030b15bf; backdrop-filter: blur(5px); }
.base-wallet-dialog button { font-family: inherit; }
.base-wallet-dialog button:disabled { cursor: wait; opacity: .6; }
.base-wallet-dialog :is(button, a, summary):focus-visible { outline: 2px solid var(--focus); outline-offset: 3px; }
.base-dialog-eyebrow { display: block; margin-bottom: var(--s-3); color: #9fbecd; font-size: var(--t-10); font-weight: 600; letter-spacing: .16em; line-height: var(--l-10); }
.base-wallet-dialog__head { display: flex; align-items: center; justify-content: space-between; gap: var(--s-3); margin-bottom: var(--s-3); }
.page-base .base-wallet-dialog__head h2 { flex: 1 1 auto; min-width: 0; margin: 0; font-size: var(--t-20); font-weight: 650; line-height: var(--l-20); letter-spacing: -.025em; }
@media (max-width: 370px) { .page-base .base-wallet-dialog__head h2 { font-size: var(--t-18); line-height: var(--l-18); } }
.base-wallet-close { display: grid; flex: none; place-items: center; width: var(--tap); height: var(--tap); margin-right: calc(-1 * var(--s-2)); padding: 0; border: 0; border-radius: var(--r-2); color: #adc5d7; background: transparent; cursor: pointer; font: inherit; font-size: var(--t-24); line-height: var(--l-24); transition: background var(--ease), color var(--ease); }
.base-wallet-close:hover { background: #173047; color: #ecf4fb; }
.page-base .base-wallet-dialog > p { margin: 0 0 var(--s-5); color: #bad0df; font-size: var(--t-12); line-height: var(--l-12); }
/* picker rows: one flat list of icon + name. Wallet icon (EIP-6963 data: image) or the initial letter; the Coinbase mark is
   the brand's own file. A row's note (small) shows only while it connects, or while the Coinbase connector loads or fails. */
.base-wallet-dialog .base-small-label { margin: 0 0 var(--s-2); }
.base-wallet-list { display: grid; gap: var(--s-2); margin: 0; }
.base-wallet-list:not(:empty) { margin-bottom: var(--s-2); }
.base-wallet-option { display: flex; align-items: center; gap: var(--s-3); width: 100%; min-height: 64px; margin: 0; padding: var(--s-3) var(--s-4); border: var(--bw) solid #2c4055; border-radius: var(--r-2); color: #edf4fc; background: #142c3e; text-align: left; cursor: pointer; font-size: var(--t-15); font-weight: 600; line-height: var(--l-15); transition: border-color var(--ease), background var(--ease); }
.base-wallet-option:hover:not(:disabled) { border-color: #79c7da; background: #1c3b4e; }
.base-wallet-option > span:nth-child(2) { flex: 1; min-width: 0; overflow-wrap: anywhere; }
.base-wallet-option small { display: block; color: #a4bece; font-size: var(--t-11); font-weight: 400; line-height: var(--l-11); }
.base-wallet-option small:empty { display: none; }
/* the Coinbase acceptance tag: neutral, small; its full sentence is a visually hidden span inside it (and its title) */
.base-wallet-tag { position: relative; flex: none; margin-left: auto; padding: 0 var(--s-2); border: var(--bw) solid #345166; border-radius: var(--r-1); color: #adc5d7; background: #102130; font-size: var(--t-11); font-weight: 500; line-height: var(--l-11); white-space: nowrap; }
.base-wallet-option__icon { display: grid; flex: none; place-items: center; width: 36px; height: 36px; border-radius: var(--r-1); color: #c0e8ff; background: #294964; font-size: var(--t-18); line-height: var(--l-18); }
.base-wallet-option__icon--image, .base-wallet-option__icon--coinbase.base-wallet-option__icon--image { background: transparent; }
.base-wallet-option__icon--coinbase { color: white; background: #1652f0; }
.base-wallet-option__icon > img { display: block; width: 32px; height: 32px; border-radius: var(--r-1); object-fit: contain; }
.base-wallet-dialog .base-wallet-hint { margin: var(--s-3) 0 0; color: #9fbecd; font-size: var(--t-11); line-height: var(--l-11); }
.base-wallet-dialog .base-wallet-hint:empty { display: none; }
.base-wallet-dialog #wallet-choices > .base-wallet-hint:last-child { margin-top: var(--s-4); text-align: center; }
/* text actions: full rows, 44px tall, so every control has a whole-pixel box */
.base-wallet-text, .base-wallet-actions a { display: flex; align-items: center; width: 100%; min-height: var(--tap); margin: 0; padding: 0; border: 0; background: transparent; color: #82caff; font-size: var(--t-12); font-weight: 550; line-height: var(--l-12); text-decoration: none; cursor: pointer; }
.base-wallet-actions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--s-3); margin: var(--s-2) 0 0; }
.base-wallet-actions a { justify-content: flex-end; }
.base-wallet-actions--footer { margin-top: var(--s-2); }
.base-wallet-actions--footer > button:last-child { justify-content: flex-end; }
.base-wallet-identity { padding: var(--s-4) var(--s-4) 0; background: #142c3e; border: var(--bw) solid #2c4055; border-radius: var(--r-2); }
.base-wallet-identity code { display: block; margin-top: var(--s-2); color: #e8f1fc; font-family: var(--mono); font-size: var(--t-13); line-height: var(--l-13); overflow-wrap: anywhere; user-select: all; }
#wallet-network[data-network]::before { content: ""; display: inline-block; width: 8px; height: 8px; margin-right: var(--s-2); border-radius: 50%; background: #a4bece; vertical-align: 1px; }
#wallet-network[data-network="base"] { color: #8de1b2; }
#wallet-network[data-network="base"]::before { background: #8de1b2; }
#wallet-network[data-network="other"] { color: #ead398; }
#wallet-network[data-network="other"]::before { background: #f1c77b; }
.page-base .base-wallet-switch { min-height: 48px; margin: var(--s-4) 0 0; font-size: var(--t-13); line-height: var(--l-13); border-radius: var(--r-2); }
.base-wallet-balances { margin: var(--s-2) 0 0; }
.base-wallet-balances > div { display: flex; align-items: baseline; justify-content: space-between; gap: var(--s-3); padding: var(--s-3) 0; border-bottom: var(--bw) solid #284151; }
.base-wallet-balances > div:last-child { border-bottom: 0; }
.base-wallet-balances dt { color: var(--muted); font-size: var(--t-13); line-height: var(--l-13); }
.base-wallet-balances dd { max-width: 62%; margin: 0; color: #e1eefc; font-size: var(--t-14); line-height: var(--l-13); font-variant-numeric: tabular-nums; text-align: right; overflow-wrap: anywhere; }
.base-wallet-dialog #wallet-balance-note { margin-top: var(--s-1); }
.base-wallet-dialog .base-wallet-message { margin: var(--s-3) 0 0; color: #dfd6b9; font-size: var(--t-12); line-height: var(--l-12); }
.base-wallet-message:empty { display: none; }
.base-wallet-dialog .base-wallet-message.is-error { padding: var(--s-2) var(--s-3); border: var(--bw) solid #a68a4c66; border-radius: var(--r-1); background: #39342180; color: #ead398; }
/* connecting: the chosen row stays lit with a spinner; the rest of the picker folds away (DOM order unchanged) */
.base-wallet-dialog .base-wallet-option.is-connecting { opacity: 1; cursor: progress; border-color: #79c7da; background: #1c3b4e; }
.base-wallet-dialog .base-wallet-option.is-connecting small { color: #92e6ee; }
.base-wallet-dialog .base-wallet-option.is-connecting::after { content: ""; flex: none; box-sizing: border-box; width: 18px; height: 18px; margin-left: auto; border: 2px solid #92e6ee33; border-top-color: #92e6ee; border-radius: 50%; animation: wpc-spin .8s linear infinite; }
@keyframes wpc-spin { to { transform: rotate(360deg); } }
.base-wallet-dialog[data-wallet-phase="connecting"] :is(#wallet-scan, #wallet-empty, .base-wallet-option:not(.is-connecting)) { display: none; }
.base-wallet-dialog[open][data-wallet-phase="connecting"] { display: flex; flex-direction: column; }
.base-wallet-dialog[data-wallet-phase="connecting"] #wallet-choices { display: contents; }
.base-wallet-dialog[data-wallet-phase="connecting"] #wallet-list { margin: 0; }
.base-wallet-dialog[data-wallet-phase="connecting"] #wallet-list:not(:has(> .is-connecting)) { display: none; }
/* the chosen wallet becomes one centred block: icon, name, "Confirm in <wallet>", spinner */
.base-wallet-dialog[data-wallet-phase="connecting"] .base-wallet-option.is-connecting { flex-direction: column; justify-content: center; gap: var(--s-2); padding: var(--s-6) var(--s-4); text-align: center; }
.base-wallet-dialog[data-wallet-phase="connecting"] .base-wallet-option.is-connecting > span:nth-child(2) { flex: none; }
.base-wallet-dialog[data-wallet-phase="connecting"] .base-wallet-option.is-connecting small { margin-top: var(--s-1); font-size: var(--t-13); line-height: var(--l-13); }
.base-wallet-dialog[data-wallet-phase="connecting"] .base-wallet-option.is-connecting .base-wallet-option__icon { width: 48px; height: 48px; font-size: var(--t-24); line-height: var(--l-24); }
.base-wallet-dialog[data-wallet-phase="connecting"] .base-wallet-option.is-connecting .base-wallet-option__icon > img { width: 48px; height: 48px; }
.base-wallet-dialog[data-wallet-phase="connecting"] .base-wallet-option.is-connecting .base-wallet-tag { margin: 0; }
.base-wallet-dialog[data-wallet-phase="connecting"] .base-wallet-option.is-connecting::after { margin: var(--s-1) 0 0; }
.base-wallet-dialog[data-wallet-phase="connecting"] #wallet-choices > .base-wallet-hint:last-child { order: 2; margin: var(--s-4) 0 0; }
.base-wallet-dialog[data-wallet-phase="connecting"] .base-wallet-message { order: 1; margin: var(--s-3) 0 0; color: #9fbecd; font-size: var(--t-11); line-height: var(--l-11); text-align: center; }
.base-wallet-dialog[data-wallet-phase="connecting"] #wallet-cancel { order: 1; align-self: stretch; justify-content: center; width: 100%; min-height: 48px; margin: var(--s-3) 0 0; padding: 0 var(--s-4); border: var(--bw) solid #345166; border-radius: var(--r-2); background: #142c3e; color: #cee2ef; font-size: var(--t-13); font-weight: 600; line-height: var(--l-13); }
.base-wallet-dialog[data-wallet-phase="connecting"] #wallet-cancel:hover { border-color: #79c7da; background: #1c3b4e; }
/* failed attempt: the row that failed carries an amber edge and points at the message */
.base-wallet-dialog .base-wallet-option.is-failed, .base-wallet-dialog .base-wallet-option.is-failed:hover:not(:disabled) { border-color: #a68a4c; }
/* copy feedback: 1.6 s done state. Wallet: text button turns mint with a check */
.base-wallet-dialog #wallet-copy.is-done { color: #8de1b2; }
.base-wallet-dialog #wallet-copy.is-done::before { content: ""; flex: none; width: var(--i-2); height: var(--i-2); margin-right: 6px; background: currentColor; -webkit-mask: var(--i-check) center / contain no-repeat; mask: var(--i-check) center / contain no-repeat; }
@media (max-width: 600px) { .base-wallet-dialog { --dialog-pad: var(--s-5); } }
@media (max-width: 370px) { .base-wallet-dialog { --dialog-pad: var(--s-4); } }
@media (prefers-reduced-motion: reduce) {
  .base-wallet-dialog .base-wallet-option.is-connecting::after { border-color: #92e6ee; border-top-color: #92e6ee33; }
}
/* Minimal dialogs (owner, 2026-10-01): the Coinbase acceptance fact is the row's tag; the real-funds line is the caption under Confirm. */
#wallet-dialog { width: min(460px, calc(100% - 32px)); border-color: #00d4ff33; border-radius: 24px; background: radial-gradient(ellipse at 100% 0, #2094f31a, transparent 65%), #101c2e; }
#wallet-dialog[open] { animation: base-wallet-open 180ms ease-out; }
#wallet-dialog .base-wallet-option { min-height: 72px; border-color: #254057; background: #14243a; border-radius: 14px; }
#wallet-dialog .base-wallet-option:hover:not(:disabled) { border-color: #2094f3; background: #192d46; }
#wallet-dialog .base-wallet-option:active:not(:disabled) { background: #203754; }
#wallet-dialog .base-wallet-option__icon { width: 40px; height: 40px; }
#wallet-dialog .base-wallet-tag { padding: 3px 7px; font-size: 10px; color: #b8d4eb; background: #0e1a2b; border-color: #294760; }
#wallet-coinbase:not(.is-connecting) { display: grid; grid-template-columns: 40px minmax(0, 1fr); column-gap: 12px; row-gap: 3px; }
#wallet-coinbase:not(.is-connecting) > .base-wallet-option__icon { grid-row: 1 / 3; }
#wallet-coinbase:not(.is-connecting) > .base-wallet-tag { grid-column: 2; justify-self: start; margin: 0; }
.base-wallet-downloads { display: flex; flex-wrap: wrap; gap: 0 16px; margin-top: 20px; padding-top: 12px; border-top: 1px solid #284151; }
.base-wallet-downloads > span { width: 100%; color: #a8bfd2; font-size: 12px; }
.base-wallet-downloads a { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; font-size: 12px; color: #cbe3f6; }
.base-wallet-downloads img { object-fit: contain; }
#wallet-dialog[data-wallet-phase="connecting"] .base-wallet-downloads { display: none; }
@keyframes base-wallet-open { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }
@media (max-width: 600px) {
  #wallet-dialog { width: 100%; max-width: none; max-height: calc(100dvh - 24px); margin: auto 0 0; border-radius: 24px 24px 0 0; padding: 24px 20px calc(20px + env(safe-area-inset-bottom)); border-bottom: 0; }
  #wallet-dialog::before { content: ""; display: block; width: 36px; height: 4px; margin: -12px auto 12px; border-radius: 4px; background: #405670; }
}
@media (prefers-reduced-motion: reduce) { #wallet-dialog[open] { animation: none; } }

/* Connected account: original DNA conduit, owner-supplied Base mark, and one network action. */
.base-wallet-conduit { margin: -4px calc(-1 * var(--dialog-pad)) 12px; padding: 0 2px; background: radial-gradient(ellipse at center, #00d4ff0d, transparent 70%); }
.base-wallet-conduit .trust__conduit { margin: 0; }
.base-wallet-conduit .trust__conduit svg { max-height: 76px; }
.base-wallet-conduit :is(.tlc-front, .tlc-back, .tlc-rungs line) { stroke: url(#tlcFlow-wallet); }
#wallet-dialog:not([open]) .base-wallet-conduit *, .base-motion-paused .base-wallet-conduit * { animation-play-state: paused; }
#wallet-account .base-wallet-identity { padding: 14px 16px 0; border-color: #29415b; background: linear-gradient(120deg, #142b42, #122238); border-radius: 16px; }
.base-wallet-identity__head { display: flex; align-items: center; gap: 10px; }
.base-wallet-identity__head > div { flex: 1; min-width: 0; }
#wallet-account-icon { flex: none; width: 36px; height: 36px; border-radius: 10px; background: #0c192a; color: #cdeaff; font-weight: 600; }
#wallet-account-icon img { width: 28px; height: 28px; object-fit: contain; }
#wallet-account .base-small-label { display: block; margin: 0 0 2px; color: #94abc3; font-size: 9px; line-height: 13px; letter-spacing: .13em; }
#wallet-name { display: block; font-size: 15px; font-weight: 600; line-height: 20px; overflow-wrap: anywhere; }
.base-wallet-connected { flex: none; width: 7px; height: 7px; border-radius: 50%; background: #67e8a5; box-shadow: 0 0 0 4px #67e8a50d; }
#wallet-account #wallet-address { margin-top: 12px; color: #afc5db; font-size: 11px; line-height: 17px; }
#wallet-account .base-wallet-actions { margin-top: 5px; }
.base-wallet-network { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-top: 14px; min-height: 36px; font-size: 12px; }
.base-wallet-network > span { color: #9cb3ca; }
.base-wallet-network strong { max-width: 65%; font-size: 12px; font-weight: 500; text-align: right; overflow-wrap: anywhere; }
#wallet-account .base-wallet-switch { margin-top: 8px; min-height: 44px; }
.base-wallet-assets-heading { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 20px; }
.page-base .base-wallet-assets-heading h3 { margin: 0; font-size: 12px; font-weight: 600; letter-spacing: .01em; }
.base-wallet-assets-heading > span { color: #92abc1; font-size: 10px; }
#wallet-account .base-wallet-balances { margin-top: 8px; }
#wallet-account .base-wallet-balances > div { align-items: center; min-height: 56px; padding: 8px 0; border-color: #253a51; }
#wallet-account .base-wallet-balances dt { display: flex; align-items: center; gap: 10px; color: #e2ecf7; }
#wallet-account .base-wallet-balances dt small { display: block; margin-top: 2px; color: #8da7bf; font-size: 10px; line-height: 14px; }
#wallet-account .base-wallet-balances dd { font-size: 15px; font-weight: 550; }
.base-wallet-token { display: inline-flex; align-items: center; justify-content: center; flex: none; width: 30px; height: 30px; border-radius: 50%; object-fit: contain; }
.base-wallet-token--eth { background: #243854; color: #c8dbff; font-size: 24px; }
#wallet-account .base-wallet-actions--footer { margin-top: 14px; padding-top: 4px; border-top: 1px solid #253a51; }
#wallet-disconnect { color: #b9c7d7; }
@media (max-width: 600px) { #wallet-dialog { --dialog-pad: 20px; } }

/* spec-gap: WP-B */
/* ========================================================================================================================
   5. Shared chrome: emergency notice bar, continuity, verify row, contract and pool records (every page that carries them)
   ======================================================================================================================== */
.base-notice-bar { background: #142a3b; border-bottom: var(--bw) solid #34607a; box-shadow: inset 3px 0 0 #6ca3cf; }
.base-notice-bar .base-wrap { display: grid; gap: var(--s-1); padding-block: var(--s-2); }
.page-base .base-notice-bar p { margin: 0; color: #d0dfef; font-size: var(--t-12); line-height: var(--l-12); }
.base-notice-bar strong { color: #e3eefb; font-weight: 600; }
.base-notice-bar p[data-notice-kind="paused"] strong, .base-notice-bar p[data-notice-kind="security"] strong, .base-notice-bar p[data-notice-kind="backing-shortfall"] strong { color: #ead398; }
.base-notice-bar__since { color: var(--label); font-size: var(--t-11); line-height: var(--l-11); white-space: nowrap; }
/* continuity banner (guide and proof of backing) and the slim line */
.base-continuity { display: flex; align-items: center; gap: var(--s-6); padding: var(--s-6) var(--s-8); border: var(--bw) solid rgba(0, 212, 255, 0.18); border-radius: var(--r-3); background: linear-gradient(110deg, #12273999, #0c182366); }
.base-continuity__mark { display: grid; flex: none; place-items: center; width: 48px; height: 48px; border: var(--bw) solid #276077; border-radius: var(--r-2); background: #0c273b; }
.base-continuity__mark img { display: block; width: 32px; height: 28px; }
.base-continuity strong { display: block; font-size: var(--t-15); font-weight: 600; line-height: var(--l-15); }
.page-base .base-continuity p { max-width: 720px; margin: var(--s-1) 0 0; font-size: var(--t-12); line-height: var(--l-12); }
.base-continuity > a { display: inline-flex; flex: none; align-items: center; gap: var(--s-2); min-height: var(--tap); margin-left: auto; font-size: var(--t-12); font-weight: 550; line-height: var(--l-12); }
.base-continuity-slot { margin: 40px 0 56px; }
.base-continuity-slot > .base-document-note { margin: 0 0 var(--s-3); }
.page-base .base-continuity-line { margin: 0; text-align: center; font-size: var(--t-12); line-height: var(--l-12); }
.base-continuity-line a { display: inline-block; padding: 13px var(--s-2); color: #b0c5d5; text-wrap: balance; }
.base-continuity-line a:hover { color: var(--focus); }
.base-continuity-line a:focus-visible { outline: 2px solid var(--focus); outline-offset: -2px; border-radius: var(--r-1); }
.base-continuity-line img { display: inline-block; width: 14px; height: 11px; margin-right: 7px; vertical-align: -1px; }
.base-continuity-line__tail { white-space: nowrap; }
.base-continuity-line__sep { display: inline-block; margin: 0 7px; color: #55748a; }
/* "Verify before you sign": a collapsed row holding the compact contract, the approved pool and the official-channels line */
.base-verify { border: var(--bw) solid var(--tile-edge); border-radius: var(--r-2); background: var(--tile); }
.base-verify > summary { display: flex; align-items: center; gap: var(--s-2); min-height: 48px; padding: var(--s-2) var(--s-4); list-style: none; color: #cad9e9; font-size: var(--t-12); font-weight: 550; line-height: var(--l-12); cursor: pointer; }
.base-verify > summary > svg { flex: none; width: var(--i-2); height: var(--i-2); color: #9fbdd8; }
.base-verify > summary:focus-visible { outline: 2px solid var(--focus); outline-offset: -2px; border-radius: var(--r-2); }
.base-verify__body { display: grid; gap: var(--s-2); padding: 0 var(--s-4) var(--s-4); }
.base-verify__body .base-contract { margin: 0; }
.page-base .base-verify__body > p { margin: 0; color: #b6c9dd; font-size: var(--t-11); line-height: var(--l-11); }
/* contract and pool records: address, copy control, verification indicator, official-channels line */
.base-contract { margin: var(--s-5) 0 0; padding: var(--s-4); background: #091524; border: var(--bw) solid #27506b; border-radius: var(--r-2); }
.base-contract__label { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: var(--s-2) var(--s-3); min-height: var(--s-6); }
.base-contract__label .base-small-label { font-size: var(--t-10); letter-spacing: 0.1em; line-height: var(--l-10); }
.base-contract__label a { display: inline-flex; align-items: center; gap: 6px; min-height: var(--tap); margin: -8px 0; font-size: var(--t-11); line-height: var(--l-11); }
.base-contract__address { display: flex; align-items: center; gap: var(--s-3); margin: var(--s-2) 0; }
.base-contract__address code { display: block; min-width: 0; color: var(--cyan-soft); font-family: var(--mono); font-size: var(--t-11); line-height: var(--l-11); overflow-wrap: anywhere; user-select: all; }
.base-copy { display: grid; flex: none; place-items: center; width: var(--tap); height: var(--tap); padding: 0; border: var(--bw) solid #285273; border-radius: var(--r-1); background: #10283e; color: #9ddaf8; cursor: pointer; transition: background var(--ease), border-color var(--ease), color var(--ease); }
.base-copy svg { width: var(--i-2); height: var(--i-2); }
.base-copy:hover { background: #193c57; border-color: #72b4dc; }
.base-copy:focus-visible { outline: 2px solid var(--focus); outline-offset: 3px; }
.base-copy.is-done { border-color: #4a847b; background: #153b38; color: #8de1b2; }
.base-copy.is-done > svg { display: none; }
.base-copy.is-done::before { content: ""; width: var(--i-2); height: var(--i-2); background: currentColor; -webkit-mask: var(--i-check) center / contain no-repeat; mask: var(--i-check) center / contain no-repeat; }
.page-base .base-contract p { margin: 0; color: #b4c7dd; font-size: var(--t-11); line-height: var(--l-11); }
.page-base .base-contract p + p { margin-top: var(--s-1); }
.base-contract p code { color: var(--cyan-soft); font-family: var(--mono); font-size: var(--t-10); overflow-wrap: anywhere; }
.base-contract__verified { display: flex; align-items: flex-start; gap: 6px; }
.base-contract__verified svg { flex: none; width: var(--i-1); height: var(--i-1); margin-top: 2px; color: var(--cyan-soft); stroke-width: var(--stroke-check); }
.base-copy-status { display: block; color: #bddcff; font-size: var(--t-11); line-height: var(--l-11); }
.base-copy-status:not(:empty) { margin-top: var(--s-2); }
@media (max-width: 1050px) {
  .base-continuity { flex-wrap: wrap; }
  .base-continuity > div:nth-child(2) { flex: 1; }
  .base-continuity > a { margin-left: 72px; }
}
@media (max-width: 700px) {
  .base-continuity { gap: var(--s-4); padding: var(--s-5); }
  .base-continuity__mark { align-self: flex-start; width: 40px; height: 40px; border-radius: var(--r-1); }
  .base-continuity__mark img { width: 24px; height: 21px; }
  .base-continuity > div:nth-child(2) { min-width: 160px; }
  .base-continuity strong { font-size: var(--t-14); line-height: var(--l-14); }
  .base-continuity > a { margin-left: 0; }
}

/* WP-E: global polish, navigation and footer (2026-10-01). Existing palette only; nothing here touches the swap card, the
   dialogs or any disclosure text. Horizontal safe-area insets would need viewport-fit=cover in the build's viewport meta. */
/* ========================================================================================================================
   6. Navigation: one 93px bar on every route (77px below 721px), every control 44px tall on one centre line. Text controls
   carry fixed widths, so every box in the bar sits on whole pixels.
   ======================================================================================================================== */
.page-base { --nav-h: 93px; }
.page-base .nav { backdrop-filter: none; -webkit-backdrop-filter: none; }
.page-base .nav .nav__inner { max-width: 1200px; min-height: calc(var(--nav-h) - 1px); padding: 7px 24px; gap: 28px; }
.page-base .nav .nav__links { flex-wrap: nowrap; gap: 22px; }
.page-base .nav__link { display: inline-flex; align-items: center; justify-content: center; min-height: var(--tap); font-size: 14.5px; line-height: var(--l-15); white-space: nowrap; text-align: center; }
.page-base .nav .nav__links > .nav__link[href="/"] { width: 48px; }
.page-base .nav .nav__links > .nav__link[href="/how-it-works"] { width: auto; }
.page-base .nav .nav__links > .nav__link[href="/proof-of-backing"] { width: auto; }
.page-base .nav .nav__links > .nav__link[href="/how-it-works#faq"] { width: 44px; }
.page-base .nav .nav__links > .btn--sm { width: 176px; min-height: var(--tap); margin-left: var(--s-2); padding: 0 var(--s-3); justify-content: center; }
.page-base .nav .nav__menu > summary { width: var(--tap); height: var(--tap); border-radius: var(--r-2); }
/* The existing DNA Protocol wordmark retains its original 780:471 proportions. */
.page-base .nav .brand { display: flex; align-items: center; height: 78px; overflow: hidden; }
.page-base .brand__logo { display: block; width: auto; height: 78px; object-fit: contain; }
/* app bar (home): brand, Swap tab, section links, chain badge and the wallet button */
.page-base .base-app-nav { background: linear-gradient(180deg, #192d46, #122239); border-bottom-color: rgba(51, 187, 255, .22); }
.base-app-brand { display: inline-flex; flex: none; align-items: center; width: auto; min-height: var(--tap); color: #fff; text-decoration: none; }
.base-app-brand img { display: block; flex: none; width: auto; height: 78px; object-fit: contain; }
.base-app-brand strong { font-size: var(--t-20); line-height: var(--l-20); letter-spacing: -.035em; white-space: nowrap; }
.base-app-brand > span { margin-left: var(--s-1); padding-left: var(--s-3); border-left: var(--bw) solid #34516a; color: #90abc2; font-size: var(--t-10); font-weight: 550; letter-spacing: .12em; line-height: var(--l-10); white-space: nowrap; }
.page-base .base-app-nav .nav__link { font-size: 14.5px; line-height: var(--l-15); }
.page-base .base-app-nav .nav__links > .nav__link[href="/how-it-works"], .page-base .base-app-nav .nav__links > .nav__link[href="/proof-of-backing"] { width: auto; }
.page-base .base-app-nav .base-app-tab { color: #fff; border: 0; border-radius: 0; background: none; }
.page-base .base-app-nav .base-app-tab::after { content: none; }
.base-app-chain { display: inline-flex; align-items: center; gap: var(--s-2); width: 68px; height: var(--tap); margin-left: var(--s-2); padding-left: var(--s-5); border-left: var(--bw) solid #2d4355; color: #c0d3e2; font-size: var(--t-11); line-height: var(--l-11); white-space: nowrap; }
.base-app-chain .base-square { width: 10px; height: 10px; }
.base-app-wallet { display: inline-flex; align-items: center; justify-content: center; gap: var(--s-2); width: 152px; height: var(--tap); margin-left: 0; padding: 0 var(--s-3); border: 0; border-radius: var(--r-2); background: var(--cta); color: #fff; box-shadow: 0 0 26px #2094f366; font: inherit; font-size: var(--t-13); font-weight: 650; line-height: var(--l-13); white-space: nowrap; cursor: pointer; }
.base-app-wallet svg { flex: none; width: var(--i-2); height: var(--i-2); }
.base-app-wallet > span { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.base-app-wallet:hover { background: var(--cta-hover); }
.base-app-wallet:disabled { cursor: wait; opacity: .75; }
.base-app-wallet[data-wallet-state="connected"] { border: 1px solid #2094f366; background: #122239; color: #d1d5db; box-shadow: none; font-variant-numeric: tabular-nums; }
.base-app-wallet[data-wallet-state="wrong-network"] { border: 1px solid #a68a4c; background: #393421; color: #ead398; box-shadow: none; }
/* current route: white text with a cyan rule in the bar, a lit row in the sheet (set by base.js, aria-current) */
.page-base .nav .nav__link[aria-current="page"]:not(.base-app-tab) { color: var(--ink); text-decoration: underline; text-decoration-color: var(--cyan); text-decoration-thickness: 2px; text-underline-offset: 9px; }
.page-base .nav .nav__sheet { overscroll-behavior: contain; }
.page-base .nav .nav__sheet a { font-size: var(--t-14); line-height: var(--l-14); }
.page-base .nav .nav__sheet a[aria-current="page"] { color: var(--ink); background: rgba(0, 212, 255, 0.1); box-shadow: inset 2px 0 0 var(--cyan); }
/* open sheet: the page behind it stays put (base.js keeps the scrollbar width as padding) and does not scroll */
html.is-menu-open { overflow: hidden; padding-right: var(--nav-gutter, 0px); }
/* focus: one ring on every bar and footer stop, each control keeping its own radius; no tap flash on touch */
.page-base .nav :is(a, summary, button), .page-base footer a { -webkit-tap-highlight-color: transparent; }
.page-base .nav :is(a, summary, button):focus-visible, .page-base footer a:focus-visible, .page-base .base-skip:focus-visible { outline: 2px solid var(--focus); outline-offset: 3px; }
.page-base .nav .nav__menu > summary:focus-visible { border-radius: var(--r-2); }
.page-base .nav .nav__links > .btn--sm:focus-visible, .page-base .nav .base-app-wallet:focus-visible { border-radius: var(--r-2); }
.page-base .nav .base-app-tab:focus-visible { border-radius: var(--r-1); }
.page-base .nav .nav__sheet a:focus-visible { outline-offset: -2px; border-radius: var(--r-1); }
@media (max-width: 1150px) {
  .base-app-brand { width: auto; }
  .base-app-brand > span { display: none; }
}
@media (max-width: 900px) {
  .page-base .nav .nav__inner { gap: var(--s-3); }
  .page-base .base-app-nav .base-app-tab { display: none; }
  .base-app-chain { width: 48px; margin-left: 0; padding-left: 0; border: 0; }
}
@media (max-width: 720px) {
  .page-base { --nav-h: 77px; }
  .page-base .nav .nav__inner { padding: 10px 16px; gap: 12px; }
  .page-base .nav .nav__links { gap: 8px; }
  .page-base .nav .brand { height: 56px; }
  .page-base .brand__logo { width: 93px; height: 56px; }
}
@media (max-width: 600px) {
  .base-app-chain { display: none; }
  .base-app-brand { width: 93px; }
  .base-app-brand img { width: 93px; height: 56px; }
  .base-app-brand strong { font-size: var(--t-18); line-height: var(--l-18); }
  .base-app-wallet { width: 124px; gap: 6px; font-size: var(--t-11); line-height: var(--l-11); }
}
@media (max-width: 370px) {
  .page-base .nav .nav__inner { gap: var(--s-2); }
  .page-base .brand__logo { width: 76px; height: 46px; }
  .page-base .nav .nav__links > .btn--sm { width: 148px; margin-left: 0; padding: 0 10px; gap: var(--s-2); font-size: var(--t-10); }
  .base-app-brand { width: 84px; gap: 0; }
  .page-base .base-app-brand img { width: 84px; height: 56px; }
  .base-app-brand strong { font-size: var(--t-16); line-height: var(--l-16); }
  .base-app-wallet { width: 112px; margin-left: 0; padding-inline: 6px; font-size: var(--t-10); line-height: var(--l-10); }
}

/* ========================================================================================================================
   7. Footers: the inner-page footer (component sheet, refined) and the home app footer. 44px targets on every link, an
   11px/12px floor on the security lines, the home-bar inset at the bottom.
   ======================================================================================================================== */
.page-base .footer__shell { max-width: var(--max); padding: 40px var(--gutter) 36px; }
.page-base .footer__main { gap: var(--s-6); padding: var(--s-8) 0 var(--s-6); }
.page-base .footer__links { gap: var(--s-3) var(--s-6); }
.page-base .footer__links a { font-size: var(--t-12); line-height: var(--l-12); }
.page-base .footer__name { display: block; font-size: var(--t-28); line-height: var(--l-28); }
.page-base .footer__tagline { margin-top: var(--s-2); font-size: var(--t-12); line-height: var(--l-12); }
.page-base .footer__token { width: 56px; height: 56px; }
.base-footer-notes { display: grid; gap: var(--s-2); padding: 0 0 var(--s-6); }
.page-base .base-footer-notes p, .page-base .base-footer-notes .base-security { margin: 0; padding: 0; color: #aebfd3; font-size: var(--t-12); line-height: var(--l-12); }
.base-footer-notes code { color: var(--cyan-soft); font-family: var(--mono); font-size: var(--t-11); overflow-wrap: anywhere; }
.page-base .footer__base { gap: var(--s-2) var(--s-6); padding: var(--s-4) 0 var(--s-6); font-size: var(--t-12); line-height: var(--l-12); }
.page-base .footer__network { min-height: var(--tap); gap: var(--s-3); font-size: var(--t-12); line-height: var(--l-12); }
.page-base .footer__network img { width: 22px; height: 18px; }
.page-base .footer__base { padding-bottom: calc(24px + env(safe-area-inset-bottom)); }
/* home: a quiet live-test line, the links, then the no-advice and never-ask small print, all on an integer grid */
.base-app-footer { border-top: var(--bw) solid #263d50; background: #0b1824; padding: var(--s-4) 0 var(--s-5); }
.page-base .base-app-footer .base-wrap { display: grid; grid-template-columns: minmax(0, 1fr); justify-items: center; gap: 0; text-align: center; }
.page-base .base-app-footer nav { display: flex; flex-wrap: wrap; justify-content: center; gap: 0 var(--s-1); }
.page-base .base-app-footer a { display: inline-flex; align-items: center; gap: 6px; min-height: var(--tap); padding: 0 10px; color: #b0c5d5; font-size: var(--t-11); line-height: var(--l-11); white-space: nowrap; }
.page-base .base-app-footer a:hover { color: var(--focus); }
.page-base .base-app-footer p { margin: 0; color: #91aabc; font-size: var(--t-11); line-height: var(--l-11); }
.page-base .base-app-footer .base-app-footer__live { margin: 0 0 var(--s-1); color: #a5bad0; font-size: var(--t-11); line-height: var(--l-11); }
.page-base .base-app-footer .base-app-footer__live + p { color: #a5bad0; }
.page-base .base-app-footer .base-app-footer__advice, .page-base .base-app-footer .base-app-footer__security { max-width: 640px; margin: 0; }
.page-base .base-app-footer .base-app-footer__advice { margin-top: var(--s-1); }
.page-base .base-app-footer .base-app-footer__security { margin-top: var(--s-1); }
.page-base .base-app-footer { padding-bottom: calc(14px + env(safe-area-inset-bottom)); }
@media (min-width: 1000px) {
  .page-base .base-app-footer { padding: var(--s-3) 0 var(--s-3); }
  .page-base .base-app-footer .base-wrap { grid-template-columns: minmax(0, 1fr) auto; column-gap: var(--s-8); row-gap: 0; align-items: center; justify-items: start; text-align: left; }
  .page-base .base-app-footer nav { grid-column: 2; grid-row: 1 / span 3; justify-content: flex-end; align-self: center; }
  .page-base .base-app-footer .base-app-footer__live { grid-column: 1; grid-row: 1; margin: 0; }
  .page-base .base-app-footer .base-app-footer__advice { grid-column: 1; grid-row: 2; margin: 0; }
  .page-base .base-app-footer .base-app-footer__security { grid-column: 1; grid-row: 3; margin: 0; }
  .page-base .base-app-footer { padding-bottom: calc(12px + env(safe-area-inset-bottom)); }
}
@media (max-width: 720px) {
  .page-base .footer__shell { padding-top: var(--s-6); padding-bottom: var(--s-6); }
  .page-base .footer__main { padding: var(--s-6) 0 var(--s-4); gap: var(--s-5); }
  .page-base .footer__links a { min-height: 48px; }
  .page-base .footer__base { padding-top: var(--s-2); }
}
@media (max-width: 600px) {
  .page-base .base-app-footer .base-app-footer__live { text-wrap: balance; }
}

/* spec-gap: WP-D */
/* ========================================================================================================================
   8. Guide page (/how-it-works): sections, steps, participation choice, two-route diagram, backing panel, transparency
   cards and data lists, safeguards, FAQ, disclaimer, and the verify row with the external tools at the end.
   ======================================================================================================================== */
.base-section { padding: 80px 0; }
.base-section--soft { background: radial-gradient(ellipse at 5% 50%, #0f354542, transparent 70%), #0c1623; border-block: var(--bw) solid #8abfe012; }
.base-section-label { display: flex; align-items: center; gap: var(--s-4); margin-bottom: var(--s-8); color: var(--cyan); font-size: var(--t-10); font-weight: 650; letter-spacing: 0.16em; line-height: var(--l-10); }
.base-section-label::after { content: ''; order: 1; flex: 1; height: 1px; background: linear-gradient(90deg, #15729280, #15729218); }
.base-section-label > span:last-child { order: 2; color: #8da3bd; font-weight: 450; letter-spacing: 0; }
.base-section-heading { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--s-6); margin-bottom: var(--s-8); }
.base-section-heading p { max-width: 640px; margin: 0; font-size: var(--t-14); line-height: var(--l-14); }
.base-section-heading > a, .base-section-heading > .base-status { flex: none; }
.base-status { display: inline-flex; align-items: center; justify-content: center; height: var(--s-6); padding: 0 10px; border: var(--bw) solid #7892ae4d; border-radius: 999px; color: #c6d5e8; font-size: var(--t-10); letter-spacing: 0.02em; line-height: var(--l-10); white-space: nowrap; }
.base-guide-intro h1 { max-width: 700px; }
.base-guide-actions { display: grid; grid-template-columns: 184px auto; justify-content: start; align-items: center; gap: var(--s-3); margin: var(--s-8) 0; }
.base-guide-actions .btn { width: 184px; }
.base-steps { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--s-6); list-style: none; padding: 0; margin: 40px 0 var(--s-8); }
.base-steps li { border-top: var(--bw) solid #295269; padding-top: var(--s-6); }
.base-step-number { display: grid; place-items: center; width: 36px; height: 36px; margin-bottom: var(--s-6); border: var(--bw) solid #24759980; border-radius: var(--r-1); background: #0b2a3e; color: var(--cyan); font-size: var(--t-11); font-weight: 600; line-height: var(--l-11); }
.base-steps :is(h2, h3) { font-size: var(--t-18); line-height: var(--l-18); }
.base-steps p { margin: 0; font-size: var(--t-13); line-height: var(--l-13); }
/* participation choice (owner spec section 33): two equal cards, neither styled as primary; they stack below 600px */
.base-choice { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-4); padding-top: var(--s-6); border-top: var(--bw) solid var(--line); }
.base-choice__card { min-width: 0; padding: var(--s-5) var(--s-6); border: var(--bw) solid var(--card-edge); border-radius: var(--r-3); background: var(--card-bg); }
.base-choice__card :is(h2, h3) { margin: 0 0 var(--s-2); font-size: var(--t-16); line-height: var(--l-16); }
.page-base .base-choice__card p { margin: 0 0 var(--s-1); font-size: var(--t-13); line-height: var(--l-13); }
.base-choice__card a { display: inline-flex; align-items: center; gap: var(--s-2); min-height: var(--tap); font-size: var(--t-12); font-weight: 550; line-height: var(--l-12); }
.page-base .base-choice__note { grid-column: 1 / -1; margin: 0; color: #a7bbd1; font-size: var(--t-12); line-height: var(--l-12); }
/* two-route diagram (owner spec section 45): two ordered lists with hairline connectors; no image, no animation */
.base-routes { margin: 0; padding: var(--s-6); border: var(--bw) solid var(--card-edge); border-radius: var(--r-3); background: var(--card-bg); }
.page-base .base-routes__title { margin: 0 0 var(--s-6); color: var(--label); font-size: var(--t-10); font-weight: 650; letter-spacing: 0.14em; line-height: var(--l-10); text-transform: uppercase; }
.base-routes__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-8); }
.base-routes__column { min-width: 0; }
.base-routes__list { list-style: none; margin: var(--s-4) 0 0; padding: 0; }
.base-routes__list li { position: relative; min-width: 0; padding: var(--s-3) var(--s-4); border: var(--bw) solid #295269; border-radius: var(--r-1); background: #0d192899; color: var(--ink-soft); font-size: var(--t-13); font-weight: 550; line-height: var(--l-13); }
.base-routes__list li + li { margin-top: var(--s-6); }
.base-routes__list li + li::before { content: ''; position: absolute; left: 22px; top: -24px; width: 1px; height: 16px; background: #4f7398; }
.base-routes__list li + li::after { content: ''; position: absolute; left: 19px; top: -12px; width: 5px; height: 5px; border-right: 1px solid #4f7398; border-bottom: 1px solid #4f7398; transform: rotate(45deg); }
.base-routes__addr, .base-routes__note { display: block; margin-top: var(--s-1); font-weight: 450; }
.base-routes__addr { color: var(--cyan-soft); font-family: var(--mono); font-size: var(--t-11); line-height: var(--l-11); overflow-wrap: anywhere; }
.base-routes__note { color: #96abc4; font-size: var(--t-11); line-height: var(--l-11); }
.page-base .base-routes figcaption { margin: var(--s-6) 0 0; padding-top: var(--s-4); border-top: var(--bw) solid var(--line); color: var(--copy); font-size: var(--t-12); line-height: var(--l-12); }
/* backing panel */
.base-backing-panel { padding: var(--s-8) var(--s-8) 0; border: var(--bw) solid #21495f; border-radius: var(--r-3); background: radial-gradient(ellipse at 15% 0, #165d7b38, transparent 60%), #0d1928; }
.base-ratio-grid { display: grid; grid-template-columns: round(down, calc((100% - 48px) * 0.37), 1px) minmax(0, 1fr) round(down, calc((100% - 48px) * 0.37), 1px); gap: var(--s-6); align-items: center; text-align: center; }
/* a block flex row, not inline-flex: an image-first inline-flex has no text baseline, and WebKit's synthesised one leaves the line a fraction tall */
.base-network-label { display: flex; align-items: center; gap: var(--s-2); height: 18px; color: #b7cbe1; font-size: var(--t-10); font-weight: 650; letter-spacing: 0.13em; line-height: var(--l-10); }
.base-ratio-side .base-network-label { justify-content: center; }
.base-network-label img { display: block; width: 22px; height: 18px; }
.base-ratio-number { display: flex; align-items: baseline; justify-content: center; gap: var(--s-3); margin: var(--s-4) 0 var(--s-3); font-size: var(--t-84); font-weight: 650; letter-spacing: -0.08em; line-height: var(--l-84); font-variant-numeric: tabular-nums; }
.base-ratio-number span { color: var(--accent); font-size: var(--t-16); font-weight: 650; letter-spacing: 0.1em; line-height: var(--l-16); }
.base-ratio-side--xrpl .base-ratio-number span { color: var(--cyan); }
.page-base .base-ratio-side p { margin: 0; font-size: var(--t-12); line-height: var(--l-12); }
.base-policy-badge { display: inline-block; padding: var(--s-1) var(--s-3); border: var(--bw) solid #7799c04d; border-radius: 999px; color: #c4d7ee; font-size: var(--t-10); letter-spacing: 0.11em; line-height: var(--l-10); }
.base-ratio-equals { display: block; margin: var(--s-2) 0; color: #4f7398; font-size: var(--t-32); font-weight: 300; line-height: var(--l-32); }
.page-base .base-ratio-center p { margin: 0; font-size: var(--t-11); line-height: var(--l-11); }
.base-ratio-center strong { display: block; margin-top: var(--s-1); color: #96abc4; font-size: var(--t-10); font-weight: 450; line-height: var(--l-10); }
.base-ratio-center strong + strong { margin-top: 2px; }
.base-conduit { max-width: 870px; margin: var(--s-6) auto var(--s-4); }
.base-conduit .trust__conduit { width: 100%; margin: 0; padding: 0; }
.base-conduit .trust__conduit svg { height: 96px; max-height: none; }
@media (max-width: 720px) { .base-conduit .trust__conduit svg { height: 56px; } }
@media (max-width: 420px) { .base-conduit .trust__conduit svg { height: 40px; } }
.base-backing-foot { display: flex; align-items: center; justify-content: space-between; gap: var(--s-5); padding: var(--s-4) 0; border-top: var(--bw) solid var(--line); }
.page-base .base-backing-foot p { max-width: 550px; margin: 0; font-size: var(--t-11); line-height: var(--l-11); }
.base-unavailable { display: inline-flex; align-items: center; gap: 7px; color: #bfd0e5; font-size: var(--t-10); line-height: var(--l-10); white-space: nowrap; }
.base-unavailable > span { width: 5px; height: 5px; border-radius: 50%; background: #92a9c2; }
/* transparency cards and data lists (guide and proof of backing) */
.base-transparency-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-6); }
.base-data-card { min-width: 0; padding: var(--s-6); border: var(--bw) solid var(--card-edge); border-radius: var(--r-3); background: var(--card-bg); }
.base-data-card__head { display: flex; align-items: center; gap: var(--s-3); margin-bottom: var(--s-6); }
.base-data-card__head > img { display: block; flex: none; width: 23px; height: 20px; }
.base-data-card__head h3 { margin: 0; font-size: var(--t-18); line-height: var(--l-18); }
.base-data-card__head > .base-small-label { margin-left: auto; font-size: var(--t-10); }
.base-data-list { margin: 0; font-size: var(--t-12); line-height: var(--l-12); }
.base-data-list > div { display: grid; grid-template-columns: 1.2fr 1fr; gap: var(--s-3); padding: var(--s-4) 0; border-top: var(--bw) solid var(--hair); align-items: start; }
.base-data-list dt { color: #acc1d7; }
.base-data-list dd { margin: 0; color: #d0dfef; font-size: var(--t-11); line-height: var(--l-11); font-variant-numeric: tabular-nums; text-align: right; overflow-wrap: anywhere; }
.base-data-list dd a, .base-table td a { display: inline-block; max-width: 100%; padding: 14px 0; margin: -14px 0; vertical-align: top; overflow-wrap: anywhere; }
.page-base .base-data-card > p { margin: var(--s-4) 0 0; padding-top: var(--s-4); border-top: var(--bw) solid var(--hair); color: #a3b8ce; font-size: var(--t-12); line-height: var(--l-12); }
.base-data-card > p code, .base-faq p code { color: var(--cyan-soft); font-family: var(--mono); font-size: var(--t-11); overflow-wrap: anywhere; }
.base-transparency-link { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: var(--s-3) var(--s-5); padding-top: var(--s-4); color: #a7bbd1; font-size: var(--t-12); line-height: var(--l-12); }
.base-transparency-link a { display: inline-flex; align-items: center; gap: var(--s-2); min-height: var(--tap); }
/* safeguards */
.base-safeguards { display: grid; grid-template-columns: 1fr 1fr; gap: 72px; align-items: center; }
.base-safeguards > div > p { max-width: 450px; margin: var(--s-6) 0; font-size: var(--t-14); line-height: var(--l-14); }
.base-safeguard-list article { display: flex; align-items: flex-start; gap: var(--s-6); padding: var(--s-6) 0; border-bottom: var(--bw) solid var(--line); }
.base-safeguard-list article:first-child { padding-top: 0; }
.base-safeguard-list article:last-child { border: 0; padding-bottom: 0; }
.base-safeguard-list article > span { padding-top: var(--s-1); color: var(--cyan); font-family: var(--mono); font-size: var(--t-11); line-height: var(--l-11); }
.base-safeguard-list h3 { margin-bottom: var(--s-2); font-size: var(--t-18); line-height: var(--l-18); }
.base-safeguard-list p { margin: 0; font-size: var(--t-13); line-height: var(--l-13); }
/* FAQ */
.base-faq-layout { display: grid; grid-template-columns: round(down, calc((100% - 60px) * 0.36), 1px) minmax(0, 1fr); gap: 60px; }
.base-faq-intro p { max-width: 300px; font-size: var(--t-14); line-height: var(--l-14); }
.base-faq details { border-bottom: var(--bw) solid #9dbbd126; }
.base-faq details:first-child { border-top: var(--bw) solid #9dbbd126; }
.base-faq summary { display: flex; align-items: center; justify-content: space-between; gap: var(--s-5); min-height: 64px; padding: 22px 0; list-style: none; color: var(--ink-soft); font-size: var(--t-13); font-weight: 550; line-height: var(--l-13); cursor: pointer; }
.base-faq summary::after { content: ''; flex: none; width: var(--i-2); height: var(--i-2); background: var(--cyan); -webkit-mask: var(--i-chevron) center / contain no-repeat; mask: var(--i-chevron) center / contain no-repeat; transition: transform var(--ease); }
.base-faq details[open] summary::after { transform: rotate(180deg); }
.base-faq details p { margin: 0 0 var(--s-6); padding-right: var(--s-5); font-size: var(--t-14); line-height: var(--l-14); }
.base-disclaimer { padding-bottom: var(--s-8); }
.base-disclaimer p { max-width: 800px; margin-bottom: 0; font-size: var(--t-11); line-height: var(--l-11); }
/* verify row and external tools, appended at the end of the guide by the build */
.base-wrap.base-explore-slot { display: grid; gap: var(--s-4); max-width: 824px; margin: 0 auto 64px; }
.base-swap-resources { min-width: 0; width: 100%; padding: 0; }
.page-base .base-swap-resources h2 { display: flex; justify-content: space-between; align-items: center; gap: var(--s-3); margin: 0 0 var(--s-3); font-size: var(--t-13); font-weight: 550; letter-spacing: -.01em; line-height: var(--l-13); }
.base-swap-resources h2 > span { color: #96b0c2; font-size: var(--t-10); font-weight: 500; letter-spacing: .12em; line-height: var(--l-10); }
.base-swap-resources__grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--s-2); }
.base-swap-resources__grid a { display: flex; align-items: center; gap: var(--s-2); min-height: 56px; padding: var(--s-2) var(--s-3); border: var(--bw) solid var(--tile-edge); border-radius: var(--r-2); background: var(--tile); color: #d5e7f2; font-size: var(--t-12); font-weight: 550; line-height: var(--l-11); }
.base-swap-resources__grid a > .base-brand-mark { width: var(--i-3); height: var(--i-3); margin-right: 2px; }
.base-swap-resources__grid a > .base-brand-mark + span { flex: 1; min-width: 0; }
.base-swap-resources__grid a > span[aria-hidden] { flex: none; width: var(--i-2); height: var(--i-2); color: transparent; font-size: var(--t-12); line-height: var(--l-11); text-align: center; background: #8ed3e2; -webkit-mask: var(--i-ext) center / contain no-repeat; mask: var(--i-ext) center / contain no-repeat; }
.base-swap-resources__grid small { display: block; margin-top: 2px; color: var(--muted); font-size: var(--t-11); font-weight: 400; line-height: var(--l-11); }
.base-swap-resources__grid a:active { filter: brightness(.9); }
.base-swap-resources a:focus-visible { outline: 2px solid var(--focus); outline-offset: 3px; }
.page-base .base-swap-resources p { margin: var(--s-2) 0 0; color: #9fb8cb; font-size: var(--t-11); line-height: var(--l-11); }
@media (hover: hover) and (pointer: fine) {
  .base-swap-resources__grid a:hover { border-color: #669eaf; background: #183648; }
}
@media (min-width: 480px) {
  .base-swap-resources__grid { grid-template-columns: repeat(2, round(down, calc((100% - 8px) / 2), 1px)); justify-content: space-between; }
}
@media (min-width: 700px) {
  .base-swap-resources__grid { grid-template-columns: repeat(4, round(down, calc((100% - 24px) / 4), 1px)); }
}
@media (max-width: 1050px) {
  .base-safeguards { gap: 40px; }
  .base-faq-layout { gap: 40px; }
}
@media (max-width: 900px) {
  .base-section-heading { align-items: flex-start; flex-direction: column; gap: var(--s-4); }
  .base-steps { grid-template-columns: repeat(2, round(down, calc((100% - 24px) / 2), 1px)); justify-content: space-between; gap: var(--s-6); }
  .base-backing-foot { flex-direction: column; align-items: flex-start; gap: var(--s-3); }
  .base-transparency-grid { gap: var(--s-4); }
  .base-data-card { padding: var(--s-6); }
  .base-data-card__head { flex-wrap: wrap; }
  .base-data-card__head > .base-small-label { display: none; }
  .base-data-list > div { grid-template-columns: 1fr; gap: var(--s-1); }
  .base-data-list dd { text-align: left; }
}
@media (max-width: 700px) {
  .base-section { padding: 56px 0; }
  .base-section-label { margin-bottom: var(--s-6); }
  .base-section-heading { margin-bottom: var(--s-6); }
  .base-section-heading p { font-size: var(--t-13); line-height: var(--l-13); }
  .base-eyebrow { font-size: var(--t-10); margin-bottom: var(--s-4); }
  .base-guide-actions { margin: var(--s-6) 0; }
  .base-backing-panel { padding: var(--s-6) var(--s-5) 0; }
  .base-ratio-grid { grid-template-columns: repeat(2, round(down, calc((100% - 16px) / 2), 1px)); justify-content: space-between; column-gap: var(--s-4); row-gap: var(--s-6); }
  .base-ratio-center { grid-column: 1 / -1; grid-row: 2; display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: var(--s-3); padding-top: var(--s-4); border-top: var(--bw) solid var(--line); }
  .base-ratio-equals { display: none; }
  .base-ratio-number { gap: var(--s-2); font-size: 64px; line-height: 64px; }
  .base-ratio-number span { font-size: var(--t-13); line-height: var(--l-13); }
  .base-network-label { letter-spacing: 0.08em; }
  .page-base .base-ratio-side p { font-size: var(--t-11); line-height: var(--l-11); }
  .base-ratio-side { align-self: start; }
  .base-conduit { margin: var(--s-5) 0 var(--s-2); }
  .base-steps { gap: var(--s-6) var(--s-5); margin-top: var(--s-8); }
  .base-steps :is(h2, h3) { font-size: var(--t-16); line-height: var(--l-16); }
  .base-transparency-grid { grid-template-columns: 1fr; }
  .base-data-card__head { flex-wrap: nowrap; }
  .base-data-list > div { grid-template-columns: 1.2fr 1fr; gap: var(--s-3); }
  .base-data-list dd { text-align: right; }
  .base-safeguards, .base-faq-layout { grid-template-columns: 1fr; gap: var(--s-8); }
  .base-faq-intro p { max-width: 100%; }
  .base-disclaimer { padding-bottom: var(--s-6); }
  .base-routes { padding: var(--s-5); }
}
@media (max-width: 600px) {
  .base-routes__grid { grid-template-columns: 1fr; gap: var(--s-6); }
}
@media (max-width: 600px) {
  .base-choice { grid-template-columns: 1fr; gap: var(--s-3); }
}
@media (max-width: 370px) {
  .base-steps { grid-template-columns: 1fr; gap: var(--s-6); }
  .base-steps li { display: grid; grid-template-columns: 36px 1fr; column-gap: var(--s-4); }
  .base-step-number { grid-row: 1 / 3; margin: 0; }
  .base-steps h3 { align-self: center; margin-bottom: var(--s-2); }
  .base-guide-actions { grid-template-columns: 1fr; }
  .base-guide-actions .btn { width: 100%; }
}

/* spec-gap: WP-E */
/* ========================================================================================================================
   9. Documents (/terms, /risks, /proof-of-backing): hero, notice, section nav, prose, pending terms, formula, tables,
   the live Base reads dashboard and the collapsed verification history.
   ======================================================================================================================== */
.base-back { display: inline-flex; align-items: center; min-height: var(--tap); margin-bottom: var(--s-8); color: #a6bdda; font-size: var(--t-12); line-height: var(--l-12); }
.base-document-hero { padding-top: var(--s-6); padding-bottom: 40px; }
.base-document-hero .base-eyebrow { margin-bottom: var(--s-5); }
.base-document-hero .base-intro { max-width: 700px; }
.base-document { max-width: 1024px; }
.base-notice { padding: var(--s-6); background: #142a3b; border: var(--bw) solid #34607a; border-radius: var(--r-2); }
.base-notice strong { display: block; color: #e3eefb; font-size: var(--t-14); font-weight: 600; line-height: var(--l-14); }
.page-base .base-notice p { margin: var(--s-2) 0 0; font-size: var(--t-13); line-height: var(--l-13); }
.base-document-nav { display: flex; flex-wrap: wrap; gap: 0 var(--s-5); padding: var(--s-5) 0; border-bottom: var(--bw) solid var(--line); }
.base-document-nav a { display: inline-flex; align-items: center; min-height: var(--tap); font-size: var(--t-12); line-height: var(--l-12); }
.base-document > section { padding: 44px 0; border-bottom: var(--bw) solid var(--line); }
.base-document > section > .base-small-label { margin-bottom: var(--s-4); color: var(--cyan); }
.base-document h2 { font-size: var(--t-28); line-height: var(--l-28); }
.base-document p { max-width: 820px; font-size: var(--t-14); line-height: var(--l-14); overflow-wrap: anywhere; }
.base-document > section > p:last-child { margin-bottom: 0; }
.base-pending-terms { margin: var(--s-6) 0; font-size: var(--t-13); line-height: var(--l-13); }
.base-pending-terms > div { display: grid; grid-template-columns: 1.6fr 1fr; gap: var(--s-5); padding: var(--s-3) 0; border-top: var(--bw) solid var(--line); }
.base-pending-terms dt { color: #bdcde0; }
.base-pending-terms dd { margin: 0; color: #a8c4e9; text-align: right; }
.base-document-end { padding: var(--s-8) 0 60px; }
.base-document-end p { font-size: var(--t-14); line-height: var(--l-14); }
.base-document-section { padding-top: 56px; }
.base-document-section h2 { margin-bottom: var(--s-6); font-size: var(--t-32); line-height: var(--l-32); }
.base-formula { margin-top: var(--s-6); padding: var(--s-6); border: var(--bw) solid #265171; border-radius: var(--r-2); background: #132739; text-align: center; }
.base-formula .base-small-label { color: var(--cyan); }
.page-base .base-formula p { margin: var(--s-3) 0; color: #e2edfc; font-size: var(--t-18); line-height: var(--l-18); letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
.base-formula p > span:not(.base-visually-hidden) { padding: 0 var(--s-2); color: var(--cyan); }
.base-formula > span:last-child { color: #bed0e6; font-size: var(--t-12); line-height: var(--l-12); }
.base-document-note { margin: var(--s-4) 0; font-size: var(--t-12); line-height: var(--l-12); }
.base-table-scroll { max-width: 100%; overflow-x: auto; border: var(--bw) solid #264357; border-radius: var(--r-2); }
.base-table { width: 100%; min-width: 590px; border-collapse: collapse; background: #101c2b; font-size: var(--t-12); line-height: var(--l-12); }
.base-table caption { padding: var(--s-3) var(--s-5); color: #aabdd4; font-size: var(--t-11); line-height: var(--l-11); text-align: left; }
.base-table th, .base-table td { padding: var(--s-4) var(--s-5); border-top: var(--bw) solid var(--line); text-align: left; }
.base-table thead th { color: #d3e3f6; font-weight: 600; background: #122337; }
.base-table tbody th { color: #d0dded; font-weight: 450; }
.base-table td { color: #aebfd4; font-variant-numeric: tabular-nums; }
.base-empty-state { padding: var(--s-6); border: var(--bw) dashed #456783; border-radius: var(--r-2); }
.base-empty-state p { margin: var(--s-2) 0 0; font-size: var(--t-13); line-height: var(--l-13); }
.base-empty-state p a { display: inline-block; max-width: 100%; padding: 12px 0; vertical-align: top; }
.base-controls-note { margin-top: var(--s-6); padding: var(--s-6); border: var(--bw) solid #456b88; border-radius: var(--r-2); background: #102438; box-shadow: inset 3px 0 0 #6ca3cf; }
.base-controls-note h3 { font-size: var(--t-16); line-height: var(--l-16); }
.page-base .base-controls-note p { margin: var(--s-2) 0 0; font-size: var(--t-13); line-height: var(--l-13); }
/* live reads: one button, one status line, the shared data list, a per-value network/source note */
.base-live__bar { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-3) var(--s-4); margin: 0 0 var(--s-2); }
.base-quote-button { width: 100%; min-height: var(--tap); margin: 0; border: var(--bw) solid #477394; border-radius: var(--r-2); background: #193c55; color: #d5f3ff; font: inherit; font-size: var(--t-13); line-height: var(--l-13); cursor: pointer; }
.base-quote-button:disabled { opacity: 0.55; cursor: not-allowed; }
.base-live__bar .base-quote-button { width: 208px; max-width: 100%; padding: 0 var(--s-4); }
.page-base .base-live__status { flex: 1 1 260px; margin: 0; color: #acc1d7; font-size: var(--t-12); line-height: var(--l-12); }
.base-live__status[data-tone="live"] { color: var(--ok); }
.base-live__status[data-tone="unavailable"] { color: var(--warn-ink); }
.base-live__list { margin-top: var(--s-2); }
.base-live__list dd { color: #dce8f6; }
.base-live__list dd a { color: var(--cyan-soft); font-family: var(--mono); font-size: var(--t-11); overflow-wrap: anywhere; }
.base-live__note { display: block; margin-top: 2px; color: var(--muted); font-size: var(--t-10); line-height: var(--l-10); }
.page-base .base-live__warning { margin: var(--s-4) 0 0; padding: var(--s-3) var(--s-4); border: var(--bw) solid var(--warn-edge); border-radius: var(--r-2); background: #142a3b; box-shadow: inset 3px 0 0 #ead398; color: var(--warn-ink); font-size: var(--t-12); line-height: var(--l-12); }
.page-base .base-live__warning[hidden] { display: none; }
/* a dated coverage figure is demoted, never hidden, once the live supply differs from the snapshot */
.base-coverage--historical { color: var(--muted); }
.base-coverage--historical::after { content: " (historical)"; color: var(--warn-ink); font-size: var(--t-10); }
/* verification history: a collapsed table under the dated-check card */
.base-history { margin: var(--s-4) 0 0; border: var(--bw) solid var(--tile-edge); border-radius: var(--r-2); background: var(--tile); }
.base-history > summary { display: flex; align-items: center; justify-content: space-between; gap: var(--s-3); min-height: 48px; padding: var(--s-2) var(--s-4); list-style: none; color: #cad9e9; font-size: var(--t-12); font-weight: 550; line-height: var(--l-12); cursor: pointer; }
.base-history > summary::after { content: ""; flex: none; width: var(--i-2); height: var(--i-2); background: #9fbdd8; -webkit-mask: var(--i-chevron) center / contain no-repeat; mask: var(--i-chevron) center / contain no-repeat; transition: transform var(--ease); }
.base-history[open] > summary::after { transform: rotate(180deg); }
.base-history > summary:focus-visible { outline: 2px solid var(--focus); outline-offset: -2px; border-radius: var(--r-2); }
.base-history .base-table-scroll { border: 0; border-top: var(--bw) solid var(--tile-edge); border-radius: 0 0 var(--r-2) var(--r-2); }
.base-history .base-table { min-width: 680px; }
.base-history .base-table td a { color: var(--cyan-soft); }
@media (max-width: 700px) {
  .base-document-hero { padding-top: var(--s-4); padding-bottom: var(--s-6); }
  .base-back { margin-bottom: var(--s-6); }
  .base-notice { padding: var(--s-5); }
  .base-document > section { padding: var(--s-8) 0; }
  .base-document h2 { font-size: var(--t-26); line-height: var(--l-26); }
  .base-document-section { padding-top: 40px; }
  .base-document-section h2 { font-size: var(--t-28); line-height: var(--l-28); }
  .base-formula { padding: var(--s-6) var(--s-4); }
  .page-base .base-formula p { font-size: var(--t-16); line-height: var(--l-16); }
  .base-pending-terms > div { grid-template-columns: 1fr; gap: var(--s-1); }
  .base-pending-terms dd { text-align: left; }
}
@media (max-width: 480px) {
  .base-live__bar .base-quote-button { width: 100%; }
}

/* WP-LOGOS */
/* ========================================================================================================================
   10. Official third-party marks. Files under assets/img/brands are byte-locked by components/brand-provenance.json and never
   recoloured: each mark is the brand's own file, shown at 16-20px next to its text label with alt="".
   ======================================================================================================================== */
.base-brand-mark { display: inline-block; flex-shrink: 0; width: 16px; height: 16px; object-fit: contain; vertical-align: -3px; }
.base-contract__label a > .base-brand-mark { margin-right: -1px; }
.base-wallet-option__icon--coinbase > img { border-radius: var(--r-1); }

/* WP-MIN: the review dialog (2026-10-01). The acknowledgement, the estimate note and the transfer status live here, with the
   real-funds line and Confirm in a sticky footer. Existing palette only (the dialog surfaces above, CTA #0b6fc4 / #0a7ea0). */
/* ========================================================================================================================
   11. Transaction review dialog
   ======================================================================================================================== */
/* header: title, then one muted line with the step tag (two-step approval only) and the quote countdown */
.base-review-heading { display: grid; flex: 1 1 auto; gap: 2px; min-width: 0; }
.base-review-sub { display: flex; align-items: center; gap: var(--s-2); margin: 0; color: #9fbecd; font-size: var(--t-11); line-height: var(--l-11); }
.base-review-sub:not(:has(> :not(:empty))) { display: none; }
.base-review-step { padding: 0 var(--s-2); border: var(--bw) solid #345166; border-radius: var(--r-1); color: #92e6ee; font-weight: 600; }
.base-review-step:empty { display: none; }
/* hero: You pay / You receive, two stacked panels like the swap card */
.base-review-amounts { display: grid; gap: var(--s-1); margin: var(--s-2) 0 0; }
.base-review-amounts > div { padding: var(--s-3) var(--s-4); border-radius: var(--r-2); background: #142c3e; }
.base-review-amounts > div + div { background: #12303d; }
.base-review-amounts dt { margin-bottom: 2px; color: #adc5d7; font-size: var(--t-12); line-height: var(--l-12); }
.base-review-amounts dd { margin: 0; font-size: var(--t-24); font-weight: 600; letter-spacing: -.025em; line-height: var(--l-24); font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.base-review-amounts > div + div dd { color: #b9f1ef; }
.base-wallet-dialog:not([data-review-kind="approval"]) #purchase-review-output:not(:empty)::before { content: "~"; }
.base-wallet-dialog[data-review-kind="approval"] #purchase-review-output { font-size: var(--t-13); font-weight: 450; letter-spacing: 0; line-height: var(--l-24); }
/* the four visible rows, then everything else behind one collapsed Details */
.base-wallet-dialog .base-review-meta { margin: var(--s-3) 0 0; padding: 0; border: 0; font-size: var(--t-12); line-height: var(--l-12); }
.base-wallet-dialog .base-review-meta > div { display: flex; justify-content: space-between; gap: var(--s-3); padding: 7px 0; border-bottom: var(--bw) solid #284151; }
/* an approval buys nothing: its rate, minimum and impact rows (each "Not a purchase") fold away, leaving the network fee */
.base-wallet-dialog[data-review-kind="approval"] .base-review-meta:not(.base-review-meta--details) > div:not(:last-child) { display: none; }
.base-wallet-dialog .base-review-meta dt { flex: 1; color: var(--muted); }
.base-wallet-dialog .base-review-meta dd { max-width: 62%; margin: 0; color: #bad0df; font-variant-numeric: tabular-nums; text-align: right; overflow-wrap: anywhere; }
.base-wallet-dialog .base-review-meta code, .base-wallet-dialog .base-review-meta a { font-size: var(--t-11); line-height: var(--l-11); overflow-wrap: anywhere; }
.base-wallet-dialog .base-review-meta code { font-family: var(--mono); }
.base-wallet-dialog .base-review-meta dd a { display: inline-block; max-width: 100%; padding: 14px 0; margin: -14px 0; color: #92e6ee; vertical-align: top; }
.base-review-details > summary { display: flex; align-items: center; justify-content: space-between; gap: var(--s-2); min-height: var(--tap); color: #adc5d7; font-size: var(--t-12); font-weight: 550; line-height: var(--l-12); list-style: none; cursor: pointer; }
.base-review-details > summary:hover { color: #ecf4fb; }
.base-wallet-dialog .base-review-meta--details { margin: 0; }
.base-wallet-dialog .base-review-meta--details > div:first-child { border-top: var(--bw) solid #284151; }
.base-review-details > p { margin: var(--s-3) 0 0; color: #9fbecd; font-size: var(--t-11); line-height: var(--l-11); }
.base-review-details > .base-review-estimate strong { color: #edf4fc; font-weight: 600; }
.base-wallet-dialog .base-review-restriction a { color: #92e6ee; text-decoration: underline; text-decoration-color: #92e6ee66; text-underline-offset: 3px; }
.base-wallet-dialog .base-review-details > .base-review-security { padding: var(--s-3) 0 var(--s-1); border-top: var(--bw) solid #284151; }
.base-wallet-dialog .base-review-security strong { color: #edf4fc; font-weight: 600; }
.base-wallet-dialog .base-review-security code { color: #b9f1ef; font-family: var(--mono); font-size: var(--t-10); overflow-wrap: anywhere; user-select: all; }
/* sticky footer: the acknowledgement, Confirm and the real-funds caption stay in view while the rows scroll.
   The dialog gives up its own bottom padding: a sticky box cannot leave its parent's content box, so the footer supplies
   that padding itself and its bottom edge always meets the dialog's edge. */
#purchase-review-dialog.base-wallet-dialog { padding-bottom: 0; }
.base-review-footer { position: sticky; bottom: 0; z-index: 1; margin: var(--s-2) calc(-1 * var(--dialog-pad)) 0; padding: var(--s-3) var(--dialog-pad) max(16px, env(safe-area-inset-bottom)); border-top: var(--bw) solid #284151; background: #102130; }
.base-review-funds { margin: var(--s-2) 0 0; color: #9fbecd; font-size: var(--t-11); line-height: var(--l-11); text-align: center; }
.base-wallet-dialog .base-review-footer .base-ack { display: flex; align-items: flex-start; gap: var(--s-3); margin: 0 0 var(--s-3); padding: 0; color: #cee2ef; font-size: var(--t-12); line-height: var(--l-12); cursor: pointer; }
.base-wallet-dialog .base-review-footer .base-ack:has(#purchase-ack:disabled) { cursor: default; }
.base-wallet-dialog .base-review-footer .base-ack a { color: #92e6ee; text-decoration: underline; text-decoration-color: #92e6ee66; text-underline-offset: 3px; }
.base-wallet-dialog #purchase-ack { -webkit-appearance: none; appearance: none; flex: none; display: grid; place-content: center; width: var(--i-3); height: var(--i-3); margin: -1px 0 0; border: var(--bw) solid #8ce1ec; border-radius: 6px; background: #081421; box-shadow: 0 0 0 3px #8ee5f51a; cursor: pointer; transition: background-color var(--ease), border-color var(--ease), box-shadow var(--ease); }
.base-wallet-dialog #purchase-ack::after { content: ""; width: var(--i-1); height: var(--i-1); background: #fff; transform: scale(0); transition: transform var(--ease); -webkit-mask: var(--i-check) center / contain no-repeat; mask: var(--i-check) center / contain no-repeat; }
.base-wallet-dialog #purchase-ack:checked { border-color: #0b6fc4; background: linear-gradient(135deg, #0b6fc4, #0a7ea0); box-shadow: 0 0 0 3px #2094f326; }
.base-wallet-dialog #purchase-ack:checked::after { transform: scale(1); }
.base-wallet-dialog #purchase-ack:disabled { border: var(--bw) dashed #8ba6b9b3; background: transparent; box-shadow: none; cursor: not-allowed; }
.base-wallet-dialog #purchase-ack:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.page-base .base-wallet-dialog .base-buy { width: 100%; height: 56px; min-height: 0; margin: 0; padding: 0 var(--s-5); border: var(--bw) solid #62baff66; border-radius: var(--r-2); background: linear-gradient(105deg, var(--cta), var(--cta-2)); box-shadow: inset 0 1px 0 #b5eaff40, 0 8px 26px #057fc52f; color: #fff; font-size: var(--t-15); font-weight: 600; line-height: var(--l-15); white-space: nowrap; transform: none; }
.page-base .base-wallet-dialog .base-buy:disabled { border-color: #2f4659; background: #1a2c3d; box-shadow: none; color: #a9bccd; opacity: 1; cursor: not-allowed; }
.page-base .base-wallet-dialog .base-buy:hover:not(:disabled) { background: linear-gradient(105deg, var(--cta-hover), var(--cta-hover-2)); transform: none; }
.base-wallet-dialog #purchase-review-status { margin: var(--s-2) 0 0; padding: var(--s-2) var(--s-4); border: var(--bw) solid #345166; border-radius: var(--r-1); background: #142c3e; color: #b9cce2; font-size: var(--t-12); line-height: var(--l-12); }
.base-wallet-dialog[data-purchase-phase="error"] #purchase-review-status { border-color: #826b40; color: #efc295; }
.base-wallet-dialog #purchase-review-status:empty { display: none; }
.base-review-expiry { color: #9fbecd; font-variant-numeric: tabular-nums; }
.base-review-expiry:empty { display: none; }
.base-review-expiry.is-warn { color: var(--warn-ink); }
.base-wallet-dialog #purchase-review-restart { display: flex; align-items: center; justify-content: center; width: 100%; min-height: 48px; margin: var(--s-2) 0 0; padding: 0 var(--s-4); border: var(--bw) solid #345166; border-radius: var(--r-2); background: #142c3e; color: #cee2ef; font-size: var(--t-13); font-weight: 600; line-height: var(--l-13); }
.base-wallet-dialog #purchase-review-restart:hover { border-color: #79c7da; background: #1c3b4e; }
@media (hover: hover) and (pointer: fine) {
  .base-wallet-dialog #purchase-ack:not(:disabled):not(:checked):hover { border-color: #92e6ee; box-shadow: 0 0 0 3px #8ee5f52e; }
}