/* txreplay — "flight recorder" identity: phosphor amber + signal cyan on deep instrument black. */
:root {
  --bg: #04060a;
  --bg2: #070b12;
  --panel: rgba(9, 13, 21, .78);
  --panel-solid: #0a0f18;
  --line: rgba(130, 165, 210, .14);
  --line2: rgba(130, 165, 210, .26);
  --text: #dbe5f2;
  --dim: #8090a8;
  --faint: #56627a;
  --amber: #ffb22e;
  --amber2: #ffd27a;
  --cyan: #3fe0ff;
  --lime: #8dff5a;
  --rose: #ff4f7b;
  --violet: #a98bff;
  --magenta: #ff5fd2;
  --gain: #59f0a6;
  --loss: #ff5f7e;
  --disp: "Chakra Petch", ui-sans-serif, system-ui, sans-serif;
  --mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  --ease: cubic-bezier(.2, .8, .2, 1);
  --r: 10px;
}
[hidden] { display: none !important; }
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; background: var(--bg); }
body {
  margin: 0; min-height: 100svh; background: var(--bg); color: var(--text);
  font: 14px/1.5 var(--mono); overflow-x: clip;
}
a { color: var(--cyan); text-decoration: none; }
a:hover { text-decoration: underline; }
code { font-family: var(--mono); }
button { font: inherit; color: inherit; cursor: pointer; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
:focus-visible { outline: 2px solid var(--amber); outline-offset: 2px; }

.grain {
  position: fixed; inset: 0; pointer-events: none; z-index: 60; opacity: .05; mix-blend-mode: overlay;
  background-image: repeating-linear-gradient(0deg, rgba(255,255,255,.5) 0 1px, transparent 1px 3px);
}

/* ---------------------------------------------------------------- header */
.top {
  position: relative; z-index: 20; display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 18px;
  align-items: center; padding: 12px 20px; border-bottom: 1px solid var(--line);
  background: linear-gradient(180deg, rgba(7, 11, 18, .96), rgba(4, 6, 10, .9));
}
.logo { display: flex; align-items: center; gap: 10px; color: var(--amber); text-decoration: none !important; }
.wordmark { font: 700 21px/1 var(--disp); letter-spacing: .02em; color: var(--text); }
.rec { display: inline-flex; align-items: center; gap: 6px; font: 600 10px/1 var(--mono); letter-spacing: .18em; color: var(--dim);
  border: 1px solid var(--line2); padding: 4px 7px; border-radius: 4px; }
.rec i { width: 7px; height: 7px; border-radius: 50%; background: var(--rose); box-shadow: 0 0 10px var(--rose); animation: blink 1.6s steps(2, start) infinite; }
@keyframes blink { 50% { opacity: .15; } }

.cmd { display: flex; min-width: 0; max-width: 760px; width: 100%; justify-self: center; border: 1px solid var(--line2); border-radius: 9px;
  background: rgba(3, 6, 11, .9); transition: border-color .2s, box-shadow .2s; }
.cmd:focus-within { border-color: rgba(255, 178, 46, .6); box-shadow: 0 0 0 4px rgba(255, 178, 46, .08), 0 0 30px rgba(255, 178, 46, .08); }
.cmd input { flex: 1; min-width: 0; background: none; border: 0; color: var(--text); font: 500 13px/1 var(--mono); padding: 12px 14px; outline: none; }
.cmd input::placeholder { color: var(--faint); }
.cmd button { display: flex; align-items: center; gap: 8px; border: 0; border-left: 1px solid var(--line2); background: linear-gradient(180deg, #ffbe45, #f29a12);
  color: #140b00; font: 700 13px/1 var(--disp); letter-spacing: .08em; text-transform: uppercase; padding: 0 18px; border-radius: 0 8px 8px 0; }
.cmd button:hover { filter: brightness(1.08); }
.cmd button[disabled] { filter: grayscale(.7) brightness(.7); cursor: progress; }

.brandbits { display: flex; align-items: center; gap: 8px; }
.xlink { display: inline-flex; align-items: center; gap: 6px; padding: 7px 11px; border-radius: 7px; border: 1px solid var(--line2); color: var(--text); font: 600 12px/1 var(--disp); }
.xlink:hover { border-color: var(--cyan); text-decoration: none; }
.castrip { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding: 8px 20px; border-bottom: 1px solid var(--line);
  background: linear-gradient(90deg, rgba(255, 178, 46, .08), transparent 60%); font-size: 12px; }
.calabel { font: 700 11px/1 var(--disp); letter-spacing: .14em; color: var(--amber); }
.castrip code { color: var(--text); word-break: break-all; min-width: 0; }
.mini { border: 1px solid var(--line2); background: rgba(255, 255, 255, .03); border-radius: 6px; padding: 4px 9px; font: 600 11px/1 var(--disp); letter-spacing: .06em; color: var(--text); }
.mini:hover { border-color: var(--amber); color: var(--amber2); }

/* ---------------------------------------------------------------- example chips */
.chips { position: relative; z-index: 15; display: flex; gap: 8px; align-items: center; padding: 10px 20px; overflow-x: auto; scrollbar-width: none;
  border-bottom: 1px solid var(--line); background: rgba(4, 6, 10, .8); }
.chips::-webkit-scrollbar { display: none; }
.chips-label { font: 600 10px/1 var(--mono); letter-spacing: .2em; color: var(--faint); text-transform: uppercase; flex: none; margin-right: 4px; }
.chip { flex: none; display: inline-flex; align-items: center; gap: 8px; border: 1px solid var(--line2); border-radius: 999px; background: rgba(255, 255, 255, .02);
  padding: 6px 12px 6px 10px; font: 600 12px/1 var(--disp); letter-spacing: .02em; color: var(--text); transition: border-color .2s, background .2s; }
.chip:hover { border-color: rgba(63, 224, 255, .55); background: rgba(63, 224, 255, .05); }
.chip.on { border-color: var(--amber); background: rgba(255, 178, 46, .08); }
.chip small { font: 500 10px/1 var(--mono); color: var(--dim); border: 1px solid var(--line); padding: 3px 5px; border-radius: 4px; }
.chip.live small { color: var(--lime); border-color: rgba(141, 255, 90, .35); }
.chip.live::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--lime); box-shadow: 0 0 8px var(--lime); }

/* ---------------------------------------------------------------- stage */
main { position: relative; }
.stage { position: relative; height: calc(100svh - 112px); min-height: 520px; max-height: 1100px; overflow: clip; background:
  radial-gradient(ellipse 80% 60% at 50% 40%, #0a1322 0%, #05080e 60%, #030409 100%); }
#gl { position: absolute; inset: 0; width: 100%; height: 100%; display: block; touch-action: none; }
.labels { position: absolute; inset: 0; pointer-events: none; overflow: clip; }
.lbl { position: absolute; left: 0; top: 0; white-space: nowrap; font: 600 11px/1.1 var(--disp); letter-spacing: .03em; color: var(--text);
  text-shadow: 0 0 6px #000, 0 0 2px #000; will-change: transform; opacity: 0; transition: opacity .25s; }
.lbl.show { opacity: .92; }
.lbl small { display: block; font: 500 9.5px/1.2 var(--mono); color: var(--dim); letter-spacing: 0; }
.lbl.acct { font: 500 10.5px/1.1 var(--mono); color: var(--dim); }
.lbl.acct b { color: var(--text); font-weight: 600; }
.lbl.active { color: #fff; font-size: 13px; }
.lbl.active small { color: var(--amber2); }
.lbl.gain b { color: var(--gain); }
.lbl.loss b { color: var(--loss); }
.lbl.fee { color: var(--amber2); font-size: 10px; letter-spacing: .14em; }
.letterbox { position: absolute; left: 0; right: 0; height: 9vh; background: #000; z-index: 4; pointer-events: none; transition: transform 1.2s var(--ease); }
.lb-top { top: 0; } .lb-bot { bottom: 0; }
.stage.open .lb-top { transform: translateY(-100%); }
.stage.open .lb-bot { transform: translateY(100%); }

.hud { position: absolute; z-index: 6; background: var(--panel); border: 1px solid var(--line); border-radius: var(--r); backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px); animation: hudIn .7s var(--ease) both; }
@keyframes hudIn { from { opacity: 0; transform: translateY(8px); } }
.hud-id { top: 16px; left: 16px; padding: 12px 14px; max-width: min(380px, calc(100% - 32px)); }
.badges { display: flex; gap: 6px; margin-bottom: 8px; flex-wrap: wrap; }
.badge { font: 700 11px/1 var(--disp); letter-spacing: .12em; text-transform: uppercase; padding: 5px 8px; border-radius: 5px; border: 1px solid var(--line2); }
.badge.v-legacy { color: #cfd8e6; }
.badge.v-0 { color: var(--cyan); border-color: rgba(63, 224, 255, .4); }
.badge.v-1 { color: var(--amber); border-color: rgba(255, 178, 46, .45); background: rgba(255, 178, 46, .07); }
.badge.ok { color: var(--gain); border-color: rgba(89, 240, 166, .4); }
.badge.bad { color: var(--rose); border-color: rgba(255, 79, 123, .5); background: rgba(255, 79, 123, .08); }
.sigline { display: flex; gap: 8px; align-items: center; }
.sigline code { font-size: 12.5px; color: var(--text); }
.meta { color: var(--dim); font-size: 11.5px; margin-top: 6px; }
.links { display: flex; gap: 12px; margin-top: 6px; font-size: 11.5px; }

.hud-cu { left: 16px; bottom: 92px; padding: 12px 14px 12px 12px; display: grid; grid-template-columns: 96px minmax(0, 1fr); gap: 12px; align-items: center; }
.gauge { width: 96px; height: 96px; transform: rotate(-90deg); }
.g-track { fill: none; stroke: rgba(255, 255, 255, .07); stroke-width: 7; }
.g-fill { fill: none; stroke: var(--amber); stroke-width: 7; stroke-linecap: round; filter: drop-shadow(0 0 5px rgba(255, 178, 46, .7)); transition: stroke-dashoffset .12s linear; }
.g-total { fill: none; stroke: rgba(255, 255, 255, .55); stroke-width: 11; stroke-dasharray: 1.2 400; }
.g-read { position: absolute; left: 12px; top: 12px; width: 96px; height: 96px; display: grid; place-content: center; text-align: center; line-height: 1.05; }
.g-read b { font: 700 17px/1 var(--disp); color: var(--text); }
.g-read span { font: 600 9px/1.4 var(--mono); letter-spacing: .2em; color: var(--amber); }
.g-read small { font-size: 9px; color: var(--dim); }
.fees { margin: 0; display: grid; gap: 5px; font-size: 11.5px; }
.fees div { display: flex; justify-content: space-between; gap: 14px; }
.fees dt { color: var(--dim); } .fees dd { margin: 0; color: var(--text); text-align: right; }

.caption { position: absolute; z-index: 6; left: 412px; right: 400px; top: 22px; text-align: center; pointer-events: none; }
.cap-step { font: 600 10.5px/1 var(--mono); letter-spacing: .22em; color: var(--amber); text-transform: uppercase; margin-bottom: 7px; }
.cap-text { font: 600 17px/1.35 var(--disp); color: #fff; text-shadow: 0 2px 18px #000, 0 0 3px #000; min-height: 1.35em; }
.cap-text .tok { color: var(--cyan); } .cap-text .sol { color: var(--amber2); } .cap-text .bad { color: var(--rose); }

.transport { position: absolute; z-index: 7; left: 16px; right: 16px; bottom: 16px; display: flex; align-items: center; gap: 6px; padding: 8px;
  background: var(--panel); border: 1px solid var(--line); border-radius: 12px; backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); }
.tbtn { flex: none; width: 36px; height: 36px; display: grid; place-items: center; border-radius: 8px; border: 1px solid transparent; background: transparent; color: var(--text); }
.tbtn svg { width: 15px; height: 15px; }
.tbtn:hover { background: rgba(255, 255, 255, .06); border-color: var(--line); }
.tbtn.play { width: 42px; height: 42px; background: var(--amber); color: #140b00; border-radius: 50%; box-shadow: 0 0 22px rgba(255, 178, 46, .35); }
.tbtn.play:hover { background: var(--amber2); }
.tbtn.play .i-pause { display: none; }
.transport.playing .tbtn.play .i-play { display: none; }
.transport.playing .tbtn.play .i-pause { display: block; }
.tbtn.speed { width: auto; padding: 0 10px; font: 700 12px/1 var(--disp); color: var(--dim); }
.track { position: relative; flex: 1; min-width: 0; height: 36px; cursor: pointer; touch-action: none; }
.segs { position: absolute; inset: 9px 0; display: flex; gap: 2px; }
.seg { position: relative; height: 100%; border-radius: 3px; background: rgba(255, 255, 255, .06); overflow: hidden; min-width: 2px; }
.seg i { position: absolute; inset: 0; transform-origin: left; transform: scaleX(0); background: var(--c, var(--cyan)); opacity: .8; }
.seg.fee { --c: var(--amber); } .seg.settle { --c: var(--gain); }
.head { position: absolute; top: 3px; bottom: 3px; width: 2px; left: 0; background: #fff; box-shadow: 0 0 10px #fff; border-radius: 1px; will-change: transform; }
.tc { flex: none; font: 600 12px/1 var(--mono); color: var(--dim); min-width: 66px; text-align: right; }

.overlay { position: absolute; inset: 0; z-index: 9; display: grid; place-items: center; background: rgba(3, 5, 9, .55); transition: opacity .5s; }
.overlay.gone { opacity: 0; pointer-events: none; }
.ov-inner { text-align: center; padding: 24px; max-width: 520px; }
.ov-title { font: 700 20px/1.3 var(--disp); color: var(--text); letter-spacing: .02em; }
.ov-sub { color: var(--dim); font-size: 12.5px; margin-top: 8px; }
.overlay.err .ov-title { color: var(--rose); }
.scanner { position: relative; width: 220px; height: 2px; margin: 0 auto 22px; background: rgba(255, 255, 255, .08); overflow: hidden; border-radius: 2px; }
.scanner i { position: absolute; inset: 0 auto 0 0; width: 40%; background: linear-gradient(90deg, transparent, var(--amber), transparent); animation: scan 1.1s var(--ease) infinite; }
.overlay.err .scanner { display: none; }
@keyframes scan { from { transform: translateX(-100%); } to { transform: translateX(260%); } }

/* ---------------------------------------------------------------- inspector */
.inspector { position: absolute; z-index: 8; top: 16px; right: 16px; width: 360px; max-height: calc(100% - 108px); display: flex; flex-direction: column;
  background: var(--panel); border: 1px solid var(--line); border-radius: var(--r); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); overflow: hidden; }
.ins-head { padding: 13px 15px 11px; border-bottom: 1px solid var(--line); }
.ins-kicker { font: 600 10px/1 var(--mono); letter-spacing: .2em; color: var(--amber); text-transform: uppercase; }
.ins-head h2 { margin: 6px 0 4px; font: 700 18px/1.2 var(--disp); color: #fff; overflow-wrap: anywhere; }
.ins-crumbs { font-size: 10.5px; color: var(--dim); overflow-wrap: anywhere; }
.ins-crumbs span + span::before { content: " › "; color: var(--faint); }
.ins-body { padding: 10px 15px 14px; overflow-y: auto; scrollbar-width: thin; scrollbar-color: var(--line2) transparent; font-size: 12px; }
.kv { display: grid; grid-template-columns: 92px minmax(0, 1fr); gap: 4px 10px; margin: 4px 0 10px; }
.kv dt { color: var(--dim); overflow-wrap: anywhere; } .kv dd { margin: 0; overflow-wrap: anywhere; }
.ins-sec { margin-top: 12px; }
.ins-sec h4 { margin: 0 0 6px; font: 700 10.5px/1 var(--disp); letter-spacing: .16em; text-transform: uppercase; color: var(--dim); }
.alist { list-style: none; margin: 0; padding: 0; display: grid; gap: 3px; }
.alist li { display: grid; grid-template-columns: 22px 30px minmax(0, 1fr); gap: 6px; align-items: baseline; font-size: 11.5px; }
.alist .ix { color: var(--faint); text-align: right; }
.flags { font-size: 10px; letter-spacing: .05em; color: var(--dim); }
.flags .w { color: var(--amber); } .flags .s { color: var(--cyan); }
.alist .nm { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.flow { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 2px 8px; padding: 7px 9px; border: 1px solid var(--line); border-radius: 7px; margin-bottom: 5px; background: rgba(255, 255, 255, .02); }
.flow .amt { font-weight: 600; text-align: right; white-space: nowrap; }
.flow .amt.sol { color: var(--amber2); } .flow .amt.tok { color: var(--cyan); }
.flow .route { grid-column: 1 / -1; color: var(--dim); font-size: 11px; overflow-wrap: anywhere; }
.logs { margin: 0; padding: 8px 9px; background: rgba(0, 0, 0, .35); border: 1px solid var(--line); border-radius: 7px; font-size: 10.5px; line-height: 1.55; color: #aeb9cb;
  white-space: pre-wrap; overflow-wrap: anywhere; max-height: 220px; overflow-y: auto; }
.evt { padding: 8px 9px; border: 1px dashed rgba(169, 139, 255, .45); border-radius: 7px; color: #d9ceff; font-size: 11.5px; }
.evt b { color: #fff; }
.errline { color: var(--rose); }
.empty { color: var(--faint); font-style: italic; }

/* ---------------------------------------------------------------- sections */
.sections { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 16px; padding: 20px; max-width: 1500px; margin: 0 auto; }
.card { background: linear-gradient(180deg, rgba(12, 17, 27, .9), rgba(7, 10, 16, .9)); border: 1px solid var(--line); border-radius: 14px; padding: 16px 18px; min-width: 0; }
.card header h3 { margin: 0; font: 700 16px/1.2 var(--disp); letter-spacing: .03em; }
.card header h3 small { font: 500 11px var(--mono); color: var(--dim); margin-left: 6px; }
.card header p { margin: 4px 0 12px; color: var(--dim); font-size: 11.5px; }
.card-settle { grid-column: span 5; } .card-route { grid-column: span 7; }
.card-accts { grid-column: span 7; } .card-logs { grid-column: span 5; }
.card-how { grid-column: 1 / -1; }
.sections.noroute .card-settle { grid-column: span 12; }
.settle { display: grid; gap: 6px; }
.srow { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: 10px; align-items: center; font-size: 12px; }
.srow .who { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.srow .who small { color: var(--dim); }
.sbar { position: relative; height: 22px; border-radius: 4px; background: rgba(255, 255, 255, .03); }
.sbar i { position: absolute; top: 3px; bottom: 3px; left: 50%; border-radius: 3px; }
.sbar i.gain { background: linear-gradient(90deg, rgba(89, 240, 166, .25), var(--gain)); }
.sbar i.loss { background: linear-gradient(270deg, rgba(255, 95, 126, .25), var(--loss)); }
.sbar span { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-size: 11px; font-weight: 600; text-shadow: 0 0 4px #000; }
.route { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.hop { display: grid; grid-template-columns: 30px minmax(0, 1fr) auto minmax(0, 1fr); gap: 10px; align-items: center; padding: 10px 12px; border: 1px solid var(--line);
  border-radius: 10px; background: rgba(255, 255, 255, .02); cursor: pointer; }
.hop:hover { border-color: rgba(255, 178, 46, .5); }
.hop .n { font: 700 12px/1 var(--disp); color: var(--amber); }
.hop .side b { display: block; font: 700 14px/1.2 var(--disp); }
.hop .side small { color: var(--dim); }
.hop .via { text-align: center; font-size: 10.5px; color: var(--dim); }
.hop .via b { display: block; color: var(--magenta); font: 600 11.5px/1.2 var(--disp); }
.hop .side.out { text-align: right; }
.tablewrap { overflow-x: auto; max-height: 460px; overflow-y: auto; scrollbar-width: thin; scrollbar-color: var(--line2) transparent; }
.accts { width: 100%; border-collapse: collapse; font-size: 11.5px; }
.accts th { position: sticky; top: 0; background: #0a0f18; text-align: left; color: var(--dim); font: 600 10px/1 var(--mono); letter-spacing: .14em; text-transform: uppercase; padding: 8px 8px; border-bottom: 1px solid var(--line); }
.accts td { padding: 6px 8px; border-bottom: 1px solid rgba(130, 165, 210, .07); vertical-align: top; }
.accts .num { text-align: right; white-space: nowrap; }
.accts td.k { max-width: 320px; }
.accts td.k b { display: block; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.accts td.k code { color: var(--dim); font-size: 10.5px; word-break: break-all; }
.accts .gain { color: var(--gain); } .accts .loss { color: var(--loss); }
.src { font-size: 9.5px; color: var(--violet); border: 1px solid rgba(169, 139, 255, .35); padding: 1px 4px; border-radius: 3px; margin-left: 4px; }
.logbox { max-height: 460px; overflow-y: auto; font-size: 11px; line-height: 1.55; scrollbar-width: thin; scrollbar-color: var(--line2) transparent; }
.lg { padding: 6px 8px; border-left: 2px solid var(--line2); margin-bottom: 4px; cursor: pointer; border-radius: 0 6px 6px 0; }
.lg:hover { background: rgba(255, 255, 255, .03); }
.lg.cur { border-left-color: var(--amber); background: rgba(255, 178, 46, .06); }
.lg .h { font-weight: 600; color: #fff; }
.lg .h small { color: var(--dim); font-weight: 400; }
.lg pre { margin: 3px 0 0; white-space: pre-wrap; overflow-wrap: anywhere; color: #9fabbf; font: inherit; }
.how { margin: 0; padding-left: 18px; color: #b9c4d6; font-size: 12.5px; display: grid; gap: 6px; }
.how code { color: var(--amber2); }

.foot { padding: 26px 20px 40px; text-align: center; color: var(--dim); font-size: 11.5px; border-top: 1px solid var(--line); }
.foot p { margin: 0 auto; max-width: 820px; }
.foot b { color: var(--text); }
.toast { position: fixed; z-index: 80; left: 50%; bottom: 24px; transform: translateX(-50%); padding: 10px 16px; background: #10161f; border: 1px solid var(--line2);
  border-radius: 9px; font-size: 12px; box-shadow: 0 10px 40px rgba(0, 0, 0, .5); }
.noscript { padding: 20px; text-align: center; }

/* ---------------------------------------------------------------- responsive */
@media (max-width: 1180px) {
  .caption { left: 412px; right: 20px; top: 22px; text-align: left; }
  .inspector { position: relative; top: auto; right: auto; width: auto; max-height: none; margin: 16px 20px 0; }
  .ins-body { max-height: 420px; }
}
@media (max-width: 980px) {
  .card-settle, .card-route, .card-accts, .card-logs { grid-column: 1 / -1; }
}
@media (max-width: 760px) {
  .top { grid-template-columns: minmax(0, 1fr) auto; gap: 10px; padding: 10px 14px; }
  .cmd { grid-column: 1 / -1; grid-row: 2; }
  .rec { display: none; }
  .chips { padding: 8px 14px; }
  .castrip { padding: 8px 14px; }
  .stage { height: 72svh; min-height: 480px; }
  .hud-id { top: 10px; left: 10px; right: 10px; max-width: none; padding: 9px 11px; display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: 8px; }
  .hud-id .badges { grid-column: 1 / -1; margin-bottom: 6px; }
  .hud-id .meta, #momentCopy { display: none; }
  .sigline code { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
  .sigline { min-width: 0; }
  .hud-id .links { margin-top: 0; align-self: center; gap: 8px; font-size: 11px; }
  .badge { font-size: 10px; padding: 4px 6px; }
  .hud-cu { left: 10px; right: auto; bottom: 66px; grid-template-columns: 50px auto; padding: 6px 10px 6px 6px; gap: 8px; }
  .gauge { width: 50px; height: 50px; }
  .g-read { left: 6px; top: 6px; width: 50px; height: 50px; }
  .g-read b { font-size: 10px; } .g-read small, .g-read span { display: none; }
  .fees { font-size: 10px; gap: 2px; }
  .fees div:nth-child(2) { display: none; }
  .caption { left: 12px; right: 12px; transform: none; width: auto; bottom: auto; top: 96px; text-align: left; }
  .cap-step { font-size: 9.5px; margin-bottom: 4px; }
  .cap-text { font-size: 13.5px; }
  .transport { left: 8px; right: 8px; bottom: 8px; gap: 2px; padding: 5px; }
  .tbtn { width: 32px; height: 32px; }
  #btnRestart { display: none; }
  .tc { display: none; }
  .inspector { margin: 12px 12px 0; }
  .sections { padding: 12px; gap: 12px; }
  .card { padding: 14px; }
  .hop { grid-template-columns: 22px minmax(0, 1fr); }
  .hop .via { grid-column: 2; text-align: left; }
  .hop .side.out { grid-column: 2; text-align: left; }
  .srow { grid-template-columns: minmax(0, 1fr); gap: 3px; }
  .letterbox { height: 6vh; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001s !important; animation-iteration-count: 1 !important; transition-duration: .001s !important; }
}

/* hover tooltip + vignette */
.tip { position: absolute; left: 0; top: 0; z-index: 7; pointer-events: none; max-width: 240px; padding: 7px 10px; font-size: 11px; line-height: 1.4;
  background: rgba(6, 9, 15, .92); border: 1px solid var(--line2); border-radius: 7px; color: var(--dim); }
.tip b { color: #fff; font-family: var(--disp); font-weight: 600; }
.stage::after { content: ""; position: absolute; inset: 0; z-index: 3; pointer-events: none;
  background: radial-gradient(ellipse 75% 70% at 50% 45%, transparent 55%, rgba(0, 0, 0, .55) 100%); }

/* ---------------------------------------------------------------- burn-to-unlock: replay export */
.tbtn.prem { position: relative; color: var(--dim); }
.tbtn.prem:hover { color: var(--text); }
.tbtn.rec { color: var(--rose); }
.tbtn.prem.locked::after { content: ""; position: absolute; right: 3px; bottom: 4px; width: 7px; height: 6px; border-radius: 1.5px; background: var(--amber);
  box-shadow: 0 -3px 0 -1px var(--bg), 0 -4px 0 0 var(--amber); opacity: .9; }
.stage.recording .transport { pointer-events: none; opacity: .55; }
.stage.recording .tbtn.rec { opacity: 1; }
.recbar { position: absolute; z-index: 8; top: 16px; left: 50%; transform: translateX(-50%); display: flex; align-items: center; gap: 9px; padding: 7px 12px;
  background: rgba(20, 4, 10, .82); border: 1px solid rgba(255, 79, 123, .5); border-radius: 999px; font: 600 11px/1 var(--mono); letter-spacing: .12em; color: #ffd3de; }
.recbar i { width: 8px; height: 8px; border-radius: 50%; background: var(--rose); box-shadow: 0 0 10px var(--rose); animation: blink 1s steps(2, start) infinite; }
.recbar b { color: #fff; font-family: var(--disp); }
.pinned { margin-top: 7px; padding-top: 7px; border-top: 1px dashed var(--line2); font-size: 11px; color: var(--dim); overflow-wrap: anywhere; }
.pinned b { color: var(--amber); font: 700 10.5px/1 var(--disp); letter-spacing: .14em; text-transform: uppercase; }

.vault { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 16px; padding: 4px 20px 24px; max-width: 1500px; margin: 0 auto; scroll-margin-top: 12px; }
.card-pass { grid-column: span 7; position: relative; overflow: clip; border-color: rgba(255, 178, 46, .28);
  background: radial-gradient(120% 90% at 0% 0%, rgba(255, 178, 46, .07), transparent 55%), linear-gradient(180deg, rgba(12, 17, 27, .92), rgba(7, 10, 16, .92)); }
.card-ledger { grid-column: span 5; }
.vault.flash .card-pass { animation: vaultFlash 1.4s var(--ease); }
@keyframes vaultFlash { 0%, 40% { box-shadow: 0 0 0 2px var(--amber), 0 0 40px rgba(255, 178, 46, .25); } 100% { box-shadow: none; } }
.kicker { display: inline-block; font: 600 10px/1 var(--mono); letter-spacing: .2em; text-transform: uppercase; color: var(--amber); margin-bottom: 6px; }
.perks { margin: 0 0 12px; padding-left: 18px; display: grid; gap: 6px; font-size: 12.5px; color: #b9c4d6; }
.perks b { color: var(--text); font-family: var(--disp); letter-spacing: .02em; }
.perks code { color: var(--amber2); }
.pass-price { font: 700 15px/1.2 var(--disp); color: var(--amber2); letter-spacing: .03em; margin-bottom: 10px; }
.pass-box { display: grid; gap: 10px; padding: 12px; border: 1px solid var(--line); border-radius: 10px; background: rgba(3, 6, 11, .55); }
.pass-box.on { border-color: rgba(89, 240, 166, .35); }
.pass-row { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.pass-btn { border: 1px solid rgba(255, 178, 46, .6); background: linear-gradient(180deg, #ffbe45, #f29a12); color: #140b00; border-radius: 8px; padding: 9px 16px;
  font: 700 13px/1 var(--disp); letter-spacing: .08em; text-transform: uppercase; }
.pass-btn:hover { filter: brightness(1.08); }
.pass-btn[disabled] { filter: grayscale(.7) brightness(.7); cursor: progress; }
.pass-btn.burn { background: linear-gradient(180deg, #ff8a3d, #e2541b); border-color: rgba(255, 120, 60, .7); color: #1a0700; }
.pass-who { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; color: var(--dim); margin-right: auto; }
.pass-who b.ok { color: var(--gain); font-weight: 600; }
.dot { width: 7px; height: 7px; border-radius: 50%; background: var(--faint); }
.dot.on { background: var(--gain); box-shadow: 0 0 8px var(--gain); }
.pass-note { margin: 0; font-size: 11px; color: var(--dim); }
.pass-step { margin: 0; display: flex; align-items: center; gap: 8px; font-size: 12px; color: var(--amber2); }
.spin { width: 12px; height: 12px; border-radius: 50%; border: 2px solid rgba(255, 178, 46, .25); border-top-color: var(--amber); animation: spin .8s linear infinite; flex: none; }
@keyframes spin { to { transform: rotate(1turn); } }
.pass-err { margin: 0; font-size: 12px; color: var(--rose); }
.pass-soon { display: grid; gap: 4px; } .pass-soon b { font: 700 16px/1.2 var(--disp); color: var(--amber2); letter-spacing: .04em; } .pass-soon span { color: var(--dim); font-size: 12px; }
.wallets { display: flex; flex-wrap: wrap; gap: 8px; }
.wbtn { display: inline-flex; align-items: center; gap: 7px; padding: 7px 11px; }
.wbtn img { width: 16px; height: 16px; border-radius: 4px; }
.confirm { display: grid; gap: 8px; padding: 12px; border: 1px solid rgba(255, 120, 60, .45); border-radius: 9px; background: rgba(255, 90, 30, .05); }
.c-amt small { display: block; font-size: 10.5px; letter-spacing: .16em; text-transform: uppercase; color: var(--dim); }
.c-amt b { font: 700 22px/1.2 var(--disp); color: #fff; }
.confirm .kv { grid-template-columns: 96px minmax(0, 1fr); font-size: 11.5px; margin: 0; }
.confirm .kv code { color: var(--amber2); font-size: 11px; overflow-wrap: anywhere; }
.warn { margin: 0; font: 600 12.5px/1.4 var(--disp); color: #ffb3a1; letter-spacing: .02em; }
.honest { margin: 12px 0 0; font-size: 11.5px; color: #c8d2e2; border-left: 2px solid var(--amber); padding: 2px 0 2px 10px; }
.pins h4 { margin: 4px 0 6px; font: 600 11px/1 var(--mono); letter-spacing: .16em; text-transform: uppercase; color: var(--dim); }
.pin { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; gap: 10px; align-items: center; padding: 6px 0; border-top: 1px solid var(--line); font-size: 12px; }
.pin a { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pin small { color: var(--faint); }
.lstats { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px; margin-bottom: 10px; }
.lstat { padding: 10px 12px; border: 1px solid var(--line); border-radius: 9px; background: rgba(255, 255, 255, .015); min-width: 0; }
.lstat small { display: block; font-size: 10px; letter-spacing: .14em; text-transform: uppercase; color: var(--dim); }
.lstat b { display: block; font: 700 17px/1.3 var(--disp); color: var(--text); overflow-wrap: anywhere; }
.lstat span { font-size: 10.5px; color: var(--faint); }
.burns { list-style: none; margin: 10px 0; padding: 0; display: grid; }
.burns li { display: grid; grid-template-columns: auto minmax(0, 1fr) auto auto; gap: 10px; align-items: baseline; padding: 6px 0; border-top: 1px solid var(--line); font-size: 11.5px; }
.burns li.empty { display: block; }
.burns b { color: #ffb3a1; font-weight: 600; text-align: right; overflow-wrap: anywhere; }
.burns small { color: var(--faint); }
@media (max-width: 980px) { .card-pass, .card-ledger { grid-column: 1 / -1; } }
@media (max-width: 760px) {
  .vault { padding: 0 12px 16px; gap: 12px; }
  #btnPin, #btnRec { width: 30px; }
  .recbar { top: auto; bottom: 64px; }
  .burns li { grid-template-columns: minmax(0, 1fr) auto; }
  .burns li small { grid-column: 1; } .burns li a { grid-column: 2; text-align: right; }
  .pin { grid-template-columns: minmax(0, 1fr) auto; } .pin small { grid-column: 1; grid-row: 2; }
}