.page-shell {
  max-width: 1520px;
}

.page-shell.page-shell-arbitrage,
.page-shell.page-shell-live,
.page-shell.page-shell-historical {
  max-width: none;
  width: 100%;
  padding-left: 18px;
  padding-right: 18px;
}

.app-shell-nav {
  --accent: #d9a558;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  align-items: center;
  gap: 14px 26px;
  position: sticky;
  top: 0;
  z-index: 80;
  margin-bottom: 16px;
  padding-top: 12px;
  padding-bottom: 12px;
  border: 0;
  border-bottom: 1px solid rgba(200, 154, 107, 0.14);
  border-radius: 0;
  background: rgba(13, 11, 8, 0.92);
  box-shadow: 0 8px 18px rgba(0, 0, 0, 0.18);
  backdrop-filter: blur(14px);
}

.page > .app-shell-nav.card {
  padding: 12px 18px;
  border: 0;
  border-bottom: 1px solid rgba(200, 154, 107, 0.14);
  background: rgba(13, 11, 8, 0.92);
  box-shadow: 0 8px 18px rgba(0, 0, 0, 0.18);
}

.app-shell-brand {
  min-width: 0;
}

.app-shell-eyebrow {
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 4px;
}

.app-shell-title {
  font-size: 24px;
  font-weight: 900;
  line-height: 1.15;
}

.app-shell-subtitle {
  color: var(--muted);
  font-size: 13px;
  margin-top: 6px;
}

.app-shell-links {
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
}

.app-shell-links-main {
  justify-self: center;
  justify-content: center;
  gap: 24px;
}

.app-shell-links-side {
  justify-self: end;
  justify-content: flex-end;
}

.app-shell-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  min-height: auto;
  padding: 0 0 8px;
  border: none;
  background: transparent;
  color: rgba(255,255,255,0.82);
  text-decoration: none;
  font-family: Inter, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-size: clamp(11px, 1.0vw, 13px);
  font-weight: 500;
  line-height: 1.15;
  position: relative;
  white-space: nowrap;
  transition: color 0.15s ease, opacity 0.15s ease, transform 0.15s ease;
}

.app-shell-link-ico {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: clamp(13px, 1.3vw, 17px);
  height: clamp(13px, 1.3vw, 17px);
  flex: 0 0 auto;
  color: rgba(242, 227, 194, 0.86);
  opacity: 0.92;
  transition: color 0.15s ease, opacity 0.15s ease;
}

.app-shell-link-ico svg {
  display: block;
  width: 100%;
  height: 100%;
}

.app-shell-link:hover .app-shell-link-ico,
.app-shell-link.is-active .app-shell-link-ico {
  color: var(--accent);
  opacity: 1;
}

.app-shell-link::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 2px;
  border-radius: 999px;
  background: transparent;
  transform: scaleX(0.7);
  transform-origin: center;
  transition: background 0.15s ease, transform 0.15s ease;
}

.app-shell-link:hover {
  color: #fff;
  transform: translateY(-1px);
}

.app-shell-link:hover::after {
  background: rgba(255,255,255,0.16);
}

.app-shell-link.is-active {
  color: #fff;
}

.app-shell-link.is-active::after {
  background: var(--accent);
  transform: scaleX(1);
}

.app-shell-link-utility {
  font-size: 14px;
  font-weight: 600;
  color: rgba(255,255,255,0.68);
}

.app-shell-link-utility .app-shell-link-ico {
  width: 16px;
  height: 16px;
}

.app-shell-link-utility::after {
  height: 1px;
}

.app-shell-home {
  padding: 20px;
}

.app-shell-home-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 18px;
}

.app-shell-home-title {
  font-size: 22px;
  font-weight: 900;
  line-height: 1.2;
}

.app-shell-home-subtitle {
  color: var(--muted);
  font-size: 14px;
  margin-top: 8px;
}

.app-shell-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 14px;
}

.app-shell-tile {
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-height: 132px;
  padding: 18px;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,0.10);
  background:
    linear-gradient(180deg, rgba(255,255,255,0.05), rgba(255,255,255,0.02)),
    rgba(255,255,255,0.02);
  text-decoration: none;
  transition: transform 0.16s ease, border-color 0.16s ease, background 0.16s ease;
}

.app-shell-tile:hover {
  transform: translateY(-2px);
  border-color: rgba(217, 178, 110, 0.4);
  background:
    linear-gradient(180deg, rgba(217, 165, 88, 0.1), rgba(255,255,255,0.02)),
    rgba(255,255,255,0.03);
}

.app-shell-tile-title {
  font-size: 18px;
  font-weight: 800;
}

.app-shell-tile-text {
  color: var(--muted);
  font-size: 13px;
  line-height: 1.45;
}

.page-shell.page-shell-arbitrage .arb-card,
.page-shell.page-shell-live .arb-card,
.page-shell.page-shell-historical .arb-card {
  width: 100%;
  padding: 0;
  background: transparent;
  border-color: transparent;
  box-shadow: none;
}

.page-shell.page-shell-arbitrage #arbCard > .table-wrap,
.page-shell.page-shell-live #liveCard > .table-wrap,
.page-shell.page-shell-historical #histCard > .table-wrap {
  max-height: none;
  overflow: visible;
  border-color: transparent;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

.page-shell.page-shell-arbitrage #arbCard > .table-wrap.is-table-loading::before,
.page-shell.page-shell-live #liveCard > .table-wrap.is-table-loading::before,
.page-shell.page-shell-historical #histCard > .table-wrap.is-table-loading::before {
  border-radius: 0;
  box-shadow: none;
}


@media (max-width: 820px) {
  .app-shell-title {
    font-size: 20px;
  }

  .page-shell.page-shell-arbitrage,
  .page-shell.page-shell-live,
  .page-shell.page-shell-historical {
    padding-left: 12px;
    padding-right: 12px;
  }

  .app-shell-nav,
  .app-shell-home-head {
    display: flex;
    flex-direction: column;
    align-items: stretch;
  }

  .app-shell-nav {
    position: static;
  }

  .app-shell-brand {
    text-align: center;
  }

  .app-shell-links {
    justify-content: center;
  }

  .app-shell-links-side {
    justify-content: center;
  }
}


/* --- table page clean top chrome: no underlays, no header slabs --- */
.page-shell.page-shell-arbitrage .app-shell-nav,
.page-shell.page-shell-live .app-shell-nav,
.page-shell.page-shell-historical .app-shell-nav {
  position: static;
  top: auto;
  z-index: auto;
  margin-left: -18px;
  margin-right: -18px;
  padding-left: 18px;
  padding-right: 18px;
}

.page-shell.page-shell-arbitrage .table-wrap thead th,
.page-shell.page-shell-live .table-wrap thead th,
.page-shell.page-shell-historical .table-wrap thead th {
  position: sticky !important;
  top: 0 !important;
  z-index: 30 !important;
}

.page-shell.page-shell-live #liveTable thead th:nth-child(-n+6) {
  z-index: 40 !important;
}

@media (max-width: 820px) {
  .page-shell.page-shell-arbitrage .app-shell-nav,
  .page-shell.page-shell-live .app-shell-nav,
  .page-shell.page-shell-historical .app-shell-nav {
    margin-left: -12px;
    margin-right: -12px;
    padding-left: 12px;
    padding-right: 12px;
  }
}

.app-shell-link::after {
  display: none;
}

.app-shell-link:hover {
  transform: none;
}

.app-shell-link.is-active {
  color: rgba(255,255,255,0.96);
  text-shadow: 0 0 10px rgba(217, 165, 88, 0.18);
}

.page-shell.page-shell-arbitrage .arb-card .arb-head,
.page-shell.page-shell-live .arb-card .arb-head,
.page-shell.page-shell-historical .arb-card .arb-head {
  background: transparent;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  padding-left: 0;
  padding-right: 0;
}

.page-shell.page-shell-arbitrage .arb-card .arb-head .arb-filter-btn,
.page-shell.page-shell-live .arb-card .arb-head .arb-filter-btn,
.page-shell.page-shell-historical .arb-card .arb-head .arb-filter-btn,
.page-shell.page-shell-arbitrage .arb-card .arb-head .arb-mini,
.page-shell.page-shell-live .arb-card .arb-head .arb-mini,
.page-shell.page-shell-historical .arb-card .arb-head .arb-mini {
  background: transparent !important;
  border-color: transparent !important;
  box-shadow: none !important;
}

.page-shell.page-shell-arbitrage .arb-card .arb-head .arb-filter-btn:hover,
.page-shell.page-shell-live .arb-card .arb-head .arb-filter-btn:hover,
.page-shell.page-shell-historical .arb-card .arb-head .arb-filter-btn:hover,
.page-shell.page-shell-arbitrage .arb-card .arb-head .arb-filter-btn:focus-visible,
.page-shell.page-shell-live .arb-card .arb-head .arb-filter-btn:focus-visible,
.page-shell.page-shell-historical .arb-card .arb-head .arb-filter-btn:focus-visible,
.page-shell.page-shell-arbitrage .arb-card .arb-head .arb-mini:hover,
.page-shell.page-shell-live .arb-card .arb-head .arb-mini:hover,
.page-shell.page-shell-historical .arb-card .arb-head .arb-mini:hover,
.page-shell.page-shell-arbitrage .arb-card .arb-head .arb-mini:focus-visible,
.page-shell.page-shell-live .arb-card .arb-head .arb-mini:focus-visible,
.page-shell.page-shell-historical .arb-card .arb-head .arb-mini:focus-visible,
.page-shell.page-shell-arbitrage .arb-card .arb-head .arb-filter-btn[aria-expanded="true"],
.page-shell.page-shell-live .arb-card .arb-head .arb-filter-btn[aria-expanded="true"],
.page-shell.page-shell-historical .arb-card .arb-head .arb-filter-btn[aria-expanded="true"],
.page-shell.page-shell-arbitrage .arb-card .arb-head .arb-mini.is-active,
.page-shell.page-shell-live .arb-card .arb-head .arb-mini.is-active,
.page-shell.page-shell-historical .arb-card .arb-head .arb-mini.is-active {
  background: transparent !important;
  border-color: transparent !important;
  color: rgba(255,255,255,0.96);
  box-shadow: none !important;
}

