:root {
  /* Core */
  --bg-page: #ededed;
  --bg-surface: #fff;
  --bg-surface-alt: #f8fafc;
  --bg-surface-hover: #f5f5f5;
  --bg-input: #fff;
  --text-primary: #111;
  --text-secondary: #555;
  --text-tertiary: #888;
  --text-muted: #aaa;
  --text-heading: #111;
  /* Borders */
  --border-default: #d5d5d5;
  --border-light: #ebebeb;
  --border-heavy: #cbd5e1;
  --border-input: #ccc;
  /* Accent (same both themes) */
  --accent: #32aadd;
  --accent-hover: #2087a8;
  /* Cards */
  --card-bg: #fff;
  --card-border: #d5d5d5;
  /* HSM output */
  --out-bg: #fff;
  --out-hex: #2087a8;
  --out-key-color: #666;
  --out-val-color: #111;
  /* Activity */
  --ar-bg: #fff;
  --ar-border: #e2e8f0;
  --ar-summary-color: #334155;
  --ar-hsm-bg: #f8fafc;
  --ar-hsm-border: #e2e8f0;
  /* Pills / badges */
  --pill-algo-bg: #ede9fe;
  --pill-algo-color: #6d28d9;
  --pill-format-bg: #dbeafe;
  --pill-format-color: #1d4ed8;
  --pill-ok-bg: #dcfce7;
  --pill-ok-color: #166534;
  --pill-fail-bg: #fee2e2;
  --pill-fail-color: #991b1b;
  --pill-op-bg: #fef3c7;
  --pill-op-color: #92400e;
  /* Error */
  --error-bg: #fef2f2;
  --error-border: #fca5a5;
  --error-text: #b91c1c;
  /* Decoder */
  --decoder-header-bg: #f0f9ff;
  --decoder-header-border: #bae6fd;
  --decoder-row-border: #e2e8f0;
  --decoder-row-alt-bg: #f1f5f9;
  --decoder-subrow-bg: #f8fafc;
  /* Modals */
  --modal-overlay: rgba(0,0,0,0.25);
  --modal-bg: #fff;
  --modal-border: #d5d5d5;
  --modal-text: #222;
  --modal-hint: #999;
  /* Shadows */
  --shadow-sm: rgba(0,0,0,.08);
  --shadow-md: rgba(0,0,0,.12);
  /* Code */
  --code-bg: #f8fafc;
  --code-border: #e2e8f0;
  --code-color: #1e40af;
  /* Links */
  --link-color: #32aadd;
  /* Scrollbar */
  --scrollbar-thumb: #cbd5e1;
  /* Preset bar */
  --preset-btn-color: #1e293b;
  --preset-btn-bg: #e2e8f0;
  --preset-btn-border: #94a3b8;
  --preset-btn-hover-color: #111;
  --preset-btn-hover-bg: #cbd5e1;
  --preset-btn-hover-border: #64748b;
  --preset-btn-dis-color: #94a3b8;
  --preset-btn-dis-bg: #f1f5f9;
  --preset-btn-dis-border: #cbd5e1;
  --preset-reset-color: #dc2626;
  --preset-reset-bg: #fee2e2;
  --preset-reset-border: #fca5a5;
  --preset-reset-hover-color: #b91c1c;
  --preset-reset-hover-bg: #fecaca;
  --preset-action-color: #1e293b;
  --preset-action-bg: #e2e8f0;
  --preset-action-border: #94a3b8;
  --preset-label-color: #64748b;
  --preset-gear-bg: #e2e8f0;
  --preset-gear-color: #64748b;
  --preset-gear-border: #94a3b8;
  /* WAN spy */
  --wan-raw-bg: #f8fafc;
  --wan-raw-border: #e2e8f0;
  /* Topo domain columns */
  --topo-domain-aq: #f0fdf4;
  --topo-domain-iss: #faf5ff;
  --topo-domain-sch: #fffbeb;
  /* Topo action buttons */
  --topo-init-bg: #fffbeb;
  --topo-init-border: #f59e0b;
  --topo-init-color: #b45309;
  --topo-init-hover-bg: #fef3c7;
  --topo-init-hover-border: #b45309;
  --topo-issue-bg: #faf5ff;
  --topo-issue-border: #c084fc;
  --topo-issue-color: #7c3aed;
  --topo-issue-hover-bg: #ede9fe;
  --topo-issue-hover-border: #7c3aed;
  --topo-add-bg: var(--bg-surface-alt);
  --topo-add-border: var(--text-muted);
  --topo-add-color: var(--text-tertiary);
  /* Topo display (terminal LCD) */
  --topo-display-bg: #1a2332;
  --topo-display-border: #2d3748;
  /* Context menu */
  --ctx-menu-bg: #fff;
  --ctx-menu-border: #d5d5d5;
  --ctx-menu-color: #222;
  --ctx-menu-hover-bg: #f5f5f5;
  --ctx-menu-danger: #dc2626;
  /* vp-modal (dark-styled overlays - keep dark in both themes) */
  --vp-modal-bg: #16213e;
  --vp-modal-border: #1f2937;
  --vp-modal-text: #e2e8f0;
  --vp-modal-hint: #94a3b8;
  --vp-modal-input-bg: #0f172a;
  --vp-modal-input-border: #334155;
  /* Undo toast */
  --toast-bg: #1e293b;
  --toast-border: #334155;
  --toast-color: #e2e8f0;
  --toast-link: #38bdf8;
  /* Success */
  --success-bg: #f0fdf4;
  --success-border: #bbf7d0;
  /* Messages (AS2805) */
  --msg-req-bg: #f0f4ff;
  --msg-req-border: #bfdbfe;
  --msg-req-color: #1e40af;
  --msg-resp-color: #15803d;
  /* What's New tooltip */
  --whatsnew-bg: #1e293b;
  --whatsnew-color: #e2e8f0;
  --whatsnew-border: #334155;
  --whatsnew-h1: #f8fafc;
  --whatsnew-h2: #38bdf8;
  --whatsnew-bold: #fbbf24;
  /* Track data display */
  --track-data-bg: #f0f4ff;
  --track-data-magstripe: #1e40af;
  --track-data-emv: #7c3aed;
  /* Overlay */
  --overlay-bg: rgba(0,0,0,0.55);
}

[data-theme="dark"] {
  /* Core */
  --bg-page: #0f172a;
  --bg-surface: #1e293b;
  --bg-surface-alt: #162032;
  --bg-surface-hover: #334155;
  --bg-input: #0f172a;
  --text-primary: #e2e8f0;
  --text-secondary: #94a3b8;
  --text-tertiary: #8b9bb5;
  --text-muted: #64748b;
  --text-heading: #f0f0f0;
  /* Borders */
  --border-default: #334155;
  --border-light: #1e293b;
  --border-heavy: #475569;
  --border-input: #334155;
  /* Accent */
  --accent-hover: #38bdf8;
  /* Cards */
  --card-bg: #1e293b;
  --card-border: #334155;
  /* HSM output */
  --out-bg: #1e293b;
  --out-hex: #38bdf8;
  --out-key-color: #94a3b8;
  --out-val-color: #e2e8f0;
  /* Activity */
  --ar-bg: #1e293b;
  --ar-border: #334155;
  --ar-summary-color: #e2e8f0;
  --ar-hsm-bg: #162032;
  --ar-hsm-border: #334155;
  /* Pills */
  --pill-algo-bg: #2e1065;
  --pill-algo-color: #c4b5fd;
  --pill-format-bg: #172554;
  --pill-format-color: #93c5fd;
  --pill-ok-bg: #052e16;
  --pill-ok-color: #86efac;
  --pill-fail-bg: #450a0a;
  --pill-fail-color: #fca5a5;
  --pill-op-bg: #451a03;
  --pill-op-color: #fcd34d;
  /* Error */
  --error-bg: #450a0a;
  --error-border: #7f1d1d;
  --error-text: #fca5a5;
  /* Decoder */
  --decoder-header-bg: #172554;
  --decoder-header-border: #1e40af;
  --decoder-row-border: #334155;
  --decoder-row-alt-bg: #162032;
  --decoder-subrow-bg: #0f172a;
  /* Modals */
  --modal-overlay: rgba(0,0,0,0.6);
  --modal-bg: #1e293b;
  --modal-border: #334155;
  --modal-text: #e2e8f0;
  --modal-hint: #64748b;
  /* Shadows */
  --shadow-sm: rgba(0,0,0,.3);
  --shadow-md: rgba(0,0,0,.4);
  /* Code */
  --code-bg: #0f172a;
  --code-border: #334155;
  --code-color: #93c5fd;
  /* Links */
  --link-color: #38bdf8;
  /* Scrollbar */
  --scrollbar-thumb: #475569;
  /* Preset bar */
  --preset-btn-color: #e2e8f0;
  --preset-btn-bg: #1e293b;
  --preset-btn-border: #475569;
  --preset-btn-hover-color: #f1f5f9;
  --preset-btn-hover-bg: #334155;
  --preset-btn-hover-border: #64748b;
  --preset-btn-dis-color: #94a3b8;
  --preset-btn-dis-bg: #0f172a;
  --preset-btn-dis-border: #334155;
  --preset-reset-color: #fca5a5;
  --preset-reset-bg: #1c1015;
  --preset-reset-border: #7f1d1d;
  --preset-reset-hover-color: #fecaca;
  --preset-reset-hover-bg: #2d1520;
  --preset-action-color: #e2e8f0;
  --preset-action-bg: #1e293b;
  --preset-action-border: #475569;
  --preset-label-color: #94a3b8;
  --preset-gear-bg: #334155;
  --preset-gear-color: #94a3b8;
  --preset-gear-border: #475569;
  /* Topo domain columns */
  --topo-domain-aq: #0a1f12;
  --topo-domain-iss: #150e20;
  --topo-domain-sch: #1a1608;
  /* Topo action buttons */
  --topo-init-bg: #1a1508;
  --topo-init-border: #92400e;
  --topo-init-color: #fbbf24;
  --topo-init-hover-bg: #261e0c;
  --topo-init-hover-border: #d97706;
  --topo-issue-bg: #1a1028;
  --topo-issue-border: #7c3aed;
  --topo-issue-color: #c4b5fd;
  --topo-issue-hover-bg: #221638;
  --topo-issue-hover-border: #a78bfa;
  --topo-add-bg: #162032;
  --topo-add-border: #64748b;
  --topo-add-color: #94a3b8;
  /* WAN spy */
  --wan-raw-bg: #0f172a;
  --wan-raw-border: #334155;
  /* Context menu */
  --ctx-menu-bg: #1e293b;
  --ctx-menu-border: #334155;
  --ctx-menu-color: #e2e8f0;
  --ctx-menu-hover-bg: #334155;
  --ctx-menu-danger: #fca5a5;
  /* vp-modal stays the same in dark mode */
  /* Success */
  --success-bg: #052e16;
  --success-border: #166534;
  /* Messages */
  --msg-req-bg: #172554;
  --msg-req-border: #1e40af;
  --msg-req-color: #93c5fd;
  --msg-resp-color: #86efac;
  /* Track data */
  --track-data-bg: #172554;
  --track-data-magstripe: #93c5fd;
  --track-data-emv: #c4b5fd;
  /* Overlay */
  --overlay-bg: rgba(0,0,0,0.7);
}

*{box-sizing:border-box;margin:0;padding:0}
body{font-family:'Frank Ruhl Libre',Georgia,serif;font-weight:300;font-size:14px;background:var(--bg-page);color:var(--text-primary);height:100vh;display:flex;flex-direction:column}

/* Warning banner */
#warning{background:#b91c1c;color:#fff;text-align:center;padding:8px 16px;font-weight:600;font-size:13px;flex-shrink:0;font-family:'Montserrat',sans-serif;letter-spacing:.02em;display:none}

/* Simulator disclaimer banner */
#sim-disclaimer{background:#92400e;color:#fef3c7;text-align:center;padding:6px 16px;font-size:12px;flex-shrink:0;font-family:'Montserrat',sans-serif;letter-spacing:.02em;font-weight:500}

