:root {
  color-scheme: light;
  --bg: #F4F5F9;
  --surface: #FFFFFF;
  --text: #171922;
  --muted: #666B7C;
  --border: #E3E5EF;
  --purple: #5B4BE0;
  --purple-dark: #4435C7;
  --purple-soft: #EEEBFE;
  --yellow: #B87708;
  --yellow-soft: #FBEDD3;
  --success: #147A58;
  --success-soft: #E3F5EE;
  --error: #B4233B;
  --error-soft: #FCE8EC;
  --shadow: 0 12px 34px rgba(23,25,34,.075);
  --radius: 18px;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

* { box-sizing: border-box; }
.sr-only { position: absolute !important; width: 1px !important; height: 1px !important; padding: 0 !important; margin: -1px !important; overflow: hidden !important; clip: rect(0, 0, 0, 0) !important; white-space: nowrap !important; border: 0 !important; }
html { scroll-behavior: smooth; }
body { margin: 0; min-height: 100vh; background: var(--bg); color: var(--text); }
button, select, input { font: inherit; }
button, a, select { -webkit-tap-highlight-color: transparent; }
button:focus-visible, a:focus-visible, select:focus-visible, input:focus-visible, summary:focus-visible { outline: 3px solid rgba(91,75,224,.28); outline-offset: 3px; }
[hidden] { display: none !important; }
.skip-link { position: fixed; top: 8px; left: 8px; z-index: 100; padding: 10px 14px; background: var(--text); color: white; border-radius: 8px; transform: translateY(-150%); }
.skip-link:focus { transform: none; }
.page-wrap { width: min(1240px, calc(100% - 40px)); margin: 0 auto; }
.topbar { position: sticky; top: 0; z-index: 20; display: grid; grid-template-columns: auto 1fr auto; align-items: center; min-height: 72px; padding: 10px max(20px, calc((100vw - 1240px) / 2)); gap: 24px; background: rgba(255,255,255,.96); border-bottom: 1px solid var(--border); backdrop-filter: blur(16px); }
.brand { display: flex; align-items: center; gap: 10px; color: var(--text); text-decoration: none; }
.brand-mark { display: grid; place-items: center; width: 38px; height: 38px; border-radius: 12px; background: var(--purple); color: white; font-weight: 900; }
.brand strong, .brand small { display: block; line-height: 1.1; }
.brand small { margin-top: 3px; color: var(--muted); font-size: .72rem; }
.protocol-nav { display: flex; justify-content: center; gap: 5px; }
.protocol-nav a { padding: 9px 11px; color: var(--muted); font-size: .84rem; font-weight: 700; text-decoration: none; border-radius: 9px; }
.protocol-nav a:hover, .protocol-nav a.active { color: var(--purple); background: var(--purple-soft); }
.identity-chip { display: flex; align-items: center; gap: 8px; max-width: 190px; padding: 8px 10px; border: 1px solid var(--border); background: var(--surface); border-radius: 999px; color: var(--muted); font: 600 .75rem ui-monospace, SFMono-Regular, Menlo, monospace; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.status-dot { flex: none; width: 8px; height: 8px; border-radius: 50%; background: #9BA0B0; }
.identity-chip.ready .status-dot { background: var(--purple); box-shadow: 0 0 0 3px var(--purple-soft); }
.chooser { padding-top: 76px; padding-bottom: 80px; }
.hero-copy { max-width: 760px; }
.eyebrow { margin: 0 0 9px; color: var(--purple); font-size: .74rem; line-height: 1.2; font-weight: 850; letter-spacing: .1em; text-transform: uppercase; }
h1, h2, h3, p { margin-top: 0; }
h1 { margin-bottom: 16px; font-size: clamp(2.1rem, 4vw, 4rem); line-height: 1.02; letter-spacing: -.05em; }
h2 { margin-bottom: 8px; font-size: 1.25rem; letter-spacing: -.025em; }
h3 { margin-bottom: 6px; font-size: .98rem; }
.hero-copy > p:last-child, .subhead { max-width: 720px; color: var(--muted); font-size: 1.05rem; line-height: 1.65; }
.protocol-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; margin-top: 42px; }
.protocol-card { position: relative; min-height: 272px; display: flex; flex-direction: column; padding: 22px; background: var(--surface); color: var(--text); border: 1px solid var(--border); border-radius: var(--radius); text-decoration: none; box-shadow: 0 4px 18px rgba(23,25,34,.035); transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease; }
.protocol-card:hover { transform: translateY(-3px); border-color: #C8C3F4; box-shadow: var(--shadow); }
.protocol-icon { display: grid; place-items: center; width: 44px; height: 44px; margin-bottom: 30px; border-radius: 14px; background: var(--purple-soft); color: var(--purple); font-weight: 900; }
.protocol-card p { color: var(--muted); font-size: .88rem; line-height: 1.55; }
.protocol-card footer { display: flex; align-items: center; justify-content: space-between; margin-top: auto; color: var(--purple); font-size: .8rem; font-weight: 800; }
.completion { color: var(--success); }
.walkthrough-note { display: flex; align-items: flex-start; gap: 14px; margin-top: 20px; padding: 17px 20px; background: var(--yellow-soft); border: 1px solid #EDD7A8; border-radius: 14px; color: #644613; }
.walkthrough-note p { margin: 4px 0 0; font-size: .84rem; line-height: 1.5; }
.context-badge { display: inline-flex; align-items: center; flex: none; padding: 4px 7px; color: var(--yellow); background: var(--yellow-soft); border: 1px solid #E7CC94; border-radius: 6px; font: 800 .62rem ui-monospace, SFMono-Regular, Menlo, monospace; letter-spacing: .08em; }
.workspace { padding-top: 42px; padding-bottom: 80px; }
.workspace-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 24px; }
.workspace-head h1 { margin-bottom: 10px; font-size: clamp(2rem, 4vw, 3.4rem); }
.back-link { display: inline-block; margin-bottom: 26px; color: var(--purple); font-size: .82rem; font-weight: 750; text-decoration: none; }
.head-actions, .button-row { display: flex; flex-wrap: wrap; gap: 9px; }
.button { min-height: 42px; padding: 10px 15px; border: 1px solid transparent; border-radius: 10px; cursor: pointer; font-weight: 780; font-size: .84rem; transition: background .15s ease, transform .15s ease; }
.button:hover:not(:disabled) { transform: translateY(-1px); }
.button:disabled { opacity: .48; cursor: not-allowed; }
.button-primary { color: white; background: var(--purple); }
.button-primary:hover:not(:disabled) { background: var(--purple-dark); }
.button-auditor { color: #6B4708; background: var(--yellow-soft); border-color: #E7CC94; }
.button-ghost { color: var(--text); background: white; border-color: var(--border); }
.button-small { min-height: 34px; padding: 7px 10px; font-size: .74rem; }
.danger-text { color: var(--error); }
.progress { display: grid; grid-template-columns: repeat(5, 1fr); gap: 8px; padding: 0; margin: 34px 0 18px; list-style: none; }
.progress li { position: relative; min-height: 68px; padding: 12px 10px 10px 42px; background: #ECEEF4; border: 1px solid transparent; border-radius: 11px; color: var(--muted); font-size: .73rem; font-weight: 750; }
.progress-number { position: absolute; left: 11px; top: 13px; display: grid; place-items: center; width: 23px; height: 23px; border-radius: 50%; background: white; border: 1px solid var(--border); font-size: .7rem; }
.progress li.active { color: var(--purple); background: var(--purple-soft); border-color: #D4CFF8; }
.progress li.complete { color: var(--success); background: var(--success-soft); }
.progress li.active .progress-number { color: white; background: var(--purple); border-color: var(--purple); }
.progress li.complete .progress-number { color: white; background: var(--success); border-color: var(--success); }
.progress li span:last-child { display: block; margin-top: 3px; font-weight: 550; font-size: .66rem; opacity: .82; }
.workspace-grid { display: grid; grid-template-columns: minmax(0, 1.65fr) minmax(285px, .75fr); gap: 16px; align-items: stretch; }
.panel { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: 0 4px 20px rgba(23,25,34,.035); }
.stage-panel { min-height: 430px; padding: 26px; }
.activity-panel { padding: 20px; }
.panel-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 14px; margin-bottom: 18px; }
.panel-copy { color: var(--muted); line-height: 1.6; font-size: .9rem; }
.stage-hero { display: flex; align-items: flex-start; justify-content: space-between; gap: 24px; padding-bottom: 22px; border-bottom: 1px solid var(--border); }
.stage-copy { min-width: 0; max-width: 660px; }
.stage-context { display: flex; align-items: stretch; gap: 9px; flex: none; }
.actor-box { display: flex; align-items: center; min-width: 190px; padding: 8px 11px; gap: 9px; color: var(--purple-dark); background: var(--purple-soft); border: 1px solid #D4CFF8; border-radius: 12px; }
.actor-box .actor-symbol { display: grid; place-items: center; flex: none; width: 31px; height: 31px; color: white; background: var(--purple); border-radius: 9px; font-size: .68rem; font-weight: 900; }
.actor-box small, .actor-box strong { display: block; }
.actor-box small { margin-bottom: 3px; color: var(--muted); font-size: .56rem; line-height: 1; font-weight: 850; letter-spacing: .08em; text-transform: uppercase; }
.actor-box strong { font-size: .75rem; line-height: 1.2; }
.actor-auditor { color: #6B4708; background: var(--yellow-soft); border-color: #E7CC94; }
.actor-auditor .actor-symbol { background: var(--yellow); }
.actor-system { color: #0D6447; background: var(--success-soft); border-color: #BFE5D6; }
.actor-system .actor-symbol { background: var(--success); }
.stage-hero .stage-number { display: grid; place-items: center; flex: none; width: 54px; height: 54px; color: white; background: var(--purple); border-radius: 17px; font-size: 1.2rem; font-weight: 850; }
.stage-hero:has(.actor-auditor) .stage-number { background: var(--yellow); }
.stage-hero:has(.actor-system) .stage-number { background: var(--success); }
.stage-body { padding-top: 22px; }
.key-value, code, .mono { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; }
.key-value { display: block; width: 100%; padding: 11px 12px; overflow: hidden; color: #414658; background: #F7F7FA; border: 1px solid var(--border); border-radius: 9px; font-size: .75rem; text-overflow: ellipsis; white-space: nowrap; }
.detail-grid { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 10px; margin: 16px 0 20px; }
.detail-card { padding: 14px; background: #FAFAFC; border: 1px solid var(--border); border-radius: 11px; }
.detail-card label, .field label { display: block; margin-bottom: 7px; color: var(--muted); font-size: .69rem; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; }
.detail-card strong { font-size: .83rem; }
.deployment-summary > strong { font-size: .9rem; }
.deployment-summary p { margin: 7px 0; color: var(--muted); font-size: .82rem; line-height: 1.6; }
.deployment-summary > small { color: var(--muted); font-size: .74rem; }
.contract-card { position: relative; padding: 0; min-width: 0; }
.contract-card.deployed { border-color: var(--purple); background: var(--purple-soft); }
.contract-help .contract-type { margin: 6px 0 0; }
.deployment-progress { margin-top: 14px; color: var(--purple); font-size: .8rem; font-weight: 700; }
.deployment-initialization, .deployment-receipts { margin: 16px 0; padding: 14px; border: 1px solid var(--border); border-radius: 11px; }
.deployment-initialization summary, .deployment-receipts summary { cursor: pointer; font-size: .85rem; font-weight: 700; }
.deployment-initialization ol { margin: 14px 0 0; padding-left: 24px; }
.deployment-initialization li { padding: 6px 0; font-size: .72rem; overflow-wrap: anywhere; }
.deployment-initialization li.complete { color: var(--purple); }
.deployment-initialization li span { margin-left: 8px; }
.deployment-receipts table { margin-top: 14px; font-size: .73rem; }
.deployment-receipts td small { display: block; color: var(--muted); }
.contract-help { display: flex; align-items: center; justify-content: space-between; gap: 10px; width: 100%; height: 100%; padding: 14px; border: 0; border-radius: 11px; background: transparent; color: var(--text); text-align: left; cursor: help; }
.contract-help small { display: block; margin-bottom: 7px; color: var(--muted); font-size: .69rem; overflow-wrap: anywhere; }
.contract-help strong { overflow-wrap: anywhere; }
.contract-info { display: grid; place-items: center; flex: 0 0 20px; height: 20px; border: 1px solid var(--border); border-radius: 50%; color: var(--purple); font-size: .72rem; font-weight: 700; }
.contract-tooltip { display: none; position: absolute; z-index: 20; top: calc(100% - 1px); left: 0; width: 100%; padding: 13px 15px; border: 1px solid var(--border); border-radius: 10px; background: white; color: var(--text); box-shadow: 0 8px 24px rgba(23,25,34,.13); font-size: .78rem; line-height: 1.6; }
.contract-card:not(.tooltip-dismissed):is(:hover, :focus-within, .tooltip-pinned) { z-index: 21; border-color: var(--purple); }
.contract-card:not(.tooltip-dismissed):is(:hover, :focus-within, .tooltip-pinned) .contract-tooltip { display: block; }

.activity-list { display: grid; gap: 10px; max-height: 355px; overflow: auto; }
.activity-empty { padding: 24px 8px; color: var(--muted); text-align: center; font-size: .82rem; }
.activity-item { position: relative; padding: 11px 10px 11px 31px; border-bottom: 1px solid var(--border); }
.activity-item::before { content: ""; position: absolute; left: 8px; top: 16px; width: 8px; height: 8px; background: var(--purple); border-radius: 50%; box-shadow: 0 0 0 4px var(--purple-soft); }
.activity-item.audit::before { background: var(--yellow); box-shadow: 0 0 0 4px var(--yellow-soft); }
.activity-item strong { display: block; margin-bottom: 4px; font-size: .77rem; }
.activity-item p { margin: 0; color: var(--muted); font: .69rem/1.45 ui-monospace, SFMono-Regular, Menlo, monospace; word-break: break-all; }
.registry { display: grid; gap: 8px; }
.registry-row { display: grid; grid-template-columns: 32px 1fr 150px auto; align-items: center; gap: 12px; padding: 10px 12px; border: 1px solid var(--border); border-radius: 11px; }
.registry-row.done { background: #FAFCFB; }
.avatar { display: grid; place-items: center; width: 30px; height: 30px; color: var(--purple); background: var(--purple-soft); border-radius: 50%; font-size: .68rem; font-weight: 850; }
.party-meta strong { display: block; font-size: .82rem; }
.party-meta span { color: var(--muted); font: .65rem ui-monospace, SFMono-Regular, Menlo, monospace; }
select, input { width: 100%; min-height: 39px; padding: 8px 10px; color: var(--text); background: white; border: 1px solid #CDD0DC; border-radius: 9px; }
.policy-badge { display: inline-flex; width: fit-content; padding: 5px 8px; border-radius: 7px; color: var(--yellow); background: var(--yellow-soft); font-size: .69rem; font-weight: 800; }
.policy-badge.selective { color: var(--purple); background: var(--purple-soft); }
.registration-flow { display: grid; gap: 14px; }
.registration-process { display: grid; grid-template-columns: 1fr auto 1fr; align-items: stretch; gap: 10px; }
.process-step { display: grid; grid-template-columns: 34px 1fr auto; align-items: center; gap: 10px; padding: 12px; color: var(--muted); background: #F8F8FB; border: 1px solid var(--border); border-radius: 12px; }
.process-step > span { display: grid; place-items: center; width: 34px; height: 34px; color: white; background: #A4A8B5; border-radius: 10px; font-weight: 900; }
.process-step strong, .process-step small { display: block; }
.process-step strong { margin-bottom: 3px; color: var(--text); font-size: .76rem; }
.process-step small { font-size: .65rem; line-height: 1.4; }
.process-step small code { color: inherit; font-size: inherit; }
.process-step > b { color: var(--muted); font-size: .68rem; white-space: nowrap; }
.process-step.active { color: var(--purple-dark); background: var(--purple-soft); border-color: #D4CFF8; }
.process-step.active > span { background: var(--purple); box-shadow: 0 0 0 4px rgba(91,75,224,.12); }
.process-step.auditor-step.active { color: #6B4708; background: var(--yellow-soft); border-color: #E7CC94; }
.process-step.auditor-step.active > span { background: var(--yellow); box-shadow: 0 0 0 4px rgba(184,119,8,.12); }
.process-step.complete { color: #0D6447; background: var(--success-soft); border-color: #BFE5D6; }
.process-step.complete > span { background: var(--success); }
.process-step.complete > b { color: var(--success); }
.process-connector { align-self: center; color: #A4A8B5; font-size: 1.15rem; font-weight: 900; }
.registration-group { display: grid; gap: 8px; }
.registration-label { display: flex; align-items: center; justify-content: space-between; padding: 0 2px; color: var(--muted); font-size: .7rem; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; }
.registration-label strong { color: var(--success); font-size: .68rem; }
.registry-table-wrap { overflow-x: auto; background: white; border: 1px solid var(--border); border-radius: 13px; }
.registry-table { width: 100%; min-width: 790px; border-collapse: collapse; table-layout: fixed; }
.registry-table th { padding: 10px 12px; color: var(--muted); background: #F7F7FA; border-bottom: 1px solid var(--border); text-align: left; font-size: .62rem; font-weight: 850; letter-spacing: .06em; text-transform: uppercase; }
.registry-table th:first-child { width: 20%; }
.registry-table th:nth-child(2) { width: 23%; }
.registry-table th:nth-child(3) { width: 25%; }
.registry-table th:nth-child(4) { width: 14%; }
.registry-table th:last-child { width: 18%; }
.registry-table td { padding: 11px 12px; border-bottom: 1px solid var(--border); vertical-align: middle; }
.registry-table tbody tr:last-child td { border-bottom: 0; }
.registry-table tbody tr:hover { background: #FBFBFD; }
.registry-party { display: flex; align-items: center; gap: 9px; min-width: 0; }
.registry-party strong, .registry-party small { display: block; }
.registry-party strong { overflow: hidden; font-size: .76rem; text-overflow: ellipsis; white-space: nowrap; }
.registry-party small { margin-top: 2px; color: var(--purple); font-size: .62rem; font-weight: 800; }
.registry-key { min-width: 0; }
.registry-key summary { overflow: hidden; color: #4A5062; cursor: pointer; font: .65rem/1.4 ui-monospace, SFMono-Regular, Menlo, monospace; text-overflow: ellipsis; white-space: nowrap; }
.registry-key summary::-webkit-details-marker { display: none; }
.registry-key summary::after { content: " ↗"; color: var(--purple); font-family: inherit; }
.registry-key[open] summary { margin-bottom: 7px; color: var(--purple); }
.registry-key code { display: block; padding: 8px; color: var(--purple-dark); background: var(--purple-soft); border-radius: 7px; font-size: .6rem; line-height: 1.45; overflow-wrap: anywhere; }
.registry-status { display: inline-flex; color: var(--muted); font-size: .68rem; font-weight: 800; white-space: nowrap; }
.registry-status.registered { color: var(--success); }
.registry-status.pending { color: var(--yellow); }
.registration-gate { display: flex; align-items: center; justify-content: space-between; gap: 22px; padding: 17px 18px; background: var(--yellow-soft); border: 1px solid #E7CC94; border-radius: 13px; }
.registration-gate.ready { background: var(--purple-soft); border-color: #D4CFF8; }
.registration-gate h3, .registration-gate p { margin-bottom: 0; }
.registration-gate .eyebrow { margin-bottom: 5px; color: var(--yellow); }
.registration-gate.ready .eyebrow { color: var(--purple); }
.registration-gate p:last-child { margin-top: 6px; color: var(--muted); font-size: .76rem; line-height: 1.5; }
.registration-gate .button { flex: none; }
.other-parties { padding-top: 5px; border-top: 1px solid var(--border); }
.regulator-row { display: flex; align-items: center; justify-content: space-between; gap: 14px; margin: 12px 0 16px; padding: 11px 12px; background: var(--purple-soft); border: 1px solid #D4CFF8; border-radius: 11px; }
.regulator-row > div { display: flex; align-items: center; gap: 10px; min-width: 0; }
.regulator-row strong, .regulator-row .mono { display: block; }
.regulator-row strong { margin-bottom: 3px; font-size: .77rem; }
.regulator-row .mono { max-width: 280px; overflow: hidden; color: var(--muted); font-size: .66rem; text-overflow: ellipsis; white-space: nowrap; }
.key-ceremony { position: relative; }
.ceremony-progress { display: grid; grid-template-columns: auto 1fr auto 1fr auto 1fr auto; align-items: center; gap: 8px; margin-bottom: 18px; color: #999EAC; font-size: .62rem; font-weight: 800; letter-spacing: .025em; text-transform: uppercase; }
.ceremony-progress i { height: 1px; background: var(--border); }
.ceremony-progress span.active { color: var(--purple); }
.ceremony-progress span.done { color: var(--success); }
.ceremony-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.ceremony-card { padding: 16px; overflow: hidden; background: #FAFAFC; border: 1px solid var(--border); border-radius: 14px; }
.ceremony-card header { display: flex; align-items: center; gap: 11px; padding-bottom: 13px; border-bottom: 1px solid var(--border); }
.ceremony-card header h3, .ceremony-card header p { margin: 0; }
.ceremony-icon { display: grid; place-items: center; flex: none; width: 34px; height: 34px; color: var(--purple); background: var(--purple-soft); border-radius: 10px; font-weight: 900; }
.view-card .ceremony-icon { color: var(--yellow); background: var(--yellow-soft); }
.key-output { margin-top: 13px; opacity: .48; transform: translateY(2px); }
.key-output.is-ready { opacity: 1; transform: none; animation: key-reveal .42s ease both; }
.key-output label { display: block; margin-bottom: 6px; color: var(--muted); font: 800 .65rem ui-monospace, SFMono-Regular, Menlo, monospace; letter-spacing: .04em; text-transform: uppercase; }
.key-output small { display: block; margin-top: 6px; color: var(--muted); font-size: .66rem; line-height: 1.45; }
.secret-output.is-ready .key-value { color: #704A08; background: var(--yellow-soft); border-color: #E7CC94; }
.public-output.is-ready .key-value { color: var(--purple-dark); background: var(--purple-soft); border-color: #D4CFF8; }
.operation-lane { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 7px; margin: 13px 0 2px; color: #969BAA; }
.operation-lane code { padding: 5px 7px; background: white; border: 1px solid var(--border); border-radius: 7px; font-size: .65rem; }
.operation-arrow { position: relative; display: flex; align-items: center; justify-content: center; height: 24px; overflow: hidden; font-size: .7rem; }
.operation-arrow::before { content: ""; position: absolute; z-index: 0; width: 100%; height: 1px; background: #C8CBD6; }
.operation-arrow b { position: relative; z-index: 1; padding: 2px 5px; color: inherit; background: #FAFAFC; font-size: .6rem; }
.operation-lane.is-complete { color: var(--purple); }
.operation-lane.is-complete .operation-arrow::before { background: var(--purple); transform-origin: left; animation: derive-line .7s ease both; }
.ceremony-footer { display: flex; align-items: center; justify-content: space-between; gap: 18px; margin-top: 16px; padding: 13px 14px; background: white; border: 1px solid var(--border); border-radius: 11px; }
.ceremony-footer p { margin: 0; color: var(--muted); font-size: .75rem; line-height: 1.45; }
.ceremony-footer .button { flex: none; }
.auditor-keygen { padding: 20px; background: #FFFBF2; border: 1px solid #E7CC94; border-radius: 14px; }
.auditor-keygen-heading { display: flex; align-items: center; gap: 12px; }
.auditor-keygen-heading .ceremony-icon { color: #6B4708; background: var(--yellow-soft); }
.auditor-keygen-heading h3 { margin: 3px 0 0; font-size: .95rem; }
.auditor-keygen-heading .eyebrow { margin: 0; color: #6B4708; }
.auditor-keygen-operation { display: grid; justify-items: center; gap: 6px; margin-top: 22px; }
.auditor-keygen-operation code { padding: 10px 16px; color: #6B4708; background: white; border: 1px solid #E7CC94; border-radius: 9px; font-size: .85rem; }
.auditor-keygen-operation span { color: var(--muted); font-size: .7rem; }
.auditor-keygen-outputs { position: relative; margin-top: 24px; }
.auditor-keygen-outputs::before { content: ""; position: absolute; top: -14px; left: 25%; right: 25%; height: 14px; border: 1px solid #C7A768; border-bottom: 0; }
.auditor-keygen-outputs::after { content: ""; position: absolute; top: -24px; left: 50%; height: 10px; border-left: 1px solid #C7A768; }
.auditor-keygen-outputs .key-output { min-width: 0; margin: 0; padding: 15px; opacity: 1; background: white; border: 1px solid var(--border); border-radius: 10px; }
.auditor-keygen .key-value, .auditor-public-handoff .key-value { white-space: normal; overflow-wrap: anywhere; line-height: 1.6; }
.auditor-keygen-outputs .key-custody { display: block; margin-top: 12px; font-size: .75rem; }
.auditor-keygen-outputs .secret-output .key-custody { color: #704A08; }
.auditor-keygen-outputs .public-output .key-custody { color: var(--purple-dark); }
.auditor-keygen[data-auditor-keygen="generating"] .auditor-keygen-operation code { animation: keygen-pulse .8s ease-in-out infinite alternate; }
.auditor-public-handoff { margin-top: 16px; }
@keyframes keygen-pulse { to { box-shadow: 0 0 0 5px rgba(184,119,8,.12); } }
.experience { margin-top: 22px; }
.institutional-card { min-width: 0; }
.institutional-card code { overflow-wrap: anywhere; }
.institutional-card .institutional-controls { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: end; gap: 12px; margin: 20px 0; }
.institutional-controls label, .institutional-view-selector label { display: grid; gap: 7px; color: var(--muted); font-size: .72rem; font-weight: 750; }
.institutional-mint-controls input, .institutional-mint-controls select { min-width: 0; width: 100%; }
.institutional-mint-history { margin-top: 24px; }
.institutional-mint-receipt { display: flex; align-items: center; gap: 12px; padding: 13px 0; border-bottom: 1px solid var(--border); }
.institutional-mint-receipt > span { display: grid; place-items: center; flex: none; width: 30px; height: 30px; color: var(--success); background: var(--success-soft); border-radius: 8px; }
.institutional-mint-receipt > div { min-width: 0; flex: 1; }
.institutional-mint-receipt strong { display: block; font-size: .8rem; }
.institutional-mint-receipt small { display: block; margin-top: 5px; color: var(--muted); font-size: .65rem; }
.mint-commitment-guide { margin: 16px 0 24px; padding: 12px 14px; border-radius: 9px; background: var(--purple-soft); }
.mint-commitment-guide strong { color: var(--purple-dark); }
.mint-coordinate-details { margin-top: 12px; }
.mint-coordinate-details summary { color: var(--purple-dark); cursor: pointer; font-size: .72rem; font-weight: 750; }
.mint-coordinate-details code { display: block; margin-top: 8px; padding: 12px; background: white; border: 1px solid var(--border); border-radius: 8px; font-size: .67rem; line-height: 1.7; overflow-wrap: anywhere; }
.mint-coordinate-details p { font-size: .73rem; }
.mint-balance-formula { display: block; margin-bottom: 7px; color: var(--purple-dark); font-size: .8rem; }
[data-institutional-mint-balances] { overflow-wrap: anywhere; }
.institutional-table { margin: 16px 0; max-width: 100%; overflow-x: auto; border: 1px solid var(--border); border-radius: 11px; }
.institutional-table table { width: 100%; border-collapse: collapse; font-size: .72rem; }
.institutional-table th { padding: 12px; background: #F7F7FA; color: var(--muted); text-align: left; font-size: .64rem; }
.institutional-table td { padding: 12px; vertical-align: top; border-top: 1px solid var(--border); }
.institutional-table td > small { display: block; margin-top: 5px; color: var(--muted); font-size: .62rem; }
.institutional-table input[type="checkbox"] { width: 17px; height: 17px; min-height: 0; accent-color: var(--purple); }
.institutional-table .institutional-selected { background: #F7F5FF; }
.institutional-table .button { padding: 7px 10px; min-height: 32px; font-size: .7rem; white-space: nowrap; }
.institutional-point summary { cursor: pointer; font: .65rem ui-monospace, monospace; white-space: nowrap; }
.point-coordinates { display: inline-grid; gap: 4px; vertical-align: top; }
.institutional-point code, .institutional-math code, .institutional-opening code { display: block; margin-top: 9px; padding: 10px; width: 240px; max-width: 100%; overflow-wrap: anywhere; white-space: normal; line-height: 1.8; color: var(--purple-dark); background: var(--purple-soft); border-radius: 8px; font-size: .65rem; }
.institutional-math summary, .institutional-opening summary { cursor: pointer; font-size: .68rem; }
.institutional-derivation code { width: auto; }
.institutional-sealed { color: var(--muted); font-size: .68rem; white-space: nowrap; }
.institutional-opening > strong { display: block; margin-bottom: 6px; color: var(--purple); white-space: nowrap; }
.institutional-selection-summary, .institutional-section-heading { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 10px; margin: 18px 0; font-size: .73rem; }
.institutional-section-heading h3 { margin: 0; }
.institutional-section-heading .eyebrow { margin-bottom: 5px; }
.institutional-selection-summary > span { color: var(--muted); }
.institutional-recipients { margin: 20px 0; }
.institutional-recipient-list { display: grid; gap: 12px; margin-bottom: 14px; }
.institutional-recipient-row { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(100px, 1fr) auto; align-items: end; gap: 12px; padding: 14px; border: 1px solid var(--border); border-radius: 10px; background: #FAFAFD; }
.institutional-recipient-row label { display: grid; gap: 7px; min-width: 0; color: var(--muted); font-size: .72rem; font-weight: 750; }
.institutional-recipient-row input, .institutional-recipient-row select { min-width: 0; }
.institutional-recipient-row .button { min-height: 39px; padding: 8px 12px; }
.institutional-card p.institutional-recipient-hint { margin: 10px 0; font-size: .7rem; }
.institutional-payment-distribution { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 14px; margin-top: 16px; padding: 16px; background: var(--purple-soft); border-radius: 10px; }
.institutional-payment-distribution small { display: block; color: var(--muted); font-size: .68rem; }
.institutional-payment-distribution strong { display: block; margin-top: 6px; color: var(--purple-dark); font-size: 1.2rem; }
.institutional-payment-distribution > span { color: var(--purple-dark); font-size: .74rem; }
@media (max-width: 680px) {
  .institutional-recipient-row { grid-template-columns: minmax(0, 1fr) auto; }
  .institutional-recipient-row > label:first-child { grid-column: 1 / -1; }
}
.institutional-payment-progress { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 7px; padding: 0; list-style: none; }
.institutional-payment-progress li { display: flex; flex-direction: column; gap: 8px; padding: 10px; color: var(--muted); background: #F7F7FA; border: 1px solid var(--border); border-radius: 9px; font-size: .65rem; }
.institutional-payment-progress b { font-size: .8rem; }
.institutional-payment-progress .complete { color: #0D6447; background: var(--success-soft); border-color: #BFE5D6; }
.institutional-payment-progress .active { color: var(--purple); background: var(--purple-soft); border-color: #D4CFF8; }
.institutional-calculation, .institutional-proof, .institutional-posting, .institutional-verification { margin-top: 24px; padding-top: 22px; border-top: 1px solid var(--border); }
.institutional-proof-statement { margin: 18px 0; padding: 20px; color: var(--purple-dark); background: var(--purple-soft); border-left: 4px solid var(--purple); border-radius: 0 12px 12px 0; font-size: 1.08rem; font-weight: 700; line-height: 1.6; }
.institutional-proof-roles { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 10px; margin: 16px 0; }
.institutional-proof-roles > div { display: flex; align-items: center; gap: 12px; padding: 14px; border: 1px solid var(--border); border-radius: 10px; }
.institutional-proof-roles strong { color: var(--purple); font-size: 1.7rem; }
.institutional-proof-roles span { font-size: .78rem; line-height: 1.5; }
.institutional-proof-claims { display: grid; gap: 18px; padding: 0; margin: 24px 0; list-style: none; }
.institutional-proof-claims li { display: flex; align-items: flex-start; gap: 12px; }
.institutional-proof-claims li > div { min-width: 0; }
.institutional-proof-claims li > span { display: grid; place-items: center; flex: none; width: 28px; height: 28px; color: var(--purple); background: var(--purple-soft); border-radius: 50%; font-size: .78rem; font-weight: 750; }
.institutional-proof-claims strong { display: block; padding-top: 4px; font-size: .88rem; line-height: 1.5; }
.institutional-proof-claims p { margin: 5px 0 0; }
.institutional-card p.institutional-proof-context, .institutional-card p.institutional-proof-next { font-size: .76rem; }
.institutional-proof-privacy { padding: 16px; background: #F7F7FA; border-radius: 10px; }
.institutional-proof-privacy strong { color: var(--text); }
.institutional-proof-result { margin-top: 18px; padding: 16px; border: 1px solid #D4CFF8; background: var(--purple-soft); border-radius: 10px; }
.institutional-proof-result strong { color: var(--purple-dark); font-size: .85rem; }
.institutional-proof-result p { margin: 7px 0 0; }
.institutional-proof-result.accepted { border-color: #BFE5D6; background: var(--success-soft); }
.institutional-proof-result.accepted strong { color: #0D6447; }
.institutional-proof-technical { margin-top: 20px; padding-top: 16px; border-top: 1px solid var(--border); }
.institutional-proof-technical summary { cursor: pointer; color: var(--muted); font-size: .76rem; }
.institutional-proof-technical dl { display: grid; gap: 14px; font-size: .76rem; line-height: 1.6; }
.institutional-proof-technical dt { font-weight: 750; }
.institutional-proof-technical dd { margin: 3px 0 0; color: var(--muted); }
.institutional-proof-id { display: grid; gap: 8px; padding: 14px; background: #F7F7FA; border-radius: 9px; }
.institutional-proof-id code { overflow-wrap: anywhere; font-size: .7rem; }
.institutional-public-summary { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; padding: 14px; background: #F7F7FA; border: 1px solid var(--border); border-radius: 10px; }
.institutional-public-summary small, .institutional-public-summary b { display: block; font-size: .72rem; overflow-wrap: anywhere; }
.institutional-public-summary small { margin-bottom: 6px; color: var(--muted); font-size: .64rem; }
.institutional-card p.institutional-public-note { font-size: .73rem; }
.institutional-calldata { margin: 14px 0; }
.institutional-calldata summary, .institutional-batch-details summary { cursor: pointer; font-size: .74rem; font-weight: 750; }
.institutional-calldata pre { max-height: 340px; overflow: auto; padding: 15px; background: #F4F3FA; border-radius: 10px; font-size: .65rem; line-height: 1.7; }
.institutional-checks { display: grid; gap: 9px; padding-left: 0; list-style: none; color: #0D6447; font-size: .74rem; }
.institutional-verification ol { display: grid; gap: 8px; padding: 0; list-style: none; margin: 18px 0; }
.institutional-verification li { display: flex; align-items: center; gap: 10px; color: var(--muted); font-size: .75rem; }
.institutional-verification li b { display: grid; place-items: center; width: 23px; height: 23px; flex: none; background: #ECEEF4; border-radius: 50%; }
.institutional-verification li.complete { color: #0D6447; }
.institutional-verification li.complete b { background: var(--success-soft); }
.institutional-view-selector { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; padding: 16px; background: var(--purple-soft); border: 1px solid #D4CFF8; border-radius: 11px; margin: 20px 0; }
.institutional-view-selector label { min-width: 230px; flex: 1; }
.institutional-view-selector > span { flex: 1; min-width: 180px; color: var(--purple-dark); font-size: .74rem; line-height: 1.5; }
.institutional-batch { margin-top: 18px; padding: 16px; border: 1px solid var(--border); border-radius: 12px; }
.institutional-batch > .institutional-section-heading { margin-top: 0; }
.institutional-payment-perspective { display: flex; align-items: flex-start; gap: 20px; padding: 16px; background: var(--purple-soft); border-radius: 10px; }
.institutional-payment-perspective > div { flex: 1; min-width: 0; }
.institutional-payment-perspective strong { color: var(--purple-dark); font-size: .9rem; line-height: 1.5; }
.institutional-payment-perspective p { margin: 7px 0 0; }
.institutional-payment-perspective > span { flex: none; display: grid; gap: 5px; color: var(--purple-dark); font-size: .68rem; text-align: right; }
.institutional-payment-perspective b { font-size: 1.3rem; }
.institutional-payment-slots { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin: 18px 0; }
.institutional-payment-slot { min-width: 0; padding: 16px; border: 1px solid var(--border); border-radius: 12px; background: #FAFAFC; }
.institutional-payment-slot.opened { border-color: #C6BFF5; background: #FBFAFF; }
.institutional-payment-slot header { display: flex; align-items: center; flex-wrap: wrap; gap: 9px; }
.institutional-payment-slot header > div { min-width: 0; flex: 1; }
.institutional-payment-slot h4 { margin: 0; font-size: .86rem; }
.institutional-payment-slot header small { display: block; margin-top: 4px; color: var(--muted); font-size: .66rem; }
.institutional-slot-number { display: grid; place-items: center; width: 27px; height: 27px; flex: none; color: var(--muted); background: #ECEEF4; border-radius: 7px; font-size: .75rem; font-weight: 750; }
.opened .institutional-slot-number { color: var(--purple); background: var(--purple-soft); }
.institutional-slot-status { color: var(--muted); font-size: .62rem; font-weight: 750; }
.opened .institutional-slot-status { color: var(--purple); }
.institutional-slot-amount { display: grid; gap: 6px; margin: 20px 0 12px; }
.institutional-slot-amount small { color: var(--muted); font-size: .72rem; }
.institutional-slot-amount strong { font-size: 1.3rem; color: var(--muted); }
.opened .institutional-slot-amount strong { color: var(--purple-dark); }
.institutional-card .institutional-slot-balance, .institutional-card .institutional-slot-unknown { margin: 10px 0; font-size: .75rem; }
.institutional-slot-balance strong { white-space: nowrap; }
.institutional-slot-opening, .institutional-slot-points { padding-top: 12px; margin-top: 12px; border-top: 1px solid var(--border); }
.institutional-slot-opening summary, .institutional-slot-points summary { color: var(--muted); cursor: pointer; font-size: .72rem; }
.institutional-slot-opening code, .institutional-slot-points code { display: block; color: var(--purple-dark); font-size: .66rem; line-height: 1.7; overflow-wrap: anywhere; }
.institutional-slot-opening p, .institutional-slot-points p { font-size: .72rem; }
.institutional-account-ledger { margin-top: 24px; padding-top: 20px; border-top: 1px solid var(--border); }
.institutional-account-ledger > summary { cursor: pointer; font-size: .84rem; font-weight: 750; }
.institutional-control-scope { display: flex; align-items: center; gap: 20px; padding: 16px 0; border-bottom: 1px solid var(--border); }
.institutional-control-scope .button { flex: none; }
.institutional-control-scope h3 { margin: 0; }
@media (max-width: 680px) {
  .institutional-card .institutional-controls, .institutional-public-summary { grid-template-columns: 1fr; }
  .institutional-payment-progress { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .institutional-proof-statement { padding: 16px; font-size: .98rem; }
  .institutional-proof-roles { grid-template-columns: 1fr; }
  .institutional-payment-slots { grid-template-columns: 1fr; }
  .institutional-payment-perspective { flex-direction: column; gap: 12px; }
  .institutional-payment-perspective > span { display: flex; align-items: baseline; gap: 8px; }
  .institutional-control-scope { flex-direction: column; align-items: stretch; }
  .institutional-view-selector label { min-width: 0; }
}
.experience-header { display: flex; align-items: flex-end; justify-content: space-between; gap: 20px; margin-bottom: 14px; }
.flow-card { grid-column: span 4; padding: 20px; }
.flow-card.wide { grid-column: span 8; }
.flow-card.full { grid-column: 1 / -1; }
.flow-card p { color: var(--muted); font-size: .82rem; line-height: 1.55; }
.flow-card .button-row { margin-top: 16px; }
.scenario-progress { display: flex; gap: 7px; margin-bottom: 14px; padding: 8px; overflow-x: auto; background: white; border: 1px solid var(--border); border-radius: 14px; box-shadow: 0 4px 20px rgba(23,25,34,.025); }
.scenario-progress a { display: flex; align-items: center; flex: 0 0 auto; min-width: 126px; padding: 8px 10px; gap: 8px; color: var(--muted); border: 1px solid transparent; border-radius: 9px; text-decoration: none; }
.scenario-progress a > span { display: grid; place-items: center; flex: none; width: 24px; height: 24px; color: #7B8090; background: #F0F1F5; border-radius: 7px; font-size: .62rem; font-weight: 900; }
.scenario-progress a strong { font-size: .68rem; line-height: 1.25; white-space: nowrap; }
.scenario-progress a:hover { color: var(--purple); background: #F8F7FF; }
.scenario-progress a.complete > span { color: white; background: var(--success); }
.scenario-progress a.active { color: var(--purple-dark); background: var(--purple-soft); border-color: #D4CFF8; }
.scenario-progress a.active > span { color: white; background: var(--purple); }
.scenario-layout { display: grid; grid-template-columns: minmax(0, 1fr); gap: 14px; align-items: stretch; }
.scenario-page { min-width: 0; }
.scenario-page > .flow-card { min-height: 430px; padding: 26px; }
.scenario-page .flow-card { grid-column: auto; }
.scenario-page .registration-review-card { min-height: 0; }
.registration-review-table { margin-top: 16px; }
.network-registry { min-width: 0; padding-top: 14px; border-top: 1px solid var(--border); }
.network-registry header { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; }
.network-registry header .eyebrow { margin-bottom: 4px; font-size: .58rem; }
.network-registry header h3 { margin: 0; font-size: .82rem; }
.network-registry header > span { padding: 4px 6px; color: var(--purple); background: var(--purple-soft); border-radius: 6px; font-size: .56rem; font-weight: 850; }
.network-registry > p { margin: 7px 0 10px; color: var(--muted); font-size: .62rem; line-height: 1.45; }
.network-registry-scroll { max-height: 410px; overflow: auto; border: 1px solid var(--border); border-radius: 10px; }
.network-registry table { width: 100%; min-width: 340px; border-collapse: collapse; table-layout: fixed; }
.network-registry th { position: sticky; top: 0; z-index: 1; padding: 7px 6px; color: var(--muted); background: #F7F7FA; border-bottom: 1px solid var(--border); text-align: left; font-size: .49rem; letter-spacing: .04em; text-transform: uppercase; }
.network-registry th:first-child { width: 28px; }
.network-registry th:nth-child(2) { width: 96px; }
.network-registry th:last-child { width: 42px; }
.network-registry td { min-width: 0; padding: 7px 6px; border-bottom: 1px solid #ECEEF3; vertical-align: middle; }
.network-registry tbody tr:last-child td { border-bottom: 0; }
.network-registry td > strong, .network-registry td > small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.network-registry td > strong { font-size: .59rem; }
.network-registry td > small { margin-top: 2px; color: var(--purple); font-size: .5rem; font-weight: 850; }
.network-registry .registry-key summary { font-size: .53rem; }
.network-registry .registry-key code { font-size: .5rem; }
.registry-index { display: grid; place-items: center; width: 22px; height: 22px; color: var(--purple); background: var(--purple-soft); border-radius: 6px; font: 800 .5rem ui-monospace, SFMono-Regular, Menlo, monospace; }
.compact-bitmap { display: grid; place-items: center; width: 23px; height: 23px; border-radius: 6px; font: 850 .57rem ui-monospace, SFMono-Regular, Menlo, monospace; }
.compact-bitmap.included { color: white; background: var(--purple); }
.compact-bitmap.outside { color: var(--muted); background: #ECEEF3; }
.compact-bitmap.unset { color: #A6AAB6; background: #F3F4F7; }
.network-registry-featured { margin: 24px 0; padding-top: 22px; }
.network-registry-featured header { align-items: center; }
.network-registry-featured header .eyebrow { font-size: .65rem; }
.network-registry-featured header h3 { font-size: 1.2rem; }
.network-registry-featured header > span { padding: 7px 10px; font-size: .72rem; white-space: nowrap; }
.network-registry-featured > p { margin: 8px 0 16px; font-size: .8rem; }
.network-registry-featured .network-registry-scroll { max-height: none; border-radius: 12px; }
.network-registry-featured .network-registry-scroll:focus-visible { outline: 2px solid var(--purple); outline-offset: 3px; }
.network-registry-featured table { min-width: 800px; }
.network-registry-featured th { padding: 14px; font-size: .64rem; background: #F5F3FC; }
.network-registry-featured th:first-child { width: 9%; }
.network-registry-featured th:nth-child(2) { width: 25%; }
.network-registry-featured th:nth-child(3), .network-registry-featured th:nth-child(4) { width: 24%; }
.network-registry-featured th:last-child { width: 18%; }
.network-registry-featured td { padding: 13px 14px; }
.network-registry-featured tbody tr:hover { background: #FAF9FE; }
.network-registry-featured tbody tr:first-child { background: #F8F6FF; }
.network-registry-featured .registry-index { width: 30px; height: 30px; font-size: .68rem; }
.network-registry-featured .registry-party { gap: 12px; }
.network-registry-featured .registry-party > span:last-child { min-width: 0; }
.network-registry-featured .registry-party strong { font-size: .84rem; }
.network-registry-featured .registry-party small { margin-top: 4px; color: var(--success); font-size: .64rem; }
.network-registry-featured .registry-key summary { padding: 6px 0; font-size: .74rem; }
.network-registry-featured .registry-key code { font-size: .7rem; }
.network-registry-featured .registry-status { font-size: .73rem; }
@media (max-width: 680px) {
  .network-registry-featured header { align-items: flex-start; flex-direction: column; }
  .network-registry-featured { margin-top: 18px; padding-top: 18px; }
}
.scenario-footer { display: flex; align-items: center; justify-content: space-between; gap: 14px; margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--border); }
.scenario-footer .button { text-decoration: none; }
.dvp-parties { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 10px; margin: 18px 0; }
.dvp-party { display: flex; align-items: center; gap: 11px; padding: 13px; border: 1px solid var(--border); border-radius: 12px; background: #FAFAFC; }
.dvp-party > span, .dvp-leg > span { display: grid; place-items: center; flex: none; width: 34px; height: 34px; color: white; background: var(--purple); border-radius: 10px; font-weight: 900; }
.dvp-party.seller > span, .dvp-leg.security-leg > span { background: var(--yellow); }
.dvp-party small, .dvp-party strong, .dvp-leg small, .dvp-leg strong { display: block; }
.dvp-party small, .dvp-leg small { margin-bottom: 3px; color: var(--muted); font-size: .61rem; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; }
.dvp-party strong, .dvp-leg strong { font-size: .78rem; }
.dvp-party-link { color: var(--purple); font-size: 1rem; font-weight: 900; }
.terms-form { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 11px; margin: 18px 0; }
.terms-form label { color: var(--muted); font-size: .66rem; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; }
.terms-form input { display: block; margin-top: 7px; color: var(--text); font: .75rem ui-monospace, SFMono-Regular, Menlo, monospace; text-transform: none; }
.terms-form input:disabled { color: #6D7282; background: #F5F6F8; }
.term-leg-fields { min-width: 0; margin: 0; padding: 14px; background: #FAFAFC; border: 1px solid var(--border); border-radius: 12px; }
.term-leg-fields.security { border-top: 3px solid var(--yellow); }
.term-leg-fields.cash { border-top: 3px solid var(--purple); }
.term-leg-fields legend { display: flex; align-items: center; gap: 8px; padding: 0 6px; }
.term-leg-fields legend > span { display: grid; place-items: center; width: 27px; height: 27px; color: white; background: var(--purple); border-radius: 8px; font-size: .69rem; font-weight: 900; }
.term-leg-fields.security legend > span { background: var(--yellow); }
.term-leg-fields legend strong, .term-leg-fields legend small { display: block; }
.term-leg-fields legend strong { color: var(--text); font-size: .75rem; }
.term-leg-fields legend small { color: var(--muted); font-size: .59rem; font-weight: 750; }
.term-leg-fields > div { display: grid; grid-template-columns: 1fr 1fr; gap: 9px; margin-top: 6px; }
.term-expiry { grid-column: 1 / -1; padding: 13px 14px; background: var(--yellow-soft); border: 1px solid #E7CC94; border-radius: 11px; }
.term-expiry input { max-width: 180px; background: white; }
.term-expiry small { display: block; margin-top: 7px; color: #6B5324; font-size: .63rem; font-weight: 600; letter-spacing: 0; line-height: 1.45; text-transform: none; }
.holdings-strip { display: flex; align-items: center; gap: 10px; margin: 14px 0; }
.holdings-strip > span { flex: 1; padding: 10px 12px; color: var(--muted); background: #F8F8FB; border: 1px solid var(--border); border-radius: 9px; font-size: .66rem; }
.holdings-strip strong { display: block; margin-top: 3px; color: var(--text); font: 700 .7rem ui-monospace, SFMono-Regular, Menlo, monospace; }
.term-sheet { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: stretch; gap: 10px; margin: 18px 0; }
.term-leg-card { padding: 14px; background: #FAFAFC; border: 1px solid var(--border); border-radius: 12px; }
.term-leg-card.security { border-top: 3px solid var(--yellow); }
.term-leg-card.cash { border-top: 3px solid var(--purple); }
.term-leg-card header { display: flex; align-items: center; gap: 9px; margin-bottom: 13px; }
.term-leg-card header > span { display: grid; place-items: center; width: 30px; height: 30px; color: white; background: var(--purple); border-radius: 9px; font-weight: 900; }
.term-leg-card.security header > span { background: var(--yellow); }
.term-leg-card header small, .term-leg-card header strong { display: block; }
.term-leg-card header small { margin-bottom: 2px; color: var(--muted); font-size: .58rem; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; }
.term-leg-card header strong { font-size: .78rem; }
.term-leg-card dl { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin: 0; }
.term-leg-card dl > div { min-width: 0; padding: 9px; background: white; border: 1px solid var(--border); border-radius: 8px; }
.term-sheet dt { margin-bottom: 5px; color: var(--muted); font-size: .62rem; font-weight: 850; letter-spacing: .05em; text-transform: uppercase; }
.term-sheet dd { margin: 0; font: 700 .73rem/1.4 ui-monospace, SFMono-Regular, Menlo, monospace; }
.term-swap { align-self: center; color: var(--purple); font-size: 1.1rem; font-weight: 900; }
.term-condition { grid-column: 1 / -1; padding: 11px 13px; color: #62460F; background: var(--yellow-soft); border: 1px solid #E7CC94; border-radius: 10px; }
.term-condition span, .term-condition strong { display: block; }
.term-condition span { margin-bottom: 4px; font-size: .59rem; font-weight: 850; letter-spacing: .05em; text-transform: uppercase; }
.term-condition strong { font-size: .69rem; line-height: 1.45; }
.transfer-identity { display: grid; grid-template-columns: 1fr 1.25fr auto; align-items: center; gap: 10px; margin: 18px 0; padding: 13px; background: var(--purple-soft); border: 1px solid #D4CFF8; border-radius: 11px; }
.transfer-identity > div { min-width: 0; }
.transfer-identity span, .transfer-identity strong { display: block; }
.transfer-identity span { margin-bottom: 4px; color: var(--muted); font-size: .58rem; font-weight: 850; letter-spacing: .05em; text-transform: uppercase; }
.transfer-identity strong { overflow: hidden; color: var(--purple-dark); font: 750 .68rem/1.4 ui-monospace, SFMono-Regular, Menlo, monospace; text-overflow: ellipsis; white-space: nowrap; }
.dvp-leg { display: flex; align-items: center; gap: 11px; margin: 18px 0; padding: 14px; background: #FAFAFC; border: 1px solid var(--border); border-radius: 12px; }
.dvp-leg > div { min-width: 0; }
.dvp-leg > b { margin-left: auto; color: var(--purple); font-size: .68rem; }
.balance-movement { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 12px; margin: 18px 0; }
.balance-movement > span { padding: 14px; color: var(--muted); background: #FAFAFC; border: 1px solid var(--border); border-radius: 11px; font-size: .63rem; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; }
.balance-movement > span:last-child { background: var(--purple-soft); border-color: #D4CFF8; }
.balance-movement strong { display: block; margin-top: 5px; color: var(--text); font: 750 .75rem/1.4 ui-monospace, SFMono-Regular, Menlo, monospace; text-transform: none; }
.balance-movement > b { color: var(--purple); font-size: 1rem; }
.timeout-state { display: grid; gap: 14px; margin-top: 18px; }
.timeout-state .dvp-leg { margin: 0; }
.timeout-state .button { justify-self: start; }
.amount-action { display: grid; grid-template-columns: minmax(180px, .65fr) auto; align-items: end; gap: 10px; margin-top: 18px; padding: 14px; background: #F8F8FB; border: 1px solid var(--border); border-radius: 11px; }
.amount-action label { color: var(--muted); font-size: .66rem; font-weight: 850; letter-spacing: .05em; text-transform: uppercase; }
.amount-action input { display: block; margin-top: 7px; color: var(--text); font: .76rem ui-monospace, SFMono-Regular, Menlo, monospace; text-transform: none; }
.acceptance-card { border-top: 4px solid var(--purple); }
.acceptance-sheet { display: grid; grid-template-columns: .82fr 1.3fr; gap: 11px; margin: 18px 0; }
.acceptance-party { display: flex; align-items: flex-start; gap: 11px; padding: 16px; color: #694908; background: var(--yellow-soft); border: 1px solid #E7CC94; border-radius: 13px; }
.acceptance-party > span { display: grid; place-items: center; flex: none; width: 36px; height: 36px; color: white; background: var(--yellow); border-radius: 10px; font-size: .66rem; font-weight: 900; }
.acceptance-party small, .acceptance-party strong { display: block; }
.acceptance-party small { margin-bottom: 4px; font-size: .58rem; font-weight: 850; letter-spacing: .06em; text-transform: uppercase; }
.acceptance-party strong { color: var(--text); font-size: .8rem; }
.acceptance-party p { margin: 7px 0 0; font-size: .68rem; line-height: 1.45; }
.acceptance-summary { padding: 16px; background: #F8F7FF; border: 1px solid #D4CFF8; border-radius: 13px; }
.acceptance-summary dl { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin: 0; }
.acceptance-summary dl > div { min-width: 0; padding: 9px; background: white; border: 1px solid var(--border); border-radius: 8px; }
.acceptance-summary dt { margin-bottom: 5px; color: var(--muted); font-size: .57rem; font-weight: 850; letter-spacing: .05em; text-transform: uppercase; }
.acceptance-summary dd { margin: 0; overflow: hidden; font: 750 .68rem/1.4 ui-monospace, SFMono-Regular, Menlo, monospace; text-overflow: ellipsis; }
.dvp-initiation-process { display: grid; grid-template-columns: 1fr auto 1fr; align-items: stretch; gap: 10px; margin: 18px 0; }
.dvp-initiation-process .process-step { grid-template-columns: 34px 1fr; }
.leg-status-strip { display: grid; grid-template-columns: 1fr 1fr; gap: 9px; margin: 12px 0; }
.leg-status-strip > span { padding: 11px 13px; background: #F8F8FB; border: 1px solid var(--border); border-radius: 10px; }
.leg-status-strip b, .leg-status-strip strong { display: block; }
.leg-status-strip b { margin-bottom: 4px; color: var(--muted); font-size: .58rem; letter-spacing: .06em; text-transform: uppercase; }
.leg-status-strip strong { font-size: .7rem; }
.leg-status-strip .complete { color: #0D6447; background: var(--success-soft); border-color: #BFE5D6; }
.leg-status-strip .waiting { color: #694908; background: var(--yellow-soft); border-color: #E7CC94; }
.auditable-transaction > div, .auditable-transaction > span { min-width: 0; }
.auditable-transaction strong, .auditable-transaction small, .auditable-transaction span b { display: block; }
.auditable-transaction small { margin-top: 4px; overflow: hidden; color: var(--muted); font: .61rem/1.4 ui-monospace, SFMono-Regular, Menlo, monospace; text-overflow: ellipsis; white-space: nowrap; }
.auditable-transaction span b { overflow: hidden; color: var(--purple-dark); font: 700 .66rem ui-monospace, SFMono-Regular, Menlo, monospace; text-overflow: ellipsis; white-space: nowrap; }
.dvp-result { margin: 18px 0 0; }
.dvp-result strong { display: block; margin-bottom: 4px; }
.context-badge.complete { color: #0D6447; background: var(--success-soft); border-color: #BFE5D6; }
.auction-identity { display: grid; grid-template-columns: 1.25fr 1fr 1fr auto; align-items: center; gap: 9px; margin: 17px 0; padding: 13px; background: #F8F7FF; border: 1px solid #D7D2F7; border-radius: 11px; }
.auction-identity > div { min-width: 0; }
.auction-identity small, .auction-identity strong { display: block; }
.auction-identity small { margin-bottom: 4px; color: var(--muted); font-size: .55rem; font-weight: 850; letter-spacing: .05em; text-transform: uppercase; }
.auction-identity strong { overflow: hidden; font-size: .7rem; text-overflow: ellipsis; white-space: nowrap; }
.auction-key-pair { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 10px; margin: 16px 0; }
.auction-key-pair > div { min-width: 0; padding: 13px; background: #FAFAFC; border: 1px solid var(--border); border-radius: 10px; }
.auction-key-pair > span { color: var(--purple); font-size: .61rem; font-weight: 850; text-transform: uppercase; }
.auction-key-pair small, .auction-key-pair strong { display: block; }
.auction-key-pair small { margin-bottom: 6px; color: var(--muted); font-size: .57rem; font-weight: 800; text-transform: uppercase; }
.auction-key-pair strong { overflow: hidden; font-size: .69rem; text-overflow: ellipsis; white-space: nowrap; }
.auction-key-pair .secret-value { color: #7A590F; }
.registration-binding { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 10px; margin: 17px 0; }
.registration-binding > span { min-width: 0; padding: 13px; background: #FAFAFC; border: 1px solid var(--border); border-radius: 10px; }
.registration-binding small, .registration-binding strong { display: block; }
.registration-binding small { margin-bottom: 5px; color: var(--muted); font-size: .56rem; font-weight: 850; text-transform: uppercase; }
.registration-binding strong { overflow: hidden; font-size: .67rem; text-overflow: ellipsis; white-space: nowrap; }
.registration-binding > b { color: var(--purple); }
.nft-certificate { display: grid; grid-template-columns: 110px 1fr; gap: 16px; margin: 18px 0; padding: 17px; background: #FFFBF2; border: 1px solid #E6CE9B; border-radius: 13px; }
.nft-certificate > span { display: grid; place-items: center; min-height: 100px; color: white; background: var(--yellow); border-radius: 11px; font-size: .72rem; font-weight: 900; letter-spacing: .08em; }
.nft-certificate small { color: #795B20; font-size: .58rem; font-weight: 850; text-transform: uppercase; }
.nft-certificate strong { display: block; margin: 5px 0 10px; font: 780 .9rem ui-monospace, SFMono-Regular, Menlo, monospace; }
.nft-certificate dl { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin: 0; }
.nft-certificate dl > div { padding: 8px; background: white; border: 1px solid #EAD9B6; border-radius: 8px; }
.nft-certificate dt { color: var(--muted); font-size: .53rem; text-transform: uppercase; }
.nft-certificate dd { margin: 3px 0 0; font-size: .65rem; font-weight: 750; }
.listing-visibility, .auction-view-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin: 17px 0; }
.listing-visibility section { padding: 14px; background: #FAFAFC; border: 1px solid var(--border); border-radius: 11px; }
.listing-visibility section:last-child { background: var(--purple-soft); border-color: #D4CFF8; }
.listing-visibility small, .listing-visibility strong, .listing-visibility span { display: block; }
.listing-visibility small { color: var(--muted); font-size: .56rem; font-weight: 850; text-transform: uppercase; }
.listing-visibility strong { margin: 6px 0 4px; font: 750 .76rem ui-monospace, SFMono-Regular, Menlo, monospace; }
.listing-visibility span { color: var(--muted); font-size: .64rem; }
.bid-target { margin: 17px 0; padding: 16px; color: white; background: var(--text); border-radius: 12px; }
.bid-target span, .bid-target strong, .bid-target small { display: block; }
.bid-target span { color: #BEBFCC; font-size: .55rem; font-weight: 850; letter-spacing: .08em; }
.bid-target strong { margin: 6px 0; font-size: 1rem; }
.bid-target small { color: #D2D3DC; font-size: .63rem; }
.bid-note-select { display: block; margin: 17px 0; color: var(--muted); font-size: .65rem; font-weight: 850; letter-spacing: .04em; text-transform: uppercase; }
.bid-note-select select { display: block; margin-top: 7px; color: var(--text); font: .72rem ui-monospace, SFMono-Regular, Menlo, monospace; text-transform: none; }
.bid-note-select small { display: block; margin-top: 6px; font-size: .6rem; font-weight: 600; letter-spacing: 0; text-transform: none; }
.bid-entry-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.bid-entry-grid .bid-note-select { margin: 17px 0 0; padding: 13px; background: #F8F8FB; border: 1px solid var(--border); border-radius: 10px; }
.sealed-bid-receipt, .winner-announcement, .settlement-outputs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 9px; margin: 17px 0; }
.sealed-bid-receipt > span, .winner-announcement > span, .winner-announcement > b, .settlement-outputs > span { min-width: 0; padding: 12px; background: #F8F8FB; border: 1px solid var(--border); border-radius: 10px; }
.sealed-bid-receipt small, .sealed-bid-receipt strong, .winner-announcement small, .winner-announcement strong, .settlement-outputs small, .settlement-outputs strong { display: block; }
.sealed-bid-receipt small, .winner-announcement small, .settlement-outputs small { margin-bottom: 5px; color: var(--muted); font-size: .54rem; font-weight: 850; text-transform: uppercase; }
.sealed-bid-receipt strong, .winner-announcement strong, .settlement-outputs strong { overflow: hidden; font-size: .7rem; text-overflow: ellipsis; white-space: nowrap; }
.winner-announcement > b { display: flex; align-items: center; color: #72500D; background: var(--yellow-soft); border-color: #E4C98F; font-size: .68rem; }
.perspective-switcher { display: inline-grid; grid-template-columns: repeat(3, auto); gap: 4px; margin: 20px 0 0; padding: 4px; background: #ECEEF5; border: 1px solid var(--border); border-radius: 11px; }
.perspective-switcher button { min-height: 34px; padding: 7px 13px; color: var(--muted); background: transparent; border: 0; border-radius: 8px; font: 800 .63rem/1 inherit; cursor: pointer; }
.perspective-switcher button:hover { color: var(--text); }
.perspective-switcher button[aria-selected="true"] { color: white; background: var(--purple); box-shadow: 0 2px 7px rgba(91,75,224,.22); }
.perspective-switcher button:focus-visible { outline: 3px solid rgba(91,75,224,.28); outline-offset: 2px; }
.perspective-panel { margin-top: 10px; padding: 16px; background: #FAFAFC; border: 1px solid var(--border); border-radius: 13px; }
.perspective-panel.auditor-perspective { background: #FFFBF2; border-color: #E4C98F; }
.perspective-heading > span { color: var(--purple); font-size: .55rem; font-weight: 900; letter-spacing: .08em; }
.auditor-perspective .perspective-heading > span { color: var(--yellow); }
.perspective-heading > strong { display: block; margin: 5px 0; font-size: .8rem; }
.perspective-heading > p { max-width: 780px; margin: 0; color: var(--muted); font-size: .67rem; line-height: 1.5; }
.perspective-panel .commitment-tree { background: white; }
.auditor-output-table { margin-top: 14px; background: white; border: 1px solid #E6D3A8; border-radius: 10px; }
.auction-clock { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 12px; margin: 17px 0; padding: 15px; background: var(--purple-soft); border: 1px solid #D4CFF8; border-radius: 12px; }
.auction-clock > span { display: grid; place-items: center; width: 48px; height: 48px; color: white; background: var(--purple); border-radius: 12px; font-size: 1.15rem; font-weight: 900; }
.auction-clock small, .auction-clock strong { display: block; }
.auction-clock small { color: var(--muted); font-size: .55rem; font-weight: 850; text-transform: uppercase; }
.auction-clock strong { margin-top: 3px; font-size: .75rem; }
.auction-clock > b { color: var(--purple-dark); font-size: .72rem; }
.opaque-bid-stream { display: grid; gap: 7px; }
.opaque-bid-stream > div { display: grid; grid-template-columns: 72px 1fr auto; align-items: center; gap: 10px; padding: 10px 12px; background: #FAFAFC; border: 1px solid var(--border); border-radius: 9px; }
.opaque-bid-stream span, .opaque-bid-stream small { color: var(--muted); font-size: .58rem; font-weight: 800; text-transform: uppercase; }
.opaque-bid-stream strong { overflow: hidden; font-size: .65rem; text-overflow: ellipsis; white-space: nowrap; }
.auction-view-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.auction-view { padding: 15px; background: #FAFAFC; border: 1px solid var(--border); border-radius: 11px; }
.auction-view.private { color: white; background: var(--purple); border-color: var(--purple); }
.auction-view.auditor { background: var(--yellow-soft); border-color: #E4C98F; }
.auction-view small { font-size: .55rem; font-weight: 850; text-transform: uppercase; }
.auction-view h3 { margin: 6px 0; font-size: .78rem; }
.auction-view p { min-height: 36px; margin: 0 0 10px; font-size: .63rem; line-height: 1.45; opacity: .78; }
.auction-view strong { font-size: .68rem; }
.private-bid-table table { width: 100%; border-collapse: collapse; font-size: .67rem; }
.private-bid-table th, .private-bid-table td { padding: 10px; border-bottom: 1px solid var(--border); text-align: left; white-space: nowrap; }
.private-bid-table th { color: var(--muted); font-size: .54rem; text-transform: uppercase; }
.private-bid-table tr.winning-bid td { color: var(--purple-dark); background: var(--purple-soft); border-top: 1px solid #C8C1F5; border-bottom-color: #C8C1F5; }
.private-bid-table tr.winning-bid td:first-child { border-left: 4px solid var(--purple); }
.private-bid-table tr.winning-bid .policy-badge { color: white; background: var(--purple); }
.privacy-boundary { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 10px; margin-top: 12px; padding: 10px 12px; color: white; background: var(--text); border-radius: 9px; }
.privacy-boundary span, .privacy-boundary small { color: #C6C8D1; font-size: .57rem; }
.privacy-boundary strong { font-size: .68rem; }
.proof-statement { margin: 17px 0; padding: 18px; background: #F8F7FF; border: 1px solid #D4CFF8; border-left: 4px solid var(--purple); border-radius: 11px; }
.proof-statement > span { color: var(--purple); font-size: .55rem; font-weight: 900; letter-spacing: .08em; }
.proof-statement > strong { display: block; margin: 8px 0; font-size: .9rem; line-height: 1.45; }
.proof-statement p { margin: 0; color: var(--muted); font-size: .69rem; line-height: 1.5; }
.proof-workspace { margin-top: 18px; }
.zk-circuit { margin-top: 14px; padding: 15px; color: white; background: var(--text); border-radius: 13px; }
.circuit-boundary-label { display: grid; grid-template-columns: 1fr 2fr 1fr; gap: 10px; margin-bottom: 9px; color: #BFC1CB; font-size: .51rem; font-weight: 900; letter-spacing: .08em; text-align: center; }
.circuit-flow { display: grid; grid-template-columns: 1fr auto 1.15fr auto 1fr auto 1.15fr; align-items: stretch; gap: 8px; }
.circuit-flow section { min-width: 0; padding: 12px; color: var(--text); background: white; border: 1px solid #D7D9E2; border-radius: 10px; }
.circuit-flow section.winner-gate { background: var(--purple-soft); border-color: #BDB5F0; }
.circuit-flow section.circuit-output { background: var(--yellow-soft); border-color: #E0C183; }
.circuit-flow > i { align-self: center; color: #AEA8F1; font-style: normal; font-weight: 900; }
.circuit-flow small, .circuit-flow strong, .circuit-flow span { display: block; }
.circuit-flow small { color: var(--muted); font-size: .5rem; font-weight: 900; letter-spacing: .05em; text-transform: uppercase; }
.circuit-flow strong { margin: 6px 0; font: 760 .65rem/1.35 ui-monospace, SFMono-Regular, Menlo, monospace; }
.circuit-flow span { color: var(--muted); font-size: .56rem; line-height: 1.4; }
.settlement-contract { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 9px; margin: 18px 0; }
.settlement-contract > div { padding: 13px; background: #FAFAFC; border: 1px solid var(--border); border-radius: 10px; }
.settlement-contract span { display: grid; place-items: center; width: 24px; height: 24px; margin-bottom: 9px; color: white; background: var(--purple); border-radius: 7px; font-size: .6rem; font-weight: 900; }
.settlement-contract strong, .settlement-contract small { display: block; }
.settlement-contract strong { margin-bottom: 4px; font-size: .68rem; }
.settlement-contract small { color: var(--muted); font-size: .58rem; line-height: 1.4; }
.auction-visibility-matrix { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 9px; margin: 18px 0; }
.auction-visibility-matrix > div { padding: 14px; background: #FAFAFC; border: 1px solid var(--border); border-top: 3px solid var(--purple); border-radius: 10px; }
.auction-visibility-matrix > div:last-child { background: #FFFAEF; border-color: #E4C98F; border-top-color: var(--yellow); }
.auction-visibility-matrix strong, .auction-visibility-matrix span, .auction-visibility-matrix b { display: block; }
.auction-visibility-matrix strong { margin-bottom: 10px; font-size: .74rem; }
.auction-visibility-matrix span { margin: 6px 0; color: var(--muted); font-size: .61rem; line-height: 1.35; }
.auction-visibility-matrix b { margin-top: 11px; color: var(--purple-dark); font-size: .62rem; line-height: 1.4; }
.channel-network-card > p { max-width: 760px; }
.channel-view-selector { display: flex; align-items: center; justify-content: space-between; gap: 20px; margin-top: 22px; padding: 17px; background: var(--purple-soft); border: 1px solid #D4CFF8; border-radius: 12px; }
.channel-view-selector label { display: grid; gap: 8px; flex: 1; min-width: 0; max-width: 380px; color: var(--purple-dark); font-size: .76rem; font-weight: 800; }
.channel-view-selector select { width: 100%; min-width: 0; min-height: 44px; padding: 10px; color: var(--text); background: white; border: 1px solid #D4CFF8; border-radius: 8px; font: inherit; }
.channel-view-selector select:focus-visible, .channel-key-scroll:focus-visible { outline: 2px solid var(--purple); outline-offset: 3px; }
.channel-view-count { flex: none; text-align: right; color: var(--purple-dark); }
.channel-view-count strong { display: block; font-size: 1.7rem; }
.channel-view-count strong span { color: var(--muted); font-size: 1rem; }
.channel-view-count small { font-size: .7rem; }
.channel-network-card .channel-view-description { margin: 12px 0 0; font-size: .78rem; }
.channel-matrix-wrap { margin-top: 18px; overflow-x: auto; padding: 2px 2px 7px; }
.channel-matrix { width: 100%; min-width: 700px; border-collapse: separate; border-spacing: 5px; table-layout: fixed; }
.channel-matrix th { color: var(--muted); font-size: .62rem; font-weight: 850; }
.channel-matrix thead th { height: 28px; text-align: center; }
.channel-matrix thead th:first-child { width: 166px; }
.channel-matrix abbr { color: var(--muted); text-decoration: none; letter-spacing: .03em; cursor: help; }
.channel-matrix tbody th { display: flex; align-items: center; gap: 8px; height: 37px; padding-right: 10px; overflow: hidden; text-align: left; white-space: nowrap; }
.channel-matrix tbody th > span:last-child { overflow: hidden; color: var(--text); text-overflow: ellipsis; }
.channel-row-index { display: grid; place-items: center; flex: none; width: 27px; height: 27px; color: var(--purple); background: var(--purple-soft); border-radius: 8px; font: 800 .58rem ui-monospace, SFMono-Regular, Menlo, monospace; }
.channel-cell { height: 37px; padding: 0; text-align: center; }
.channel-cell > span { display: grid; place-items: center; width: 100%; height: 100%; border-radius: 8px; }
.channel-cell-self > span { color: #A7ABBA; background: #F3F4F7; font-size: .7rem; }
.channel-cell-pair.pending > span { background: #FBFBFD; border: 1px dashed #C9CDDA; }
.channel-cell-pair.established > span { color: white; background: var(--purple); border: 1px solid var(--purple); font-size: .72rem; font-weight: 900; animation: channel-establish .34s ease both; animation-delay: calc(var(--pair-order) * 18ms); }
.channel-cell-pair.channel-cell-sealed > span { color: #7B8090; background: #ECEEF3; border-color: #DDE0E9; }
.channel-viewer-row .channel-row-index { color: white; background: var(--purple); }
.channel-viewer-row th > span:last-child { color: var(--purple-dark); }
.channel-cell-pair[title] { cursor: help; }
.channel-matrix-footer { display: flex; align-items: center; justify-content: space-between; gap: 18px; margin-top: 7px; padding-top: 15px; border-top: 1px solid var(--border); }
.channel-matrix-footer .button-row { margin-top: 0; }
.channel-legend { display: flex; align-items: center; flex-wrap: wrap; gap: 12px; color: var(--muted); font-size: .68rem; font-weight: 750; }
.channel-legend span { display: flex; align-items: center; gap: 6px; }
.legend-cell { display: grid; place-items: center; width: 19px; height: 19px; border-radius: 5px; font-style: normal; font-size: .55rem; font-weight: 900; }
.legend-cell.pending { background: #FBFBFD; border: 1px dashed #C9CDDA; }
.legend-cell.established { color: white; background: var(--purple); }
.legend-cell.sealed { color: #7B8090; background: #ECEEF3; border: 1px solid #DDE0E9; }
.channel-key-workspace { margin-top: 24px; padding-top: 22px; border-top: 1px solid var(--border); }
.channel-key-heading { display: flex; align-items: center; justify-content: space-between; gap: 14px; }
.channel-key-heading .eyebrow { margin-bottom: 6px; }
.channel-key-heading h3 { margin: 0; font-size: 1rem; }
.channel-key-scroll { overflow: auto; max-height: 460px; margin-top: 14px; border: 1px solid var(--border); border-radius: 10px; }
.channel-key-scroll table { width: 100%; min-width: 470px; table-layout: fixed; border-collapse: collapse; text-align: left; }
.channel-key-scroll th { position: sticky; top: 0; z-index: 1; padding: 12px 14px; background: #F5F3FC; color: var(--muted); font-size: .62rem; letter-spacing: .04em; text-transform: uppercase; }
.channel-key-scroll th:first-child { width: 42%; }
.channel-key-scroll td { padding: 12px 14px; border-top: 1px solid var(--border); font-size: .77rem; }
.channel-key-scroll td > strong, .channel-key-scroll td > span { display: block; }
.channel-key-scroll td > span { margin-top: 4px; color: var(--muted); font-size: .71rem; }
.channel-shared-key summary { cursor: pointer; color: var(--purple-dark); overflow-wrap: anywhere; font: .7rem/1.6 ui-monospace, SFMono-Regular, Menlo, monospace; }
.channel-shared-key code { display: block; margin-top: 8px; padding: 10px; color: var(--purple-dark); background: var(--purple-soft); border-radius: 7px; overflow-wrap: anywhere; font-size: .68rem; line-height: 1.6; }
@media (max-width: 680px) {
  .channel-view-selector { align-items: stretch; flex-direction: column; gap: 12px; }
  .channel-view-selector label { max-width: none; }
  .channel-view-count { display: flex; align-items: baseline; gap: 8px; text-align: left; }
  .channel-key-heading { align-items: flex-start; }
}
.recipient-key-grid { display: grid; gap: 9px; margin: 18px 0; }
.recipient-key-grid .detail-card:first-child { border-left: 3px solid var(--purple); }
.recipient-key-grid .key-value { margin-top: 7px; color: var(--purple-dark); background: var(--purple-soft); border-color: #D4CFF8; }
.tag-mode-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; margin: 18px 0; }
.tag-mode-card { min-width: 0; padding: 13px; color: var(--text); background: #FAFAFC; border: 1px solid var(--border); border-radius: 11px; text-align: left; cursor: pointer; }
.tag-mode-card:hover:not(:disabled) { border-color: #BDB6F2; }
.tag-mode-card.selected { background: var(--purple-soft); border-color: var(--purple); box-shadow: inset 0 0 0 1px var(--purple); }
.tag-mode-card:disabled { cursor: default; opacity: 1; }
.tag-mode-card span, .tag-mode-card strong, .tag-mode-card small, .tag-mode-card b { display: block; }
.tag-mode-card span { color: var(--purple); font-size: .65rem; font-weight: 900; }
.tag-mode-card strong { margin: 6px 0 4px; font-size: .68rem; }
.tag-mode-card small { min-height: 42px; color: var(--muted); font-size: .57rem; line-height: 1.4; }
.tag-mode-card b { margin-top: 8px; color: var(--muted); font: 750 .56rem ui-monospace, SFMono-Regular, Menlo, monospace; }
.tag-registry-boundary { margin-top: 16px; padding: 12px; background: #F7F7FA; border: 1px solid var(--border); border-radius: 13px; }
.tag-registry-labels { display: grid; grid-template-columns: 3fr 1.35fr .75fr; gap: 8px; margin: 0 4px 8px; font-size: .52rem; font-weight: 900; letter-spacing: .06em; text-align: center; }
.tag-registry-labels span:first-child { color: var(--muted); }
.tag-registry-labels span:nth-child(2) { color: var(--purple); }
.tag-registry-labels span:last-child { color: var(--yellow); }
.tag-registry-table .registry-table { min-width: 980px; }
.tag-registry-table .registry-table th:first-child { width: 5%; }
.tag-registry-table .registry-table th:nth-child(2) { width: 17%; }
.tag-registry-table .registry-table th:nth-child(3), .tag-registry-table .registry-table th:nth-child(4) { width: 20%; }
.tag-registry-table .registry-table th:nth-child(5) { width: 25%; color: var(--purple); background: #F1EEFF; }
.tag-registry-table .registry-table th:nth-child(6) { width: 13%; color: var(--yellow); background: #FFF7E7; }
.tag-registry-table tr.tag-included { background: #FCFBFF; }
.tag-registry-table tr.tag-outside { opacity: .65; }
.private-selection-cell { background: #FBFAFF; }
.recipient-choice { min-width: 98px; padding: 7px 9px; color: var(--purple); background: white; border: 1px solid #C9C3F5; border-radius: 8px; font-size: .61rem; font-weight: 800; cursor: pointer; }
.recipient-choice.selected { color: white; background: var(--purple); border-color: var(--purple); }
.recipient-choice:disabled { cursor: default; }
.rift-exclusion { display: inline-flex; align-items: center; gap: 5px; margin-left: 7px; color: var(--muted); font-size: .58rem; font-weight: 750; }
.rift-exclusion input { width: 14px; min-height: 14px; accent-color: var(--yellow); }
.tag-row-state { display: inline-flex; padding: 5px 7px; border-radius: 7px; font-size: .58rem; font-weight: 850; }
.tag-row-state.payer { color: var(--muted); background: #ECEEF3; }
.bitmap-membership { display: inline-flex; align-items: center; gap: 7px; color: var(--muted); font-size: .59rem; font-weight: 750; }
.bitmap-membership b { display: grid; place-items: center; width: 25px; height: 25px; border-radius: 7px; font: 850 .62rem ui-monospace, SFMono-Regular, Menlo, monospace; }
.bitmap-membership.included b { color: white; background: var(--purple); }
.bitmap-membership.outside b { background: #E9EBF1; }
.tag-construction { display: grid; grid-template-columns: 1fr auto 1fr auto 1fr; align-items: stretch; gap: 8px; margin: 16px 0; }
.tag-construction section { min-width: 0; padding: 12px; background: white; border: 1px solid var(--border); border-radius: 10px; }
.tag-construction section:last-child { background: var(--yellow-soft); border-color: #E4C98F; }
.tag-construction small, .tag-construction strong, .tag-construction span { display: block; }
.tag-construction small { color: var(--muted); font-size: .53rem; font-weight: 850; text-transform: uppercase; }
.tag-construction strong { margin: 6px 0; overflow: hidden; font-size: .7rem; text-overflow: ellipsis; white-space: nowrap; }
.tag-construction span { color: var(--muted); font-size: .58rem; line-height: 1.4; }
.tag-construction > i { align-self: center; color: var(--purple); font-style: normal; font-weight: 900; }
.channel-record, .payment-publication { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin-top: 14px; }
.channel-record > span, .payment-publication > span { min-width: 0; padding: 11px; background: var(--purple-soft); border: 1px solid #D4CFF8; border-radius: 9px; }
.channel-record small, .channel-record strong, .payment-publication small, .payment-publication strong { display: block; }
.channel-record small, .payment-publication small { margin-bottom: 5px; color: var(--muted); font-size: .53rem; font-weight: 850; text-transform: uppercase; }
.channel-record strong, .payment-publication strong { overflow: hidden; font-size: .66rem; text-overflow: ellipsis; white-space: nowrap; }
.registry-binding-visual { display: grid; grid-template-columns: .8fr 1.3fr 1.3fr; gap: 9px; margin: 17px 0; }
.binding-recipient, .binding-path { min-width: 0; padding: 13px; border: 1px solid var(--border); border-radius: 10px; }
.binding-recipient { color: white; background: var(--purple); border-color: var(--purple); }
.binding-recipient small, .binding-recipient strong, .binding-recipient span, .binding-path small, .binding-path strong, .binding-path b { display: block; }
.binding-recipient small { color: #DCD8FF; font-size: .53rem; text-transform: uppercase; }
.binding-recipient strong { margin: 6px 0 3px; font-size: .75rem; }
.binding-recipient span { color: #DCD8FF; font-size: .57rem; }
.binding-path { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 7px; background: #FAFAFC; }
.binding-path span { min-width: 0; }
.binding-path small { color: var(--muted); font-size: .52rem; font-weight: 850; }
.binding-path strong { margin-top: 5px; overflow: hidden; font-size: .58rem; text-overflow: ellipsis; white-space: nowrap; }
.binding-path i { color: var(--purple); font-style: normal; font-weight: 900; }
.binding-path b { font-size: .61rem; line-height: 1.35; }
.scan-table { margin: 16px 0; }
.scan-table table { width: 100%; border-collapse: collapse; font-size: .64rem; }
.scan-table th, .scan-table td { padding: 9px 10px; border-bottom: 1px solid var(--border); text-align: left; }
.scan-table th { color: var(--muted); background: #F7F7FA; font-size: .53rem; text-transform: uppercase; }
.scan-table tr.scan-match td { color: var(--purple-dark); background: var(--purple-soft); font-weight: 750; }
.payment-construction { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; margin: 18px 0; }
.payment-construction > span { min-width: 0; padding: 12px; background: #F8F8FB; border: 1px solid var(--border); border-radius: 10px; }
.payment-construction b { display: grid; place-items: center; width: 24px; height: 24px; margin-bottom: 10px; color: white; background: var(--purple); border-radius: 7px; font-size: .62rem; }
.payment-construction strong, .payment-construction small { display: block; }
.payment-construction strong { margin-bottom: 4px; font-size: .7rem; }
.payment-construction small { color: var(--muted); font-size: .61rem; line-height: 1.4; }
.metric-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin: 14px 0; }
.metric { padding: 12px; background: #F8F8FB; border-radius: 10px; }
.metric span { display: block; color: var(--muted); font-size: .65rem; }
.metric strong { display: block; margin-top: 3px; font-size: 1.02rem; }
.transaction-list { display: grid; gap: 8px; margin-top: 14px; }
.transaction { display: grid; grid-template-columns: minmax(110px,1fr) minmax(150px,2fr) auto; align-items: center; gap: 12px; padding: 11px 12px; background: #FAFAFC; border: 1px solid var(--border); border-radius: 10px; }
.transaction strong { display: block; font-size: .76rem; }
.transaction span { color: var(--muted); font: .67rem/1.4 ui-monospace, SFMono-Regular, Menlo, monospace; overflow: hidden; text-overflow: ellipsis; }
.leaf-list { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 8px; margin-top: 14px; }
.leaf { padding: 11px; background: #F7F7FA; border: 1px solid var(--border); border-radius: 9px; }
.leaf strong, .leaf span { display: block; font: .68rem/1.45 ui-monospace, SFMono-Regular, Menlo, monospace; overflow: hidden; text-overflow: ellipsis; }
.leaf span { color: var(--muted); }
.empty-state { padding: 18px; color: var(--muted); background: #F8F8FB; border: 1px dashed #C9CDDA; border-radius: 11px; font-size: .82rem; text-align: center; }
.callout { padding: 13px 14px; color: #63450F; background: var(--yellow-soft); border-left: 3px solid var(--yellow); border-radius: 8px; font-size: .79rem; line-height: 1.55; }
.success-callout { color: #0D6447; background: var(--success-soft); border-left-color: var(--success); }
.switch-row { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 13px; background: #F8F8FB; border-radius: 10px; }
.switch { position: relative; display: inline-flex; width: 46px; height: 26px; }
.switch input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.switch span { width: 100%; background: #B9BDCA; border-radius: 999px; cursor: pointer; transition: background .15s ease; }
.switch span::after { content: ""; position: absolute; width: 20px; height: 20px; left: 3px; top: 3px; background: white; border-radius: 50%; box-shadow: 0 1px 4px rgba(0,0,0,.25); transition: transform .15s ease; }
.switch input:checked + span { background: var(--purple); }
.switch input:checked + span::after { transform: translateX(20px); }
.switch input:focus-visible + span { outline: 3px solid rgba(91,75,224,.28); outline-offset: 3px; }
.shielding-network { margin-top: 22px; padding-top: 20px; border-top: 1px solid var(--border); }
.shielding-network-head, .tree-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 14px; }
.shielding-network > p { max-width: 760px; color: var(--muted); font-size: .78rem; line-height: 1.55; }
.shielding-network .switch-row { margin: 13px 0; border: 1px solid var(--border); }
.commitment-tree { margin-top: 16px; padding: 15px; background: #FAFAFC; border: 1px solid var(--border); border-radius: 13px; }
.commitment-tree.empty { padding: 0; border: 0; }
.tree-heading { align-items: center; margin-bottom: 16px; }
.tree-heading .eyebrow { margin-bottom: 4px; }
.tree-heading strong { font-size: .75rem; }
.tree-insertion-key { display: flex; align-items: center; gap: 6px; color: var(--muted); font-size: .62rem; font-weight: 750; }
.tree-insertion-key i { width: 9px; height: 9px; background: var(--purple); border-radius: 3px; box-shadow: 0 0 0 3px var(--purple-soft); }
.tree-legend { display: flex; align-items: center; justify-content: flex-end; flex-wrap: wrap; gap: 8px 14px; }
.tree-owner-key { display: flex; align-items: center; gap: 6px; color: var(--purple-dark); font-size: .62rem; font-weight: 800; }
.tree-owner-key i { width: 10px; height: 10px; background: var(--purple); border: 1px solid var(--purple-dark); border-radius: 3px; }
.tree-insertion-key i { background: var(--yellow); box-shadow: 0 0 0 3px var(--yellow-soft); }
.tree-scroll { overflow-x: auto; padding: 10px 2px 4px; }
.tree-canvas { padding: 0 18px; }
.tree-level { position: relative; display: grid; grid-template-columns: repeat(var(--node-count), minmax(78px, 1fr)); gap: 18px; margin-bottom: 30px; }
.tree-level:last-child { margin-bottom: 0; }
.tree-level:not(:first-child)::before { content: ""; position: absolute; left: 4%; right: 4%; top: -15px; height: 1px; background: #D5D8E2; }
.tree-node { position: relative; z-index: 1; min-width: 0; padding: 8px 9px; color: #555B6C; background: white; border: 1px solid #D9DCE6; border-radius: 9px; text-align: center; }
.tree-level:not(:first-child) .tree-node::before { content: ""; position: absolute; left: 50%; top: -16px; width: 1px; height: 15px; background: #D5D8E2; }
.tree-node small, .tree-node strong, .tree-node span, .tree-node em { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tree-node small { margin-bottom: 4px; color: #858A99; font-size: .54rem; font-weight: 850; letter-spacing: .05em; text-transform: uppercase; }
.tree-node strong { font: 750 .59rem ui-monospace, SFMono-Regular, Menlo, monospace; }
.tree-node span { margin-top: 4px; color: #888D9C; font: .52rem ui-monospace, SFMono-Regular, Menlo, monospace; }
.tree-node em { margin-top: 5px; font-size: .5rem; font-style: normal; font-weight: 850; letter-spacing: .03em; text-transform: uppercase; }
.tree-node.root { max-width: 240px; justify-self: center; width: 100%; color: white; background: var(--text); border-color: var(--text); }
.tree-node.root small { color: #C9CBD3; }
.tree-node.leaf-node { border-top: 3px solid var(--yellow); }
.tree-node.new-path { color: var(--purple-dark); background: var(--purple-soft); border-color: #BEB7F3; animation: tree-insert .62s ease both; }
.tree-node.root.new-path { color: white; background: var(--purple); border-color: var(--purple); animation-delay: .42s; }
.tree-level:nth-last-child(2) .tree-node.new-path { animation-delay: .22s; }
.tree-node.leaf-node.new-path { color: #6A4808; background: #FFF8EA; border-color: #E6CA91; border-top-color: var(--yellow); animation-delay: 0s; }
.tree-node.leaf-node.owned-leaf { color: white; background: var(--purple); border-color: var(--purple-dark); border-top-color: var(--purple-dark); box-shadow: 0 0 0 3px var(--purple-soft); }
.tree-node.leaf-node.owned-leaf small, .tree-node.leaf-node.owned-leaf span { color: #E4E0FF; }
.tree-node.leaf-node.owned-leaf em { color: #FFF1C7; }
.tree-node.leaf-node.owned-leaf.new-path { color: white; background: var(--purple); border-color: var(--purple-dark); border-top-color: var(--yellow); }
.tree-insertion-receipt { display: grid; grid-template-columns: auto auto 1fr; align-items: center; gap: 10px; margin-top: 14px; padding: 10px 12px; color: var(--purple-dark); background: var(--purple-soft); border: 1px solid #D4CFF8; border-radius: 9px; }
.tree-insertion-receipt span { font-size: .6rem; font-weight: 850; letter-spacing: .05em; text-transform: uppercase; }
.tree-insertion-receipt strong { font: 750 .63rem ui-monospace, SFMono-Regular, Menlo, monospace; }
.tree-insertion-receipt small { justify-self: end; color: var(--muted); font-size: .6rem; }
.note-construction-card { margin-top: 20px; padding: 18px; background: #F8F8FC; border: 1px solid var(--border); border-radius: 13px; }
.note-construction-card > p { max-width: 820px; color: var(--muted); font-size: .78rem; line-height: 1.55; }
.commitment-formula { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1px; margin: 14px 0; overflow: hidden; background: var(--border); border: 1px solid var(--border); border-radius: 10px; }
.commitment-formula > span, .commitment-formula > b { padding: 8px 10px; background: white; }
.commitment-formula > span { color: var(--muted); font-size: .58rem; font-weight: 850; letter-spacing: .06em; text-transform: uppercase; }
.commitment-formula > b { color: var(--text); font-size: .66rem; overflow: hidden; text-overflow: ellipsis; }
.commitment-formula > i { display: none; }
.commitment-construction { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 9px; margin: 12px 0 18px; }
.commitment-construction > div { position: relative; min-width: 0; padding: 12px; background: white; border: 1px solid #D8D5F3; border-radius: 10px; }
.commitment-construction > div:not(:last-child)::after { content: "→"; position: absolute; right: -9px; top: 50%; z-index: 2; color: var(--purple); background: #F8F8FC; transform: translate(50%, -50%); }
.commitment-construction span { display: grid; place-items: center; width: 22px; height: 22px; margin-bottom: 9px; color: white; background: var(--purple); border-radius: 7px; font-size: .62rem; font-weight: 850; }
.commitment-construction small, .commitment-construction strong { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.commitment-construction small { color: var(--muted); font-size: .56rem; font-weight: 800; text-transform: uppercase; }
.commitment-construction strong { margin-top: 4px; font-size: .67rem; }
.commitment-construction.pending { opacity: .72; }
.owned-notes { padding-top: 15px; border-top: 1px solid var(--border); }
.owned-notes-heading { display: flex; justify-content: space-between; gap: 12px; margin-bottom: 10px; }
.owned-notes-heading strong { font-size: .75rem; }
.owned-notes-heading span { color: var(--muted); font-size: .64rem; }
.owned-notes table { width: 100%; border-collapse: collapse; font-size: .68rem; }
.owned-notes th, .owned-notes td { padding: 9px 10px; border-bottom: 1px solid var(--border); text-align: left; white-space: nowrap; }
.owned-notes th { color: var(--muted); font-size: .55rem; letter-spacing: .05em; text-transform: uppercase; }
.audit-registration-status { display: flex; align-items: center; gap: 11px; margin: 16px 0; padding: 13px; color: #4B340B; background: var(--yellow-soft); border: 1px solid #E9D1A4; border-radius: 10px; }
.audit-registration-status > span { display: grid; place-items: center; width: 28px; height: 28px; flex: 0 0 auto; color: white; background: var(--yellow); border-radius: 8px; font-weight: 900; }
.audit-registration-status strong, .audit-registration-status small { display: block; }
.audit-registration-status strong { font-size: .75rem; }
.audit-registration-status small { margin-top: 3px; color: #785B25; font-size: .64rem; }
.audit-root-strip { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 14px; }
.audit-root-strip span { min-width: 190px; padding: 9px 11px; background: #F7F7FA; border: 1px solid var(--border); border-radius: 9px; }
.audit-root-strip small, .audit-root-strip strong { display: block; }
.audit-root-strip small { color: var(--muted); font-size: .55rem; text-transform: uppercase; }
.audit-root-strip strong { margin-top: 3px; font-size: .65rem; }
.audit-perspectives { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.audit-perspective { min-width: 0; padding: 16px; background: #FAFAFC; border: 1px solid var(--border); border-radius: 12px; }
.audit-perspective.auditor { background: #FFF9ED; border-color: #E5C98F; }
.audit-perspective header { display: flex; align-items: center; gap: 9px; }
.audit-perspective header > span { display: grid; place-items: center; width: 28px; height: 28px; color: var(--purple); background: var(--purple-soft); border-radius: 8px; font-size: .62rem; font-weight: 900; }
.audit-perspective.auditor header > span { color: white; background: var(--yellow); }
.audit-perspective header small, .audit-perspective header strong { display: block; }
.audit-perspective header small { color: var(--muted); font-size: .53rem; text-transform: uppercase; }
.audit-perspective header strong { font-size: .78rem; }
.audit-perspective > p { min-height: 54px; color: var(--muted); font-size: .66rem; line-height: 1.45; }
.opaque-commitment, .opened-note { margin-top: 8px; padding: 10px; background: white; border: 1px solid var(--border); border-radius: 9px; }
.opaque-commitment span, .opaque-commitment strong, .opaque-commitment small, .opened-note span, .opened-note strong, .opened-note small, .opened-note b { display: block; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.opaque-commitment span, .opened-note span { color: var(--muted); font-size: .54rem; text-transform: uppercase; }
.opaque-commitment strong, .opened-note strong { margin-top: 4px; font-size: .7rem; }
.opaque-commitment small, .opened-note small, .opened-note b { margin-top: 4px; color: var(--muted); font-size: .57rem; }
.toast-region { position: fixed; right: 18px; bottom: 18px; z-index: 60; display: grid; gap: 8px; }
.toast { max-width: 360px; padding: 12px 15px; color: white; background: var(--text); border-radius: 10px; box-shadow: var(--shadow); font-size: .8rem; animation: toast-in .2s ease; }
.working { display: inline-flex; align-items: center; gap: 8px; }
.working::before { content: ""; width: 13px; height: 13px; border: 2px solid currentColor; border-right-color: transparent; border-radius: 50%; animation: spin .7s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
@keyframes toast-in { from { opacity: 0; transform: translateY(6px); } }
@keyframes key-reveal { from { opacity: 0; transform: translateY(8px); filter: blur(3px); } to { opacity: 1; transform: none; filter: none; } }
@keyframes derive-line { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@keyframes channel-establish { from { opacity: .15; transform: scale(.72); } to { opacity: 1; transform: scale(1); } }
@keyframes tree-insert { from { opacity: .25; transform: translateY(8px) scale(.96); box-shadow: 0 0 0 0 rgba(91,75,224,.26); } to { opacity: 1; transform: none; box-shadow: 0 0 0 5px rgba(91,75,224,0); } }

@media (max-width: 980px) {
  .topbar { grid-template-columns: auto 1fr; }
  .protocol-nav { grid-row: 2; grid-column: 1 / -1; justify-content: flex-start; overflow-x: auto; }
  .identity-chip { justify-self: end; }
  .protocol-grid { grid-template-columns: repeat(2, 1fr); }
  .workspace-grid { grid-template-columns: minmax(0, 1fr); }
  .activity-list { max-height: 220px; }
  .scenario-layout { grid-template-columns: 1fr; }
}
@media (max-width: 680px) {
  .page-wrap { width: min(100% - 24px, 1240px); }
  .topbar { padding: 10px 12px; gap: 10px; }
  .brand small { display: none; }
  .identity-chip { max-width: 132px; }
  .chooser { padding-top: 48px; }
  .protocol-grid { grid-template-columns: 1fr; }
  .protocol-card { min-height: 220px; }
  .workspace-head { display: block; }
  .head-actions { margin-top: 18px; }
  .progress { grid-template-columns: 1fr; }
  .progress li { min-height: 48px; }
  .progress li span:last-child { display: none; }
  .stage-panel { padding: 18px; }
  .stage-hero { display: block; }
  .stage-context { margin-top: 16px; }
  .actor-box { min-width: 0; flex: 1; }
  .detail-grid, .leaf-list { grid-template-columns: 1fr; }
  .ceremony-grid { grid-template-columns: 1fr; }
  .auditor-keygen { padding: 14px; }
  .auditor-keygen-outputs::before { left: 50%; right: auto; border-right: 0; }
  .ceremony-progress { grid-template-columns: 1fr; gap: 4px; }
  .ceremony-progress i { display: none; }
  .ceremony-footer { align-items: stretch; flex-direction: column; }
  .registry-row { grid-template-columns: 32px 1fr; }
  .registry-row > :nth-child(3), .registry-row > :nth-child(4) { grid-column: 2; }
  .registration-gate { align-items: stretch; flex-direction: column; }
  .registration-gate .button { width: 100%; }
  .registration-process { grid-template-columns: 1fr; }
  .process-connector { justify-self: center; transform: rotate(90deg); }
  .channel-matrix-footer { align-items: stretch; flex-direction: column; }
  .channel-matrix-footer .button-row { display: grid; grid-template-columns: 1fr; }
  .experience-header { align-items: flex-start; flex-direction: column; }
  .scenario-page > .flow-card { min-height: 0; padding: 18px; }
  .dvp-parties, .terms-form, .term-sheet, .balance-movement, .acceptance-sheet { grid-template-columns: 1fr; }
  .dvp-party-link { justify-self: center; transform: rotate(90deg); }
  .holdings-strip { align-items: stretch; flex-direction: column; }
  .balance-movement > b { justify-self: center; transform: rotate(90deg); }
  .term-leg-fields > div, .term-leg-card dl { grid-template-columns: 1fr; }
  .payment-construction { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .amount-action, .dvp-initiation-process, .acceptance-summary dl, .leg-status-strip { grid-template-columns: 1fr; }
  .dvp-initiation-process .process-connector { justify-self: center; transform: rotate(90deg); }
  .term-swap { justify-self: center; transform: rotate(90deg); }
  .transfer-identity { grid-template-columns: 1fr; }
  .scenario-footer { align-items: stretch; flex-direction: column-reverse; }
  .scenario-footer > span { display: none; }
  .scenario-footer .button { width: 100%; text-align: center; }
  .transaction { grid-template-columns: 1fr; }
  .shielding-network-head, .tree-heading { align-items: flex-start; flex-direction: column; }
  .tree-insertion-receipt { grid-template-columns: 1fr; }
  .tree-insertion-receipt small { justify-self: start; }
  .metric-row, .commitment-formula, .commitment-construction, .audit-perspectives, .auction-identity, .auction-key-pair, .registration-binding, .listing-visibility, .auction-view-grid, .bid-entry-grid, .sealed-bid-receipt, .winner-announcement, .settlement-outputs, .settlement-contract, .auction-visibility-matrix, .circuit-flow, .tag-mode-grid, .tag-construction, .channel-record, .payment-publication, .registry-binding-visual { grid-template-columns: 1fr; }
  .nft-certificate { grid-template-columns: 1fr; }
  .nft-certificate dl { grid-template-columns: 1fr; }
  .auction-key-pair > span, .registration-binding > b { justify-self: center; }
  .auction-clock { grid-template-columns: auto 1fr; }
  .auction-clock > b { grid-column: 1 / -1; }
  .perspective-switcher { display: grid; grid-template-columns: 1fr; }
  .opaque-bid-stream > div, .privacy-boundary { grid-template-columns: 1fr; }
  .circuit-boundary-label { display: none; }
  .circuit-flow > i { justify-self: center; transform: rotate(90deg); }
  .tag-construction > i { justify-self: center; transform: rotate(90deg); }
  .tag-registry-labels { display: none; }
  .binding-path { grid-template-columns: 1fr auto 1fr; }
  .commitment-construction > div:not(:last-child)::after { right: 50%; top: auto; bottom: -10px; transform: translate(50%, 50%) rotate(90deg); }
  .owned-notes-heading { align-items: flex-start; flex-direction: column; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}
.protocol-primitives { margin: 20px 0; border: 1px solid var(--border, #E3E5EF); border-radius: 12px; padding: 14px 18px; }
.protocol-primitives summary { cursor: pointer; font-weight: 600; }
.protocol-primitives dl { margin: 14px 0 0; }
.protocol-primitives dl > div { display: flex; flex-wrap: wrap; gap: 6px 20px; padding: 9px 0; }
.protocol-primitives dt { flex: 0 0 155px; color: #626577; }
.protocol-primitives dd { flex: 1 1 210px; margin: 0; overflow-wrap: anywhere; }

/* Retail: notes, channel requests and the live tree share the action workspace. */
.retail-workspace { overflow: visible; }
.retail-workspace h3 { margin: 0; font-size: 1rem; }
.retail-workspace code { overflow-wrap: anywhere; }
.retail-wallet-strip { display: grid; grid-template-columns: 1fr 32px 1fr 1fr; align-items: center; gap: 18px; margin: 22px 0; padding: 20px 24px; border: 1px solid var(--border); border-radius: 16px; background: #FAFAFD; }
.retail-wallet-strip > div { display: grid; gap: 5px; }
.retail-wallet-strip span, .retail-wallet-strip small { font-size: .68rem; color: var(--muted); }
.retail-wallet-strip strong { font-size: 1.8rem; letter-spacing: -.06em; }
.retail-wallet-strip .private strong { color: var(--purple); }
.retail-wallet-strip > b { font-size: 1.5rem; color: #ABA5D5; }
.retail-form { display: flex; align-items: end; gap: 16px; margin: 20px 0; }
.retail-form label, .retail-funding-controls label, .retail-payment-select, .retail-viewer label { display: grid; gap: 8px; flex: 1; min-width: 0; color: #686B7C; font-size: .7rem; font-weight: 750; }
.retail-workspace input[type=number], .retail-workspace input[inputmode=numeric], .retail-workspace select { min-width: 0; width: 100%; border: 1px solid #DCDCE6; background: white; border-radius: 9px; color: var(--text); padding: 12px; font-size: .83rem; font-weight: 650; min-height: 44px; }
.retail-workspace input:focus, .retail-workspace select:focus { outline: 2px solid #A69CEA; outline-offset: 2px; }
.retail-funding-controls { display: flex; align-items: end; gap: 12px; padding: 15px; background: #FAFAFC; border: 1px solid var(--border); border-radius: 12px; }
.retail-funding-controls label { flex: 0 1 250px; }
.retail-funding-controls small { align-self: center; color: var(--muted); font-size: .67rem; }
.retail-mint-stage { margin-top: 24px; }
.retail-mint-stage h3, .retail-shield-plan h3 { margin: 0; font-size: 1rem; }
.retail-shield-plan { margin-top: 26px; padding-top: 24px; border-top: 1px solid var(--border); }
.retail-split-heading { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 10px; margin: 18px 0 12px; }
.retail-split-heading strong { font-size: .78rem; }
.retail-split-heading .button { font-size: .72rem; min-height: 36px; padding: 8px 10px; }
.retail-note-amounts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.retail-note-amounts label { display: grid; gap: 10px; min-width: 0; padding: 12px; background: #F7F5FF; border: 1px solid #DFD9F8; border-radius: 10px; }
.retail-note-amounts label > span { color: var(--purple-dark); font-size: .72rem; font-weight: 750; }
.retail-shield-summary { display: grid; gap: 7px; margin: 16px 0; padding: 14px; border-radius: 10px; background: var(--yellow-soft); color: #785411; }
.retail-shield-summary.ready { background: var(--success-soft); color: #0D6447; }
.retail-shield-summary strong { font-size: .86rem; overflow-wrap: anywhere; }
.retail-shield-summary span { font-size: .75rem; line-height: 1.5; }
.retail-shield-submit { width: 100%; }
.retail-shield-scene { display: grid; grid-template-columns: 1fr .65fr 1.3fr .65fr 1fr; min-height: 210px; align-items: center; padding: 25px 30px; margin: 20px 0; border-radius: 20px; background: radial-gradient(ellipse at 50% 50%, #EDEAFF, #FAF9FF 65%); border: 1px solid #E4DFF7; }
.retail-token-source, .retail-vault { display: grid; justify-items: center; text-align: center; gap: 8px; }
.retail-token-source strong, .retail-vault strong { font-size: .84rem; }
.retail-token-source small, .retail-vault small { color: #76748A; font-size: .66rem; }
.retail-coins { display: flex; align-items: end; margin-bottom: 6px; height: 55px; }
.retail-coins i { display: grid; place-items: center; width: 42px; height: 42px; border: 3px solid #D8AA36; border-radius: 50%; background: #FFE7A6; color: #9B6B08; font-size: 1.15rem; font-weight: 900; font-style: normal; box-shadow: 0 4px 0 #C59224; }
.retail-coins i + i { margin-left: -12px; }
.retail-coins i:nth-child(2) { transform: translateY(-12px); }
.retail-vault > span { display: grid; place-items: center; width: 76px; height: 76px; border-radius: 18px; border: 1px solid #9C8FF1; background: #5B4BE0; color: white; font-size: 2.8rem; box-shadow: 0 12px 25px #5B4BE028, inset 0 0 0 7px #FFFFFF14; }
.retail-flow-track { position: relative; height: 2px; background: #B9B0E9; align-self: center; margin-bottom: 28px; }
.retail-flow-track:after { content: '›'; position: absolute; right: -1px; top: -14px; font-size: 24px; color: #9486D8; }
.retail-flow-track span { position: absolute; top: 14px; width: 100%; text-align: center; font: .6rem ui-monospace, monospace; color: #7A70A4; }
.retail-flow-track i { position: absolute; width: 6px; height: 6px; border-radius: 50%; background: var(--purple); top: -2px; opacity: 0; }
.animating .retail-flow-track i { animation: retail-packet 1.2s linear infinite; }
.animating .retail-flow-track i:nth-child(2) { animation-delay: .4s; }
.animating .retail-flow-track i:nth-child(3) { animation-delay: .8s; }
.retail-output-stack { position: relative; height: 120px; margin-left: 16px; }
.retail-mini-note { position: absolute; top: calc(var(--i) * 10px); left: calc(var(--i) * 7px); z-index: calc(5 - var(--i)); display: grid; gap: 10px; width: 115px; padding: 14px; color: white; background: #6555E4; border: 1px solid #B5AAF6; border-radius: 10px; transform: rotate(calc(var(--i) * 3deg)); box-shadow: 0 6px 20px #4F3DA725; }
.retail-mini-note span { font-size: .5rem; letter-spacing: .08em; color: #DAD4FF; }
.retail-mini-note strong { min-width: 0; font-size: 1.1rem; overflow-wrap: anywhere; }
.retail-mini-note strong.long-amount { font-size: .82rem; line-height: 1.4; }
.retail-mini-note strong small { display: block; margin-top: 3px; font-size: .68rem; font-weight: 500; color: #DAD4FF; }
.retail-mini-note code { font-size: .56rem; background: transparent; color: #DED8FF; }
.phase-insert .retail-mini-note { animation: retail-note-arrive .55s ease both; animation-delay: calc(var(--i) * .15s); }
.retail-process { display: flex; flex-wrap: wrap; padding: 0; gap: 8px; margin: 24px 0; list-style: none; }
.retail-process li { display: flex; align-items: center; flex: 1 1 125px; gap: 9px; padding: 12px; border-radius: 10px; background: #F6F6FA; border: 1px solid #EBEAF1; }
.retail-process li > b { display: grid; place-items: center; flex-shrink: 0; width: 26px; height: 26px; border-radius: 50%; background: white; color: #898597; font-size: .7rem; }
.retail-process li > span { display: grid; gap: 4px; }
.retail-process strong { font-size: .66rem; }
.retail-process small { color: #8B879B; font-size: .55rem; }
.retail-process li.running { background: #EBE7FF; border-color: #9F91EC; box-shadow: 0 0 0 3px #5B4BE00B; }
.retail-process li.running > b { background: #5B4BE0; color: white; animation: retail-pulse 1s ease infinite; }
.retail-process li.done > b { color: #4F41C0; background: #E7E2FC; }
.retail-math { padding: 14px 16px; border: 1px solid #E8E5F2; border-radius: 12px; margin: 18px 0; background: #FDFBFF; }
.retail-math summary { cursor: pointer; font-size: .74rem; font-weight: 750; color: #6D5D9E; }
.retail-math p { font-size: .7rem; line-height: 1.7; color: #7C788A; }
.retail-hash-equation { display: flex; gap: 12px; flex-wrap: wrap; align-items: center; padding: 18px 0 4px; }
.retail-hash-equation > span { display: grid; gap: 6px; }
.retail-hash-equation small { color: #91889B; font-size: .65rem; }
.retail-hash-equation code { font-size: .63rem; }
.retail-hash-equation > b { color: #B7ABCA; }
.retail-hash-equation i { font-style: normal; color: #7F6DBC; font-size: .68rem; }
.retail-hash-equation .hash-result { background: #ECE7FF; padding: 10px; border-radius: 9px; }
.retail-math dl { display: grid; grid-template-columns: 160px minmax(0, 1fr); font-size: .69rem; gap: 8px; }
.retail-math dd { margin: 0; overflow-wrap: anywhere; font-family: ui-monospace, monospace; }
.retail-live-layout { display: grid; grid-template-columns: minmax(0, 1fr); gap: 24px; }
.retail-action-pane, .retail-live-tree { min-width: 0; }
.retail-tree-jump { margin: -4px 0 18px; text-align: right; }
.retail-tree-jump .button { font-size: .74rem; }
.retail-tree-panel { margin: 28px 0 0; border: 1px solid #DBD8E9; border-radius: 18px; overflow: hidden; background: #FCFBFF; scroll-margin-top: 115px; }
.retail-live-tree .retail-tree-panel { margin-top: 0; }
.retail-network-head { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 22px 22px 14px; }
.retail-network-head .eyebrow { margin: 0 0 6px; font-size: .6rem; }
.retail-traffic-control { display: flex; align-items: center; gap: 9px; font-size: .65rem; font-weight: 700; white-space: nowrap; }
.traffic-dot { width: 7px; height: 7px; background: #CCC9D9; border-radius: 50%; }
.traffic-dot.on { background: #5B4BE0; box-shadow: 0 0 0 4px #E6E1FF; animation: retail-pulse 1.5s infinite; }
.retail-tree-legend { display: flex; flex-wrap: wrap; gap: 12px 20px; padding: 0 22px 18px; color: #8A839F; font-size: .58rem; }
.retail-tree-legend span { display: flex; gap: 6px; align-items: center; }
.retail-tree-legend i { display: inline-block; width: 8px; height: 8px; border-radius: 3px; }
.retail-tree-legend .purple { background: #6E5DDC; }
.retail-tree-legend .gold { background: #D9A637; }
.retail-tree-legend .grey { background: #D7D4E2; }
.retail-tree-legend b { margin-left: auto; font-weight: 600; }
.retail-tree-toolbar { display: flex; align-items: center; flex-wrap: wrap; gap: 16px; padding: 14px 22px; border-top: 1px solid #EAE6F3; background: white; }
.retail-tree-paging { display: flex; align-items: center; gap: 12px; }
.retail-tree-paging strong { min-width: 100px; text-align: center; font-size: .78rem; }
.retail-tree-toolbar > span { color: var(--muted); font-size: .7rem; }
.retail-tree-toolbar button, .retail-tree-map button { min-height: 36px; padding: 7px 10px; color: var(--text); background: white; border: 1px solid #DCD6EB; border-radius: 7px; font-size: .75rem; cursor: pointer; }
.retail-tree-toolbar button:disabled { opacity: .35; cursor: default; }
.retail-tree-follow { display: flex; align-items: center; gap: 8px; margin-left: auto; font-size: .75rem; font-weight: 650; }
.retail-tree-follow input { width: 17px; height: 17px; min-height: 0; margin: 0; padding: 0; accent-color: var(--purple); }
.retail-tree-map { position: relative; display: flex; flex-wrap: wrap; gap: 8px; max-height: 128px; overflow: auto; padding: 4px 22px 16px; background: white; }
.retail-tree-map button { min-width: 52px; font-size: .68rem; }
.retail-tree-map .owned-group { color: var(--purple-dark); background: var(--purple-soft); }
.retail-tree-map .latest-group { border-color: #BE942F; }
.retail-tree-map [aria-current="true"] { outline: 2px solid var(--text); outline-offset: 1px; font-weight: 800; }
.retail-tree-scroll { max-height: 470px; overflow: auto; padding: 16px 20px; background-image: radial-gradient(#E5E1EF 1px, transparent 1px); background-size: 18px 18px; border-top: 1px solid #EAE6F3; border-bottom: 1px solid #EAE6F3; }
.retail-tree-svg { display: block; margin: auto; }
.retail-tree-edges path { fill: none; stroke: #DDD8EE; stroke-width: 2; }
.retail-tree-edges .new-path { stroke: #B29B65; stroke-dasharray: 6 4; animation: retail-tree-flow 1.5s linear infinite; }
.retail-tree-node rect { fill: #F8F6FD; stroke: #D4CEE5; stroke-width: 1.5; }
.retail-tree-node text { text-anchor: middle; fill: #7D738F; font: 600 10px system-ui, sans-serif; }
.retail-tree-node .hash { font: 500 10px ui-monospace, monospace; fill: #706283; }
.retail-tree-node[data-retail-leaf] { cursor: pointer; outline: none; }
.retail-tree-node[data-note-leaf] { cursor: pointer; outline: none; }
.retail-tree-node[data-retail-leaf]:hover rect, .retail-tree-node:focus rect, .retail-tree-node.selected-leaf rect { stroke-width: 3; stroke: #9D7BCE; }
.retail-tree-node.owned-leaf rect { fill: #6654D8; stroke: #8775E2; }
.retail-tree-node.owned-leaf text { fill: #F6F3FF; }
.retail-tree-node.spent-leaf rect { fill: #C1B8DD; stroke: #9C8FBF; }
.retail-tree-node.spent-leaf text { fill: #524A68; }
.retail-tree-node.inserted rect { stroke: #D8AA45; stroke-width: 3; animation: retail-tree-insert .7s ease both; }
.retail-tree-node.empty-leaf rect { fill: #FAF9FE; stroke-dasharray: 3 4; }
.retail-tree-node.empty-leaf text { fill: #AAA1BD; }
.retail-tree-root rect { fill: #26213D; }
.retail-tree-root text { fill: #C8BFE6; text-anchor: middle; font: 600 9px system-ui, sans-serif; letter-spacing: .7px; }
.retail-tree-root .hash { fill: white; font: 600 10px ui-monospace, monospace; letter-spacing: 0; }
.retail-collapsed-path { fill: #A194B5; font: 9px system-ui, sans-serif; }
.retail-leaf-inspector { display: grid; grid-template-columns: 1.6fr 1fr; gap: 25px; padding: 20px 22px; background: white; }
.retail-leaf-inspector > div { display: grid; align-content: start; gap: 7px; min-width: 0; }
.retail-leaf-inspector small { font-size: .56rem; letter-spacing: .08em; color: #998CA8; }
.retail-leaf-inspector strong { font-size: .82rem; }
.retail-leaf-inspector code { font-size: .61rem; color: #6E588D; }
.retail-leaf-inspector span { font-size: .66rem; color: #93859B; }
.retail-tree-hint { font-size: .64rem; color: #978AA8; padding: 0 22px 14px; background: white; }
.retail-chain-ticker { display: flex; gap: 8px; flex-wrap: wrap; padding: 12px; border-top: 1px solid #E7E2EF; }
.retail-chain-ticker > span { display: flex; align-items: center; gap: 8px; padding: 6px 10px; border-radius: 7px; background: white; color: #91829D; font-size: .55rem; }
.retail-chain-ticker b { color: #695296; font-size: .5rem; }
.retail-chain-ticker code { font-size: .54rem; }
.retail-section-heading { display: flex; justify-content: space-between; align-items: center; gap: 20px; margin: 28px 0 14px; }
.retail-section-heading > span { color: #96879F; font-size: .67rem; }
.retail-note-inventory { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 12px; }
.retail-note-select { cursor: pointer; padding: 0; background: transparent; border: none; text-align: left; }
.retail-note-card { border: 1px solid #CEC3EB; border-radius: 12px; padding: 16px; color: #57408C; background: linear-gradient(135deg, #F4EFFF, #FFF); box-shadow: 0 5px 13px #5E428307; min-width: 0; }
.retail-note-card header { display: flex; justify-content: space-between; gap: 10px; font-size: .6rem; }
.retail-note-card header b { font-size: .55rem; white-space: nowrap; color: #A08BB5; }
.retail-note-card > strong { display: block; font-size: 1.55rem; margin: 14px 0; letter-spacing: -.05em; }
.retail-note-card > strong small { font-size: .65rem; font-weight: 500; }
.retail-note-card > code { font-size: .59rem; background: transparent; color: #9B89AE; }
.retail-note-card footer { margin-top: 9px; font-size: .57rem; color: #9B89AE; }
.retail-note-select:hover .retail-note-card { border-color: #8D70CE; box-shadow: 0 4px 14px #7650B520; }
.retail-note-select.spent { opacity: .57; }
.retail-note-card.placeholder { border-style: dashed; opacity: .65; }
.retail-note-card.recipient { color: #876020; border-color: #EDD49F; background: #FFF8E9; }
.retail-note-card.change { color: #665294; border-color: #D5CAE8; background: #F7F2FE; }
.retail-channel-map { margin: 25px 0; background: radial-gradient(ellipse at 25% 50%, #F0EBFF, #FCFAFF); border: 1px solid #E6DFF0; border-radius: 20px; padding: 20px; }
.retail-channel-map svg { width: 100%; display: block; max-height: 400px; }
.retail-channel-map path { fill: none; stroke: #AB93D8; stroke-width: 2; }
.retail-channel-map path.pending { stroke: #CBBBD9; stroke-dasharray: 5 7; }
.retail-channel-map rect { fill: white; stroke: #DACCEB; }
.retail-channel-map text { fill: #69547F; font: 600 13px system-ui, sans-serif; }
.retail-channel-map .channel-sub { fill: #AE99BD; font-size: 10px; }
.retail-channel-map .channel-sender rect { fill: #6550D0; stroke: #7763D6; }
.retail-channel-map .channel-sender text { fill: white; }
.retail-channel-map .channel-sender .channel-sub { fill: #D9CBF4; }
.channel-packet { fill: #A590D8; }
.retail-map-caption { display: flex; align-items: center; gap: 16px; border-top: 1px solid #EAE2F3; padding-top: 16px; }
.retail-map-caption span { color: #A28CB6; font-size: .53rem; letter-spacing: .09em; }
.retail-map-caption strong { color: #735393; font-size: .72rem; }
.retail-map-caption small { color: #A692B7; font-size: .61rem; margin-left: auto; }
.retail-channel-request { display: grid; grid-template-columns: 1fr 30px 1.6fr 30px 1.6fr; align-items: center; margin: 26px 0; gap: 10px; }
.retail-channel-request > div { display: grid; justify-items: center; text-align: center; gap: 8px; }
.retail-channel-request strong, .retail-channel-request b { font-size: .77rem; }
.retail-channel-request small { font-size: .6rem; color: #98849F; }
.retail-channel-request > i { color: #B69BC7; font-style: normal; }
.retail-envelope { border: 1px solid #DAC9E6; padding: 20px 12px; background: #FAF4FF; border-radius: 10px; }
.retail-envelope > span { display: flex; gap: 6px; }
.retail-envelope code { font-size: .63rem; background: #EEDFF7; color: #8E69AD; padding: 6px; border-radius: 5px; }
.animating .retail-envelope { animation: retail-pulse 1s infinite; }
.retail-channel-list { display: grid; gap: 12px; margin-top: 25px; }
.retail-channel-list .channel-record { grid-template-columns: 42px 1.3fr 1fr auto; align-items: center; margin: 0; }
.retail-channel-list .channel-record .avatar { display: grid; }
.retail-channel-list .channel-record code { font-size: .56rem; color: #A18AB2; }
.retail-binding { padding: 16px; margin-top: 20px; }
.retail-binding .binding-recipient { min-width: 150px; }
.retail-prerequisites { display: flex; gap: 25px; font-size: .8rem; }
.retail-prerequisites a { color: var(--purple); }
.retail-payment-scene { display: grid; grid-template-columns: 1fr 100px 1fr; gap: 0; align-items: center; padding: 26px 0; max-width: 880px; margin: auto; }
.retail-payment-outputs { display: grid; gap: 14px; }
.retail-payment-outputs .retail-note-card { padding: 14px 20px; }
.retail-payment-outputs .retail-note-card > strong { margin: 8px 0; }
.retail-payment-outputs .retail-note-card footer { display: none; }
.retail-nullifier { display: grid; gap: 7px; margin-top: 14px; padding: 14px 16px; background: #FBF5F8; border: 1px dashed #E2CBD5; border-radius: 10px; }
.retail-nullifier span { font-size: .64rem; color: #A5768D; font-weight: 700; }
.retail-nullifier code { font-size: .59rem; }
.retail-nullifier small { font-size: .6rem; color: #A68B99; }
.retail-split-path { position: relative; }
.retail-split-path svg { width: 100%; height: 235px; }
.retail-split-path path { fill: none; stroke: #CCBCDF; stroke-width: 2; }
.animating .retail-split-path path { stroke: #9476C1; stroke-dasharray: 5 4; animation: retail-tree-flow .8s linear infinite; }
.retail-split-path circle { fill: #F3EAFE; stroke: #AD8FD0; }
.retail-split-path text { fill: #9975C2; }
.retail-split-path > span { position: absolute; left: 0; right: 0; text-align: center; top: 145px; font-size: .57rem; color: #AA91BC; }
.retail-conservation { display: flex; align-items: center; flex-wrap: wrap; justify-content: center; gap: 14px; padding: 16px; margin-bottom: 20px; border-radius: 10px; background: #F8F4FC; font-size: .69rem; color: #9783AC; }
.retail-conservation b { margin-left: 5px; color: #6E518C; font-size: .86rem; }
.retail-conservation i { font-style: normal; color: #B6A2C8; }
.retail-conservation small { font-size: .6rem; }
.retail-proof-preview { display: flex; align-items: center; gap: 18px; border: 1px solid #DCD0EC; background: #FBF7FF; padding: 22px; border-radius: 12px; }
.retail-proof-preview > span, .retail-proof-seal { display: grid; place-items: center; width: 46px; height: 46px; flex-shrink: 0; color: #8061A8; border-radius: 12px; background: #EDE2F8; font-size: 1.5rem; }
.retail-proof-preview > div { display: grid; gap: 8px; }
.retail-proof-preview strong { font-size: .76rem; }
.retail-proof-preview small { font-size: .65rem; color: #A28DAC; }
.retail-publication { border: 1px solid #DDD2E8; padding: 22px; background: #FDFCFE; border-radius: 14px; }
.retail-publication > header { display: flex; gap: 15px; align-items: center; margin-bottom: 20px; }
.retail-publication header small { font-size: .56rem; color: #A28BAC; letter-spacing: .08em; }
.retail-publication header h3 { margin-top: 5px; font-size: .9rem; }
.retail-public-fields { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.retail-public-fields > span { display: grid; gap: 7px; background: #F3EDF9; border-radius: 8px; padding: 12px; min-width: 0; }
.retail-public-fields small { color: #9F84B1; font-size: .61rem; }
.retail-public-fields code { font-size: .61rem; }
.retail-output-formula { padding: 15px 0 0; font-size: .69rem; }
.retail-output-formula > code { display: block; margin-top: 8px; }
.retail-output-formula dl { grid-template-columns: 65px minmax(0, 1fr); }
.retail-tag-window header { display: grid; gap: 6px; }
.retail-tag-window header strong { font-size: .8rem; }
.retail-tag-window header span { font-size: .66rem; color: #A48FAF; }
.retail-tag-window > div { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-top: 14px; }
.retail-tag-window > div > span { display: grid; gap: 8px; padding: 13px 10px; border: 1px dashed #DBCFE3; border-radius: 9px; min-width: 0; }
.retail-tag-window .landed { background: #FDF4E0; border: 1px solid #DFC48A; }
.retail-tag-window small, .retail-tag-window code { font-size: .58rem; }
.retail-tag-window p { font-size: .69rem; color: #A38BAE; line-height: 1.7; }
.retail-payment-select { margin-top: 22px; }
.retail-scan-scene { display: flex; gap: 38px; align-items: center; padding: 30px; margin-top: 22px; border: 1px solid #E3D3EA; border-radius: 18px; background: linear-gradient(100deg, #F2EAFB, #FDF9FF); }
.retail-radar { flex-shrink: 0; width: 150px; height: 150px; position: relative; border: 1px solid #DCC9E9; border-radius: 50%; background: conic-gradient(from 0deg, #AC88CF33, transparent 25%); }
.retail-radar i { position: absolute; inset: 20px; border: 1px solid #DCC9E9; border-radius: 50%; }
.retail-radar i:nth-child(2) { inset: 40px; }
.retail-radar i:nth-child(3) { inset: 60px; background: #C4A4DF; }
.retail-radar b { position: absolute; inset: 0; display: grid; place-items: center; font-size: 1.2rem; color: #674283; }
.animating .retail-radar { animation: retail-pulse 1s ease infinite; }
.retail-scan-scene > div > small { font-size: .6rem; color: #A88CBA; letter-spacing: .08em; }
.retail-scan-scene h3 { margin: 10px 0; }
.retail-scan-scene code { font-size: .7rem; }
.retail-scan-scene p { font-size: .71rem; line-height: 1.8; color: #A18BAD; }
.retail-recovered { display: grid; grid-template-columns: 240px 1fr; gap: 25px; align-items: center; margin-top: 25px; }
.retail-recovered > div + div { display: grid; gap: 12px; }
.retail-recovered strong { font-size: .85rem; }
.retail-recovered code, .retail-recovered span { font-size: .7rem; }
.retail-recovered small { font-size: .65rem; color: #A087AB; }
.retail-viewer { display: flex; align-items: center; gap: 30px; margin-top: 24px; }
.retail-viewer > div { display: grid; gap: 7px; flex: 1; }
.retail-viewer small { font-size: .56rem; color: #A187AB; }
.retail-viewer strong { font-size: 1.5rem; color: #775398; }
@keyframes retail-packet { 0% { left: 0; opacity: 0; } 10%, 80% { opacity: 1; } 100% { left: 100%; opacity: 0; } }
@keyframes retail-pulse { 50% { box-shadow: 0 0 0 7px #9A79C318; } }
@keyframes retail-note-arrive { from { opacity: 0; translate: -20px 0; } to { opacity: 1; translate: 0 0; } }
@keyframes retail-tree-flow { to { stroke-dashoffset: -30; } }
@keyframes retail-tree-insert { from { fill: #FFF0B6; stroke-width: 6; } to { stroke-width: 3; } }
@media (max-width: 900px) {
  .retail-channel-list .channel-record { grid-template-columns: 40px 1fr; }
  .retail-channel-list .channel-record > span:nth-child(3) { grid-column: 2; }
  .retail-channel-list .channel-record button { grid-column: 2; justify-self: start; }
}
@media (max-width: 600px) {
  .retail-wallet-strip { padding: 15px; gap: 12px; grid-template-columns: 1fr 16px 1fr; }
  .retail-wallet-strip > div:last-child { display: none; }
  .retail-wallet-strip strong { font-size: 1.55rem; }
  .retail-shield-scene { grid-template-columns: 1fr 22px 1fr; gap: 5px; padding: 22px 12px; }
  .retail-shield-scene > .retail-flow-track:nth-of-type(4) { grid-column: 2; grid-row: 2; margin: 30px 0; rotate: 90deg; }
  .retail-shield-scene > .retail-output-stack { grid-column: 1 / -1; grid-row: 3; width: 120px; justify-self: center; }
  .retail-shield-scene > .retail-flow-track:nth-of-type(4) span { display: none; }
  .retail-vault > span { width: 60px; height: 60px; }
  .retail-token-source strong, .retail-vault strong { font-size: .69rem; }
  .retail-form { flex-wrap: wrap; gap: 12px; }
  .retail-form label { flex-basis: 40%; }
  .retail-form label:has(#retailPaymentRecipient) { flex-basis: 100%; }
  .retail-form button { width: 100%; }
  .retail-funding-controls { flex-wrap: wrap; }
  .retail-funding-controls label { flex-basis: 100%; }
  .retail-process li { flex-basis: 40%; padding: 10px 8px; }
  .retail-process li strong { font-size: .59rem; }
  .retail-process li small { font-size: .51rem; }
  .retail-network-head { align-items: start; flex-direction: column; padding: 18px; }
  .retail-tree-legend { padding: 0 18px 14px; gap: 9px; }
  .retail-tree-legend b { margin-left: 0; }
  .retail-tree-scroll { padding-left: 10px; padding-right: 10px; }
  .retail-leaf-inspector { grid-template-columns: 1fr; gap: 16px; padding: 18px; }
  .retail-section-heading { display: grid; gap: 8px; }
  .retail-note-inventory { grid-template-columns: 1fr 1fr; gap: 8px; }
  .retail-note-card { padding: 12px 10px; }
  .retail-note-card header { flex-direction: column; gap: 5px; }
  .retail-note-card > code { font-size: .53rem; }
  .retail-map-caption { flex-wrap: wrap; gap: 8px; }
  .retail-map-caption small { flex-basis: 100%; margin-left: 0; }
  .retail-channel-map { padding: 12px; }
  .retail-channel-request { grid-template-columns: 1fr; justify-items: stretch; }
  .retail-channel-request > i { justify-self: center; rotate: 90deg; }
  .retail-payment-scene { grid-template-columns: minmax(0, 1fr) 35px minmax(0, 1fr); }
  .retail-payment-outputs .retail-note-card { padding: 10px; }
  .retail-payment-outputs .retail-note-card > strong { font-size: 1.3rem; }
  .retail-split-path > span { display: none; }
  .retail-nullifier { padding: 10px; }
  .retail-nullifier code, .retail-nullifier small { font-size: .5rem; }
  .retail-binding { padding: 12px; }
  .retail-publication { padding: 14px; }
  .retail-public-fields { grid-template-columns: 1fr; }
  .retail-publication header h3 { font-size: .76rem; }
  .retail-tag-window > div { grid-template-columns: 1fr; }
  .retail-math dl { grid-template-columns: 1fr; }
  .retail-math dd { font-size: .6rem; }
  .retail-scan-scene { flex-direction: column; padding: 20px; gap: 18px; }
  .retail-radar { width: 120px; height: 120px; }
  .retail-recovered { grid-template-columns: 1fr; }
  .retail-viewer { flex-direction: column; align-items: stretch; gap: 18px; }
}
@media (prefers-reduced-motion: reduce) {
  .retail-workspace *, .retail-workspace *:before, .retail-workspace *:after { animation: none !important; }
  .retail-workspace .channel-packet { display: none; }
}
@media (min-width: 1051px) {
  .retail-shield-action { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: start; gap: 24px; }
  .retail-shield-action > .retail-wallet-strip, .retail-shield-action > .retail-tree-jump, .retail-shield-action > .retail-mint-stage { grid-column: 1 / -1; margin-top: 0; margin-bottom: 0; }
  .retail-shield-action > .retail-tree-jump { margin-top: -16px; }
  .retail-shield-action > .retail-shield-plan { grid-column: 1; grid-row: span 3; margin: 0; padding-top: 20px; }
  .retail-shield-action > .retail-shield-scene, .retail-shield-action > .retail-process, .retail-shield-action > .retail-math { grid-column: 2; margin: 0; }
  .retail-shield-action > .retail-shield-scene { grid-template-columns: 1fr 24px 1fr 24px 1fr; padding: 26px 16px; }
  .retail-shield-action .retail-token-source strong, .retail-shield-action .retail-vault strong { font-size: .73rem; }
  .retail-shield-action .retail-mini-note { width: 100px; padding: 12px; }
}
.retail-workspace .table-wrap { overflow-x: auto; max-width: 100%; margin-top: 20px; }
.retail-workspace .table-wrap table { width: 100%; border-collapse: collapse; font-size: .67rem; }
.retail-workspace .table-wrap th, .retail-workspace .table-wrap td { padding: 12px; border-bottom: 1px solid var(--border); text-align: left; }
.retail-workspace .table-wrap th { background: #F7F5FC; color: #82728F; font-size: .58rem; text-transform: uppercase; }
.retail-workspace .table-wrap td small { display: block; margin-top: 5px; color: #8E829A; font-size: .57rem; }
.retail-workspace .table-wrap code { font-size: .62rem; }

/* The same shielding workspace across Retail, DvP and Auctions. */
.unified-shield-workspace > .panel-heading { margin-bottom: 12px; }
.shield-workbench { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 24px; align-items: start; margin: 24px 0; }
.shield-controls { padding: 22px; border: 1px solid var(--border); border-radius: 14px; }
.shield-controls h3 { margin: 0; }
.shield-controls > p, .unified-shield-workspace > p { color: var(--muted); font-size: .8rem; line-height: 1.65; }
.shield-controls .shield-status { min-height: 40px; font-size: .74rem; }
.shield-visual { min-width: 0; }
.shield-visual .retail-shield-scene { margin-top: 0; grid-template-columns: 1fr 24px 1fr 24px 1fr; padding: 26px 16px; }
.shield-visual .retail-token-source strong, .shield-visual .retail-vault strong { font-size: .74rem; }
.shield-visual .retail-mini-note { width: 100px; padding: 12px; }
.shield-visual .retail-math { margin-bottom: 0; }
.shielding-network { padding-top: 0; border-top: 0; }
.unified-note-inventory.note-construction-card { margin: 24px 0; padding: 0; background: none; border: 0; }
.note-inventory-item { min-width: 0; }
.note-inventory-item > summary { display: block; cursor: pointer; list-style: none; }
.note-inventory-item > summary::-webkit-details-marker { display: none; }
.note-inventory-item > summary:focus-visible { outline: 2px solid var(--purple); outline-offset: 3px; border-radius: 12px; }
.note-inventory-item[open] .retail-note-card { border-color: var(--purple); }
.note-inventory-item .retail-note-card strong small { margin-left: 5px; }
.note-inventory-item dl { display: grid; gap: 6px; margin: 0; padding: 14px; border: 1px solid var(--border); border-top: 0; border-radius: 0 0 12px 12px; font-size: .7rem; background: #FAFAFD; }
.note-inventory-item dt { color: var(--muted); }
.note-inventory-item dd { margin: 0 0 8px; overflow-wrap: anywhere; font-family: ui-monospace, monospace; }
.note-inventory-empty { margin: 0; padding: 16px 0; color: var(--muted); font-size: .8rem; }
.unified-shield-workspace .retail-tree-panel { margin-top: 0; }
.unified-shield-workspace .retail-wallet-strip span { overflow-wrap: anywhere; }
@media (max-width: 1050px) {
  .shield-workbench { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 600px) {
  .shield-controls { padding: 16px; }
  .shield-visual .retail-shield-scene { grid-template-columns: 1fr 22px 1fr; padding: 22px 12px; }
  .unified-note-inventory .retail-note-inventory { grid-template-columns: minmax(0, 1fr); }
}
.retail-binding .binding-path { display: block; }
.retail-binding .binding-path code { display: block; font-size: .62rem; margin-top: 7px; }
.recipient-choice.established:disabled { opacity: 1; color: var(--success); border-color: #B7DDCD; background: var(--success-soft); cursor: default; }