:root {
  --bg: #02070b;
  --bg-radial: rgba(14, 51, 61, 0.26);
  --panel: #071016;
  --panel-2: #0a151c;
  --panel-3: #0d1b23;
  --row: rgba(10, 23, 30, 0.78);
  --row-hover: rgba(17, 39, 48, 0.78);
  --text: #eef5f7;
  --muted: #8799a5;
  --line: rgba(99, 129, 143, 0.16);
  --line-strong: rgba(0, 217, 198, 0.36);
  --accent: #10e0c0;
  --accent-bright: #35f5d0;
  --wx-accent-red: #ff4d5f;
  --wx-accent-red-rgb: 255, 77, 95;
  --spot-accent: #d47438;
  --icon-muted: #7f95a3;
  --accent-soft: rgba(8, 214, 193, 0.12);
  --accent-faint: rgba(8, 214, 193, 0.05);
  --panel-radius: 14px;
  --brand-logo-x: -43px;
  --brand-logo-y: -17px;
  --brand-logo-w: 398px;
  --brand-title-x: 344px;
  --brand-title-y: -5px;
  --brand-title-w: 410px;
  --brand-telegram-x: 1525px;
  --brand-telegram-y: 29px;
  --brand-telegram-w: 300px;
  --brand-poster-x: 1511px;
  --brand-poster-y: 146px;
  --brand-poster-w: 326px;
  --brand-poster-rotate: 0deg;
  --brand-scanner-x: 18px;
  --brand-scanner-y: 145px;
  --brand-scanner-w: 1460px;
  --brand-status-x: 1000px;
  --brand-status-y: 26px;
  --brand-status-w: 286px;
  --brand-separatorTop-x: 228px;
  --brand-separatorTop-y: 40px;
  --brand-separatorTop-w: 180px;
  --brand-feedbackLine-x: 1423px;
  --brand-feedbackLine-y: 747px;
  --brand-feedbackLine-w: 180px;
  --brand-feedbackText-x: 1458px;
  --brand-feedbackText-y: 694px;
  --brand-feedbackText-w: 390px;
  --layout-category-x: 17px;
  --layout-category-y: 15px;
  --layout-category-w: 354px;
  --layout-market-x: 389px;
  --layout-market-y: 18px;
  --layout-market-w: 212px;
  --layout-status-x: 1000px;
  --layout-status-y: 26px;
  --layout-status-w: 286px;
  --layout-ranking-x: 1305px;
  --layout-ranking-y: 15px;
  --layout-ranking-w: 138px;
  --layout-controls-h: 67px;
}

* {
  box-sizing: border-box;
}

html {
  background: var(--bg);
  overflow-x: hidden;
  overflow-y: auto;
}

