/* Hallmark · macrostructure: Workbench · tone: sealed, precise · anchor hue: siworld scarlet
 * nav: N3 side rail · footer: Ft2 inline rule · existing brand preserved
 * Hallmark · pre-emit critique: P4 H4 E4 S5 R5 V4 */
@import url('./tokens.css');
* { box-sizing: border-box; }
html, body { margin: 0; min-width: 0; overflow-x: clip; }
body { background: var(--color-canvas); color: var(--color-text); font: var(--text-body)/1.6 var(--font-body); -webkit-font-smoothing: antialiased; }
button, input, textarea, select { font: inherit; }
button, a { -webkit-tap-highlight-color: var(--color-accent-surface); }
button, a, summary { touch-action: manipulation; }
button { cursor: pointer; }
a { color: inherit; text-decoration: none; }
button, a:not(.vault-link) { white-space: nowrap; }
button:disabled { opacity: .4; cursor: not-allowed; }
button:active:not(:disabled) { transform: translateY(1px); }
:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 4px; }
[hidden] { display: none !important; }
h1, h2, h3, p { margin: 0; }
h1, h2, h3 { font-style: normal; line-height: 1.15; text-wrap: balance; overflow-wrap: anywhere; min-width: 0; }
p { text-wrap: pretty; }
.skip { position: fixed; top: -80px; left: 16px; z-index: 10; background: var(--color-accent); padding: 12px; }
.skip:focus { top: 12px; }
.app-header { height: 80px; padding: 0 var(--layout-gutter); display: flex; align-items: center; gap: 32px; border-bottom: 1px solid var(--color-rule); }
.app-header img { display: block; }
.edition { font: var(--text-small) var(--font-mono); color: var(--color-muted); }
.edition span { margin: 0 12px; color: var(--color-dim); }
.header-link { margin-left: auto; font-size: var(--text-small); color: var(--color-secondary); min-height: 44px; display: flex; align-items: center; gap: 16px; }
.header-link:hover, .inline-link:hover { color: var(--color-accent-text); }
.workbench { width: min(var(--layout-max), 100% - 2 * var(--layout-gutter)); margin-inline: auto; display: grid; grid-template-columns: 216px minmax(0, 1fr); min-height: calc(100svh - 80px); }
.rail { border-right: 1px solid var(--color-rule); padding: 40px 16px 24px; display: flex; flex-direction: column; gap: 20px; }
.rail-label, .eyebrow { font: var(--text-caption)/1.5 var(--font-mono); letter-spacing: .08em; color: var(--color-muted); }
.rail-label { padding-left: 16px; }
.rail nav { display: grid; gap: 4px; }
.rail nav a { padding: 12px 16px; display: flex; align-items: center; gap: 12px; border-radius: var(--radius-control); color: var(--color-muted); border-left: 2px solid var(--color-canvas); }
.rail nav a:hover { background: var(--color-surface); color: var(--color-text); }
.rail nav a[aria-current] { border-left-color: var(--color-accent); background: var(--color-surface); color: var(--color-text); }
.nav-symbol { font: 20px var(--font-mono); width: 20px; color: var(--color-accent-text); }
.rail-bottom { display: flex; gap: 12px; align-items: baseline; margin-top: auto; padding: 40px 16px 0; font-size: var(--text-small); color: var(--color-secondary); }
.rail-bottom small { display: block; color: var(--color-dim); line-height: 1.5; margin-top: 8px; }
.status-dot { display: inline-block; background: var(--color-dim); width: 6px; height: 6px; flex-shrink: 0; border-radius: 50%; }
main { width: 100%; padding: 24px 0 0 40px; min-width: 0; }
.preview-note { display: flex; align-items: baseline; gap: 16px; padding: 12px 0 20px; border-bottom: 1px solid var(--color-rule-soft); color: var(--color-muted); font-size: var(--text-small); }
.small-tag { font: 10px/1.6 var(--font-mono); letter-spacing: .06em; white-space: nowrap; color: var(--color-accent-text); }
.message { color: var(--color-secondary); font-size: var(--text-small); min-height: 32px; padding-top: 8px; overflow-wrap: anywhere; }
.message.error, .form-error, .error { color: var(--color-accent-text); }
.page-heading { display: flex; justify-content: space-between; align-items: flex-end; gap: 24px; padding: 24px 0 40px; }
h1 { font-size: clamp(32px, 4vw, 48px); font-weight: 500; letter-spacing: -.04em; }
.lede { margin-top: 12px; color: var(--color-muted); font-size: 16px; }
.button, .text-button, .icon-button { display: inline-flex; justify-content: center; align-items: center; gap: 24px; min-height: 44px; border: 1px solid var(--color-rule); border-radius: var(--radius-control); color: var(--color-text); background: var(--color-canvas); padding: 10px 16px; font-size: var(--text-small); font-weight: 500; transition: background var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out); }
form[aria-busy=true] #seal-button::before { content: ''; width: 12px; height: 12px; flex-shrink: 0; border: 1px solid currentColor; border-right-color: var(--color-action); border-radius: 50%; animation: encryption-pending 900ms linear infinite; }
@keyframes encryption-pending { to { transform: rotate(360deg); } }
.button:hover:not(:disabled) { background: var(--color-hover); border-color: var(--color-dim); }
.primary { background: var(--color-action); border-color: var(--color-action); color: var(--color-on-accent); }
.primary:hover:not(:disabled) { background: var(--color-action-hover); border-color: var(--color-action-hover); }
.text-button { background: none; border-color: var(--color-canvas); color: var(--color-muted); padding: 8px; gap: 8px; }
.text-button:hover:not(:disabled) { color: var(--color-text); background: var(--color-hover); }
.danger { color: var(--color-accent-text); }
.icon-button { min-width: 44px; border: 0; padding: 0; background: none; color: var(--color-muted); font-size: 24px; }
.icon-button:hover { background: var(--color-hover); color: var(--color-text); }
.vault-layout { display: grid; grid-template-columns: minmax(0, 1fr) 252px; gap: 40px; }
.vault-collection { border-top: 1px solid var(--color-rule); min-width: 0; }
.collection-bar { display: flex; justify-content: space-between; align-items: center; padding: 12px 0; border-bottom: 1px solid var(--color-rule-soft); }
.collection-bar h2 { font-size: var(--text-body); font-weight: 500; }
.count { color: var(--color-muted); font: var(--text-small) var(--font-mono); margin-left: 8px; }
.empty-vault { padding: 0 20px 48px; text-align: center; }
.empty-vault h3 { font-size: 20px; font-weight: 500; letter-spacing: -.02em; margin: 28px 0 12px; }
.empty-vault p { font-size: var(--text-small); color: var(--color-muted); margin-bottom: 24px; }
.collection-footer { border-top: 1px solid var(--color-rule-soft); display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 8px 0; font: 10px var(--font-mono); color: var(--color-muted); }
.recovery-panel { padding-top: 16px; border-top: 1px solid var(--color-rule); }
.recovery-panel h2 { font-size: var(--text-title); font-weight: 500; letter-spacing: -.03em; margin: 16px 0; }
.recovery-panel > p:not(.eyebrow) { color: var(--color-muted); font-size: var(--text-small); margin-bottom: 20px; }
.recovery-panel .button { width: 100%; justify-content: space-between; }
.roadmap-note { border-top: 1px solid var(--color-rule-soft); margin-top: 32px; padding-top: 24px; }
.roadmap-note p { color: var(--color-muted); font-size: var(--text-small); margin-top: 12px; }
.privacy-details { border-top: 1px solid var(--color-rule); margin-top: 48px; padding: 8px 0; color: var(--color-muted); font-size: var(--text-small); }
.privacy-details summary { cursor: pointer; padding: 12px 0; color: var(--color-secondary); }
.privacy-details p { max-width: 760px; margin-bottom: 16px; }
.foot-line { margin-top: 64px; padding: 20px 0; border-top: 1px solid var(--color-rule); display: flex; gap: 16px; justify-content: space-between; font: 10px/1.6 var(--font-mono); color: var(--color-muted); }
.foot-line a:hover { color: var(--color-text); }
.vault-entry { border-bottom: 1px solid var(--color-rule-soft); padding: 24px 0; }
.entry-top { display: flex; align-items: center; gap: 16px; }
.entry-icon { height: 44px; width: 40px; border: 1px solid var(--color-rule); border-top: 2px solid var(--color-accent); display: grid; place-items: center; color: var(--color-accent-text); font: 12px var(--font-mono); flex-shrink: 0; }
.entry-info { min-width: 0; }
.entry-info h3 { font-size: var(--text-body); font-weight: 500; overflow-wrap: anywhere; }
.entry-info p { color: var(--color-muted); font: 10px/1.6 var(--font-mono); margin-top: 4px; }
.redacted { display: inline-block; width: 100px; height: 8px; background: var(--color-rule); vertical-align: middle; }
.entry-actions { display: flex; gap: 8px; flex-wrap: wrap; padding-top: 12px; }
.secret-content { margin-top: 20px; padding: 16px; background: var(--color-input); border: 1px solid var(--color-rule); white-space: pre-wrap; overflow-wrap: anywhere; font: var(--text-small)/1.7 var(--font-mono); user-select: text; }
.privacy-notice { margin-top: 32px; padding: 20px 0; border-top: 1px solid var(--color-rule); font-size: var(--text-small); }
.privacy-notice p:first-child { color: var(--color-secondary); margin-bottom: 8px; }
.privacy-notice p:last-child, .private-summary { color: var(--color-muted); font-size: var(--text-small); }
.private-summary { padding-top: 12px; }
.private-controls { display: flex; flex-wrap: wrap; gap: 4px 12px; margin-top: 4px; }
.private-controls .text-button { padding-left: 0; white-space: normal; text-align: left; }
.embedded .workbench, .embedded dialog { display: none !important; }
#frame-warning { margin: 24px; }
.unlocked-label { color: var(--color-accent-text); font: 10px var(--font-mono); }
dialog { width: min(520px, calc(100% - 32px)); max-height: calc(100svh - 32px); padding: 24px 32px 32px; color: var(--color-text); background: var(--color-overlay); border: 1px solid var(--color-rule); border-radius: var(--radius-dialog); overflow-y: auto; }
dialog::backdrop { background: var(--color-backdrop); }
body:has(dialog[open]) { overflow-y: hidden; }
.dialog-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 12px; }
dialog h2 { font-size: 28px; letter-spacing: -.03em; font-weight: 500; margin-bottom: 12px; }
dialog > p, dialog form > p.supporting { color: var(--color-muted); font-size: var(--text-small); }
label { display: block; margin: 20px 0 8px; font-size: var(--text-small); font-weight: 500; }
label > span:not(.check span) { float: right; color: var(--color-muted); font-weight: 400; font: 10px/1.9 var(--font-mono); }
input:not([type=checkbox]), select, textarea { width: 100%; padding: 12px; background: var(--color-input); color: var(--color-text); border: 1px solid var(--color-rule); border-radius: var(--radius-control); min-height: 44px; }
input:hover, textarea:hover, select:hover { border-color: var(--color-dim); }
input:focus, textarea:focus, select:focus { outline: 2px solid var(--color-focus); outline-offset: 2px; }
textarea { resize: vertical; min-height: 88px; font-family: var(--font-mono); font-size: var(--text-small); }
input::placeholder, textarea::placeholder { color: var(--color-dim); }
.field-help { color: var(--color-muted); font-size: 11px; line-height: 1.6; margin-top: 8px; }
.vault-fee-note { border-block: 1px solid var(--color-rule); margin-top: 24px; padding-block: 16px; }
.vault-fee-note h3 { font-size: var(--text-small); margin-bottom: 8px; }
.vault-fee-note > p:not(.field-help) { font-size: var(--text-small); line-height: 1.6; }
.check { display: flex; align-items: flex-start; gap: 12px; font-weight: 400; color: var(--color-secondary); cursor: pointer; }
.check input { accent-color: var(--color-accent); min-width: 18px; height: 18px; margin: 2px 0; }
.form-error { font-size: var(--text-small); margin-top: 16px; overflow-wrap: anywhere; min-height: 1lh; }
.dialog-actions { display: flex; justify-content: flex-end; gap: 12px; margin-top: 24px; }
.full { width: 100%; margin-top: 16px; }
.wallet-surface { background: var(--color-surface); border: 1px solid var(--color-rule); padding: 32px; }
.wallet-surface > h2, .local-wallet-name { font-size: 28px; font-weight: 500; letter-spacing: -.03em; }
.local-wallet-name { margin: 24px 0 16px; }
.wallet-steps { list-style: none; margin: 32px 0; padding: 0; display: grid; gap: 24px; }
.wallet-steps li { display: flex; gap: 20px; }
.wallet-steps li > span { font: var(--text-small)/1.6 var(--font-mono); color: var(--color-accent-text); }
.wallet-steps h3 { font-size: var(--text-body); font-weight: 500; margin-bottom: 6px; }
.wallet-steps p { color: var(--color-muted); font-size: var(--text-small); }
.wallet-setup-dialog { width: min(640px, calc(100% - 32px)); }
.recovery-sheet { padding: 24px 0; margin: 24px 0 0; border-block: 1px solid var(--color-rule); }
.recovery-actions { display: flex; flex-wrap: wrap; gap: 12px; }
.recovery-sheet .private-summary { padding: 0 0 20px; }
.recovery-words { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px 24px; list-style-position: inside; margin: 0 0 24px; padding: 0; font: var(--text-small)/1.8 var(--font-mono); }
.recovery-words li::marker { color: var(--color-dim); font-size: 10px; }
.restore-methods { display: grid; gap: 16px; margin-top: 24px; }
.restore-methods .button { justify-content: space-between; white-space: normal; text-align: left; }
#local-wallet-details { margin-top: 24px; border-top: 1px solid var(--color-rule); padding-top: 16px; }
.balance-top { display: flex; justify-content: space-between; gap: 16px; }
.balance { font-size: clamp(36px, 6vw, 64px); letter-spacing: -.04em; line-height: 1.2; margin: 24px 0 8px; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.balance > span:last-child { color: var(--color-muted); font-size: 24px; }
.supporting { color: var(--color-muted); font-size: var(--text-small); }
.button-row { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 32px; }
.integration-note, .developer-section { padding: 32px 0; max-width: 760px; }
.integration-note h2, .developer-section h2 { font-size: var(--text-title); font-weight: 500; margin: 12px 0 16px; }
.integration-note p, .developer-section p { color: var(--color-muted); margin-bottom: 16px; }
.inline-link { color: var(--color-secondary); display: inline-flex; align-items: center; min-height: 44px; font-size: var(--text-small); }
.developer-section + .developer-section { border-top: 1px solid var(--color-rule); }
pre { padding: 20px; background: var(--color-surface); border: 1px solid var(--color-rule); white-space: pre-wrap; overflow-wrap: anywhere; font: var(--text-small)/1.8 var(--font-mono); }
.sealed-dialog { text-align: left; }
.sealed-dialog h2 { font-size: 28px; }
.backup-checklist { border-block: 1px solid var(--color-rule); margin: 24px 0 16px; padding: 12px 0; font-size: var(--text-small); }
.backup-checklist p { padding: 8px 0; display: flex; gap: 12px; }
.backup-checklist span { color: var(--color-accent-text); font-family: var(--font-mono); }
.parcel-scene { display: grid; justify-items: center; padding: 44px 0 28px; margin: 0 0 24px; border-bottom: 1px solid var(--color-rule); }
.parcel { position: relative; width: 164px; height: 112px; perspective: 600px; margin-right: 28px; }
.parcel::before, .parcel::after { content: ''; position: absolute; border: 1px solid var(--color-accent); background: var(--color-surface); }
.parcel::before { left: 164px; top: 16px; width: 28px; height: 96px; transform: skewY(-30deg); transform-origin: left top; }
.parcel::after { left: 14px; top: 0; width: 164px; height: 16px; transform: skewX(-60deg); }
.parcel-body { position: absolute; inset: 16px 0 0; background: var(--color-surface); border: 1px solid var(--color-accent); }
.parcel-paper { position: absolute; width: 108px; height: 76px; top: -12px; left: 28px; background: var(--color-secondary); z-index: 1; padding: 20px; opacity: 0; }
.parcel-paper i { display: block; height: 4px; background: var(--color-dim); margin-bottom: 8px; }
.parcel-flap { position: absolute; width: 83px; top: 16px; bottom: 0; background: var(--color-surface); border: 1px solid var(--color-accent); z-index: 2; backface-visibility: hidden; }
.parcel-flap.left { left: 0; transform-origin: left center; }
.parcel-flap.right { right: 0; transform-origin: right center; }
.parcel-lid { position: absolute; top: 16px; left: 0; width: 164px; height: 36px; background: var(--color-surface); border: 1px solid var(--color-accent); z-index: 3; transform-origin: center top; backface-visibility: hidden; }
.parcel-stamp { position: absolute; width: 36px; height: 98px; top: 15px; left: 64px; background: var(--color-accent); color: var(--color-on-accent); font: 16px/1 var(--font-mono); text-align: center; padding-top: 32px; z-index: 4; border: 1px solid var(--color-accent-hover); }
.parcel-stamp span { display: block; font-size: 6px; letter-spacing: .08em; margin-top: 8px; }
.parcel-caption { color: var(--color-muted); font: 9px var(--font-mono); letter-spacing: .1em; margin-top: 24px; }
.vault-entry-animation .parcel-scene { padding: 36px 0 20px; margin: 0; border: 0; }
.vault-entry-animation { --parcel-wait: 600ms; }
.vault-entry-animation + #vault-list:not(:empty) { border-top: 1px solid var(--color-rule-soft); }
.animate-parcel .parcel-paper { animation: pack-paper 650ms var(--parcel-wait, 0ms) var(--ease-out) both; }
.animate-parcel .parcel-flap.left { animation: fold-left 450ms calc(450ms + var(--parcel-wait, 0ms)) var(--ease-out) both; }
.animate-parcel .parcel-flap.right { animation: fold-right 450ms calc(650ms + var(--parcel-wait, 0ms)) var(--ease-out) both; }
.animate-parcel .parcel-lid { animation: close-lid 400ms calc(1050ms + var(--parcel-wait, 0ms)) var(--ease-out) both; }
.animate-parcel .parcel-stamp { animation: seal-package 350ms calc(1450ms + var(--parcel-wait, 0ms)) var(--ease-out) both; }
@keyframes pack-paper { from { transform: translateY(-28px); opacity: 0; } 25%, 60% { opacity: 1; } to { transform: translateY(36px); opacity: 0; } }
@keyframes fold-left { from { transform: rotateY(-115deg); } to { transform: rotateY(0); } }
@keyframes fold-right { from { transform: rotateY(115deg); } to { transform: rotateY(0); } }
@keyframes close-lid { from { transform: rotateX(110deg); opacity: 0; } 20% { opacity: 1; } to { transform: rotateX(0); opacity: 1; } }
@keyframes seal-package { from { transform: translateY(-8px) scale(.95); opacity: 0; } to { transform: translateY(0) scale(1); opacity: 1; } }
@media (max-width: 1100px) { main { padding-inline: 32px 0; } .workbench { grid-template-columns: 184px minmax(0, 1fr); } .rail { padding-inline: 8px; } .vault-layout { grid-template-columns: minmax(0, 1fr); gap: 32px; } .recovery-panel { max-width: none; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 0 32px; } .recovery-panel .eyebrow, .recovery-panel h2, .recovery-panel > p, .recovery-panel .button { grid-column: 1; } .recovery-panel .roadmap-note { grid-column: 2; grid-row: 1 / 6; margin: 0; padding: 0; border: 0; } }
@media (max-width: 768px) { .app-header { height: 72px; gap: 20px; } .edition { display: none; } .header-link { font-size: 11px; gap: 8px; } .workbench { display: block; min-height: calc(100svh - 72px); } .rail { padding: 8px 0; border-right: 0; border-bottom: 1px solid var(--color-rule); } .rail-label, .rail-bottom { display: none; } .rail nav { display: flex; justify-content: space-between; gap: 8px; } .rail nav a { padding: 10px 8px; gap: 8px; border-left: 0; border-bottom: 2px solid var(--color-canvas); font-size: var(--text-small); } .rail nav a[aria-current] { border-bottom-color: var(--color-accent); } .nav-symbol { font-size: 16px; width: 16px; } main { padding: 16px 0 0; } .page-heading { align-items: flex-start; flex-direction: column; padding: 20px 0 32px; } .page-heading > .button { align-self: flex-start; } .preview-note { display: block; } .preview-note p { margin-top: 8px; } h1 { font-size: 36px; } .privacy-details { margin-top: 32px; } .foot-line { margin-top: 40px; } }
@media (max-width: 480px) { .recovery-panel { display: block; } .recovery-panel .roadmap-note { margin-top: 24px; padding-top: 24px; border-top: 1px solid var(--color-rule); } .rail nav a { gap: 4px; } .rail nav { gap: 4px; } .collection-footer { align-items: flex-start; flex-direction: column; gap: 0; padding-top: 12px; } .collection-footer .text-button { padding-left: 0; } .empty-vault { padding: 0 0 32px; } dialog { padding: 16px 20px 24px; } .dialog-actions { gap: 8px; } .dialog-actions .button { padding-inline: 12px; gap: 12px; } .foot-line { flex-direction: column; gap: 8px; } .wallet-surface { padding: 24px 20px; } .balance-top { flex-direction: column; gap: 8px; } .entry-actions { gap: 4px; } .entry-actions .text-button { padding: 8px; } label > span:not(.check span) { float: none; display: block; margin-top: 4px; } }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation: none !important; transition: none !important; } .parcel-paper { opacity: 0; } button:active:not(:disabled) { transform: none; } }
@media print {
  body > * { display: none !important; }
  body::after { content: 'SI Wallet / SI Vault — private content is excluded from printing.'; color: black; }
}
@media (max-width: 480px) { .recovery-words { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px 16px; } .wallet-setup-dialog .dialog-actions { flex-wrap: wrap; } }

