/* BEAM Campfire. Colours from Campfire's theme (asset_sources/default_themes/
   campfire/light.zip, theme.json). Campfire ships only a light theme; the dark
   palette keeps Campfire's accent and takes its neutrals from Stack Wallet's
   dark theme family. Inter is bundled (fonts/LICENSE.txt, SIL OFL 1.1). */

@font-face { font-family: 'Inter'; src: url('../fonts/Inter-Regular.ttf') format('truetype'); font-weight: 400; font-display: swap; }
@font-face { font-family: 'Inter'; src: url('../fonts/Inter-Medium.ttf') format('truetype'); font-weight: 500; font-display: swap; }
@font-face { font-family: 'Inter'; src: url('../fonts/Inter-SemiBold.ttf') format('truetype'); font-weight: 600; font-display: swap; }
@font-face { font-family: 'Inter'; src: url('../fonts/Inter-Bold.ttf') format('truetype'); font-weight: 700; font-display: swap; }

:root {
  color-scheme: light dark;
  --bg: #fff1f1;
  --surface: #ffffff;
  --surface-2: #f1eeee;
  --text: #20263d;
  --text-2: #414141;
  --muted: #686b6c;
  --subtle: #8e9192;
  --primary: #b62039;
  --primary-text: #b62039;
  --on-primary: #ffffff;
  --primary-disabled: #e9c9c9;
  --on-primary-disabled: #f8f8f8;
  --secondary: #ffd9d9;
  --on-secondary: #b62039;
  --border: #e0e3e3;
  --success-bg: #b9e9d4;
  --success: #006c4d;
  --error-bg: #ffdad4;
  --error: #930006;
  --info-bg: #dae2ff;
  --info: #002a78;
  --warn-bg: #ffdad3;
  --warn: #20263d;
  --green: #00a578;
  --yellow: #c79a00;
  --red: #c00205;
  /* What BEAM's skin colours differently (Campfire's own values here, so Campfire red looks as it did):
     the accent on controls (progress, radio, focus), received, sent and swapped in the history, the
     ink on the green and red step marks, and the top of the page. */
  --accent: #b62039;
  --in: #006c4d;
  --in-bg: #b9e9d4;
  --out: #b62039;
  --out-bg: #ffd9d9;
  --out-text: #20263d;
  --swap: #002a78;
  --swap-bg: #dae2ff;
  --on-green: #ffffff;
  --on-red: #ffffff;
  --bg-top: #fff1f1;
  --shadow: 0 1px 4px 1px rgba(45, 49, 50, 0.06);
  --radius: 12px;
  --gutter: 16px;
  --tabbar-h: 64px;
  --safe-top: env(safe-area-inset-top, 0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);
  --safe-left: env(safe-area-inset-left, 0px);
  --safe-right: env(safe-area-inset-right, 0px);
}

/* Dark: under the device's dark mode unless Settings -> Theme says Light, and always when it says
   Dark (lib/theme.js). The two blocks are one palette; test/unit/theme.test.mjs keeps them equal. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #1c1d22;
    --surface: #2a2d34;
    --surface-2: #363a43;
    --text: #f3f3f3;
    --text-2: #dbdbdb;
    --muted: #a7a9ad;
    --subtle: #9e9e9e;
    --primary: #d63a52;
    --primary-text: #ff7a8c;
    --on-primary: #ffffff;
    --primary-disabled: #5a3138;
    --on-primary-disabled: #b9a3a7;
    --secondary: #4a2a31;
    --on-secondary: #ffb3be;
    --border: #3e434c;
    --success-bg: #1f4d3e;
    --success: #8ef5c3;
    --error-bg: #5c1f1f;
    --error: #ffb4a9;
    --info-bg: #1e2a4d;
    --info: #c7d5ff;
    --warn-bg: #4d3a1a;
    --warn: #ffe3a8;
    --green: #4cc0a0;
    --yellow: #f7d65d;
    --red: #f37475;
    --accent: #d63a52;
    --in: #8ef5c3;
    --in-bg: #1f4d3e;
    --out: #ffb3be;
    --out-bg: #4a2a31;
    --out-text: #f3f3f3;
    --swap: #c7d5ff;
    --swap-bg: #1e2a4d;
    --on-green: #ffffff;
    --on-red: #ffffff;
    --bg-top: #1c1d22;
    --shadow: 0 1px 4px 1px rgba(0, 0, 0, 0.25);
  }
}
:root[data-theme="dark"] {
  --bg: #1c1d22;
  --surface: #2a2d34;
  --surface-2: #363a43;
  --text: #f3f3f3;
  --text-2: #dbdbdb;
  --muted: #a7a9ad;
  --subtle: #9e9e9e;
  --primary: #d63a52;
  --primary-text: #ff7a8c;
  --on-primary: #ffffff;
  --primary-disabled: #5a3138;
  --on-primary-disabled: #b9a3a7;
  --secondary: #4a2a31;
  --on-secondary: #ffb3be;
  --border: #3e434c;
  --success-bg: #1f4d3e;
  --success: #8ef5c3;
  --error-bg: #5c1f1f;
  --error: #ffb4a9;
  --info-bg: #1e2a4d;
  --info: #c7d5ff;
  --warn-bg: #4d3a1a;
  --warn: #ffe3a8;
  --green: #4cc0a0;
  --yellow: #f7d65d;
  --red: #f37475;
  --accent: #d63a52;
  --in: #8ef5c3;
  --in-bg: #1f4d3e;
  --out: #ffb3be;
  --out-bg: #4a2a31;
  --out-text: #f3f3f3;
  --swap: #c7d5ff;
  --swap-bg: #1e2a4d;
  --on-green: #ffffff;
  --on-red: #ffffff;
  --bg-top: #1c1d22;
  --shadow: 0 1px 4px 1px rgba(0, 0, 0, 0.25);
}
:root[data-theme="light"] { color-scheme: light; }
:root[data-theme="dark"] { color-scheme: dark; }

/* BEAM (Settings -> Appearance -> Colours, issue #80): BEAM's own colours in place of Campfire red.
   Campfire red stays the default; the logo and the app icon stay Campfire's. Every value is BEAM's,
   with its source, in docs/beam-brand-palette.json, and test/unit/theme.test.mjs checks them against it.
   Dark is BEAM's own wallet (desktop beam-ui Mainnet.qml, the same palette in the browser extension,
   Android and iOS): navy #042548 under a #035b8f band at the top, cards #103051, turquoise #00f6d2
   with marine #032e49 on it, bluey-grey #8da1ad secondary text, received #0bccf7, sent #da68f5,
   swaps #39fdf2, failed #ff746b, error #ff625c, warning #f4ce4a. BEAM has no light theme, so light is derived: the
   navy becomes the ink, the backgrounds are its hue nearly white, the turquoise button keeps its
   marine label, and every accent used as text keeps BEAM's hue and saturation, darkened until it
   reads at 4.5:1 (BEAM's accents are made for navy: on white they read 1.4:1 to 2.9:1). Where one of
   BEAM's dark values would read under 4.5:1 here it is lightened or kept off that surface: the band
   is 25% of #035b8f, and error text is BEAM's failed #ff746b (its error red #ff625c reads 4.2:1 on
   the input colour). The two dark blocks are one palette, like Campfire's. */
:root[data-skin="beam"] {
  --bg: #eef4fa;
  --surface: #ffffff;
  --surface-2: #e2ebf3;
  --text: #042548;
  --text-2: #23405e;
  --muted: #566a76;
  --subtle: #8da1ad;
  --primary: #00f6d2;
  --primary-text: #007564;
  --on-primary: #032e49;
  --primary-disabled: #d3e4e1;
  --on-primary-disabled: #7c918e;
  --secondary: #d9f7f2;
  --on-secondary: #00665a;
  --border: #d3e0ea;
  --success-bg: #d9f7f2;
  --success: #00665a;
  --error-bg: #ffe7e7;
  --error: #b80f0a;
  --info-bg: #dcf5fc;
  --info: #035e73;
  --warn-bg: #fdf3d6;
  --warn: #5c4700;
  --green: #007564;
  --yellow: #7d6407;
  --red: #d10700;
  --accent: #007564;
  --in: #04728b;
  --in-bg: #dcf5fc;
  --out: #ab0dce;
  --out-bg: #f7e5fd;
  --out-text: #ab0dce;
  --swap: #017972;
  --swap-bg: #d6f7f5;
  --on-green: #ffffff;
  --on-red: #ffffff;
  --bg-top: #e0ebf4;
  --shadow: 0 1px 4px 1px rgba(4, 37, 72, 0.08);
}
@media (prefers-color-scheme: dark) {
  :root[data-skin="beam"]:not([data-theme="light"]) {
    --bg: #042548;
    --surface: #103051;
    --surface-2: #183657;
    --text: #ffffff;
    --text-2: #d6d9e0;
    --muted: #8da1ad;
    --subtle: #889da9;
    --primary: #00f6d2;
    --primary-text: #00f6d2;
    --on-primary: #032e49;
    --primary-disabled: #2c5066;
    --on-primary-disabled: #889da9;
    --secondary: #03445d;
    --on-secondary: #00f6d2;
    --border: #33566b;
    --success-bg: #03445d;
    --success: #00f6d2;
    --error-bg: #2a2e4b;
    --error: #ff746b;
    --info-bg: #053e62;
    --info: #0bccf7;
    --warn-bg: #283e48;
    --warn: #f4ce4a;
    --green: #00f6d2;
    --yellow: #f4ce4a;
    --red: #ff625c;
    --accent: #00f6d2;
    --in: #0bccf7;
    --in-bg: #0f476a;
    --out: #da68f5;
    --out-bg: #2e386a;
    --out-text: #da68f5;
    --swap: #39fdf2;
    --swap-bg: #164f69;
    --on-green: #032e49;
    --on-red: #032e49;
    --bg-top: #04325a;
    --shadow: 0 1px 4px 1px rgba(0, 0, 0, 0.3);
  }
}
:root[data-skin="beam"][data-theme="dark"] {
  --bg: #042548;
  --surface: #103051;
  --surface-2: #183657;
  --text: #ffffff;
  --text-2: #d6d9e0;
  --muted: #8da1ad;
  --subtle: #889da9;
  --primary: #00f6d2;
  --primary-text: #00f6d2;
  --on-primary: #032e49;
  --primary-disabled: #2c5066;
  --on-primary-disabled: #889da9;
  --secondary: #03445d;
  --on-secondary: #00f6d2;
  --border: #33566b;
  --success-bg: #03445d;
  --success: #00f6d2;
  --error-bg: #2a2e4b;
  --error: #ff746b;
  --info-bg: #053e62;
  --info: #0bccf7;
  --warn-bg: #283e48;
  --warn: #f4ce4a;
  --green: #00f6d2;
  --yellow: #f4ce4a;
  --red: #ff625c;
  --accent: #00f6d2;
  --in: #0bccf7;
  --in-bg: #0f476a;
  --out: #da68f5;
  --out-bg: #2e386a;
  --out-text: #da68f5;
  --swap: #39fdf2;
  --swap-bg: #164f69;
  --on-green: #032e49;
  --on-red: #032e49;
  --bg-top: #04325a;
  --shadow: 0 1px 4px 1px rgba(0, 0, 0, 0.3);
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; height: 100%; }
body {
  /* A band of --bg-top fading into the page, as BEAM's wallets draw theirs (Campfire's is its own --bg). */
  background: linear-gradient(var(--bg-top), var(--bg) 230px) no-repeat, var(--bg);
  color: var(--text);
  font-family: 'Inter', -apple-system, system-ui, sans-serif;
  font-size: 16px;
  line-height: 1.4;
  -webkit-font-smoothing: antialiased;
  -webkit-tap-highlight-color: transparent;
  -webkit-text-size-adjust: 100%;
  overscroll-behavior: none;
}
button, input, select, textarea { font: inherit; color: inherit; }
/* 16px inputs: iOS zooms into anything smaller. */
input, select, textarea { font-size: 16px; }

