@font-face {
  font-family: "Inter";
  font-weight: 400;
  font-style: normal;
  font-display: swap;
  src: url("/cloudbit-assets/fonts/Inter-Regular.woff2") format("woff2");
}

@font-face {
  font-family: "Inter";
  font-weight: 600;
  font-style: normal;
  font-display: swap;
  src: url("/cloudbit-assets/fonts/Inter-SemiBold.woff2") format("woff2");
}

@font-face {
  font-family: "IBMPlexSans";
  font-weight: 400;
  font-style: normal;
  font-display: swap;
  src: url("/cloudbit-assets/fonts/IBMPlexSans-Regular.woff2") format("woff2");
}

:root {
  --bg: #0c0d13;
  --panel: rgba(255, 255, 255, 0.027);
  --panel-strong: rgba(255, 255, 255, 0.045);
  --border: rgba(255, 255, 255, 0.088);
  --border-strong: rgba(255, 255, 255, 0.14);
  --text: #ffffff;
  --muted: rgba(255, 255, 255, 0.54);
  --soft: rgba(255, 255, 255, 0.72);
  --main: #00e5ff;
  --green: #7bff00;
  --red: #ff4646;
  --amber: #ffcb69;
  --font: "Inter", Arial, sans-serif;
  --mono: "IBMPlexSans", ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
}

* {
  box-sizing: border-box;
}

html {
  font-size: 10px;
  background: var(--bg);
}

body {
  margin: 0;
  overflow: hidden;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font);
}

button,
input,
select {
  font: inherit;
}

button {
  cursor: pointer;
}

.checkup-shell {
  height: 100dvh;
  min-height: 68rem;
  overflow: hidden;
  display: grid;
  grid-template-rows: 4.4rem 5.6rem 7.2rem minmax(0, 1fr);
  gap: 1rem;
  padding: 1.2rem;
}

.topbar,
.query-row,
.kpi-strip,
.panel {
  border: 1px solid var(--border);
  background: var(--panel);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.035);
}

.topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  border-radius: 1rem;
  padding: 0 1.2rem;
}

.brand {
  display: flex;
  align-items: center;
  gap: 1.2rem;
  min-width: 22rem;
}

.logo {
  width: 13.5rem;
  height: 2.6rem;
  display: inline-flex;
  color: var(--text);
}

.logo svg {
  width: 100%;
  height: 100%;
}

.page-title {
  font-size: 1.35rem;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.86);
  white-space: nowrap;
}

.source-strip,
.top-actions {
  display: flex;
  align-items: center;
  gap: 0.65rem;
}

.source-chip,
.build-pill {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  min-height: 2.6rem;
  padding: 0.35rem 0.75rem;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 0.8rem;
  background: rgba(255, 255, 255, 0.03);
  color: rgba(255, 255, 255, 0.66);
  font-size: 1.02rem;
  line-height: 1;
  white-space: nowrap;
}

.source-chip span {
  width: 0.68rem;
  height: 0.68rem;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.22);
}

.source-chip.is-ok span {
  background: var(--green);
}

.source-chip.is-error span {
  background: var(--red);
}

.source-chip.is-warn span {
  background: var(--amber);
}

.icon-btn,
.mini-btn,
.segmented button {
  border: 1px solid rgba(255, 255, 255, 0.1);
  background: rgba(255, 255, 255, 0.04);
  color: rgba(255, 255, 255, 0.8);
  transition: 0.18s ease;
}

.icon-btn {
  width: 3rem;
  height: 3rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 0.8rem;
}

.icon-btn svg {
  width: 1.7rem;
  height: 1.7rem;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.icon-btn:hover,
.mini-btn:hover,
.segmented button:hover {
  border-color: rgba(0, 229, 255, 0.32);
  color: #ffffff;
  background: rgba(0, 229, 255, 0.075);
}

.icon-btn:active,
.mini-btn:active,
.segmented button:active {
  transform: translateY(1px);
}

.query-row {
  display: grid;
  grid-template-columns: minmax(30rem, 1fr) 16rem;
  gap: 0.85rem;
  align-items: end;
  border-radius: 1rem;
  padding: 0.75rem 0.9rem;
  overflow: visible;
  position: relative;
  z-index: 12;
}

.query-input,
.network-select {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 0.38rem;
  position: relative;
}

.query-input > span,
.network-select > span {
  color: rgba(255, 255, 255, 0.5);
  font-size: 0.95rem;
  line-height: 1;
}

.query-input input {
  width: 100%;
  height: 3rem;
  min-width: 0;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 0.8rem;
  outline: none;
  background: rgba(255, 255, 255, 0.035);
  color: #ffffff;
  padding: 0 1rem;
  font-size: 1.12rem;
}

.query-input input:focus {
  border-color: rgba(0, 229, 255, 0.42);
  box-shadow: 0 0 0 0.15rem rgba(0, 229, 255, 0.08);
}

.native-network-select {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}

.network-picker {
  position: relative;
  min-width: 0;
}

.network-trigger {
  width: 100%;
  height: 3rem;
  min-width: 0;
  display: grid;
  grid-template-columns: 2.25rem minmax(0, 1fr) 1.8rem;
  align-items: center;
  gap: 0.62rem;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 0.8rem;
  outline: none;
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.055), rgba(255, 255, 255, 0.022)),
    rgba(255, 255, 255, 0.035);
  color: #ffffff;
  padding: 0 0.48rem 0 0.56rem;
  text-align: left;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.055);
  transition: border-color 0.18s ease, background 0.18s ease, transform 0.18s ease;
}

.network-trigger:hover,
.network-picker.is-open .network-trigger,
.network-trigger:focus-visible {
  border-color: rgba(0, 229, 255, 0.42);
  background:
    linear-gradient(135deg, rgba(0, 229, 255, 0.09), rgba(123, 255, 0, 0.035)),
    rgba(255, 255, 255, 0.045);
  box-shadow: 0 0 0 0.15rem rgba(0, 229, 255, 0.07), inset 0 1px 0 rgba(255, 255, 255, 0.07);
}

.network-trigger:active {
  transform: translateY(1px);
}

.network-trigger-text {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 1.08rem;
  font-weight: 600;
}

.network-trigger svg {
  width: 1.65rem;
  height: 1.65rem;
  justify-self: end;
  fill: none;
  stroke: rgba(255, 255, 255, 0.64);
  stroke-width: 1.9;
  stroke-linecap: round;
  stroke-linejoin: round;
  transition: transform 0.18s ease, stroke 0.18s ease;
}

.network-picker.is-open .network-trigger svg {
  transform: rotate(180deg);
  stroke: var(--main);
}

.network-menu {
  position: absolute;
  top: calc(100% + 0.55rem);
  left: 0;
  width: min(28rem, calc(100vw - 2.4rem));
  max-height: 42rem;
  overflow: auto;
  display: none;
  padding: 0.45rem;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 1rem;
  background: rgba(13, 16, 26, 0.98);
  box-shadow: 0 2.2rem 4.8rem rgba(0, 0, 0, 0.42), inset 0 1px 0 rgba(255, 255, 255, 0.06);
  backdrop-filter: blur(16px);
  z-index: 40;
}

.network-picker.is-open .network-menu {
  display: block;
}

.network-menu button {
  width: 100%;
  min-height: 3.28rem;
  display: grid;
  grid-template-columns: 2.45rem minmax(0, 1fr) auto;
  align-items: center;
  gap: 0.72rem;
  border: 1px solid transparent;
  border-radius: 0.76rem;
  background: transparent;
  color: rgba(255, 255, 255, 0.86);
  padding: 0.42rem 0.62rem;
  text-align: left;
}

.network-menu button:hover,
.network-menu button:focus-visible {
  outline: none;
  border-color: rgba(0, 229, 255, 0.16);
  background: rgba(0, 229, 255, 0.075);
}

.network-menu button[aria-selected="true"] {
  border-color: rgba(123, 255, 0, 0.2);
  background: linear-gradient(90deg, rgba(123, 255, 0, 0.095), rgba(0, 229, 255, 0.045));
}

.network-menu button span:not(.chain-icon) {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 1.04rem;
  font-weight: 600;
}

