@layer views, controls;

/* Wallet views: geometry, type and surfaces. Interaction colors live in controls.css.
   Every size comes from the tokens below, so screens share one rhythm. */
@layer views {
  @font-face {
    font-family: Geist;
    src: url('Geist-Variable.woff2') format('woff2');
    font-weight: 100 900;
    font-display: swap;
  }
  @font-face {
    font-family: GeistMono;
    src: url('GeistMono-Variable.woff2') format('woff2');
    font-weight: 100 900;
    font-display: swap;
  }

  /* ---------- Tokens ---------- */
  :root {
    color-scheme: dark;
    /* Void & Flare */
    --bg: #101112;
    --card: #191a1c;
    --raised: #242527;
    --line: #2e3033;
    --line-soft: #ffffff0d;
    --input: #64686f;
    --text: #f2f1ee;
    --muted: #a6a8ad;
    --flare: #ff946e;
    --flare-soft: #ff946e14;
    --danger: #ee8b7b;
    --green: #8aca9f;
    --warm: #211e1c;
    --warm-line: #554238;
    --warm-text: #e2c3a8;
    /* Spacing: a 4px grid */
    --space-1: 4px;
    --space-2: 8px;
    --space-3: 12px;
    --space-4: 16px;
    --space-5: 20px;
    --space-6: 24px;
    --space-7: 32px;
    --space-8: 40px;
    --gutter: 16px;
    /* Shapes */
    --radius-sm: 8px;
    --radius-md: 12px;
    --radius-lg: 16px;
    --radius-xl: 24px;
    --radius-pill: 999px;
    /* Heights */
    --h-header: 56px;
    --h-nav: 56px;
    --h-field: 44px;
    --h-action: 48px;
    --h-control: 40px;
    --h-icon: 36px;
    --h-row: 60px;
    /* Type */
    --fs-xs: 11px;
    --fs-sm: 12px;
    --fs-md: 14px;
    --fs-lg: 16px;
    --fs-xl: 20px;
    --fs-display: 40px;
    /* Motion */
    --ease: cubic-bezier(0.2, 0.8, 0.2, 1);
    --motion-fast: 120ms;
    --motion-ui: 180ms;
    font-family:
      Geist,
      system-ui,
      -apple-system,
      sans-serif;
    background: var(--bg);
    color: var(--text);
    font-size: var(--fs-md);
    line-height: 1.5;
    font-synthesis: none;
  }

  /* ---------- Base ---------- */
  * {
    box-sizing: border-box;
  }
  [hidden] {
    display: none !important;
  }
  html {
    height: 100%;
    overflow: hidden;
    background: var(--bg);
  }
  body {
    margin: 0 auto;
    width: 440px;
    height: 600px;
    max-width: 100vw;
    min-width: 320px;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    background: var(--bg);
  }
  svg {
    width: 20px;
    height: 20px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.65;
    stroke-linecap: round;
    stroke-linejoin: round;
    flex-shrink: 0;
  }
  .symbols {
    position: absolute;
    width: 0;
    height: 0;
    overflow: hidden;
  }
  .sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
  }

  /* ---------- Surfaces ---------- */
  /* The toolbar popup is a fixed surface, not a small browser tab. */
  body[data-surface='popup'] {
    width: 360px;
    height: 600px;
    max-height: 100dvh;
  }
  /* Give Chrome an intrinsic root size before viewport-relative body constraints run. */
  html[data-extension='true'][data-surface='popup'] {
    width: 360px;
    min-width: 360px;
    height: 600px;
  }
  html[data-surface='sidebar'] {
    width: 100%;
    min-width: 0;
  }
  body[data-surface='sidebar'] {
    width: 100%;
    min-width: 0;
    max-width: none;
    height: 100dvh;
  }
  /* A full tab shows the wallet as a device-sized card, never a stretched web page. */
  html[data-surface='tab'] {
    display: grid;
    place-items: center;
    padding: clamp(16px, 4dvh, 40px) var(--gutter);
    background: radial-gradient(ellipse at 50% 0, #ff946e0d, transparent 60%), #0b0c0d;
  }
  body[data-surface='tab'] {
    width: 420px;
    height: min(760px, 100%);
    border: 1px solid var(--line);
    border-radius: var(--radius-xl);
    box-shadow:
      0 1px 0 #ffffff08 inset,
      0 24px 80px -24px #000c;
    overflow: hidden;
  }
  @media (max-width: 520px), (max-height: 640px) {
    html[data-surface='tab'] {
      padding: 0;
      background: var(--bg);
    }
    body[data-surface='tab'] {
      width: 100%;
      height: 100dvh;
      border: 0;
      border-radius: 0;
      box-shadow: none;
    }
  }
  body[data-surface='confirmation'] {
    width: 100%;
    max-width: 480px;
    height: 100dvh;
  }

  /* ---------- Type ---------- */
  h1 {
    font-size: var(--fs-xl);
    line-height: 1.3;
    letter-spacing: -0.5px;
    font-weight: 600;
    margin: 0 0 var(--space-3);
  }
  h1:focus {
    outline: none;
  }
  h2 {
    font-size: var(--fs-lg);
    line-height: 1.3;
    letter-spacing: -0.3px;
    font-weight: 600;
  }
  p {
    margin: var(--space-2) 0;
  }
  .intro {
    color: var(--muted);
    font-size: var(--fs-md);
    line-height: 1.55;
    margin: 0 0 var(--space-5);
  }
  .muted,
  .field-hint {
    color: var(--muted);
    font-size: var(--fs-xs);
    line-height: 1.55;
  }
  .legal {
    color: var(--muted);
    font-size: var(--fs-xs);
    line-height: 1.55;
    margin: var(--space-4) 0 0;
    text-align: center;
  }
  .mono,
  pre {
    font-family: GeistMono, monospace;
  }
  .mono,
  pre,
  dd {
    overflow-wrap: anywhere;
    word-break: break-word;
  }
  pre {
    white-space: pre-wrap;
    font-size: var(--fs-xs);
    background: var(--bg);
    padding: var(--space-3);
    border-radius: var(--radius-sm);
    max-height: 240px;
    overflow: auto;
    margin: var(--space-2) 0 0;
    scrollbar-width: thin;
  }
  dl {
    margin: 0;
  }
  dt {
    font-size: var(--fs-xs);
    color: var(--muted);
    margin-top: var(--space-3);
  }
  dd {
    margin: 2px 0 0;
    font-size: var(--fs-sm);
  }

  /* ---------- Buttons ---------- */
  button,
  input,
  select,
  textarea {
    -webkit-tap-highlight-color: transparent;
  }
  button {
    position: relative;
    font: inherit;
    font-size: var(--fs-md);
    font-weight: 550;
    cursor: pointer;
    border: 1px solid transparent;
    border-radius: var(--radius-pill);
    padding: 10px var(--space-4);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
    touch-action: manipulation;
    transition:
      background-color var(--motion-fast) ease-out,
      border-color var(--motion-fast) ease-out,
      color var(--motion-fast) ease-out;
  }
  button:disabled {
    opacity: 0.45;
  }
  button[data-busy-disabled='true'] {
    opacity: 1;
  }
  button.icon {
    width: var(--h-icon);
    height: var(--h-icon);
    padding: 8px;
    border-radius: 50%;
  }
  button.tiny {
    width: 28px;
    height: 28px;
    padding: 6px;
  }
  button.tiny svg {
    width: 16px;
    height: 16px;
  }
  .wide {
    width: 100%;
    min-height: var(--h-action);
    margin-top: var(--space-2);
  }
  .wide > svg {
    width: 18px;
    height: 18px;
  }
  .text-button {
    font-size: var(--fs-sm);
    font-weight: 500;
  }
  button[data-waiting='true']::after {
    content: '';
    position: absolute;
    right: 12px;
    top: calc(50% - 6px);
    width: 12px;
    height: 12px;
    border: 1.5px solid currentColor;
    border-right-color: transparent;
    border-radius: 50%;
    animation: spin 800ms linear infinite;
    pointer-events: none;
  }
  button.icon[data-waiting='true'] > svg {
    visibility: hidden;
  }
  button.icon[data-waiting='true']::after {
    left: calc(50% - 6px);
    right: auto;
  }
  .pill {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    max-width: 220px;
    padding: 6px 10px;
    font-size: var(--fs-xs);
    border-radius: var(--radius-pill);
  }
  .pill .mono {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    word-break: normal;
  }
  .pill svg {
    width: 13px;
    height: 13px;
  }

  /* ---------- Fields ---------- */
  label {
    display: block;
    margin: 0 0 var(--space-3);
    font-size: var(--fs-sm);
    color: var(--muted);
  }
  input,
  textarea,
  select {
    font: inherit;
    font-size: var(--fs-md);
    color: var(--text);
    background: var(--card);
    border: 1px solid var(--input);
    border-radius: var(--radius-md);
    padding: 10px var(--space-3);
    width: 100%;
    margin-top: 6px;
  }
  input:not([type='checkbox'], [type='file']),
  select {
    height: var(--h-field);
  }
  select {
    padding-right: var(--space-7);
  }
  input::placeholder,
  textarea::placeholder {
    color: #8f9399;
  }
  textarea {
    min-height: 96px;
    resize: none;
    line-height: 1.5;
  }
  .input-wrap {
    display: block;
    position: relative;
    margin-top: 6px;
  }
  .input-wrap input {
    margin-top: 0;
    padding-right: var(--h-field);
  }
  .input-icon {
    position: absolute;
    top: 0;
    right: 0;
    width: var(--h-field);
    height: var(--h-field);
    padding: 12px;
    border-radius: var(--radius-md);
  }
  .password-strength {
    height: 3px;
    margin: 6px 0;
    background: var(--line);
    border-radius: 2px;
    overflow: hidden;
  }
  .password-strength i {
    display: block;
    width: 0;
    height: 100%;
    background: var(--flare);
    transition: width 0.22s var(--ease);
  }
  #password-meter[data-level='short'] {
    width: 30%;
  }
  #password-meter[data-level='valid'] {
    width: 70%;
  }
  #password-meter[data-level='long'] {
    width: 100%;
    background: var(--green);
  }
  input[type='file'] {
    min-height: 72px;
    padding: var(--space-3);
    font-size: var(--fs-sm);
    color: var(--muted);
  }
  input::file-selector-button {
    margin: 0 var(--space-3) var(--space-2) 0;
    padding: 8px var(--space-3);
    border: 1px solid var(--line);
    border-radius: var(--radius-pill);
    background: var(--raised);
    color: var(--text);
    font: inherit;
    font-weight: 550;
    cursor: pointer;
  }
  .amount-input {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    height: var(--h-field);
    margin-top: 6px;
    padding-right: var(--space-3);
    background: var(--card);
    border: 1px solid var(--input);
    border-radius: var(--radius-md);
  }
  .amount-input input {
    flex: 1;
    min-width: 0;
    height: 100%;
    margin: 0;
    border: 0;
    background: none;
    font-size: var(--fs-lg);
    font-variant-numeric: tabular-nums;
  }
  .amount-input > span {
    max-width: 88px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: var(--muted);
    font-size: var(--fs-sm);
    font-weight: 550;
  }
  .check {
    display: flex;
    align-items: flex-start;
    gap: var(--space-3);
    color: var(--text);
    font-size: var(--fs-sm);
    line-height: 1.55;
    cursor: pointer;
  }
  .check input {
    width: 18px;
    height: 18px;
    flex: none;
    margin: 1px 0 0;
    accent-color: var(--flare);
  }
  .field-count {
    float: right;
    color: var(--muted);
    font-size: var(--fs-xs);
    font-variant-numeric: tabular-nums;
  }
  .field-error {
    color: var(--danger);
  }
  /* The label row owns feedback space; errors never add height to a transfer. */
  .transfer-caption {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-2);
    height: 16px;
  }
  .transfer-feedback {
    font-size: var(--fs-xs);
    line-height: 16px;
    text-align: right;
    white-space: nowrap;
  }

  /* ---------- Header ---------- */
  .app-header {
    display: flex;
    align-items: center;
    gap: var(--space-1);
    flex-shrink: 0;
    height: var(--h-header);
    padding: 0 var(--space-3) 0 var(--gutter);
    border-bottom: 1px solid transparent;
    transition: border-color var(--motion-ui) ease-out;
  }
  body:has(#wallet[data-scrolled='true']:not([hidden])) .app-header {
    border-bottom-color: var(--line);
  }
  .brand {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    margin-right: auto;
    font-size: var(--fs-lg);
    font-weight: 650;
    letter-spacing: -0.4px;
  }
  .brand-icon {
    display: grid;
    place-items: center;
    width: 28px;
    height: 28px;
    color: var(--text);
  }
  .brand-icon svg {
    width: 26px;
    height: 26px;
    stroke-width: 2.4;
  }
  body[data-account-controls='true'] .brand {
    display: none;
  }
  button.header-account {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
    height: 44px;
    padding: 0 var(--space-2) 0 0;
    border: 0;
    border-radius: var(--radius-md);
    text-align: left;
    line-height: 1.3;
    overflow: hidden;
  }
  .header-account > span:last-of-type {
    min-width: 0;
  }
  .header-account strong {
    display: block;
    font-size: var(--fs-md);
    font-weight: 600;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .header-account small {
    display: flex;
    align-items: center;
    gap: 5px;
    min-width: 0;
    margin-top: 1px;
    color: var(--muted);
    font-size: var(--fs-xs);
    font-weight: 400;
    white-space: nowrap;
  }
  .header-account .account-chevron {
    width: 12px;
    height: 12px;
    flex: none;
    transform: rotate(-90deg);
    color: var(--muted);
  }
  .header-account .account-avatar {
    width: 32px;
    height: 32px;
  }
  .header-account .account-avatar > svg {
    width: 30px;
    height: 30px;
  }
  #copy-address {
    width: 32px;
    height: 32px;
    padding: 8px;
  }
  .header-actions {
    display: flex;
    align-items: center;
    gap: 2px;
    margin-left: auto;
  }
  .header-account small > span {
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .network-dot {
    flex: none;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--flare);
  }
  .account-avatar {
    width: 38px;
    height: 38px;
    flex: none;
    display: grid;
    place-items: center;
    color: #c6a4ef;
  }
  .account-avatar[data-tone='1'] {
    color: #ffab82;
  }
  .account-avatar[data-tone='2'] {
    color: #9bddba;
  }
  .account-avatar[data-tone='3'] {
    color: #9bcfff;
  }
  .account-avatar[data-tone='4'] {
    color: #efa9d1;
  }
  .account-avatar[data-tone='5'] {
    color: #dadd98;
  }
  .account-avatar > svg {
    width: 34px;
    height: 34px;
    fill: currentColor;
    stroke: none;
  }

  /* ---------- Shell ---------- */
  /* The shell never scrolls. Each view owns its scroll area, with the scrollbar hidden. */
  main {
    flex: 1;
    min-height: 0;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    position: relative;
  }
  main > section {
    flex: 1;
    min-height: 0;
    margin: 0;
    padding: 0 var(--gutter) var(--space-4);
    overflow-x: hidden;
    overflow-y: auto;
    overscroll-behavior: contain;
    scrollbar-width: none;
  }
  #feedback {
    flex: none;
    max-height: 35%;
    padding: 0 var(--gutter);
    overflow: auto;
    overscroll-behavior: contain;
    scrollbar-width: none;
  }
  #feedback:has(#message:empty) {
    display: none;
  }
  #message {
    margin: var(--space-3) 0 0;
    padding: 10px var(--space-3);
    border: 1px solid var(--line);
    border-radius: var(--radius-md);
    background: var(--card);
    color: var(--muted);
    font-size: var(--fs-sm);
    overflow-wrap: anywhere;
  }
  #message.error {
    color: var(--danger);
    background: #261b19;
    border-color: #61382f;
  }
  /* A success is a compact toast over the page, sized to its text. */
  #feedback:has(.success) {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    z-index: 8;
    height: 0;
    overflow: visible;
  }
  #message.success {
    position: absolute;
    top: var(--space-2);
    left: 0;
    right: 0;
    width: fit-content;
    max-width: min(300px, calc(100% - 32px));
    margin-inline: auto;
    padding: 8px var(--space-4);
    border-color: #2c4836;
    border-radius: var(--radius-pill);
    background: #18231c;
    color: var(--green);
    text-align: center;
    box-shadow: 0 8px 28px #0009;
  }
  #network-help {
    padding: var(--space-2) 0;
  }
  .network-actions {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-2);
  }
  .network-actions button {
    min-width: 0;
    min-height: var(--h-control);
    padding: 8px 10px;
    font-size: var(--fs-sm);
  }
  #connection-details {
    margin-top: var(--space-2);
    padding: 10px var(--space-3);
    border: 1px solid var(--line);
    border-radius: var(--radius-md);
    max-height: 200px;
    overflow: auto;
    scrollbar-width: thin;
  }
  .network-switch {
    display: flex;
    justify-content: center;
    gap: var(--space-2);
    margin-top: var(--space-2);
  }
  .network-switch button {
    flex: 1;
    max-width: 9rem;
    min-height: var(--h-control);
    font-size: var(--fs-sm);
  }
  .network-switch button[aria-pressed='true'],
  #network-settings button[aria-pressed='true'] {
    border-color: currentColor;
  }

  /* ---------- Onboarding ---------- */
  /* A sequence of small screens, actions outside the content. Only content scrolls, as a
     fallback for zoom or a very short side panel. */
  main > .setup-flow {
    display: flex;
    flex-direction: column;
    padding-bottom: var(--space-4);
    overflow: hidden;
  }
  .wizard-form {
    display: contents;
  }
  .wizard-screen {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-height: 0;
  }
  .wizard-nav {
    display: flex;
    align-items: center;
    flex: none;
    gap: var(--space-1);
    min-height: 44px;
    color: var(--muted);
    font-size: var(--fs-sm);
  }
  .wizard-nav:has(> .icon[hidden]) {
    justify-content: center;
  }
  .wizard-nav .icon {
    width: 40px;
    height: 40px;
    margin-left: -10px;
  }
  .wizard-content {
    flex: 1;
    min-height: 0;
    padding-top: var(--space-2);
    overflow: auto;
    overscroll-behavior: contain;
    scrollbar-width: none;
  }
  .setup-flow h1 {
    font-size: 24px;
    letter-spacing: -0.7px;
    line-height: 1.2;
    margin-bottom: var(--space-2);
  }
  .setup-flow .intro {
    margin-bottom: var(--space-5);
  }
  .setup-flow .field-hint {
    margin: 6px 0 var(--space-3);
  }
  .setup-flow .password-strength + .field-hint {
    margin-top: 0;
  }
  #confirm-hint {
    min-height: 17px;
    margin-bottom: 0;
  }
  .setup-flow textarea {
    height: 120px;
  }
  .wizard-actions {
    flex: none;
    display: grid;
    gap: var(--space-2);
    padding-top: var(--space-3);
  }
  .wizard-actions .wide {
    margin: 0;
  }
  .wizard-actions .text-button {
    min-height: var(--h-control);
  }
  .wizard-actions .legal {
    margin: 0;
  }
  .welcome-content,
  .choice-content {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
  }
  .setup-flow .welcome-content h1,
  .setup-flow .choice-content h1 {
    font-size: 32px;
    letter-spacing: -1.2px;
    line-height: 1.12;
  }
  .setup-flow .welcome-content .intro,
  .setup-flow .choice-content .intro {
    margin-bottom: 0;
  }
  .sculpture canvas {
    width: 100%;
    height: 100%;
    display: block;
  }
  /* The unlock screen's drawn mark opens these screens too: one rhythm for the three of them.
     The group sits a little above the middle, where the eye expects the centre. */
  .setup-flow :is(.welcome-content, .choice-content) {
    padding-bottom: 5dvh;
  }
  .setup-flow :is(.welcome-content, .choice-content) .unlock-mark {
    margin-bottom: var(--space-6);
  }
  .setup-flow :is(.welcome-content, .choice-content) h1 {
    margin-bottom: var(--space-3);
  }
  .setup-flow :is(.welcome-content, .choice-content) .intro {
    max-width: 30ch;
    line-height: 1.5;
  }
  .setup-flow .wizard-actions {
    gap: 10px;
  }
  .import-option {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    width: 100%;
    min-height: 68px;
    margin: 0 0 var(--space-2);
    padding: var(--space-3) var(--space-4);
    border-radius: var(--radius-lg);
    text-align: left;
  }
  .import-option > span {
    flex: 1;
    font-size: var(--fs-md);
  }
  .import-option small {
    display: block;
    margin-top: 2px;
    color: var(--muted);
    font-size: var(--fs-sm);
    font-weight: 400;
  }
  .import-option > svg {
    width: 18px;
    height: 18px;
    color: var(--muted);
  }
  .backup-note {
    display: flex;
    align-items: flex-start;
    gap: var(--space-3);
    margin-top: var(--space-4);
    padding: var(--space-3) var(--space-4);
    background: var(--card);
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
  }
  .backup-note svg {
    width: 20px;
    height: 20px;
    margin-top: 1px;
    color: var(--flare);
  }
  .backup-note p {
    margin: 0;
    color: var(--muted);
    font-size: var(--fs-sm);
    line-height: 1.55;
  }
  .secret {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 6px;
    margin: var(--space-4) 0 0;
    user-select: none;
  }
  .secret-word {
    display: flex;
    align-items: center;
    gap: 5px;
    min-width: 0;
    min-height: 34px;
    padding: 6px;
    background: var(--card);
    border: 1px solid var(--line);
    border-radius: var(--radius-sm);
    font:
      var(--fs-xs) GeistMono,
      monospace;
  }
  .secret-word:before {
    content: attr(data-index);
    min-width: 14px;
    color: var(--muted);
    font-size: var(--fs-xs);
  }
  #recovery .check {
    margin: var(--space-4) 0 0;
    padding: var(--space-3) var(--space-4);
    background: var(--card);
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
  }
  #words-file-note {
    margin-top: var(--space-3);
  }

  /* ---------- Unlock ---------- */
  #unlock:not([hidden]) {
    display: flex;
    flex-direction: column;
    justify-content: safe center;
    align-items: stretch;
    width: 100%;
    max-width: 360px;
    margin: 0 auto;
    padding-block: var(--space-6) var(--space-4);
    text-align: center;
  }
  #unlock > * {
    flex-shrink: 0;
  }
  #unlock label {
    margin: 0;
    text-align: left;
  }
  /* The Qlyphs mark draws itself in (the arc, then the square), and breathes while unlocking. */
  .unlock-mark {
    align-self: center;
    flex: none;
    width: 72px;
    height: 72px;
    margin-bottom: var(--space-6);
    color: var(--text);
    overflow: visible;
  }
  .unlock-arc {
    stroke-dasharray: 1 1;
    stroke-dashoffset: 1;
    animation: mark-draw 900ms var(--ease) 120ms forwards;
  }
  .unlock-square {
    fill: var(--flare);
    stroke: none;
    transform-box: fill-box;
    transform-origin: center;
    transform: scale(0);
    animation:
      mark-pop 420ms cubic-bezier(0.3, 1.6, 0.5, 1) 820ms forwards,
      mark-glow 2.6s ease-in-out 1.4s infinite;
  }
  /* Passkey and password together need the room on short panels; the mark steps aside. */
  @media (max-height: 640px) {
    #unlock:has(#unlock-passkey:not([hidden])) .unlock-mark,
    body:has(#network-help:not([hidden])) .unlock-mark {
      display: none;
    }
  }
  body[data-busy='true'] #unlock:not([hidden]) .unlock-arc {
    animation: mark-forge 1.1s ease-in-out infinite alternate;
  }
  #unlock h1 {
    font-size: 26px;
    letter-spacing: -0.8px;
    margin-bottom: var(--space-7);
  }
  #unlock:has(#unlock-intro:not([hidden])) h1 {
    margin-bottom: var(--space-2);
  }
  #unlock .intro {
    margin-bottom: var(--space-6);
  }
  #unlock-passkey {
    margin-top: 0;
  }
  #passkey-tab-hint {
    margin: 6px 0 0;
    text-align: center;
  }
  .divider {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    margin: var(--space-4) 0;
    color: var(--muted);
    font-size: var(--fs-xs);
  }
  .divider:before,
  .divider:after {
    content: '';
    flex: 1;
    height: 1px;
    background: var(--line);
  }
  /* Validation sits inside the field-to-button gap, even when empty: errors never move the form. */
  #password-error {
    height: 24px;
    margin: 0;
    padding-top: 4px;
    color: var(--danger);
    font-size: var(--fs-xs);
    line-height: 16px;
    text-align: left;
  }
  #unlock-form > button {
    margin-top: var(--space-1);
  }
  /* Secondary links on the unlock screen are text, not rows: they react where the words are. */
  #unlock .text-button {
    align-self: center;
    width: auto;
    min-height: var(--h-control);
    margin-top: var(--space-2);
    padding: 6px var(--space-3);
  }
  #unlock:has(#unlock-passkey:not([hidden])) .intro,
  body:has(#network-help:not([hidden])) #unlock .intro {
    display: none;
  }
  #unlock:has(#unlock-passkey:not([hidden])) h1 {
    margin-bottom: var(--space-5);
  }

  /* ---------- Wallet shell ---------- */
  /* One scroll area for the wallet; the bottom navigation stays docked at its foot. */
  main > #wallet {
    display: flex;
    flex-direction: column;
    padding: 0;
    overflow-anchor: none;
    touch-action: pan-y pinch-zoom;
  }
  .wallet-content {
    flex: 1 0 auto;
    display: flex;
    flex-direction: column;
    min-width: 0;
  }
  .wallet-content > [role='tabpanel'] {
    flex: 1 0 auto;
    min-width: 0;
    padding: 0 var(--gutter) var(--space-6);
    overflow-x: clip;
  }
  .wallet-content > [role='tabpanel']:focus-visible {
    outline-offset: -2px;
  }
  .bottom-nav {
    position: sticky;
    bottom: 0;
    z-index: 4;
    flex: none;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    height: var(--h-nav);
    padding: 0 var(--space-2);
    background: color-mix(in srgb, var(--bg) 92%, transparent);
    backdrop-filter: blur(12px);
    border-top: 1px solid var(--line);
    isolation: isolate;
  }
  .bottom-nav button {
    flex-direction: column;
    gap: 3px;
    min-width: 0;
    height: 100%;
    padding: var(--space-2) 0 6px;
    border: 0;
    border-radius: var(--radius-md);
    font-size: var(--fs-xs);
    font-weight: 550;
    z-index: 1;
  }
  .bottom-nav button svg {
    width: 24px;
    height: 24px;
  }
  .bottom-nav button:focus-visible {
    outline-offset: -4px;
  }
  /* The indicator tracks the selected destination without drawing anything: the selected icon's
   * ink alone marks it. motion.ts still measures it to settle tab transitions. */
  .tab-indicator {
    display: none;
    position: absolute;
    left: 0;
    z-index: 0;
    pointer-events: none;
  }
  .tabs[data-motion-ready='true'] .tab-indicator {
    display: block;
  }
  #wallet:has(.flow[open]) .wallet-content,
  #wallet:has(.flow[open]) .bottom-nav {
    display: none;
  }

  /* ---------- Home ---------- */
  .wallet-home {
    padding-top: var(--space-5);
  }
  .balance {
    text-align: center;
  }
  .balance-label {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 2px;
    color: var(--muted);
    font-size: var(--fs-sm);
  }
  .balance strong {
    display: block;
    margin-top: 2px;
    font-size: var(--fs-display);
    font-weight: 600;
    line-height: 1.15;
    letter-spacing: -1.6px;
    font-variant-numeric: tabular-nums;
    overflow-wrap: anywhere;
  }
  .balance strong small {
    font-size: var(--fs-xl);
    font-weight: 500;
    letter-spacing: -0.4px;
    color: var(--muted);
  }
  /* One fixed line under the balance. Notes share it and cross-fade by priority:
     a fresh +/- change, then reserved/frozen details. */
  .balance-note {
    display: grid;
    height: 24px;
    margin-top: var(--space-1);
  }
  .balance-note > .note {
    grid-area: 1 / 1;
    justify-self: center;
    align-self: center;
    max-width: 100%;
    margin: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    visibility: hidden;
    opacity: 0;
    transform: translateY(4px);
    transition:
      opacity 220ms var(--ease),
      transform 220ms var(--ease),
      visibility 0s linear 220ms;
  }
  .balance-note > .note[data-visible] {
    visibility: visible;
    opacity: 1;
    transform: none;
    transition-delay: 0s;
  }
  .balance-note:has(#balance-delta[data-visible]) > .note:not(#balance-delta) {
    visibility: hidden;
    opacity: 0;
    transform: translateY(-4px);
    transition:
      opacity 160ms var(--ease),
      transform 160ms var(--ease),
      visibility 0s linear 160ms;
  }
  .total-change {
    font-variant-numeric: tabular-nums;
  }
  .total-change[data-tone='up'] {
    color: var(--green);
  }
  .total-change[data-tone='down'] {
    color: var(--danger);
  }
  .balance-delta {
    padding: 2px 10px;
    border-radius: var(--radius-pill);
    font-size: var(--fs-xs);
    line-height: 18px;
    font-variant-numeric: tabular-nums;
  }
  .balance-delta[data-tone='up'] {
    color: var(--green);
    background: color-mix(in srgb, var(--green) 12%, transparent);
  }
  .balance-delta[data-tone='down'] {
    color: var(--muted);
    background: var(--card);
  }
  .quick {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(0, 1fr));
    gap: var(--space-2);
    margin-top: var(--space-3);
  }
  button.round {
    flex-direction: column;
    gap: 6px;
    height: 72px;
    padding: var(--space-2);
    border-radius: var(--radius-lg);
    font-size: var(--fs-sm);
    font-weight: 550;
  }
  .round > span {
    display: grid;
    place-items: center;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: var(--flare-soft);
    color: var(--flare);
  }
  .round > span svg {
    width: 18px;
    height: 18px;
    stroke-width: 2;
  }
  .wallet-status:empty {
    display: none;
  }
  .wallet-status {
    margin: var(--space-3) 0 0;
    text-align: center;
    font-size: var(--fs-xs);
    color: var(--warm-text);
  }
  .callout {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    width: 100%;
    margin: var(--space-3) 0 0;
    padding: var(--space-3);
    border-radius: var(--radius-lg);
    text-align: left;
    font-size: var(--fs-sm);
    font-weight: 550;
    line-height: 1.4;
  }
  .callout > span {
    flex: 1;
    min-width: 0;
  }
  .callout small {
    display: block;
    margin-top: 2px;
    color: var(--muted);
    font-size: var(--fs-xs);
    font-weight: 400;
  }
  .callout > svg:first-child {
    color: var(--flare);
  }
  .callout > svg:last-child {
    width: 16px;
    height: 16px;
    color: var(--muted);
  }
  .list-heading {
    display: flex;
    justify-content: space-between;
    align-items: center;
    min-height: 44px;
    margin-top: var(--space-4);
    color: var(--muted);
    font-size: var(--fs-sm);
    font-weight: 550;
  }
  .wallet-content > [role='tabpanel'] > .list-heading:first-child {
    margin-top: var(--space-2);
  }
  .list-heading > span:last-child:not(:first-child) {
    font-weight: 400;
    font-variant-numeric: tabular-nums;
  }
  .token-list {
    display: grid;
    gap: var(--space-2);
  }
  button.asset-row {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    width: 100%;
    min-width: 0;
    min-height: 64px;
    padding: var(--space-3);
    border-radius: var(--radius-lg);
    text-align: left;
    font-weight: 400;
  }
  .asset-info {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-width: 0;
  }
  .asset-info strong,
  .asset-info small {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .asset-info strong {
    font-size: var(--fs-lg);
    font-weight: 600;
    line-height: 22px;
  }
  .asset-info small {
    color: var(--muted);
    font-size: var(--fs-sm);
    line-height: 18px;
    font-variant-numeric: tabular-nums;
  }
  .asset-side {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    flex: none;
    max-width: 45%;
    min-width: 0;
    text-align: right;
  }
  .asset-value {
    font-size: var(--fs-md);
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
  }
  .asset-change {
    color: var(--muted);
    font-size: var(--fs-sm);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
  }
  .asset-change[data-tone='up'] {
    color: var(--green);
  }
  .asset-change[data-tone='down'] {
    color: var(--danger);
  }
  .asset-note {
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: var(--muted);
    font-size: var(--fs-xs);
  }
  /* Token marks: the QTC symbol on its own disc, or a drawn emblem with the logo over it. */
  .token-mark {
    position: relative;
    display: grid;
    place-items: center;
    flex: none;
    width: 40px;
    height: 40px;
    border-radius: 28%;
    overflow: hidden;
  }
  .token-mark > svg.token-emblem {
    width: 100%;
    height: 100%;
    stroke: none;
  }
  .token-mark > img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    background: var(--raised);
    opacity: 0;
    transition: opacity 200ms ease-out;
  }
  .token-mark[data-logo='true'] > img {
    opacity: 1;
  }
  .token-mark.qtc {
    border-radius: 50%;
    background: #20140f;
    box-shadow: inset 0 0 0 1px #ff6b3526;
  }
  .token-mark.qtc > svg {
    width: 58%;
    height: 58%;
    stroke: none;
  }
  /* Freshness is only news when it fails: otherwise it is read out, not shown. */
  .sync-state:not([data-state='error']) {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  }
  .sync-state[data-state='error'] {
    margin: 0 0 var(--space-2);
    padding: 10px var(--space-3);
    border: 1px solid #61382f;
    border-radius: var(--radius-md);
    background: #261b19;
    color: var(--danger);
    font-size: var(--fs-sm);
  }
  /* Home: Tokens and Quarks, text tabs under the actions. */
  .home-tabs {
    display: flex;
    gap: var(--space-4);
    margin: var(--space-5) 0 var(--space-3);
  }
  .home-tabs button {
    position: relative;
    gap: 6px;
    min-height: 36px;
    padding: 0;
    border: 0;
    border-radius: 0;
    font-size: var(--fs-lg);
    font-weight: 650;
  }
  .home-tabs button[aria-selected='true']::after {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 2px;
    border-radius: 2px;
    background: var(--flare);
  }
  .home-tabs .count {
    color: var(--muted);
    font-size: var(--fs-sm);
    font-weight: 500;
    font-variant-numeric: tabular-nums;
  }
  /* Explore */
  .search-field {
    position: relative;
    display: block;
    margin: var(--space-3) 0 0;
  }
  .search-field > svg {
    position: absolute;
    left: 14px;
    top: 13px;
    width: 18px;
    height: 18px;
    color: var(--muted);
    pointer-events: none;
  }
  .search-field input {
    margin: 0;
    padding-left: 42px;
    border-radius: var(--radius-pill);
  }
  .explore-section {
    display: grid;
    gap: 2px;
  }
  .explore-section > .explore-row {
    width: calc(100% + 2 * var(--space-2));
    margin-inline: calc(-1 * var(--space-2));
  }
  .explore-section > .list-heading {
    margin: var(--space-4) 0 0;
    min-height: 36px;
    font-size: var(--fs-lg);
    font-weight: 650;
    color: var(--text);
  }
  /* Explore lines: a mark, a name over a thin progress bar, a figure on the right. */
  button.explore-row {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    width: 100%;
    min-height: 60px;
    padding: var(--space-2);
    border: 0;
    border-radius: var(--radius-md);
    text-align: left;
    font-weight: 400;
  }
  .explore-rank {
    flex: none;
    width: 14px;
    color: var(--muted);
    font-size: var(--fs-sm);
    font-weight: 600;
    text-align: center;
    font-variant-numeric: tabular-nums;
  }
  button.explore-more {
    justify-self: start;
    min-height: var(--h-control);
    margin-top: var(--space-1);
    font-size: var(--fs-sm);
    font-weight: 600;
  }
  .explore-row > .token-mark {
    width: 40px;
    height: 40px;
  }
  .explore-info {
    display: grid;
    flex: 1;
    gap: 4px;
    min-width: 0;
  }
  .explore-info > strong {
    overflow: hidden;
    font-size: var(--fs-md);
    font-weight: 600;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .explore-sub {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    color: var(--muted);
    font-size: var(--fs-sm);
    font-variant-numeric: tabular-nums;
  }
  .mini-bar {
    flex: none;
    width: 64px;
    height: 4px;
    overflow: hidden;
    border-radius: 2px;
    background: var(--raised);
  }
  .mini-bar > i {
    display: block;
    width: calc(var(--progress, 0) * 100%);
    min-width: 4px;
    height: 100%;
    border-radius: 2px;
    background: var(--flare);
  }
  .explore-side {
    display: grid;
    flex: none;
    justify-items: end;
    gap: 2px;
    text-align: right;
  }
  .explore-side > strong {
    font-size: var(--fs-md);
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
  }
  .explore-side > small {
    color: var(--muted);
    font-size: var(--fs-sm);
    white-space: nowrap;
  }
  .explore-side > small.urgent {
    color: var(--flare);
  }
  #explore > .skeleton {
    margin-top: var(--space-3);
  }
  .skeleton {
    height: var(--h-row);
    margin-bottom: 2px;
    border-radius: var(--radius-md);
    background: linear-gradient(100deg, var(--card) 20%, #232427 45%, var(--card) 70%);
    background-size: 200% 100%;
    animation: shimmer 1.3s linear infinite;
  }
  .empty-state {
    padding: var(--space-7) var(--space-4) var(--space-5);
    text-align: center;
  }
  .empty-state > svg {
    width: 22px;
    height: 22px;
    margin-bottom: var(--space-2);
    color: var(--muted);
  }
  .empty-state strong {
    display: block;
    font-size: var(--fs-md);
    font-weight: 550;
  }
  .empty-state p {
    max-width: 260px;
    margin: var(--space-1) auto 0;
    color: var(--muted);
    font-size: var(--fs-sm);
    line-height: 1.5;
  }

  /* ---------- Quarks ---------- */
  .quark-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
    gap: var(--space-3);
  }
  .quark-grid > .empty-state {
    grid-column: 1 / -1;
  }
  /* Collectibles read as a gallery: each picture edge to edge in a rounded square, its name under
     it, no card around. */
  button:is(.quark-tile, .collection-card, .item-tile) {
    flex-direction: column;
    align-items: stretch;
    gap: 6px;
    min-width: 0;
    padding: 0 0 4px;
    border-radius: var(--radius-md);
    text-align: left;
    font-weight: 400;
  }
  :is(.quark-art, .collection-cover, .item-art) .qlyph-preview img {
    width: 100%;
    height: 100%;
  }
  @media (hover: hover) and (pointer: fine) {
    button:is(.quark-tile, .collection-card, .item-tile):hover :is(.quark-art, .collection-cover, .item-art) {
      border-color: #4a4d52;
    }
  }
  .quark-art {
    display: grid;
    place-items: center;
    aspect-ratio: 1;
    background: var(--card);
    border: 1px solid var(--line);
    border-radius: var(--radius-md);
    overflow: hidden;
  }
  .quark-art .qlyph-preview {
    width: 100%;
    height: 100%;
    border: 0;
    border-radius: 0;
    background: none;
  }
  .quark-number {
    color: var(--flare);
    font:
      600 var(--fs-xl) GeistMono,
      monospace;
  }
  .quark-doc {
    display: grid;
    justify-items: center;
    gap: var(--space-1);
    padding: 0 var(--space-2);
    text-align: center;
  }
  .quark-doc small {
    color: var(--muted);
    font-size: var(--fs-xs);
  }
  .quark-label {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: var(--space-2);
    padding: 0 2px;
  }
  .quark-label strong {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: var(--fs-sm);
    font-weight: 550;
  }
  .quark-label small {
    flex: none;
    color: var(--muted);
    font-size: var(--fs-xs);
  }

  /* ---------- Collections: sets of numbered items, unlike a Quark, which stands alone ---------- */
  .collection-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
    gap: var(--space-3);
  }
  .collection-grid > .empty-state,
  .collection-grid > .field-hint {
    grid-column: 1 / -1;
  }
  .collection-cover {
    position: relative;
    display: grid;
    aspect-ratio: 1;
    overflow: hidden;
    border: 1px solid var(--line);
    border-radius: var(--radius-md);
    background: var(--card);
  }
  /* Four items or more: a 2 × 2 mosaic says "a set" at a glance, where a Quark shows one piece. */
  .collection-cover[data-mosaic] {
    grid-template-columns: 1fr 1fr;
    gap: 2px;
    background: var(--line);
  }
  .collection-cover > .cell {
    position: relative;
    display: grid;
    place-items: center;
    min-width: 0;
    min-height: 0;
    overflow: hidden;
    background: var(--card);
  }
  .collection-cover .qlyph-preview,
  .collection-mark .qlyph-preview,
  .item-art .qlyph-preview {
    width: 100%;
    height: 100%;
    border: 0;
    border-radius: 0;
    background: none;
  }
  .collection-mark {
    position: relative;
    display: grid;
    flex: none;
    width: 28px;
    height: 28px;
    overflow: hidden;
    border: 1px solid var(--line);
    border-radius: 28%;
    background: var(--bg);
  }
  .collection-mark.medium {
    width: 40px;
    height: 40px;
  }
  .collection-mark.large {
    width: 56px;
    height: 56px;
  }
  .collection-skeleton {
    height: auto;
    aspect-ratio: 1 / 1.18;
    border-radius: var(--radius-lg);
  }
  .collection-grid > .empty-state > button {
    margin-top: var(--space-4);
  }
  .collection-grid > .empty-state > button svg {
    width: 14px;
    height: 14px;
  }
  .collection-mark .qlyph-preview img {
    width: 100%;
    height: 100%;
  }
  .collection-hero {
    display: flex;
    align-items: center;
    gap: var(--space-4);
    margin: var(--space-2) 0 var(--space-5);
  }
  .collection-hero .collection-mark.large {
    width: 72px;
    height: 72px;
    border-radius: var(--radius-lg);
  }
  .collection-hero > span:last-child {
    display: grid;
    gap: 2px;
    min-width: 0;
  }
  #collection-held {
    font-size: var(--fs-lg);
    font-weight: 650;
    font-variant-numeric: tabular-nums;
  }
  #collection-meta {
    overflow: hidden;
    color: var(--muted);
    font-size: var(--fs-sm);
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  /* Collectibles: collections first, then the Quarks that stand alone. */
  .collectible-block + .collectible-block {
    margin-top: var(--space-3);
  }
  .collectible-block > summary {
    margin-top: 0;
    cursor: pointer;
    list-style: none;
    user-select: none;
  }
  .collectible-block > summary::-webkit-details-marker {
    display: none;
  }
  .collectible-block > summary .count {
    margin-left: 6px;
    color: var(--muted);
    font-size: var(--fs-sm);
    font-weight: 500;
    font-variant-numeric: tabular-nums;
  }
  .collectible-block > summary svg {
    width: 16px;
    height: 16px;
    transform: rotate(90deg);
    transition: transform 160ms ease;
  }
  .collectible-block:not([open]) > summary svg {
    transform: none;
  }
  .collectible-block[open] > summary {
    margin-bottom: var(--space-2);
  }
  @media (prefers-reduced-motion: reduce) {
    .collectible-block > summary svg {
      transition: none;
    }
  }
  /* A collection's other Quarks: its deploy, art and list, and mints not counted yet. */
  .collection-docs {
    margin-top: var(--space-5);
  }
  #collection-docs {
    display: grid;
    gap: var(--space-2);
  }
  button.doc-row {
    min-height: 56px;
    padding: var(--space-2) var(--space-3);
  }
  .doc-mark {
    display: grid;
    flex: none;
    place-items: center;
    width: 32px;
    height: 32px;
    border: 1px solid var(--line);
    border-radius: 28%;
    background: var(--bg);
    color: var(--flare);
    font:
      600 var(--fs-sm) GeistMono,
      monospace;
  }
  /* Items of one collection: denser than Quarks, each named by its number. */
  .item-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(96px, 1fr));
    gap: var(--space-3) var(--space-2);
  }
  .item-art {
    display: grid;
    aspect-ratio: 1;
    overflow: hidden;
    border: 1px solid var(--line);
    border-radius: var(--radius-md);
    background: var(--card);
  }
  .item-label {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: var(--space-1);
    padding: 0 2px;
    font-size: var(--fs-xs);
  }
  .item-label strong {
    font:
      600 var(--fs-xs) GeistMono,
      monospace;
  }
  .item-label small {
    overflow: hidden;
    color: var(--muted);
    font-size: 11px;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  /* An item's traits, as small cards: type above, value below. */
  .trait-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-2);
    margin: var(--space-5) 0 0;
  }
  .trait-grid > div {
    min-width: 0;
    padding: var(--space-2) var(--space-3);
    border: 1px solid var(--line);
    border-radius: var(--radius-md);
  }
  .trait-grid dt {
    color: var(--muted);
    font-size: 11px;
  }
  .trait-grid dd {
    margin: 2px 0 0;
    overflow: hidden;
    font-size: var(--fs-sm);
    font-weight: 550;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  /* ---------- Activity ---------- */
  #open-explorer {
    min-height: 44px;
    margin-right: calc(-1 * var(--space-2));
    padding: 0 var(--space-2);
    gap: 6px;
  }
  #open-explorer svg {
    width: 14px;
    height: 14px;
  }
  .activity-day {
    margin: var(--space-4) 0 var(--space-1);
    color: var(--muted);
    font-size: var(--fs-xs);
    font-weight: 550;
    line-height: 16px;
    letter-spacing: 0.2px;
  }
  #history > .activity-day:first-child {
    margin-top: 0;
  }
  /* Each operation is one row; it opens the transaction sheet. */
  button.activity-item {
    width: 100%;
    margin-bottom: 2px;
    border: 0;
    text-align: left;
    font-weight: inherit;
  }
  summary {
    list-style: none;
    cursor: pointer;
  }
  summary::-webkit-details-marker {
    display: none;
  }
  button.activity-heading {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: var(--space-3);
    min-height: var(--h-row);
    padding: var(--space-2);
    border-radius: var(--radius-md);
  }
  .activity-icon {
    display: grid;
    place-items: center;
    flex: none;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: var(--raised);
    color: var(--muted);
  }
  .activity-icon svg {
    width: 18px;
    height: 18px;
  }
  .activity-icon.success {
    color: var(--green);
  }
  .activity-icon.with-mark {
    position: relative;
    background: none;
    overflow: visible;
  }
  .activity-icon.with-mark > .token-mark {
    width: 40px;
    height: 40px;
  }
  /* A created Quark: its picture, square like a collectible, never a token's round mark. */
  .activity-icon.with-art {
    position: relative;
    border-radius: 28%;
    background: var(--bg);
    overflow: visible;
  }
  .activity-icon.with-art.pending::after {
    border-radius: 32%;
  }
  .activity-art {
    display: grid;
    place-items: center;
    width: 100%;
    height: 100%;
    overflow: hidden;
    border: 1px solid var(--line);
    border-radius: 28%;
  }
  .activity-art .qlyph-preview {
    width: 100%;
    height: 100%;
    border: 0;
    border-radius: 0;
    background: none;
  }
  .activity-art .qlyph-preview img {
    width: 100%;
    height: 100%;
  }
  .activity-art .quark-number {
    font-size: var(--fs-xs);
  }
  .activity-badge {
    position: absolute;
    right: -3px;
    bottom: -3px;
    display: grid;
    place-items: center;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: var(--raised);
    box-shadow: 0 0 0 2px var(--bg);
    color: var(--text);
  }
  .activity-badge svg {
    width: 11px;
    height: 11px;
    stroke-width: 2.4;
  }
  .activity-icon.error {
    color: var(--danger);
  }
  .activity-info,
  .activity-side {
    display: flex;
    flex-direction: column;
    min-width: 0;
  }
  .activity-info {
    flex: 1;
  }
  .activity-side {
    flex: none;
    align-items: flex-end;
    max-width: 45%;
    text-align: right;
  }
  .activity-info strong,
  .activity-amount {
    font-size: var(--fs-md);
    font-weight: 550;
    line-height: 20px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .activity-amount {
    max-width: 100%;
    font-variant-numeric: tabular-nums;
  }
  .activity-hash {
    color: var(--muted);
    font-size: var(--fs-sm);
    line-height: 18px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .status-chip {
    color: #d6bc8d;
    font-size: var(--fs-sm);
    line-height: 18px;
    white-space: nowrap;
  }
  .status-chip.success {
    color: var(--green);
  }
  .status-chip.error {
    color: var(--danger);
  }
  /* While an operation waits for its block, a short arc runs around its glyph. */
  .activity-icon.pending {
    position: relative;
  }
  .activity-icon.pending::after {
    content: '';
    position: absolute;
    inset: -3px;
    border: 2px solid transparent;
    border-top-color: var(--flare);
    border-radius: 50%;
    animation: tx-spin 1.4s linear infinite;
  }
  .activity-icon.large {
    width: 56px;
    height: 56px;
  }
  .activity-icon.large svg {
    width: 24px;
    height: 24px;
  }
  .activity-icon.large.with-mark > .token-mark {
    width: 56px;
    height: 56px;
  }
  .activity-icon.large .activity-badge {
    width: 22px;
    height: 22px;
  }
  @keyframes tx-spin {
    to {
      transform: rotate(360deg);
    }
  }
  .activity-verdict {
    margin: var(--space-3) 0 0;
    padding: var(--space-3);
    background: var(--card);
    border: 1px solid var(--line);
    border-radius: var(--radius-md);
    color: var(--muted);
    font-size: var(--fs-sm);
    overflow-wrap: anywhere;
  }

  /* ---------- Transaction sheet ---------- */
  /* Rises from the bottom over the wallet; as tall as its content, scrolling past 90%. */
  :is(#tx-sheet, #fee-sheet, #recipient-sheet) {
    position: fixed;
    inset: auto 0 0 0;
    width: 100%;
    max-width: none;
    max-height: 90%;
    margin: 0;
    padding: 0;
    border: 0;
    border-top: 1px solid var(--line);
    border-radius: var(--radius-lg) var(--radius-lg) 0 0;
    background: var(--bg);
    color: var(--text);
    overflow-y: auto;
    overscroll-behavior: contain;
    scrollbar-width: none;
  }
  :is(#tx-sheet, #fee-sheet, #recipient-sheet)[open] {
    animation: sheet-in 220ms var(--ease);
  }
  :is(#tx-sheet, #fee-sheet, #recipient-sheet)::backdrop {
    background: #0008;
    backdrop-filter: blur(6px);
  }
  body[data-surface='tab'] :is(#tx-sheet, #fee-sheet, #recipient-sheet) {
    inset: auto 0 0 calc(50% - min(210px, 50%));
    width: min(420px, 100%);
  }
  @keyframes sheet-in {
    from {
      transform: translateY(100%);
    }
  }
  .tx-sheet-head {
    position: sticky;
    top: 0;
    z-index: 1;
    display: flex;
    justify-content: flex-end;
    padding: var(--space-2) var(--space-2) 0;
    background: var(--bg);
  }
  .sheet-grip {
    position: absolute;
    top: 8px;
    left: calc(50% - 18px);
    width: 36px;
    height: 4px;
    border-radius: 2px;
    background: var(--line);
  }
  .tx-sheet-body {
    padding: 0 var(--gutter) var(--space-5);
  }
  .tx-sheet-hero {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-1);
    margin-bottom: var(--space-4);
    text-align: center;
  }
  .tx-sheet-hero #tx-sheet-icon {
    margin-bottom: var(--space-2);
  }
  #tx-sheet-title {
    margin: 0;
    color: var(--muted);
    font-size: var(--fs-md);
    font-weight: 550;
  }
  .tx-sheet-amount {
    margin: 0;
    font-size: 30px;
    font-weight: 650;
    line-height: 1.15;
    font-variant-numeric: tabular-nums;
    overflow-wrap: anywhere;
  }
  .tx-rows {
    margin: 0;
    padding: 0 var(--space-4);
    background: var(--card);
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
  }
  .tx-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-4);
    min-height: 48px;
    padding: var(--space-2) 0;
  }
  .tx-row + .tx-row {
    border-top: 1px solid var(--line);
  }
  .tx-row dt {
    flex: none;
    margin: 0;
    color: var(--muted);
    font-size: var(--fs-sm);
  }
  .tx-row dd {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: var(--space-1);
    min-width: 0;
    margin: 0;
    font-size: var(--fs-sm);
    text-align: right;
  }
  .tx-row dd > span,
  .tx-row dd > strong {
    min-width: 0;
    overflow-wrap: anywhere;
  }
  .tx-row dd > strong {
    font-weight: 600;
  }
  .tx-row-sub {
    color: var(--muted);
    font-size: var(--fs-xs);
  }
  .tx-row dd:has(> strong) {
    display: grid;
    grid-template-columns: auto auto;
    column-gap: var(--space-1);
    justify-items: end;
  }
  .tx-row dd:has(> strong) > strong {
    grid-column: 1;
  }
  .tx-row dd:has(> strong) > .tx-row-sub {
    grid-column: 1;
  }
  .tx-row dd:has(> strong) > .tx-copy {
    grid-column: 2;
    grid-row: 1 / span 2;
  }
  /* The transaction ID wraps in full under its label. */
  .tx-row.tx-row-id {
    flex-wrap: wrap;
    row-gap: 0;
  }
  .tx-row.tx-row-id dd {
    flex: 1 1 100%;
    justify-content: space-between;
    text-align: left;
  }
  .tx-row.tx-row-id dd > span {
    font-size: var(--fs-xs);
    line-height: 1.6;
  }
  button.tx-copy {
    flex: none;
    width: 32px;
    height: 32px;
    min-height: 32px;
    margin: -4px -8px -4px 0;
    padding: 0;
  }
  button.tx-copy svg {
    width: 15px;
    height: 15px;
  }
  /* The transaction detail is a pushed page, as other wallets show it: back and title, the
     amount beside its mark, flat rows, and the explorer docked at the foot. */
  #tx-sheet {
    inset: 0;
    height: 100%;
    max-height: 100%;
    border-top: 0;
    border-radius: 0;
    overflow: hidden;
  }
  #tx-sheet[open] {
    display: flex;
    flex-direction: column;
    animation: page-in 200ms var(--ease);
  }
  @keyframes page-in {
    from {
      opacity: 0;
      transform: translateX(24px);
    }
  }
  body[data-surface='tab'] #tx-sheet {
    inset: 0 auto 0 calc(50% - min(210px, 50%));
  }
  #tx-sheet .tx-sheet-head {
    position: static;
    display: grid;
    grid-template-columns: 44px 1fr 44px;
    align-items: center;
    padding: var(--space-2);
  }
  #tx-sheet-title {
    grid-column: 2;
    color: var(--text);
    font-size: var(--fs-md);
    font-weight: 600;
    text-align: center;
    overflow-wrap: anywhere;
  }
  #tx-sheet .tx-sheet-body {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    scrollbar-width: none;
  }
  /* What happened, centred: its picture, the amount, what it is worth and where it stands. */
  #tx-sheet .tx-sheet-hero {
    gap: 6px;
    margin: var(--space-2) 0 var(--space-5);
  }
  #tx-sheet .tx-sheet-hero #tx-sheet-icon {
    margin-bottom: var(--space-2);
  }
  #tx-sheet .activity-icon.large {
    width: 64px;
    height: 64px;
  }
  #tx-sheet .activity-icon.large.with-mark > .token-mark {
    width: 64px;
    height: 64px;
  }
  #tx-sheet .activity-icon.large.with-art .activity-art {
    width: 88px;
    height: 88px;
  }
  #tx-sheet .activity-icon.large.with-art {
    width: 88px;
    height: 88px;
  }
  #tx-sheet .tx-sheet-amount {
    font-size: 28px;
  }
  #tx-sheet .activity-art .quark-number {
    font-size: var(--fs-xl);
  }
  .tx-sheet-sub {
    margin: 0;
    color: var(--muted);
    font-size: var(--fs-md);
    font-variant-numeric: tabular-nums;
  }
  /* The Status row says where it stands; the chip stays for assistive reading only. */
  #tx-sheet .tx-sheet-hero .status-chip {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
  }
  button.tx-sheet-view {
    margin-top: var(--space-2);
    min-height: 36px;
    padding: 6px 16px;
    border-radius: var(--radius-pill);
    font-size: var(--fs-sm);
    font-weight: 600;
  }
  /* Rows in cards: details, fees, then the chain's identifiers. */
  .tx-groups {
    display: grid;
    gap: var(--space-3);
  }
  .tx-group {
    margin: 0;
    padding: 0 var(--space-4);
    background: var(--card);
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
  }
  .tx-group .tx-row {
    min-height: 44px;
  }
  .tx-group .tx-row.tx-row-total dt,
  .tx-group .tx-row.tx-row-total dd {
    color: var(--text);
    font-weight: 650;
  }
  .tx-row[data-tone='ok'] dd {
    color: var(--green);
  }
  .tx-row[data-tone='pending'] dd {
    color: var(--flare);
  }
  .tx-row[data-tone='error'] dd {
    color: var(--danger);
  }
  .tx-row dd > .tx-id {
    padding: 4px 4px 4px 10px;
    border-radius: 999px;
    background: var(--raised);
    font-size: var(--fs-xs);
  }
  .tx-sheet-foot {
    padding: var(--space-3) var(--gutter) var(--space-4);
  }
  #tx-sheet-explorer {
    margin-top: 0;
  }
  #tx-sheet-explorer svg {
    width: 14px;
    height: 14px;
  }

  /* ---------- Token detail ---------- */
  /* Price: the latest trade, its change over the chosen period and a step chart of the trades. */
  .token-market {
    --market: var(--muted);
    margin: var(--space-4) 0;
    padding: var(--space-3) var(--space-4);
    background: var(--card);
    border: 1px solid var(--line);
    border-radius: var(--radius-md);
  }
  .token-market[data-trend='up'] {
    --market: var(--green);
  }
  .token-market[data-trend='down'] {
    --market: var(--danger);
  }
  .market-head {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 2px var(--space-2);
  }
  .market-label {
    width: 100%;
    color: var(--muted);
    font-size: var(--fs-sm);
  }
  #token-price {
    font-size: var(--fs-xl);
    font-weight: 650;
    font-variant-numeric: tabular-nums;
    overflow-wrap: anywhere;
  }
  .market-change {
    color: var(--market);
    font-size: var(--fs-sm);
    font-weight: 600;
    font-variant-numeric: tabular-nums;
  }
  svg.market-chart {
    display: block;
    width: 100%;
    height: 88px;
    margin: var(--space-3) 0 var(--space-2);
    overflow: visible;
  }
  .market-line {
    fill: none;
    stroke: var(--market);
    stroke-width: 1.75;
    vector-effect: non-scaling-stroke;
  }
  .market-area {
    fill: color-mix(in srgb, var(--market) 14%, transparent);
    stroke: none;
  }
  .market-ranges {
    display: flex;
    gap: 4px;
  }
  button.market-range {
    min-width: 44px;
    min-height: 28px;
    padding: 2px 10px;
    font-size: var(--fs-sm);
    font-weight: 600;
  }
  .market-usd {
    width: 100%;
    color: var(--muted);
    font-size: var(--fs-sm);
    font-variant-numeric: tabular-nums;
  }
  .market-usd:empty {
    display: none;
  }
  .token-fiat {
    color: var(--muted);
    font-size: var(--fs-md);
    font-variant-numeric: tabular-nums;
  }
  #clear-dialog .actions .danger-button {
    margin-top: 0;
  }
  .market-note {
    margin: var(--space-2) 0 0;
    color: var(--muted);
    font-size: var(--fs-sm);
  }
  .token-hero {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-1);
    margin: var(--space-2) 0 var(--space-5);
    text-align: center;
  }
  .token-hero-mark .token-mark {
    width: 64px;
    height: 64px;
  }
  .token-hero-mark[data-kind='quark'] .qlyph-preview {
    width: min(232px, 72vw);
    height: min(232px, 72vw);
  }
  .token-hero-mark:is([data-kind='quark'], [data-kind='item']) .qlyph-preview {
    border-radius: var(--radius-lg);
    background: var(--card);
  }
  .token-hero-mark:is([data-kind='quark'], [data-kind='item']) .qlyph-preview img {
    width: 100%;
    height: 100%;
  }
  /* A collectible has one action here: Send, as a wide button. */
  .quick[data-single] {
    grid-template-columns: 1fr;
  }
  .quick[data-single] button.round {
    flex-direction: row;
    gap: var(--space-2);
    height: var(--h-action);
    border-radius: var(--radius-pill);
    font-size: var(--fs-md);
    font-weight: 600;
  }
  .quick[data-single] button.round > span {
    width: auto;
    height: auto;
    background: none;
    color: inherit;
  }
  /* A collection item is its picture first, as wallets show collectibles. */
  .token-hero-mark[data-kind='item'] .qlyph-preview {
    width: min(232px, 72vw);
    height: min(232px, 72vw);
  }
  #token-balance {
    margin-top: var(--space-2);
    font-size: 28px;
    font-weight: 650;
    letter-spacing: -0.8px;
    font-variant-numeric: tabular-nums;
    overflow-wrap: anywhere;
  }
  #token-id {
    color: var(--muted);
    font-size: var(--fs-sm);
  }
  .token-rows {
    margin-top: var(--space-5);
  }
  .token-about {
    margin-top: var(--space-5);
    animation: fade-in 0.2s ease-out;
  }
  .token-about p {
    margin: 0;
    font-size: var(--fs-sm);
    line-height: 1.5;
    white-space: pre-line;
    overflow-wrap: anywhere;
  }
  .token-about p:empty {
    display: none;
  }
  .token-links {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
    margin-top: var(--space-3);
  }
  .token-links:empty {
    display: none;
  }
  .token-links button {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
    min-height: 32px;
    max-width: 100%;
    padding: 0 var(--space-3);
    font-size: var(--fs-sm);
  }
  .token-links svg {
    width: 14px;
    height: 14px;
  }
  .token-links button span {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .token-rows dd {
    font-size: var(--fs-sm);
  }
  .token-rows dd.copy-value {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: var(--space-1);
  }
  .token-rows dd.copy-value button.tx-copy {
    margin: -6px 0;
  }

  /* ---------- Account drawer ---------- */
  #account-drawer {
    position: fixed;
    inset: 0 auto 0 0;
    width: 96px;
    max-width: none;
    height: 100%;
    max-height: none;
    margin: 0;
    padding: 0;
    border: 0;
    border-right: 1px solid var(--line);
    background: #0b0c0d;
    color: var(--text);
  }
  #account-drawer[open] {
    display: flex;
    animation: drawer-in 180ms var(--ease);
  }
  #account-drawer::backdrop {
    background: #0008;
    backdrop-filter: blur(6px);
  }
  body[data-surface='tab'] #account-drawer {
    inset: 0 auto 0 calc(50% - min(210px, 50%));
  }
  .drawer-rail {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
    padding: var(--space-2) 0 var(--space-3);
  }
  .drawer-rail > #close-drawer {
    flex: none;
    margin-bottom: var(--space-2);
  }
  .drawer-accounts {
    flex: 1;
    min-height: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-3);
    width: 100%;
    padding: var(--space-1) 0;
    overflow: auto;
    scrollbar-width: none;
  }
  button.drawer-account {
    flex-direction: column;
    gap: 4px;
    width: 84px;
    padding: 4px;
    border: 0;
    border-radius: var(--radius-md);
    font-size: var(--fs-xs);
    font-weight: 500;
  }
  .drawer-account .account-avatar {
    width: 52px;
    height: 52px;
    border-radius: 50%;
    background: var(--card);
    box-shadow: inset 0 0 0 1px var(--line);
  }
  .drawer-account .account-avatar > svg {
    width: 30px;
    height: 30px;
  }
  .drawer-account[aria-current] .account-avatar {
    box-shadow: 0 0 0 2px var(--flare);
  }
  .drawer-account[aria-current] .drawer-name {
    color: var(--flare);
  }
  .drawer-name {
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: var(--muted);
  }
  .drawer-actions {
    flex: none;
    display: grid;
    gap: var(--space-2);
    width: 100%;
    padding-top: var(--space-3);
    border-top: 1px solid var(--line);
    justify-items: center;
  }
  /* Settings fills the panel: its own back control and title replace the wallet header. */
  body:has(#settings-panel[open]) .app-header {
    display: none;
  }
  button.danger-button {
    margin-top: var(--space-4);
    min-height: var(--h-action);
  }
  .drawer-actions .icon {
    width: 40px;
    height: 40px;
  }

  /* ---------- Settings ---------- */
  /* Settings is a pushed screen; each row opens a page of its own over the list. */
  .flow-shell.settings-shell {
    display: block;
    padding: 0 var(--gutter) var(--space-6);
    overflow-x: hidden;
    overflow-y: auto;
    overscroll-behavior: contain;
    scrollbar-width: none;
  }
  .settings-shell:focus-visible {
    outline: none;
  }
  /* Stays put while the list scrolls, under the back control. */
  h1.settings-title {
    position: sticky;
    top: 0;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 48px;
    margin: 0 calc(-1 * var(--gutter));
    background: var(--bg);
    font-size: var(--fs-lg);
  }
  .settings-label:first-of-type {
    margin-top: var(--space-2);
  }
  .settings-flow details.setting[open] {
    position: absolute;
    inset: 0;
    z-index: 3;
    padding: 0 var(--gutter) var(--space-6);
    background: var(--bg);
    overflow-x: hidden;
    overflow-y: auto;
    scrollbar-width: none;
  }
  .settings-flow details.setting[open] > summary {
    border-radius: 0;
    position: sticky;
    top: 0;
    z-index: 1;
    justify-content: center;
    min-height: 48px;
    margin: 0 calc(-1 * var(--gutter)) var(--space-3);
    padding: 0 48px;
    background: var(--bg);
    border-bottom: 1px solid var(--line);
  }
  .settings-flow details.setting[open] > summary::after {
    position: absolute;
    left: 22px;
    top: calc(50% - 5px);
    width: 9px;
    height: 9px;
    margin: 0;
    border-color: var(--text);
    transform: rotate(135deg);
  }
  .settings-flow details.setting[open] > summary .setting-heading > svg,
  .settings-flow details.setting[open] > summary small,
  .settings-flow details.setting[open] > summary .setting-pill,
  .settings-flow details.setting[open] > summary .setting-value,
  .settings-flow details.setting[open] > summary > .account-avatar {
    display: none;
  }
  .settings-flow details.setting[open] > summary .setting-heading {
    flex: 0 1 auto;
  }
  .settings-flow details.setting-account[open] strong {
    font-size: var(--fs-md);
  }
  .settings-flow details.setting-account[open] {
    margin: 0;
    border: 0;
    border-radius: 0;
  }
  details.setting-account + .settings-group {
    margin-top: var(--space-4);
  }
  .settings-flow .setting > summary::after {
    transform: rotate(-45deg);
  }

  /* ---------- Settings rows ---------- */
  .settings-label {
    margin: var(--space-6) var(--space-1) var(--space-2);
    color: var(--muted);
    font-size: var(--fs-xs);
    font-weight: 550;
    letter-spacing: 0.4px;
    text-transform: uppercase;
  }
  .settings-label:first-child {
    margin-top: var(--space-4);
  }
  .settings-group {
    background: var(--card);
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
    overflow: hidden;
  }
  .setting + .setting,
  .setting + .setting-link,
  .setting-link + .setting,
  .settings-group > .settings-about {
    border-top: 1px solid var(--line);
  }
  .setting {
    padding: 0 var(--space-4);
  }
  details.setting[open] {
    padding-bottom: var(--space-4);
  }
  .setting-static {
    padding-block: var(--space-4);
  }
  .setting > summary,
  button.setting-link {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: var(--space-3);
    min-height: var(--h-row);
    margin: 0 calc(-1 * var(--space-4));
    padding: 10px var(--space-4);
    border-radius: 0;
    font-size: var(--fs-md);
    font-weight: 550;
  }
  /* Every row ends in the same drawn chevron, whether it opens a page or runs an action. */
  button.setting-link > svg {
    display: none;
  }
  .setting > summary::after,
  button.setting-link::after {
    content: '';
    flex: none;
    width: 7px;
    height: 7px;
    margin-right: 3px;
    border-right: 1.6px solid var(--muted);
    border-bottom: 1.6px solid var(--muted);
    transform: rotate(-45deg);
    transition: transform var(--motion-ui) var(--ease);
  }
  .setting[open] > summary::after {
    transform: rotate(45deg);
  }
  .setting > summary:focus-visible,
  button.setting-link:focus-visible {
    outline-offset: -3px;
  }
  button.setting-link {
    width: calc(100% + 2 * var(--space-4));
    margin: 0;
    width: 100%;
    text-align: left;
  }
  button.setting-link > svg {
    width: 16px;
    height: 16px;
    color: var(--muted);
  }
  .setting-heading {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    min-width: 0;
  }
  .setting-heading > svg {
    width: 20px;
    height: 20px;
    color: var(--muted);
  }
  .setting-heading small {
    display: block;
    margin-top: 1px;
    color: var(--muted);
    font-size: var(--fs-xs);
    font-weight: 400;
    line-height: 1.45;
  }
  .setting-value {
    flex: none;
    margin-left: auto;
    max-width: 40%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: var(--muted);
    font-size: var(--fs-sm);
    font-weight: 450;
  }
  .setting-status {
    margin: 0 0 var(--space-3);
    color: var(--text);
    font-size: var(--fs-sm);
    font-weight: 550;
  }
  /* The account the settings apply to, at the top, as a card that opens its details. */
  details.setting-account {
    margin-top: var(--space-2);
    padding: 0 var(--space-4);
    background: var(--card);
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
  }
  .setting-account > summary {
    min-height: 68px;
  }
  .setting-account .account-avatar {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: var(--raised);
  }
  .setting-account .account-avatar > svg {
    width: 24px;
    height: 24px;
  }
  .setting-account .setting-heading {
    flex: 1;
  }
  .setting-account strong {
    display: block;
    font-size: var(--fs-lg);
    font-weight: 650;
  }
  .setting-account small {
    display: block;
    color: var(--muted);
    font-size: var(--fs-sm);
    font-weight: 400;
  }
  /* A page's options: one row each, the active one marked. */
  .choice-list {
    display: grid;
    gap: var(--space-2);
  }
  button.choice {
    justify-content: space-between;
    width: 100%;
    min-height: 60px;
    padding: var(--space-3) var(--space-4);
    border-radius: var(--radius-md);
    text-align: left;
    font-weight: 550;
  }
  button.choice small {
    display: block;
    margin-top: 2px;
    color: var(--muted);
    font-size: var(--fs-xs);
    font-weight: 400;
  }
  button.choice::after {
    content: '';
    flex: none;
    width: 18px;
    height: 18px;
    border: 1.6px solid var(--input);
    border-radius: 50%;
  }
  button.choice[aria-pressed='true']::after {
    border: 5px solid var(--flare);
  }
  .settings-group + .settings-group {
    margin-top: var(--space-4);
  }
  /* Network: the choice, then the active network's endpoints and their editor. */
  #network-choices .setting-toggle {
    margin-top: var(--space-2);
  }
  .endpoints-title {
    margin-top: var(--space-5);
  }
  #endpoint-rows dd {
    margin-bottom: var(--space-1);
  }
  .endpoints-form {
    margin-top: var(--space-3);
  }
  .endpoints-form .actions {
    margin-top: var(--space-3);
  }
  .setting-pill {
    flex: none;
    margin-left: auto;
    padding: 2px 6px;
    border: 1px solid var(--warm-line);
    border-radius: 6px;
    color: var(--warm-text);
    font:
      500 var(--fs-xs) GeistMono,
      monospace;
    letter-spacing: 0.3px;
  }
  .setting > .muted {
    margin: 0 0 var(--space-3);
    font-size: var(--fs-sm);
  }
  .setting .field-hint {
    margin: var(--space-3) 0 0;
  }
  .setting form label {
    margin-bottom: var(--space-3);
  }
  .setting > .rows {
    padding: 0;
  }
  .display-title {
    margin: 0 0 var(--space-3);
    font-size: var(--fs-md);
    font-weight: 550;
  }
  .display-options {
    display: flex;
    gap: var(--space-2);
  }
  .display-options button {
    flex: 1;
    min-width: 0;
    min-height: var(--h-control);
    padding: 8px var(--space-3);
    font-size: var(--fs-sm);
  }
  .setting-toggle {
    width: 100%;
    justify-content: space-between;
    min-height: 44px;
    padding: 0;
    border-radius: var(--radius-sm);
    font-size: var(--fs-md);
    font-weight: 500;
  }
  .switch-track {
    flex: none;
    width: 40px;
    height: 24px;
    padding: 3px;
    border: 1px solid #777068;
    border-radius: var(--radius-pill);
    background: #25221f;
    transition:
      background 0.2s var(--ease),
      border-color 0.2s;
  }
  .switch-track:after {
    content: '';
    display: block;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: #b5afa6;
    transition:
      transform 0.22s var(--ease),
      background 0.2s;
  }
  [aria-checked='true'] .switch-track {
    background: var(--flare);
    border-color: var(--flare);
  }
  [aria-checked='true'] .switch-track:after {
    transform: translateX(16px);
    background: #18120f;
  }
  .item {
    padding: var(--space-3) 0;
    border-bottom: 1px solid var(--line);
  }
  .item:last-child {
    border-bottom: 0;
  }
  .item p {
    margin: 0;
    font-size: var(--fs-sm);
    overflow-wrap: anywhere;
  }
  .item button {
    min-height: 32px;
    margin-top: var(--space-2);
    padding: 4px var(--space-3);
    font-size: var(--fs-sm);
  }
  .settings-about {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
    margin-top: var(--space-6);
    color: var(--muted);
  }
  .settings-about > svg {
    width: 18px;
    height: 18px;
    color: var(--text);
    stroke-width: 2.4;
  }
  .settings-about p {
    margin: 0;
    font-size: var(--fs-sm);
  }

  /* ---------- Points (Explore) ---------- */
  /* The account's Qlyphs level leads Activity: an XP hexagon whose six sides fill towards the next
     level, then the level and the XP. */
  button.points-card {
    display: flex;
    align-items: center;
    gap: var(--space-4);
    width: 100%;
    margin: var(--space-3) 0 var(--space-2);
    padding: var(--space-3) var(--space-4);
    border-radius: var(--radius-lg);
    text-align: left;
    font-weight: 400;
    background-image: radial-gradient(ellipse at 0 0, #ff946e1f, transparent 70%);
  }
  .points-hex {
    position: relative;
    display: grid;
    place-items: center;
    flex: none;
    width: 64px;
    height: 64px;
  }
  .points-hex svg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    overflow: visible;
  }
  .hex-core {
    fill: color-mix(in srgb, var(--flare) 14%, var(--card));
    stroke: none;
  }
  .hex-track,
  .hex-fill {
    fill: none;
    stroke-width: 4;
    stroke-linecap: round;
  }
  .hex-track {
    stroke: var(--line);
  }
  .hex-fill {
    stroke: var(--flare);
    stroke-dasharray: var(--fill, 0) 1;
    transition: stroke-dasharray 400ms var(--ease);
  }
  .hex-fill[data-empty] {
    visibility: hidden;
  }
  .hex-label {
    position: relative;
    color: var(--flare);
    font-size: var(--fs-lg);
    font-weight: 750;
    letter-spacing: 0.4px;
  }
  .points-text {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-width: 0;
    gap: 2px;
  }
  #points-title {
    font-size: var(--fs-xl);
    font-weight: 650;
    line-height: 1.2;
  }
  .points-text small {
    color: var(--muted);
    font-size: var(--fs-sm);
    font-variant-numeric: tabular-nums;
  }
  @media (prefers-reduced-motion: reduce) {
    .hex-fill {
      transition: none;
    }
  }
  .points-chevron {
    width: 16px;
    height: 16px;
    color: var(--muted);
  }

  /* ---------- Send and receive ---------- */
  /* Pushed screens: a back control over a centered title, fields, and a docked action. */
  details.flow:not([open]) {
    display: none;
  }
  .flow[open] {
    position: relative;
    flex: 1;
    min-height: 0;
    margin: 0;
    overflow: hidden;
  }
  .flow > summary {
    position: absolute;
    top: var(--space-1);
    left: var(--space-2);
    z-index: 2;
    display: grid;
    place-items: center;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    color: var(--text);
  }
  .flow-shell {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    margin: 0;
  }
  .flow-content {
    flex: 1;
    min-height: 0;
    padding: 0 var(--gutter) var(--space-3);
    overflow: auto;
    overscroll-behavior: contain;
    scrollbar-width: none;
  }
  .flow-content h1 {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 48px;
    margin: 0 0 var(--space-2);
    padding: 0 var(--space-7);
    font-size: var(--fs-lg);
    text-align: center;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
  }
  #send-title {
    display: block;
    line-height: 48px;
  }
  .flow-content label,
  .flow-content .field {
    margin-bottom: var(--space-3);
  }
  .field {
    position: relative;
  }
  .field > label {
    margin: 0;
  }
  /* The asset picker: the chosen asset's mark, name and balance; the native select stays the
     form's value, visually hidden. */
  button.asset-picker {
    justify-content: flex-start;
    gap: var(--space-3);
    width: 100%;
    min-height: 56px;
    margin-top: 6px;
    padding: var(--space-2) var(--space-3);
    border-radius: var(--radius-md);
    text-align: left;
    font-weight: 400;
  }
  .asset-picker-mark .token-mark {
    width: 36px;
    height: 36px;
  }
  .asset-picker-text {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-width: 0;
  }
  .asset-picker-text strong {
    font-size: var(--fs-md);
    font-weight: 600;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .asset-picker-text small {
    color: var(--muted);
    font-size: var(--fs-sm);
    font-variant-numeric: tabular-nums;
  }
  .asset-picker-chevron {
    width: 16px;
    height: 16px;
    color: var(--muted);
    transform: rotate(-90deg);
    transition: transform var(--motion-ui) var(--ease);
  }
  .asset-picker[aria-expanded='true'] .asset-picker-chevron {
    transform: rotate(90deg);
  }
  select.asset-select {
    position: absolute;
    width: 1px;
    height: 1px;
    min-height: 0;
    margin: 0;
    padding: 0;
    border: 0;
    opacity: 0;
    pointer-events: none;
  }
  .picker-list {
    position: absolute;
    left: 0;
    right: 0;
    top: calc(100% + 4px);
    z-index: 5;
    display: grid;
    gap: 2px;
    max-height: 240px;
    padding: var(--space-1);
    overflow: auto;
    scrollbar-width: none;
    background: var(--raised);
    border: 1px solid var(--line);
    border-radius: var(--radius-md);
    box-shadow: 0 16px 40px #000a;
  }
  button.picker-option {
    justify-content: flex-start;
    gap: var(--space-3);
    width: 100%;
    min-height: 48px;
    padding: 6px var(--space-2);
    border: 0;
    border-radius: var(--radius-sm);
    text-align: left;
    font-weight: 400;
  }
  .picker-option .token-mark {
    width: 32px;
    height: 32px;
  }
  .picker-option .asset-info strong {
    font-size: var(--fs-md);
  }
  .picker-option[aria-selected='true'] {
    box-shadow: inset 0 0 0 1px var(--flare);
  }
  /* Recipients: the wallet's other accounts and the addresses this account sent to. */
  #recipient-sheet {
    height: 90%;
  }
  #recipient-sheet[open] {
    display: flex;
    flex-direction: column;
    overflow: hidden;
  }
  #recipient-sheet .tx-sheet-head {
    position: static;
    min-height: 44px;
  }
  #recipient-sheet .tx-sheet-body {
    flex: 1;
    min-height: 0;
    display: flex;
    flex-direction: column;
    padding-bottom: 0;
  }
  #recipient-title {
    margin: 0;
    font-size: var(--fs-lg);
  }
  #recipient-sheet .search-field {
    flex: none;
    margin-bottom: var(--space-2);
  }
  .recipient-list {
    flex: 1;
    min-height: 0;
    margin: 0 calc(-1 * var(--space-2));
    padding: 0 0 var(--space-4);
    overflow: auto;
    overscroll-behavior: contain;
    scrollbar-width: none;
  }
  .recipient-list .account-wallet-heading {
    padding-top: var(--space-3);
  }
  .recipient-list .account-option-info small {
    display: block;
  }
  .recipient-name {
    margin: calc(-1 * var(--space-2)) 0 var(--space-3);
    color: var(--muted);
  }
  .recipient-name strong {
    color: var(--text);
    font-weight: 550;
  }
  button.max-button {
    flex: none;
    min-height: 28px;
    padding: 2px 10px;
    font-size: var(--fs-xs);
    font-weight: 650;
  }
  .flow-content .field-hint {
    margin: -2px 0 0;
    overflow-wrap: anywhere;
  }
  .flow-actions {
    flex: none;
    padding: var(--space-3) var(--gutter) var(--space-4);
  }
  .flow-actions .wide {
    margin: 0;
  }
  .qr-card {
    margin: 0 auto var(--space-4);
    width: fit-content;
    padding: var(--space-3);
    background: #fff;
    border-radius: var(--radius-lg);
  }
  .qr-card canvas {
    display: block;
    width: 168px;
    height: 168px;
    image-rendering: pixelated;
  }
  .receive-address-block .field-label {
    color: var(--muted);
    font-size: var(--fs-sm);
  }
  .address-box {
    display: block;
    margin-top: 6px;
    padding: 10px var(--space-3);
    background: var(--card);
    border: 1px solid var(--line);
    border-radius: var(--radius-md);
    font-size: var(--fs-sm);
    line-height: 1.55;
  }
  .transfer-note {
    margin: var(--space-3) 0 0;
    color: var(--muted);
    font-size: var(--fs-xs);
    line-height: 1.5;
  }

  /* ---------- Review ---------- */
  #confirmation:not([hidden]) {
    display: flex;
    flex-direction: column;
    padding: 0;
    overflow: hidden;
  }
  .review-content {
    flex: 1;
    min-height: 0;
    padding: var(--space-5) var(--gutter) var(--space-4);
    overflow-x: hidden;
    overflow-y: auto;
    overscroll-behavior: contain;
    scrollbar-width: thin;
    scrollbar-color: var(--line) transparent;
  }
  .review-content:focus-visible {
    outline-offset: -2px;
  }
  .review-heading {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    margin-bottom: var(--space-4);
  }
  .review-mark {
    flex: none;
    width: 44px;
    height: 44px;
  }
  .review-mark > * {
    width: 100%;
    height: 100%;
  }
  .review-heading-text {
    min-width: 0;
  }
  #confirmation h1 {
    margin: 0;
    overflow-wrap: anywhere;
  }
  .origin {
    margin: 2px 0 0;
    color: var(--muted);
    font-size: var(--fs-sm);
    overflow-wrap: anywhere;
  }
  .review-amount {
    margin: var(--space-5) 0 var(--space-6);
    font-size: clamp(32px, 10vw, 44px);
    font-weight: 600;
    line-height: 1.15;
    letter-spacing: -1.4px;
    font-variant-numeric: tabular-nums;
    overflow-wrap: anywhere;
  }
  .review-currency {
    color: var(--muted);
    font-size: var(--fs-xl);
    font-weight: 500;
    letter-spacing: -0.4px;
  }
  .review-group {
    margin: 0;
    padding: var(--space-4) 0;
    border-top: 1px solid var(--line);
  }
  .review-group h2 {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin: 0 0 var(--space-3);
    color: var(--muted);
    font-size: var(--fs-sm);
    font-weight: 550;
    letter-spacing: 0;
  }
  .rows {
    padding: 0;
  }
  .rows dt:not(:first-child) {
    border-top: 1px solid var(--line);
    padding-top: var(--space-3);
  }
  .rows dd {
    font-family: GeistMono, monospace;
    font-size: var(--fs-xs);
    line-height: 1.6;
  }
  .review-row {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--space-4);
    padding: var(--space-2) 0;
  }
  .review-row + .review-row {
    border-top: 1px solid var(--line-soft);
  }
  .review-row:first-child {
    padding-top: 0;
  }
  .review-row:last-child {
    padding-bottom: 0;
  }
  .review-row dt {
    max-width: 58%;
    margin: 0;
    font-size: var(--fs-sm);
    line-height: 1.55;
    color: var(--muted);
  }
  .review-row dd {
    flex-shrink: 1;
    margin: 0;
    text-align: right;
    font-family: Geist, sans-serif;
    font-size: var(--fs-sm);
    font-weight: 550;
    overflow-wrap: anywhere;
    font-variant-numeric: tabular-nums;
  }
  .review-row.identifier {
    display: block;
  }
  .review-row.identifier dt {
    max-width: none;
    margin-bottom: 6px;
  }
  .review-row.identifier dd {
    text-align: left;
    font-family: GeistMono, monospace;
    font-size: var(--fs-xs);
    font-weight: 400;
    line-height: 1.7;
  }
  .review-row.review-total {
    margin-top: var(--space-3);
    padding-top: var(--space-3);
  }
  .review-strong dt {
    white-space: nowrap;
  }
  .review-strong dd {
    color: var(--text);
    font-weight: 600;
  }
  .review-total :is(dt, dd) {
    color: var(--text);
    font-size: var(--fs-md);
    font-weight: 600;
  }
  .review-copy {
    min-height: 28px;
    margin: -6px -8px -6px 0;
    padding: 2px var(--space-2);
    font-size: var(--fs-xs);
  }
  .review-disclosure {
    margin: 0;
    border-top: 1px solid var(--line);
  }
  .review-disclosure > summary {
    display: flex;
    align-items: center;
    gap: 10px;
    min-height: 48px;
    padding: var(--space-3) 0;
    color: var(--muted);
    font-size: var(--fs-sm);
    border-radius: 0;
  }
  .review-disclosure > summary::after {
    content: '+';
    flex: none;
    margin-left: auto;
    font-size: var(--fs-lg);
  }
  .review-disclosure[open] > summary::after {
    content: '−';
  }
  .review-disclosure > .rows {
    margin: 0;
    padding: var(--space-1) 0 var(--space-4);
  }
  .setting .review-disclosure {
    margin-top: var(--space-3);
  }
  .review-account-name {
    display: flex;
    flex-direction: column;
    margin-left: auto;
    color: var(--text);
    text-align: right;
    overflow-wrap: anywhere;
  }
  .review-account-name small {
    color: var(--muted);
    font-size: var(--fs-xs);
  }
  .review-account > summary::after {
    margin-left: 0;
  }
  .review-zero-fees {
    margin-top: var(--space-2);
    border: 0;
  }
  .review-zero-fees > summary {
    min-height: 32px;
    padding: var(--space-1) 0;
    font-size: var(--fs-xs);
  }
  .review-technical pre {
    overflow-x: hidden;
  }
  #review-warning {
    margin: var(--space-4) 0;
    color: var(--muted);
    font-size: var(--fs-sm);
    line-height: 1.55;
  }
  #expires {
    margin: var(--space-4) 0 0;
  }
  body[data-surface='confirmation'] #open-accounts,
  body[data-surface='confirmation'] #copy-address {
    display: none;
  }
  body[data-surface='confirmation'] .brand {
    display: flex;
  }
  .actions {
    display: flex;
    gap: var(--space-2);
  }
  .actions button {
    flex: 1;
    min-height: var(--h-action);
  }
  .review-actions {
    flex: none;
    gap: var(--space-3);
    padding: var(--space-3) var(--gutter) var(--space-4);
    border-top: 1px solid var(--line);
    background: var(--bg);
  }
  .review-actions button {
    min-width: 0;
    padding: 10px var(--space-2);
  }
  .review-actions #reject {
    flex: 0.7;
  }
  .review-actions #approve {
    flex: 1.3;
  }
  /* Quark preview (INSCRIPTIONS.md §5): an <img> from a data: URL, or escaped text. The frame
     has a fixed height so the review never shifts when an image decodes. */
  .review-qlyph {
    margin: 0 0 var(--space-4);
  }
  .qlyph-preview {
    position: relative;
    display: grid;
    place-items: center;
    height: 168px;
    margin: 0;
    overflow: hidden;
    background: var(--card);
    border: 1px solid var(--line);
    border-radius: var(--radius-md);
  }
  .qlyph-preview img {
    position: absolute;
    inset: 0;
    display: block;
    width: calc(100% - 16px);
    height: calc(100% - 16px);
    margin: auto;
    object-fit: contain;
    image-rendering: pixelated;
  }
  .qlyph-preview pre {
    place-self: stretch;
    margin: 0;
    padding: 10px var(--space-3);
    overflow: auto;
    background: none;
    color: var(--text);
    font-size: var(--fs-xs);
    line-height: 1.6;
  }
  .qlyph-binary {
    gap: 6px;
    padding: var(--space-3);
    color: var(--muted);
    font-size: var(--fs-xs);
    text-align: center;
  }
  .qlyph-binary p {
    margin: 0;
  }
  .qlyph-binary code {
    font-family: GeistMono, monospace;
    overflow-wrap: anywhere;
  }
  .qlyph-binary a {
    color: var(--text);
  }

  /* Network fee (review-tip.ts): a review row whose value opens a sheet of tip levels. */
  .fee-row {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    min-height: 32px;
    margin: -6px -8px -6px 0;
    padding: 2px 4px 2px 8px;
    border: 0;
    border-radius: var(--radius-sm);
    font: inherit;
    font-variant-numeric: tabular-nums;
  }
  .fee-row[data-pending] {
    cursor: progress;
    opacity: 0.6;
  }
  .fee-chip {
    display: inline-flex;
    align-items: center;
    gap: 2px;
    padding: 2px 4px 2px 10px;
    border-radius: 999px;
    background: var(--raised);
    color: var(--text);
    font-size: var(--fs-xs);
    font-weight: 600;
  }
  .fee-chip[data-level='normal'],
  .fee-chip[data-level='high'],
  .fee-chip[data-level='custom'] {
    background: color-mix(in srgb, var(--flare) 22%, var(--raised));
  }
  .fee-chip svg {
    width: 16px;
    height: 16px;
  }
  #fee-sheet-title {
    margin: var(--space-2) 0 var(--space-1);
    font-size: var(--fs-lg);
  }
  .fee-note {
    margin: 0 0 var(--space-4);
    color: var(--muted);
    font-size: var(--fs-sm);
    line-height: 1.5;
  }
  .fee-options {
    display: grid;
    gap: var(--space-2);
  }
  .fee-option {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3);
    min-height: 60px;
    padding: var(--space-3) var(--space-4);
    border: 1px solid var(--line);
    border-radius: var(--radius-md);
    text-align: left;
  }
  .fee-option[aria-checked='true'] {
    border-color: var(--flare);
  }
  .fee-option > span:first-child {
    display: grid;
    gap: 2px;
  }
  .fee-option small {
    color: var(--muted);
    font-size: var(--fs-xs);
  }
  .fee-option-cost {
    font-size: var(--fs-sm);
    font-variant-numeric: tabular-nums;
  }
  .fee-custom {
    margin-top: var(--space-4);
  }
  .fee-custom label {
    display: grid;
    gap: var(--space-2);
    color: var(--muted);
    font-size: var(--fs-sm);
  }
  .fee-custom-field {
    display: flex;
    align-items: center;
    gap: var(--space-2);
  }
  .fee-custom input {
    flex: 1;
    min-width: 0;
    height: var(--h-control);
    margin: 0;
    font-variant-numeric: tabular-nums;
  }
  .tip-unit {
    color: var(--muted);
    font-size: var(--fs-sm);
  }
  .fee-error {
    margin: var(--space-2) 0 0;
    font-size: var(--fs-sm);
  }
  .fee-done {
    margin-top: var(--space-5);
  }

  /* ---------- Transaction lifecycle ---------- */
  /* One seal shared by the receipt and the wallet tracker. Spinning arc = in flight, arc
     closes + check draws = confirmed, cross = failed. */
  .tx-seal {
    --seal: var(--flare);
    width: 76px;
    height: 76px;
    color: var(--seal);
    transition: color 240ms var(--ease);
  }
  .tx-seal svg {
    width: 100%;
    height: 100%;
    overflow: visible;
    stroke-width: 3;
  }
  .tx-seal-track {
    stroke: var(--line);
  }
  .tx-seal-arc {
    stroke: currentColor;
    stroke-dasharray: 26 100;
    transform-origin: 32px 32px;
    animation: tx-spin 1.1s linear infinite;
    transition:
      stroke-dasharray 520ms var(--ease),
      opacity 200ms;
  }
  .tx-seal-check,
  .tx-seal-cross {
    stroke: currentColor;
    stroke-width: 3.4;
    stroke-dasharray: 100;
    stroke-dashoffset: 100;
  }
  .tx-seal[data-stage='sent'] .tx-seal-arc,
  .tx-seal[data-stage='approval'] .tx-seal-arc {
    stroke-dasharray: 40 100;
    animation-duration: 1.8s;
  }
  .tx-seal[data-stage='approval'] {
    --seal: var(--muted);
  }
  /* In a block: the money has moved (orange check); the ring fills toward finality. */
  .tx-seal[data-stage='included'] .tx-seal-arc {
    stroke-dasharray: var(--p, 72) 100;
    animation: none;
    transform: rotate(-90deg);
  }
  .tx-seal[data-stage='included']:not([style*='--p']) .tx-seal-arc {
    animation: tx-spin 2.6s linear infinite;
  }
  .tx-seal[data-stage='included'] .tx-seal-check {
    animation: tx-draw 360ms 120ms var(--ease) forwards;
  }
  .tx-seal[data-stage='confirmed'],
  .tx-seal[data-stage='finalized'] {
    --seal: var(--green);
    animation: tx-pop 420ms var(--ease);
  }
  .tx-seal[data-stage='confirmed'] .tx-seal-arc,
  .tx-seal[data-stage='finalized'] .tx-seal-arc {
    stroke-dasharray: 100 100;
    animation: none;
    transform: rotate(-90deg);
  }
  .tx-seal[data-stage='confirmed'] .tx-seal-check,
  .tx-seal[data-stage='finalized'] .tx-seal-check {
    animation: tx-draw 360ms 200ms var(--ease) forwards;
  }
  .tx-seal[data-stage='failed'] {
    --seal: var(--danger);
    animation: tx-shake 360ms var(--ease);
  }
  .tx-seal[data-stage='failed'] .tx-seal-arc {
    opacity: 0;
    animation: none;
  }
  .tx-seal[data-stage='failed'] .tx-seal-track {
    stroke: var(--danger);
  }
  .tx-seal[data-stage='failed'] .tx-seal-cross {
    animation: tx-draw 320ms 80ms var(--ease) forwards;
  }
  /* Ended with nothing minted and nothing wrong: a quiet ring, neither a check nor a cross. */
  .tx-seal[data-stage='idle'] {
    --seal: var(--muted);
  }
  .tx-seal[data-stage='idle'] .tx-seal-arc {
    opacity: 0;
    animation: none;
  }
  .tx-seal.small {
    width: 30px;
    height: 30px;
    flex: none;
  }
  .tx-seal.small svg {
    stroke-width: 5;
  }
  /* Receipt and mint session progress in the confirmation window. */
  #tx-result:not([hidden]),
  #mint-session:not([hidden]) {
    display: flex;
    flex-direction: column;
    padding: 0;
  }
  .tx-result-body {
    flex: 1;
    min-height: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: safe center;
    gap: 6px;
    padding: var(--space-6) var(--gutter);
    text-align: center;
    animation: tx-rise 260ms var(--ease);
  }
  .tx-result-body .tx-seal {
    margin-bottom: var(--space-3);
  }
  .tx-result h1 {
    margin: 0;
    overflow-wrap: anywhere;
  }
  .tx-result-amount {
    margin: 2px 0 0;
    font-size: 28px;
    font-weight: 600;
    letter-spacing: -0.8px;
    font-variant-numeric: tabular-nums;
  }
  .tx-result-to,
  .tx-result-detail {
    margin: 0;
    color: var(--muted);
    font-size: var(--fs-sm);
    line-height: 18px;
  }
  .tx-result-detail {
    min-height: 18px;
    max-width: 300px;
  }
  .tx-result-hash {
    margin-top: 10px;
  }
  #tx-result .review-actions #tx-result-done {
    flex: 1.3;
  }
  #tx-result .review-actions #tx-result-explorer {
    flex: 1;
  }
  #mint-session .tx-result-body {
    overflow-x: hidden;
    overflow-y: auto;
    overscroll-behavior: contain;
    scrollbar-width: thin;
    scrollbar-color: var(--line) transparent;
    padding-block: var(--space-5) var(--space-4);
  }
  /* The session reads from the top: the token in its ring, the lots, then the current payment. */
  #mint-session .tx-result-body {
    justify-content: flex-start;
  }
  #mint-session .tx-seal {
    position: relative;
    flex: none;
    width: 88px;
    height: 88px;
    margin-bottom: var(--space-3);
  }
  .seal-mark {
    position: absolute;
    inset: 16px;
    display: grid;
    place-items: center;
    transition:
      opacity 240ms var(--ease),
      transform 240ms var(--ease);
  }
  .seal-mark > .token-mark {
    width: 100%;
    height: 100%;
  }
  /* Once the session ends, its check or cross takes the token's place. */
  .tx-seal:is([data-stage='confirmed'], [data-stage='failed']) .seal-mark {
    opacity: 0;
    transform: scale(0.8);
  }
  .mint-session-token {
    margin: 0 0 2px;
    color: var(--muted);
    font-size: var(--fs-sm);
    font-weight: 550;
  }
  .lot-track {
    display: flex;
    gap: 4px;
    align-self: stretch;
    max-width: 280px;
    width: 100%;
    margin: var(--space-3) auto 0;
  }
  .lot-track > span {
    flex: 1;
    height: 6px;
    border-radius: 3px;
    background: var(--raised);
    transition: background-color 240ms var(--ease);
  }
  .lot-track > span[data-state='included'] {
    background: var(--flare);
  }
  .lot-track > span[data-state='final'] {
    background: var(--green);
  }
  .lot-track > span[data-state='pending'] {
    background: color-mix(in srgb, var(--flare) 45%, var(--raised));
    animation: tx-breathe 1.4s ease-in-out infinite;
  }
  .mint-session-received {
    margin: var(--space-2) 0 0;
    color: var(--green);
    font-size: var(--fs-sm);
    font-weight: 600;
    font-variant-numeric: tabular-nums;
  }
  .session-payment {
    align-self: stretch;
    margin-top: var(--space-4);
    padding: var(--space-3) var(--space-4);
    border: 1px solid var(--line);
    border-radius: var(--radius-md);
    background: var(--card);
    text-align: left;
  }
  .session-payment-head {
    display: flex;
    justify-content: space-between;
    gap: var(--space-2);
    color: var(--muted);
    font-size: var(--fs-sm);
  }
  .session-payment-head strong {
    color: var(--text);
    font-variant-numeric: tabular-nums;
  }
  .session-payment .tx-steps {
    justify-content: space-between;
    margin: var(--space-3) 0 0;
  }
  @media (prefers-reduced-motion: reduce) {
    .lot-track > span[data-state='pending'] {
      animation: none;
    }
  }
  #mint-session .tx-result-amount {
    font-size: var(--fs-lg);
    font-weight: 550;
    letter-spacing: 0;
  }
  #mint-session-rows {
    align-self: stretch;
    margin: 14px 0 var(--space-1);
    text-align: left;
  }
  #mint-session-more {
    align-self: stretch;
    flex-shrink: 0;
    text-align: left;
  }
  #mint-session-more-rows .review-row dt,
  #mint-session-rows .review-row dt {
    flex: none;
  }
  #mint-session-more-rows .review-row dd,
  #mint-session-rows .review-row dd {
    min-width: 0;
    line-height: 1.6;
  }
  #mint-session .tx-result-detail {
    /* Its min-height would let it shrink under the rows; the body scrolls instead. */
    flex-shrink: 0;
    max-width: none;
    text-wrap: pretty;
  }
  #mint-session .review-actions button {
    flex: 1;
  }
  /* Three steps: Sent → In a block → Final. data-step = steps completed. */
  .tx-steps {
    display: flex;
    gap: 6px;
    margin: 18px 0 var(--space-2);
    padding: 0;
    list-style: none;
    color: var(--muted);
    font-size: var(--fs-xs);
  }
  .tx-steps li {
    display: flex;
    align-items: center;
    gap: 6px;
    transition: color 240ms var(--ease);
  }
  .tx-steps li::before {
    content: '';
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--line);
    transition:
      background 240ms var(--ease),
      transform 240ms var(--ease);
  }
  .tx-steps li + li::after {
    content: '';
    order: -1;
    width: 14px;
    height: 1px;
    background: var(--line);
  }
  .tx-steps[data-step='1'] li:nth-child(-n + 1),
  .tx-steps[data-step='2'] li:nth-child(-n + 2),
  .tx-steps[data-step='3'] li {
    color: var(--text);
  }
  .tx-steps[data-step='1'] li:nth-child(-n + 1)::before,
  .tx-steps[data-step='2'] li:nth-child(-n + 2)::before {
    background: var(--flare);
  }
  .tx-steps[data-step='3'] li::before {
    background: var(--green);
  }
  /* The next step breathes while the network works on it. */
  .tx-steps[data-step='0'] li:nth-child(1)::before,
  .tx-steps[data-step='1'] li:nth-child(2)::before,
  .tx-steps[data-step='2'] li:nth-child(3)::before {
    animation: tx-breathe 1.4s ease-in-out infinite;
  }
  /* The tracker floats over the wallet, docked above the bottom navigation. */
  .tx-tracker {
    position: fixed;
    left: var(--gutter);
    right: var(--gutter);
    bottom: calc(var(--h-nav) + var(--space-2));
    z-index: 6;
    display: flex;
    align-items: center;
    gap: var(--space-3);
    max-width: 488px;
    margin-inline: auto;
    padding: 10px var(--space-3);
    border-radius: var(--radius-lg);
    text-align: left;
    box-shadow: 0 10px 30px #000a;
    animation: tx-dock 260ms var(--ease);
  }
  body:not(:has(#wallet:not([hidden]))) .tx-tracker,
  body:has(.flow[open]) .tx-tracker {
    display: none;
  }
  /* Only the end of the scroll area grows, so the last row is never covered. */
  body:has(#tx-tracker:not([hidden])) .wallet-content > [role='tabpanel'] {
    padding-bottom: 84px;
  }
  .tx-tracker-text {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
  }
  .tx-tracker-text strong {
    font-size: var(--fs-md);
    font-weight: 550;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .tx-tracker-text small {
    color: var(--muted);
    font-size: var(--fs-xs);
    font-weight: 400;
  }
  .tx-tracker-steps {
    display: flex;
    gap: 3px;
    flex: none;
  }
  .tx-tracker-steps i {
    width: 12px;
    height: 3px;
    border-radius: 2px;
    background: var(--line);
    transition: background 240ms var(--ease);
  }
  .tx-tracker-steps[data-step='1'] i:nth-child(-n + 1),
  .tx-tracker-steps[data-step='2'] i:nth-child(-n + 2) {
    background: var(--flare);
  }
  .tx-tracker-steps[data-step='3'] i {
    background: var(--green);
  }
  .tx-tracker-steps[data-stage='failed'] i {
    background: var(--danger);
  }

  /* ---------- Dialogs ---------- */
  /* Accounts is a full-height destination with its own header; only the list scrolls. */
  #accounts-dialog {
    position: fixed;
    inset: 0;
    width: 100%;
    height: 100%;
    max-width: none;
    max-height: none;
    margin: 0;
    padding: 0;
    border: 0;
    background: var(--bg);
    color: var(--text);
    overflow: hidden;
  }
  body[data-surface='tab'] #accounts-dialog {
    width: min(420px, 100%);
    height: min(760px, 100%);
    margin: auto;
    border: 1px solid var(--line);
    border-radius: var(--radius-xl);
  }
  #accounts-dialog[open] {
    display: flex;
    flex-direction: column;
  }
  #accounts-dialog::backdrop {
    background: #000a;
  }
  .accounts-heading {
    display: grid;
    grid-template-columns: 40px 1fr 40px;
    align-items: center;
    flex: none;
    height: var(--h-header);
    padding: 0 var(--space-2);
  }
  .accounts-heading h2 {
    margin: 0;
    text-align: center;
    font-size: var(--fs-lg);
  }
  .accounts-heading .icon {
    width: 40px;
    height: 40px;
    color: var(--text);
  }
  .accounts-overview {
    flex: 1;
    min-height: 0;
    display: flex;
    flex-direction: column;
  }
  .accounts-search {
    position: relative;
    flex: none;
    margin: var(--space-1) var(--gutter) var(--space-3);
  }
  .accounts-search > svg {
    position: absolute;
    left: 14px;
    top: 13px;
    width: 18px;
    height: 18px;
    color: var(--muted);
    pointer-events: none;
  }
  #account-search {
    margin: 0;
    padding-left: 42px;
    border-radius: var(--radius-pill);
  }
  .accounts-list-heading {
    flex: none;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 var(--gutter) var(--space-2);
    color: var(--muted);
    font-size: var(--fs-sm);
  }
  #accounts-count {
    font-variant-numeric: tabular-nums;
  }
  .accounts-list {
    flex: 1;
    min-height: 0;
    padding: 0 var(--space-2) var(--space-4);
    overflow: auto;
    overscroll-behavior: contain;
    scrollbar-width: none;
  }
  .account-wallet-heading {
    padding: var(--space-2) var(--space-2) var(--space-1);
    color: var(--muted);
    font-size: var(--fs-sm);
    font-weight: 550;
  }
  .account-option {
    display: flex;
    align-items: center;
    gap: 2px;
    margin-bottom: 2px;
  }
  button.account-choice {
    display: flex;
    align-items: center;
    flex: 1;
    gap: var(--space-3);
    min-width: 0;
    min-height: 64px;
    padding: var(--space-2);
    border: 0;
    border-radius: var(--radius-md);
    text-align: left;
  }
  .account-option-info {
    flex: 1;
    min-width: 0;
  }
  .account-option-name {
    display: flex;
    align-items: center;
    gap: 6px;
    min-width: 0;
  }
  .account-option-info strong {
    display: block;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: var(--fs-md);
    font-weight: 550;
  }
  .account-active {
    flex: none;
    padding: 0 6px;
    border-radius: 6px;
    background: var(--flare-soft);
    color: var(--flare);
    font-size: var(--fs-xs);
    font-weight: 550;
    line-height: 18px;
  }
  .account-option-info small {
    display: inline-block;
    max-width: 100%;
    margin-top: 2px;
    overflow: hidden;
    text-overflow: ellipsis;
    vertical-align: bottom;
    color: var(--muted);
    font-size: var(--fs-sm);
    font-weight: 400;
    line-height: 18px;
  }
  button.account-options {
    flex: none;
    width: var(--h-icon);
    height: var(--h-control);
    padding: 10px;
    border-radius: var(--radius-md);
  }
  .account-menu {
    position: fixed;
    inset: auto;
    width: 196px;
    margin: 0;
    padding: var(--space-1);
    border: 1px solid #383a3e;
    border-radius: var(--radius-md);
    background: #202123;
    color: var(--text);
    box-shadow: 0 8px 24px #0006;
  }
  .account-menu:popover-open {
    display: grid;
    gap: 2px;
  }
  .account-menu-action {
    justify-content: flex-start;
    width: 100%;
    min-height: var(--h-control);
    padding: var(--space-2) 10px;
    border: 0;
    border-radius: var(--radius-sm);
    font-size: var(--fs-sm);
    font-weight: 500;
  }
  .account-menu-action > svg {
    width: 16px;
    height: 16px;
    color: var(--muted);
  }
  .accounts-empty {
    flex: 1;
    padding: var(--space-7) var(--space-5);
    text-align: center;
  }
  .accounts-empty > svg {
    width: 26px;
    height: 26px;
    margin-bottom: var(--space-3);
    color: var(--muted);
  }
  .accounts-empty strong {
    display: block;
    font-size: var(--fs-md);
  }
  .accounts-empty p {
    margin: 6px 0;
    color: var(--muted);
    font-size: var(--fs-sm);
  }
  .accounts-actions {
    flex: none;
    padding: var(--space-3) var(--gutter) var(--space-4);
    border-top: 1px solid var(--line);
  }
  .accounts-actions .wide {
    margin: 0;
  }
  #add-account-hint {
    margin: 6px 0 var(--space-1);
    color: var(--muted);
    font-size: var(--fs-xs);
    text-align: center;
  }
  .accounts-actions .text-button {
    min-height: var(--h-control);
    margin: 0;
  }
  #accounts-dialog .field-hint {
    margin: var(--space-1) 0 0;
    text-align: center;
  }
  #accounts-error:not(:empty) {
    padding: var(--space-2) var(--gutter);
  }
  #accounts-error:empty {
    display: none;
  }
  #account-name-form {
    flex: 1;
    min-height: 0;
    padding: var(--space-3) var(--gutter) var(--space-5);
    overflow: auto;
  }
  .account-name-intro {
    margin: 0 0 var(--space-6);
    color: var(--muted);
    font-size: var(--fs-md);
  }
  #account-name-form .actions {
    margin-top: var(--space-6);
  }
  /* Reset is a bottom sheet over the unlock screen. */
  :is(#reset-dialog, #clear-dialog) {
    position: fixed;
    inset: auto 0 0;
    width: 100%;
    max-width: 440px;
    max-height: calc(100% - 24px);
    margin: auto auto 0;
    padding: var(--space-5) var(--gutter) var(--space-4);
    border: 1px solid var(--line);
    border-bottom: 0;
    border-radius: var(--radius-xl) var(--radius-xl) 0 0;
    background: var(--card);
    color: var(--text);
    overflow-y: auto;
    box-shadow: 0 -16px 48px #0008;
  }
  :is(#reset-dialog, #clear-dialog)::before {
    content: '';
    display: block;
    width: 36px;
    height: 4px;
    margin: -8px auto var(--space-4);
    border-radius: 2px;
    background: var(--line);
  }
  :is(#reset-dialog, #clear-dialog)::backdrop {
    background: #000a;
  }
  :is(#reset-dialog, #clear-dialog) h2 {
    margin: 0 0 var(--space-2);
    font-size: var(--fs-xl);
  }
  :is(#reset-dialog, #clear-dialog) p {
    color: var(--muted);
    font-size: var(--fs-sm);
    line-height: 1.55;
  }
  #reset-dialog .check {
    margin-block: var(--space-4);
  }

  /* ---------- Short and narrow panels ---------- */
  @media (max-height: 560px) {
    .wallet-home {
      padding-top: var(--space-3);
    }
    .balance strong {
      font-size: 34px;
    }
    button.round {
      height: 64px;
    }
    #unlock:not([hidden]) {
      padding-block: var(--space-3);
    }
    .unlock-mark {
      width: 48px;
      height: 48px;
      margin-bottom: var(--space-3);
    }
    #unlock h1 {
      margin-bottom: var(--space-5);
    }
    .setup-flow .intro {
      margin-bottom: var(--space-3);
      font-size: var(--fs-sm);
    }
    .wizard-content {
      padding-top: 0;
    }
    .setup-flow label {
      margin-bottom: var(--space-2);
    }
    .setup-flow .welcome-content h1,
    .setup-flow .choice-content h1 {
      font-size: 28px;
    }
    .setup-flow h1 {
      font-size: 22px;
    }
    .setup-flow .field-hint {
      margin-bottom: var(--space-2);
    }
    .backup-note {
      margin-top: var(--space-3);
      padding: 10px var(--space-3);
    }
    #recovery .check {
      margin-top: var(--space-3);
      padding: 10px var(--space-3);
    }
    .qr-card canvas {
      width: 128px;
      height: 128px;
    }
    .qr-card {
      margin-bottom: var(--space-3);
      padding: 10px;
    }
    .flow-content h1 {
      height: 44px;
    }
    #send-title {
      line-height: 44px;
    }
    .review-content {
      padding-top: var(--space-4);
    }
    .review-amount {
      margin-block: var(--space-4) var(--space-5);
    }
  }
  @media (max-width: 359px) {
    :root {
      --gutter: 14px;
    }
    .points-prefix {
      display: none;
    }
    button.points-badge {
      padding-right: 8px;
    }
    .balance strong {
      font-size: 34px;
    }
    .secret-word {
      gap: 3px;
    }
  }

  /* ---------- Motion ---------- */
  @keyframes spin {
    to {
      transform: rotate(360deg);
    }
  }
  @keyframes shimmer {
    to {
      background-position: -200% 0;
    }
  }
  @keyframes tx-spin {
    from {
      transform: rotate(0deg);
    }
    to {
      transform: rotate(360deg);
    }
  }
  @keyframes tx-draw {
    to {
      stroke-dashoffset: 0;
    }
  }
  @keyframes tx-pop {
    40% {
      transform: scale(1.08);
    }
  }
  @keyframes tx-shake {
    25% {
      transform: translateX(-4px);
    }
    60% {
      transform: translateX(3px);
    }
  }
  @keyframes tx-rise {
    from {
      opacity: 0;
      transform: translateY(8px);
    }
  }
  @keyframes tx-breathe {
    50% {
      background: var(--muted);
      transform: scale(1.35);
    }
  }
  @keyframes tx-dock {
    from {
      transform: translateY(calc(100% + 14px));
    }
  }
  @keyframes mark-draw {
    to {
      stroke-dashoffset: 0;
    }
  }
  @keyframes mark-pop {
    to {
      transform: scale(1);
    }
  }
  @keyframes mark-glow {
    50% {
      filter: drop-shadow(0 0 6px #ff946e99);
    }
  }
  @keyframes mark-forge {
    from {
      stroke-dashoffset: 0;
    }
    to {
      stroke-dashoffset: 0.82;
    }
  }
  @keyframes drawer-in {
    from {
      transform: translateX(-100%);
    }
  }
  @supports (interpolate-size: allow-keywords) and selector(details::details-content) {
    details.setting {
      interpolate-size: allow-keywords;
    }
    details.setting::details-content {
      block-size: 0;
      overflow: clip;
      transition:
        block-size var(--motion-ui) var(--ease),
        content-visibility var(--motion-ui) allow-discrete;
    }
    details.setting[open]::details-content {
      block-size: auto;
    }
  }
  @media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after,
    details.setting::details-content {
      animation: none !important;
      transition: none !important;
      scroll-behavior: auto !important;
    }
    .tx-seal-check,
    .tx-seal-cross {
      animation: none !important;
      stroke-dashoffset: 0;
    }
    .tx-seal[data-stage='sent'] .tx-seal-check,
    .tx-seal[data-stage='approval'] .tx-seal-check,
    .tx-seal[data-stage='signing'] .tx-seal-check,
    .tx-seal:not([data-stage='failed']) .tx-seal-cross,
    .tx-seal[data-stage='failed'] .tx-seal-check,
    .tx-seal[data-stage='idle'] .tx-seal-check {
      stroke-dashoffset: 100;
    }
    .balance-note > .note,
    .balance-note:has(#balance-delta[data-visible]) > .note:not(#balance-delta) {
      transform: none;
    }
    /* Reduced motion: the mark is simply there. */
    .unlock-arc {
      stroke-dashoffset: 0;
    }
    .unlock-square {
      transform: none;
    }
  }
}