#app { max-width: 520px; margin: 0 auto; min-height: 100%; }

.screen {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  min-height: 100dvh;
  padding: calc(var(--safe-top) + 8px) calc(var(--gutter) + var(--safe-right)) calc(var(--safe-bottom) + 16px) calc(var(--gutter) + var(--safe-left));
}
.screen.has-tabs { padding-bottom: calc(var(--tabbar-h) + var(--safe-bottom) + 12px); }

.topbar { display: flex; align-items: center; gap: 8px; min-height: 48px; margin-bottom: 8px; }
.topbar h1 { font-size: 20px; font-weight: 700; margin: 0; flex: 1; }
.topbar .brand { display: flex; align-items: center; gap: 8px; flex: 1; font-weight: 700; font-size: 18px; }
.topbar .brand img { width: 26px; height: 30px; }
.icon-btn { background: none; border: 0; padding: 10px; margin: -6px; border-radius: 10px; color: var(--text); display: inline-flex; cursor: pointer; }
.icon-btn:active { background: var(--surface-2); }
.icon-btn svg { width: 24px; height: 24px; }

.content { flex: 1; display: flex; flex-direction: column; gap: 14px; }
.actions { display: flex; flex-direction: column; gap: 10px; margin-top: 16px; }
.step { font-size: 14px; color: var(--muted); font-weight: 500; }

h2.title { font-size: 24px; font-weight: 700; margin: 4px 0 0; line-height: 1.25; }
p { margin: 0; }
.lead { color: var(--text-2); }
.small { font-size: 14px; color: var(--muted); }
.mono { font-family: ui-monospace, 'SF Mono', Menlo, monospace; font-size: 13px; word-break: break-all; }
/* "Version 0.2.14" (issue #82): last on Welcome, Unlock and first-run setup, at the bottom of a short screen. */
/* A link inside small print (Restore / Rescan: where BEAM publishes the snapshot, issue #79). */
.source-link { color: var(--on-secondary); font-weight: 500; text-decoration: underline; text-underline-offset: 2px; overflow-wrap: anywhere; }
.version { margin: auto 0 0; padding-top: 18px; font-size: 13px; color: var(--muted); text-align: center; font-variant-numeric: tabular-nums; }
.center { text-align: center; }

.btn {
  display: flex; align-items: center; justify-content: center; gap: 8px;
  width: 100%; min-height: 50px; padding: 12px 16px;
  border-radius: 10px; border: 0; cursor: pointer;
  font-weight: 600; font-size: 16px; text-decoration: none; white-space: nowrap;
}
.btn svg { width: 20px; height: 20px; }
.btn-primary { background: var(--primary); color: var(--on-primary); }
.btn-primary:disabled { background: var(--primary-disabled); color: var(--on-primary-disabled); cursor: not-allowed; }
.btn-secondary { background: var(--secondary); color: var(--on-secondary); }
.btn-secondary:disabled { opacity: 0.55; }
.btn-text { background: none; color: var(--on-secondary); min-height: 44px; }
.btn-danger { background: var(--error-bg); color: var(--error); }
.btn-row { display: flex; gap: 10px; }
.btn-row .btn { flex: 1; }
.btn-small { min-height: 36px; width: auto; padding: 6px 12px; font-size: 14px; border-radius: 8px; }

.card { background: var(--surface); border-radius: var(--radius); box-shadow: var(--shadow); padding: 16px; }
.card.flat { box-shadow: none; }
.card h3 { margin: 0 0 6px; font-size: 16px; font-weight: 600; }

.notice { border-radius: var(--radius); padding: 12px 14px; display: flex; gap: 10px; align-items: flex-start; font-size: 15px; }
.notice svg { width: 20px; height: 20px; flex: none; margin-top: 1px; }
.notice.warn { background: var(--warn-bg); color: var(--warn); }
.notice.error { background: var(--error-bg); color: var(--error); }
.notice.info { background: var(--info-bg); color: var(--info); }
.notice.success { background: var(--success-bg); color: var(--success); }
.notice .grow { flex: 1; }
.notice ul.plain-list { margin: 6px 0 0; padding-left: 18px; }
.notice ul.plain-list li + li { margin-top: 6px; }
.delete-flight .notice .grow { min-width: 0; }
.delete-flight .prompt-actions { flex-wrap: wrap; }
.selftest-log { white-space: pre-wrap; }

label.field { display: flex; flex-direction: column; gap: 6px; font-size: 14px; font-weight: 500; color: var(--text-2); }
.input {
  width: 100%; border: 1.5px solid transparent; border-radius: 10px;
  background: var(--surface-2); padding: 13px 14px; color: var(--text); outline: none;
}
.input:focus { border-color: var(--muted); }
.input.bad { border-color: var(--red); background: var(--error-bg); }
.input.good { border-color: var(--green); }
textarea.input { resize: none; min-height: 84px; }
.input-wrap { position: relative; display: flex; align-items: center; }
.input-wrap .input { padding-right: 76px; }
.input-wrap .inside { position: absolute; right: 6px; }
.hint { font-size: 13px; color: var(--muted); min-height: 18px; }
.hint.bad { color: var(--error); }
.hint.good { color: var(--success); }