.page-shell.page-shell-arbitrage .arb-card .arb-head .arb-tabs {
  --arb-tab-gap: clamp(7px, 1vw, 18px);
  --arb-tab-height: clamp(28px, 2.45vw, 36px);
  --arb-tab-pad-x: clamp(8px, 1vw, 18px);
  --arb-tab-font-size: clamp(11px, 0.88vw, 16px);
  --arb-tab-icon-size: clamp(11px, 0.9vw, 16px);
  --arb-tab-underline-size: clamp(1px, 0.14vw, 2px);
  gap: var(--arb-tab-gap);
}

.page-shell.page-shell-arbitrage .arb-card .arb-head .arb-tab-btn {
  background: transparent !important;
  border-color: transparent !important;
  border-radius: 0;
  box-shadow: none !important;
}

.page-shell.page-shell-arbitrage .arb-card .arb-head .arb-tab-btn:hover,
.page-shell.page-shell-arbitrage .arb-card .arb-head .arb-tab-btn:focus-visible {
  background: transparent !important;
  border-color: transparent !important;
  color: rgba(255,255,255,0.96);
}

.page-shell.page-shell-arbitrage .arb-card .arb-head .arb-tab-btn.is-active {
  background: transparent !important;
  border-color: transparent !important;
  color: rgba(255,255,255,0.98);
  box-shadow: inset 0 calc(-1 * var(--arb-tab-underline-size, 2px)) 0 rgba(132, 142, 156, 0.82) !important;
}

/* --- table-page cleanup: empty left title slot + shared bronze table heads --- */
.page-shell.page-shell-arbitrage .app-shell-brand,
.page-shell.page-shell-live .app-shell-brand,
.page-shell.page-shell-historical .app-shell-brand {
  visibility: hidden;
  pointer-events: none;
  user-select: none;
}

.page-shell.page-shell-arbitrage #arbTable thead th,
.page-shell.page-shell-live #liveTable thead th,
.page-shell.page-shell-historical #histTable thead th {
  background: var(--bg) !important;
  color: rgba(200, 154, 107, 0.96) !important;
  font-family: var(--table-header-font-family) !important;
  font-weight: var(--table-header-font-weight) !important;
  letter-spacing: var(--table-header-letter-spacing) !important;
  text-transform: var(--table-header-text-transform) !important;
  border-bottom-color: rgba(200, 154, 107, 0.16) !important;
  text-shadow: none !important;
}

.page-shell.page-shell-arbitrage #arbTable thead th {
  font-size: clamp(8px, 0.9vw, 11px) !important;
}

.page-shell.page-shell-live #liveTable thead th,
.page-shell.page-shell-historical #histTable thead th {
  font-size: clamp(7px, 0.85vw, 10px) !important;
}

.page-shell.page-shell-arbitrage #arbTable thead th .th-label,
.page-shell.page-shell-live #liveTable thead th .th-label,
.page-shell.page-shell-historical #histTable thead th .th-label,
.page-shell.page-shell-arbitrage #arbTable thead th .th-with-ico,
.page-shell.page-shell-live #liveTable thead th .th-with-ico,
.page-shell.page-shell-historical #histTable thead th .th-with-ico {
  color: inherit;
  font: inherit;
  font-weight: inherit;
  letter-spacing: inherit;
  text-transform: inherit;
}

.page-shell.page-shell-live #liveTable tr.lt-coin-head td {
  background: transparent !important;
  border-top: 0 !important;
  border-bottom: 0 !important;
  color: rgba(233, 238, 244, 0.92) !important;
  text-shadow: none !important;
}

.page-shell.page-shell-live #liveTable tr.lt-coin-head:hover td {
  outline: none !important;
  background: rgba(255, 255, 255, 0.02) !important;
  box-shadow: none !important;
}

.page-shell.page-shell-live #liveTable {
  border-collapse: separate;
  border-spacing: 0;
  --lt-coin-inner-bg: rgba(13, 17, 23, 0.96);
  --lt-coin-row-line: rgba(255, 255, 255, 0.20);
}

.page-shell.page-shell-live #liveTable tbody tr.lt-coin-head td,
.page-shell.page-shell-live #liveTable tbody tr[data-lt-group-role="exchange"] td,
.page-shell.page-shell-live #liveTable tbody tr.lt-best-row td {
  background: var(--lt-coin-inner-bg) !important;
}

.page-shell.page-shell-live #liveTable tbody tr.lt-coin-head td {
  border-top: 1px solid rgba(255, 255, 255, 0.11) !important;
  border-left: 1px solid rgba(255, 255, 255, 0.11) !important;
  border-right: 1px solid rgba(255, 255, 255, 0.11) !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06) !important;
  border-top-left-radius: 10px;
  border-top-right-radius: 10px;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.04),
    0 10px 22px rgba(0, 0, 0, 0.16) !important;
}

.page-shell.page-shell-live #liveTable tbody tr[data-lt-group-role="exchange"] td {
  border-bottom: 1px solid var(--lt-coin-row-line) !important;
}

.page-shell.page-shell-live #liveTable tbody tr[data-lt-group-role="exchange"] td:first-child,
.page-shell.page-shell-live #liveTable tbody tr.lt-best-row td:first-child {
  border-left: 1px solid rgba(255, 255, 255, 0.11) !important;
}

.page-shell.page-shell-live #liveTable tbody tr[data-lt-group-role="exchange"] td:last-child,
.page-shell.page-shell-live #liveTable tbody tr.lt-best-row td:last-child {
  border-right: 1px solid rgba(255, 255, 255, 0.11) !important;
}

.page-shell.page-shell-live #liveTable tbody tr.lt-best-row td {
  border-bottom: 1px solid rgba(255, 255, 255, 0.11) !important;
}

.page-shell.page-shell-live #liveTable tbody tr.lt-best-row td:first-child {
  border-bottom-left-radius: 10px;
}

.page-shell.page-shell-live #liveTable tbody tr.lt-best-row td:last-child {
  border-bottom-right-radius: 10px;
}

.page-shell.page-shell-live #liveTable tbody tr.lt-coin-group-gap td {
  height: 7px;
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

.page-shell.page-shell-live #liveTable tbody tr.lt-coin-head:hover td,
.page-shell.page-shell-live #liveTable tbody tr[data-lt-group-role="exchange"]:hover td,
.page-shell.page-shell-live #liveTable tbody tr.lt-best-row:hover td {
  background: rgba(30, 35, 43, 0.96) !important;
}

.page-shell.page-shell-live #liveTable tbody tr.lt-coin-group-gap:hover td {
  background: transparent !important;
}

.page-shell.page-shell-live #liveTable tbody tr.lt-row-spot {
  --lt-spot-fill: rgba(132, 142, 156, 0.085);
  --lt-spot-fill-soft: rgba(132, 142, 156, 0.035);
  --lt-spot-strip: rgba(132, 142, 156, 0.62);
}

.page-shell.page-shell-live #liveTable tbody tr.lt-row-spot td:nth-child(-n+2) {
  background: var(--lt-spot-fill) !important;
}

.page-shell.page-shell-live #liveTable tbody tr.lt-row-spot td:nth-child(3) {
  background: linear-gradient(
    90deg,
    var(--lt-spot-fill) 0%,
    var(--lt-spot-fill-soft) 64%,
    var(--lt-coin-inner-bg) 100%
  ) !important;
}

.page-shell.page-shell-live #liveTable tbody tr.lt-row-spot td:first-child {
  box-shadow: inset 5px 0 0 var(--lt-spot-strip) !important;
}

.page-shell.page-shell-live #liveTable tbody tr.lt-row-spot:hover td:nth-child(-n+2) {
  background: rgba(148, 163, 184, 0.16) !important;
}

.page-shell.page-shell-live #liveTable tbody tr.lt-row-spot:hover td:nth-child(3) {
  background: linear-gradient(
    90deg,
    rgba(148, 163, 184, 0.16) 0%,
    rgba(148, 163, 184, 0.08) 64%,
    rgba(30, 35, 43, 0.96) 100%
  ) !important;
}

.page-shell.page-shell-live #liveTable tbody tr[data-lt-market-type="derivatives"] {
  --lt-futures-fill: rgba(200, 154, 107, 0.085);
  --lt-futures-fill-soft: rgba(200, 154, 107, 0.035);
  --lt-futures-fill-line: rgba(200, 154, 107, 0.34);
  --lt-futures-strip: rgba(200, 154, 107, 0.62);
  background:
    linear-gradient(
      90deg,
      transparent 0%,
      transparent calc(100% - 5px),
      var(--lt-futures-strip) calc(100% - 5px),
      var(--lt-futures-strip) 100%
    ),
    linear-gradient(
      270deg,
      var(--lt-futures-fill) 0%,
      var(--lt-futures-fill-soft) 24%,
      var(--lt-coin-inner-bg) 42%
    ) !important;
}

.page-shell.page-shell-live #liveTable tbody tr[data-lt-market-type="derivatives"] td:nth-child(-n+2) {
  background: var(--lt-futures-fill) !important;
}

.page-shell.page-shell-live #liveTable tbody tr[data-lt-market-type="derivatives"] td:nth-child(3) {
  background: linear-gradient(
    90deg,
    var(--lt-futures-fill) 0%,
    var(--lt-futures-fill-soft) 64%,
    var(--lt-coin-inner-bg) 100%
  ) !important;
}

.page-shell.page-shell-live #liveTable tbody tr[data-lt-market-type="derivatives"] td:first-child {
  box-shadow: inset 5px 0 0 var(--lt-futures-strip) !important;
}

.page-shell.page-shell-live #liveTable tbody tr[data-lt-market-type="derivatives"]:hover td:nth-child(-n+2) {
  background: rgba(148, 163, 184, 0.16) !important;
}

.page-shell.page-shell-live #liveTable tbody tr[data-lt-market-type="derivatives"]:hover td:nth-child(3) {
  background: linear-gradient(
    90deg,
    rgba(148, 163, 184, 0.16) 0%,
    rgba(148, 163, 184, 0.08) 64%,
    rgba(30, 35, 43, 0.96) 100%
  ) !important;
}