.network-menu button small {
  color: rgba(255, 255, 255, 0.44);
  font-family: var(--mono);
  font-size: 0.83rem;
  white-space: nowrap;
}

.chain-icon {
  width: 2.14rem;
  height: 2.14rem;
  display: inline-grid;
  place-items: center;
  border: 0;
  border-radius: 50%;
  background: transparent;
  overflow: hidden;
  box-shadow: none;
}

.chain-letter {
  grid-area: 1 / 1;
  color: rgba(232, 249, 252, 0.78);
  font-family: var(--mono);
  font-size: 0.72rem;
  font-weight: 800;
  line-height: 1;
}

.chain-icon img {
  grid-area: 1 / 1;
  width: 1.9rem;
  height: 1.9rem;
  display: block;
  object-fit: contain;
  border-radius: 50%;
}

.kpi-strip {
  display: grid;
  grid-template-columns: 1.18fr 1fr 1fr 1fr 1fr;
  gap: 0;
  border-radius: 1rem;
  overflow: hidden;
}

.kpi-cell {
  min-width: 0;
  padding: 0.86rem 1rem;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 0.35rem;
}

.kpi-cell:not(:last-child) {
  border-right: 1px solid rgba(255, 255, 255, 0.07);
}

.kpi-label {
  font-size: 0.92rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: rgba(0, 229, 255, 0.66);
}

.kpi-cell strong {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: #ffffff;
  font-family: var(--mono);
  font-size: 1.55rem;
  font-weight: 600;
  line-height: 1.05;
}

.kpi-cell small {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: rgba(255, 255, 255, 0.54);
  font-size: 1rem;
}

.checkup-main {
  min-height: 0;
  display: grid;
  grid-template-columns: minmax(38rem, 1.06fr) minmax(43rem, 1.18fr) minmax(31rem, 0.8fr);
  grid-template-rows: minmax(24rem, 0.78fr) minmax(24rem, 1fr);
  gap: 1rem;
}

.panel {
  min-width: 0;
  min-height: 0;
  overflow: hidden;
  border-radius: 1rem;
  display: flex;
  flex-direction: column;
}

.panel-head {
  min-height: 4.5rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.9rem 1rem 0.75rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.07);
}

.panel-head h2 {
  margin: 0;
  color: #ffffff;
  font-size: 1.23rem;
  line-height: 1.1;
}

.panel-head p {
  margin: 0.28rem 0 0;
  color: rgba(255, 255, 255, 0.46);
  font-size: 0.98rem;
  line-height: 1.2;
}

.mini-btn {
  min-width: 5.2rem;
  height: 2.5rem;
  border-radius: 0.72rem;
  font-size: 0.98rem;
}

.panel-dex {
  grid-column: 1;
  grid-row: 1;
}

.panel-spreads {
  grid-column: 1;
  grid-row: 2;
}

.panel-cex {
  grid-column: 2;
  grid-row: 1 / span 2;
}

.right-stack {
  grid-column: 3;
  grid-row: 1 / span 2;
  min-height: 0;
  display: grid;
  grid-template-rows: minmax(15rem, 0.92fr) minmax(9.2rem, 0.5fr) minmax(17rem, 1.08fr);
  gap: 1rem;
}

.data-table {
  flex: 1;
  min-height: 0;
  padding: 0.35rem 0;
  overflow: hidden;
}

.table-scroll {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
  overflow-x: hidden;
  overflow-y: auto;
  scrollbar-gutter: stable;
}

.table-scroll > .table-row {
  flex: 0 0 auto;
}

.table-row {
  min-width: 0;
  min-height: 3.15rem;
  display: grid;
  align-items: center;
  gap: 0.7rem;
  padding: 0 1rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.052);
  color: rgba(255, 255, 255, 0.82);
  font-size: 1.02rem;
}

.table-row > span {
  min-width: 0;
}

.table-row.is-source {
  background: linear-gradient(90deg, rgba(0, 229, 255, 0.075), rgba(0, 229, 255, 0.018));
}

.more-row {
  width: calc(100% - 2rem);
  min-height: 2.65rem;
  margin: 0.35rem 1rem 0;
  border: 1px solid rgba(0, 229, 255, 0.18);
  border-radius: 0.75rem;
  background: rgba(0, 229, 255, 0.055);
  color: rgba(219, 255, 255, 0.86);
  grid-template-columns: 1fr !important;
  text-align: left;
}

.more-row span:not(:first-child) {
  display: none;
}

.more-row:hover,
.more-row:focus-visible {
  outline: none;
  border-color: rgba(0, 229, 255, 0.35);
  background: rgba(0, 229, 255, 0.09);
}

.cex-pager {
  min-height: 2.65rem;
  margin: 0.35rem 1rem 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  color: rgba(217, 239, 244, 0.66);
  font-size: 0.9rem;
}

.cex-page-buttons {
  min-width: 0;
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
}

.cex-page-btn {
  width: 2rem;
  height: 2rem;
  display: inline-grid;
  place-items: center;
  border: 1px solid rgba(255, 255, 255, 0.09);
  border-radius: 0.55rem;
  background: rgba(255, 255, 255, 0.04);
  color: rgba(232, 249, 252, 0.82);
  font-weight: 700;
  line-height: 1;
}

.cex-page-btn.icon {
  font-size: 1.25rem;
}

.cex-page-btn:hover,
.cex-page-btn:focus-visible {
  outline: none;
  border-color: rgba(0, 229, 255, 0.38);
  background: rgba(0, 229, 255, 0.09);
}

.cex-page-btn.is-active {
  border-color: rgba(0, 229, 255, 0.42);
  background: rgba(0, 229, 255, 0.16);
  color: #ffffff;
  box-shadow: inset 0 0 0 1px rgba(0, 229, 255, 0.12);
}

.cex-page-btn:disabled {
  opacity: 0.38;
  cursor: default;
}

.cex-page-btn:disabled:hover {
  border-color: rgba(255, 255, 255, 0.09);
  background: rgba(255, 255, 255, 0.04);
}

.bridge-page-count {
  min-width: 3.6rem;
  color: rgba(232, 249, 252, 0.72);
  font-family: var(--mono);
  font-size: 0.86rem;
  text-align: center;
}

.table-row.head {
  min-height: 2.7rem;
  color: rgba(255, 255, 255, 0.42);
  font-size: 0.86rem;
  letter-spacing: 0.055em;
  text-transform: uppercase;
}

.dex-table .table-row {
  grid-template-columns: minmax(7.4rem, 0.9fr) minmax(7.4rem, 0.95fr) minmax(6.8rem, 0.85fr) minmax(11.8rem, 1.3fr);
}

.dex-table {
  display: flex;
  flex-direction: column;
}

.dex-table .head {
  flex: 0 0 auto;
}

.cex-table .table-row {
  min-height: 3.08rem;
  grid-template-columns: minmax(13.2rem, 0.98fr) minmax(8.8rem, 0.62fr) minmax(14.5rem, 1.25fr);
}

.spread-table .table-row {
  min-height: 3.74rem;
  grid-template-columns: minmax(8.2rem, 0.92fr) minmax(6.6rem, 0.68fr) minmax(5.8rem, 0.48fr) minmax(11.2rem, 1.08fr);
  gap: 0.5rem;
}

.spread-table {
  display: flex;
  flex-direction: column;
}

.spread-table .head {
  min-height: 2.35rem;
}

.spread-table .head,
.spread-table .spread-row,
.spread-table .spread-pager {
  flex: 0 0 auto;
}

.spread-table .spread-pager {
  margin-top: auto;
}

.spread-row {
  position: relative;
  background: rgba(255, 255, 255, 0.014);
}

.spread-row.cex-tier-gold {
  background: linear-gradient(90deg, rgba(255, 203, 105, 0.12), rgba(255, 203, 105, 0.018) 68%, transparent);
  box-shadow: inset 0.18rem 0 0 rgba(255, 203, 105, 0.58);
}

.spread-row.cex-tier-epic {
  background: linear-gradient(90deg, rgba(171, 116, 255, 0.12), rgba(171, 116, 255, 0.018) 68%, transparent);
  box-shadow: inset 0.18rem 0 0 rgba(171, 116, 255, 0.54);
}

