/* ==========================================================================
   PRIVACY SWAP - terminal

   A dense, always moving operations surface. Every panel is live, every number
   rolls when it changes, and the mesh is never still.

   Palette is the same duotone as the rest of the product: ink base, champagne
   for labels, jade for anything live or positive, copper for anything that
   went the wrong way. Dense monospace throughout, because this is a surface
   for reading numbers, not prose.
   ========================================================================== */

/* ------------------------------------------------------------------ shell */

.term {
  min-height: 100svh;
  display: grid;
  grid-template-rows: auto auto 1fr auto;
  /* Transparent on purpose. This container sits above the ambient canvas, so
     any background here hides it completely. The page colour comes from the
     body instead. */
  background: transparent;
  position: relative;
  z-index: 2;
}

/* the generated grid texture, barely there, keeps large fields from reading flat */
.term::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background: url("../img/tex-grid.jpg") center / 420px repeat;
  opacity: 0.3;
  mix-blend-mode: soft-light;
}
/* scanlines, the one piece of pure decoration, kept very faint */
.term::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background: repeating-linear-gradient(
    180deg, rgba(0,0,0,0.10) 0 1px, transparent 1px 4px);
  opacity: 0.38;
}

/* ------------------------------------------------------------- command bar */

.cmd {
  position: relative;
  z-index: 20;
  display: flex;
  align-items: center;
  gap: 18px;
  height: 40px;
  padding-inline: 14px;
  border-bottom: 1px solid var(--edge-gold);
  background: linear-gradient(180deg, rgba(14,17,26,0.82), rgba(8,10,16,0.72));
  backdrop-filter: blur(16px) saturate(1.3);
  -webkit-backdrop-filter: blur(16px) saturate(1.3);
}
.cmd__brand {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  flex-shrink: 0;
}
.cmd__brand img { width: 19px; height: 19px; }
.cmd__name {
  font-family: var(--font-mono);
  font-size: 11.5px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--text);
}
.cmd__keys { display: flex; gap: 2px; margin-left: 8px; }
.fkey {
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: 0.06em;
  padding: 4px 9px;
  border-radius: 3px;
  color: var(--text-faint);
  border: 1px solid transparent;
  transition: color 0.2s var(--ease), background 0.2s var(--ease),
              border-color 0.2s var(--ease);
}
.fkey b { color: var(--gold); font-weight: 500; margin-right: 5px; }
.fkey:hover { color: var(--text); background: rgba(237,232,224,0.05); }
.fkey[aria-current="true"] {
  color: var(--text);
  background: var(--jade-wash);
  border-color: rgba(111,211,192,0.35);
}
.cmd__right {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 16px;
  font-family: var(--font-mono);
  font-size: 11.5px;
  color: var(--text-dim);
}
.cmd__stat { display: inline-flex; align-items: center; gap: 7px; }
.cmd__stat b { color: var(--text); font-weight: 500; }

.pulse {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--jade);
  box-shadow: 0 0 8px var(--jade);
  animation: beat 2.2s var(--ease-io) infinite;
  flex-shrink: 0;
}
@keyframes beat {
  0%, 100% { opacity: 1; transform: scale(1); }
  50%      { opacity: 0.35; transform: scale(0.75); }
}

/* ------------------------------------------------------------ ticker tape */

.tape {
  position: relative;
  z-index: 19;
  height: 30px;
  overflow: hidden;
  border-bottom: 1px solid var(--edge);
  background: rgba(6,7,12,0.74);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 3%, #000 97%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 3%, #000 97%, transparent);
}
.tape__track {
  display: flex;
  align-items: center;
  gap: 34px;
  height: 100%;
  width: max-content;
  animation: tape 64s linear infinite;
}
.tape:hover .tape__track { animation-play-state: paused; }
@keyframes tape {
  from { transform: translate3d(0, 0, 0); }
  to   { transform: translate3d(-50%, 0, 0); }
}
.tick {
  display: inline-flex;
  align-items: baseline;
  gap: 8px;
  font-family: var(--font-mono);
  font-size: 11.5px;
  white-space: nowrap;
}
.tick__k { color: var(--gold); letter-spacing: 0.09em; }
.tick__v { color: var(--text); }
.tick__d { font-size: 11px; }
.tick__d[data-dir="up"] { color: var(--jade); }
.tick__d[data-dir="down"] { color: var(--copper); }

/* -------------------------------------------------------------- main grid */

.grid {
  position: relative;
  z-index: 5;
  padding: 15px;
  display: grid;
  gap: 14px;
  grid-template-columns: repeat(12, 1fr);
  align-content: start;
}
@media (max-width: 1180px) { .grid { grid-template-columns: repeat(6, 1fr); } }
@media (max-width: 760px)  { .grid { grid-template-columns: 1fr; } }

