:root {
  --ink: #101c2c;
  --muted: #718097;
  --line: #dce3ea;
  --panel: #ffffff;
  --canvas: #f5f7f8;
  --orange: #f7931a;
  --orange-soft: #fff3df;
  --navy: #0a1728;
  --blue: #2e6eea;
  --cyan: #1aaeb7;
  --green: #21a875;
  --red: #d94c4c;
  --shadow: 0 16px 38px rgba(22, 38, 58, 0.08);
}

* { box-sizing: border-box; }

html, body { min-height: 100%; }

body {
  margin: 0;
  color: var(--ink);
  font-family: "Manrope", sans-serif;
  background: #edf1f4;
  font-size: 14px;
}

button, input, select { font: inherit; }
button { color: inherit; }

.app-shell { min-height: 100vh; }
.app-shell:fullscreen { width: 100vw; height: 100vh; overflow: auto; background: #edf1f4; }

.topbar {
  height: 62px;
  padding: 0 clamp(20px, 3vw, 44px);
  background: var(--navy);
  color: white;
  display: flex;
  align-items: center;
  justify-content: space-between;
  box-shadow: 0 4px 20px rgba(2, 8, 18, 0.2);
}

.brand { display: flex; align-items: center; gap: 12px; color: inherit; text-decoration: none; }
.brand-mark {
  width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center;
  color: white; background: var(--orange); font-size: 25px; font-weight: 700;
  box-shadow: 0 0 0 5px rgba(247, 147, 26, 0.12);
}
.brand strong { display: block; font-size: 14px; line-height: 1; letter-spacing: .18em; }
.brand small { display: block; color: #8fa0b5; font-size: 9px; letter-spacing: .3em; margin-top: 6px; }

.network-state { display: flex; align-items: center; gap: 9px; color: #aebccc; font-family: "DM Mono", monospace; font-size: 11px; }
.live-dot { width: 7px; height: 7px; background: #45dc9b; border-radius: 50%; box-shadow: 0 0 0 5px rgba(69,220,155,.1); }
.divider { width: 1px; height: 16px; background: #334256; margin: 0 5px; }

.top-actions { display: flex; gap: 9px; }
.btn {
  border: 0; border-radius: 8px; min-height: 39px; padding: 0 15px; display: inline-flex;
  align-items: center; justify-content: center; gap: 8px; font-size: 12px; font-weight: 700;
  cursor: pointer; transition: transform .18s ease, background .18s ease, box-shadow .18s ease;
}
.btn:hover { transform: translateY(-1px); }
.btn:disabled { opacity: .55; cursor: wait; transform: none; }
.btn svg, .icon-btn svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.btn-primary { background: var(--orange); color: #101720; box-shadow: 0 6px 18px rgba(247,147,26,.2); }
.btn-primary:hover { background: #ffa329; box-shadow: 0 8px 22px rgba(247,147,26,.3); }
.btn-ghost { color: #c2ceda; background: #142438; border: 1px solid #283a50; }

.workspace {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 328px;
  grid-template-rows: minmax(470px, calc(100vh - 330px)) auto;
  gap: 1px;
  background: #d6dee5;
  max-width: 1800px;
  margin: 0 auto;
  border-left: 1px solid #d6dee5;
  border-right: 1px solid #d6dee5;
  transition: grid-template-columns .25s ease;
}
.workspace.inspector-closed { grid-template-columns: minmax(0, 1fr) 0; }

.network-panel, .inspector, .activity-panel { background: var(--panel); }
.network-panel { position: relative; display: grid; grid-template-rows: 64px minmax(328px, 1fr) 78px; min-width: 0; }
.panel-header, .activity-header { display: flex; align-items: center; justify-content: space-between; padding: 0 28px; border-bottom: 1px solid var(--line); }
.eyebrow { color: #8b99aa; font-size: 9px; font-weight: 800; letter-spacing: .2em; margin-bottom: 7px; }
h1, h2 { font-size: 21px; letter-spacing: -.035em; margin: 0; }
h2 { font-size: 18px; }
.topology-actions { display: flex; align-items: center; gap: 9px; }
.segmented { display: flex; padding: 3px; border: 1px solid var(--line); border-radius: 8px; background: #f7f9fa; }
.segmented button { border: 0; background: transparent; color: #8090a2; border-radius: 5px; min-width: 38px; height: 28px; font-size: 10px; font-weight: 700; cursor: pointer; }
.segmented button.active { background: white; color: var(--ink); box-shadow: 0 2px 8px rgba(19,31,48,.09); }
.icon-btn { width: 36px; height: 36px; display: grid; place-items: center; background: white; border: 1px solid var(--line); border-radius: 8px; color: #68798c; cursor: pointer; }

.network-stage { min-height: 0; position: relative; overflow: hidden; background-color: var(--canvas); }
#networkSvg { width: 100%; height: 100%; display: block; touch-action: none; }
.grid-dot { fill: #d9e0e5; opacity: .74; }
.edge { stroke: #aabac7; stroke-width: 1.6; stroke-dasharray: 5 6; marker-end: url(#peer-arrow); }
.peer-arrow-head { fill: #8096a8; }
.edge-hit { stroke: transparent; stroke-width: 14; cursor: pointer; }
.edge.active { stroke: #76a4be; }
.edge-packet { fill: var(--orange); filter: url(#orange-glow); }
.edge-packet-ring { fill: none; stroke: var(--orange); stroke-width: 1.5; opacity: .3; }
.moving-block { filter: url(#node-shadow); pointer-events: none; }
.moving-block rect { fill: var(--green); stroke: #14885c; stroke-width: 1; }
.moving-block text { fill: white; font: 700 6px "DM Mono", monospace; text-anchor: middle; dominant-baseline: central; }
.moving-block.fork-a rect { fill: #f7931a; stroke: #b96100; }
.moving-block.fork-b rect { fill: #835bd7; stroke: #5f37ae; }
.moving-block.sync rect { fill: #2e6eea; stroke: #1f58bd; }

.node { cursor: grab; }
.node:active { cursor: grabbing; }
.node-halo { fill: white; stroke: #d6dee5; stroke-width: 1; filter: url(#node-shadow); transition: stroke .2s; }
.node.selected .node-halo { stroke: var(--orange); stroke-width: 2; }
.node.syncing .node-halo { stroke: #54a7e8; }
.node.fork-a .node-halo { stroke: #f7931a; stroke-width: 2; }
.node.fork-b .node-halo { stroke: #835bd7; stroke-width: 2; }
.node.reorg .node-halo { stroke: #d94c4c; stroke-width: 2.5; }
.node-core { fill: #102034; }
.node-symbol { fill: white; font-size: 22px; font-weight: 700; text-anchor: middle; dominant-baseline: central; pointer-events: none; }
.node-label { fill: #172338; font-size: 11px; font-weight: 800; text-anchor: middle; pointer-events: none; }
.node-sub { fill: #8190a0; font-size: 9px; font-family: "DM Mono", monospace; text-anchor: middle; pointer-events: none; }
.node-status { fill: #2bc486; stroke: #fff; stroke-width: 2.5; }
.miner-badge { fill: var(--orange); stroke: #c96d00; stroke-width: 1; filter: url(#node-shadow); animation: miner-badge-in .35s cubic-bezier(.2,.8,.2,1); }
.miner-badge-label { fill: #17202b; font: 800 7px "DM Mono", monospace; letter-spacing: .1em; text-anchor: middle; dominant-baseline: central; pointer-events: none; }
.node.syncing .node-status { fill: #52a4e5; animation: blink 1s infinite alternate; }
.node-mini-chain { pointer-events: none; filter: url(#node-shadow); }
.mini-chain-block { fill: #fff; stroke: #b8c6d1; stroke-width: 1; transition: fill .25s ease, stroke .25s ease; }
.mini-chain-block.empty { fill: #f5f7f8; stroke: #b8c6d1; stroke-dasharray: 3 2; }
.mini-chain-block.fresh { fill: var(--green); stroke: #14885c; animation: mini-block-arrives .45s cubic-bezier(.2,.8,.2,1); }
.mini-chain-block.syncing { fill: var(--blue); stroke: #1f58bd; }
.mini-chain-block.fork-a { fill: #f7931a; stroke: #c56a00; }
.mini-chain-block.fork-b { fill: #835bd7; stroke: #6840bd; }
.mini-chain-block.reorg { fill: #d94c4c; stroke: #a92f2f; animation: reorg-pulse .75s ease-in-out infinite alternate; }
.mini-chain-label { fill: #627589; font: 500 7px "DM Mono", monospace; text-anchor: middle; dominant-baseline: central; }
.mini-chain-label.active { fill: #fff; font-weight: 700; }
.mini-chain-link { stroke: #95a6b4; stroke-width: 1; stroke-dasharray: 2 2; }
.fork-chain-link { stroke: #71889a; stroke-width: 1.6; fill: none; }
.fork-chain-link.winning { stroke: var(--green); stroke-width: 1.8; }
.fork-candidate { stroke-width: 1.4; opacity: .55; transition: opacity .25s ease, fill .25s ease; }
.fork-candidate.candidate-a { fill: #f7931a; stroke: #c56a00; }
.fork-candidate.candidate-b { fill: #835bd7; stroke: #6840bd; }
.fork-candidate.preferred { opacity: 1; stroke-width: 2; }
.fork-candidate.stale { fill: #d94c4c; stroke: #9f2929; opacity: .65; stroke-dasharray: 3 2; }
.fork-child-block { fill: var(--green); stroke: #14885c; stroke-width: 1.5; animation: mini-block-arrives .45s cubic-bezier(.2,.8,.2,1); }
.fork-block-label { fill: #fff; font: 700 6px "DM Mono", monospace; text-anchor: middle; dominant-baseline: central; pointer-events: none; }
.fork-parent { fill: #eef2f5; stroke-width: 1.2; }
@keyframes miner-badge-in { from { opacity: 0; transform: translateY(5px) scale(.8); } to { opacity: 1; transform: translateY(0) scale(1); } }
@keyframes mini-block-arrives { from { opacity: 0; transform: translateY(-7px); } to { opacity: 1; transform: translateY(0); } }
@keyframes reorg-pulse { to { opacity: .55; } }
@keyframes blink { to { opacity: .35; } }

.stage-legend { position: absolute; left: 22px; bottom: 17px; display: flex; gap: 18px; color: #7e8a99; font-size: 9px; font-weight: 700; letter-spacing: .04em; }
.stage-legend span { display: flex; align-items: center; gap: 7px; }
.legend-node { width: 8px; height: 8px; border-radius: 50%; background: var(--green); }
.legend-node.syncing { background: #52a4e5; }
.legend-line { width: 24px; height: 8px; position: relative; border-top: 1px dashed #9cabb8; }
.legend-line::after { content: ""; position: absolute; right: -1px; top: -4px; border-left: 5px solid #8096a8; border-top: 3px solid transparent; border-bottom: 3px solid transparent; }
.stage-toast { position: absolute; left: 50%; top: 18px; transform: translate(-50%, -10px); background: var(--navy); color: white; border-radius: 7px; padding: 9px 14px; font-size: 11px; opacity: 0; pointer-events: none; transition: .25s ease; box-shadow: var(--shadow); }
.stage-toast.show { opacity: 1; transform: translate(-50%, 0); }
.stage-toast.error { background: #8e2e2e; }
.inspector-tab { display: none; position: absolute; z-index: 12; right: 0; top: 50%; min-height: 128px; padding: 10px 7px; transform: translateY(-50%); color: white; border: 0; border-radius: 9px 0 0 9px; background: var(--navy); box-shadow: -5px 8px 18px rgba(9,23,40,.2); cursor: pointer; writing-mode: vertical-rl; }
.inspector-tab svg { width: 14px; height: 14px; fill: none; stroke: var(--orange); stroke-width: 2; transform: rotate(90deg); }
.inspector-tab span { font-size: 8px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; }
.workspace.inspector-closed .inspector-tab { display: inline-flex; align-items: center; justify-content: center; gap: 8px; }
.fork-explainer { position: absolute; z-index: 8; top: 14px; right: 14px; width: 268px; min-width: 240px; max-width: min(440px, calc(100% - 28px)); min-height: 310px; max-height: calc(100% - 28px); padding: 14px; overflow: auto; resize: both; border: 1px solid #cad5df; border-radius: 11px; background: rgba(255,255,255,.96); box-shadow: 0 18px 38px rgba(16,32,52,.16); backdrop-filter: blur(5px); }
.fork-explainer[hidden] { display: none; }
.fork-explainer-head { display: flex; justify-content: space-between; align-items: flex-start; cursor: move; user-select: none; }
.fork-explainer-head span { display: block; color: #98a5b3; font-size: 7px; font-weight: 800; letter-spacing: .16em; }
.fork-explainer-head strong { display: block; margin-top: 4px; font-size: 12px; }
.fork-guide-head-actions { display: flex; align-items: center; gap: 4px; }
.fork-guide-head-actions > b { padding: 4px 6px; color: #97600a; border-radius: 10px; background: #fff0d7; font-size: 6px; letter-spacing: .06em; }
.fork-guide-head-actions button { width: 22px; height: 22px; display: grid; place-items: center; padding: 0; color: #6e7f91; border: 1px solid #d9e1e7; border-radius: 5px; background: #f5f7f9; font-size: 13px; line-height: 1; cursor: pointer; }
.fork-guide-head-actions button:hover { color: var(--ink); background: white; }
.fork-guide-tab { position: absolute; z-index: 8; top: 16px; right: 14px; min-height: 34px; display: inline-flex; align-items: center; gap: 7px; padding: 0 11px; color: #6d4ab5; border: 1px solid #d9caf8; border-radius: 7px; background: #f2edff; box-shadow: 0 7px 18px rgba(54,35,92,.12); font-size: 8px; font-weight: 800; cursor: pointer; }
.fork-guide-tab[hidden] { display: none; }
.fork-guide-tab svg { width: 13px; height: 13px; fill: none; stroke: currentColor; stroke-width: 1.8; }
.fork-picture { position: relative; width: 220px; height: 178px; margin: 10px auto 4px; }
.fork-picture > svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.fork-picture-line { fill: none; stroke: #708698; stroke-width: 2.1; }
.child-first-line, .child-later-line { display: none; stroke: var(--green); stroke-width: 2; }
.picture-block { position: absolute; height: 30px; display: flex; align-items: center; justify-content: center; gap: 6px; border: 1px solid; border-radius: 6px; color: white; box-shadow: 0 5px 11px rgba(17,32,49,.12); }
.picture-block small { font-size: 6px; font-weight: 800; letter-spacing: .06em; }
.picture-block strong { font: 700 9px "DM Mono", monospace; }
.picture-block i { position: absolute; top: 33px; color: #8996a5; font-size: 6px; font-style: normal; white-space: nowrap; }
.picture-block.branch-a { top: 51px; border-color: #c66d02; background: #f7931a; }
.picture-block.branch-b { top: 51px; border-color: #6740b8; background: #835bd7; }
.fork-picture.first-a .branch-a, .fork-picture.first-b .branch-b { left: 5px; right: auto; width: 94px; }
.fork-picture.first-a .branch-b, .fork-picture.first-b .branch-a { left: 125px; right: auto; width: 90px; }
.picture-block.parent { left: 5px; top: 104px; width: 94px; color: #536679; border-color: #b9c6d1; background: #edf2f5; box-shadow: none; }
.picture-block.older { left: 14px; top: 144px; width: 76px; height: 25px; color: #8795a3; border-color: #d0d8df; background: white; box-shadow: none; }
.picture-block.child { display: none; top: 7px; width: 94px; border-color: #14885c; background: var(--green); animation: mini-block-arrives .45s cubic-bezier(.2,.8,.2,1); }
.fork-picture.winner-first .picture-block.child { display: flex; left: 5px; width: 94px; }
.fork-picture.winner-later .picture-block.child { display: flex; left: 125px; width: 90px; }
.fork-picture.winner-first .child-first-line, .fork-picture.winner-later .child-later-line { display: block; }
.fork-picture.hide-later .later-branch-line { display: none; }
.fork-picture.hide-a .branch-a, .fork-picture.hide-b .branch-b { visibility: hidden; }
.fork-picture.hide-child .picture-block.child, .fork-picture.hide-child .child-first-line, .fork-picture.hide-child .child-later-line { display: none; }
.fork-picture.winner-a .branch-b, .fork-picture.winner-b .branch-a { border-color: #9f2929; background: #d94c4c; opacity: .68; outline: 1px dashed #9f2929; outline-offset: 2px; }
.fork-picture.winner-a .branch-b::after, .fork-picture.winner-b .branch-a::after { content: "STALE"; position: absolute; right: 3px; top: 3px; font-size: 5px; font-weight: 800; }
.fork-explainer > p { min-height: 31px; margin: 6px 0 9px; color: #687789; font-size: 8px; line-height: 1.55; }
.fork-picture-legend { display: flex; gap: 10px; padding-top: 9px; border-top: 1px solid #e3e8ec; color: #8492a1; font-size: 6px; }
.fork-picture-legend span { display: flex; align-items: center; gap: 4px; }
.fork-picture-legend i { width: 6px; height: 6px; border-radius: 2px; }
.fork-picture-legend .orange { background: #f7931a; }
.fork-picture-legend .violet { background: #835bd7; }
.fork-picture-legend .green { background: var(--green); }

.metric-strip { display: grid; grid-template-columns: repeat(4, 1fr); border-top: 1px solid var(--line); }
.metric-strip article { display: flex; align-items: center; gap: 9px; padding: 0 16px; border-right: 1px solid var(--line); min-width: 0; }
.metric-strip article:last-child { border-right: 0; }
.metric-icon { width: 32px; height: 32px; flex: none; border-radius: 8px; display: grid; place-items: center; }
.metric-icon svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.metric-icon.orange { background: var(--orange-soft); color: var(--orange); }
.metric-icon.blue { background: #eaf1ff; color: var(--blue); }
.metric-icon.cyan { background: #e4f8f7; color: var(--cyan); }
.metric-icon.violet { background: #f0eaff; color: #835bd7; }
.metric-strip small { display: block; color: #8996a7; font-size: 9px; font-weight: 700; white-space: nowrap; }
.metric-strip strong { display: block; font-family: "DM Mono", monospace; font-size: 15px; margin-top: 3px; }
.metric-change { margin-left: auto; color: var(--green); background: #e8f8f1; border-radius: 20px; padding: 4px 6px; font-size: 8px; font-weight: 700; }

.inspector { min-width: 0; padding: 20px 25px; overflow: auto; opacity: 1; transition: opacity .18s ease, padding .25s ease; }
.workspace.inspector-closed .inspector { height: 0; min-height: 0; padding: 0; overflow: hidden; opacity: 0; pointer-events: none; }
.inspector-heading { display: flex; align-items: flex-start; justify-content: space-between; padding-bottom: 20px; }
.inspector-heading-actions { display: flex; align-items: center; gap: 7px; }
.inspector-close { width: 24px; height: 24px; display: grid; place-items: center; padding: 0; color: #718196; border: 1px solid #dce3e9; border-radius: 6px; background: #f5f7f9; font-size: 17px; line-height: 1; cursor: pointer; }
.inspector-close:hover { color: #b23c3c; border-color: #ebc7c7; background: #fff3f3; }
.status-pill { color: var(--green); background: #eaf8f2; border-radius: 20px; padding: 5px 8px; font-size: 8px; font-weight: 800; letter-spacing: .08em; display: flex; gap: 5px; align-items: center; }
.status-pill i { width: 5px; height: 5px; border-radius: 50%; background: currentColor; }
.node-identity { display: flex; align-items: center; gap: 12px; background: #f5f7f9; border: 1px solid #e5eaef; padding: 13px; border-radius: 9px; }
.identity-mark { width: 39px; height: 39px; display: grid; place-items: center; border-radius: 8px; color: white; background: var(--navy); font-size: 22px; font-weight: 700; }
.node-identity strong { display: block; font-family: "DM Mono", monospace; font-size: 11px; }
.node-identity span { display: block; color: #8090a0; font-size: 9px; margin-top: 5px; }
.inspector-section { margin-top: 24px; }
.section-title { display: flex; align-items: center; justify-content: space-between; color: #97a3b1; font-size: 8px; font-weight: 800; letter-spacing: .16em; border-bottom: 1px solid var(--line); padding-bottom: 8px; }
.detail-list { margin: 0; }
.detail-list > div { display: flex; justify-content: space-between; align-items: center; min-height: 35px; border-bottom: 1px solid #edf0f3; }
.detail-list dt { color: #7c8999; font-size: 10px; }
.detail-list dd { margin: 0; color: #2b3747; font-family: "DM Mono", monospace; font-size: 10px; font-weight: 500; }
code { color: #2c5f98; background: #eef4fa; border-radius: 4px; padding: 3px 6px; font-family: "DM Mono", monospace; }
.rpc-launch { width: 100%; min-height: 43px; margin-top: 11px; padding: 0 10px; border: 1px solid #dce4eb; border-radius: 7px; display: flex; align-items: center; justify-content: space-between; background: #f7f9fb; cursor: pointer; }
.rpc-launch span { display: flex; align-items: center; gap: 8px; }
.rpc-launch b { color: #2e6eea; font-family: "DM Mono", monospace; font-size: 10px; }
.rpc-launch i { color: #4e5f73; font-style: normal; font-size: 9px; font-weight: 700; }
.rpc-launch strong { color: #8c99a8; font-size: 7px; letter-spacing: .08em; }
.rpc-launch:hover { border-color: #a8bcd0; background: #f1f6fb; }
.peer-bars > div { display: grid; grid-template-columns: 72px 1fr 18px; gap: 8px; align-items: center; margin-top: 12px; color: #748396; font-size: 9px; }
.direction-icon { display: inline-grid; width: 14px; height: 14px; margin-right: 2px; place-items: center; border-radius: 4px; font-size: 9px; }
.direction-icon.inbound { color: #bd6b06; background: var(--orange-soft); }
.direction-icon.outbound { color: #2b65c6; background: #e8f0ff; }
.peer-note { margin: 12px 0 0; color: #8996a5; font-size: 8px; line-height: 1.55; }
.peer-bars strong { text-align: right; font-family: "DM Mono", monospace; color: var(--ink); }
.bar { height: 5px; background: #e9edf1; border-radius: 6px; overflow: hidden; }
.bar i { display: block; height: 100%; border-radius: inherit; transition: width .3s ease; }
.bar-in { background: var(--orange); }
.bar-out { background: var(--blue); }
.acceptance-row { min-height: 42px; margin-top: 10px; border-top: 1px solid #edf0f3; display: flex; align-items: center; justify-content: space-between; font-size: 10px; color: #647487; }
.switch input { position: absolute; opacity: 0; }
.switch span { display: block; width: 31px; height: 17px; background: #cfd6de; border-radius: 20px; position: relative; cursor: pointer; transition: .2s; }
.switch span::after { content: ""; position: absolute; left: 2px; top: 2px; width: 13px; height: 13px; border-radius: 50%; background: white; transition: .2s; box-shadow: 0 1px 3px rgba(0,0,0,.2); }
.switch input:checked + span { background: var(--green); }
.switch input:checked + span::after { transform: translateX(14px); }
.sync-label { color: var(--green); letter-spacing: .08em; }
.chain-stat { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; padding: 13px 0; }
.chain-stat div { background: #f6f8f9; border-radius: 7px; padding: 9px; }
.chain-stat span { display: block; color: #8391a1; font-size: 8px; }
.chain-stat strong { display: block; font-family: "DM Mono", monospace; font-size: 10px; margin-top: 6px; }
.sync-progress { margin: -2px 0 12px; }
.sync-progress > div:first-child { display: flex; justify-content: space-between; color: #8391a1; font-size: 8px; margin-bottom: 6px; }
.sync-progress strong { color: #2e6eea; font-family: "DM Mono", monospace; font-size: 8px; }
.sync-track { height: 4px; overflow: hidden; background: #e7edf2; border-radius: 6px; }
.sync-track i { display: block; width: 100%; height: 100%; background: linear-gradient(90deg, #2e6eea, #47b7d8); border-radius: inherit; transition: width .08s linear; }
.topbar .btn-connect { color: #8cd7e2; background: #112d3a; border: 1px solid #245065; }

.activity-panel { grid-column: 1 / -1; min-height: 255px; }
.activity-header { height: 75px; }
.activity-controls { display: flex; align-items: center; gap: 4px; }
.filter-button { border: 0; background: transparent; color: #7b8999; font-size: 10px; font-weight: 700; padding: 8px 9px; cursor: pointer; border-radius: 6px; }
.filter-button.active { background: #eef2f5; color: var(--ink); }
.btn-mine { background: var(--orange-soft); color: #c76e00; border: 1px solid #f5d5a5; min-height: 34px; }
.btn-fork { min-height: 34px; color: #6d4ab5; background: #f2edff; border: 1px solid #d9caf8; }
.topbar .btn-mine { color: #ffc36f; background: #292517; border-color: #5d4523; }
.topbar .btn-fork { color: #cbb7fa; background: #201d38; border-color: #473c70; }
.event-table { padding: 0 28px 20px; }
.event-row { display: grid; grid-template-columns: 85px 155px 1fr 90px; align-items: center; min-height: 40px; border-bottom: 1px solid #e8edf1; font-size: 10px; }
.event-head { color: #9aa6b3; font-size: 8px; font-weight: 800; letter-spacing: .12em; min-height: 34px; }
.event-row code { justify-self: start; font-size: 8px; }
.event-time { color: #8794a2; font-family: "DM Mono", monospace; }
.event-name { display: flex; align-items: center; gap: 8px; font-weight: 700; }
.event-icon { width: 24px; height: 24px; display: grid; place-items: center; border-radius: 6px; font-size: 10px; }
.event-icon.block { color: #c66f04; background: var(--orange-soft); }
.event-icon.peer { color: #2b6ac7; background: #e8f1ff; }
.event-icon.system { color: #6d55b1; background: #f0ebff; }
.event-detail { color: #667689; font-family: "DM Mono", monospace; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.event-status { justify-self: start; border-radius: 20px; padding: 4px 7px; font-size: 8px; font-weight: 800; letter-spacing: .04em; }
.event-status.accepted, .event-status.propagated { color: var(--green); background: #e8f8f1; }
.event-status.rejected { color: var(--red); background: #fcecec; }
.event-status.pending { color: #b76d0d; background: #fff3df; }

.modal { width: min(520px, calc(100vw - 30px)); border: 0; border-radius: 13px; padding: 0; color: var(--ink); box-shadow: 0 30px 80px rgba(3,12,24,.3); }
.modal::backdrop { background: rgba(4, 13, 25, .7); backdrop-filter: blur(3px); }
.modal form { padding: 28px; }
.modal-head { display: flex; justify-content: space-between; align-items: flex-start; }
.modal-close { border: 0; background: #eef1f3; width: 30px; height: 30px; border-radius: 7px; font-size: 21px; line-height: 1; color: #758397; cursor: pointer; }
.modal-copy { margin: 14px 0 22px; color: #748294; font-size: 11px; line-height: 1.65; }
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.field { display: flex; flex-direction: column; gap: 7px; }
.field-wide { grid-column: 1 / -1; }
.field > span { color: #5e6d7e; font-size: 9px; font-weight: 800; letter-spacing: .05em; }
.field input, .field select { width: 100%; height: 41px; border: 1px solid #d9e0e6; background: #f8fafb; border-radius: 7px; padding: 0 11px; color: var(--ink); outline: none; font-size: 11px; }
.field input:focus, .field select:focus { border-color: var(--orange); box-shadow: 0 0 0 3px rgba(247,147,26,.1); }
.check-field { display: flex; align-items: center; gap: 10px; padding: 12px; border: 1px solid #e1e6eb; border-radius: 8px; cursor: pointer; }
.check-field input { accent-color: var(--orange); }
.check-field strong, .check-field small { display: block; }
.check-field strong { font-size: 10px; }
.check-field small { color: #8290a0; font-size: 9px; margin-top: 4px; }
.modal-actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 24px; }
.modal .btn-ghost { background: #eff2f4; border-color: #e0e5e9; color: #687789; }
.connection-route { display: grid; grid-template-columns: 1fr 30px 1fr; align-items: end; gap: 8px; }
.route-arrow { height: 41px; display: grid; place-items: center; color: var(--orange); font-size: 18px; }
.request-preview { min-height: 45px; margin-top: 16px; background: #f4f6f8; border-radius: 7px; padding: 10px 12px; color: #6b7989; font-family: "DM Mono", monospace; font-size: 9px; line-height: 1.5; white-space: pre-line; }
.rpc-modal { width: min(620px, calc(100vw - 30px)); }
.rpc-node-banner { display: flex; align-items: center; justify-content: space-between; min-height: 44px; margin-bottom: 17px; padding: 0 12px; border: 1px solid #dce4eb; border-radius: 8px; background: #f6f8fa; }
.rpc-node-banner span { display: flex; align-items: center; gap: 9px; font-size: 10px; }
.rpc-node-banner .live-dot { display: inline-block; width: 6px; height: 6px; }
.rpc-node-banner code { font-size: 9px; }
.rpc-fields { margin-bottom: 16px; }
.rpc-code-block { overflow: hidden; margin-top: 10px; border: 1px solid #263b52; border-radius: 8px; background: #091728; }
.rpc-code-block > div { min-height: 30px; padding: 0 12px; display: flex; align-items: center; justify-content: space-between; color: #758aa1; border-bottom: 1px solid #1e3248; font-size: 8px; font-weight: 800; letter-spacing: .12em; }
.rpc-code-block > div code { padding: 0; color: #718ba7; background: transparent; font-size: 8px; }
.rpc-code-block pre { min-height: 55px; max-height: 150px; overflow: auto; margin: 0; padding: 12px; color: #b9d2e8; font: 9px/1.65 "DM Mono", monospace; white-space: pre-wrap; word-break: break-word; }
.response-block pre { min-height: 92px; color: #8ce1bd; }
.response-block.error pre { color: #ff9b9b; }
.response-block.pending pre { color: #f5c078; }
.rpc-actions { justify-content: space-between; }

@media (max-width: 900px) {
  .workspace { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto; }
  .workspace.inspector-closed { grid-template-columns: minmax(0, 1fr); }
  .network-panel { min-height: 520px; }
  .inspector { grid-row: 2; }
  .activity-panel { grid-column: 1; min-width: 0; overflow: hidden; }
  .network-state { display: none; }
}

@media (max-width: 620px) {
  .topbar { padding: 0 14px; }
  .brand small, #pauseButton span, #mineButton span, #forkButton span, #connectButton span { display: none; }
  .top-actions { gap: 5px; }
  .top-actions .btn:not(#addNodeButton) { width: 38px; padding: 0; }
  .workspace { border: 0; }
  .network-panel { grid-template-rows: 62px 380px auto; }
  .panel-header, .activity-header { padding: 0 16px; }
  .metric-strip { grid-template-columns: 1fr 1fr; }
  .metric-strip article { min-height: 72px; border-bottom: 1px solid var(--line); }
  .activity-header { height: auto; padding-top: 16px; padding-bottom: 16px; gap: 12px; align-items: flex-start; }
  .activity-controls { flex-wrap: wrap; justify-content: flex-end; }
  .event-table { padding: 0 16px 16px; overflow-x: auto; }
  .event-row { min-width: 610px; }
  .stage-legend { gap: 10px; left: 12px; }
  .fork-explainer { min-width: 220px; }
  .form-grid { grid-template-columns: 1fr; }
  .field-wide { grid-column: auto; }
  .connection-route { grid-template-columns: 1fr; }
  .route-arrow { height: 20px; transform: rotate(90deg); }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}