:root {
  --bg: #0d1117; --bg2: #161b22; --fg: #c9d1d9; --fg2: #8b949e;
  --accent: #58a6ff; --green: #3fb950; --orange: #d29922;
  --red: #f85149; --border: #30363d; --sidebar-w: 280px;
  --fs-xs: 9px; --fs-sm: 10px; --fs-md: 11px;
  --fs-lg: 12px; --fs-xl: 13px; --fs-2xl: 15px;
  --font-mono: 'SF Mono', 'Cascadia Code', 'Consolas', monospace;
}
* { margin: 0; padding: 0; box-sizing: border-box; }
.truncate { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.code-box {
  font-family: var(--font-mono); font-size: var(--fs-sm);
  background: var(--bg); border: 1px solid var(--border); border-radius: 3px;
  padding: 6px 8px; overflow-y: auto; word-break: break-all;
}
.hover-accent { transition: color .15s, border-color .15s; }
.hover-accent:hover { color: var(--accent); border-color: var(--accent); }
html, body { height: 100%; overflow: hidden; }
body {
  background: var(--bg); color: var(--fg);
  font-family: -apple-system, 'SF Mono', 'Cascadia Code', 'Consolas', monospace;
  font-size: var(--fs-xl); display: flex; flex-direction: column;
}
::-webkit-scrollbar { width: 6px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--border); border-radius: 3px; }

/* ── Header ── */
header {
  padding: 10px 16px 8px; border-bottom: 1px solid var(--border);
  display: flex; align-items: center; gap: 12px; flex-shrink: 0;
}
header h1 { font-size: var(--fs-2xl); font-weight: 600; color: var(--accent); white-space: nowrap; }
.nav-link {
  font-size: var(--fs-md); color: var(--fg2); text-decoration: none;
  padding: 3px 10px; border: 1px solid var(--border); border-radius: 4px;
  white-space: nowrap;
}
#addr-input { flex: 1; max-width: 620px; padding: 5px 10px; font-size: var(--fs-lg); }
#filter-btn { font-size: var(--fs-lg); }
#addr-mode-bar {
  display: flex; align-items: center; gap: 4px;
  font-size: var(--fs-md); color: var(--fg2);
  border-left: 1px solid var(--border); padding-left: 10px; margin-left: 2px;
}
.addr-mode { padding: 3px 8px; border-radius: 4px; cursor: pointer; user-select: none; }
.addr-mode:hover { background: var(--bg2); color: var(--fg); }
.addr-mode.active { background: rgba(88, 166, 255, .15); color: var(--accent); font-weight: 600; }
#status { display: none; }

/* ── Floating stream toggle ── */
#stream-fab {
  position: fixed; bottom: 16px; right: 16px; z-index: 200;
  display: flex; align-items: center; gap: 6px;
  padding: 8px 14px; background: var(--bg2);
  border: 1px solid var(--border); border-radius: 20px;
  cursor: pointer; font-size: var(--fs-lg); color: var(--fg);
  user-select: none; box-shadow: 0 2px 8px rgba(0,0,0,.4);
  transition: border-color .2s; font-family: inherit;
}
.fab-dot {
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--fg2); flex-shrink: 0; transition: background .2s;
}
.fab-dot.live { background: var(--green); }
.fab-dot.paused { background: var(--red); }

/* ── Main layout ── */
#main { flex: 1; display: flex; min-height: 0; }