.spread-row.cex-tier-blue {
  background: linear-gradient(90deg, rgba(0, 229, 255, 0.1), rgba(0, 229, 255, 0.018) 68%, transparent);
  box-shadow: inset 0.18rem 0 0 rgba(0, 229, 255, 0.5);
}

.spread-row .cex-icon {
  width: 1.52rem;
  height: 1.52rem;
}

.spread-route,
.spread-cex-cell,
.spread-dex-cell {
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.28rem;
}

.spread-route-line {
  min-width: 0;
  width: 100%;
  display: grid;
  grid-template-columns: minmax(7.6rem, 1fr) auto minmax(7.4rem, 1fr);
  align-items: center;
  gap: 0.45rem;
}

.spread-route-line > i {
  color: rgba(0, 229, 255, 0.76);
  font-family: var(--mono);
  font-size: 0.9rem;
  font-style: normal;
  font-weight: 700;
  line-height: 1;
}

.spread-route-node {
  min-width: 0;
  display: inline-flex;
  align-items: center;
  gap: 0.34rem;
}

.spread-route-node .chain-icon {
  flex: none;
  width: 1.52rem;
  height: 1.52rem;
}

.spread-route-node .chain-icon img {
  width: 100%;
  height: 100%;
}

.spread-route-node b,
.spread-route-node .venue-link,
.spread-route-node .dex-link {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: rgba(255, 255, 255, 0.9);
  font-size: 0.98rem;
  font-weight: 700;
  text-decoration: none;
}

.spread-route-node .venue-link:hover,
.spread-route-node .venue-link:focus-visible,
.spread-route-node .dex-link:hover,
.spread-route-node .dex-link:focus-visible {
  color: #ffffff;
  text-decoration: none;
}

.spread-route > small,
.spread-cex-cell > small,
.spread-dex-cell > small {
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: rgba(255, 255, 255, 0.42);
  font-family: var(--mono);
  font-size: 0.72rem;
  line-height: 1;
}

.spread-delta {
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.1rem;
  font-family: var(--mono);
  font-variant-numeric: tabular-nums;
}

.spread-delta b {
  color: #ffffff;
  font-size: 1rem;
  line-height: 1;
}

.spread-delta small {
  color: rgba(255, 255, 255, 0.42);
  font-size: 0.72rem;
  line-height: 1;
  white-space: nowrap;
}

.spread-prices {
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.24rem;
  font-family: var(--mono);
  font-variant-numeric: tabular-nums;
}

.spread-prices b,
.spread-prices small {
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.spread-prices b {
  color: rgba(255, 255, 255, 0.96);
  font-size: 1.02rem;
  font-weight: 800;
  line-height: 1;
}

.spread-prices small {
  width: 100%;
  padding-top: 0.24rem;
  border-top: 1px solid rgba(255, 255, 255, 0.12);
  color: rgba(255, 255, 255, 0.68);
  font-size: 0.92rem;
  line-height: 1;
}

.cex-table {
  display: flex;
  flex-direction: column;
}

.cex-table .head,
.cex-table .cex-tier-row,
.cex-table .cex-row {
  flex: 0 0 auto;
}

.cex-table .cex-pager {
  margin-top: auto;
}

.cex-table .cex-tier-row {
  min-height: 1.35rem;
  grid-template-columns: 1fr !important;
  padding: 0 1rem;
  border-bottom-color: rgba(255, 255, 255, 0.035);
}

.cex-tier-row span:first-child {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: rgba(255, 255, 255, 0.54);
  font-size: 0.74rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  line-height: 1;
  text-transform: uppercase;
}

.cex-tier-row span:not(:first-child) {
  display: none;
}

.cex-row {
  position: relative;
}

.cex-row.cex-tier-gold {
  background: linear-gradient(90deg, rgba(255, 203, 105, 0.12), rgba(255, 203, 105, 0.018) 68%, transparent);
  box-shadow: inset 0.22rem 0 0 rgba(255, 203, 105, 0.62);
}

.cex-row.cex-tier-epic {
  background: linear-gradient(90deg, rgba(171, 116, 255, 0.13), rgba(171, 116, 255, 0.018) 68%, transparent);
  box-shadow: inset 0.22rem 0 0 rgba(171, 116, 255, 0.58);
}

.cex-row.cex-tier-blue {
  background: linear-gradient(90deg, rgba(0, 229, 255, 0.115), rgba(0, 229, 255, 0.018) 68%, transparent);
  box-shadow: inset 0.22rem 0 0 rgba(0, 229, 255, 0.55);
}

.cex-row.cex-tier-gray {
  background: rgba(255, 255, 255, 0.012);
}

.cex-tier-row.cex-tier-gold span:first-child { color: rgba(255, 220, 142, 0.92); }
.cex-tier-row.cex-tier-epic span:first-child { color: rgba(218, 190, 255, 0.9); }
.cex-tier-row.cex-tier-blue span:first-child { color: rgba(183, 247, 255, 0.9); }

.bridge-table .table-row {
  grid-template-columns: minmax(12rem, 1.2fr) minmax(8rem, 0.8fr);
}

.bridge-table .table-row:not(.head) {
  min-height: 3.64rem;
}

.bridge-table {
  display: flex;
  flex-direction: column;
}

.bridge-table .head {
  flex: 0 0 auto;
}

.bridge-scroll {
  display: flex;
  flex-direction: column;
}

.bridge-single {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  gap: 0.48rem;
  padding: 0.58rem 0.74rem 0.62rem;
  overflow: hidden;
  background:
    linear-gradient(135deg, rgba(0, 229, 255, 0.078), rgba(255, 255, 255, 0.012) 42%, rgba(138, 242, 255, 0.035)),
    rgba(255, 255, 255, 0.012);
}

.bridge-single-top {
  min-height: 2.2rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.7rem;
  padding-bottom: 0.5rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.07);
}

.bridge-single-top > span {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 0.06rem;
}

.bridge-single-top small {
  color: rgba(0, 229, 255, 0.78);
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.075em;
  line-height: 1;
  text-transform: uppercase;
}

.bridge-single-name {
  min-width: 0;
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: #ffffff;
  font-size: 1.22rem;
  font-weight: 800;
  line-height: 1.1;
}

.bridge-single-name .bridge-link {
  color: inherit;
  font-size: inherit;
  font-weight: inherit;
  line-height: inherit;
}

.bridge-single-name .bridge-link:hover,
.bridge-single-name .bridge-link:focus-visible {
  color: #ffffff;
}

.bridge-single-top em {
  flex: none;
  padding: 0.34rem 0.5rem;
  border: 1px solid rgba(0, 229, 255, 0.16);
  border-radius: 999px;
  background: rgba(0, 229, 255, 0.06);
  color: rgba(221, 255, 255, 0.86);
  font-family: var(--mono);
  font-size: 0.74rem;
  font-style: normal;
  line-height: 1.2;
}

.bridge-network-grid {
  flex: 1;
  min-height: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-content: start;
  gap: 0.42rem 0.48rem;
  padding-right: 0.12rem;
  overflow-x: hidden;
  overflow-y: auto;
  scrollbar-gutter: stable;
}

.bridge-network-chip {
  min-width: 0;
  min-height: 2.12rem;
  display: inline-flex;
  align-items: center;
  gap: 0.42rem;
  padding: 0.28rem 0.56rem;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.04);
}

.bridge-network-chip .chain-icon {
  flex: none;
  width: 1.38rem;
  height: 1.38rem;
}

.bridge-network-chip .chain-icon img {
  width: 100%;
  height: 100%;
}

.bridge-network-chip b {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: rgba(238, 252, 255, 0.92);
  font-size: 1rem;
  font-weight: 780;
  line-height: 1;
}

.bridge-network-chip.is-hub {
  border-color: rgba(0, 229, 255, 0.28);
  background: rgba(0, 229, 255, 0.12);
  box-shadow: inset 0 0 0 1px rgba(0, 229, 255, 0.05);
}

.bridge-network-chip small {
  flex: none;
  padding: 0.1rem 0.24rem;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.1);
  color: rgba(255, 255, 255, 0.72);
  font-size: 0.58rem;
  font-weight: 800;
  letter-spacing: 0.04em;
  line-height: 1;
  text-transform: uppercase;
}