.pane {
  border: 1px solid var(--edge);
  border-radius: 16px;
  background:
    linear-gradient(180deg, rgba(237,232,224,0.055), rgba(237,232,224,0) 46%),
    rgba(8, 11, 18, 0.66);
  backdrop-filter: blur(17px) saturate(1.35);
  -webkit-backdrop-filter: blur(17px) saturate(1.35);
  display: flex;
  flex-direction: column;
  min-width: 0;
  overflow: hidden;
  transition: border-color 0.5s var(--ease), box-shadow 0.5s var(--ease);
}
.pane[data-live="1"] {
  border-color: rgba(111,211,192,0.4);
  box-shadow: 0 0 0 1px rgba(111,211,192,0.10), 0 0 34px -14px var(--jade-glow);
}
.pane__head {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 7px 11px;
  border-bottom: 1px solid var(--edge);
  background:
    linear-gradient(180deg, rgba(217,184,124,0.07), transparent),
    rgba(6, 8, 13, 0.6);
  flex-shrink: 0;
}
.pane__title {
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: 0.17em;
  text-transform: uppercase;
  color: var(--gold-soft);
  white-space: nowrap;
}
.pane__tag {
  margin-left: auto;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.08em;
  color: var(--text-faint);
  white-space: nowrap;
}
.pane__body {
  padding: 11px;
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.pane__body--flush { padding: 0; gap: 0; }

/* column spans */
.c3  { grid-column: span 3; }
.c4  { grid-column: span 4; }
.c5  { grid-column: span 5; }
.c6  { grid-column: span 6; }
.c7  { grid-column: span 7; }
.c8  { grid-column: span 8; }
.c12 { grid-column: span 12; }
@media (max-width: 1180px) {
  .c3, .c4, .c5 { grid-column: span 3; }
  .c6, .c7, .c8 { grid-column: span 6; }
}
@media (max-width: 760px) {
  .c3, .c4, .c5, .c6, .c7, .c8, .c12 { grid-column: span 1; }
}

/* ------------------------------------------------------------------ stats */

.stat {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  padding: 4px 0;
  border-bottom: 1px dotted rgba(237,232,224,0.07);
  font-family: var(--font-mono);
  font-size: 12.5px;
}
.stat:last-child { border-bottom: 0; }
.stat__k { color: var(--text-faint); font-size: 11.5px; letter-spacing: 0.04em; }
.stat__v { color: var(--text); text-align: right; }
.stat__v[data-tone="up"]   { color: var(--jade); }
.stat__v[data-tone="down"] { color: var(--copper); }
.stat__v[data-tone="gold"] { color: var(--gold); }

/* a value that just changed flares, so the eye is drawn without a chart */
.flare {
  animation: flare 1.15s var(--ease) 1;
}
@keyframes flare {
  0%   { background: rgba(111,211,192,0.42); color: #04211D; }
  100% { background: transparent; }
}
.flare--down {
  animation: flaredown 1.15s var(--ease) 1;
}
@keyframes flaredown {
  0%   { background: rgba(203,127,90,0.42); color: #2A1208; }
  100% { background: transparent; }
}

.big {
  font-family: var(--font-mono);
  font-size: clamp(26px, 2.6vw, 40px);
  line-height: 1.05;
  letter-spacing: -0.02em;
  color: var(--text);
  font-variant-numeric: tabular-nums;
}
.big[data-tone="up"]   { color: var(--jade); }
.big[data-tone="gold"] { color: var(--gold); }
.big__unit {
  font-size: 12px;
  letter-spacing: 0.1em;
  color: var(--text-faint);
  margin-left: 7px;
}
.sub {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.05em;
  color: var(--text-faint);
}

/* ------------------------------------------------------------------ charts */

.chart { width: 100%; height: 88px; display: block; }
.chart--tall { height: 132px; }
.chart--short { height: 46px; }

.bars { display: flex; align-items: flex-end; gap: 4px; height: 92px; }
.bar {
  flex: 1;
  min-width: 0;
  position: relative;
  background: linear-gradient(180deg, var(--jade), var(--jade-deep));
  border-radius: 2px 2px 0 0;
  height: 0%;
  transition: height 0.85s var(--ease);
}
.bar[data-tone="gold"] { background: linear-gradient(180deg, var(--gold), var(--gold-deep)); }
.bar__k {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  margin-top: 5px;
  text-align: center;
  font-family: var(--font-mono);
  font-size: 9.5px;
  letter-spacing: 0.05em;
  color: var(--text-faint);
}
.bars__wrap { padding-bottom: 18px; }

/* ------------------------------------------------------------------- mesh */

.mesh { display: flex; flex-direction: column; gap: 0; }
.mrow {
  display: grid;
  grid-template-columns: 34px 1fr auto;
  align-items: center;
  gap: 11px;
  padding: 8px 0;
  position: relative;
  transition: background 0.5s var(--ease);
}
.mrow + .mrow::before {
  content: "";
  position: absolute;
  left: 16px;
  top: -9px;
  height: 18px;
  width: 1px;
  background: repeating-linear-gradient(180deg, var(--line-2) 0 3px, transparent 3px 7px);
  transition: background 0.6s var(--ease);
}
.mrow[data-done="1"]::before,
.mrow[data-state="active"]::before { background: var(--jade); }

.mrow__mark { position: relative; width: 33px; height: 33px; display: grid; place-items: center; }
.mrow__ring {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  border: 1px solid var(--line-2);
  transition: border-color 0.6s var(--ease), background 0.6s var(--ease);
}
.mrow__sig { width: 17px; height: 17px; position: relative; transition: opacity 0.5s, filter 0.5s; }
.mrow[data-state="idle"] .mrow__sig,
.mrow[data-state="pending"] .mrow__sig { opacity: 0.32; filter: grayscale(1); }
.mrow[data-state="settled"] .mrow__sig { opacity: 0.85; }

.mrow__name {
  font-family: var(--font-mono);
  font-size: 12.5px;
  letter-spacing: 0.09em;
  color: var(--text-dim);
  transition: color 0.5s var(--ease);
}
.mrow__role {
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--text-faint);
  margin-top: 2px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.mrow__st {
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: 0.08em;
  color: var(--text-faint);
  text-align: right;
  white-space: nowrap;
}

.mrow[data-state="active"] .mrow__ring {
  border-style: dashed;
  border-color: var(--jade);
  background: radial-gradient(circle, rgba(111,211,192,0.2), transparent 70%);
  animation: spin 2s linear infinite;
}
.mrow[data-state="active"] .mrow__sig { opacity: 1; animation: bob 1.5s var(--ease-io) infinite; }
.mrow[data-state="active"] .mrow__name,
.mrow[data-state="active"] .mrow__st { color: var(--jade); }

.mrow[data-state="landed"] .mrow__ring {
  border-color: var(--jade);
  background: radial-gradient(circle, rgba(111,211,192,0.26), transparent 72%);
  animation: ripple 1.2s var(--ease) 1;
}
.mrow[data-state="landed"] .mrow__sig { opacity: 1; transform: scale(1.08); }
.mrow[data-state="landed"] .mrow__name { color: var(--text); }
.mrow[data-state="landed"] .mrow__st { color: var(--jade); }

.mrow[data-state="settled"] .mrow__ring { border-color: rgba(111,211,192,0.3); }

@keyframes spin { to { transform: rotate(360deg); } }
@keyframes bob {
  0%, 100% { transform: scale(1); }
  50%      { transform: scale(1.3); }
}
@keyframes ripple {
  0%   { transform: scale(0.5); opacity: 0; }
  55%  { opacity: 1; }
  100% { transform: scale(1.85); opacity: 0; }
}

/* a horizontal sweep crosses the mesh each time the whole route seals */
.mesh[data-sealed="1"] .mrow__ring {
  border-color: rgba(169,234,221,0.55);
  background: radial-gradient(circle, rgba(169,234,221,0.2), transparent 74%);
}
.mesh[data-sealed="1"] .mrow + .mrow::before { background: var(--jade-soft); }
.mesh[data-sealed="1"] .mrow__name { color: var(--text); }

/* ------------------------------------------------------------------ ticket */

.tk__row {
  display: flex;
  align-items: center;
  gap: 8px;
  border: 1px solid var(--edge);
  border-radius: 5px;
  background: rgba(237,232,224,0.02);
  padding: 7px 9px;
  transition: border-color 0.35s var(--ease), background 0.35s var(--ease);
}
.tk__row:focus-within {
  border-color: rgba(111,211,192,0.5);
  background: var(--jade-wash);
}
.tk__k {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--gold);
  flex-shrink: 0;
  width: 54px;
}
.tk__in {
  flex: 1;
  min-width: 0;
  background: none;
  border: 0;
  outline: 0;
  color: var(--text);
  font-family: var(--font-mono);
  font-size: 16px;
  font-variant-numeric: tabular-nums;
  padding: 0;
  text-align: right;
}
.tk__in::placeholder { color: #2B313C; }
.tk__unit {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--text-faint);
  flex-shrink: 0;
  width: 62px;
  text-align: right;
}
.tk__pick {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  flex-shrink: 0;
  padding: 3px 9px 3px 4px;
  border: 1px solid var(--line-2);
  border-radius: var(--r-pill);
  background: rgba(237,232,224,0.04);
  transition: border-color 0.25s var(--ease);
}
.tk__pick:hover { border-color: rgba(111,211,192,0.6); }
.tk__pick img { width: 18px; height: 18px; border-radius: 50%; }
.tk__pick span { font-family: var(--font-mono); font-size: 11.5px; }

.tk__go {
  width: 100%;
  height: 44px;
  display: grid;
  place-items: center;
  border-radius: 13px;
  background: linear-gradient(168deg, var(--jade-soft), var(--jade) 60%, #4FBCA9);
  color: #04211D;
  font-family: var(--font-mono);
  font-size: 12.5px;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  position: relative;
  overflow: hidden;
  transition: filter 0.3s var(--ease);
}
.tk__go:hover { filter: brightness(1.1); }
.tk__go[disabled] { opacity: 0.55; pointer-events: none; }
/* a light sweeps across the button while a route is running */
.tk__go[data-busy="1"]::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.55), transparent);
  animation: sweepbtn 1.1s linear infinite;
}
@keyframes sweepbtn {
  from { transform: translateX(-100%); }
  to   { transform: translateX(100%); }
}