/* ── Sidebar ── */
#sidebar {
  width: var(--sidebar-w); border-right: 1px solid var(--border);
  display: flex; flex-direction: column; flex-shrink: 0;
}
#sidebar-header {
  padding: 8px 12px; font-size: var(--fs-sm); text-transform: uppercase;
  color: var(--fg2); letter-spacing: .5px; border-bottom: 1px solid var(--border);
}
#event-list { flex: 1; overflow-y: auto; padding: 4px 0; }
.ev-item {
  padding: 8px 12px; cursor: pointer; border-bottom: 1px solid var(--border);
  border-left: 3px solid transparent; transition: background .15s;
}
.ev-item:hover { background: var(--bg2); }
.ev-item.active { background: #1c2333; border-left-color: var(--accent); }
.ev-item.cat-transfer { border-left-color: var(--green); }
.ev-item.cat-swap { border-left-color: var(--purple); }
.ev-item.cat-trade { border-left-color: var(--accent); }
.ev-item.cat-nft { border-left-color: var(--orange); }
.ev-item.cat-unknown { border-left-color: var(--fg3); }
.ev-item.active.cat-transfer { border-left-color: var(--green); }
.ev-item.active.cat-swap { border-left-color: var(--purple); }
.ev-item.active.cat-trade { border-left-color: var(--accent); }
.ev-item.active.cat-nft { border-left-color: var(--orange); }
.ev-head { display: flex; align-items: center; gap: 6px; }
.ev-display {
  flex: 1; font-size: var(--fs-lg); color: var(--fg); font-weight: 500;
}
.ev-ops {
  flex: 1; font-size: var(--fs-sm); color: var(--fg2);
}
.ev-dot {
  width: 7px; height: 7px; border-radius: 50%; flex-shrink: 0;
}
.ev-dot.pending { background: var(--orange); }
.ev-dot.complete { background: var(--green); }
.ev-dot.failed { background: var(--red); }
.ev-time { font-size: var(--fs-xs); color: var(--fg3); margin-left: auto; flex-shrink: 0; }
.ev-meta {
  display: flex; align-items: center; gap: 6px; margin-top: 3px;
  font-size: var(--fs-sm); color: var(--fg2);
}
.ev-category {
  font-size: var(--fs-sm); font-weight: 500;
}
.ev-category.cat-transfer { color: var(--green); }
.ev-category.cat-swap { color: var(--purple); }
.ev-category.cat-trade { color: var(--accent); }
.ev-category.cat-nft { color: var(--orange); }
.ev-category.cat-unknown { color: var(--fg2); }
.ev-msgcount { color: var(--fg3); font-size: var(--fs-xs); }
.ev-fee { color: var(--fg3); font-size: var(--fs-xs); }

.ev-addr {
  display: flex; align-items: center; gap: 2px; margin-top: 4px;
  font-size: var(--fs-sm); color: var(--fg); font-family: var(--font-mono);
  min-width: 0;
}
.ev-addr-pair {
  display: inline-flex; align-items: center; gap: 1px; min-width: 0; max-width: 50%;
}
.ev-addr-pair .ev-copy { opacity: 0; transition: opacity .15s; }
.ev-addr-pair:hover .ev-copy { opacity: 1; }
.ev-arrow { flex-shrink: 0; color: var(--fg2); padding: 0 2px; }
.ev-addr-text {
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.ev-tx {
  display: flex; align-items: center; gap: 3px; margin-top: 2px;
}
.ev-hash {
  font-size: var(--fs-xs); color: var(--fg2); font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
}
.ev-copy {
  flex-shrink: 0; cursor: pointer; user-select: none;
  font-size: var(--fs-md); color: var(--fg2); padding: 2px 4px; border-radius: 3px;
  transition: background .15s, color .15s;
}
.ev-copy:hover { background: var(--bg2); color: var(--accent); }
.ev-copy.copied { color: var(--green); }
.ev-action {
  flex-shrink: 0; cursor: pointer; user-select: none;
  font-size: var(--fs-xs); color: var(--accent); padding: 1px 6px; border-radius: 3px;
  border: 1px solid var(--accent); margin-left: auto;
  transition: background .15s, color .15s, border-color .15s; text-decoration: none;
  opacity: .7;
}
.ev-action:hover { background: rgba(88,166,255,.1); opacity: 1; }
#sidebar-empty {
  padding: 20px 12px; text-align: center; color: var(--fg2); font-size: var(--fs-lg);
}

/* ── Graph area ── */
#graph-area { flex: 1; position: relative; display: flex; flex-direction: column; min-width: 0; }
#graph-svg { flex: 1; width: 100%; }
#graph-empty {
  position: absolute; inset: 0; display: flex; align-items: center;
  justify-content: center; color: var(--fg2); font-size: 14px;
  pointer-events: none;
}