/* LMK field warning */
.lmk-warn-label{color:#ef4444 !important}
.lmk-warn-hint{color:#f87171 !important;font-style:italic}

/* Top nav */
#topnav{background:#111111;color:#ededed;padding:0 20px;display:flex;align-items:center;flex-shrink:0;height:52px;border-bottom:2px solid #32aadd}
#topnav h1{font-family:'Montserrat',sans-serif;font-size:15px;font-weight:700;color:#fff;letter-spacing:.04em;text-transform:uppercase;white-space:nowrap}
#topnav h1 a{text-decoration:none;color:inherit}
#topnav h1 a.brand{color:#32aadd}
#topnav h1 a:hover{text-decoration:underline}
.nav-tabs{display:flex;margin-left:24px;height:100%;align-items:stretch}
.nav-tab{display:flex;align-items:center;padding:0 16px;cursor:pointer;color:#888;font-size:12px;font-family:'Montserrat',sans-serif;font-weight:600;text-transform:uppercase;letter-spacing:.06em;border-bottom:3px solid transparent;margin-bottom:-2px;white-space:nowrap;user-select:none;transition:color .15s}
.nav-tab:hover{color:#fff}
.nav-tab.active{color:#fff;border-bottom-color:#32aadd}
.nav-links{margin-left:auto;display:flex;gap:16px;align-items:center}
#topnav a{color:#aaa;font-size:12px;text-decoration:none;font-family:'Montserrat',sans-serif;font-weight:600;text-transform:uppercase;letter-spacing:.06em}
#topnav a:hover{color:#32aadd}
#version-badge{margin-left:auto;font-size:11px;color:#94a3b8;font-family:'Montserrat',sans-serif;font-weight:600;letter-spacing:.04em;white-space:nowrap;margin-right:12px}
/* Sign In button (anonymous) */
.nav-signin-btn{color:#fff !important;background:#32aadd;padding:5px 14px;border-radius:4px;font-size:11px !important;letter-spacing:.04em;transition:background .15s}
.nav-signin-btn:hover{background:#2899c8;color:#fff !important}
/* User avatar pill */
.nav-user-menu{position:relative}
.nav-avatar{width:32px;height:32px;border-radius:50%;background:#32aadd;color:#fff;border:none;cursor:pointer;font-family:'Montserrat',sans-serif;font-size:12px;font-weight:700;line-height:32px;text-align:center;transition:box-shadow .15s}
.nav-avatar:hover{box-shadow:0 0 0 2px rgba(50,170,221,.5)}
/* Dropdown */
.nav-dropdown{display:none;position:absolute;top:calc(100% + 8px);right:0;width:220px;background:#1e293b;border:1px solid #334155;border-radius:8px;box-shadow:0 8px 24px rgba(0,0,0,.4);z-index:300;padding:6px 0;font-family:'Montserrat',sans-serif}
.nav-dropdown.open{display:block}
.nav-dropdown-email{padding:10px 14px;font-size:11px;color:#94a3b8;font-weight:500;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.nav-dropdown-sep{height:1px;background:#334155;margin:4px 0}
.nav-dropdown-item{display:flex;align-items:center;gap:8px;width:100%;padding:8px 14px;border:none;background:none;color:#e2e8f0;font-size:12px;font-family:'Montserrat',sans-serif;font-weight:500;cursor:pointer;text-decoration:none;text-align:left;transition:background .1s}
.nav-dropdown-item:hover{background:#334155}
.nav-dropdown-icon{width:18px;text-align:center;font-size:14px;flex-shrink:0}
.nav-dropdown-signout{color:#f87171}
.nav-dropdown-signout:hover{background:#2d1520}

/* Views container */
#views-container{flex:1;overflow:hidden;display:flex;flex-direction:column;min-height:0}
.view{display:none;flex:1;overflow:hidden;min-height:0}
.view.active{display:flex}

/* ── Home view ──────────────────────────────────────────────────────────── */
#view-home{flex-direction:column;align-items:center;background:var(--bg-page);overflow-y:auto;padding:80px 20px 40px}
#view-glossary{overflow-y:auto;background:var(--bg-page);padding:30px 20px}
#glossary-page{max-width:720px;margin:0 auto}
.glossary-header{margin-bottom:20px}
.glossary-header h2{font-size:22px;font-weight:700;font-family:'Montserrat',sans-serif;color:var(--text-heading);margin-bottom:12px}
#glossary-filter{width:100%;max-width:320px;padding:7px 12px;border:1px solid var(--border-heavy);border-radius:4px;font-size:13px;font-family:'Montserrat',sans-serif;background:var(--bg-input);color:var(--text-primary);box-sizing:border-box}
.glossary-az{display:flex;flex-wrap:wrap;gap:2px;margin-bottom:16px}
.glossary-az-letter{display:inline-block;width:24px;height:24px;line-height:24px;text-align:center;font-size:11px;font-weight:700;font-family:'Montserrat',sans-serif;border-radius:3px;text-decoration:none;color:var(--accent);background:var(--bg-surface);border:1px solid var(--border-light);cursor:pointer}
.glossary-az-letter:hover{background:var(--accent);color:#fff}
.glossary-az-disabled{color:var(--text-tertiary);opacity:0.4;cursor:default;pointer-events:none}
.glossary-letter-heading{font-size:18px;font-weight:700;font-family:'Montserrat',sans-serif;color:var(--text-heading);padding:16px 0 4px;border-bottom:2px solid var(--accent)}
.glossary-entry{padding:12px 0;border-bottom:1px solid var(--border-light)}
.glossary-entry:last-child{border-bottom:none}
.glossary-term{font-size:15px;font-weight:700;font-family:'Montserrat',sans-serif;color:var(--accent);margin-bottom:4px}
.glossary-term a{color:inherit;text-decoration:none}
.glossary-term a:hover{text-decoration:underline}
.glossary-badge{display:inline-block;font-size:9px;font-weight:600;text-transform:uppercase;letter-spacing:.3px;padding:1px 5px;border-radius:3px;vertical-align:middle;margin-left:4px}
.glossary-badge-tech{color:#3b82f6;background:rgba(59,130,246,0.1)}
.glossary-badge-financial{color:#22c55e;background:rgba(34,197,94,0.1)}
.glossary-badge-both{color:#8b5cf6;background:rgba(139,92,246,0.1)}
.glossary-domain-btns{display:flex;gap:4px}
.glossary-domain-btn{font-size:11px;padding:4px 10px;border:1px solid var(--border-heavy);border-radius:4px;background:var(--bg-surface);color:var(--text-secondary);cursor:pointer;font-family:'Montserrat',sans-serif;font-weight:600}
.glossary-domain-btn:hover{background:var(--bg-surface-alt)}
.glossary-domain-btn.active{background:var(--accent);color:#fff;border-color:var(--accent)}
.glossary-def{font-size:13px;color:var(--text-secondary);line-height:1.6}
.glossary-def [data-gloss]{cursor:pointer}
.glossary-links{font-size:11px;margin-top:4px;color:var(--text-tertiary)}
.glossary-highlight{background:rgba(50,170,221,0.12);border-radius:4px;padding-left:8px;margin-left:-8px;transition:background 0.5s}
.home-intro{text-align:center;margin-bottom:36px}
.home-intro h2{font-size:26px;font-weight:700;font-family:'Montserrat',sans-serif;color:var(--text-heading);letter-spacing:.03em;margin-bottom:10px}
.home-intro p{font-size:14px;color:var(--text-secondary);max-width:560px;line-height:1.7;margin:0 auto}
.home-cards{display:flex;gap:24px;flex-wrap:wrap;justify-content:center;max-width:800px}
.home-card{background:var(--card-bg);border:1px solid var(--card-border);border-radius:5px;padding:28px 32px;width:340px;cursor:pointer;border-top:4px solid var(--accent);transition:box-shadow .2s,transform .15s;text-align:left}
.home-card:hover{box-shadow:0 8px 28px var(--shadow-md);transform:translateY(-3px)}
.home-card h3{font-size:16px;font-weight:700;font-family:'Montserrat',sans-serif;color:var(--text-heading);margin-bottom:8px;letter-spacing:.02em}
.home-card p{font-size:13px;color:var(--text-secondary);line-height:1.65}
.home-card .card-icon{font-size:32px;margin-bottom:14px;display:block}
.home-card .card-arrow{display:inline-block;margin-top:14px;font-size:12px;font-weight:700;font-family:'Montserrat',sans-serif;color:var(--accent);text-transform:uppercase;letter-spacing:.06em}
.home-footer{margin-top:32px;font-size:12px;color:var(--text-muted);text-align:center}

/* ── Paynet view ────────────────────────────────────────────────────────── */
#view-paynet{flex-direction:row;position:relative}
#paynet-sidebar{width:230px;background:var(--bg-surface);border-right:1px solid var(--border-default);display:flex;flex-direction:column;overflow:hidden;flex-shrink:0;transition:width .2s ease}
#paynet-sidebar-title{padding:14px 16px 10px;font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.08em;color:var(--text-tertiary);font-family:'Montserrat',sans-serif;border-bottom:1px solid var(--border-light);flex-shrink:0;display:flex;align-items:center;gap:6px}
.sidebar-collapse-btn{background:none;border:none;cursor:pointer;font-size:12px;color:var(--text-tertiary);padding:0;line-height:1;transition:transform .2s ease;transform:rotate(-90deg)}
#paynet-sidebar.sidebar-collapsed{width:0;min-width:0;border-right:none;overflow:hidden;padding:0}
#paynet-sidebar.sidebar-collapsed #paynet-sidebar-title,#paynet-sidebar.sidebar-collapsed #card-list,#paynet-sidebar.sidebar-collapsed .sidebar-toggle{display:none}
#paynet-sidebar:not(.sidebar-collapsed) .sidebar-collapse-btn{transform:rotate(-90deg)}
.sidebar-expand-btn{position:absolute;left:0;top:50%;transform:translateY(-50%);background:var(--bg-surface);border:1px solid var(--border-default);border-left:none;border-radius:0 4px 4px 0;cursor:pointer;padding:12px 5px;font-size:14px;color:var(--out-key-color);z-index:50;line-height:1;box-shadow:2px 0 6px rgba(0,0,0,.1)}
.sidebar-expand-btn:hover{background:var(--bg-surface-hover);color:var(--text-primary)}
#card-list{flex:1;overflow-y:auto;padding:6px 0}
.card-issuer-group{border-bottom:1px solid var(--border-light)}
.card-issuer-group summary{padding:8px 16px;font-size:11px;font-weight:600;font-family:'Montserrat',sans-serif;color:var(--text-secondary);cursor:pointer;user-select:none;list-style:none;display:flex;align-items:center;gap:6px}
.card-issuer-group summary::-webkit-details-marker{display:none}
.card-issuer-group summary::before{content:'\25B6';font-size:8px;transition:transform .15s;display:inline-block}
.card-issuer-group[open] summary::before{transform:rotate(90deg)}
.card-issuer-group summary:hover{background:var(--bg-surface-hover)}
.card-item{padding:8px 16px 8px 28px;border-left:3px solid transparent;font-size:12px;font-family:'Montserrat',sans-serif;color:var(--text-primary);display:flex;flex-direction:column;gap:2px}
.card-item:hover{background:var(--bg-surface-hover)}
.card-item .card-pan{font-family:monospace;font-size:13px;font-weight:600;color:var(--text-primary)}
.card-item .card-issuer{font-size:10px;color:var(--text-tertiary)}
.card-item .card-pin-status{font-size:9px;font-weight:600;padding:1px 5px;border-radius:3px;display:inline-block;width:fit-content;margin-top:2px}
.card-pin-set{background:#dcfce7;color:#15803d;border:1px solid #16a34a}
.card-pin-unset{background:#fef3c7;color:#b45309;border:1px solid #f59e0b}
#paynet-main{flex:1;overflow:hidden;padding:24px;display:flex;flex-direction:column;gap:0;background:var(--bg-page)}
.paynet-card{background:var(--card-bg);border:1px solid var(--card-border);border-radius:4px;padding:16px 20px;overflow-y:auto;min-height:80px}
#network-diagram-card{border-top:3px solid var(--accent);flex:1 1 0;display:flex;flex-direction:column;padding:10px 14px;transition:min-height .2s ease;min-height:120px}
#network-diagram-card.collapsed{min-height:0;overflow:hidden}
#network-diagram-card.collapsed .diagram-wrap{display:none}
#network-diagram-card.collapsed .paynet-card-title{margin-bottom:0;border-bottom:none;padding-bottom:0}
.topo-collapse-btn{background:none;border:none;cursor:pointer;font-size:12px;color:var(--text-tertiary);padding:0;line-height:1;transition:transform .2s ease}
#network-diagram-card.collapsed .topo-collapse-btn{transform:rotate(-90deg)}
#paynet-process-card{border-top:3px solid var(--accent-hover);flex:1 1 0;min-height:80px;display:flex;flex-direction:column}
#paynet-process-card.collapsed{min-height:0;overflow:hidden;flex:0 0 auto}
#paynet-process-card.collapsed #paynet-process-content,#paynet-process-card.collapsed #wanspy-content{display:none}
#paynet-process-card.collapsed .paynet-card-title{margin-bottom:0;border-bottom:none;padding-bottom:0}
#paynet-process-card.collapsed .topo-collapse-btn{transform:rotate(-90deg)}
.paynet-card-title{font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.08em;color:var(--text-tertiary);margin-bottom:8px;font-family:'Montserrat',sans-serif;border-bottom:1px solid var(--border-light);padding-bottom:6px}
.paynet-splitter{height:8px;cursor:row-resize;background:var(--bg-page);display:flex;align-items:center;justify-content:center;flex-shrink:0;margin:4px 0}
#network-diagram-card.collapsed+.paynet-splitter{display:none}
.paynet-splitter::after{content:'';width:40px;height:3px;border-radius:2px;background:var(--border-heavy)}
.paynet-splitter:hover::after,.paynet-splitter.dragging::after{background:#94a3b8}
.topo-zoom-btn{background:var(--bg-surface-alt);border:1px solid var(--border-heavy);border-radius:3px;padding:2px 7px;font-size:9px;font-family:'Montserrat',sans-serif;font-weight:700;color:var(--text-tertiary);cursor:pointer;line-height:1.4;text-transform:uppercase;letter-spacing:.04em}
.topo-zoom-btn:hover{background:var(--bg-surface-hover);color:var(--ar-summary-color)}
.topo-mode-btn{font-size:9px;font-family:'Montserrat',sans-serif;font-weight:700;padding:2px 0;border-radius:3px;cursor:pointer;border:1px solid var(--border-heavy);background:var(--bg-surface-alt);color:var(--text-tertiary);letter-spacing:.04em;text-transform:uppercase;transition:all .15s;width:62px;text-align:center;display:inline-block}
.topo-mode-btn:hover:not(:disabled){border-color:var(--accent);color:var(--accent)}
.topo-mode-btn.mode-advanced{border-color:var(--accent);color:var(--accent)}
.topo-mode-btn:disabled{cursor:default;opacity:.45;border-color:var(--border-light)}
.diagram-wrap{display:flex;flex-direction:column;gap:6px;align-items:center;flex:1;overflow:auto;touch-action:pan-x pan-y;min-height:0}
.diagram-legend{display:flex;flex-wrap:wrap;gap:10px;font-size:11px;font-family:'Montserrat',sans-serif;color:var(--text-secondary)}
.legend-item{display:flex;align-items:center;gap:5px}
.legend-dot{width:10px;height:10px;border-radius:2px;display:inline-block;flex-shrink:0}
.diagram-note{font-size:12px;color:var(--modal-hint);font-style:italic}
/* Progressive topology */
.topo-row{display:flex;align-items:stretch;gap:0;justify-content:center;min-height:40px;transition:all .3s ease;min-width:fit-content;margin:auto;position:relative}
.topo-fixed-col{display:flex;flex-direction:column;align-items:flex-start;gap:4px;justify-content:center}
.topo-fixed-col.topo-col-scheme{justify-content:center;align-items:center}
.topo-band{display:flex;align-items:center;gap:0;margin-bottom:4px}
.topo-band:last-child{margin-bottom:0}
.topo-term-group{display:flex;flex-direction:column;gap:3px;min-width:120px}
.topo-col-row{display:flex;align-items:center;gap:0}
.topo-node{position:relative;padding:5px 10px;border-radius:6px;font-size:11px;font-weight:700;font-family:'Montserrat',sans-serif;cursor:default;white-space:nowrap;border-width:1px;border-style:solid;transition:all .3s ease;z-index:1;box-shadow:0 1px 4px var(--shadow-sm);display:flex;flex-direction:column;align-items:center;gap:2px}
.topo-node:hover{box-shadow:0 2px 8px var(--shadow-md);z-index:200}
.topo-arrow{display:flex;align-items:center;margin:0 4px;user-select:none;transition:all .3s ease;height:2px;min-width:28px;position:relative}
.topo-arrow-line{flex:1;height:2px;background:var(--border-default);border-radius:1px;transition:background .3s ease}
.topo-arrow-head{width:0;height:0;border-top:5px solid transparent;border-bottom:5px solid transparent;flex-shrink:0;transition:border-color .3s ease}
.topo-arrow-head.right{border-left:7px solid var(--border-default)}
.topo-arrow-head.left{border-right:7px solid var(--border-default)}
.topo-arrow-dot{width:6px;height:6px;border-radius:50%;background:var(--border-default);flex-shrink:0;transition:background .3s ease}
.topo-arrow.established .topo-arrow-line{background:#d97706}
.topo-arrow.established .topo-arrow-head.right{border-left-color:#d97706}
.topo-arrow.established .topo-arrow-head.left{border-right-color:#d97706}
.topo-arrow.established .topo-arrow-dot{background:#d97706}
.topo-arrow.live .topo-arrow-line{background:#16a34a}
.topo-arrow.live .topo-arrow-head.right{border-left-color:#16a34a}
.topo-arrow.live .topo-arrow-head.left{border-right-color:#16a34a}
.topo-arrow.live .topo-arrow-dot{background:#16a34a}
.topo-protocol{font-size:8px;color:var(--text-muted);font-family:'Montserrat',sans-serif;text-align:center;margin:0;line-height:1;padding-bottom:2px}
.topo-link{display:flex;flex-direction:column;align-items:center;margin:0 2px}
.topo-domain{background:var(--bg-surface-alt);border-radius:8px;padding:4px 4px;margin:0 2px}
.topo-domain-aq{background:var(--topo-domain-aq)}
.topo-domain-iss{background:var(--topo-domain-iss)}
.topo-domain-sch{background:var(--topo-domain-sch)}
/* ── Vertical topology layout (Advanced mode) ── */
.topo-row.topo-vertical{flex-direction:column;align-items:stretch;gap:0;margin:0 auto;justify-content:flex-start}
.topo-vrow{display:flex;flex-direction:column;width:100%;margin-bottom:2px;border-radius:6px}
.topo-vrow-aq{background:var(--topo-domain-aq)}
.topo-vrow-sch{background:var(--topo-domain-sch)}
.topo-vrow-iss{background:var(--topo-domain-iss)}
.topo-vrow-header{display:flex;align-items:center;gap:6px;padding:3px 8px;font-size:9px;font-weight:700;font-family:'Montserrat',sans-serif;text-transform:uppercase;letter-spacing:.06em;color:var(--text-tertiary);cursor:pointer;user-select:none;border-radius:4px 4px 0 0}
.topo-vrow-header:hover{background:var(--bg-surface-hover)}
.topo-vrow-toggle{font-size:10px;transition:transform .2s ease;display:inline-block}
.topo-vrow.collapsed .topo-vrow-toggle{transform:rotate(-90deg)}
.topo-vrow-content{display:flex;flex-wrap:wrap;gap:8px;padding:6px 8px;justify-content:center;align-items:flex-start;transition:max-height .3s ease,opacity .2s ease,padding .2s ease;overflow:hidden}
.topo-vrow.collapsed .topo-vrow-content{max-height:0 !important;opacity:0;padding:0 8px}
.topo-vrow-group{display:flex;flex-direction:column;gap:4px;align-items:flex-start;padding-left:6px;margin-bottom:2px;position:relative;z-index:2}
.topo-vrow-group-label{font-size:8px;font-weight:600;font-family:'Montserrat',sans-serif;color:var(--text-muted);text-transform:uppercase;letter-spacing:.04em;width:100%;margin-bottom:1px}
.topo-vrow-count{font-size:8px;color:var(--text-muted)}
.topo-node-group{display:flex;flex-direction:column;align-items:center;gap:2px;position:relative;z-index:2}
.topo-node-icon{font-size:12px;line-height:1;margin-bottom:-2px}
.topo-add{position:relative;padding:3px 10px;border-radius:16px;font-size:9px;font-weight:600;font-family:'Montserrat',sans-serif;cursor:pointer;border:1.5px dashed var(--topo-add-border);background:var(--topo-add-bg);color:var(--topo-add-color);margin:0 4px;transition:all .2s ease;white-space:nowrap;z-index:2}
.topo-add:hover{border-color:var(--accent);color:var(--accent);background:var(--decoder-header-bg)}
.topo-add:hover .topo-popup{opacity:1}
/* Nudge glow for first-time users */
@keyframes topo-nudge-pulse{0%,100%{box-shadow:0 0 6px 2px rgba(50,170,221,.4),0 0 0 0 rgba(50,170,221,0)}50%{box-shadow:0 0 14px 4px rgba(50,170,221,.7),0 0 20px 8px rgba(50,170,221,.2)}}
.topo-nudge{animation:topo-nudge-pulse 1.5s ease-in-out infinite;border-color:var(--accent) !important}
.topo-popup{position:fixed;width:280px;overflow-y:auto;background:var(--modal-bg);border:1px solid var(--modal-border);border-radius:6px;box-shadow:0 4px 16px var(--shadow-md);padding:14px 16px;font-size:12px;font-weight:400;color:var(--text-secondary);line-height:1.55;z-index:100;pointer-events:none;opacity:0;transition:opacity .15s ease;white-space:normal;word-wrap:break-word}
.topo-node:hover .topo-popup{opacity:1}
.topo-popup strong{font-weight:700;color:var(--modal-text)}
/* Protocol picker modal */
.topo-modal-overlay{position:fixed;top:0;left:0;right:0;bottom:0;background:var(--modal-overlay);z-index:200;display:flex;align-items:center;justify-content:center;overflow-y:auto;padding:20px 0}
.topo-modal{background:var(--modal-bg);border-radius:8px;box-shadow:0 8px 32px var(--shadow-md);padding:20px 24px;max-width:360px;width:90%;font-family:'Montserrat',sans-serif;max-height:90vh;overflow-y:auto}
.topo-modal.topo-modal-wide{max-width:820px}
.topo-modal-cols{display:grid;grid-template-columns:1fr 1fr 1fr;gap:18px}
.topo-modal-col{min-width:0}
.topo-modal h4{font-size:13px;font-weight:700;margin:0 0 4px;color:var(--modal-text)}
.topo-modal p{font-size:12px;color:var(--out-key-color);margin:0 0 14px;line-height:1.5}
.topo-modal-option{display:inline-block;text-align:center;padding:7px 14px;border:1.5px solid var(--border-default);border-radius:5px;background:var(--bg-surface);cursor:pointer;margin:0 6px 8px 0;transition:all .15s ease;font-family:'Montserrat',sans-serif;font-size:12px;font-weight:600;color:var(--text-primary)}
.topo-modal-option:hover{border-color:var(--accent);background:var(--decoder-header-bg)}
.topo-modal-option.selected{border-color:var(--accent);background:var(--decoder-header-bg);color:#1a8ab5}
.topo-modal-config{margin-bottom:14px}
.topo-modal-config-label{font-size:11px;font-weight:700;color:var(--text-secondary);margin-bottom:3px}
.topo-modal-config-hint{font-size:10px;color:var(--modal-hint);margin-bottom:6px;line-height:1.4}
.topo-modal-cancel{display:inline-block;margin-top:4px;font-size:11px;color:var(--modal-hint);cursor:pointer;border:none;background:none;padding:4px 0;font-family:'Montserrat',sans-serif}
.topo-modal-cancel:hover{color:var(--text-secondary)}
.topo-modal-field{margin-bottom:12px}
.topo-modal-field label{display:block;font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.06em;color:var(--text-tertiary);margin-bottom:4px}
.topo-modal-field input,.topo-modal-field select{width:100%;padding:7px 10px;border:1px solid var(--border-input);border-radius:4px;font-size:13px;font-family:inherit;box-sizing:border-box;background:var(--bg-input);color:var(--text-primary)}
.topo-modal-field input:focus,.topo-modal-field select:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px rgba(50,170,221,.12)}
.topo-modal-field .field-hint{font-size:10px;color:var(--text-muted);margin-top:3px;line-height:1.4}
.topo-modal-section{font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.06em;color:var(--text-tertiary);margin:14px 0 8px;padding-top:10px;border-top:1px solid var(--border-light)}
.topo-modal-submit{display:inline-block;padding:8px 20px;border-radius:4px;font-size:12px;font-weight:600;font-family:'Montserrat',sans-serif;cursor:pointer;border:none;background:var(--accent);color:#fff;margin-top:6px;transition:background .15s ease}
.topo-modal-submit:hover{background:var(--accent-hover)}
.topo-modal-submit:disabled{background:var(--text-muted);cursor:not-allowed;opacity:.6}
.topo-modal-submit:disabled:hover{background:var(--text-muted)}
/* Inspect modal */
.inspect-modal{max-width:700px !important}
.inspect-section{margin-bottom:6px;border:1px solid var(--ar-border);border-radius:4px;overflow:hidden}
.inspect-section summary{font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.04em;color:#475569;padding:8px 12px;background:var(--bg-surface-alt);cursor:pointer;user-select:none}
.inspect-section summary:hover{background:var(--decoder-row-alt-bg)}
.inspect-section-body{padding:8px 12px;font-size:12px;line-height:1.6}
.inspect-explain{font-size:11px;color:#64748b;line-height:1.5;margin-bottom:8px;padding:6px 8px;background:var(--decoder-header-bg);border-radius:3px;border-left:3px solid #93c5fd}
.inspect-kv{width:100%;border-collapse:collapse;font-size:11px;margin-bottom:4px}
.inspect-kv td{padding:3px 8px;border-bottom:1px solid var(--decoder-row-alt-bg);vertical-align:top}
.inspect-kv td:first-child{color:var(--text-tertiary);white-space:nowrap;width:120px;font-weight:600}
.inspect-tr31 td:first-child{width:100px}
.inspect-hex{word-break:break-all;font-family:'Courier New',monospace;font-size:10px}
.inspect-block{margin:4px 0;padding:6px 8px;background:var(--code-bg);border:1px solid var(--code-border);border-radius:3px;max-height:60px;overflow-y:auto;white-space:pre-wrap;font-size:10px;line-height:1.4}
.inspect-pem{margin:4px 0;padding:6px 8px;background:var(--code-bg);border:1px solid var(--code-border);border-radius:3px;max-height:100px;overflow-y:auto;font-size:9px;line-height:1.3;white-space:pre-wrap;font-family:'Courier New',monospace}
.inspect-dim{color:#94a3b8;font-size:10px}
.inspect-key-item{margin-bottom:8px;padding-bottom:8px;border-bottom:1px solid var(--decoder-row-alt-bg)}
.inspect-key-item:last-child{border-bottom:none;margin-bottom:0;padding-bottom:0}
.inspect-key-label{font-size:11px;font-weight:700;color:var(--ar-summary-color);margin-bottom:4px}
.topo-issue-btn{padding:3px 8px;border-radius:3px;font-size:9px;font-weight:600;font-family:'Montserrat',sans-serif;cursor:pointer;border:1px dashed var(--topo-issue-border);background:var(--topo-issue-bg);color:var(--topo-issue-color);margin-left:6px;white-space:nowrap;transition:all .15s ease;position:relative;z-index:2}
.topo-issue-btn:hover{border-color:var(--topo-issue-hover-border);background:var(--topo-issue-hover-bg)}
/* Topology action buttons */
.topo-actions{margin-top:8px;display:flex;flex-wrap:wrap;gap:4px;align-items:center;justify-content:center}
.topo-preset-label{font-size:11px;font-family:'Montserrat',sans-serif;color:var(--preset-label-color);font-weight:600;letter-spacing:.03em;margin-right:2px}
.topo-compliance-label{font-size:9px;font-family:'Montserrat',sans-serif;font-weight:600;color:var(--text-tertiary);letter-spacing:.04em;text-transform:uppercase}
.topo-compliance-btn{font-size:9px;font-family:'Montserrat',sans-serif;font-weight:700;padding:2px 0;border-radius:3px;cursor:pointer;border:1px solid var(--border-heavy);background:var(--bg-surface-alt);color:var(--text-tertiary);letter-spacing:.04em;text-transform:uppercase;transition:all .15s;width:38px;text-align:center;display:inline-block}
.topo-compliance-btn:hover{border-color:var(--accent);color:var(--accent)}
.topo-preset-btn{font-size:11px;font-family:'Montserrat',sans-serif;padding:5px 12px;border-radius:4px;cursor:pointer;white-space:nowrap;border:1px solid var(--preset-btn-border);background:var(--preset-btn-bg);color:var(--preset-btn-color);transition:all .15s;position:relative;min-width:32px}
.topo-preset-btn:hover:not(:disabled){background:var(--preset-btn-hover-bg);color:var(--preset-btn-hover-color);border-color:var(--preset-btn-hover-border)}
.topo-preset-btn:disabled{cursor:default;color:var(--preset-btn-dis-color) !important;border-color:var(--preset-btn-dis-border) !important;background:var(--preset-btn-dis-bg) !important}
.topo-preset-reset{border-color:var(--preset-reset-border);background:var(--preset-reset-bg);color:var(--preset-reset-color)}
.topo-preset-reset:hover:not(:disabled){background:var(--preset-reset-hover-bg);color:var(--preset-reset-hover-color)}
.topo-preset-filled{border-color:#1e40af;background:#172554;color:#93c5fd}
.topo-preset-filled:hover:not(:disabled){background:#1e3a5f;color:#bfdbfe}
.topo-preset-builtin{border-color:var(--preset-btn-border);background:var(--preset-btn-bg);color:var(--preset-btn-color)}
.topo-preset-builtin:hover:not(:disabled){background:var(--preset-btn-hover-bg);color:var(--preset-btn-hover-color);border-color:var(--preset-btn-hover-border)}
.topo-preset-available{border-color:var(--preset-btn-border);background:var(--preset-btn-bg);color:var(--preset-btn-color)}
.topo-preset-available:hover:not(:disabled){background:var(--preset-btn-hover-bg);color:var(--preset-btn-hover-color);border-color:var(--preset-btn-hover-border)}
.topo-preset-unused{border-color:var(--preset-btn-dis-border);background:var(--preset-btn-dis-bg);color:var(--preset-btn-dis-color)}
.topo-preset-action{border-color:var(--preset-action-border);background:var(--preset-action-bg);color:var(--preset-action-color)}
.topo-preset-action:hover:not(:disabled){background:var(--preset-btn-hover-bg);color:var(--preset-btn-hover-color);border-color:var(--preset-btn-hover-border)}
.topo-preset-gear{position:absolute;top:-2px;right:-2px;font-size:9px;background:var(--preset-gear-bg);border-radius:50%;width:16px;height:16px;display:none;align-items:center;justify-content:center;cursor:pointer;color:var(--preset-gear-color);border:1px solid var(--preset-gear-border)}
.topo-preset-btn:hover .topo-preset-gear{display:flex}
.vp-modal-overlay{position:fixed;inset:0;background:rgba(0,0,0,0.5);z-index:1000;display:flex;align-items:center;justify-content:center}
.vp-modal-box{background:var(--vp-modal-bg);border:1px solid var(--vp-modal-border);border-radius:12px;padding:28px;max-width:420px;width:90%;box-shadow:0 4px 24px rgba(0,0,0,0.4);color:var(--vp-modal-text);font-family:'Montserrat',sans-serif}
.vp-modal-title{margin:0 0 12px;font-size:16px;color:#f0f0f0}
.vp-modal-text{font-size:13px;color:var(--vp-modal-hint);margin:0 0 20px;line-height:1.5;white-space:pre-line}
.vp-modal-input{padding:8px 12px;background:var(--vp-modal-input-bg);border:1px solid var(--vp-modal-input-border);border-radius:6px;color:var(--vp-modal-text);font-size:13px;font-family:monospace;outline:none;width:100%;box-sizing:border-box}
.vp-modal-btns{display:flex;gap:8px;justify-content:flex-end}
.vp-modal-btn{padding:8px 16px;border:none;border-radius:6px;cursor:pointer;font-family:'Montserrat',sans-serif;font-size:13px}
.vp-modal-btn-primary{background:#2563eb;color:white;font-weight:600}
.vp-modal-btn-primary:hover{background:#3b82f6}
.vp-modal-btn-secondary{background:#334155;color:#94a3b8}
.vp-modal-btn-secondary:hover{background:#475569;color:#e2e8f0}
.vp-modal-btn-danger{background:#dc2626;color:white;font-weight:600}
.vp-modal-btn-danger:hover{background:#ef4444}
.topo-undo-toast{position:fixed;bottom:20px;left:50%;transform:translateX(-50%);background:var(--toast-bg);color:var(--toast-color);border:1px solid var(--toast-border);border-radius:8px;padding:10px 20px;font-size:13px;font-family:'Montserrat',sans-serif;box-shadow:0 4px 16px rgba(0,0,0,0.3);z-index:100;display:flex;align-items:center;gap:12px}
.topo-undo-toast a{color:var(--toast-link);cursor:pointer;font-weight:600;text-decoration:none}
.topo-display{background:var(--topo-display-bg);color:#4ade80;font-family:monospace;font-size:8px;padding:2px 5px;border-radius:3px;margin-bottom:2px;min-height:12px;text-align:center;line-height:1.3;letter-spacing:.5px;border:1px solid var(--topo-display-border);box-shadow:inset 0 1px 3px rgba(0,0,0,.4);white-space:pre-line;word-break:break-all}
.topo-display.error{color:#f87171}
.topo-display.idle{color:#64748b}
.card-set-pin-btn{padding:2px 8px;border-radius:3px;font-size:9px;font-weight:600;font-family:'Montserrat',sans-serif;cursor:pointer;border:1px solid #3b82f6;background:#eff6ff;color:#2563eb;margin-top:3px;transition:all .15s ease}
.card-set-pin-btn:hover{background:#dbeafe;border-color:#2563eb}
.card-delete-btn{position:absolute;top:4px;right:6px;background:none;border:none;color:var(--text-muted);font-size:14px;cursor:pointer;padding:0 2px;line-height:1;opacity:.5;transition:opacity .15s}
.card-delete-btn:hover{opacity:1;color:#ef4444}
.card-item{position:relative}
.topo-btns-wrap{display:flex;flex-wrap:wrap;gap:3px;margin-top:2px}
.topo-init-btn{padding:3px 8px;border-radius:3px;font-size:9px;font-weight:600;font-family:'Montserrat',sans-serif;cursor:pointer;border:1px dashed var(--topo-init-border);background:var(--topo-init-bg);color:var(--topo-init-color);white-space:nowrap;transition:all .15s ease;display:inline-block;position:relative;z-index:2}
.topo-node-config{cursor:pointer;font-size:10px;margin-left:4px;opacity:.5;transition:opacity .15s}
.topo-node-config:hover{opacity:1}
.topo-node-delete{cursor:pointer;font-size:12px;margin-left:4px;opacity:.4;transition:opacity .15s;font-weight:700}
.topo-node-delete:hover{opacity:1;color:#ef4444}
.topo-init-btn:hover{border-color:var(--topo-init-hover-border);background:var(--topo-init-hover-bg)}
.topo-node-name{display:flex;align-items:center;gap:4px}
.topo-status{font-size:8px;font-weight:600;font-family:'Montserrat',sans-serif;padding:1px 5px;border-radius:3px;display:inline-block}
.topo-status-pending{background:#fef3c7;color:#b45309;border:1px solid #f59e0b}
.topo-status-ready{background:#dcfce7;color:#15803d;border:1px solid #16a34a}
.topo-status-kek{background:#dbeafe;color:#1e40af;border:1px solid #3b82f6}
#paynet-process-card h3{font-size:15px;font-weight:700;font-family:'Montserrat',sans-serif;color:var(--text-heading);margin-bottom:6px}
.activity-event{border:1px solid var(--ar-border);border-radius:6px;margin-bottom:6px;background:var(--ar-bg)}
.activity-event[open]{border-color:#93c5fd}
.activity-event-summary{padding:8px 12px;cursor:pointer;font-size:12px;font-weight:600;font-family:'Montserrat',sans-serif;color:var(--ar-summary-color);outline:none;list-style:none;display:flex;align-items:center;gap:6px;user-select:none}
.activity-event-summary::-webkit-details-marker{display:none}
.activity-event-summary::before{content:'\25b6';font-size:9px;color:#94a3b8;transition:transform .15s}
.activity-event[open] > .activity-event-summary::before{transform:rotate(90deg);color:#3b82f6}
.activity-event-summary:hover{background:var(--bg-surface-alt)}
.activity-event-icon{font-size:10px}
.activity-copy-btn{margin-left:auto;padding:1px 5px;font-size:10px;color:#94a3b8;background:none;border:1px solid transparent;border-radius:3px;cursor:pointer;font-family:'Montserrat',sans-serif;line-height:1}
.activity-copy-btn:hover{color:#3b82f6;border-color:#bfdbfe;background:#f0f4ff}
.activity-copy-btn.copied{color:#16a34a;border-color:#bbf7d0;background:#f0fdf4}
.activity-event-body{padding:0 12px 12px 12px}
/* Pane tabs (Activity / WAN Spy) */
.pane-tabs{display:inline-flex;gap:0;border:1px solid var(--border-heavy);border-radius:4px;overflow:hidden}
.pane-tab{padding:3px 12px;font-size:11px;font-weight:600;font-family:'Montserrat',sans-serif;background:var(--bg-surface-alt);color:var(--text-tertiary);border:none;cursor:pointer;border-right:1px solid var(--border-heavy);transition:background .15s,color .15s}
.pane-tab:last-child{border-right:none}
.pane-tab.active{background:#3b82f6;color:#fff}
.pane-tab:hover:not(.active){background:var(--bg-surface-hover);color:var(--ar-summary-color)}
.pane-tab.has-new:not(.active){animation:tab-glow 2s ease-in-out infinite}
@keyframes tab-glow{0%,100%{background:var(--bg-surface-alt);color:var(--text-tertiary)}50%{background:#3b82f633;color:#3b82f6}}
/* WAN Spy messages */
#wanspy-content{overflow-y:auto;padding:0}
.wan-msg{border:1px solid var(--ar-border);border-radius:6px;margin-bottom:6px;background:var(--ar-bg)}
.wan-msg[open]{border-color:#a78bfa}
.wan-msg-summary{padding:8px 12px;cursor:pointer;font-size:11px;font-weight:600;font-family:'Montserrat',sans-serif;color:var(--ar-summary-color);outline:none;list-style:none;display:flex;align-items:center;gap:8px;user-select:none}
.wan-msg-summary::-webkit-details-marker{display:none}
.wan-msg-summary::before{content:'\25b6';font-size:9px;color:#94a3b8;transition:transform .15s}
.wan-msg[open] > .wan-msg-summary::before{transform:rotate(90deg);color:#7c3aed}
.wan-msg-summary:hover{background:#faf5ff}
.wan-msg-ts{color:#94a3b8;font-size:10px;font-weight:400;font-family:monospace}
.wan-msg-type{font-size:10px;padding:1px 6px;border-radius:3px;font-weight:700;text-transform:uppercase}
.wan-msg-type-as2805{background:var(--pill-format-bg);color:var(--pill-format-color)}
.wan-msg-type-x509{background:#d1fae5;color:#065f46}
.wan-msg-type-tr34{background:var(--pill-op-bg);color:var(--pill-op-color)}
.wan-msg-type-ecdh{background:var(--pill-algo-bg);color:#5b21b6}
.wan-msg-type-tr31{background:#fce7f3;color:#9d174d}
.wan-msg-type-json{background:#e0f2fe;color:#075985}
.wan-msg-type-zmk{background:#e0e7ff;color:#3730a3}
.wan-msg-type-kdh{background:#ccfbf1;color:#115e59}
.wan-msg-type-kia{background:#fff7ed;color:#9a3412}
.wan-msg-type-reqkdh{background:var(--decoder-row-alt-bg);color:#475569}
.card-msg-type-magstripe{background:#fef3c7;color:#92400e}
.card-msg-type-apdu{background:#dbeafe;color:#1e40af}
.card-msg-type-crypto{background:#ede9fe;color:#5b21b6}
.phys-msg-type-zmk{background:#e0e7ff;color:#3730a3}
.phys-msg-type-inject{background:#fce7f3;color:#9d174d}
.phys-msg-type-imk{background:#ccfbf1;color:#115e59}
.phys-msg-type-perso{background:#fff7ed;color:#9a3412}
.wan-filter-bar{padding:4px 8px;border-bottom:1px solid var(--ar-border)}
.wan-filter-row{display:flex;gap:4px;align-items:center;flex-wrap:wrap;margin-bottom:2px}
.wan-filter-row:last-child{margin-bottom:0}
.wan-filter-label{font-size:9px;font-weight:700;text-transform:uppercase;letter-spacing:.06em;color:#94a3b8;width:32px;flex-shrink:0;font-family:'Montserrat',sans-serif}
.wan-filter-btn{font-size:10px;padding:2px 8px;border-radius:3px;border:1px solid var(--ar-border);background:var(--bg-surface);color:var(--text-tertiary);cursor:pointer;font-family:'Montserrat',sans-serif;font-weight:600;text-transform:uppercase;letter-spacing:.04em}
.wan-filter-btn:hover{background:var(--bg-surface-alt)}
.wan-filter-btn.active{border-color:#7c3aed;color:#7c3aed;background:#faf5ff}
.wan-msg-route{color:var(--text-tertiary);font-size:10px;font-weight:400}
.wan-msg-route b{color:var(--ar-summary-color);font-weight:600}
.wan-msg-body{padding:4px 12px 12px 12px;font-size:12px}
.wan-msg-body .wan-raw{background:var(--wan-raw-bg);border:1px solid var(--wan-raw-border);border-radius:4px;padding:8px;font-family:monospace;font-size:11px;word-break:break-all;margin-bottom:8px;max-height:120px;overflow-y:auto}
.wan-msg-body .wan-parsed{margin-top:4px}
.wan-msg-body .wan-parsed table{width:100%;border-collapse:collapse;font-size:12px}
.wan-msg-body .wan-parsed th{text-align:left;padding:4px 8px;background:var(--decoder-row-alt-bg);border-bottom:2px solid var(--border-heavy);font-size:11px}
.wan-msg-body .wan-parsed td{padding:4px 8px;border-bottom:1px solid var(--ar-border)}
.wan-msg-body .wan-parsed .wan-field-hex{font-family:monospace;word-break:break-all}
.spy-tip{cursor:help;text-decoration:underline dotted var(--text-tertiary);text-underline-offset:2px}
#paynet-process-card .proc-desc{font-size:13px;color:var(--text-secondary);line-height:1.65;margin-bottom:14px}
#paynet-no-process{color:var(--text-muted);font-style:italic;font-size:13px;padding:4px 0}
.proc-meta-label{font-family:'Montserrat',sans-serif;font-size:10px;text-transform:uppercase;letter-spacing:.06em;color:var(--text-tertiary);display:block;margin-bottom:6px}
.proc-terms{margin-bottom:14px;font-size:13px;line-height:1.8}
.proc-terms [data-gloss]{margin-right:6px}
.proc-hsm-links{margin-bottom:14px;font-size:13px}
.process-placeholder{background:#fef3c7;border:1px solid #fbbf24;border-radius:4px;padding:16px;font-size:13px;color:#92400e}
.process-placeholder strong{font-family:'Montserrat',sans-serif;font-size:11px;text-transform:uppercase;letter-spacing:.05em;display:block;margin-bottom:6px}
.process-placeholder p{line-height:1.6}
.process-placeholder code{font-family:'Courier New',monospace;font-size:12px;background:rgba(0,0,0,.08);padding:1px 4px;border-radius:2px}

/* ── Simulation panel ──────────────────────────────────────────────────── */
.sim-form{display:flex;flex-wrap:wrap;gap:10px;align-items:flex-end;margin-bottom:16px}
.sim-field{display:flex;flex-direction:column;gap:3px}
.sim-field label{font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.06em;color:var(--text-tertiary);font-family:'Montserrat',sans-serif}
.sim-field input,.sim-field select{padding:6px 8px;border:1px solid var(--border-input);border-radius:3px;font-size:13px;font-family:inherit;min-width:120px;background:var(--bg-input);color:var(--text-primary)}
.sim-field input:focus,.sim-field select:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px rgba(50,170,221,.12)}
.sim-run-btn{background:var(--text-primary);color:var(--bg-surface);border:none;padding:8px 20px;border-radius:3px;font-size:12px;font-weight:700;cursor:pointer;font-family:'Montserrat',sans-serif;letter-spacing:.06em;text-transform:uppercase;transition:background .2s;align-self:flex-end}
.sim-run-btn:hover{background:var(--accent)}
.sim-run-btn:disabled{background:var(--text-muted);cursor:not-allowed}
.sim-reset-btn{background:var(--bg-surface);color:var(--text-primary);border:1px solid var(--border-input);padding:8px 14px;border-radius:3px;font-size:12px;font-weight:700;cursor:pointer;font-family:'Montserrat',sans-serif;letter-spacing:.06em;text-transform:uppercase;transition:background .2s;align-self:flex-end}
.sim-reset-btn:hover{background:var(--bg-surface-hover)}
.sim-status{font-size:12px;font-family:'Montserrat',sans-serif;padding:4px 0;color:var(--text-secondary)}
.sim-status.ok{color:#16a34a;font-weight:700}
.sim-status.fail{color:#b91c1c;font-weight:700}
.sim-status.loading{color:#d97706;font-weight:600}

/* Hop cards */
.sim-hops{display:flex;flex-direction:column;gap:12px;margin-top:12px}
.sim-hop{background:var(--card-bg);border:1px solid var(--card-border);border-radius:4px;overflow:hidden}
.sim-hop-header{display:flex;align-items:center;gap:10px;padding:10px 14px;background:var(--bg-surface-alt);border-bottom:1px solid var(--border-light);cursor:pointer;user-select:none}
.sim-hop-num{background:var(--accent);color:#fff;font-size:10px;font-weight:700;font-family:'Montserrat',sans-serif;width:22px;height:22px;border-radius:50%;display:flex;align-items:center;justify-content:center;flex-shrink:0}
.sim-hop-label{font-size:13px;font-weight:600;font-family:'Montserrat',sans-serif;color:var(--text-heading);flex:1}
.sim-hop-type{font-size:11px;font-family:'Montserrat',sans-serif;color:var(--text-tertiary);text-transform:uppercase;letter-spacing:.04em}
.sim-hop-arrow{font-size:14px;color:var(--text-muted);transition:transform .2s}
.sim-hop.open .sim-hop-arrow{transform:rotate(90deg)}
.sim-hop-body{display:none;padding:12px 14px}
.sim-hop.open .sim-hop-body{display:block}
.sim-hop-table{width:100%;border-collapse:collapse;font-size:13px}
.sim-hop-table td{padding:4px 6px;vertical-align:top;border-bottom:1px solid var(--border-light)}
.sim-hop-table td:first-child{width:180px;color:var(--out-key-color);font-weight:600;font-size:12px;font-family:'Courier New',monospace}
.sim-hop-table td:last-child{font-family:'Courier New',monospace;word-break:break-all;color:var(--out-val-color)}
.sim-hop-table .hex-val{color:var(--out-hex);letter-spacing:.04em}
.sim-hop-keys{margin-top:8px;padding-top:8px;border-top:1px solid var(--border-light)}
.sim-hop-keys-title{font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.06em;color:var(--text-tertiary);margin-bottom:6px;font-family:'Montserrat',sans-serif}
.sim-key-row{display:flex;gap:12px;font-size:12px;padding:2px 0;font-family:'Courier New',monospace}
.sim-key-name{color:var(--text-primary);width:200px;flex-shrink:0}
.sim-key-type{color:var(--text-tertiary);width:120px;flex-shrink:0}
.sim-key-kvc{color:var(--out-hex)}

/* ── HSM view ───────────────────────────────────────────────────────────── */
#layout{display:flex;flex:1;overflow:hidden;background:var(--bg-page)}
#sidebar{width:260px;background:var(--bg-surface);border-right:1px solid var(--border-default);display:flex;flex-direction:column;overflow:hidden;flex-shrink:0}
.resize-handle{width:5px;cursor:col-resize;background:transparent;flex-shrink:0;position:relative;z-index:10}
.resize-handle:hover,.resize-handle.dragging{background:var(--accent);opacity:.4}
#sidebar-scroll{flex:1;overflow-y:auto}
.cat-header{padding:8px 12px 4px;font-size:10px;font-weight:700;color:var(--text-tertiary);text-transform:uppercase;letter-spacing:.08em;border-top:1px solid var(--border-light);margin-top:4px;font-family:'Montserrat',sans-serif}
.cat-header:first-child{border-top:none;margin-top:0}
.fn-link{display:block;padding:6px 12px 6px 16px;cursor:pointer;color:var(--text-primary);font-size:13px;border-left:3px solid transparent;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-family:'Montserrat',sans-serif;font-weight:400}
.fn-link:hover{background:var(--bg-surface-hover);color:var(--text-heading)}
.fn-link.active{background:var(--decoder-header-bg);border-left-color:var(--accent);color:var(--text-heading);font-weight:600}
.fn-id{display:inline-block;min-width:32px;font-weight:700;color:var(--text-tertiary);font-size:11px}
.fn-link.active .fn-id{color:var(--accent)}
#store-section{width:220px;background:var(--bg-surface);border-left:1px solid var(--border-default);padding:8px;overflow-y:auto;flex-shrink:0}
#store-title{font-size:10px;font-weight:700;color:var(--text-tertiary);text-transform:uppercase;letter-spacing:.08em;margin-bottom:6px;font-family:'Montserrat',sans-serif}
#store-list{font-size:12px}
.store-owner{margin-bottom:8px}
.store-owner-label{font-size:10px;font-weight:700;color:var(--text-secondary);text-transform:uppercase;letter-spacing:.06em;padding:4px 0 2px;border-bottom:1px solid var(--border-heavy);margin-bottom:2px;font-family:'Montserrat',sans-serif}
.store-owner-type{font-weight:400;color:#94a3b8;text-transform:lowercase;margin-left:4px}
.store-section-rename{color:#94a3b8;cursor:pointer;font-size:11px;margin-left:4px;opacity:0;transition:opacity .15s}
.store-owner-label:hover .store-section-rename{opacity:1}
.store-section-rename:hover{color:var(--accent)}
.store-section-copy{color:#94a3b8;cursor:pointer;font-size:13px;margin-left:2px;opacity:0;transition:opacity .15s}
.store-owner-label:hover .store-section-copy{opacity:1}
.store-section-copy:hover{color:var(--accent)}
.store-owner-dragover{background:var(--bg-surface-alt);border-radius:4px;outline:2px dashed var(--accent);outline-offset:-2px}
.store-item[draggable=true]{cursor:grab}
.store-item[draggable=true]:active{cursor:grabbing}
.store-item{display:flex;flex-wrap:wrap;align-items:center;gap:4px;padding:3px 0 3px 6px;border-bottom:1px solid var(--border-light);cursor:pointer}
.store-item:hover{background:var(--decoder-row-alt-bg)}
.store-item:last-child{border-bottom:none}
.store-label{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--text-primary)}
.store-copy{color:#64748b;cursor:pointer;font-size:13px;line-height:1;padding:0 2px;flex-shrink:0}
.store-copy:hover{color:#0369a1}
.store-copy-ok{color:#059669!important}
.store-del{color:#ef4444;cursor:pointer;font-size:16px;line-height:1;padding:0 2px;flex-shrink:0}
.store-del:hover{color:#b91c1c}
.store-key-value{width:100%;padding:4px 0;font-size:11px;word-break:break-all;line-height:1.4}
.store-key-value code{background:var(--code-bg);border:1px solid var(--code-border);border-radius:3px;padding:2px 5px;color:var(--code-color);font-size:10px;display:block;max-height:80px;overflow-y:auto}
#store-empty{color:var(--text-muted);font-style:italic;font-size:12px}
.store-item-pinned{background:var(--bg-surface-alt);border-left:2px solid var(--accent)}
.store-pin{color:#94a3b8;cursor:pointer;font-size:11px;padding:0 2px;flex-shrink:0;opacity:.5}
.store-pin:hover{opacity:1}
.store-pin-active{opacity:1;color:var(--accent)}
.store-copy-to{color:#64748b;cursor:pointer;font-size:13px;line-height:1;padding:0 2px;flex-shrink:0}
.store-copy-to:hover{color:#0369a1}
#ks-pinned-lmk{font-size:10px;font-family:'Courier New',monospace;padding:3px 6px;margin-bottom:4px;background:var(--bg-surface-alt);border:1px solid var(--accent);border-radius:3px;display:flex;align-items:center;gap:4px}
.ks-pinned-label{font-family:'Montserrat',sans-serif;font-weight:700;font-size:9px;color:var(--accent);text-transform:uppercase;letter-spacing:.05em}
.ks-pinned-value{color:var(--text-secondary);flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ks-pinned-unpin{color:var(--text-tertiary);cursor:pointer;font-size:14px;line-height:1;flex-shrink:0}
.ks-pinned-unpin:hover{color:#ef4444}
#ks-slot-bar{display:flex;gap:3px;margin-bottom:6px;padding:2px 0}
.ks-slot-btn{font-size:10px;font-family:'Montserrat',sans-serif;padding:3px 7px;border-radius:3px;cursor:pointer;white-space:nowrap;border:1px solid var(--preset-btn-border);background:var(--preset-btn-bg);color:var(--preset-btn-color);transition:all .15s;position:relative;min-width:22px;text-align:center;font-weight:600}
.ks-slot-btn:hover:not(:disabled){background:var(--preset-btn-hover-bg);color:var(--preset-btn-hover-color);border-color:var(--preset-btn-hover-border)}
.ks-slot-btn:disabled{cursor:default;color:var(--preset-btn-dis-color)!important;border-color:var(--preset-btn-dis-border)!important;background:var(--preset-btn-dis-bg)!important}
.ks-slot-active{border-color:var(--accent)!important;background:var(--accent)!important;color:#fff!important}
.ks-slot-filled{border-color:var(--preset-btn-border);background:var(--preset-btn-bg);color:var(--preset-btn-color)}
.ks-slot-empty{border-color:var(--preset-btn-dis-border);background:var(--preset-btn-dis-bg);color:var(--preset-btn-dis-color)}
.ks-slot-unused{border-color:var(--preset-btn-dis-border);background:var(--preset-btn-dis-bg);color:var(--preset-btn-dis-color)}
.ks-slot-gear{position:absolute;top:-3px;right:-3px;font-size:8px;background:var(--preset-gear-bg);border-radius:50%;width:14px;height:14px;display:none;align-items:center;justify-content:center;cursor:pointer;color:var(--preset-gear-color);border:1px solid var(--preset-gear-border)}
.ks-slot-btn:hover .ks-slot-gear{display:flex}
#main{flex:1;display:flex;flex-direction:column;overflow:hidden;background:var(--bg-page)}
#main-scroll{flex:1;overflow-y:auto;padding:20px}
#fn-panel{max-width:820px}
#fn-title{font-size:20px;font-weight:700;color:var(--text-heading);margin-bottom:8px;font-family:'Montserrat',sans-serif;letter-spacing:.02em}
#fn-desc{margin-bottom:18px}
#fn-desc .fn-purpose{font-size:13px;color:var(--text-primary);line-height:1.65;margin-bottom:8px}
#fn-desc .fn-impl{font-size:12px;color:var(--text-secondary);line-height:1.6;padding:10px 14px;background:var(--bg-surface-alt);border-left:3px solid var(--accent);border-radius:0 3px 3px 0}
#fn-form{background:var(--card-bg);border:1px solid var(--card-border);border-radius:4px;padding:20px;margin-bottom:16px;border-top:3px solid var(--accent)}
.field-row{margin-bottom:14px}
.field-row label{display:block;font-size:12px;font-weight:600;color:var(--text-primary);margin-bottom:4px;font-family:'Montserrat',sans-serif;text-transform:uppercase;letter-spacing:.05em}
.field-hint{font-size:11px;color:var(--modal-hint);margin-bottom:4px;font-family:'Montserrat',sans-serif}
.field-row input[type=text],.field-row input[type=number],.field-row select,.field-row textarea{
  width:100%;padding:7px 10px;border:1px solid var(--border-input);border-radius:3px;font-size:13px;font-family:inherit;color:var(--text-primary);background:var(--bg-input)}
.field-row textarea{font-family:'Courier New',monospace;font-size:12px;resize:vertical;min-height:80px}
.field-row input:focus,.field-row select:focus,.field-row textarea:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px rgba(50,170,221,.12)}
.seed-row{display:flex;gap:6px;align-items:center}
.seed-row input{flex:1}
.btn-small{padding:5px 10px;font-size:12px;border:1px solid var(--border-input);border-radius:3px;background:var(--bg-surface-hover);cursor:pointer;color:var(--text-primary);white-space:nowrap;font-family:'Montserrat',sans-serif;font-weight:600}
.btn-small:hover{background:var(--border-default)}
.store-input-row{display:flex;gap:6px;align-items:center}
.store-input-row input,.store-input-row select{flex:1}
.store-select{max-width:160px;font-size:12px}
#form-btn-row{display:flex;gap:8px;align-items:center;margin-top:4px}
#submit-btn{background:var(--text-primary);color:var(--bg-surface);border:none;padding:10px 22px;border-radius:3px;font-size:13px;font-weight:700;cursor:pointer;flex:1;font-family:'Montserrat',sans-serif;letter-spacing:.06em;text-transform:uppercase;transition:background .2s}
#submit-btn:hover{background:var(--accent)}
#submit-btn:disabled{background:var(--text-muted);cursor:not-allowed}
#test-vals-btn{padding:10px 14px;font-size:12px;border:1px solid var(--border-input);border-radius:3px;background:var(--bg-surface-hover);cursor:pointer;color:var(--text-primary);white-space:nowrap;font-family:'Montserrat',sans-serif;font-weight:600}
#test-vals-btn:hover:not(:disabled){background:var(--border-default)}
#test-vals-btn:disabled{opacity:.4;cursor:not-allowed}
.tr31-preview{margin-top:6px;padding:10px 12px;background:var(--decoder-header-bg);border:1px solid var(--accent);border-radius:3px;font-size:12px;line-height:1.7;display:none}
.tr31-preview strong{display:block;color:var(--accent-hover);margin-bottom:4px;font-family:'Montserrat',sans-serif;font-weight:700;font-size:11px;text-transform:uppercase;letter-spacing:.06em}
.tr31-preview .ph-key{color:var(--out-key-color);font-family:'Courier New',monospace}
.tr31-preview .ph-val{color:var(--out-val-color);font-family:'Courier New',monospace}
#output-panel{background:var(--out-bg);border:1px solid var(--card-border);border-radius:4px;padding:20px;display:none;border-top:3px solid var(--accent-hover)}
#output-error{background:var(--error-bg);border:1px solid var(--error-border);border-radius:3px;padding:12px 16px;color:var(--error-text);font-size:13px;margin-bottom:12px;display:none}
.out-section-title{font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.08em;color:var(--text-tertiary);margin:12px 0 6px;padding-bottom:4px;border-bottom:1px solid var(--border-light);font-family:'Montserrat',sans-serif}
.out-section-title:first-child{margin-top:0}
.out-table{width:100%;border-collapse:collapse}
.out-table tr:hover td{background:var(--bg-surface-alt)}
.out-table td{padding:5px 6px;vertical-align:top;font-size:13px}
.out-key{width:200px;color:var(--out-key-color);font-weight:600;font-size:12px;font-family:'Courier New',monospace}
.out-key.indented{padding-left:20px;color:var(--modal-hint)}
.out-val{font-family:'Courier New',monospace;word-break:break-all;color:var(--out-val-color)}
.out-val.hex{color:var(--out-hex);letter-spacing:.04em}
.out-actions{width:140px;text-align:right;white-space:nowrap}
.btn-copy{font-size:11px;padding:2px 7px;border:1px solid var(--border-input);border-radius:3px;background:var(--bg-surface-hover);cursor:pointer;color:var(--text-primary);font-family:'Montserrat',sans-serif;font-weight:600}
.btn-copy:hover{background:var(--border-default)}
.btn-copy.copied{background:#dcfce7;border-color:#86efac;color:#16a34a}
.btn-save{font-size:11px;padding:2px 7px;border:1px solid var(--accent);border-radius:3px;background:var(--decoder-header-bg);cursor:pointer;color:var(--accent-hover);margin-left:4px;font-family:'Montserrat',sans-serif;font-weight:600}
.btn-save:hover{background:#d8eef8}
.nested-label td{padding:6px 6px 2px;font-size:11px;font-weight:700;text-transform:uppercase;color:var(--text-muted);letter-spacing:.04em;border-top:1px solid var(--border-light);font-family:'Montserrat',sans-serif}
details.workings{margin-top:12px}
details.workings summary{cursor:pointer;font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.06em;color:var(--text-tertiary);padding:4px 0;user-select:none;font-family:'Montserrat',sans-serif}
details.workings summary:hover{color:var(--text-primary)}
details.workings .work-inner{margin-top:8px}

/* Save modal */
#save-modal{display:none;position:fixed;inset:0;background:rgba(0,0,0,.5);z-index:100;align-items:center;justify-content:center}
#save-modal.open{display:flex}
#save-box{background:var(--modal-bg);border-radius:4px;padding:24px;width:340px;box-shadow:0 10px 40px rgba(0,0,0,.25);border-top:3px solid var(--accent)}
#save-box h3{font-size:14px;font-weight:700;margin-bottom:12px;font-family:'Montserrat',sans-serif;text-transform:uppercase;letter-spacing:.05em;color:var(--text-heading)}
#save-box input{width:100%;padding:8px 10px;border:1px solid var(--border-input);border-radius:3px;font-size:13px;margin-bottom:12px;background:var(--bg-input);color:var(--text-primary)}
.modal-btns{display:flex;gap:8px;justify-content:flex-end}
.modal-btns button{padding:7px 16px;border-radius:3px;font-size:12px;cursor:pointer;border:1px solid var(--border-input);font-family:'Montserrat',sans-serif;font-weight:700;text-transform:uppercase;letter-spacing:.05em}
#save-confirm{background:var(--text-primary);color:var(--bg-surface);border-color:var(--text-primary)}
#save-confirm:hover{background:var(--accent);border-color:var(--accent)}
#save-cancel{background:var(--bg-surface);color:var(--text-primary)}
#save-cancel:hover{background:var(--bg-surface-hover)}

/* Placeholder */
#placeholder{display:flex;flex-direction:column;align-items:center;justify-content:center;flex:1;color:var(--text-muted);text-align:center;padding:40px}
#placeholder h2{font-size:22px;font-weight:700;color:var(--text-tertiary);margin-bottom:8px;font-family:'Montserrat',sans-serif;letter-spacing:.03em}

/* Glossary tooltip */
[data-gloss]{border-bottom:1px dotted var(--accent);cursor:help}
#gloss-tip{display:none;position:fixed;z-index:1000;background:#111;color:#fff;border-radius:4px;padding:10px 14px;font-size:12px;max-width:300px;line-height:1.55;font-family:'Frank Ruhl Libre',Georgia,serif;box-shadow:0 4px 20px rgba(0,0,0,.4)}
#gloss-tip strong{display:block;font-family:'Montserrat',sans-serif;font-size:10px;text-transform:uppercase;letter-spacing:.07em;color:#32aadd;margin-bottom:5px}
.gloss-links{margin-top:8px;font-size:11px;color:#aaa}
.gloss-link{color:#32aadd;cursor:pointer;text-decoration:none;background:none;border:none;padding:0;font-size:11px;font-family:'Frank Ruhl Libre',Georgia,serif;display:inline}
.gloss-link:hover{text-decoration:underline}

/* ── Hamburger button (hidden on desktop) ──────────────────────────────── */
#nav-toggle{display:none;background:none;border:none;color:#fff;font-size:22px;cursor:pointer;padding:4px 8px;margin-right:12px;line-height:1;flex-shrink:0}

/* ── Sidebar toggle buttons (hidden on desktop) ────────────────────────── */
.sidebar-toggle{display:none;background:#111;color:#fff;border:none;padding:8px 16px;font-size:12px;font-weight:700;font-family:'Montserrat',sans-serif;text-transform:uppercase;letter-spacing:.06em;cursor:pointer;width:100%;text-align:left;flex-shrink:0}
.sidebar-toggle:hover{background:#32aadd}

/* Mobile-only message (hidden by default, shown via media query) */
.mobile-only-msg{display:none;align-items:center;justify-content:center;flex:1;padding:32px 24px}
.mobile-only-inner{text-align:center;max-width:360px;font-family:'Montserrat',sans-serif}
.mobile-only-inner h3{font-size:16px;font-weight:700;color:var(--text-heading);margin:12px 0 8px}
.mobile-only-inner p{font-size:13px;color:var(--text-secondary);line-height:1.6;margin:0 0 8px}

/* ── Mobile responsive ─────────────────────────────────────────────────── */
@media(max-width:768px){
  /* Nav: show hamburger, collapse tabs */
  #nav-toggle{display:block;min-height:44px}
  #topnav{flex-wrap:wrap;height:auto;min-height:48px;padding:0 10px}
  #topnav h1{font-size:12px}
  .nav-tabs{display:none;width:100%;margin-left:0;order:10;flex-direction:column;height:auto;border-top:1px solid #333;padding:4px 0}
  .nav-tabs.open{display:flex}
  .nav-tab{padding:12px 8px;border-bottom:none;border-left:3px solid transparent;margin-bottom:0;font-size:13px;min-height:44px}
  .nav-tab.active{border-left-color:#32aadd;border-bottom-color:transparent}
  .nav-links{margin-left:auto}
  #version-badge{display:none}
  #sim-disclaimer{font-size:10px;padding:4px 10px}

  /* Home view */
  #view-home{padding:20px 12px}
  .home-intro{margin-bottom:20px}
  .home-intro h2{font-size:20px}
  .home-intro p{font-size:13px}
  .home-cards{flex-direction:column;align-items:stretch;gap:12px}
  .home-card{width:100%;padding:20px 16px}
  .home-footer{margin-top:16px}

  /* Paynet view: show "larger screen" message, hide simulator */
  #paynet-mobile-msg{display:flex!important}
  #paynet-sidebar,#paynet-main,.sidebar-expand-btn,.paynet-splitter{display:none!important}

  /* Settlement/Financial Flows: show "larger screen" message, hide content */
  #stl-mobile-msg{display:flex!important}
  #stl-sidebar,#stl-main{display:none!important}

  /* HSM view: stack sidebar above main */
  #layout{flex-direction:column}
  .resize-handle{display:none}
  #sidebar{width:100%;border-right:none;border-bottom:1px solid var(--border-default)}
  #sidebar.collapsed #sidebar-scroll{display:none}
  #sidebar .sidebar-toggle{display:block;min-height:44px}
  #sidebar-scroll{max-height:220px}
  .fn-link{padding:10px 12px 10px 14px;min-height:44px;font-size:12px;display:flex;align-items:center}
  .cat-header{padding:10px 12px 6px}
  #store-section{width:100%;border-left:none;border-top:1px solid var(--border-default);max-height:180px}
  #main{padding:10px}
  #fn-panel{max-width:100%}
  #fn-title{font-size:16px;margin-bottom:6px}
  #fn-desc .fn-purpose{font-size:12px}
  #fn-desc .fn-impl{font-size:11px;padding:8px 10px}
  #fn-form{padding:14px}

  /* Form fields: full width, larger */
  .field-row{margin-bottom:10px}
  .field-row label{font-size:11px}
  .field-row input[type=text],.field-row input[type=number],.field-row select,.field-row textarea{font-size:14px;padding:10px;min-height:44px}
  .field-row textarea{min-height:70px}
  .seed-row .btn-small{min-height:44px;padding:8px 12px}
  #form-btn-row{gap:6px}
  #submit-btn{padding:12px 16px;font-size:14px;min-height:48px}
  #test-vals-btn{padding:12px 14px;font-size:13px;min-height:48px}

  /* Output panel */
  #output-panel{padding:14px}
  .out-table{display:block;overflow-x:auto}
  .out-key{min-width:100px;width:auto;font-size:11px}
  .out-val{font-size:12px}
  .out-actions{width:auto}
  .btn-copy{font-size:11px;padding:4px 8px;min-height:32px}
  .btn-save{font-size:11px;padding:4px 8px;min-height:32px}

  /* Sim form: stack fields */
  .sim-form{flex-direction:column;align-items:stretch}
  .sim-field{width:100%}
  .sim-field input,.sim-field select{width:100%;min-height:44px;font-size:14px}
  .sim-run-btn,.sim-reset-btn{align-self:stretch;width:100%;min-height:48px;font-size:14px}

  /* Hop tables */
  .sim-hop-table{display:block;overflow-x:auto}
  .sim-key-row{flex-wrap:wrap;gap:4px}
  .sim-key-name{width:auto}
  .sim-key-type{width:auto}

  /* Modal: full-width on mobile, larger controls */
  .topo-modal,.topo-modal.topo-modal-wide{max-width:95%;padding:14px;width:95%}
  .topo-modal-cols{grid-template-columns:1fr}
  .topo-modal h4{font-size:14px}
  .topo-modal p{font-size:12px}
  .topo-modal-option{padding:10px 14px;font-size:13px;min-height:44px;margin:0 4px 6px 0}
  .topo-modal-field input,.topo-modal-field select{padding:10px;font-size:14px;min-height:44px}
  .topo-modal-field label{font-size:11px}
  .topo-modal-submit{padding:12px 20px;font-size:13px;min-height:48px;width:100%}
  .topo-modal-cancel{font-size:12px;padding:8px 0;min-height:44px}
  #save-box{width:92%;max-width:340px}
  #save-box input{padding:10px;font-size:14px;min-height:44px}
  .modal-btns button{padding:10px 16px;min-height:44px}

  /* Process card */
  .paynet-card{padding:10px}

  /* Glossary tooltip: constrain to screen */
  #gloss-tip{max-width:min(90vw,300px);font-size:11px;padding:8px 10px}

  /* Store items: larger touch targets */
  .store-item{padding:6px 4px 6px 6px;min-height:36px}
  .store-copy{font-size:16px;padding:4px 6px;min-height:32px}
  .store-del{font-size:18px;padding:4px 6px;min-height:32px}
}

/* ── ActivityRecord rendering ──────────────────────────────────────────── */
.ar-record{font-size:13px;line-height:1.6;position:relative}
/* Timeline connector */
.ar-timeline{position:relative;padding-left:28px}
.ar-timeline::before{content:'';position:absolute;left:9px;top:0;bottom:0;width:2px;background:var(--ar-border);border-radius:1px}
details.ar-step{margin-bottom:14px;padding-left:0;border-left:none;position:relative}
details.ar-step>summary{list-style:none}
details.ar-step>summary::-webkit-details-marker{display:none}
details.ar-step>summary::marker{display:none;content:''}
.ar-step-title{font-weight:600;color:var(--ar-summary-color);margin-bottom:2px;display:flex;align-items:center;gap:6px;cursor:pointer;user-select:none;font-size:12px;font-family:'Montserrat',sans-serif}
.ar-step-title::before{content:'\25b6';font-size:9px;color:#94a3b8;transition:transform .15s}
details.ar-step[open]>.ar-step-title::before{transform:rotate(90deg);color:#3b82f6}
.ar-step-copy{cursor:pointer;background:none;border:1px solid transparent;border-radius:3px;padding:1px 5px;font-size:10px;color:#94a3b8;margin-left:auto;line-height:1;flex-shrink:0;font-family:'Montserrat',sans-serif}
.ar-step-copy:hover{color:#3b82f6;border-color:#bfdbfe;background:#f0f4ff}
.ar-step-copy.copied{color:#16a34a;border-color:#bbf7d0;background:#f0fdf4}
.ar-step-num{display:inline-flex;width:20px;height:20px;background:#3b82f6;color:#fff;border-radius:50%;align-items:center;justify-content:center;font-size:11px;font-weight:700;flex-shrink:0;position:relative;z-index:1;order:-1}
details.ar-step:not([open])>.ar-step-title .ar-step-num{background:#94a3b8}
.ar-timeline .ar-step-num{margin-left:-28px;margin-right:8px}
.ar-step-desc{color:#64748b;font-size:12px;margin-bottom:4px}
/* HSM call cards with accent stripe */
.ar-hsm-call{background:var(--ar-hsm-bg);border:1px solid var(--ar-hsm-border);border-left:3px solid #7c3aed;border-radius:0 6px 6px 0;padding:8px 10px;margin:6px 0}
.ar-hsm-call.ar-hsm-scd{border-left-color:#d97706}
.ar-hsm-fn{font-size:13px;margin-bottom:4px;display:flex;align-items:baseline;flex-wrap:wrap;gap:4px}
.ar-hsm-link{text-decoration:none;font-size:10px;background:var(--pill-algo-bg);color:#7c3aed;padding:1px 5px;border-radius:4px;border:1px solid #d8b4fe;font-family:'Montserrat',sans-serif;font-weight:600;transition:background .15s,border-color .15s}.ar-hsm-link:hover{background:#ddd6fe;border-color:#a78bfa}
.ar-hsm-io{margin:2px 0}
.ar-hsm-io.ar-hsm-inputs{max-height:0;overflow:hidden;transition:max-height .25s ease}
.ar-hsm-io.ar-hsm-inputs.open{max-height:600px}
.ar-hsm-inputs-toggle{font-size:10px;color:#94a3b8;cursor:pointer;user-select:none;border:none;background:none;padding:0;font-family:'Montserrat',sans-serif;font-weight:600;letter-spacing:.04em;text-transform:uppercase;transition:color .15s}
.ar-hsm-inputs-toggle:hover{color:#64748b}
.ar-hsm-inputs-toggle::before{content:'\25b6';font-size:8px;margin-right:3px;display:inline-block;transition:transform .15s}
.ar-hsm-inputs-toggle.open::before{transform:rotate(90deg)}
.ar-hsm-out{border-top:1px dashed var(--border-heavy);padding-top:4px;margin-top:4px}
.ar-kv{width:100%;border-collapse:collapse;font-size:12px}
.ar-kv td{padding:1px 6px 1px 0;vertical-align:top}
.ar-k{color:#64748b;white-space:nowrap;font-weight:500;width:1%}
.ar-v{color:var(--ar-summary-color);word-break:break-all;font-family:'Courier New',monospace}
.ar-hex{font-family:'Courier New',monospace;font-size:11px;background:var(--decoder-row-alt-bg);padding:1px 4px;border-radius:3px;word-break:break-all}
/* Message cards with direction tinting */
.ar-msg{border:1px solid var(--ar-border);border-radius:4px;padding:4px 8px;margin:4px 0;font-size:12px}
.ar-msg.ar-msg-request{background:var(--msg-req-bg);border-left:3px solid var(--msg-req-border);color:var(--text-primary)}
.ar-msg.ar-msg-response{background:var(--success-bg);border-left:3px solid var(--success-border);color:var(--text-primary)}
.ar-msg-header{display:flex;align-items:center;gap:4px;flex-wrap:wrap}
/* Pill badges for short param values */
.ar-pill{display:inline-block;padding:1px 6px;border-radius:9px;font-size:10px;font-weight:600;font-family:'Montserrat',sans-serif;letter-spacing:.02em}
.ar-pill-algo{background:var(--pill-algo-bg);color:var(--pill-algo-color)}
.ar-pill-format{background:var(--pill-format-bg);color:var(--pill-format-color)}
.ar-pill-op{background:var(--pill-op-bg);color:var(--pill-op-color)}
.ar-pill-ok{background:var(--pill-ok-bg);color:var(--pill-ok-color)}
.ar-pill-fail{background:var(--pill-fail-bg);color:var(--pill-fail-color)}
/* Key summary bar */
.ar-key-bar{display:flex;flex-wrap:wrap;gap:4px;padding:6px 8px;margin-bottom:8px;background:#faf5ff;border:1px solid #e9d5ff;border-radius:4px;font-size:11px;font-family:'Montserrat',sans-serif}
.ar-key-chip{display:inline-flex;align-items:center;gap:3px;padding:2px 8px;background:var(--bg-surface);border:1px solid #d8b4fe;border-radius:10px;font-size:10px;color:#7c3aed;font-weight:600}
.ar-key-chip-icon{font-size:10px}
/* Sequence diagram */
.ar-seq{margin:6px 0;padding:8px 0;border:1px solid var(--ar-border);border-radius:6px;background:var(--bg-surface-alt);overflow-x:auto}
.ar-seq-row{display:flex;align-items:center;padding:3px 12px;min-height:24px}
.ar-seq-label{width:80px;font-size:10px;font-weight:600;font-family:'Montserrat',sans-serif;color:#64748b;text-align:right;flex-shrink:0;padding-right:8px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ar-seq-arrow{flex:1;display:flex;align-items:center;min-width:80px;position:relative}
.ar-seq-arrow-line{flex:1;height:2px;border-radius:1px}
.ar-seq-arrow-head{width:0;height:0;border-top:4px solid transparent;border-bottom:4px solid transparent;flex-shrink:0}
.ar-seq-arrow.request .ar-seq-arrow-line{background:#3b82f6}
.ar-seq-arrow.request .ar-seq-arrow-head.right{border-left:6px solid #3b82f6}
.ar-seq-arrow.request .ar-seq-arrow-head.left{border-right:6px solid #3b82f6}
.ar-seq-arrow.response .ar-seq-arrow-line{background:#16a34a}
.ar-seq-arrow.response .ar-seq-arrow-head.right{border-left:6px solid #16a34a}
.ar-seq-arrow.response .ar-seq-arrow-head.left{border-right:6px solid #16a34a}
.ar-seq-info{position:absolute;top:-10px;left:50%;transform:translateX(-50%);font-size:9px;font-weight:600;font-family:'Montserrat',sans-serif;white-space:nowrap;background:var(--bg-surface-alt);padding:0 4px}
.ar-seq-col{width:1px;background:var(--border-heavy);flex-shrink:0;align-self:stretch;margin:0 4px}
.ar-seq-header{display:flex;padding:4px 12px 6px;border-bottom:1px solid var(--ar-border);margin-bottom:4px}
.ar-seq-header-label{width:80px;font-size:9px;font-weight:700;font-family:'Montserrat',sans-serif;color:#94a3b8;text-transform:uppercase;letter-spacing:.06em;text-align:center;flex-shrink:0}
.ar-seq-header-spacer{flex:1}
/* HSM call copy button */
.ar-hsm-copy{margin-left:auto;padding:1px 5px;font-size:10px;color:#94a3b8;background:none;border:1px solid transparent;border-radius:3px;cursor:pointer;font-family:'Montserrat',sans-serif;line-height:1;flex-shrink:0}
.ar-hsm-copy:hover{color:#3b82f6;border-color:#bfdbfe;background:#f0f4ff}
.ar-hsm-copy.copied{color:#16a34a;border-color:#bbf7d0;background:#f0fdf4}

/* ── Tablet tweaks ─────────────────────────────────────────────────────── */
@media(max-width:1024px) and (min-width:769px){
  #paynet-sidebar{width:180px}
  #sidebar{width:180px}
  #store-section{width:180px}
  .home-card{width:280px}
  .nav-tab{padding:0 10px;font-size:11px}
  .topo-node{font-size:10px;padding:4px 8px}
  .topo-arrow{min-width:20px;margin:0 2px}
  .topo-protocol{font-size:7px}
  .topo-display{font-size:7px}
  .topo-add{font-size:8px}
  #paynet-main{padding:16px}
}

/* ── Settlement Simulator ───────────────────────────────────────────────── */
#stl-sidebar{width:220px;background:var(--bg-surface);border-right:1px solid var(--border-default);display:flex;flex-direction:column;overflow-y:auto;flex-shrink:0;padding:0}
.stl-sidebar-title{font-size:11px;font-weight:700;font-family:'Montserrat',sans-serif;text-transform:uppercase;letter-spacing:.06em;color:var(--text-tertiary);padding:10px 14px 6px;border-bottom:1px solid var(--border-default)}
#stl-sidebar .card-issuer-group summary{padding:8px 14px;font-size:11px}
#stl-sidebar .card-item{padding:6px 14px 8px}
.stl-sidebar-bank-bar{display:inline-block;width:8px;height:12px;border-radius:2px;margin-right:5px;vertical-align:middle}
.stl-acct-line{font-size:10px;color:var(--text-secondary);font-family:monospace;margin-top:1px}
.stl-mini-stmt{margin-top:4px;border-top:1px solid var(--border-light);padding-top:3px}
.stl-mini-stmt-hdr{font-size:9px;font-weight:600;color:var(--text-tertiary);text-transform:uppercase;letter-spacing:.3px;margin-bottom:2px}
.stl-mini-stmt-row{display:flex;align-items:center;gap:4px;font-size:10px;line-height:1.6;font-family:monospace;padding:1px 2px;border-radius:2px}
.stl-mini-stmt-row[style*="cursor"]:hover{background:var(--bg-surface-alt)}
.stl-mini-stmt-ref{flex:0 0 auto;font-size:9px;color:var(--text-tertiary)}
.stl-mini-stmt-desc{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--text-secondary)}
.stl-mini-stmt-amt{flex:0 0 auto;font-weight:600;color:var(--error-text,#dc2626)}
.stl-mini-stmt-amt-pos{flex:0 0 auto;font-weight:600;color:#16a34a}
.stl-dispute-btn{text-align:left!important;justify-content:flex-start!important;font-size:12px!important;padding:8px 12px!important;border:1px solid var(--border-heavy)!important;background:var(--bg-surface)!important;color:var(--text-primary)!important}
.stl-dispute-btn:hover{background:var(--bg-surface-alt)!important}
#stl-main{flex:1;overflow:hidden;padding:16px 20px;display:flex;flex-direction:column;gap:0;background:var(--bg-page)}
#stl-topo-card{border-top:3px solid var(--accent);flex:0 0 auto;padding:10px 14px;min-height:220px;transition:min-height .2s ease}
#stl-topo-card.collapsed{min-height:0;overflow:hidden}
#stl-topo-card.collapsed #stl-topo-area{display:none}
#stl-topo-card.collapsed .stl-topo-header{margin-bottom:0}
#stl-topo-card.collapsed .topo-collapse-btn{transform:rotate(-90deg)}
#stl-detail-card.collapsed{min-height:0;overflow:hidden;flex:0 0 auto!important}
#stl-detail-card.collapsed #stl-tabs-area{display:none}
#stl-detail-card.collapsed .paynet-card-title{margin-bottom:0;border-bottom:none;padding-bottom:0}
#stl-detail-card.collapsed .topo-collapse-btn{transform:rotate(-90deg)}
.stl-topo-header{display:flex;align-items:center;gap:10px;margin-bottom:8px}
.stl-interchange-link{font-size:11px;font-weight:600;font-family:'Montserrat',sans-serif;color:var(--accent);cursor:pointer;text-decoration:underline;text-underline-offset:2px}
.stl-interchange-link:hover{color:var(--text-primary)}
.stl-preset-bar{display:flex;align-items:center;gap:6px;margin-top:8px;flex-wrap:wrap}
.stl-modal-field{margin-bottom:8px;display:flex;flex-direction:column;gap:3px}
.stl-modal-field label{font-size:11px;font-weight:600;color:var(--text-secondary);font-family:'Montserrat',sans-serif}
.stl-modal-field input,.stl-modal-field select{padding:6px 10px;font-size:13px;border:1px solid var(--border-input);border-radius:4px;background:var(--bg-surface);color:var(--text-primary);font-family:inherit}
.stl-preset-btn{padding:16px 28px;border:2px solid var(--border-default);border-radius:8px;background:var(--bg-surface);cursor:pointer;font-size:13px;transition:all .15s;font-family:'Montserrat',sans-serif;color:var(--text-primary)}
.stl-preset-btn:hover{border-color:var(--accent);background:var(--bg-surface-hover)}
.stl-controls{display:flex;flex-wrap:wrap;gap:10px;align-items:center;margin-bottom:14px;padding:10px 12px;background:var(--bg-surface);border:1px solid var(--border-default);border-radius:6px}
.stl-day-bar{display:flex;align-items:center;gap:8px}
.stl-day-badge{font-size:14px;font-weight:700;font-family:'Montserrat',sans-serif;color:var(--accent);padding:4px 12px;background:var(--bg-surface-alt);border-radius:4px;border:1px solid var(--border-heavy)}
.stl-purchase-form{display:flex;flex-wrap:wrap;align-items:center;gap:6px;margin-left:auto}
.stl-purchase-form select,.stl-purchase-form input{padding:4px 8px;font-size:12px;border:1px solid var(--border-input);border-radius:4px;background:var(--bg-surface);color:var(--text-primary);font-family:inherit}
.stl-btn{padding:5px 14px;font-size:12px;font-weight:600;font-family:'Montserrat',sans-serif;border:1px solid var(--border-input);border-radius:4px;background:var(--bg-surface-hover);color:var(--text-primary);cursor:pointer;transition:all .15s}
.stl-btn:hover{background:var(--accent);color:#fff;border-color:var(--accent)}
.stl-btn-primary{background:var(--text-primary);color:var(--bg-surface);border-color:var(--text-primary)}
.stl-btn-primary:hover{background:var(--accent);border-color:var(--accent)}
.stl-btn-subtle{color:var(--text-tertiary);border-color:var(--border-heavy)}
.stl-btn-subtle:hover{color:var(--text-primary);background:var(--bg-surface-hover);border-color:var(--border-input)}

/* Topology */
.stl-topology{padding:12px;background:var(--bg-surface);border:1px solid var(--border-default);border-radius:6px;margin-bottom:14px;overflow-x:auto}
.stl-topo-layout{display:flex;align-items:center;gap:8px;justify-content:center}
.stl-topo-left{display:flex;flex-direction:column;gap:8px;align-items:center}
.stl-topo-right{display:flex;flex-direction:column;gap:8px;align-items:center}
.stl-topo-row{display:flex;align-items:center;gap:8px;justify-content:center}
.stl-node{display:flex;flex-direction:column;align-items:center;padding:8px 12px;border-radius:6px;border:1.5px solid var(--border-default);background:var(--bg-surface-alt);min-width:90px;text-align:center;transition:all .2s}
.stl-node-icon{font-size:22px;margin-bottom:2px}
.stl-node-name{font-size:11px;font-weight:600;font-family:'Montserrat',sans-serif;color:var(--text-primary)}
.stl-node-bal{font-size:11px;font-family:monospace;margin-top:2px;color:var(--text-secondary)}
.stl-positions{margin-top:3px;font-size:9px;font-family:monospace;text-align:left;max-width:130px}
.stl-pos-line{display:flex;justify-content:space-between;gap:4px;line-height:1.3}
.stl-pos-cpty{color:var(--text-tertiary);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.stl-bal-pos{color:#16a34a}
.stl-bal-neg{color:#dc2626}
.stl-acct{font-size:10px;color:var(--text-tertiary);margin-top:1px;font-family:monospace}
.stl-acct-avail{color:var(--text-tertiary)}
.stl-ch-badge{font-size:9px;font-weight:600;color:#fff;padding:2px 6px;border-radius:3px;margin-bottom:2px;white-space:nowrap;animation:stl-badge-in .2s ease}
@keyframes stl-badge-in{from{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:translateY(0)}}
.stl-node-compact{padding:4px 8px;min-width:70px}
.stl-node-compact .stl-node-icon{font-size:16px;margin-bottom:1px}
.stl-node-compact .stl-node-name{font-size:9px}
.stl-node-compact .stl-positions{font-size:9px}
.stl-node-bank{position:relative;overflow:hidden}
.stl-bank-colour-bar{position:absolute;top:0;right:0;width:8px;height:100%;border-radius:0 4px 4px 0}
.stl-bar-Red{background:#dc2626}
.stl-bar-Blue{background:repeating-linear-gradient(45deg,#2563eb,#2563eb 3px,#93c5fd 3px,#93c5fd 6px)}
.stl-bar-Green{background:repeating-linear-gradient(0deg,#16a34a,#16a34a 3px,#86efac 3px,#86efac 6px)}
.stl-bar-Yellow{background:repeating-linear-gradient(-45deg,#ca8a04,#ca8a04 3px,#fde68a 3px,#fde68a 6px)}
.stl-bar-Purple{background:repeating-linear-gradient(90deg,#7c3aed,#7c3aed 3px,#c4b5fd 3px,#c4b5fd 6px)}
.stl-bar-Orange{background:repeating-linear-gradient(45deg,#ea580c 1px,transparent 1px,transparent 4px,#ea580c 4px,#ea580c 5px,transparent 5px,transparent 8px);background-color:#fdba74}
.stl-topo-merch-col,.stl-topo-acq-col{display:flex;flex-direction:column;gap:4px;align-items:center}
.stl-topo-add-btn{padding:3px 10px;border-radius:16px;font-size:9px;font-weight:600;font-family:'Montserrat',sans-serif;cursor:pointer;border:1.5px dashed var(--topo-add-border);background:var(--topo-add-bg);color:var(--topo-add-color);margin-top:4px;transition:all .2s ease;white-space:nowrap}
.stl-topo-add-btn:hover{border-color:var(--accent);color:var(--accent);background:var(--decoder-header-bg)}
.stl-add-bank-row{display:flex;gap:8px;justify-content:center;margin-top:8px}
.stl-topo-merch-col{display:flex;flex-direction:column;align-items:center;gap:4px}
.stl-swatch-grid{display:flex;flex-wrap:wrap;gap:6px}
.stl-colour-swatch{display:flex;align-items:center;gap:4px;padding:6px 10px;border:2px solid var(--border-default);border-radius:6px;background:var(--bg-surface);cursor:pointer;font-size:11px;font-weight:600;transition:all .15s}
.stl-colour-swatch:hover:not(:disabled){border-color:var(--swatch-colour);box-shadow:0 0 8px var(--swatch-colour)}
.stl-swatch-used{opacity:0.3;cursor:not-allowed}
.stl-swatch-other{border-color:var(--swatch-colour);border-style:dashed}
.stl-swatch-dot{width:12px;height:12px;border-radius:50%;flex-shrink:0}
.stl-node-ghost{opacity:0.35;border-style:dashed}
.stl-arrow{font-size:16px;color:var(--text-tertiary);flex-shrink:0}
.stl-arrow-spacer{width:24px;flex-shrink:0}
.stl-scheme-col{display:flex;flex-direction:column;align-items:center;gap:6px}

/* Scheme centre column (hub + arrows + RBA) */
.stl-scheme-centre{display:flex;flex-direction:column;align-items:center;gap:6px}
.stl-scheme-centre.stl-node-ghost{opacity:0.35}

/* Scheme hub -- single box with two internal lanes */
.stl-scheme-hub{border:2px solid var(--border-default);border-radius:8px;background:var(--bg-surface);text-align:center;min-width:160px;overflow:hidden}
.stl-scheme-hub.stl-node-ghost{opacity:0.35;border-style:dashed}
.stl-scheme-hub-title{font-size:12px;font-weight:700;font-family:'Montserrat',sans-serif;padding:6px 12px;color:var(--text-heading);border-bottom:1px solid var(--border-default)}
.stl-scheme-hub-inner{display:flex;flex-direction:column}
.stl-scheme-lane{flex:1;padding:8px 10px;font-size:11px;font-weight:600;font-family:'Montserrat',sans-serif}
.stl-scheme-localpos{background:#dbeafe;color:#1e40af;border-bottom:1px solid var(--border-default)}
.stl-scheme-globalcard{background:#ffedd5;color:#9a3412}
.stl-scheme-lane-name{font-size:11px}
.stl-scheme-lane-bal{font-size:10px;font-family:monospace;margin-top:2px}
.stl-scheme-hub-rba{display:none} /* deprecated -- RBA is now a separate node */
.stl-dual-arrow{display:flex;flex-direction:column;align-items:center;gap:0;flex-shrink:0}
.stl-dual-arrow-line{font-size:13px;line-height:1.1}
.stl-color-localpos{color:#3b82f6}
.stl-color-globalcard{color:#f97316}
.stl-dual-arrow-vert{display:flex;gap:8px;justify-content:center}
.stl-dual-arrow-vert .stl-dual-arrow-line{font-size:13px}
[data-theme="dark"] .stl-scheme-localpos{background:#1e3a5f;color:#93c5fd}
[data-theme="dark"] .stl-scheme-globalcard{background:#431407;color:#fdba74}

/* Tabs */
.stl-tabs-container{background:var(--bg-surface);border:1px solid var(--border-default);border-radius:6px;overflow:hidden}
.stl-tabs{display:flex;border-bottom:1px solid var(--border-heavy);background:var(--bg-surface-alt)}
.stl-tab{padding:8px 16px;cursor:pointer;font-size:12px;font-weight:600;font-family:'Montserrat',sans-serif;color:var(--text-tertiary);border-bottom:2px solid transparent;transition:all .15s}
.stl-tab:hover{color:var(--text-primary)}
.stl-tab.active{color:var(--accent);border-bottom-color:var(--accent)}
.stl-tab-content{display:none;padding:12px 14px;max-height:400px;overflow-y:auto}
.stl-tab-content.active{display:block}
.stl-empty{color:var(--text-tertiary);font-size:12px;padding:16px 0;text-align:center}
.stl-table{width:100%;border-collapse:collapse;font-size:12px}
.stl-table th{text-align:left;padding:4px 8px;color:var(--text-tertiary);font-size:10px;text-transform:uppercase;letter-spacing:.5px;border-bottom:1px solid var(--border-heavy)}
.stl-table td{padding:4px 8px;border-bottom:1px solid var(--border-light)}
.stl-table tr:hover td{background:var(--bg-surface-alt)}

/* T-Accounts */
.stl-taccount{margin-bottom:12px;border:1px solid var(--border-heavy);border-radius:4px;overflow:hidden}
.stl-taccount-title{font-size:12px;font-weight:700;padding:4px 8px;background:var(--bg-surface-alt);border-bottom:1px solid var(--border-heavy)}
.stl-taccount-table{width:100%;border-collapse:collapse;font-size:11px}
.stl-taccount-table th{padding:3px 6px;font-size:10px;color:var(--text-tertiary);text-transform:uppercase;letter-spacing:.5px;text-align:center;border-bottom:1px solid var(--border-heavy)}
.stl-taccount-table td{padding:3px 6px;border-bottom:1px solid var(--border-light);vertical-align:top}
.stl-taccount-bal td{border-bottom:none;border-top:2px solid var(--border-heavy)}
.stl-acct-type{display:inline-block;font-size:9px;font-weight:600;text-transform:uppercase;letter-spacing:.3px;padding:1px 4px;border-radius:3px;margin-left:4px;background:var(--bg-surface-alt);color:var(--text-tertiary)}
.stl-acct-asset{color:#3b82f6;background:rgba(59,130,246,0.1)}
.stl-acct-liability{color:#f59e0b;background:rgba(245,158,11,0.1)}
.stl-acct-income{color:#22c55e;background:rgba(34,197,94,0.1)}
.stl-acct-expense{color:#ef4444;background:rgba(239,68,68,0.1)}
.stl-acct-equity{color:#8b5cf6;background:rgba(139,92,246,0.1)}

/* Timeline */
.stl-tl-day{margin-bottom:6px;border:1px solid var(--border-light);border-radius:4px;overflow:hidden}
.stl-tl-day[open]{border-color:var(--border-heavy)}
.stl-tl-day-label{font-size:11px;font-weight:700;font-family:'Montserrat',sans-serif;color:var(--accent);text-transform:uppercase;letter-spacing:.5px;padding:6px 10px;cursor:pointer;list-style:none;user-select:none;display:flex;align-items:center;gap:6px}
.stl-tl-day-label::-webkit-details-marker{display:none}
.stl-tl-day-label::before{content:'\25b6';font-size:8px;color:var(--text-tertiary);transition:transform .15s}
.stl-tl-day[open]>.stl-tl-day-label::before{transform:rotate(90deg)}
.stl-tl-day-label:hover{background:var(--bg-surface-alt)}
.stl-copy-btn{background:none;border:none;cursor:pointer;font-size:11px;color:var(--text-tertiary);padding:0 4px;margin-left:auto;opacity:0.5;transition:opacity .15s}
.stl-copy-btn:hover{opacity:1}
.stl-tl-event{font-size:12px;padding:4px 8px;margin:2px 4px 2px 10px;border-left:3px solid var(--border-heavy);color:var(--text-secondary);line-height:1.5}
.stl-evt-auth{border-left-color:#3b82f6}
.stl-evt-clearing{border-left-color:#f59e0b}
.stl-evt-settlement{border-left-color:#22c55e}
.stl-evt-funding{border-left-color:#8b5cf6}
.stl-evt-reversal{border-left-color:#6b7280}
.stl-evt-refund{border-left-color:#ec4899}
.stl-evt-adjustment{border-left-color:#f59e0b}
.stl-evt-invoice{border-left-color:#ca8a04}
.stl-evt-chargeback{border-left-color:#dc2626}
.stl-evt-representment{border-left-color:#7c3aed}
.stl-tl-type{display:inline-block;font-size:9px;font-weight:700;text-transform:uppercase;letter-spacing:.5px;padding:1px 5px;border-radius:3px;background:var(--bg-surface-alt);color:var(--text-tertiary);margin-right:4px;vertical-align:middle}
.stl-tl-ref{font-family:monospace;font-size:11px;color:var(--accent);cursor:pointer;text-decoration:underline}
.stl-tl-ref:hover{color:var(--text-primary)}
.stl-tl-detail{margin-top:4px}
.stl-tl-detail-sum{font-size:10px;color:var(--accent);cursor:pointer;list-style:none;user-select:none}
.stl-tl-detail-sum::-webkit-details-marker{display:none}
.stl-tl-detail-sum::before{content:'\25b6 ';font-size:8px;color:var(--text-tertiary)}
.stl-tl-detail[open]>.stl-tl-detail-sum::before{content:'\25bc '}
.stl-tl-detail-body{margin-top:2px;padding-left:8px;border-left:2px solid var(--border-light)}
.stl-tl-detail-row{font-size:11px;line-height:1.6;color:var(--text-secondary)}

/* Fee Waterfall */
.stl-fee-detail{font-size:12px;margin-bottom:6px;color:var(--text-secondary)}
.stl-fee-bar{display:flex;height:24px;border-radius:4px;overflow:hidden;margin:4px 0}
.stl-fee-segment{display:flex;align-items:center;justify-content:center;min-width:20px;transition:width .3s}
.stl-fee-label{font-size:9px;font-weight:600;color:#fff;text-shadow:0 1px 2px rgba(0,0,0,.3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;padding:0 4px}
.stl-fee-txn{margin-bottom:4px;border:1px solid var(--border-light);border-radius:4px;overflow:hidden}
.stl-fee-txn[open]{border-color:var(--border-heavy)}
.stl-fee-txn-summary{padding:6px 10px;cursor:pointer;font-size:12px;list-style:none;display:flex;align-items:center;gap:6px;background:var(--bg-surface);user-select:none}
.stl-fee-txn-summary::-webkit-details-marker{display:none}
.stl-fee-txn-summary::before{content:'\25b6';font-size:8px;color:var(--text-tertiary);transition:transform .15s}
.stl-fee-txn[open]>.stl-fee-txn-summary::before{transform:rotate(90deg)}
.stl-fee-txn-summary:hover{background:var(--bg-surface-alt)}
.stl-fee-txn-body{padding:8px 10px;border-top:1px solid var(--border-light)}