.lending-table {
  display: flex;
  flex-direction: column;
}

.lending-table .head,
.lending-table .lending-row,
.lending-table .lending-pager {
  flex: 0 0 auto;
}

.lending-table .lending-pager {
  margin-top: auto;
}

.lending-table .table-row {
  grid-template-columns: minmax(8.6rem, 1fr) minmax(7.4rem, 0.82fr) minmax(8.2rem, 0.9fr) minmax(8.6rem, 0.86fr);
  gap: 0.52rem;
}

.lending-row {
  min-height: 3.55rem;
  background: rgba(255, 255, 255, 0.014);
}

.lending-table .empty-state {
  min-height: 4.6rem;
  margin: 0.55rem 1rem;
}

.lending-protocol,
.lending-role,
.lending-metrics {
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.18rem;
}

.lending-protocol b,
.lending-link {
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: rgba(238, 252, 255, 0.94);
  font-size: 1.02rem;
  font-weight: 760;
  line-height: 1.05;
  text-decoration: none;
}

.lending-link:hover,
.lending-link:focus-visible {
  color: #ffffff;
  outline: none;
  text-decoration: none;
}

.lending-protocol small,
.lending-role small,
.lending-metrics small {
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: rgba(255, 255, 255, 0.44);
  font-family: var(--mono);
  font-size: 0.78rem;
  line-height: 1;
}

.lending-role .tag {
  min-height: 1.72rem;
  max-width: 100%;
  justify-content: flex-start;
  font-size: 0.74rem;
}

.lending-metrics {
  font-family: var(--mono);
  font-variant-numeric: tabular-nums;
}

.lending-metrics b {
  color: #ffffff;
  font-size: 1.16rem;
  font-weight: 780;
  line-height: 1;
}

.oracle-table .table-row {
  grid-template-columns: minmax(7rem, 1fr) 8.2rem 7rem 5.4rem;
}

.wrapper-table .table-row {
  grid-template-columns: 7.4rem minmax(7rem, 1fr) 5.2rem;
}

.cell-main {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: #ffffff;
  font-weight: 600;
}

.chain-cell {
  min-width: 0;
  display: inline-flex;
  align-items: center;
  gap: 0.58rem;
}

.chain-cell .chain-icon {
  flex: none;
  width: 1.92rem;
  height: 1.92rem;
}

.chain-cell .chain-icon img {
  width: 1.72rem;
  height: 1.72rem;
}

.chain-cell .chain-fallback {
  border: 1px solid rgba(0, 229, 255, 0.16);
  background: rgba(0, 229, 255, 0.075);
  color: rgba(229, 252, 255, 0.9);
  font-family: var(--mono);
  font-size: 0.72rem;
  font-weight: 600;
}

.chain-cell b {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: rgba(255, 255, 255, 0.9);
  font-size: 1.02rem;
  font-weight: 600;
}

.mono,
.num {
  font-family: var(--mono);
  font-variant-numeric: tabular-nums;
}

.price-strong {
  color: #ffffff;
  font-size: 1.13rem;
  font-weight: 600;
}

.dex-actions {
  min-width: 0;
  display: inline-flex;
  align-items: center;
  gap: 0.42rem;
}

.dex-actions i {
  color: rgba(255, 255, 255, 0.34);
  font-style: normal;
}

.copy-token-btn,
.okx-dex-btn,
.ds-dex-btn,
.gt-dex-btn {
  min-width: 0;
  min-height: 2.1rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 0.64rem;
  font-family: var(--mono);
  font-size: 0.92rem;
  line-height: 1;
  text-decoration: none;
  transition: 0.16s ease;
}

.copy-token-btn {
  flex: 1 1 auto;
  padding: 0.18rem 0.56rem;
  border: 1px solid rgba(255, 255, 255, 0.085);
  background: rgba(255, 255, 255, 0.04);
  color: rgba(255, 255, 255, 0.82);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.okx-dex-btn,
.ds-dex-btn,
.gt-dex-btn {
  flex: none;
  padding: 0.18rem 0.56rem;
  border: 1px solid rgba(0, 229, 255, 0.22);
  background: rgba(0, 229, 255, 0.06);
  color: rgba(229, 252, 255, 0.9);
  font-family: var(--font);
  font-weight: 600;
}

.gt-dex-btn {
  border-color: rgba(123, 255, 0, 0.2);
  background: rgba(123, 255, 0, 0.055);
  color: rgba(224, 255, 195, 0.9);
}

.ds-dex-btn {
  border-color: rgba(255, 203, 105, 0.2);
  background: rgba(255, 203, 105, 0.06);
  color: rgba(255, 231, 184, 0.92);
}

.copy-token-btn:hover,
.copy-token-btn:focus-visible,
.okx-dex-btn:hover,
.okx-dex-btn:focus-visible,
.ds-dex-btn:hover,
.ds-dex-btn:focus-visible,
.gt-dex-btn:hover,
.gt-dex-btn:focus-visible {
  outline: none;
  border-color: rgba(0, 229, 255, 0.38);
  background: rgba(0, 229, 255, 0.09);
  color: #ffffff;
}

.copy-token-btn:active,
.okx-dex-btn:active,
.ds-dex-btn:active,
.gt-dex-btn:active {
  transform: translateY(1px);
}

.source-age,
.venue-cell,
.price-cell,
.route-cell {
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 0.48rem;
}

.source-age b,
.venue-cell b,
.venue-link,
.price-cell b,
.route-cell b {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: rgba(255, 255, 255, 0.88);
  font-weight: 600;
}

.source-age small,
.venue-cell small,
.price-cell small {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: rgba(255, 255, 255, 0.46);
  font-size: 0.9rem;
}

.source-age {
  justify-content: space-between;
}

.venue-cell {
  flex-direction: row;
  align-items: center;
  gap: 0.55rem;
}

.venue-copy {
  min-width: 0;
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.14rem;
}

.venue-copy b,
.venue-link {
  max-width: 100%;
  font-size: 1.07rem;
  letter-spacing: 0;
}

.venue-link {
  display: block;
  color: inherit;
  text-decoration: none;
}

.venue-link:hover,
.venue-link:focus-visible {
  color: #ffffff;
  outline: none;
  text-decoration: none;
}

.bridge-link {
  display: block;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: rgba(232, 249, 252, 0.84);
  font-weight: 600;
  text-decoration: none;
}

.bridge-link:hover,
.bridge-link:focus-visible {
  color: #ffffff;
  outline: none;
  text-decoration: none;
}

.cex-tier-gold .venue-copy b,
.cex-tier-gold .venue-link {
  color: #ffe3a0;
}

.cex-tier-epic .venue-copy b,
.cex-tier-epic .venue-link {
  color: #ddc1ff;
}

.cex-tier-blue .venue-copy b,
.cex-tier-blue .venue-link {
  color: #b8f8ff;
}

.cex-tier-gray .venue-copy b,
.cex-tier-gray .venue-link {
  color: rgba(255, 255, 255, 0.75);
}

.venue-copy small {
  max-width: 100%;
  font-family: var(--mono);
}

.cex-icon {
  flex: none;
  width: 2.12rem;
  height: 2.12rem;
  display: inline-grid;
  place-items: center;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.06);
  overflow: hidden;
}

.cex-icon img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: contain;
  border-radius: 50%;
}

.cex-fallback {
  border: 1px solid rgba(255, 255, 255, 0.1);
  color: rgba(255, 255, 255, 0.76);
  font-family: var(--mono);
  font-size: 0.68rem;
  font-weight: 600;
}

.cex-tier-badge {
  flex: none;
  min-width: 3.6rem;
  min-height: 1.45rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.16rem 0.42rem;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  background: rgba(255, 255, 255, 0.045);
  color: rgba(255, 255, 255, 0.6);
  font-size: 0.72rem;
  font-style: normal;
  font-weight: 600;
  line-height: 1;
  text-transform: uppercase;
}

.cex-tier-gold .cex-tier-badge {
  border-color: rgba(255, 203, 105, 0.28);
  background: rgba(255, 203, 105, 0.1);
  color: #ffe3a0;
}

.cex-tier-epic .cex-tier-badge {
  border-color: rgba(171, 116, 255, 0.28);
  background: rgba(171, 116, 255, 0.11);
  color: #ddc1ff;
}