.page-shell.page-shell-live #liveTable thead th:nth-child(6),
.page-shell.page-shell-live #liveTable tbody tr[data-lt-group-role="exchange"] td:nth-child(6),
.page-shell.page-shell-live #liveTable tbody tr.lt-best-row td.lt-best-cell {
  border-right: 0 !important;
  box-shadow: none !important;
}

.page-shell.page-shell-live #liveTable tbody td.lt-history-click,
.page-shell.page-shell-live #liveTable tbody td.lt-best-day {
  background: var(--lt-coin-inner-bg) !important;
}

.page-shell.page-shell-live #liveTable tbody tr:hover td.lt-history-click,
.page-shell.page-shell-live #liveTable tbody tr:hover td.lt-best-day,
.page-shell.page-shell-live #liveTable tbody td.lt-history-click:hover,
.page-shell.page-shell-live #liveTable tbody td.lt-best-day:hover {
  background: rgba(30, 35, 43, 0.96) !important;
}

.page-shell.page-shell-live #liveTable tbody tr[data-lt-market-type="derivatives"] td.lt-history-click {
  background: transparent !important;
}

.page-shell.page-shell-live #liveTable tbody tr[data-lt-market-type="derivatives"]:hover {
  background:
    linear-gradient(
      90deg,
      transparent 0%,
      transparent calc(100% - 5px),
      var(--lt-futures-strip) calc(100% - 5px),
      var(--lt-futures-strip) 100%
    ),
    linear-gradient(
      270deg,
      rgba(148, 163, 184, 0.16) 0%,
      rgba(148, 163, 184, 0.08) 24%,
      rgba(30, 35, 43, 0.96) 42%
    ) !important;
}

.page-shell.page-shell-live #liveTable tbody tr[data-lt-market-type="derivatives"]:hover td.lt-history-click,
.page-shell.page-shell-live #liveTable tbody tr[data-lt-market-type="derivatives"] td.lt-history-click:hover {
  background: transparent !important;
}

.page-shell.page-shell-live #liveTable tr.lt-coin-head {
  height: 56px !important;
}

.page-shell.page-shell-live #liveTable tr.lt-coin-head td {
  padding-top: 7px !important;
  padding-bottom: 7px !important;
  font-size: 18px !important;
  line-height: 1 !important;
}

.page-shell.page-shell-live #liveTable tr.lt-coin-head td .coin-with-icon {
  gap: 0 !important;
  padding: 2px 6px !important;
  border-radius: 8px !important;
  font-size: 18px !important;
  line-height: 1 !important;
}

.page-shell.page-shell-live #liveTable tr.lt-coin-head td .coin-desc-coin-btn,
.page-shell.page-shell-live #liveTable tr.lt-coin-head td .coin-ico-wrap,
.page-shell.page-shell-live #liveTable tr.lt-coin-head td .coin-icon {
  display: none !important;
}

.page-shell.page-shell-live #liveTable tr.lt-coin-head td .coin-txt {
  color: rgba(242, 227, 194, 0.96) !important;
  font-size: 18px !important;
  line-height: 1 !important;
  transform: translateY(0);
}

.page-shell.page-shell-live #liveTable tr.lt-coin-head td .coin-ico-wrap.is-xl,
.page-shell.page-shell-live #liveTable tr.lt-coin-head td .coin-icon.is-xl {
  width: 44px !important;
  height: 44px !important;
}

.page-shell.page-shell-live #liveTable tr.lt-coin-head td .lt-coin-head-inline {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  width: auto;
  max-width: 100%;
  margin: 0 auto;
  box-sizing: border-box;
  position: relative;
  padding: 0 0 4px;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  white-space: nowrap;
}

.page-shell.page-shell-live #liveTable tr.lt-coin-head td .lt-coin-head-inline::after {
  content: "";
  position: absolute;
  left: 12px;
  right: 12px;
  bottom: 3px;
  height: 1px;
  border-radius: 999px;
  background: linear-gradient(
    90deg,
    rgba(242, 227, 194, 0.00) 0%,
    rgba(242, 227, 194, 0.62) 18%,
    rgba(242, 227, 194, 0.74) 50%,
    rgba(242, 227, 194, 0.62) 82%,
    rgba(242, 227, 194, 0.00) 100%
  );
  pointer-events: none;
}

.page-shell.page-shell-live #liveTable tr.lt-coin-head td .lt-coin-head-name {
  display: inline-flex;
  align-items: center;
  min-width: 0;
  flex: 0 1 auto;
}

.page-shell.page-shell-live #liveTable tr.lt-coin-head td .lt-coin-head-price24h {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  justify-content: flex-end;
  flex: 0 1 auto;
  min-width: 0;
  color: rgba(233, 238, 244, 0.78);
  font-size: 10px !important;
  font-weight: 800;
  line-height: 1 !important;
  letter-spacing: 0;
  text-transform: none;
}

.page-shell.page-shell-live #liveTable tr.lt-coin-head td .lt-coin-head-price24h-label {
  color: rgba(200, 154, 107, 0.92);
  font-size: 9px !important;
  font-weight: 900;
  letter-spacing: 0.04em;
}

.page-shell.page-shell-live #liveTable tr.lt-coin-head td .lt-coin-head-price24h-value .arb-price24h-cell {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  white-space: nowrap;
}

.page-shell.page-shell-live #liveTable tr.lt-coin-head td .lt-coin-head-price24h-value .arb-price24h-cell > div {
  font-size: 10px !important;
  line-height: 1 !important;
}

.page-shell.page-shell-live #liveTable tr.lt-coin-head td .lt-coin-head-price24h-value .arb-sub,
.page-shell.page-shell-live #liveTable tr.lt-coin-head td .lt-coin-head-price24h-value .arb-line3 {
  color: rgba(132, 142, 156, 0.90) !important;
}

@media (max-width: 820px) {
  .page-shell.page-shell-live #liveTable tr.lt-coin-head {
    height: 50px !important;
  }

  .page-shell.page-shell-live #liveTable tr.lt-coin-head td .coin-with-icon {
    gap: 0 !important;
    padding: 2px 4px !important;
    font-size: 16px !important;
  }

  .page-shell.page-shell-live #liveTable tr.lt-coin-head td {
    padding-top: 6px !important;
    padding-bottom: 6px !important;
    font-size: 16px !important;
    line-height: 1 !important;
  }

  .page-shell.page-shell-live #liveTable tr.lt-coin-head td .coin-txt {
    font-size: 16px !important;
  }

  .page-shell.page-shell-live #liveTable tr.lt-coin-head td .lt-coin-head-inline {
    gap: 10px;
    width: auto;
    padding: 0 0 3px;
  }

  .page-shell.page-shell-live #liveTable tr.lt-coin-head td .lt-coin-head-price24h {
    gap: 4px;
    font-size: 9px !important;
  }

  .page-shell.page-shell-live #liveTable tr.lt-coin-head td .lt-coin-head-price24h-label,
  .page-shell.page-shell-live #liveTable tr.lt-coin-head td .lt-coin-head-price24h-value .arb-price24h-cell > div {
    font-size: 9px !important;
  }

  .page-shell.page-shell-live #liveTable tr.lt-coin-head td .coin-ico-wrap.is-xl,
  .page-shell.page-shell-live #liveTable tr.lt-coin-head td .coin-icon.is-xl {
    width: 34px !important;
    height: 34px !important;
  }
}

.page-shell.page-shell-historical #histTable tr.ht-coin-head td {
  background: transparent !important;
  border-top: 0 !important;
  border-bottom: 0 !important;
  color: rgba(233, 238, 244, 0.92) !important;
  text-shadow: none !important;
}

.page-shell.page-shell-historical #histTable tr.ht-coin-head:hover td {
  outline: none !important;
  background: rgba(255, 255, 255, 0.02) !important;
  box-shadow: none !important;
}

.page-shell.page-shell-arbitrage .arb-card {
  --arb-tree-tone: #6ee7b7;
  --arb-tree-bg-open: rgba(132, 142, 156, 0.08);
  --arb-tree-bg-open-hover: rgba(132, 142, 156, 0.12);
  --arb-tree-bg-child: rgba(132, 142, 156, 0.05);
  --arb-tree-bg-child-hover: rgba(132, 142, 156, 0.09);
  --arb-tree-strip: rgba(132, 142, 156, 0.78);
  --arb-tree-branch: rgba(132, 142, 156, 0.34);
  --arb-tree-branch-strong: rgba(132, 142, 156, 0.52);
}

.page-shell.page-shell-arbitrage #arbTable tbody td {
  border-bottom-color: rgba(255, 255, 255, 0.08) !important;
  transition: background 0.14s ease, border-color 0.14s ease, box-shadow 0.14s ease;
}

.page-shell.page-shell-arbitrage #arbTable tbody tr:hover td {
  background: rgba(30, 35, 43, 0.96) !important;
  border-left-color: transparent !important;
  border-right-color: transparent !important;
  border-bottom-color: rgba(255, 255, 255, 0.08) !important;
  box-shadow: none !important;
}

.page-shell.page-shell-arbitrage #arbTable td.arb-click:hover {
  outline: none !important;
  background: rgba(30, 35, 43, 0.96) !important;
  box-shadow: none !important;
}


.page-shell.page-shell-arbitrage #arbTable thead th .arb-th-sub {
  color: rgba(200, 154, 107, 0.78) !important;
  font-weight: 500 !important;
  letter-spacing: 0.08em !important;
}

.page-shell.page-shell-live #liveTable th.lt-sort.is-active .lt-sort-arrow,
.page-shell.page-shell-historical #histTable th.ht-sort.is-active .ht-sort-arrow {
  color: rgba(200, 154, 107, 0.96) !important;
}


/* --- v4: beige header icons on dedicated table pages + restore column hover --- */
.page-shell.page-shell-arbitrage .arb-card > .arb-head .arb-toggle-ico,
.page-shell.page-shell-live .arb-card > .arb-head .arb-toggle-ico,
.page-shell.page-shell-historical .arb-card > .arb-head .arb-toggle-ico,
.page-shell.page-shell-arbitrage .arb-card > .arb-head .arb-search-ico,
.page-shell.page-shell-live .arb-card > .arb-head .arb-search-ico,
.page-shell.page-shell-historical .arb-card > .arb-head .arb-search-ico,
.page-shell.page-shell-arbitrage .arb-card > .arb-head .arb-tab-btn > .arb-tab-ico,
.page-shell.page-shell-arbitrage .arb-card > .arb-head .arb-filter-btn > .arb-mini-ico,
.page-shell.page-shell-live .arb-card > .arb-head .arb-filter-btn > .arb-mini-ico,
.page-shell.page-shell-historical .arb-card > .arb-head .arb-filter-btn > .arb-mini-ico {
  color: rgba(242, 227, 194, 0.94) !important;
  opacity: 0.98;
}