/* --------------------------------------------------------------- blotter */

.blotter { display: flex; flex-direction: column; overflow: hidden; flex: 1; }
.blotter__scroll {
  overflow-y: auto;
  flex: 1;
  min-height: 168px;
  max-height: 300px;
  scrollbar-width: thin;
  scrollbar-color: rgba(237,232,224,0.16) transparent;
}
.blotter__scroll::-webkit-scrollbar { width: 6px; }
.blotter__scroll::-webkit-scrollbar-thumb {
  background: rgba(237,232,224,0.16);
  border-radius: 3px;
}
.brow {
  display: grid;
  grid-template-columns: 62px 78px 1fr auto;
  gap: 9px;
  align-items: center;
  padding: 5px 11px;
  font-family: var(--font-mono);
  font-size: 11.5px;
  border-bottom: 1px solid rgba(237,232,224,0.045);
  animation: rowin 0.5s var(--ease) both;
}
@keyframes rowin {
  from { opacity: 0; transform: translateX(-14px); background: rgba(111,211,192,0.18); }
  to   { opacity: 1; transform: none; background: transparent; }
}
.brow__t { color: var(--text-faint); }
.brow__a { color: var(--gold); letter-spacing: 0.05em; }
.brow__d { color: var(--text-dim); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.brow__v { color: var(--jade); text-align: right; }
.brow[data-kind="burn"] .brow__a { color: var(--copper); }
.brow[data-kind="burn"] .brow__v { color: var(--copper); }
.brow[data-kind="seal"] .brow__v { color: var(--text); }

/* ------------------------------------------------------------------ status */

.statusbar {
  position: relative;
  z-index: 20;
  display: flex;
  align-items: center;
  gap: 20px;
  height: 26px;
  padding-inline: 14px;
  border-top: 1px solid var(--edge-gold);
  background: rgba(7,8,13,0.82);
  backdrop-filter: blur(16px) saturate(1.3);
  -webkit-backdrop-filter: blur(16px) saturate(1.3);
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: 0.06em;
  color: var(--text-faint);
  overflow: hidden;
}
.statusbar b { color: var(--text-dim); font-weight: 400; }
.statusbar__r { margin-left: auto; display: flex; gap: 20px; }
.cursor {
  display: inline-block;
  width: 7px;
  height: 11px;
  background: var(--jade);
  animation: blink 1.05s steps(1) infinite;
  vertical-align: -1px;
}
@keyframes blink { 50% { opacity: 0; } }

/* ------------------------------------------------------------------ menus */

.menu {
  position: absolute;
  z-index: 60;
  top: calc(100% + 6px);
  right: 0;
  width: 268px;
  max-height: 288px;
  overflow-y: auto;
  padding: 5px;
  border: 1px solid var(--edge);
  border-radius: 6px;
  background: linear-gradient(180deg, #12161E, #0B0E14);
  box-shadow: 0 30px 70px -24px rgba(0,0,0,1);
  opacity: 0;
  transform: translateY(-6px);
  pointer-events: none;
  transition: opacity 0.2s var(--ease), transform 0.2s var(--ease);
}
.menu[data-open="1"] { opacity: 1; transform: none; pointer-events: auto; }
.menu__item {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 7px 9px;
  border-radius: 4px;
  text-align: left;
}

/* A destination the carrier cannot reach is shown, not hidden, and it says why.
   Greying it out is honest about the state of the route rather than about the
   state of the menu. */
.menu__item[disabled] {
  opacity: 0.42;
  cursor: not-allowed;
}
.menu__item[disabled]:hover { background: none; }
.menu__item[disabled] .menu__name { color: var(--ink-4, #6B665F); }
.menu__item:hover { background: rgba(237,232,224,0.055); }
.menu__item[aria-selected="true"] { background: var(--jade-wash); }
.menu__logo { width: 24px; height: 24px; border-radius: 50%; flex-shrink: 0; }
.menu__sym { font-family: var(--font-mono); font-size: 12px; }
.menu__name { font-family: var(--font-mono); font-size: 10px; color: var(--text-faint); }
.menu__pick {
  margin-left: auto; width: 5px; height: 5px; border-radius: 50%;
  background: var(--jade); opacity: 0;
}
.menu__item[aria-selected="true"] .menu__pick { opacity: 1; }

@media (prefers-reduced-motion: reduce) {
  .tape__track, .tk__go[data-busy="1"]::after { animation: none; }
}

/* ==========================================================================
   Depth pass

   The first version of this surface was flat black panels on flat black. It
   read as a wireframe, not an instrument. What follows adds the things that
   make a dense screen legible and alive: a moving ambient field behind
   everything, a gradient hairline around each pane instead of a flat border,
   corner ticks that give a panel edges, and a live topology drawing in the
   mesh pane.
   ========================================================================== */

/* ------------------------------------------------------- ambient field */

#amb {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  display: block;
  width: 100%;
  height: 100%;
}
/* the scanlines belong above the ambient field, not below it */
.term::after { z-index: 2; }
/* Layering, and it has to be explicit. A blanket rule giving the command bar
   and the grid the same z-index let the grid paint over the command bar,
   because the grid comes later in the document. Anything that opens out of the
   command bar, the wallet menu above all, was buried under the panels. */
.cmd, .statusbar { position: relative; z-index: 40; }
.tape            { position: relative; z-index: 39; }
.grid            { position: relative; z-index: 5; }

/* ------------------------------------------------------------ pane chrome */

.pane {
  border-color: transparent;
  position: relative;
  box-shadow:
    0 1px 0 rgba(237,232,224,0.03) inset,
    0 24px 60px -34px rgba(0,0,0,0.9);
}
/* a hairline that runs from champagne at the top left to jade at the bottom
   right, so each pane has a lit edge rather than a uniform outline */
.pane::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 1px;
  background: linear-gradient(152deg,
    rgba(217,184,124,0.42) 0%,
    rgba(237,232,224,0.10) 26%,
    rgba(237,232,224,0.04) 62%,
    rgba(111,211,192,0.32) 100%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  mask-composite: exclude;
  pointer-events: none;
  z-index: 3;
}
/* corner ticks, the cheapest way to make a rectangle read as an instrument */
.pane::after {
  content: "";
  position: absolute;
  inset: 7px;
  border-radius: 9px;
  pointer-events: none;
  z-index: 3;
  background:
    linear-gradient(var(--gold), var(--gold)) left top / 8px 1px no-repeat,
    linear-gradient(var(--gold), var(--gold)) left top / 1px 8px no-repeat,
    linear-gradient(var(--jade), var(--jade)) right bottom / 8px 1px no-repeat,
    linear-gradient(var(--jade), var(--jade)) right bottom / 1px 8px no-repeat;
  opacity: 0.5;
}
.pane[data-live="1"]::after { opacity: 1; }
.pane[data-live="1"] {
  border-color: transparent;
  box-shadow:
    0 0 0 1px rgba(111,211,192,0.20),
    0 0 44px -16px var(--jade-glow),
    0 24px 60px -34px rgba(0,0,0,0.9);
}
/* a light crosses the top edge of a pane while it is active */
.pane[data-live="1"] .pane__head::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -1px;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--jade), transparent);
  animation: edgesweep 1.8s linear infinite;
}
@keyframes edgesweep {
  from { transform: translateX(-100%); }
  to   { transform: translateX(100%); }
}