body {
  margin: 0;
  min-height: 100vh;
  overflow-x: hidden;
  overflow-y: auto;
  background:
    radial-gradient(circle at 50% -16%, rgba(4, 12, 18, 0.3), transparent 35rem),
    linear-gradient(180deg, rgba(1, 5, 9, 0.72) 0%, rgba(2, 7, 11, 0.82) 48%, rgba(0, 0, 0, 0.9) 100%),
    url("/assets/bg/space-asteroids.png") center top / cover no-repeat fixed,
    #010406;
  color: var(--text);
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

button {
  font: inherit;
}

.app-boot-fallback {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: grid;
  place-content: center;
  gap: 12px;
  min-height: 100vh;
  padding: 24px;
  background: #02070b;
  color: var(--text);
  text-align: center;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

.app-js-started .app-boot-fallback {
  display: none;
}

/* loading-screen-title-red-1: use bright red accent for boot/loading title */
.app-boot-title {
  color: var(--wx-accent-red);
  font-size: 18px;
  font-weight: 900;
  letter-spacing: 0;
  text-transform: uppercase;
  text-shadow:
    0 0 12px rgba(var(--wx-accent-red-rgb), 0.34),
    0 0 28px rgba(var(--wx-accent-red-rgb), 0.16);
}

.app-boot-text {
  color: var(--muted);
  font-size: 14px;
}

.app-runtime-error {
  position: fixed;
  left: 12px;
  right: 12px;
  bottom: 12px;
  z-index: 10000;
  max-width: 680px;
  margin: 0 auto;
  padding: 12px 14px;
  border: 1px solid rgba(255, 157, 46, 0.48);
  border-radius: 10px;
  background: rgba(8, 16, 22, 0.96);
  color: #f6d7c0;
  font-size: 13px;
  line-height: 1.35;
  box-shadow: 0 18px 42px rgba(0, 0, 0, 0.45);
}

.brand-layer-item img[data-deferred-src]:not([src]) {
  min-height: 24px;
  opacity: 0;
}

.page-shell {
  width: min(calc(100vw - 32px), 1860px);
  margin: 0 auto;
  padding-top: 16px;
  padding-bottom: 32px;
}

.brand-stage {
  position: relative;
  width: 100%;
  min-height: var(--brand-stage-min-h, min(980px, calc(100vh - 32px)));
  overflow: visible;
}
.page-hero {
  position: relative;
  z-index: 8;
  display: flex;
  align-items: flex-start;
  min-height: 238px;
  padding: 10px 0 0 28px;
  pointer-events: none;
}

.page-hero .brand-layer-item,
.page-hero .brand-block--motion {
  position: relative;
  left: auto;
  top: auto;
  width: 292px;
}

.brand-layer-item {
  position: absolute;
  display: block;
  width: var(--brand-item-w);
  z-index: 3;
  user-select: none;
  pointer-events: none;
}

.brand-layer-item img {
  display: block;
  width: 100%;
  height: auto;
  pointer-events: none;
}

.brand-block,
.brand-block--motion {
  left: 0;
  top: 0;
  width: 292px;
  min-height: 214px;
  z-index: 9;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  gap: 0;
  padding-left: 0;
  overflow: visible;
  pointer-events: none;
}

.worksxxx-logo-motion {
  width: 260px;
  height: 135px;
  flex: 0 0 260px;
  object-fit: contain;
  display: block;
  pointer-events: none;
  background: transparent;
  user-select: none;
  -webkit-user-select: none;
}

.worksxxx-title-image {
  width: 250px;
  height: 48px;
  object-fit: contain;
  display: block;
  margin-top: -8px;
  pointer-events: none;
  user-select: none;
  -webkit-user-select: none;
  -webkit-user-drag: none;
  filter: drop-shadow(0 0 10px rgba(255, 255, 255, 0.28));
}


.brand-copy--hero {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  margin-top: -8px;
}
.brand-title {
  color: #00ffd0;
  font-size: 32px;
  font-weight: 900;
  line-height: 1;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  text-shadow: 0 0 16px rgba(0, 255, 208, 0.22);
  white-space: nowrap;
}
.worksxxx-title-image {
  width: 270px;
  height: 52px;
  object-fit: contain;
  display: block;
  margin-top: 0;
  pointer-events: none;
  user-select: none;
  -webkit-user-select: none;
  -webkit-user-drag: none;
  filter:
    drop-shadow(0 0 10px rgba(255, 255, 255, 0.42))
    drop-shadow(0 2px 12px rgba(0, 0, 0, 0.72));
}
.brand-subtitle {
  margin-top: 4px;
  color: rgba(255, 255, 255, 0.58);
  font-size: 13px;
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: 0;
  text-align: center;
  white-space: nowrap;
}

.brand-telegram {
  left: max(8px, min(var(--brand-telegram-x), calc(100vw - var(--brand-telegram-w) - 16px)));
  top: var(--brand-telegram-y);
  display: inline-flex;
  align-items: center;
  width: fit-content;
  max-width: max-content;
  flex: 0 0 auto;
  z-index: 12;
  pointer-events: auto;
}

.brand-telegram img {
  width: var(--brand-telegram-w);
  max-width: calc(100vw - 16px);
}

.brand-telegram[href=""],
.brand-telegram[href="#"] {
  pointer-events: none;
}

.brand-poster {
  left: var(--brand-poster-x);
  top: var(--brand-poster-y);
  width: var(--brand-poster-w);
  z-index: 1;
  transform: rotate(var(--brand-poster-rotate));
  transform-origin: center center;
  border-radius: var(--panel-radius);
  overflow: hidden;
}

.brand-poster img {
  border-radius: inherit;
  filter: saturate(1.35) contrast(1.06) brightness(1.03);
}

.brand-separator-top {
  left: var(--brand-separatorTop-x);
  top: var(--brand-separatorTop-y);
  width: var(--brand-separatorTop-w);
  z-index: 6;
}

.brand-feedback-line {
  left: var(--brand-feedbackLine-x);
  top: var(--brand-feedbackLine-y);
  width: var(--brand-feedbackLine-w);
  z-index: 2;
}

.brand-feedback-text {
  left: var(--brand-feedbackText-x);
  top: var(--brand-feedbackText-y);
  width: var(--brand-feedbackText-w);
  z-index: 2;
  color: var(--accent);
}

.brand-feedback-text img {
  filter: brightness(0) saturate(100%) invert(74%) sepia(89%) saturate(1225%) hue-rotate(119deg) brightness(92%) contrast(87%);
}

.panel {
  width: 100%;
  max-width: 100%;
  overflow: hidden;
  border: 1px solid rgba(62, 91, 104, 0.52);
  border-radius: var(--panel-radius);
  background:
    radial-gradient(circle at 22% 0%, rgba(16, 224, 192, 0.07), transparent 29rem),
    linear-gradient(180deg, rgba(8, 17, 23, 0.985), rgba(3, 9, 13, 0.995));
  box-shadow:
    0 28px 78px rgba(0, 0, 0, 0.52),
    0 0 48px rgba(16, 224, 192, 0.035),
    0 0 0 1px rgba(255, 255, 255, 0.018) inset,
    0 1px 0 rgba(255, 255, 255, 0.045) inset;
}

.scanner-panel {
  position: absolute;
  left: var(--brand-scanner-x);
  top: var(--brand-scanner-y);
  z-index: 20;
  width: calc(100vw - var(--brand-scanner-x) - 18px);
  max-width: calc(100vw - var(--brand-scanner-x) - 18px);
  margin-top: 0;
  min-width: 0;
  pointer-events: auto;
  container-type: inline-size;
  container-name: scanner-panel;
}
body:not(.brand-edit-mode) .scanner-panel {
  top: calc(var(--brand-scanner-y) + 112px);
}

.brand-edit-mode [data-brand-item] {
  cursor: move;
  outline: 1px dashed rgba(53, 245, 208, 0.72);
  outline-offset: 3px;
  pointer-events: auto;
}

.brand-edit-mode [data-brand-item]::after {
  content: attr(data-brand-item);
  position: absolute;
  left: 0;
  top: -20px;
  padding: 2px 6px;
  border: 1px solid rgba(53, 245, 208, 0.32);
  border-radius: 4px;
  background: rgba(2, 8, 12, 0.92);
  color: var(--accent-bright);
  font-size: 11px;
  font-weight: 850;
  line-height: 1.15;
  text-transform: uppercase;
  z-index: 60;
}

.brand-edit-mode [data-brand-item].is-selected {
  outline-color: #ff9d2e;
  box-shadow: 0 0 0 1px rgba(255, 157, 46, 0.32);
}

.brand-separator-edit-mode [data-brand-item] {
  cursor: default;
  outline: none;
  box-shadow: none;
  pointer-events: none;
}

.brand-separator-edit-mode [data-brand-item]::after {
  display: none;
}

.brand-separator-edit-mode [data-brand-item="separatorTop"] {
  cursor: move;
  outline: 1px dashed rgba(53, 245, 208, 0.72);
  outline-offset: 3px;
  pointer-events: auto;
}

.brand-separator-edit-mode [data-brand-item="separatorTop"]::after {
  display: block;
  content: "separatorTop";
}

.brand-separator-edit-mode [data-brand-item="separatorTop"].is-selected {
  outline-color: #ff9d2e;
  box-shadow: 0 0 0 1px rgba(255, 157, 46, 0.32);
}

.brand-edit-mode .brand-telegram {
  pointer-events: auto;
}

.brand-edit-mode .brand-poster {
  display: block !important;
}

.scanner-panel[data-brand-item] {
  display: block;
}

.status-line {
  position: absolute;
  left: max(8px, calc(var(--brand-scanner-x) + var(--brand-status-x)));
  top: calc(var(--brand-scanner-y) + var(--brand-status-y));
  width: min(var(--brand-status-w), calc(100vw - 16px));
  z-index: 30;
  min-height: 24px;
  justify-content: center;
  background: transparent;
  pointer-events: none;
}

.brand-edit-mode .scanner-panel {
  position: absolute;
  left: var(--brand-scanner-x);
  top: var(--brand-scanner-y);
  width: var(--brand-scanner-w);
  margin-top: 0;
  overflow: visible;
}

.brand-edit-mode .status-line {
  pointer-events: auto;
}

.brand-editor-panel {
  position: fixed;
  right: 16px;
  bottom: 16px;
  z-index: 50;
  display: grid;
  gap: 8px;
  pointer-events: auto;
  width: min(340px, calc(100vw - 32px));
  padding: 12px;
  border: 1px solid rgba(53, 245, 208, 0.35);
  border-radius: 10px;
  background: rgba(2, 8, 12, 0.95);
  box-shadow: 0 18px 48px rgba(0, 0, 0, 0.46);
  color: var(--text);
  font-size: 12px;
}

.brand-editor-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.brand-editor-title {
  color: var(--text);
  font-weight: 900;
}

.brand-editor-body {
  display: grid;
  gap: 8px;
}

.brand-editor-expand-tab {
  display: none;
}

.brand-editor-panel.is-collapsed {
  width: auto;
  padding: 0;
  border: 0;
  background: transparent;
  box-shadow: none;
  pointer-events: none;
}

.brand-editor-panel.is-collapsed .brand-editor-header,
.brand-editor-panel.is-collapsed .brand-editor-body {
  display: none;
}

.brand-editor-panel.is-collapsed .brand-editor-expand-tab {
  display: inline-flex;
  min-height: 34px;
  align-items: center;
  justify-content: center;
  padding: 8px 12px;
  border: 1px solid rgba(53, 245, 208, 0.42);
  border-radius: 999px;
  background: rgba(2, 8, 12, 0.9);
  color: var(--accent-bright);
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.32);
  pointer-events: auto;
}

.brand-editor-panel label {
  display: grid;
  gap: 4px;
  color: var(--muted);
  font-weight: 800;
}

.brand-editor-panel select,
.brand-editor-panel button {
  min-height: 32px;
  border: 1px solid rgba(67, 94, 106, 0.72);
  border-radius: 5px;
  background: rgba(8, 18, 24, 0.96);
  color: var(--text);
  font: inherit;
  font-weight: 800;
}

.brand-editor-panel button {
  cursor: pointer;
}

.brand-editor-panel button:hover {
  border-color: rgba(8, 214, 193, 0.78);
  color: var(--accent);
}

.brand-editor-actions,
.brand-editor-adjustments {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px;
}

.brand-editor-selected {
  color: var(--text);
  font-weight: 850;
}

.brand-editor-readout {
  min-height: 16px;
  color: var(--muted);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.brand-export-output {
  display: none;
  width: 100%;
  min-height: 92px;
  resize: vertical;
  border: 1px solid rgba(67, 94, 106, 0.72);
  border-radius: 5px;
  padding: 8px;
  background: rgba(1, 5, 8, 0.96);
  color: var(--accent-bright);
  font: 11px/1.35 ui-monospace, SFMono-Regular, Consolas, "Liberation Mono", monospace;
}

.control-bar {
  display: grid;
  grid-template-columns: max-content max-content max-content minmax(240px, 1fr);
  grid-template-areas: "filters market exchanges action";
  align-items: center;
  gap: 12px 18px;
  min-width: 0;
  overflow: visible;
  padding: 14px 16px;
  position: relative;
  z-index: 22;
  pointer-events: auto;
}

.scanner-controls {
  width: 100%;
}

.control-group {
  min-width: 0;
}

.filter-tabs {
  grid-area: filters;
}

.market-tabs {
  grid-area: market;
}

.exchange-tabs {
  grid-area: exchanges;
  max-width: 100%;
  overflow: hidden;
}

.action-status {
  grid-area: action;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  flex-direction: row-reverse;
  gap: 12px 18px;
  min-width: 0;
}

.control-left,
.control-right {
  display: contents;
}

.control-segment,
.filter-tabs,
.market-tabs,
.exchange-tabs {
  flex: 0 0 auto;
}

.market-controls,
.exchange-controls {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-width: max-content;
  padding: 0;
  position: relative;
  z-index: 22;
  pointer-events: auto;
}

.market-mode-group,
.exchange-group {
  display: inline-flex;
  align-items: center;
  min-width: max-content;
  flex-wrap: nowrap;
}

.exchange-mode[hidden] {
  display: none !important;
}

.market-mode,
.exchange-mode {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  flex: 0 0 auto;
  min-height: 32px;
  border: 1px solid rgba(67, 94, 106, 0.58);
  background: rgba(8, 18, 24, 0.84);
  color: var(--muted);
  cursor: pointer;
  font-size: 12px;
  font-weight: 900;
  letter-spacing: 0;
  padding: 7px 12px;
  transition:
    border-color 140ms ease,
    color 140ms ease,
    background 140ms ease,
    box-shadow 140ms ease;
  white-space: nowrap;
}

.market-mode:first-child,
.exchange-mode:first-child {
  border-radius: 5px 0 0 5px;
}

.market-mode:last-child,
.exchange-mode:last-child {
  border-radius: 0 5px 5px 0;
}

.market-mode + .market-mode,
.exchange-mode + .exchange-mode {
  margin-left: -1px;
}

.exchange-icon {
  width: 17px;
  height: 17px;
  object-fit: contain;
  display: inline-block;
  flex: 0 0 17px;
  pointer-events: none;
  user-select: none;
  -webkit-user-drag: none;
}

.exchange-label {
  display: inline-block;
  min-width: 0;
  pointer-events: none;
}

.market-mode.active,
.exchange-mode.active {
  border-color: rgba(8, 214, 193, 0.78);
  background: linear-gradient(180deg, rgba(8, 214, 193, 0.11), rgba(8, 214, 193, 0.035));
  color: var(--accent);
  box-shadow:
    0 0 0 1px rgba(8, 214, 193, 0.08) inset,
    0 0 22px rgba(8, 214, 193, 0.055);
}

.market-mode[data-market="spot"].active,
.market-mode.active[data-market="spot"],
body[data-market="spot"] .market-mode[data-market="spot"],
body[data-active-market="spot"] .market-mode[data-market="spot"] {
  border-color: var(--spot-accent);
  background: linear-gradient(180deg, rgba(212, 116, 56, 0.16), rgba(212, 116, 56, 0.052));
  color: var(--spot-accent);
  box-shadow:
    0 0 0 1px rgba(212, 116, 56, 0.12) inset,
    0 0 16px rgba(212, 116, 56, 0.22);
}

.market-label {
  display: none;
  justify-self: end;
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0;
  white-space: nowrap;
}

.tabs {
  padding: 14px 16px;
  border-bottom: 1px solid var(--line);
  background:
    linear-gradient(90deg, rgba(16, 224, 192, 0.042), transparent 34%),
    rgba(4, 11, 16, 0.68);
}

.table-controls {
  display: grid;
  align-items: center;
  gap: 12px 18px;
  position: relative;
  z-index: 22;
  pointer-events: auto;
}

.tab-group {
  display: inline-flex;
  gap: 0;
  min-width: max-content;
  flex-wrap: nowrap;
}

body[data-market="spot"] .category-controls,
body[data-active-market="spot"] .category-controls,
.category-controls.is-disabled {
  opacity: 0.5;
  pointer-events: none;
  filter: saturate(0.72);
}

.tab,
.rank-sort {
  min-height: 38px;
  border: 1px solid rgba(67, 94, 106, 0.58);
  background: rgba(8, 18, 24, 0.84);
  color: var(--muted);
  cursor: pointer;
  font-weight: 800;
  letter-spacing: 0;
  white-space: nowrap;
  transition:
    border-color 140ms ease,
    color 140ms ease,
    background 140ms ease,
    box-shadow 140ms ease;
  pointer-events: auto;
}

.tab {
  flex: 0 0 auto;
  padding: 8px 16px;
  border-radius: 0;
}

.tab:first-child {
  border-radius: 5px 0 0 5px;
}

.tab + .tab {
  margin-left: -1px;
}

.tab:last-child {
  border-radius: 0 5px 5px 0;
}

.tab.active,
.rank-sort.active {
  border-color: rgba(8, 214, 193, 0.78);
  background: linear-gradient(180deg, rgba(8, 214, 193, 0.11), rgba(8, 214, 193, 0.035));
  color: var(--accent);
  box-shadow:
    0 0 0 1px rgba(8, 214, 193, 0.08) inset,
    0 0 22px rgba(8, 214, 193, 0.055);
}

.status-row {
  flex: 0 1 auto;
  min-width: 0;
  color: var(--muted);
}

.status-line {
  display: flex;
  overflow: hidden;
  text-align: center;
  white-space: nowrap;
  font-size: 12px;
  line-height: 1.35;
  min-width: 0;
}

.status-line .updated {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
}

.scanner-status-dot {
  width: 8px;
  height: 8px;
  min-width: 8px;
  min-height: 8px;
  border-radius: 999px;
  display: inline-block;
  flex: 0 0 auto;
  background: rgba(139, 154, 166, 0.88);
}

.scanner-status-dot--live {
  background: #19e58f;
  box-shadow: 0 0 0 0 rgba(25, 229, 143, 0.55);
  animation: scanner-status-pulse 1.6s ease-in-out infinite;
}

.scanner-status-dot--last-good,
.scanner-status-dot--reconnecting,
.scanner-status-dot--degraded {
  background: #f5b84b;
  box-shadow: 0 0 10px rgba(245, 184, 75, 0.24);
}

.scanner-status-dot--reconnecting {
  animation: scanner-status-pulse-amber 1.6s ease-in-out infinite;
}

.scanner-status-dot--empty {
  background: #6f7d8c;
}

.scanner-status-text {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}

@keyframes scanner-status-pulse {
  0% {
    box-shadow: 0 0 0 0 rgba(25, 229, 143, 0.5);
    opacity: 1;
  }
  70% {
    box-shadow: 0 0 0 6px rgba(25, 229, 143, 0);
    opacity: 0.72;
  }
  100% {
    box-shadow: 0 0 0 0 rgba(25, 229, 143, 0);
    opacity: 1;
  }
}

@keyframes scanner-status-pulse-amber {
  0%, 100% {
    opacity: 1;
  }
  50% {
    opacity: 0.62;
  }
}

@media (prefers-reduced-motion: reduce) {
  .scanner-status-dot--live,
  .scanner-status-dot--reconnecting {
    animation: none;
  }
}

.control-bar .status-line {
  flex: 0 1 auto;
  position: static;
  left: auto;
  top: auto;
  width: auto;
  min-width: 0;
  z-index: 22;
  min-height: 0;
  justify-content: center;
  background: transparent;
  color: rgba(198, 213, 221, 0.94);
  opacity: 1;
  visibility: visible;
  pointer-events: none;
}

.control-bar .status-line .updated {
  overflow: hidden;
  text-overflow: ellipsis;
}

.rank-sort {
  flex: 0 0 auto;
  justify-self: auto;
  grid-column: auto;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  border-radius: 5px;
  padding: 8px 12px;
  font-size: 12px;
}

.rank-sort::before {
  content: "";
  width: 13px;
  height: 13px;
  display: inline-block;
  background:
    linear-gradient(to top, currentColor 0 55%, transparent 55%) left bottom / 3px 100% no-repeat,
    linear-gradient(to top, currentColor 0 78%, transparent 78%) center bottom / 3px 100% no-repeat,
    linear-gradient(to top, currentColor 0 100%, transparent 100%) right bottom / 3px 100% no-repeat;
  opacity: 0.95;
}

@container scanner-panel (max-width: 1180px) {
  .control-bar {
    grid-template-columns: max-content max-content minmax(0, max-content);
    grid-template-areas:
      "filters market exchanges"
      "action action action";
  }

  .action-status {
    justify-content: flex-start;
    flex-direction: row;
  }
}

@container scanner-panel (max-width: 920px) {
  .control-bar {
    grid-template-columns: max-content max-content;
    grid-template-areas:
      "filters market"
      "exchanges exchanges"
      "action action";
    align-items: start;
  }

  .exchange-tabs {
    justify-self: start;
  }
}

@container scanner-panel (max-width: 520px) {
  .control-bar {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas:
      "filters"
      "market"
      "exchanges"
      "action";
    gap: 10px 12px;
  }

  .filter-tabs,
  .market-tabs,
  .exchange-tabs,
  .action-status {
    width: 100%;
    max-width: 100%;
    min-width: 0;
  }

  .category-controls {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    width: 100%;
    min-width: 0;
  }

  .category-controls .tab {
    min-width: 0;
    width: 100%;
    padding-inline: 8px;
    text-align: center;
  }

  .exchange-controls,
  .exchange-group {
    min-width: 0;
  }

  .exchange-group {
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    width: 100%;
    min-width: 0;
    max-width: 100%;
    flex-wrap: nowrap;
    gap: 0;
    overflow: hidden;
  }

  .exchange-group .exchange-mode {
    min-width: 0;
    width: 100%;
    padding-inline: 5px;
    font-size: 10px;
    text-align: center;
  }

  .action-status {
    align-items: flex-start;
    flex-wrap: wrap;
    gap: 8px 12px;
  }
}

.table-wrap {
  width: 100%;
  max-width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  position: relative;
  z-index: 22;
  pointer-events: auto;
  background:
    linear-gradient(90deg, rgba(16, 224, 192, 0.032), transparent 31%),
    rgba(5, 12, 17, 0.82);
}

.scanner-table {
  position: relative;
  z-index: 22;
  width: 100%;
  min-width: 900px;
  table-layout: fixed;
  border-collapse: collapse;
  pointer-events: auto;
}

th,
td {
  padding: 14px 20px;
  border-bottom: 1px solid var(--line);
  text-align: right;
  white-space: nowrap;
}

thead th {
  background: rgba(2, 8, 12, 0.78);
  color: var(--muted);
}

.scanner-table tbody td:nth-child(2) {
  color: var(--accent);
}

th:first-child,
td:first-child {
  text-align: left;
}

th button {
  width: 100%;
  border: 0;
  background: transparent;
  color: inherit;
  cursor: pointer;
  font: inherit;
  font-size: 12px;
  font-weight: 850;
  letter-spacing: 0.01em;
  text-align: inherit;
  pointer-events: auto;
}

th button:hover {
  color: var(--text);
}

tbody tr {
  background:
    linear-gradient(90deg, rgba(7, 25, 31, 0.34), transparent 40%),
    var(--row);
  transition:
    background 140ms ease,
    box-shadow 140ms ease,
    color 140ms ease;
}

tbody tr:hover {
  background:
    linear-gradient(90deg, rgba(16, 224, 192, 0.047), transparent 48%),
    var(--row-hover);
}

tbody tr.rank-1 {
  background:
    linear-gradient(90deg, rgba(16, 224, 192, 0.145), rgba(16, 224, 192, 0.032) 43%, transparent 100%),
    var(--row);
  box-shadow: inset 3px 0 0 rgba(16, 224, 192, 0.88);
}

tbody tr.rank-2 {
  background:
    linear-gradient(90deg, rgba(16, 224, 192, 0.088), rgba(16, 224, 192, 0.022) 40%, transparent 100%),
    var(--row);
  box-shadow: inset 3px 0 0 rgba(16, 224, 192, 0.58);
}

tbody tr.rank-3 {
  background:
    linear-gradient(90deg, rgba(16, 224, 192, 0.058), rgba(16, 224, 192, 0.016) 38%, transparent 100%),
    var(--row);
  box-shadow: inset 3px 0 0 rgba(16, 224, 192, 0.38);
}

tbody tr.rank-1:hover {
  background:
    linear-gradient(90deg, rgba(16, 224, 192, 0.19), rgba(16, 224, 192, 0.052) 48%, transparent 100%),
    var(--row-hover);
  box-shadow: inset 3px 0 0 rgba(53, 245, 208, 0.95);
}

tbody tr.rank-2:hover {
  background:
    linear-gradient(90deg, rgba(16, 224, 192, 0.128), rgba(16, 224, 192, 0.04) 44%, transparent 100%),
    var(--row-hover);
  box-shadow: inset 3px 0 0 rgba(53, 245, 208, 0.74);
}

tbody tr.rank-3:hover {
  background:
    linear-gradient(90deg, rgba(16, 224, 192, 0.088), rgba(16, 224, 192, 0.03) 42%, transparent 100%),
    var(--row-hover);
  box-shadow: inset 3px 0 0 rgba(53, 245, 208, 0.54);
}
.empty-row td {
  color: var(--muted);
  text-align: center;
}

.symbol-cell {
  min-width: 230px;
  max-width: none;
  position: static;
  overflow: visible;
  text-overflow: clip;
  white-space: nowrap;
  display: flex;
  align-items: center;
  gap: 8px;
}

.symbol-main {
  display: inline-flex;
  align-items: center;
  flex: 0 0 auto;
  max-width: none;
  min-width: 0;
  gap: 7px;
  vertical-align: middle;
}

.symbol {
  min-width: 0;
  font-weight: 850;
  color: #f3f8fa;
}

.symbol-name {
  white-space: nowrap;
  overflow: visible;
  text-overflow: clip;
  width: auto;
  max-width: none;
  margin-left: 0;
  flex: 0 0 auto;
}

.copy-symbol {
  position: relative;
  flex: 0 0 auto;
  display: inline-grid;
  place-items: center;
  width: 22px;
  height: 22px;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 5px;
  background: transparent;
  color: var(--icon-muted);
  cursor: pointer;
  opacity: 0.78;
  vertical-align: middle;
  transition:
    background 130ms ease,
    color 130ms ease,
    opacity 130ms ease,
    transform 130ms ease;
  pointer-events: auto;
}

.copy-symbol:hover,
.copy-symbol:focus-visible {
  background: rgba(16, 224, 192, 0.08);
  color: var(--accent);
  opacity: 1;
  outline: none;
}

.copy-symbol:active {
  transform: translateY(1px);
}

.copy-symbol.copied {
  color: #ff4d5f;
  border-color: rgba(255, 77, 95, 0.72);
  background: rgba(255, 77, 95, 0.16);
  opacity: 1;
  box-shadow:
    0 0 0 1px rgba(255, 77, 95, 0.12),
    0 0 14px rgba(255, 77, 95, 0.22);
}

.copy-symbol.copied::after {
  content: none;
  display: none;
}

.copy-symbol-icon {
  position: relative;
  display: block;
  width: 15px;
  height: 15px;
}

.copy-symbol-icon::before,
.copy-symbol-icon::after {
  content: "";
  position: absolute;
  width: 9px;
  height: 10px;
  border: 1.6px solid currentColor;
  border-radius: 2px;
}

.copy-symbol-icon::before {
  left: 2px;
  top: 1px;
  opacity: 0.62;
}

.copy-symbol-icon::after {
  left: 5px;
  top: 4px;
  background: rgba(3, 9, 13, 0.9);
}

.badge {
  display: inline-flex;
  align-items: center;
  margin-left: 8px;
  min-height: 20px;
  padding: 2px 7px;
  border: 1px solid rgba(16, 224, 192, 0.22);
  border-radius: 4px;
  background: rgba(16, 224, 192, 0.105);
  color: var(--accent);
  font-size: 11px;
  font-weight: 850;
}

.zero-fee-badge {
  flex: 0 0 auto;
  margin-left: 0;
  vertical-align: middle;
}

.stock-row-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  height: 16px;
  margin-left: 5px;
  padding: 0 6px;
  border: 1px solid rgba(90, 220, 255, 0.55);
  border-radius: 999px;
  background: rgba(32, 190, 255, 0.13);
  color: #7ee7ff;
  font-size: 9px;
  font-weight: 900;
  line-height: 1;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  white-space: nowrap;
  vertical-align: middle;
  box-shadow: 0 0 10px rgba(45, 210, 255, 0.16);
}

@media (max-width: 768px) {
  .page-shell {
    width: 100vw;
    padding: 8px 8px 18px;
  }

  .panel {
    border-radius: 10px;
  }

  .tabs {
    padding: 8px;
  }

  .control-bar {
    flex-wrap: wrap;
    align-items: stretch;
    gap: 8px 10px;
    overflow: visible;
    white-space: normal;
  }

  .control-left,
  .control-right {
    width: 100%;
    gap: 8px 10px;
  }

  .control-right {
    justify-content: flex-start;
    margin-left: 0;
  }

  .market-controls,
  .exchange-controls {
    display: inline-flex;
    gap: 8px;
    min-width: max-content;
    padding: 0;
  }

  .market-mode-group,
  .exchange-group {
    display: inline-flex;
    width: auto;
    min-width: max-content;
    flex-wrap: nowrap;
  }

  .market-mode,
  .exchange-mode {
    flex: 0 0 auto;
    min-height: 32px;
    padding: 7px 12px;
    font-size: 12px;
  }

  .market-label {
    display: none;
  }

  .table-controls {
    display: grid;
    gap: 8px 10px;
  }

  .tab-group {
    display: inline-flex;
    width: auto;
    min-width: max-content;
  }

  .tab {
    flex: 0 0 auto;
    min-height: 38px;
    padding: 8px 16px;
    font-size: 12px;
  }

  .status-line {
    justify-content: center;
    text-align: center;
    white-space: nowrap;
    font-size: 12px;
    line-height: 1.25;
  }

  .status-row {
    flex: 0 0 auto;
    min-width: min(100%, 220px);
  }

  .rank-sort {
    justify-self: auto;
    grid-column: auto;
    min-height: 38px;
    padding: 8px 12px;
    font-size: 12px;
  }

  .brand-stage {
    width: 100%;
    min-height: auto;
    overflow: visible;
  }
  .page-hero {
    min-height: 174px;
    padding-left: 0;
  }

  .page-hero .brand-layer-item,
.page-hero .brand-block--motion {
  position: relative;
  left: auto;
  top: auto;
  width: 292px;
}

  body:not(.brand-edit-mode) .scanner-panel {
    top: calc(var(--brand-scanner-y) + 58px);
  }

  body:not(.brand-edit-mode) .brand-poster,
  body:not(.brand-edit-mode) .brand-separator-top,
  body:not(.brand-edit-mode) .brand-feedback-line,
  body:not(.brand-edit-mode) .brand-feedback-text {
    display: none !important;
  }

  .brand-edit-mode .brand-poster {
    display: block !important;
  }

  .brand-block,
.brand-block--motion {
  left: 0;
  top: 0;
  width: 292px;
  min-height: 214px;
  z-index: 9;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  gap: 0;
  padding-left: 0;
  overflow: visible;
  pointer-events: none;
}

  .worksxxx-logo-motion {
    width: 150px;
    height: 82px;
    flex: 0 0 150px;
  }

.worksxxx-title-image {
    width: 158px;
    height: 31px;
    margin-top: -6px;
  }



  .brand-subtitle {
    margin-top: 2px;
    font-size: 9px;
  }
.brand-copy--hero {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  margin-top: -8px;
}
}
@media (max-width: 480px) {
  .page-shell {
    padding-inline: 6px;
  }

  .scanner-panel {
    width: calc(100vw - var(--brand-scanner-x) - 8px);
    max-width: calc(100vw - var(--brand-scanner-x) - 8px);
  }

  .scanner-table {
    min-width: 500px;
    font-size: 11.5px;
  }

  .tabs {
    padding: 7px;
  }

  .tab {
    min-height: 36px;
    padding-inline: 4px;
    font-size: 11px;
  }

  .rank-sort {
    min-height: 32px;
    padding: 6px 9px;
    font-size: 11px;
  }

  .scanner-table th:nth-child(1),
  .scanner-table td:nth-child(1) {
    width: 160px;
  }

  .scanner-table th:nth-child(2),
  .scanner-table td:nth-child(2) {
    width: 70px;
  }

  .scanner-table th:nth-child(3),
  .scanner-table td:nth-child(3) {
    width: 70px;
  }

  .scanner-table th:nth-child(4),
  .scanner-table td:nth-child(4) {
    width: 55px;
  }

  .scanner-table th:nth-child(5),
  .scanner-table td:nth-child(5) {
    width: 70px;
  }

  .scanner-table th:nth-child(6),
  .scanner-table td:nth-child(6) {
    width: 90px;
  }

  th,
  td {
    padding: 9px 6px;
  }

  th button {
    font-size: 9px;
  }

  .status-line {
    font-size: 11.5px;
  }
}

@media (max-width: 390px) {
  .page-shell {
    padding-inline: 4px;
  }

  .scanner-panel {
    width: calc(100vw - var(--brand-scanner-x) - 8px);
    max-width: calc(100vw - var(--brand-scanner-x) - 8px);
  }

  .scanner-table {
    min-width: 500px;
    font-size: 11px;
  }

  .scanner-table th:nth-child(1),
  .scanner-table td:nth-child(1) {
    width: 150px;
  }

  .scanner-table th:nth-child(2),
  .scanner-table td:nth-child(2) {
    width: 62px;
  }

  .scanner-table th:nth-child(3),
  .scanner-table td:nth-child(3) {
    width: 64px;
  }

  .scanner-table th:nth-child(4),
  .scanner-table td:nth-child(4) {
    width: 44px;
  }

  .scanner-table th:nth-child(5),
  .scanner-table td:nth-child(5) {
    width: 60px;
  }

  .scanner-table th:nth-child(6),
  .scanner-table td:nth-child(6) {
    width: 86px;
  }

  th,
  td {
    padding: 8px 5px;
  }

  .symbol {
    font-size: 11px;
  }

  .copy-symbol {
    width: 16px;
    height: 16px;
  }

  .badge {
    padding-inline: 3px;
    font-size: 8px;
  }
}

@media (min-width: 769px) and (max-width: 1199px) {
  .brand-edit-mode .brand-poster {
    display: block !important;
  }

  .scanner-panel {
    width: calc(100vw - var(--brand-scanner-x) - 18px);
    max-width: calc(100vw - var(--brand-scanner-x) - 18px);
    margin-top: 0;
  }
}

@container scanner-panel (max-width: 520px) {
  .control-bar {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas:
      "filters"
      "market"
      "exchanges"
      "action";
  }

  .filter-tabs,
  .market-tabs,
  .exchange-tabs,
  .action-status {
    width: 100%;
    max-width: 100%;
    min-width: 0;
    justify-self: stretch;
  }

  .category-controls {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    width: 100%;
    min-width: 0;
  }

  .category-controls .tab {
    min-width: 0;
    width: 100%;
    padding-inline: 8px;
    text-align: center;
  }

  .exchange-controls,
  .exchange-group {
    width: 100%;
    max-width: 100%;
    min-width: 0;
  }

  .exchange-group {
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    width: 100%;
    min-width: 0;
    max-width: 100%;
    flex-wrap: nowrap;
    gap: 0;
    overflow: hidden;
  }

  .exchange-group .exchange-mode {
    min-width: 0;
    width: 100%;
    padding-inline: 5px;
    font-size: 10px;
    text-align: center;
  }
}

/* brand-layout-bg-fix overrides */
@media (max-width: 768px) {
  .page-hero {
    min-height: 174px;
    padding: 4px 0 0;
  }

  .page-hero .brand-layer-item,
  .page-hero .brand-block--motion,
  .brand-block,
  .brand-block--motion {
    width: min(100%, calc(100vw - 16px));
    min-height: 150px;
    padding-left: 0;
  }

  .worksxxx-logo-motion {
    width: 150px;
    height: 82px;
    flex: 0 0 150px;
  }

  .worksxxx-title-image {
    width: 158px;
    height: 31px;
    margin-top: -6px;
  }

  .brand-copy--hero {
    margin-top: -6px;
  }

  .brand-subtitle {
    margin-top: 2px;
    font-size: 9px;
  }

  body:not(.brand-edit-mode) .scanner-panel {
    top: calc(var(--brand-scanner-y) + 58px);
  }
}
/* brand-reference-final: match reference hero logo/title placement */
.page-hero {
  min-height: 258px;
  padding: 18px 0 0 42px;
  overflow: visible;
}

.page-hero .brand-layer-item,
.page-hero .brand-block--motion,
.brand-block,
.brand-block--motion {
  width: 320px;
  min-height: 220px;
  padding-left: 0;
  overflow: visible;
}

.worksxxx-logo-motion {
  width: 340px;
  height: 162px;
  flex: 0 0 162px;
  transform: scale(1.42);
  transform-origin: center bottom;
  margin: -18px 0 -34px;
}

.worksxxx-logo-motion::-webkit-media-controls,
.worksxxx-logo-motion::-webkit-media-controls-panel,
.worksxxx-logo-motion::-webkit-media-controls-start-playback-button {
  display: none !important;
  opacity: 0 !important;
  pointer-events: none !important;
}

.brand-copy--hero {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  width: 320px;
  margin-top: -56px;
}

.worksxxx-title-image {
  width: 278px;
  height: 54px;
  object-fit: contain;
  display: block;
  margin-top: 0;
  pointer-events: none;
  user-select: none;
  -webkit-user-select: none;
  -webkit-user-drag: none;
  filter:
    drop-shadow(0 0 10px rgba(255, 255, 255, 0.48))
    drop-shadow(0 2px 12px rgba(0, 0, 0, 0.78));
}

.brand-subtitle {
  margin-top: 4px;
  color: rgba(255, 255, 255, 0.66);
  font-size: 12px;
  font-weight: 500;
  line-height: 1.2;
  letter-spacing: 0;
  text-align: center;
  white-space: nowrap;
  text-shadow: 0 1px 8px rgba(0, 0, 0, 0.72);
}

body:not(.brand-edit-mode) .scanner-panel {
  top: calc(var(--brand-scanner-y) + 94px);
}

@media (max-width: 768px) {
  .page-hero {
    min-height: 182px;
    padding: 8px 0 0 8px;
  }

  .page-hero .brand-layer-item,
  .page-hero .brand-block--motion,
  .brand-block,
  .brand-block--motion {
    width: min(250px, calc(100vw - 16px));
    min-height: 164px;
  }

  .worksxxx-logo-motion {
    width: 190px;
    height: 100px;
    flex: 0 0 100px;
    transform: scale(1.22);
    margin: -4px 0 -16px;
  }

  .brand-copy--hero {
    width: min(230px, calc(100vw - 16px));
    margin-top: -28px;
  }

  .worksxxx-title-image {
    width: 196px;
    height: 38px;
  }

  .brand-subtitle {
    margin-top: 4px;
    font-size: 10px;
  }

  body:not(.brand-edit-mode) .scanner-panel {
    top: calc(var(--brand-scanner-y) + 78px);
  }
}
/* controls-detached-redesign: controls row is independent from the table card */
.controls-panel {
  position: absolute;
  left: var(--brand-scanner-x);
  top: calc(var(--brand-scanner-y) + 94px);
  width: var(--brand-scanner-w);
  max-width: calc(100vw - var(--brand-scanner-x) - 18px);
  z-index: 24;
  overflow: visible;
  pointer-events: auto;
}

.controls-panel .scanner-controls {
  width: 100%;
}

.controls-panel .tabs,
.controls-panel.table-controls,
.controls-panel .table-controls {
  padding: 0;
  border-bottom: 0;
  background: transparent;
}

.controls-panel .control-bar {
  grid-template-columns: max-content max-content minmax(320px, max-content) minmax(260px, 1fr);
  grid-template-areas: "filters market exchanges action";
  align-items: center;
  gap: 16px 24px;
}

.controls-panel .tab-group,
.controls-panel .market-mode-group,
.controls-panel .exchange-group {
  border: 1px solid rgba(78, 102, 116, 0.62);
  border-radius: 8px;
  background:
    linear-gradient(180deg, rgba(18, 28, 39, 0.82), rgba(5, 11, 18, 0.82));
  box-shadow:
    0 12px 28px rgba(0, 0, 0, 0.26),
    0 0 0 1px rgba(255, 255, 255, 0.025) inset;
  overflow: hidden;
}

.controls-panel .tab,
.controls-panel .market-mode,
.controls-panel .exchange-mode {
  min-height: 43px;
  border: 0;
  border-right: 1px solid rgba(78, 102, 116, 0.54);
  border-radius: 0;
  background: rgba(8, 15, 22, 0.62);
  color: rgba(184, 197, 207, 0.88);
  font-size: 12px;
  font-weight: 900;
  letter-spacing: 0;
  padding: 10px 18px;
  box-shadow: none;
}

.controls-panel .exchange-mode {
  min-height: 39px;
  padding: 9px 14px;
}

.controls-panel .tab:last-child,
.controls-panel .market-mode:last-child,
.controls-panel .exchange-mode:last-child {
  border-right: 0;
}

.controls-panel .tab + .tab,
.controls-panel .market-mode + .market-mode,
.controls-panel .exchange-mode + .exchange-mode {
  margin-left: 0;
}

.controls-panel .tab:first-child,
.controls-panel .tab:last-child,
.controls-panel .market-mode:first-child,
.controls-panel .market-mode:last-child,
.controls-panel .exchange-mode:first-child,
.controls-panel .exchange-mode:last-child {
  border-radius: 0;
}

.controls-panel .tab.active,
.controls-panel .market-mode.active,
.controls-panel .exchange-mode.active {
  border-color: transparent;
  background:
    linear-gradient(180deg, rgba(255, 64, 82, 0.2), rgba(255, 36, 64, 0.07)),
    rgba(23, 12, 20, 0.88);
  color: #ff6471;
  box-shadow:
    0 0 0 1px rgba(255, 67, 83, 0.52) inset,
    0 0 20px rgba(255, 43, 61, 0.14);
}

.controls-panel .exchange-icon {
  width: 16px;
  height: 16px;
  flex-basis: 16px;
}

.controls-panel .action-status {
  justify-content: flex-end;
  gap: 16px;
}

.controls-panel .rank-sort {
  min-height: 43px;
  border-radius: 7px;
  border-color: rgba(8, 214, 193, 0.74);
  background:
    linear-gradient(180deg, rgba(8, 214, 193, 0.1), rgba(8, 214, 193, 0.025)),
    rgba(4, 14, 18, 0.78);
  color: var(--accent);
  padding: 10px 16px;
  box-shadow:
    0 0 0 1px rgba(8, 214, 193, 0.09) inset,
    0 0 20px rgba(8, 214, 193, 0.08);
}

.controls-panel .status-line {
  min-width: 220px;
  color: rgba(224, 233, 238, 0.94);
  font-size: 12px;
}

body:not(.brand-edit-mode) .scanner-panel {
  top: calc(var(--brand-scanner-y) + 160px);
}

@media (max-width: 1180px) {
  .controls-panel .control-bar {
    grid-template-columns: max-content max-content minmax(0, max-content);
    grid-template-areas:
      "filters market exchanges"
      "action action action";
  }

  .controls-panel .action-status {
    justify-content: flex-start;
  }
}

@media (max-width: 768px) {
  .controls-panel {
    left: 8px;
    top: calc(var(--brand-scanner-y) + 78px);
    width: calc(100vw - 16px);
    max-width: calc(100vw - 16px);
  }

  .controls-panel .control-bar {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas:
      "filters"
      "market"
      "exchanges"
      "action";
    gap: 8px;
  }

  .controls-panel .tab,
  .controls-panel .market-mode,
  .controls-panel .exchange-mode {
    min-height: 36px;
    padding: 8px 12px;
    font-size: 11px;
  }

  .controls-panel .exchange-tabs,
  .controls-panel .exchange-group {
    max-width: 100%;
    overflow-x: auto;
  }

  .controls-panel .action-status {
    justify-content: flex-start;
    flex-wrap: wrap;
  }

  .controls-panel .status-line {
    min-width: min(100%, 220px);
  }

  body:not(.brand-edit-mode) .scanner-panel {
    top: calc(var(--brand-scanner-y) + 176px);
  }
}
/* glass-controls-redesign: closer to reference glass/red control and table styling */
.controls-panel .control-bar {
  gap: 14px 22px;
}

.controls-panel .tab-group,
.controls-panel .market-mode-group,
.controls-panel .exchange-group {
  border-color: rgba(91, 112, 128, 0.66);
  border-radius: 8px;
  background:
    linear-gradient(180deg, rgba(28, 38, 52, 0.62), rgba(8, 14, 22, 0.78));
  box-shadow:
    0 14px 34px rgba(0, 0, 0, 0.34),
    0 0 0 1px rgba(255, 255, 255, 0.045) inset,
    0 12px 32px rgba(50, 78, 104, 0.08) inset;
  backdrop-filter: blur(14px) saturate(1.12);
  -webkit-backdrop-filter: blur(14px) saturate(1.12);
}

.controls-panel .tab,
.controls-panel .market-mode,
.controls-panel .exchange-mode,
.controls-panel .exchange-all-placeholder {
  min-height: 44px;
  border: 0;
  border-right: 1px solid rgba(94, 113, 129, 0.56);
  border-radius: 0;
  background: linear-gradient(180deg, rgba(15, 24, 34, 0.64), rgba(4, 10, 17, 0.54));
  color: rgba(190, 201, 211, 0.9);
  font-size: 12px;
  font-weight: 900;
  letter-spacing: 0;
  padding: 10px 18px;
  box-shadow: none;
}

.controls-panel .exchange-all-placeholder {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: default;
  opacity: 1;
  pointer-events: none;
  user-select: none;
}

.controls-panel .exchange-mode {
  min-height: 40px;
  padding: 9px 14px;
}

.controls-panel .exchange-all-placeholder + .exchange-mode {
  margin-left: 0;
}

.controls-panel .tab.active,
.controls-panel .market-mode.active,
.controls-panel .exchange-mode.active,
.controls-panel .exchange-all-placeholder.is-active {
  background:
    linear-gradient(180deg, rgba(255, 66, 85, 0.31), rgba(90, 12, 28, 0.58)),
    rgba(30, 8, 18, 0.86);
  color: #ff6d79;
  box-shadow:
    0 0 0 1px rgba(255, 73, 89, 0.7) inset,
    0 12px 28px rgba(255, 40, 58, 0.12),
    0 0 20px rgba(255, 67, 83, 0.2) inset;
}

.controls-panel .rank-sort {
  min-height: 44px;
  min-width: 148px;
  align-items: center;
  border-radius: 8px;
  border-color: rgba(8, 214, 193, 0.8);
  background:
    linear-gradient(180deg, rgba(7, 39, 43, 0.78), rgba(3, 13, 18, 0.82)),
    rgba(3, 14, 18, 0.86);
  color: var(--accent-bright);
  padding: 8px 14px;
  box-shadow:
    0 0 0 1px rgba(8, 214, 193, 0.12) inset,
    0 0 24px rgba(8, 214, 193, 0.18),
    0 14px 34px rgba(0, 0, 0, 0.32);
  backdrop-filter: blur(14px) saturate(1.08);
  -webkit-backdrop-filter: blur(14px) saturate(1.08);
}

.controls-panel .rank-sort-title,
.controls-panel .rank-sort-subtitle {
  display: block;
  line-height: 1.05;
  text-align: left;
}

.controls-panel .rank-sort-title {
  font-size: 12px;
  font-weight: 950;
}

.controls-panel .rank-sort-subtitle {
  margin-top: 3px;
  color: rgba(178, 205, 204, 0.7);
  font-size: 9px;
  font-weight: 700;
}

.scanner-panel {
  border-color: rgba(112, 132, 151, 0.42);
  background:
    linear-gradient(180deg, rgba(27, 38, 52, 0.58), rgba(7, 13, 20, 0.8)),
    rgba(8, 15, 22, 0.74);
  box-shadow:
    0 20px 60px rgba(0, 0, 0, 0.42),
    0 0 0 1px rgba(255, 255, 255, 0.045) inset,
    0 18px 50px rgba(75, 106, 132, 0.12) inset;
  backdrop-filter: blur(16px) saturate(1.08);
  -webkit-backdrop-filter: blur(16px) saturate(1.08);
}

.table-wrap {
  background:
    linear-gradient(180deg, rgba(14, 23, 32, 0.52), rgba(5, 12, 17, 0.78));
}

.scanner-table thead {
  background:
    linear-gradient(180deg, rgba(32, 43, 58, 0.34), rgba(7, 14, 20, 0.72));
}

.scanner-table th {
  color: rgba(172, 188, 200, 0.94);
  border-bottom-color: rgba(84, 106, 122, 0.2);
}

.scanner-table tbody tr {
  background: rgba(8, 18, 24, 0.58);
}

.scanner-table tbody tr:nth-child(odd) {
  background: rgba(10, 24, 30, 0.64);
}

.scanner-table tbody tr:hover,
.scanner-table tbody tr.highlight {
  background:
    linear-gradient(90deg, rgba(10, 214, 193, 0.16), rgba(10, 214, 193, 0.045) 58%, rgba(10, 214, 193, 0.02));
}

.scanner-table td {
  border-bottom-color: rgba(92, 116, 130, 0.16);
}

.scanner-table tbody td:nth-child(2) {
  color: #18f0d2;
  text-shadow: 0 0 12px rgba(8, 214, 193, 0.18);
}

@media (max-width: 768px) {
  .controls-panel {
    top: calc(var(--brand-scanner-y) + 64px);
  }

  body:not(.brand-edit-mode) .scanner-panel {
    top: calc(var(--brand-scanner-y) + 162px);
  }
}
/* table-red-glass-final: remove teal/zebra table styling and match reference glass table */
.controls-panel {
  top: calc(var(--brand-scanner-y) + 88px);
}

body:not(.brand-edit-mode) .scanner-panel {
  top: calc(var(--brand-scanner-y) + 154px);
}

.scanner-panel {
  border-color: rgba(124, 140, 158, 0.46);
  border-radius: 13px;
  background:
    linear-gradient(180deg, rgba(29, 38, 51, 0.5), rgba(7, 12, 18, 0.82)),
    rgba(8, 13, 20, 0.72);
  box-shadow:
    0 20px 58px rgba(0, 0, 0, 0.45),
    0 0 0 1px rgba(255, 255, 255, 0.04) inset,
    0 18px 54px rgba(98, 119, 146, 0.11) inset;
  backdrop-filter: blur(17px) saturate(1.08);
  -webkit-backdrop-filter: blur(17px) saturate(1.08);
}

.table-wrap {
  background:
    linear-gradient(180deg, rgba(15, 22, 31, 0.6), rgba(4, 9, 14, 0.86));
}

.scanner-table {
  color: rgba(229, 236, 241, 0.92);
}

.scanner-table thead,
.scanner-table thead th {
  background:
    linear-gradient(180deg, rgba(31, 40, 53, 0.52), rgba(8, 13, 20, 0.76)) !important;
}

.scanner-table th {
  color: rgba(164, 180, 193, 0.94);
  border-bottom: 1px solid rgba(92, 112, 130, 0.2);
}

.scanner-table th button[data-sort="spread_pct"] {
  color: #ff5968;
  text-shadow: 0 0 12px rgba(255, 72, 88, 0.22);
}

.scanner-table tbody tr,
.scanner-table tbody tr:nth-child(odd),
.scanner-table tbody tr:nth-child(even),
.scanner-table tbody tr.rank-1,
.scanner-table tbody tr.rank-2,
.scanner-table tbody tr.rank-3 {
  background:
    linear-gradient(90deg, rgba(18, 26, 35, 0.64), rgba(8, 15, 22, 0.7) 42%, rgba(7, 12, 18, 0.74)) !important;
  box-shadow: none !important;
}

.scanner-table tbody tr:hover,
.scanner-table tbody tr.highlight,
.scanner-table tbody tr.rank-1:hover,
.scanner-table tbody tr.rank-2:hover,
.scanner-table tbody tr.rank-3:hover {
  background:

    linear-gradient(90deg, rgba(48, 32, 36, 0.78), rgba(14, 18, 27, 0.78) 48%, rgba(7, 12, 18, 0.76)) !important;
  box-shadow: none !important;
}

.scanner-table td {
  border-bottom: 1px solid rgba(84, 104, 120, 0.17);
  color: rgba(230, 237, 242, 0.9);
}

.scanner-table tbody td:nth-child(2) {
  color: #ff5968 !important;
  text-shadow: 0 0 12px rgba(255, 72, 88, 0.18) !important;
}

.scanner-table tbody td:nth-child(3),
.scanner-table tbody td:nth-child(4),
.scanner-table tbody td:nth-child(5),
.scanner-table tbody td:nth-child(6) {
  color: rgba(226, 234, 240, 0.91);
}

.symbol {
  color: rgba(244, 248, 251, 0.96);
}

.zero-fee-badge {
  border-color: rgba(255, 56, 76, 0.34);
  background: rgba(255, 56, 76, 0.105);
  color: #ff6370;
}

.copy-symbol:hover,
.copy-symbol:focus-visible {
  background: rgba(255, 72, 88, 0.09);
  color: #ff6370;
}

@media (max-width: 768px) {
  .controls-panel {
    top: calc(var(--brand-scanner-y) + 58px);
  }

  body:not(.brand-edit-mode) .scanner-panel {
    top: calc(var(--brand-scanner-y) + 154px);
  }
}
/* glass-transparency-tune: let the space background show through controls and table */
.controls-panel .tab-group,
.controls-panel .market-mode-group,
.controls-panel .exchange-group {
  background:
    linear-gradient(180deg, rgba(25, 34, 47, 0.46), rgba(5, 10, 17, 0.5));
  border-color: rgba(110, 128, 146, 0.5);
  box-shadow:
    0 14px 34px rgba(0, 0, 0, 0.22),
    0 0 0 1px rgba(255, 255, 255, 0.035) inset,
    0 12px 32px rgba(78, 104, 132, 0.06) inset;
}

.controls-panel .tab,
.controls-panel .market-mode,
.controls-panel .exchange-mode,
.controls-panel .exchange-all-placeholder {
  background: linear-gradient(180deg, rgba(15, 24, 34, 0.42), rgba(4, 10, 17, 0.34));
  border-right-color: rgba(108, 126, 142, 0.44);
}

.controls-panel .tab.active,
.controls-panel .market-mode.active,
.controls-panel .exchange-mode.active,
.controls-panel .exchange-all-placeholder.is-active {
  background:
    linear-gradient(180deg, rgba(255, 77, 95, 0.24), rgba(92, 32, 42, 0.34)),
    rgba(30, 8, 18, 0.42);
}

.controls-panel .rank-sort {
  background:
    linear-gradient(180deg, rgba(7, 39, 43, 0.46), rgba(3, 13, 18, 0.48)),
    rgba(3, 14, 18, 0.42);
  box-shadow:
    0 0 0 1px rgba(8, 214, 193, 0.1) inset,
    0 0 24px rgba(8, 214, 193, 0.12),
    0 14px 34px rgba(0, 0, 0, 0.22);
}

.scanner-panel {
  background:
    linear-gradient(180deg, rgba(29, 38, 51, 0.34), rgba(7, 12, 18, 0.52)),
    rgba(8, 13, 20, 0.46);
  box-shadow:
    0 20px 58px rgba(0, 0, 0, 0.34),
    0 0 0 1px rgba(255, 255, 255, 0.035) inset,
    0 18px 54px rgba(98, 119, 146, 0.08) inset;
}

.table-wrap {
  background:
    linear-gradient(180deg, rgba(15, 22, 31, 0.38), rgba(4, 9, 14, 0.48));
}

.scanner-table thead,
.scanner-table thead th {
  background:
    linear-gradient(180deg, rgba(31, 40, 53, 0.34), rgba(8, 13, 20, 0.44)) !important;
}

.scanner-table tbody tr,
.scanner-table tbody tr:nth-child(odd),
.scanner-table tbody tr:nth-child(even),
.scanner-table tbody tr.rank-1,
.scanner-table tbody tr.rank-2,
.scanner-table tbody tr.rank-3 {
  background:
    linear-gradient(90deg, rgba(18, 26, 35, 0.42), rgba(8, 15, 22, 0.46) 42%, rgba(7, 12, 18, 0.48)) !important;
}

.scanner-table tbody tr:hover,
.scanner-table tbody tr.highlight,
.scanner-table tbody tr.rank-1:hover,
.scanner-table tbody tr.rank-2:hover,
.scanner-table tbody tr.rank-3:hover {
  background:

    linear-gradient(90deg, rgba(48, 32, 36, 0.56), rgba(14, 18, 27, 0.52) 48%, rgba(7, 12, 18, 0.48)) !important;
}
/* glass-transparency-strong: visibly transparent table and controls */
.controls-panel .tab-group,
.controls-panel .market-mode-group,
.controls-panel .exchange-group {
  background:
    linear-gradient(180deg, rgba(25, 34, 47, 0.24), rgba(4, 9, 15, 0.18)) !important;
  border-color: rgba(126, 146, 166, 0.46) !important;
  box-shadow:
    0 12px 32px rgba(0, 0, 0, 0.16),
    0 0 0 1px rgba(255, 255, 255, 0.03) inset !important;
  backdrop-filter: blur(10px) saturate(1.06);
  -webkit-backdrop-filter: blur(10px) saturate(1.06);
}

.controls-panel .tab,
.controls-panel .market-mode,
.controls-panel .exchange-mode,
.controls-panel .exchange-all-placeholder {
  background: linear-gradient(180deg, rgba(18, 27, 38, 0.22), rgba(4, 10, 17, 0.14)) !important;
  border-right-color: rgba(128, 146, 162, 0.34) !important;
}

.controls-panel .tab.active,
.controls-panel .market-mode.active,
.controls-panel .exchange-mode.active,
.controls-panel .exchange-all-placeholder.is-active {
  background:
    linear-gradient(180deg, rgba(255, 77, 95, 0.34), rgba(92, 32, 42, 0.2)),
    rgba(30, 8, 18, 0.2) !important;
}

.controls-panel .rank-sort {
  background:
    linear-gradient(180deg, rgba(7, 39, 43, 0.25), rgba(3, 13, 18, 0.18)),
    rgba(3, 14, 18, 0.14) !important;
  box-shadow:
    0 0 0 1px rgba(8, 214, 193, 0.1) inset,
    0 0 20px rgba(8, 214, 193, 0.1),
    0 12px 28px rgba(0, 0, 0, 0.16) !important;
}

.scanner-panel {
  background:
    linear-gradient(180deg, rgba(30, 39, 52, 0.2), rgba(6, 11, 17, 0.2)),
    rgba(5, 10, 15, 0.16) !important;
  border-color: rgba(126, 145, 164, 0.36) !important;
  box-shadow:
    0 18px 52px rgba(0, 0, 0, 0.26),
    0 0 0 1px rgba(255, 255, 255, 0.028) inset !important;
  backdrop-filter: blur(10px) saturate(1.04);
  -webkit-backdrop-filter: blur(10px) saturate(1.04);
}

.table-wrap,
.scanner-table {
  background: transparent !important;
}

.scanner-table thead,
.scanner-table thead th,
thead th {
  background:
    linear-gradient(180deg, rgba(31, 40, 53, 0.2), rgba(7, 12, 18, 0.2)) !important;
}

.scanner-table tbody tr,
.scanner-table tbody tr:nth-child(odd),
.scanner-table tbody tr:nth-child(even),
.scanner-table tbody tr.rank-1,
.scanner-table tbody tr.rank-2,
.scanner-table tbody tr.rank-3,
tbody tr,
tbody tr.rank-1,
tbody tr.rank-2,
tbody tr.rank-3 {
  background:
    linear-gradient(90deg, rgba(17, 25, 34, 0.24), rgba(7, 13, 19, 0.25) 46%, rgba(4, 9, 14, 0.23)) !important;
  box-shadow: none !important;
}

.scanner-table tbody tr:hover,
.scanner-table tbody tr.highlight,
.scanner-table tbody tr.rank-1:hover,
.scanner-table tbody tr.rank-2:hover,
.scanner-table tbody tr.rank-3:hover,
tbody tr:hover,
tbody tr.rank-1:hover,
tbody tr.rank-2:hover,
tbody tr.rank-3:hover {
  background:

    linear-gradient(90deg, rgba(58, 34, 40, 0.38), rgba(13, 17, 25, 0.32) 48%, rgba(5, 10, 15, 0.28)) !important;
  box-shadow: none !important;
}

.scanner-table th,
.scanner-table td,
th,
td {
  background-color: transparent !important;
}
/* layout-shift-right-1: align controls/table with reference left guide */
.controls-panel,
.scanner-panel {
  left: 56px !important;
  width: calc(100vw - 72px) !important;
  max-width: calc(100vw - 72px) !important;
}

@media (max-width: 768px) {
  .controls-panel,
  .scanner-panel {
    left: 12px !important;
    width: calc(100vw - 24px) !important;
    max-width: calc(100vw - 24px) !important;
  }
}
/* layout-shift-left-fine-1: fine tune left edge to marked guide */
.controls-panel,
.scanner-panel {
  left: 46px !important;
  width: calc(100vw - 62px) !important;
  max-width: calc(100vw - 62px) !important;
}

@media (max-width: 768px) {
  .controls-panel,
  .scanner-panel {
    left: 10px !important;
    width: calc(100vw - 20px) !important;
    max-width: calc(100vw - 20px) !important;
  }
}
/* layout-symmetric-gutters-1: equal left/right page gutters */
.controls-panel,
.scanner-panel {
  left: 46px !important;
  width: calc(100vw - 92px) !important;
  max-width: calc(100vw - 92px) !important;
}

@media (max-width: 768px) {
  .controls-panel,
  .scanner-panel {
    left: 10px !important;
    width: calc(100vw - 20px) !important;
    max-width: calc(100vw - 20px) !important;
  }
}
/* layout-right-edge-left-1: pull the right edge left to the marked guide */
.controls-panel,
.scanner-panel {
  left: 46px !important;
  width: calc(100vw - 138px) !important;
  max-width: calc(100vw - 138px) !important;
}

@media (max-width: 768px) {
  .controls-panel,
  .scanner-panel {
    left: 10px !important;
    width: calc(100vw - 20px) !important;
    max-width: calc(100vw - 20px) !important;
  }
}
/* background-original-image-1: show the source asteroid background without dark overlays */
body {
  background: url("/assets/bg/space-asteroids.png") center top / cover no-repeat fixed, #010406 !important;
}
/* background-dim-20-1: light 20% dim over the asteroid background */
body {
  background:
    linear-gradient(rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0.2)),
    url("/assets/bg/space-asteroids.png") center top / cover no-repeat fixed,
    #010406 !important;
}
/* background-dim-30-1: 30% dim over the asteroid background */
body {
  background:
    linear-gradient(rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0.3)),
    url("/assets/bg/space-asteroids.png") center top / cover no-repeat fixed,
    #010406 !important;
}
/* buttons-reference-style-1: compact dark glass segmented controls like the reference */
.controls-panel .control-bar {
  gap: 14px 22px;
  align-items: center;
}