.cex-tier-blue .cex-tier-badge {
  border-color: rgba(0, 229, 255, 0.26);
  background: rgba(0, 229, 255, 0.09);
  color: #b8f8ff;
}

.cex-tier-gray .cex-tier-badge {
  display: none;
}

.price-cell {
  flex-direction: column;
  align-items: flex-start;
  gap: 0.16rem;
  font-family: var(--mono);
  font-variant-numeric: tabular-nums;
}

.price-cell b {
  color: #ffffff;
  font-size: 1.13rem;
}

.route-cell i {
  flex: none;
  color: rgba(0, 229, 255, 0.72);
  font-size: 1rem;
  font-style: normal;
}

.route-net {
  min-width: 0;
  display: inline-flex;
  align-items: center;
  gap: 0.48rem;
}

.route-net .chain-icon {
  flex: none;
  width: 1.68rem;
  height: 1.68rem;
}

.route-net .chain-icon img {
  width: 100%;
  height: 100%;
}

.route-net b {
  color: rgba(248, 254, 255, 0.98);
  font-size: 1.24rem;
  font-weight: 820;
  line-height: 1;
}

.muted {
  color: var(--muted);
}

.green {
  color: var(--green);
}

.red {
  color: #ff8b8b;
}

.amber {
  color: var(--amber);
}

.price-cell small.green {
  color: var(--green);
}

.price-cell small.red {
  color: #ff8b8b;
}

.source-age small.amber {
  color: var(--amber);
}

.status-pill,
.tag {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 1.9rem;
  padding: 0.2rem 0.55rem;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  background: rgba(255, 255, 255, 0.035);
  font-size: 0.86rem;
  line-height: 1;
  white-space: nowrap;
}

.status-pill.open,
.tag.ok {
  color: #caffad;
  border-color: rgba(123, 255, 0, 0.2);
  background: rgba(123, 255, 0, 0.08);
}

.tag.warn {
  color: #ffe1a8;
  border-color: rgba(255, 203, 105, 0.22);
  background: rgba(255, 203, 105, 0.07);
}

.status-pill.closed,
.tag.risk {
  color: #ffb2b2;
  border-color: rgba(255, 70, 70, 0.2);
  background: rgba(255, 70, 70, 0.08);
}

.status-pill.unknown {
  color: rgba(255, 255, 255, 0.48);
}

.network-chips {
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 0.35rem;
  overflow: hidden;
  white-space: nowrap;
}

.network-chip {
  flex: 0 0 auto;
  max-width: 7.4rem;
  min-height: 2rem;
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.24rem 0.48rem;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 0.62rem;
  background: rgba(255, 255, 255, 0.035);
  color: rgba(255, 255, 255, 0.68);
  font-style: normal;
  line-height: 1;
}

.network-chip b {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-weight: 600;
}

.network-chip span {
  flex: none;
  color: rgba(255, 255, 255, 0.46);
  font-family: var(--mono);
  font-size: 0.82rem;
}

.network-chip.ok {
  color: #d6ffc4;
  border-color: rgba(123, 255, 0, 0.2);
  background: rgba(123, 255, 0, 0.075);
}

.network-chip.warn {
  color: #ffe1a8;
  border-color: rgba(255, 203, 105, 0.22);
  background: rgba(255, 203, 105, 0.07);
}

.network-chip.risk {
  color: #ffb6b6;
  border-color: rgba(255, 70, 70, 0.2);
  background: rgba(255, 70, 70, 0.07);
}

.network-chip.unknown,
.network-chip.more,
.network-empty {
  color: rgba(255, 255, 255, 0.46);
}

.network-empty {
  font-size: 0.94rem;
}

.kv-grid {
  min-height: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0;
  padding: 0.2rem 0;
}

.kv-item {
  min-width: 0;
  min-height: 2.72rem;
  padding: 0.43rem 1rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.052);
}

.kv-item:nth-child(odd) {
  border-right: 1px solid rgba(255, 255, 255, 0.052);
}

.kv-item span {
  display: block;
  color: rgba(255, 255, 255, 0.42);
  font-size: 0.82rem;
  line-height: 1.1;
}

.kv-item strong,
.kv-item a,
.kv-item button {
  max-width: 100%;
  display: inline-flex;
  margin-top: 0.25rem;
  padding: 0;
  border: 0;
  background: none;
  color: rgba(255, 255, 255, 0.86);
  font-size: 0.98rem;
  text-decoration: none;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.kv-item a:hover,
.kv-item button:hover {
  color: var(--main);
}

.kv-social {
  grid-column: 1 / -1;
  min-height: 5.1rem;
  border-right: 0 !important;
  padding-bottom: 0.62rem;
}

.panel-matches .kv-grid {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  min-height: 0;
  padding: 0;
  overflow: hidden;
}

.match-grid {
  min-width: 0;
  height: 100%;
  display: flex;
  flex-direction: column;
  gap: 0.48rem;
  padding: 0.68rem 0.82rem;
  overflow: hidden;
}

.match-grid.is-paged {
  gap: 0.5rem;
}

.match-section {
  min-width: 0;
  min-height: 0;
  display: grid;
  grid-template-columns: 7.1rem minmax(0, 1fr);
  align-items: start;
  gap: 0.58rem;
}

.match-label {
  min-height: 2.16rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(255, 255, 255, 0.075);
  border-radius: 0.68rem;
  background: rgba(255, 255, 255, 0.035);
  color: rgba(255, 255, 255, 0.58);
  font-size: 0.78rem;
  font-weight: 760;
  line-height: 1;
  text-transform: uppercase;
}

.match-wrapped .match-label {
  border-color: rgba(0, 229, 255, 0.18);
  background: rgba(0, 229, 255, 0.065);
  color: rgba(179, 248, 255, 0.84);
}

.match-similar .match-label {
  border-color: rgba(255, 203, 105, 0.18);
  background: rgba(255, 203, 105, 0.065);
  color: rgba(255, 222, 157, 0.9);
}

.match-same .match-label {
  border-color: rgba(123, 255, 0, 0.16);
  background: rgba(123, 255, 0, 0.055);
  color: rgba(208, 255, 159, 0.86);
}

.match-list {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 0.34rem;
}

.match-list-paged {
  flex: 1 1 auto;
  min-height: 0;
  overflow: hidden;
}

.match-item {
  min-width: 0;
  min-height: 2.42rem;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 0.6rem;
  padding: 0.34rem 0.58rem;
  border: 1px solid rgba(255, 255, 255, 0.075);
  border-radius: 0.72rem;
  background: rgba(255, 255, 255, 0.03);
  color: rgba(255, 255, 255, 0.9);
  text-decoration: none;
}

.match-item:hover,
.match-item:focus-visible {
  outline: none;
  border-color: rgba(0, 229, 255, 0.28);
  background: rgba(0, 229, 255, 0.06);
  color: #ffffff;
  text-decoration: none;
}

.match-main {
  min-width: 0;
  display: inline-flex;
  align-items: baseline;
  gap: 0.36rem;
}

.match-main b {
  flex: none;
  color: #ffffff;
  font-size: 0.98rem;
  font-weight: 780;
  line-height: 1;
}

.match-main small {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: rgba(255, 255, 255, 0.48);
  font-size: 0.82rem;
  line-height: 1;
}

.match-tags {
  min-width: 0;
  display: inline-flex;
  align-items: center;
  gap: 0.28rem;
}

.match-tags i,
.match-more {
  max-width: 8.4rem;
  min-height: 1.52rem;
  display: inline-flex;
  align-items: center;
  padding: 0.18rem 0.42rem;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.055);
  color: rgba(255, 255, 255, 0.58);
  font-family: var(--mono);
  font-size: 0.68rem;
  font-style: normal;
  line-height: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.match-kind-chip.is-wrapped {
  background: rgba(0, 229, 255, 0.095);
  color: rgba(179, 248, 255, 0.92);
}

.match-kind-chip.is-similar {
  background: rgba(255, 203, 105, 0.095);
  color: rgba(255, 224, 162, 0.92);
}

.match-kind-chip.is-same {
  background: rgba(123, 255, 0, 0.085);
  color: rgba(214, 255, 171, 0.92);
}

.match-more {
  align-self: flex-start;
  margin-left: 0.1rem;
  color: rgba(0, 229, 255, 0.74);
}

.match-pager {
  flex: 0 0 auto;
  margin-top: auto;
}

.segmented {
  display: inline-flex;
  padding: 0.2rem;
  border-radius: 0.8rem;
  background: rgba(255, 255, 255, 0.035);
  border: 1px solid rgba(255, 255, 255, 0.07);
}

.segmented button {
  height: 2.1rem;
  min-width: 4rem;
  border-radius: 0.62rem;
  border: 0;
  background: transparent;
  color: rgba(255, 255, 255, 0.54);
  font-size: 0.9rem;
}

.segmented button.is-active {
  color: #e5ffff;
  background: rgba(0, 229, 255, 0.12);
}

.empty-state,
.error-state {
  margin: 1rem;
  min-height: 7.4rem;
  display: grid;
  place-content: center;
  border: 1px dashed rgba(255, 255, 255, 0.12);
  border-radius: 0.9rem;
  color: rgba(255, 255, 255, 0.44);
  text-align: center;
  font-size: 1.05rem;
}

.error-state {
  color: #ffb2b2;
  border-color: rgba(255, 70, 70, 0.22);
}

.skeleton-row {
  height: 3.15rem;
  margin: 0 1rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.052);
  background: linear-gradient(90deg, rgba(255, 255, 255, 0.03), rgba(255, 255, 255, 0.07), rgba(255, 255, 255, 0.03));
  background-size: 220% 100%;
  animation: skeleton 1.1s ease-in-out infinite;
}

