/*
 * The Signing Cell's screens (D3), in the FRFR panels' own look: the two blacks (page #0f0f12, blocks #18181b), grey 1 px
 * lines, Hanken Grotesk (vendored, OFL: fonts/OFL.txt), the front door's cyan satin pill and dark fields, the panel's chips.
 * Values are the main app's tokens (packages/ui tokens.css, apps/web shell.css .frfr-sd-*, .frfr-wpop-*, .frfr-fp-*),
 * written out: this sheet is the Cell's own and loads nothing else.
 */
@font-face { font-family: "Hanken Grotesk"; font-style: normal; font-weight: 100 900; font-display: swap; src: url("/c/e9201eddf1d41d0b.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2080-208A, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }

/* [CELL22] the page door's text face (Ubuntu Font Licence 1.0: fonts/UBUNTU-LICENCE.txt), as apps/web vendors it. */
@font-face { font-family: "Ubuntu"; font-style: normal; font-weight: 400; font-display: swap; src: url("/c/dabae363ac0ae6c3.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Ubuntu"; font-style: normal; font-weight: 500; font-display: swap; src: url("/c/428ec293d3b79af1.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Ubuntu"; font-style: normal; font-weight: 700; font-display: swap; src: url("/c/3658a0717e347c1d.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }

:root {
  --cell-page: #0f0f12;
  --cell-block: #18181b;
  --cell-line: #2c2c2f;
  --cell-line-strong: #424245;
  --cell-cell: #202023;
  --cell-text: #f2f3f4;
  --cell-text-2: #b8bec5;
  --cell-muted: #8e969f;
  --frfr-cyan: #00ffff;
  --frfr-cyan-hover: #8affff;
  /* [SIGNUP8-S5] the two tokens the sign-up card's rules read; the door screens (data-cell-look) set the first again, the Cell's own door has only these. */
  --frfr-text-secondary: #b8bec5;
  --frfr-warning: #d7ac55;
  /* 2026-10-31 (owner): fitted to the Create Wallet satin crop so no pill starts dark (the build allows no CSS image). */
  --frfr-satin-pill: linear-gradient(to top right, #0f9afd 0%, #1db0fc 18%, #34cafb 38%, #55e2fb 55%, #5ee4fa 62%, #3fe0fb 80%, #18dafc 100%);
  --cell-sell: #f05d64;
  --cell-warning: #d7ac55;
  --cell-field: #0f1218;
  color-scheme: dark;
}
* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; background: var(--cell-block); color: var(--cell-text); font-family: "Hanken Grotesk", ui-sans-serif, system-ui, sans-serif; font-size: 13px; line-height: 1.35; font-synthesis: none; -webkit-font-smoothing: antialiased; }
body { overflow-x: hidden; }
button, input { font: inherit; color: inherit; }
[hidden] { display: none !important; }

.cell-root { display: block; }
.cell-card { display: flex; flex-direction: column; gap: 12px; width: 400px; padding: 28px 24px 22px; background: var(--cell-block); }
.cell-head { position: relative; display: block; }
.cell-x { position: absolute; top: -14px; right: -10px; display: grid; place-items: center; width: 30px; height: 30px; padding: 0; border: 0; border-radius: 8px; background: transparent; color: var(--cell-muted); cursor: pointer; }
.cell-x:hover { color: var(--cell-text); background: var(--cell-cell); }
.cell-x:focus-visible { outline: 2px solid var(--frfr-cyan); outline-offset: 2px; }

/* The title of what you are looking at: one role and one size (18/600 rule of the front door, 1.7 × 13). */
.cell-title { margin: 0; font-size: 22px; font-weight: 700; line-height: 1.15; letter-spacing: -0.01em; color: var(--frfr-cyan); text-align: center; }
.cell-lead { margin: -4px 0 4px; font-size: 13px; color: var(--cell-muted); text-align: center; }
.cell-note { margin: 0; font-size: 12px; line-height: 1.45; color: var(--cell-muted); }
.cell-note b { color: var(--cell-text); font-weight: 600; }
.cell-left { text-align: left; }
.cell-hint { margin: 0; font-size: 11px; line-height: 1.35; color: var(--cell-muted); text-align: center; }
.cell-hint b { color: var(--cell-text); }
.cell-warn { margin: 0; font-size: 12px; line-height: 1.45; color: var(--cell-warning); }
.cell-muted { color: var(--cell-muted); }
.cell-mono { font-family: ui-monospace, "SFMono-Regular", Consolas, monospace; font-size: 12px; word-break: break-all; }
.cell-foot-note { margin: 6px 0 0; font-size: 11px; color: var(--cell-muted); text-align: center; }
.cell-error { margin: 0; font-size: 12px; line-height: 1.4; color: var(--cell-sell); text-align: center; }

/* The front door's ways in: a row each, the icon in its disc, the name and one line under it. */
.cell-doors { display: grid; gap: 8px; }
.cell-door { display: flex; align-items: center; gap: 12px; width: 100%; padding: 12px 14px; border: 1px solid var(--cell-line); border-radius: 10px; background: var(--cell-page); text-align: left; cursor: pointer; transition: border-color 120ms cubic-bezier(0.2, 0, 0, 1), background 120ms cubic-bezier(0.2, 0, 0, 1); }
.cell-door:hover:not(:disabled) { border-color: var(--cell-line-strong); background: #131316; }
.cell-door[data-primary="true"] { border-color: rgba(0, 255, 255, 0.42); }
.cell-door:focus-visible { outline: 2px solid var(--frfr-cyan); outline-offset: 2px; }
.cell-door-icon { display: grid; flex: none; place-items: center; width: 32px; height: 32px; border-radius: 50%; background: var(--cell-cell); color: var(--frfr-cyan); }
.cell-door-text { display: grid; gap: 2px; min-width: 0; }
.cell-door-name { font-size: 13px; font-weight: 600; color: var(--cell-text); }
.cell-door-sub { font-size: 11px; line-height: 1.35; color: var(--cell-muted); }

/* Fields: the door's dark rounded field (46 px), the eye inside it. */
.cell-field { position: relative; display: flex; }
.cell-input { width: 100%; min-height: 46px; padding: 0 14px; border: 1px solid rgba(255, 255, 255, 0.08); border-radius: 12px; background: var(--cell-field); color: var(--cell-text); font-size: 13px; transition: border-color 120ms cubic-bezier(0.2, 0, 0, 1), box-shadow 120ms cubic-bezier(0.2, 0, 0, 1); }
.cell-field .cell-input { padding-right: 48px; }
.cell-input::placeholder { color: var(--cell-muted); }
.cell-input:hover { border-color: var(--cell-line-strong); }
.cell-input:focus-visible { outline: 0; border-color: rgba(0, 255, 255, 0.55); box-shadow: 0 0 0 3px rgba(0, 255, 255, 0.12); }
.cell-input[type="file"] { padding: 12px 14px; font-size: 12px; color: var(--cell-muted); }
.cell-secret { -webkit-text-security: disc; }
.cell-eye { position: absolute; top: 0; right: 0; bottom: 0; display: grid; place-items: center; width: 44px; padding: 0; border: 0; background: transparent; color: var(--cell-muted); cursor: pointer; }
.cell-eye:hover, .cell-eye[aria-pressed="true"] { color: var(--cell-text); }

/* The wide pill: cyan satin with one soft halo when it can be pressed, a quiet dark pill of the same height when it cannot. */
.cell-pill { display: inline-flex; align-items: center; justify-content: center; gap: 8px; width: 100%; min-height: 46px; padding: 0 16px; border: 0; border-radius: 999px; background: var(--frfr-satin-pill); color: #000; font-size: 13px; font-weight: 600; cursor: pointer; box-shadow: 0 0 22px rgba(0, 190, 255, 0.22); transition: transform 120ms cubic-bezier(0.2, 0, 0, 1), box-shadow 120ms cubic-bezier(0.2, 0, 0, 1), background 120ms cubic-bezier(0.2, 0, 0, 1); }
.cell-pill:hover:not(:disabled) { filter: brightness(1.08); box-shadow: 0 0 22px rgba(0, 190, 255, 0.34); transform: translateY(-1px); }
.cell-pill:active:not(:disabled) { filter: brightness(0.94); }
.cell-pill:disabled { background: #1a1e25; color: rgba(255, 255, 255, 0.36); filter: none; box-shadow: none; cursor: not-allowed; }
.cell-pill:focus-visible { outline: 2px solid var(--frfr-cyan); outline-offset: 3px; }
.cell-wallet-icon { width: 18px; height: 18px; border-radius: 4px; }

/* The panel's chips (Review, Confirm send, Max, Back): 34 px, outlined in the strong grey. */
.cell-foot { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px; }
.cell-foot-end { justify-content: flex-end; }
.cell-foot-stack { flex-direction: column; align-items: stretch; }
.cell-chip { display: inline-flex; align-items: center; justify-content: center; gap: 4px; min-height: 34px; padding: 0 16px; border: 1px solid var(--cell-line-strong); border-radius: 17px; background: transparent; color: var(--cell-text); font-size: 12px; font-weight: 500; white-space: nowrap; cursor: pointer; transition: color 120ms cubic-bezier(0.2, 0, 0, 1), background 120ms cubic-bezier(0.2, 0, 0, 1), border-color 120ms cubic-bezier(0.2, 0, 0, 1); }
.cell-chip:hover:not(:disabled) { background: var(--cell-cell); }
.cell-chip:disabled { opacity: 0.45; cursor: not-allowed; }
.cell-chip:focus-visible { outline: 2px solid var(--frfr-cyan); outline-offset: 2px; }
.cell-chip[data-tone="danger"] { color: var(--cell-sell); border-color: rgba(240, 93, 100, 0.5); }

/* "or Sign out": the muted "or", the white link. */
.cell-or { margin: 2px 0 0; font-size: 13px; color: var(--cell-muted); text-align: center; }
.cell-orlink { padding: 0 0 0 4px; border: 0; background: none; font-weight: 600; color: var(--cell-text); cursor: pointer; }
.cell-orlink:hover { color: var(--frfr-cyan); }
.cell-orlink:focus-visible { outline: 2px solid var(--frfr-cyan); outline-offset: 2px; border-radius: 2px; }

/* Padre's warning card, the acknowledgement, the invite line. */
.cell-card-warn { display: flex; gap: 14px; align-items: center; padding: 16px 18px; border: 1px solid rgba(255, 255, 255, 0.05); border-radius: 14px; background: #12151b; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04); }
.cell-card-warn p { margin: 0; font-size: 12px; line-height: 1.45; color: var(--cell-text); }
.cell-card-warn p + p { margin-top: 10px; }
.cell-warnicon { flex: none; color: #f2c14e; }
.cell-ack { display: flex; align-items: flex-start; gap: 10px; font-size: 12px; line-height: 1.4; color: var(--cell-text); cursor: pointer; }
.cell-ack input { flex: none; width: 18px; height: 18px; margin: 0; accent-color: var(--frfr-cyan); }
.cell-invite { justify-content: center; align-items: center; color: var(--cell-muted); }
.cell-invite b { color: var(--cell-text); font-weight: 600; }

/* Wallet ready / Deposit: the chain chip, the top-up block with its QR, the address that copies. */
.cell-chain-chip { display: inline-flex; align-items: center; gap: 10px; width: 100%; min-height: 44px; padding: 0 16px; border: 1px solid rgba(255, 255, 255, 0.08); border-radius: 12px; background: var(--cell-field); font-size: 13px; font-weight: 500; }
.cell-chain-logo { display: block; flex: none; width: 22px; height: 22px; }
.cell-topup { display: grid; justify-items: center; gap: 12px; padding: 18px 18px 16px; border: 1px solid rgba(255, 255, 255, 0.08); border-radius: 14px; background: var(--cell-field); }
.cell-topup canvas { display: block; padding: 8px; border-radius: 8px; background: #fff; }
.cell-topup-title { margin: 0; font-size: 13px; font-weight: 600; }
.cell-topup-note { margin: 0; font-size: 11px; color: var(--cell-muted); }
.cell-addr { display: inline-flex; align-items: center; justify-content: center; gap: 8px; max-width: 100%; padding: 6px 10px; border: 0; border-radius: 8px; background: none; font-family: ui-monospace, "SFMono-Regular", Consolas, monospace; font-size: 12px; color: var(--cell-muted); cursor: pointer; }
.cell-addr span:first-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cell-addr:hover { color: var(--cell-text); background: rgba(255, 255, 255, 0.04); }

/*
 * [KEYREVEAL] Export private key (Padre's one card, GMGN's red warning): the hold button and its fill (driven frame by frame
 * from the hold's own clock, so it is linear; reduced motion keeps the fill and drops only the release's ease back), the key
 * box, the quiet Close pill, the danger link, and a screen-reader-only hint.
 */
.cell-danger-box { display: flex; gap: 12px; align-items: flex-start; padding: 14px 16px; border: 1px solid rgba(240, 93, 100, 0.45); border-radius: 12px; background: rgba(240, 93, 100, 0.08); }
.cell-danger-box svg { flex: none; margin-top: 1px; color: var(--cell-sell); }
.cell-danger-box p { margin: 0; font-size: 12px; line-height: 1.5; color: var(--cell-text); }
.cell-hold { position: relative; display: flex; align-items: center; justify-content: center; width: 100%; min-height: 46px; padding: 0 16px; overflow: hidden; border: 1px solid rgba(0, 255, 255, 0.42); border-radius: 999px; background: var(--cell-field); color: var(--cell-text); font-size: 13px; font-weight: 600; cursor: pointer; touch-action: none; user-select: none; -webkit-user-select: none; -webkit-touch-callout: none; -webkit-tap-highlight-color: transparent; }
.cell-hold:hover:not(:disabled) { border-color: rgba(0, 255, 255, 0.7); }
.cell-hold:focus-visible { outline: 2px solid var(--frfr-cyan); outline-offset: 3px; }
.cell-hold:disabled { cursor: progress; color: var(--cell-muted); }
.cell-hold-fill { position: absolute; inset: 0; background: linear-gradient(90deg, rgba(0, 120, 253, 0.55), rgba(0, 255, 255, 0.5)); transform: scaleX(0); transform-origin: left center; pointer-events: none; }
.cell-hold:not([data-holding="true"]) .cell-hold-fill { transition: transform 160ms cubic-bezier(0.2, 0, 0, 1); }
.cell-hold-label { position: relative; text-shadow: 0 1px 2px rgba(0, 0, 0, 0.45); }
@media (prefers-reduced-motion: reduce) { .cell-hold-fill, .cell-hold:not([data-holding="true"]) .cell-hold-fill { transition: none; } }
.cell-wallet-line { line-height: 1.5; }
.cell-wallet-addr { font-family: ui-monospace, "SFMono-Regular", Consolas, monospace; font-size: 11px; color: var(--cell-text); word-break: break-all; overflow-wrap: anywhere; user-select: text; -webkit-user-select: text; }
.cell-key-block { display: grid; gap: 8px; padding: 12px 14px; border: 1px solid rgba(255, 255, 255, 0.08); border-radius: 12px; background: var(--cell-field); }
.cell-key-label { margin: 0; font-size: 11px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--cell-muted); }
.cell-key { display: block; font-family: ui-monospace, "SFMono-Regular", Consolas, monospace; font-size: 13px; line-height: 1.5; color: var(--cell-text); user-select: all; -webkit-user-select: all; -webkit-user-drag: none; word-break: break-all; overflow-wrap: anywhere; }
.cell-key-actions { display: flex; gap: 8px; }
.cell-reveal-line:empty { display: none; }
.cell-pill-quiet { border: 1px solid var(--cell-line-strong); background: var(--cell-cell); color: var(--cell-text); box-shadow: none; }
.cell-pill-quiet:hover:not(:disabled) { filter: none; background: #2a2a2e; box-shadow: none; }
.cell-danger-link { align-self: center; padding: 2px 4px; border: 0; background: none; font-size: 12px; color: var(--cell-sell); text-decoration: underline; text-underline-offset: 2px; cursor: pointer; }
.cell-danger-link:hover { color: #ff8a90; }
.cell-danger-link:focus-visible { outline: 2px solid var(--frfr-cyan); outline-offset: 2px; border-radius: 2px; }
.cell-sr { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

/*
 * Withdraw ([WDR], GMGN's two cards in FRFR's look): the From card and the To card (block ground, 1 px grey line, the Deposit card's
 * 14 px radius), the read-only wallet row, the PLS | Any token tabs, Max inside the amount field, the balance row, the quiet
 * "My wallet" link; then the review (the send in a card of the same look, quiet notes, the pill and a text "Edit"). Existing
 * tokens only. The frame is never capped to the window, so the form is kept compact: 523 px with PLS, about 600 with Any token
 * and My wallet, at 400 px wide (the old form was 450; GMGN's layout needs two cards). The fields stay 42 px, the pill 46 px.
 * [WDR2]: every row is drawn from the first paint and nothing reflows on a read, a found wallet or a From switch: 474 px with PLS
 * (one wallet or the picker), 524 with Any token's contract field, 274 for a one-line review (measured in Chromium, 2026-10-17).
 */
.cell-card[data-cell-panel="withdraw"] { gap: 8px; padding: 24px 24px 20px; }
.cell-wcard { display: flex; flex-direction: column; gap: 8px; margin: 0; padding: 12px 14px; border: 1px solid var(--cell-line); border-radius: 14px; background: var(--cell-block); }
.cell-wcard-head { margin: 0; font-size: 14px; font-weight: 600; line-height: 1.2; color: var(--cell-text); }
.cell-wcard .cell-input { min-height: 42px; padding: 0 12px; }
/* A 42-character address shows whole at 400 px: 12 px type, no tracking, 12 px sides. */
.cell-wcard .cell-input[data-cell-withdraw-to], .cell-wcard .cell-input[data-cell-withdraw-token] { font-size: 12px; letter-spacing: 0; }
.cell-wrow { display: flex; align-items: center; min-height: 40px; padding: 0 12px; border-radius: 12px; background: var(--cell-cell); font-size: 13px; font-weight: 600; color: var(--cell-text); font-variant-numeric: tabular-nums; }
.cell-wdiv { height: 1px; background: var(--cell-line); }
.cell-wsplit { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.cell-wlabel { font-size: 12px; font-weight: 600; color: var(--cell-text); }
.cell-coins { display: inline-flex; flex: none; gap: 2px; padding: 3px; border: 1px solid var(--cell-line); border-radius: 9px; background: var(--cell-page); }
.cell-coin { display: inline-flex; align-items: center; justify-content: center; height: 26px; padding: 0 12px; border: 0; border-radius: 6px; background: none; color: var(--cell-muted); font-size: 12px; font-weight: 500; cursor: pointer; transition: color 120ms cubic-bezier(0.2, 0, 0, 1), background 120ms cubic-bezier(0.2, 0, 0, 1); }
.cell-coin:hover { color: var(--cell-text); }
.cell-coin[aria-checked="true"] { background: var(--cell-line-strong); color: var(--cell-text); font-weight: 600; }
.cell-coin:focus-visible { outline: 2px solid var(--frfr-cyan); outline-offset: 1px; }
.cell-wcard .cell-field-max .cell-input { padding-right: 64px; }
.cell-max { position: absolute; top: 0; right: 0; bottom: 0; display: grid; place-items: center; padding: 0 14px; border: 0; border-radius: 0 12px 12px 0; background: transparent; color: var(--frfr-cyan); font-size: 13px; font-weight: 600; cursor: pointer; }
.cell-max:hover { color: var(--frfr-cyan-hover); }
.cell-max:focus-visible { outline: 2px solid var(--frfr-cyan); outline-offset: -2px; }
.cell-balance { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin: 0; font-size: 12px; }
.cell-balance b { font-weight: 600; font-variant-numeric: tabular-nums; color: var(--cell-text); }
/* [WDR2] (owner: nothing jumps): the Balance row is there from the first paint, its value a quiet "—" until the balance is read. */
.cell-balance b.cell-muted { color: var(--cell-muted); }
/* [WDR2]: the C1 line centred above the cards, the title's width. */
.cell-wnote { text-align: center; }
/* [WDR2]: "My wallet" right-aligned in the To heading row, a fixed-height row, so its arrival moves nothing. */
.cell-whead { display: flex; align-items: center; justify-content: space-between; gap: 12px; height: 17px; }
.cell-wlink { padding: 0; border: 0; background: none; font-size: 12px; line-height: 17px; color: var(--cell-muted); cursor: pointer; }
.cell-wlink:hover { color: var(--cell-text); }
.cell-wlink:focus-visible { outline: 2px solid var(--frfr-cyan); outline-offset: 2px; border-radius: 2px; }
/* [WDR2] the From picker (several wallets): the row is a button; its list opens OVER the card (absolute: no reflow, same frame height). */
.cell-wpickwrap { position: relative; }
.cell-wpick { gap: 8px; width: 100%; border: 0; text-align: left; cursor: pointer; }
.cell-wpick::after { content: ""; flex: none; width: 6px; height: 6px; margin: -3px 2px 0 auto; border-right: 1.5px solid var(--cell-muted); border-bottom: 1.5px solid var(--cell-muted); transform: rotate(45deg); }
.cell-wpick:hover, .cell-wpick[aria-expanded="true"] { box-shadow: inset 0 0 0 1px var(--cell-line-strong); }
.cell-wpick:focus-visible { outline: 2px solid var(--frfr-cyan); outline-offset: 2px; }
.cell-wname { overflow: hidden; max-width: 200px; text-overflow: ellipsis; white-space: nowrap; }
.cell-wname + .cell-wshort { font-weight: 500; color: var(--cell-muted); }
.cell-wlist { position: absolute; top: calc(100% + 4px); right: 0; left: 0; z-index: 5; display: grid; gap: 2px; max-height: 196px; overflow-y: auto; padding: 4px; border: 1px solid var(--cell-line-strong); border-radius: 12px; background: var(--cell-page); box-shadow: 0 12px 28px rgba(0, 0, 0, 0.45); }
.cell-wopt { display: flex; align-items: center; gap: 8px; width: 100%; min-height: 36px; padding: 0 10px; border: 0; border-radius: 8px; background: none; text-align: left; font-size: 13px; font-weight: 600; color: var(--cell-text); font-variant-numeric: tabular-nums; cursor: pointer; }
.cell-wopt:hover { background: var(--cell-cell); }
.cell-wopt[aria-selected="true"] { background: var(--cell-line-strong); }
.cell-wopt:focus-visible { outline: 2px solid var(--frfr-cyan); outline-offset: -2px; }
/* The review: the send and the whole destination in one card (the address wraps), the notes quiet under it, "Edit" a text-button. */
.cell-wsend { margin: 0; padding: 12px 14px; border: 1px solid var(--cell-line); border-radius: 14px; background: var(--cell-block); font-size: 13px; line-height: 1.5; color: var(--cell-text-2); overflow-wrap: anywhere; }
.cell-waddr { display: block; margin-top: 4px; font-weight: 500; color: var(--cell-text); word-break: break-all; }
.cell-card[data-cell-panel="withdraw"] .cell-note { overflow-wrap: anywhere; }
.cell-wedit { align-self: center; min-height: 40px; padding: 0 16px; border: 0; background: none; font-size: 13px; font-weight: 600; color: var(--cell-text); cursor: pointer; }
.cell-wedit:hover { color: var(--frfr-cyan); }
.cell-wedit:focus-visible { outline: 2px solid var(--frfr-cyan); outline-offset: 2px; border-radius: 6px; }
/* The hairlined line other screens use (payout, referral, the door's account): unchanged. */
.cell-line { margin: 0; padding: 8px 0; border-top: 1px solid var(--cell-line); border-bottom: 1px solid var(--cell-line); font-size: 12px; line-height: 1.45; color: var(--cell-text-2); overflow-wrap: anywhere; }
.cell-line[data-tone="warning"] { color: var(--cell-muted); }

/*
 * 2026-10-09 ([CELL22], owner's hard rule: "no visual or flow change"): the PAGE DOOR's password steps (apps/web SignInDoor.tsx),
 * drawn here over the page's own form (html[data-cell-look]: start | dialog, each also -dense). The frame is transparent; the
 * page's ground shows through. Rules are the page's own, selector for selector and in the page's order (packages/ui tokens.css,
 * controls.css .frfr-input, apps/web shell.css .frfr-sd-*, then start/start.css), with the page's tokens as custom properties
 * and the same ancestors (`.frfr-start-door` on the START page). Nothing outside the door's steps is copied.
 */
:root[data-cell-look] {
  --frfr-text: #f2f3f4; --frfr-text-secondary: #b8bec5; --frfr-text-muted: #8e969f; --frfr-sell: #f05d64;
  --frfr-line: #2c2c2f; --frfr-border-strong: #424245; --frfr-lane-bg: #18181b; --brand-focus: #00ffff;
  --frfr-font-ui: "Ubuntu", "Rubik", "Inter", ui-sans-serif, system-ui, sans-serif; --frfr-font-action: "Ubuntu", "Rubik", "Inter", ui-sans-serif, system-ui, sans-serif;
  --frfr-font-start: "Hanken Grotesk", "Rubik", "Inter", ui-sans-serif, system-ui, sans-serif;
  --frfr-text-xs: 11px; --frfr-text-sm: 12px; --frfr-text-md: 13px; --frfr-text-lg: 14px; --frfr-text-xl: 16px; --frfr-leading-prose: 1.35;
  --frfr-space-2: 8px; --frfr-space-3: 12px; --frfr-space-5: 16px; --frfr-space-6: 18px; --frfr-space-8: 32px;
  --frfr-radius-lg: 8px; --frfr-radius-round: 999px; --frfr-border-width: 1px; --frfr-control-standard: 36px;
  --frfr-motion-hover: 120ms; --frfr-ease: cubic-bezier(0.2, 0, 0, 1);
  color-scheme: dark;
}
/* tokens.css [data-frfr-density="dense"] (the page's density toggle). */
:root[data-cell-look$="-dense"] { --frfr-space-2: 6px; --frfr-space-3: 8px; --frfr-space-5: 13px; --frfr-space-6: 16px; --frfr-space-8: 22px; --frfr-control-standard: 30px; }
:root[data-cell-look] { background: transparent; color: var(--frfr-text); font-family: var(--frfr-font-ui); font-size: var(--frfr-text-md); line-height: var(--frfr-leading-prose); font-synthesis: none; text-rendering: optimizeLegibility; -webkit-font-smoothing: antialiased; }
:root[data-cell-look] body { background: transparent; color: inherit; font: inherit; overflow: hidden; }
/*
 * [CELL22X] item 6: Chrome draws subpixel (LCD) text only on an opaque ground; the page's text is LCD (Windows ClearType, Linux),
 * a transparent frame's is greyscale. Once the page has placed the frame (ui.place: its viewport and the frame's origin), the
 * frame paints the START page's own ground under itself, in page coordinates, so the ground is the same pixels, now opaque.
 * 2026-10-10 ([SIGNUP2]): that ground is the owner's mockup's now (start.css `.frfr-start`): #000 under two stacked ellipses of
 * rgba(0,42,52) (the glow behind the sign-up column, so it runs on behind the password steps with no seam). `--cell-k` is the page's
 * `--k` (one mockup pixel, 1/1280 of the page width) and `--cell-m` its `--m` (52 % of the page height); each centre is the page's
 * minus the frame's origin. The old ground's bottom dissolve is gone from the page, so it is gone here.
 * [SIGNUP8-S11b] 2026-11-03: the two ellipses are the page's widened ones (310 x 186 at x 1024 and 343 x 265 at x 1032, the same colour stops), changed in start.css and here together.
 */
/* The dialog stays transparent: the page draws its dialog's text greyscale too (measured: an opaque ground here made it LCD). */
:root[data-cell-look^="start"][data-cell-placed] {
  --cell-k: calc(var(--cell-vw) * 0.00078125); --cell-m: calc(var(--cell-vh) * 0.52);
  min-height: 100%;
  background:
    radial-gradient(ellipse calc(310 * var(--cell-k)) calc(186 * var(--cell-k)) at calc(1024 * var(--cell-k) - var(--cell-left)) calc(var(--cell-m) + (193 - 306) * var(--cell-k) - var(--cell-top)),
      rgba(0, 42, 52, 0.993) 0%, rgba(0, 42, 52, 0.954) 10%, rgba(0, 42, 52, 0.888) 20%, rgba(0, 42, 52, 0.805) 30%, rgba(0, 42, 52, 0.71) 40%, rgba(0, 42, 52, 0.605) 50%, rgba(0, 42, 52, 0.491) 60%, rgba(0, 42, 52, 0.37) 70%, rgba(0, 42, 52, 0.246) 80%, rgba(0, 42, 52, 0.119) 90%, rgba(0, 42, 52, 0.057) 95%, rgba(0, 42, 52, 0) 100%) 0 0 / 100vw 100vh no-repeat,
    radial-gradient(ellipse calc(343 * var(--cell-k)) calc(265 * var(--cell-k)) at calc(1032 * var(--cell-k) - var(--cell-left)) calc(var(--cell-m) + (304 - 306) * var(--cell-k) - var(--cell-top)),
      rgba(0, 42, 52, 0.993) 0%, rgba(0, 42, 52, 0.993) 10%, rgba(0, 42, 52, 0.991) 20%, rgba(0, 42, 52, 0.976) 30%, rgba(0, 42, 52, 0.929) 40%, rgba(0, 42, 52, 0.82) 50%, rgba(0, 42, 52, 0.627) 60%, rgba(0, 42, 52, 0.366) 70%, rgba(0, 42, 52, 0.125) 80%, rgba(0, 42, 52, 0.011) 90%, rgba(0, 42, 52, 0.001) 95%, rgba(0, 42, 52, 0) 100%) 0 0 / 100vw 100vh no-repeat,
    #000;
}
/* tokens.css's focus ring, at the page's own weight (:where adds none). */
:where(:root[data-cell-look]) :focus-visible { outline: 1px solid var(--brand-focus); outline-offset: 2px; }
:root[data-cell-look] .cell-card { display: block; width: auto; padding: 0; background: transparent; }
/* The START page's door (start.css .frfr-start: its face and colour; the door phase centres its text). */
:root[data-cell-look^="start"] .cell-card { color: var(--frfr-text); font-family: var(--frfr-font-start); font-synthesis: none; -webkit-font-smoothing: antialiased; text-align: center; }
/* The dialog (shell.css .frfr-sd: the text colour; the face is the page's own). */
:root[data-cell-look^="dialog"] .cell-card { color: var(--frfr-text); }

/* packages/ui controls.css */
.frfr-input {
  min-height: var(--frfr-control-standard);
  padding: 0 var(--frfr-space-3);
  border: var(--frfr-border-width) solid var(--frfr-line);
  border-radius: var(--frfr-radius-lg);
  background: var(--frfr-lane-bg);
  color: var(--frfr-text);
  font-family: var(--frfr-font-ui);
  font-size: var(--frfr-text-md);
  transition: border-color var(--frfr-motion-hover) var(--frfr-ease), background var(--frfr-motion-hover) var(--frfr-ease), box-shadow var(--frfr-motion-hover) var(--frfr-ease);
}
.frfr-input:hover { border-color: var(--frfr-border-strong); }
.frfr-input:focus-visible { outline: none; border-color: var(--brand-focus); box-shadow: 0 0 0 3px rgba(0, 255, 255, 0.14); }
.frfr-input::placeholder { color: var(--frfr-text-muted); }
.frfr-input:disabled { opacity: 0.45; cursor: not-allowed; }

/* apps/web shell.css */
.frfr-sd-title { margin: 0 0 var(--frfr-space-2); font-size: calc(var(--frfr-text-md) * 1.7); font-weight: 700; line-height: 1.15; letter-spacing: -0.01em; color: #00ffff; text-align: center; }
/* 2026-10-10 ([SIGNUP2], owner: the password titles as on the mockup): the password steps' titles are cyan, in both looks (shell.css has the same rule). */
.frfr-sd-form[data-frfr-start-form^="password"] .frfr-sd-title { color: #00ffff; }
.frfr-sd-hint { margin: 0; font-size: var(--frfr-text-xs); line-height: var(--frfr-leading-prose); color: var(--frfr-text-muted); text-align: center; }
.frfr-sd-field { position: relative; display: flex; }
.frfr-sd-field .frfr-input { flex: 1 1 auto; min-height: 46px; padding: 0 48px 0 16px; border-radius: 12px; background: #0f1218; border-color: rgba(255, 255, 255, 0.08); font-size: var(--frfr-text-md); }
.frfr-sd-field .frfr-input:focus-visible { border-color: rgba(0, 255, 255, 0.55); box-shadow: 0 0 0 3px rgba(0, 255, 255, 0.12); outline: 0; }
.frfr-sd-secret { -webkit-text-security: disc; }
.frfr-sd-eye { position: absolute; top: 0; right: 0; bottom: 0; display: grid; place-items: center; width: 44px; padding: 0; border: 0; background: transparent; color: var(--frfr-text-muted); cursor: pointer; }
.frfr-sd-eye:hover, .frfr-sd-eye[aria-pressed="true"] { color: var(--frfr-text); }
.frfr-sd-pill { display: block; width: min(320px, 100%); min-height: 46px; margin: var(--frfr-space-2) auto 0; padding: 0 var(--frfr-space-5); border: 0; border-radius: var(--frfr-radius-round); background: var(--frfr-satin-pill); color: #000; font-family: var(--frfr-font-action); font-size: var(--frfr-text-md); font-weight: 600; cursor: pointer; box-shadow: 0 0 22px rgba(0, 190, 255, 0.22); transition: transform var(--frfr-motion-hover) var(--frfr-ease), box-shadow var(--frfr-motion-hover) var(--frfr-ease), background var(--frfr-motion-hover) var(--frfr-ease); }
.frfr-sd-pill:hover:not(:disabled) { filter: brightness(1.08); box-shadow: 0 0 22px rgba(0, 190, 255, 0.34); transform: translateY(-1px); }
.frfr-sd-pill:active:not(:disabled) { filter: brightness(0.94); transform: translateY(0); }
.frfr-sd-pill:disabled { background: #1a1e25; color: rgba(255, 255, 255, 0.36); filter: none; box-shadow: none; cursor: not-allowed; }
.frfr-sd-pill:focus-visible { outline: 2px solid #00ffff; outline-offset: 3px; }
.frfr-sd-card { display: flex; gap: 14px; align-items: center; margin: 0; padding: 16px 18px; text-align: left; border-radius: 14px; background: #12151b; border: 1px solid rgba(255, 255, 255, 0.05); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04); }
.frfr-sd-card p { margin: 0; font-size: var(--frfr-text-sm); line-height: 1.45; color: var(--frfr-text); }
.frfr-sd-card p + p { margin-top: 10px; }
.frfr-sd-pwexplain { margin: 2px 0 14px; padding: 14px 18px; align-items: flex-start; border-left: 2px solid #00ffff; }
.frfr-sd-pwexplain .frfr-sd-warnicon { margin-top: 1px; }
.frfr-sd-pwexplain p { font-size: var(--frfr-text-md); line-height: 1.5; color: var(--frfr-text-secondary); }
.frfr-sd-pwexplain p:first-child { font-size: var(--frfr-text-lg); line-height: 1.35; color: #fff; }
.frfr-sd-pwexplain p + p { margin-top: 8px; }
.frfr-sd-pwwallet { display: block; margin: 6px 0 0; padding: 7px 10px; border-radius: 8px; background: #0b0d11; border: 1px solid rgba(255, 255, 255, 0.08); font-family: var(--frfr-font-mono, ui-monospace, monospace); font-size: var(--frfr-text-md); word-break: break-all; user-select: all; }
.frfr-sd-pwwallet span { font-weight: 600; color: #00ffff; }
.frfr-sd-pwwallet + p { margin-top: 8px; }
/* 2026-11-03 ([SIGNUP8-S5], owner's final sign-up screens, "version 2"): the explain card of "Create your password" and "Password ready" is ONE grid with ONE text column. 18 px lucide icons (stroke 1.6 = 1.2 px lines, the stem of the 14 px text) hang in the gutter, 12 px gap, every item 12 px apart; card padding 17 px each side incl. its 2 px / 1 px borders (17 top, 19 bottom). Icons sit on the OPTICAL middle of their line (Hanken Grotesk: the mean of the cap-height and x-height middles of the first line = 10.71 px below a 14/20 line's top, 11.24 below the 16/22 title's): 18 px box + margin-top 2 px = centre 11.00 (+0.29 / -0.24). Values are the mockup's (signup8-mocks/final2), in px; cell.css has the same rules. */
.frfr-sd-pwexplain.frfr-sd-pwgrid { margin: 2px 0 14px; padding: 17px 16px 19px 15px; }
.frfr-sd-pwexplain.frfr-sd-pwgrid > .frfr-sd-pwg { flex: 1 1 auto; min-width: 0; display: grid; grid-template-columns: 18px minmax(0, 1fr); column-gap: 12px; row-gap: 12px; align-items: start; }
.frfr-sd-pwic { grid-column: 1; display: block; width: 18px; height: 18px; margin-top: 2px; color: var(--frfr-cyan); }
.frfr-sd-pwic svg { display: block; width: 18px; height: 18px; }
.frfr-sd-pwexplain .frfr-sd-pwg p { grid-column: 2; margin: 0; }
.frfr-sd-pwexplain .frfr-sd-pwg p.frfr-sd-pwt { font-size: 16px; line-height: 22px; font-weight: 700; color: #fff; }
.frfr-sd-pwexplain .frfr-sd-pwg p.frfr-sd-pwx { font-size: 14px; line-height: 20px; font-weight: 400; color: var(--frfr-text-secondary); }
.frfr-sd-pwx b { font-weight: 700; color: #fff; }
.frfr-sd-pwcyan, .frfr-sd-pwexplain .frfr-sd-pwg p.frfr-sd-pwcta b { color: var(--frfr-cyan); }
.frfr-sd-pwexplain .frfr-sd-pwg p.frfr-sd-pwfoot { font-size: 12px; line-height: 16px; font-weight: 500; color: var(--frfr-warning); }
.frfr-sd-pwg .frfr-sd-pwwallet { grid-column: 2; margin: 0; padding: 7px 10px; font-size: 13px; line-height: 18px; text-wrap: balance; }
.frfr-sd-pwrule { grid-column: 2; width: 100%; height: 1px; margin: 0; border: 0; background: rgba(255, 255, 255, 0.07); }
/* The tick row of both steps: 14/20 grey, the box (18 px, on the optical middle of the first line) in the icon column, the words on the text column. (0,3,0) and (0,2,1): .frfr-sd-ack and .frfr-sd-ack input come later in this file. */
.frfr-sd-ack.frfr-sd-pwack.frfr-sd-pwtick { margin: 32px 0 0 17px; gap: 12px; font-size: 14px; line-height: 20px; color: var(--frfr-text-secondary); }
.frfr-sd-ack.frfr-sd-pwtick input { width: 18px; height: 18px; margin: 2px 0 0 0; }
.frfr-sd-acktext { text-wrap: pretty; }
/* The Cell's own door (door.ts): its pill is .cell-pill, so the page's `.frfr-sd-pwack + .frfr-sd-pill` spacing (30 px) is stated for it here. */
.frfr-sd-pwtick + .cell-pill { margin-top: 30px; }
/* The import steps (ProfileWallets) still use the plain tick row: 14px, inset 16px = the fields' text start. (0,2,0): .frfr-sd-ack later in this file and .frfr-start-door .frfr-sd-pill in start.css otherwise win and erase these. */
.frfr-sd-ack.frfr-sd-pwack { margin: 32px 0 0 16px; font-size: var(--frfr-text-lg); }
.frfr-start-door .frfr-sd-pwack + .frfr-sd-pill, .frfr-sd-form .frfr-sd-pwack + .frfr-sd-pill { margin-top: 30px; }
.frfr-sd-pill + .frfr-sd-hint, .frfr-sd-pill ~ .frfr-sd-invite, .frfr-sd-pill ~ .frfr-sd-or { margin-top: 18px; }
.frfr-sd-warnicon { flex: none; color: #f2c14e; }
.frfr-sd-ack { display: flex; align-items: flex-start; gap: 10px; margin: var(--frfr-space-2) 0 0; font-size: var(--frfr-text-sm); line-height: 1.4; color: var(--frfr-text); text-align: left; cursor: pointer; }
.frfr-sd-ack input { flex: none; width: 18px; height: 18px; margin: 1px 0 0; accent-color: #00ffff; }
.frfr-sd-or { margin: var(--frfr-space-3) 0 0; font-size: var(--frfr-text-md); color: var(--frfr-text-muted); text-align: center; }
.frfr-sd-orlink { padding: 0 0 0 4px; border: 0; background: none; font: inherit; font-weight: 600; color: var(--frfr-text); cursor: pointer; }
.frfr-sd-orlink:hover { color: #00ffff; }
.frfr-sd-orlink:focus-visible { outline: 2px solid #00ffff; outline-offset: 2px; border-radius: 2px; }
.frfr-sd-form .frfr-sd-field + .frfr-sd-field { margin-top: 16px; }
.frfr-sd-error { margin: 12px 0 0; padding: 10px 14px; border-radius: 10px; background: color-mix(in srgb, var(--frfr-sell) 12%, transparent); border: 1px solid color-mix(in srgb, var(--frfr-sell) 35%, transparent); font-size: var(--frfr-text-sm); line-height: 1.45; color: var(--frfr-sell); text-align: left; }

/* apps/web start/start.css (the door phase; its placement is the page's, which places this frame) */
.frfr-start-door .frfr-sd-form { width: min(440px, 100%); gap: 12px; }
.frfr-start-door [data-frfr-start-form="password-new"] .frfr-sd-title, .frfr-start-door [data-frfr-start-form="password-ready"] .frfr-sd-title { margin-bottom: 24px; }
.frfr-start-door .frfr-sd-pill { width: 100%; max-width: 440px; margin-top: 6px; }
.frfr-start-door .frfr-sd-or { margin-top: 10px; }
.frfr-ref-input { width: 180px; padding: 4px 8px; font-size: 13px; }