.controls-panel .tab-group,
.controls-panel .market-mode-group,
.controls-panel .exchange-group {
  min-height: 36px;
  border: 1px solid rgba(71, 88, 104, 0.64) !important;
  border-radius: 7px;
  background:
    radial-gradient(circle at 17% 0%, rgba(255, 77, 95, 0.12), transparent 32%),
    linear-gradient(180deg, rgba(20, 28, 40, 0.54), rgba(4, 8, 14, 0.5)) !important;
  box-shadow:
    0 8px 22px rgba(0, 0, 0, 0.24),
    0 0 0 1px rgba(255, 255, 255, 0.035) inset,
    0 10px 22px rgba(44, 58, 76, 0.07) inset !important;
  backdrop-filter: blur(12px) saturate(1.08);
  -webkit-backdrop-filter: blur(12px) saturate(1.08);
}

.controls-panel .tab,
.controls-panel .market-mode,
.controls-panel .exchange-mode,
.controls-panel .exchange-all-placeholder {
  min-height: 36px;
  height: 36px;
  border: 0 !important;
  border-right: 1px solid rgba(84, 99, 116, 0.54) !important;
  background:
    linear-gradient(180deg, rgba(14, 20, 30, 0.34), rgba(3, 7, 13, 0.28)) !important;
  color: rgba(184, 194, 204, 0.88);
  font-size: 10.5px;
  font-weight: 850;
  line-height: 1;
  letter-spacing: 0.01em;
  text-transform: uppercase;
  padding: 0 15px;
  text-shadow: 0 1px 8px rgba(0, 0, 0, 0.42);
}

.controls-panel .exchange-mode {
  min-height: 36px;
  height: 36px;
  padding: 0 13px;
  gap: 7px;
}

.controls-panel .tab:last-child,
.controls-panel .market-mode:last-child,
.controls-panel .exchange-mode:last-child {
  border-right: 0 !important;
}

.controls-panel .tab.active,
.controls-panel .market-mode.active,
.controls-panel .exchange-mode.active,
.controls-panel .exchange-all-placeholder.is-active {
  background:
    radial-gradient(circle at 18% 8%, rgba(255, 77, 95, 0.24), transparent 46%),
    linear-gradient(180deg, rgba(255, 77, 95, 0.66), rgba(76, 28, 37, 0.58)) !important;
  color: #ff4d5f;
  box-shadow:
    0 0 0 1px rgba(255, 77, 95, 0.7) inset,
    0 0 18px rgba(255, 77, 95, 0.18),
    0 9px 20px rgba(0, 0, 0, 0.2) !important;
}

.controls-panel .tab:not(.active):hover,
.controls-panel .market-mode:not(.active):hover,
.controls-panel .exchange-mode:not(.active):hover {
  color: rgba(224, 232, 238, 0.94);
  background:
    linear-gradient(180deg, rgba(33, 43, 56, 0.38), rgba(7, 12, 19, 0.3)) !important;
}

.controls-panel .exchange-icon {
  width: 14px;
  height: 14px;
  flex-basis: 14px;
  filter: saturate(1.06) contrast(1.04);
}

.controls-panel .rank-sort {
  min-height: 38px;
  height: 38px;
  min-width: 210px;
  border-radius: 7px;
  border: 1px solid rgba(8, 214, 193, 0.78) !important;
  background:
    linear-gradient(180deg, rgba(8, 49, 52, 0.34), rgba(3, 11, 16, 0.3)),
    rgba(3, 11, 16, 0.24) !important;
  color: #1ff2d3;
  padding: 0 14px;
  box-shadow:
    0 0 0 1px rgba(8, 214, 193, 0.1) inset,
    0 0 18px rgba(8, 214, 193, 0.13),
    0 8px 22px rgba(0, 0, 0, 0.2) !important;
}

.controls-panel .rank-sort::before {
  width: 14px;
  height: 14px;
}

.controls-panel .rank-sort-title {
  font-size: 11px;
  font-weight: 900;
  letter-spacing: 0;
  text-transform: none;
}

.controls-panel .rank-sort-subtitle {
  display: inline-block;
  margin: 0 0 0 7px;
  color: rgba(159, 188, 188, 0.72);
  font-size: 8.5px;
  font-weight: 750;
  white-space: nowrap;
}

@media (max-width: 768px) {
  .controls-panel .tab,
  .controls-panel .market-mode,
  .controls-panel .exchange-mode,
  .controls-panel .exchange-all-placeholder {
    min-height: 34px;
    height: 34px;
    padding: 0 11px;
    font-size: 10px;
  }

  .controls-panel .rank-sort {
    min-width: 170px;
    height: 36px;
  }
}
/* buttons-reference-size-1: keep reference style but restore larger button proportions */
.controls-panel .tab-group,
.controls-panel .market-mode-group,
.controls-panel .exchange-group {
  min-height: 44px;
  border-radius: 8px;
}

.controls-panel .tab,
.controls-panel .market-mode,
.controls-panel .exchange-mode,
.controls-panel .exchange-all-placeholder {
  min-height: 44px;
  height: 44px;
  padding: 0 20px;
  font-size: 12px;
  font-weight: 900;
}

.controls-panel .exchange-mode {
  min-height: 44px;
  height: 44px;
  padding: 0 17px;
  gap: 8px;
}

.controls-panel .exchange-icon {
  width: 16px;
  height: 16px;
  flex-basis: 16px;
}

.controls-panel .rank-sort {
  min-height: 44px;
  height: 44px;
  min-width: 240px;
  padding: 0 17px;
}

.controls-panel .rank-sort::before {
  width: 16px;
  height: 16px;
}

.controls-panel .rank-sort-title {
  font-size: 12px;
}

.controls-panel .rank-sort-subtitle {
  margin-left: 8px;
  font-size: 9px;
}

@media (max-width: 768px) {
  .controls-panel .tab,
  .controls-panel .market-mode,
  .controls-panel .exchange-mode,
  .controls-panel .exchange-all-placeholder {
    min-height: 38px;
    height: 38px;
    padding: 0 13px;
    font-size: 10.5px;
  }

  .controls-panel .rank-sort {
    min-width: 185px;
    height: 38px;
  }
}
/* buttons-reference-premium-1: darker softer glass controls, closer to reference */
.controls-panel .control-bar {
  gap: 14px 22px;
}

.controls-panel .tab-group,
.controls-panel .market-mode-group,
.controls-panel .exchange-group {
  min-height: 37px !important;
  border: 1px solid rgba(55, 70, 86, 0.62) !important;
  border-radius: 7px !important;
  background:
    radial-gradient(circle at 13% 0%, rgba(255, 77, 95, 0.105), transparent 34%),
    linear-gradient(180deg, rgba(18, 25, 36, 0.54), rgba(5, 9, 15, 0.66)) !important;
  box-shadow:
    0 11px 26px rgba(0, 0, 0, 0.32),
    0 0 0 1px rgba(255, 255, 255, 0.026) inset,
    0 9px 24px rgba(95, 116, 145, 0.055) inset !important;
  backdrop-filter: blur(13px) saturate(1.08);
  -webkit-backdrop-filter: blur(13px) saturate(1.08);
}

.controls-panel .tab,
.controls-panel .market-mode,
.controls-panel .exchange-mode,
.controls-panel .exchange-all-placeholder {
  min-height: 37px !important;
  height: 37px !important;
  border: 0 !important;
  border-right: 1px solid rgba(60, 75, 92, 0.58) !important;
  background:
    linear-gradient(180deg, rgba(17, 24, 34, 0.34), rgba(3, 7, 13, 0.42)) !important;
  color: rgba(171, 181, 192, 0.82) !important;
  font-size: 10.5px !important;
  font-weight: 800 !important;
  line-height: 1 !important;
  letter-spacing: 0 !important;
  text-transform: uppercase;
  padding: 0 17px !important;
  text-shadow: 0 1px 9px rgba(0, 0, 0, 0.62);
}

.controls-panel .exchange-mode {
  padding: 0 14px !important;
  gap: 7px !important;
}

.controls-panel .tab:last-child,
.controls-panel .market-mode:last-child,
.controls-panel .exchange-mode:last-child {
  border-right: 0 !important;
}

.controls-panel .tab.active,
.controls-panel .market-mode.active,
.controls-panel .exchange-mode.active,
.controls-panel .exchange-all-placeholder.is-active {
  background:
    radial-gradient(circle at 20% 8%, rgba(255, 77, 95, 0.18), transparent 48%),
    linear-gradient(180deg, rgba(255, 77, 95, 0.46), rgba(55, 24, 31, 0.52)) !important;
  color: rgba(255, 77, 95, 0.96) !important;
  box-shadow:
    0 0 0 1px rgba(255, 77, 95, 0.45) inset,
    0 0 15px rgba(255, 77, 95, 0.095),
    0 10px 24px rgba(0, 0, 0, 0.2) !important;
}

.controls-panel .tab:not(.active):hover,
.controls-panel .market-mode:not(.active):hover,
.controls-panel .exchange-mode:not(.active):hover {
  color: rgba(215, 224, 232, 0.9) !important;
  background:
    linear-gradient(180deg, rgba(26, 35, 48, 0.42), rgba(5, 10, 16, 0.44)) !important;
}

.controls-panel .exchange-icon {
  width: 14px !important;
  height: 14px !important;
  flex-basis: 14px !important;
  opacity: 0.94;
  filter: saturate(0.96) contrast(0.98);
}

.controls-panel .rank-sort {
  min-height: 39px !important;
  height: 39px !important;
  min-width: 218px !important;
  border: 1px solid rgba(9, 196, 180, 0.58) !important;
  border-radius: 7px !important;
  background:
    linear-gradient(180deg, rgba(8, 38, 43, 0.34), rgba(2, 9, 14, 0.5)),
    rgba(2, 10, 14, 0.38) !important;
  color: rgba(31, 242, 211, 0.94) !important;
  padding: 0 15px !important;
  box-shadow:
    0 0 0 1px rgba(8, 214, 193, 0.075) inset,
    0 0 16px rgba(8, 214, 193, 0.095),
    0 10px 25px rgba(0, 0, 0, 0.25) !important;
}

.controls-panel .rank-sort::before {
  width: 14px !important;
  height: 14px !important;
  opacity: 0.92;
}

.controls-panel .rank-sort-title {
  font-size: 10.5px !important;
  font-weight: 850 !important;
  letter-spacing: 0 !important;
}

.controls-panel .rank-sort-subtitle {
  display: inline-block !important;
  margin: 0 0 0 8px !important;
  color: rgba(154, 181, 181, 0.68) !important;
  font-size: 8px !important;
  font-weight: 700 !important;
  white-space: nowrap;
}

@media (max-width: 768px) {
  .controls-panel .tab,
  .controls-panel .market-mode,
  .controls-panel .exchange-mode,
  .controls-panel .exchange-all-placeholder {
    min-height: 34px !important;
    height: 34px !important;
    padding: 0 12px !important;
    font-size: 10px !important;
  }

  .controls-panel .rank-sort {
    min-width: 180px !important;
    height: 36px !important;
  }
}
/* buttons-reference-scale-center-1: larger reference proportions, darker red active, centered icons */
.controls-panel .tab-group,
.controls-panel .market-mode-group,
.controls-panel .exchange-group {
  min-height: 44px !important;
  border-radius: 7px !important;
  background:
    radial-gradient(circle at 14% 0%, rgba(122, 35, 48, 0.16), transparent 36%),
    linear-gradient(180deg, rgba(18, 25, 36, 0.56), rgba(4, 8, 14, 0.66)) !important;
}

.controls-panel .tab,
.controls-panel .market-mode,
.controls-panel .exchange-mode,
.controls-panel .exchange-all-placeholder {
  min-height: 44px !important;
  height: 44px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 0 19px !important;
  font-size: 12px !important;
  font-weight: 850 !important;
  line-height: 1 !important;
  color: rgba(181, 191, 201, 0.86) !important;
}

.controls-panel .exchange-mode {
  min-height: 44px !important;
  height: 44px !important;
  padding: 0 16px !important;
  gap: 8px !important;
}

.controls-panel .tab.active,
.controls-panel .market-mode.active,
.controls-panel .exchange-mode.active,
.controls-panel .exchange-all-placeholder.is-active {
  background:
    radial-gradient(circle at 18% 6%, rgba(165, 55, 69, 0.2), transparent 50%),
    linear-gradient(180deg, rgba(255, 77, 95, 0.58), rgba(50, 22, 29, 0.62)) !important;
  color: rgba(255, 77, 95, 0.96) !important;
  box-shadow:
    0 0 0 1px rgba(198, 55, 71, 0.58) inset,
    0 0 14px rgba(153, 31, 45, 0.14),
    0 10px 24px rgba(0, 0, 0, 0.22) !important;
}

.controls-panel .exchange-icon {
  display: block !important;
  width: 16px !important;
  height: 16px !important;
  flex: 0 0 16px !important;
  align-self: center !important;
  margin: 0 !important;
  transform: translateY(0) !important;
  object-fit: contain !important;
}

.controls-panel .exchange-label {
  display: inline-flex !important;
  align-items: center !important;
  line-height: 1 !important;
}

.controls-panel .rank-sort {
  min-height: 44px !important;
  height: 44px !important;
  min-width: 230px !important;
  padding: 0 16px !important;
}

.controls-panel .rank-sort::before {
  width: 16px !important;
  height: 16px !important;
  align-self: center !important;
}

.controls-panel .rank-sort-title {
  font-size: 12px !important;
  line-height: 1 !important;
}

.controls-panel .rank-sort-subtitle {
  font-size: 8.5px !important;
  line-height: 1 !important;
}

@media (max-width: 768px) {
  .controls-panel .tab,
  .controls-panel .market-mode,
  .controls-panel .exchange-mode,
  .controls-panel .exchange-all-placeholder {
    min-height: 38px !important;
    height: 38px !important;
    padding: 0 13px !important;
    font-size: 10.5px !important;
  }

  .controls-panel .rank-sort {
    min-width: 185px !important;
    height: 38px !important;
  }
}
/* controls-spacing-ranking-right-1: wider group gaps, hide status, align ranking to table right */
.controls-panel .control-bar {
  grid-template-columns: max-content max-content max-content minmax(240px, 1fr);
  grid-template-areas: "filters market exchanges action";
  gap: 14px 55px !important;
}

.controls-panel .status-line,
.controls-panel .status-row {
  display: none !important;
}

.controls-panel .action-status {
  justify-content: flex-end !important;
  flex-direction: row !important;
  gap: 0 !important;
  min-width: 0;
}

.controls-panel .rank-sort {
  margin-left: auto !important;
  justify-self: end !important;
}

@media (max-width: 1180px) {
  .controls-panel .control-bar {
    grid-template-columns: max-content max-content minmax(0, max-content) minmax(180px, 1fr);
    grid-template-areas: "filters market exchanges action";
    gap: 12px 32px !important;
  }
}

@media (max-width: 768px) {
  .controls-panel .control-bar {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas:
      "filters"
      "market"
      "exchanges"
      "action";
    gap: 10px !important;
  }

  .controls-panel .action-status {
    justify-content: flex-start !important;
  }

  .controls-panel .rank-sort {
    margin-left: 0 !important;
  }
}
/* controls-reference-rectangles-1: match marked rectangle sizes/placement */
.controls-panel .control-bar {
  grid-template-columns: 324px 228px minmax(720px, 752px) minmax(260px, 1fr) !important;
  grid-template-areas: "filters market exchanges action" !important;
  gap: 14px 34px !important;
  align-items: center !important;
}

.controls-panel .filter-tabs,
.controls-panel .category-controls {
  width: 324px !important;
  min-width: 324px !important;
}

.controls-panel .market-tabs,
.controls-panel .market-mode-group {
  width: 228px !important;
  min-width: 228px !important;
}

.controls-panel .exchange-tabs,
.controls-panel .exchange-group {
  width: 752px !important;
  min-width: 752px !important;
  max-width: 752px !important;
}

.controls-panel .category-controls .tab,
.controls-panel .market-mode-group .market-mode {
  flex: 1 1 0 !important;
  min-width: 0 !important;
}

.controls-panel .exchange-all-placeholder {
  width: 62px !important;
  flex: 0 0 62px !important;
}

.controls-panel .exchange-mode {
  flex: 1 1 0 !important;
  min-width: 0 !important;
  padding-left: 13px !important;
  padding-right: 13px !important;
}

.controls-panel .exchange-label {
  min-width: 0 !important;
  overflow: visible !important;
}

.controls-panel .action-status {
  justify-content: flex-end !important;
  min-width: 0 !important;
}

.controls-panel .rank-sort {
  width: 250px !important;
  min-width: 250px !important;
  max-width: 250px !important;
  margin-left: auto !important;
}

@media (max-width: 1600px) {
  .controls-panel .control-bar {
    grid-template-columns: 324px 228px minmax(620px, 1fr) minmax(250px, 1fr) !important;
  }

  .controls-panel .exchange-tabs,
  .controls-panel .exchange-group {
    width: 100% !important;
    min-width: 620px !important;
    max-width: 752px !important;
  }
}

@media (max-width: 1180px) {
  .controls-panel .control-bar {
    grid-template-columns: max-content max-content minmax(0, 1fr) !important;
    grid-template-areas:
      "filters market exchanges"
      "action action action" !important;
    gap: 12px 24px !important;
  }

  .controls-panel .filter-tabs,
  .controls-panel .category-controls,
  .controls-panel .market-tabs,
  .controls-panel .market-mode-group {
    width: auto !important;
    min-width: max-content !important;
  }

  .controls-panel .exchange-tabs,
  .controls-panel .exchange-group {
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
  }
}

@media (max-width: 768px) {
  .controls-panel .control-bar {
    grid-template-columns: minmax(0, 1fr) !important;
    grid-template-areas:
      "filters"
      "market"
      "exchanges"
      "action" !important;
  }

  .controls-panel .filter-tabs,
  .controls-panel .category-controls,
  .controls-panel .market-tabs,
  .controls-panel .market-mode-group,
  .controls-panel .exchange-tabs,
  .controls-panel .exchange-group {
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
  }

  .controls-panel .rank-sort {
    width: 185px !important;
    min-width: 185px !important;
  }
}
/* controls-marked-rectangles-2: explicit placement/sizing from marked screenshot */
.controls-panel {
  left: 56px !important;
  width: calc(100vw - 112px) !important;
  max-width: calc(100vw - 112px) !important;
}

.controls-panel .control-bar {
  display: flex !important;
  align-items: center !important;
  gap: 0 !important;
  padding: 0 !important;
  width: 100% !important;
}

.controls-panel .filter-tabs {
  width: 314px !important;
  min-width: 314px !important;
  flex: 0 0 314px !important;
}

.controls-panel .market-tabs {
  width: 245px !important;
  min-width: 245px !important;
  flex: 0 0 245px !important;
  margin-left: 40px !important;
}

.controls-panel .exchange-tabs {
  width: 814px !important;
  min-width: 814px !important;
  max-width: 814px !important;
  flex: 0 0 814px !important;
  margin-left: 20px !important;
}

.controls-panel .action-status {
  flex: 1 1 auto !important;
  justify-content: flex-end !important;
  margin-left: 42px !important;
  min-width: 256px !important;
}

.controls-panel .category-controls,
.controls-panel .market-mode-group,
.controls-panel .exchange-group {
  width: 100% !important;
  min-width: 100% !important;
  max-width: 100% !important;
}

.controls-panel .category-controls .tab,
.controls-panel .market-mode-group .market-mode {
  flex: 1 1 0 !important;
  min-width: 0 !important;
}

.controls-panel .exchange-all-placeholder {
  width: 62px !important;
  flex: 0 0 62px !important;
}

.controls-panel .exchange-mode {
  flex: 1 1 0 !important;
  min-width: 0 !important;
}

.controls-panel .rank-sort {
  width: 256px !important;
  min-width: 256px !important;
  max-width: 256px !important;
  height: 44px !important;
  min-height: 44px !important;
  margin-left: 0 !important;
  border-color: rgba(255, 77, 95, 0.55) !important;
  background:
    radial-gradient(circle at 16% 12%, rgba(164, 55, 68, 0.18), transparent 42%),
    linear-gradient(180deg, rgba(70, 30, 38, 0.54), rgba(8, 9, 15, 0.58)) !important;
  color: rgba(255, 77, 95, 0.94) !important;
  box-shadow:
    0 0 0 1px rgba(255, 77, 95, 0.34) inset,
    0 0 16px rgba(151, 36, 50, 0.12),
    0 10px 25px rgba(0, 0, 0, 0.25) !important;
}

.controls-panel .rank-sort::before {
  color: rgba(255, 77, 95, 0.95) !important;
}

.controls-panel .rank-sort-title {
  color: rgba(255, 77, 95, 0.96) !important;
}

.controls-panel .rank-sort-subtitle {
  color: rgba(183, 148, 152, 0.72) !important;
}

@media (max-width: 1680px) {
  .controls-panel .filter-tabs {
    width: 300px !important;
    min-width: 300px !important;
    flex-basis: 300px !important;
  }

  .controls-panel .market-tabs {
    width: 220px !important;
    min-width: 220px !important;
    flex-basis: 220px !important;
    margin-left: 34px !important;
  }

  .controls-panel .exchange-tabs {
    width: 690px !important;
    min-width: 690px !important;
    max-width: 690px !important;
    flex-basis: 690px !important;
    margin-left: 18px !important;
  }

  .controls-panel .action-status {
    margin-left: 34px !important;
  }
}

@media (max-width: 1280px) {
  .controls-panel .control-bar {
    flex-wrap: wrap !important;
    gap: 12px 22px !important;
  }

  .controls-panel .filter-tabs,
  .controls-panel .market-tabs,
  .controls-panel .exchange-tabs,
  .controls-panel .action-status {
    margin-left: 0 !important;
  }

  .controls-panel .exchange-tabs {
    flex: 1 1 620px !important;
    width: auto !important;
    min-width: 540px !important;
    max-width: none !important;
  }

  .controls-panel .action-status {
    flex: 1 1 256px !important;
  }
}

@media (max-width: 768px) {
  .controls-panel {
    left: 10px !important;
    width: calc(100vw - 20px) !important;
    max-width: calc(100vw - 20px) !important;
  }

  .controls-panel .filter-tabs,
  .controls-panel .market-tabs,
  .controls-panel .exchange-tabs,
  .controls-panel .action-status {
    width: 100% !important;
    min-width: 0 !important;
    flex: 1 1 100% !important;
  }

  .controls-panel .rank-sort {
    width: 185px !important;
    min-width: 185px !important;
  }
}
/* controls-reference-proportions-1: match the marked reference proportions, not arbitrary fixed px */
.controls-panel {
  left: 4.7vw !important;
  width: calc(100vw - 9.4vw) !important;
  max-width: calc(100vw - 9.4vw) !important;
}

.scanner-panel {
  left: 4.7vw !important;
  width: calc(100vw - 9.4vw) !important;
  max-width: calc(100vw - 9.4vw) !important;
}

.controls-panel .control-bar {
  display: flex !important;
  align-items: center !important;
  gap: 0 !important;
  padding: 0 !important;
  width: 100% !important;
}

.controls-panel .filter-tabs {
  width: 16.6vw !important;
  min-width: 16.6vw !important;
  flex: 0 0 16.6vw !important;
}

.controls-panel .market-tabs {
  width: 12.8vw !important;
  min-width: 12.8vw !important;
  flex: 0 0 12.8vw !important;
  margin-left: 2.1vw !important;
}

.controls-panel .exchange-tabs {
  width: 42.7vw !important;
  min-width: 42.7vw !important;
  max-width: 42.7vw !important;
  flex: 0 0 42.7vw !important;
  margin-left: 1.3vw !important;
}

.controls-panel .action-status {
  flex: 0 0 13.4vw !important;
  width: 13.4vw !important;
  min-width: 13.4vw !important;
  max-width: 13.4vw !important;
  margin-left: 2.4vw !important;
  justify-content: stretch !important;
}

.controls-panel .category-controls,
.controls-panel .market-mode-group,
.controls-panel .exchange-group {
  width: 100% !important;
  min-width: 100% !important;
  max-width: 100% !important;
}

.controls-panel .category-controls .tab,
.controls-panel .market-mode-group .market-mode {
  flex: 1 1 0 !important;
  min-width: 0 !important;
}

.controls-panel .exchange-all-placeholder {
  width: 6.1% !important;
  flex: 0 0 6.1% !important;
}

.controls-panel .exchange-mode {
  flex: 1 1 0 !important;
  min-width: 0 !important;
}

.controls-panel .rank-sort {
  width: 100% !important;
  min-width: 100% !important;
  max-width: 100% !important;
  margin-left: 0 !important;
}

.controls-panel .tab,
.controls-panel .market-mode,
.controls-panel .exchange-mode,
.controls-panel .exchange-all-placeholder,
.controls-panel .rank-sort {
  height: 37px !important;
  min-height: 37px !important;
  font-size: 10.5px !important;
}

.controls-panel .tab,
.controls-panel .market-mode {
  padding-left: 0 !important;
  padding-right: 0 !important;
}

.controls-panel .exchange-mode {
  padding-left: 0.65vw !important;
  padding-right: 0.65vw !important;
  gap: 0.42vw !important;
}

.controls-panel .rank-sort {
  padding-left: 0.75vw !important;
  padding-right: 0.75vw !important;
}

.controls-panel .rank-sort-title {
  font-size: 10.5px !important;
}

.controls-panel .rank-sort-subtitle {
  font-size: 7.5px !important;
  margin-left: 0.45vw !important;
}

@media (max-width: 1280px) {
  .controls-panel .control-bar {
    flex-wrap: wrap !important;
    gap: 12px 22px !important;
  }

  .controls-panel .filter-tabs,
  .controls-panel .market-tabs,
  .controls-panel .exchange-tabs,
  .controls-panel .action-status {
    width: auto !important;
    min-width: 0 !important;
    max-width: none !important;
    flex: 0 1 auto !important;
    margin-left: 0 !important;
  }

  .controls-panel .filter-tabs { flex-basis: 314px !important; }
  .controls-panel .market-tabs { flex-basis: 245px !important; }
  .controls-panel .exchange-tabs { flex-basis: min(814px, 100%) !important; }
  .controls-panel .action-status { flex-basis: 256px !important; }
}

@media (max-width: 768px) {
  .controls-panel,
  .scanner-panel {
    left: 10px !important;
    width: calc(100vw - 20px) !important;
    max-width: calc(100vw - 20px) !important;
  }

  .controls-panel .filter-tabs,
  .controls-panel .market-tabs,
  .controls-panel .exchange-tabs,
  .controls-panel .action-status {
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    flex: 1 1 100% !important;
  }
}
/* controls-marked-rectangles-restore-1: revert previous vw proportions change */
.controls-panel {
  left: 56px !important;
  width: calc(100vw - 112px) !important;
  max-width: calc(100vw - 112px) !important;
}

.scanner-panel {
  left: 56px !important;
  width: calc(100vw - 112px) !important;
  max-width: calc(100vw - 112px) !important;
}

.controls-panel .control-bar {
  display: flex !important;
  align-items: center !important;
  gap: 0 !important;
  padding: 0 !important;
  width: 100% !important;
}

.controls-panel .filter-tabs {
  width: 314px !important;
  min-width: 314px !important;
  flex: 0 0 314px !important;
}

.controls-panel .market-tabs {
  width: 245px !important;
  min-width: 245px !important;
  flex: 0 0 245px !important;
  margin-left: 40px !important;
}

.controls-panel .exchange-tabs {
  width: 814px !important;
  min-width: 814px !important;
  max-width: 814px !important;
  flex: 0 0 814px !important;
  margin-left: 20px !important;
}

.controls-panel .action-status {
  flex: 1 1 auto !important;
  justify-content: flex-end !important;
  margin-left: 42px !important;
  min-width: 256px !important;
}

.controls-panel .category-controls,
.controls-panel .market-mode-group,
.controls-panel .exchange-group {
  width: 100% !important;
  min-width: 100% !important;
  max-width: 100% !important;
}

.controls-panel .category-controls .tab,
.controls-panel .market-mode-group .market-mode {
  flex: 1 1 0 !important;
  min-width: 0 !important;
}

.controls-panel .exchange-all-placeholder {
  width: 62px !important;
  flex: 0 0 62px !important;
}

.controls-panel .exchange-mode {
  flex: 1 1 0 !important;
  min-width: 0 !important;
}

.controls-panel .rank-sort {
  width: 256px !important;
  min-width: 256px !important;
  max-width: 256px !important;
  margin-left: 0 !important;
}

@media (max-width: 1680px) {
  .controls-panel .filter-tabs {
    width: 300px !important;
    min-width: 300px !important;
    flex-basis: 300px !important;
  }

  .controls-panel .market-tabs {
    width: 220px !important;
    min-width: 220px !important;
    flex-basis: 220px !important;
    margin-left: 34px !important;
  }

  .controls-panel .exchange-tabs {
    width: 690px !important;
    min-width: 690px !important;
    max-width: 690px !important;
    flex-basis: 690px !important;
    margin-left: 18px !important;
  }

  .controls-panel .action-status {
    margin-left: 34px !important;
  }
}

@media (max-width: 1280px) {
  .controls-panel .control-bar {
    flex-wrap: wrap !important;
    gap: 12px 22px !important;
  }

  .controls-panel .filter-tabs,
  .controls-panel .market-tabs,
  .controls-panel .exchange-tabs,
  .controls-panel .action-status {
    margin-left: 0 !important;
  }

  .controls-panel .exchange-tabs {
    flex: 1 1 620px !important;
    width: auto !important;
    min-width: 540px !important;
    max-width: none !important;
  }

  .controls-panel .action-status {
    flex: 1 1 256px !important;
  }
}

@media (max-width: 768px) {
  .controls-panel,
  .scanner-panel {
    left: 10px !important;
    width: calc(100vw - 20px) !important;
    max-width: calc(100vw - 20px) !important;
  }

  .controls-panel .filter-tabs,
  .controls-panel .market-tabs,
  .controls-panel .exchange-tabs,
  .controls-panel .action-status {
    width: 100% !important;
    min-width: 0 !important;
    flex: 1 1 100% !important;
  }
}
/* layout-repair-controls-table-1: restore marked table bounds and solid glass buttons */
.controls-panel,
.scanner-panel {
  left: 56px !important;
  width: calc(100vw - 168px) !important;
  max-width: calc(100vw - 168px) !important;
}

.controls-panel .control-bar {
  display: flex !important;
  align-items: center !important;
  width: 100% !important;
  padding: 0 !important;
  gap: 0 !important;
}

.controls-panel .filter-tabs {
  flex: 0 0 310px !important;
  width: 310px !important;
  min-width: 310px !important;
  margin-left: 0 !important;
}

.controls-panel .market-tabs {
  flex: 0 0 246px !important;
  width: 246px !important;
  min-width: 246px !important;
  margin-left: 54px !important;
}

.controls-panel .exchange-tabs {
  flex: 0 0 814px !important;
  width: 814px !important;
  min-width: 814px !important;
  max-width: 814px !important;
  margin-left: 20px !important;
}

.controls-panel .action-status {
  flex: 1 1 auto !important;
  min-width: 250px !important;
  margin-left: 42px !important;
  justify-content: flex-end !important;
}

.controls-panel .category-controls,
.controls-panel .market-mode-group,
.controls-panel .exchange-group {
  width: 100% !important;
  min-width: 100% !important;
  max-width: 100% !important;
  height: 44px !important;
  min-height: 44px !important;
  border: 1px solid rgba(69, 84, 100, 0.7) !important;
  border-radius: 7px !important;
  background:
    linear-gradient(180deg, rgba(15, 22, 33, 0.72), rgba(4, 8, 14, 0.68)) !important;
  box-shadow:
    0 11px 26px rgba(0, 0, 0, 0.3),
    0 0 0 1px rgba(255, 255, 255, 0.03) inset !important;
  overflow: hidden !important;
}

.controls-panel .category-controls .tab,
.controls-panel .market-mode-group .market-mode {
  flex: 1 1 0 !important;
  min-width: 0 !important;
}

.controls-panel .exchange-all-placeholder {
  flex: 0 0 62px !important;
  width: 62px !important;
}

.controls-panel .exchange-mode {
  flex: 1 1 0 !important;
  min-width: 0 !important;
}

.controls-panel .tab,
.controls-panel .market-mode,
.controls-panel .exchange-mode,
.controls-panel .exchange-all-placeholder {
  height: 44px !important;
  min-height: 44px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  border: 0 !important;
  border-right: 1px solid rgba(68, 82, 98, 0.7) !important;
  border-radius: 0 !important;
  background: transparent !important;
  color: rgba(181, 191, 201, 0.86) !important;
  font-size: 12px !important;
  font-weight: 850 !important;
  line-height: 1 !important;
  padding: 0 16px !important;
  box-shadow: none !important;
}