/* The account uses the existing centered workbench and restrained SI tokens. */
.wallet-destination { margin-top: 28px; padding-block: 24px; border-block: 1px solid var(--color-rule); }
.short-address { display: block; overflow-wrap: anywhere; word-break: break-word; font: var(--text-small)/1.8 var(--font-mono); margin-block: 12px; user-select: text; }
.wallet-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 20px; }
.account-balance { padding-block: 24px; }
.account-balance .balance { margin: 12px 0 16px; }
.balance-breakdown { display: flex; flex-wrap: wrap; gap: 12px 32px; color: var(--color-muted); font-size: var(--text-small); }
.balance-breakdown p { margin: 0; }
.balance-breakdown span { color: var(--color-text); font-variant-numeric: tabular-nums; }
.legacy-address { margin-top: 32px; color: var(--color-muted); font-size: var(--text-small); }
.legacy-address summary { cursor: pointer; }
.wallet-activity { margin-top: 32px; }
.wallet-activity h3 { font-size: var(--text-body); font-weight: 500; }
.activity-item { display: grid; grid-template-columns: minmax(0,1fr) auto; gap: 8px 16px; padding: 20px 0; border-bottom: 1px solid var(--color-rule); }
.activity-item p { margin: 0; }
.activity-item .activity-id { grid-column: 1 / -1; font: 10px/1.6 var(--font-mono); color: var(--color-muted); overflow-wrap: anywhere; }
.activity-item .activity-amount { text-align: right; font-variant-numeric: tabular-nums; }
.activity-item .activity-status { color: var(--color-muted); font-size: var(--text-small); margin-top: 6px; }
.activity-retry { margin-top: 12px; }
.receive-qr { width: 216px; max-width: 100%; margin: 24px auto; padding: 12px; background: white; }
.receive-qr svg { display: block; width: 100%; height: auto; }
.payment-review { margin: 24px 0; }
.payment-review dt { color: var(--color-muted); font-size: var(--text-small); margin-top: 20px; }
.payment-review dd { margin: 8px 0; }

.skip:not(:focus) { clip-path: inset(50%); width: 1px; height: 1px; overflow: hidden; padding: 0; }
.account-balance .balance { overflow-wrap: anywhere; font-variant-numeric: tabular-nums; }