.pane__head {
  position: relative;
  overflow: hidden;
  padding-left: 15px;
}
/* a short accent bar before every title */
.pane__head::before {
  content: "";
  position: absolute;
  left: 6px;
  top: 50%;
  transform: translateY(-50%);
  width: 2px;
  height: 13px;
  border-radius: 1px;
  background: linear-gradient(180deg, var(--gold), rgba(217,184,124,0.15));
}
.pane__title { letter-spacing: 0.19em; }

/* a top-edge sheen so panels do not read as flat fills */
.pane__body { position: relative; z-index: 4; }

/* -------------------------------------------------------------- topology */

.topo {
  position: relative;
  width: 100%;
  height: clamp(190px, 23vh, 310px);
  display: block;
  border-radius: 14px;
  background:
    radial-gradient(70% 90% at 50% 50%, rgba(111,211,192,0.05), transparent 70%),
    rgba(0,0,0,0.24);
  overflow: hidden;
}
.topo__legend {
  display: flex;
  gap: 16px;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.09em;
  color: var(--text-faint);
  text-transform: uppercase;
}
.topo__legend i {
  display: inline-block;
  width: 5px; height: 5px;
  border-radius: 50%;
  margin-right: 6px;
  vertical-align: 1px;
}

/* ---------------------------------------------------------------- charts */

