*{box-sizing:border-box;margin:0;padding:0}
body{font-family:'Frank Ruhl Libre',Georgia,serif;font-weight:300;font-size:14px;background:#ededed;color:#111111;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:10px;color:#666;font-family:'Montserrat',sans-serif;letter-spacing:.04em;white-space:nowrap}

/* 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;justify-content:center;background:#ededed;overflow-y:auto;padding:40px 20px}
.home-intro{text-align:center;margin-bottom:36px}
.home-intro h2{font-size:26px;font-weight:700;font-family:'Montserrat',sans-serif;color:#111;letter-spacing:.03em;margin-bottom:10px}
.home-intro p{font-size:14px;color:#555;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:#fff;border:1px solid #d5d5d5;border-radius:5px;padding:28px 32px;width:340px;cursor:pointer;border-top:4px solid #32aadd;transition:box-shadow .2s,transform .15s;text-align:left}
.home-card:hover{box-shadow:0 8px 28px rgba(0,0,0,.12);transform:translateY(-3px)}
.home-card h3{font-size:16px;font-weight:700;font-family:'Montserrat',sans-serif;color:#111;margin-bottom:8px;letter-spacing:.02em}
.home-card p{font-size:13px;color:#555;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:#32aadd;text-transform:uppercase;letter-spacing:.06em}
.home-footer{margin-top:32px;font-size:12px;color:#bbb;text-align:center}

/* ── Paynet view ────────────────────────────────────────────────────────── */
#view-paynet{flex-direction:row;position:relative}
#paynet-sidebar{width:230px;background:#fff;border-right:1px solid #d5d5d5;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:#888;font-family:'Montserrat',sans-serif;border-bottom:1px solid #ebebeb;flex-shrink:0;display:flex;align-items:center;gap:6px}
.sidebar-collapse-btn{background:none;border:none;cursor:pointer;font-size:12px;color:#888;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:#fff;border:1px solid #d5d5d5;border-left:none;border-radius:0 4px 4px 0;cursor:pointer;padding:12px 5px;font-size:14px;color:#666;z-index:50;line-height:1;box-shadow:2px 0 6px rgba(0,0,0,.1)}
.sidebar-expand-btn:hover{background:#f5f5f5;color:#333}
#card-list{flex:1;overflow-y:auto;padding:6px 0}
.card-issuer-group{border-bottom:1px solid #eee}
.card-issuer-group summary{padding:8px 16px;font-size:11px;font-weight:600;font-family:'Montserrat',sans-serif;color:#555;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:#f5f5f5}
.card-item{padding:8px 16px 8px 28px;border-left:3px solid transparent;font-size:12px;font-family:'Montserrat',sans-serif;color:#333;display:flex;flex-direction:column;gap:2px}
.card-item:hover{background:#f5f5f5}
.card-item .card-pan{font-family:monospace;font-size:13px;font-weight:600;color:#111}
.card-item .card-issuer{font-size:10px;color:#888}
.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:#ededed}
.paynet-card{background:#fff;border:1px solid #d5d5d5;border-radius:4px;padding:16px 20px;overflow-y:auto;min-height:80px}
#network-diagram-card{border-top:3px solid #32aadd;flex:0 0 auto;display:flex;flex-direction:column;padding:10px 14px;transition:min-height .2s ease}
#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:#888;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 #2087a8;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:#888;margin-bottom:8px;font-family:'Montserrat',sans-serif;border-bottom:1px solid #ebebeb;padding-bottom:6px}
.paynet-splitter{height:8px;cursor:row-resize;background:#ededed;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:#cbd5e1}
.paynet-splitter:hover::after,.paynet-splitter.dragging::after{background:#94a3b8}
.topo-zoom-btn{background:#f1f5f9;border:1px solid #cbd5e1;border-radius:3px;padding:2px 7px;font-size:9px;font-family:'Montserrat',sans-serif;font-weight:700;color:#64748b;cursor:pointer;line-height:1.4;text-transform:uppercase;letter-spacing:.04em}
.topo-zoom-btn:hover{background:#e2e8f0;color:#334155}
.diagram-wrap{display:flex;flex-direction:column;gap:6px;align-items:center;flex:1;overflow:auto;touch-action:pan-x pan-y}
.diagram-legend{display:flex;flex-wrap:wrap;gap:10px;font-size:11px;font-family:'Montserrat',sans-serif;color:#555}
.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:#999;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 rgba(0,0,0,.08);display:flex;flex-direction:column;align-items:center;gap:2px}
.topo-node:hover{box-shadow:0 2px 8px rgba(0,0,0,.13);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:#d5d5d5;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 #d5d5d5}
.topo-arrow-head.left{border-right:7px solid #d5d5d5}
.topo-arrow-dot{width:6px;height:6px;border-radius:50%;background:#d5d5d5;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:#aaa;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:#f8fafc;border-radius:8px;padding:4px 4px;margin:0 2px}
.topo-domain-aq{background:#f0fdf4}
.topo-domain-iss{background:#faf5ff}
.topo-domain-sch{background:#fffbeb}
.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 #bbb;background:#fafafa;color:#888;margin:0 4px;transition:all .2s ease;white-space:nowrap}
.topo-add:hover{border-color:#32aadd;color:#32aadd;background:#f0f9ff}
.topo-add:hover .topo-popup{opacity:1}
.topo-popup{position:fixed;width:280px;overflow-y:auto;background:#fff;border:1px solid #d5d5d5;border-radius:6px;box-shadow:0 4px 16px rgba(0,0,0,.12);padding:14px 16px;font-size:12px;font-weight:400;color:#444;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:#222}
/* Protocol picker modal */
.topo-modal-overlay{position:fixed;top:0;left:0;right:0;bottom:0;background:rgba(0,0,0,.25);z-index:200;display:flex;align-items:center;justify-content:center;overflow-y:auto;padding:20px 0}
.topo-modal{background:#fff;border-radius:8px;box-shadow:0 8px 32px rgba(0,0,0,.18);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:#222}
.topo-modal p{font-size:12px;color:#666;margin:0 0 14px;line-height:1.5}
.topo-modal-option{display:inline-block;text-align:center;padding:7px 14px;border:1.5px solid #e0e0e0;border-radius:5px;background:#fff;cursor:pointer;margin:0 6px 8px 0;transition:all .15s ease;font-family:'Montserrat',sans-serif;font-size:12px;font-weight:600;color:#333}
.topo-modal-option:hover{border-color:#32aadd;background:#f0f9ff}
.topo-modal-option.selected{border-color:#32aadd;background:#f0f9ff;color:#1a8ab5}
.topo-modal-config{margin-bottom:14px}
.topo-modal-config-label{font-size:11px;font-weight:700;color:#444;margin-bottom:3px}
.topo-modal-config-hint{font-size:10px;color:#999;margin-bottom:6px;line-height:1.4}
.topo-modal-cancel{display:inline-block;margin-top:4px;font-size:11px;color:#999;cursor:pointer;border:none;background:none;padding:4px 0;font-family:'Montserrat',sans-serif}
.topo-modal-cancel:hover{color:#555}
.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:#888;margin-bottom:4px}
.topo-modal-field input,.topo-modal-field select{width:100%;padding:7px 10px;border:1px solid #ccc;border-radius:4px;font-size:13px;font-family:inherit;box-sizing:border-box}
.topo-modal-field input:focus,.topo-modal-field select:focus{outline:none;border-color:#32aadd;box-shadow:0 0 0 3px rgba(50,170,221,.12)}
.topo-modal-field .field-hint{font-size:10px;color:#aaa;margin-top:3px;line-height:1.4}
.topo-modal-section{font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.06em;color:#888;margin:14px 0 8px;padding-top:10px;border-top:1px solid #eee}
.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:#32aadd;color:#fff;margin-top:6px;transition:background .15s ease}
.topo-modal-submit:hover{background:#2087a8}
/* Inspect modal */
.inspect-modal{max-width:700px !important}
.inspect-section{margin-bottom:6px;border:1px solid #e2e8f0;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:#f8fafc;cursor:pointer;user-select:none}
.inspect-section summary:hover{background:#f1f5f9}
.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:#f0f9ff;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 #f1f5f9;vertical-align:top}
.inspect-kv td:first-child{color:#888;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:#f8fafc;border:1px solid #e2e8f0;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:#f8fafc;border:1px solid #e2e8f0;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 #f1f5f9}
.inspect-key-item:last-child{border-bottom:none;margin-bottom:0;padding-bottom:0}
.inspect-key-label{font-size:11px;font-weight:700;color:#334155;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 #c084fc;background:#faf5ff;color:#7c3aed;margin-left:6px;white-space:nowrap;transition:all .15s ease}
.topo-issue-btn:hover{border-color:#7c3aed;background:#ede9fe}
/* Topology action buttons */
.topo-actions{text-align:right;margin-top:8px;display:flex;flex-wrap:wrap;gap:6px;justify-content:flex-end}
.topo-action-btn{font-size:11px;font-family:'Montserrat',sans-serif;padding:4px 12px;border-radius:4px;cursor:pointer;white-space:nowrap;border-width:1px;border-style:solid;transition:background .15s}
.topo-action-reset{border-color:#fca5a5;background:#fef2f2;color:#991b1b}
.topo-action-reset:hover{background:#fee2e2}
.topo-action-setup{border-color:#cbd5e1;background:#f8fafc;color:#64748b}
.topo-action-setup:hover{background:#e2e8f0}
.topo-action-signon{border-color:#86efac;background:#f0fdf4;color:#166534}
.topo-action-signon:hover{background:#dcfce7}
.topo-action-txn{border-color:#93c5fd;background:#eff6ff;color:#1e40af}
.topo-action-txn:hover{background:#dbeafe}
.topo-display{background:#1a2332;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 #2d3748;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}
.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 #f59e0b;background:#fffbeb;color:#b45309;white-space:nowrap;transition:all .15s ease;display:inline-block}
.topo-init-btn:hover{border-color:#b45309;background:#fef3c7}
.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:#111;margin-bottom:6px}
.activity-event{border:1px solid #e2e8f0;border-radius:6px;margin-bottom:6px;background:#fff}
.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:#334155;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:#f8fafc}
.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 #cbd5e1;border-radius:4px;overflow:hidden}
.pane-tab{padding:3px 12px;font-size:11px;font-weight:600;font-family:'Montserrat',sans-serif;background:#f8fafc;color:#64748b;border:none;cursor:pointer;border-right:1px solid #cbd5e1;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:#e2e8f0;color:#334155}
/* WAN Spy messages */
#wanspy-content{overflow-y:auto;padding:0}
.wan-msg{border:1px solid #e2e8f0;border-radius:6px;margin-bottom:6px;background:#fff}
.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:#334155;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:#dbeafe;color:#1e40af}
.wan-msg-type-x509{background:#d1fae5;color:#065f46}
.wan-msg-type-tr34{background:#fef3c7;color:#92400e}
.wan-msg-type-ecdh{background:#ede9fe;color:#5b21b6}
.wan-msg-type-tr31{background:#fce7f3;color:#9d174d}
.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:#f1f5f9;color:#475569}
.wan-filter-bar{padding:4px 8px;border-bottom:1px solid #e2e8f0}
.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 #e2e8f0;background:#fff;color:#64748b;cursor:pointer;font-family:'Montserrat',sans-serif;font-weight:600;text-transform:uppercase;letter-spacing:.04em}
.wan-filter-btn:hover{background:#f8fafc}
.wan-filter-btn.active{border-color:#7c3aed;color:#7c3aed;background:#faf5ff}
.wan-msg-route{color:#64748b;font-size:10px;font-weight:400}
.wan-msg-route b{color:#334155;font-weight:600}
.wan-msg-body{padding:4px 12px 12px 12px;font-size:12px}
.wan-msg-body .wan-raw{background:#f8fafc;border:1px solid #e2e8f0;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:#f1f5f9;border-bottom:2px solid #cbd5e1;font-size:11px}
.wan-msg-body .wan-parsed td{padding:4px 8px;border-bottom:1px solid #e2e8f0}
.wan-msg-body .wan-parsed .wan-field-hex{font-family:monospace;word-break:break-all}
#paynet-process-card .proc-desc{font-size:13px;color:#555;line-height:1.65;margin-bottom:14px}
#paynet-no-process{color:#aaa;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:#888;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:#888;font-family:'Montserrat',sans-serif}
.sim-field input,.sim-field select{padding:6px 8px;border:1px solid #ccc;border-radius:3px;font-size:13px;font-family:inherit;min-width:120px}
.sim-field input:focus,.sim-field select:focus{outline:none;border-color:#32aadd;box-shadow:0 0 0 3px rgba(50,170,221,.12)}
.sim-run-btn{background:#111;color:#fff;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:#32aadd}
.sim-run-btn:disabled{background:#aaa;cursor:not-allowed}
.sim-reset-btn{background:#fff;color:#333;border:1px solid #ccc;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:#f5f5f5}
.sim-status{font-size:12px;font-family:'Montserrat',sans-serif;padding:4px 0;color:#555}
.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:#fff;border:1px solid #d5d5d5;border-radius:4px;overflow:hidden}
.sim-hop-header{display:flex;align-items:center;gap:10px;padding:10px 14px;background:#f9f9f9;border-bottom:1px solid #ebebeb;cursor:pointer;user-select:none}
.sim-hop-num{background:#32aadd;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:#111;flex:1}
.sim-hop-type{font-size:11px;font-family:'Montserrat',sans-serif;color:#888;text-transform:uppercase;letter-spacing:.04em}
.sim-hop-arrow{font-size:14px;color:#aaa;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 #f0f0f0}
.sim-hop-table td:first-child{width:180px;color:#666;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:#111}
.sim-hop-table .hex-val{color:#2087a8;letter-spacing:.04em}
.sim-hop-keys{margin-top:8px;padding-top:8px;border-top:1px solid #ebebeb}
.sim-hop-keys-title{font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.06em;color:#888;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:#333;width:200px;flex-shrink:0}
.sim-key-type{color:#888;width:120px;flex-shrink:0}
.sim-key-kvc{color:#2087a8}

/* ── HSM view ───────────────────────────────────────────────────────────── */
#layout{display:flex;flex:1;overflow:hidden;background:#ededed}
#sidebar{width:260px;background:#fff;border-right:1px solid #d5d5d5;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:#32aadd;opacity:.4}
#sidebar-scroll{flex:1;overflow-y:auto}
.cat-header{padding:8px 12px 4px;font-size:10px;font-weight:700;color:#888;text-transform:uppercase;letter-spacing:.08em;border-top:1px solid #ebebeb;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:#333;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:#f5f5f5;color:#111}
.fn-link.active{background:#f0f9ff;border-left-color:#32aadd;color:#111;font-weight:600}
.fn-id{display:inline-block;min-width:32px;font-weight:700;color:#888;font-size:11px}
.fn-link.active .fn-id{color:#32aadd}
#store-section{width:220px;background:#fff;border-left:1px solid #d5d5d5;padding:8px;overflow-y:auto;flex-shrink:0}
#store-title{font-size:10px;font-weight:700;color:#888;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:#555;text-transform:uppercase;letter-spacing:.06em;padding:4px 0 2px;border-bottom:1px solid #cbd5e1;margin-bottom:2px;font-family:'Montserrat',sans-serif}
.store-owner-type{font-weight:400;color:#94a3b8;text-transform:lowercase;margin-left:4px}
.store-item{display:flex;flex-wrap:wrap;align-items:center;gap:4px;padding:3px 0 3px 6px;border-bottom:1px solid #ebebeb;cursor:pointer}
.store-item:hover{background:#f1f5f9}
.store-item:last-child{border-bottom:none}
.store-label{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:#333}
.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:#f8fafc;border:1px solid #e2e8f0;border-radius:3px;padding:2px 5px;color:#1e40af;font-size:10px;display:block;max-height:80px;overflow-y:auto}
#store-empty{color:#aaa;font-style:italic;font-size:12px}
#main{flex:1;overflow-y:auto;padding:20px;background:#ededed}
#fn-panel{max-width:820px}
#fn-title{font-size:20px;font-weight:700;color:#111;margin-bottom:8px;font-family:'Montserrat',sans-serif;letter-spacing:.02em}
#fn-desc{margin-bottom:18px}
#fn-desc .fn-purpose{font-size:13px;color:#333;line-height:1.65;margin-bottom:8px}
#fn-desc .fn-impl{font-size:12px;color:#777;line-height:1.6;padding:10px 14px;background:#f9f9f9;border-left:3px solid #32aadd;border-radius:0 3px 3px 0}
#fn-form{background:#fff;border:1px solid #d5d5d5;border-radius:4px;padding:20px;margin-bottom:16px;border-top:3px solid #32aadd}
.field-row{margin-bottom:14px}
.field-row label{display:block;font-size:12px;font-weight:600;color:#333;margin-bottom:4px;font-family:'Montserrat',sans-serif;text-transform:uppercase;letter-spacing:.05em}
.field-hint{font-size:11px;color:#999;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 #ccc;border-radius:3px;font-size:13px;font-family:inherit;color:#111;background:#fff}
.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:#32aadd;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 #ccc;border-radius:3px;background:#f5f5f5;cursor:pointer;color:#333;white-space:nowrap;font-family:'Montserrat',sans-serif;font-weight:600}
.btn-small:hover{background:#e0e0e0}
.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:#111;color:#fff;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:#32aadd}
#submit-btn:disabled{background:#aaa;cursor:not-allowed}
#test-vals-btn{padding:10px 14px;font-size:12px;border:1px solid #ccc;border-radius:3px;background:#f5f5f5;cursor:pointer;color:#333;white-space:nowrap;font-family:'Montserrat',sans-serif;font-weight:600}
#test-vals-btn:hover:not(:disabled){background:#e0e0e0}
#test-vals-btn:disabled{opacity:.4;cursor:not-allowed}
.tr31-preview{margin-top:6px;padding:10px 12px;background:#f0f9ff;border:1px solid #32aadd;border-radius:3px;font-size:12px;line-height:1.7;display:none}
.tr31-preview strong{display:block;color:#2087a8;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:#666;font-family:'Courier New',monospace}
.tr31-preview .ph-val{color:#111;font-family:'Courier New',monospace}
#output-panel{background:#fff;border:1px solid #d5d5d5;border-radius:4px;padding:20px;display:none;border-top:3px solid #2087a8}
#output-error{background:#fef2f2;border:1px solid #fca5a5;border-radius:3px;padding:12px 16px;color:#b91c1c;font-size:13px;margin-bottom:12px;display:none}
.out-section-title{font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.08em;color:#888;margin:12px 0 6px;padding-bottom:4px;border-bottom:1px solid #ebebeb;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:#f9f9f9}
.out-table td{padding:5px 6px;vertical-align:top;font-size:13px}
.out-key{width:200px;color:#666;font-weight:600;font-size:12px;font-family:'Courier New',monospace}
.out-key.indented{padding-left:20px;color:#999}
.out-val{font-family:'Courier New',monospace;word-break:break-all;color:#111}
.out-val.hex{color:#2087a8;letter-spacing:.04em}
.out-actions{width:140px;text-align:right;white-space:nowrap}
.btn-copy{font-size:11px;padding:2px 7px;border:1px solid #ccc;border-radius:3px;background:#f5f5f5;cursor:pointer;color:#333;font-family:'Montserrat',sans-serif;font-weight:600}
.btn-copy:hover{background:#e0e0e0}
.btn-copy.copied{background:#dcfce7;border-color:#86efac;color:#16a34a}
.btn-save{font-size:11px;padding:2px 7px;border:1px solid #32aadd;border-radius:3px;background:#f0f9ff;cursor:pointer;color:#2087a8;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:#aaa;letter-spacing:.04em;border-top:1px solid #ebebeb;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:#888;padding:4px 0;user-select:none;font-family:'Montserrat',sans-serif}
details.workings summary:hover{color:#333}
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:#fff;border-radius:4px;padding:24px;width:340px;box-shadow:0 10px 40px rgba(0,0,0,.25);border-top:3px solid #32aadd}
#save-box h3{font-size:14px;font-weight:700;margin-bottom:12px;font-family:'Montserrat',sans-serif;text-transform:uppercase;letter-spacing:.05em;color:#111}
#save-box input{width:100%;padding:8px 10px;border:1px solid #ccc;border-radius:3px;font-size:13px;margin-bottom:12px}
.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 #ccc;font-family:'Montserrat',sans-serif;font-weight:700;text-transform:uppercase;letter-spacing:.05em}
#save-confirm{background:#111;color:#fff;border-color:#111}
#save-confirm:hover{background:#32aadd;border-color:#32aadd}
#save-cancel{background:#fff;color:#333}
#save-cancel:hover{background:#f5f5f5}

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

/* Glossary tooltip */
[data-gloss]{border-bottom:1px dotted #32aadd;cursor:help}
#gloss-tip{display:none;position:fixed;z-index:300;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:#1e293b;margin:12px 0 8px}
.mobile-only-inner p{font-size:13px;color:#555;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{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}

  /* HSM view: stack sidebar above main */
  #layout{flex-direction:column}
  .resize-handle{display:none}
  #sidebar{width:100%;border-right:none;border-bottom:1px solid #d5d5d5;flex-shrink:0}
  #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 #d5d5d5;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:#e2e8f0;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:#334155;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:#f8fafc;border:1px solid #e2e8f0;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:#ede9fe;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 #cbd5e1;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:#1e293b;word-break:break-all;font-family:'Courier New',monospace}
.ar-hex{font-family:'Courier New',monospace;font-size:11px;background:#f1f5f9;padding:1px 4px;border-radius:3px;word-break:break-all}
/* Message cards with direction tinting */
.ar-msg{border:1px solid #bfdbfe;border-radius:4px;padding:4px 8px;margin:4px 0;font-size:12px}
.ar-msg.ar-msg-request{background:#eff6ff;border-left:3px solid #3b82f6}
.ar-msg.ar-msg-response{background:#f0fdf4;border-left:3px solid #16a34a}
.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:#ede9fe;color:#6d28d9}
.ar-pill-format{background:#dbeafe;color:#1d4ed8}
.ar-pill-op{background:#fef3c7;color:#92400e}
.ar-pill-ok{background:#dcfce7;color:#166534}
.ar-pill-fail{background:#fee2e2;color:#991b1b}
/* 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:#fff;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 #e2e8f0;border-radius:6px;background:#fafbfc;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:#fafbfc;padding:0 4px}
.ar-seq-col{width:1px;background:#cbd5e1;flex-shrink:0;align-self:stretch;margin:0 4px}
.ar-seq-header{display:flex;padding:4px 12px 6px;border-bottom:1px solid #e2e8f0;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}
}