.controls-panel .tab:last-child,
.controls-panel .market-mode:last-child,
.controls-panel .exchange-mode:last-child {
  border-right: 0 !important;
}

.controls-panel .tab.active,
.controls-panel .market-mode.active,
.controls-panel .exchange-mode.active,
.controls-panel .exchange-all-placeholder.is-active {
  background:
    linear-gradient(180deg, rgba(255, 77, 95, 0.74), rgba(58, 24, 32, 0.66)) !important;
  color: rgba(255, 77, 95, 0.96) !important;
  box-shadow:
    inset 0 0 0 1px rgba(183, 49, 64, 0.52),
    inset 0 12px 28px rgba(255, 77, 95, 0.07) !important;
}

.controls-panel .exchange-icon {
  display: block !important;
  width: 16px !important;
  height: 16px !important;
  flex: 0 0 16px !important;
  margin: 0 !important;
  align-self: center !important;
  object-fit: contain !important;
  transform: none !important;
}

.controls-panel .exchange-label {
  display: inline-flex !important;
  align-items: center !important;
  line-height: 1 !important;
}

.controls-panel .rank-sort {
  width: 256px !important;
  min-width: 256px !important;
  max-width: 256px !important;
  height: 44px !important;
  min-height: 44px !important;
  margin-left: 0 !important;
  border: 1px solid rgba(69, 84, 100, 0.7) !important;
  border-radius: 7px !important;
  background:
    linear-gradient(180deg, rgba(15, 22, 33, 0.72), rgba(4, 8, 14, 0.68)) !important;
  color: rgba(255, 77, 95, 0.96) !important;
  box-shadow:
    0 11px 26px rgba(0, 0, 0, 0.3),
    inset 0 0 0 1px rgba(183, 49, 64, 0.22) !important;
}

.controls-panel .rank-sort-title {
  color: rgba(255, 77, 95, 0.96) !important;
}

.controls-panel .rank-sort-subtitle {
  color: rgba(177, 153, 157, 0.72) !important;
}

@media (max-width: 1680px) {
  .controls-panel,
  .scanner-panel {
    left: 56px !important;
    width: calc(100vw - 132px) !important;
    max-width: calc(100vw - 132px) !important;
  }

  .controls-panel .filter-tabs {
    flex-basis: 310px !important;
    width: 310px !important;
    min-width: 310px !important;
  }

  .controls-panel .market-tabs {
    flex-basis: 246px !important;
    width: 246px !important;
    min-width: 246px !important;
    margin-left: 40px !important;
  }

  .controls-panel .exchange-tabs {
    flex-basis: 760px !important;
    width: 760px !important;
    min-width: 760px !important;
    max-width: 760px !important;
    margin-left: 20px !important;
  }

  .controls-panel .action-status {
    margin-left: 34px !important;
  }
}

@media (max-width: 1280px) {
  .controls-panel .control-bar {
    flex-wrap: wrap !important;
    gap: 12px 22px !important;
  }

  .controls-panel .filter-tabs,
  .controls-panel .market-tabs,
  .controls-panel .exchange-tabs,
  .controls-panel .action-status {
    margin-left: 0 !important;
  }
}

@media (max-width: 768px) {
  .controls-panel,
  .scanner-panel {
    left: 10px !important;
    width: calc(100vw - 20px) !important;
    max-width: calc(100vw - 20px) !important;
  }
}
/* layout-repair-final-1: align table bounds and make controls solid glass segments */
.controls-panel,
.scanner-panel {
  left: 56px !important;
  width: calc(100vw - 168px) !important;
  max-width: calc(100vw - 168px) !important;
}

.controls-panel .control-bar {
  display: flex !important;
  align-items: center !important;
  width: 100% !important;
  gap: 0 !important;
  padding: 0 !important;
}

.controls-panel .filter-tabs {
  flex: 0 0 314px !important;
  width: 314px !important;
  min-width: 314px !important;
  margin-left: 0 !important;
}

.controls-panel .market-tabs {
  flex: 0 0 246px !important;
  width: 246px !important;
  min-width: 246px !important;
  margin-left: 54px !important;
}

.controls-panel .exchange-tabs {
  flex: 0 0 814px !important;
  width: 814px !important;
  min-width: 814px !important;
  max-width: 814px !important;
  margin-left: 20px !important;
}

.controls-panel .action-status {
  flex: 1 1 auto !important;
  min-width: 256px !important;
  margin-left: 42px !important;
  display: flex !important;
  justify-content: flex-end !important;
}

.controls-panel .category-controls,
.controls-panel .market-mode-group,
.controls-panel .exchange-group {
  display: flex !important;
  align-items: stretch !important;
  width: 100% !important;
  height: 44px !important;
  min-height: 44px !important;
  border: 1px solid rgba(74, 86, 101, 0.7) !important;
  border-radius: 7px !important;
  background:
    radial-gradient(circle at 18% 0%, rgba(105, 31, 43, 0.16), transparent 42%),
    linear-gradient(180deg, rgba(15, 22, 33, 0.68), rgba(4, 8, 14, 0.72)) !important;
  box-shadow:
    0 12px 28px rgba(0, 0, 0, 0.32),
    0 0 0 1px rgba(255, 255, 255, 0.035) inset !important;
  overflow: hidden !important;
}

.controls-panel .category-controls .tab,
.controls-panel .market-mode-group .market-mode {
  flex: 1 1 0 !important;
  min-width: 0 !important;
}

.controls-panel .exchange-all-placeholder {
  flex: 0 0 62px !important;
  width: 62px !important;
}

.controls-panel .exchange-mode {
  flex: 1 1 0 !important;
  min-width: 0 !important;
}

.controls-panel .tab,
.controls-panel .market-mode,
.controls-panel .exchange-mode,
.controls-panel .exchange-all-placeholder {
  position: relative !important;
  height: 44px !important;
  min-height: 44px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
  padding: 0 16px !important;
  border: 0 !important;
  border-right: 1px solid rgba(68, 82, 98, 0.68) !important;
  border-radius: 0 !important;
  background: transparent !important;
  color: rgba(184, 193, 203, 0.86) !important;
  box-shadow: none !important;
  font-size: 12px !important;
  font-weight: 850 !important;
  line-height: 1 !important;
  letter-spacing: 0 !important;
}

.controls-panel .tab::before,
.controls-panel .tab::after,
.controls-panel .market-mode::before,
.controls-panel .market-mode::after,
.controls-panel .exchange-mode::before,
.controls-panel .exchange-mode::after,
.controls-panel .exchange-all-placeholder::before,
.controls-panel .exchange-all-placeholder::after {
  content: none !important;
  display: none !important;
}

.controls-panel .tab:last-child,
.controls-panel .market-mode:last-child,
.controls-panel .exchange-mode:last-child {
  border-right: 0 !important;
}

.controls-panel .tab.active,
.controls-panel .market-mode.active,
.controls-panel .exchange-mode.active,
.controls-panel .exchange-all-placeholder.is-active {
  background:
    radial-gradient(circle at 22% 8%, rgba(132, 39, 52, 0.18), transparent 58%),
    linear-gradient(180deg, rgba(83, 18, 31, 0.7), rgba(35, 8, 16, 0.68)) !important;
  color: rgba(255, 77, 95, 0.97) !important;
  box-shadow:
    inset 0 0 0 1px rgba(190, 50, 66, 0.5),
    inset 0 12px 28px rgba(255, 77, 95, 0.055) !important;
}

.controls-panel .exchange-icon {
  display: block !important;
  width: 16px !important;
  height: 16px !important;
  flex: 0 0 16px !important;
  margin: 0 !important;
  align-self: center !important;
  object-fit: contain !important;
  transform: none !important;
}

.controls-panel .exchange-label {
  display: inline-flex !important;
  align-items: center !important;
  line-height: 1 !important;
}

.controls-panel .rank-sort {
  width: 256px !important;
  min-width: 256px !important;
  max-width: 256px !important;
  height: 44px !important;
  min-height: 44px !important;
  margin-left: 0 !important;
  padding: 0 16px !important;
  border: 1px solid rgba(74, 86, 101, 0.7) !important;
  border-radius: 7px !important;
  background:
    radial-gradient(circle at 18% 0%, rgba(105, 31, 43, 0.14), transparent 44%),
    linear-gradient(180deg, rgba(15, 22, 33, 0.68), rgba(4, 8, 14, 0.72)) !important;
  color: rgba(255, 77, 95, 0.97) !important;
  box-shadow:
    0 12px 28px rgba(0, 0, 0, 0.32),
    inset 0 0 0 1px rgba(190, 50, 66, 0.22) !important;
}

.controls-panel .rank-sort::before,
.controls-panel .rank-sort::after {
  content: none !important;
  display: none !important;
}

.controls-panel .rank-sort-title {
  color: rgba(255, 77, 95, 0.97) !important;
  font-size: 12px !important;
  line-height: 1 !important;
}

.controls-panel .rank-sort-subtitle {
  color: rgba(177, 153, 157, 0.72) !important;
  font-size: 8.5px !important;
  line-height: 1 !important;
}

@media (max-width: 1680px) {
  .controls-panel,
  .scanner-panel {
    left: 56px !important;
    width: calc(100vw - 132px) !important;
    max-width: calc(100vw - 132px) !important;
  }

  .controls-panel .filter-tabs {
    flex-basis: 314px !important;
    width: 314px !important;
    min-width: 314px !important;
  }

  .controls-panel .market-tabs {
    flex-basis: 246px !important;
    width: 246px !important;
    min-width: 246px !important;
    margin-left: 40px !important;
  }

  .controls-panel .exchange-tabs {
    flex-basis: 760px !important;
    width: 760px !important;
    min-width: 760px !important;
    max-width: 760px !important;
    margin-left: 20px !important;
  }

  .controls-panel .action-status {
    margin-left: 34px !important;
  }
}

@media (max-width: 1280px) {
  .controls-panel .control-bar {
    flex-wrap: wrap !important;
    gap: 12px 22px !important;
  }

  .controls-panel .filter-tabs,
  .controls-panel .market-tabs,
  .controls-panel .exchange-tabs,
  .controls-panel .action-status {
    margin-left: 0 !important;
  }
}

@media (max-width: 768px) {
  .controls-panel,
  .scanner-panel {
    left: 10px !important;
    width: calc(100vw - 20px) !important;
    max-width: calc(100vw - 20px) !important;
  }
}

/* layout-align-red-guides-1: table/controls match the user's marked red guide lines */
.controls-panel,
.scanner-panel {
  left: 56px !important;
  width: calc(100vw - 124px) !important;
  max-width: calc(100vw - 124px) !important;
}

.controls-panel .filter-tabs {
  flex: 0 0 312px !important;
  width: 312px !important;
  min-width: 312px !important;
  margin-left: 0 !important;
}

.controls-panel .market-tabs {
  flex: 0 0 246px !important;
  width: 246px !important;
  min-width: 246px !important;
  margin-left: 54px !important;
}

.controls-panel .exchange-tabs {
  flex: 0 0 814px !important;
  width: 814px !important;
  min-width: 814px !important;
  max-width: 814px !important;
  margin-left: 20px !important;
}

.controls-panel .action-status {
  flex: 1 1 auto !important;
  min-width: 256px !important;
  margin-left: 42px !important;
  display: flex !important;
  justify-content: flex-end !important;
}

.controls-panel .rank-sort {
  width: 256px !important;
  min-width: 256px !important;
  max-width: 256px !important;
  margin-left: auto !important;
}

@media (max-width: 1680px) {
  .controls-panel,
  .scanner-panel {
    left: 56px !important;
    width: calc(100vw - 96px) !important;
    max-width: calc(100vw - 96px) !important;
  }
}

@media (max-width: 768px) {
  .controls-panel,
  .scanner-panel {
    left: 10px !important;
    width: calc(100vw - 20px) !important;
    max-width: calc(100vw - 20px) !important;
  }
}

/* layout-left-guide-correction-1: compensate the visible inset so table/buttons start on the left red guide */
.controls-panel,
.scanner-panel {
  left: 47px !important;
  width: calc(100vw - 115px) !important;
  max-width: calc(100vw - 115px) !important;
}

.controls-panel .filter-tabs {
  flex: 0 0 300px !important;
  width: 300px !important;
  min-width: 300px !important;
  max-width: 300px !important;
  margin-left: 0 !important;
}

.controls-panel .market-tabs {
  margin-left: 62px !important;
}

.controls-panel .rank-sort {
  margin-left: auto !important;
}

@media (max-width: 1680px) {
  .controls-panel,
  .scanner-panel {
    left: 47px !important;
    width: calc(100vw - 87px) !important;
    max-width: calc(100vw - 87px) !important;
  }

  .controls-panel .filter-tabs {
    flex-basis: 300px !important;
    width: 300px !important;
    min-width: 300px !important;
    max-width: 300px !important;
  }
}

@media (max-width: 768px) {
  .controls-panel,
  .scanner-panel {
    left: 10px !important;
    width: calc(100vw - 20px) !important;
    max-width: calc(100vw - 20px) !important;
  }
}

/* left-filter-width-to-guide-1: extend ALL/0%/STOCKS group to the marked right guide */
.controls-panel .filter-tabs {
  flex: 0 0 312px !important;
  width: 312px !important;
  min-width: 312px !important;
  max-width: 312px !important;
}

@media (max-width: 1680px) {
  .controls-panel .filter-tabs {
    flex-basis: 312px !important;
    width: 312px !important;
    min-width: 312px !important;
    max-width: 312px !important;
  }
}

/* default-ranking-right-tall-1: align ranking button to table right edge and make it double-height upward */
.controls-panel .action-status {
  position: relative !important;
  flex: 1 1 auto !important;
  min-width: 256px !important;
  margin-left: 42px !important;
  display: flex !important;
  justify-content: flex-end !important;
  align-items: flex-end !important;
  align-self: flex-end !important;
  height: 44px !important;
}

.controls-panel .rank-sort {
  width: 256px !important;
  min-width: 256px !important;
  max-width: 256px !important;
  height: 88px !important;
  min-height: 88px !important;
  margin-left: auto !important;
  margin-right: -10px !important;
  transform: translateY(-44px) !important;
  align-items: center !important;
}

@media (max-width: 1680px) {
  .controls-panel .action-status {
    margin-left: 34px !important;
  }

  .controls-panel .rank-sort {
    margin-right: -10px !important;
  }
}

@media (max-width: 768px) {
  .controls-panel .rank-sort {
    height: 44px !important;
    min-height: 44px !important;
    margin-right: 0 !important;
    transform: none !important;
  }
}

/* default-ranking-bottom-aligned-1: keep tall ranking button attached to the controls baseline */
.controls-panel .action-status {
  height: 88px !important;
  min-height: 88px !important;
  align-items: flex-end !important;
  align-self: flex-end !important;
}

.controls-panel .rank-sort {
  height: 88px !important;
  min-height: 88px !important;
  transform: none !important;
  align-self: flex-end !important;
  margin-top: 0 !important;
  margin-bottom: 0 !important;
  margin-left: auto !important;
  margin-right: -10px !important;
}

@media (max-width: 768px) {
  .controls-panel .action-status {
    height: auto !important;
    min-height: 0 !important;
  }

  .controls-panel .rank-sort {
    height: 44px !important;
    min-height: 44px !important;
    transform: none !important;
    margin-right: 0 !important;
  }
}

/* default-ranking-absolute-tall-1: tall ranking card without pushing the main controls row down */
.controls-panel {
  overflow: visible !important;
}

.controls-panel .control-bar {
  height: 44px !important;
  min-height: 44px !important;
  align-items: flex-end !important;
  overflow: visible !important;
}

.controls-panel .filter-tabs,
.controls-panel .market-tabs,
.controls-panel .exchange-tabs {
  align-self: flex-end !important;
}

.controls-panel .action-status {
  position: relative !important;
  height: 44px !important;
  min-height: 44px !important;
  align-self: flex-end !important;
  align-items: flex-end !important;
  overflow: visible !important;
}

.controls-panel .rank-sort {
  position: absolute !important;
  right: -10px !important;
  bottom: 0 !important;
  width: 256px !important;
  min-width: 256px !important;
  max-width: 256px !important;
  height: 88px !important;
  min-height: 88px !important;
  margin: 0 !important;
  transform: none !important;
}

@media (max-width: 768px) {
  .controls-panel .control-bar,
  .controls-panel .action-status {
    height: auto !important;
    min-height: 0 !important;
  }

  .controls-panel .rank-sort {
    position: relative !important;
    right: auto !important;
    bottom: auto !important;
    height: 44px !important;
    min-height: 44px !important;
    margin: 0 !important;
  }
}

/* controls-equal-62-gaps-1: keep 62px gaps around market/exchange/ranking blocks */
.controls-panel .market-tabs {
  margin-left: 62px !important;
}

.controls-panel .exchange-tabs {
  flex: 0 0 730px !important;
  width: 730px !important;
  min-width: 730px !important;
  max-width: 730px !important;
  margin-left: 62px !important;
}

.controls-panel .action-status {
  margin-left: 62px !important;
}

@media (max-width: 1680px) {
  .controls-panel .market-tabs {
    margin-left: 62px !important;
  }

  .controls-panel .exchange-tabs {
    flex-basis: 676px !important;
    width: 676px !important;
    min-width: 676px !important;
    max-width: 676px !important;
    margin-left: 62px !important;
  }

  .controls-panel .action-status {
    margin-left: 62px !important;
  }
}

@media (max-width: 1280px) {
  .controls-panel .market-tabs,
  .controls-panel .exchange-tabs,
  .controls-panel .action-status {
    margin-left: 0 !important;
  }
}

/* default-ranking-panel-right-1: align ranking card to the controls/table right edge */
.controls-panel {
  position: absolute !important;
  overflow: visible !important;
}

.controls-panel .action-status {
  position: static !important;
  flex: 1 1 auto !important;
  min-width: 256px !important;
  margin-left: 62px !important;
  height: 44px !important;
  min-height: 44px !important;
  overflow: visible !important;
}

.controls-panel .rank-sort {
  position: absolute !important;
  right: 0 !important;
  bottom: 0 !important;
  width: 256px !important;
  min-width: 256px !important;
  max-width: 256px !important;
  height: 88px !important;
  min-height: 88px !important;
  margin: 0 !important;
  transform: none !important;
}

@media (max-width: 768px) {
  .controls-panel .action-status {
    position: relative !important;
    height: auto !important;
    min-height: 0 !important;
    margin-left: 0 !important;
  }

  .controls-panel .rank-sort {
    position: relative !important;
    right: auto !important;
    bottom: auto !important;
    height: 44px !important;
    min-height: 44px !important;
  }
}

/* exchange-all-expand-for-62-gap-1: extend exchange group by widening only its ALL segment */
.controls-panel .exchange-tabs {
  flex: 0 0 758px !important;
  width: 758px !important;
  min-width: 758px !important;
  max-width: 758px !important;
  margin-left: 62px !important;
}

.controls-panel .exchange-all-placeholder {
  flex: 0 0 90px !important;
  width: 90px !important;
  min-width: 90px !important;
  max-width: 90px !important;
}

@media (max-width: 1680px) {
  .controls-panel .exchange-tabs {
    flex-basis: 704px !important;
    width: 704px !important;
    min-width: 704px !important;
    max-width: 704px !important;
    margin-left: 62px !important;
  }

  .controls-panel .exchange-all-placeholder {
    flex-basis: 90px !important;
    width: 90px !important;
    min-width: 90px !important;
    max-width: 90px !important;
  }
}

@media (max-width: 1280px) {
  .controls-panel .exchange-tabs {
    width: auto !important;
    min-width: 0 !important;
    max-width: none !important;
    margin-left: 0 !important;
  }
}

/* layout-lock-current-1
   Frozen layout contract. Do not change these positions/sizes without explicit user approval.
   Locked elements: hero brand/logo/title, controls groups, exchange group, Default ranking, scanner table.
   Current desktop contract:
   - controls/table left edge: 47px
   - controls/table width: calc(100vw - 115px)
   - filter block width: 312px
   - gap filter -> market: 62px
   - market block width: 246px
   - gap market -> exchanges: 62px
   - exchange block width: 758px
   - exchange ALL segment width: 90px
   - gap exchanges -> Default ranking: 62px via action-status margin
   - Default ranking: right edge pinned to controls/table right edge, width 256px, height 88px
*/
.controls-panel,
.scanner-panel {
  left: 47px !important;
  width: calc(100vw - 115px) !important;
  max-width: calc(100vw - 115px) !important;
}

.controls-panel .filter-tabs {
  flex: 0 0 312px !important;
  width: 312px !important;
  min-width: 312px !important;
  max-width: 312px !important;
  margin-left: 0 !important;
}

.controls-panel .market-tabs {
  flex: 0 0 246px !important;
  width: 246px !important;
  min-width: 246px !important;
  margin-left: 62px !important;
}

.controls-panel .exchange-tabs {
  flex: 0 0 758px !important;
  width: 758px !important;
  min-width: 758px !important;
  max-width: 758px !important;
  margin-left: 62px !important;
}

.controls-panel .exchange-all-placeholder {
  flex: 0 0 90px !important;
  width: 90px !important;
  min-width: 90px !important;
  max-width: 90px !important;
}

.controls-panel .action-status {
  position: static !important;
  flex: 1 1 auto !important;
  min-width: 256px !important;
  margin-left: 62px !important;
  height: 44px !important;
  min-height: 44px !important;
  overflow: visible !important;
}

.controls-panel .rank-sort {
  position: absolute !important;
  right: 0 !important;
  bottom: 0 !important;
  width: 256px !important;
  min-width: 256px !important;
  max-width: 256px !important;
  height: 88px !important;
  min-height: 88px !important;
  margin: 0 !important;
  transform: none !important;
}

@media (max-width: 1680px) {
  .controls-panel,
  .scanner-panel {
    left: 47px !important;
    width: calc(100vw - 87px) !important;
    max-width: calc(100vw - 87px) !important;
  }

  .controls-panel .filter-tabs {
    flex-basis: 312px !important;
    width: 312px !important;
    min-width: 312px !important;
    max-width: 312px !important;
  }

  .controls-panel .market-tabs {
    margin-left: 62px !important;
  }

  .controls-panel .exchange-tabs {
    flex-basis: 704px !important;
    width: 704px !important;
    min-width: 704px !important;
    max-width: 704px !important;
    margin-left: 62px !important;
  }

  .controls-panel .exchange-all-placeholder {
    flex-basis: 90px !important;
    width: 90px !important;
    min-width: 90px !important;
    max-width: 90px !important;
  }

  .controls-panel .action-status {
    margin-left: 62px !important;
  }
}

@media (max-width: 1280px) {
  .controls-panel .market-tabs,
  .controls-panel .exchange-tabs,
  .controls-panel .action-status {
    margin-left: 0 !important;
  }
}

@media (max-width: 768px) {
  .controls-panel,
  .scanner-panel {
    left: 10px !important;
    width: calc(100vw - 20px) !important;
    max-width: calc(100vw - 20px) !important;
  }

  .controls-panel .rank-sort {
    position: relative !important;
    right: auto !important;
    bottom: auto !important;
    height: 44px !important;
    min-height: 44px !important;
  }
}

/* hero-info-cards-1: five placeholder cards above the locked controls/table layout */
.page-hero {
  position: relative !important;
}

.hero-info-grid {
  position: absolute;
  left: 392px;
  right: 0;
  top: 10px;
  z-index: 12;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr)) 256px;
  gap: 28px;
  height: 182px;
  pointer-events: none;
}

.hero-info-stack {
  display: grid;
  grid-template-rows: 1fr 1fr;
  gap: 18px;
  min-width: 0;
}

.hero-info-card {
  position: relative;
  min-width: 0;
  overflow: hidden;
  border: 1px solid rgba(118, 136, 154, 0.42);
  border-radius: 16px;
  background:
    radial-gradient(circle at 14% 0%, rgba(255, 77, 95, 0.09), transparent 42%),
    linear-gradient(180deg, rgba(19, 28, 40, 0.62), rgba(5, 9, 15, 0.58));
  box-shadow:
    0 18px 42px rgba(0, 0, 0, 0.34),
    0 0 0 1px rgba(255, 255, 255, 0.035) inset,
    0 0 26px rgba(125, 150, 178, 0.09);
  backdrop-filter: blur(12px) saturate(122%);
  -webkit-backdrop-filter: blur(12px) saturate(122%);
  pointer-events: none;
}

.hero-info-card::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.13), transparent 32%, rgba(0, 255, 208, 0.035));
  opacity: 0.56;
  pointer-events: none;
}

.hero-info-card--wide {
  height: 182px;
  padding: 24px 26px;
}

.hero-info-card--small {
  height: 82px;
  padding: 18px 20px;
  border-radius: 14px;
}

.hero-info-card__label,
.hero-info-card__body {
  position: relative;
  z-index: 1;
}

.hero-info-card__label {
  color: rgba(245, 248, 252, 0.88);
  font-size: 12px;
  font-weight: 900;
  line-height: 1.1;
  letter-spacing: 0.01em;
  text-transform: uppercase;
  text-shadow: 0 1px 16px rgba(255, 255, 255, 0.18);
}

.hero-info-card__body {
  margin-top: 12px;
  color: rgba(173, 188, 202, 0.64);
  font-size: 11px;
  font-weight: 700;
  line-height: 1.3;
}

.hero-info-card--small .hero-info-card__body {
  margin-top: 6px;
  font-size: 10px;
}

@media (max-width: 1680px) {
  .hero-info-grid {
    left: 378px;
    gap: 22px;
    grid-template-columns: repeat(3, minmax(0, 1fr)) 256px;
  }
}

@media (max-width: 1280px) {
  .hero-info-grid {
    position: relative;
    left: auto;
    right: auto;
    top: auto;
    width: calc(100vw - 94px);
    margin: 18px 0 0 0;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    height: auto;
  }

  .hero-info-stack {
    grid-column: span 2;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-template-rows: none;
  }

  .hero-info-card--wide,
  .hero-info-card--small {
    height: 126px;
  }
}

@media (max-width: 768px) {
  .hero-info-grid {
    display: none;
  }
}

/* hero-cards-layout-fix-1: fixed desktop grid for brand + 5 top placeholder cards */
.scanner-hero {
  position: relative !important;
  z-index: 18 !important;
  width: 100% !important;
  min-height: 224px !important;
  padding: 24px 32px 14px !important;
  display: block !important;
  overflow: visible !important;
  pointer-events: none !important;
}

.scanner-hero-grid {
  display: grid !important;
  grid-template-columns: 260px minmax(260px, 1fr) minmax(260px, 1fr) minmax(260px, 1fr) 240px !important;
  column-gap: 24px !important;
  row-gap: 14px !important;
  align-items: start !important;
  width: 100% !important;
}

.scanner-hero .brand-block--motion,
.scanner-hero .brand-layer-item {
  position: relative !important;
  grid-column: 1 !important;
  grid-row: 1 !important;
  left: auto !important;
  top: auto !important;
  width: 260px !important;
  min-height: 170px !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: flex-start !important;
  overflow: visible !important;
  padding-top: 0 !important;
  padding-left: 0 !important;
  z-index: 2 !important;
}

.scanner-hero .worksxxx-logo-motion {
  width: 260px !important;
  height: 118px !important;
  flex: 0 0 auto !important;
  object-fit: contain !important;
  display: block !important;
  pointer-events: none !important;
  user-select: none !important;
  background: transparent !important;
  transform: none !important;
  margin: 0 !important;
}

.scanner-hero .brand-copy--hero {
  width: 260px !important;
  margin-top: -4px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}

.scanner-hero .worksxxx-title-image {
  width: 220px !important;
  height: auto !important;
  display: block !important;
  margin-top: 0 !important;
  pointer-events: none !important;
  user-select: none !important;
  -webkit-user-drag: none !important;
}

.hero-info-grid,
.hero-info-card,
.hero-info-stack {
  display: none !important;
}

.hero-card {
  position: relative;
  overflow: hidden;
  border-radius: 16px;
  padding: 18px 20px;
  background:
    linear-gradient(135deg, rgba(16, 22, 34, 0.82), rgba(5, 8, 14, 0.72));
  border: 1px solid rgba(150, 170, 200, 0.22);
  box-shadow:
    0 16px 40px rgba(0, 0, 0, 0.38),
    inset 0 1px 0 rgba(255, 255, 255, 0.045);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  pointer-events: none;
}

.hero-card::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(circle at 22% 0%, rgba(255, 77, 95, 0.12), transparent 38%),
    radial-gradient(circle at 85% 18%, rgba(135, 160, 190, 0.08), transparent 42%);
  opacity: 0.9;
}

.hero-card--dex {
  grid-column: 2;
}

.hero-card--funding {
  grid-column: 3;
}

.hero-card--listings {
  grid-column: 4;
}

.hero-card--wide {
  min-height: 170px;
  height: 170px;
}

.hero-side-stack {
  grid-column: 5;
  grid-row: 1;
  display: grid;
  grid-template-rows: 78px 78px;
  gap: 14px;
  width: 100%;
}

.hero-card--small {
  height: 78px;
  min-height: 78px;
  padding: 14px 16px;
}

.hero-card--join {
  grid-row: 1;
}

.hero-card--live {
  grid-row: 2;
}