.chart { border-radius: 10px; }

/* ---------------------------------------------------------------- wallet */

.wslot { position: relative; }

.wbtn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 27px;
  padding: 0 14px;
  border-radius: var(--r-pill);
  background: linear-gradient(168deg, var(--jade-soft), var(--jade) 62%, #4FBCA9);
  color: #04211D;
  font-family: var(--font-mono);
  font-size: 11.5px;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  transition: filter 0.25s var(--ease), transform 0.25s var(--ease);
}
.wbtn:hover { filter: brightness(1.1); transform: translateY(-1px); }
.wbtn:disabled { opacity: 0.5; pointer-events: none; }

.wpill {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  height: 27px;
  padding: 0 6px 0 11px;
  border-radius: var(--r-pill);
  border: 1px solid var(--edge-gold);
  background: rgba(237,232,224,0.045);
  font-family: var(--font-mono);
  font-size: 11.5px;
  color: var(--text);
  transition: border-color 0.25s var(--ease), background 0.25s var(--ease);
}
.wpill:hover { border-color: rgba(111,211,192,0.6); background: var(--jade-wash); }
.wpill__dot {
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--jade);
  box-shadow: 0 0 8px var(--jade);
  flex-shrink: 0;
}
.wpill__dot[data-warn="1"] { background: var(--copper); box-shadow: 0 0 8px var(--copper); }
.wpill__bal { color: var(--text-faint); }
.wpill__caret {
  width: 18px; height: 18px;
  display: grid; place-items: center;
  border-radius: 50%;
  background: rgba(237,232,224,0.07);
  font-size: 9px;
  color: var(--text-faint);
}

