:root { color-scheme: light dark; font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; font-size: 16px; line-height: 1.4; letter-spacing: 0; --bg: #f4f6f8; --surface: #ffffff; --text: #18212b; --muted: #596774; --border: #b9c3cc; --blue: #075db3; --blue-hover: #034a91; --green: #147a45; --amber: #9a6500; --red: #b42318; --qr: #101820; }
@media (prefers-color-scheme: dark) { :root { --bg: #151a1f; --surface: #20272e; --text: #edf2f6; --muted: #b0bdc8; --border: #56636f; --blue: #69b5ff; --blue-hover: #a2d0ff; --green: #65d292; --amber: #ffc35b; --red: #ff9189; --qr: #ffffff; } }
* { box-sizing: border-box; }
[hidden] { display: none !important; }
body { margin: 0; background: var(--bg); color: var(--text); }
button, input, select, textarea { font: inherit; letter-spacing: 0; }
button, .file-button { min-height: 2.3rem; border: 1px solid var(--border); border-radius: 4px; background: var(--surface); color: var(--text); padding: .38rem .7rem; cursor: pointer; }
button:hover, .file-button:hover { border-color: var(--blue); } button.primary { background: var(--blue); border-color: var(--blue); color: #fff; } button.primary:hover { background: var(--blue-hover); border-color: var(--blue-hover); } button.quiet { color: var(--red); } button:disabled { cursor: not-allowed; opacity: .55; }
button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible, .file-button:focus-within { outline: 3px solid var(--blue); outline-offset: 2px; }
.app-header { max-width: 1440px; margin: 0 auto; padding: 1rem clamp(1rem, 3vw, 2rem); display: flex; align-items: start; justify-content: space-between; gap: 1.5rem; border-bottom: 1px solid var(--border); }
h1, h2, h3, h4, p { margin: 0; } h1 { font-size: 1.25rem; font-weight: 650; } h2 { font-size: 1rem; font-weight: 650; } h3 { font-size: .9375rem; font-weight: 650; } h4 { font-size: .875rem; font-weight: 650; } .warning { margin-top: .3rem; max-width: 52rem; color: var(--amber); font-size: .875rem; }.header-actions { display: flex; align-items: end; justify-content: end; flex-wrap: wrap; gap: .7rem; }.network-picker { display: grid; gap: .2rem; color: var(--muted); font-size: .75rem; }.network-picker select { min-width: 8.25rem; }.network-note { max-width: 10rem; color: var(--muted); font-size: .75rem; line-height: 1.25; }
.view-tabs, .segmented { display: flex; gap: 0; } .view-tabs button, .segmented button { border-radius: 0; } .view-tabs button:first-child, .segmented button:first-child { border-radius: 4px 0 0 4px; } .view-tabs button:last-child, .segmented button:last-child { border-radius: 0 4px 4px 0; } .view-tabs button + button, .segmented button + button { margin-left: -1px; } [role="tab"][aria-selected="true"] { position: relative; z-index: 1; background: var(--blue); border-color: var(--blue); color: #fff; }
main { max-width: 1440px; margin: 0 auto; padding: 1rem clamp(1rem, 3vw, 2rem) 2rem; }.workspace { display: grid; gap: 1rem; }.render-layout { grid-template-columns: minmax(18rem, .85fr) minmax(20rem, 1.15fr); }.summary { grid-column: 1 / -1; }.scan-layout { grid-template-columns: minmax(20rem, 1.25fr) minmax(20rem, .75fr); }
.tool { min-width: 0; border: 1px solid var(--border); border-radius: 6px; background: var(--surface); padding: 1rem; }.tool-heading { display: flex; justify-content: space-between; align-items: center; gap: .75rem; margin-bottom: .8rem; }.tool > label { display: block; margin-bottom: .35rem; font-size: .875rem; color: var(--muted); } textarea { display: block; resize: vertical; width: 100%; min-height: 10rem; padding: .6rem; border: 1px solid var(--border); border-radius: 4px; background: var(--bg); color: var(--text); font-family: ui-monospace, SFMono-Regular, Consolas, monospace; font-size: .8125rem; }
.input-row, .options-row, .command-row, .camera-controls, .frame-controls, .status-line { display: flex; align-items: center; flex-wrap: wrap; gap: .65rem; }.input-row { margin-top: .7rem; }.command-row { margin-top: 1rem; }.options-row { margin-top: .8rem; }.options-row label, .camera-controls label, .frame-controls label { display: flex; align-items: center; gap: .4rem; color: var(--muted); font-size: .875rem; }.options-row input, .frame-controls input { width: 6rem; } input, select { min-height: 2.3rem; border: 1px solid var(--border); border-radius: 4px; background: var(--bg); color: var(--text); padding: .35rem .45rem; }.file-button input { position: absolute; width: 1px; height: 1px; opacity: 0; overflow: hidden; }
fieldset { padding: 0; border: 0; margin: 1rem 0 0; } legend { margin-bottom: .4rem; color: var(--muted); font-size: .875rem; }.hint, .status, .progress-label { color: var(--muted); font-size: .8125rem; }.qr-stage { width: min(100%, 42rem); aspect-ratio: 1; margin: 0 auto; display: grid; place-items: center; background: #fff; border: 1px solid var(--border); overflow: hidden; }.qr-stage canvas { display: block; width: 100%; height: 100%; image-rendering: pixelated; }.frame-controls { justify-content: center; margin-top: .8rem; }.frame-controls output { min-width: 7rem; text-align: center; font-variant-numeric: tabular-nums; }
.transaction-status { margin-bottom: .8rem; padding: .55rem .65rem; border-left: 4px solid var(--amber); background: var(--bg); font-size: .875rem; font-weight: 650; }.transaction-status[data-status="finalized"] { border-color: var(--green); }.transaction-status[data-status="signed-unfinalized"] { border-color: var(--blue); }.transaction-status[data-status="partially-finalized"] { border-color: var(--amber); }.summary-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(8.5rem, 1fr)); gap: 0; border: 1px solid var(--border); border-radius: 4px; overflow: hidden; }.summary-grid div { min-width: 0; padding: .65rem; border-right: 1px solid var(--border); border-bottom: 1px solid var(--border); }.summary-grid dt { color: var(--muted); font-size: .75rem; }.summary-grid dd { margin: .2rem 0 0; overflow-wrap: anywhere; font-variant-numeric: tabular-nums; }.summary-section { margin-top: 1rem; }.section-heading { margin-bottom: .55rem; }.transaction-flow { margin-top: 1rem; }.flow-group { min-width: 0; }.flow-connector { position: relative; height: 1.1rem; margin-left: 1.1rem; border-left: 1px solid var(--border); }.flow-connector::after { content: ""; position: absolute; left: -4px; bottom: 0; width: 6px; height: 6px; border-right: 1px solid var(--border); border-bottom: 1px solid var(--border); transform: rotate(45deg); }.transaction-row { min-width: 0; border: 1px solid var(--border); border-radius: 4px; padding: .7rem; }.transaction-row + .transaction-row { margin-top: .55rem; }.transaction-row h4 { margin-bottom: .55rem; }.transaction-fields { display: grid; grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr)); gap: .55rem .8rem; }.transaction-field { min-width: 0; }.transaction-field.wide { grid-column: 1 / -1; }.field-label { display: block; margin-bottom: .1rem; color: var(--muted); font-size: .75rem; }.transaction-value { display: block; min-width: 0; overflow-wrap: anywhere; font-size: .8125rem; }.monospace { font-family: ui-monospace, SFMono-Regular, Consolas, monospace; }.script-details { margin-top: .6rem; font-size: .8125rem; }.script-details summary { cursor: pointer; color: var(--blue); }.script-list { display: grid; gap: .4rem; margin: .55rem 0 0; }.script-list div { min-width: 0; }.script-list code { display: block; max-height: 7rem; overflow: auto; overflow-wrap: anywhere; white-space: pre-wrap; color: var(--text); }.input-signatures { margin: .55rem 0 0; padding-left: 1.2rem; font-size: .875rem; }.signature-note, .raw-note { margin-top: .55rem; color: var(--muted); font-size: .8125rem; }.raw-transaction { margin-top: 1rem; }.raw-hex { min-height: 7rem; margin-top: .65rem; resize: vertical; white-space: pre; overflow-wrap: normal; }.raw-meta { margin-top: .55rem; }.empty { color: var(--muted); font-size: .875rem; }.camera-stage { position: relative; aspect-ratio: 16 / 10; background: #080b0e; overflow: hidden; border: 1px solid var(--border); }.camera-stage video, .camera-stage canvas { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; }.camera-controls { margin-top: .8rem; }.camera-controls select { max-width: 18rem; }.badge { display: inline-block; border: 1px solid var(--border); border-radius: 999px; padding: .15rem .5rem; font-size: .75rem; font-weight: 650; }.badge[data-state="active"] { color: var(--blue); border-color: var(--blue); }.badge[data-state="complete"] { color: var(--green); border-color: var(--green); }.badge[data-state="error"] { color: var(--red); border-color: var(--red); } progress { width: 100%; height: .8rem; margin-top: 1rem; accent-color: var(--blue); }.progress-label { margin-top: .3rem; }.raw-result { white-space: pre-wrap; overflow-wrap: anywhere; max-height: 14rem; overflow: auto; margin: .9rem 0 0; padding: .65rem; border: 1px solid var(--border); border-radius: 4px; background: var(--bg); font-family: ui-monospace, SFMono-Regular, Consolas, monospace; font-size: .75rem; }
.transaction-status strong, .transaction-status span { display: block; }.transaction-status span { margin-top: .15rem; color: var(--muted); font-weight: 400; }.transaction-row { border-right: 0; border-left: 0; border-radius: 0; }
@media (max-width: 760px) { .app-header { display: block; }.header-actions { justify-content: start; margin-top: .9rem; }.view-tabs { margin-top: .2rem; }.render-layout, .scan-layout { grid-template-columns: minmax(0, 1fr); }.summary { grid-column: auto; }.camera-controls label:first-child { width: 100%; }.camera-controls select { max-width: 100%; flex: 1; }.tool { padding: .8rem; }.frame-controls { justify-content: flex-start; }.summary-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }.transaction-fields { grid-template-columns: minmax(0, 1fr); }.network-note { max-width: 13rem; } }