.hero-card__title {
  position: relative;
  z-index: 1;
  margin: 0;
  color: rgba(255, 255, 255, 0.92);
  font-size: 12px;
  font-weight: 900;
  line-height: 1;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.hero-card__body,
.hero-card__placeholder {
  position: relative;
  z-index: 1;
  margin-top: 14px;
  color: rgba(180, 192, 208, 0.68);
  font-size: 12px;
  font-weight: 700;
  line-height: 1.35;
}

.hero-card--small .hero-card__body,
.hero-card--small .hero-card__placeholder {
  margin-top: 8px;
  font-size: 11px;
}

@media (max-width: 1280px) {
  .scanner-hero-grid {
    grid-template-columns: 240px repeat(2, minmax(240px, 1fr)) !important;
  }

  .hero-card--dex {
    grid-column: 2;
  }

  .hero-card--funding {
    grid-column: 3;
  }

  .hero-card--listings {
    grid-column: 2;
  }

  .hero-side-stack {
    grid-column: 3;
  }
}

@media (max-width: 768px) {
  .scanner-hero {
    padding: 18px 16px 10px !important;
    min-height: auto !important;
  }

  .scanner-hero-grid {
    grid-template-columns: 1fr !important;
    gap: 12px !important;
  }

  .scanner-hero .brand-block--motion,
  .scanner-hero .brand-layer-item,
  .hero-card--dex,
  .hero-card--funding,
  .hero-card--listings,
  .hero-side-stack {
    grid-column: 1 !important;
  }

  .scanner-hero .brand-block--motion,
  .scanner-hero .brand-layer-item {
    width: 150px !important;
    min-height: auto !important;
    align-items: flex-start !important;
  }

  .scanner-hero .worksxxx-logo-motion {
    width: 150px !important;
    height: 82px !important;
  }

  .scanner-hero .brand-copy--hero {
    width: 150px !important;
  }

  .scanner-hero .worksxxx-title-image {
    width: 135px !important;
  }

  .hero-card--wide {
    height: auto;
    min-height: 120px;
  }

  .hero-side-stack {
    grid-template-rows: auto;
  }

  .hero-card--small {
    height: auto;
    min-height: 72px;
  }
}

/* hero-grid-only-fix-1: strict desktop top grid, controls/table stay below hero */
.scanner-hero {
  position: relative !important;
  z-index: 2 !important;
  width: 100% !important;
  box-sizing: border-box !important;
  min-height: 204px !important;
  padding: 24px 52px 10px !important;
  display: block !important;
  overflow: visible !important;
  pointer-events: none !important;
}

.scanner-hero-grid {
  display: grid !important;
  grid-template-columns: 280px minmax(300px, 1fr) minmax(300px, 1fr) minmax(300px, 1fr) 250px !important;
  column-gap: 28px !important;
  row-gap: 14px !important;
  align-items: start !important;
  width: 100% !important;
  box-sizing: border-box !important;
}

.scanner-hero .brand-block--motion,
.scanner-hero .brand-layer-item {
  position: relative !important;
  grid-column: 1 !important;
  grid-row: 1 !important;
  left: auto !important;
  top: auto !important;
  width: 280px !important;
  min-height: 170px !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: flex-start !important;
  overflow: visible !important;
  padding: 0 !important;
  margin: 0 !important;
  z-index: 2 !important;
}

.scanner-hero .worksxxx-logo-motion {
  width: 260px !important;
  height: 118px !important;
  flex: 0 0 auto !important;
  object-fit: contain !important;
  display: block !important;
  pointer-events: none !important;
  user-select: none !important;
  background: transparent !important;
  transform: none !important;
  margin: 0 !important;
}

.scanner-hero .brand-copy--hero {
  width: 280px !important;
  margin: 0 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}

.scanner-hero .worksxxx-title-image {
  width: 220px !important;
  height: auto !important;
  display: block !important;
  margin-top: -4px !important;
  pointer-events: none !important;
  user-select: none !important;
  -webkit-user-drag: none !important;
}

.hero-info-grid,
.hero-info-card,
.hero-info-stack {
  display: none !important;
}

.hero-card {
  position: relative !important;
  overflow: hidden !important;
  border-radius: 16px !important;
  padding: 18px 20px !important;
  box-sizing: border-box !important;
  background:
    linear-gradient(135deg, rgba(16, 22, 34, 0.82), rgba(5, 8, 14, 0.72)) !important;
  border: 1px solid rgba(150, 170, 200, 0.22) !important;
  box-shadow:
    0 16px 40px rgba(0, 0, 0, 0.38),
    inset 0 1px 0 rgba(255, 255, 255, 0.045) !important;
  backdrop-filter: blur(16px) !important;
  -webkit-backdrop-filter: blur(16px) !important;
  pointer-events: none !important;
}

.hero-card::before {
  content: "" !important;
  position: absolute !important;
  inset: 0 !important;
  pointer-events: none !important;
  background:
    radial-gradient(circle at 22% 0%, rgba(255, 77, 95, 0.12), transparent 38%),
    radial-gradient(circle at 85% 18%, rgba(135, 160, 190, 0.08), transparent 42%) !important;
  opacity: 0.9 !important;
}

.hero-card--dex {
  grid-column: 2 !important;
  grid-row: 1 !important;
}

.hero-card--funding {
  grid-column: 3 !important;
  grid-row: 1 !important;
}

.hero-card--listings {
  grid-column: 4 !important;
  grid-row: 1 !important;
}

.hero-card--wide {
  height: 170px !important;
  min-height: 170px !important;
}

.hero-side-stack {
  grid-column: 5 !important;
  grid-row: 1 !important;
  display: grid !important;
  grid-template-rows: 78px 78px !important;
  gap: 14px !important;
  width: 100% !important;
  min-width: 0 !important;
}

.hero-card--small {
  height: 78px !important;
  min-height: 78px !important;
  padding: 14px 16px !important;
}

.hero-card--join {
  grid-row: 1 !important;
}

.hero-card--live {
  grid-row: 2 !important;
}

.hero-card__title {
  position: relative !important;
  z-index: 1 !important;
  margin: 0 !important;
  font-size: 12px !important;
  line-height: 1 !important;
  font-weight: 900 !important;
  letter-spacing: 0.04em !important;
  color: rgba(255, 255, 255, 0.92) !important;
  text-transform: uppercase !important;
}

.hero-card__body,
.hero-card__placeholder {
  position: relative !important;
  z-index: 1 !important;
  margin-top: 14px !important;
  font-size: 12px !important;
  line-height: 1.35 !important;
  font-weight: 700 !important;
  color: rgba(180, 192, 208, 0.68) !important;
}

.hero-card--small .hero-card__body,
.hero-card--small .hero-card__placeholder {
  margin-top: 8px !important;
  font-size: 11px !important;
}

.controls-panel,
.scanner-controls,
.control-bar {
  position: relative !important;
  z-index: 2 !important;
}

.scanner-panel,
.table-wrap {
  position: relative !important;
  z-index: 2 !important;
}

@media (max-width: 1280px) {
  .scanner-hero-grid {
    grid-template-columns: 240px repeat(2, minmax(240px, 1fr)) !important;
  }

  .hero-card--dex {
    grid-column: 2 !important;
    grid-row: 1 !important;
  }

  .hero-card--funding {
    grid-column: 3 !important;
    grid-row: 1 !important;
  }

  .hero-card--listings {
    grid-column: 2 !important;
    grid-row: 2 !important;
  }

  .hero-side-stack {
    grid-column: 3 !important;
    grid-row: 2 !important;
  }
}

@media (max-width: 768px) {
  .scanner-hero {
    padding: 18px 16px 10px !important;
    min-height: auto !important;
  }

  .scanner-hero-grid {
    grid-template-columns: 1fr !important;
    gap: 12px !important;
  }

  .scanner-hero .brand-block--motion,
  .scanner-hero .brand-layer-item,
  .hero-card--dex,
  .hero-card--funding,
  .hero-card--listings,
  .hero-side-stack {
    grid-column: 1 !important;
    grid-row: auto !important;
  }

  .scanner-hero .brand-block--motion,
  .scanner-hero .brand-layer-item {
    width: 150px !important;
    min-height: auto !important;
    align-items: flex-start !important;
  }

  .scanner-hero .worksxxx-logo-motion {
    width: 150px !important;
    height: 82px !important;
  }

  .scanner-hero .brand-copy--hero {
    width: 150px !important;
    justify-content: flex-start !important;
  }

  .scanner-hero .worksxxx-title-image {
    width: 135px !important;
  }

  .hero-card--wide {
    height: auto !important;
    min-height: 120px !important;
  }

  .hero-side-stack {
    grid-template-rows: auto !important;
  }

  .hero-card--small {
    height: auto !important;
    min-height: 72px !important;
  }
}

/* restore-locked-layout-1: restore locked logo/controls/table placement from approved screenshot */
.scanner-hero {
  position: absolute !important;
  left: 0 !important;
  top: 0 !important;
  z-index: 18 !important;
  width: 100% !important;
  min-height: 0 !important;
  height: 0 !important;
  padding: 0 !important;
  display: block !important;
  overflow: visible !important;
  pointer-events: none !important;
}

.scanner-hero-grid {
  display: block !important;
  width: 100% !important;
  height: 0 !important;
  min-height: 0 !important;
  overflow: visible !important;
}

.scanner-hero .brand-block--motion,
.scanner-hero .brand-layer-item {
  position: absolute !important;
  left: 56px !important;
  top: 18px !important;
  width: 320px !important;
  min-height: 220px !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: flex-start !important;
  overflow: visible !important;
  padding: 0 !important;
  margin: 0 !important;
  z-index: 22 !important;
}

.scanner-hero .worksxxx-logo-motion {
  width: 340px !important;
  height: 162px !important;
  flex: 0 0 auto !important;
  object-fit: contain !important;
  display: block !important;
  pointer-events: none !important;
  user-select: none !important;
  background: transparent !important;
  transform: none !important;
  margin: 0 !important;
}

.scanner-hero .brand-copy--hero {
  width: 320px !important;
  margin: -18px 0 0 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}

.scanner-hero .worksxxx-title-image {
  width: 278px !important;
  height: 54px !important;
  display: block !important;
  margin: 0 !important;
  pointer-events: none !important;
  user-select: none !important;
  -webkit-user-drag: none !important;
}

.hero-card,
.hero-side-stack {
  position: absolute !important;
  pointer-events: none !important;
  opacity: 0 !important;
  visibility: hidden !important;
}

.controls-panel {
  position: absolute !important;
  top: calc(var(--brand-scanner-y) + 154px) !important;
  left: 47px !important;
  width: calc(100vw - 115px) !important;
  max-width: calc(100vw - 115px) !important;
  z-index: 24 !important;
  overflow: visible !important;
}

body:not(.brand-edit-mode) .scanner-panel,
.scanner-panel {
  position: absolute !important;
  top: calc(var(--brand-scanner-y) + 220px) !important;
  left: 47px !important;
  width: calc(100vw - 115px) !important;
  max-width: calc(100vw - 115px) !important;
  z-index: 20 !important;
}

.controls-panel .filter-tabs {
  flex: 0 0 312px !important;
  width: 312px !important;
  min-width: 312px !important;
  max-width: 312px !important;
  margin-left: 0 !important;
}

.controls-panel .market-tabs {
  flex: 0 0 246px !important;
  width: 246px !important;
  min-width: 246px !important;
  margin-left: 62px !important;
}

.controls-panel .exchange-tabs {
  flex: 0 0 758px !important;
  width: 758px !important;
  min-width: 758px !important;
  max-width: 758px !important;
  margin-left: 62px !important;
}

.controls-panel .exchange-all-placeholder {
  flex: 0 0 90px !important;
  width: 90px !important;
  min-width: 90px !important;
  max-width: 90px !important;
}

.controls-panel .action-status {
  position: static !important;
  flex: 1 1 auto !important;
  min-width: 256px !important;
  margin-left: 62px !important;
  height: 44px !important;
  min-height: 44px !important;
  overflow: visible !important;
}

.controls-panel .rank-sort {
  position: absolute !important;
  right: 0 !important;
  bottom: 0 !important;
  width: 256px !important;
  min-width: 256px !important;
  max-width: 256px !important;
  height: 88px !important;
  min-height: 88px !important;
  margin: 0 !important;
  transform: none !important;
}

@media (max-width: 1680px) {
  .controls-panel,
  body:not(.brand-edit-mode) .scanner-panel,
  .scanner-panel {
    left: 47px !important;
    width: calc(100vw - 87px) !important;
    max-width: calc(100vw - 87px) !important;
  }

  .controls-panel .exchange-tabs {
    flex-basis: 704px !important;
    width: 704px !important;
    min-width: 704px !important;
    max-width: 704px !important;
  }
}

@media (max-width: 768px) {
  .scanner-hero .brand-block--motion,
  .scanner-hero .brand-layer-item {
    left: 18px !important;
    top: 16px !important;
    width: 180px !important;
    min-height: 120px !important;
    align-items: flex-start !important;
  }

  .scanner-hero .worksxxx-logo-motion {
    width: 180px !important;
    height: 96px !important;
  }

  .scanner-hero .brand-copy--hero {
    width: 180px !important;
    justify-content: flex-start !important;
    margin-top: -10px !important;
  }

  .scanner-hero .worksxxx-title-image {
    width: 158px !important;
    height: auto !important;
  }

  .controls-panel,
  body:not(.brand-edit-mode) .scanner-panel,
  .scanner-panel {
    left: 10px !important;
    width: calc(100vw - 20px) !important;
    max-width: calc(100vw - 20px) !important;
  }

  .controls-panel {
    top: calc(var(--brand-scanner-y) + 78px) !important;
  }

  body:not(.brand-edit-mode) .scanner-panel,
  .scanner-panel {
    top: calc(var(--brand-scanner-y) + 154px) !important;
  }

  .controls-panel .rank-sort {
    position: relative !important;
    right: auto !important;
    bottom: auto !important;
    width: 100% !important;
    max-width: none !important;
    height: 54px !important;
    min-height: 54px !important;
  }
}

/* restore-logo-title-position-1: match approved brand/logo/title placement without moving controls/table */
.scanner-hero .brand-block--motion,
.scanner-hero .brand-layer-item {
  left: 56px !important;
  top: -4px !important;
  width: 340px !important;
  min-height: 228px !important;
}

.scanner-hero .worksxxx-logo-motion {
  width: 360px !important;
  height: 174px !important;
}

.scanner-hero .brand-copy--hero {
  width: 340px !important;
  margin: -24px 0 0 !important;
}

.scanner-hero .worksxxx-title-image {
  width: 318px !important;
  height: auto !important;
  margin: 0 !important;
}

@media (max-width: 768px) {
  .scanner-hero .brand-block--motion,
  .scanner-hero .brand-layer-item {
    left: 18px !important;
    top: 8px !important;
    width: 190px !important;
    min-height: 126px !important;
  }

  .scanner-hero .worksxxx-logo-motion {
    width: 190px !important;
    height: 100px !important;
  }

  .scanner-hero .brand-copy--hero {
    width: 190px !important;
    margin-top: -12px !important;
  }

  .scanner-hero .worksxxx-title-image {
    width: 174px !important;
  }
}

/* restore-visible-hero-cards-1: show the 5 top placeholder cards without moving locked controls/table */
.scanner-hero .hero-card,
.scanner-hero .hero-side-stack {
  visibility: visible !important;
  opacity: 1 !important;
}

.scanner-hero .hero-card {
  position: absolute !important;
  pointer-events: none !important;
  overflow: hidden !important;
  border-radius: 8px !important;
  padding: 18px 20px !important;
  box-sizing: border-box !important;
  background:
    linear-gradient(135deg, rgba(16, 22, 34, 0.74), rgba(5, 8, 14, 0.58)) !important;
  border: 1px solid rgba(150, 170, 200, 0.24) !important;
  box-shadow:
    0 16px 40px rgba(0, 0, 0, 0.34),
    inset 0 1px 0 rgba(255, 255, 255, 0.045) !important;
  backdrop-filter: blur(12px) !important;
  -webkit-backdrop-filter: blur(12px) !important;
}

.scanner-hero .hero-card--wide {
  top: 26px !important;
  width: 340px !important;
  height: 180px !important;
  min-height: 180px !important;
}

.scanner-hero .hero-card--dex {
  left: 420px !important;
}

.scanner-hero .hero-card--funding {
  left: 804px !important;
}

.scanner-hero .hero-card--listings {
  left: 1192px !important;
}

.scanner-hero .hero-side-stack {
  position: absolute !important;
  left: 1562px !important;
  top: 24px !important;
  width: 252px !important;
  height: 152px !important;
  display: block !important;
  pointer-events: none !important;
}

.scanner-hero .hero-side-stack .hero-card {
  left: 0 !important;
  width: 252px !important;
  height: 64px !important;
  min-height: 64px !important;
  padding: 14px 16px !important;
}

.scanner-hero .hero-card--join {
  top: 0 !important;
}

.scanner-hero .hero-card--live {
  top: 88px !important;
}

.scanner-hero .hero-card__title {
  position: relative !important;
  z-index: 1 !important;
  margin: 0 !important;
  font-size: 12px !important;
  line-height: 1 !important;
  font-weight: 900 !important;
  letter-spacing: 0.04em !important;
  color: rgba(255, 255, 255, 0.92) !important;
  text-transform: uppercase !important;
}

.scanner-hero .hero-card__placeholder {
  position: relative !important;
  z-index: 1 !important;
  margin-top: 14px !important;
  font-size: 12px !important;
  line-height: 1.35 !important;
  font-weight: 700 !important;
  color: rgba(180, 192, 208, 0.68) !important;
}

.scanner-hero .hero-card--small .hero-card__placeholder {
  margin-top: 8px !important;
  font-size: 11px !important;
}

@media (max-width: 1680px) {
  .scanner-hero .hero-card--wide {
    width: 300px !important;
  }

  .scanner-hero .hero-card--dex {
    left: 400px !important;
  }

  .scanner-hero .hero-card--funding {
    left: 736px !important;
  }

  .scanner-hero .hero-card--listings {
    left: 1072px !important;
  }

  .scanner-hero .hero-side-stack {
    left: 1408px !important;
    width: 232px !important;
  }

  .scanner-hero .hero-side-stack .hero-card {
    width: 232px !important;
  }
}

@media (max-width: 1280px) {
  .scanner-hero .hero-card,
  .scanner-hero .hero-side-stack {
    display: none !important;
  }
}

/* hero-red-outline-placeholders-1: show red outline placeholder rectangles exactly as layout markers */
.scanner-hero .hero-card,
.scanner-hero .hero-side-stack {
  visibility: visible !important;
  opacity: 1 !important;
  display: block !important;
}

.scanner-hero .hero-card {
  position: absolute !important;
  pointer-events: none !important;
  overflow: hidden !important;
  box-sizing: border-box !important;
  background: transparent !important;
  border: 4px solid #ff4d5f !important;
  border-radius: 5px !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  padding: 0 !important;
}

.scanner-hero .hero-card::before,
.scanner-hero .hero-card::after {
  content: none !important;
  display: none !important;
}

.scanner-hero .hero-card__title,
.scanner-hero .hero-card__placeholder {
  display: none !important;
}

.scanner-hero .hero-card--wide {
  top: 26px !important;
  width: 340px !important;
  height: 180px !important;
  min-height: 180px !important;
}

.scanner-hero .hero-card--dex {
  left: 420px !important;
}

.scanner-hero .hero-card--funding {
  left: 804px !important;
}

.scanner-hero .hero-card--listings {
  left: 1192px !important;
}

.scanner-hero .hero-side-stack {
  position: absolute !important;
  left: 1562px !important;
  top: 24px !important;
  width: 252px !important;
  height: 152px !important;
  pointer-events: none !important;
}

.scanner-hero .hero-side-stack .hero-card {
  left: 0 !important;
  width: 252px !important;
  height: 64px !important;
  min-height: 64px !important;
}

.scanner-hero .hero-card--join {
  top: 0 !important;
}

.scanner-hero .hero-card--live {
  top: 88px !important;
}

@media (max-width: 1680px) {
  .scanner-hero .hero-card--wide {
    width: 300px !important;
  }

  .scanner-hero .hero-card--dex {
    left: 400px !important;
  }

  .scanner-hero .hero-card--funding {
    left: 736px !important;
  }

  .scanner-hero .hero-card--listings {
    left: 1072px !important;
  }

  .scanner-hero .hero-side-stack {
    left: 1408px !important;
    width: 232px !important;
  }

  .scanner-hero .hero-side-stack .hero-card {
    width: 232px !important;
  }
}

@media (max-width: 1280px) {
  .scanner-hero .hero-card,
  .scanner-hero .hero-side-stack {
    display: none !important;
  }
}

/* hero-glass-placeholders-1: restore glass placeholder cards, remove red outline markers */
.scanner-hero .hero-card,
.scanner-hero .hero-side-stack {
  visibility: visible !important;
  opacity: 1 !important;
  display: block !important;
}

.scanner-hero .hero-card {
  position: absolute !important;
  pointer-events: none !important;
  overflow: hidden !important;
  box-sizing: border-box !important;
  border-radius: 16px !important;
  padding: 18px 20px !important;
  background:
    linear-gradient(135deg, rgba(18, 24, 36, 0.76), rgba(5, 8, 14, 0.58)) !important;
  border: 1px solid rgba(150, 170, 200, 0.24) !important;
  box-shadow:
    0 16px 40px rgba(0, 0, 0, 0.34),
    inset 0 1px 0 rgba(255, 255, 255, 0.05) !important;
  backdrop-filter: blur(14px) !important;
  -webkit-backdrop-filter: blur(14px) !important;
}

.scanner-hero .hero-card::before {
  content: "" !important;
  position: absolute !important;
  inset: 0 !important;
  display: block !important;
  pointer-events: none !important;
  background:
    radial-gradient(circle at 22% 0%, rgba(255, 77, 95, 0.12), transparent 38%),
    radial-gradient(circle at 85% 18%, rgba(135, 160, 190, 0.08), transparent 42%) !important;
  opacity: 0.9 !important;
}

.scanner-hero .hero-card::after {
  content: none !important;
  display: none !important;
}

.scanner-hero .hero-card__title {
  position: relative !important;
  z-index: 1 !important;
  display: block !important;
  margin: 0 !important;
  font-size: 12px !important;
  line-height: 1 !important;
  font-weight: 900 !important;
  letter-spacing: 0.04em !important;
  color: rgba(255, 255, 255, 0.92) !important;
  text-transform: uppercase !important;
}

.scanner-hero .hero-card__placeholder {
  position: relative !important;
  z-index: 1 !important;
  display: block !important;
  margin-top: 14px !important;
  font-size: 12px !important;
  line-height: 1.35 !important;
  font-weight: 700 !important;
  color: rgba(180, 192, 208, 0.68) !important;
}

.scanner-hero .hero-card--small .hero-card__placeholder {
  margin-top: 8px !important;
  font-size: 11px !important;
}

.scanner-hero .hero-card--wide {
  top: 26px !important;
  width: 340px !important;
  height: 180px !important;
  min-height: 180px !important;
}

.scanner-hero .hero-card--dex {
  left: 420px !important;
}

.scanner-hero .hero-card--funding {
  left: 804px !important;
}

.scanner-hero .hero-card--listings {
  left: 1192px !important;
}

.scanner-hero .hero-side-stack {
  position: absolute !important;
  left: 1562px !important;
  top: 24px !important;
  width: 252px !important;
  height: 152px !important;
  pointer-events: none !important;
}

.scanner-hero .hero-side-stack .hero-card {
  left: 0 !important;
  width: 252px !important;
  height: 64px !important;
  min-height: 64px !important;
  padding: 14px 16px !important;
}

.scanner-hero .hero-card--join {
  top: 0 !important;
}

.scanner-hero .hero-card--live {
  top: 88px !important;
}

@media (max-width: 1680px) {
  .scanner-hero .hero-card--wide {
    width: 300px !important;
  }

  .scanner-hero .hero-card--dex {
    left: 400px !important;
  }

  .scanner-hero .hero-card--funding {
    left: 736px !important;
  }

  .scanner-hero .hero-card--listings {
    left: 1072px !important;
  }

  .scanner-hero .hero-side-stack {
    left: 1408px !important;
    width: 232px !important;
  }

  .scanner-hero .hero-side-stack .hero-card {
    width: 232px !important;
  }
}

@media (max-width: 1280px) {
  .scanner-hero .hero-card,
  .scanner-hero .hero-side-stack {
    display: none !important;
  }
}

/* manual-layout-editor-1: local-only visual layout editor for 1920x1080 redesign tuning */
body.manual-layout-editor-mode {
  cursor: default;
}

body.manual-layout-editor-mode .scanner-hero,
body.manual-layout-editor-mode .scanner-hero-grid,
body.manual-layout-editor-mode .hero-side-stack {
  pointer-events: none !important;
  overflow: visible !important;
}

body.manual-layout-editor-mode .scanner-hero .hero-card,
body.manual-layout-editor-mode .scanner-hero .hero-side-stack,
body.manual-layout-editor-mode .scanner-hero-grid {
  display: block !important;
  opacity: 1 !important;
  visibility: visible !important;
}

body.manual-layout-editor-mode [data-layout-id] {
  box-sizing: border-box !important;
}

body.manual-layout-editor-mode .controls-panel .rank-sort {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
  right: auto !important;
  bottom: auto !important;
}

/* saved-responsive-layout-mode-1: apply editor coordinates without showing editor chrome */
body.saved-responsive-layout-mode .controls-panel .status-row {
  display: none !important;
}

body.saved-responsive-layout-mode .scanner-hero,
body.saved-responsive-layout-mode .scanner-hero-grid,
body.saved-responsive-layout-mode .hero-side-stack,
body.saved-responsive-layout-mode .controls-panel,
body.saved-responsive-layout-mode .scanner-table-stack {
  overflow: visible !important;
  pointer-events: none !important;
}

body.saved-responsive-layout-mode .scanner-hero .hero-card,
body.saved-responsive-layout-mode .controls-panel .control-group,
body.saved-responsive-layout-mode .controls-panel .rank-sort,
body.saved-responsive-layout-mode .scanner-panel,
body.saved-responsive-layout-mode .scanner-page-footer {
  pointer-events: auto !important;
}

html:has(body.layout-editor-mode),
body.layout-editor-mode {
  min-height: var(--layout-editor-canvas-min-height, 100vh) !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
}

body.layout-editor-mode.layout-editor-is-dragging {
  overflow-y: hidden !important;
}

.manual-layout-editor-viewport {
  position: fixed;
  left: 0;
  top: 0;
  z-index: 2147482500;
  box-sizing: border-box;
  border: 2px solid rgba(255, 77, 95, 0.82);
  background:
    linear-gradient(rgba(255, 77, 95, 0.10), rgba(255, 77, 95, 0.10)) left top / 100% 1px no-repeat,
    linear-gradient(90deg, rgba(255, 255, 255, 0.055), rgba(255, 255, 255, 0.015));
  box-shadow:
    inset 0 0 0 1px rgba(0, 0, 0, 0.65),
    0 0 0 9999px rgba(0, 0, 0, 0.34),
    0 0 28px rgba(255, 77, 95, 0.18);
  pointer-events: none;
}

.manual-layout-editor-viewport__label {
  position: absolute;
  left: 8px;
  top: 8px;
  padding: 4px 8px;
  border: 1px solid rgba(255, 77, 95, 0.58);
  border-radius: 7px;
  background: rgba(7, 11, 18, 0.88);
  color: #ffffff;
  font: 900 11px/1 Inter, system-ui, sans-serif;
  letter-spacing: 0;
  white-space: nowrap;
}

.manual-layout-editor-overlay {
  position: fixed;
  z-index: 2147483000;
  box-sizing: border-box;
  border: 1px dashed rgba(0, 255, 208, 0.78);
  background: rgba(0, 255, 208, 0.045);
  box-shadow:
    0 0 0 1px rgba(0, 0, 0, 0.62),
    0 0 18px rgba(0, 255, 208, 0.14);
  pointer-events: auto;
  cursor: move;
  touch-action: none;
  user-select: none;
}

.manual-layout-editor-overlay.is-selected {
  border-style: solid;
  border-color: rgba(255, 77, 95, 0.95);
  background: rgba(255, 77, 95, 0.075);
  box-shadow:
    0 0 0 1px rgba(0, 0, 0, 0.72),
    0 0 22px rgba(255, 77, 95, 0.28);
}

.manual-layout-editor-label {
  position: absolute;
  left: 0;
  top: -22px;
  max-width: 220px;
  padding: 3px 7px;
  border-radius: 6px;
  background: rgba(5, 8, 14, 0.9);
  border: 1px solid rgba(0, 255, 208, 0.35);
  color: rgba(232, 246, 255, 0.92);
  font: 700 11px/1.1 Inter, system-ui, sans-serif;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  pointer-events: none;
}

.manual-layout-editor-overlay.is-selected .manual-layout-editor-label {
  border-color: rgba(255, 77, 95, 0.55);
  color: #fff;
}

.manual-layout-editor-resize {
  position: absolute;
  right: -7px;
  bottom: -7px;
  width: 14px;
  height: 14px;
  border-radius: 4px;
  background: #00ffd0;
  border: 2px solid rgba(3, 8, 12, 0.96);
  box-shadow: 0 0 14px rgba(0, 255, 208, 0.4);
  cursor: nwse-resize;
}

.manual-layout-editor-panel {
  position: fixed;
  right: 18px;
  bottom: 18px;
  z-index: 2147483100;
  width: min(420px, calc(100vw - 36px));
  max-height: calc(100vh - 32px);
  overflow-y: auto;
  overflow-x: hidden;
  padding: 14px;
  border-radius: 12px;
  border: 1px solid rgba(0, 255, 208, 0.32);
  background: rgba(7, 11, 18, 0.9);
  box-shadow: 0 18px 50px rgba(0, 0, 0, 0.45), 0 0 28px rgba(0, 255, 208, 0.1);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  color: rgba(235, 245, 255, 0.94);
  font: 700 12px/1.35 Inter, system-ui, sans-serif;
}

.manual-layout-editor-panel__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 10px;
}