.wmenu {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  width: 306px;
  padding: 7px;
  border: 1px solid var(--edge);
  border-radius: 16px;
  background: linear-gradient(180deg, #12161E, #0A0D13);
  box-shadow: 0 34px 80px -26px rgba(0,0,0,1);
  opacity: 0;
  transform: translateY(-6px);
  pointer-events: none;
  transition: opacity 0.2s var(--ease), transform 0.2s var(--ease);
  z-index: 200;
}
.wmenu[data-open="1"] { opacity: 1; transform: none; pointer-events: auto; }
.wmenu__row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 8px 10px;
  font-family: var(--font-mono);
  font-size: 11.5px;
}
.wmenu__k { color: var(--text-faint); letter-spacing: 0.04em; }
.wmenu__v { color: var(--text); text-align: right; }
.wmenu__v[data-tone="warn"] { color: var(--copper); }
.wmenu__v[data-tone="ok"] { color: var(--jade); }
.wmenu__addr {
  display: flex; align-items: center; gap: 9px;
  padding: 10px;
  border-bottom: 1px solid var(--edge);
  margin-bottom: 4px;
}
.wmenu__addr img { width: 22px; height: 22px; border-radius: 50%; }
.wmenu__addr code {
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--text);
  letter-spacing: 0.02em;
}
.wmenu__act {
  display: block;
  width: 100%;
  text-align: left;
  padding: 9px 10px;
  border-radius: 10px;
  font-family: var(--font-mono);
  font-size: 11.5px;
  letter-spacing: 0.05em;
  color: var(--text-dim);
  transition: background 0.2s var(--ease), color 0.2s var(--ease);
}
.wmenu__act:hover { background: rgba(237,232,224,0.06); color: var(--text); }
.wmenu__act[data-tone="go"] { color: var(--jade); }
.wmenu__act[data-tone="stop"] { color: var(--copper); }

/* the notice strip that tells the truth about what is deployed */
.notice {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 9px 11px;
  border: 1px solid rgba(203,127,90,0.4);
  border-radius: 13px;
  background: rgba(203,127,90,0.09);
  font-family: var(--font-mono);
  font-size: 11px;
  line-height: 1.6;
  color: #E8C9B6;
  animation: rowin 0.45s var(--ease) both;
}
.notice[data-tone="ok"] {
  border-color: rgba(111,211,192,0.4);
  background: var(--jade-wash);
  color: var(--jade-soft);
}
.notice b { color: var(--text); font-weight: 500; }

@media (prefers-reduced-motion: reduce) {
  .pane[data-live="1"] .pane__head::after { animation: none; opacity: 0; }
}

/* ==========================================================================
   Ticket, rebuilt

   The first ticket was a stack of identical rows with a bare button for each
   picker. It read as a form. This one is grouped by what the user is deciding,
   and the pickers are real controls: a logo in a ring, a chevron that turns,
   and a panel that lists what is actually selectable.
   ========================================================================== */

.tk__group { display: flex; flex-direction: column; gap: 7px; }
.tk__group + .tk__group {
  padding-top: 12px;
  border-top: 1px dashed rgba(237,232,224,0.09);
}

.tk__label {
  font-family: var(--font-mono);
  font-size: 9.5px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--gold-soft);
}

.tk__fees {
  padding-top: 11px;
  border-top: 1px dashed rgba(237,232,224,0.09);
}

/* ------------------------------------------------------------- picker */

.tk__pickwrap { position: relative; flex-shrink: 0; }

.tk__pick {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  height: 34px;
  padding: 0 10px 0 5px;
  border: 1px solid var(--edge);
  border-radius: var(--r-pill);
  background:
    linear-gradient(180deg, rgba(237,232,224,0.07), rgba(237,232,224,0.015));
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--text);
  transition: border-color 0.25s var(--ease), background 0.25s var(--ease),
              transform 0.25s var(--ease), box-shadow 0.25s var(--ease);
}
.tk__pick:hover {
  border-color: rgba(111,211,192,0.55);
  background: linear-gradient(180deg, rgba(111,211,192,0.16), rgba(111,211,192,0.04));
  transform: translateY(-1px);
  box-shadow: 0 6px 18px -10px var(--jade-glow);
}
.tk__pick:active { transform: translateY(0); }
.tk__pick img {
  width: 24px; height: 24px;
  border-radius: 50%;
  box-shadow: 0 0 0 1px rgba(237,232,224,0.16), 0 2px 6px rgba(0,0,0,0.5);
  flex-shrink: 0;
}
.tk__pick i {
  width: 0; height: 0;
  border-left: 3.5px solid transparent;
  border-right: 3.5px solid transparent;
  border-top: 4.5px solid var(--text-faint);
  transition: transform 0.28s var(--ease), border-top-color 0.28s var(--ease);
  flex-shrink: 0;
}
.tk__pick[aria-expanded="true"] {
  border-color: rgba(111,211,192,0.7);
  background: linear-gradient(180deg, rgba(111,211,192,0.2), rgba(111,211,192,0.06));
}
.tk__pick[aria-expanded="true"] i {
  transform: rotate(180deg);
  border-top-color: var(--jade);
}

/* --------------------------------------------------------------- rows */