.page-shell.page-shell-arbitrage .arb-card > .arb-head .arb-tab-btn:hover > .arb-tab-ico,
.page-shell.page-shell-arbitrage .arb-card > .arb-head .arb-tab-btn:focus-visible > .arb-tab-ico,
.page-shell.page-shell-arbitrage .arb-card > .arb-head .arb-tab-btn.is-active > .arb-tab-ico,
.page-shell.page-shell-arbitrage .arb-card > .arb-head .arb-filter-btn:hover > .arb-mini-ico,
.page-shell.page-shell-live .arb-card > .arb-head .arb-filter-btn:hover > .arb-mini-ico,
.page-shell.page-shell-historical .arb-card > .arb-head .arb-filter-btn:hover > .arb-mini-ico,
.page-shell.page-shell-arbitrage .arb-card > .arb-head .arb-filter-btn:focus-visible > .arb-mini-ico,
.page-shell.page-shell-live .arb-card > .arb-head .arb-filter-btn:focus-visible > .arb-mini-ico,
.page-shell.page-shell-historical .arb-card > .arb-head .arb-filter-btn:focus-visible > .arb-mini-ico,
.page-shell.page-shell-arbitrage .arb-card > .arb-head .arb-filter-btn[aria-expanded="true"] > .arb-mini-ico,
.page-shell.page-shell-live .arb-card > .arb-head .arb-filter-btn[aria-expanded="true"] > .arb-mini-ico,
.page-shell.page-shell-historical .arb-card > .arb-head .arb-filter-btn[aria-expanded="true"] > .arb-mini-ico,
.page-shell.page-shell-arbitrage .arb-card > .arb-head .arb-toggle:hover .arb-toggle-ico,
.page-shell.page-shell-live .arb-card > .arb-head .arb-toggle:hover .arb-toggle-ico,
.page-shell.page-shell-historical .arb-card > .arb-head .arb-toggle:hover .arb-toggle-ico {
  color: var(--accent) !important;
  opacity: 1;
  filter: none !important;
}

.page-shell.page-shell-arbitrage .arb-card > .arb-head #arbAlertBtn[data-alert-on="1"] > .arb-mini-ico {
  color: var(--accent) !important;
  opacity: 1;
  filter: none !important;
}

/* Keep the old header hover feedback on dedicated pages.
   The bronze header restyle uses !important, so we restore the hover state here. */
.page-shell.page-shell-live #liveTable th.lt-sort:hover,
.page-shell.page-shell-live #spotTable th.lt-sort:hover,
.page-shell.page-shell-historical #histTable th.ht-sort:hover {
  background: #17202b !important;
  color: rgba(233, 238, 244, 0.92) !important;
}

.page-shell.page-shell-live #liveTable th.lt-sort:hover .th-label,
.page-shell.page-shell-live #spotTable th.lt-sort:hover .th-label,
.page-shell.page-shell-historical #histTable th.ht-sort:hover .th-label,
.page-shell.page-shell-live #liveTable th.lt-sort:hover .th-with-ico,
.page-shell.page-shell-live #spotTable th.lt-sort:hover .th-with-ico,
.page-shell.page-shell-historical #histTable th.ht-sort:hover .th-with-ico,
.page-shell.page-shell-live #liveTable th.lt-sort:hover .lt-sort-arrow,
.page-shell.page-shell-live #spotTable th.lt-sort:hover .lt-sort-arrow,
.page-shell.page-shell-historical #histTable th.ht-sort:hover .ht-sort-arrow {
  color: inherit;
}

/* --- left expandable app navigation --- */
:root {
  --app-shell-sidebar-collapsed: 68px;
  --app-shell-sidebar-expanded: 270px;
  --app-shell-sidebar-bg: rgba(13,17,23,0.92);
  --app-shell-sidebar-border: rgba(217,178,110,0.14);
  --app-table-controls-collapsed: 62px;
  --app-table-controls-expanded: 420px;
}

.page-shell,
.page-shell.page-shell-arbitrage,
.page-shell.page-shell-live,
.page-shell.page-shell-historical {
  max-width: none;
  width: 100%;
  min-height: 100vh;
  padding-left: calc(var(--app-shell-sidebar-collapsed) + 18px);
  padding-right: 18px;
  transition: padding-left 0.18s ease, padding-right 0.18s ease;
}

body.is-shell-sidebar-expanded .page-shell,
body.is-shell-sidebar-expanded .page-shell.page-shell-arbitrage,
body.is-shell-sidebar-expanded .page-shell.page-shell-live,
body.is-shell-sidebar-expanded .page-shell.page-shell-historical {
  padding-left: calc(var(--app-shell-sidebar-expanded) + 18px);
}

.page-shell.page-shell-arbitrage,
.page-shell.page-shell-live {
  padding-right: calc(var(--app-table-controls-collapsed) + 18px);
}

body.is-table-controls-expanded .page-shell.page-shell-arbitrage,
body.is-table-controls-expanded .page-shell.page-shell-live {
  padding-right: calc(var(--app-table-controls-expanded) + 18px);
}

.page-shell > .app-shell-nav.card,
.page-shell.page-shell-arbitrage .app-shell-nav,
.page-shell.page-shell-live .app-shell-nav,
.page-shell.page-shell-historical .app-shell-nav {
  position: fixed !important;
  left: 12px;
  top: 12px;
  bottom: 12px;
  z-index: 1300;
  width: var(--app-shell-sidebar-collapsed);
  margin: 0 !important;
  padding: 8px !important;
  display: flex !important;
  flex-direction: column;
  align-items: stretch;
  gap: 8px;
  overflow: hidden;
  border: 0 !important;
  border-right: 1px solid var(--app-shell-sidebar-border) !important;
  border-radius: 0 !important;
  background: #100d09 !important;
  box-shadow: none !important;
  transition: width 0.18s ease;
}

body.is-shell-sidebar-expanded .page-shell > .app-shell-nav.card {
  width: var(--app-shell-sidebar-expanded);
  box-shadow: none !important;
}

.app-shell-logo {
  width: 50px;
  height: 44px;
  min-height: 44px;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  border-radius: 8px;
  border: 0;
  background: transparent;
  box-shadow: none;
  overflow: hidden;
  transition: width 0.18s ease, height 0.18s ease, background 0.15s ease, border-color 0.15s ease;
}

body.is-shell-sidebar-expanded .app-shell-logo {
  width: calc(var(--app-shell-sidebar-expanded) - 16px);
  height: 58px;
  min-height: 58px;
}

.app-shell-logo:hover {
  background: transparent;
  border-color: transparent;
}

.app-shell-logo-img {
  display: block;
  width: 42px;
  height: auto;
  max-height: 20px;
  object-fit: contain;
  transition: width 0.18s ease, max-height 0.18s ease, filter 0.18s ease;
}

body.is-shell-sidebar-expanded .app-shell-logo-img {
  width: 190px;
  max-height: 42px;
}

.app-shell-brand,
.page-shell.page-shell-arbitrage .app-shell-brand,
.page-shell.page-shell-live .app-shell-brand,
.page-shell.page-shell-historical .app-shell-brand {
  visibility: visible;
  pointer-events: auto;
  user-select: auto;
  width: calc(var(--app-shell-sidebar-expanded) - 20px);
  min-width: calc(var(--app-shell-sidebar-expanded) - 20px);
  max-height: 0;
  padding: 0 10px;
  overflow: hidden;
  opacity: 0;
  transform: translateX(-8px);
  transition: opacity 0.14s ease, transform 0.14s ease, max-height 0.16s ease, padding 0.16s ease;
}

body.is-shell-sidebar-expanded .app-shell-brand {
  max-height: 92px;
  padding: 2px 10px 10px;
  opacity: 1;
  transform: translateX(0);
}

.app-shell-eyebrow {
  margin-bottom: 5px;
  color: rgba(142,152,165,0.76);
  font-size: 10px;
  letter-spacing: 0.08em;
}

.app-shell-title {
  max-width: 220px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: rgba(255,255,255,0.94);
  font-size: 18px;
  font-weight: 850;
  line-height: 1.15;
}

.app-shell-subtitle {
  max-width: 220px;
  margin-top: 5px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: rgba(142,152,165,0.74);
  font-size: 11px;
}

.app-shell-sidebar-menu {
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-width: calc(var(--app-shell-sidebar-expanded) - 16px);
  flex: 1 1 auto;
}

.app-shell-links,
.app-shell-links-main,
.app-shell-links-side {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  justify-content: flex-start;
  gap: 6px;
  width: 100%;
}

.app-shell-links-side {
  margin-top: auto;
  padding-top: 10px;
  border-top: 1px solid rgba(255,255,255,0.08);
}

/* Referrals anchors to the BOTTOM of the top nav group — just above the
   .app-shell-links-side divider line — while arbitrage/live/announcements/alerts
   stay clustered at the top. Let the top group fill the column, then push its
   last link (Referrals, the highest manifest order) down with an auto margin. */
.app-shell-links-main {
  flex: 1 1 auto;
}
.app-shell-links-main > a.app-shell-link:last-of-type {
  margin-top: auto;
}

