html, body { margin: 0; }
.cq-root { container-type: inline-size; min-height: 100vh; }
.cq-root > .shell { min-height: 100vh; }
.side { position: sticky; top: 0; align-self: flex-start; min-height: 100vh; }
#side-nav { display: flex; flex-direction: column; gap: 18px; }
.view-root { display: contents; }
.view-note { font: var(--t-xs); color: var(--ink-2); }
.label-row { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.st { display: inline-flex; align-items: center; gap: 6px; height: 26px; padding: 0 10px; border-radius: 8px; font: 600 10px/1 var(--f-caps); font-stretch: 118%; letter-spacing: .12em; text-transform: uppercase; white-space: nowrap; }
.st--waiting, .st--queued, .st--pending, .st--recorded { background: var(--surf-2); color: var(--ink-2); box-shadow: inset 0 0 0 1px var(--line-2); }
.st--anchored { background: var(--accent-tint); color: var(--accent); }
.st--final, .st--settled, .st--acked, .st--accepted, .st--valid { background: var(--ok); color: #fff; }
.st--held, .st--disputed, .st--retrying, .st--replaying, .st--provisional, .st--pending-acceptance, .st--receipted { background: var(--warn); color: #fff; }
.st--revoked, .st--error, .st--dead-lettered, .st--refused, .st--locked, .st--invalid { background: var(--bad); color: #fff; }
.st--superseded, .st--unavailable { background: var(--surf-2); color: var(--ink-3); box-shadow: inset 0 0 0 1px var(--line); }
.chain-tag { display: inline-flex; align-items: center; gap: 6px; padding: 2px 8px; border-radius: 6px; font: 500 11px/1.6 var(--f-mono); background: var(--surf-2); box-shadow: inset 0 0 0 1px var(--line); color: var(--ink-2); }
.chain-tag--besu { color: #0E6E8C; }
.chain-tag--base { color: #2050C8; }
.chain-tag--sandbox { color: var(--warn-ink); }
.timeline { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.timeline li { display: grid; grid-template-columns: 54px 92px 1fr; gap: 12px; align-items: baseline; padding: 8px 12px; border-radius: 12px; font: var(--t-s); color: var(--ink-3); }
.timeline li.done { color: var(--ink); }
.timeline li.now { background: var(--accent-tint); color: var(--ink); font-weight: 600; }
.timeline .n { font: 500 12px var(--f-mono); color: var(--accent); }
.timeline .t { font: 400 12px var(--f-mono); color: var(--ink-2); }
.entry-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(240px, 100%), 1fr)); gap: 14px; }
.entry-card { padding: 18px; display: grid; gap: 10px; }
.entry-card .v { font: 400 30px/1 var(--f-mono); letter-spacing: -.02em; }
.wallet-list { display: grid; gap: 10px; }
.wallet-btn { display: flex; align-items: center; gap: 12px; width: 100%; min-height: 58px; padding: 10px 16px; border-radius: 16px; border: 1px solid var(--line-2); background: #fff; cursor: pointer; text-align: left; font: 500 15px/1.3 var(--f-body); color: var(--ink); }
.wallet-btn:hover { border-color: var(--accent); box-shadow: var(--ring); }
.wallet-btn[disabled] { cursor: not-allowed; opacity: .7; }
.wallet-btn img, .wallet-btn .ic { width: 32px; height: 32px; border-radius: 9px; flex: none; background: var(--accent-tint); }
.wallet-btn small { display: block; font: var(--t-xs); color: var(--ink-2); }
textarea.fsn-field { min-height: 220px; padding: 12px 14px; font: 400 12.5px/1.55 var(--f-mono); resize: vertical; align-items: flex-start; }
select.fsn-field { appearance: auto; }
.err-list { margin: 0; padding-left: 18px; display: grid; gap: 6px; font: var(--t-s); }
.err-list code, .m-sm { font: 400 12px var(--f-mono); }
.scope-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 8px; }
.scope-grid label { display: flex; gap: 8px; align-items: center; font: 400 13px var(--f-mono); color: var(--ink); }
.key-secret { padding: 12px 14px; border-radius: 12px; background: var(--deep); color: #EDE8FF; font: 400 12.5px var(--f-mono); overflow-wrap: anywhere; }
.inline-actions { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.refusal { border-left: 4px solid var(--bad); }
.app-key { padding: 10px 0; border-top: 1px solid var(--line); }
.cap-list { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.cap-list code { font: 400 12px var(--f-mono); padding: 2px 8px; border-radius: 6px; background: var(--surf-2); overflow-wrap: anywhere; }
.gap-row td { background: var(--bad-tint); color: var(--bad-ink); }
.proof-ok { color: var(--ok-ink); font-weight: 600; }
.proof-bad { color: var(--bad-ink); font-weight: 600; }
.legend-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(250px, 100%), 1fr)); gap: 12px; }
.legend-grid > div { padding: 14px 16px; display: grid; gap: 6px; }
.test-money { display: inline-flex; align-items: center; gap: 6px; font: 600 10px/1 var(--f-caps); letter-spacing: .12em; text-transform: uppercase; color: var(--warn-ink); background: var(--warn-tint); padding: 6px 9px; border-radius: 7px; }
.acct { display: inline-flex; align-items: center; gap: 8px; }
.acct .m { font-size: 12.5px; }
@container (max-width: 820px) {
  .side { position: static; min-height: 0; flex: 1 1 100%; flex-direction: row; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; padding: 12px 16px; border-right: 0; border-bottom: 1px solid var(--line); }
  .side #side-nav, .side .side__foot { display: none; }
  .content { padding: 22px 16px 40px; }
  .topbar { padding: 10px 16px; }
  .timeline li { grid-template-columns: 40px 1fr; }
  .timeline li .t { grid-column: 2; }
}
@container (min-width: 821px) { .h-only-phone { display: none !important; } }


.wc-qr { width: 220px; height: 220px; border-radius: 12px; background: #fff; padding: 8px; box-sizing: content-box; align-self: flex-start; }
.signin-method { display: grid; gap: 8px; padding-top: 16px; border-top: 1px solid var(--line-2); }
.signin-method .method-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.signin-method .inline-actions .fsn-field { flex: 1 1 220px; min-width: 0; }
.methods { display: grid; gap: 10px; }
.hosted { min-height: 100vh; display: flex; justify-content: center; padding: 32px 18px; box-sizing: border-box; }
.hosted__in { width: 100%; max-width: 520px; min-width: 0; display: grid; gap: 18px; align-content: start; }

.fsn-banner > * { min-width: 0; }
.fsn-banner .m, .fsn-banner .m-sm, .hosted .m, .hosted .m-sm, .hosted dd { overflow-wrap: anywhere; }