.tk__row {
  display: flex;
  align-items: center;
  gap: 8px;
  border: 1px solid var(--edge);
  border-radius: 13px;
  background:
    linear-gradient(180deg, rgba(237,232,224,0.035), rgba(237,232,224,0.008));
  padding: 6px 7px 6px 11px;
  transition: border-color 0.3s var(--ease), box-shadow 0.3s var(--ease),
              background 0.3s var(--ease);
}
.tk__row:focus-within {
  border-color: rgba(111,211,192,0.55);
  background: var(--jade-wash);
  box-shadow: 0 0 0 3px rgba(111,211,192,0.08);
}
.tk__row--tight { padding-block: 4px; }
.tk__row[data-bad="1"] {
  border-color: rgba(203,127,90,0.65);
  box-shadow: 0 0 0 3px rgba(203,127,90,0.09);
}
.tk__row[data-ok="1"] { border-color: rgba(111,211,192,0.4); }

.tk__k {
  font-family: var(--font-mono);
  font-size: 9.5px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--text-faint);
  flex-shrink: 0;
  width: 58px;
}

.tk__in {
  flex: 1;
  min-width: 0;
  width: 100%;
  background: none;
  border: 0;
  outline: 0;
  color: var(--text);
  font-family: var(--font-mono);
  font-size: 17px;
  font-variant-numeric: tabular-nums;
  padding: 3px 0;
  text-align: right;
}
.tk__in::placeholder { color: #39404C; }
.tk__in--addr {
  font-size: 12.5px;
  text-align: left;
  letter-spacing: 0.01em;
}
.tk__in--addr::placeholder { font-size: 12px; }

.tk__paste {
  flex-shrink: 0;
  padding: 5px 10px;
  border-radius: 9px;
  border: 1px solid var(--edge);
  font-family: var(--font-mono);
  font-size: 9.5px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-faint);
  transition: color 0.22s var(--ease), border-color 0.22s var(--ease),
              background 0.22s var(--ease);
}
.tk__paste:hover {
  color: var(--jade);
  border-color: rgba(111,211,192,0.55);
  background: var(--jade-wash);
}