.app-shell-link,
.app-shell-link.app-shell-link-utility {
  width: 100%;
  min-height: 42px;
  justify-content: flex-start;
  gap: 10px;
  padding: 0 12px 0 8px;
  border: 1px solid transparent;
  border-radius: 12px;
  background: transparent;
  color: rgba(244,236,217,0.78);
  font-size: 13px;
  font-weight: 500;
  line-height: 1;
  text-decoration: none;
  text-shadow: none;
  transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

.app-shell-link-ico,
.app-shell-link-utility .app-shell-link-ico {
  width: 34px;
  height: 34px;
  flex: 0 0 34px;
  border-radius: 10px;
  color: rgba(242,227,194,0.88);
  opacity: 1;
}

.app-shell-link-ico svg {
  width: 20px;
  height: 20px;
}

.app-shell-link-text {
  display: inline-block;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  opacity: 0;
  transform: translateX(-6px);
  transition: opacity 0.14s ease, transform 0.14s ease;
}

body.is-shell-sidebar-expanded .app-shell-link-text {
  opacity: 1;
  transform: translateX(0);
}

.app-shell-link:hover,
.app-shell-link:focus-visible {
  transform: none;
  color: rgba(255,255,255,0.96);
  background: rgba(217,165,88,0.09);
  border-color: rgba(217,178,110,0.18);
  outline: none;
}

.app-shell-link:hover .app-shell-link-ico,
.app-shell-link:focus-visible .app-shell-link-ico,
.app-shell-link.is-active .app-shell-link-ico {
  color: rgba(255,255,255,0.96);
}

.app-shell-link.is-active,
.app-shell-link.app-shell-link-utility.is-active {
  color: rgba(255,255,255,0.98);
  background: rgba(217,165,88,0.12);
  border-color: rgba(217,178,110,0.30);
  box-shadow: none;
  text-shadow: none;
}

.app-shell-link.is-active .app-shell-link-ico,
.app-shell-link.app-shell-link-utility.is-active .app-shell-link-ico {
  color: rgba(242,217,164,0.98);
}

.app-shell-link::after {
  content: "";
  position: absolute;
  left: 14px;
  right: 14px;
  bottom: 3px;
  display: none;
  height: 2px;
  border-radius: 999px;
  background: transparent;
  transform: scaleX(0.38);
  transform-origin: center;
  transition: background 0.15s ease, transform 0.15s ease, opacity 0.15s ease;
  opacity: 0;
}

.app-shell-link:hover::after,
.app-shell-link:focus-visible::after {
  background: transparent;
  transform: scaleX(0);
  opacity: 0;
}

.app-shell-link.is-active::after,
.app-shell-link.app-shell-link-utility.is-active::after {
  background: transparent;
  transform: scaleX(0);
  opacity: 0;
}

/* --- arbitrage sub-views in sidebar (Price / Funding / Spot) --- */
.app-shell-sublinks {
  display: none;
  flex-direction: column;
  align-items: stretch;
  gap: 2px;
  margin: -2px 0 4px;
  padding: 2px 0 4px 20px;
}

/* Accordion: in the EXPANDED sidebar a parent's sublinks stay collapsed until
   you click the parent (.is-sub-open) — or auto-open when one sublink is active
   (i.e. you're already on that section). Collapsed sidebar keeps them hidden. */
body.is-shell-sidebar-expanded .app-shell-sublinks {
  display: none;
}
body.is-shell-sidebar-expanded .app-shell-link.is-sub-open + .app-shell-sublinks,
body.is-shell-sidebar-expanded .app-shell-sublinks:has(.app-shell-sublink.is-active) {
  display: flex;
}

/* Chevron affordance on parent links that own a sublinks group (expanded only). */
body.is-shell-sidebar-expanded .app-shell-link:has(+ .app-shell-sublinks) {
  position: relative;
  padding-right: 30px;
}
body.is-shell-sidebar-expanded .app-shell-link:has(+ .app-shell-sublinks)::after {
  content: "";
  display: block;
  position: absolute;
  left: auto !important;
  right: 13px !important;
  top: 50%;
  bottom: auto;
  width: 8px;
  height: 8px;
  margin-top: -6px;
  border-top: 0;
  border-left: 0;
  border-right: 2px solid rgba(242, 217, 164, 0.95);
  border-bottom: 2px solid rgba(242, 217, 164, 0.95);
  border-radius: 0 0 2px 0;
  background: transparent;
  transform: rotate(45deg);
  opacity: 0.9;
  transition: transform 0.2s ease, opacity 0.15s ease;
}
body.is-shell-sidebar-expanded .app-shell-link:has(+ .app-shell-sublinks):hover::after {
  opacity: 1;
}
body.is-shell-sidebar-expanded .app-shell-link.is-sub-open:has(+ .app-shell-sublinks)::after {
  transform: rotate(-45deg);
  opacity: 1;
}

.app-shell-sublink {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 28px;
  padding: 4px 10px;
  border-radius: 8px;
  color: rgba(244,236,217,0.6);
  font-family: Inter, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-size: 13px;
  font-weight: 650;
  line-height: 1;
  text-decoration: none;
  transition: background 0.15s ease, color 0.15s ease;
}

.app-shell-sublink:hover,
.app-shell-sublink:focus-visible {
  color: rgba(255,255,255,0.96);
  background: rgba(217,165,88,0.09);
  outline: none;
}

.app-shell-sublink:hover .app-shell-sublink-ico,
.app-shell-sublink:focus-visible .app-shell-sublink-ico {
  color: rgba(255,255,255,0.96);
  opacity: 1;
}

.app-shell-sublink.is-active {
  color: rgba(242,217,164,0.98);
  background: rgba(217,165,88,0.1);
}

.app-shell-sublink.is-active .app-shell-sublink-ico {
  color: rgba(242,217,164,0.98);
  opacity: 1;
}

.app-shell-sublink-ico {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 16px;
  flex: 0 0 16px;
  color: rgba(242,227,194,0.78);
  opacity: 0.92;
  transition: color 0.15s ease, opacity 0.15s ease;
}

.app-shell-sublink-ico svg {
  display: block;
  width: 100%;
  height: 100%;
}

.app-shell-sublink-text {
  display: inline-block;
  white-space: nowrap;
  opacity: 0;
  transform: translateX(-4px);
  transition: opacity 0.14s ease, transform 0.14s ease;
}

body.is-shell-sidebar-expanded .app-shell-sublink-text {
  opacity: 1;
  transform: translateX(0);
}

/* --- right table controls sidebar --- */
.page-shell.page-shell-arbitrage .arb-card .app-table-controls-head,
.page-shell.page-shell-live .arb-card .app-table-controls-head {
  min-height: 58px;
  margin: 0 0 8px;
  padding: 7px 0;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: visible;
}

.app-table-top-controls {
  width: 100%;
  min-width: 0;
  min-height: 44px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(160px, 1fr);
  align-items: center;
  justify-content: stretch;
  gap: 10px;
}

.app-table-top-controls .arb-head-group,
.app-table-top-controls .arb-head-group-center,
.app-table-top-controls .arb-head-group-center-search,
.app-table-top-controls .arb-head-group-center-split {
  min-width: 0;
}

.app-table-top-controls .arb-head-group-center-search,
.app-table-top-controls .arb-head-group-center-split {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  flex-wrap: wrap;
}

.app-table-top-controls .arb-head-group-center-split::before {
  display: none;
}

.app-table-top-controls .arb-head-group-center-split .arb-tabs,
.app-table-top-controls .arb-head-group-center-split .arb-search {
  grid-column: auto;
  justify-self: auto;
}

.app-table-top-controls > .arb-head-group {
  grid-column: 2;
  justify-self: center;
  align-self: center;
}

.app-table-top-controls .arb-search input {
  width: var(--arb-search-w, 122px);
}

.app-table-top-exchanges {
  position: relative;
  grid-column: 3;
  justify-self: end;
  align-self: center;
  flex: 0 0 auto;
}

.app-table-top-exchanges .arb-filter-btn {
  height: 42px;
  min-width: 166px;
  padding-left: 18px;
  padding-right: 18px;
  align-items: center;
}

.app-table-top-exchanges .arb-filter-pop {
  z-index: 1310;
  width: min(460px, 92vw);
}

@media (max-width: 820px) {
  .app-table-top-controls {
    grid-template-columns: minmax(0, 1fr);
    justify-items: stretch;
  }

  .app-table-top-controls > .arb-head-group,
  .app-table-top-exchanges {
    grid-column: 1;
    justify-self: stretch;
  }

  .app-table-top-exchanges .arb-filter-btn {
    width: 100%;
  }
}

.app-table-controls-sidebar.arb-controls,
.app-table-controls-sidebar.arb-controls-layout,
.app-table-controls-sidebar.arb-controls-layout-arb,
.app-table-controls-sidebar.arb-controls-layout-table {
  position: fixed !important;
  right: 12px;
  top: 12px;
  bottom: 12px;
  z-index: 1295;
  width: var(--app-table-controls-collapsed);
  min-width: var(--app-table-controls-collapsed);
  margin: 0 !important;
  padding: 8px !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: stretch !important;
  justify-content: flex-start !important;
  gap: 8px !important;
  flex-wrap: nowrap !important;
  overflow: hidden;
  border: 1px solid var(--app-shell-sidebar-border) !important;
  border-radius: 12px !important;
  background: var(--app-shell-sidebar-bg) !important;
  box-shadow: 0 14px 32px rgba(0,0,0,0.34) !important;
  transition: width 0.18s ease, min-width 0.18s ease, box-shadow 0.18s ease;
}

body.is-table-controls-expanded .app-table-controls-sidebar {
  width: var(--app-table-controls-expanded);
  min-width: var(--app-table-controls-expanded);
  box-shadow: 0 18px 42px rgba(0,0,0,0.42) !important;
}

.app-table-controls-handle {
  width: 44px;
  height: 44px;
  min-height: 44px;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  align-self: flex-end;
  border: 1px solid transparent;
  border-radius: 10px;
  background: transparent;
  color: rgba(242,227,194,0.90);
  cursor: pointer;
  transition: background 0.14s ease, border-color 0.14s ease, color 0.14s ease;
}

.app-table-controls-handle:hover,
.app-table-controls-handle:focus-visible,
.app-table-controls-handle[aria-expanded="true"] {
  outline: none;
  background: rgba(255,255,255,0.075);
  border-color: rgba(255,255,255,0.08);
  color: rgba(110,231,183,0.96);
}

.app-table-controls-handle-ico,
.app-table-controls-handle-ico svg {
  display: block;
  width: 22px;
  height: 22px;
}

.app-table-controls-scroll {
  display: flex;
  flex-direction: column;
  gap: 12px;
  min-width: calc(var(--app-table-controls-expanded) - 16px);
  padding: 0 2px 10px;
  overflow-x: hidden;
  overflow-y: auto;
  opacity: 0;
  pointer-events: none;
  transform: translateX(10px);
  transition: opacity 0.14s ease, transform 0.14s ease;
  scrollbar-width: thin;
  scrollbar-color: rgba(148,163,184,0.38) transparent;
}

body.is-table-controls-expanded .app-table-controls-scroll {
  opacity: 1;
  pointer-events: auto;
  transform: translateX(0);
}

.app-table-controls-sidebar .arb-head-group,
.app-table-controls-sidebar .arb-head-group-left,
.app-table-controls-sidebar .arb-head-group-center,
.app-table-controls-sidebar .arb-head-group-center-search,
.app-table-controls-sidebar .arb-head-group-center-split,
.app-table-controls-sidebar .arb-head-group-right,
.app-table-controls-sidebar .arb-head-group-stack {
  width: 100%;
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  justify-content: flex-start;
  gap: 10px;
}

.app-table-controls-sidebar .arb-head-group-center-split::before {
  display: none;
}

.app-table-controls-sidebar .arb-toggle-stack,
.app-table-controls-sidebar .arb-toggle-stack-col,
.app-table-controls-sidebar .arb-filters,
.app-table-controls-sidebar .arb-search,
.app-table-controls-sidebar .arb-tabs {
  width: 100%;
}

.app-table-controls-sidebar .arb-toggle-stack-col {
  gap: 8px;
}

.app-table-controls-sidebar .arb-toggle,
.app-table-controls-sidebar .arb-filter-btn,
.app-table-controls-sidebar .arb-search input {
  width: 100%;
}

.app-table-controls-sidebar .arb-toggle {
  justify-content: space-between;
  min-height: 42px;
  padding: 7px 8px;
  border-radius: 10px;
  background: rgba(255,255,255,0.035);
}

.app-table-controls-sidebar .arb-search {
  min-width: 0;
}

.app-table-controls-sidebar .arb-search input {
  min-width: 0;
  max-width: 100%;
}

.app-table-controls-sidebar .arb-filter-btn {
  min-width: 0 !important;
  height: 40px;
  justify-content: flex-start !important;
  border-radius: 10px;
  padding-left: 10px;
  padding-right: 10px;
  background: rgba(255,255,255,0.025) !important;
}

.app-table-controls-sidebar .arb-filter-btn:hover,
.app-table-controls-sidebar .arb-filter-btn:focus-visible,
.app-table-controls-sidebar .arb-filter-btn[aria-expanded="true"] {
  background: rgba(255,255,255,0.075) !important;
  border-color: rgba(255,255,255,0.08) !important;
}

.app-table-controls-sidebar .arb-tabs {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  --arb-tab-gap: clamp(4px, 0.65vw, 6px);
  --arb-tab-height: clamp(28px, 2.65vw, 38px);
  --arb-tab-pad-x: clamp(4px, 0.55vw, 6px);
  --arb-tab-font-size: clamp(10px, 0.78vw, 13px);
  --arb-tab-icon-size: clamp(10px, 0.75vw, 14px);
  gap: var(--arb-tab-gap);
}

.app-table-controls-sidebar .arb-tab-btn {
  width: 100%;
  min-width: 0;
  height: var(--arb-tab-height);
  padding-left: var(--arb-tab-pad-x);
  padding-right: var(--arb-tab-pad-x);
  border-radius: 10px !important;
}

.app-table-controls-sidebar .arb-tab-btn > span:last-child {
  overflow: hidden;
  text-overflow: ellipsis;
}

.app-table-controls-sidebar .arb-filter-pop {
  position: static;
  width: 100% !important;
  max-width: 100%;
  margin-top: 8px;
  border-radius: 10px;
  padding: 10px;
  box-shadow: none;
  background: rgba(9,13,18,0.96);
}

.app-table-controls-sidebar #arbListFilterPop,
.app-table-controls-sidebar #liveListFilterPop {
  border: 0 !important;
  border-radius: 0;
  padding: 6px 0 0;
  background: transparent;
}