.manual-layout-editor-panel__title {
  margin-bottom: 0;
  color: #00ffd0;
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.manual-layout-editor-toggle {
  flex: 0 0 auto;
  min-height: 26px !important;
  padding: 5px 9px !important;
  border-color: rgba(255, 77, 95, 0.45) !important;
  color: rgba(255, 255, 255, 0.88) !important;
}

.manual-layout-editor-panel.is-collapsed {
  width: auto;
  min-width: 210px;
  max-height: none;
  overflow: visible;
  padding: 10px 12px;
}

.manual-layout-editor-panel.is-collapsed .manual-layout-editor-panel__header {
  margin-bottom: 0;
}

.manual-layout-editor-panel.is-collapsed .manual-layout-editor-panel__body {
  display: none;
}

.manual-layout-editor-panel label {
  display: grid;
  gap: 5px;
  margin-bottom: 10px;
  color: rgba(180, 196, 210, 0.88);
}

.manual-layout-editor-panel select,
.manual-layout-editor-panel button,
.manual-layout-editor-output {
  border-radius: 8px;
  border: 1px solid rgba(130, 160, 185, 0.32);
  background: rgba(6, 12, 20, 0.88);
  color: rgba(235, 245, 255, 0.94);
  font: 700 12px/1.2 Inter, system-ui, sans-serif;
}

.manual-layout-editor-panel select {
  height: 34px;
  padding: 0 10px;
}

.manual-layout-editor-fields {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 6px;
  margin-bottom: 10px;
}

.manual-layout-editor-fields label {
  gap: 4px;
  margin: 0;
  font-size: 10px;
  text-transform: uppercase;
}

.manual-layout-editor-fields input {
  width: 100%;
  min-width: 0;
  height: 32px;
  padding: 0 7px;
  border: 1px solid rgba(130, 160, 185, 0.32);
  border-radius: 8px;
  background: rgba(6, 12, 20, 0.88);
  color: rgba(235, 245, 255, 0.94);
  font: 700 12px/1.2 Consolas, "SFMono-Regular", monospace;
}
.layout-editor-panel {
  max-height: calc(100vh - 32px);
  overflow-y: auto;
  overflow-x: hidden;
  overscroll-behavior: contain;
}

.manual-layout-editor-scale-controls {
  display: grid;
  grid-template-columns: minmax(62px, 0.8fr) 32px minmax(100px, 1fr) 32px auto;
  align-items: end;
  gap: 6px;
  margin-bottom: 10px;
}

.manual-layout-editor-scale-controls label {
  gap: 4px;
  margin: 0;
  font-size: 10px;
  text-transform: uppercase;
}

.manual-layout-editor-scale-controls input[type="number"] {
  width: 100%;
  min-width: 0;
  height: 32px;
  padding: 0 7px;
  border: 1px solid rgba(130, 160, 185, 0.32);
  border-radius: 8px;
  background: rgba(6, 12, 20, 0.88);
  color: rgba(235, 245, 255, 0.94);
  font: 700 12px/1.2 Consolas, "SFMono-Regular", monospace;
}

.manual-layout-editor-scale-controls input[type="range"] {
  width: 100%;
  min-width: 0;
  margin: 0 0 10px;
  accent-color: #00ffd0;
}

.manual-layout-editor-actions {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 6px;
  margin-bottom: 10px;
}

.manual-layout-editor-actions--profiles {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
.manual-layout-editor-panel button {
  min-height: 30px;
  padding: 6px 8px;
  cursor: pointer;
}

.manual-layout-editor-panel button:hover {
  border-color: rgba(0, 255, 208, 0.65);
  color: #00ffd0;
}

.manual-layout-editor-readout {
  min-height: 18px;
  margin-bottom: 8px;
  color: rgba(255, 77, 95, 0.95);
}

.manual-layout-editor-output {
  width: 100%;
  height: 118px;
  padding: 8px;
  resize: vertical;
  font-family: Consolas, "SFMono-Regular", monospace;
  font-weight: 500;
  white-space: pre;
}

.manual-layout-editor-help {
  margin-top: 8px;
  color: rgba(180, 196, 210, 0.72);
  font-weight: 600;
}
/* saved-layout-from-editor-1: approved manual 1920x1080 coordinates from layout editor */
body:not(.manual-layout-editor-mode) .scanner-hero,
body:not(.manual-layout-editor-mode) .scanner-hero-grid {
  position: fixed !important;
  left: 0 !important;
  top: 0 !important;
  width: 100vw !important;
  height: 0 !important;
  min-height: 0 !important;
  overflow: visible !important;
  pointer-events: none !important;
}

body:not(.manual-layout-editor-mode) .scanner-hero .brand-block--motion,
body:not(.manual-layout-editor-mode) .scanner-hero .brand-layer-item {
  position: fixed !important;
  left: 370px !important;
  top: -29px !important;
  width: 340px !important;
  height: 329px !important;
  min-height: 329px !important;
  max-width: none !important;
  min-width: 0 !important;
  transform: scale(1) !important;
  transform-origin: left top !important;
  margin: 0 !important;
  padding: 0 !important;
  opacity: 1 !important;
  visibility: visible !important;
  pointer-events: none !important;
  z-index: 80 !important;
}

body:not(.manual-layout-editor-mode) .scanner-hero .worksxxx-logo-motion {
  position: fixed !important;
  left: -393px !important;
  top: -26px !important;
  width: 360px !important;
  height: 174px !important;
  min-width: 0 !important;
  max-width: none !important;
  transform: scale(1.24) !important;
  transform-origin: left top !important;
  margin: 0 !important;
  object-fit: contain !important;
  opacity: 1 !important;
  visibility: visible !important;
  pointer-events: none !important;
}

body:not(.manual-layout-editor-mode) .scanner-hero .brand-copy--hero {
  position: static !important;
  width: auto !important;
  height: auto !important;
  margin: 0 !important;
  display: block !important;
}

body:not(.manual-layout-editor-mode) .scanner-hero .worksxxx-title-image {
  position: fixed !important;
  left: -330px !important;
  top: 104px !important;
  width: 318px !important;
  height: 179px !important;
  max-width: none !important;
  transform: scale(1) !important;
  transform-origin: left top !important;
  margin: 0 !important;
  opacity: 1 !important;
  visibility: visible !important;
  pointer-events: none !important;
}

body:not(.manual-layout-editor-mode) .scanner-hero .hero-card,
body:not(.manual-layout-editor-mode) .scanner-hero .hero-side-stack {
  opacity: 1 !important;
  visibility: visible !important;
  pointer-events: none !important;
  transform-origin: left top !important;
  max-width: none !important;
  min-width: 0 !important;
}

body:not(.manual-layout-editor-mode) .scanner-hero .hero-card--dex {
  position: fixed !important;
  left: 404px !important;
  top: 15px !important;
  width: 340px !important;
  height: 180px !important;
  min-height: 180px !important;
  transform: scale(1) !important;
}

body:not(.manual-layout-editor-mode) .scanner-hero .hero-card--funding {
  position: fixed !important;
  left: 762px !important;
  top: 15px !important;
  width: 340px !important;
  height: 180px !important;
  min-height: 180px !important;
  transform: scale(1) !important;
}

body:not(.manual-layout-editor-mode) .scanner-hero .hero-card--listings {
  position: fixed !important;
  left: 1120px !important;
  top: 15px !important;
  width: 340px !important;
  height: 180px !important;
  min-height: 180px !important;
  transform: scale(1) !important;
  pointer-events: auto !important;
}

body:not(.manual-layout-editor-mode) .scanner-hero .hero-side-stack {
  position: static !important;
  left: auto !important;
  top: auto !important;
  width: auto !important;
  height: auto !important;
  display: contents !important;
}

body:not(.manual-layout-editor-mode) .scanner-hero .hero-card--join {
  position: fixed !important;
  left: 1507px !important;
  top: 16px !important;
  width: 297px !important;
  height: 67px !important;
  min-height: 67px !important;
  transform: scale(1) !important;
}

body:not(.manual-layout-editor-mode) .scanner-hero .hero-card--live {
  position: fixed !important;
  left: 1507px !important;
  top: 98px !important;
  width: 297px !important;
  height: 99px !important;
  min-height: 99px !important;
  transform: scale(1) !important;
}

body:not(.manual-layout-editor-mode) .controls-panel {
  position: fixed !important;
  left: 0 !important;
  top: 0 !important;
  width: 100vw !important;
  height: 0 !important;
  max-width: none !important;
  overflow: visible !important;
  z-index: 90 !important;
  pointer-events: none !important;
}

body:not(.manual-layout-editor-mode) .controls-panel .tabs,
body:not(.manual-layout-editor-mode) .controls-panel .scanner-controls,
body:not(.manual-layout-editor-mode) .controls-panel .control-bar {
  position: static !important;
  display: contents !important;
  width: auto !important;
  height: auto !important;
  pointer-events: none !important;
}

body:not(.manual-layout-editor-mode) .controls-panel .filter-tabs {
  position: fixed !important;
  left: 43px !important;
  top: 210px !important;
  width: 312px !important;
  height: 44px !important;
  flex: none !important;
  margin: 0 !important;
  transform: scale(1) !important;
  transform-origin: left top !important;
  pointer-events: auto !important;
}

body:not(.manual-layout-editor-mode) .controls-panel .market-tabs {
  position: fixed !important;
  left: 403px !important;
  top: 210px !important;
  width: 246px !important;
  height: 44px !important;
  flex: none !important;
  margin: 0 !important;
  transform: scale(1) !important;
  transform-origin: left top !important;
  pointer-events: auto !important;
}

body:not(.manual-layout-editor-mode) .controls-panel .exchange-tabs {
  position: fixed !important;
  left: 702px !important;
  top: 210px !important;
  width: 758px !important;
  height: 44px !important;
  min-width: 0 !important;
  max-width: none !important;
  flex: none !important;
  margin: 0 !important;
  transform: scale(1) !important;
  transform-origin: left top !important;
  pointer-events: auto !important;
}

body:not(.manual-layout-editor-mode) .controls-panel .action-status {
  position: static !important;
  display: contents !important;
  width: auto !important;
  height: auto !important;
  min-width: 0 !important;
  margin: 0 !important;
  pointer-events: none !important;
}

body:not(.manual-layout-editor-mode) .controls-panel .rank-sort {
  position: fixed !important;
  left: 1507px !important;
  top: 210px !important;
  right: auto !important;
  bottom: auto !important;
  width: 298px !important;
  height: 44px !important;
  min-width: 0 !important;
  max-width: none !important;
  min-height: 0 !important;
  transform: scale(1) !important;
  transform-origin: left top !important;
  margin: 0 !important;
  pointer-events: auto !important;
}

body:not(.manual-layout-editor-mode) .controls-panel .status-row {
  display: none !important;
}

body:not(.manual-layout-editor-mode) .scanner-panel {
  position: fixed !important;
  left: 42px !important;
  top: 277px !important;
  width: 1698px !important;
  height: 1807px !important;
  max-width: none !important;
  min-width: 0 !important;
  min-height: 0 !important;
  transform: scale(1.04) !important;
  transform-origin: left top !important;
  margin: 0 !important;
  z-index: 70 !important;
}
/* hero-title-icons-2: shared icon + text titles for the first three hero cards */
.scanner-hero .hero-card-title {
  height: 24px;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 7px;
  min-width: 0;
}

.scanner-hero .hero-card-title__icon {
  width: 20px;
  height: 20px;
  object-fit: contain;
  flex: 0 0 20px;
  display: block;
}

.scanner-hero .hero-card-title__text {
  min-width: 0;
  color: rgba(238, 242, 250, 0.92);
  font-size: 12px;
  font-weight: 900;
  line-height: 1;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  white-space: nowrap;
}

/* funding-heat-card-1: API-driven mock contract preview for funding extremes */
.scanner-hero .hero-card--dex,
.scanner-hero .hero-card--funding,
.scanner-hero .hero-card--listings {
  --hero-card-content-header-height: 24px;
  --hero-card-content-label-height: 10px;
  --hero-card-content-gap: 4px;
  --hero-card-heading-to-list-gap: 4px;
  --hero-card-footer-offset: 3px;
  --hero-card-visible-list-height: 100px;
}

.scanner-hero .hero-card--dex {
  --open-interest-visible-list-height: var(--hero-card-visible-list-height);
  --open-interest-row-height: 18px;
}

.scanner-hero .hero-card--funding {
  padding: 14px 16px 11px !important;
}

.scanner-hero .hero-card--dex {
  padding: 14px 16px 11px !important;
}

.scanner-hero .open-interest-card {
  position: relative;
  z-index: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 0;
  height: 100%;
}

.scanner-hero .open-interest-card__header {
  height: 38px;
  display: flex;
  flex-direction: column;
  gap: var(--hero-card-content-gap);
  margin-bottom: var(--hero-card-heading-to-list-gap);
  min-width: 0;
}

.scanner-hero .open-interest-card__top,
.scanner-hero .open-interest-card__subtop {
  min-width: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  column-gap: 8px;
}

.scanner-hero .open-interest-card__top {
  height: var(--hero-card-content-header-height);
}

.scanner-hero .open-interest-card__subtop {
  height: var(--hero-card-content-label-height);
  position: relative;
  z-index: 6;
  pointer-events: auto;
}

.scanner-hero .open-interest-exchange-filters,
.scanner-hero .open-interest-filters {
  min-width: 0;
  display: inline-flex;
  align-items: center;
  justify-content: flex-end;
  justify-self: end;
  gap: 3px;
  flex: 0 1 auto;
  pointer-events: auto;
}

.scanner-hero .open-interest-filter {
  width: 17px;
  height: 17px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: 1px solid rgba(158, 178, 204, 0.14);
  border-radius: 7px;
  background: rgba(255, 255, 255, 0.035);
  color: rgba(196, 210, 230, 0.68);
  font-size: 6.5px;
  line-height: 1;
  font-weight: 900;
  cursor: pointer;
  pointer-events: auto;
}

.scanner-hero .open-interest-filter.is-active,
.scanner-hero .open-interest-window-button.is-active,
.open-interest-modal .open-interest-modal-window-button.is-active {
  border-color: rgba(80, 220, 180, 0.42);
  background: rgba(48, 230, 170, 0.12);
  color: rgba(228, 255, 246, 0.94);
}

.scanner-hero .open-interest-filter__icon {
  width: 11px;
  height: 11px;
  display: block;
  object-fit: contain;
}

.scanner-hero .open-interest-window-filters {
  height: var(--hero-card-content-label-height);
  display: inline-flex;
  align-items: center;
  justify-content: flex-end;
  justify-self: end;
  gap: 3px;
  pointer-events: auto;
}

.scanner-hero .open-interest-window-button,
.open-interest-modal .open-interest-modal-window-button {
  height: 10px;
  min-width: 20px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 4px;
  border: 1px solid rgba(158, 178, 204, 0.14);
  border-radius: 6px;
  background: rgba(255, 255, 255, 0.035);
  color: rgba(196, 210, 230, 0.68);
  font-size: 8px;
  line-height: 1;
  font-weight: 900;
  cursor: pointer;
  pointer-events: auto;
  white-space: nowrap;
}

.scanner-hero .open-interest-heading {
  height: 10px;
  display: flex;
  align-items: center;
  color: rgba(164, 178, 198, 0.68);
  font-size: 10px;
  font-weight: 900;
  line-height: 1;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.scanner-hero .open-interest-list {
  min-width: 0;
  min-height: var(--open-interest-visible-list-height);
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.scanner-hero .open-interest-row {
  min-width: 0;
  height: var(--open-interest-row-height);
  display: grid;
  align-items: center;
  grid-template-columns: minmax(0, 1fr) 54px 70px;
  gap: 5px;
  padding: 2px 6px;
  border-radius: 7px;
  background: rgba(255, 255, 255, 0.035);
  border: 1px solid rgba(160, 180, 205, 0.10);
}

.scanner-hero .open-interest-row__symbol {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: rgba(242, 246, 255, 0.94);
  font-size: 10px;
  line-height: 1;
  font-weight: 900;
  letter-spacing: -0.015em;
}

.scanner-hero .open-interest-row__metric {
  justify-self: end;
  font-size: 10px;
  line-height: 1;
  font-weight: 900;
  font-variant-numeric: tabular-nums;
}

.scanner-hero .open-interest-row__metric--positive,
.open-interest-modal .open-interest-row__metric--positive {
  color: rgba(67, 235, 174, 0.98);
  text-shadow: 0 0 12px rgba(50, 230, 170, 0.16);
}

.scanner-hero .open-interest-row__metric--negative,
.open-interest-modal .open-interest-row__metric--negative {
  color: rgba(255, 77, 95, 0.98);
  text-shadow: 0 0 12px rgba(255, 77, 95, 0.16);
}

.scanner-hero .open-interest-row__exchange {
  min-width: 0;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  color: rgba(205, 216, 230, 0.70);
  font-size: 8.5px;
  line-height: 1;
  font-weight: 900;
}

.scanner-hero .open-interest-row--all .open-interest-row__exchange {
  opacity: 1;
  color: rgba(214, 225, 240, 0.86);
}

.scanner-hero .open-interest-row__exchange-icon {
  width: 13px;
  height: 13px;
  flex: 0 0 13px;
  object-fit: contain;
}

.scanner-hero .open-interest-row__exchange-label {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.scanner-hero .open-interest-row--all .open-interest-row__exchange-label {
  font-weight: 900;
}

.scanner-hero .open-interest-more,
.scanner-hero .open-interest-empty {
  position: relative;
  z-index: 4;
  margin-top: 3px;
  color: rgba(160, 175, 195, 0.64);
  font-size: 10px;
  line-height: 1;
  font-weight: 800;
  pointer-events: auto;
}

.scanner-hero .open-interest-more__button {
  position: relative;
  z-index: 5;
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
  color: rgba(160, 175, 195, 0.68);
  font: inherit;
  cursor: pointer;
  pointer-events: auto;
}

.scanner-hero .funding-heat-card {
  position: relative;
  z-index: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 0;
  height: 100%;
}

.scanner-hero .funding-heat-card__header {
  height: var(--hero-card-content-header-height);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: var(--hero-card-content-gap);
  min-width: 0;
}

.scanner-hero .funding-heat-card__title {
  margin: 0;
  color: rgba(245, 248, 255, 0.96);
  font-size: 12px;
  line-height: 1;
  font-weight: 900;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.scanner-hero .funding-heat-view-all {
  position: relative;
  z-index: 5;
  height: 24px;
  padding: 0 10px;
  border: 1px solid rgba(180, 198, 220, 0.16);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.045);
  color: rgba(210, 220, 235, 0.72);
  font-size: 10px;
  font-weight: 800;
  line-height: 1;
  cursor: pointer;
  pointer-events: auto;
  white-space: nowrap;
}

.scanner-hero .funding-heat-view-all:hover,
.scanner-hero .funding-heat-view-all:focus-visible {
  border-color: rgba(180, 198, 220, 0.24);
  background: rgba(255, 255, 255, 0.07);
  color: rgba(238, 244, 252, 0.88);
  outline: none;
}

.scanner-hero .funding-heat-heading {
  height: var(--hero-card-content-label-height);
  display: flex;
  align-items: center;
  margin-bottom: var(--hero-card-heading-to-list-gap);
  color: rgba(164, 178, 198, 0.68);
  font-size: 10px;
  font-weight: 900;
  line-height: 1;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.scanner-hero .funding-heat-list {
  min-width: 0;
  min-height: var(--hero-card-visible-list-height);
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.scanner-hero .funding-heat-row,
.funding-heat-modal .funding-heat-row {
  min-width: 0;
  height: 18px;
  display: grid;
  align-items: center;
  grid-template-columns: minmax(0, 1fr) 54px 68px 38px;
  gap: 5px;
  padding: 2px 6px;
  border-radius: 7px;
  background: rgba(255, 255, 255, 0.035);
  border: 1px solid rgba(160, 180, 205, 0.10);
}

.scanner-hero .funding-heat-row__symbol,
.funding-heat-modal .funding-heat-row__symbol {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: rgba(242, 246, 255, 0.94);
  font-size: 10px;
  line-height: 1;
  font-weight: 900;
  letter-spacing: -0.015em;
}

.scanner-hero .funding-heat-row__rate,
.funding-heat-modal .funding-heat-row__rate {
  justify-self: end;
  font-size: 10px;
  line-height: 1;
  font-weight: 900;
  font-variant-numeric: tabular-nums;
}

.scanner-hero .funding-heat-rate--positive,
.funding-heat-modal .funding-heat-rate--positive {
  color: rgba(255, 118, 72, 0.98);
  text-shadow: 0 0 12px rgba(255, 92, 64, 0.16);
}

.scanner-hero .funding-heat-rate--negative,
.funding-heat-modal .funding-heat-rate--negative {
  color: rgba(70, 215, 255, 0.98);
  text-shadow: 0 0 12px rgba(87, 174, 255, 0.18);
}

.scanner-hero .funding-heat-row__exchange,
.funding-heat-modal .funding-heat-row__exchange {
  min-width: 0;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  color: rgba(205, 216, 230, 0.70);
  font-size: 8.5px;
  line-height: 1;
  font-weight: 900;
}

.scanner-hero .funding-heat-row__exchange-icon,
.funding-heat-modal .funding-heat-row__exchange-icon {
  width: 13px;
  height: 13px;
  flex: 0 0 13px;
  object-fit: contain;
}

.scanner-hero .funding-heat-row__exchange-label,
.funding-heat-modal .funding-heat-row__exchange-label {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.scanner-hero .funding-heat-row__time,
.funding-heat-modal .funding-heat-row__time {
  justify-self: end;
  color: rgba(205, 216, 230, 0.64);
  font-size: 10px;
  line-height: 1;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
}

.scanner-hero .funding-heat-more,
.scanner-hero .funding-heat-empty {
  position: relative;
  z-index: 4;
  margin-top: var(--hero-card-footer-offset);
  color: rgba(160, 175, 195, 0.64);
  font-size: 10px;
  line-height: 1;
  font-weight: 800;
  pointer-events: auto;
}

.scanner-hero .funding-heat-more__button {
  position: relative;
  z-index: 5;
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
  color: rgba(160, 175, 195, 0.68);
  font: inherit;
  cursor: pointer;
  pointer-events: auto;
}

.scanner-hero .hero-card--dex .hero-card__title,
.scanner-hero .hero-card--dex .hero-card__placeholder,
.scanner-hero .hero-card--funding .hero-card__title,
.scanner-hero .hero-card--funding .hero-card__placeholder,
.scanner-hero .hero-card--listings .hero-card__title,
.scanner-hero .hero-card--listings .hero-card__placeholder {
  display: none !important;
}
/* hero-join-card-tg-art-1: crop Telegram PNG canvas so the visible button fills the join card */
.scanner-hero .hero-card-tg-art {
  position: absolute !important;
  left: -463px !important;
  top: -247px !important;
  width: 1120px !important;
  height: auto !important;
  max-width: none !important;
  display: block !important;
  object-fit: contain !important;
  transform: none !important;
  pointer-events: none !important;
  user-select: none !important;
  -webkit-user-drag: none !important;
}

.telegram-channel-link {
  color: inherit;
  text-decoration: none;
  cursor: pointer;
}

.telegram-channel-link:hover,
.telegram-channel-link:focus-visible {
  text-decoration: none;
}

.scanner-hero .hero-card--join.telegram-channel-link {
  display: block;
  position: relative;
  z-index: 50 !important;
  pointer-events: auto !important;
  cursor: pointer;
  touch-action: manipulation;
  transition:
    box-shadow 180ms ease,
    border-color 180ms ease,
    background 180ms ease,
    filter 180ms ease;
}

.scanner-hero .hero-card--join.telegram-channel-link *,
.scanner-hero .hero-card--join.telegram-channel-link::before,
.scanner-hero .hero-card--join.telegram-channel-link::after {
  pointer-events: none !important;
}

.scanner-hero .hero-card--join .hero-card-tg-art {
  pointer-events: none !important;
}

.scanner-hero .hero-card--join.telegram-channel-link:hover,
.scanner-hero .hero-card--join.telegram-channel-link.is-hovered,
.scanner-hero .hero-card--join.telegram-channel-link:focus-visible {
  border-color: rgba(68, 210, 255, 0.44) !important;
  background:
    radial-gradient(circle at 50% 50%, rgba(44, 190, 255, 0.13), transparent 68%),
    linear-gradient(180deg, rgba(19, 36, 52, 0.52), rgba(5, 10, 18, 0.48)) !important;
  box-shadow:
    0 0 0 1px rgba(68, 210, 255, 0.16),
    0 0 24px rgba(38, 185, 255, 0.18),
    0 10px 28px rgba(0, 0, 0, 0.28) !important;
  filter: brightness(1.06);
}

.scanner-hero .hero-card--join.telegram-channel-link:active {
  filter: brightness(0.98);
}

.scanner-hero .hero-card--join {
  padding: 0 !important;
  overflow: hidden !important;
}
/* hero-live-status-card-1: live status content inside the fixed hero live card */
.scanner-hero .hero-card--live {
  padding: 13px 16px 10px !important;
  overflow: hidden !important;
}

.scanner-hero .hero-live-status {
  position: relative;
  z-index: 1;
  display: block;
  overflow: hidden;
  width: 100%;
  height: 100%;
  min-height: 0;
  padding: 0 !important;
}

.scanner-hero .hero-live-status__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-width: 0;
}

.scanner-hero .hero-live-status__title-row {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}

.scanner-hero .hero-live-status__dot {
  width: 8px !important;
  height: 8px !important;
  min-width: 8px !important;
  min-height: 8px !important;
  margin-right: 0 !important;
}

.scanner-hero .hero-live-status__title {
  color: rgba(255, 255, 255, 0.94);
  font-size: 12px;
  font-weight: 900;
  line-height: 1;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  white-space: nowrap;
  text-shadow: 0 0 12px rgba(255, 255, 255, 0.18);
}

.scanner-hero .hero-live-status__time {
  color: rgba(230, 237, 246, 0.78);
  font-size: 10px;
  font-weight: 800;
  line-height: 1;
  white-space: nowrap;
}

.scanner-hero .hero-live-status__next {
  margin-top: 12px;
  color: rgba(25, 229, 143, 0.9);
  font-size: 10px;
  font-weight: 800;
  line-height: 1.45;
  min-height: 15px;
  white-space: nowrap;
  overflow: visible;
  text-overflow: clip;
  text-shadow: 0 0 12px rgba(25, 229, 143, 0.18);
}

.scanner-hero .hero-live-status__sparkline {
  align-self: end;
  width: calc(100% + 4px);
  height: 38px;
  margin: 1px -2px -7px;
  overflow: visible;
  filter: drop-shadow(0 0 8px rgba(25, 229, 143, 0.22));
}

.scanner-hero .hero-live-status__spark-fill {
  fill: url(#hero-live-sparkline-fill);
}

.scanner-hero .hero-live-status__spark-line {
  fill: none;
  stroke: rgba(25, 229, 143, 0.58);
  stroke-width: 2.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.scanner-hero .hero-card--live[data-status="last-good"] .hero-live-status__next,
.scanner-hero .hero-card--live[data-status="degraded"] .hero-live-status__next,
.scanner-hero .hero-card--live[data-status="reconnecting"] .hero-live-status__next {
  color: rgba(245, 184, 75, 0.92);
  text-shadow: 0 0 12px rgba(245, 184, 75, 0.16);
}

.scanner-hero .hero-card--live[data-status="empty"] .hero-live-status__next {
  color: rgba(172, 187, 204, 0.78);
  text-shadow: none;
}

.scanner-hero .hero-card--live[data-status="last-good"] .hero-live-status__sparkline,
.scanner-hero .hero-card--live[data-status="degraded"] .hero-live-status__sparkline,
.scanner-hero .hero-card--live[data-status="reconnecting"] .hero-live-status__sparkline {
  filter: drop-shadow(0 0 8px rgba(245, 184, 75, 0.16));
  opacity: 0.82;
}
/* hero-live-exchange-icon-1: show active exchange inside live status card */
.scanner-hero .hero-live-status__exchange-icon {
  width: 22px;
  height: 22px;
  display: inline-block;
  object-fit: contain;
  flex: 0 0 auto;
  margin-left: 1px;
  transform: translateY(-1px);
  pointer-events: none;
  user-select: none;
  -webkit-user-drag: none;
  filter: drop-shadow(0 0 8px rgba(0, 255, 208, 0.2));
}
/* listings-mini-card-1: static two-column listings UI inside hero card 3 */
.scanner-hero .hero-card--listings {
  padding: 14px 16px 11px !important;
  overflow: hidden !important;
}

.scanner-hero .hero-card--listings .hero-card__header {
  position: relative;
  z-index: 1;
  height: var(--hero-card-content-header-height);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: var(--hero-card-content-gap);
}

.scanner-hero .hero-card--listings .hero-card__title-row {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}

.scanner-hero .hero-card--listings .hero-card__icon {
  width: 22px;
  height: 22px;
  flex: 0 0 22px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 7px;
  background: rgba(255, 255, 255, 0.07);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.08),
    0 0 18px rgba(255, 77, 95, 0.16);
  font-size: 13px;
}

.scanner-hero .hero-card--listings .hero-card__title {
  display: block !important;
  margin: 0;
  color: rgba(255, 255, 255, 0.92);
  font-size: 12px;
  font-weight: 900;
  line-height: 1;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.scanner-hero .hero-card--listings .hero-card__ghost-action {
  position: relative;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 24px;
  padding: 0 10px;
  border: 1px solid rgba(180, 198, 220, 0.16);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.045);
  color: rgba(210, 220, 235, 0.72);
  font-size: 10px;
  font-weight: 800;
  cursor: pointer;
  pointer-events: auto;
  white-space: nowrap;
}

.scanner-hero .hero-card--listings .hero-card__ghost-action:hover,
.scanner-hero .hero-card--listings .hero-card__ghost-action:focus-visible {
  border-color: rgba(180, 198, 220, 0.24);
  background: rgba(255, 255, 255, 0.07);
  color: rgba(238, 244, 252, 0.88);
  outline: none;
}

.scanner-hero .hero-card--listings .hero-card__ghost-action:active {
  transform: translateY(1px);
}

.scanner-hero .listings-card-actions {
  position: relative;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.scanner-hero .listings-market-filter {
  width: 24px;
  height: 22px;
  border-radius: 999px;
  border: 1px solid rgba(180, 198, 220, 0.16);
  background: rgba(255, 255, 255, 0.045);
  font-size: 10px;
  line-height: 1;
  font-weight: 900;
  cursor: pointer;
}

.scanner-hero .listings-market-filter--spot {
  color: rgba(255, 179, 71, 0.94);
  border-color: rgba(255, 179, 71, 0.24);
}

.scanner-hero .listings-market-filter--futures {
  color: rgba(255, 92, 112, 0.94);
  border-color: rgba(255, 92, 112, 0.24);
}

.scanner-hero .listings-market-filter.is-active.listings-market-filter--spot {
  background: rgba(255, 179, 71, 0.16);
  border-color: rgba(255, 179, 71, 0.58);
  box-shadow: 0 0 14px rgba(255, 179, 71, 0.16);
}

.scanner-hero .listings-market-filter.is-active.listings-market-filter--futures {
  background: rgba(255, 92, 112, 0.16);
  border-color: rgba(255, 92, 112, 0.58);
  box-shadow: 0 0 14px rgba(255, 92, 112, 0.16);
}

.scanner-hero .listings-mini-grid {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 12px;
  min-height: 0;
}

.scanner-hero .listings-mini-column {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.scanner-hero .listings-hero-feed {
  position: relative;
  z-index: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 0;
}

.scanner-hero .listings-mini-list {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.scanner-hero .listings-mini-list--full {
  width: 100%;
  min-height: var(--hero-card-visible-list-height);
  gap: 3px;
}

.scanner-hero .listings-mini-empty {
  height: 20px;
  display: flex;
  align-items: center;
  color: rgba(160, 175, 195, 0.5);
  font-size: 11px;
  font-weight: 800;
}

.scanner-hero .listings-mini-heading {
  height: var(--hero-card-content-label-height);
  display: flex;
  align-items: center;
  margin-bottom: var(--hero-card-heading-to-list-gap);
  color: rgba(164, 178, 198, 0.68);
  font-size: 10px;
  font-weight: 900;
  line-height: 1;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.scanner-hero .listing-mini-row {
  --listing-mini-base-gap: 6px;
  min-width: 0;
  height: 19px;
  display: grid;
  align-items: center;
  grid-template-columns: 8px auto auto minmax(0, 1fr) 18px;
  column-gap: var(--listing-mini-base-gap);
  color: rgba(240, 246, 255, 0.88);
  font-size: 11px;
  font-weight: 800;
  line-height: 1;
  cursor: default;
}

.scanner-hero .listing-mini-row--live {
  grid-template-columns: 8px auto auto minmax(0, 1fr) 18px;
}

.scanner-hero .listing-mini-row--available {
  grid-template-columns: 8px auto auto minmax(0, 1fr) 18px;
}

.scanner-hero .listing-mini-time {
  min-width: 30px;
  margin-left: 11px;
  color: rgba(205, 216, 230, 0.68);
  font-size: 10px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.scanner-hero .listing-mini-dot,
.scanner-hero .listing-mini-live-dot {
  width: 7px;
  height: 7px;
  border-radius: 999px;
  background: #1ee884;
  box-shadow: 0 0 10px rgba(30, 232, 132, 0.6);
}

.scanner-hero .listing-mini-exchange-icon {
  width: 12px;
  height: 12px;
  display: block;
  flex: 0 0 12px;
  object-fit: contain;
}

.scanner-hero .listing-mini-exchange {
  min-width: 0;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin-left: 9px;
  white-space: nowrap;
}

.scanner-hero .listing-mini-exchange-label {
  color: rgba(205, 216, 230, 0.78);
  font-size: 9px;
  font-weight: 900;
  line-height: 1;
  text-transform: uppercase;
}

.scanner-hero .listing-mini-symbol {
  min-width: 0;
  margin-left: 20px;
  overflow: hidden;
  color: rgba(244, 248, 255, 0.94);
  text-overflow: ellipsis;
  white-space: nowrap;
  user-select: text;
}

.scanner-hero .listing-mini-market,
.scanner-hero .listing-mini-market-badge {
  min-width: 17px;
  height: 17px;
  padding: 0 5px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(255, 74, 91, 0.28);
  border-radius: 5px;
  background: rgba(255, 74, 91, 0.12);
  color: rgba(255, 118, 132, 0.95);
  font-size: 10px;
  font-weight: 900;
  justify-self: end;
}

.scanner-hero .listing-mini-market-badge {
  justify-self: end;
}

.scanner-hero .listings-mini-list--full .listing-mini-row {
  width: 100%;
  height: 16px;
  grid-template-columns: 7px auto auto minmax(0, 1fr) 17px;
  column-gap: 5px;
}

.scanner-hero .listings-mini-list--full .listing-mini-symbol {
  max-width: none;
  font-size: 9.5px;
  letter-spacing: -0.025em;
}

.scanner-hero .listings-mini-list--full .listing-mini-time {
  min-width: 32px;
  color: rgba(205, 216, 230, 0.68);
  font-size: 9.5px;
  font-weight: 700;
}

.scanner-hero .listings-mini-list--full .listing-mini-exchange-icon {
  width: 12px;
  height: 12px;
}

.scanner-hero .listings-mini-list--full .listing-mini-exchange {
  gap: 3px;
}

.scanner-hero .listings-mini-list--full .listing-mini-exchange-label {
  font-size: 8.5px;
}

.scanner-hero .listings-mini-list--full .listing-mini-live-dot {
  width: 6px;
  height: 6px;
}

.scanner-hero .listings-mini-list--full .listing-mini-market,
.scanner-hero .listings-mini-list--full .listing-mini-market-badge {
  width: 17px;
  min-width: 17px;
  padding: 0;
}

.scanner-hero .listing-mini-market.listings-market-badge--futures,
.listings-modal-market.listings-market-badge--futures {
  border-color: rgba(255, 74, 91, 0.28);
  background: rgba(255, 74, 91, 0.12);
  color: rgba(255, 118, 132, 0.95);
}

.scanner-hero .listing-mini-market.listings-market-badge--spot,
.listings-modal-market.listings-market-badge--spot {
  border-color: rgba(255, 179, 71, 0.36);
  background: rgba(255, 179, 71, 0.12);
  color: #ffb347;
}

.scanner-hero .listing-mini-more {
  margin-top: var(--hero-card-footer-offset);
  color: rgba(160, 175, 195, 0.56);
  font-size: 10px;
  font-weight: 800;
  line-height: 1;
}

.scanner-hero .listing-mini-more--button {
  margin-top: 0;
  padding: 0;
  border: 0;
  background: transparent;
  color: rgba(160, 175, 195, 0.68);
  font: inherit;
  cursor: pointer;
}

@media (max-width: 768px) {
  .scanner-hero .listings-mini-grid {
    grid-template-columns: 1fr;
  }

  .scanner-hero .hero-card--listings .hero-card__ghost-action {
    display: inline-flex;
  }
}

.hero-card--listings {
  cursor: default;
}

.hero-card--listings .listing-mini-row {
  cursor: default;
}

.hero-card--listings .listing-mini-symbol {
  user-select: text;
}

.hero-card__ghost-action {
  cursor: pointer;
}

.scanner-hero .hero-card--listings .hero-card__ghost-action {
  cursor: pointer;
  pointer-events: auto;
}

.listings-modal {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: none;
}

.listings-modal.is-open {
  display: block;
}

.listings-modal__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.62);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

.listings-modal__panel {
  position: absolute;
  top: 50%;
  left: 50%;
  width: min(860px, calc(100vw - 40px));
  max-height: min(720px, calc(100vh - 56px));
  transform: translate(-50%, -50%);
  border-radius: 22px;
  border: 1px solid rgba(150, 170, 200, 0.24);
  background:
    linear-gradient(135deg, rgba(16, 22, 34, 0.94), rgba(5, 8, 14, 0.90));
  box-shadow:
    0 28px 80px rgba(0, 0, 0, 0.62),
    inset 0 1px 0 rgba(255, 255, 255, 0.06);
  overflow: hidden;
}

.listings-modal__header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 18px;
  padding: 22px 24px 16px;
  border-bottom: 1px solid rgba(150, 170, 200, 0.14);
}

.listings-modal__eyebrow {
  font-size: 11px;
  line-height: 1;
  font-weight: 900;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(255, 92, 112, 0.86);
}

.listings-modal__title {
  margin: 6px 0 0;
  font-size: 24px;
  line-height: 1;
  font-weight: 900;
  color: rgba(245, 248, 255, 0.96);
}

.listings-modal__close {
  width: 34px;
  height: 34px;
  border-radius: 10px;
  border: 1px solid rgba(180, 198, 220, 0.18);
  background: rgba(255, 255, 255, 0.055);
  color: rgba(235, 242, 255, 0.86);
  font-size: 24px;
  line-height: 1;
  cursor: pointer;
}

.listings-modal__content {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 18px;
  padding: 18px 24px 24px;
  overflow: auto;
  max-height: calc(min(720px, calc(100vh - 56px)) - 90px);
}

.listings-modal__column {
  min-width: 0;
}

.listings-modal__column-title {
  margin-bottom: 12px;
  font-size: 12px;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: rgba(164, 178, 198, 0.74);
}

.listings-modal__list {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.listings-modal-row {
  min-width: 0;
  min-height: 36px;
  display: grid;
  align-items: center;
  grid-template-columns: 44px 20px minmax(0, 1fr) auto;
  gap: 9px;
  padding: 8px 10px;
  border-radius: 11px;
  background: rgba(255, 255, 255, 0.035);
  border: 1px solid rgba(160, 180, 205, 0.10);
  overflow: hidden;
}

.listings-modal-row--live {
  grid-template-columns: 10px 44px 20px minmax(0, 1fr) auto;
}

.listings-modal-time {
  min-width: 0;
  color: rgba(205, 216, 230, 0.68);
  font-size: 11px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  line-height: 1;
  white-space: nowrap;
}

.listings-modal-live-dot {
  width: 8px;
  height: 8px;
  border-radius: 999px;
  background: #1ee884;
  box-shadow: 0 0 10px rgba(30, 232, 132, 0.6);
}

.listings-modal-exchange-icon {
  width: 20px;
  height: 20px;
  max-width: 20px;
  max-height: 20px;
  min-width: 0;
  display: block;
  object-fit: contain;
  justify-self: center;
  flex: 0 0 20px;
}

.listings-modal-symbol {
  min-width: 0;
  overflow: hidden;
  color: rgba(244, 248, 255, 0.94);
  font-size: 12px;
  font-weight: 900;
  line-height: 1;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.listings-modal-market {
  min-width: 20px;
  height: 20px;
  padding: 0 6px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(255, 74, 91, 0.28);
  border-radius: 6px;
  background: rgba(255, 74, 91, 0.12);
  color: rgba(255, 118, 132, 0.95);
  font-size: 10px;
  font-weight: 900;
  line-height: 1;
  white-space: nowrap;
}

.listings-modal-empty {
  padding: 14px 12px;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.035);
  color: rgba(160, 175, 195, 0.60);
  font-size: 12px;
  font-weight: 800;
}

body.listings-modal-open {
  overflow: hidden !important;
}

/* funding-heat-modal-1: compact full list for funding extremes */
.funding-heat-modal {
  position: fixed;
  inset: 0;
  z-index: 120;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 22px;
}

.funding-heat-modal.is-open {
  display: flex;
}

.funding-heat-modal__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(4, 8, 18, 0.72);
  backdrop-filter: blur(10px);
}

.funding-heat-modal__panel {
  position: relative;
  z-index: 1;
  width: min(620px, calc(100vw - 28px));
  max-height: min(680px, calc(100vh - 28px));
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 18px;
  border-radius: 14px;
  border: 1px solid rgba(160, 180, 205, 0.16);
  background:
    linear-gradient(180deg, rgba(18, 26, 40, 0.96), rgba(8, 12, 22, 0.96));
  box-shadow: 0 24px 80px rgba(0, 0, 0, 0.48);
}

.funding-heat-modal__header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
}

.funding-heat-modal__eyebrow {
  color: rgba(164, 178, 198, 0.68);
  font-size: 10px;
  font-weight: 900;
  line-height: 1;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.funding-heat-modal__title {
  margin: 5px 0 0;
  color: rgba(245, 248, 255, 0.94);
  font-size: 18px;
  line-height: 1.1;
  font-weight: 900;
}

.funding-heat-modal__close {
  width: 30px;
  height: 30px;
  border: 1px solid rgba(180, 198, 220, 0.16);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.045);
  color: rgba(210, 220, 235, 0.72);
  cursor: pointer;
}

.funding-heat-modal__list {
  min-width: 0;
  overflow: auto;
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding-right: 2px;
}

.funding-heat-modal-row.funding-heat-row {
  height: 30px;
  grid-template-columns: minmax(0, 1fr) 74px 90px 48px;
  padding: 7px 9px;
  border-radius: 9px;
}

.funding-heat-modal-empty {
  color: rgba(160, 175, 195, 0.70);
  font-size: 12px;
  font-weight: 800;
}

body.funding-heat-modal-open {
  overflow: hidden !important;
}

/* open-interest-modal-1: exchange columns for CoinGlass OI Alerts */
.open-interest-modal {
  position: fixed;
  inset: 0;
  z-index: 120;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 22px;
}

.open-interest-modal.is-open {
  display: flex;
}

.open-interest-modal__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(4, 8, 18, 0.72);
  backdrop-filter: blur(10px);
}

.open-interest-modal__panel {
  position: relative;
  z-index: 1;
  width: min(1040px, calc(100vw - 28px));
  max-height: min(720px, calc(100vh - 28px));
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 18px;
  border-radius: 14px;
  border: 1px solid rgba(160, 180, 205, 0.16);
  background:
    linear-gradient(180deg, rgba(18, 26, 40, 0.96), rgba(8, 12, 22, 0.96));
  box-shadow: 0 24px 80px rgba(0, 0, 0, 0.48);
}

.open-interest-modal__header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
}

.open-interest-modal__actions {
  display: inline-flex;
  align-items: center;
  gap: 10px;
}

.open-interest-modal-window-filters {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.open-interest-modal__eyebrow {
  color: rgba(164, 178, 198, 0.68);
  font-size: 10px;
  font-weight: 900;
  line-height: 1;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.open-interest-modal__title {
  margin: 5px 0 0;
  color: rgba(245, 248, 255, 0.94);
  font-size: 18px;
  line-height: 1.1;
  font-weight: 900;
}

.open-interest-modal__close {
  width: 30px;
  height: 30px;
  border: 1px solid rgba(180, 198, 220, 0.16);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.045);
  color: rgba(210, 220, 235, 0.72);
  cursor: pointer;
}

.modal-close-button {
  position: relative;
  width: 30px;
  height: 30px;
  flex: 0 0 30px;
  border-radius: 999px;
  border: 1px solid rgba(180, 198, 220, 0.16);
  background: rgba(255, 255, 255, 0.045);
  color: transparent;
  font-size: 0;
  line-height: 0;
  cursor: pointer;
  pointer-events: auto;
}

.modal-close-button::before,
.modal-close-button::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 12px;
  height: 2px;
  border-radius: 999px;
  background: rgba(220, 230, 245, 0.72);
  transform-origin: center;
}

.modal-close-button::before {
  transform: translate(-50%, -50%) rotate(45deg);
}

.modal-close-button::after {
  transform: translate(-50%, -50%) rotate(-45deg);
}

.modal-close-button:hover,
.modal-close-button:focus-visible {
  border-color: rgba(210, 225, 245, 0.26);
  background: rgba(255, 255, 255, 0.075);
  outline: none;
}

.modal-close-button:hover::before,
.modal-close-button:hover::after,
.modal-close-button:focus-visible::before,
.modal-close-button:focus-visible::after {
  background: rgba(245, 250, 255, 0.92);
}

.modal-close-button:active {
  transform: translateY(1px);
}

/* hero-cards-static-bg-oi-filter-1: shared stable hero glass tone without compositor blur. */
.scanner-hero .hero-card--dex,
.scanner-hero .hero-card--open-interest,
.scanner-hero .hero-card--funding,
.scanner-hero .hero-card--listings {
  overflow: hidden !important;
  isolation: isolate;
  contain: paint;
  background:
    radial-gradient(circle at 22% 0%, rgba(255, 74, 91, 0.105), transparent 38%),
    radial-gradient(circle at 85% 18%, rgba(135, 160, 190, 0.075), transparent 42%),
    linear-gradient(135deg, rgba(18, 24, 36, 0.80), rgba(5, 8, 14, 0.68)) !important;
  border: 0 !important;
  box-shadow:
    0 16px 40px rgba(0, 0, 0, 0.34),
    inset 0 0 0 1px rgba(150, 170, 200, 0.20),
    inset 0 1px 0 rgba(255, 255, 255, 0.045) !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  transform: none !important;
  filter: none !important;
  will-change: auto !important;
}

.scanner-hero .hero-card--dex::before,
.scanner-hero .hero-card--dex::after,
.scanner-hero .hero-card--open-interest::before,
.scanner-hero .hero-card--open-interest::after,
.scanner-hero .hero-card--funding::before,
.scanner-hero .hero-card--funding::after,
.scanner-hero .hero-card--listings::before,
.scanner-hero .hero-card--listings::after {
  content: none !important;
  display: none !important;
  inset: 0 !important;
  border-radius: inherit !important;
  pointer-events: none !important;
}

.scanner-hero .funding-heat-card::before,
.scanner-hero .funding-heat-card::after,
.scanner-hero .funding-heat-card__header::before,
.scanner-hero .funding-heat-card__header::after,
.scanner-hero .funding-heat-list::before,
.scanner-hero .funding-heat-list::after {
  content: none !important;
  display: none !important;
}

.scanner-hero .hero-card--dex,
.scanner-hero .hero-card--dex *,
.scanner-hero .hero-card--open-interest,
.scanner-hero .hero-card--open-interest *,
.scanner-hero .hero-card--funding,
.scanner-hero .hero-card--funding *,
.scanner-hero .hero-card--listings,
.scanner-hero .hero-card--listings * {
  backface-visibility: visible;
  will-change: auto !important;
}

.scanner-hero .funding-heat-view-all {
  outline: none;
  box-shadow: none;
  transform: none !important;
  filter: none !important;
}

.scanner-hero .funding-heat-view-all:hover,
.scanner-hero .funding-heat-view-all:focus-visible {
  box-shadow: none;
  outline: none;
  transform: none !important;
  filter: none !important;
}

.scanner-hero .funding-heat-view-all:active {
  transform: none !important;
  filter: none !important;
}

.open-interest-modal__content {
  min-width: 0;
  overflow: auto;
  display: grid;
  grid-template-columns: repeat(6, minmax(128px, 1fr));
  gap: 8px;
}

.open-interest-modal-column {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 8px;
  border-radius: 10px;
  border: 1px solid rgba(160, 180, 205, 0.12);
  background: rgba(255, 255, 255, 0.035);
}

.open-interest-modal-column__title {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  color: rgba(230, 238, 250, 0.88);
  font-size: 10px;
  line-height: 1;
  font-weight: 900;
}

.open-interest-modal-column__icon {
  width: 14px;
  height: 14px;
  object-fit: contain;
}

.open-interest-modal-row {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 7px;
  border-radius: 8px;
  border: 1px solid rgba(160, 180, 205, 0.10);
  background: rgba(255, 255, 255, 0.035);
}

.open-interest-modal-row__symbol {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: rgba(242, 246, 255, 0.94);
  font-size: 10px;
  line-height: 1;
  font-weight: 900;
}

.open-interest-modal-column__empty,
.open-interest-modal-empty {
  color: rgba(160, 175, 195, 0.70);
  font-size: 10px;
  line-height: 1.2;
  font-weight: 800;
}

.oi-modal-row__metrics {
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 0;
}

.oi-modal-row__metric {
  min-width: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  color: rgba(160, 175, 195, 0.64);
  font-size: 10px;
  line-height: 1;
  font-weight: 800;
  white-space: nowrap;
}

.oi-modal-row__metric.is-selected {
  color: rgba(230, 238, 250, 0.92);
  font-weight: 900;
}

.oi-modal-row__metric-label {
  flex: 0 0 auto;
  color: inherit;
  opacity: 0.72;
  text-transform: uppercase;
}

.oi-modal-row__metric-value {
  flex: 0 0 auto;
  font-variant-numeric: tabular-nums;
  font-weight: 900;
  white-space: nowrap;
}

body.open-interest-modal-open {
  overflow: hidden !important;
}

.scanner-table.scanner-table--exchange-all {
  min-width: 1260px;
}

.scanner-table.scanner-table--exchange-all th:nth-child(1),
.scanner-table.scanner-table--exchange-all td:nth-child(1) {
  width: 300px;
  min-width: 300px;
  padding-right: 10px;
}

.scanner-table.scanner-table--exchange-all th:nth-child(2),
.scanner-table.scanner-table--exchange-all td:nth-child(2) {
  width: 112px;
  padding-left: 12px;
  padding-right: 12px;
}

.scanner-table.scanner-table--exchange-all th:nth-child(3),
.scanner-table.scanner-table--exchange-all td:nth-child(3) {
  width: 132px;
}

.scanner-table.scanner-table--exchange-all th:nth-child(4),
.scanner-table.scanner-table--exchange-all td:nth-child(4),
.scanner-table.scanner-table--exchange-all th:nth-child(5),
.scanner-table.scanner-table--exchange-all td:nth-child(5) {
  width: 150px;
}

.scanner-table.scanner-table--exchange-all th:nth-child(6),
.scanner-table.scanner-table--exchange-all td:nth-child(6),
.scanner-table.scanner-table--exchange-all th:nth-child(7),
.scanner-table.scanner-table--exchange-all td:nth-child(7) {
  width: 180px;
}

.scanner-table.scanner-table--exchange-all tbody td:nth-child(2) {
  color: var(--text);
}

.scanner-table.scanner-table--exchange-all tbody td:nth-child(3) {
  color: #ff5968 !important;
  text-shadow: 0 0 12px rgba(255, 72, 88, 0.18) !important;
}

.scanner-table__exchange-heading,
.scanner-table__exchange {
  text-align: left;
}

.scanner-table__exchange-heading {
  color: var(--muted);
  font-size: 12px;
  font-weight: 850;
  letter-spacing: 0.01em;
}

.scanner-table__exchange-pill {
  min-width: 0;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  max-width: 100%;
}

.scanner-table__exchange-icon {
  width: 16px;
  height: 16px;
  flex: 0 0 16px;
  object-fit: contain;
}

.scanner-table__exchange-label {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  color: rgba(226, 236, 248, 0.86);
  font-size: 11px;
  font-weight: 850;
  line-height: 1;
  letter-spacing: 0.02em;
  white-space: nowrap;
}

/* table-panel-gap-fix-1: lower table panel top while keeping table bottom/footer in place */
:root {
  --scanner-table-stack-base-top: 261px;
  --scanner-table-top-gap: 8px;
  --scanner-table-shell-height: min(608px, calc(100vh - 342px));
}

body:not(.manual-layout-editor-mode) .scanner-table-stack {
  position: fixed !important;
  left: 42px !important;
  top: calc(var(--scanner-table-stack-base-top) + var(--scanner-table-top-gap)) !important;
  width: 1698px !important;
  max-width: none !important;
  transform: scale(1.04) !important;
  transform-origin: left top !important;
  z-index: 70 !important;
  pointer-events: auto;
}

.scanner-panel {
  display: block;
  height: auto !important;
  min-height: unset;
  border-radius: var(--panel-radius);
  overflow: hidden;
}

.scanner-table-stack .scanner-panel {
  position: static !important;
  display: block;
  left: auto !important;
  top: auto !important;
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
  height: auto !important;
  min-height: unset;
  border-radius: var(--panel-radius);
  overflow: hidden;
  transform: none !important;
  margin: 0 !important;
  z-index: auto !important;
}

body:not(.manual-layout-editor-mode) .scanner-table-stack .scanner-panel {
  position: static !important;
  left: auto !important;
  top: auto !important;
  width: 100% !important;
  max-width: 100% !important;
  height: auto !important;
  min-height: unset !important;
  transform: none !important;
  margin: 0 !important;
  z-index: auto !important;
}

@media (min-width: 901px) {
  .scanner-table-stack .scanner-panel,
  body:not(.manual-layout-editor-mode) .scanner-table-stack .scanner-panel {
    height: var(--scanner-table-shell-height) !important;
    min-height: var(--scanner-table-shell-height) !important;
    max-height: var(--scanner-table-shell-height) !important;
  }
}

.scanner-panel .table-wrap {
  display: block;
  min-height: 0;
  height: 100%;
  max-height: none;
  overflow: auto;
  overflow-x: auto;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
  touch-action: pan-x pan-y;
  scrollbar-color: rgba(140, 155, 175, 0.35) rgba(255, 255, 255, 0.03);
  scrollbar-width: thin;
}

.scanner-panel .scanner-table {
  border-collapse: separate;
  border-spacing: 0;
}

.scanner-panel .table-wrap::-webkit-scrollbar {
  width: 9px;
  height: 9px;
}

.scanner-panel .table-wrap::-webkit-scrollbar-track {
  background: rgba(255, 255, 255, 0.03);
}

.scanner-panel .table-wrap::-webkit-scrollbar-thumb {
  border-radius: 999px;
  background: rgba(140, 155, 175, 0.35);
}

.scanner-panel .table-wrap::-webkit-scrollbar-thumb:hover {
  background: rgba(170, 185, 205, 0.50);
}

.scanner-panel .scanner-table thead {
  position: sticky;
  top: 0;
  z-index: 10;
  background: rgba(8, 13, 20, 0.96);
}

.scanner-panel .scanner-table thead th {
  position: sticky;
  top: 0;
  z-index: 11;
  background:
    linear-gradient(180deg, rgba(13, 20, 31, 0.98), rgba(8, 13, 20, 0.98)) !important;
  background-clip: padding-box;
}

.scanner-table.scanner-table--exchange-all .symbol-cell {
  max-width: none;
}

.scanner-table.scanner-table--exchange-all .symbol-main {
  max-width: none;
}

.scanner-table.scanner-table--exchange-all .zero-fee-badge {
  flex: 0 0 auto;
  margin-left: 0;
}

.scanner-page-footer {
  position: static;
  z-index: auto;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  align-items: center;
  gap: 14px;
  margin-top: 10px;
  padding: 0 6px 14px;
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  color: rgba(205, 216, 230, 0.72);
  font-size: 11px;
  font-weight: 800;
  line-height: 1;
  letter-spacing: 0.01em;
}

.scanner-page-footer__status,
.scanner-page-footer__prices,
.scanner-page-footer__brand {
  min-width: 0;
  display: inline-flex;
  align-items: center;
  gap: 9px;
  white-space: nowrap;
}

.scanner-page-footer__status {
  justify-self: start;
}

.scanner-page-footer__brand {
  justify-self: center;
  color: rgba(230, 236, 246, 0.5);
  opacity: 0.5;
}

.scanner-page-footer__prices {
  justify-self: end;
  gap: 12px;
  font-variant-numeric: tabular-nums;
}

.scanner-page-footer__price {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  min-width: 0;
  white-space: nowrap;
}

.footer-market-change {
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  opacity: 0.82;
}

.footer-market-change--positive {
  color: rgba(42, 235, 160, 0.68);
}

.footer-market-change--negative {
  color: rgba(255, 82, 112, 0.68);
}

.footer-market-change--flat {
  color: rgba(170, 185, 205, 0.62);
}

.scanner-page-footer__shield {
  width: 14px;
  height: 14px;
  flex: 0 0 14px;
  display: block;
  object-fit: contain;
  user-select: none;
  -webkit-user-drag: none;
}

body.manual-layout-editor-mode .scanner-page-footer {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr) !important;
  align-items: center !important;
  gap: 14px !important;
}

/* footer-stack-smart-collapse-2: stack footer labels only when the actual gaps get tight */
.scanner-page-footer.is-stacked {
  grid-template-columns: minmax(0, 1fr) !important;
  justify-items: center;
  align-items: center;
  gap: 6px;
  padding-bottom: 10px;
  text-align: center;
}

.scanner-page-footer.is-stacked .scanner-page-footer__status,
.scanner-page-footer.is-stacked .scanner-page-footer__brand,
.scanner-page-footer.is-stacked .scanner-page-footer__prices {
  justify-self: center;
  justify-content: center;
  max-width: 100%;
  white-space: normal;
  line-height: 1.25;
}

.scanner-page-footer.is-stacked .scanner-page-footer__prices {
  gap: 8px 10px;
  flex-wrap: wrap;
}

.scanner-page-footer.is-stacked .scanner-page-footer__price {
  white-space: nowrap;
}

.scanner-page-footer.is-prices-only {
  grid-template-columns: minmax(0, 1fr) !important;
  justify-items: center;
  gap: 0;
  padding-bottom: 10px;
  text-align: center;
}

.scanner-page-footer.is-prices-only .scanner-page-footer__status,
.scanner-page-footer.is-prices-only .scanner-page-footer__brand {
  display: none !important;
}

.scanner-page-footer.is-prices-only .scanner-page-footer__prices {
  justify-self: center;
  justify-content: center;
  max-width: 100%;
  gap: 8px 10px;
  flex-wrap: wrap;
  white-space: normal;
  line-height: 1.25;
}

body[data-active-market="spot"] .market-mode[data-market="spot"].active,
body[data-market="spot"] .market-mode[data-market="spot"].active {
  border-color: rgba(212, 116, 56, 0.42) !important;
  background: rgba(212, 116, 56, 0.16) !important;
  background-image: none !important;
  color: rgba(255, 185, 126, 0.96) !important;
  box-shadow:
    inset 0 0 0 1px rgba(212, 116, 56, 0.18),
    0 0 18px rgba(212, 116, 56, 0.10) !important;
}

body[data-active-market="spot"] .market-mode[data-market="spot"].active::before,
body[data-market="spot"] .market-mode[data-market="spot"].active::before {
  content: none !important;
  display: none !important;
}

.scanner-hero .hero-live-status__time {
  color: #ffffff;
  font-size: 20px;
  font-weight: 950;
  line-height: 1;
  opacity: 1;
  font-variant-numeric: tabular-nums;
}

.scanner-hero .hero-live-status__sparkline {
  transform: none;
  margin-bottom: 5px;
}

.scanner-hero .hero-live-status__exchange-all {
  display: inline-flex;
  align-items: center;
  height: 22px;
  padding: 0 7px;
  border-radius: 999px;
  border: 1px solid rgba(180, 198, 220, 0.18);
  background: rgba(255, 255, 255, 0.045);
  color: rgba(235, 242, 252, 0.9);
  font-size: 10px;
  font-weight: 950;
  line-height: 1;
}

.scanner-hero .hero-live-status__exchange-all[hidden] {
  display: none;
}

.scanner-hero .hero-live-status__exchange-icon[hidden] {
  display: none !important;
}

.listings-modal__content,
.listings-modal__list,
.funding-heat-modal__list,
.open-interest-modal__content {
  scrollbar-color: rgba(140, 155, 175, 0.35) rgba(255, 255, 255, 0.03);
  scrollbar-width: thin;
}

.listings-modal__content::-webkit-scrollbar,
.listings-modal__list::-webkit-scrollbar,
.funding-heat-modal__list::-webkit-scrollbar,
.open-interest-modal__content::-webkit-scrollbar {
  width: 9px;
  height: 9px;
}

.listings-modal__content::-webkit-scrollbar-track,
.listings-modal__list::-webkit-scrollbar-track,
.funding-heat-modal__list::-webkit-scrollbar-track,
.open-interest-modal__content::-webkit-scrollbar-track {
  background: rgba(255, 255, 255, 0.03);
}

.listings-modal__content::-webkit-scrollbar-thumb,
.listings-modal__list::-webkit-scrollbar-thumb,
.funding-heat-modal__list::-webkit-scrollbar-thumb,
.open-interest-modal__content::-webkit-scrollbar-thumb {
  border-radius: 999px;
  background: rgba(140, 155, 175, 0.35);
}

.listings-modal__content::-webkit-scrollbar-thumb:hover,
.listings-modal__list::-webkit-scrollbar-thumb:hover,
.funding-heat-modal__list::-webkit-scrollbar-thumb:hover,
.open-interest-modal__content::-webkit-scrollbar-thumb:hover {
  background: rgba(170, 185, 205, 0.50);
}

.open-interest-modal__panel {
  width: min(920px, calc(100vw - 28px));
}

.open-interest-modal__content {
  grid-template-columns: repeat(5, minmax(126px, 1fr));
}

@media (max-width: 768px) {
  .listings-modal__panel {
    width: calc(100vw - 24px);
    max-height: calc(100vh - 32px);
  }

  .listings-modal__content {
    grid-template-columns: 1fr;
  }

  .funding-heat-modal__panel {
    width: calc(100vw - 24px);
    max-height: calc(100vh - 32px);
  }

  .open-interest-modal__panel {
    width: calc(100vw - 24px);
    max-height: calc(100vh - 32px);
  }

.open-interest-modal__content {
  grid-template-columns: 1fr;
  }
}

/* mobile-funding-modal-symbols-1: fit opened hero card modals in saved iPhone viewports. */
@media (max-width: 768px) {
  body[data-responsive-layout-profile^="iphone_"].listings-modal-open,
  body[data-responsive-layout-profile^="iphone_"].funding-heat-modal-open,
  body[data-responsive-layout-profile^="iphone_"].open-interest-modal-open {
    overflow: hidden !important;
  }

  body[data-responsive-layout-profile^="iphone_"] .listings-modal,
  body[data-responsive-layout-profile^="iphone_"] .funding-heat-modal,
  body[data-responsive-layout-profile^="iphone_"] .open-interest-modal {
    overflow-x: hidden !important;
  }

  body[data-responsive-layout-profile^="iphone_"] .listings-modal__panel,
  body[data-responsive-layout-profile^="iphone_"] .funding-heat-modal__panel,
  body[data-responsive-layout-profile^="iphone_"] .open-interest-modal__panel {
    width: calc(100vw - 24px) !important;
    max-width: calc(100vw - 24px) !important;
    max-height: calc(100vh - 48px) !important;
    max-height: calc(100dvh - 48px) !important;
    min-height: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    overflow: hidden !important;
    box-sizing: border-box !important;
  }

  body[data-responsive-layout-profile^="iphone_"] .funding-heat-modal__panel,
  body[data-responsive-layout-profile^="iphone_"] .open-interest-modal__panel {
    padding: 14px !important;
    gap: 12px !important;
  }

  body[data-responsive-layout-profile^="iphone_"] .listings-modal__header,
  body[data-responsive-layout-profile^="iphone_"] .funding-heat-modal__header,
  body[data-responsive-layout-profile^="iphone_"] .open-interest-modal__header {
    min-width: 0 !important;
    flex: 0 0 auto !important;
    gap: 10px !important;
  }

  body[data-responsive-layout-profile^="iphone_"] .listings-modal__header {
    padding: 14px 14px 10px !important;
  }

  body[data-responsive-layout-profile^="iphone_"] .listings-modal__header > div,
  body[data-responsive-layout-profile^="iphone_"] .funding-heat-modal__header > div,
  body[data-responsive-layout-profile^="iphone_"] .open-interest-modal__header > div {
    min-width: 0 !important;
  }

  body[data-responsive-layout-profile^="iphone_"] .listings-modal__title,
  body[data-responsive-layout-profile^="iphone_"] .funding-heat-modal__title,
  body[data-responsive-layout-profile^="iphone_"] .open-interest-modal__title {
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
  }

  body[data-responsive-layout-profile^="iphone_"] .listings-modal__close,
  body[data-responsive-layout-profile^="iphone_"] .funding-heat-modal__close,
  body[data-responsive-layout-profile^="iphone_"] .open-interest-modal__close {
    width: 40px !important;
    height: 40px !important;
    min-width: 40px !important;
    min-height: 40px !important;
    flex: 0 0 40px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    margin-left: auto !important;
  }

  body[data-responsive-layout-profile^="iphone_"] .listings-modal__content,
  body[data-responsive-layout-profile^="iphone_"] .funding-heat-modal__list,
  body[data-responsive-layout-profile^="iphone_"] .open-interest-modal__content {
    flex: 1 1 auto !important;
    min-height: 0 !important;
    max-height: calc(100vh - 168px) !important;
    max-height: calc(100dvh - 168px) !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    -webkit-overflow-scrolling: touch !important;
  }

  body[data-responsive-layout-profile^="iphone_"] .listings-modal__content {
    grid-template-columns: 1fr !important;
    gap: 12px !important;
    padding: 12px 14px 14px !important;
  }

  body[data-responsive-layout-profile^="iphone_"] .open-interest-modal__content {
    grid-template-columns: 1fr !important;
    gap: 8px !important;
  }

  body[data-responsive-layout-profile^="iphone_"] .open-interest-modal__actions {
    min-width: 0 !important;
    flex: 0 0 auto !important;
    align-items: flex-start !important;
    gap: 8px !important;
  }

  body[data-responsive-layout-profile^="iphone_"] .open-interest-modal-window-filters {
    max-width: 132px !important;
    flex-wrap: wrap !important;
    justify-content: flex-end !important;
  }

  body[data-responsive-layout-profile^="iphone_"] .open-interest-modal .open-interest-modal-window-button {
    min-width: 32px !important;
    min-height: 28px !important;
  }

  body[data-responsive-layout-profile^="iphone_"] .listings-modal-row {
    min-width: 0 !important;
    grid-template-columns: 40px 20px minmax(0, 1fr) 24px !important;
    gap: 7px !important;
    padding: 8px 9px !important;
  }

  body[data-responsive-layout-profile^="iphone_"] .listings-modal-row--live {
    grid-template-columns: 8px 40px 20px minmax(0, 1fr) 24px !important;
  }

  body[data-responsive-layout-profile^="iphone_"] .funding-heat-modal-row.funding-heat-row {
    min-width: 0 !important;
    min-height: 46px !important;
    height: auto !important;
    grid-template-columns: minmax(0, 1fr) auto !important;
    grid-template-rows: auto auto !important;
    gap: 6px 10px !important;
    align-items: center !important;
    padding: 9px 10px !important;
  }

  body[data-responsive-layout-profile^="iphone_"] .funding-heat-modal-row .hero-copy-symbol-group--funding {
    grid-column: 1 !important;
    grid-row: 1 !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
  }

  body[data-responsive-layout-profile^="iphone_"] .funding-heat-modal-row .funding-heat-row__rate {
    grid-column: 2 !important;
    grid-row: 1 !important;
    justify-self: end !important;
    white-space: nowrap !important;
  }

  body[data-responsive-layout-profile^="iphone_"] .funding-heat-modal-row .funding-heat-row__exchange {
    grid-column: 1 !important;
    grid-row: 2 !important;
    justify-self: start !important;
    max-width: 100% !important;
  }

  body[data-responsive-layout-profile^="iphone_"] .funding-heat-modal-row .funding-heat-row__time {
    grid-column: 2 !important;
    grid-row: 2 !important;
    justify-self: end !important;
    white-space: nowrap !important;
  }

  body[data-responsive-layout-profile^="iphone_"] .listings-modal-copy-group,
  body[data-responsive-layout-profile^="iphone_"] .listings-modal-symbol,
  body[data-responsive-layout-profile^="iphone_"] .listings-modal .hero-copyable-symbol,
  body[data-responsive-layout-profile^="iphone_"] .open-interest-modal-row__symbol,
  body[data-responsive-layout-profile^="iphone_"] .open-interest-modal .hero-copyable-symbol,
  body[data-responsive-layout-profile^="iphone_"] .funding-heat-modal .funding-heat-row__symbol,
  body[data-responsive-layout-profile^="iphone_"] .funding-heat-modal .hero-copyable-symbol {
    min-width: 0 !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
  }

  body[data-responsive-layout-profile^="iphone_"] .listings-modal-market {
    min-width: 22px !important;
    flex: 0 0 auto !important;
    justify-self: end !important;
  }
}

.scanner-table tbody tr.scanner-row--top-1 {
  background:

    linear-gradient(90deg, rgba(255, 62, 91, 0.115), rgba(255, 62, 91, 0.035) 42%, rgba(255, 62, 91, 0.012)),
    linear-gradient(90deg, rgba(17, 25, 34, 0.24), rgba(7, 13, 19, 0.25) 46%, rgba(4, 9, 14, 0.23)) !important;
  box-shadow: none !important;
}

.scanner-table tbody tr.scanner-row--top-2 {
  background:

    linear-gradient(90deg, rgba(255, 62, 91, 0.075), rgba(255, 62, 91, 0.026) 42%, rgba(255, 62, 91, 0.010)),
    linear-gradient(90deg, rgba(17, 25, 34, 0.24), rgba(7, 13, 19, 0.25) 46%, rgba(4, 9, 14, 0.23)) !important;
  box-shadow: none !important;
}

.scanner-table tbody tr.scanner-row--top-3 {
  background:

    linear-gradient(90deg, rgba(255, 62, 91, 0.050), rgba(255, 62, 91, 0.018) 42%, rgba(255, 62, 91, 0.008)),
    linear-gradient(90deg, rgba(17, 25, 34, 0.24), rgba(7, 13, 19, 0.25) 46%, rgba(4, 9, 14, 0.23)) !important;
  box-shadow: none !important;
}

.scanner-table tbody tr.scanner-row--top-1 td,
.scanner-table tbody tr.scanner-row--top-2 td,
.scanner-table tbody tr.scanner-row--top-3 td {
  border-bottom-color: rgba(84, 104, 120, 0.17);
}

.scanner-table tbody tr.scanner-row--top-1:hover,
.scanner-table tbody tr.scanner-row--top-2:hover,
.scanner-table tbody tr.scanner-row--top-3:hover {
  filter: brightness(1.08);
}

.scanner-table th:first-child,
.scanner-table td:first-child {
  width: 340px;
  min-width: 340px;
}

.scanner-table.scanner-table--exchange-all {
  min-width: 1260px;
}

.scanner-table.scanner-table--exchange-all th:first-child,
.scanner-table.scanner-table--exchange-all td:first-child {
  width: 300px;
  min-width: 300px;
  padding-right: 10px;
}

.scanner-table .symbol-cell {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
  max-width: none;
  overflow: visible;
  white-space: nowrap;
  text-overflow: clip;
}

.scanner-table .symbol-main {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  flex: 0 0 auto;
  min-width: 0;
  max-width: none;
}

.scanner-table .symbol-name,
.scanner-table .symbol-name.symbol {
  white-space: nowrap;
  overflow: visible;
  text-overflow: clip;
  flex: 0 0 auto;
  width: auto;
  max-width: none;
}

.scanner-table .copy-symbol {
  flex: 0 0 auto;
}

.scanner-table .zero-fee-badge {
  flex: 0 0 auto;
  margin-left: 8px;
  position: static;
}

.scanner-table .stock-row-badge {
  flex: 0 0 auto;
  position: static;
}

.scanner-table.scanner-table--exchange-all td.symbol-cell {
  display: table-cell;
  vertical-align: middle;
}

.scanner-table.scanner-table--exchange-all td.symbol-cell .symbol-main,
.scanner-table.scanner-table--exchange-all td.symbol-cell .zero-fee-badge,
.scanner-table.scanner-table--exchange-all td.symbol-cell .stock-row-badge {
  vertical-align: middle;
}

.scanner-hero .hero-live-status__clock {
  position: absolute;
  right: 1px;
  top: 1px;
  display: inline-flex;
  flex-direction: column;
  align-items: flex-end;
  justify-content: center;
  gap: 2px;
  min-width: auto;
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  transform: none !important;
}

.scanner-hero .hero-live-status__time-frame {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 84px;
  height: 26px;
  padding: 0 8px;
  border: 1px solid rgba(180, 198, 220, 0.16);
  border-radius: 9px;
  background: rgba(255, 255, 255, 0.045);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.025);
}

.scanner-hero .hero-live-status__clock .hero-live-status__time {
  color: #ffffff;
  font-size: 20px;
  font-weight: 950;
  line-height: 1;
  opacity: 1;
  font-variant-numeric: tabular-nums;
}

.scanner-hero .hero-live-status__tz {
  display: block;
  align-self: flex-end;
  color: rgba(205, 216, 230, 0.58);
  font-size: 8px;
  font-weight: 900;
  line-height: 1;
  letter-spacing: 0.06em;
  padding-right: 1px;
  text-align: right;
  text-transform: uppercase;
}

.scanner-hero .hero-card--join .hero-card-tg-art {
  transform: translateX(-2px) !important;
}

/* live-status-layout-corners-7 */
.scanner-hero .hero-card--live {
  position: relative;
  padding: 0 !important;
  overflow: hidden !important;
}

.scanner-hero .hero-live-status {
  position: relative !important;
  display: block !important;
  width: 100%;
  height: 100%;
  min-height: 0;
  overflow: hidden;
  padding: 0 !important;
  transform: none !important;
}

.scanner-hero .hero-live-status__top {
  display: contents;
}

.scanner-hero .hero-live-status__status-group {
  position: absolute !important;
  left: 1px;
  top: 1px;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-width: 0;
  margin: 0 !important;
  transform: none !important;
}

.scanner-hero .hero-live-status__clock {
  position: absolute !important;
  right: 1px;
  top: 1px;
  display: inline-flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 2px;
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  transform: none !important;
}

.scanner-hero .hero-live-status__next {
  position: absolute !important;
  left: 1px;
  top: 23px;
  margin: 0 !important;
  transform: none !important;
}

.scanner-hero .hero-live-status__sparkline {
  position: absolute !important;
  left: 1px;
  right: 1px;
  top: 45px;
  height: 32px;
  margin: 0 !important;
  transform: none !important;
}

/* active-buttons-white-text-2: keep active button backgrounds, force selected labels fully white */
.tab.active,
.market-mode.active,
.exchange-mode.active,
.exchange-all-placeholder.is-active,
.scanner-hero .open-interest-filter.is-active,
.scanner-hero .open-interest-window-button.is-active,
.open-interest-modal .open-interest-modal-window-button.is-active,
.scanner-hero .listings-market-filter.is-active,
button[aria-pressed="true"],
button[aria-selected="true"] {
  color: #ffffff !important;
  opacity: 1 !important;
}

.tab.active span,
.market-mode.active span,
.exchange-mode.active span,
.exchange-all-placeholder.is-active span,
.scanner-hero .open-interest-filter.is-active span,
.scanner-hero .open-interest-window-button.is-active span,
.open-interest-modal .open-interest-modal-window-button.is-active span,
.scanner-hero .listings-market-filter.is-active span,
button[aria-pressed="true"] span,
button[aria-selected="true"] span {
  color: inherit !important;
  opacity: 1 !important;
}

.controls-panel .rank-sort.active,
.controls-panel .rank-sort {
  color: rgba(255, 130, 141, 0.97) !important;
}

.controls-panel .rank-sort.active .rank-sort-title,
.controls-panel .rank-sort .rank-sort-title {
  color: rgba(255, 130, 141, 0.97) !important;
  opacity: 1 !important;
}

.controls-panel .rank-sort.active .rank-sort-subtitle,
.controls-panel .rank-sort .rank-sort-subtitle {
  color: rgba(177, 153, 157, 0.72) !important;
}

/* default-ranking-score-icon-1: CSS ascending bars icon without moving the fixed ranking button */
.controls-panel .rank-sort::before,
.rank-sort::before {
  content: "" !important;
  display: inline-block !important;
  width: 18px !important;
  height: 14px !important;
  flex: 0 0 18px !important;
  align-self: center !important;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.96), rgba(255, 105, 118, 0.92)),
    linear-gradient(180deg, rgba(255, 255, 255, 0.96), rgba(255, 105, 118, 0.92)),
    linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(255, 105, 118, 0.96));
  background-repeat: no-repeat !important;
  background-size:
    4px 5px,
    4px 9px,
    4px 13px !important;
  background-position:
    1px 8px,
    7px 4px,
    13px 0 !important;
  border-radius: 2px !important;
  opacity: 0.98 !important;
}

.exchange-tab.is-hidden,
.exchange-filter.is-hidden,
[data-exchange].is-hidden {
  display: none !important;
}

/* tg-hover-visible-real-fix-1: obvious visible hover for TG/JOIN card */
.scanner-hero .hero-card--join.telegram-channel-link {
  position: relative;
  z-index: 80 !important;
  pointer-events: auto !important;
  cursor: pointer;
  touch-action: manipulation;
  overflow: hidden !important;
  transition:
    box-shadow 160ms ease,
    border-color 160ms ease,
    background 160ms ease,
    filter 160ms ease;
}

.scanner-hero .hero-card--join.telegram-channel-link .hero-card-tg-art {
  pointer-events: none !important;
  transition:
    filter 160ms ease,
    opacity 160ms ease;
}

.scanner-hero .hero-card--join.telegram-channel-link:hover,
.scanner-hero .hero-card--join.telegram-channel-link.is-hovered,
.scanner-hero .hero-card--join.telegram-channel-link:focus-visible {
  border-color: rgba(105, 230, 255, 0.95) !important;
  background:
    radial-gradient(circle at 50% 50%, rgba(50, 205, 255, 0.28), rgba(8, 18, 30, 0.14) 70%) !important;
  box-shadow:
    0 0 0 2px rgba(95, 225, 255, 0.42),
    0 0 42px rgba(45, 195, 255, 0.58),
    0 0 72px rgba(20, 150, 255, 0.24),
    0 12px 32px rgba(0, 0, 0, 0.38) !important;
  filter: brightness(1.12);
}

.scanner-hero .hero-card--join.telegram-channel-link:hover .hero-card-tg-art,
.scanner-hero .hero-card--join.telegram-channel-link.is-hovered .hero-card-tg-art,
.scanner-hero .hero-card--join.telegram-channel-link:focus-visible .hero-card-tg-art {
  filter:
    brightness(1.22)
    saturate(1.18)
    drop-shadow(0 0 10px rgba(75, 215, 255, 0.85))
    drop-shadow(0 0 24px rgba(35, 175, 255, 0.52)) !important;
}

.scanner-hero .hero-card--join.telegram-channel-link:active {
  filter: brightness(0.96);
}

/* tg-hover-icon-only-fix-1: keep outer card glow, limit inner glow to Telegram icon area only */
.scanner-hero .hero-card--join.telegram-channel-link {
  position: relative;
  z-index: 80 !important;
  pointer-events: auto !important;
  cursor: pointer;
  touch-action: manipulation;
  overflow: hidden !important;
}

.scanner-hero .hero-card--join.telegram-channel-link::after {
  content: "";
  position: absolute;
  left: 10px;
  top: 9px;
  width: 74px;
  height: calc(100% - 18px);
  z-index: 3;
  pointer-events: none !important;
  opacity: 0;
  border-radius: 18px;
  background:
    radial-gradient(circle at 50% 50%, rgba(75, 220, 255, 0.34), transparent 63%);
  box-shadow:
    inset 0 0 16px rgba(70, 215, 255, 0.24),
    0 0 18px rgba(60, 205, 255, 0.36);
  transition: opacity 160ms ease;
}

.scanner-hero .hero-card--join.telegram-channel-link:hover,
.scanner-hero .hero-card--join.telegram-channel-link.is-hovered,
.scanner-hero .hero-card--join.telegram-channel-link:focus-visible {
  border-color: rgba(105, 230, 255, 0.85) !important;
  background: inherit !important;
  box-shadow:
    0 0 0 1px rgba(95, 225, 255, 0.36),
    0 0 34px rgba(45, 195, 255, 0.42),
    0 12px 32px rgba(0, 0, 0, 0.34) !important;
  filter: brightness(1.08);
}

.scanner-hero .hero-card--join.telegram-channel-link:hover::after,
.scanner-hero .hero-card--join.telegram-channel-link.is-hovered::after,
.scanner-hero .hero-card--join.telegram-channel-link:focus-visible::after {
  opacity: 1;
}

.scanner-hero .hero-card--join.telegram-channel-link:hover .hero-card-tg-art,
.scanner-hero .hero-card--join.telegram-channel-link.is-hovered .hero-card-tg-art,
.scanner-hero .hero-card--join.telegram-channel-link:focus-visible .hero-card-tg-art {
  filter: none !important;
}

/* join-hover-blur-trim-1: keep the PNG artwork untouched, remove the soft hover blur */
.scanner-hero .hero-card--join.telegram-channel-link {
  filter: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

.scanner-hero .hero-card--join.telegram-channel-link:hover,
.scanner-hero .hero-card--join.telegram-channel-link.is-hovered,
.scanner-hero .hero-card--join.telegram-channel-link:focus-visible {
  border-color: rgba(105, 230, 255, 0.62) !important;
  box-shadow:
    0 0 0 1px rgba(95, 225, 255, 0.28),
    0 8px 22px rgba(0, 0, 0, 0.34) !important;
  filter: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

/* join-raster-crisp-1: PNG-only JOIN card, same static glass as the other hero cards. */
.scanner-hero .hero-card--join.telegram-channel-link,
.scanner-hero .hero-card--join.telegram-channel-link:hover,
.scanner-hero .hero-card--join.telegram-channel-link.is-hovered,
.scanner-hero .hero-card--join.telegram-channel-link:focus-visible,
.scanner-hero .hero-card--join.telegram-channel-link:active {
  border-radius: 16px !important;
  background:
    radial-gradient(circle at 22% 0%, rgba(255, 74, 91, 0.105), transparent 38%),
    radial-gradient(circle at 85% 18%, rgba(135, 160, 190, 0.075), transparent 42%),
    linear-gradient(135deg, rgba(18, 24, 36, 0.80), rgba(5, 8, 14, 0.68)) !important;
  border: 0 !important;
  box-shadow:
    0 16px 40px rgba(0, 0, 0, 0.34),
    inset 0 0 0 1px rgba(150, 170, 200, 0.20),
    inset 0 1px 0 rgba(255, 255, 255, 0.045) !important;
  filter: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

.scanner-hero .hero-card--join.telegram-channel-link:hover,
.scanner-hero .hero-card--join.telegram-channel-link.is-hovered,
.scanner-hero .hero-card--join.telegram-channel-link:focus-visible {
  box-shadow:
    0 16px 40px rgba(0, 0, 0, 0.34),
    inset 0 0 0 1px rgba(105, 230, 255, 0.42),
    inset 0 1px 0 rgba(255, 255, 255, 0.045) !important;
}

.scanner-hero .hero-card--join.telegram-channel-link::before,
.scanner-hero .hero-card--join.telegram-channel-link:hover::before,
.scanner-hero .hero-card--join.telegram-channel-link.is-hovered::before,
.scanner-hero .hero-card--join.telegram-channel-link:focus-visible::before {
  content: none !important;
  display: none !important;
}

.scanner-hero .hero-card--join.telegram-channel-link::after,
.scanner-hero .hero-card--join.telegram-channel-link:hover::after,
.scanner-hero .hero-card--join.telegram-channel-link.is-hovered::after,
.scanner-hero .hero-card--join.telegram-channel-link:focus-visible::after {
  content: none !important;
  display: none !important;
  opacity: 0 !important;
  background: none !important;
  box-shadow: none !important;
  filter: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

.scanner-hero .hero-card--join.telegram-channel-link .hero-card-tg-art,
.scanner-hero .hero-card--join.telegram-channel-link:hover .hero-card-tg-art,
.scanner-hero .hero-card--join.telegram-channel-link.is-hovered .hero-card-tg-art,
.scanner-hero .hero-card--join.telegram-channel-link:focus-visible .hero-card-tg-art {
  filter: none !important;
  backface-visibility: hidden;
  image-rendering: auto;
  image-rendering: -webkit-optimize-contrast;
  will-change: auto !important;
}


/* hero-symbol-text-selection-1: allow mouse text selection for OI/Funding ticker symbols only */
.hero-symbol-text {
  user-select: text !important;
  -webkit-user-select: text !important;
  cursor: text;
}

.scanner-hero .hero-symbol-text,
.open-interest-modal .hero-symbol-text,
.funding-heat-modal .hero-symbol-text,
.scanner-hero .open-interest-row__symbol,
.scanner-hero .funding-heat-row__symbol,
.open-interest-modal .open-interest-modal-row__symbol,
.funding-heat-modal .funding-heat-row__symbol {
  user-select: text !important;
  -webkit-user-select: text !important;
  cursor: text;
}

/* hero-ticker-real-selection-1: override hero-card user-select locks only on ticker text */
.hero-copyable-symbol,
.scanner-hero .hero-copyable-symbol,
.scanner-hero .open-interest-row .hero-copyable-symbol,
.scanner-hero .funding-heat-row .hero-copyable-symbol,
.scanner-hero .hero-card--open-interest .hero-copyable-symbol,
.scanner-hero .hero-card--funding .hero-copyable-symbol,
.open-interest-modal .hero-copyable-symbol,
.funding-heat-modal .hero-copyable-symbol {
  user-select: text !important;
  -webkit-user-select: text !important;
  cursor: text !important;
  pointer-events: auto !important;
  position: relative;
  z-index: 5;
}

.hero-copyable-symbol::selection {
  background: rgba(80, 210, 255, 0.35);
  color: #ffffff;
}

.hero-copy-symbol-group {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  min-width: 0;
}

.hero-copy-symbol-group--copy-left,
.hero-copy-symbol-group--copy-right {
  flex-direction: row;
}

.hero-copy-symbol-group .hero-copyable-symbol {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  user-select: text !important;
  -webkit-user-select: text !important;
  cursor: text;
}

.hero-symbol-copy-button {
  width: 16px;
  height: 16px;
  flex: 0 0 16px;
  position: relative;
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 5px;
  background: rgba(255, 255, 255, 0.055);
  color: rgba(255, 255, 255, 0.72);
  cursor: pointer;
  opacity: 0.58;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  pointer-events: auto !important;
  transition:
    opacity 140ms ease,
    border-color 140ms ease,
    background 140ms ease,
    box-shadow 140ms ease,
    color 140ms ease;
}

.hero-symbol-copy-button:hover,
.hero-symbol-copy-button:focus-visible {
  opacity: 1;
  color: #ffffff;
  border-color: rgba(255, 255, 255, 0.34);
  background: rgba(255, 255, 255, 0.11);
  box-shadow: 0 0 10px rgba(255, 255, 255, 0.08);
  outline: none;
}

.hero-symbol-copy-button::before,
.hero-symbol-copy-button::after {
  content: "";
  position: absolute;
  width: 7px;
  height: 8px;
  border: 1px solid currentColor;
  border-radius: 2px;
}

.hero-symbol-copy-button::before {
  transform: translate(-1px, 1px);
  opacity: 0.72;
}

.hero-symbol-copy-button::after {
  transform: translate(2px, -2px);
  background: rgba(10, 15, 22, 0.94);
}

.hero-symbol-copy-button.is-copied {
  opacity: 1;
  color: #ff4d5f;
  border-color: rgba(255, 77, 95, 0.72);
  background: rgba(255, 77, 95, 0.16);
  box-shadow:
    0 0 0 1px rgba(255, 77, 95, 0.12),
    0 0 14px rgba(255, 77, 95, 0.22);
}

.copy-symbol.copied,
.hero-symbol-copy-button.is-copied,
.symbol-copy-button.is-copied,
.copy-symbol-button.is-copied,
.copy-button.is-copied {
  color: #ff4d5f;
  border-color: rgba(255, 77, 95, 0.72);
  background: rgba(255, 77, 95, 0.16);
  box-shadow:
    0 0 0 1px rgba(255, 77, 95, 0.12),
    0 0 14px rgba(255, 77, 95, 0.22);
}

.scanner-hero .hero-symbol-copy-button.is-copied,
.open-interest-modal .hero-symbol-copy-button.is-copied,
.funding-heat-modal .hero-symbol-copy-button.is-copied,
.listings-modal .hero-symbol-copy-button.is-copied {
  opacity: 1 !important;
  color: #ff4d5f !important;
  border-color: rgba(255, 77, 95, 0.72) !important;
  background: rgba(255, 77, 95, 0.16) !important;
  box-shadow:
    0 0 0 1px rgba(255, 77, 95, 0.12),
    0 0 14px rgba(255, 77, 95, 0.22) !important;
}

/* copy-feedback-zindex-fix-1: keep Copied feedback above table/header/cards */
.copy-feedback-popover {
  position: fixed;
  z-index: 2147483000;
  pointer-events: none;
  opacity: 0;
  transform: translate(-50%, calc(-100% - 8px));
  padding: 3px 7px;
  border-radius: 6px;
  border: 1px solid rgba(255, 77, 95, 0.62);
  background: rgba(18, 3, 8, 0.94);
  color: #ff4d5f;
  font-size: 10px;
  font-weight: 800;
  line-height: 1;
  letter-spacing: 0.02em;
  white-space: nowrap;
  box-shadow:
    0 0 0 1px rgba(255, 77, 95, 0.10),
    0 0 16px rgba(255, 77, 95, 0.26),
    0 10px 24px rgba(0, 0, 0, 0.38);
  transition:
    opacity 120ms ease,
    transform 120ms ease;
}

.copy-feedback-popover.is-visible {
  opacity: 1;
  transform: translate(-50%, calc(-100% - 11px));
}

/* listings-copy-left-aligned-column-1: align listing copy buttons before ticker */
.scanner-hero .listing-mini-row {
  display: grid;
  grid-template-columns: 8px 39px 58px minmax(0, 1fr) 18px;
  align-items: center;
  column-gap: 6px;
}

.scanner-hero .listing-mini-row--live,
.scanner-hero .listing-mini-row--available {
  grid-template-columns: 8px 39px 58px minmax(0, 1fr) 18px;
}

.scanner-hero .listing-mini-dot,
.scanner-hero .listing-mini-live-dot {
  grid-column: 1;
}

.scanner-hero .listing-mini-time {
  grid-column: 2;
  margin-left: 0;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

.scanner-hero .listing-mini-exchange {
  grid-column: 3;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  min-width: 0;
  width: 58px;
  margin-left: 0;
  white-space: nowrap;
  overflow: hidden;
}

.scanner-hero .listing-mini-exchange-label {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.scanner-hero .listing-mini-copy-group {
  grid-column: 4;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  min-width: 0;
  margin-left: 0;
}

.scanner-hero .listing-mini-copy-button {
  flex: 0 0 16px;
}

.scanner-hero .listing-mini-symbol {
  min-width: 0;
  margin-left: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.scanner-hero .listing-mini-market-badge {
  grid-column: 5;
  justify-self: end;
}

/* segmented-button-grid-alignment-1: keep hero control rows as equal-width button segments */
.controls-panel .market-mode-group,
.controls-panel .category-controls,
.controls-panel .exchange-group {
  display: flex !important;
  align-items: stretch !important;
  width: 100% !important;
  min-width: 0 !important;
  max-width: 100% !important;
  height: 100% !important;
  min-height: 0 !important;
  overflow: hidden !important;
}

.controls-panel .market-mode,
.controls-panel .category-controls .tab,
.controls-panel .exchange-mode,
.controls-panel .exchange-all-placeholder {
  flex: 1 1 0 !important;
  width: auto !important;
  min-width: 0 !important;
  height: 100% !important;
  min-height: 0 !important;
  padding-inline: 10px !important;
  justify-content: center !important;
}

.controls-panel .market-mode:not(:last-child),
.controls-panel .category-controls .tab:not(:last-child),
.controls-panel .exchange-mode:not(:last-child),
.controls-panel .exchange-all-placeholder:not(:last-child) {
  border-right: 1px solid rgba(100, 114, 132, 0.82) !important;
}

/* segmented-button-straight-dividers-1: active fills stay rectangular so separators line up row-to-row */
.controls-panel .market-mode::before,
.controls-panel .market-mode::after,
.controls-panel .category-controls .tab::before,
.controls-panel .category-controls .tab::after,
.controls-panel .exchange-mode::before,
.controls-panel .exchange-mode::after,
.controls-panel .exchange-all-placeholder::before,
.controls-panel .exchange-all-placeholder::after {
  content: none !important;
  display: none !important;
}

.controls-panel .market-mode,
.controls-panel .category-controls .tab,
.controls-panel .exchange-mode,
.controls-panel .exchange-all-placeholder {
  clip-path: none !important;
  transform: none !important;
  overflow: hidden !important;
}

/* segmented-button-compact-grid-only-1: keep desktop controls equal, compact tablet/phone profiles align vertical seams */
body[data-responsive-layout-profile="tablet_1024x768"] .controls-panel .market-mode-group .market-mode,
body[data-responsive-layout-profile="tablet_820x1180"] .controls-panel .market-mode-group .market-mode,
body[data-responsive-layout-profile^="iphone_"] .controls-panel .market-mode-group .market-mode {
  flex: 0 0 var(--layout-market-grid-segment-w, 121px) !important;
}

body[data-responsive-layout-profile="tablet_1024x768"] .controls-panel .category-controls .tab:nth-child(-n + 2),
body[data-responsive-layout-profile="tablet_820x1180"] .controls-panel .category-controls .tab:nth-child(-n + 2),
body[data-responsive-layout-profile^="iphone_"] .controls-panel .category-controls .tab:nth-child(-n + 2) {
  flex: 0 0 var(--layout-category-grid-segment-w, 121px) !important;
}

body[data-responsive-layout-profile="tablet_1024x768"] .controls-panel .category-controls,
body[data-responsive-layout-profile="tablet_820x1180"] .controls-panel .category-controls,
body[data-responsive-layout-profile^="iphone_"] .controls-panel .category-controls {
  width: calc(var(--layout-category-grid-segment-w, 121px) * 3) !important;
  max-width: none !important;
}

body[data-responsive-layout-profile="tablet_1024x768"] .controls-panel .category-controls .tab,
body[data-responsive-layout-profile="tablet_820x1180"] .controls-panel .category-controls .tab,
body[data-responsive-layout-profile^="iphone_"] .controls-panel .category-controls .tab {
  flex: 0 0 var(--layout-category-grid-segment-w, 121px) !important;
}

body[data-responsive-layout-profile="tablet_1024x768"] .controls-panel .exchange-group .exchange-mode:nth-child(-n + 2),
body[data-responsive-layout-profile="tablet_820x1180"] .controls-panel .exchange-group .exchange-mode:nth-child(-n + 2),
body[data-responsive-layout-profile^="iphone_"] .controls-panel .exchange-group .exchange-mode:nth-child(-n + 2) {
  flex: 0 0 var(--layout-exchange-grid-segment-w, 132px) !important;
}

body[data-responsive-layout-profile="tablet_1024x768"] .controls-panel .exchange-group .exchange-mode:nth-child(n + 3),
body[data-responsive-layout-profile="tablet_820x1180"] .controls-panel .exchange-group .exchange-mode:nth-child(n + 3),
body[data-responsive-layout-profile^="iphone_"] .controls-panel .exchange-group .exchange-mode:nth-child(n + 3) {
  flex: 1 1 0 !important;
}


.controls-panel .market-mode:not(:last-child),
.controls-panel .category-controls .tab:not(:last-child),
.controls-panel .exchange-mode:not(:last-child),
.controls-panel .exchange-all-placeholder:not(:last-child) {
  border-right: 1px solid rgba(100, 114, 132, 0.82) !important;
  box-shadow: inset -1px 0 0 rgba(100, 114, 132, 0.78) !important;
}

.controls-panel .market-mode.active,
.controls-panel .category-controls .tab.active,
.controls-panel .exchange-mode.active,
.controls-panel .exchange-all-placeholder.is-active {
  background:
    linear-gradient(180deg, rgba(83, 18, 31, 0.72), rgba(35, 8, 16, 0.7)) !important;
  border-radius: 0 !important;
}

.controls-panel .market-mode:first-child,
.controls-panel .category-controls .tab:first-child,
.controls-panel .exchange-all-placeholder:first-child {
  border-radius: 6px 0 0 6px !important;
}

.controls-panel .market-mode:last-child,
.controls-panel .category-controls .tab:last-child,
.controls-panel .exchange-mode:last-child {
  border-radius: 0 6px 6px 0 !important;
}

/* mobile-button-grid-fix-1: one six-slot grid for saved iPhone profiles. */
body[data-responsive-layout-profile^="iphone_"].saved-responsive-layout-mode
  .controls-panel
  .market-mode-group {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  width: 100% !important;
}

body[data-responsive-layout-profile^="iphone_"].saved-responsive-layout-mode
  .controls-panel
  .category-controls {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  width: 100% !important;
}

body[data-responsive-layout-profile^="iphone_"].saved-responsive-layout-mode
  .controls-panel
  .exchange-group {
  display: grid !important;
  grid-template-columns: repeat(6, minmax(0, 1fr)) !important;
  width: 100% !important;
}

body[data-responsive-layout-profile^="iphone_"].saved-responsive-layout-mode
  .controls-panel
  :is(.market-mode-group, .category-controls, .exchange-group)
  > * {
  flex: none !important;
  width: auto !important;
  min-width: 0 !important;
}

/* mobile-filter-runtime-recovery-1: keep the saved iPhone category row visible and interactive. */
body.saved-responsive-layout-mode:is(
  [data-responsive-layout-profile="iphone_14_pro_max_430x932"],
  [data-responsive-layout-profile="iphone_12_pro_max_428x926"],
  [data-responsive-layout-profile="iphone_12_390x844"]
)
  .controls-panel
  [data-layout-id="categoryTabs"].category-controls {
  display: grid !important;
  visibility: visible !important;
  opacity: 1 !important;
  pointer-events: auto !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  width: 100% !important;
}

body.saved-responsive-layout-mode:is(
  [data-responsive-layout-profile="iphone_14_pro_max_430x932"],
  [data-responsive-layout-profile="iphone_12_pro_max_428x926"],
  [data-responsive-layout-profile="iphone_12_390x844"]
)
  .controls-panel
  [data-layout-id="categoryTabs"].category-controls
  > .tab {
  visibility: visible !important;
  opacity: 1 !important;
  pointer-events: auto !important;
}

/* iphone-table-inner-scale-1: enlarge only main table content inside saved iPhone scanner panels. */
html[data-responsive-layout-profile^="iphone_"],
body[data-responsive-layout-profile^="iphone_"] {
  overflow-x: hidden !important;
}

body[data-responsive-layout-profile^="iphone_"] .scanner-panel {
  overflow: hidden !important;
}

body[data-responsive-layout-profile^="iphone_"] .scanner-panel .table-wrap {
  width: 100% !important;
  max-width: 100% !important;
  height: 100% !important;
  min-height: 0 !important;
  overflow-x: auto !important;
  overflow-y: auto !important;
  -webkit-overflow-scrolling: touch !important;
  overscroll-behavior: contain !important;
  touch-action: pan-x pan-y !important;
}

body[data-responsive-layout-profile^="iphone_"] .scanner-panel .scanner-table {
  width: max-content !important;
  min-width: 1120px !important;
  table-layout: fixed !important;
  font-size: 16px !important;
}

body[data-responsive-layout-profile^="iphone_"] .scanner-panel .scanner-table th,
body[data-responsive-layout-profile^="iphone_"] .scanner-panel .scanner-table td {
  padding: 13px 16px !important;
  font-size: 16px !important;
  line-height: 1.18 !important;
}

body[data-responsive-layout-profile^="iphone_"] .scanner-panel .scanner-table thead th,
body[data-responsive-layout-profile^="iphone_"] .scanner-panel .scanner-table thead th button {
  font-size: 13px !important;
  line-height: 1.12 !important;
  font-weight: 850 !important;
}

body[data-responsive-layout-profile^="iphone_"] .scanner-panel .scanner-table .symbol-cell {
  min-width: 300px !important;
  width: 300px !important;
  padding-left: 18px !important;
  padding-right: 18px !important;
}

body[data-responsive-layout-profile^="iphone_"] .scanner-panel .scanner-table .symbol,
body[data-responsive-layout-profile^="iphone_"] .scanner-panel .scanner-table .symbol-name {
  font-size: 18px !important;
  line-height: 1.05 !important;
  font-weight: 900 !important;
}

body[data-responsive-layout-profile^="iphone_"] .scanner-panel .scanner-table .copy-symbol {
  width: 22px !important;
  height: 22px !important;
  flex: 0 0 22px !important;
}

body[data-responsive-layout-profile^="iphone_"] .scanner-panel .scanner-table th:nth-child(1),
body[data-responsive-layout-profile^="iphone_"] .scanner-panel .scanner-table td:nth-child(1) {
  width: 300px !important;
}

body[data-responsive-layout-profile^="iphone_"] .scanner-panel .scanner-table th:nth-child(2),
body[data-responsive-layout-profile^="iphone_"] .scanner-panel .scanner-table td:nth-child(2),
body[data-responsive-layout-profile^="iphone_"] .scanner-panel .scanner-table th:nth-child(3),
body[data-responsive-layout-profile^="iphone_"] .scanner-panel .scanner-table td:nth-child(3),
body[data-responsive-layout-profile^="iphone_"] .scanner-panel .scanner-table th:nth-child(5),
body[data-responsive-layout-profile^="iphone_"] .scanner-panel .scanner-table td:nth-child(5) {
  width: 135px !important;
}

body[data-responsive-layout-profile^="iphone_"] .scanner-panel .scanner-table th:nth-child(4),
body[data-responsive-layout-profile^="iphone_"] .scanner-panel .scanner-table td:nth-child(4) {
  width: 112px !important;
}

body[data-responsive-layout-profile^="iphone_"] .scanner-panel .scanner-table th:nth-child(6),
body[data-responsive-layout-profile^="iphone_"] .scanner-panel .scanner-table td:nth-child(6) {
  width: 150px !important;
}
/* iphone-filter-button-labels-20-1: enlarge only category and exchange labels on saved iPhone profiles. */
body[data-responsive-layout-profile^="iphone_"] [data-layout-id="categoryTabs"].category-controls .tab {
  font-size: 12.6px !important;
  line-height: 1.06 !important;
  font-weight: 850 !important;
  letter-spacing: 0 !important;
}

body[data-responsive-layout-profile^="iphone_"] [data-layout-id="exchangeTabs"].exchange-tabs .exchange-mode {
  font-size: 12.6px !important;
  line-height: 1.06 !important;
  font-weight: 850 !important;
  letter-spacing: 0 !important;
  gap: 4px !important;
}

body[data-responsive-layout-profile^="iphone_"] [data-layout-id="exchangeTabs"].exchange-tabs .exchange-label {
  font-size: inherit !important;
  line-height: inherit !important;
  font-weight: inherit !important;
}
/* table-column-tint-cleanup-1: keep main table cells transparent with simple neutral separators. */
.scanner-panel .scanner-table tbody td {
  background: transparent !important;
  background-image: none !important;
  box-shadow: none !important;
  border-bottom: 1px solid rgba(148, 163, 184, 0.10) !important;
}

.scanner-panel .scanner-table tbody tr.scanner-row--top-1 td,
.scanner-panel .scanner-table tbody tr.scanner-row--top-2 td,
.scanner-panel .scanner-table tbody tr.scanner-row--top-3 td {
  border-bottom-color: rgba(148, 163, 184, 0.12) !important;
}

.scanner-panel .scanner-table tbody tr:hover td,
.scanner-panel .scanner-table tbody tr.highlight td,
.scanner-panel .scanner-table tbody tr.scanner-row--top-1:hover td,
.scanner-panel .scanner-table tbody tr.scanner-row--top-2:hover td,
.scanner-panel .scanner-table tbody tr.scanner-row--top-3:hover td {
  border-bottom-color: rgba(148, 163, 184, 0.14) !important;
}

/* table-first-column-accent-border-1: keep red accent vertical by using border-left instead of first-cell shadow. */
.scanner-panel .scanner-table tbody tr:hover,
.scanner-panel .scanner-table tbody tr.highlight,
.scanner-panel .scanner-table tbody tr.scanner-row--top-1,
.scanner-panel .scanner-table tbody tr.scanner-row--top-2,
.scanner-panel .scanner-table tbody tr.scanner-row--top-3 {
  box-shadow: none !important;
}

.scanner-panel .scanner-table tbody tr:hover td:first-child,
.scanner-panel .scanner-table tbody tr.highlight td:first-child {
  box-shadow: none !important;
  border-left: 3px solid rgba(255, 77, 95, 0.58) !important;
}

.scanner-panel .scanner-table tbody tr.scanner-row--top-1 td:first-child {
  box-shadow: none !important;
  border-left: 3px solid rgba(255, 62, 91, 0.82) !important;
}

.scanner-panel .scanner-table tbody tr.scanner-row--top-2 td:first-child {
  box-shadow: none !important;
  border-left: 3px solid rgba(255, 62, 91, 0.52) !important;
}

.scanner-panel .scanner-table tbody tr.scanner-row--top-3 td:first-child {
  box-shadow: none !important;
  border-left: 3px solid rgba(255, 62, 91, 0.34) !important;
}