/* ── SVG styles ── */
.node-circle { cursor: grab; }
.node-label { font-size: var(--fs-sm); fill: var(--fg); pointer-events: auto; text-anchor: middle; cursor: pointer; }
body.dragging, body.dragging * { cursor: grabbing !important; }
.node-label.known { fill: #a371f7; }
.edge-line { fill: none; stroke-width: 1.5; }
.edge-label { font-size: var(--fs-xs); fill: var(--fg2); pointer-events: auto; cursor: pointer; }
.edge-label.known { fill: #a371f7; }

/* Edge colors by op_type */
.edge-transfer { stroke: var(--green); }
.edge-jetton { stroke: var(--accent); }
.edge-excesses { stroke: var(--orange); }
.edge-bounce { stroke: var(--red); }
.edge-default { stroke: var(--fg2); }
.edge-virtual { stroke: var(--green); stroke-dasharray: 6 3; opacity: .6; }

/* Pending animations */
.pending .node-circle { animation: pulse 1.5s ease-in-out infinite; }
.pending .edge-line { stroke-dasharray: 6 4; animation: dash 1s linear infinite; }
@keyframes pulse { 0%,100% { opacity: 1; } 50% { opacity: .5; } }
@keyframes dash { to { stroke-dashoffset: -10; } }

/* Node colors — semantic roles from decoded fields */
.node-initiator   { fill: #58a6ff; }
.node-trader      { fill: #79c0ff; }
.node-destination { fill: #3fb950; }
.node-dex         { fill: #a371f7; }
.node-wallet      { fill: #d29922; }
.node-return      { fill: #6e7681; }
.node-recipient   { fill: #da8ee7; }
.node-default     { fill: var(--fg2); }

.node-virtual { stroke-dasharray: 4 2; }
.node-initiator-owned { stroke: #58a6ff !important; stroke-width: 3px; stroke-dasharray: none; }
.node-searched {
  stroke: #fff !important; stroke-width: 3px !important;
  animation: search-glow 1.5s ease-in-out infinite;
}
@keyframes search-glow {
  0%, 100% { filter: drop-shadow(0 0 6px rgba(88,166,255,.6)); }
  50% { filter: drop-shadow(0 0 14px rgba(88,166,255,1)); }
}

/* Flow summary annotation */
.flow-summary {
  font-size: var(--fs-lg); fill: var(--fg); font-weight: 600;
  text-anchor: middle; pointer-events: none;
  paint-order: stroke; stroke: var(--bg); stroke-width: 3px;
}
.flow-summary-sub {
  font-size: var(--fs-xs); fill: var(--fg2); font-weight: 400;
  text-anchor: middle; pointer-events: none;
}

/* ── Graph legend ── */
#graph-legend {
  position: absolute; bottom: 12px; left: 12px; z-index: 10;
  display: flex; flex-wrap: wrap; gap: 8px 14px;
  padding: 6px 10px; background: rgba(13,17,23,.85);
  border: 1px solid var(--border); border-radius: 6px;
  font-size: var(--fs-sm); color: var(--fg2); pointer-events: none;
}
#graph-legend span {
  display: inline-flex; align-items: center; gap: 4px; white-space: nowrap;
}
#graph-legend i {
  display: inline-block; width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0;
}

/* Replay hidden */
.replay-hidden { opacity: 0; transition: opacity .3s; }
.replay-visible { opacity: 1; transition: opacity .3s; }

/* ── Replay controls ── */
#replay-bar {
  display: none; padding: 8px 16px; border-top: 1px solid var(--border);
  background: var(--bg2); align-items: center; gap: 12px; flex-shrink: 0;
}
#replay-bar.show { display: flex; }
#replay-btn {
  width: 32px; height: 32px; border-radius: 50%; border: 1px solid var(--border);
  background: var(--bg); color: var(--fg); cursor: pointer; font-size: 14px;
  display: flex; align-items: center; justify-content: center;
  padding: 0; flex-shrink: 0;
}
#replay-btn.is-play { padding-left: 3px; }
#replay-btn:hover { border-color: var(--accent); color: var(--accent); }
#replay-step { font-size: var(--fs-md); color: var(--fg2); min-width: 80px; }
#speed-slider { width: 120px; accent-color: var(--accent); }
#speed-label { font-size: var(--fs-md); color: var(--fg2); }
#replay-progress { flex: 1; height: 3px; background: var(--border); border-radius: 2px; overflow: hidden; }
#replay-progress-bar { height: 100%; background: var(--accent); width: 0; transition: width .2s; }

/* ── Shared slide-in panel ── */
.panel {
  position: fixed; right: 0; top: 0; bottom: 0;
  max-width: 90vw; background: var(--bg);
  border-left: 1px solid var(--border);
  transform: translateX(100%); transition: transform .25s ease;
  display: flex; flex-direction: column; font-size: var(--fs-lg);
}
.panel.open { transform: translateX(0); }
.panel-header {
  display: flex; align-items: center; padding: 10px 14px;
  border-bottom: 1px solid var(--border); gap: 8px;
}
.panel-title {
  flex: 1; font-size: var(--fs-md); text-transform: uppercase; letter-spacing: .5px;
  color: var(--fg2); font-weight: 600;
}
.panel-close {
  background: none; border: 1px solid var(--border); border-radius: 4px;
  color: var(--fg2); cursor: pointer; font-size: 14px; width: 28px; height: 28px;
  display: flex; align-items: center; justify-content: center;
  transition: border-color .15s, color .15s;
}
.panel-close:hover { border-color: var(--red); color: var(--red); }
.panel-body { flex: 1; overflow-y: auto; padding: 12px 14px; }
.p-section { margin-bottom: 12px; }
.p-label { font-size: var(--fs-xs); text-transform: uppercase; letter-spacing: .4px; color: var(--fg2); margin-bottom: 3px; }
.p-divider { border: none; border-top: 1px solid var(--border); margin: 12px 0; }
.status-text { font-size: var(--fs-sm); margin-top: 4px; min-height: 14px; }

/* ── Shared form input ── */
.form-input {
  padding: 5px 8px; background: var(--bg2); border: 1px solid var(--border);
  border-radius: 4px; color: var(--fg); font-size: var(--fs-md); font-family: inherit;
  box-sizing: border-box;
}
.form-input:focus { border-color: var(--accent); outline: none; }

/* ── Shared accent button ── */
.btn-primary {
  padding: 5px 14px; background: var(--accent); color: #fff; border: none;
  border-radius: 4px; cursor: pointer; font-size: var(--fs-md); font-weight: 600;
  font-family: inherit; transition: opacity .15s;
}
.btn-primary:hover { opacity: .85; }
.btn-primary:disabled { opacity: .4; cursor: default; }

/* Panel-specific widths + z-index */
#addr-panel { width: 340px; z-index: 110; }
#msg-panel  { width: 460px; z-index: 111; }
#help-panel { width: 420px; z-index: 120; }
#help-panel .panel-title { font-size: var(--fs-xl); color: var(--accent); text-transform: none; }
.ap-value { color: var(--fg); word-break: break-all; }
.ap-value-row { display: flex; align-items: center; gap: 6px; color: var(--fg); word-break: break-all; }
.ap-var-chk { width: 14px; height: 14px; flex-shrink: 0; cursor: pointer; accent-color: var(--accent); }
.ap-value.mono { font-family: var(--font-mono); font-size: var(--fs-md); }
.ap-value a { color: var(--accent); text-decoration: none; }
.ap-value a:hover { text-decoration: underline; }
.ap-addr-row {
  display: flex; align-items: center; gap: 4px; margin-bottom: 2px;
}
.ap-addr-text {
  flex: 1; font-family: var(--font-mono); font-size: var(--fs-sm); color: var(--fg);
  word-break: break-all; cursor: pointer;
}
.ap-addr-text:hover { color: var(--accent); }
.ap-copy {
  flex-shrink: 0; cursor: pointer; font-size: var(--fs-md); color: var(--fg2);
  padding: 2px 4px; border-radius: 3px; transition: color .15s;
}
.ap-copy:hover { color: var(--accent); }
.ap-copy.copied { color: var(--green); }
.ap-tag {
  display: inline-block; font-size: var(--fs-xs); padding: 1px 6px; border-radius: 3px;
  background: var(--bg2); color: var(--fg2); margin-right: 4px; margin-bottom: 2px;
}
.ap-unknown { color: var(--orange); font-style: italic; }
.ap-form-row { margin-bottom: 8px; }
.ap-form-row label { display: block; margin-bottom: 2px; cursor: help; }
.ap-form-row label[title]:hover { color: var(--fg); }
.ap-form-row input, .ap-form-row select { width: 100%; }

#addr-save-btn { width: 100%; padding: 7px; }
#addr-save-status { color: var(--green); }

/* ── Message panel content ── */
.mp-value { color: var(--fg); word-break: break-all; font-family: var(--font-mono); font-size: var(--fs-md); }
.mp-row { display: flex; align-items: baseline; gap: 6px; margin-bottom: 2px; }
.mp-key { color: var(--fg2); min-width: 60px; font-size: var(--fs-sm); }
.mp-val { color: var(--fg); font-family: var(--font-mono); font-size: var(--fs-md); word-break: break-all; flex: 1; }

.mp-field-row {
  display: flex; align-items: center; gap: 6px; padding: 4px 0;
  border-bottom: 1px solid rgba(48,54,61,.4);
}
.mp-field-row input[type="checkbox"] { accent-color: var(--accent); cursor: pointer; flex-shrink: 0; }
.mp-field-name { font-size: var(--fs-md); color: var(--accent); min-width: 80px; }
.mp-field-val { font-size: var(--fs-md); color: var(--fg); font-family: var(--font-mono); word-break: break-all; flex: 1; }

.mp-boc-hex {
  color: var(--fg2); max-height: 90px; user-select: all; margin-bottom: 4px;
  line-height: 1.7; letter-spacing: .3px;
}
.mp-boc-hex .fh { opacity: .35; }
.mp-copy-boc {
  cursor: pointer; font-size: var(--fs-md); color: var(--fg2); margin-left: 6px;
  transition: color .15s;
}
.mp-copy-boc:hover { color: var(--accent); }
.mp-cell-info { font-size: var(--fs-sm); color: var(--fg2); margin-bottom: 4px; }
.mp-boc-area { margin-top: 4px; }
.mp-boc-row { display: flex; align-items: center; gap: 4px; margin-bottom: 3px; }
.mp-boc-row input { padding: 3px 5px; border-radius: 3px; }
.mp-boc-row select { padding: 3px 3px; border-radius: 3px; }
.mp-boc-cdot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }
.mp-boc-name { width: 120px; }
.mp-boc-type { width: 78px; }
.mp-boc-bits { width: 38px; text-align: center; }
.mp-boc-result { flex: 1; font-family: var(--font-mono); font-size: var(--fs-sm); color: var(--fg); word-break: break-all; padding: 1px 4px; }
.mp-boc-result:hover { white-space: normal; }
.mp-boc-row .mp-boc-skip { display: flex; align-items: center; gap: 2px; font-size: var(--fs-xs); color: var(--fg2); flex-shrink: 0; }
.mp-boc-row .mp-boc-var { display: flex; align-items: center; gap: 2px; font-size: var(--fs-xs); color: var(--fg2); flex-shrink: 0; cursor: pointer; }
.mp-boc-row .mp-boc-var-on { color: var(--green); font-weight: 600; }
.mp-boc-row .mp-boc-del {
  background: none; border: none; color: var(--fg2); cursor: pointer; font-size: var(--fs-xl); padding: 0 2px;
  transition: color .15s; flex-shrink: 0;
}
.mp-boc-row .mp-boc-del:hover { color: var(--red); }
.mp-decoded-preview {
  color: var(--fg2); max-height: 80px; white-space: pre-wrap;
}
.mp-boc-add {
  padding: 4px 10px; background: var(--bg2); border: 1px solid var(--border);
  border-radius: 4px; color: var(--fg2); cursor: pointer; font-size: var(--fs-md); font-family: inherit;
  margin-top: 4px;
}
.mp-boc-save-area {
  display: flex; gap: 4px; align-items: center; margin-top: 8px; flex-wrap: wrap;
}
.mp-boc-save-area input { padding: 3px 6px; border-radius: 3px; flex: 1; min-width: 60px; }
.mp-boc-save-btn { padding: 4px 12px; flex-shrink: 0; }
.mp-save-status { flex-shrink: 0; }

/* ── Rule builder (bottom panel) ── */
#rule-builder {
  display: none; position: fixed; bottom: 0; left: 0; right: 0; z-index: 60;
  border-top: 2px solid var(--accent); background: var(--bg2);
  max-height: 45vh; overflow-y: auto; padding: 12px 16px;
  box-shadow: 0 -4px 20px rgba(0,0,0,.4);
}
#rule-builder.open { display: block; }
.rb-header {
  display: flex; align-items: center; gap: 10px; margin-bottom: 10px;
}
.rb-title { font-size: var(--fs-lg); font-weight: 600; color: var(--accent); flex: 1; }
.rb-close {
  background: none; border: 1px solid var(--border); border-radius: 4px;
  color: var(--fg2); cursor: pointer; font-size: var(--fs-lg); width: 24px; height: 24px;
  display: flex; align-items: center; justify-content: center;
}
.rb-close:hover { border-color: var(--red); color: var(--red); }
.rb-grid { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 8px; margin-bottom: 10px; }
.rb-field { display: flex; flex-direction: column; gap: 2px; }
.rb-field input, .rb-field select { background: var(--bg); }

.rb-section-title { font-size: var(--fs-sm); text-transform: uppercase; letter-spacing: .4px; color: var(--fg2); margin: 10px 0 4px; }
.rb-handler-hint {
  background: rgba(88,166,255,.05); border: 1px solid rgba(88,166,255,.15); border-radius: 4px;
  padding: 6px 10px; margin: 6px 0 10px; font-size: var(--fs-sm); color: var(--fg2); line-height: 1.5;
}
.rb-hint-desc { margin-bottom: 2px; }
.rb-hint-vars { font-size: var(--fs-xs); }
.rb-hint-auto { color: var(--accent); }
.rb-tags { display: flex; flex-wrap: wrap; gap: 4px; margin-bottom: 6px; }
.rb-tag {
  display: inline-flex; align-items: center; gap: 3px;
  font-size: var(--fs-sm); padding: 2px 8px; border-radius: 3px; cursor: pointer;
  border: 1px solid var(--border); transition: all .15s; user-select: none;
}
.rb-tag.require { background: rgba(63,185,80,.15); border-color: var(--green); color: var(--green); }
.rb-tag-min {
  display: inline-block; margin-left: 4px; padding: 0 4px; border-radius: 3px;
  background: rgba(63,185,80,.25); font-size: 10px; cursor: pointer; font-weight: 600;
}
.rb-tag-min:hover { background: rgba(63,185,80,.45); }
.rb-tag.forbid { background: rgba(248,81,73,.15); border-color: var(--red); color: var(--red); }
.rb-tag.ignore { background: transparent; border-color: var(--border); color: var(--fg2); }
.rb-tag .rb-tag-x { font-size: 8px; opacity: .6; }

.rb-vars { display: flex; flex-wrap: wrap; gap: 4px; margin-bottom: 8px; }
.rb-var {
  display: inline-flex; align-items: center; gap: 3px;
  font-size: var(--fs-sm); padding: 2px 8px; border-radius: 3px;
}
.rb-var-auto {
  background: rgba(88,166,255,.06); border: 1px solid rgba(88,166,255,.25); color: var(--fg2); opacity: .7;
}
.rb-var-picked {
  background: rgba(88,166,255,.15); border: 1px solid var(--accent); color: var(--accent);
}
.rb-var-rm {
  margin-left: 2px; cursor: pointer; font-size: 11px; opacity: .6; font-weight: 700;
}
.rb-var-rm:hover { opacity: 1; color: var(--red); }

.rb-template-row { margin-bottom: 8px; }
.rb-template-row label { display: block; margin-bottom: 2px; }
.rb-template-row input { width: 100%; padding: 6px 8px; background: var(--bg); font-size: var(--fs-lg); }
.rb-preview {
  font-size: var(--fs-md); color: var(--green); margin-top: 2px; min-height: 16px;
  font-family: var(--font-mono); word-break: break-all;
}

.rb-actions { display: flex; gap: 8px; margin-top: 10px; }
.rb-btn {
  padding: 6px 16px; border-radius: 4px; cursor: pointer;
  font-size: var(--fs-md); font-weight: 600; font-family: inherit; transition: opacity .15s;
}
.rb-btn:hover { opacity: .85; }
.rb-btn-cancel { background: none; color: var(--fg2); border: 1px solid var(--border); }
.ev-rule-badge {
  font-size: var(--fs-xs); padding: 1px 5px; border-radius: 3px; cursor: pointer;
  background: rgba(88,166,255,.1); border: 1px solid var(--accent); color: var(--accent);
  font-family: var(--font-mono); transition: all .15s;
}
.ev-rule-badge:hover { background: rgba(88,166,255,.25); }
.ev-rule-badge.ev-rule-none { border-color: var(--fg2); color: var(--fg2); background: transparent; }
.ev-rule-badge.ev-rule-none:hover { border-color: var(--accent); color: var(--accent); }
/* ev-cat-badge replaced by ev-category (plain text, no border) */
.ev-participants {
  font-size: var(--fs-xs); color: var(--fg2); font-family: var(--font-mono);
  font-variant-numeric: tabular-nums; flex: 1; min-width: 0;
}

/* ── Rule Builder preview card ── */
.rb-preview-card {
  border: 1px solid var(--border); border-radius: 6px; padding: 8px 12px;
  background: var(--bg); margin-bottom: 10px;
}
.rb-preview-card .ev-head { display: flex; align-items: center; gap: 6px; }
.rb-preview-card .ev-display { flex: 1; font-size: var(--fs-lg); color: var(--fg); font-weight: 500; }
.rb-preview-card .ev-meta { display: flex; align-items: center; gap: 6px; margin-top: 3px; font-size: var(--fs-sm); color: var(--fg2); }
.rb-preview-card .ev-ids { display: flex; align-items: center; gap: 3px; margin-top: 3px; }
.rb-preview-card .ev-addr { margin-top: 4px; font-size: var(--fs-xs); color: var(--fg2); font-family: var(--font-mono); }
.rb-preview-card .ev-tx { display: flex; align-items: center; gap: 3px; margin-top: 2px; }

/* Clickable edges */
.edge-line { cursor: pointer; }
.edge-line:hover { stroke-width: 3; }

/* ── Help button ── */
#help-btn {
  padding: 3px 10px; border: 1px solid var(--border); border-radius: 4px;
  background: none; color: var(--fg2); cursor: pointer; font-family: inherit;
  font-size: var(--fs-md); white-space: nowrap;
}

/* ── Hint tooltips ── */
.hint {
  display: inline-flex; align-items: center; justify-content: center;
  width: 15px; height: 15px; border-radius: 50%;
  border: 1px solid var(--border); color: var(--fg2); font-size: var(--fs-xs);
  cursor: help; user-select: none; flex-shrink: 0;
  transition: border-color .15s, color .15s;
  font-weight: 600; font-family: inherit; line-height: 1;
  pointer-events: auto;
}
.hint:hover { border-color: var(--accent); color: var(--accent); }

/* ── Help panel content ── */

.hp-section { margin-bottom: 20px; }
.hp-section-title {
  font-size: var(--fs-lg); font-weight: 600; color: var(--accent);
  margin-bottom: 8px; display: flex; align-items: center; gap: 6px;
  cursor: pointer; user-select: none;
}
.hp-section-title:hover { opacity: .85; }
.hp-section-title .hp-arrow {
  font-size: var(--fs-xs); transition: transform .2s; color: var(--fg2);
}
.hp-section.collapsed .hp-section-body { display: none; }
.hp-section.collapsed .hp-arrow { transform: rotate(-90deg); }
.hp-section-body { padding-left: 2px; }
.hp-step {
  display: flex; gap: 8px; margin-bottom: 10px; line-height: 1.5;
}
.hp-num {
  flex-shrink: 0; width: 20px; height: 20px; border-radius: 50%;
  background: rgba(88,166,255,.15); color: var(--accent);
  font-size: var(--fs-sm); font-weight: 700; display: flex;
  align-items: center; justify-content: center; margin-top: 1px;
}
.hp-text { flex: 1; color: var(--fg); font-size: var(--fs-lg); }
.hp-text code {
  background: var(--bg2); padding: 1px 5px; border-radius: 3px;
  font-family: var(--font-mono);
  font-size: var(--fs-md); color: var(--accent);
}
.hp-text em { color: var(--fg2); font-style: normal; }
.hp-text strong { color: var(--green); font-weight: 600; }
.hp-note {
  margin: 6px 0 10px 28px; padding: 6px 10px; background: rgba(210,153,34,.08);
  border-left: 2px solid var(--orange); border-radius: 0 4px 4px 0;
  font-size: var(--fs-md); color: var(--fg2); line-height: 1.45;
}
.hp-example {
  margin: 6px 0 10px 28px; padding: 8px 10px; background: var(--bg2);
  border-radius: 4px; color: var(--fg); line-height: 1.6; white-space: pre-wrap;
}

/* ── Sidebar toggle (mobile) ── */
#sidebar-toggle {
  display: none; padding: 4px 10px; background: var(--bg2); border: 1px solid var(--border);
  border-radius: 4px; color: var(--fg); font-size: var(--fs-lg); cursor: pointer;
  font-family: inherit; white-space: nowrap;
}

/* ── Mobile: < 768px ── */
@media (max-width: 768px) {
  header {
    flex-wrap: wrap; padding: 8px 10px 6px; gap: 6px;
  }
  header h1 { font-size: var(--fs-xl); }
  #addr-input {
    order: 10; flex: 1 0 70%; max-width: none; min-width: 0;
    font-size: var(--fs-xl); padding: 8px 10px;
  }
  #filter-btn { order: 10; flex-shrink: 0; padding: 8px 16px; font-size: var(--fs-xl); }
  .ev-hash { font-size: var(--fs-sm); }
  .ev-copy { min-width: 32px; min-height: 32px; font-size: var(--fs-xl); }
  #debug { display: none; }
  #sidebar-toggle {
    display: block; order: 5; margin-left: auto;
    font-size: 14px; padding: 10px 18px; font-weight: 600; border-radius: 6px;
  }
  #sidebar {
    position: fixed; left: 0; top: 0; bottom: 0; z-index: 100;
    width: 280px; max-width: 85vw; transform: translateX(-100%);
    transition: transform .25s ease; background: var(--bg);
    border-right: 1px solid var(--border);
  }
  #sidebar.open { transform: translateX(0); }
  #sidebar-backdrop {
    display: none; position: fixed; inset: 0; z-index: 99;
    background: rgba(0,0,0,.5);
  }
  #sidebar.open ~ #sidebar-backdrop { display: block; }
  #graph-area { min-width: 0; }
  #replay-bar { flex-wrap: wrap; gap: 8px; padding: 8px 10px; }
  #replay-step { min-width: 60px; font-size: var(--fs-sm); }
  #speed-slider { width: 80px; }
  .node-label { font-size: 8px; }
  .edge-label { font-size: 7px; }
}

/* Canon badge */
.ev-canon { color: #3fb950; font-size: 11px; margin-left: auto; }
.ev-canon-unconfirmed { color: #d29922; }
.ev-canon-failed { color: var(--red); }