.app-table-controls-sidebar .arb-filter-pop-split-grid,
.app-table-controls-sidebar .arb-filter-pop-split-grid-live {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 14px;
}

.app-table-controls-sidebar .arb-filter-pane + .arb-filter-pane::before,
.app-table-controls-sidebar #liveListFilterPop .arb-filter-advanced-grid-live-thresholds > .arb-filter-field-block + .arb-filter-field-block::before {
  display: none;
}

.app-table-controls-sidebar .arb-filter-pane-list-filters .arb-filter-list,
.app-table-controls-sidebar .arb-alert-pop .arb-filter-list {
  max-height: 260px;
}

.app-table-controls-sidebar .ex-split,
.app-table-controls-sidebar .ex-split.ex-split-spot {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

.app-table-controls-sidebar .ex-col-title {
  color: #f0b90b;
}

.app-table-controls-sidebar .arb-filter-actions {
  justify-content: flex-start;
}

.app-table-controls-sidebar .arb-filter-advanced {
  padding: 10px;
}

.app-table-controls-sidebar #arbListFilterPop .arb-filter-advanced,
.app-table-controls-sidebar #liveListFilterPop .arb-filter-advanced {
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
}

.app-table-controls-sidebar .arb-filter-field-head,
.app-table-controls-sidebar #liveListFilterPop .arb-filter-pane-advanced .arb-filter-field-head {
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
}

.app-table-controls-sidebar .arb-filter-advanced .arb-filter-field-block input,
.app-table-controls-sidebar .arb-filter-advanced .arb-filter-field-block select,
.app-table-controls-sidebar .arb-filter-advanced .arb-filter-field-block.arb-liquidity-filter-field input,
.app-table-controls-sidebar #liveListFilterPop .arb-filter-pane-advanced .arb-filter-field-block input {
  width: 100%;
  min-width: 0;
  max-width: 100%;
}

.app-table-controls-sidebar .arb-pair-exchange-select-wrap {
  width: 100%;
}

.app-table-controls-sidebar .select-with-icon.is-custom-select > .ex-select-menu {
  width: 100%;
  max-width: 100%;
}

.app-table-controls-sidebar .select-with-icon.is-inline-select > .ex-select-trigger {
  display: none;
}

.app-table-controls-sidebar .arb-filter-exchange-field .select-with-icon.is-inline-select > .ex-select-menu {
  position: static;
  display: flex;
  flex-direction: column;
  gap: 6px;
  width: 100%;
  max-width: 100%;
  max-height: 260px;
  margin-top: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

.app-table-controls-sidebar .arb-alert-pop-head,
.app-table-controls-sidebar .arb-alert-top,
.app-table-controls-sidebar .arb-alert-top-actions {
  align-items: stretch;
}

.app-table-controls-sidebar .arb-alert-top,
.app-table-controls-sidebar .arb-alert-top-actions {
  flex-direction: column;
}

.app-table-controls-sidebar #arbAlertPop {
  border: 0 !important;
  border-radius: 0;
  padding: 6px 0 0;
  background: transparent;
}

.app-table-controls-sidebar #arbAlertPop .arb-alert-scope,
.app-table-controls-sidebar #arbAlertPop .arb-alert-note {
  display: none;
}

.app-table-controls-sidebar #arbAlertPop .arb-alert-pop-close {
  display: none;
}

.app-table-controls-sidebar #arbAlertPop .arb-alert-top {
  flex-direction: row;
  align-items: flex-end;
  gap: 10px;
  flex-wrap: wrap;
}

.app-table-controls-sidebar #arbAlertPop .arb-alert-top-actions {
  flex: 1 0 100%;
  margin-top: 0;
}

.app-table-controls-sidebar #arbAlertPop .arb-alert-top .arb-toggle {
  flex: 0 0 auto;
  width: auto;
  min-height: 36px;
  padding: 0 2px;
  justify-content: center;
  background: transparent;
}

.app-table-controls-sidebar #arbAlertPop #arbAlertStateText {
  display: none;
}

.app-table-controls-sidebar #arbAlertPop .arb-alert-subpanel,
.app-table-controls-sidebar #arbAlertPop .arb-alert-ex-actions {
  border: 0;
  border-radius: 0;
  padding: 0;
  background: transparent;
}

.app-table-controls-sidebar #arbAlertPop .arb-alert-ex-actions {
  width: 100%;
  justify-content: flex-start;
}

.app-table-controls-sidebar #arbAlertPop .arb-spread-pill-field-alert {
  flex: 1 1 0;
  width: auto;
  min-width: 0;
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
  align-items: stretch;
  flex-direction: column;
}

.app-table-controls-sidebar #arbAlertPop .arb-spread-pill-field-alert input {
  width: 100%;
  min-width: 0;
  max-width: 100%;
  height: 36px;
  padding: 0 10px;
  text-align: left;
  transform: none;
}

.app-filter-folder-list {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding-left: 14px;
}

.app-filter-folder-list::before {
  content: "";
  position: absolute;
  left: 5px;
  top: 8px;
  bottom: 8px;
  width: 1px;
  background: rgba(148, 163, 184, 0.26);
}

.app-filter-folder {
  position: relative;
  display: block;
  min-width: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  overflow: visible;
}

.app-filter-folder::before {
  content: "";
  position: absolute;
  left: -9px;
  top: 17px;
  width: 9px;
  height: 1px;
  background: rgba(148, 163, 184, 0.32);
}

.app-filter-folder.ex-col {
  display: block;
  gap: 0;
}

.app-filter-folder > summary {
  list-style: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  min-height: 34px;
  padding: 7px 4px 7px 0;
  color: #f0b90b;
  font-family: var(--table-header-font-family);
  font-size: var(--table-header-font-size);
  font-weight: var(--table-header-font-weight);
  letter-spacing: var(--table-header-letter-spacing);
  text-transform: var(--table-header-text-transform);
  line-height: 1.1;
  cursor: pointer;
  user-select: none;
}

.app-filter-folder > summary::-webkit-details-marker {
  display: none;
}

.app-filter-folder > summary::after {
  content: "";
  width: 8px;
  height: 8px;
  flex: 0 0 auto;
  border-right: 2px solid rgba(233,238,244,0.62);
  border-bottom: 2px solid rgba(233,238,244,0.62);
  transform: rotate(45deg) translateY(-2px);
  transition: transform 0.14s ease, border-color 0.14s ease;
}