@keyframes skeleton {
  from { background-position: 100% 0; }
  to { background-position: -100% 0; }
}

.drawer {
  position: fixed;
  top: 0;
  right: 0;
  width: min(68rem, 100vw);
  height: 100dvh;
  display: flex;
  flex-direction: column;
  background: #0d101a;
  border-left: 1px solid rgba(255, 255, 255, 0.11);
  transform: translateX(100%);
  transition: transform 0.22s ease;
  z-index: 30;
}

.drawer.is-open {
  transform: translateX(0);
}

.drawer-backdrop {
  position: fixed;
  inset: 0;
  display: none;
  background: rgba(0, 0, 0, 0.48);
  z-index: 20;
}

.drawer-backdrop.is-open {
  display: block;
}

.drawer-head {
  min-height: 5.6rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 1.2rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.drawer-head h2 {
  margin: 0;
  font-size: 1.45rem;
}

.drawer-head p {
  margin: 0.3rem 0 0;
  color: rgba(255, 255, 255, 0.48);
  font-size: 1rem;
}

.drawer-body {
  min-height: 0;
  overflow: auto;
  padding: 1rem;
}

.drawer-row {
  display: grid;
  grid-template-columns: 13rem minmax(0, 1fr);
  gap: 1rem;
  padding: 0.9rem 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.07);
  font-size: 1.05rem;
}

.drawer-row span:first-child {
  color: rgba(255, 255, 255, 0.45);
}

.drawer-row span:last-child {
  min-width: 0;
  overflow-wrap: anywhere;
  color: rgba(255, 255, 255, 0.86);
}

