.trace-head { align-items: flex-end; gap: var(--s4); }
.trace-head .row { justify-content: flex-end; }
.trace-head input { min-width: min(300px, 70vw); }
.trace-panels { margin-bottom: var(--s4); }
.trace-table-card { overflow: hidden; }
.trace-table-card .head { align-items: center; }
.trace-table-card .head .note { margin: 4px 0 0; }
.trace-row { cursor: pointer; }
.trace-row:hover { background: var(--primary-soft); }
.trace-id { border: 0; background: transparent; color: var(--primary); padding: 0; min-height: 0; font: 600 12px/1.4 var(--mono); }
.trace-party { min-width: 190px; max-width: 290px; }
.trace-party b, .trace-party small { display: block; overflow-wrap: anywhere; }
.trace-party small { color: var(--text-3); font: 12px/1.4 var(--mono); }
.trace-chart { width: 100%; height: auto; min-height: 180px; }
.trace-chart .accepted { fill: var(--success); }
.trace-chart .other { fill: #d89020; }
.trace-chart text { fill: var(--text-3); font: 11px var(--sans); }
.trace-chart .axis { stroke: var(--line-strong); stroke-width: 1; }
.live-dot { display: inline-block; width: 8px; height: 8px; margin-right: 5px; border-radius: 50%; background: var(--success); box-shadow: 0 0 0 4px var(--success-soft); }
.route-preview, .trace-route { display: grid; grid-template-columns: minmax(110px,1fr) minmax(90px,.8fr) minmax(110px,1fr); align-items: center; gap: var(--s2); padding: var(--s4) 0; }
.route-node { display: flex; flex-direction: column; gap: 5px; overflow-wrap: anywhere; }
.route-node span { color: var(--text-3); font-size: 11px; letter-spacing: .08em; font-weight: 700; }
.route-node b { color: var(--ink); }
.route-connector { position: relative; display: flex; justify-content: space-between; align-items: center; border-top: 2px solid var(--primary); color: var(--primary); }
.route-dot { width: 8px; height: 8px; margin-top: -5px; border-radius: 50%; background: var(--primary); }
.route-core { position: absolute; left: 50%; top: -10px; transform: translateX(-50%); padding: 0 4px; background: white; font-size: 9px; font-weight: 800; white-space: nowrap; }
.trace-dialog { width: min(880px, calc(100vw - 28px)); max-height: min(85vh, 900px); border: 1px solid var(--line); border-radius: var(--r-lg); padding: var(--s5); color: var(--text); box-shadow: var(--shadow-lg); }
.trace-dialog::backdrop { background: rgba(7,26,45,.58); }
.trace-dialog-head { display: flex; justify-content: space-between; align-items: start; gap: var(--s3); margin-bottom: var(--s3); }
.trace-dialog-head h2 { margin-top: 4px; overflow-wrap: anywhere; }
.trace-detail-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: var(--s3); }
.trace-detail-grid .card { margin: 0; }
.trace-address { overflow-wrap: anywhere; font-family: var(--mono); font-size: 13px; }
.trace-timeline { list-style: none; margin: 0; padding: 0 0 0 18px; border-left: 2px solid var(--line); }
.trace-timeline li { position: relative; padding: 0 0 var(--s4) var(--s4); }
.trace-timeline li::before { content: ""; position: absolute; width: 10px; height: 10px; left: -6px; top: 5px; border: 2px solid white; border-radius: 50%; background: var(--primary); box-shadow: 0 0 0 1px var(--primary); }
.trace-timeline time { color: var(--text-3); font: 12px var(--mono); }
.trace-timeline b { display: block; margin: 2px 0; color: var(--ink); }
.trace-timeline p { margin: 0; color: var(--text-2); }
.state-RETURNED { color: var(--error); }
@media (max-width: 850px) { .trace-head { align-items: flex-start; flex-direction: column; } .trace-head .row { justify-content: flex-start; } .trace-detail-grid { grid-template-columns: 1fr; } }
@media (max-width: 620px) { .route-preview, .trace-route { grid-template-columns: 1fr; gap: var(--s4); } .route-connector { width: 70%; margin: 5px auto; } .trace-dialog { padding: var(--s3); } }