.app-filter-folder[open] > summary::after {
  transform: rotate(225deg) translate(-2px, -1px);
  border-color: rgba(240,185,11,0.90);
}

.app-filter-folder > summary:hover,
.app-filter-folder > summary:focus-visible {
  outline: none;
  color: #ffd45a;
  background: transparent;
}

.app-filter-folder-body,
.app-filter-folder > .arb-filter-pane {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-left: 0;
  padding: 0 0 8px;
  border-left: 0;
}

.app-filter-folder .arb-filter-pane {
  background: transparent;
}

.app-filter-folder .arb-filter-list {
  max-height: 240px;
}

.app-table-controls-sidebar #arbListFilterPop .arb-filter-field-head > .arb-alert-field-label,
.app-table-controls-sidebar #liveListFilterPop .arb-filter-field-head > .arb-alert-field-label,
.app-table-controls-sidebar #arbListFilterPop .arb-filter-note,
.app-table-controls-sidebar #liveListFilterPop .arb-filter-note {
  display: none;
}

.app-exchange-flat-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
}

.app-exchange-flat-list .arb-ch {
  width: 100%;
}

@media (max-width: 820px) {
  :root {
    --app-shell-sidebar-collapsed: 60px;
    --app-shell-sidebar-expanded: min(252px, calc(100vw - 18px));
    --app-table-controls-collapsed: 56px;
    --app-table-controls-expanded: min(360px, calc(100vw - 18px));
  }

  .page-shell,
  .page-shell.page-shell-arbitrage,
  .page-shell.page-shell-live,
  .page-shell.page-shell-historical {
    padding-left: calc(var(--app-shell-sidebar-collapsed) + 10px);
    padding-right: 8px;
  }

  .page-shell.page-shell-arbitrage,
  .page-shell.page-shell-live {
    padding-right: calc(var(--app-table-controls-collapsed) + 10px);
  }

  body.is-shell-sidebar-expanded .page-shell,
  body.is-shell-sidebar-expanded .page-shell.page-shell-arbitrage,
  body.is-shell-sidebar-expanded .page-shell.page-shell-live,
  body.is-shell-sidebar-expanded .page-shell.page-shell-historical {
    padding-left: calc(var(--app-shell-sidebar-expanded) + 10px);
  }

  body.is-table-controls-expanded .page-shell.page-shell-arbitrage,
  body.is-table-controls-expanded .page-shell.page-shell-live {
    padding-right: calc(var(--app-table-controls-expanded) + 10px);
  }

  .page-shell > .app-shell-nav.card,
  .page-shell.page-shell-arbitrage .app-shell-nav,
  .page-shell.page-shell-live .app-shell-nav,
  .page-shell.page-shell-historical .app-shell-nav {
    left: 6px;
    top: 6px;
    bottom: 6px;
    border-radius: 10px !important;
  }

  .app-table-controls-sidebar.arb-controls,
  .app-table-controls-sidebar.arb-controls-layout,
  .app-table-controls-sidebar.arb-controls-layout-arb,
  .app-table-controls-sidebar.arb-controls-layout-table {
    right: 6px;
    top: 6px;
    bottom: 6px;
    border-radius: 10px !important;
  }

  .app-table-controls-sidebar .arb-tabs {
    grid-template-columns: minmax(0, 1fr);
  }

  .app-shell-logo {
    width: 42px;
  }

  .app-shell-link-ico,
  .app-shell-link-utility .app-shell-link-ico {
    width: 30px;
    flex-basis: 30px;
  }
}

/* === MOBILE: horizontal scroll for tables + pin right controls sidebar ===
   2026-05-20: на phone tables (Arbitrage / Live / Historical) шире viewport
   и контент уезжал за правый край без возможности скролла. Делаем wrap'у
   overflow-x: auto. Также правая боковая панель (`.app-table-controls-
   sidebar`) на mobile в expanded state раскрывалась поверх данных — пиним
   её к правому краю чтобы она не "плавала наверху". */
@media (max-width: 820px) {
  .page-shell.page-shell-arbitrage #arbCard > .table-wrap,
  .page-shell.page-shell-live      #liveCard > .table-wrap,
  .page-shell.page-shell-historical #histCard > .table-wrap,
  .page-shell.page-shell-arbitrage .table-wrap,
  .page-shell.page-shell-live      .table-wrap,
  .page-shell.page-shell-historical .table-wrap {
    overflow-x: auto;
    overflow-y: visible;
    -webkit-overflow-scrolling: touch;
  }

  .page-shell.page-shell-arbitrage .table-wrap > table,
  .page-shell.page-shell-live      .table-wrap > table,
  .page-shell.page-shell-historical .table-wrap > table {
    min-width: max-content;
  }

  /* #liveTable forces width: 100% !important + min-width: 100% !important
     + table-layout: fixed in live_table.css so the table always squeezes
     into the viewport with no horizontal scroll. On phones we want natural
     width so the user can pan to the day-by-day history columns. */
  .page-shell.page-shell-live #liveTable {
    width: auto !important;
    min-width: max-content !important;
    table-layout: auto !important;
  }

  /* Some upstream rules set overflow: visible on the live/arb wrap; force
     scroll horizontally with priority so the wider table actually pans. */
  .page-shell.page-shell-live #liveCard > .table-wrap,
  .page-shell.page-shell-arbitrage #arbCard > .table-wrap {
    overflow-x: auto !important;
    overflow-y: visible !important;
    max-width: 100vw !important;
  }

  /* live_table.css freezes the first 6 columns (EX/BOOK/PRICE/LIQ/FUND/PAY)
     as sticky-left so they stay visible while history days scroll. On a
     phone that "splits" the table into two parts — the left half doesn't
     move and the user can't pan through everything. Drop the sticky on
     mobile so the whole row scrolls together. */
  .page-shell.page-shell-live #liveTable thead th:nth-child(-n+6),
  .page-shell.page-shell-live #liveTable tbody tr[data-lt-group-role="exchange"] td:nth-child(-n+6),
  .page-shell.page-shell-live #liveTable tbody tr.lt-best-row td.lt-best-cell {
    position: static !important;
    left: auto !important;
  }

  /* Right controls sidebar: keep its desktop layout (fixed to the right
     edge, full viewport height, collapsed by default). Tap the handle
     to expand. Just make sure the background is fully opaque so the
     table behind it doesn't bleed through. */
  .app-table-controls-sidebar.arb-controls,
  .app-table-controls-sidebar.arb-controls-layout,
  .app-table-controls-sidebar.arb-controls-layout-arb,
  .app-table-controls-sidebar.arb-controls-layout-table {
    background: rgba(26, 23, 20, 0.97) !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
  }
}

/* ==========================================================================
   CLASSIC THEME — app-shell sidebar (opt-in). Additive: only takes effect
   when <html data-theme="classic"> (set by partials/theme_boot.html, so only
   on pages that ship the toggle). Gold default below is untouched.
   Recolors the gold accent/pill-tints/border to the neutral cool-grey family
   (matches the page classic palette) + a distinct grey sidebar panel bg.
   Test-only.
   ========================================================================== */