.tk__hint {
  font-family: var(--font-mono);
  font-size: 10px;
  line-height: 1.55;
  color: var(--text-faint);
  min-height: 2.1em;
}
.tk__hint[data-tone="bad"] { color: #E0A184; }
.tk__hint[data-tone="ok"] { color: var(--jade); }

/* --------------------------------------------------------------- menu */

.menu {
  top: calc(100% + 7px);
  right: 0;
  width: min(298px, calc(100vw - 20px));
  max-height: min(460px, calc(100vh - 20px));
  padding: 6px;
  overflow: hidden auto;
  border-radius: 18px;
  scrollbar-width: thin;
  scrollbar-color: rgba(111,211,192,0.34) transparent;
  background: linear-gradient(180deg, rgba(19,24,33,0.99), rgba(10,13,19,0.99));
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  box-shadow:
    0 0 0 1px rgba(237,232,224,0.05),
    0 34px 80px -22px rgba(0,0,0,1);
  transform: translateY(-8px) scale(0.985);
  transform-origin: top right;
  transition: opacity 0.22s var(--ease), transform 0.22s var(--ease);
}
.menu[data-open="1"] { transform: none; }

.menu__title {
  position: sticky;
  top: -6px;
  z-index: 2;
  margin: -6px -6px 4px;
  padding: 14px 18px 10px;
  border-radius: 17px 17px 0 0;
  font-family: var(--font-mono);
  font-size: 9.5px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--gold-soft);
  background: linear-gradient(180deg, #141922, rgba(20,25,34,0.94));
  border-bottom: 1px solid var(--edge);
}

.menu__item {
  display: grid;
  grid-template-columns: 28px minmax(0, 1fr) auto;
  align-items: center;
  gap: 11px;
  width: 100%;
  padding: 9px 13px;
  text-align: left;
  position: relative;
  border-radius: 11px;
  /* line-height is inherited from the page, which is set for prose. Left
     unset here it made every row half again as tall as its content. */
  line-height: 1.3;
  transition: background 0.2s var(--ease), transform 0.2s var(--ease);
}
.menu__item:hover { transform: translateX(2px); }
.menu__item + .menu__item { margin-top: 2px; }

/* The two lines are a flex column, not a <br>. A break leaves an extra line
   box sized by the inherited font, which was most of the extra height. */
.menu__text {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
  line-height: 1.3;
}
.menu__item::before {
  content: "";
  position: absolute;
  left: 4px; top: 8px; bottom: 8px;
  width: 3px;
  border-radius: 999px;
  background: var(--jade);
  opacity: 0;
  transform: scaleY(0.35);
  transition: opacity 0.2s var(--ease), transform 0.2s var(--ease);
}
.menu__item:hover { background: rgba(237,232,224,0.055); }
.menu__item:hover::before { opacity: 0.7; transform: none; }
.menu__item[aria-selected="true"] { background: var(--jade-wash); }
.menu__item[aria-selected="true"]::before { opacity: 1; transform: none; }

.menu__logo {
  width: 28px; height: 28px;
  border-radius: 50%;
  box-shadow: 0 0 0 1px rgba(237,232,224,0.14);
}
.menu__sym {
  font-family: var(--font-mono);
  font-size: 12.5px;
  line-height: 1.3;
  color: var(--text);
  letter-spacing: 0.02em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.menu__name {
  font-family: var(--font-mono);
  font-size: 9.5px;
  line-height: 1.3;
  color: var(--text-faint);
  letter-spacing: 0.05em;
  margin: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.menu__right {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--text-dim);
  text-align: right;
  white-space: nowrap;
}
.menu__right small {
  display: block;
  font-size: 9px;
  color: var(--text-faint);
  margin-top: 3px;
}
.menu__empty {
  padding: 18px 13px;
  font-family: var(--font-mono);
  font-size: 11px;
  line-height: 1.6;
  color: var(--text-faint);
}

@media (prefers-reduced-motion: reduce) {
  .menu, .tk__pick, .tk__pick i { transition: none; }
}

.wmenu__addr > div { display: flex; flex-direction: column; gap: 3px; }
.wmenu__addr span {
  font-family: var(--font-mono);
  font-size: 9.5px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-faint);
}


/* --------------------------------------------------------- menu scrolling */

.menu::-webkit-scrollbar { width: 9px; }
.menu::-webkit-scrollbar-track { background: transparent; }
.menu::-webkit-scrollbar-thumb {
  background: linear-gradient(180deg, rgba(169,234,221,0.5), rgba(111,211,192,0.3));
  border-radius: 999px;
  border: 3px solid transparent;
  background-clip: content-box;
}
.menu::-webkit-scrollbar-thumb:hover {
  background: linear-gradient(180deg, rgba(169,234,221,0.8), rgba(111,211,192,0.5));
  background-clip: content-box;
}

/* a soft edge, so a scrolled list reads as continuing rather than as cut off */
/* fade the trailing edge only. Fading the top as well would dim the sticky
   title, which sits flush against it. */
.menu { mask-image: linear-gradient(180deg, #000 calc(100% - 16px), transparent 100%); }

/* ------------------------------------------------------- add token by address

   A closed list cannot cover every token a person might want to receive, so
   the menu carries an address field. It sits below the list, separated by a
   rule, and reads as a deliberate action rather than another row. */

.menu__add {
  display: flex;
  gap: 7px;
  align-items: center;
  margin: 7px 4px 0;
  padding: 9px 4px 4px;
  border-top: 1px dashed rgba(237,232,224,0.13);
}
.menu__in {
  flex: 1;
  min-width: 0;
  background: rgba(237,232,224,0.035);
  border: 1px solid var(--edge);
  border-radius: 10px;
  padding: 8px 11px;
  color: var(--text);
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.01em;
  outline: 0;
  transition: border-color 0.25s var(--ease), background 0.25s var(--ease);
}
.menu__in::placeholder { color: #454B57; }
.menu__in:focus {
  border-color: rgba(111,211,192,0.6);
  background: var(--jade-wash);
}
.menu__go {
  flex-shrink: 0;
  padding: 8px 13px;
  border-radius: 10px;
  border: 1px solid rgba(111,211,192,0.4);
  background: linear-gradient(180deg, rgba(111,211,192,0.2), rgba(111,211,192,0.06));
  color: var(--jade);
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  transition: filter 0.22s var(--ease), border-color 0.22s var(--ease);
}
.menu__go:hover { filter: brightness(1.25); border-color: rgba(111,211,192,0.75); }
.menu__go[disabled] { opacity: 0.55; pointer-events: none; }

.menu__msg {
  margin: 7px 8px 4px;
  font-family: var(--font-mono);
  font-size: 10px;
  line-height: 1.5;
  color: var(--jade);
  min-height: 0;
}

/* A menu with nothing in it says why, in the same place the message about a
   failed paste appears, so an empty list reads as a statement rather than a
   page that has not finished loading. */
.menu__msg--shown {
  display: block;
  padding: 10px 14px 14px;
  color: var(--ink-3, #7A756E);
  font-size: 11px;
  line-height: 1.55;
}
.menu__msg:empty { margin: 0; }
.menu__msg[data-tone="bad"] { color: var(--tone-bad); }


/* ==========================================================================
   Command bar under pressure

   The bar holds a brand, six function keys, three statistics and the wallet
   button. Below roughly 1000px that does not fit, and because the wallet sits
   last it was the thing pushed off the right edge, taking its menu with it.
   The button is never hidden; the optional parts give way first.
   ========================================================================== */

.wslot { flex-shrink: 0; }
.cmd__keys { flex-shrink: 0; }
.cmd__right { flex-shrink: 0; }

@media (max-width: 1320px) {
  .cmd { gap: 12px; }
  .cmd__stat--opt { display: none; }
}
@media (max-width: 1080px) {
  .cmd__keys .fkey:nth-child(n + 4) { display: none; }
}
@media (max-width: 860px) {
  .cmd__keys { display: none; }
  .cmd__name { display: none; }
  .cmd { gap: 10px; }
}
@media (max-width: 620px) {
  .cmd__right .cmd__stat { display: none; }
  .cmd__lbl { display: none; }
}