@media (max-width: 1200px) {
  body {
    overflow: auto;
  }

  .checkup-shell {
    height: auto;
    min-height: 100dvh;
    overflow: visible;
    grid-template-rows: auto auto auto auto;
  }

  .query-row {
    grid-template-columns: 1fr 15rem;
  }

  .kpi-strip {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .checkup-main {
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 26rem 35rem 34rem;
  }

  .panel-dex { grid-column: 1; grid-row: 1; }
  .panel-cex { grid-column: 2; grid-row: 1 / span 2; }
  .panel-spreads { grid-column: 1; grid-row: 2; }
  .right-stack { grid-column: 1 / span 2; grid-row: 3; grid-template-columns: repeat(3, minmax(0, 1fr)); grid-template-rows: 1fr; }
}

@media (max-width: 780px) {
  .topbar,
  .source-strip {
    flex-wrap: wrap;
    min-height: auto;
  }

  .checkup-shell {
    padding: 0.8rem;
  }

  .query-row,
  .kpi-strip,
  .checkup-main,
  .right-stack {
    display: flex;
    flex-direction: column;
  }

  .panel {
    min-height: 26rem;
  }
}

/* ===================== cloudbit-bridges shell overrides ===================== */
/* лишние панели держим в DOM для совместимости рендера, но прячем */
.checkup-main .panel-spreads,
.checkup-main .panel-cex,
.checkup-main .right-stack { display: none !important; }

/* 2 колонки: узкий DEX/Networks (сайдбар) + большой конструктор маршрутов */
.checkup-main {
  grid-template-columns: minmax(30rem, 0.9fr) minmax(40rem, 2fr) !important;
  grid-template-rows: minmax(0, 1fr) !important;
}
.checkup-main .panel-dex { grid-column: 1 !important; grid-row: 1 !important; }
/* компактные столбцы DEX-таблицы под узкую колонку */
.panel-dex .dex-table .table-row {
  grid-template-columns: minmax(5.4rem,1.05fr) minmax(5rem,0.95fr) minmax(4.6rem,0.8fr) minmax(5.6rem,0.85fr) !important;
  gap: 6px !important;
}
.panel-dex .dex-actions { gap: 4px !important; flex-wrap: wrap; }
.panel-dex .copy-token-btn { max-width: 100%; overflow: hidden; text-overflow: ellipsis; }
.checkup-main .panel-routes {
  grid-column: 2 !important; grid-row: 1 !important;
  display: flex; flex-direction: column; min-height: 0;
}

/* шапка DEX с кнопкой + */
.panel-dex .panel-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.add-route-btn {
  flex: 0 0 auto; width: 30px; height: 30px; border-radius: 9px;
  border: 1px solid rgba(0,229,255,0.4);
  background: rgba(0,229,255,0.12); color: var(--main, #00e5ff);
  font-size: 20px; line-height: 1; font-weight: 600; cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
  transition: background .15s ease, transform .12s ease, border-color .15s ease;
}
.add-route-btn:hover { background: rgba(0,229,255,0.2); border-color: rgba(0,229,255,0.6); }
.add-route-btn:active { transform: scale(0.94); }

/* тело конструктора */
.routes-body {
  display: flex; flex-direction: column; gap: 10px;
  padding: 14px 16px 16px; overflow-y: auto; min-height: 0; flex: 1;
}
.routes-body:empty::after {
  content: "No routes yet — press + in DEX / Networks";
  color: var(--muted, rgba(255,255,255,0.5)); font-size: 12.5px;
  display: block; padding: 18px 4px; text-align: center;
}
.route-builder {
  display: grid;
  grid-template-columns: minmax(0,1fr) 2.2rem minmax(0,1fr) 1.7rem;
  align-items: center; gap: 8px;
  padding: 12px; border: 1px solid var(--border, rgba(255,255,255,0.09));
  border-radius: 12px; background: var(--panel-strong, rgba(255,255,255,0.045));
}
.rb-side {
  display: flex; align-items: center; gap: 8px; min-width: 0;
  border: 1px solid var(--border, rgba(255,255,255,0.09)); border-radius: 9px;
  padding: 6px 8px; background: rgba(0,0,0,0.25);
}
.rb-side .rb-icon { flex: 0 0 auto; display: inline-flex; }
.rb-side .chain-icon { width: 20px; height: 20px; }
.rb-side select {
  flex: 1; min-width: 0; background: transparent; border: 0; color: var(--text, #fff);
  font-family: var(--font, inherit); font-size: 13px; font-weight: 600;
  outline: none; cursor: pointer; appearance: none;
}
.rb-side select option { background: #0c0d13; color: #fff; }
.rb-swap, .rb-remove {
  border: 1px solid var(--border, rgba(255,255,255,0.09)); cursor: pointer;
  color: var(--muted, rgba(255,255,255,0.6)); background: rgba(255,255,255,0.03);
  border-radius: 8px; display: inline-flex; align-items: center; justify-content: center;
  transition: color .15s ease, border-color .15s ease, background .15s ease;
}
.rb-swap { width: 2.2rem; height: 2.2rem; font-size: 17px; }
.rb-remove { width: 1.7rem; height: 1.7rem; font-size: 16px; }
.rb-swap:hover { color: var(--main, #00e5ff); border-color: rgba(0,229,255,0.5); }
.rb-remove:hover { color: var(--red, #ff4646); border-color: rgba(255,70,70,0.5); }
.rb-via {
  grid-column: 1 / -1; text-align: center; font-size: 12.5px;
  padding-top: 2px; color: var(--text, #fff);
}
.rb-via small { color: var(--muted, rgba(255,255,255,0.55)); margin-right: 4px; }
.rb-via b { color: var(--main, #00e5ff); }
.rb-via a { color: var(--main, #00e5ff); text-decoration: none; border-bottom: 1px dashed rgba(0,229,255,0.5); }
.rb-via a:hover { border-bottom-style: solid; }
.rb-via-empty, .rb-via-empty small { color: var(--muted, rgba(255,255,255,0.4)); }

/* ===================== DEX/Networks ряды + конструктор моста (v6) ===================== */
.dex-net-head, .dex-net-row {
  display: grid;
  grid-template-columns: minmax(0,1fr) 6.6rem 7rem 1.9rem;
  column-gap: 16px; align-items: center;
}
.dex-net-price, .dex-net-liq { white-space: nowrap; }
.dex-net-head span:nth-child(3), .dex-net-row .dex-net-liq { padding-right: 6px; }
.dex-net-head {
  padding: 7px 16px 8px; font-size: 10.5px; text-transform: uppercase; letter-spacing: .05em;
  color: var(--muted, rgba(255,255,255,0.5));
  border-bottom: 1px solid var(--border, rgba(255,255,255,0.09));
}
.dex-net-head span:nth-child(2), .dex-net-row .dex-net-price { text-align: right; }
.dex-net-head span:nth-child(3), .dex-net-row .dex-net-liq { text-align: right; }
.dex-net-list { display: flex; flex-direction: column; }
.dex-net-row {
  padding: 9px 16px; border-bottom: 1px solid rgba(255,255,255,0.045);
  transition: background .12s ease;
}
.dex-net-row:hover { background: rgba(255,255,255,0.02); }
.dex-net-row.is-selected { background: rgba(0,229,255,0.07); }
.dex-net-row .chain-cell { display: flex; align-items: center; gap: 8px; min-width: 0; }
.dex-net-row .chain-cell b { font-weight: 600; font-size: 13.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dex-net-row .chain-icon { width: 22px; height: 22px; flex: 0 0 auto; }
.dex-net-price { font-family: var(--mono, monospace); font-weight: 600; font-size: 13px; }
.dex-net-liq { color: var(--muted, rgba(255,255,255,0.55)); font-size: 12.5px; white-space: nowrap; }
.dex-add {
  width: 1.85rem; height: 1.85rem; border-radius: 7px;
  border: 1px solid rgba(0,229,255,0.35); background: rgba(0,229,255,0.1);
  color: var(--main, #00e5ff); font-size: 15px; font-weight: 700; line-height: 1; cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center; transition: all .13s ease;
}
.dex-add:hover { background: rgba(0,229,255,0.2); border-color: rgba(0,229,255,0.6); }
.dex-add.is-on { background: var(--main, #00e5ff); color: #04161a; border-color: var(--main, #00e5ff); }

/* большой конструктор моста справа */
.rc-empty { text-align: center; color: var(--muted, rgba(255,255,255,0.5)); font-size: 13.5px; padding: 40px 18px; }
.rc-empty b { color: var(--text, #fff); }
.route-card {
  display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 20px;
  position: relative; margin: 12px; padding: 30px 24px;
  border: 1px solid var(--border, rgba(255,255,255,0.09)); border-radius: 16px;
  background: var(--panel-strong, rgba(255,255,255,0.045));
}
.rc-side { display: flex; flex-direction: column; align-items: center; gap: 11px; text-align: center; min-width: 0; }
.rc-side .rc-icon .chain-icon { width: 48px; height: 48px; }
.rc-side b { font-size: 16px; font-weight: 600; max-width: 100%; overflow: hidden; text-overflow: ellipsis; }
.rc-side-empty { opacity: .55; }
.rc-icon-empty { width: 48px; height: 48px; border-radius: 50%; border: 1px dashed var(--border, rgba(255,255,255,0.2)); display: inline-flex; align-items: center; justify-content: center; color: var(--muted, rgba(255,255,255,0.4)); font-size: 22px; }
.rc-mid { display: flex; flex-direction: column; align-items: center; gap: 12px; }
.rc-swap {
  width: 2.5rem; height: 2.5rem; border-radius: 50%;
  border: 1px solid var(--border, rgba(255,255,255,0.09)); background: rgba(255,255,255,0.04);
  color: var(--muted, rgba(255,255,255,0.6)); font-size: 18px; cursor: pointer; transition: all .13s ease;
}
.rc-swap:hover { color: var(--main, #00e5ff); border-color: rgba(0,229,255,0.5); transform: rotate(180deg); }
.rc-arrow { font-size: 24px; color: var(--muted, rgba(255,255,255,0.5)); }
.rc-via { font-size: 14px; text-align: center; max-width: 13rem; line-height: 1.4; }
.rc-via small { color: var(--muted, rgba(255,255,255,0.55)); margin-right: 4px; }
.rc-via b { color: var(--main, #00e5ff); }
.rc-via a { color: var(--main, #00e5ff); text-decoration: none; border-bottom: 1px dashed rgba(0,229,255,0.5); }
.rc-via a:hover { border-bottom-style: solid; }
.rc-via-empty, .rc-via-empty small { color: var(--muted, rgba(255,255,255,0.4)); }
.rc-reset {
  position: absolute; top: 12px; right: 12px; width: 1.7rem; height: 1.7rem;
  display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid var(--border, rgba(255,255,255,0.09)); background: rgba(255,255,255,0.03);
  color: var(--muted, rgba(255,255,255,0.55)); border-radius: 8px;
  font-size: 16px; line-height: 1; cursor: pointer; padding: 0;
  transition: color .13s ease, border-color .13s ease, background .13s ease;
}
.rc-reset:hover { color: var(--red, #ff4646); border-color: rgba(255,70,70,0.5); background: rgba(255,70,70,0.08); }

/* KPI: Token · DEX Price · Liquidity — 3 колонки */
.kpi-strip { grid-template-columns: 1.18fr 1fr 1fr !important; }

/* ===================== Connect Wallet + Stargate-style мост (v12) ===================== */
.top-actions { display: flex; align-items: center; gap: 10px; }
.wallet-btn {
  height: 34px; padding: 0 16px; border-radius: 999px;
  border: 1px solid rgba(0,229,255,0.4); background: rgba(0,229,255,0.1);
  color: var(--main, #00e5ff); font-family: var(--font, inherit); font-weight: 600; font-size: 13px;
  cursor: pointer; white-space: nowrap; transition: all .13s ease;
}
.wallet-btn:hover { background: rgba(0,229,255,0.18); border-color: rgba(0,229,255,0.6); }
.wallet-btn.is-on { font-family: var(--mono, monospace); }

/* модалка кошельков */
.wallet-modal { position: fixed; inset: 0; z-index: 200; display: flex; align-items: center; justify-content: center; }
.wallet-modal[hidden] { display: none; }
.wm-backdrop { position: absolute; inset: 0; background: rgba(2,5,10,0.66); backdrop-filter: blur(3px); }
.wm-card {
  position: relative; width: min(92vw, 380px);
  border: 1px solid var(--border, rgba(255,255,255,0.1)); border-radius: 16px;
  background: linear-gradient(180deg, rgba(13,20,30,0.99), rgba(8,13,21,0.99));
  box-shadow: 0 24px 60px rgba(0,0,0,0.5); padding: 8px;
}
.wm-head { display: flex; align-items: center; justify-content: space-between; padding: 12px 12px 10px; }
.wm-head b { font-size: 15px; }
.wm-close { width: 28px; height: 28px; display: inline-flex; align-items: center; justify-content: center; border: 1px solid var(--border, rgba(255,255,255,0.1)); background: transparent; color: var(--muted, rgba(255,255,255,0.6)); border-radius: 8px; cursor: pointer; }
.wm-close:hover { color: #fff; }
.wm-list { display: flex; flex-direction: column; gap: 6px; padding: 4px; }
.wm-item {
  display: grid; grid-template-columns: 1fr auto; grid-template-rows: auto auto; align-items: center;
  gap: 1px 10px; padding: 11px 14px; text-align: left; cursor: pointer;
  border: 1px solid var(--border, rgba(255,255,255,0.09)); border-radius: 11px;
  background: rgba(255,255,255,0.025); color: var(--text, #fff); transition: all .13s ease;
}
.wm-item:hover { border-color: rgba(0,229,255,0.4); background: rgba(0,229,255,0.06); }
.wm-item.is-connected { border-color: rgba(56,211,159,0.4); background: rgba(56,211,159,0.07); }
.wm-item.is-busy { opacity: .6; pointer-events: none; }
.wm-name { font-weight: 600; font-size: 14px; }
.wm-sub { grid-row: 2; color: var(--muted, rgba(255,255,255,0.5)); font-size: 11.5px; }
.wm-state { grid-row: 1 / span 2; grid-column: 2; font-family: var(--mono, monospace); font-size: 11.5px; color: #7fe9d0; }

/* Stargate-style виджет */
.bw { max-width: 460px; margin: 14px auto; position: relative; padding: 6px; }
.bw-reset {
  position: absolute; top: -2px; right: 2px; width: 30px; height: 30px;
  display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid var(--border, rgba(255,255,255,0.09)); background: rgba(255,255,255,0.03);
  color: var(--muted, rgba(255,255,255,0.55)); border-radius: 9px; cursor: pointer; padding: 0; transition: all .13s ease; z-index: 2;
}
.bw-reset:hover { color: var(--red, #ff4646); border-color: rgba(255,70,70,0.5); }
.bw-box {
  border: 1px solid var(--border, rgba(255,255,255,0.1)); border-radius: 16px;
  background: rgba(255,255,255,0.028); padding: 16px 18px; margin: 6px 0;
}
.bw-top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; }
.bw-cap { color: var(--muted, rgba(255,255,255,0.55)); font-size: 12.5px; }
.bw-net { display: inline-flex; align-items: center; gap: 8px; font-weight: 600; font-size: 14.5px; }
.bw-net .chain-icon { width: 26px; height: 26px; }
.bw-net-empty { color: var(--muted, rgba(255,255,255,0.45)); font-weight: 500; }
.bw-bottom { display: flex; align-items: center; gap: 12px; }
.bw-amount {
  flex: 1; min-width: 0; background: transparent; border: 0; outline: none;
  color: var(--text, #fff); font-family: var(--mono, monospace); font-size: 26px; font-weight: 600; padding: 0;
}
.bw-amount::placeholder { color: rgba(255,255,255,0.25); }
.bw-token { font-weight: 700; font-size: 15px; padding: 6px 12px; border-radius: 10px; background: rgba(255,255,255,0.06); white-space: nowrap; }
.bw-swap {
  display: flex; align-items: center; justify-content: center;
  width: 40px; height: 40px; margin: -16px auto; position: relative; z-index: 3;
  border: 3px solid var(--bg, #0c0d13); border-radius: 12px;
  background: rgba(0,229,255,0.14); color: var(--main, #00e5ff); cursor: pointer; padding: 0; transition: all .15s ease;
}
.bw-swap:hover:not([disabled]) { background: rgba(0,229,255,0.26); }
.bw-swap[disabled] { opacity: .4; cursor: not-allowed; }
.bw-via { text-align: center; font-size: 13px; color: var(--text, #fff); padding: 12px 4px 4px; }
.bw-via small { color: var(--muted, rgba(255,255,255,0.55)); margin-right: 4px; }
.bw-via b { color: var(--main, #00e5ff); }
.bw-via a { color: var(--main, #00e5ff); text-decoration: none; border-bottom: 1px dashed rgba(0,229,255,0.5); }
.bw-via-empty, .bw-via-empty small { color: var(--muted, rgba(255,255,255,0.45)); }
.bw-action {
  width: 100%; margin-top: 10px; height: 52px; border: 0; border-radius: 14px; cursor: pointer;
  background: linear-gradient(135deg, #00e5ff, #38d39f); color: #04141a; font-weight: 700; font-size: 15.5px;
  font-family: var(--font, inherit); transition: filter .13s ease, transform .1s ease;
}
.bw-action:hover:not([disabled]) { filter: brightness(1.08); }
.bw-action:active:not([disabled]) { transform: translateY(1px); }
.bw-action[disabled] { background: rgba(255,255,255,0.08); color: var(--muted, rgba(255,255,255,0.4)); cursor: not-allowed; }

/* крестик сброса — в правый угол шапки Bridge Routes, в стороне от виджета */
.panel-routes .panel-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.routes-clear {
  flex: 0 0 auto; width: 30px; height: 30px; display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid var(--border, rgba(255,255,255,0.09)); background: rgba(255,255,255,0.03);
  color: var(--muted, rgba(255,255,255,0.55)); border-radius: 9px; cursor: pointer; padding: 0; transition: all .13s ease;
}
.routes-clear:hover { color: var(--red, #ff4646); border-color: rgba(255,70,70,0.5); }

/* статус кошелька / баланс / коннект внутри боксов виджета */
.bw-wallet { margin-top: 11px; font-size: 12px; color: var(--muted, rgba(255,255,255,0.55)); min-height: 16px; display: flex; align-items: center; gap: 4px; }
.bw-acct { font-family: var(--mono, monospace); color: var(--text, #fff); }
.bw-bal { color: var(--muted, rgba(255,255,255,0.55)); }
.bw-connect { background: transparent; border: 0; padding: 0; color: var(--main, #00e5ff); font-size: 12px; font-weight: 600; cursor: pointer; font-family: var(--font, inherit); }
.bw-connect:hover { text-decoration: underline; }
.bw-connect.is-busy, .bw-action.is-busy { opacity: .6; pointer-events: none; }

/* плашка выбора кошелька — группы + статус */
.wm-card { max-height: 86vh; display: flex; flex-direction: column; }
.wm-body { overflow-y: auto; padding: 4px; display: flex; flex-direction: column; gap: 12px; }
.wm-group { display: flex; flex-direction: column; gap: 6px; }
.wm-group-head { display: flex; align-items: center; gap: 8px; padding: 4px 10px 2px; font-size: 11px; text-transform: uppercase; letter-spacing: .05em; color: var(--muted, rgba(255,255,255,0.5)); }
.wm-group-head > span:first-child { font-weight: 700; }
.wm-conn { font-family: var(--mono, monospace); text-transform: none; letter-spacing: 0; color: #7fe9d0; margin-left: auto; }
.wm-disc { border: 0; background: transparent; color: var(--red, #ff4646); font-size: 11px; cursor: pointer; text-transform: none; padding: 0; }
.wm-disc:hover { text-decoration: underline; }
.wm-item { display: flex !important; align-items: center; justify-content: space-between; grid-template-columns: none; }
.wm-item .wm-tag { font-size: 11px; color: var(--muted, rgba(255,255,255,0.45)); }
.wm-item.is-detected { border-color: rgba(56,211,159,0.32); background: rgba(56,211,159,0.05); }
.wm-item.is-detected .wm-tag { color: #7fe9d0; }

/* убрать кнопку обновления (стрелки) */
.top-actions #refreshBtn { display: none !important; }

/* баланс + MAX в боксе From */
.bw-sep, .bw-bal-label { color: var(--muted, rgba(255,255,255,0.5)); }
.bw-bal { color: #7fe9d0; font-family: var(--mono, monospace); font-weight: 600; }
.bw-max {
  border: 1px solid rgba(0,229,255,0.4); background: rgba(0,229,255,0.12); color: var(--main, #00e5ff);
  font-size: 10.5px; font-weight: 700; letter-spacing: .03em; padding: 2px 8px; border-radius: 6px; cursor: pointer; margin-left: 5px;
  transition: background .13s ease;
}
.bw-max:hover:not([disabled]) { background: rgba(0,229,255,0.22); }
.bw-max[disabled] { opacity: .4; cursor: default; }