html[data-theme="classic"] {
  --app-shell-sidebar-border: rgba(132, 142, 156, 0.20);
  --app-shell-sidebar-bg: rgba(7, 9, 12, 0.95); /* same as page bg (#07090c) — sidebar blends in */
}
html[data-theme="classic"] .app-shell-nav { --accent: #a8b1bd; }
html[data-theme="classic"] .app-shell-link:hover,
html[data-theme="classic"] .app-shell-link:focus-visible {
  background: rgba(132, 142, 156, 0.12);
  border-color: rgba(132, 142, 156, 0.20);
}
html[data-theme="classic"] .app-shell-link.is-active,
html[data-theme="classic"] .app-shell-link.app-shell-link-utility.is-active {
  background: rgba(132, 142, 156, 0.15);
  border-color: rgba(132, 142, 156, 0.30);
}
html[data-theme="classic"] .app-shell-link.is-active { text-shadow: 0 0 10px rgba(132, 142, 156, 0.18); }
html[data-theme="classic"] .app-shell-sublink:hover,
html[data-theme="classic"] .app-shell-sublink:focus-visible { background: rgba(132, 142, 156, 0.12); }
html[data-theme="classic"] .app-shell-sublink.is-active {
  color: rgba(200, 207, 216, 0.98);
  background: rgba(132, 142, 156, 0.13);
}
html[data-theme="classic"] .app-shell-tile:hover {
  border-color: rgba(132, 142, 156, 0.4);
  background:
    linear-gradient(180deg, rgba(132, 142, 156, 0.1), rgba(255, 255, 255, 0.02)),
    rgba(255, 255, 255, 0.03);
}
/* Sidebar PANEL background — gold default hardcodes a warm near-black
   (#100d09 / rgba(13,11,8,…)). Recolor to the SAME colour as the page
   background (#07090c) so the sidebar blends in (user request). */
html[data-theme="classic"] .page-shell > .app-shell-nav.card,
html[data-theme="classic"] .page-shell.page-shell-arbitrage .app-shell-nav,
html[data-theme="classic"] .page-shell.page-shell-live .app-shell-nav,
html[data-theme="classic"] .page-shell.page-shell-historical .app-shell-nav {
  background: #07090c !important;
}
html[data-theme="classic"] .app-shell-nav,
html[data-theme="classic"] .page > .app-shell-nav.card {
  background: rgba(7, 9, 12, 0.95);
  border-bottom-color: rgba(132, 142, 156, 0.16);
}
/* flip the hardcoded-gold (242,217,164) active icons + accordion chevron to grey in classic */
html[data-theme="classic"] .app-shell-link.is-active .app-shell-link-ico,
html[data-theme="classic"] .app-shell-link.app-shell-link-utility.is-active .app-shell-link-ico {
  color: rgba(200, 207, 216, 0.98);
}
html[data-theme="classic"] .app-shell-sublink.is-active .app-shell-sublink-ico {
  color: rgba(200, 207, 216, 0.98);
}
html[data-theme="classic"] body.is-shell-sidebar-expanded .app-shell-link:has(+ .app-shell-sublinks)::after {
  border-right-color: rgba(200, 207, 216, 0.95);
  border-bottom-color: rgba(200, 207, 216, 0.95);
}

/* ==========================================================================
   TOP CONTROL TOOLBAR (no right side panel)  2026-06-19
   Controls live in the table header: row 1 = title · search · theme/lang,
   row 2 = segmented toggles + filter dropdowns. The original toggle stack is
   kept in the DOM (hidden) so all controllers keep working; segment buttons
   drive those checkboxes (see panel_controls_enhance.js).
   ========================================================================== */
.app-table-controls-head { row-gap: 8px; position: relative; }
/* Header capsule: the ticker search, centered as a content-width inset pill.
   Theme + language are pulled out to the top-right corner (see below). */
.app-table-controls-head > .app-header-capsule {
  flex: 1 1 100%;
  width: 100%;
  min-width: 0;
  box-sizing: border-box;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 12px;
  padding: 0;
  background: transparent;
  border: 0;
}
/* search truly centered (col 2), theme + language in the right corner (col 3) */
.app-header-capsule > .app-table-top-controls {
  grid-column: 2;
  justify-self: center;
}
.app-header-capsule > .controls-theme-toggles.app-topbar-theme {
  grid-column: 3;
  justify-self: end;
}
.app-header-capsule .app-table-top-controls {
  flex: 0 1 auto;
  width: auto;
  min-width: 0;
  display: flex;
  justify-content: flex-start;
}
.app-header-capsule .arb-head-group-center-search {
  flex: 0 1 auto;
  width: auto;
  justify-content: flex-start;
}
.app-header-capsule .arb-search {
  flex: 0 0 auto;
  width: 340px;
  max-width: 100%;
  margin-top: 0;
}
.app-header-capsule .arb-search input {
  width: 100%;
  height: 34px;
}
.app-header-capsule-div {
  flex: 0 0 auto;
  width: 1px;
  height: 24px;
  background: rgba(255, 255, 255, 0.09);
}
.app-header-capsule .controls-theme-toggles.app-topbar-theme {
  flex: 0 0 auto;
  margin: 0;
  padding: 0;
  border-bottom: 0;
}

.arb-controls-topbar {
  flex: 1 1 100%;
  width: 100%;
  min-width: 0;
  display: block;
  margin: 2px 0 0;
}
.arb-controls-topbar .app-table-controls-handle { display: none !important; }
.arb-controls-topbar .app-table-controls-scroll {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  flex-wrap: nowrap;
  gap: 10px;
  padding: 2px 0;
  background: transparent;
  border: 0;
  /* override the collapsed-rail base state (opacity:0 / shifted / inert) */
  opacity: 1;
  pointer-events: auto;
  transform: none;
  min-width: 0;
  overflow: visible;
}
/* title row: keep the heading visible and left-aligned */
.app-table-controls-head > .arb-left { flex: 0 1 auto; min-width: 0; }
/* original toggle stack: kept for the controllers, hidden — segments replace it */
.arb-controls-topbar .arb-head-group-left { display: none !important; }

/* Segment toolbar */
.arb-segbar {
  display: inline-flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
}
.arb-segctl {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  height: 34px;
  padding: 0;
  background: transparent;
  border: 0;
  box-sizing: border-box;
}
.arb-seg-ico {
  display: inline-flex;
  align-items: center;
  color: #d9a558;
  flex: 0 0 auto;
}
.arb-seg-ico svg { width: 15px; height: 15px; display: block; }
.arb-seg-track {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  height: 34px;
  padding: 3px;
  box-sizing: border-box;
  background: #0b0e11;
  border: 1px solid #262b33;
  border-radius: 9px;
}
.arb-seg-opt {
  appearance: none;
  -webkit-appearance: none;
  border: 0;
  background: transparent;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  height: 26px;
  padding: 0 10px;
  border-radius: 6px;
  font-family: Inter, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-size: 12px;
  font-weight: 500;
  line-height: 1;
  color: #848e9c;
  white-space: nowrap;
  transition: background 0.14s ease, color 0.14s ease;
}
.arb-seg-opt svg { width: 12px; height: 12px; display: block; }
.arb-seg-opt:hover { color: #eaecef; }
.arb-seg-opt.is-active {
  background: #2f353d;
  color: #ffffff;
  box-shadow: none;
}
.arb-seg-opt.arb-seg-opt-carry { color: #6ee7b7; }
.arb-seg-opt.arb-seg-opt-carry.is-active { color: #0b0e11; background: #6ee7b7; box-shadow: none; }
.arb-seg-opt.arb-seg-opt-borrow { color: #f0997b; }
.arb-seg-opt.arb-seg-opt-borrow.is-active { color: #0b0e11; background: #f0997b; box-shadow: none; }

/* Filters: inline pills, pushed to the right edge of the toolbar */
.arb-controls-topbar .arb-head-group-right {
  display: inline-flex;
  flex-direction: row;
  align-items: center;
  gap: 6px;
  width: auto;
  margin-left: 2px;
  padding-left: 14px;
  border-left: 1px solid rgba(255, 255, 255, 0.09);
}
.arb-controls-topbar .arb-filters { position: relative; width: auto; }
.arb-controls-topbar .arb-filter-btn {
  height: 34px;
  min-width: 0;
  border-radius: 9px;
  border: 1px solid #262b33;
  background: rgba(255, 255, 255, 0.025);
  padding: 0 12px;
  gap: 7px;
  font-size: 12px;
  font-weight: 500;
}
.arb-controls-topbar #arbFilterBtn,
.arb-controls-topbar #liveFilterBtn { min-width: 0; }
.arb-controls-topbar .arb-filter-btn .arb-mini-ico { color: #d9a558; }
.arb-controls-topbar .arb-filter-btn:hover,
.arb-controls-topbar .arb-filter-btn:focus-visible,
.arb-controls-topbar .arb-filter-btn[aria-expanded="true"] {
  background: rgba(255, 255, 255, 0.07);
  border-color: rgba(200, 154, 107, 0.35);
  color: var(--text);
}

/* Apply pill — the bar stays in-flow but collapses to nothing; the gold
   "Применить" button appears only when there are pending filter changes. */
.arb-controls-topbar .arb-filter-apply-bar {
  display: inline-flex !important;
  align-items: center;
  margin: 0;
  padding: 0;
  border-top: 0;
  opacity: 1 !important;
  transform: none !important;
  pointer-events: auto !important;
  width: auto;
}
.arb-controls-topbar .arb-filter-apply-btn { display: none; }
.arb-controls-topbar .arb-filter-apply-btn.has-pending {
  display: inline-flex;
  height: 36px;
  border-radius: 10px;
  padding: 0 14px;
}

/* Classic (grey) theme — recolor the gold accents */
html[data-theme="classic"] .arb-controls-topbar .app-table-controls-scroll { border-color: rgba(132, 142, 156, 0.20); }
html[data-theme="classic"] .arb-seg-ico,
html[data-theme="classic"] .arb-controls-topbar .arb-filter-btn .arb-mini-ico { color: #a8b1bd; }
html[data-theme="classic"] .arb-seg-opt.is-active { box-shadow: inset 0 0 0 1px rgba(132, 142, 156, 0.30); }
html[data-theme="classic"] .arb-controls-topbar .arb-filter-btn:hover,
html[data-theme="classic"] .arb-controls-topbar .arb-filter-btn[aria-expanded="true"] { border-color: rgba(132, 142, 156, 0.35); }
/* Narrow screens: let the toolbar wrap and drop the inline divider */
@media (max-width: 1040px) {
  .arb-controls-topbar .app-table-controls-scroll { flex-wrap: wrap; }
  .arb-controls-topbar .arb-head-group-right {
    border-left: 0;
    padding-left: 0;
    margin-left: 0;
  }
}

/* ==========================================================================
   COMPACT FILTER DROPDOWNS (Биржи / Фильтр / Алерт)  2026-06-19
   Tidy, narrow dropdowns (the list filter was up to 1040px wide); left-align
   folder labels (were stretched/centered); tighten rows, icons and chips.
   ========================================================================== */
#arbFilterPop, #liveFilterPop { width: min(460px, 92vw) !important; }
#arbListFilterPop, #liveListFilterPop { width: min(360px, 92vw) !important; }
#arbAlertPop { width: min(440px, 92vw) !important; }
/* Alert popover top row (spread input + bell + test + exchanges) can wrap so it
   never overlaps in the compact width */
.arb-filter-pop .arb-alert-top { flex-wrap: wrap; row-gap: 10px; }
.arb-filter-pop .arb-alert-pop-head { margin-bottom: 8px; }

.arb-filter-pop {
  padding: 8px;
  border-radius: 12px;
  border: 1px solid rgba(200, 154, 107, 0.22);
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.5);
}
.arb-filter-pop.arb-filter-pop-split { padding: 8px; }

/* Folder rows: left-aligned label + chevron pinned right, compact height */
.arb-filter-pop .app-filter-folder > summary {
  justify-content: flex-start;
  min-height: 30px;
  padding: 6px 6px;
}
.arb-filter-pop .app-filter-folder > summary::after { margin-left: auto; }

/* Quick-action chips (Все / Сброс / DEX / CEX / SPOT) */
.arb-filter-pop .arb-filter-actions { gap: 4px; margin-bottom: 8px; }
.arb-filter-pop .arb-action { height: 26px; padding: 0 9px; font-size: 12px; }

/* Exchange checklist: tighter rows + smaller icons (2 columns) */
.arb-filter-pop .ex-split,
.arb-filter-pop .ex-split.ex-split-spot { gap: 4px 14px; }
.arb-filter-pop .arb-ch { padding: 4px 4px; gap: 8px; font-size: 12px; }
.arb-filter-pop .arb-ch .ex-icon { width: 18px; height: 18px; }
.arb-filter-pop .arb-ch input { width: 16px; height: 16px; }
.arb-filter-pop .arb-filter-list { max-height: 230px; padding-right: 4px; }

/* Threshold presets compact */
.arb-filter-pop .arb-filter-presets { gap: 5px; }
.arb-filter-pop .arb-filter-preset { height: 24px; padding: 0 9px; }

/* Alert fields tighter */
.arb-filter-pop .arb-alert-field { margin-bottom: 8px; }
.arb-filter-pop .arb-alert-subpanel { padding: 8px; }