.words { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.word { background: var(--surface); border-radius: 10px; padding: 10px 8px; font-weight: 600; font-size: 15px; display: flex; gap: 6px; align-items: baseline; min-width: 0; box-shadow: var(--shadow); }
.word span.n { color: var(--muted); font-weight: 500; font-size: 12px; min-width: 16px; }
.words.hidden-words .word { filter: blur(7px); user-select: none; }
.reveal { position: relative; }
.reveal .cover { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; }
.word-input { display: flex; align-items: center; gap: 4px; background: var(--surface-2); border-radius: 10px; padding: 0 8px; border: 1.5px solid transparent; }
.word-input .n { color: var(--muted); font-size: 12px; min-width: 16px; }
.word-input input { border: 0; background: none; padding: 11px 0; width: 100%; outline: none; min-width: 0; }
.word-input.bad { border-color: var(--red); background: var(--error-bg); }
.word-input.good { border-color: transparent; }
.word-input:focus-within { border-color: var(--muted); }

.choices { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; }
.choice { min-height: 46px; border-radius: 10px; border: 1.5px solid var(--border); background: var(--surface); font-weight: 600; cursor: pointer; }
.choice.on { border-color: var(--accent); background: var(--secondary); color: var(--on-secondary); }

.balance { padding: 20px 16px; }
.balance .label { font-size: 14px; color: var(--muted); font-weight: 500; }
.balance .amount { font-size: 34px; font-weight: 700; letter-spacing: -0.5px; line-height: 1.15; margin-top: 4px; word-break: break-all; }
.balance .amount .unit { font-size: 20px; font-weight: 600; color: var(--muted); margin-left: 6px; }
.balance .pending { font-size: 14px; color: var(--muted); margin-top: 6px; }
.syncline { display: flex; align-items: center; gap: 8px; font-size: 14px; margin-top: 12px; color: var(--text-2); }
.dot { width: 8px; height: 8px; border-radius: 50%; background: var(--subtle); flex: none; }
.dot.ok { background: var(--green); }
.dot.wait { background: var(--yellow); }
.dot.bad { background: var(--red); }

.list { display: flex; flex-direction: column; }
.row { display: flex; align-items: center; gap: 12px; padding: 12px 4px; border-bottom: 1px solid var(--border); background: none; border-left: 0; border-right: 0; border-top: 0; width: 100%; text-align: left; cursor: pointer; color: var(--text); }
.row:last-child { border-bottom: 0; }
.row .ico { width: 36px; height: 36px; border-radius: 50%; display: flex; align-items: center; justify-content: center; background: var(--surface-2); flex: none; }
.row .ico svg { width: 18px; height: 18px; }
/* Received and sent: an arrow each, a + or − on the amount, and in BEAM's skin BEAM's own blue and violet. */
.row .ico.in { background: var(--in-bg); color: var(--in); }
.row .ico.out { background: var(--out-bg); color: var(--out); }
.row .ico.ok { background: var(--success-bg); color: var(--success); }
.row .ico.fail { background: var(--error-bg); color: var(--error); }
.row .main { flex: 1; min-width: 0; }
.row .main .t { font-weight: 600; }
.row .main .s { font-size: 13px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.row .end { text-align: right; font-weight: 600; white-space: nowrap; }
.row .end.in { color: var(--in); }
.row .end.out { color: var(--out-text); }
.row .chev svg { width: 18px; height: 18px; color: var(--subtle); }
.section-title { font-size: 14px; font-weight: 600; color: var(--muted); margin: 6px 4px 0; text-transform: none; }
.asset-badge { width: 36px; height: 36px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 13px; background: var(--surface-2); color: var(--text); flex: none; }
.asset-badge img { width: 22px; height: 26px; }

.settings .row { padding: 14px 4px; }
.settings select.inline { border: 0; background: var(--surface-2); border-radius: 8px; padding: 6px 8px; max-width: 46%; flex: none; }

.qr { background: #fff; color: #20263d; border-radius: var(--radius); padding: 12px; display: flex; justify-content: center; align-self: center; width: min(78vw, 300px); }
/* Always white (a code must scan in any theme), so its ink is fixed too: the spinner and the warning
   icon that stand in for a code would otherwise take a dark theme's light text colour. */
.qr .spinner { border-color: #e0e3e3; border-top-color: #20263d; }
.qr svg { width: 100%; height: auto; display: block; }
.address-box { background: var(--surface); border-radius: var(--radius); padding: 12px 14px; }
/* The owner key: one tap selects all of it, for pasting by hand if copying is refused. */
.owner-key { font-size: 14px; line-height: 1.55; -webkit-user-select: all; user-select: all; }
.okey-msg { scroll-margin-bottom: 100px; }

.kv { display: flex; justify-content: space-between; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--border); }
.kv:last-child { border-bottom: 0; }
.kv .k { color: var(--muted); font-size: 15px; }
.kv .v { font-weight: 600; text-align: right; word-break: normal; overflow-wrap: anywhere; }
.big-amount { font-size: 32px; font-weight: 700; text-align: center; margin: 8px 0; word-break: break-all; }

.progress { height: 8px; background: var(--surface-2); border-radius: 4px; overflow: hidden; }
.progress > div { height: 100%; background: var(--accent); width: 0%; transition: width 0.3s; }
.progress.indeterminate > div { width: 35%; animation: indet 1.4s infinite ease-in-out; }
@keyframes indet { 0% { transform: translateX(-100%); } 100% { transform: translateX(300%); } }
.spinner { width: 22px; height: 22px; border: 3px solid var(--surface-2); border-top-color: var(--accent); border-radius: 50%; animation: spin 0.9s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }

.tabbar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 10;
  display: flex; justify-content: center;
  background: var(--surface); box-shadow: 0 -1px 0 var(--border);
  padding: 6px calc(8px + var(--safe-right)) calc(6px + var(--safe-bottom)) calc(8px + var(--safe-left));
}
.tabbar .inner { display: flex; width: 100%; max-width: 520px; }
.tab { flex: 1; background: none; border: 0; display: flex; flex-direction: column; align-items: center; gap: 2px; font-size: 12px; font-weight: 500; color: var(--muted); padding: 6px 0; min-height: 50px; cursor: pointer; }
.tab svg { width: 24px; height: 24px; }
.tab.on { color: var(--primary-text); }

.overlay { position: fixed; inset: 0; background: rgba(17, 18, 21, 0.45); z-index: 50; display: flex; align-items: flex-end; justify-content: center; }
.sheet {
  background: var(--bg); width: 100%; max-width: 520px; max-height: 92vh; overflow: auto;
  border-radius: 18px 18px 0 0; padding: 18px calc(var(--gutter) + var(--safe-right)) calc(18px + var(--safe-bottom)) calc(var(--gutter) + var(--safe-left));
  display: flex; flex-direction: column; gap: 14px;
}
.sheet .grab { width: 40px; height: 5px; border-radius: 3px; background: var(--border); align-self: center; }
.sheet h2 { margin: 0; font-size: 20px; }

.toast {
  position: fixed; left: 50%; transform: translateX(-50%); bottom: calc(var(--tabbar-h) + var(--safe-bottom) + 16px);
  background: var(--text); color: var(--bg); padding: 10px 16px; border-radius: 10px; font-size: 15px; z-index: 80; width: max-content; max-width: min(90vw, 440px); text-align: center; border: 1px solid rgba(255, 255, 255, 0.16); box-shadow: 0 4px 16px rgba(0, 0, 0, 0.25);
}
.banner { display: flex; align-items: center; gap: 10px; }

.hero { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 10px; padding: 20px 0 8px; }
.hero img { width: 64px; height: 75px; }
.hero h1 { margin: 6px 0 0; font-size: 28px; font-weight: 700; }
.hero p { color: var(--text-2); font-size: 17px; }
.steps-list { margin: 0; padding-left: 20px; display: flex; flex-direction: column; gap: 6px; }
.empty { text-align: center; padding: 24px 8px; display: flex; flex-direction: column; gap: 10px; align-items: center; }
.empty svg { width: 36px; height: 36px; color: var(--subtle); }
.status-icon { width: 64px; height: 64px; border-radius: 50%; display: flex; align-items: center; justify-content: center; align-self: center; }
.status-icon svg { width: 32px; height: 32px; }
.status-icon.ok { background: var(--success-bg); color: var(--success); }
.status-icon.wait { background: var(--info-bg); color: var(--info); }
.status-icon.bad { background: var(--error-bg); color: var(--error); }
.hidden { display: none !important; }
details.more summary { cursor: pointer; color: var(--on-secondary); font-weight: 600; padding: 6px 0; }
details.more[open] summary { margin-bottom: 6px; }
.inline-icon { width: 16px; height: 16px; vertical-align: -3px; }
.grow { flex: 1; }

.card p + p, .card .steps-list + p, .card h3 + p { margin-top: 8px; }
.card .card-btn { margin-top: 12px; }
@media (max-height: 700px) { .qr { width: min(56vw, 230px); padding: 8px; } }

.asset-row { cursor: default; }
.asset-row .end { white-space: normal; max-width: 55%; word-break: break-all; }
.asset-row .main .t { overflow-wrap: anywhere; }
.kv button.v { background: none; border: 0; padding: 0; color: var(--on-secondary); cursor: pointer; text-align: right; min-height: 0; }

/* Welcome: three choices fit a 375 x 667 screen; a smaller hero when the Home Screen guide shows. */
.welcome .hero { padding-top: 12px; }
.hero.compact { gap: 4px; padding: 4px 0 0; }
/* One tab at a time (screens/one_tab.js): a sentence for a title, so a little smaller than the name. */
.one-tab .hero { padding-top: 40px; gap: 12px; }
.one-tab .hero h1 { font-size: 24px; line-height: 1.25; text-wrap: balance; }
.one-tab .hero p, .one-tab .actions .small { text-wrap: balance; }
.hero.compact img { width: 40px; height: 47px; }
.hero.compact h1 { font-size: 24px; margin-top: 2px; }
.hero.compact p { font-size: 15px; }
.a2hs { padding: 12px 14px; }
.a2hs h3 { font-size: 15px; }
.a2hs p { font-size: 14px; color: var(--text-2); }

/* Import wallet.db: the real file input stays in the page (iOS opens the picker from its label). */
.file-input { position: absolute; width: 1px; height: 1px; opacity: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
label.btn { user-select: none; -webkit-user-select: none; }
label.btn.disabled { pointer-events: none; opacity: 0.5; }
.file-card { display: flex; align-items: center; gap: 12px; padding: 12px 14px; }
.file-card .ico { width: 40px; height: 40px; border-radius: 10px; display: flex; align-items: center; justify-content: center; background: var(--secondary); color: var(--on-secondary); flex: none; }
.file-card .ico svg { width: 22px; height: 22px; }
.file-card .main { flex: 1; min-width: 0; }
.file-card .main .t { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.file-card .main .s { font-size: 13px; color: var(--muted); }
.file-card .btn-text { flex: none; padding: 6px 8px; }

/* Static splash in index.html: on screen from the first paint, before any script runs. */
.splash { justify-content: center; align-items: center; gap: 18px; }
.splash .spinner { margin: 0 auto; }
/* First-run setup */
.install .title { font-size: 20px; }
.tripwire .notice.error { font-size: 16px; }
[data-testid="check-updates"] .main .s { white-space: normal; }
.prompt-actions { margin-top: 10px; justify-content: flex-start; }
.prompt-actions .btn { flex: none; }

/* Asset badges: BEAM's logo, or first letters on a colour picked by the asset id. */
.asset-badge.tinted { background: var(--badge); color: var(--badge-ink); }
.asset-badge.beam { background: none; }
.asset-badge.beam img { width: 100%; height: 100%; }
.asset-badge.small { width: 22px; height: 22px; font-size: 10px; }
/* An asset's own (bundled) icon as a coin; the neutral disc shows while it loads, and for good
   behind an icon that is not a filled circle itself (framed, with a hairline edge). */
.asset-badge.asset-icon { position: relative; overflow: hidden; }
.asset-badge.asset-icon img { display: block; width: 100%; height: 100%; }
.asset-badge.asset-icon img.cover { object-fit: cover; }
.asset-badge.asset-icon img.contain { object-fit: contain; }
.asset-badge.asset-icon.framed img { width: calc(100% - 2 * var(--inset, 0%)); height: calc(100% - 2 * var(--inset, 0%)); }
.asset-badge.asset-icon.framed::after { content: ''; position: absolute; inset: 0; border-radius: 50%; border: 1px solid var(--border); pointer-events: none; }
.asset-badge.asset-icon.small.framed::after { border-width: 0.75px; }
/* A DEX liquidity token: its pool's two coins, the second one ringed in the colour behind it. */
.asset-badge.pair { position: relative; background: none; --ring: 1.8px; }
.asset-badge.pair.small { --ring: 1.1px; }
.asset-badge.pair > .asset-badge { position: absolute; width: 66%; height: 66%; }
.asset-badge.pair > .asset-badge:first-child { left: 0; top: 0; }
.asset-badge.pair > .asset-badge:last-child { right: var(--ring); bottom: var(--ring); box-shadow: 0 0 0 var(--ring) var(--coin-gap, var(--surface)); }
.asset-badge.pair > .asset-badge.pair:last-child { background: var(--coin-gap, var(--surface)); border-radius: 50%; }
.asset-badge.pair .asset-badge.pair { --ring: 1.2px; }
.row.on, .asset-pick { --coin-gap: var(--surface-2); }
.row .main .warn-line { font-size: 13px; color: var(--error); margin-top: 2px; }
.row .ico.swap { background: var(--swap-bg); color: var(--swap); }
.row .end .in { color: var(--in); }
.row.on { background: var(--surface-2); border-radius: 8px; }
.btn.wrap { white-space: normal; text-align: center; line-height: 1.25; }

/* Home: three actions side by side, icon above the word. */
.btn-row.three .btn { flex-direction: column; gap: 2px; min-height: 62px; padding: 8px 4px; font-size: 15px; }
.btn-row.three .btn svg { width: 22px; height: 22px; }

/* Swap */
.swap .content { gap: 12px; }
.swap-pair { position: relative; display: flex; flex-direction: column; gap: 6px; }
.swap-box { padding: 12px 14px; display: flex; flex-direction: column; gap: 6px; }
.swap-label { font-size: 14px; font-weight: 500; color: var(--muted); }
.swap-line { display: flex; align-items: center; gap: 10px; min-height: 44px; }
.swap-input { flex: 1; min-width: 0; border: 0; background: none; outline: none; padding: 0; font-size: 28px; font-weight: 700; color: var(--text); }
.swap-input::placeholder { color: var(--muted); }
.swap-out { flex: 1; min-width: 0; font-size: 28px; font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.swap-out.muted { color: var(--muted); }
.swap-sub { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--muted); min-height: 22px; }
.swap-sub .btn-small { min-height: 28px; padding: 2px 6px; }
.asset-pick { flex: none; display: inline-flex; align-items: center; gap: 6px; padding: 7px 8px 7px 7px; border-radius: 22px; border: 0; background: var(--surface-2); color: var(--text); font-weight: 600; font-size: 16px; cursor: pointer; max-width: 50%; }
.asset-pick span:not(.asset-badge) { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.asset-pick svg { width: 16px; height: 16px; flex: none; color: var(--muted); }
/* In the pair's flow, between the two cards: the 6px gaps and -22px margins put its centre on the seam
   whatever each card's height (the share chips made "You pay" taller, and top: 50% then fell inside it). */
.swap-flip { position: relative; align-self: center; flex: none; margin: -22px 0; width: 38px; height: 38px; border-radius: 50%; border: 3px solid var(--bg); background: var(--surface); color: var(--text); display: flex; align-items: center; justify-content: center; cursor: pointer; z-index: 1; box-shadow: var(--shadow); }
.swap-flip svg { width: 18px; height: 18px; }
.swap-details { padding: 4px 14px; }
.swap-details .kv { padding: 8px 0; }
.swap-details .kv button.v { padding: 12px 0 12px 24px; margin: -12px 0; } /* a 44px tap target, same layout */
.swap-notes { display: flex; flex-direction: column; gap: 8px; }
.swap .actions { margin-top: 12px; gap: 6px; }
.swap .actions .hint { min-height: 0; }
.notice .btn.inline { display: inline-flex; width: auto; min-height: 0; padding: 0; color: inherit; text-decoration: underline; }
.picker-list { max-height: 52vh; overflow: auto; padding: 4px 8px; }
.pad { padding: 16px 8px; }
.swap-amounts { display: flex; flex-wrap: wrap; justify-content: center; align-items: baseline; gap: 4px 10px; font-size: 26px; }
.swap-amounts .arrow { color: var(--muted); }

/* Approve sheet */
.consent { display: flex; flex-direction: column; gap: 12px; }
.consent h2 { margin: 0; font-size: 20px; }
.consent-app { display: flex; align-items: center; gap: 8px; font-size: 15px; color: var(--text-2); font-weight: 500; }
.consent-app img { width: 22px; height: 26px; }
.consent-app .app-dot { width: 26px; height: 26px; border-radius: 50%; background: var(--surface-2); display: flex; align-items: center; justify-content: center; }
.consent-app .app-dot svg { width: 16px; height: 16px; }
.consent .card { padding: 4px 14px; }
.consent .asset-v { display: inline-flex; align-items: center; gap: 6px; justify-content: flex-end; }
.consent .actions { margin-top: 4px; }
/* dApps */
.dapp-list .dapp-row { padding: 10px 4px; align-items: center; }
.dapp-list .dapp-row .s.meta { font-size: 12px; color: var(--muted); }
.dapp-list .dapp-row:disabled { opacity: 0.55; cursor: not-allowed; }
.dapp-icon { width: 40px; height: 40px; border-radius: 10px; background: #042548; display: flex; align-items: center; justify-content: center; flex: none; overflow: hidden; }
.dapp-icon img { width: 28px; height: 28px; object-fit: contain; }
.dapp-icon.big { width: 48px; height: 48px; }
.dapp-icon.big img { width: 34px; height: 34px; }
.pill { flex: none; font-size: 14px; font-weight: 600; padding: 6px 14px; border-radius: 999px; background: var(--secondary); color: var(--on-secondary); }
.dapp-sheet-head { display: flex; align-items: center; gap: 12px; }
.dapp-sheet-head h2 { flex: 1; }
.check-row { display: flex; gap: 10px; align-items: flex-start; font-size: 15px; color: var(--text-2); background: var(--surface); border-radius: var(--radius); padding: 12px 14px; cursor: pointer; }
.check-row input { width: 20px; height: 20px; margin: 1px 0 0; flex: none; accent-color: var(--accent); }
.dapp-progress { display: flex; flex-direction: column; gap: 10px; }
.dapp-message { white-space: pre-wrap; max-height: 40vh; overflow: auto; }
/* dApps from a file: an installed row with its Remove beside it, the file block, the servers a dApp may reach. */
.dapp-item { display: flex; align-items: center; border-bottom: 1px solid var(--border); }
.dapp-item:last-child { border-bottom: 0; }
.dapp-list .dapp-item .dapp-row { border-bottom: 0; flex: 1; min-width: 0; }
.dapp-item .dapp-remove { flex: none; margin: 0 -4px 0 2px; color: var(--muted); }
.dapp-item .dapp-remove svg { width: 20px; height: 20px; }
.dapp-icon.none, .dapp-bar-icon.none { background: var(--surface-2); color: var(--muted); }
.dapp-icon.none svg { width: 22px; height: 22px; }
.dapp-bar-icon.none svg { width: 16px; height: 16px; }
.dapp-loading { display: flex; align-items: center; gap: 10px; }
.dapp-file-block { display: flex; flex-direction: column; gap: 8px; margin-top: 4px; }
.dapp-file-block .small { margin: 0 4px; }
label.btn.disabled { opacity: 0.55; pointer-events: none; }
.dapp-list .dapp-row .s.meta.wrap { white-space: normal; }
.dapp-hosts { padding: 0 12px; }
.dapp-host { cursor: default; align-items: flex-start; }
.dapp-host .main .t { overflow-wrap: anywhere; }
.dapp-host .main .btn-small { margin: 4px 0 0 -12px; min-height: 32px; }
.btn-text.danger { color: var(--error); }
.tag.unchecked { align-self: flex-start; margin: 0; background: var(--warn-bg); color: var(--warn); }

/* A running dApp fills the window, above the wallet's own screen. */
.dapp-layer { position: fixed; inset: 0; z-index: 40; display: flex; flex-direction: column; background: #042548; }
.dapp-bar { display: flex; align-items: center; gap: 10px; min-height: 48px; padding: calc(var(--safe-top) + 4px) calc(12px + var(--safe-right)) 4px calc(12px + var(--safe-left)); background: var(--surface); color: var(--text); box-shadow: 0 1px 0 var(--border); flex: none; }
.dapp-bar h1 { flex: 1; margin: 0; font-size: 17px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dapp-bar-icon { width: 26px; height: 26px; border-radius: 7px; background: #042548; display: flex; align-items: center; justify-content: center; flex: none; }
.dapp-bar-icon img { width: 18px; height: 18px; }
.dapp-busy { flex: none; }
.dapp-hint { flex: none; display: flex; align-items: center; gap: 8px; padding: 6px 8px 6px calc(14px + var(--safe-left)); background: var(--info-bg); color: var(--info); font-size: 14px; }
.dapp-hint span { flex: 1; }
.dapp-hint .icon-btn { color: var(--info); margin: 0; padding: 6px; }
.dapp-hint .icon-btn svg { width: 18px; height: 18px; }
.dapp-busy .progress { height: 3px; border-radius: 0; background: transparent; }
.dapp-stage { flex: 1; position: relative; min-height: 0; }
.dapp-frame { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; display: block; background: #042548; }
.dapp-cover { position: absolute; left: 0; right: 0; top: calc(48px + var(--safe-top)); bottom: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px; padding: 24px; background: #042548; color: #ffffff; text-align: center; }
.dapp-cover .spinner { border-color: rgba(255, 255, 255, 0.2); border-top-color: #ffffff; }
.dapp-cover .notice { max-width: 440px; text-align: left; }
.dapp-cover .btn { max-width: 440px; }
.dapp-cover .btn-text { color: #ffffff; }
body.dapp-open { overflow: hidden; }

/* Ethereum (screens/eth_*.js) and the BEAM / Ethereum switcher at the top of both Homes. */
.chain-switch { display: flex; background: var(--surface-2); border-radius: 10px; padding: 3px; gap: 3px; }
.chain-opt { flex: 1; border: 0; background: none; border-radius: 8px; min-height: 36px; font-weight: 600; font-size: 15px; color: var(--muted); cursor: pointer; }
.chain-opt.on { background: var(--surface); color: var(--text); box-shadow: var(--shadow); cursor: default; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .chain-switch { background: rgba(0, 0, 0, 0.28); }
  :root:not([data-theme="light"]) .chain-opt.on { background: var(--surface-2); }
}
:root[data-theme="dark"] .chain-switch { background: rgba(0, 0, 0, 0.28); }
:root[data-theme="dark"] .chain-opt.on { background: var(--surface-2); }
.row .main .s.addr { font-feature-settings: 'calt' 0; white-space: normal; }
.mono.addr-groups { word-break: normal; overflow-wrap: anywhere; }
.nowrap { white-space: nowrap; }
/* Inter's contextual alternates turn the x of "0x1f" into a multiplication sign. */
.sheet .lead { font-feature-settings: 'calt' 0; }
.row.field-row { flex-wrap: wrap; cursor: default; }
.row.field-row select.inline { flex: 1 1 100%; max-width: none; margin-left: 48px; padding: 10px 8px; }
.asset-badge.eth { background: #eef0f8; }
.asset-badge.eth img { width: 22px; height: 22px; }
.eth-hero img { width: 56px; height: 56px; }
.addr-chip { display: inline-flex; align-items: center; gap: 6px; margin-top: 8px; padding: 4px 10px; border-radius: 999px; border: 0; background: var(--surface-2); color: var(--text-2); cursor: pointer; }
.addr-chip svg { width: 14px; height: 14px; }
/* Settings -> Ethereum wallet: the private key, blurred dots until it is opened. */
.key-box { background: var(--surface-2); border-radius: 10px; padding: 12px 14px; margin-top: 10px; }
.key-box .mono { font-size: 14px; line-height: 1.5; word-break: normal; overflow-wrap: anywhere; font-feature-settings: 'calt' 0; }
.key-box.masked .mono { filter: blur(5px); user-select: none; }
.key-actions { margin-top: 10px; justify-content: flex-start; }
.key-actions .btn { flex: none; }
.addr-inline { font-feature-settings: 'calt' 0; white-space: nowrap; }
.addr-chip .mono { font-size: 13px; }
.kv.kv-stack { flex-direction: column; gap: 4px; }
.kv.kv-stack .v { text-align: left; font-weight: 500; }
.kv .v.list { word-break: normal; overflow-wrap: anywhere; }
.kv .v.list > span { display: block; }
/* About -> Staged update: the version, and "Delete this download" under it (issue #78). */
.kv .v.staged { display: flex; flex-direction: column; align-items: flex-end; gap: 2px; }
.kv .v.staged .btn-small { min-height: 40px; padding: 4px 0 4px 12px; margin-right: 0; }
.stack { display: flex; flex-direction: column; gap: 14px; }
.row .main .s.wrap { white-space: normal; }
input.switch { appearance: none; -webkit-appearance: none; width: 46px; height: 28px; border-radius: 14px; background: var(--border); position: relative; flex: none; cursor: pointer; margin: 0; transition: background 0.2s; }
input.switch::after { content: ''; position: absolute; top: 3px; left: 3px; width: 22px; height: 22px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3); transition: transform 0.2s; }
input.switch:checked { background: var(--green); }
input.switch:checked::after { transform: translateX(18px); }
input.switch:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.btn-link { background: none; border: 0; padding: 0; color: var(--on-secondary); font: inherit; font-weight: 600; cursor: pointer; text-decoration: underline; }
a.btn { text-decoration: none; }
details.more.card { padding: 12px 16px; }

/* BEAM names and airdrop codes (screens/names.js, screens/airdrop*.js); on Home they share one line with dApps. */
.more-entry { display: flex; padding: 0; overflow: hidden; }
.more-entry .tile { flex: 1; min-width: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; min-height: 58px; padding: 7px 4px; border: 0; background: none; color: var(--text); cursor: pointer; }
.more-entry .tile + .tile { border-left: 1px solid var(--border); }
.more-entry .tile:active { background: var(--surface-2); }
.more-entry .ico { width: 24px; height: 24px; border-radius: 50%; display: flex; align-items: center; justify-content: center; background: var(--secondary); color: var(--on-secondary); }
.more-entry .ico svg { width: 14px; height: 14px; }
.more-entry .t { max-width: 100%; font-weight: 600; font-size: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.feature .content > div:empty { display: none; }
.inline-actions { margin-top: 2px; gap: 6px; }
.inline-actions .hint { min-height: 0; }
.hint .btn.inline { display: inline; width: auto; min-height: 0; padding: 0; color: var(--on-secondary); font-weight: 600; text-decoration: underline; }
.input-wrap.suffix .input { padding-right: 64px; }
.suffix-text { position: absolute; right: 14px; color: var(--muted); font-weight: 500; pointer-events: none; }
.name-result { display: flex; flex-direction: column; gap: 6px; padding: 12px 14px; }
.name-line { display: flex; align-items: center; gap: 8px; }
.name-ico { width: 20px; height: 20px; flex: none; }
.name-result.good .name-ico { color: var(--success); }
.name-result.taken .name-ico { color: var(--error); }
.spinner.small { width: 16px; height: 16px; border-width: 2px; flex: none; }
.name-quote { display: flex; flex-direction: column; gap: 8px; }
.stepper { display: inline-flex; align-items: center; gap: 4px; }
.stepper-btn { width: 32px; height: 32px; margin: 0; padding: 0; justify-content: center; align-items: center; background: var(--surface-2); border-radius: 50%; font-size: 18px; font-weight: 600; line-height: 1; }
.stepper-btn:disabled { opacity: 0.4; cursor: default; }
.stepper-value { min-width: 64px; text-align: center; font-weight: 600; }
.swap-details .kv:has(.stepper) { align-items: center; padding: 6px 0; }
.kv .k .small { font-size: 12px; }
.code-input { font-family: ui-monospace, 'SF Mono', Menlo, monospace; letter-spacing: 1px; text-transform: uppercase; }
.drop-fields { display: flex; gap: 10px; }
/* A code that was found: the no-BEAM-needed note, its figures and what a claim shows, apart from each other. */
.drop-found { display: flex; flex-direction: column; gap: 10px; }
.drop-fields .field.grow { flex: 1; min-width: 0; }
.drop-fields .count-field { width: 92px; flex: none; }
.batch { display: flex; flex-direction: column; gap: 6px; padding: 12px 14px; }
.batch-head { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; }
.batch .btn-row { justify-content: flex-start; flex-wrap: wrap; }
.batch .btn-row .btn { flex: none; }
.code-row { padding: 10px 4px; cursor: default; }
.code-n { width: 24px; color: var(--muted); font-size: 13px; text-align: right; flex: none; }
.code-text { font-size: 16px; letter-spacing: 0.5px; word-break: normal; }
/* Names are shown exactly as registered: Inter would draw "0x4" as "0×4". */
.names, .consent, .plain { font-feature-settings: 'calt' 0; }
.names .row .main .s { white-space: normal; }
/* BEAM names: a name's own screens, the money waiting for names (screens/name_*.js, names_claim.js). */
.names-home:empty { display: none; }
.names-line { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; padding: 10px 14px; }
.names-line .grow { flex: 1; min-width: 0; }
.names-line .btn { flex: none; width: auto; }
.names-line .ico { width: 28px; height: 28px; border-radius: 50%; display: flex; align-items: center; justify-content: center; background: var(--surface-2); flex: none; }
.names-line .ico svg { width: 16px; height: 16px; }
.names-line-msg { flex: 1 1 100%; }
.names-line-msg.bad { color: var(--error); }
.name-stack { display: flex; flex-direction: column; gap: 14px; }
.name-stack:empty { display: none; }
.names-mine-box { display: flex; flex-direction: column; gap: 8px; }
.name-head { display: flex; flex-direction: column; gap: 4px; padding: 12px 14px; }
.name-head .name-line { justify-content: space-between; }
.name-title { font-size: 22px; font-weight: 700; margin: 0; overflow-wrap: anywhere; }
.tone-soon { color: var(--on-secondary); }
.tone-bad { color: var(--error); }
.kv .v.bad { color: var(--error); }
.check-code { font-size: 20px; font-weight: 600; letter-spacing: 0.5px; word-break: normal; overflow-wrap: anywhere; color: var(--text); margin: 2px 0; }
.check-card, .key-card, .names-money { display: flex; flex-direction: column; gap: 6px; padding: 12px 14px; }
.key-card .qr { max-width: 220px; margin: 0 auto; }
.key-card .mono.small { font-size: 12px; word-break: break-all; }
.names-money .btn { align-self: flex-start; width: auto; }
.name-row { cursor: pointer; }
.name-row:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; border-radius: 8px; }
.name-row .main .s.sale { color: var(--info); }
.names-receive-link { align-self: flex-start; width: auto; padding-left: 4px; }
.paste-btn { align-self: flex-start; width: auto; }
.paste-btn svg { width: 16px; height: 16px; }
.sell-fields { display: flex; gap: 8px; }
.sell-fields .input:first-child { flex: 1; min-width: 0; }
.sell-fields .sell-asset { width: 112px; flex: none; }
/* Buy (screens/buy_*.js): Home's fourth action, the chooser sheet, Buy BEAM and its buys. */
.btn-row.four { gap: 8px; }
.btn-row.four .btn { padding: 8px 2px; font-size: 14px; }
.overline { font-size: 13px; font-weight: 600; letter-spacing: 0.4px; text-transform: uppercase; color: var(--muted); margin-bottom: -8px; }
.choice-card { display: flex; flex-direction: column; align-items: stretch; gap: 8px; width: 100%; text-align: left; border: 1.5px solid transparent; cursor: pointer; color: var(--text); font: inherit; }
.choice-card:active { border-color: var(--accent); }
.choice-head { display: flex; align-items: center; gap: 10px; }
.choice-title { flex: 1; font-size: 18px; font-weight: 700; }
.choice-text { font-size: 15px; color: var(--text-2); }
.choice-action { display: flex; align-items: center; gap: 2px; font-weight: 600; color: var(--on-secondary); }
.choice-action svg { width: 18px; height: 18px; }
.tag { flex: none; font-size: 12px; font-weight: 600; padding: 3px 9px; border-radius: 999px; }
.tag.private { background: var(--success-bg); color: var(--success); }
.tag.public { background: var(--info-bg); color: var(--info); }
.badge-pair { position: relative; flex: none; display: inline-flex; }
.badge-mark { position: absolute; right: -3px; bottom: -3px; width: 18px; height: 18px; border-radius: 50%; background: #eef0f8; border: 2px solid var(--surface); display: flex; align-items: center; justify-content: center; }
.badge-mark img { width: 10px; height: 10px; }
.asset-badge.coin.three { font-size: 11px; letter-spacing: -0.3px; }
.asset-badge.coin.small.three { font-size: 8px; }
.coin-chip { display: inline-flex; flex-direction: column; line-height: 1.1; min-width: 0; }
.coin-chip .chain { font-size: 11px; font-weight: 500; color: var(--muted); }
.asset-pick.static { cursor: default; }
.swap-sub .right { text-align: right; }
.link-left { justify-content: flex-start; padding-left: 0; min-height: 36px; }
.row .ico.wait { background: var(--warn-bg); color: var(--warn); }
.tone-in { color: var(--success) !important; }
.tone-bad { color: var(--error) !important; }
.tone-wait { color: var(--yellow) !important; }
.steps { display: flex; flex-direction: column; gap: 12px; }
.step-row { display: flex; align-items: center; gap: 10px; font-weight: 500; }
.step-row.waiting { color: var(--muted); font-weight: 400; }
.step-mark { width: 22px; height: 22px; border-radius: 50%; flex: none; display: flex; align-items: center; justify-content: center; border: 2px solid var(--border); }
.step-mark svg { width: 14px; height: 14px; stroke-width: 3; }
.step-row.done .step-mark { background: var(--green); border-color: var(--green); color: var(--on-green); }
.step-row.active .step-mark { border-color: var(--yellow); color: var(--yellow); }
.step-row.failed .step-mark { background: var(--red); border-color: var(--red); color: var(--on-red); }
.exact-amount { padding: 12px 14px; }
.exact-amount .big { font-size: 20px; font-weight: 700; }
.address-box .banner { margin-bottom: 6px; }
/* The primary button stays in sight on a short phone: the actions stick to the bottom while the form scrolls. */
.sticky-actions .actions { position: sticky; bottom: 0; z-index: 5; background: var(--bg); margin: 12px calc(-1 * var(--gutter)) 0; padding: 10px var(--gutter) calc(10px + var(--safe-bottom)); box-shadow: 0 -1px 0 var(--border); }
.sticky-actions { padding-bottom: 0; }

/* Buy WBEAM on Uniswap (screens/eth_swap*.js). On a phone the pools are one tap away; from 900 px they sit beside the form. */
.uni-form { display: flex; flex-direction: column; gap: 12px; }
.uni-pools { display: none; }
.uni .topbar .pools-btn { flex: none; color: var(--on-secondary); }
.kv.kv-tap { width: 100%; background: none; border-left: 0; border-right: 0; border-top: 0; text-align: left; font: inherit; color: inherit; cursor: pointer; }
.kv.kv-tap:last-child { border-bottom: 0; }
.kv .v.bad { color: var(--error); }
.kv .v .small { font-weight: 500; }
.pool-list { display: flex; flex-direction: column; gap: 8px; }
.pool-row { padding: 10px 12px; display: flex; flex-direction: column; gap: 4px; border: 1.5px solid transparent; }
.pool-row.used { border-color: var(--green); }
.pool-row .share { flex: none; font-size: 13px; font-weight: 700; color: var(--success); }
.depth { height: 4px; border-radius: 2px; background: var(--surface-2); overflow: hidden; }
.depth > div { height: 100%; width: 0; background: var(--green); }
.pools-sheet { max-height: 60vh; overflow: auto; }
.review-amounts { display: flex; flex-direction: column; gap: 12px; }
.review-line { display: flex; gap: 12px; align-items: flex-start; }
.review-line .big { font-size: 20px; font-weight: 700; word-break: break-all; }
.radio { width: 20px; height: 20px; flex: none; border-radius: 50%; border: 2px solid var(--border); }
.radio.on { border: 6px solid var(--accent); }
.panel-title { margin: 0; font-size: 18px; }
@media (min-width: 900px) {
  #app[data-screen="ethSwap"] { max-width: 1040px; }
  .uni-split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 24px; align-items: start; }
  .uni-pools { display: block; position: sticky; top: 12px; max-height: calc(100dvh - 90px); overflow: auto; padding-right: 4px; }
  .uni .topbar .pools-btn { display: none; }
  .uni.sticky-actions .actions { position: static; margin: 4px 0 0; padding: 0; box-shadow: none; background: none; }
  .uni.sticky-actions { padding-bottom: calc(var(--safe-bottom) + 16px); }
}
.swap-sub.stacked { flex-direction: column; align-items: flex-start; gap: 0; }
.qr.qr-small { width: min(56vw, 210px); padding: 8px; }
/* A sheet's buttons stay in sight while what it explains scrolls. */
.sheet .sheet-actions { position: sticky; bottom: 0; z-index: 2; display: flex; flex-direction: column; gap: 4px; background: var(--bg); margin: 0 calc(-1 * var(--gutter)) calc(-18px - var(--safe-bottom)); padding: 10px var(--gutter) calc(14px + var(--safe-bottom)); box-shadow: 0 -1px 0 var(--border); }
.review-line .big { word-break: normal; overflow-wrap: anywhere; }
.asset-row .end { word-break: normal; overflow-wrap: anywhere; }
.sheet .sheet-actions { bottom: calc(-18px - var(--safe-bottom)); }
.swap-input.long { font-size: 22px; }
/* Bridge (screens/bridge_*.js): the ⇄ beside BEAM | Ethereum, Move coins, a move and its steps. */
.chain-row { display: flex; gap: 8px; align-items: stretch; }
.chain-row .chain-switch { flex: 1; }
.chain-move { position: relative; flex: none; width: 48px; border: 0; border-radius: 10px; background: var(--secondary); color: var(--on-secondary); display: flex; align-items: center; justify-content: center; cursor: pointer; }
.chain-move svg { width: 22px; height: 22px; }
.chain-move[data-badge="open"]::after, .chain-move[data-badge="collect"]::after { content: ''; position: absolute; top: 5px; right: 5px; width: 10px; height: 10px; border-radius: 50%; background: var(--yellow); box-shadow: 0 0 0 2px var(--bg); }
.chain-move[data-badge="collect"]::after { background: var(--accent); }
.bridge-chips { display: grid; grid-template-columns: repeat(5, 1fr); gap: 6px; }
.bridge-chips .choice { min-height: 40px; font-size: 14px; padding: 0 2px; }
.share-chips { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; margin-top: 10px; }
.share-chips .choice { min-height: 36px; font-size: 14px; padding: 0 2px; }
.asset-pick.static { cursor: default; }
.swap-label .addr { font-size: 13px; color: var(--muted); word-break: normal; }
.bridge-costs { align-items: flex-start; }
.bridge-costs .nowrap { font-weight: 600; color: var(--text-2); }
.bridge-actions { position: sticky; bottom: 0; z-index: 2; background: var(--bg); padding-top: 10px; gap: 6px; }
.bridge-actions .hint { min-height: 0; }
.bridge .content { gap: 12px; }
.bridge-open { padding: 10px 14px; border-bottom: 0; }
.bridge-short.you { color: var(--primary-text); font-weight: 600; }
.bridge-short.mood-success { color: var(--success); }
.bridge-short.mood-error { color: var(--error); }
.bridge .pair-to { padding-top: 22px; }
.bridge .kv .v, .bridge-card .kv .v { word-break: normal; overflow-wrap: break-word; min-width: 0; }
.bridge-entry .ico { background: var(--secondary); color: var(--on-secondary); }
.bridge-entry { padding: 12px 14px; border-bottom: 0; }
.bridge .kv .v .small, .bridge-card .kv .v .small { font-weight: 400; }
.bridge .notice .grow, .bridge-card + .notice .grow { min-width: 0; }
.bridge .prompt-actions, .sheet .prompt-actions { flex-wrap: wrap; }
.bridge .prompt-actions .btn { white-space: normal; }
.kv .v.addr-short { font-family: ui-monospace, 'SF Mono', Menlo, monospace; font-size: 14px; }
/* A sheet whose button must stay in sight however long it is (the bridge's reviews). */
.sheet-actions { position: sticky; bottom: calc(-18px - var(--safe-bottom)); z-index: 1; margin: 0 calc(-1 * var(--gutter)) calc(-18px - var(--safe-bottom)); padding: 10px var(--gutter) calc(14px + var(--safe-bottom)); background: var(--bg); box-shadow: 0 -1px 0 var(--border); display: flex; flex-direction: column; gap: 4px; }
.sheet-actions.actions { margin-top: 0; }
.bridge-ask { padding: 14px; }
.bridge-ask h3 { font-size: 15px; }
.bridge-steps { list-style: none; margin: 0; padding: 12px 14px; display: flex; flex-direction: column; gap: 10px; }
.bridge-step { display: flex; align-items: center; gap: 10px; font-weight: 500; font-size: 15px; }
.bridge-step .mark { width: 24px; height: 24px; border-radius: 50%; display: flex; align-items: center; justify-content: center; flex: none; border: 2px solid var(--border); box-sizing: border-box; }
.bridge-step .mark svg { width: 14px; height: 14px; }
.bridge-step.done .mark { background: var(--success-bg); color: var(--success); border-color: transparent; }
.bridge-step.active .mark { background: var(--info-bg); color: var(--info); border-color: transparent; }
.bridge-step.failed .mark { background: var(--error-bg); color: var(--error); border-color: transparent; }
.bridge-step.waiting .label { color: var(--muted); }
.bridge-step .label { flex: 1; min-width: 0; }
.bridge-step .note { font-size: 13px; color: var(--muted); white-space: nowrap; }
.bridge-step.active .note { color: var(--text-2); font-weight: 600; }
.notice .pre { white-space: pre-line; margin-top: 4px; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.card.empty h3 { margin: 0; }
/* BEAM node (screens/node.js, own_node.js) */
.node-screen .row .main .t { display: flex; align-items: center; gap: 8px; }
.node-tag { font-size: 11px; padding: 2px 8px; }
.node-screen .notice .node-inline-btn { margin-top: 8px; }
.node-screen .card .mono { margin-top: 2px; }
.own-node .row .main .t.wrap-t { white-space: normal; }
.own-node .row { cursor: pointer; }
.btn.link-line { display: inline; width: auto; min-height: 0; padding: 0; text-align: left; white-space: normal; font-size: 14px; font-weight: 500; line-height: 1.4; text-decoration: underline; text-underline-offset: 2px; }
.node-status-box { display: flex; flex-direction: column; gap: 14px; }
.node-status-box:empty { display: none; }
.own-node .key-card { padding: 4px 16px; }
.balance .sync-action { margin-top: 10px; }
.balance .btn-text.sync-action { padding-left: 0; padding-right: 0; align-self: flex-start; }
/* The public nodes, each with its newest block (screens/node.js). */
.node-screen .public-nodes { padding-bottom: 8px; }
.node-screen .public-nodes h3 { display: flex; align-items: center; gap: 6px; }
.node-screen .public-nodes > .small { margin: 0 0 4px; }
.node-screen .public-nodes > .notice { margin: 6px 0 8px; }
.node-screen .row.node-row { cursor: default; padding: 10px 4px; min-height: 56px; }
.node-screen .row.node-row.on { padding-left: 8px; padding-right: 8px; }
.node-screen .row.node-row .ico { width: 28px; height: 28px; background: none; }
.node-screen .row.node-row .main .s { white-space: normal; font-variant-numeric: tabular-nums; }
.node-screen .row.node-row .btn-small { flex: none; padding-left: 8px; padding-right: 8px; min-height: 44px; }
.node-screen .node-check { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; margin-top: 6px; }
.node-screen .node-check .btn-text { padding-left: 0; display: inline-flex; align-items: center; gap: 4px; }
.node-screen .node-check .btn-secondary { margin: 6px 0 8px; }
/* Signal bars in Home's top bar: the BEAM node screen in one tap. */
.sync-bars { display: inline-flex; align-items: flex-end; gap: 2px; height: 44px; padding: 13px 10px; }
.sync-bars .bar { width: 3px; border-radius: 1px; background: var(--border); }
.sync-bars .b1 { height: 6px; } .sync-bars .b2 { height: 10px; } .sync-bars .b3 { height: 14px; } .sync-bars .b4 { height: 18px; }
.sync-bars.ok .bar.lit { background: var(--green); }
.sync-bars.wait .bar.lit { background: var(--yellow); }
.sync-bars.bad .bar.lit { background: var(--red); }
.bars-box { display: inline-flex; }
/* Tokens (screens/token.js, token_ui.js, hidden_tokens.js): Home's rows open a token's page; values and the total. */
.balance .fiat { font-size: 16px; font-weight: 600; color: var(--text-2); margin-top: 2px; }
.balance .total-line { color: var(--text-2); }
.token-home { display: flex; flex-direction: column; gap: 14px; }
.token-home:empty { display: none; }
.asset-row.tap { cursor: pointer; }
.asset-row.tap:active { background: var(--surface-2); }
.asset-row.is-hidden .asset-badge, .asset-row.is-hidden .main, .asset-row.is-hidden .end { opacity: 0.55; }
.token-hidden-toggle { align-self: center; margin-top: -6px; }
.token-hidden-toggle svg { width: 18px; height: 18px; }
.price-ask { padding: 14px; }
.price-ask h3 { font-size: 15px; }
.asset-badge.large { width: 48px; height: 48px; font-size: 16px; }
.token-head { padding: 18px 16px; display: flex; flex-direction: column; gap: 2px; }
.token-head .token-id { display: flex; align-items: center; gap: 12px; margin-bottom: 12px; }
.token-head .token-id .main { min-width: 0; }
.token-head .token-id .t { font-weight: 700; font-size: 18px; overflow-wrap: anywhere; }
.token-head .token-id .s { font-size: 14px; color: var(--muted); }
.token-head .label { font-size: 14px; color: var(--muted); font-weight: 500; }
.token-head .amount { font-size: 30px; font-weight: 700; letter-spacing: -0.5px; line-height: 1.15; word-break: break-all; }
.token-head .amount .unit { font-size: 18px; font-weight: 600; color: var(--muted); margin-left: 6px; }
.token-head .token-value { font-size: 15px; font-weight: 600; color: var(--text-2); margin-top: 2px; }
.token-head .token-note { font-size: 14px; color: var(--muted); margin-top: 10px; display: flex; gap: 6px; align-items: flex-start; }
.token-head .token-note.ok { color: var(--success); font-weight: 500; }
.token-head .token-note svg { width: 16px; height: 16px; flex: none; margin-top: 2px; }
.token-head .warn-line { font-size: 14px; color: var(--error); font-weight: 600; margin-top: 6px; }
.token-actions { display: flex; flex-direction: column; gap: 6px; }
.token-balances { padding: 2px 16px; }
.token-balances .kv { padding: 8px 0; }
.kv .v.in { color: var(--in); }
.kv .v.muted { color: var(--muted); font-weight: 500; }
.token-hide { display: flex; justify-content: center; }
.token-hide .btn-text svg { width: 18px; height: 18px; }
.token-hide > div { width: 100%; }
.token-page .topbar h1 { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
[data-testid="hidden-token-row"] { cursor: default; }
.row .row-open { display: flex; align-items: center; gap: 12px; flex: 1; min-width: 0; background: none; border: 0; padding: 0; color: inherit; text-align: left; cursor: pointer; }
.row .row-open .main .s { white-space: normal; }
/* A payment row (Home, Activity, a token's history) whose amount names a long unit ("−0.044 BEAM/BEAMX LP")
   wraps the amount, never its title one word per line. */
.row[data-txid] .main { min-width: 42%; }
.row[data-txid] .end { white-space: normal; overflow-wrap: anywhere; min-width: 0; }

/* DEX pools (screens/pools.js, pool.js, pool_create.js, pool_status.js). */
.swap .topbar .pools-btn { flex: none; color: var(--on-secondary); }
.loading-line { display: flex; align-items: center; justify-content: center; gap: 10px; font-size: 14px; color: var(--muted); padding: 16px 0; }
.pool-card { padding: 0; overflow: hidden; }
.pool-card .pool-open { display: flex; align-items: flex-start; gap: 12px; width: 100%; padding: 12px 12px 6px 14px; background: none; border: 0; text-align: left; font: inherit; color: var(--text); cursor: pointer; }
.pool-card .pool-open .main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.pool-card .pool-open .chev { align-self: center; color: var(--subtle); }
.pool-card .pool-open .chev svg { width: 18px; height: 18px; }
.pool-card .line { font-size: 13px; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pool-card .warn-line, .pool-head .warn-line { font-size: 13px; color: var(--error); }
.pool-title { display: flex; align-items: center; gap: 8px; min-width: 0; font-weight: 600; }
.pool-title .name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pool-title.big { font-size: 18px; font-weight: 700; }
.pool-title.big .name { flex: 1; }
.fee-chip { flex: none; font-size: 11px; font-weight: 600; padding: 2px 6px; border-radius: 4px; background: var(--surface-2); color: var(--muted); }
.mine, .kv .v.mine { font-size: 13px; font-weight: 600; color: var(--success); }
.kv .v.mine, .kv .v .mine { font-size: inherit; }
.pool-rate { display: flex; align-items: center; gap: 6px; width: 100%; min-height: 40px; padding: 2px 14px 10px 66px; background: none; border: 0; font: inherit; font-size: 13px; font-weight: 600; color: var(--on-secondary); cursor: pointer; text-align: left; }
.pool-rate svg, .rate-btn svg { width: 14px; height: 14px; flex: none; }
.kv .rate-btn { display: inline-flex; align-items: center; gap: 6px; background: none; border: 0; padding: 12px 0 12px 16px; margin: -12px 0; font: inherit; font-weight: 600; color: var(--on-secondary); cursor: pointer; text-align: right; }
.pool-head { display: flex; flex-direction: column; gap: 8px; padding: 12px 14px 4px; }
.pool-head .kvs .kv { padding: 8px 0; }
.pool-position { padding: 4px 14px; }
.pool-position .kv { padding: 8px 0; }
.choices.four { grid-template-columns: repeat(4, 1fr); }
.asset-pick.static { cursor: default; padding-right: 10px; }
.swap-box.computed .swap-input { color: var(--text-2); }
.pool-create .create-pair { display: flex; align-items: center; gap: 8px; }
.pool-create .create-pair .slash { color: var(--muted); font-weight: 600; }
.asset-pick.wide { flex: 1; max-width: none; min-height: 46px; justify-content: flex-start; padding: 8px 10px; }
.asset-pick.wide > svg:last-child { margin-left: auto; }
.asset-pick .muted { color: var(--muted); }
.pool-create .card.list .row { padding: 12px 4px; }
.pool .actions .hint, .pools .actions .hint, .pool-create .actions .hint { min-height: 0; }
.kv .v .line { display: block; }
.pool-head .kv .k, .pool-position .kv .k { white-space: nowrap; }

/* Tokens: create a token, My tokens, a token's page, Mint more, Burn (screens/minter*.js, burn.js). */
.feature div.field { display: flex; flex-direction: column; gap: 6px; font-size: 14px; font-weight: 500; color: var(--text-2); }
.field-head .btn-small { min-height: 28px; padding: 2px 6px; }
.two-fields { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 10px; align-items: start; }
.two-fields.wide-second { grid-template-columns: minmax(0, 2fr) minmax(0, 3fr); }
.two-fields .hint { min-height: 0; }
.minter-create .content, .burn .content, .minter-mint .content, .minter-token .content, .minter-tokens .content { gap: 12px; }
.minter-create label.field .hint:empty { display: none; }
.swatch-wrap .input { padding-right: 44px; }
.swatch { position: absolute; right: 12px; width: 22px; height: 22px; border-radius: 6px; background: var(--swatch, transparent); box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.15); pointer-events: none; }
.swatch.inline-swatch { position: static; display: inline-block; width: 14px; height: 14px; border-radius: 4px; vertical-align: -2px; margin-right: 6px; }
.meta-text { margin: 0; padding: 10px 12px; border-radius: 10px; background: var(--surface-2); white-space: pre-wrap; word-break: break-all; font-feature-settings: 'calt' 0; }
.token-title { padding: 0; border-bottom: 0; }
.token-card { display: flex; flex-direction: column; gap: 8px; padding: 12px 14px; }
.token-open { display: flex; align-items: center; gap: 8px; width: 100%; padding: 0; border: 0; background: none; color: inherit; font: inherit; text-align: left; cursor: pointer; }
.token-open .token-title { flex: 1; min-width: 0; }
.token-open .chev svg { width: 18px; height: 18px; color: var(--subtle); }
.token-bar { height: 6px; }
.token-bar > div { background: var(--green); }
.token-card-foot { display: flex; align-items: center; gap: 8px; min-height: 36px; }
.token-card-foot .btn { flex: none; }
.token-card .row .ico { width: 36px; height: 36px; }
.tokens-menu-row .ico { background: var(--secondary); color: var(--on-secondary); }
.token-preview { padding: 12px 14px; display: flex; flex-direction: column; gap: 4px; }
.swatch-v { display: inline-flex; align-items: center; }
/* Home's line with a fourth tile (Tokens): each tile as wide as its words, the rest shared, so no label is cut on a 360 px phone. */
.more-entry:has(.tile:nth-child(4)) .tile { flex: 1 1 auto; padding: 7px 2px; }
.token-head { padding: 12px 14px; }
/* Several wallets (screens/wallets.js, add_wallet.js): Home's title is the open wallet's name */
.topbar .brand .wallet-chip { display: inline-flex; align-items: center; gap: 8px; min-width: 0; max-width: 100%; background: none; border: 0; padding: 6px 8px 6px 0; margin: -6px 0; border-radius: 10px; color: var(--text); font: inherit; font-weight: 700; font-size: 18px; cursor: pointer; }
.topbar .brand .wallet-chip:active { background: var(--surface-2); }
.topbar .brand .wallet-chip .name { min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.topbar .brand .wallet-chip .chev { width: 18px; height: 18px; flex: none; color: var(--muted); }
.topbar .brand { min-width: 0; }
.card.row.wallet-pick { padding: 10px 14px; border-bottom: 0; }
.wallet-pick .chev svg { color: var(--muted); }
.wallet-open-tag { margin-left: 8px; vertical-align: 1px; }

/* Coins and Split coins, More ways to receive, the payment banner
   (screens/coins.js, split_review.js, coins_ui.js, receive_more.js, payment_notices.js). */
.balance { position: relative; }
.balance .coins-link { position: absolute; top: 12px; right: 8px; width: auto; min-height: 32px; padding: 4px 4px 4px 10px; gap: 0; font-size: 14px; }
.balance .coins-link svg { width: 16px; height: 16px; }
.private-line { display: flex; align-items: flex-start; gap: 8px; width: 100%; margin-top: 10px; padding: 8px 10px; border: 0; border-radius: 10px; background: var(--success-bg); color: var(--success); font: inherit; font-size: 14px; font-weight: 500; line-height: 1.35; text-align: left; cursor: pointer; }
.private-line svg { width: 16px; height: 16px; flex: none; margin-top: 1px; }
.private-line span { flex: 1; }
.token-balances .private-line { margin: 4px 0 10px; }
.stack.tight { gap: 6px; }
.coins .content { gap: 12px; }
.coins h2.title { font-size: 20px; margin-top: 0; }
.coins .lead { font-size: 15px; }
.split-asset, .more-ways-head { background: var(--surface); }
.split-asset { padding: 12px 14px; border-bottom: 0; cursor: default; }
.split-asset.tap { cursor: pointer; }
.split-asset .chev svg { width: 18px; height: 18px; color: var(--muted); }
.split-counts { display: flex; gap: 8px; }
.split-counts .choice { flex: 1; min-width: 0; min-height: 44px; }
.split-after { padding: 4px 14px; }
.split-after .kv { padding: 8px 0; }
.kv.total .k, .kv.total .v { font-weight: 700; color: var(--text); }
.coin-list { padding: 2px 14px; }
.coin-summary { padding: 10px 0 4px; }
.coin-row { cursor: default; padding: 10px 0; }
.coin-row .ico.private { background: var(--success-bg); color: var(--success); }
.coin-row .main .t { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.coin-tag { background: var(--surface-2); color: var(--muted); }
.coin-tag.private { background: var(--success-bg); color: var(--success); }
.more-ways-wrap { margin-top: 14px; }
.more-ways { display: flex; flex-direction: column; gap: 10px; }
.more-ways-head { padding: 12px 14px; border-bottom: 0; }
.more-ways-list { padding: 0 14px; }
.type-row:disabled { cursor: not-allowed; }
.type-row.off .main .t, .type-row.off .main .s, .type-row.off .chev svg { color: var(--subtle); }
.sheet-qr { width: min(64vw, 240px); }
.settings-note { margin: -4px 4px 0; }
.pay-banner { position: fixed; top: calc(var(--safe-top) + 8px); left: 50%; transform: translateX(-50%); z-index: 85; width: min(calc(100vw - 24px), 496px); display: flex; align-items: center; gap: 2px; padding: 4px 6px 4px 4px; background: var(--surface); color: var(--text); border: 1px solid var(--border); border-radius: 14px; box-shadow: 0 6px 24px rgba(0, 0, 0, 0.22); }
.pay-banner-main { flex: 1; min-width: 0; display: flex; align-items: center; gap: 10px; padding: 8px; border: 0; background: none; color: inherit; font: inherit; text-align: left; cursor: pointer; }
.pay-banner .ico { width: 36px; height: 36px; border-radius: 50%; display: flex; align-items: center; justify-content: center; flex: none; background: var(--success-bg); color: var(--success); }
.pay-banner .ico svg { width: 18px; height: 18px; }
.pay-banner .main { display: flex; flex-direction: column; min-width: 0; }
.pay-banner .main .t { font-weight: 700; }
.pay-banner .main .s { font-size: 13px; color: var(--muted); }
.pay-banner .icon-btn { margin: 0; }
/* Pay with BTC, ZEC or LTC (screens/near_intents*.js) */
.intents-signed { color: var(--success); display: flex; align-items: center; gap: 4px; margin-top: 6px; }
.intents-signed svg { width: 14px; height: 14px; }
.intents .link-left.wrap { text-align: left; }

/* BEAM's DApp Store (screens/dapp_store.js). */
.store-chips { display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none; padding-bottom: 2px; }
.store-chips::-webkit-scrollbar { display: none; }
.store-chips .choice { flex: none; min-height: 36px; padding: 0 12px; font-size: 14px; }
.dapp-icon.letter { font-weight: 700; font-size: 18px; color: var(--muted); }
.store-head { display: flex; align-items: center; gap: 12px; }
.store-head h2 { margin: 0; }
.store-head .btn.inline { padding: 0; min-height: 0; width: auto; }
.store-desc { white-space: pre-line; overflow-wrap: anywhere; margin: 0; }
.warn-text { color: var(--warn); }
.tag.store { align-self: flex-start; margin: 0; background: var(--info-bg); color: var(--info); }
.dapp-store-entry { width: 100%; text-align: left; }
/* Home's top bar: Scan and Lock (screens/home.js); a scanned text shown as it is (screens/scan_go.js). */
.top-actions { display: flex; align-items: center; gap: 2px; }
.scan-text { overflow-wrap: anywhere; white-space: pre-wrap; margin: 0; }
/* A row's text that opens a page, beside a switch (screens/dapp_store.js Publishers): reads as the row. */
.row .main.row-link { background: none; border: 0; padding: 0; margin: 0; text-align: left; font: inherit; color: inherit; cursor: pointer; min-width: 0; }

/* Fuddle (screens/fuddle.js). A hint is colour AND a mark: a tick (right place), arrows (another
   place), a dash (not in the word); the tile's letter keeps the text colour, so it reads in every
   palette. Tints are mixed from the palette's own green and yellow over the surface.
   Its generic names (.tile, .key, .grid-row) are scoped to its own containers with :where(), which adds
   no specificity: Home's shortcut line is also .tile, and an unscoped 52 px tile squeezed its labels. */
.fuddle-mark { display: inline-flex; gap: 3px; align-items: center; flex: none; }
.fuddle-mark .m { width: 10px; height: 14px; border-radius: 3px; }
.fuddle-mark .m.correct { background: var(--green); }
.fuddle-mark .m.present { background: var(--yellow); }
.fuddle-mark .m.absent { background: var(--muted); }
.fuddle-mark.big .m { width: 18px; height: 26px; border-radius: 5px; }
.dapp-icon.fuddle-icon { background: var(--surface-2); }
.fuddle-soon { padding-top: 40px; }
.fuddle-soon h2 { margin: 8px 0 0; }
.fuddle-loading { display: flex; align-items: center; gap: 10px; }
.fuddle-next-head { display: flex; align-items: center; gap: 12px; margin-bottom: 8px; }
.fuddle-next-head .name { font-weight: 700; font-size: 17px; }
.fuddle-next .btn { margin-top: 6px; }
.row.fuddle-tour { align-items: flex-start; }
.row.fuddle-tour .fuddle-mark { margin-top: 4px; }
.row.fuddle-tour .main .s { white-space: normal; }
.row.fuddle-game-row .main .s, .fuddle-tour-screen .row .main .s { white-space: normal; }
.pill.strong { background: var(--primary); color: var(--on-primary); }
.choices.three { grid-template-columns: repeat(3, 1fr); }
.fuddle-rule-list { margin: 0; padding-left: 20px; display: flex; flex-direction: column; gap: 8px; color: var(--text-2); }
.fuddle-rules h3, .fuddle-result h3 { margin-bottom: 8px; }
.fuddle-game-head { display: flex; justify-content: space-between; gap: 8px; flex-wrap: wrap; }
.fuddle-clock { display: flex; align-items: flex-start; gap: 8px; padding: 8px 12px; border-radius: 10px; background: var(--surface); color: var(--text-2); font-size: 14px; }
.fuddle-clock svg { width: 18px; height: 18px; flex: none; margin-top: 2px; color: var(--muted); }
.fuddle-clock.urgent { background: var(--warn-bg); color: var(--warn); }
.fuddle-clock.urgent svg { color: var(--warn); }
.fuddle-status:empty { display: none; }
.fuddle-grid { display: flex; flex-direction: column; gap: 6px; align-items: center; margin: 2px 0; }
:where(.fuddle-grid) .grid-row { display: flex; gap: 6px; }
:where(.fuddle-grid, .fuddle-legend) .tile { position: relative; width: 52px; height: 52px; border-radius: 8px; display: flex; align-items: center; justify-content: center; background: var(--surface); border: 2px solid var(--border); color: var(--text); font-weight: 700; font-size: 24px; line-height: 1; }
/* The grid takes what the keyboard leaves: smaller tiles on a short phone, never past 52 px. */
.fuddle-grid { --tile: clamp(30px, calc((100dvh - 500px) / 6), 52px); }
.fuddle-grid.len-6 { --tile: clamp(30px, calc((100dvh - 500px) / 6), 48px); }
.fuddle-grid .tile { width: var(--tile); height: var(--tile); font-size: calc(var(--tile) * 0.46); border-radius: calc(var(--tile) * 0.16); }
.fuddle-grid .tile .mk, .fuddle-grid .tile .mk svg { width: calc(var(--tile) * 0.27); height: calc(var(--tile) * 0.27); }
.content.fuddle-play { gap: 10px; }
.fuddle-panel { position: sticky; bottom: 0; z-index: 5; display: flex; flex-direction: column; gap: 8px; background: var(--bg); margin: 4px calc(-1 * var(--gutter)) 0; padding: 10px var(--gutter) calc(8px + var(--safe-bottom)); box-shadow: 0 -1px 0 var(--border); }
.fuddle-buy-link { align-self: center; min-height: 32px; padding: 2px 8px; }
.fuddle-panel p { margin: 0; }
:where(.fuddle-grid, .fuddle-legend) .tile.empty { background: transparent; }
:where(.fuddle-grid, .fuddle-legend) .tile.typed { border-color: var(--text-2); }
:where(.fuddle-grid, .fuddle-legend) .tile.waiting { border-style: dashed; border-color: var(--muted); }
:where(.fuddle-grid) .grid-row.sending .tile { animation: fuddle-pulse 1.4s ease-in-out infinite; }
@keyframes fuddle-pulse { 50% { opacity: 0.55; } }
@media (prefers-reduced-motion: reduce) { :where(.fuddle-grid) .grid-row.sending .tile { animation: none; } }
:where(.fuddle-grid, .fuddle-legend) .tile.correct { background: color-mix(in srgb, var(--green) 32%, var(--surface)); border-color: var(--green); }
:where(.fuddle-grid, .fuddle-legend) .tile.present { background: color-mix(in srgb, var(--yellow) 32%, var(--surface)); border-color: var(--yellow); }
:where(.fuddle-grid, .fuddle-legend) .tile.absent { background: var(--surface-2); border-color: var(--surface-2); color: var(--muted); }
:where(.fuddle-grid, .fuddle-legend) .tile .mk { position: absolute; top: 2px; right: 2px; width: 14px; height: 14px; display: flex; color: var(--text); }
:where(.fuddle-grid, .fuddle-legend) .tile .mk svg { width: 14px; height: 14px; stroke-width: 3; }
:where(.fuddle-grid, .fuddle-legend) .tile.absent .mk { color: var(--muted); }
:where(.fuddle-grid, .fuddle-legend) .tile.mini { width: 26px; height: 26px; border-radius: 6px; flex: none; }
:where(.fuddle-grid, .fuddle-legend) .tile.mini .mk { position: static; }
.fuddle-legend { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px 14px; font-size: 13px; color: var(--text-2); }
:where(.fuddle-legend) .legend-item { display: inline-flex; align-items: center; gap: 6px; }
.fuddle-keys { display: flex; flex-direction: column; gap: 6px; }
:where(.fuddle-keys) .key-row { display: flex; gap: 5px; justify-content: center; }
:where(.fuddle-keys) .key { position: relative; flex: 1 1 0; max-width: 44px; min-height: 46px; border-radius: 8px; border: 1px solid var(--border); background: var(--surface); color: var(--text); font: inherit; font-weight: 700; font-size: 16px; cursor: pointer; padding: 0; display: flex; align-items: center; justify-content: center; }
:where(.fuddle-keys) .key.wide { flex: 1.6 1 0; max-width: 70px; }
:where(.fuddle-keys) .key svg { width: 22px; height: 22px; }
:where(.fuddle-keys) .key .mk { position: absolute; top: 1px; right: 2px; display: flex; }
:where(.fuddle-keys) .key .mk svg { width: 10px; height: 10px; stroke-width: 3; }
:where(.fuddle-keys) .key.correct { background: color-mix(in srgb, var(--green) 32%, var(--surface)); border-color: var(--green); }
:where(.fuddle-keys) .key.present { background: color-mix(in srgb, var(--yellow) 32%, var(--surface)); border-color: var(--yellow); }
:where(.fuddle-keys) .key.absent { background: var(--surface-2); color: var(--muted); }
:where(.fuddle-keys) .key:disabled { opacity: 0.5; cursor: default; }
@media (max-height: 700px) { :where(.fuddle-keys) .key { min-height: 40px; } .fuddle-panel { gap: 6px; } }
.fuddle-buy { display: flex; flex-direction: column; gap: 10px; }
.fuddle-buy h2, .fuddle-buy p { margin: 0; }
.fuddle-buy .field { display: flex; flex-direction: column; gap: 6px; }
.fuddle-more { justify-content: center; }
.fuddle-status > div:not(.fuddle-clock) { display: flex; flex-direction: column; gap: 8px; }
.fuddle-cost .kv .v, .fuddle-result .kv .v, .fuddle-tour-head .kv .v { white-space: nowrap; }