:root {
  --bg: #030a14;
  --bg2: #071426;
  --panel: #091a31;
  --panel2: #0c2240;
  --line: rgba(88, 160, 255, .16);
  --line2: rgba(88, 196, 255, .26);
  --text: #e8f2ff;
  --muted: #8ba6c8;
  --blue: #41c7ff;
  --blue2: #2b67ff;
  --up: #ff5b6b;
  --down: #1dd07b;
  --warn: #ffb347;
  --radius: 18px;
  --cardShadow: 0 16px 36px rgba(0,0,0,.34), inset 0 1px 0 rgba(255,255,255,.045);

  --sidebar-open-width: 280px;
  --sidebar-closed-width: 92px;
}

* {
  box-sizing: border-box;
}

html,
body {
  height: 100%;
}

body {
  margin: 0;
  color: var(--text);
  font-family: "PingFang SC", "Microsoft YaHei", Arial, sans-serif;
  background:
    radial-gradient(circle at 0% 0%, rgba(58, 130, 255, .16), transparent 30%),
    radial-gradient(circle at 100% 0%, rgba(65, 199, 255, .10), transparent 28%),
    linear-gradient(180deg, #050d19 0%, #02060d 100%);
  min-height: 100vh;
}

.side-tools,
.sidebar-toggle {
  display: none !important;
}

/* =========================================================
   侧栏
   ========================================================= */

.sidebar {
  position: fixed;
  left: 0;
  top: 0;
  bottom: 0;
  z-index: 40;
  width: var(--sidebar-open-width);
  padding: 14px;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  background: linear-gradient(180deg, rgba(7, 18, 34, .995), rgba(3, 9, 18, .995));
  border-right: 1px solid rgba(88, 196, 255, .18);
  box-shadow: 0 0 40px rgba(0, 0, 0, .34);
  overflow: hidden;
  transition: width .22s ease, padding .22s ease;
}

body.sidebar-expanded .sidebar {
  width: var(--sidebar-open-width);
  padding: 14px;
}

body.sidebar-collapsed .sidebar {
  width: var(--sidebar-closed-width);
  padding: 14px 12px;
}

.side-brand {
  position: relative;
  width: 100%;
  min-height: 76px;
  margin: 0 0 18px;
  padding: 12px;
  box-sizing: border-box;
  display: grid;
  grid-template-columns: 46px minmax(0, 1fr) 36px;
  align-items: center;
  gap: 10px;
  border-radius: 20px;
  background: rgba(255, 255, 255, .035);
  border: 1px solid rgba(135, 190, 255, .12);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.035);
  flex: 0 0 auto;
}

body.sidebar-collapsed .side-brand {
  display: none;
}

.side-logo {
  grid-column: 1;
  width: 46px;
  height: 46px;
  border-radius: 15px;
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
  flex: none;
  font-size: 20px;
  font-weight: 900;
  color: #071524;
  background: linear-gradient(135deg, var(--blue), var(--blue2));
}

.side-brand > div:not(.side-logo):not(.side-topbar) {
  grid-column: 2;
  min-width: 0;
  overflow: hidden;
}

.side-brand h1 {
  margin: 0;
  font-size: 17px;
  line-height: 1.15;
  color: var(--text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.side-brand p {
  margin: 6px 0 0;
  font-size: 13px;
  line-height: 1.15;
  color: var(--muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

body.sidebar-expanded .side-brand .side-topbar {
  grid-column: 3;
  width: 36px;
  height: 36px;
  margin: 0;
  padding: 0;
  display: grid;
  place-items: center;
  justify-self: end;
  align-self: center;
}

body.sidebar-collapsed .side-topbar {
  width: 100%;
  height: 40px;
  margin: 0 0 16px;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
}

.sidebar-toggle-clean {
  width: 36px;
  height: 36px;
  border-radius: 12px;
  border: 1px solid rgba(135, 190, 255, .18);
  background: rgba(9, 25, 45, .96);
  color: var(--text);
  display: grid;
  place-items: center;
  cursor: pointer;
  box-shadow:
    0 8px 20px rgba(0, 0, 0, .22),
    inset 0 1px 0 rgba(255, 255, 255, .04);
  transition: background .16s ease, border-color .16s ease, transform .16s ease;
}

.sidebar-toggle-clean:hover {
  background: rgba(65, 199, 255, .12);
  border-color: rgba(65, 199, 255, .34);
  transform: translateY(-1px);
}

.toggle-lines {
  width: 16px;
  display: grid;
  gap: 3px;
}

.toggle-lines i {
  display: block;
  height: 2px;
  border-radius: 999px;
  background: rgba(232, 242, 255, .92);
}

.side-nav {
  width: 100%;
  display: grid;
  gap: 8px;
  margin: 0;
  flex: 0 0 auto;
}

.side-nav button {
  all: unset;
  width: 100%;
  height: 44px;
  box-sizing: border-box;
  padding: 0 14px;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  border-radius: 15px;
  border: 1px solid transparent;
  background: transparent;
  color: var(--muted);
  cursor: pointer;
  font-size: 15px;
  line-height: 1;
  transition:
    background .18s ease,
    border-color .18s ease,
    color .18s ease,
    transform .18s ease;
}

.side-nav button:hover {
  background: rgba(255, 255, 255, .04);
  border-color: rgba(65, 199, 255, .10);
  color: var(--text);
}

.side-nav button.active {
  background: linear-gradient(90deg, rgba(43, 103, 255, .24), rgba(65, 199, 255, .10));
  border-color: rgba(65, 199, 255, .20);
  color: var(--text);
}

.nav-mini {
  display: none;
}

.nav-full {
  display: inline;
  white-space: nowrap;
}

body.sidebar-collapsed .side-nav {
  gap: 10px;
  justify-items: center;
}

body.sidebar-collapsed .side-nav button {
  width: 64px;
  height: 46px;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 16px;
  border: 1px solid rgba(135, 190, 255, .09);
  background: rgba(255, 255, 255, .025);
  color: var(--muted);
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 0;
  text-align: center;
  white-space: nowrap;
}

body.sidebar-collapsed .side-nav button:hover {
  background: rgba(65, 199, 255, .09);
  border-color: rgba(65, 199, 255, .20);
  color: var(--text);
  transform: translateY(-1px);
}

body.sidebar-collapsed .side-nav button.active {
  background: linear-gradient(180deg, rgba(43, 103, 255, .30), rgba(65, 199, 255, .13));
  border-color: rgba(65, 199, 255, .26);
  color: var(--text);
}

body.sidebar-collapsed .nav-mini {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: auto;
  height: auto;
  min-width: 0;
  padding: 0;
  margin: 0;
  border: 0;
  background: transparent;
  color: inherit;
  font-size: 13px;
  font-weight: 800;
  line-height: 1;
  text-align: center;
  white-space: nowrap;
}

body.sidebar-collapsed .nav-full {
  display: none;
}

.side-note {
  margin-top: auto;
  padding: 12px 13px;
  border-radius: 14px;
  font-size: 12px;
  line-height: 1.7;
  color: var(--muted);
  border: 1px solid rgba(255, 255, 255, .05);
  background: rgba(255, 255, 255, .03);
}

body.sidebar-collapsed .side-note {
  display: none;
}

/* =========================================================
   主区域 / 顶部栏
   ========================================================= */

.main {
  margin-left: var(--sidebar-open-width);
  min-height: 100vh;
  transition: margin-left .22s ease;
}

body.sidebar-expanded .main {
  margin-left: var(--sidebar-open-width);
}

body.sidebar-collapsed .main {
  margin-left: var(--sidebar-closed-width);
}

.topbar {
  position: fixed;
  left: var(--sidebar-open-width);
  right: 0;
  top: 0;
  z-index: 35;
  min-height: 84px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  padding: 14px 20px;
  border-bottom: 1px solid var(--line2);
  background: linear-gradient(180deg, rgba(7, 19, 37, .995), rgba(4, 10, 20, .995));
  box-shadow: 0 10px 28px rgba(0, 0, 0, .24);
  transition: left .22s ease;
}

body.sidebar-expanded .topbar {
  left: var(--sidebar-open-width);
}

body.sidebar-collapsed .topbar {
  left: var(--sidebar-closed-width);
}

.top-title {
  display: flex;
  align-items: center;
  gap: 14px;
  min-width: 260px;
}

.top-badge {
  width: 42px;
  height: 42px;
  border-radius: 14px;
  display: grid;
  place-items: center;
  font-weight: 800;
  color: #b4f0ff;
  background: linear-gradient(135deg, rgba(65, 199, 255, .22), rgba(43, 103, 255, .2));
  border: 1px solid rgba(65, 199, 255, .25);
}

.top-title h2 {
  margin: 0;
  font-size: 24px;
}

.top-title p {
  margin: 6px 0 0;
  color: var(--muted);
  font-size: 13px;
}

.top-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: flex-end;
  align-items: center;
}

.pill {
  height: 36px;
  padding: 0 14px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  border: 1px solid rgba(135, 190, 255, .14);
  background: rgba(255, 255, 255, .065);
  color: var(--muted);
  font-size: 13px;
}

.data-status-pill {
  gap: 10px;
}

.unprocessed-count {
  height: 24px;
  padding: 0 9px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  white-space: nowrap;
  color: #d9efff;
  background: linear-gradient(180deg, rgba(65, 199, 255, .16), rgba(43, 103, 255, .08));
  border: 1px solid rgba(65, 199, 255, .20);
  font-weight: 800;
  letter-spacing: .01em;
}

.unprocessed-count.is-error {
  color: #ffd6dc;
  background: rgba(255, 91, 107, .12);
  border-color: rgba(255, 91, 107, .28);
}

.unprocessed-count.is-loading {
  opacity: 1;
}

.dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--down);
  box-shadow: 0 0 12px rgba(29, 208, 123, .7);
  animation: pulse 1.4s infinite;
}

.dot.paused {
  background: var(--warn);
  box-shadow: 0 0 12px rgba(255, 179, 71, .65);
  animation: none;
}

.dot.error {
  background: var(--up);
  box-shadow: 0 0 12px rgba(255, 91, 107, .70);
  animation: none;
}

@keyframes pulse {
  0%, 100% {
    opacity: .45;
    transform: scale(.95);
  }

  50% {
    opacity: 1;
    transform: scale(1.05);
  }
}

select,
.btn {
  height: 34px;
  padding: 0 12px;
  border-radius: 10px;
  border: 1px solid rgba(135, 190, 255, .14);
  background: rgba(255, 255, 255, .065);
  color: var(--text);
}

select option {
  color: #111;
}

.btn {
  cursor: pointer;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.btn:hover {
  border-color: rgba(65,199,255,.38);
}

.pause-btn.paused {
  color: var(--warn);
  border-color: rgba(255, 179, 71, .28);
  background: rgba(255, 179, 71, .10);
}

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

.content {
  padding: 102px 18px 18px;
  min-height: 100vh;
  box-sizing: border-box;
  background:
    linear-gradient(180deg, rgba(255,255,255,.018), rgba(255,255,255,0)),
    radial-gradient(circle at 50% 0%, rgba(65, 199, 255, .035), transparent 42%);
}

/* =========================================================
   通用卡片 / 表格
   ========================================================= */

.grid {
  display: grid;
  gap: 18px;
}

.card {
  align-self: start;
  background: linear-gradient(180deg, rgba(12, 27, 50, .985), rgba(5, 14, 27, .985));
  border: 1px solid rgba(102, 178, 255, .20);
  border-radius: var(--radius);
  box-shadow: var(--cardShadow);
  overflow: hidden;
}

.card-head {
  padding: 14px 16px 12px;
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 14px;
  flex-wrap: wrap;
  border-bottom: 1px solid rgba(102, 178, 255, .105);
  background: linear-gradient(180deg, rgba(255,255,255,.026), rgba(255,255,255,0));
}

.card-title h2,
.card-title h3,
.card-head h2,
.card-head h3 {
  margin: 0;
}

.card-title h2,
.card-head h2 {
  font-size: 20px;
}

.card-title h3,
.card-head h3 {
  font-size: 17px;
}

.card-title p,
.card-head p {
  margin: 6px 0 0;
  color: var(--muted);
  font-size: 12px;
}

.controls {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  align-items: center;
}

.label {
  color: var(--muted);
  font-size: 12px;
}

.panel-body,
.market-body,
.basis-body,
.io-body,
.decision-body,
.ai-body,
.bt-body,
.mine-body {
  padding: 14px 16px 16px;
}

.tag,
.badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 24px;
  padding: 0 8px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.08);
  font-size: 11px;
  font-weight: 700;
  background: rgba(255,255,255,.05);
}

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

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

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

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

.wide-table,
.table-wrap {
  overflow: auto;
  border-radius: 12px;
}

table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
  background: rgba(255,255,255,.018);
  border: 1px solid rgba(102,178,255,.10);
  border-radius: 12px;
  overflow: hidden;
}

th,
td {
  padding: 10px 10px;
  border-bottom: 1px solid rgba(255,255,255,.06);
  text-align: left;
  white-space: nowrap;
}

th {
  font-size: 12px;
  color: var(--muted);
  font-weight: 600;
  background: rgba(255,255,255,.035);
}

tr:hover td {
  background: rgba(65,199,255,.035);
}

/* =========================================================
   小板块周期控件
   ========================================================= */

.mini-period-control {
  height: 30px;
  padding: 0 9px 0 10px;
  border-radius: 999px;
  border: 1px solid rgba(92, 188, 255, .18);
  background:
    radial-gradient(circle at 20% 0%, rgba(65,199,255,.16), transparent 46%),
    linear-gradient(180deg, rgba(12, 32, 58, .92), rgba(5, 16, 30, .94));
  display: inline-flex;
  align-items: center;
  gap: 7px;
  color: var(--muted);
  font-size: 11px;
  font-weight: 800;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.045);
}

.mini-period-control span {
  color: rgba(190, 210, 237, .86);
  white-space: nowrap;
}

.mini-period-control select {
  height: 24px;
  min-width: 74px;
  padding: 0 22px 0 8px;
  border-radius: 999px;
  border: 1px solid rgba(135,190,255,.12);
  background: rgba(255,255,255,.055);
  color: var(--text);
  font-size: 11px;
  font-weight: 900;
  outline: none;
  cursor: pointer;
}

.mini-period-control:hover {
  border-color: rgba(65,199,255,.34);
  box-shadow:
    0 0 18px rgba(65,199,255,.08),
    inset 0 1px 0 rgba(255,255,255,.05);
}

.product-card-head {
  min-width: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 8px;
  align-items: start;
}

.product-title-stack {
  min-width: 0;
}

.product-period-pill {
  position: relative;
  height: 27px;
  min-width: 64px;
  padding: 0 23px 0 9px;
  border-radius: 999px;
  border: 1px solid rgba(92,188,255,.22);
  background:
    radial-gradient(circle at 30% 0%, rgba(65,199,255,.18), transparent 48%),
    linear-gradient(180deg, rgba(14, 39, 70, .92), rgba(6, 19, 36, .96));
  color: #d8ecff;
  font-size: 11px;
  line-height: 25px;
  font-weight: 950;
  white-space: nowrap;
  overflow: hidden;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-shadow:
    0 8px 18px rgba(0,0,0,.18),
    inset 0 1px 0 rgba(255,255,255,.055);
}

.product-period-pill::after {
  content: "▾";
  position: absolute;
  right: 8px;
  top: 50%;
  transform: translateY(-52%);
  color: rgba(216,236,255,.78);
  font-size: 10px;
  pointer-events: none;
}

.product-period-pill span {
  display: block;
  max-width: 54px;
  overflow: hidden;
  text-overflow: ellipsis;
}

.product-period-select {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  cursor: pointer;
  z-index: 3;
}

.product-period-pill span {
  pointer-events: none;
}

.product-period-pill:hover {
  border-color: rgba(65,199,255,.44);
  background:
    radial-gradient(circle at 30% 0%, rgba(65,199,255,.24), transparent 48%),
    linear-gradient(180deg, rgba(16, 46, 84, .96), rgba(7, 22, 42, .98));
}

/* =========================================================
   行情卡片
   ========================================================= */

.market-grid {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 12px;
  align-items: stretch;
}

.product-card {
  position: relative;
  min-width: 0;
  min-height: 170px;
  padding: 0;
  overflow: hidden;
  border-radius: 16px;
  border: 1px solid rgba(112, 166, 232, .18);
  background:
    radial-gradient(circle at 12% 18%, rgba(46, 124, 255, .10), transparent 34%),
    linear-gradient(180deg, rgba(13, 32, 56, .97), rgba(7, 18, 34, .99));
  box-shadow: inset 0 1px 0 rgba(255,255,255,.055), 0 12px 26px rgba(0,0,0,.24);
}

.product-card::before {
  content: '';
  position: absolute;
  inset: 0 0 auto 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(83, 182, 255, .36), transparent);
}

.product-card-empty {
  opacity: .82;
}

.product-tape {
  display: grid;
  grid-template-columns: 45% 1px 1fr;
  gap: 0;
  min-height: 170px;
  align-items: stretch;
  min-width: 0;
}

.product-left,
.product-right {
  min-width: 0;
}

.product-left {
  padding: 14px 14px 11px;
  display: flex;
  flex-direction: column;
}

.product-right {
  padding: 14px 14px 11px 12px;
  display: grid;
  grid-template-rows: auto 1fr;
  gap: 8px;
}

.product-divider {
  background: linear-gradient(180deg, transparent, rgba(126,174,235,.17), transparent);
}

.product-name {
  font-size: 15px;
  font-weight: 900;
  letter-spacing: .15px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.product-code {
  font-size: 11px;
  color: #8aa7c9;
  margin-top: 4px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.last-price {
  font-size: clamp(20px, 1.45vw, 28px);
  line-height: 1.05;
  font-weight: 900;
  margin: 14px 0 5px;
  letter-spacing: .25px;
}

.delta {
  font-size: 12px;
  text-align: left;
  font-weight: 800;
}

.spark {
  height: 38px;
  margin: auto 0 0;
  width: 100%;
  display: block;
}

.order-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  color: #bcd2ee;
  font-size: 12px;
  font-weight: 800;
}

.order-top span:first-child,
.order-label {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.order-net {
  font-size: 16px;
  font-weight: 900;
  white-space: nowrap;
}

.order-stats {
  display: grid;
  gap: 8px;
}

.order-row {
  display: grid;
  grid-template-columns: 76px minmax(52px, 1fr) 48px;
  gap: 7px;
  align-items: center;
  font-size: 12px;
}

.order-label {
  color: #b7c9e4;
  font-weight: 800;
}

.order-value {
  text-align: right;
  font-size: 14px;
  font-weight: 900;
  white-space: nowrap;
}

.micro-bar {
  height: 9px;
  border-radius: 999px;
  position: relative;
  background: rgba(255,255,255,.045);
  overflow: hidden;
  border: 1px solid rgba(255,255,255,.05);
}

.micro-bar::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: var(--w);
  border-radius: 999px;
  background: linear-gradient(90deg, rgba(29,208,123,.32), rgba(29,208,123,.92));
}

.micro-bar.sell::before {
  background: linear-gradient(90deg, rgba(255,91,107,.28), rgba(255,91,107,.92));
}

/* =========================================================
   第二行：基差 / 内外盘图 / 内外盘表格
   ========================================================= */

.second-row-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;
  align-items: stretch;
}

.second-row-grid > .card {
  height: 320px;
  min-height: 320px;
  display: flex;
  flex-direction: column;
  min-width: 0;
  align-self: stretch;
}

.second-row-grid > .card > .card-head {
  flex: 0 0 auto;
  min-height: 68px;
  padding: 12px 14px 10px;
  overflow: hidden;
}

.second-row-grid .basis-body,
.second-row-grid .io-body {
  flex: 1 1 auto;
  min-height: 0;
  padding: 12px 14px 14px;
  display: flex;
  flex-direction: column;
}

.second-row-grid .wide-table {
  flex: 1 1 auto;
  min-height: 0;
  overflow: hidden;
  border-radius: 12px;
}

.second-row-grid .wide-table table {
  height: 100%;
}

.second-row-grid .wide-table thead {
  height: 1px;
}

.second-row-grid .wide-table tbody {
  height: 100%;
}

.second-row-grid th,
.second-row-grid td {
  vertical-align: middle;
}

.second-row-grid .basis-body .wide-table tbody tr {
  height: 50%;
}

.second-row-grid .io-body .wide-table tbody tr {
  height: 25%;
}

.second-row-grid .wide-table th,
.second-row-grid .wide-table td {
  padding-top: 8px;
  padding-bottom: 8px;
}

.io-inline-row {
  display: grid;
  grid-template-columns: 112px minmax(0, 1fr) 52px;
  align-items: center;
  gap: 12px;
  min-height: 46px;
  padding: 6px 8px;
  border-radius: 13px;
  border: 1px solid rgba(92,188,255,.13);
  background:
    radial-gradient(circle at 18% 50%, rgba(65,199,255,.055), transparent 42%),
    linear-gradient(180deg, rgba(12,30,54,.50), rgba(6,17,32,.70));
  box-shadow: inset 0 1px 0 rgba(255,255,255,.035);
}

.io-inline-title {
  min-width: 0;
}

.io-inline-title b {
  display: block;
  font-size: 13px;
  font-weight: 900;
  color: #e8f2ff;
  line-height: 1.15;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.io-inline-title span {
  display: block;
  margin-top: 4px;
  font-size: 10px;
  color: #8ba6c8;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.io-inline-main {
  min-width: 0;
  display: grid;
  gap: 6px;
}

.io-inline-bar {
  position: relative;
  height: 22px;
  border-radius: 999px;
  overflow: hidden;
  display: flex;
  background: linear-gradient(180deg, rgba(255,255,255,.075), rgba(255,255,255,.035));
  border: 1px solid rgba(255,255,255,.075);
  box-shadow:
    inset 0 1px 2px rgba(255,255,255,.05),
    inset 0 -1px 2px rgba(0,0,0,.35);
}

.io-inline-outer,
.io-inline-inner {
  position: relative;
  height: 100%;
}

.io-inline-outer {
  background:
    repeating-linear-gradient(
      115deg,
      rgba(255,255,255,0) 0,
      rgba(255,255,255,0) 8px,
      rgba(255,255,255,.12) 9px,
      rgba(255,255,255,.12) 11px
    ),
    linear-gradient(90deg, rgba(29,208,123,.58), rgba(29,208,123,.98));
}

.io-inline-inner {
  background:
    repeating-linear-gradient(
      115deg,
      rgba(255,255,255,0) 0,
      rgba(255,255,255,0) 8px,
      rgba(255,255,255,.10) 9px,
      rgba(255,255,255,.10) 11px
    ),
    linear-gradient(90deg, rgba(255,91,107,.98), rgba(255,91,107,.58));
}

.io-inline-bar i {
  position: absolute;
  top: -4px;
  bottom: -4px;
  width: 1px;
  background: rgba(232,242,255,.45);
  box-shadow: 0 0 10px rgba(65,199,255,.36);
  transform: translateX(-.5px);
}

.io-inline-foot {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  font-size: 11px;
  line-height: 1;
  font-weight: 800;
}

.io-inline-state {
  height: 24px;
  padding: 0 8px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  justify-self: end;
  font-size: 11px;
  font-weight: 900;
  border: 1px solid;
  white-space: nowrap;
}

/* =========================================================
   订单流监控占位区
   ========================================================= */

.analysis-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.58fr) minmax(330px, .72fr) minmax(360px, .82fr);
  gap: 14px;
  align-items: stretch;
}

.analysis-grid-bottom {
  display: grid;
  grid-template-columns: minmax(280px, .78fr) minmax(330px, .9fr) minmax(360px, 1fr) minmax(340px, .9fr);
  gap: 14px;
  align-items: stretch;
  margin-top: 14px;
}

.analysis-card {
  border-radius: 16px;
  border: 1px solid rgba(92, 188, 255, .18);
  background: linear-gradient(180deg, rgba(11, 27, 49, .92), rgba(6, 16, 30, .96));
  box-shadow: inset 0 1px 0 rgba(255,255,255,.04), 0 12px 28px rgba(0,0,0,.22);
  overflow: hidden;
  min-height: 0;
}

.analysis-body {
  padding: 12px 14px 14px;
}

.main-flow-card {
  min-height: 500px;
}

.order-flow-svg,
.depth-svg,
.heat-svg {
  display: block;
  width: 100%;
}

.order-flow-svg {
  height: 405px;
  border-radius: 12px;
  background: rgba(2,10,20,.18);
}

.depth-svg {
  height: 230px;
}

.heat-svg {
  height: 405px;
  border-radius: 12px;
  background: rgba(2,10,20,.18);
}

.flow-meta {
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
  color: var(--muted);
  font-size: 12px;
  margin: 0 0 8px;
}

.flow-meta b {
  color: var(--text);
}

.trend-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}

.trend-tile,
.stat,
.quick-link,
.signal,
.ai-card,
.mine-card,
.alert-card,
.summary-pill {
  border-radius: 14px;
  border: 1px solid rgba(135, 190, 255, .11);
  background: linear-gradient(180deg, rgba(255,255,255,.052), rgba(255,255,255,.024));
  box-shadow: inset 0 1px 0 rgba(255,255,255,.035);
  padding: 12px;
}

.trend-tile .k,
.stat .k,
.summary-pill .k {
  color: var(--muted);
  font-size: 11px;
  margin-bottom: 6px;
}

.trend-tile .v,
.stat .v,
.summary-pill .v {
  font-size: 18px;
  font-weight: 900;
}

.stat .v {
  font-size: 22px;
}

.bottom-ticker {
  height: 34px;
  border-radius: 12px;
  border: 1px solid rgba(92,188,255,.12);
  background: rgba(5,15,28,.86);
  display: flex;
  align-items: center;
  gap: 18px;
  padding: 0 14px;
  overflow: hidden;
  color: var(--muted);
  font-size: 12px;
  margin-top: 14px;
}

.bottom-ticker b {
  color: var(--text);
}

/* =========================================================
   首页 / 决策 / AI / 回测 / 我的
   ========================================================= */

.hero-grid,
.split,
.section-grid,
.triple,
.mine-grid,
.quick-grid {
  display: grid;
  gap: 18px;
}

.hero-grid {
  grid-template-columns: 1.2fr 1fr;
}

.split {
  grid-template-columns: 1.35fr 1fr;
}

.section-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.triple,
.mine-grid,
.quick-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.stats {
  display: grid;
  grid-template-columns: repeat(3, minmax(0,1fr));
  gap: 12px;
}

.quick-link {
  cursor: pointer;
  transition: .2s ease;
}

.quick-link:hover {
  transform: translateY(-1px);
  border-color: rgba(65,199,255,.18);
}

.quick-link h4,
.signal h4,
.ai-card h4,
.mine-card h4,
.alert-card h4 {
  margin: 0 0 8px;
  font-size: 14px;
}

.quick-link p,
.signal p,
.ai-card p,
.mine-card p,
.alert-card p,
.tiny {
  margin: 0;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.65;
}

.weights,
.ai-list,
.trade-list,
.scenario-list,
.alerts {
  display: grid;
  gap: 10px;
}

.weight-row,
.trade-row,
.scenario-row,
.ai-row {
  padding: 12px;
  border-radius: 12px;
  border: 1px solid rgba(255,255,255,.05);
  background: rgba(255,255,255,.03);
}

.weight-row {
  display: grid;
  grid-template-columns: 110px 1fr 60px 82px;
  gap: 12px;
  align-items: center;
}

.trade-row {
  display: grid;
  grid-template-columns: 88px 110px 90px 1fr 90px;
  gap: 10px;
  align-items: center;
}

.bar {
  height: 12px;
  border-radius: 999px;
  overflow: hidden;
  background: rgba(255,255,255,.05);
  border: 1px solid rgba(255,255,255,.05);
}

.bar > span {
  display: block;
  height: 100%;
  background: linear-gradient(90deg, rgba(43,103,255,.75), rgba(65,199,255,.85));
}

.chart-box {
  border-radius: 16px;
  border: 1px solid rgba(102,178,255,.15);
  background: linear-gradient(180deg, rgba(11,29,53,.92), rgba(6,18,34,.92));
  padding: 12px;
}

.chart-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  margin-bottom: 10px;
  color: var(--muted);
  font-size: 12px;
}

.equity-chart,
.scenario-chart {
  display: block;
  width: 100%;
  height: 240px;
}

/* =========================================================
   登录页
   ========================================================= */

.login-body {
  min-height: 100vh;
  display: grid;
  place-items: center;
  padding: 24px;
}

.login-shell {
  width: min(440px, 100%);
}

.login-card {
  padding: 30px;
  border-radius: 24px;
  background: linear-gradient(180deg, rgba(12, 27, 50, .985), rgba(5, 14, 27, .985));
  border: 1px solid rgba(102, 178, 255, .22);
  box-shadow: 0 18px 46px rgba(0,0,0,.38), inset 0 1px 0 rgba(255,255,255,.045);
}

.login-logo {
  width: 54px;
  height: 54px;
  border-radius: 16px;
  display: grid;
  place-items: center;
  font-weight: 900;
  color: #071524;
  background: linear-gradient(135deg, var(--blue), var(--blue2));
  margin-bottom: 18px;
}

.login-card h1 {
  margin: 0;
  font-size: 24px;
}

.login-card p {
  margin: 8px 0 22px;
  color: var(--muted);
  font-size: 13px;
}

.login-form {
  display: grid;
  gap: 10px;
}

.login-form label {
  color: var(--muted);
  font-size: 13px;
}

.login-form input {
  height: 42px;
  border-radius: 12px;
  border: 1px solid rgba(135, 190, 255, .14);
  background: rgba(255,255,255,.06);
  color: var(--text);
  padding: 0 12px;
  outline: none;
}

.login-form input:focus {
  border-color: rgba(65,199,255,.42);
  box-shadow: 0 0 0 3px rgba(65,199,255,.08);
}

.login-form button {
  height: 42px;
  border: 0;
  border-radius: 12px;
  margin-top: 8px;
  cursor: pointer;
  font-weight: 800;
  color: #06111f;
  background: linear-gradient(135deg, var(--blue), var(--blue2));
}

.login-error {
  padding: 10px 12px;
  border-radius: 12px;
  margin: 0 0 14px;
  color: #ffd9de;
  background: rgba(255, 91, 107, .14);
  border: 1px solid rgba(255, 91, 107, .24);
  font-size: 13px;
}

.login-tip {
  margin-top: 16px;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.6;
}

/* =========================================================
   PC Fluid Tokens V5
   目标：
   1. 不做整页缩放，不改浏览器缩放。
   2. PC端以 CSS 视口宽度连续驱动模块面积、间距、字体、按钮、图表高度。
   3. 1700 左右视口更明显压缩，2280 左右保持舒展。
   4. Dashboard 与登录页分别精修。
   ========================================================= */

:root {
  --sidebar-open-width: clamp(210px, 12vw, 280px);
  --sidebar-closed-width: clamp(62px, 3.95vw, 92px);

  --topbar-h: clamp(54px, 3.52vw, 84px);
  --page-pad-x: clamp(8px, .72vw, 18px);
  --content-gap: clamp(8px, .58vw, 18px);

  --card-radius-fluid: clamp(12px, .72vw, 18px);
  --card-head-y: clamp(7px, .46vw, 14px);
  --card-head-x: clamp(9px, .64vw, 16px);
  --panel-y: clamp(8px, .52vw, 16px);
  --panel-x: clamp(9px, .64vw, 16px);

  --font-10: clamp(8px, .39vw, 10px);
  --font-11: clamp(8.5px, .44vw, 11px);
  --font-12: clamp(9px, .50vw, 12px);
  --font-13: clamp(10px, .55vw, 13px);
  --font-14: clamp(10.5px, .60vw, 14px);
  --font-15: clamp(11px, .66vw, 15px);
  --font-17: clamp(12.5px, .74vw, 17px);
  --font-20: clamp(15px, .88vw, 20px);
  --font-24: clamp(18px, 1.02vw, 24px);
  --price-font: clamp(20px, 1.16vw, 28px);

  --control-h: clamp(25px, 1.45vw, 36px);
  --select-h: clamp(23px, 1.32vw, 34px);
  --nav-h: clamp(33px, 1.86vw, 46px);

  --product-gap: clamp(6px, .42vw, 12px);
  --product-card-h: clamp(126px, 7.05vw, 176px);
  --product-left-w: 45.5%;
  --spark-h: clamp(20px, 1.22vw, 38px);

  --second-row-h: clamp(220px, 12.0vw, 320px);
  --main-flow-h: clamp(320px, 18.5vw, 500px);
  --order-flow-h: clamp(245px, 14.0vw, 405px);
  --heat-h: clamp(245px, 14.0vw, 405px);
  --svg-small-h: clamp(145px, 8.6vw, 230px);
}

* {
  min-width: 0;
}

body.dashboard-body {
  overflow-x: hidden;
}

/* =========================================================
   登录页专属自适应：小屏/笔记本不再被裁切
   ========================================================= */

body.gt-login-body {
  overflow-x: hidden !important;
  overflow-y: auto !important;
}

.gt-login-page {
  min-height: 100dvh !important;
  display: flex !important;
  justify-content: center !important;
  align-items: flex-start !important;
  padding: clamp(12px, 2.2vh, 28px) clamp(12px, 2vw, 28px) !important;
}

.gt-login-card {
  width: min(clamp(330px, 31vw, 430px), calc(100vw - 24px)) !important;
  margin: 0 auto !important;
  max-height: none !important;
}

.gt-login-inner {
  padding: clamp(18px, 1.65vw, 30px) !important;
}

.gt-login-top {
  gap: clamp(9px, .72vw, 14px) !important;
  margin-bottom: clamp(14px, 1.15vw, 24px) !important;
}

.gt-login-logo {
  width: clamp(38px, 2.55vw, 50px) !important;
  height: clamp(38px, 2.55vw, 50px) !important;
  border-radius: clamp(12px, .86vw, 17px) !important;
  font-size: clamp(18px, 1.15vw, 23px) !important;
}

.gt-login-title h1 {
  font-size: clamp(18px, 1.25vw, 23px) !important;
}

.gt-login-title p {
  margin-top: clamp(4px, .36vw, 7px) !important;
  font-size: clamp(10px, .64vw, 12px) !important;
}

.gt-login-status {
  margin-bottom: clamp(14px, 1.15vw, 24px) !important;
  gap: clamp(6px, .50vw, 9px) !important;
}

.gt-status-item {
  height: clamp(38px, 2.35vw, 48px) !important;
  padding: clamp(7px, .52vw, 9px) clamp(7px, .56vw, 10px) !important;
  border-radius: clamp(11px, .78vw, 15px) !important;
}

.gt-status-item b {
  font-size: clamp(10px, .62vw, 12px) !important;
}

.gt-status-item span {
  margin-top: clamp(4px, .34vw, 7px) !important;
  font-size: clamp(8px, .50vw, 10px) !important;
}

.gt-login-form {
  gap: clamp(9px, .70vw, 14px) !important;
}

.gt-field label {
  font-size: clamp(11px, .64vw, 13px) !important;
  margin-bottom: clamp(5px, .38vw, 7px) !important;
}

.gt-input input,
.gt-reset-panel input,
.gt-reset-panel textarea,
.gt-login-form input {
  height: clamp(36px, 2.15vw, 42px) !important;
  border-radius: clamp(10px, .72vw, 14px) !important;
  font-size: clamp(12px, .72vw, 14px) !important;
}

.gt-login-form button,
.gt-reset-actions button {
  height: clamp(38px, 2.28vw, 46px) !important;
  border-radius: clamp(10px, .72vw, 14px) !important;
  font-size: clamp(12px, .72vw, 14px) !important;
}

.gt-tools,
.gt-reset-links,
.gt-login-actions {
  gap: clamp(6px, .48vw, 10px) !important;
}

.gt-safe-note,
.gt-login-tip {
  font-size: clamp(10px, .60vw, 12px) !important;
  line-height: 1.52 !important;
}

.gt-reset-panel {
  margin-top: clamp(12px, .95vw, 18px) !important;
  padding: clamp(12px, .95vw, 16px) !important;
  border-radius: clamp(13px, .95vw, 18px) !important;
}

.gt-reset-panel h2 {
  font-size: clamp(15px, .95vw, 18px) !important;
}

.gt-reset-panel p {
  margin: clamp(5px, .40vw, 7px) 0 clamp(9px, .70vw, 14px) !important;
  font-size: clamp(10px, .60vw, 12px) !important;
  line-height: 1.48 !important;
}

.gt-toast {
  top: clamp(12px, 1.45vh, 20px) !important;
  max-width: min(540px, calc(100vw - 28px)) !important;
  font-size: clamp(11px, .65vw, 13px) !important;
}

@media (max-height: 780px) and (min-width: 721px) {
  .gt-login-page {
    padding-top: 10px !important;
    padding-bottom: 18px !important;
  }

  .gt-login-inner {
    padding: 18px !important;
  }

  .gt-login-top {
    margin-bottom: 12px !important;
  }

  .gt-login-status {
    margin-bottom: 12px !important;
  }

  .gt-reset-panel {
    margin-top: 10px !important;
  }
}

/* =========================================================
   电脑端侧栏：始终保持左侧栏
   ========================================================= */

@media (min-width: 721px) {
  .sidebar {
    position: fixed !important;
    left: 0 !important;
    top: 0 !important;
    bottom: 0 !important;
    width: var(--sidebar-open-width) !important;
    padding: clamp(10px, .64vw, 14px) !important;
    border-right: 1px solid rgba(88, 196, 255, .18) !important;
    border-bottom: 0 !important;
  }

  body.sidebar-expanded .sidebar {
    width: var(--sidebar-open-width) !important;
    padding: clamp(10px, .64vw, 14px) !important;
  }

  body.sidebar-collapsed .sidebar {
    width: var(--sidebar-closed-width) !important;
    padding: clamp(8px, .52vw, 14px) clamp(7px, .48vw, 12px) !important;
  }

  .main,
  body.sidebar-expanded .main {
    margin-left: var(--sidebar-open-width) !important;
  }

  body.sidebar-collapsed .main {
    margin-left: var(--sidebar-closed-width) !important;
  }

  .topbar,
  body.sidebar-expanded .topbar {
    position: fixed !important;
    left: var(--sidebar-open-width) !important;
    right: 0 !important;
    top: 0 !important;
    min-height: var(--topbar-h) !important;
    padding: clamp(7px, .54vw, 14px) var(--page-pad-x) !important;
    gap: clamp(7px, .52vw, 16px) !important;
  }

  body.sidebar-collapsed .topbar {
    left: var(--sidebar-closed-width) !important;
  }

  .content {
    padding: calc(var(--topbar-h) + clamp(9px, .64vw, 18px)) var(--page-pad-x) var(--page-pad-x) !important;
  }
}

/* =========================================================
   侧栏与顶部栏内部尺寸
   ========================================================= */

.side-brand {
  min-height: clamp(52px, 3.15vw, 76px);
  margin-bottom: clamp(8px, .62vw, 18px);
  padding: clamp(7px, .48vw, 12px);
  grid-template-columns: clamp(31px, 1.92vw, 46px) minmax(0, 1fr) clamp(27px, 1.55vw, 36px);
  gap: clamp(5px, .38vw, 10px);
  border-radius: clamp(13px, .78vw, 20px);
}

.side-logo {
  width: clamp(31px, 1.92vw, 46px);
  height: clamp(31px, 1.92vw, 46px);
  border-radius: clamp(10px, .62vw, 15px);
  font-size: clamp(15px, .86vw, 20px);
}

.side-brand h1 {
  font-size: var(--font-17);
}

.side-brand p {
  font-size: var(--font-12);
  margin-top: clamp(3px, .20vw, 6px);
}

.sidebar-toggle-clean {
  width: clamp(27px, 1.62vw, 36px);
  height: clamp(27px, 1.62vw, 36px);
  border-radius: clamp(9px, .54vw, 12px);
}

body.sidebar-collapsed .side-topbar {
  height: clamp(29px, 1.72vw, 40px);
  margin-bottom: clamp(8px, .52vw, 16px);
}

.side-nav {
  gap: clamp(5px, .34vw, 10px);
}

.side-nav button {
  height: var(--nav-h);
  padding: 0 clamp(8px, .56vw, 14px);
  border-radius: clamp(10px, .62vw, 15px);
  font-size: var(--font-14);
}

body.sidebar-collapsed .side-nav button {
  width: clamp(44px, 2.62vw, 64px);
  height: clamp(33px, 1.86vw, 46px);
  border-radius: clamp(11px, .68vw, 16px);
  font-size: var(--font-12);
}

body.sidebar-collapsed .nav-mini {
  font-size: var(--font-12);
}

.side-note {
  padding: clamp(7px, .48vw, 12px) clamp(8px, .52vw, 13px);
  font-size: var(--font-11);
  border-radius: clamp(10px, .62vw, 14px);
  line-height: 1.5;
}

.top-title {
  gap: clamp(7px, .54vw, 14px);
  min-width: clamp(150px, 11.5vw, 260px);
}

.top-badge {
  width: clamp(29px, 1.78vw, 42px);
  height: clamp(29px, 1.78vw, 42px);
  border-radius: clamp(9px, .58vw, 14px);
  font-size: var(--font-12);
}

.top-title h2 {
  font-size: var(--font-24);
}

.top-title p {
  font-size: var(--font-12);
  margin-top: clamp(2px, .18vw, 6px);
}

.top-actions {
  gap: clamp(5px, .36vw, 10px);
}

.pill {
  height: var(--control-h);
  padding: 0 clamp(7px, .52vw, 14px);
  gap: clamp(4px, .28vw, 8px);
  font-size: var(--font-12);
}

select,
.btn {
  height: var(--select-h);
  padding: 0 clamp(7px, .46vw, 12px);
  border-radius: clamp(7px, .44vw, 10px);
  font-size: var(--font-12);
}

/* =========================================================
   通用卡片与表格
   ========================================================= */

.grid,
.hero-grid,
.split,
.section-grid,
.triple,
.mine-grid,
.quick-grid,
.second-row-grid,
.analysis-grid,
.analysis-grid-bottom,
.stats {
  gap: var(--content-gap);
}

.card {
  border-radius: var(--card-radius-fluid);
}

.card-head {
  padding: var(--card-head-y) var(--card-head-x);
  gap: clamp(7px, .48vw, 14px);
}

.card-title h2,
.card-head h2 {
  font-size: var(--font-20);
}

.card-title h3,
.card-head h3 {
  font-size: var(--font-17);
}

.card-title p,
.card-head p {
  font-size: var(--font-11);
  margin-top: clamp(3px, .18vw, 6px);
}

.panel-body,
.market-body,
.basis-body,
.io-body,
.decision-body,
.ai-body,
.bt-body,
.mine-body {
  padding: var(--panel-y) var(--panel-x);
}

.tag,
.badge {
  min-height: clamp(18px, 1.0vw, 24px);
  padding: 0 clamp(5px, .32vw, 8px);
  font-size: var(--font-10);
}

table {
  font-size: var(--font-12);
}

th,
td {
  padding: clamp(6px, .42vw, 10px) clamp(6px, .42vw, 10px);
}

th {
  font-size: var(--font-11);
}

/* =========================================================
   小控件
   ========================================================= */

.mini-period-control {
  height: clamp(21px, 1.24vw, 30px);
  padding: 0 clamp(6px, .38vw, 10px);
  gap: clamp(4px, .26vw, 7px);
  font-size: var(--font-10);
}

.mini-period-control select {
  height: clamp(18px, 1.02vw, 24px);
  min-width: clamp(48px, 3.1vw, 74px);
  padding-left: clamp(5px, .32vw, 8px);
  padding-right: clamp(14px, .86vw, 22px);
  font-size: var(--font-10);
}

/* =========================================================
   行情总览
   ========================================================= */

.market-grid {
  display: grid !important;
  grid-template-columns: repeat(6, minmax(0, 1fr)) !important;
  gap: var(--product-gap) !important;
  align-items: stretch;
}

.product-card {
  min-height: var(--product-card-h);
  border-radius: clamp(12px, .68vw, 16px);
  overflow: hidden;
}

.product-tape {
  display: grid;
  grid-template-columns: var(--product-left-w) 1px minmax(0, 1fr);
  min-height: var(--product-card-h);
}

.product-left {
  padding: clamp(7px, .50vw, 14px) clamp(6px, .50vw, 14px) clamp(6px, .42vw, 11px);
}

.product-right {
  padding: clamp(7px, .50vw, 14px) clamp(6px, .50vw, 14px) clamp(6px, .42vw, 11px) clamp(5px, .42vw, 12px);
  gap: clamp(4px, .30vw, 8px);
  overflow: visible;
}

.product-card-head {
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-start !important;
  justify-content: flex-start !important;
  gap: clamp(3px, .24vw, 6px) !important;
}

.product-title-stack {
  width: 100%;
  min-width: 0;
}

.product-name,
.product-code {
  max-width: 100%;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  word-break: normal !important;
  overflow-wrap: normal !important;
}

.product-name {
  font-size: var(--font-14);
  line-height: 1.08;
}

.product-code {
  font-size: var(--font-10);
  line-height: 1.08;
  margin-top: clamp(1px, .14vw, 4px);
}

.product-period-pill {
  align-self: flex-start;
  height: clamp(18px, 1.0vw, 27px);
  min-width: clamp(50px, 3.05vw, 68px);
  max-width: clamp(54px, 3.25vw, 74px);
  margin-top: clamp(1px, .10vw, 3px);
  padding-left: clamp(5px, .30vw, 9px);
  padding-right: clamp(13px, .82vw, 23px);
  font-size: var(--font-10);
  line-height: clamp(16px, .90vw, 25px);
}

.product-period-pill span {
  max-width: clamp(34px, 2.15vw, 54px);
}

.product-period-pill::after {
  right: clamp(4px, .28vw, 8px);
  font-size: var(--font-10);
}

.last-price {
  font-size: var(--price-font);
  margin: clamp(3px, .30vw, 10px) 0 clamp(2px, .18vw, 5px);
  line-height: 1.02;
  white-space: nowrap;
}

.delta {
  font-size: var(--font-11);
  line-height: 1.1;
}

.spark {
  height: var(--spark-h);
  margin-top: auto;
}

.order-top,
.order-row,
.order-row-price {
  display: grid !important;
  grid-template-columns: max-content minmax(0, 1fr) max-content !important;
  column-gap: clamp(3px, .24vw, 7px) !important;
  gap: 0;
  align-items: center;
}

.order-top {
  font-size: var(--font-11);
}

.order-top span:first-child,
.order-row-price .order-label,
.order-label {
  grid-column: 1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  font-size: var(--font-11);
}

.order-top .order-net,
.order-row-price .order-value,
.order-value {
  grid-column: 3;
  justify-self: end;
  text-align: right;
  min-width: max-content;
  white-space: nowrap;
  font-size: var(--font-12);
}

.order-net {
  font-size: var(--font-14);
}

.order-stats {
  gap: clamp(4px, .30vw, 8px);
}

.order-row-bar,
.order-row:has(.micro-bar) {
  display: grid !important;
  grid-template-columns: max-content minmax(0, 1fr) max-content !important;
  column-gap: clamp(3px, .24vw, 7px) !important;
}

.order-row-bar .micro-bar,
.order-row:has(.micro-bar) .micro-bar {
  grid-column: 2;
  width: 100%;
  min-width: 0;
  max-width: none;
}

.order-row-bar .order-value,
.order-row:has(.micro-bar) .order-value {
  grid-column: 3;
}

.micro-bar {
  height: clamp(5px, .34vw, 9px);
}

/* =========================================================
   第二行与订单流
   ========================================================= */

.second-row-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
}

.second-row-grid > .card {
  height: var(--second-row-h);
  min-height: var(--second-row-h);
}

.second-row-grid > .card > .card-head {
  min-height: clamp(42px, 2.65vw, 68px);
  padding: clamp(7px, .44vw, 12px) clamp(9px, .58vw, 14px);
}

.second-row-grid .basis-body,
.second-row-grid .io-body {
  padding: clamp(8px, .50vw, 14px);
}

.io-inline-row {
  grid-template-columns: clamp(70px, 4.7vw, 112px) minmax(0, 1fr) clamp(32px, 2.2vw, 52px);
  gap: clamp(6px, .46vw, 12px);
  min-height: clamp(30px, 1.9vw, 46px);
  padding: clamp(4px, .30vw, 6px) clamp(5px, .38vw, 8px);
}

.io-inline-title b {
  font-size: var(--font-12);
}

.io-inline-title span,
.io-inline-foot,
.io-inline-state {
  font-size: var(--font-10);
}

.io-inline-bar {
  height: clamp(14px, .84vw, 22px);
}

.analysis-grid {
  grid-template-columns: minmax(0, 1.58fr) minmax(230px, .72fr) minmax(250px, .82fr) !important;
  gap: clamp(8px, .54vw, 14px);
}

.analysis-grid-bottom {
  grid-template-columns: minmax(200px, .78fr) minmax(220px, .9fr) minmax(240px, 1fr) minmax(220px, .9fr) !important;
  gap: clamp(8px, .54vw, 14px);
  margin-top: clamp(8px, .54vw, 14px);
}

.analysis-body {
  padding: clamp(8px, .52vw, 14px);
}

.main-flow-card {
  min-height: var(--main-flow-h);
}

.order-flow-svg {
  height: var(--order-flow-h);
}

.depth-svg {
  height: var(--svg-small-h);
}

.heat-svg {
  height: var(--heat-h);
}

.flow-meta,
.bottom-ticker,
.quick-link p,
.signal p,
.ai-card p,
.mine-card p,
.alert-card p,
.tiny {
  font-size: var(--font-11);
}

.trend-tile,
.stat,
.quick-link,
.signal,
.ai-card,
.mine-card,
.alert-card,
.summary-pill {
  padding: clamp(8px, .52vw, 12px);
  border-radius: clamp(10px, .60vw, 14px);
}

.trend-tile .k,
.stat .k,
.summary-pill .k {
  font-size: var(--font-10);
}

.trend-tile .v,
.summary-pill .v {
  font-size: clamp(13px, .72vw, 18px);
}

.stat .v {
  font-size: clamp(16px, .88vw, 22px);
}

.bottom-ticker {
  height: clamp(23px, 1.36vw, 34px);
  margin-top: clamp(8px, .54vw, 14px);
}

.weight-row {
  grid-template-columns: clamp(70px, 4.7vw, 110px) 1fr clamp(40px, 2.6vw, 60px) clamp(54px, 3.5vw, 82px);
}

.trade-row {
  grid-template-columns: clamp(58px, 3.8vw, 88px) clamp(72px, 4.7vw, 110px) clamp(60px, 3.8vw, 90px) 1fr clamp(60px, 3.8vw, 90px);
}

.equity-chart,
.scenario-chart {
  height: clamp(150px, 9.5vw, 240px);
}

/* =========================================================
   1700 CSS宽度附近：更明显压缩，但保持六列，周期控件位于标题下方
   ========================================================= */

@media (max-width: 1800px) and (min-width: 1321px) {
  :root {
    --product-left-w: 44.5%;
    --product-gap: clamp(5px, .36vw, 8px);
    --content-gap: clamp(8px, .50vw, 12px);
    --product-card-h: clamp(122px, 6.85vw, 146px);
    --spark-h: clamp(18px, 1.05vw, 28px);
    --second-row-h: clamp(210px, 11.5vw, 260px);
    --main-flow-h: clamp(310px, 17.6vw, 400px);
    --order-flow-h: clamp(235px, 13.2vw, 315px);
    --heat-h: clamp(235px, 13.2vw, 315px);
    --svg-small-h: clamp(140px, 8.2vw, 185px);
  }

  .product-left {
    padding-left: clamp(5px, .36vw, 8px);
    padding-right: clamp(5px, .36vw, 8px);
  }

  .product-right {
    padding-left: clamp(5px, .34vw, 7px);
    padding-right: clamp(5px, .36vw, 8px);
  }

  .top-title {
    min-width: clamp(140px, 10.5vw, 210px);
  }

  .order-top span:first-child,
  .order-row-price .order-label,
  .order-label {
    font-size: clamp(8px, .46vw, 10px);
  }

  .order-top .order-net,
  .order-row-price .order-value,
  .order-value {
    font-size: clamp(9px, .52vw, 11px);
  }
}

/* 1320 以下才开始结构兜底 */
@media (max-width: 1320px) and (min-width: 1081px) {
  .market-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  }

  .analysis-grid {
    grid-template-columns: 1fr 1fr !important;
  }

  .main-flow-card {
    grid-column: 1 / -1;
  }

  .analysis-grid-bottom {
    grid-template-columns: 1fr 1fr !important;
  }
}

@media (max-width: 1080px) and (min-width: 721px) {
  .market-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  }

  .second-row-grid,
  .analysis-grid,
  .analysis-grid-bottom,
  .hero-grid,
  .split,
  .section-grid {
    grid-template-columns: 1fr !important;
  }

  .second-row-grid > .card {
    height: auto;
    min-height: var(--second-row-h);
  }

  .stats,
  .quick-grid,
  .mine-grid,
  .triple {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}

/* 手机端保底，后续可单独设计 */
@media (max-width: 720px) {
  :root {
    --sidebar-open-width: 100%;
    --sidebar-closed-width: 100%;
  }

  .sidebar {
    position: static !important;
    width: auto !important;
    padding: 12px !important;
    border-right: 0 !important;
    border-bottom: 1px solid var(--line2) !important;
  }

  body.sidebar-expanded .sidebar,
  body.sidebar-collapsed .sidebar {
    width: auto !important;
    padding: 12px !important;
  }

  body.sidebar-collapsed .side-brand,
  body.sidebar-collapsed .side-nav,
  body.sidebar-collapsed .side-note {
    display: none;
  }

  body.sidebar-collapsed .side-topbar {
    width: 100%;
    height: 40px;
    margin: 0;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .main,
  body.sidebar-expanded .main,
  body.sidebar-collapsed .main {
    margin-left: 0 !important;
  }

  .topbar,
  body.sidebar-expanded .topbar,
  body.sidebar-collapsed .topbar {
    position: static !important;
    left: 0 !important;
    min-height: auto !important;
  }

  .content {
    padding: 14px !important;
  }

  .market-grid,
  .second-row-grid,
  .analysis-grid,
  .analysis-grid-bottom,
  .hero-grid,
  .split,
  .section-grid,
  .quick-grid,
  .mine-grid,
  .triple,
  .stats {
    grid-template-columns: 1fr !important;
  }

  .product-tape {
    grid-template-columns: 42% 1px minmax(0, 1fr);
  }

  .weight-row,
  .trade-row {
    grid-template-columns: 1fr;
  }
}

/* =========================================================
   PC Fluid Tokens V6 - 截断修复
   重点：
   1. 第二行卡片不再固定死高度，避免内外盘比最后一行被裁掉。
   2. 订单流区域顺序下移，不再压住上一行内容。
   3. 登录页主要改在 login.html 内联样式，这里仅保底。
   ========================================================= */

/* 第二行三块：允许内容撑开，禁止裁切 */
.second-row-grid {
  align-items: stretch !important;
}

.second-row-grid > .card {
  height: auto !important;
  min-height: clamp(238px, 13.2vw, 330px) !important;
  overflow: visible !important;
}

.second-row-grid > .card > .card-head {
  flex: 0 0 auto !important;
}

.second-row-grid .basis-body,
.second-row-grid .io-body,
.io-body,
.basis-body {
  overflow: visible !important;
}

.io-inline-row {
  min-height: clamp(31px, 1.85vw, 45px) !important;
}

.io-inline-list,
.io-inline-body {
  overflow: visible !important;
}

/* 如果内部用了列表布局，保证行间距不会把最后一行挤出卡片 */
.io-body {
  gap: clamp(6px, .42vw, 10px) !important;
}

/* 订单流区和上一行之间留出更稳定的距离 */
.order-section,
.order-flow-section,
.card.order-flow-card,
.card:has(.analysis-grid) {
  margin-top: clamp(10px, .72vw, 18px) !important;
}

/* 行情卡不裁切底部小数值/进度条 */
.product-card,
.product-tape,
.product-left,
.product-right {
  overflow: visible !important;
}

.market-card {
  overflow: visible !important;
}

.market-body {
  overflow: visible !important;
}

/* 登录页外链 CSS 保底。主要覆盖在 login.html 里，这里防止缓存或局部模板未替换。 */
body.gt-login-body {
  height: auto !important;
  min-height: 100dvh !important;
  overflow-x: hidden !important;
  overflow-y: auto !important;
}

body.gt-login-body .gt-login-page {
  min-height: 100dvh !important;
  height: auto !important;
  align-items: flex-start !important;
  place-items: start center !important;
  padding-top: clamp(10px, 1.5vh, 22px) !important;
  padding-bottom: clamp(26px, 4vh, 56px) !important;
}

/* =========================================================
   GT Login Market Dynamic V11 external safety override
   ========================================================= */

body.gt-login-body {
  min-height: 100dvh !important;
  overflow-x: hidden !important;
  overflow-y: auto !important;
}

body.gt-login-body:not(.gt-reset-open) .gt-login-page {
  align-items: center !important;
}

body.gt-login-body.gt-reset-open .gt-login-page {
  align-items: flex-start !important;
}

.gt-market-scene {
  position: fixed !important;
  inset: 0 !important;
  z-index: -1 !important;
  pointer-events: none !important;
}

.gt-login-card::before {
  animation: gtCardSheen 5.8s ease-in-out infinite !important;
}

/* =========================================================
   Auth Side Panels V15 external safety override
   ========================================================= */

body.gt-login-body.gt-panel-open .gt-login-page {
  align-items: center !important;
}

@media (max-width: 900px), (max-aspect-ratio: 1/1) {
  body.gt-login-body.gt-panel-open .gt-login-page,
  body.gt-login-body.gt-register-open .gt-login-page,
  body.gt-login-body.gt-reset-open .gt-login-page {
    align-items: flex-start !important;
  }
}

.gt-auth-stage {
  position: relative;
}

.gt-side-panel {
  display: block;
}

/* =========================================================
   Auth Side Panels V16 external safety override
   ========================================================= */

.gt-side-panel {
  overflow: hidden !important;
  padding: 0 !important;
}

.gt-side-panel-scroll {
  overflow-y: auto;
  overflow-x: hidden;
  margin-right: clamp(8px, .62vw, 14px);
}

.gt-panel-close {
  display: grid !important;
  place-items: center !important;
  padding: 0 !important;
  line-height: 1 !important;
  text-align: center !important;
}

/* =========================================================
   Register Panel V17 external safety override
   ========================================================= */

.gt-register-panel .gt-input.password input {
  padding-right: 14px !important;
}

/* =========================================================
   Register AJAX V18 external safety override
   ========================================================= */

.gt-side-panel button:disabled,
.gt-submit:disabled {
  cursor: not-allowed !important;
  filter: grayscale(.18) brightness(.82) !important;
  opacity: .72 !important;
}

/* =========================================================
   Register Invite Code V22 external safety override
   ========================================================= */

.gt-toast {
  min-width: min(420px, calc(100vw - 32px));
  white-space: normal;
}


/* =========================================================
   Admin Console V23：侧栏分功能 + 内部码池 + 在线状态
   ========================================================= */

.admin-console-body .sidebar.admin-sidebar {
  width: var(--sidebar-open-width, 280px);
}

.admin-console-body .main.admin-main {
  margin-left: var(--sidebar-open-width, 280px);
}

.admin-side-tabs button {
  justify-content: space-between;
  gap: 10px;
}

.nav-count {
  min-width: 24px;
  height: 20px;
  padding: 0 7px;
  border-radius: 999px;
  display: inline-grid;
  place-items: center;
  color: #dff7ff;
  background: rgba(74, 196, 255, .12);
  border: 1px solid rgba(74, 196, 255, .18);
  font-size: 11px;
  font-weight: 900;
}

.nav-count.warn {
  color: #fff2da;
  background: rgba(255, 179, 71, .16);
  border-color: rgba(255, 179, 71, .28);
}

.admin-shell {
  display: grid;
  gap: 16px;
}

.admin-feedback {
  border-radius: 16px;
  padding: 12px 14px;
  border: 1px solid rgba(124, 205, 255, .18);
  background: rgba(12, 31, 56, .82);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.04);
  color: var(--text);
}

.admin-feedback.success {
  color: #d9fff0;
  border-color: rgba(29, 208, 123, .25);
  background: rgba(29, 208, 123, .11);
}

.admin-feedback.error {
  color: #ffe1e7;
  border-color: rgba(255, 91, 107, .28);
  background: rgba(255, 91, 107, .11);
}

.admin-section {
  display: none;
  animation: adminSectionIn .28s ease both;
}

.admin-section.active {
  display: block;
}

@keyframes adminSectionIn {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: translateY(0); }
}

.admin-section-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 16px;
  padding: 18px;
  border-radius: 20px;
  border: 1px solid rgba(104, 196, 255, .18);
  background:
    radial-gradient(circle at 0 0, rgba(74, 196, 255, .14), transparent 34%),
    linear-gradient(180deg, rgba(14, 34, 60, .88), rgba(8, 20, 37, .86));
  box-shadow: 0 16px 44px rgba(0,0,0,.20), inset 0 1px 0 rgba(255,255,255,.05);
}

.admin-section-head h2 {
  margin: 4px 0 6px;
  font-size: 24px;
}

.admin-section-head p {
  margin: 0;
  color: var(--muted);
}

.section-kicker {
  margin: 0 !important;
  color: #2bf0b4 !important;
  font-size: 11px;
  font-weight: 1000;
  letter-spacing: .12em;
}

.admin-head-actions {
  display: flex;
  gap: 10px;
  align-items: center;
  flex-wrap: wrap;
  justify-content: flex-end;
}

.invite-pool-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 14px;
}

.invite-card {
  position: relative;
  overflow: hidden;
  min-height: 178px;
  padding: 16px;
  border-radius: 22px;
  border: 1px solid rgba(89, 218, 255, .24);
  background:
    linear-gradient(135deg, rgba(8, 28, 54, .94), rgba(6, 15, 30, .92)),
    radial-gradient(circle at 20% 0, rgba(66, 217, 255, .16), transparent 34%);
  box-shadow: 0 20px 54px rgba(0,0,0,.28), inset 0 1px 0 rgba(255,255,255,.06);
}

.invite-card::before {
  content: "";
  position: absolute;
  inset: -35%;
  background: linear-gradient(115deg, transparent 0 42%, rgba(120,230,255,.16) 49%, transparent 57%);
  transform: translateX(-36%);
  animation: inviteSheen 6s ease-in-out infinite;
  pointer-events: none;
}

@keyframes inviteSheen {
  0%, 35% { transform: translateX(-42%); opacity: .18; }
  52% { opacity: .78; }
  74%, 100% { transform: translateX(42%); opacity: .20; }
}

.invite-card > * { position: relative; z-index: 1; }

.invite-card.expired {
  opacity: .58;
  filter: grayscale(.2);
}

.invite-card-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 14px;
}

.invite-status {
  height: 24px;
  padding: 0 10px;
  border-radius: 999px;
  display: inline-grid;
  place-items: center;
  color: #052117;
  background: linear-gradient(135deg, #42d9ff, #25f0ad);
  font-size: 12px;
  font-weight: 1000;
}

.invite-index {
  color: rgba(214, 238, 255, .55);
  font-weight: 900;
}

.invite-code {
  font-family: Consolas, "SFMono-Regular", monospace;
  font-size: clamp(22px, 1.7vw, 30px);
  line-height: 1;
  letter-spacing: .08em;
  font-weight: 1000;
  color: #f2fbff;
  text-shadow: 0 0 20px rgba(66,217,255,.22);
  margin-bottom: 14px;
  white-space: nowrap;
}

.invite-meta {
  display: grid;
  gap: 6px;
  color: #9fb6d2;
  font-size: 12px;
  margin-bottom: 14px;
}

.invite-meta b { color: #2bf0b4; }

.invite-copy { width: 100%; }

.admin-help-card {
  margin-top: 14px;
  border-radius: 18px;
  border: 1px solid rgba(255, 179, 71, .22);
  background: rgba(255, 179, 71, .08);
  padding: 13px 14px;
  color: #ffe8c3;
  display: grid;
  gap: 6px;
}

.admin-card-flat {
  margin: 0;
}

.admin-form-grid {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  align-items: end;
}

.admin-checkbox-line,
.admin-mini-checkbox {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--muted);
}

.admin-checkbox-line input,
.admin-mini-checkbox input {
  width: auto !important;
  height: auto !important;
}

.admin-wide-table input,
.admin-wide-table select {
  min-width: 100px;
  height: 34px;
  border-radius: 10px;
}

.admin-wide-table td,
.admin-wide-table th {
  vertical-align: middle;
}

.cell-note {
  max-width: 250px;
  white-space: normal !important;
  line-height: 1.5;
}

.admin-action-stack {
  display: grid;
  gap: 8px;
  min-width: 260px;
}

.admin-action-row,
.inline-form {
  display: flex;
  gap: 8px;
  align-items: center;
  flex-wrap: nowrap;
}

.btn.tiny {
  min-height: 28px;
  height: 28px;
  padding: 0 10px;
  font-size: 12px;
}

.btn.danger-soft {
  color: #ffdce3;
  border-color: rgba(255,91,107,.26);
  background: rgba(255,91,107,.09);
}

.presence-chip {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  height: 26px;
  padding: 0 10px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 1000;
  border: 1px solid transparent;
}

.presence-chip::before {
  content: "";
  width: 7px;
  height: 7px;
  border-radius: 999px;
  background: currentColor;
  box-shadow: 0 0 10px currentColor;
}

.presence-chip.online {
  color: #25f0ad;
  border-color: rgba(37,240,173,.24);
  background: rgba(37,240,173,.10);
}

.presence-chip.idle {
  color: #ffbc5e;
  border-color: rgba(255,188,94,.25);
  background: rgba(255,188,94,.10);
}

.presence-chip.offline {
  color: #91a6c1;
  border-color: rgba(145,166,193,.18);
  background: rgba(145,166,193,.08);
}

.presence-meta {
  margin-top: 5px;
  color: #7e92ad;
  font-size: 11px;
  white-space: nowrap;
}

.empty-panel {
  border-radius: 18px;
  border: 1px dashed rgba(124,205,255,.25);
  color: var(--muted);
  padding: 24px;
  text-align: center;
  background: rgba(12,31,56,.40);
}

@media (max-width: 1100px) {
  .admin-form-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .admin-section-head { flex-direction: column; }
  .admin-head-actions { justify-content: flex-start; }
}

@media (max-width: 760px) {
  .admin-console-body .main.admin-main { margin-left: var(--sidebar-closed-width, 92px); }
  .invite-pool-grid { grid-template-columns: 1fr; }
  .admin-form-grid { grid-template-columns: 1fr; }
}

/* =========================================================
   Admin Console V24 external safety override
   ========================================================= */

.admin-section {
  display: none !important;
}

.admin-section.active {
  display: block !important;
}

.admin-side-tabs button {
  pointer-events: auto !important;
  cursor: pointer !important;
}

.invite-pool-grid {
  display: grid !important;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)) !important;
  gap: 16px !important;
}

/* =========================================================
   Admin Console V25 external fallback
   ========================================================= */

.admin-console-body .main.admin-main {
  width: calc(100vw - var(--sidebar-open-width, 280px)) !important;
  max-width: none !important;
}

.admin-console-body .admin-content,
.admin-console-body .admin-shell,
.admin-console-body .admin-section,
.admin-users-card {
  width: 100% !important;
  max-width: none !important;
}

.admin-users-table-wrap {
  width: 100% !important;
  overflow-x: auto !important;
  overflow-y: hidden !important;
}

.admin-users-table {
  width: max(100%, 1580px) !important;
  min-width: 1580px !important;
  table-layout: fixed !important;
}

@media (min-width: 1700px) {
  .admin-users-table {
    width: max(100%, 1580px) !important;
    min-width: 1580px !important;
  }
}


/* =========================================================
   GT Internal Visual Polish V25.9 - Calm Terminal
   目标：投研终端风格，克制、稳定、专业。
   只做视觉覆盖：不改结构、不改断点、不改周期逻辑。
   ========================================================= */

body.dashboard-body,
body.admin-console-body {
  background:
    radial-gradient(circle at 8% 0%, rgba(35, 96, 188, .18), transparent 32%),
    radial-gradient(circle at 92% 0%, rgba(33, 156, 204, .11), transparent 28%),
    linear-gradient(180deg, #040b15 0%, #061320 46%, #03070d 100%) !important;
}

body.dashboard-body::before,
body.admin-console-body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background:
    linear-gradient(rgba(105, 177, 255, .020) 1px, transparent 1px),
    linear-gradient(90deg, rgba(105, 177, 255, .018) 1px, transparent 1px);
  background-size: 42px 42px;
  opacity: .42;
}

body.dashboard-body .sidebar,
body.admin-console-body .admin-sidebar,
body.admin-console-body .sidebar {
  background:
    linear-gradient(180deg, rgba(7, 18, 34, .985), rgba(3, 9, 18, .995)) !important;
  border-right-color: rgba(101, 172, 235, .18) !important;
  box-shadow: 18px 0 44px rgba(0, 0, 0, .24) !important;
}

body.dashboard-body .topbar,
body.admin-console-body .admin-topbar,
body.admin-console-body .topbar {
  background:
    linear-gradient(180deg, rgba(8, 22, 40, .94), rgba(5, 14, 27, .90)) !important;
  border-bottom-color: rgba(93, 164, 230, .18) !important;
  box-shadow: 0 16px 34px rgba(0, 0, 0, .20) !important;
}

body.dashboard-body .content,
body.admin-console-body .admin-content,
body.admin-console-body .content {
  position: relative;
  z-index: 1;
}

.card,
.product-card,
.analysis-card,
.chart-box,
.admin-section,
.admin-users-card,
.invite-card,
.empty-panel,
.quick-link,
.trend-tile,
.stat,
.signal,
.ai-card,
.mine-card,
.alert-card,
.summary-pill,
.io-inline-row,
.weight-row,
.trade-row,
.scenario-row,
.ai-row {
  border-color: rgba(104, 174, 239, .16) !important;
  box-shadow:
    0 14px 34px rgba(0, 0, 0, .24),
    inset 0 1px 0 rgba(255, 255, 255, .035) !important;
}

.card,
.analysis-card,
.chart-box,
.admin-section,
.admin-users-card,
.invite-card,
.empty-panel {
  background:
    linear-gradient(180deg, rgba(10, 27, 49, .90), rgba(5, 15, 29, .94)) !important;
}

.card-head {
  background: linear-gradient(180deg, rgba(255, 255, 255, .030), rgba(255, 255, 255, .006)) !important;
  border-bottom-color: rgba(104, 174, 239, .12) !important;
}

.product-card {
  background:
    radial-gradient(circle at 14% 0%, rgba(45, 137, 226, .10), transparent 34%),
    linear-gradient(180deg, rgba(11, 30, 54, .94), rgba(5, 16, 31, .98)) !important;
  border-color: rgba(104, 174, 239, .18) !important;
}

.product-card-empty {
  background:
    repeating-linear-gradient(135deg, rgba(255, 255, 255, .024) 0 1px, transparent 1px 10px),
    linear-gradient(180deg, rgba(11, 30, 54, .78), rgba(5, 16, 31, .90)) !important;
  opacity: .92;
}

.product-name,
.last-price,
.card-title h2,
.card-title h3,
.card-head h2,
.card-head h3 {
  text-shadow: none !important;
}

.last-price {
  letter-spacing: -.025em;
}

.pill,
.tag,
.badge,
.tab-chip,
.presence-chip,
.mini-period-control,
.product-period-pill,
.btn,
select {
  border-color: rgba(113, 184, 245, .16) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .035) !important;
}

.mini-period-control,
.product-period-pill,
select {
  background: linear-gradient(180deg, rgba(15, 39, 67, .92), rgba(8, 24, 45, .92)) !important;
}

.btn,
.pill,
.tag,
.badge,
.tab-chip,
.presence-chip {
  background: linear-gradient(180deg, rgba(255, 255, 255, .052), rgba(255, 255, 255, .024)) !important;
}

.side-brand,
.sidebar-toggle-clean,
.side-nav button,
.card,
.product-card,
.analysis-card,
.chart-box,
.admin-section,
.admin-users-card,
.invite-card,
.empty-panel,
.quick-link,
.trend-tile,
.stat,
.signal,
.ai-card,
.mine-card,
.alert-card,
.summary-pill,
.io-inline-row,
.weight-row,
.trade-row,
.scenario-row,
.ai-row,
.pill,
.tag,
.badge,
.tab-chip,
.presence-chip,
.mini-period-control,
.product-period-pill,
.btn,
select,
.invite-copy {
  transition:
    border-color .16s ease,
    background-color .16s ease,
    background .16s ease,
    box-shadow .16s ease,
    color .16s ease,
    opacity .16s ease !important;
}

.card:hover,
.product-card:hover,
.analysis-card:hover,
.chart-box:hover,
.admin-section:hover,
.admin-users-card:hover,
.invite-card:hover,
.empty-panel:hover,
.quick-link:hover,
.trend-tile:hover,
.stat:hover,
.signal:hover,
.ai-card:hover,
.mine-card:hover,
.alert-card:hover,
.summary-pill:hover,
.io-inline-row:hover,
.weight-row:hover,
.trade-row:hover,
.scenario-row:hover,
.ai-row:hover,
.side-nav button:hover,
.sidebar-toggle-clean:hover,
.btn:hover,
.invite-copy:hover,
.tag:hover,
.badge:hover,
.tab-chip:hover,
.presence-chip:hover,
.mini-period-control:hover,
.product-period-pill:hover,
.admin-console-body .admin-side-tabs button:hover,
.admin-console-body .admin-side-tabs button.active,
.admin-head-actions .btn:hover {
  transform: none !important;
}

.card:hover,
.product-card:hover,
.analysis-card:hover,
.chart-box:hover,
.admin-section:hover,
.admin-users-card:hover,
.invite-card:hover,
.quick-link:hover,
.trend-tile:hover,
.stat:hover,
.signal:hover,
.ai-card:hover,
.mine-card:hover,
.alert-card:hover,
.summary-pill:hover {
  border-color: rgba(65, 199, 255, .28) !important;
  box-shadow:
    0 16px 36px rgba(0, 0, 0, .26),
    inset 0 1px 0 rgba(255, 255, 255, .045) !important;
}

.card::before,
.card::after,
.product-card::before,
.product-card::after,
.analysis-card::before,
.analysis-card::after,
.admin-section::before,
.admin-section::after,
.admin-users-card::before,
.admin-users-card::after,
.invite-card::before,
.invite-card::after {
  animation: none !important;
}

.card::after,
.product-card::after,
.analysis-card::after,
.admin-section::after,
.invite-card::after {
  display: none !important;
}

select:focus,
.btn:focus-visible,
.product-period-select:focus-visible + span,
.login-form input:focus {
  outline: none !important;
  border-color: rgba(65, 199, 255, .42) !important;
  box-shadow: 0 0 0 3px rgba(65, 199, 255, .085) !important;
}

.wide-table,
.table-wrap {
  border-color: rgba(104, 174, 239, .11) !important;
}

table {
  background: rgba(7, 20, 38, .72) !important;
  border-color: rgba(104, 174, 239, .12) !important;
}

th {
  background: linear-gradient(180deg, rgba(65, 137, 217, .10), rgba(255, 255, 255, .026)) !important;
  color: rgba(213, 229, 248, .90) !important;
}

tr:hover td {
  background: rgba(65, 199, 255, .042) !important;
}

.order-flow-svg,
.depth-svg,
.heat-svg,
.equity-chart,
.scenario-chart {
  filter: none !important;
}

.bottom-ticker {
  background: linear-gradient(90deg, rgba(5, 16, 31, .94), rgba(9, 28, 50, .90), rgba(5, 16, 31, .94)) !important;
  border-color: rgba(93, 164, 230, .16) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.035) !important;
}

.admin-console-body .admin-users-table {
  width: max(100%, 1580px) !important;
  min-width: 1580px !important;
}

/* =========================================================
   同步观察图表（V25.12 统一图纸 / 可缩放拖拽版）
   收起时只是一条线；展开后用一张连续 SVG 图纸承载所有追加图层。
   ========================================================= */

.sync-watch-card {
  margin: -7px 0 2px;
  overflow: visible;
}

.sync-watch-content {
  width: 100%;
}

.sync-watch-strip,
.sync-watch-collapse-line {
  appearance: none;
  width: 100%;
  min-height: 42px;
  border: 1px solid rgba(65,199,255,.10);
  border-radius: 16px;
  padding: 8px 12px;
  background:
    linear-gradient(90deg, rgba(65,199,255,.040), rgba(255,255,255,.010), rgba(255,83,112,.025));
  color: var(--muted);
  cursor: pointer;
  display: grid;
  grid-template-columns: minmax(24px, 1fr) auto minmax(24px, 1fr);
  align-items: center;
  gap: 12px;
  position: relative;
  z-index: 2;
  touch-action: manipulation;
}

.sync-watch-strip span,
.sync-watch-collapse-line span {
  height: 2px;
  background:
    linear-gradient(90deg, transparent, rgba(65,199,255,.50), rgba(255,83,112,.26), transparent);
  box-shadow: 0 0 16px rgba(65,199,255,.16);
}

.sync-watch-strip b,
.sync-watch-collapse-line b {
  color: #d9ecff;
  font-size: 12px;
  letter-spacing: .14em;
  white-space: nowrap;
}

.sync-watch-strip b em {
  margin-left: 8px;
  font-style: normal;
  letter-spacing: .08em;
  color: #7ea7c8;
  font-size: 11px;
}

.sync-watch-strip:hover b,
.sync-watch-collapse-line:hover b {
  color: #41c7ff;
}

.sync-watch-open-panel {
  border: 0;
  border-radius: 0;
  overflow: visible;
  background: transparent;
  box-shadow: none;
}

.sync-watch-collapse-line {
  margin: 0 0 4px;
  min-height: 34px;
  border-color: rgba(65,199,255,.075);
  background: transparent;
}

.sync-watch-toolbar {
  min-height: 42px;
  padding: 8px 10px;
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  border-top: 1px solid rgba(102,178,255,.075);
  border-bottom: 1px solid rgba(102,178,255,.075);
  background:
    linear-gradient(90deg, rgba(65,199,255,.030), transparent 26%, transparent 74%, rgba(65,199,255,.022)),
    rgba(4,13,25,.38);
}

.sync-watch-titleline {
  display: flex;
  align-items: baseline;
  gap: 10px;
  min-width: 240px;
  margin-right: auto;
}

.sync-watch-titleline strong {
  color: #dceeff;
  font-size: 16px;
  font-weight: 900;
  letter-spacing: .03em;
}

.sync-watch-titleline em {
  color: #7793b4;
  font-size: 11px;
  font-style: normal;
  white-space: nowrap;
}

.sync-add-select-wrap {
  height: 32px;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 0 9px;
  border-radius: 999px;
  border: 1px solid rgba(102,178,255,.15);
  background: rgba(255,255,255,.035);
}

.sync-add-select-wrap span {
  color: #88a6c9;
  font-size: 11px;
  font-weight: 900;
}

.sync-add-select {
  width: 210px;
  height: 28px;
  border: 0;
  padding: 0 4px;
  background: transparent;
  color: #dceeff;
  font-weight: 800;
  outline: none;
}

.sync-tool-btn {
  height: 32px;
  min-width: 46px;
  border-radius: 999px;
  padding: 0 10px;
}

.sync-selected-row {
  min-height: 28px;
  padding: 6px 10px;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
  color: var(--muted);
  font-size: 12px;
  border-bottom: 1px solid rgba(102,178,255,.055);
  background: rgba(3,10,20,.18);
}

.sync-selected-row.empty {
  color: #6d87a7;
}

.sync-selected-pill {
  appearance: none;
  border: 1px solid rgba(102,178,255,.16);
  background: rgba(255,255,255,.025);
  color: #c8def6;
  border-radius: 999px;
  padding: 4px 9px;
  font-size: 11px;
  cursor: pointer;
}

.sync-selected-pill span {
  color: #ff7184;
  margin-left: 4px;
  font-weight: 900;
}

.sync-selected-pill:hover {
  border-color: rgba(255,91,107,.35);
  color: #fff;
}

.sync-chart-shell {
  position: relative;
  width: 100%;
  padding: 0;
  overflow: hidden;
  background:
    linear-gradient(90deg, rgba(65,199,255,.020), transparent 18%, transparent 82%, rgba(65,199,255,.014)),
    rgba(2,9,18,.10);
  border-bottom: 1px solid rgba(102,178,255,.075);
  cursor: crosshair;
}

.sync-stack-svg {
  display: block;
  width: 100%;
  height: auto;
  min-height: 230px;
  max-height: none;
  overflow: visible;
  background: transparent;
  border-radius: 0;
  user-select: none;
}

.sync-stack-svg.is-dragging,
.sync-chart-shell:has(.sync-stack-svg.is-dragging) {
  cursor: grabbing;
}

.sync-watch-tooltip {
  position: absolute;
  z-index: 10;
  display: none;
  width: min(520px, calc(100% - 24px));
  max-height: 260px;
  overflow: auto;
  padding: 10px 11px;
  border: 1px solid rgba(102,178,255,.22);
  border-radius: 12px;
  background: rgba(5,14,26,.96);
  box-shadow: 0 16px 34px rgba(0,0,0,.36);
  backdrop-filter: blur(10px);
  pointer-events: none;
}

.sync-watch-tooltip b {
  display: block;
  margin-bottom: 6px;
  color: #dceeff;
  font-size: 12px;
}

.sync-watch-tooltip > span {
  color: var(--muted);
  font-size: 11px;
}

.sync-tooltip-row {
  display: grid;
  grid-template-columns: 9px 92px minmax(0, 1fr);
  gap: 7px;
  align-items: baseline;
  margin-top: 4px;
  font-size: 11px;
}

.sync-tooltip-row i {
  width: 7px;
  height: 7px;
  border-radius: 50%;
}

.sync-tooltip-row span {
  color: #91accb;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.sync-tooltip-row em {
  color: #d7eaff;
  font-style: normal;
  white-space: normal;
  line-height: 1.45;
}

@media (max-width: 1320px) {
  .sync-watch-titleline em {
    display: none;
  }

  .sync-add-select {
    width: 180px;
  }
}

@media (max-width: 1080px) {
  .sync-watch-toolbar {
    align-items: stretch;
  }

  .sync-watch-titleline {
    width: 100%;
    min-width: 0;
  }

  .sync-add-select-wrap {
    flex: 1 1 260px;
  }

  .sync-add-select {
    width: 100%;
  }
}

@media (max-width: 720px) {
  .sync-watch-toolbar,
  .sync-selected-row {
    padding-left: 8px;
    padding-right: 8px;
  }

  .sync-tool-btn {
    min-width: 42px;
    padding: 0 8px;
  }

  .sync-stack-svg {
    min-height: 210px;
  }

  .sync-tooltip-row {
    grid-template-columns: 9px 74px minmax(0, 1fr);
  }
}

/* =========================================================
   同步观察 V25.13 可用性修正：
   - 滚轮回归页面滚动，缩放只走显式按钮
   - 窄屏不再强行压缩图表，改为图表区横向滚动
   - 控制区更紧凑，减少选择区占用
   - 悬停提示更宽，数值尽量完整显示
   ========================================================= */
.sync-watch-toolbar {
  min-height: 36px !important;
  padding: 5px 8px !important;
  gap: 6px !important;
}

.sync-watch-titleline {
  min-width: 0 !important;
  flex: 0 1 auto !important;
  margin-right: 4px !important;
}

.sync-watch-titleline strong {
  font-size: 14px !important;
}

.sync-watch-titleline em {
  display: none !important;
}

.sync-add-select-wrap {
  height: 30px !important;
  padding: 0 7px !important;
  flex: 0 1 245px;
}

.sync-add-select {
  width: 190px !important;
  height: 26px !important;
}

.sync-tool-btn {
  height: 30px !important;
  min-width: 38px !important;
  padding: 0 8px !important;
  font-size: 11px !important;
}

.sync-selected-row {
  min-height: 24px !important;
  padding: 4px 8px !important;
  gap: 5px !important;
}

.sync-selected-pill {
  padding: 3px 8px !important;
  font-size: 11px !important;
}

.sync-chart-shell {
  overflow-x: auto !important;
  overflow-y: hidden !important;
  cursor: crosshair;
  scrollbar-width: thin;
  scrollbar-color: rgba(102,178,255,.28) rgba(255,255,255,.035);
}

.sync-chart-shell::-webkit-scrollbar {
  height: 8px;
}

.sync-chart-shell::-webkit-scrollbar-track {
  background: rgba(255,255,255,.035);
}

.sync-chart-shell::-webkit-scrollbar-thumb {
  background: rgba(102,178,255,.28);
  border-radius: 999px;
}

.sync-stack-svg {
  min-width: 1180px !important;
}

.sync-watch-tooltip {
  width: min(680px, calc(100% - 24px)) !important;
  max-height: 340px !important;
  padding: 11px 12px !important;
}

.sync-tooltip-row {
  grid-template-columns: 9px 118px minmax(0, 1fr) !important;
  gap: 8px !important;
}

.sync-tooltip-row span {
  white-space: normal !important;
  text-overflow: clip !important;
}

.sync-tooltip-row em {
  overflow-wrap: anywhere;
}

@media (max-width: 1080px) {
  .sync-watch-toolbar {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) auto auto auto auto auto auto auto !important;
    align-items: center !important;
  }

  .sync-watch-titleline {
    display: none !important;
  }

  .sync-add-select-wrap {
    min-width: 0 !important;
    flex: none !important;
  }

  .sync-add-select {
    width: 100% !important;
    min-width: 150px;
  }

  .sync-stack-svg {
    min-width: 980px !important;
  }
}

@media (max-width: 720px) {
  .sync-watch-toolbar {
    grid-template-columns: 1fr 1fr 1fr !important;
  }

  .sync-add-select-wrap {
    grid-column: 1 / -1;
  }

  .sync-stack-svg {
    min-width: 920px !important;
  }

  .sync-watch-tooltip {
    width: min(560px, calc(100% - 20px)) !important;
  }
}

/* =========================================================
   同步观察 V25.14 可读性修正：
   - 控制区始终保持一行横向滚动，避免窄屏按钮堆成多行
   - 已选图层标签横向滚动，减少顶部占用
   - 图表保持更大的最小可读宽度，窄屏只横向滚动，不压扁图形
   - 图层标题改为图内浮层，由 JS 绘制，不再为标题单独占一整行
   ========================================================= */
.sync-watch-toolbar {
  display: flex !important;
  flex-wrap: nowrap !important;
  align-items: center !important;
  overflow-x: auto !important;
  overflow-y: hidden !important;
  white-space: nowrap !important;
  scrollbar-width: thin;
  scrollbar-color: rgba(102,178,255,.22) rgba(255,255,255,.025);
}

.sync-watch-toolbar::-webkit-scrollbar {
  height: 6px;
}

.sync-watch-toolbar::-webkit-scrollbar-track {
  background: rgba(255,255,255,.025);
}

.sync-watch-toolbar::-webkit-scrollbar-thumb {
  background: rgba(102,178,255,.22);
  border-radius: 999px;
}

.sync-watch-titleline {
  flex: 0 0 auto !important;
  min-width: auto !important;
}

.sync-add-select-wrap {
  flex: 0 0 260px !important;
  min-width: 260px !important;
}

.sync-add-select {
  width: 196px !important;
  min-width: 0 !important;
}

.sync-tool-btn,
.sync-watch-toolbar .tag,
.sync-watch-toolbar .mini-period {
  flex: 0 0 auto !important;
}

.sync-selected-row {
  flex-wrap: nowrap !important;
  overflow-x: auto !important;
  overflow-y: hidden !important;
  scrollbar-width: thin;
  scrollbar-color: rgba(102,178,255,.20) transparent;
}

.sync-selected-row::-webkit-scrollbar {
  height: 5px;
}

.sync-selected-row::-webkit-scrollbar-thumb {
  background: rgba(102,178,255,.20);
  border-radius: 999px;
}

.sync-selected-pill {
  flex: 0 0 auto !important;
}

.sync-chart-shell {
  overscroll-behavior-x: contain;
}

.sync-stack-svg {
  min-width: 1320px !important;
}

.sync-watch-tooltip {
  width: min(760px, calc(100% - 24px)) !important;
}

@media (max-width: 1080px) {
  .sync-watch-toolbar {
    display: flex !important;
    grid-template-columns: none !important;
  }

  .sync-watch-titleline {
    display: none !important;
  }

  .sync-add-select-wrap {
    grid-column: auto !important;
    flex: 0 0 255px !important;
    min-width: 255px !important;
  }

  .sync-stack-svg {
    min-width: 1280px !important;
  }
}

@media (max-width: 720px) {
  .sync-watch-toolbar {
    display: flex !important;
    grid-template-columns: none !important;
    padding: 5px 7px !important;
  }

  .sync-add-select-wrap {
    grid-column: auto !important;
    flex: 0 0 245px !important;
    min-width: 245px !important;
  }

  .sync-tool-btn {
    min-width: 40px !important;
    height: 28px !important;
    padding: 0 8px !important;
  }

  .sync-stack-svg {
    min-width: 1240px !important;
  }

  .sync-watch-tooltip {
    width: min(620px, calc(100% - 18px)) !important;
  }
}


/* =========================================================
   同步观察 V25.15 窄屏与滚动体验修正：
   - 去掉图表底部横向滚动条，图表宽度始终贴合页面内容区
   - 默认/添加/切周期后使用“自适应最近窗口”，优先展示右侧最新数据
   - 控制区允许自然换行，不再用横向滚动条挤压操作按钮
   - 已选图层允许换行展示，减少移动端截断和遮挡
   ========================================================= */
.sync-watch-toolbar {
  display: flex !important;
  flex-wrap: wrap !important;
  align-items: center !important;
  overflow: visible !important;
  white-space: normal !important;
  row-gap: 6px !important;
  column-gap: 6px !important;
}

.sync-watch-toolbar::-webkit-scrollbar,
.sync-selected-row::-webkit-scrollbar,
.sync-chart-shell::-webkit-scrollbar {
  display: none !important;
}

.sync-add-select-wrap {
  flex: 1 1 260px !important;
  min-width: 190px !important;
  max-width: 360px !important;
}

.sync-add-select {
  width: 100% !important;
  min-width: 0 !important;
}

.sync-watch-toolbar .mini-period {
  flex: 0 1 122px !important;
  min-width: 112px !important;
}

.sync-watch-toolbar .tag {
  flex: 0 0 auto !important;
}

.sync-tool-btn {
  flex: 0 0 auto !important;
}

.sync-selected-row {
  flex-wrap: wrap !important;
  overflow: visible !important;
  white-space: normal !important;
  max-height: none !important;
}

.sync-selected-pill {
  flex: 0 0 auto !important;
}

.sync-chart-shell {
  overflow-x: hidden !important;
  overflow-y: hidden !important;
  scrollbar-width: none !important;
}

.sync-stack-svg {
  width: 100% !important;
  min-width: 0 !important;
  max-width: 100% !important;
}

@media (max-width: 1080px) {
  .sync-watch-toolbar {
    display: flex !important;
    grid-template-columns: none !important;
  }

  .sync-add-select-wrap {
    flex: 1 1 100% !important;
    min-width: 0 !important;
    max-width: none !important;
  }

  .sync-watch-toolbar .mini-period,
  .sync-watch-toolbar .tag {
    flex: 1 1 118px !important;
  }

  .sync-tool-btn {
    flex: 1 1 calc(25% - 8px) !important;
    min-width: 58px !important;
  }

  .sync-stack-svg {
    min-width: 0 !important;
  }
}

@media (max-width: 720px) {
  .sync-watch-toolbar {
    padding: 6px 8px !important;
  }

  .sync-watch-toolbar .mini-period,
  .sync-watch-toolbar .tag {
    flex: 1 1 calc(50% - 6px) !important;
  }

  .sync-tool-btn {
    flex: 1 1 calc(33.333% - 6px) !important;
    min-width: 0 !important;
    height: 30px !important;
  }

  .sync-stack-svg {
    min-height: 230px !important;
  }

  .sync-watch-tooltip {
    width: min(520px, calc(100% - 16px)) !important;
  }
}

/* =========================================================
   同步观察 V25.16 观察窗口与悬停信息优化：
   - 缩小按钮不再把全部历史强行压扁，正常观察最多保留最近约20%时间窗口
   - SVG 宽度按当前容器实时计算，窄屏不再因为固定 1720 viewBox 被整体缩小
   - 悬停信息改为图表上方读数条，不再用大浮层遮挡图形
   - 控制区继续允许换行，图表不出现底部横向滚动条
   ========================================================= */
.sync-watch-open-panel {
  overflow: visible !important;
}

.sync-watch-toolbar {
  padding: 6px 8px !important;
  gap: 6px !important;
}

.sync-add-select-wrap {
  flex: 1 1 300px !important;
  min-width: 220px !important;
  max-width: 430px !important;
}

.sync-watch-toolbar .mini-period {
  flex: 0 1 132px !important;
  min-width: 118px !important;
}

.sync-tool-btn {
  min-width: 50px !important;
}

.sync-selected-row {
  padding: 5px 8px !important;
  gap: 6px !important;
}

.sync-watch-readout {
  min-height: 32px;
  padding: 6px 10px;
  display: flex;
  align-items: center;
  gap: 10px;
  border-top: 1px solid rgba(102,178,255,.045);
  border-bottom: 1px solid rgba(102,178,255,.055);
  background:
    linear-gradient(90deg, rgba(65,199,255,.035), transparent 38%, rgba(255,91,107,.018)),
    rgba(3,10,20,.22);
  color: #7f9cbc;
  font-size: 11px;
  overflow: hidden;
}

.sync-watch-readout.is-active {
  color: #dceeff;
  background:
    linear-gradient(90deg, rgba(65,199,255,.055), transparent 42%, rgba(29,208,123,.025)),
    rgba(3,10,20,.36);
}

.sync-watch-readout > b {
  flex: 0 0 auto;
  color: #f0f7ff;
  font-size: 12px;
  font-weight: 900;
  letter-spacing: .02em;
}

.sync-readout-items {
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 8px;
  overflow: hidden;
}

.sync-readout-item {
  min-width: 0;
  max-width: 360px;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 3px 8px;
  border-radius: 999px;
  border: 1px solid rgba(102,178,255,.12);
  background: rgba(255,255,255,.025);
  white-space: nowrap;
}

.sync-readout-item i {
  flex: 0 0 auto;
  width: 7px;
  height: 7px;
  border-radius: 50%;
}

.sync-readout-item strong {
  color: #9fb9d8;
  font-size: 11px;
  font-weight: 900;
}

.sync-readout-item em {
  min-width: 0;
  color: #e6f2ff;
  font-size: 11px;
  font-style: normal;
  overflow: hidden;
  text-overflow: ellipsis;
}

.sync-readout-more,
.sync-readout-empty {
  color: #7f9cbc;
  white-space: nowrap;
}

.sync-chart-shell {
  overflow: hidden !important;
  cursor: crosshair;
  background:
    linear-gradient(90deg, rgba(65,199,255,.018), transparent 18%, transparent 82%, rgba(65,199,255,.012)),
    rgba(2,9,18,.10) !important;
}

.sync-stack-svg {
  width: 100% !important;
  min-width: 0 !important;
  max-width: 100% !important;
  height: auto !important;
  display: block !important;
  touch-action: pan-y;
  user-select: none;
  -webkit-user-select: none;
  -webkit-tap-highlight-color: transparent;
}

.sync-watch-tooltip {
  display: none !important;
}

@media (max-width: 1080px) {
  .sync-watch-toolbar {
    row-gap: 7px !important;
  }

  .sync-add-select-wrap {
    flex: 1 1 100% !important;
    min-width: 0 !important;
    max-width: none !important;
  }

  .sync-watch-toolbar .mini-period,
  .sync-watch-toolbar .tag {
    flex: 1 1 calc(50% - 6px) !important;
  }

  .sync-tool-btn {
    flex: 1 1 calc(25% - 6px) !important;
    min-width: 64px !important;
  }

  .sync-watch-readout {
    align-items: flex-start;
    flex-direction: column;
    gap: 5px;
    min-height: 42px;
  }

  .sync-readout-items {
    width: 100%;
    overflow: hidden;
  }

  .sync-readout-item {
    max-width: 260px;
  }
}

@media (max-width: 720px) {
  .sync-watch-toolbar .mini-period,
  .sync-watch-toolbar .tag {
    flex: 1 1 calc(50% - 6px) !important;
  }

  .sync-tool-btn {
    flex: 1 1 calc(33.333% - 6px) !important;
    min-width: 0 !important;
  }

  .sync-watch-readout {
    padding: 7px 8px;
  }

  .sync-readout-items {
    flex-wrap: nowrap;
  }

  .sync-readout-item {
    max-width: 210px;
    padding: 3px 7px;
  }
}

/* =========================================================
   同步观察 V25.17 窄屏读数条细节优化：
   - 窄屏悬停读数不再使用横向药丸块，改成紧凑列表
   - 数值允许换行显示，减少遮挡和截断
   - 控制信息区域高度受控，避免把图表顶下去太多
   ========================================================= */
@media (max-width: 820px) {
  .sync-watch-readout {
    align-items: stretch !important;
    flex-direction: column !important;
    gap: 5px !important;
    min-height: 0 !important;
    padding: 6px 8px !important;
    overflow: hidden !important;
  }

  .sync-watch-readout.is-active {
    max-height: 138px !important;
    overflow-y: auto !important;
    scrollbar-width: thin;
    scrollbar-color: rgba(102,178,255,.26) rgba(255,255,255,.035);
  }

  .sync-watch-readout.is-active::-webkit-scrollbar {
    width: 5px;
  }

  .sync-watch-readout.is-active::-webkit-scrollbar-track {
    background: rgba(255,255,255,.035);
  }

  .sync-watch-readout.is-active::-webkit-scrollbar-thumb {
    background: rgba(102,178,255,.26);
    border-radius: 999px;
  }

  .sync-watch-readout > b {
    font-size: 12px !important;
    line-height: 1.2 !important;
  }

  .sync-readout-items {
    width: 100% !important;
    display: grid !important;
    grid-template-columns: 1fr !important;
    align-items: stretch !important;
    gap: 4px !important;
    overflow: visible !important;
  }

  .sync-readout-item {
    width: 100% !important;
    max-width: none !important;
    box-sizing: border-box !important;
    display: grid !important;
    grid-template-columns: 8px minmax(70px, 86px) minmax(0, 1fr) !important;
    align-items: baseline !important;
    gap: 6px !important;
    padding: 4px 7px !important;
    border-radius: 10px !important;
    white-space: normal !important;
    background: rgba(255,255,255,.020) !important;
  }

  .sync-readout-item i {
    margin-top: 2px !important;
  }

  .sync-readout-item strong {
    min-width: 0 !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
    font-size: 11px !important;
    line-height: 1.25 !important;
  }

  .sync-readout-item em {
    min-width: 0 !important;
    overflow: visible !important;
    text-overflow: clip !important;
    white-space: normal !important;
    overflow-wrap: anywhere !important;
    line-height: 1.35 !important;
    font-size: 11px !important;
  }

  .sync-readout-more,
  .sync-readout-empty {
    padding: 2px 7px !important;
    font-size: 11px !important;
  }
}

@media (max-width: 520px) {
  .sync-watch-readout {
    padding: 5px 7px !important;
  }

  .sync-watch-readout.is-active {
    max-height: 126px !important;
  }

  .sync-readout-item {
    grid-template-columns: 7px minmax(58px, 72px) minmax(0, 1fr) !important;
    gap: 5px !important;
    padding: 3px 6px !important;
    border-radius: 8px !important;
  }

  .sync-readout-item strong,
  .sync-readout-item em {
    font-size: 10.5px !important;
  }
}

/* =========================================================
   同步观察 V25.19 局部体验修正：
   - 非悬停状态隐藏读数条，避免单图层上下留白
   - 增加“最早 / 最新”按钮后的窄屏排布保持稳定
   - 手机横向拖拽更灵敏，图表本体不改业务逻辑
   ========================================================= */
.sync-watch-readout {
  display: none !important;
  min-height: 0 !important;
  height: auto !important;
  padding: 0 !important;
  margin: 0 !important;
  border: 0 !important;
}

.sync-watch-readout.is-active {
  display: flex !important;
  min-height: 32px !important;
  padding: 6px 10px !important;
  border-top: 1px solid rgba(102,178,255,.045) !important;
  border-bottom: 1px solid rgba(102,178,255,.055) !important;
}

.sync-chart-shell {
  margin-top: 0 !important;
}

.sync-stack-svg {
  min-height: 190px !important;
}

@media (max-width: 720px) {
  .sync-watch-toolbar {
    row-gap: 7px !important;
  }

  .sync-tool-btn {
    flex: 1 1 calc(25% - 6px) !important;
    min-width: 0 !important;
  }

  .sync-stack-svg {
    min-height: 205px !important;
  }

  .sync-watch-readout.is-active {
    display: flex !important;
    padding: 7px 8px !important;
  }
}

@media (max-width: 520px) {
  .sync-tool-btn {
    flex: 1 1 calc(33.333% - 6px) !important;
  }
}

/* =========================================================
   同步观察 V25.20 局部交互修正：
   - 手机端横向滑动先跟随手指做视觉平移，松手后一次性提交窗口，避免逐根K线顿挫
   - “缩小”按钮改为可逐步扩展到全量，不再卡在默认20%可读窗口上限
   - 仅影响同步观察图表，不改其他看板模块
   ========================================================= */
.sync-stack-svg.is-dragging {
  cursor: grabbing !important;
  will-change: transform;
  transition: none !important;
}

.sync-chart-shell:has(.sync-stack-svg.is-dragging) {
  cursor: grabbing !important;
}

@media (hover: none) and (pointer: coarse) {
  .sync-stack-svg.is-dragging {
    filter: brightness(1.04);
  }
}

/* =========================================================
   同步观察 V25.21 手机拖拽与读数位置局部修正：
   - 手机端不再用 transform 整体拖动 SVG，避免整张图被拖走、发虚和顿挫
   - 读数条移动到图表下方后，悬停/移动不会顶动图表上边界
   - 单图层时取消 SVG 强制最小高度，减少上下空白
   - 仅影响同步观察模块
   ========================================================= */
.sync-chart-shell {
  min-height: 0 !important;
  touch-action: pan-y !important;
}

.sync-stack-svg {
  min-height: 0 !important;
  touch-action: pan-y !important;
  transform: none !important;
}

.sync-stack-svg.is-dragging {
  filter: none !important;
  transform: none !important;
  will-change: auto !important;
}

.sync-watch-readout {
  margin-top: 2px !important;
  margin-bottom: 0 !important;
}

.sync-watch-readout.is-active {
  border-top: 1px solid rgba(102,178,255,.055) !important;
  border-bottom: 0 !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.018) !important;
}

@media (max-width: 720px) {
  .sync-stack-svg {
    min-height: 0 !important;
  }

  .sync-chart-shell {
    min-height: 0 !important;
  }

  .sync-watch-readout.is-active {
    margin-top: 4px !important;
  }
}

/* =========================================================
   V25.23 - 基差表四行均分
   说明：V25.22 增加伦敦金/美期金、伦敦银/美期银两条预留行后，
   原先为 2 行基差表准备的 50% 行高会导致纵向分布异常。
   这里仅覆盖基差表 tbody 行高，让 4 行在卡片内部均匀分布。
   ========================================================= */
.second-row-grid .basis-body .wide-table tbody tr {
  height: 25% !important;
}

.second-row-grid .basis-body .wide-table tbody td {
  vertical-align: middle !important;
}

@media (max-width: 760px) {
  .data-status-pill {
    max-width: 100%;
  }

  .unprocessed-count {
    max-width: 9.5em;
    overflow: hidden;
    text-overflow: ellipsis;
  }
}

/* V25.32 同步观察最新值动态标记 */
.sync-latest-marker {
  filter: drop-shadow(0 0 8px rgba(65,199,255,.18));
}

.sync-latest-hline {
  stroke-width: 1.15;
  stroke-dasharray: 7 7;
  stroke-dashoffset: 0;
  opacity: .52;
  vector-effect: non-scaling-stroke;
  animation: none;
  shape-rendering: geometricPrecision;
}

.sync-latest-label-bg {
  fill: rgba(4,13,25,.90);
  stroke-width: 1;
  opacity: .92;
}

.sync-latest-dot {
  opacity: .98;
  filter: drop-shadow(0 0 8px currentColor);
}

.sync-latest-ring {
  fill: none;
  stroke-width: 1.4;
  opacity: .58;
  transform-box: fill-box;
  transform-origin: center;
  animation: none;
}

@keyframes syncLatestPulse {
  0% {
    transform: scale(.65);
    opacity: .74;
  }
  100% {
    transform: scale(1.85);
    opacity: 0;
  }
}

@keyframes syncLatestDash {
  to {
    stroke-dashoffset: -28;
  }
}

@media (prefers-reduced-motion: reduce) {
  .sync-latest-hline,
  .sync-latest-ring {
    animation: none !important;
  }
}

/* =========================================================
   V25.34：实时刷新下的交互保护与精致加载提示
   说明：页面继续后台刷新，但在点击跳转/展开同步观察时短暂保护 DOM，
   避免按钮在 mousedown/mouseup 之间被高频刷新替换导致 click 丢失。
   ========================================================= */

.gt-action-loader {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: grid;
  place-items: start center;
  padding-top: clamp(70px, 9vh, 118px);
  pointer-events: none;
  opacity: 0;
  transform: translateY(-8px);
  transition: opacity .18s ease, transform .18s ease;
}

.gt-action-loader.is-visible {
  opacity: 1;
  transform: translateY(0);
}

.gt-action-loader-card {
  min-width: min(420px, calc(100vw - 34px));
  max-width: min(520px, calc(100vw - 34px));
  display: grid;
  grid-template-columns: 44px 1fr;
  gap: 13px;
  align-items: center;
  padding: 14px 16px;
  border: 1px solid rgba(84, 205, 255, .24);
  border-radius: 20px;
  background:
    radial-gradient(circle at 12% 20%, rgba(65,199,255,.20), transparent 34%),
    linear-gradient(135deg, rgba(8, 23, 41, .94), rgba(8, 16, 30, .90));
  box-shadow:
    0 22px 70px rgba(0, 0, 0, .42),
    0 0 34px rgba(65,199,255,.12),
    inset 0 1px 0 rgba(255,255,255,.08);
  backdrop-filter: blur(18px);
}

.gt-action-loader-ring {
  width: 40px;
  height: 40px;
  border-radius: 15px;
  display: grid;
  place-items: center;
  background: rgba(65,199,255,.08);
  border: 1px solid rgba(65,199,255,.20);
  box-shadow: inset 0 0 18px rgba(65,199,255,.08);
}

.gt-action-loader-ring span {
  width: 21px;
  height: 21px;
  border-radius: 999px;
  border: 2px solid rgba(178, 227, 255, .22);
  border-top-color: rgba(65,199,255,.95);
  border-right-color: rgba(32,216,138,.80);
  animation: gtActionLoaderSpin .72s linear infinite;
}

.gt-action-loader-copy b {
  display: block;
  color: #e5f5ff;
  font-size: 13px;
  letter-spacing: .05em;
}

.gt-action-loader-copy p {
  margin: 4px 0 0;
  color: #8fb0cb;
  font-size: 12px;
  line-height: 1.45;
}

@keyframes gtActionLoaderSpin {
  to { transform: rotate(360deg); }
}

.quick-link[role="button"]:focus-visible,
[data-sync-watch-toggle]:focus-visible {
  outline: 2px solid rgba(65,199,255,.65);
  outline-offset: 3px;
}

@media (max-width: 720px) {
  .gt-action-loader {
    padding-top: 74px;
  }

  .gt-action-loader-card {
    grid-template-columns: 38px 1fr;
    padding: 12px 13px;
    border-radius: 18px;
  }

  .gt-action-loader-ring {
    width: 36px;
    height: 36px;
    border-radius: 13px;
  }
}


/* V25.35：实时轮询模式下稳定 hover 边框，避免高频局部更新造成边框频闪。 */
body.live-mode .card,
body.live-mode .product-card,
body.live-mode .analysis-card,
body.live-mode .quick-link,
body.live-mode .ai-card,
body.live-mode .mine-card,
body.live-mode .alert-card {
  transition:
    background-color .08s linear,
    background .08s linear,
    color .08s linear,
    opacity .08s linear !important;
}

body.live-mode .card:hover,
body.live-mode .product-card:hover,
body.live-mode .analysis-card:hover,
body.live-mode .quick-link:hover,
body.live-mode .ai-card:hover,
body.live-mode .mine-card:hover,
body.live-mode .alert-card:hover {
  border-color: rgba(104, 174, 239, .18) !important;
  box-shadow:
    0 14px 34px rgba(0, 0, 0, .24),
    inset 0 1px 0 rgba(255, 255, 255, .035) !important;
}


/* =========================================================
   V25.48 System Background Polish
   只调整全系统背景与容器底色，不改布局、不改刷新、不改接口。
   目标：避免纯黑/过深蓝，统一为更干净的深蓝灰投研终端底色。
   ========================================================= */
:root {
  --bg: #092033;
  --bg2: #0b2538;
  --panel: #0d2a40;
  --panel2: #10314a;
  --line: rgba(122, 194, 245, .16);
  --line2: rgba(122, 205, 255, .22);
  --cardShadow: 0 14px 32px rgba(3, 15, 28, .25), inset 0 1px 0 rgba(255,255,255,.045);
}

body.dashboard-body,
body.admin-console-body {
  background:
    radial-gradient(circle at 15% -8%, rgba(63, 151, 210, .18), transparent 34%),
    radial-gradient(circle at 88% 2%, rgba(70, 190, 204, .10), transparent 30%),
    linear-gradient(180deg, #0b2538 0%, #092033 46%, #081c2d 100%) !important;
}

body.dashboard-body::before,
body.admin-console-body::before {
  background:
    linear-gradient(rgba(135, 205, 255, .016) 1px, transparent 1px),
    linear-gradient(90deg, rgba(135, 205, 255, .014) 1px, transparent 1px) !important;
  background-size: 46px 46px !important;
  opacity: .30 !important;
}

body.dashboard-body .main,
body.admin-console-body .main,
body.dashboard-body .content,
body.admin-console-body .content,
body.admin-console-body .admin-content {
  background:
    linear-gradient(180deg, rgba(13, 45, 68, .28), rgba(8, 28, 45, .16) 42%, rgba(8, 28, 45, .08)),
    radial-gradient(circle at 50% 0%, rgba(89, 176, 225, .060), transparent 45%) !important;
}

body.dashboard-body .topbar,
body.admin-console-body .topbar,
body.admin-console-body .admin-topbar {
  background:
    linear-gradient(180deg, rgba(13, 39, 58, .965), rgba(9, 29, 45, .925)) !important;
  border-bottom-color: rgba(128, 205, 255, .18) !important;
  box-shadow: 0 12px 30px rgba(4, 18, 32, .18) !important;
}

body.dashboard-body .sidebar,
body.admin-console-body .sidebar,
body.admin-console-body .admin-sidebar {
  background:
    linear-gradient(180deg, rgba(10, 31, 49, .985), rgba(7, 23, 38, .992)) !important;
  border-right-color: rgba(128, 205, 255, .15) !important;
}

.card,
.product-card,
.analysis-card,
.chart-box,
.admin-section,
.admin-users-card,
.invite-card,
.empty-panel,
.quick-link,
.trend-tile,
.stat,
.signal,
.ai-card,
.mine-card,
.alert-card,
.summary-pill,
.io-inline-row,
.weight-row,
.trade-row,
.scenario-row,
.ai-row {
  background:
    linear-gradient(180deg, rgba(15, 43, 64, .88), rgba(10, 31, 49, .86)) !important;
  border-color: rgba(128, 205, 255, .15) !important;
  box-shadow:
    0 12px 28px rgba(2, 14, 26, .22),
    inset 0 1px 0 rgba(255, 255, 255, .040) !important;
}

.product-card {
  background:
    radial-gradient(circle at 12% 18%, rgba(80, 162, 220, .075), transparent 34%),
    linear-gradient(180deg, rgba(16, 46, 68, .90), rgba(10, 31, 49, .88)) !important;
}

.sync-watch-toolbar,
.sync-selected-row,
.sync-watch-readout.is-active {
  background:
    linear-gradient(90deg, rgba(57, 151, 210, .035), rgba(10, 31, 49, .28), rgba(57, 151, 210, .025)) !important;
  border-color: rgba(128, 205, 255, .08) !important;
}

.sync-chart-shell {
  background:
    linear-gradient(180deg, rgba(12, 38, 58, .36), rgba(8, 29, 46, .28)),
    #092033 !important;
  border-bottom-color: rgba(128, 205, 255, .08) !important;
}

.sync-stack-svg {
  background: transparent !important;
}


/* =========================================================
   V25.49 Premium Navy Background
   只调整系统视觉底色与容器质感，不改布局、不改刷新、不改接口。
   目标：取消 V25.48 的灰雾感和大色块断层，回到更高级的深海军蓝。
   ========================================================= */
:root {
  --bg: #020714;
  --bg2: #041225;
  --panel: #06172b;
  --panel2: #081d34;
  --line: rgba(84, 167, 235, .135);
  --line2: rgba(84, 185, 245, .18);
  --cardShadow: 0 16px 34px rgba(0, 4, 10, .36), inset 0 1px 0 rgba(255,255,255,.036);
}

body.dashboard-body,
body.admin-console-body {
  background:
    radial-gradient(circle at 18% -12%, rgba(20, 86, 166, .16), transparent 34%),
    radial-gradient(circle at 92% -10%, rgba(18, 118, 166, .070), transparent 32%),
    linear-gradient(180deg, #020713 0%, #041327 42%, #020815 100%) !important;
}

body.dashboard-body::before,
body.admin-console-body::before {
  background:
    linear-gradient(rgba(106, 187, 255, .010) 1px, transparent 1px),
    linear-gradient(90deg, rgba(106, 187, 255, .009) 1px, transparent 1px) !important;
  background-size: 48px 48px !important;
  opacity: .22 !important;
}

body.dashboard-body .main,
body.admin-console-body .main,
body.dashboard-body .content,
body.admin-console-body .content,
body.admin-console-body .admin-content {
  background: transparent !important;
}

body.dashboard-body .topbar,
body.admin-console-body .topbar,
body.admin-console-body .admin-topbar {
  background:
    linear-gradient(180deg, rgba(4, 14, 27, .975), rgba(3, 10, 20, .945)) !important;
  border-bottom-color: rgba(84, 180, 245, .16) !important;
  box-shadow: 0 12px 30px rgba(0, 4, 12, .32) !important;
}

body.dashboard-body .sidebar,
body.admin-console-body .sidebar,
body.admin-console-body .admin-sidebar {
  background:
    linear-gradient(180deg, rgba(3, 12, 25, .992), rgba(2, 8, 17, .996)) !important;
  border-right-color: rgba(84, 180, 245, .13) !important;
  box-shadow: 16px 0 36px rgba(0, 3, 10, .28) !important;
}

.card,
.product-card,
.analysis-card,
.chart-box,
.admin-section,
.admin-users-card,
.invite-card,
.empty-panel,
.quick-link,
.trend-tile,
.stat,
.signal,
.ai-card,
.mine-card,
.alert-card,
.summary-pill,
.io-inline-row,
.weight-row,
.trade-row,
.scenario-row,
.ai-row {
  background:
    linear-gradient(180deg, rgba(6, 20, 38, .925), rgba(4, 13, 25, .935)) !important;
  border-color: rgba(88, 178, 240, .125) !important;
  box-shadow:
    0 14px 30px rgba(0, 5, 14, .34),
    inset 0 1px 0 rgba(255,255,255,.032) !important;
}

.product-card {
  background:
    radial-gradient(circle at 16% 12%, rgba(42, 147, 238, .045), transparent 34%),
    linear-gradient(180deg, rgba(7, 22, 41, .925), rgba(4, 13, 25, .94)) !important;
}

.card-head,
.product-detail-card .card-head,
.admin-section-head {
  background:
    linear-gradient(180deg, rgba(255,255,255,.018), rgba(255,255,255,0)) !important;
  border-bottom-color: rgba(88,178,240,.080) !important;
}

.sync-watch-toolbar,
.sync-selected-row,
.sync-watch-readout.is-active {
  background:
    linear-gradient(90deg, rgba(35, 137, 230, .030), rgba(4, 14, 27, .18), rgba(35, 137, 230, .020)) !important;
  border-color: rgba(88,178,240,.070) !important;
}

.sync-chart-shell {
  background:
    linear-gradient(180deg, rgba(5, 18, 34, .24), rgba(3, 10, 20, .18)),
    #020b17 !important;
  border-bottom-color: rgba(88,178,240,.055) !important;
}

.sync-stack-svg {
  background: transparent !important;
}

table {
  background: rgba(3, 13, 26, .38) !important;
  border-color: rgba(88,178,240,.08) !important;
}

th {
  background: rgba(7, 22, 40, .74) !important;
}

td {
  border-bottom-color: rgba(255,255,255,.045) !important;
}

/* =========================================================
   V25.50 行情总览修复
   1）宽屏优先一行展示 6 个贵金属行情卡片，汇率产品放到最新基差行最后，窗口变窄时仍沿用原有 4/3/2/1 自适应断点。
   2）强化每张行情卡片独立周期下拉框的点击层级，避免实时刷新打断操作。
   ========================================================= */
@media (min-width: 1321px) {
  .market-grid {
    grid-template-columns: repeat(6, minmax(0, 1fr)) !important;
  }
}

.product-period-pill {
  position: relative !important;
}

.product-period-pill span {
  pointer-events: none !important;
}

.product-period-select {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  opacity: 0 !important;
  cursor: pointer !important;
  z-index: 3 !important;
  pointer-events: auto !important;
}

/* =========================================================
   V25.52 行情卡片独立周期菜单修复
   - 小卡片不再依赖原生 select，避免实时刷新时 change 事件丢失。
   - 周期选项浮层挂到 body，避免被 product-card overflow 裁切。
   ========================================================= */
.product-period-control {
  padding: 0 23px 0 9px !important;
  overflow: hidden !important;
}

.product-period-button {
  appearance: none;
  -webkit-appearance: none;
  border: 0;
  background: transparent;
  color: inherit;
  font: inherit;
  font-weight: 950;
  line-height: 25px;
  width: 100%;
  height: 100%;
  padding: 0;
  margin: 0;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  min-width: 0;
}

.product-period-button:focus-visible {
  outline: 1px solid rgba(65,199,255,.86);
  outline-offset: 2px;
  border-radius: 999px;
}

.product-period-label {
  display: block;
  max-width: 54px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  pointer-events: none;
}

.product-period-pill.is-open {
  border-color: rgba(65,199,255,.72) !important;
  box-shadow:
    0 0 0 1px rgba(65,199,255,.12),
    0 0 20px rgba(65,199,255,.16),
    inset 0 1px 0 rgba(255,255,255,.08) !important;
}

.product-period-portal {
  position: fixed;
  z-index: 9999;
  display: none;
  padding: 6px;
  border-radius: 12px;
  border: 1px solid rgba(122, 190, 255, .30);
  background:
    radial-gradient(circle at 20% 0%, rgba(65,199,255,.18), transparent 45%),
    linear-gradient(180deg, rgba(10, 31, 55, .98), rgba(5, 16, 31, .99));
  box-shadow:
    0 18px 40px rgba(0,0,0,.42),
    inset 0 1px 0 rgba(255,255,255,.08);
  backdrop-filter: blur(14px);
}

.product-period-portal.is-open {
  display: grid;
  gap: 3px;
}

.product-period-option {
  appearance: none;
  -webkit-appearance: none;
  border: 0;
  border-radius: 8px;
  min-height: 25px;
  padding: 4px 9px;
  background: transparent;
  color: rgba(216, 236, 255, .88);
  font-size: 11px;
  font-weight: 900;
  text-align: left;
  cursor: pointer;
  white-space: nowrap;
}

.product-period-option:hover,
.product-period-option:focus-visible {
  background: rgba(65,199,255,.16);
  color: #ffffff;
  outline: none;
}

.product-period-option.is-active {
  background: linear-gradient(90deg, rgba(22,210,142,.24), rgba(65,199,255,.14));
  color: #bfffe8;
}

/* =========================================================
   V25.53 周期下拉统一与内外盘过滤修复
   1）行情卡片与小板块统一使用同一套 dark portal 周期菜单。
   2）整个胶囊区域都可点击，不再只有文字区域可点。
   3）内外盘比由 JS 过滤伦敦金银与汇率产品，只保留有成交方向意义的产品。
   ========================================================= */
.period-dropdown {
  position: relative !important;
  cursor: pointer !important;
  user-select: none !important;
}

.period-dropdown * {
  cursor: pointer !important;
}

.period-dropdown-button,
.product-period-button,
.mini-period-button {
  appearance: none !important;
  -webkit-appearance: none !important;
  border: 0 !important;
  background: transparent !important;
  color: inherit !important;
  font: inherit !important;
  font-weight: 950 !important;
  min-width: 0 !important;
  margin: 0 !important;
  cursor: pointer !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  text-align: center !important;
}

.product-period-button {
  width: 100% !important;
  height: 100% !important;
  line-height: 25px !important;
  padding: 0 !important;
}

.mini-period-button {
  height: 24px !important;
  min-width: 64px !important;
  padding: 0 18px 0 4px !important;
  line-height: 22px !important;
}

.period-dropdown-label,
.product-period-label,
.mini-period-label,
.period-control-caption {
  pointer-events: none !important;
}

.period-dropdown::after {
  content: "▾";
  position: absolute;
  right: 8px;
  top: 50%;
  transform: translateY(-52%);
  color: rgba(216,236,255,.78);
  font-size: 10px;
  pointer-events: none;
}

.product-period-pill::after {
  content: "" !important;
}

.mini-period-control::after {
  right: 11px;
}

.product-period-pill.is-open,
.mini-period-control.is-open,
.period-dropdown.is-open {
  border-color: rgba(65,199,255,.72) !important;
  box-shadow:
    0 0 0 1px rgba(65,199,255,.12),
    0 0 20px rgba(65,199,255,.16),
    inset 0 1px 0 rgba(255,255,255,.08) !important;
}

.period-options-portal,
.product-period-portal {
  position: fixed !important;
  z-index: 9999 !important;
  display: none;
  padding: 6px !important;
  border-radius: 12px !important;
  border: 1px solid rgba(122, 190, 255, .30) !important;
  background:
    radial-gradient(circle at 20% 0%, rgba(65,199,255,.18), transparent 45%),
    linear-gradient(180deg, rgba(10, 31, 55, .98), rgba(5, 16, 31, .99)) !important;
  box-shadow:
    0 18px 40px rgba(0,0,0,.42),
    inset 0 1px 0 rgba(255,255,255,.08) !important;
  backdrop-filter: blur(14px);
}

.period-options-portal.is-open,
.product-period-portal.is-open {
  display: grid !important;
  gap: 3px !important;
}

.period-dropdown-option,
.product-period-option {
  appearance: none !important;
  -webkit-appearance: none !important;
  border: 0 !important;
  border-radius: 8px !important;
  min-height: 25px !important;
  padding: 4px 9px !important;
  background: transparent !important;
  color: rgba(216, 236, 255, .88) !important;
  font-size: 11px !important;
  font-weight: 900 !important;
  text-align: left !important;
  cursor: pointer !important;
  white-space: nowrap !important;
}

.period-dropdown-option:hover,
.period-dropdown-option:focus-visible,
.product-period-option:hover,
.product-period-option:focus-visible {
  background: rgba(65,199,255,.16) !important;
  color: #ffffff !important;
  outline: none !important;
}

.period-dropdown-option.is-active,
.product-period-option.is-active {
  background: linear-gradient(90deg, rgba(22,210,142,.24), rgba(65,199,255,.14)) !important;
  color: #bfffe8 !important;
}


/* =========================================================
   V25.55 行情总览最新基差行
   - 仅展示：价差组合名称、最新价差时间、最新价差、价差变化值。
   - 第二行基差小框内容上下、左右居中，不显示状态标签/比例条。
   ========================================================= */
.market-body {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.basis-latest-strip {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
  align-items: stretch;
}

.basis-latest-card {
  position: relative;
  min-width: 0;
  min-height: 104px;
  padding: 14px 16px;
  border-radius: 16px;
  border: 1px solid rgba(112, 166, 232, .16);
  background:
    radial-gradient(circle at 50% 0%, rgba(65, 199, 255, .075), transparent 42%),
    linear-gradient(180deg, rgba(7, 24, 45, .92), rgba(4, 14, 27, .94));
  box-shadow:
    0 12px 26px rgba(0, 5, 14, .28),
    inset 0 1px 0 rgba(255,255,255,.045);
  overflow: hidden;
  display: grid;
  grid-template-rows: auto auto 1fr auto;
  align-items: center;
  justify-items: center;
  text-align: center;
  row-gap: 5px;
}

.basis-latest-card::before {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(83, 182, 255, .32), transparent);
}

.basis-latest-name {
  width: 100%;
  color: rgba(232, 245, 255, .96);
  font-size: clamp(13px, .76vw, 16px);
  font-weight: 950;
  line-height: 1.16;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.basis-latest-time {
  width: 100%;
  color: rgba(143, 166, 194, .78);
  font-size: clamp(10px, .54vw, 12px);
  font-weight: 800;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.basis-latest-value {
  align-self: center;
  font-size: clamp(22px, 1.26vw, 30px);
  line-height: 1;
  font-weight: 1000;
  letter-spacing: -.035em;
  font-variant-numeric: tabular-nums;
}

.basis-latest-change {
  display: inline-flex;
  align-items: baseline;
  justify-content: center;
  gap: 7px;
  max-width: 100%;
  color: rgba(143, 166, 194, .80);
  font-size: clamp(10px, .54vw, 12px);
  font-weight: 850;
  white-space: nowrap;
}

.basis-latest-change strong {
  font-size: clamp(11px, .60vw, 13px);
  font-weight: 950;
  font-variant-numeric: tabular-nums;
}

.basis-latest-empty {
  grid-column: 1 / -1;
  min-height: 72px;
  display: grid;
  place-items: center;
  color: rgba(143,166,194,.72);
  border-radius: 16px;
  border: 1px dashed rgba(112,166,232,.16);
  background: rgba(5, 18, 34, .42);
  font-weight: 850;
}

@media (max-width: 1180px) {
  .basis-latest-strip {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 720px) {
  .basis-latest-strip {
    grid-template-columns: minmax(0, 1fr);
  }
}



/* =========================================================
   V25.56 行情总览布局微调
   - 第一行只放 6 个贵金属产品卡片。
   - 美元兑离岸人民币放到最新基差行最后一个位置。
   - 最新基差卡片与汇率卡片同高对齐。
   ========================================================= */
:root {
  --basis-row-card-h: clamp(104px, 5.9vw, 132px);
}

@media (min-width: 1321px) {
  .market-grid {
    grid-template-columns: repeat(6, minmax(0, 1fr)) !important;
  }
}

.basis-latest-strip.with-fx-card {
  grid-template-columns: repeat(5, minmax(0, 1fr));
}

.basis-latest-card,
.basis-latest-strip .market-fx-card {
  min-height: var(--basis-row-card-h) !important;
  height: 100%;
}

.basis-latest-strip .market-fx-card {
  align-self: stretch;
  border-radius: 16px;
}

.basis-latest-strip .market-fx-card .product-tape {
  min-height: var(--basis-row-card-h) !important;
}

.basis-latest-strip .market-fx-card .product-left {
  padding: clamp(8px, .52vw, 12px) clamp(7px, .48vw, 12px) clamp(7px, .42vw, 10px);
}

.basis-latest-strip .market-fx-card .product-right {
  padding: clamp(8px, .52vw, 12px) clamp(7px, .48vw, 12px) clamp(7px, .42vw, 10px) clamp(6px, .42vw, 10px);
  gap: clamp(4px, .26vw, 7px);
}

.basis-latest-strip .market-fx-card .product-name {
  font-size: clamp(11px, .62vw, 14px);
}

.basis-latest-strip .market-fx-card .product-code {
  font-size: clamp(8px, .45vw, 10px);
  margin-top: 2px;
}

.basis-latest-strip .market-fx-card .last-price {
  font-size: clamp(20px, 1.12vw, 27px);
  margin: clamp(7px, .52vw, 12px) 0 4px;
}

.basis-latest-strip .market-fx-card .delta {
  font-size: clamp(9px, .48vw, 11px);
}

.basis-latest-strip .market-fx-card .spark {
  height: clamp(18px, 1.0vw, 28px);
}

.basis-latest-strip .market-fx-card .order-top,
.basis-latest-strip .market-fx-card .order-label {
  font-size: clamp(8px, .45vw, 10px);
}

.basis-latest-strip .market-fx-card .order-net,
.basis-latest-strip .market-fx-card .order-value {
  font-size: clamp(9px, .52vw, 12px);
}

.basis-latest-strip .market-fx-card .order-stats {
  gap: clamp(4px, .28vw, 7px);
}

.basis-latest-strip .market-fx-card .order-row {
  grid-template-columns: minmax(54px, 74px) minmax(38px, 1fr) minmax(34px, 48px);
  gap: clamp(4px, .28vw, 6px);
}

.basis-latest-strip .market-fx-card .micro-bar {
  height: 7px;
}

@media (max-width: 1320px) and (min-width: 1081px) {
  .basis-latest-strip.with-fx-card {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (max-width: 1080px) and (min-width: 721px) {
  .basis-latest-strip.with-fx-card {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 720px) {
  .basis-latest-strip.with-fx-card {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* =========================================================
   V25.57 - 基差板块接入 basis_kline / 移除订单流预留区后布局优化
   ========================================================= */
.second-row-grid {
  grid-template-columns: minmax(500px, 1.22fr) minmax(360px, .96fr) minmax(360px, .96fr) !important;
  gap: clamp(14px, .95vw, 18px) !important;
}

.second-row-grid > .basis-kline-card {
  min-width: 0;
}

.basis-kline-card .card-title p {
  max-width: 28em;
}

.basis-kline-table-wrap {
  overflow: auto !important;
}

.basis-kline-table {
  min-width: 640px;
  table-layout: fixed;
}

.basis-kline-table th,
.basis-kline-table td {
  text-align: left;
  white-space: nowrap;
}

.basis-kline-table th:nth-child(1),
.basis-kline-table td:nth-child(1) { width: 25%; }
.basis-kline-table th:nth-child(2),
.basis-kline-table td:nth-child(2) { width: 11%; }
.basis-kline-table th:nth-child(3),
.basis-kline-table td:nth-child(3) { width: 23%; }
.basis-kline-table th:nth-child(4),
.basis-kline-table td:nth-child(4),
.basis-kline-table th:nth-child(5),
.basis-kline-table td:nth-child(5),
.basis-kline-table th:nth-child(6),
.basis-kline-table td:nth-child(6) {
  width: 13.5%;
  text-align: right;
}

.basis-kline-table .basis-combo-name {
  font-weight: 800;
  color: var(--text);
  overflow: hidden;
  text-overflow: ellipsis;
}

.basis-kline-table .basis-kline-time {
  color: var(--muted);
  font-variant-numeric: tabular-nums;
}

.second-row-grid .basis-body .wide-table tbody tr {
  height: 25% !important;
}

@media (max-width: 1380px) and (min-width: 981px) {
  .second-row-grid {
    grid-template-columns: minmax(460px, 1.18fr) minmax(330px, .95fr) minmax(330px, .95fr) !important;
  }
  .basis-kline-table {
    min-width: 610px;
  }
}

@media (max-width: 980px) {
  .second-row-grid {
    grid-template-columns: minmax(0, 1fr) !important;
  }
  .basis-kline-table {
    min-width: 640px;
  }
}


/* =========================================================
   V25.63 - 基差表最小排版修复：50/25/25 + 自适应列宽
   基于 v25_59，只修排版与默认 5分钟，不触碰 snapshot 瘦身。
   ========================================================= */
.second-row-grid {
  grid-template-columns: minmax(620px, 2fr) minmax(320px, 1fr) minmax(320px, 1fr) !important;
  gap: clamp(14px, .95vw, 18px) !important;
}

.second-row-grid > .basis-kline-card {
  min-width: 0 !important;
}

.basis-kline-table-wrap {
  overflow-x: auto !important;
  overflow-y: hidden !important;
}

.basis-kline-table {
  width: 100% !important;
  min-width: 760px !important;
  table-layout: auto !important;
}

.basis-kline-table th,
.basis-kline-table td {
  white-space: nowrap !important;
  text-align: left;
}

.basis-kline-table th:nth-child(1),
.basis-kline-table td:nth-child(1) {
  width: 22% !important;
  min-width: 156px;
}

.basis-kline-table th:nth-child(2),
.basis-kline-table td:nth-child(2) {
  width: 26% !important;
  min-width: 180px;
}

.basis-kline-table th:nth-child(3),
.basis-kline-table td:nth-child(3) {
  width: 8% !important;
  min-width: 64px;
}

.basis-kline-table th:nth-child(4),
.basis-kline-table td:nth-child(4),
.basis-kline-table th:nth-child(5),
.basis-kline-table td:nth-child(5),
.basis-kline-table th:nth-child(6),
.basis-kline-table td:nth-child(6) {
  width: 14.66% !important;
  min-width: 100px;
  text-align: right !important;
}

.basis-kline-table .basis-combo-name {
  max-width: none !important;
  overflow: visible !important;
  text-overflow: clip !important;
  font-weight: 800;
}

.basis-kline-table .basis-kline-time {
  color: var(--muted);
  font-variant-numeric: tabular-nums;
}

@media (max-width: 1380px) and (min-width: 981px) {
  .second-row-grid {
    grid-template-columns: minmax(560px, 1.8fr) minmax(300px, 1fr) minmax(300px, 1fr) !important;
  }
  .basis-kline-table {
    min-width: 730px !important;
  }
}

@media (max-width: 980px) {
  .second-row-grid {
    grid-template-columns: minmax(0, 1fr) !important;
  }
  .basis-kline-table {
    min-width: 760px !important;
  }
}

/* =========================================================
   V25.76 Sync watch axis/readout polish
   - 同步观察底部详情不再用省略号截断
   - 支持多图层读数换行展示，必要时内部滚动
   - v25_77: 仅补回在 v25_76 样式文件中丢失的稳定基线样式，保留本段同步观察读数优化。
   ========================================================= */
.sync-watch-readout {
  align-items: flex-start !important;
  overflow: visible !important;
}

.sync-watch-readout.is-active {
  min-height: 34px !important;
  max-height: 118px !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
  scrollbar-width: thin;
  scrollbar-color: rgba(102,178,255,.30) rgba(255,255,255,.035);
}

.sync-watch-readout.is-active::-webkit-scrollbar {
  width: 6px;
}

.sync-watch-readout.is-active::-webkit-scrollbar-track {
  background: rgba(255,255,255,.035);
}

.sync-watch-readout.is-active::-webkit-scrollbar-thumb {
  background: rgba(102,178,255,.30);
  border-radius: 999px;
}

.sync-watch-readout > b {
  padding-top: 3px !important;
  white-space: nowrap !important;
}

.sync-readout-items {
  flex: 1 1 auto !important;
  width: auto !important;
  max-width: 100% !important;
  display: flex !important;
  flex-wrap: wrap !important;
  align-items: flex-start !important;
  gap: 6px !important;
  overflow: visible !important;
}

.sync-readout-item {
  max-width: none !important;
  min-width: 0 !important;
  white-space: normal !important;
  border-radius: 10px !important;
  padding: 4px 8px !important;
}

.sync-readout-item strong,
.sync-readout-item em {
  overflow: visible !important;
  text-overflow: clip !important;
  white-space: normal !important;
  overflow-wrap: anywhere !important;
  line-height: 1.32 !important;
}

.sync-readout-item strong {
  flex: 0 0 auto !important;
}

.sync-readout-item em {
  flex: 1 1 auto !important;
}


/* =========================================================
   v25_85 同步观察：批量多选添加面板
   基于 v25_84 稳定完整样式，仅替换同步观察添加菜单样式；不覆盖行情总览/基差/内外盘布局。
   ========================================================= */
.sync-add-menu-wrap {
  position: relative !important;
  overflow: visible !important;
  z-index: 80;
}

.sync-add-menu-root {
  position: relative;
  flex: 1 1 auto;
  min-width: 0;
}

.sync-add-menu-button {
  width: 100%;
  min-width: 220px;
  height: 30px;
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  border: 1px solid rgba(102,178,255,.18);
  border-radius: 999px;
  padding: 0 10px 0 14px;
  color: #e2f2ff;
  background:
    linear-gradient(180deg, rgba(16,50,83,.72), rgba(8,30,55,.78));
  box-shadow: inset 0 1px 0 rgba(255,255,255,.06), 0 0 0 1px rgba(0,0,0,.14);
  font-size: 13px;
  font-weight: 900;
  cursor: pointer;
  outline: none;
}

.sync-add-menu-button:hover,
.sync-add-menu-root.is-open .sync-add-menu-button {
  border-color: rgba(65,199,255,.42);
  background:
    linear-gradient(180deg, rgba(19,64,102,.82), rgba(9,38,70,.84));
  box-shadow: 0 0 0 1px rgba(65,199,255,.10), 0 0 18px rgba(65,199,255,.10);
}

.sync-add-menu-button-text {
  min-width: 0;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.sync-add-menu-caret {
  flex: 0 0 auto;
  color: #9fc7ef;
  font-size: 14px;
  line-height: 1;
}

.sync-picker-panel {
  position: absolute;
  left: 0;
  top: calc(100% + 8px);
  width: min(820px, calc(100vw - 120px));
  max-height: min(72vh, 680px);
  display: none;
  flex-direction: column;
  z-index: 3000;
  color: #dceeff;
  border: 1px solid rgba(73,168,232,.34);
  border-radius: 16px;
  background:
    radial-gradient(circle at 20% 0%, rgba(38,105,160,.28), transparent 34%),
    linear-gradient(180deg, rgba(9,30,52,.98), rgba(5,18,34,.98));
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.08),
    0 0 0 1px rgba(0,0,0,.28),
    0 22px 52px rgba(0,0,0,.55);
  backdrop-filter: blur(12px);
  overflow: hidden;
}

.sync-add-menu-root.is-open > .sync-picker-panel {
  display: flex;
}

.sync-picker-panel-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 14px;
  padding: 14px 16px 12px;
  border-bottom: 1px solid rgba(102,178,255,.14);
  background: rgba(7,25,46,.58);
}

.sync-picker-panel-head strong {
  display: block;
  color: #f4fbff;
  font-size: 15px;
  font-weight: 1000;
  letter-spacing: .02em;
}

.sync-picker-panel-head span {
  display: block;
  margin-top: 4px;
  color: rgba(166,205,243,.78);
  font-size: 12px;
  font-weight: 700;
}

.sync-picker-close {
  width: 26px;
  height: 26px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(102,178,255,.18);
  border-radius: 9px;
  color: #cae8ff;
  background: rgba(16,45,75,.72);
  cursor: pointer;
  font-size: 18px;
  line-height: 1;
  font-weight: 900;
}

.sync-picker-close:hover {
  color: #fff;
  border-color: rgba(65,199,255,.46);
  background: rgba(28,91,137,.78);
}

.sync-picker-scroll {
  padding: 14px;
  overflow: auto;
  display: grid;
  grid-template-columns: minmax(240px, .9fr) minmax(260px, 1fr);
  gap: 12px;
}

.sync-picker-section {
  min-width: 0;
  border: 1px solid rgba(102,178,255,.14);
  border-radius: 14px;
  background: rgba(7,28,49,.58);
  overflow: hidden;
}

.sync-picker-indicators {
  grid-column: 1 / -1;
}

.sync-picker-section-head {
  min-height: 42px;
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  padding: 10px 12px;
  border-bottom: 1px solid rgba(102,178,255,.12);
  background: linear-gradient(90deg, rgba(21,69,107,.58), rgba(8,31,54,.34));
}

.sync-picker-section-head strong {
  color: #eff8ff;
  font-size: 14px;
  font-weight: 1000;
  white-space: nowrap;
}

.sync-picker-section-head span {
  min-width: 0;
  color: rgba(166,205,243,.72);
  font-size: 12px;
  font-weight: 700;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.sync-picker-items {
  padding: 6px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.sync-picker-subgrid {
  padding: 8px;
  display: grid;
  grid-template-columns: repeat(3, minmax(220px, 1fr));
  gap: 10px;
}

.sync-picker-subsection {
  background: rgba(6,23,42,.50);
}

.sync-picker-item {
  min-width: 0;
  min-height: 34px;
  display: grid;
  grid-template-columns: 18px minmax(0, 1fr) auto;
  align-items: center;
  gap: 8px;
  border: 1px solid transparent;
  border-radius: 10px;
  padding: 7px 9px;
  color: #dceeff;
  cursor: pointer;
  user-select: none;
}

.sync-picker-item:hover {
  border-color: rgba(65,199,255,.22);
  background: rgba(22,90,137,.36);
}

.sync-picker-item.is-active,
.sync-picker-item.is-disabled {
  cursor: default;
  color: rgba(202,232,255,.62);
  background: rgba(255,255,255,.035);
}

.sync-picker-item.is-active:hover,
.sync-picker-item.is-disabled:hover {
  border-color: transparent;
  background: rgba(255,255,255,.035);
}

.sync-picker-checkbox {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.sync-picker-box {
  width: 16px;
  height: 16px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(136,193,240,.46);
  border-radius: 5px;
  background: rgba(4,18,34,.82);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.05);
}

.sync-picker-checkbox:checked + .sync-picker-box {
  border-color: rgba(53,213,255,.88);
  background: linear-gradient(180deg, rgba(34,176,230,.92), rgba(22,108,179,.94));
  box-shadow: 0 0 12px rgba(42,185,255,.18);
}

.sync-picker-checkbox:checked + .sync-picker-box::after {
  content: '✓';
  color: #fff;
  font-size: 12px;
  font-weight: 1000;
  line-height: 1;
}

.sync-picker-checkbox:indeterminate + .sync-picker-box {
  border-color: rgba(53,213,255,.72);
  background: rgba(28,112,166,.82);
}

.sync-picker-checkbox:indeterminate + .sync-picker-box::after {
  content: '—';
  color: #fff;
  font-size: 12px;
  font-weight: 1000;
  line-height: 1;
}

.sync-picker-checkbox:disabled + .sync-picker-box {
  opacity: .45;
  border-color: rgba(136,193,240,.18);
  background: rgba(255,255,255,.04);
}

.sync-picker-main {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.sync-picker-name {
  min-width: 0;
  color: #eef8ff;
  font-size: 13px;
  font-weight: 900;
  line-height: 1.15;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.sync-picker-desc {
  min-width: 0;
  color: rgba(159,199,239,.70);
  font-size: 11px;
  font-weight: 700;
  line-height: 1.15;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.sync-picker-status {
  justify-self: end;
  padding: 2px 6px;
  border: 1px solid rgba(102,178,255,.14);
  border-radius: 999px;
  color: rgba(192,226,255,.70);
  background: rgba(255,255,255,.04);
  font-size: 11px;
  font-weight: 900;
  white-space: nowrap;
}

.sync-picker-all {
  margin-bottom: 2px;
  border-color: rgba(102,178,255,.10);
  background: rgba(31,94,145,.18);
}

.sync-picker-all .sync-picker-name {
  color: #ffffff;
}

.sync-picker-empty {
  padding: 12px;
  color: rgba(159,199,239,.72);
  font-size: 13px;
  font-weight: 700;
}

.sync-picker-footer {
  position: sticky;
  bottom: 0;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
  padding: 12px 14px;
  border-top: 1px solid rgba(102,178,255,.14);
  background: rgba(5,18,34,.96);
}

.sync-picker-count {
  margin-right: auto;
  color: rgba(202,232,255,.80);
  font-size: 13px;
  font-weight: 800;
}

.sync-picker-count b {
  color: #67d7ff;
}

.sync-picker-action {
  min-width: 82px;
  height: 30px;
}

.sync-picker-action.primary {
  border-color: rgba(31,201,255,.34);
  color: #f4fbff;
  background: linear-gradient(180deg, rgba(35,139,203,.86), rgba(15,84,143,.86));
}

.sync-picker-action.primary:hover {
  border-color: rgba(67,219,255,.56);
  background: linear-gradient(180deg, rgba(44,163,228,.92), rgba(20,100,162,.92));
}

@media (max-width: 1180px) {
  .sync-picker-panel {
    width: min(760px, calc(100vw - 88px));
  }

  .sync-picker-scroll {
    grid-template-columns: 1fr 1fr;
  }

  .sync-picker-subgrid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 860px) {
  .sync-picker-panel {
    position: fixed;
    left: 12px;
    right: 12px;
    top: 72px;
    width: auto;
    max-height: calc(100vh - 92px);
  }

  .sync-picker-scroll {
    grid-template-columns: 1fr;
  }

  .sync-picker-indicators {
    grid-column: auto;
  }

  .sync-picker-footer {
    flex-wrap: wrap;
  }
}


/* =========================================================
   v25_86 同步观察：批量添加面板小屏滚动/可视高度修复
   - 修复小屏/竖屏下批量添加面板显示不全
   - 面板主体允许纵向滚动，底部操作区保持可见
   - 增强触屏滚动体验，避免“看得到但拖不动”
   ========================================================= */
.sync-picker-panel {
  min-height: 0;
}

.sync-picker-scroll {
  min-height: 0;
  flex: 1 1 auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  touch-action: pan-y;
}

.sync-picker-items,
.sync-picker-subgrid,
.sync-picker-subsection,
.sync-picker-section {
  min-height: 0;
}

.sync-picker-section {
  display: flex;
  flex-direction: column;
}

.sync-picker-items {
  flex: 1 1 auto;
}

@media (max-width: 860px) {
  .sync-picker-panel {
    position: fixed;
    left: 10px;
    right: 10px;
    top: max(10px, calc(env(safe-area-inset-top, 0px) + 6px));
    bottom: max(10px, calc(env(safe-area-inset-bottom, 0px) + 6px));
    width: auto;
    max-height: none;
    height: auto;
    border-radius: 18px;
  }

  .sync-picker-panel-head {
    flex: 0 0 auto;
    padding: 12px 14px 10px;
  }

  .sync-picker-panel-head strong {
    font-size: 14px;
  }

  .sync-picker-panel-head span {
    font-size: 11px;
    line-height: 1.35;
  }

  .sync-picker-scroll {
    padding: 10px;
    gap: 10px;
    grid-template-columns: 1fr;
  }

  .sync-picker-section-head {
    min-height: 40px;
    padding: 9px 10px;
  }

  .sync-picker-section-head strong {
    font-size: 13px;
  }

  .sync-picker-section-head span {
    font-size: 11px;
  }

  .sync-picker-items {
    padding: 6px;
  }

  .sync-picker-item {
    min-height: 32px;
    padding: 7px 8px;
  }

  .sync-picker-name {
    font-size: 12px;
    white-space: normal;
    line-height: 1.2;
  }

  .sync-picker-desc {
    font-size: 10px;
    white-space: normal;
    line-height: 1.2;
  }

  .sync-picker-subgrid {
    padding: 8px;
    gap: 8px;
    grid-template-columns: 1fr;
  }

  .sync-picker-footer {
    flex: 0 0 auto;
    position: sticky;
    bottom: 0;
    padding: 10px 12px calc(10px + env(safe-area-inset-bottom, 0px));
    gap: 8px;
  }

  .sync-picker-count {
    width: 100%;
    margin-right: 0;
  }

  .sync-picker-action {
    flex: 1 1 0;
    min-width: 0;
  }
}


/* =========================================================
   v25_87 同步观察：批量添加面板固定浮层 + 折叠分组
   - 桌面端居中固定显示，不再受父容器裁切
   - 中间内容区独立滚动，底部操作区始终可见
   - 产品K线/基差K线默认展开，指标子组默认折叠，减少一次性内容过长
   ========================================================= */
.sync-add-menu-root {
  position: relative;
}

.sync-picker-panel {
  position: fixed !important;
  left: 50% !important;
  top: 50% !important;
  transform: translate(-50%, -50%) !important;
  width: min(980px, calc(100vw - 72px)) !important;
  max-width: calc(100vw - 72px) !important;
  height: min(78vh, 760px) !important;
  max-height: calc(100vh - 72px) !important;
  min-height: 460px;
  grid-template-rows: auto minmax(0, 1fr) auto;
}

.sync-add-menu-root.is-open > .sync-picker-panel {
  display: flex !important;
}

.sync-picker-scroll {
  min-height: 0 !important;
  flex: 1 1 auto !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
  overscroll-behavior: contain !important;
  -webkit-overflow-scrolling: touch !important;
  touch-action: pan-y !important;
}

.sync-picker-panel-head,
.sync-picker-footer {
  flex: 0 0 auto !important;
}

.sync-picker-section-head {
  width: 100%;
  border: 0;
  cursor: pointer;
  appearance: none;
  text-align: left;
}

.sync-picker-section-head:hover {
  background: linear-gradient(90deg, rgba(31,93,139,.72), rgba(8,31,54,.40));
}

.sync-picker-section-title {
  min-width: 0;
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  flex: 1 1 auto;
}

.sync-picker-section-caret {
  flex: 0 0 auto;
  color: rgba(188,226,255,.78);
  font-size: 14px;
  font-weight: 1000;
  transform: rotate(0deg);
  transition: transform .16s ease, color .16s ease;
}

.sync-picker-section.is-collapsed > .sync-picker-section-head .sync-picker-section-caret {
  transform: rotate(-90deg);
  color: rgba(159,199,239,.62);
}

.sync-picker-section.is-collapsed > .sync-picker-items {
  display: none !important;
}

.sync-picker-section.is-collapsed {
  background: rgba(7,28,49,.42);
}

.sync-picker-section.is-collapsed > .sync-picker-section-head {
  border-bottom: 0;
}

.sync-picker-subsection.is-collapsed {
  min-height: 0;
}

.sync-picker-subsection.is-collapsed > .sync-picker-section-head {
  min-height: 42px;
}

.sync-picker-subgrid {
  align-items: start;
}

.sync-picker-indicators .sync-picker-section-head {
  cursor: default;
}

.sync-picker-indicators > .sync-picker-section-head:hover {
  background: linear-gradient(90deg, rgba(21,69,107,.58), rgba(8,31,54,.34));
}

@media (max-width: 1180px) {
  .sync-picker-panel {
    width: min(920px, calc(100vw - 48px)) !important;
    max-width: calc(100vw - 48px) !important;
  }
}

@media (max-width: 860px) {
  .sync-picker-panel {
    left: 10px !important;
    right: 10px !important;
    top: max(10px, calc(env(safe-area-inset-top, 0px) + 6px)) !important;
    bottom: max(10px, calc(env(safe-area-inset-bottom, 0px) + 6px)) !important;
    transform: none !important;
    width: auto !important;
    max-width: none !important;
    height: auto !important;
    max-height: none !important;
    min-height: 0 !important;
  }

  .sync-picker-scroll {
    grid-template-columns: 1fr !important;
  }

  .sync-picker-panel-head strong {
    font-size: 14px;
  }

  .sync-picker-panel-head span {
    font-size: 11px;
    line-height: 1.35;
  }

  .sync-picker-section-title {
    align-items: flex-start;
    flex-direction: column;
    gap: 3px;
  }

  .sync-picker-section-head {
    min-height: 42px;
  }

  .sync-picker-subgrid {
    grid-template-columns: 1fr !important;
  }
}


/* =========================================================
   v25_88 同步观察：批量添加面板滚轮控制与区域内滚动
   - 解决全部展开后部分内容被截断、PC端鼠标滚轮不好用的问题
   - 面板主体、产品/基差列表、指标子组均可按需独立滚动
   - 底部操作区继续固定可见
   ========================================================= */
.sync-picker-panel {
  height: min(84vh, 820px) !important;
  max-height: calc(100vh - 56px) !important;
}

.sync-picker-scroll {
  overflow-y: auto !important;
  overflow-x: hidden !important;
  scrollbar-width: thin;
  scrollbar-color: rgba(102,178,255,.32) rgba(255,255,255,.04);
}

.sync-picker-scroll::-webkit-scrollbar,
.sync-picker-items::-webkit-scrollbar,
.sync-picker-subgrid::-webkit-scrollbar {
  width: 7px;
  height: 7px;
}

.sync-picker-scroll::-webkit-scrollbar-track,
.sync-picker-items::-webkit-scrollbar-track,
.sync-picker-subgrid::-webkit-scrollbar-track {
  background: rgba(255,255,255,.035);
  border-radius: 999px;
}

.sync-picker-scroll::-webkit-scrollbar-thumb,
.sync-picker-items::-webkit-scrollbar-thumb,
.sync-picker-subgrid::-webkit-scrollbar-thumb {
  background: rgba(102,178,255,.30);
  border-radius: 999px;
}

.sync-picker-scroll::-webkit-scrollbar-thumb:hover,
.sync-picker-items::-webkit-scrollbar-thumb:hover,
.sync-picker-subgrid::-webkit-scrollbar-thumb:hover {
  background: rgba(102,178,255,.46);
}

.sync-picker-products .sync-picker-items,
.sync-picker-basis .sync-picker-items {
  max-height: min(34vh, 300px);
  overflow-y: auto;
  overflow-x: hidden;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  touch-action: pan-y;
  padding-right: 8px;
}

.sync-picker-indicators {
  max-height: min(44vh, 400px);
  display: flex;
  flex-direction: column;
}

.sync-picker-indicators > .sync-picker-section-head {
  flex: 0 0 auto;
}

.sync-picker-indicators > .sync-picker-subgrid {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  overflow-x: hidden;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  touch-action: pan-y;
  padding-right: 10px;
}

.sync-picker-subsection.is-open .sync-picker-items {
  max-height: 210px;
  overflow-y: auto;
  overflow-x: hidden;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  touch-action: pan-y;
  padding-right: 8px;
}

.sync-picker-section.is-collapsed .sync-picker-items {
  max-height: 0 !important;
  overflow: hidden !important;
}

@media (min-width: 861px) {
  .sync-picker-panel {
    width: min(1080px, calc(100vw - 64px)) !important;
  }

  .sync-picker-scroll {
    grid-template-columns: minmax(300px, 1fr) minmax(300px, 1fr);
    align-items: start;
  }

  .sync-picker-subgrid {
    grid-template-columns: repeat(3, minmax(230px, 1fr));
  }
}

@media (max-width: 860px) {
  .sync-picker-panel {
    height: auto !important;
    max-height: none !important;
  }

  .sync-picker-products .sync-picker-items,
  .sync-picker-basis .sync-picker-items,
  .sync-picker-subsection.is-open .sync-picker-items {
    max-height: none;
    overflow: visible;
    padding-right: 6px;
  }

  .sync-picker-indicators {
    max-height: none;
  }

  .sync-picker-indicators > .sync-picker-subgrid {
    max-height: none;
    overflow: visible;
    padding-right: 8px;
  }
}


/* =========================================================
   v25_89 同步观察：批量添加面板默认展开 + 移动端可用性强化
   - PC端指标子组默认展开后，面板主体继续可滚轮查看全部内容
   - 移动端/窄屏改为近全屏单列面板，主内容区统一滚动，避免内部滚动嵌套卡住
   ========================================================= */

.sync-picker-panel {
  width: min(1120px, calc(100vw - 56px)) !important;
  height: min(88vh, 860px) !important;
  max-height: calc(100vh - 44px) !important;
}

.sync-picker-scroll {
  align-content: start;
}

.sync-picker-subsection.is-open .sync-picker-items {
  max-height: 260px;
}

.sync-picker-indicators {
  max-height: none;
}

.sync-picker-indicators > .sync-picker-subgrid {
  max-height: min(42vh, 430px);
}

@media (max-width: 860px) {
  .sync-picker-panel {
    left: 6px !important;
    right: 6px !important;
    top: max(6px, calc(env(safe-area-inset-top, 0px) + 4px)) !important;
    bottom: max(6px, calc(env(safe-area-inset-bottom, 0px) + 4px)) !important;
    width: auto !important;
    height: auto !important;
    max-width: none !important;
    max-height: none !important;
    min-height: 0 !important;
    border-radius: 14px !important;
  }

  .sync-picker-panel-head {
    padding: 10px 12px 8px !important;
  }

  .sync-picker-panel-head strong {
    font-size: 14px !important;
  }

  .sync-picker-panel-head span {
    font-size: 11px !important;
  }

  .sync-picker-close {
    width: 30px !important;
    height: 30px !important;
    border-radius: 10px !important;
  }

  .sync-picker-scroll {
    display: flex !important;
    flex-direction: column !important;
    grid-template-columns: none !important;
    gap: 8px !important;
    padding: 8px !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    overscroll-behavior: contain !important;
    -webkit-overflow-scrolling: touch !important;
    touch-action: pan-y !important;
  }

  .sync-picker-section,
  .sync-picker-indicators,
  .sync-picker-subsection {
    flex: 0 0 auto !important;
    max-height: none !important;
    min-height: 0 !important;
    overflow: visible !important;
  }

  .sync-picker-section-head {
    min-height: 38px !important;
    padding: 8px 10px !important;
  }

  .sync-picker-section-head strong {
    font-size: 13px !important;
  }

  .sync-picker-section-head span {
    font-size: 10.5px !important;
  }

  .sync-picker-items,
  .sync-picker-products .sync-picker-items,
  .sync-picker-basis .sync-picker-items,
  .sync-picker-subsection.is-open .sync-picker-items {
    max-height: none !important;
    overflow: visible !important;
    padding: 5px !important;
  }

  .sync-picker-subgrid,
  .sync-picker-indicators > .sync-picker-subgrid {
    display: flex !important;
    flex-direction: column !important;
    grid-template-columns: none !important;
    gap: 8px !important;
    max-height: none !important;
    overflow: visible !important;
    padding: 8px !important;
  }

  .sync-picker-item {
    min-height: 30px !important;
    grid-template-columns: 18px minmax(0, 1fr) auto !important;
    gap: 7px !important;
    padding: 6px 8px !important;
    border-radius: 9px !important;
  }

  .sync-picker-box {
    width: 16px !important;
    height: 16px !important;
  }

  .sync-picker-name {
    font-size: 12px !important;
    line-height: 1.18 !important;
    white-space: normal !important;
  }

  .sync-picker-desc {
    font-size: 10px !important;
    line-height: 1.18 !important;
    white-space: normal !important;
  }

  .sync-picker-status {
    display: none !important;
  }

  .sync-picker-footer {
    padding: 8px 10px calc(8px + env(safe-area-inset-bottom, 0px)) !important;
    gap: 8px !important;
    flex-wrap: wrap !important;
  }

  .sync-picker-count {
    flex: 0 0 100% !important;
    width: 100% !important;
    font-size: 12px !important;
  }

  .sync-picker-action {
    flex: 1 1 0 !important;
    min-width: 0 !important;
    height: 30px !important;
  }
}

@media (max-width: 520px) {
  .sync-picker-panel {
    left: 4px !important;
    right: 4px !important;
    top: max(4px, calc(env(safe-area-inset-top, 0px) + 3px)) !important;
    bottom: max(4px, calc(env(safe-area-inset-bottom, 0px) + 3px)) !important;
    border-radius: 12px !important;
  }

  .sync-picker-panel-head {
    padding: 9px 10px 7px !important;
  }

  .sync-picker-scroll {
    padding: 6px !important;
    gap: 7px !important;
  }

  .sync-picker-section-head {
    min-height: 36px !important;
    padding: 7px 9px !important;
  }

  .sync-picker-footer {
    padding: 7px 9px calc(7px + env(safe-area-inset-bottom, 0px)) !important;
  }
}


/* =========================================================
   v25_90 移动端/窄屏行情总览 2列紧凑布局
   - 当行情卡片进入纵向排列时，不再一行一个大块
   - 产品行情卡片改为 2 * X
   - basis_latest 最新价差卡片也改为 2 * X
   - 仅响应式样式优化，不修改数据逻辑
   ========================================================= */
@media (max-width: 720px) {
  .content {
    padding-left: 10px !important;
    padding-right: 10px !important;
  }

  .market-body {
    gap: 10px !important;
  }

  .market-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 9px !important;
    align-items: stretch !important;
  }

  .product-card {
    min-height: 0 !important;
    border-radius: 14px !important;
  }

  .product-tape {
    grid-template-columns: 1fr !important;
    grid-template-rows: auto auto !important;
    min-height: 0 !important;
  }

  .product-divider {
    display: none !important;
  }

  .product-left {
    min-height: 102px !important;
    padding: 10px 9px 7px !important;
  }

  .product-right {
    padding: 0 9px 9px !important;
    display: block !important;
  }

  .product-card-head {
    gap: 5px !important;
  }

  .product-name {
    font-size: 13px !important;
    line-height: 1.15 !important;
  }

  .product-code {
    font-size: 10px !important;
    margin-top: 2px !important;
  }

  .product-period-pill {
    height: 24px !important;
    min-width: 58px !important;
    padding-left: 8px !important;
    padding-right: 20px !important;
    line-height: 22px !important;
    font-size: 10px !important;
  }

  .product-period-pill span {
    max-width: 45px !important;
  }

  .last-price {
    margin: 9px 0 3px !important;
    font-size: clamp(22px, 7.2vw, 30px) !important;
    line-height: 1 !important;
  }

  .delta {
    font-size: 11px !important;
    line-height: 1.15 !important;
  }

  .spark {
    height: 24px !important;
    margin-top: 6px !important;
  }

  .order-top {
    display: none !important;
  }

  .order-stats {
    gap: 4px !important;
  }

  .order-row {
    grid-template-columns: minmax(0, 1fr) auto !important;
    gap: 6px !important;
    min-height: 18px !important;
    font-size: 10px !important;
  }

  .order-row .micro-bar,
  .order-row .order-bar,
  .order-row .bar {
    display: none !important;
  }

  .order-label {
    font-size: 10px !important;
    line-height: 1.1 !important;
  }

  .order-value {
    font-size: 10.5px !important;
    line-height: 1.1 !important;
  }

  .basis-latest-strip {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 9px !important;
  }

  .basis-latest-card {
    min-height: 98px !important;
    padding: 10px 9px !important;
    border-radius: 14px !important;
    row-gap: 4px !important;
  }

  .basis-latest-name {
    font-size: 12px !important;
    line-height: 1.12 !important;
  }

  .basis-latest-time {
    font-size: 10px !important;
  }

  .basis-latest-value {
    font-size: clamp(20px, 6.4vw, 28px) !important;
  }

  .basis-latest-change {
    font-size: 10px !important;
    gap: 4px !important;
  }

  .basis-latest-change strong {
    font-size: 10.5px !important;
  }

  .fx-second-row-card {
    min-height: 98px !important;
  }
}

/* 极窄宽度兜底：小于 340px 时再退回单列，避免内容完全挤爆 */
@media (max-width: 340px) {
  .market-grid,
  .basis-latest-strip {
    grid-template-columns: minmax(0, 1fr) !important;
  }
}


/* =========================================================
   v25_91 移动端/窄屏行情总览 2列紧凑高度优化
   - 继续保留 v25_90 的 2列 * N行
   - 前6个产品卡片压缩高度，减少空白
   - 当产品数量为单数时，最后一个卡片独占整行并使用更紧凑的横向结构
   - 最新价差 basis_latest 继续 2列，但进一步压缩高度
   ========================================================= */
@media (max-width: 720px) {
  .market-grid {
    gap: 8px !important;
  }

  .product-card {
    border-radius: 13px !important;
  }

  .product-tape {
    grid-template-columns: 1fr !important;
    grid-template-rows: auto auto !important;
    min-height: 0 !important;
  }

  .product-left {
    min-height: 82px !important;
    padding: 8px 8px 4px !important;
  }

  .product-right {
    padding: 0 8px 7px !important;
  }

  .product-name {
    font-size: 12px !important;
    line-height: 1.08 !important;
    letter-spacing: 0 !important;
  }

  .product-code {
    font-size: 9.5px !important;
    line-height: 1.05 !important;
    margin-top: 1px !important;
  }

  .product-period-pill {
    height: 22px !important;
    min-width: 54px !important;
    padding: 0 18px 0 7px !important;
    line-height: 20px !important;
    font-size: 9.5px !important;
  }

  .product-period-pill::after {
    right: 6px !important;
    font-size: 9px !important;
  }

  .product-period-pill span {
    max-width: 40px !important;
  }

  .last-price {
    margin: 7px 0 2px !important;
    font-size: clamp(20px, 6vw, 26px) !important;
    line-height: .98 !important;
    letter-spacing: -0.03em !important;
  }

  .delta {
    font-size: 10px !important;
    line-height: 1.05 !important;
  }

  .spark {
    height: 18px !important;
    margin-top: 4px !important;
  }

  .order-stats {
    gap: 2px !important;
  }

  .order-row {
    min-height: 15px !important;
    grid-template-columns: minmax(0, 1fr) auto !important;
    gap: 5px !important;
  }

  .order-label {
    font-size: 9.6px !important;
    line-height: 1.05 !important;
  }

  .order-value {
    font-size: 9.8px !important;
    line-height: 1.05 !important;
  }

  /* 单数产品时，最后一张卡独占整行，避免左半列孤零零一块 */
  .market-grid > .product-card:last-child:nth-child(odd) {
    grid-column: 1 / -1 !important;
  }

  /* 独占整行的最后一张卡片改为横向紧凑结构，不额外撑高 */
  .market-grid > .product-card:last-child:nth-child(odd) .product-tape {
    grid-template-columns: minmax(0, .95fr) 1px minmax(0, 1.05fr) !important;
    grid-template-rows: none !important;
    align-items: stretch !important;
  }

  .market-grid > .product-card:last-child:nth-child(odd) .product-divider {
    display: block !important;
  }

  .market-grid > .product-card:last-child:nth-child(odd) .product-left {
    min-height: 96px !important;
    padding: 9px 9px 7px !important;
  }

  .market-grid > .product-card:last-child:nth-child(odd) .product-right {
    padding: 9px 9px 7px !important;
    display: flex !important;
    align-items: center !important;
  }

  .market-grid > .product-card:last-child:nth-child(odd) .order-stats {
    width: 100% !important;
    gap: 4px !important;
  }

  .market-grid > .product-card:last-child:nth-child(odd) .spark {
    height: 20px !important;
  }

  .market-grid > .product-card:last-child:nth-child(odd) .last-price {
    font-size: clamp(22px, 6.2vw, 28px) !important;
  }

  .basis-latest-strip {
    gap: 8px !important;
  }

  .basis-latest-card {
    min-height: 82px !important;
    padding: 8px 8px !important;
    border-radius: 13px !important;
    row-gap: 2px !important;
  }

  .basis-latest-name {
    font-size: 11px !important;
    line-height: 1.08 !important;
  }

  .basis-latest-time {
    font-size: 9.2px !important;
    line-height: 1.05 !important;
  }

  .basis-latest-value {
    font-size: clamp(18px, 5.8vw, 24px) !important;
    line-height: .98 !important;
  }

  .basis-latest-change {
    font-size: 9.3px !important;
    line-height: 1.05 !important;
  }

  .basis-latest-change strong {
    font-size: 9.8px !important;
  }
}

/* 稍宽一点的窄屏也压缩卡片高度，避免 PC 小窗一行一个/两列时过高 */
@media (min-width: 521px) and (max-width: 720px) {
  .product-left {
    min-height: 78px !important;
  }

  .spark {
    height: 16px !important;
  }

  .last-price {
    font-size: clamp(20px, 4.8vw, 27px) !important;
  }
}


/* =========================================================
   v25_92 移动端/窄屏行情总览继续优化
   - 产品卡片大字价格在窄屏下进入右上区域，并自适应缩小，避免挤压/溢出
   - USDCNH_FX 在 basis_latest 第二行中作为单数最后卡片时独占整行
   - USDCNH_FX 独占整行后使用横向紧凑布局，避免高度过高
   ========================================================= */
@media (max-width: 720px) {
  /* 前6个产品卡片：标题/周期在左，最新价利用右上角空位展示 */
  .market-grid > .product-card .product-left {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) minmax(86px, 44%) !important;
    grid-template-areas:
      "head price"
      "delta price"
      "spark spark" !important;
    align-items: start !important;
    column-gap: 6px !important;
    row-gap: 2px !important;
    min-height: 76px !important;
    padding: 8px 8px 4px !important;
  }

  .market-grid > .product-card .product-card-head {
    grid-area: head !important;
    min-width: 0 !important;
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 4px !important;
    align-items: start !important;
  }

  .market-grid > .product-card .product-title-stack {
    min-width: 0 !important;
  }

  .market-grid > .product-card .product-period-pill {
    justify-self: start !important;
    max-width: 74px !important;
  }

  .market-grid > .product-card .last-price {
    grid-area: price !important;
    justify-self: end !important;
    align-self: start !important;
    max-width: 100% !important;
    margin: 3px 0 0 !important;
    text-align: right !important;
    font-size: clamp(17px, 4.65vw, 24px) !important;
    line-height: .96 !important;
    letter-spacing: -0.055em !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: clip !important;
  }

  .market-grid > .product-card .delta {
    grid-area: delta !important;
    max-width: 100% !important;
    margin-top: 0 !important;
    font-size: 9.8px !important;
    line-height: 1.08 !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }

  .market-grid > .product-card .spark {
    grid-area: spark !important;
    height: 17px !important;
    width: 72% !important;
    justify-self: center !important;
    margin-top: 2px !important;
  }

  .market-grid > .product-card .product-right {
    padding-top: 0 !important;
  }

  /* 产品数量为单数时，最后一张卡独占整行，并且仍采用横向紧凑结构 */
  .market-grid > .product-card:last-child:nth-child(odd) {
    grid-column: 1 / -1 !important;
  }

  .market-grid > .product-card:last-child:nth-child(odd) .product-tape {
    grid-template-columns: minmax(0, .92fr) 1px minmax(0, 1.08fr) !important;
    align-items: stretch !important;
  }

  .market-grid > .product-card:last-child:nth-child(odd) .product-divider {
    display: block !important;
  }

  .market-grid > .product-card:last-child:nth-child(odd) .product-left {
    min-height: 94px !important;
    padding: 9px 9px 7px !important;
  }

  .market-grid > .product-card:last-child:nth-child(odd) .product-right {
    padding: 9px 9px 7px !important;
    display: flex !important;
    align-items: center !important;
  }

  /* basis_latest 有 4个基差 + 1个 USDCNH_FX，最后的汇率卡片独占整行 */
  .basis-latest-strip.with-fx-card {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  .basis-latest-strip.with-fx-card > .market-fx-card {
    grid-column: 1 / -1 !important;
    min-height: 104px !important;
    height: auto !important;
  }

  .basis-latest-strip.with-fx-card > .market-fx-card .product-tape {
    grid-template-columns: minmax(0, .92fr) 1px minmax(0, 1.08fr) !important;
    grid-template-rows: none !important;
    min-height: 104px !important;
    align-items: stretch !important;
  }

  .basis-latest-strip.with-fx-card > .market-fx-card .product-divider {
    display: block !important;
  }

  .basis-latest-strip.with-fx-card > .market-fx-card .product-left {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) minmax(86px, 42%) !important;
    grid-template-areas:
      "head price"
      "delta price"
      "spark spark" !important;
    min-height: 94px !important;
    padding: 9px 9px 7px !important;
  }

  .basis-latest-strip.with-fx-card > .market-fx-card .product-card-head {
    grid-area: head !important;
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 4px !important;
  }

  .basis-latest-strip.with-fx-card > .market-fx-card .last-price {
    grid-area: price !important;
    justify-self: end !important;
    align-self: center !important;
    margin: 0 !important;
    text-align: right !important;
    font-size: clamp(20px, 5.2vw, 28px) !important;
    line-height: .96 !important;
    letter-spacing: -0.045em !important;
    white-space: nowrap !important;
  }

  .basis-latest-strip.with-fx-card > .market-fx-card .delta {
    grid-area: delta !important;
    font-size: 10px !important;
    line-height: 1.08 !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }

  .basis-latest-strip.with-fx-card > .market-fx-card .spark {
    grid-area: spark !important;
    height: 19px !important;
    width: 72% !important;
    justify-self: center !important;
    margin-top: 3px !important;
  }

  .basis-latest-strip.with-fx-card > .market-fx-card .product-right {
    padding: 9px 10px 7px !important;
    display: flex !important;
    align-items: center !important;
  }

  .basis-latest-strip.with-fx-card > .market-fx-card .order-stats {
    width: 100% !important;
    gap: 4px !important;
  }
}

/* 更窄屏幕下继续压缩大字价格，防止 4,330.000 这类文本顶到右侧 */
@media (max-width: 430px) {
  .market-grid > .product-card .last-price {
    font-size: clamp(16px, 4.25vw, 22px) !important;
    letter-spacing: -0.065em !important;
  }

  .market-grid > .product-card .product-left {
    grid-template-columns: minmax(0, 1fr) minmax(80px, 43%) !important;
  }

  .basis-latest-strip.with-fx-card > .market-fx-card .last-price {
    font-size: clamp(19px, 5vw, 26px) !important;
  }
}


/* =========================================================
   v25_93 移动端/窄屏行情总览继续压缩
   - 产品卡片右侧 K 线字段改为 2列紧凑信息格，显著降低卡片高度
   - 缩小价格区、涨跌、sparkline、间距和圆角
   - 最新基差卡片与 USDCNH_FX 汇率卡片继续压缩
   - 仅响应式样式优化，不修改数据逻辑
   ========================================================= */
@media (max-width: 720px) {
  .market-body {
    gap: 8px !important;
  }

  .market-grid {
    gap: 7px !important;
  }

  .product-card {
    border-radius: 12px !important;
  }

  .market-grid > .product-card .product-left {
    min-height: 62px !important;
    padding: 7px 7px 3px !important;
    grid-template-columns: minmax(0, 1fr) minmax(78px, 42%) !important;
    grid-template-areas:
      "head price"
      "delta price"
      "spark spark" !important;
    column-gap: 5px !important;
    row-gap: 1px !important;
  }

  .market-grid > .product-card .product-card-head {
    gap: 3px !important;
  }

  .market-grid > .product-card .product-name {
    font-size: 11.2px !important;
    line-height: 1.02 !important;
    letter-spacing: -.02em !important;
  }

  .market-grid > .product-card .product-code {
    font-size: 8.8px !important;
    line-height: 1 !important;
    margin-top: 1px !important;
  }

  .market-grid > .product-card .product-period-pill {
    height: 20px !important;
    min-width: 50px !important;
    max-width: 66px !important;
    padding: 0 16px 0 7px !important;
    line-height: 18px !important;
    font-size: 9px !important;
  }

  .market-grid > .product-card .product-period-pill span {
    max-width: 36px !important;
  }

  .market-grid > .product-card .last-price {
    margin-top: 1px !important;
    font-size: clamp(15px, 4.05vw, 22px) !important;
    line-height: .92 !important;
    letter-spacing: -0.07em !important;
  }

  .market-grid > .product-card .delta {
    font-size: 9px !important;
    line-height: 1 !important;
    letter-spacing: -.02em !important;
  }

  .market-grid > .product-card .spark {
    height: 13px !important;
    width: 56% !important;
    margin-top: 1px !important;
  }

  .market-grid > .product-card .product-right {
    padding: 0 7px 6px !important;
  }

  /* 右侧字段从纵向列表压缩成 2列信息格 */
  .market-grid > .product-card .order-stats {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 2px 7px !important;
    align-items: start !important;
  }

  .market-grid > .product-card .order-row {
    min-height: 13px !important;
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) auto !important;
    gap: 3px !important;
    align-items: baseline !important;
  }

  .market-grid > .product-card .order-label {
    font-size: 8.8px !important;
    line-height: 1 !important;
    letter-spacing: -.03em !important;
    color: rgba(196,215,238,.86) !important;
  }

  .market-grid > .product-card .order-value {
    font-size: 9px !important;
    line-height: 1 !important;
    letter-spacing: -.035em !important;
  }

  .market-grid > .product-card .order-row-bar {
    grid-column: 1 / -1 !important;
  }

  .market-grid > .product-card .order-row-bar .order-label {
    max-width: 4em !important;
  }

  .market-grid > .product-card .order-row-bar .micro-bar {
    display: none !important;
  }

  /* 单数最后一张产品卡仍独占整行，但高度进一步压缩 */
  .market-grid > .product-card:last-child:nth-child(odd) .product-tape {
    grid-template-columns: minmax(0, .86fr) 1px minmax(0, 1.14fr) !important;
  }

  .market-grid > .product-card:last-child:nth-child(odd) .product-left {
    min-height: 78px !important;
    padding: 8px 8px 6px !important;
  }

  .market-grid > .product-card:last-child:nth-child(odd) .product-right {
    padding: 8px 8px 6px !important;
  }

  .market-grid > .product-card:last-child:nth-child(odd) .last-price {
    font-size: clamp(18px, 4.7vw, 25px) !important;
  }

  .market-grid > .product-card:last-child:nth-child(odd) .spark {
    height: 15px !important;
    width: 62% !important;
  }

  /* 最新基差卡片继续压缩 */
  .basis-latest-strip {
    gap: 7px !important;
  }

  .basis-latest-card {
    min-height: 70px !important;
    padding: 7px 7px !important;
    border-radius: 12px !important;
    row-gap: 1px !important;
  }

  .basis-latest-name {
    font-size: 10.4px !important;
    line-height: 1.04 !important;
  }

  .basis-latest-time {
    font-size: 8.8px !important;
    line-height: 1 !important;
  }

  .basis-latest-value {
    font-size: clamp(17px, 5.1vw, 23px) !important;
    line-height: .94 !important;
  }

  .basis-latest-change {
    font-size: 8.8px !important;
    line-height: 1 !important;
  }

  .basis-latest-change strong {
    font-size: 9.1px !important;
  }

  /* 第二行中的 USDCNH_FX 汇率卡片继续横向紧凑 */
  .basis-latest-strip.with-fx-card > .market-fx-card {
    min-height: 86px !important;
  }

  .basis-latest-strip.with-fx-card > .market-fx-card .product-tape {
    min-height: 86px !important;
    grid-template-columns: minmax(0, .86fr) 1px minmax(0, 1.14fr) !important;
  }

  .basis-latest-strip.with-fx-card > .market-fx-card .product-left {
    min-height: 76px !important;
    padding: 8px 8px 6px !important;
  }

  .basis-latest-strip.with-fx-card > .market-fx-card .product-right {
    padding: 8px 9px 6px !important;
  }

  .basis-latest-strip.with-fx-card > .market-fx-card .last-price {
    font-size: clamp(18px, 4.8vw, 25px) !important;
  }

  .basis-latest-strip.with-fx-card > .market-fx-card .spark {
    height: 15px !important;
    width: 62% !important;
  }

  .basis-latest-strip.with-fx-card > .market-fx-card .order-stats {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 3px 8px !important;
  }

  .basis-latest-strip.with-fx-card > .market-fx-card .order-row {
    min-height: 13px !important;
  }
}

@media (max-width: 430px) {
  .market-grid {
    gap: 6px !important;
  }

  .market-grid > .product-card .product-left {
    grid-template-columns: minmax(0, 1fr) minmax(74px, 41%) !important;
    padding: 6px 6px 3px !important;
  }

  .market-grid > .product-card .last-price {
    font-size: clamp(14px, 3.85vw, 20px) !important;
  }

  .market-grid > .product-card .order-label,
  .market-grid > .product-card .order-value {
    font-size: 8.4px !important;
  }

  .basis-latest-strip.with-fx-card > .market-fx-card .last-price {
    font-size: clamp(17px, 4.5vw, 24px) !important;
  }
}


/* =========================================================
   v25_94 窄屏行情卡片结构重排
   用户明确：只针对页面最窄/窄屏状态，不影响桌面最大状态。
   - 大字价格回到主体信息流中
   - 涨跌标识与小折线图放到大字价格下方
   - 周期胶囊紧贴标题区域
   - 开盘/最高/最低/前收改为 2*2 信息格
   ========================================================= */
@media (max-width: 720px) {
  /* 先撤回 v25_92/v25_93 把价格塞到右上角的布局 */
  .market-grid > .product-card .product-left {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    grid-template-areas:
      "head"
      "price"
      "delta"
      "spark" !important;
    align-items: start !important;
    row-gap: 2px !important;
    column-gap: 0 !important;
    min-height: 0 !important;
    padding: 7px 8px 4px !important;
  }

  .market-grid > .product-card .product-card-head {
    grid-area: head !important;
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 3px !important;
    align-items: start !important;
    min-width: 0 !important;
  }

  .market-grid > .product-card .product-title-stack {
    min-width: 0 !important;
  }

  .market-grid > .product-card .product-name {
    font-size: 11.4px !important;
    line-height: 1.05 !important;
    letter-spacing: -0.02em !important;
  }

  .market-grid > .product-card .product-code {
    font-size: 8.8px !important;
    line-height: 1 !important;
    margin-top: 1px !important;
  }

  .market-grid > .product-card .product-period-pill {
    justify-self: start !important;
    margin-top: 2px !important;
    height: 20px !important;
    min-width: 50px !important;
    max-width: 68px !important;
    padding: 0 16px 0 7px !important;
    line-height: 18px !important;
    font-size: 9px !important;
  }

  .market-grid > .product-card .product-period-pill span {
    max-width: 38px !important;
  }

  .market-grid > .product-card .last-price {
    grid-area: price !important;
    justify-self: start !important;
    align-self: start !important;
    max-width: 100% !important;
    margin: 4px 0 0 !important;
    text-align: left !important;
    font-size: clamp(18px, 5.2vw, 26px) !important;
    line-height: .96 !important;
    letter-spacing: -0.055em !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: clip !important;
  }

  .market-grid > .product-card .delta {
    grid-area: delta !important;
    justify-self: start !important;
    max-width: 100% !important;
    margin-top: 0 !important;
    font-size: 9.6px !important;
    line-height: 1.05 !important;
    letter-spacing: -0.025em !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }

  .market-grid > .product-card .spark {
    grid-area: spark !important;
    justify-self: center !important;
    width: 66% !important;
    height: 14px !important;
    margin: 2px 0 0 !important;
  }

  /* 开盘 / 最高 / 最低 / 前收：显示为 2*2 紧凑格 */
  .market-grid > .product-card .product-right {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 3px 7px !important;
    padding: 2px 8px 7px !important;
    align-items: start !important;
  }

  .market-grid > .product-card .order-top {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) auto !important;
    grid-column: auto !important;
    gap: 4px !important;
    min-height: 13px !important;
    align-items: baseline !important;
    justify-content: initial !important;
    font-size: 8.7px !important;
    line-height: 1 !important;
  }

  .market-grid > .product-card .order-top span:first-child {
    min-width: 0 !important;
    color: rgba(196,215,238,.86) !important;
    font-size: 8.7px !important;
    line-height: 1 !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
  }

  .market-grid > .product-card .order-top .order-net {
    font-size: 8.9px !important;
    line-height: 1 !important;
    text-align: right !important;
    white-space: nowrap !important;
  }

  .market-grid > .product-card .order-stats {
    display: contents !important;
  }

  .market-grid > .product-card .order-row {
    min-height: 13px !important;
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) auto !important;
    gap: 4px !important;
    align-items: baseline !important;
  }

  .market-grid > .product-card .order-label {
    font-size: 8.7px !important;
    line-height: 1 !important;
    letter-spacing: -.03em !important;
    color: rgba(196,215,238,.86) !important;
  }

  .market-grid > .product-card .order-value {
    font-size: 8.9px !important;
    line-height: 1 !important;
    letter-spacing: -.035em !important;
    text-align: right !important;
    white-space: nowrap !important;
  }

  /* 大单占比不是 2*2 主字段，放到整行最下方 */
  .market-grid > .product-card .order-row-bar {
    grid-column: 1 / -1 !important;
  }

  .market-grid > .product-card .order-row-bar .micro-bar {
    display: none !important;
  }

  /* 单数最后一张产品卡独占整行时，也沿用同一套结构，不再另开右上角价格布局 */
  .market-grid > .product-card:last-child:nth-child(odd) .product-tape {
    grid-template-columns: minmax(0, .86fr) 1px minmax(0, 1.14fr) !important;
    grid-template-rows: none !important;
    align-items: stretch !important;
  }

  .market-grid > .product-card:last-child:nth-child(odd) .product-divider {
    display: block !important;
  }

  .market-grid > .product-card:last-child:nth-child(odd) .product-left {
    min-height: 0 !important;
    padding: 8px 8px 6px !important;
  }

  .market-grid > .product-card:last-child:nth-child(odd) .product-right {
    padding: 8px 9px 6px !important;
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    align-content: center !important;
  }

  .market-grid > .product-card:last-child:nth-child(odd) .last-price {
    font-size: clamp(18px, 4.8vw, 25px) !important;
  }

  .market-grid > .product-card:last-child:nth-child(odd) .spark {
    height: 15px !important;
    width: 64% !important;
  }

  /* 第二行里的 USDCNH_FX 汇率卡片同步使用：价格下方放涨跌和小折线，右侧 2*2 信息格 */
  .basis-latest-strip.with-fx-card > .market-fx-card .product-left {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    grid-template-areas:
      "head"
      "price"
      "delta"
      "spark" !important;
    row-gap: 2px !important;
    min-height: 0 !important;
    padding: 8px 8px 6px !important;
  }

  .basis-latest-strip.with-fx-card > .market-fx-card .last-price {
    grid-area: price !important;
    justify-self: start !important;
    align-self: start !important;
    margin: 4px 0 0 !important;
    text-align: left !important;
    font-size: clamp(18px, 4.9vw, 25px) !important;
    line-height: .96 !important;
    letter-spacing: -0.05em !important;
  }

  .basis-latest-strip.with-fx-card > .market-fx-card .delta {
    grid-area: delta !important;
    justify-self: start !important;
    font-size: 9.4px !important;
    line-height: 1.05 !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }

  .basis-latest-strip.with-fx-card > .market-fx-card .spark {
    grid-area: spark !important;
    justify-self: center !important;
    width: 64% !important;
    height: 15px !important;
    margin-top: 2px !important;
  }

  .basis-latest-strip.with-fx-card > .market-fx-card .product-right {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 3px 8px !important;
    align-content: center !important;
    padding: 8px 10px 6px !important;
  }

  .basis-latest-strip.with-fx-card > .market-fx-card .order-top {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) auto !important;
    grid-column: auto !important;
  }

  .basis-latest-strip.with-fx-card > .market-fx-card .order-stats {
    display: contents !important;
  }
}

@media (max-width: 430px) {
  .market-grid > .product-card .last-price,
  .basis-latest-strip.with-fx-card > .market-fx-card .last-price {
    font-size: clamp(16px, 4.4vw, 22px) !important;
    letter-spacing: -0.06em !important;
  }

  .market-grid > .product-card .spark,
  .basis-latest-strip.with-fx-card > .market-fx-card .spark {
    width: 60% !important;
  }

  .market-grid > .product-card .order-label,
  .market-grid > .product-card .order-value,
  .market-grid > .product-card .order-top span:first-child,
  .market-grid > .product-card .order-top .order-net {
    font-size: 8.2px !important;
  }
}


/* =========================================================
   v25_95 窄屏行情卡片：价格组右上角 + FX右侧恢复纵向字段
   基线：用户上传的当前 styles.css / app.js
   范围：只改窄屏样式，不改取数、不改 app.js。
   ========================================================= */
@media (max-width: 720px) {
  /* 首6个行情卡片：标题/代码/周期在左，价格+涨跌+小折线移到右上角 */
  .market-grid > .product-card:not(.market-fx-card) .product-left {
    display: grid !important;
    grid-template-columns: minmax(0, .86fr) minmax(82px, .74fr) !important;
    grid-template-areas:
      "head price"
      "head delta"
      "head spark" !important;
    align-items: start !important;
    column-gap: 5px !important;
    row-gap: 0 !important;
    min-height: 54px !important;
    padding: 7px 8px 2px !important;
  }

  .market-grid > .product-card:not(.market-fx-card) .product-card-head {
    grid-area: head !important;
    align-self: start !important;
    justify-self: stretch !important;
    min-width: 0 !important;
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 3px !important;
  }

  .market-grid > .product-card:not(.market-fx-card) .product-period-pill {
    margin-top: 2px !important;
    justify-self: start !important;
  }

  .market-grid > .product-card:not(.market-fx-card) .last-price {
    grid-area: price !important;
    justify-self: end !important;
    align-self: start !important;
    max-width: 100% !important;
    margin: 0 !important;
    text-align: right !important;
    font-size: clamp(17px, 4.95vw, 25px) !important;
    line-height: .94 !important;
    letter-spacing: -0.065em !important;
    white-space: nowrap !important;
    overflow: visible !important;
    text-overflow: clip !important;
  }

  .market-grid > .product-card:not(.market-fx-card) .delta {
    grid-area: delta !important;
    justify-self: end !important;
    align-self: start !important;
    max-width: 100% !important;
    margin: 1px 0 0 !important;
    text-align: right !important;
    font-size: 9.2px !important;
    line-height: 1.02 !important;
    letter-spacing: -0.035em !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: clip !important;
  }

  .market-grid > .product-card:not(.market-fx-card) .spark {
    grid-area: spark !important;
    justify-self: end !important;
    align-self: start !important;
    width: min(76px, 88%) !important;
    height: 13px !important;
    margin: 2px 0 0 !important;
  }

  /* 价格组挪走后，字段区直接贴近顶部，减少空白高度；保留开/高/低/前收 2*2 */
  .market-grid > .product-card:not(.market-fx-card) .product-right {
    padding: 2px 8px 7px !important;
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 3px 7px !important;
    align-items: start !important;
  }

  .market-grid > .product-card:not(.market-fx-card) .order-top,
  .market-grid > .product-card:not(.market-fx-card) .order-row {
    min-height: 13px !important;
  }

  /* basis_latest 第二行里的 USDCNH_FX：它独占整行，空间足够，右侧字段恢复纵向列表，不再 2*2 */
  .basis-latest-strip.with-fx-card > .market-fx-card .product-tape {
    grid-template-columns: minmax(0, .86fr) 1px minmax(0, 1.14fr) !important;
    min-height: 92px !important;
  }

  .basis-latest-strip.with-fx-card > .market-fx-card .product-left {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    grid-template-areas:
      "head"
      "price"
      "delta"
      "spark" !important;
    row-gap: 2px !important;
    padding: 8px 9px 7px !important;
    min-height: 82px !important;
  }

  .basis-latest-strip.with-fx-card > .market-fx-card .last-price {
    justify-self: start !important;
    text-align: left !important;
    margin: 4px 0 0 !important;
    font-size: clamp(20px, 5.1vw, 28px) !important;
    letter-spacing: -0.04em !important;
  }

  .basis-latest-strip.with-fx-card > .market-fx-card .delta {
    justify-self: start !important;
    text-align: left !important;
    font-size: 9.8px !important;
  }

  .basis-latest-strip.with-fx-card > .market-fx-card .spark {
    justify-self: center !important;
    width: min(86px, 68%) !important;
    height: 16px !important;
    margin-top: 3px !important;
  }

  .basis-latest-strip.with-fx-card > .market-fx-card .product-right {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    grid-template-rows: auto auto !important;
    align-content: center !important;
    gap: 6px !important;
    padding: 9px 12px 8px !important;
  }

  .basis-latest-strip.with-fx-card > .market-fx-card .order-top {
    display: grid !important;
    grid-template-columns: max-content minmax(8px, 1fr) auto !important;
    grid-column: 1 / -1 !important;
    gap: 8px !important;
    align-items: baseline !important;
    min-height: 16px !important;
  }

  .basis-latest-strip.with-fx-card > .market-fx-card .order-top span:first-child {
    grid-column: 1 !important;
    font-size: 10px !important;
    white-space: nowrap !important;
    overflow: visible !important;
    text-overflow: clip !important;
  }

  .basis-latest-strip.with-fx-card > .market-fx-card .order-top .order-net {
    grid-column: 3 !important;
    justify-self: end !important;
    font-size: 10.5px !important;
    white-space: nowrap !important;
  }

  .basis-latest-strip.with-fx-card > .market-fx-card .order-stats {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 6px !important;
  }

  .basis-latest-strip.with-fx-card > .market-fx-card .order-row {
    display: grid !important;
    grid-template-columns: max-content minmax(8px, 1fr) auto !important;
    gap: 8px !important;
    align-items: baseline !important;
    min-height: 16px !important;
  }

  .basis-latest-strip.with-fx-card > .market-fx-card .order-label {
    grid-column: 1 !important;
    font-size: 10px !important;
    white-space: nowrap !important;
    overflow: visible !important;
    text-overflow: clip !important;
  }

  .basis-latest-strip.with-fx-card > .market-fx-card .order-value {
    grid-column: 3 !important;
    justify-self: end !important;
    text-align: right !important;
    font-size: 10.5px !important;
    white-space: nowrap !important;
  }
}

@media (max-width: 430px) {
  .market-grid > .product-card:not(.market-fx-card) .product-left {
    grid-template-columns: minmax(0, .78fr) minmax(76px, .78fr) !important;
    column-gap: 4px !important;
    padding: 6px 7px 2px !important;
  }

  .market-grid > .product-card:not(.market-fx-card) .product-name {
    font-size: 10.8px !important;
  }

  .market-grid > .product-card:not(.market-fx-card) .product-code {
    font-size: 8.4px !important;
  }

  .market-grid > .product-card:not(.market-fx-card) .last-price {
    font-size: clamp(15px, 4.65vw, 22px) !important;
    letter-spacing: -0.075em !important;
  }

  .market-grid > .product-card:not(.market-fx-card) .delta {
    font-size: 8.6px !important;
    letter-spacing: -0.045em !important;
  }

  .market-grid > .product-card:not(.market-fx-card) .spark {
    width: min(68px, 90%) !important;
    height: 12px !important;
  }

  .basis-latest-strip.with-fx-card > .market-fx-card .order-top span:first-child,
  .basis-latest-strip.with-fx-card > .market-fx-card .order-top .order-net,
  .basis-latest-strip.with-fx-card > .market-fx-card .order-label,
  .basis-latest-strip.with-fx-card > .market-fx-card .order-value {
    font-size: 9.4px !important;
  }
}


/* =========================================================
   v25_96 窄屏行情卡片：右上角价格组防溢出微调
   - 基于 v25_95，仅修复窄屏下长价格文本贴边/超出卡片边缘
   - 继续保持“价格 + 涨跌 + 小折线图”在右上角
   - 不影响桌面宽屏布局，不影响 USDCNH_FX 右侧纵向字段
   ========================================================= */
@media (max-width: 720px) {
  .market-grid > .product-card:not(.market-fx-card) .product-left {
    grid-template-columns: minmax(0, .72fr) minmax(86px, .86fr) !important;
    column-gap: 4px !important;
    overflow: hidden !important;
  }

  .market-grid > .product-card:not(.market-fx-card) .last-price {
    max-width: calc(100% - 2px) !important;
    padding-right: 2px !important;
    font-size: clamp(15px, 4.55vw, 23px) !important;
    letter-spacing: -0.075em !important;
    overflow: hidden !important;
    text-overflow: clip !important;
  }

  .market-grid > .product-card:not(.market-fx-card) .delta {
    max-width: calc(100% - 2px) !important;
    padding-right: 2px !important;
    font-size: 8.8px !important;
    letter-spacing: -0.045em !important;
    overflow: hidden !important;
    text-overflow: clip !important;
  }

  .market-grid > .product-card:not(.market-fx-card) .spark {
    width: min(70px, 84%) !important;
    margin-right: 2px !important;
  }
}

@media (max-width: 430px) {
  .market-grid > .product-card:not(.market-fx-card) .product-left {
    grid-template-columns: minmax(0, .66fr) minmax(82px, .92fr) !important;
    column-gap: 3px !important;
  }

  .market-grid > .product-card:not(.market-fx-card) .last-price {
    font-size: clamp(14px, 4.35vw, 21px) !important;
    letter-spacing: -0.085em !important;
  }

  .market-grid > .product-card:not(.market-fx-card) .delta {
    font-size: 8.3px !important;
    letter-spacing: -0.055em !important;
  }

  .market-grid > .product-card:not(.market-fx-card) .spark {
    width: min(64px, 84%) !important;
  }
}


/* =========================================================
   v25_97 窄屏导航与顶部区整理
   - 只在窄屏/PC窄窗口下生效，不影响宽屏展示
   - 侧栏改为浮层抽屉：收起时不占正文宽度，展开时覆盖在页面上
   - 顶部集合看板区域压缩为标题层 + 状态/操作层，减少“堆在一坨”的感觉
   - 不修改行情卡片、basis_latest、同步观察、取数逻辑
   ========================================================= */
@media (max-width: 980px) {
  :root {
    --sidebar-open-width: min(330px, 86vw);
    --sidebar-closed-width: 0px;
  }

  body.dashboard-body {
    overflow-x: hidden !important;
  }

  body.dashboard-body .main,
  body.dashboard-body.sidebar-expanded .main,
  body.dashboard-body.sidebar-collapsed .main {
    margin-left: 0 !important;
    position: relative !important;
  }

  body.dashboard-body .topbar,
  body.dashboard-body.sidebar-expanded .topbar,
  body.dashboard-body.sidebar-collapsed .topbar {
    position: static !important;
    left: 0 !important;
    right: auto !important;
    top: auto !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: 42px 14px 13px !important;
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    align-items: start !important;
    justify-content: stretch !important;
    gap: 9px !important;
    border-bottom: 1px solid rgba(93, 164, 230, .18) !important;
  }

  body.dashboard-body .content,
  body.dashboard-body.sidebar-expanded .content,
  body.dashboard-body.sidebar-collapsed .content {
    padding-top: 12px !important;
  }

  body.dashboard-body .top-title {
    width: 100% !important;
    min-width: 0 !important;
    display: grid !important;
    grid-template-columns: 34px minmax(0, 1fr) !important;
    align-items: center !important;
    gap: 9px !important;
  }

  body.dashboard-body .top-badge {
    width: 34px !important;
    height: 34px !important;
    border-radius: 11px !important;
    font-size: 13px !important;
  }

  body.dashboard-body .top-title h2 {
    font-size: 20px !important;
    line-height: 1.08 !important;
  }

  body.dashboard-body .top-title p {
    margin-top: 4px !important;
    font-size: 11px !important;
    line-height: 1.25 !important;
    max-width: 18em !important;
  }

  body.dashboard-body .top-actions {
    width: 100% !important;
    display: flex !important;
    flex-wrap: wrap !important;
    align-items: center !important;
    justify-content: flex-start !important;
    gap: 7px !important;
  }

  /* 状态信息独立成一行，避免和周期/刷新/账号按钮混杂 */
  body.dashboard-body .top-actions .data-status-pill {
    order: -2 !important;
    flex: 0 0 auto !important;
    max-width: 100% !important;
    height: 30px !important;
    padding: 0 10px !important;
  }

  body.dashboard-body .top-actions .pill,
  body.dashboard-body .top-actions select,
  body.dashboard-body .top-actions .btn {
    height: 30px !important;
    font-size: 11px !important;
    border-radius: 11px !important;
  }

  body.dashboard-body .top-actions select {
    min-width: 74px !important;
  }

  body.dashboard-body .top-actions .btn {
    padding-left: 10px !important;
    padding-right: 10px !important;
  }

  /* 侧栏：窄屏下不再作为页面布局的一列，而是浮层抽屉 */
  body.dashboard-body .sidebar {
    position: fixed !important;
    top: 0 !important;
    bottom: 0 !important;
    left: 0 !important;
    z-index: 90 !important;
    width: min(330px, 86vw) !important;
    max-width: 86vw !important;
    padding: 12px !important;
    border-right: 1px solid rgba(88, 196, 255, .22) !important;
    border-bottom: 0 !important;
    background: linear-gradient(180deg, rgba(7, 18, 34, .995), rgba(3, 9, 18, .995)) !important;
    box-shadow: 24px 0 64px rgba(0, 0, 0, .52) !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    transition: transform .22s ease, opacity .18s ease !important;
    -webkit-overflow-scrolling: touch !important;
  }

  body.dashboard-body.sidebar-expanded .sidebar {
    transform: translateX(0) !important;
    opacity: 1 !important;
    pointer-events: auto !important;
  }

  body.dashboard-body.sidebar-collapsed .sidebar {
    width: 0 !important;
    max-width: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    overflow: visible !important;
    transform: none !important;
    opacity: 1 !important;
    pointer-events: none !important;
  }

  /* 收起时只保留一个轻量汉堡按钮，不再留下整条侧栏占位 */
  body.dashboard-body.sidebar-collapsed .sidebar .side-topbar {
    position: fixed !important;
    top: 9px !important;
    left: 50% !important;
    right: auto !important;
    z-index: 110 !important;
    width: 38px !important;
    height: 38px !important;
    margin: 0 !important;
    padding: 0 !important;
    display: grid !important;
    place-items: center !important;
    transform: translateX(-50%) !important;
    pointer-events: auto !important;
  }

  body.dashboard-body.sidebar-collapsed .sidebar-toggle-clean {
    width: 38px !important;
    height: 38px !important;
    border-radius: 13px !important;
  }

  body.dashboard-body.sidebar-collapsed .side-brand,
  body.dashboard-body.sidebar-collapsed .side-nav,
  body.dashboard-body.sidebar-collapsed .side-note {
    display: none !important;
  }

  /* 展开抽屉时：菜单更紧凑，不再把长说明塞得过高 */
  body.dashboard-body.sidebar-expanded .side-brand {
    display: grid !important;
    min-height: 58px !important;
    margin: 0 0 10px !important;
    padding: 9px !important;
    grid-template-columns: 38px minmax(0, 1fr) 34px !important;
    border-radius: 16px !important;
  }

  body.dashboard-body.sidebar-expanded .side-logo {
    width: 38px !important;
    height: 38px !important;
    border-radius: 13px !important;
    font-size: 17px !important;
  }

  body.dashboard-body.sidebar-expanded .side-brand h1 {
    font-size: 16px !important;
    line-height: 1.08 !important;
  }

  body.dashboard-body.sidebar-expanded .side-brand p {
    margin-top: 3px !important;
    font-size: 11px !important;
  }

  body.dashboard-body.sidebar-expanded .side-brand .side-topbar {
    width: 34px !important;
    height: 34px !important;
    margin: 0 !important;
  }

  body.dashboard-body.sidebar-expanded .sidebar-toggle-clean {
    width: 34px !important;
    height: 34px !important;
    border-radius: 12px !important;
  }

  body.dashboard-body.sidebar-expanded .side-nav {
    gap: 7px !important;
  }

  body.dashboard-body.sidebar-expanded .side-nav button {
    height: 38px !important;
    padding: 0 11px !important;
    border-radius: 13px !important;
    font-size: 13px !important;
  }

  body.dashboard-body.sidebar-expanded .nav-full {
    display: inline !important;
  }

  body.dashboard-body.sidebar-expanded .nav-mini {
    display: none !important;
  }

  body.dashboard-body.sidebar-expanded .side-note {
    display: none !important;
  }

  /* 抽屉展开时给正文加一层暗幕，突出“导航是浮层” */
  body.dashboard-body.sidebar-expanded .main::before {
    content: "" !important;
    position: fixed !important;
    inset: 0 !important;
    z-index: 80 !important;
    background: rgba(0, 0, 0, .34) !important;
    backdrop-filter: blur(2px) !important;
    pointer-events: none !important;
  }
}

@media (max-width: 560px) {
  body.dashboard-body .topbar,
  body.dashboard-body.sidebar-expanded .topbar,
  body.dashboard-body.sidebar-collapsed .topbar {
    padding: 40px 12px 12px !important;
    gap: 8px !important;
  }

  body.dashboard-body .top-title {
    grid-template-columns: 32px minmax(0, 1fr) !important;
    gap: 8px !important;
  }

  body.dashboard-body .top-badge {
    width: 32px !important;
    height: 32px !important;
  }

  body.dashboard-body .top-title h2 {
    font-size: 18px !important;
  }

  body.dashboard-body .top-title p {
    font-size: 10.5px !important;
    line-height: 1.22 !important;
  }

  body.dashboard-body .top-actions {
    gap: 6px !important;
  }

  body.dashboard-body .top-actions .data-status-pill {
    height: 28px !important;
    padding: 0 8px !important;
  }

  body.dashboard-body .top-actions .pill,
  body.dashboard-body .top-actions select,
  body.dashboard-body .top-actions .btn {
    height: 28px !important;
    font-size: 10.5px !important;
    padding-left: 8px !important;
    padding-right: 8px !important;
  }

  body.dashboard-body.sidebar-expanded .sidebar {
    width: min(310px, 88vw) !important;
    max-width: 88vw !important;
    padding: 10px !important;
  }
}


/* =========================================================
   v25_99 紧急恢复版：在 v25_97 基线之上保留抽屉可用性优化
   - app.js 回到 v25_89 正常数据逻辑：basis_kline、basis_latest、同步观察、内外盘过滤均保留
   - CSS 只追加窄屏顶部/抽屉二次整理，不触碰行情/基差/同步观察数据逻辑
   ========================================================= */
@media (max-width: 980px) {
  body.dashboard-body .topbar,
  body.dashboard-body.sidebar-expanded .topbar,
  body.dashboard-body.sidebar-collapsed .topbar {
    padding: 14px 58px 12px 14px !important;
    gap: 7px !important;
    min-height: 0 !important;
    align-items: start !important;
    background:
      linear-gradient(180deg, rgba(7, 18, 34, .98), rgba(4, 12, 24, .96)) !important;
  }

  body.dashboard-body .top-title {
    grid-template-columns: 32px minmax(0, 1fr) !important;
    gap: 8px !important;
    align-items: center !important;
  }

  body.dashboard-body .top-badge {
    width: 32px !important;
    height: 32px !important;
    border-radius: 11px !important;
  }

  body.dashboard-body .top-title h2 {
    font-size: 18px !important;
    line-height: 1.06 !important;
  }

  body.dashboard-body .top-title p {
    margin-top: 3px !important;
    font-size: 10.5px !important;
    line-height: 1.18 !important;
    max-width: none !important;
  }

  body.dashboard-body .top-actions {
    width: 100% !important;
    padding-left: 40px !important;
    display: flex !important;
    flex-wrap: wrap !important;
    align-items: center !important;
    justify-content: flex-start !important;
    gap: 5px 6px !important;
  }

  body.dashboard-body .top-actions .data-status-pill,
  body.dashboard-body .top-actions .pill,
  body.dashboard-body .top-actions select,
  body.dashboard-body .top-actions .btn {
    height: 26px !important;
    min-height: 26px !important;
    border-radius: 10px !important;
    font-size: 10.5px !important;
    padding-left: 8px !important;
    padding-right: 8px !important;
  }

  body.dashboard-body .top-actions select {
    min-width: 70px !important;
  }

  body.dashboard-body.sidebar-collapsed .sidebar .side-topbar {
    position: fixed !important;
    top: 12px !important;
    right: 14px !important;
    left: auto !important;
    transform: none !important;
    z-index: 115 !important;
    width: 34px !important;
    height: 34px !important;
    display: grid !important;
    place-items: center !important;
    pointer-events: auto !important;
  }

  body.dashboard-body.sidebar-collapsed .sidebar-toggle-clean {
    width: 34px !important;
    height: 34px !important;
    border-radius: 12px !important;
  }

  body.dashboard-body.sidebar-expanded .sidebar {
    width: min(300px, 78vw) !important;
    max-width: 78vw !important;
    padding: 10px !important;
  }

  body.dashboard-body.sidebar-expanded .side-brand {
    min-height: 52px !important;
    margin-bottom: 8px !important;
    padding: 8px !important;
    grid-template-columns: 34px minmax(0, 1fr) 32px !important;
    border-radius: 15px !important;
  }

  body.dashboard-body.sidebar-expanded .side-logo {
    width: 34px !important;
    height: 34px !important;
    border-radius: 12px !important;
    font-size: 15px !important;
  }

  body.dashboard-body.sidebar-expanded .side-brand h1 {
    font-size: 15px !important;
  }

  body.dashboard-body.sidebar-expanded .side-brand p {
    font-size: 10.5px !important;
  }

  body.dashboard-body.sidebar-expanded .side-nav {
    gap: 5px !important;
  }

  body.dashboard-body.sidebar-expanded .side-nav button {
    height: 34px !important;
    padding: 0 10px !important;
    border-radius: 12px !important;
    font-size: 12.5px !important;
  }

  body.dashboard-body.sidebar-expanded .side-brand .side-topbar,
  body.dashboard-body.sidebar-expanded .sidebar-toggle-clean {
    width: 32px !important;
    height: 32px !important;
    border-radius: 11px !important;
  }

  body.dashboard-body.sidebar-expanded .main::before {
    pointer-events: auto !important;
    cursor: default !important;
    background: rgba(0, 0, 0, .42) !important;
    backdrop-filter: blur(3px) !important;
  }

  body.dashboard-body .content,
  body.dashboard-body.sidebar-expanded .content,
  body.dashboard-body.sidebar-collapsed .content {
    padding-top: 10px !important;
  }
}

@media (max-width: 560px) {
  body.dashboard-body .topbar,
  body.dashboard-body.sidebar-expanded .topbar,
  body.dashboard-body.sidebar-collapsed .topbar {
    padding: 12px 54px 10px 12px !important;
    gap: 6px !important;
  }

  body.dashboard-body .top-title {
    grid-template-columns: 30px minmax(0, 1fr) !important;
    gap: 7px !important;
  }

  body.dashboard-body .top-badge {
    width: 30px !important;
    height: 30px !important;
  }

  body.dashboard-body .top-title h2 {
    font-size: 17px !important;
  }

  body.dashboard-body .top-title p {
    font-size: 10px !important;
  }

  body.dashboard-body .top-actions {
    padding-left: 37px !important;
    gap: 5px !important;
  }

  body.dashboard-body .top-actions .data-status-pill,
  body.dashboard-body .top-actions .pill,
  body.dashboard-body .top-actions select,
  body.dashboard-body .top-actions .btn {
    height: 25px !important;
    min-height: 25px !important;
    font-size: 10px !important;
  }

  body.dashboard-body.sidebar-expanded .sidebar {
    width: min(286px, 82vw) !important;
    max-width: 82vw !important;
  }
}


/* =========================================================
   v25_100 窄屏顶部区 + USDCNH_FX 汇率卡片微调
   - 基于 v25_99_emergency_restore
   - 只改 CSS，不动 app.js / services.py / 数据逻辑
   - 顶部区进一步压缩，减少“挤”和“大块空白”并存
   - USDCNH_FX 独占整行时：周期胶囊移动到产品名右侧；右侧开高低/前收保持纵向列表
   ========================================================= */
@media (max-width: 980px) {
  /* 顶部：进一步压缩成更低的两层结构，菜单按钮固定右上，不再制造单独空行 */
  body.dashboard-body .topbar,
  body.dashboard-body.sidebar-expanded .topbar,
  body.dashboard-body.sidebar-collapsed .topbar {
    padding: 10px 52px 10px 12px !important;
    gap: 5px !important;
    min-height: 0 !important;
    align-items: start !important;
    border-bottom-color: rgba(93, 164, 230, .16) !important;
  }

  body.dashboard-body .top-title {
    grid-template-columns: 30px minmax(0, 1fr) !important;
    gap: 8px !important;
    align-items: center !important;
    max-width: 100% !important;
  }

  body.dashboard-body .top-badge {
    width: 30px !important;
    height: 30px !important;
    border-radius: 10px !important;
    font-size: 12px !important;
  }

  body.dashboard-body .top-title h2 {
    font-size: 18px !important;
    line-height: 1.02 !important;
    margin: 0 !important;
  }

  body.dashboard-body .top-title p {
    margin-top: 2px !important;
    font-size: 10px !important;
    line-height: 1.12 !important;
    max-width: none !important;
  }

  body.dashboard-body .top-actions {
    width: 100% !important;
    padding-left: 38px !important;
    margin-top: -1px !important;
    gap: 4px 5px !important;
    align-items: center !important;
  }

  body.dashboard-body .top-actions .data-status-pill,
  body.dashboard-body .top-actions .pill,
  body.dashboard-body .top-actions select,
  body.dashboard-body .top-actions .btn {
    height: 24px !important;
    min-height: 24px !important;
    border-radius: 9px !important;
    font-size: 10px !important;
    line-height: 22px !important;
    padding-left: 7px !important;
    padding-right: 7px !important;
  }

  body.dashboard-body .top-actions select {
    min-width: 66px !important;
  }

  body.dashboard-body.sidebar-collapsed .sidebar .side-topbar {
    top: 9px !important;
    right: 12px !important;
    width: 32px !important;
    height: 32px !important;
  }

  body.dashboard-body.sidebar-collapsed .sidebar-toggle-clean {
    width: 32px !important;
    height: 32px !important;
    border-radius: 11px !important;
  }

  /* 抽屉保持可用，但再轻一点，避免打开时压迫感太重 */
  body.dashboard-body.sidebar-expanded .sidebar {
    width: min(286px, 76vw) !important;
    max-width: 76vw !important;
  }

  body.dashboard-body.sidebar-expanded .side-brand {
    min-height: 48px !important;
    padding: 7px !important;
    margin-bottom: 7px !important;
    grid-template-columns: 32px minmax(0, 1fr) 30px !important;
  }

  body.dashboard-body.sidebar-expanded .side-logo {
    width: 32px !important;
    height: 32px !important;
    border-radius: 11px !important;
  }

  body.dashboard-body.sidebar-expanded .side-nav button {
    height: 32px !important;
    border-radius: 11px !important;
    font-size: 12px !important;
  }

  /* USDCNH_FX 独占整行卡片：把“1分钟”移到产品名右侧，压缩整体高度 */
  .basis-latest-strip.with-fx-card > .market-fx-card {
    min-height: 76px !important;
    border-radius: 13px !important;
  }

  .basis-latest-strip.with-fx-card > .market-fx-card .product-tape {
    min-height: 76px !important;
    grid-template-columns: minmax(0, .82fr) 1px minmax(0, 1.18fr) !important;
  }

  .basis-latest-strip.with-fx-card > .market-fx-card .product-left {
    padding: 7px 8px 6px !important;
    min-height: 66px !important;
    row-gap: 1px !important;
  }

  .basis-latest-strip.with-fx-card > .market-fx-card .product-card-head {
    grid-area: head !important;
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) auto !important;
    align-items: start !important;
    gap: 5px !important;
  }

  .basis-latest-strip.with-fx-card > .market-fx-card .product-title-stack {
    min-width: 0 !important;
  }

  .basis-latest-strip.with-fx-card > .market-fx-card .product-name {
    font-size: 12px !important;
    line-height: 1.05 !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }

  .basis-latest-strip.with-fx-card > .market-fx-card .product-code {
    font-size: 8.8px !important;
    line-height: 1 !important;
    margin-top: 1px !important;
  }

  .basis-latest-strip.with-fx-card > .market-fx-card .product-period-pill {
    grid-column: 2 !important;
    grid-row: 1 / span 2 !important;
    justify-self: end !important;
    align-self: start !important;
    margin: 0 !important;
    height: 20px !important;
    min-width: 50px !important;
    max-width: 58px !important;
    padding: 0 15px 0 7px !important;
    line-height: 18px !important;
    font-size: 9px !important;
  }

  .basis-latest-strip.with-fx-card > .market-fx-card .last-price {
    margin-top: 2px !important;
    font-size: clamp(18px, 4.7vw, 25px) !important;
    line-height: .94 !important;
  }

  .basis-latest-strip.with-fx-card > .market-fx-card .delta {
    margin-top: 0 !important;
    font-size: 9.2px !important;
    line-height: 1 !important;
  }

  .basis-latest-strip.with-fx-card > .market-fx-card .spark {
    height: 13px !important;
    width: min(76px, 64%) !important;
    margin-top: 2px !important;
  }

  .basis-latest-strip.with-fx-card > .market-fx-card .product-right {
    padding: 8px 11px 7px !important;
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    align-content: center !important;
    gap: 4px !important;
  }

  .basis-latest-strip.with-fx-card > .market-fx-card .order-top,
  .basis-latest-strip.with-fx-card > .market-fx-card .order-row {
    min-height: 14px !important;
    display: grid !important;
    grid-template-columns: max-content minmax(6px, 1fr) auto !important;
    gap: 7px !important;
    align-items: baseline !important;
  }

  .basis-latest-strip.with-fx-card > .market-fx-card .order-top span:first-child,
  .basis-latest-strip.with-fx-card > .market-fx-card .order-label {
    grid-column: 1 !important;
    font-size: 9.5px !important;
    line-height: 1 !important;
    white-space: nowrap !important;
  }

  .basis-latest-strip.with-fx-card > .market-fx-card .order-top .order-net,
  .basis-latest-strip.with-fx-card > .market-fx-card .order-value {
    grid-column: 3 !important;
    justify-self: end !important;
    text-align: right !important;
    font-size: 10px !important;
    line-height: 1 !important;
    white-space: nowrap !important;
  }

  .basis-latest-strip.with-fx-card > .market-fx-card .order-stats {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 4px !important;
  }
}

@media (max-width: 560px) {
  body.dashboard-body .topbar,
  body.dashboard-body.sidebar-expanded .topbar,
  body.dashboard-body.sidebar-collapsed .topbar {
    padding: 9px 50px 9px 10px !important;
    gap: 4px !important;
  }

  body.dashboard-body .top-title {
    grid-template-columns: 28px minmax(0, 1fr) !important;
    gap: 7px !important;
  }

  body.dashboard-body .top-badge {
    width: 28px !important;
    height: 28px !important;
  }

  body.dashboard-body .top-title h2 {
    font-size: 16.5px !important;
  }

  body.dashboard-body .top-title p {
    font-size: 9.6px !important;
  }

  body.dashboard-body .top-actions {
    padding-left: 35px !important;
  }

  body.dashboard-body .top-actions .data-status-pill,
  body.dashboard-body .top-actions .pill,
  body.dashboard-body .top-actions select,
  body.dashboard-body .top-actions .btn {
    height: 23px !important;
    min-height: 23px !important;
    font-size: 9.6px !important;
    padding-left: 6px !important;
    padding-right: 6px !important;
  }

  .basis-latest-strip.with-fx-card > .market-fx-card .product-tape {
    grid-template-columns: minmax(0, .78fr) 1px minmax(0, 1.22fr) !important;
  }

  .basis-latest-strip.with-fx-card > .market-fx-card .product-name {
    font-size: 11px !important;
  }

  .basis-latest-strip.with-fx-card > .market-fx-card .last-price {
    font-size: clamp(17px, 4.4vw, 23px) !important;
  }

  .basis-latest-strip.with-fx-card > .market-fx-card .order-top span:first-child,
  .basis-latest-strip.with-fx-card > .market-fx-card .order-label,
  .basis-latest-strip.with-fx-card > .market-fx-card .order-top .order-net,
  .basis-latest-strip.with-fx-card > .market-fx-card .order-value {
    font-size: 9px !important;
  }
}


/* =========================================================
   v25_101 窄屏顶部一行化 + 导航浮窗化
   - 基于 v25_100，只改 CSS，不动 app.js / services.py / 数据逻辑
   - 宽屏 > 980px 不受影响
   - 窄屏顶部状态/操作尽量压缩到同一行
   - 窄屏菜单从“侧边抽屉”改为右上角浮窗菜单
   ========================================================= */
@media (max-width: 980px) {
  /* 顶部整体：更像紧凑工具栏，不再分散成两三行大块 */
  body.dashboard-body .topbar,
  body.dashboard-body.sidebar-expanded .topbar,
  body.dashboard-body.sidebar-collapsed .topbar {
    padding: 9px 50px 8px 10px !important;
    gap: 4px !important;
    min-height: 0 !important;
    align-items: start !important;
  }

  body.dashboard-body .top-title {
    grid-template-columns: 28px minmax(0, 1fr) !important;
    gap: 7px !important;
  }

  body.dashboard-body .top-badge {
    width: 28px !important;
    height: 28px !important;
    border-radius: 10px !important;
    font-size: 11px !important;
  }

  body.dashboard-body .top-title h2 {
    font-size: 17px !important;
    line-height: 1.02 !important;
  }

  body.dashboard-body .top-title p {
    margin-top: 1px !important;
    font-size: 9.6px !important;
    line-height: 1.08 !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }

  /* 核心：顶部状态/操作一行化。宽度不够时宁愿更紧，也不要先换行。 */
  body.dashboard-body .top-actions {
    width: 100% !important;
    padding-left: 35px !important;
    margin-top: 0 !important;
    display: flex !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
    justify-content: flex-start !important;
    gap: 3px !important;
    overflow: hidden !important;
  }

  body.dashboard-body .top-actions .data-status-pill {
    flex: 1 1 auto !important;
    min-width: 0 !important;
    max-width: none !important;
    height: 23px !important;
    padding: 0 6px !important;
    gap: 4px !important;
    border-radius: 9px !important;
    font-size: 9.4px !important;
    line-height: 21px !important;
    white-space: nowrap !important;
    overflow: hidden !important;
  }

  body.dashboard-body .top-actions .unprocessed-count {
    flex: 0 0 auto !important;
    height: 19px !important;
    padding: 0 6px !important;
    font-size: 9.6px !important;
    line-height: 17px !important;
  }

  body.dashboard-body .top-actions .dot {
    flex: 0 0 auto !important;
    width: 6px !important;
    height: 6px !important;
  }

  body.dashboard-body .top-actions .pill:not(.data-status-pill) {
    flex: 0 0 auto !important;
    height: 23px !important;
    min-height: 23px !important;
    padding: 0 4px !important;
    gap: 3px !important;
    border-radius: 9px !important;
    font-size: 9.2px !important;
    line-height: 21px !important;
    white-space: nowrap !important;
  }

  body.dashboard-body .top-actions select {
    flex: 0 0 auto !important;
    width: 58px !important;
    min-width: 58px !important;
    max-width: 58px !important;
    height: 23px !important;
    min-height: 23px !important;
    padding: 0 16px 0 7px !important;
    border-radius: 9px !important;
    font-size: 9.4px !important;
    line-height: 21px !important;
  }

  body.dashboard-body .top-actions #refreshSelect {
    width: 56px !important;
    min-width: 56px !important;
    max-width: 56px !important;
  }

  body.dashboard-body .top-actions .btn {
    flex: 0 0 auto !important;
    height: 23px !important;
    min-height: 23px !important;
    min-width: 0 !important;
    padding: 0 6px !important;
    border-radius: 9px !important;
    font-size: 9.4px !important;
    line-height: 21px !important;
    white-space: nowrap !important;
  }

  body.dashboard-body .top-actions #pauseBtn {
    padding-left: 7px !important;
    padding-right: 7px !important;
  }

  /* 收起状态的菜单按钮仍在右上角，但更小，避免侵占顶部视觉区域 */
  body.dashboard-body.sidebar-collapsed .sidebar .side-topbar {
    top: 8px !important;
    right: 10px !important;
    width: 30px !important;
    height: 30px !important;
  }

  body.dashboard-body.sidebar-collapsed .sidebar-toggle-clean {
    width: 30px !important;
    height: 30px !important;
    border-radius: 10px !important;
  }

  body.dashboard-body.sidebar-collapsed .toggle-lines {
    width: 14px !important;
    gap: 3px !important;
  }

  /* 菜单：从侧边抽屉改为右上角浮窗，不再从左侧占一大块 */
  body.dashboard-body.sidebar-expanded .sidebar {
    position: fixed !important;
    top: 46px !important;
    right: 10px !important;
    left: auto !important;
    bottom: auto !important;
    z-index: 120 !important;
    width: 218px !important;
    max-width: calc(100vw - 20px) !important;
    height: auto !important;
    max-height: calc(100vh - 62px) !important;
    padding: 8px !important;
    border-radius: 18px !important;
    border: 1px solid rgba(88, 196, 255, .24) !important;
    background:
      radial-gradient(circle at 20% 0%, rgba(65, 199, 255, .14), transparent 44%),
      linear-gradient(180deg, rgba(8, 24, 44, .985), rgba(3, 10, 20, .985)) !important;
    box-shadow:
      0 18px 52px rgba(0, 0, 0, .50),
      inset 0 1px 0 rgba(255, 255, 255, .055) !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    transform: none !important;
  }

  body.dashboard-body.sidebar-expanded .side-brand {
    min-height: 42px !important;
    margin: 0 0 6px !important;
    padding: 6px !important;
    grid-template-columns: 30px minmax(0, 1fr) 28px !important;
    gap: 6px !important;
    border-radius: 14px !important;
    background: rgba(255,255,255,.045) !important;
  }

  body.dashboard-body.sidebar-expanded .side-logo {
    width: 30px !important;
    height: 30px !important;
    border-radius: 10px !important;
    font-size: 14px !important;
  }

  body.dashboard-body.sidebar-expanded .side-brand h1 {
    font-size: 14px !important;
    line-height: 1.05 !important;
  }

  body.dashboard-body.sidebar-expanded .side-brand p {
    margin-top: 2px !important;
    font-size: 9.8px !important;
    line-height: 1.05 !important;
  }

  body.dashboard-body.sidebar-expanded .side-brand .side-topbar,
  body.dashboard-body.sidebar-expanded .sidebar-toggle-clean {
    width: 28px !important;
    height: 28px !important;
    border-radius: 10px !important;
  }

  body.dashboard-body.sidebar-expanded .side-nav {
    display: grid !important;
    gap: 4px !important;
    padding: 2px !important;
  }

  body.dashboard-body.sidebar-expanded .side-nav button {
    height: 30px !important;
    padding: 0 9px !important;
    border-radius: 10px !important;
    font-size: 11.5px !important;
    justify-content: flex-start !important;
  }

  body.dashboard-body.sidebar-expanded .side-note {
    display: none !important;
  }

  /* 浮窗模式下，背景只轻微压暗，不做大面积强抽屉效果 */
  body.dashboard-body.sidebar-expanded .main::before {
    pointer-events: auto !important;
    cursor: default !important;
    background: rgba(0, 0, 0, .22) !important;
    backdrop-filter: blur(1.5px) !important;
  }
}

@media (max-width: 560px) {
  body.dashboard-body .topbar,
  body.dashboard-body.sidebar-expanded .topbar,
  body.dashboard-body.sidebar-collapsed .topbar {
    padding: 8px 46px 8px 9px !important;
  }

  body.dashboard-body .top-title {
    grid-template-columns: 26px minmax(0, 1fr) !important;
    gap: 6px !important;
  }

  body.dashboard-body .top-badge {
    width: 26px !important;
    height: 26px !important;
  }

  body.dashboard-body .top-title h2 {
    font-size: 15.5px !important;
  }

  body.dashboard-body .top-title p {
    font-size: 9px !important;
  }

  body.dashboard-body .top-actions {
    padding-left: 32px !important;
    gap: 2px !important;
  }

  body.dashboard-body .top-actions .data-status-pill {
    height: 22px !important;
    padding: 0 5px !important;
    font-size: 8.8px !important;
    gap: 3px !important;
  }

  body.dashboard-body .top-actions .unprocessed-count {
    height: 18px !important;
    padding: 0 5px !important;
    font-size: 8.8px !important;
  }

  body.dashboard-body .top-actions .pill:not(.data-status-pill),
  body.dashboard-body .top-actions select,
  body.dashboard-body .top-actions .btn {
    height: 22px !important;
    min-height: 22px !important;
    font-size: 8.8px !important;
  }

  body.dashboard-body .top-actions select {
    width: 52px !important;
    min-width: 52px !important;
    max-width: 52px !important;
    padding-left: 5px !important;
    padding-right: 13px !important;
  }

  body.dashboard-body .top-actions #refreshSelect {
    width: 50px !important;
    min-width: 50px !important;
    max-width: 50px !important;
  }

  body.dashboard-body .top-actions .btn {
    padding-left: 5px !important;
    padding-right: 5px !important;
  }

  body.dashboard-body.sidebar-expanded .sidebar {
    top: 42px !important;
    right: 8px !important;
    width: 204px !important;
    max-width: calc(100vw - 16px) !important;
    border-radius: 16px !important;
  }
}


/* =========================================================
   v25_102 窄屏顶部单行完整显示 + 基差表取消横向滚动优先压缩列距
   - 基于 v25_101，只改 CSS，不动 app.js / services.py / 数据逻辑
   - 宽屏 > 980px 不受影响
   ========================================================= */
@media (max-width: 980px) {
  /* 顶部：给状态胶囊让空间，周期/刷新下拉进一步压缩 */
  body.dashboard-body .topbar,
  body.dashboard-body.sidebar-expanded .topbar,
  body.dashboard-body.sidebar-collapsed .topbar {
    padding-left: 8px !important;
    padding-right: 42px !important;
  }

  body.dashboard-body .top-actions {
    padding-left: 30px !important;
    gap: 2px !important;
    overflow: visible !important;
  }

  /* 未处理 + 数据更新必须完整显示，不再被 flex 挤压截断 */
  body.dashboard-body .top-actions .data-status-pill {
    flex: 0 0 auto !important;
    width: auto !important;
    max-width: none !important;
    padding-left: 5px !important;
    padding-right: 5px !important;
    gap: 3px !important;
    white-space: nowrap !important;
    overflow: visible !important;
    text-overflow: clip !important;
  }

  body.dashboard-body .top-actions .unprocessed-count {
    padding-left: 5px !important;
    padding-right: 5px !important;
  }

  /* 周期 / 刷新频率外层标签压缩 */
  body.dashboard-body .top-actions .pill:not(.data-status-pill) {
    height: 22px !important;
    min-height: 22px !important;
    padding-left: 3px !important;
    padding-right: 3px !important;
    gap: 2px !important;
    font-size: 8.8px !important;
  }

  /* 周期下拉、刷新频率下拉进一步收窄 */
  body.dashboard-body .top-actions select,
  body.dashboard-body .top-actions #periodSelect {
    width: 48px !important;
    min-width: 48px !important;
    max-width: 48px !important;
    height: 22px !important;
    min-height: 22px !important;
    padding-left: 5px !important;
    padding-right: 12px !important;
    font-size: 8.8px !important;
  }

  body.dashboard-body .top-actions #refreshSelect {
    width: 44px !important;
    min-width: 44px !important;
    max-width: 44px !important;
    padding-left: 5px !important;
    padding-right: 12px !important;
  }

  body.dashboard-body .top-actions .btn {
    height: 22px !important;
    min-height: 22px !important;
    padding-left: 5px !important;
    padding-right: 5px !important;
    font-size: 8.8px !important;
  }

  body.dashboard-body.sidebar-collapsed .sidebar .side-topbar {
    right: 8px !important;
    width: 28px !important;
    height: 28px !important;
  }

  body.dashboard-body.sidebar-collapsed .sidebar-toggle-clean {
    width: 28px !important;
    height: 28px !important;
  }

  /* 基差表：窄屏下优先压缩列宽/字号/内边距，不再直接依赖横向滚动条 */
  .basis-kline-card .basis-body {
    padding-left: 10px !important;
    padding-right: 10px !important;
  }

  .basis-kline-card .basis-kline-table-wrap {
    overflow-x: hidden !important;
    overflow-y: hidden !important;
    border-radius: 10px !important;
  }

  .basis-kline-card .basis-kline-table {
    width: 100% !important;
    min-width: 0 !important;
    table-layout: fixed !important;
    font-size: 10.5px !important;
  }

  .basis-kline-card .basis-kline-table th,
  .basis-kline-card .basis-kline-table td {
    padding: 7px 5px !important;
    font-size: 10.5px !important;
    line-height: 1.18 !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }

  .basis-kline-card .basis-kline-table th {
    font-size: 10px !important;
  }

  .basis-kline-card .basis-kline-table th:nth-child(1),
  .basis-kline-card .basis-kline-table td:nth-child(1) {
    width: 23% !important;
    min-width: 0 !important;
  }

  .basis-kline-card .basis-kline-table th:nth-child(2),
  .basis-kline-card .basis-kline-table td:nth-child(2) {
    width: 24% !important;
    min-width: 0 !important;
  }

  .basis-kline-card .basis-kline-table th:nth-child(3),
  .basis-kline-card .basis-kline-table td:nth-child(3) {
    width: 8% !important;
    min-width: 0 !important;
    text-align: center !important;
  }

  .basis-kline-card .basis-kline-table th:nth-child(4),
  .basis-kline-card .basis-kline-table td:nth-child(4),
  .basis-kline-card .basis-kline-table th:nth-child(5),
  .basis-kline-card .basis-kline-table td:nth-child(5),
  .basis-kline-card .basis-kline-table th:nth-child(6),
  .basis-kline-card .basis-kline-table td:nth-child(6) {
    width: 15% !important;
    min-width: 0 !important;
    text-align: right !important;
  }

  .basis-kline-card .basis-kline-table .basis-combo-name {
    max-width: 100% !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }
}

@media (max-width: 560px) {
  body.dashboard-body .topbar,
  body.dashboard-body.sidebar-expanded .topbar,
  body.dashboard-body.sidebar-collapsed .topbar {
    padding-left: 7px !important;
    padding-right: 38px !important;
  }

  body.dashboard-body .top-actions {
    padding-left: 29px !important;
    gap: 1px !important;
  }

  body.dashboard-body .top-actions .data-status-pill {
    padding-left: 4px !important;
    padding-right: 4px !important;
    gap: 2px !important;
    font-size: 8.4px !important;
  }

  body.dashboard-body .top-actions .unprocessed-count {
    padding-left: 4px !important;
    padding-right: 4px !important;
    font-size: 8.4px !important;
  }

  body.dashboard-body .top-actions .pill:not(.data-status-pill) {
    padding-left: 2px !important;
    padding-right: 2px !important;
    font-size: 8.2px !important;
  }

  body.dashboard-body .top-actions select,
  body.dashboard-body .top-actions #periodSelect {
    width: 42px !important;
    min-width: 42px !important;
    max-width: 42px !important;
    padding-left: 4px !important;
    padding-right: 10px !important;
    font-size: 8.2px !important;
  }

  body.dashboard-body .top-actions #refreshSelect {
    width: 40px !important;
    min-width: 40px !important;
    max-width: 40px !important;
  }

  body.dashboard-body .top-actions .btn {
    padding-left: 4px !important;
    padding-right: 4px !important;
    font-size: 8.2px !important;
  }

  .basis-kline-card .basis-body {
    padding-left: 8px !important;
    padding-right: 8px !important;
  }

  .basis-kline-card .basis-kline-table {
    font-size: 9.6px !important;
  }

  .basis-kline-card .basis-kline-table th,
  .basis-kline-card .basis-kline-table td {
    padding: 6px 4px !important;
    font-size: 9.6px !important;
  }

  .basis-kline-card .basis-kline-table th {
    font-size: 9.2px !important;
  }

  .basis-kline-card .basis-kline-table th:nth-child(1),
  .basis-kline-card .basis-kline-table td:nth-child(1) {
    width: 24% !important;
  }

  .basis-kline-card .basis-kline-table th:nth-child(2),
  .basis-kline-card .basis-kline-table td:nth-child(2) {
    width: 23% !important;
  }

  .basis-kline-card .basis-kline-table th:nth-child(3),
  .basis-kline-card .basis-kline-table td:nth-child(3) {
    width: 8% !important;
  }

  .basis-kline-card .basis-kline-table th:nth-child(4),
  .basis-kline-card .basis-kline-table td:nth-child(4),
  .basis-kline-card .basis-kline-table th:nth-child(5),
  .basis-kline-card .basis-kline-table td:nth-child(5),
  .basis-kline-card .basis-kline-table th:nth-child(6),
  .basis-kline-card .basis-kline-table td:nth-child(6) {
    width: 15% !important;
  }
}


/* =========================================================
   v25_103 手机端顶部状态行归位 + 基差表移动端横向滑动
   - 基于 v25_102，只改 CSS，不动 app.js / services.py / 数据逻辑
   - PC 窄窗口继续沿用 v25_102 的紧凑适配
   - 手机端：top-actions 不再向右缩进；基差表恢复横向滑动，避免强行省略号
   ========================================================= */
@media (max-width: 560px) {
  /* 手机端顶部：状态/操作行贴左排列，不再整体右移 */
  body.dashboard-body .topbar,
  body.dashboard-body.sidebar-expanded .topbar,
  body.dashboard-body.sidebar-collapsed .topbar {
    padding-left: 8px !important;
    padding-right: 38px !important;
  }

  body.dashboard-body .top-actions {
    padding-left: 0 !important;
    margin-left: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
    justify-content: flex-start !important;
    align-items: center !important;
    gap: 2px !important;
    overflow: visible !important;
  }

  body.dashboard-body .top-actions .data-status-pill {
    flex: 0 0 auto !important;
    max-width: none !important;
    white-space: nowrap !important;
    overflow: visible !important;
    text-overflow: clip !important;
  }

  /* 手机端按钮继续尽量压缩，给状态胶囊留空间 */
  body.dashboard-body .top-actions .pill:not(.data-status-pill),
  body.dashboard-body .top-actions select,
  body.dashboard-body .top-actions .btn {
    height: 22px !important;
    min-height: 22px !important;
    font-size: 8.1px !important;
  }

  body.dashboard-body .top-actions select,
  body.dashboard-body .top-actions #periodSelect {
    width: 40px !important;
    min-width: 40px !important;
    max-width: 40px !important;
    padding-left: 3px !important;
    padding-right: 9px !important;
  }

  body.dashboard-body .top-actions #refreshSelect {
    width: 38px !important;
    min-width: 38px !important;
    max-width: 38px !important;
  }

  body.dashboard-body .top-actions .btn {
    padding-left: 4px !important;
    padding-right: 4px !important;
  }

  /* 手机端基差表：不要强行塞进屏幕导致大量省略号，改为横向滑动 */
  .basis-kline-card .basis-kline-table-wrap {
    overflow-x: auto !important;
    overflow-y: hidden !important;
    -webkit-overflow-scrolling: touch !important;
    scrollbar-width: thin !important;
    overscroll-behavior-x: contain !important;
    touch-action: pan-x pan-y !important;
  }

  .basis-kline-card .basis-kline-table {
    width: 760px !important;
    min-width: 760px !important;
    table-layout: fixed !important;
    font-size: 12px !important;
  }

  .basis-kline-card .basis-kline-table th,
  .basis-kline-card .basis-kline-table td {
    padding: 8px 8px !important;
    font-size: 12px !important;
    line-height: 1.25 !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }

  .basis-kline-card .basis-kline-table th {
    font-size: 11.5px !important;
  }

  .basis-kline-card .basis-kline-table th:nth-child(1),
  .basis-kline-card .basis-kline-table td:nth-child(1) {
    width: 168px !important;
    min-width: 168px !important;
  }

  .basis-kline-card .basis-kline-table th:nth-child(2),
  .basis-kline-card .basis-kline-table td:nth-child(2) {
    width: 190px !important;
    min-width: 190px !important;
  }

  .basis-kline-card .basis-kline-table th:nth-child(3),
  .basis-kline-card .basis-kline-table td:nth-child(3) {
    width: 58px !important;
    min-width: 58px !important;
    text-align: center !important;
  }

  .basis-kline-card .basis-kline-table th:nth-child(4),
  .basis-kline-card .basis-kline-table td:nth-child(4),
  .basis-kline-card .basis-kline-table th:nth-child(5),
  .basis-kline-card .basis-kline-table td:nth-child(5),
  .basis-kline-card .basis-kline-table th:nth-child(6),
  .basis-kline-card .basis-kline-table td:nth-child(6) {
    width: 114px !important;
    min-width: 114px !important;
    text-align: right !important;
  }

  .basis-kline-card .basis-kline-table .basis-combo-name {
    max-width: none !important;
  }

  .basis-kline-card .basis-kline-table-wrap::after {
    content: "← 左右滑动查看更多 →";
    display: block;
    padding: 5px 2px 0;
    color: rgba(154, 181, 215, .72);
    font-size: 10px;
    text-align: center;
    letter-spacing: .02em;
  }
}

@media (max-width: 390px) {
  body.dashboard-body .top-actions .data-status-pill {
    font-size: 8.1px !important;
    padding-left: 3px !important;
    padding-right: 3px !important;
  }

  body.dashboard-body .top-actions .unprocessed-count {
    padding-left: 3px !important;
    padding-right: 3px !important;
    font-size: 8.1px !important;
  }

  body.dashboard-body .top-actions .pill:not(.data-status-pill),
  body.dashboard-body .top-actions select,
  body.dashboard-body .top-actions .btn {
    font-size: 7.8px !important;
  }
}


/* =========================================================
   v25_105 基差表列序 + 列距压缩
   - 基于 v25_103/v25_104 cache-bust 状态继续最小修复
   - 基差表列顺序由 app.js 改为：时间 / 组合名称 / 价差开 / 价差收 / 价差均值 / 周期
   - CSS 同步压缩列距，周期列固定到最末列
   ========================================================= */

/* 宽屏也同步周期列在末列后的宽度策略，不影响数据逻辑 */
.basis-kline-card .basis-kline-table {
  table-layout: fixed;
}

.basis-kline-card .basis-kline-table .basis-col-time { width: 21%; }
.basis-kline-card .basis-kline-table .basis-col-name { width: 26%; }
.basis-kline-card .basis-kline-table .basis-col-open { width: 14.5%; }
.basis-kline-card .basis-kline-table .basis-col-close { width: 14.5%; }
.basis-kline-card .basis-kline-table .basis-col-avg { width: 15%; }
.basis-kline-card .basis-kline-table .basis-col-period { width: 9%; }

.basis-kline-card .basis-kline-table .basis-period-cell,
.basis-kline-card .basis-kline-table th:nth-child(6),
.basis-kline-card .basis-kline-table td:nth-child(6) {
  text-align: center;
  white-space: nowrap;
}

@media (max-width: 980px) {
  /* PC 窄窗口：继续优先塞进可视区域，但减少列间空白 */
  .basis-kline-card .basis-body {
    padding-left: 8px !important;
    padding-right: 8px !important;
  }

  .basis-kline-card .basis-kline-table-wrap {
    overflow-x: hidden !important;
    overflow-y: hidden !important;
  }

  .basis-kline-card .basis-kline-table {
    width: 100% !important;
    min-width: 0 !important;
    table-layout: fixed !important;
    font-size: 10.2px !important;
  }

  .basis-kline-card .basis-kline-table th,
  .basis-kline-card .basis-kline-table td {
    padding: 7px 3px !important;
    font-size: 10.2px !important;
    line-height: 1.16 !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }

  .basis-kline-card .basis-kline-table th {
    font-size: 9.7px !important;
  }

  .basis-kline-card .basis-kline-table th:nth-child(1),
  .basis-kline-card .basis-kline-table td:nth-child(1) {
    width: 23% !important;
    text-align: left !important;
  }

  .basis-kline-card .basis-kline-table th:nth-child(2),
  .basis-kline-card .basis-kline-table td:nth-child(2) {
    width: 25% !important;
    text-align: left !important;
  }

  .basis-kline-card .basis-kline-table th:nth-child(3),
  .basis-kline-card .basis-kline-table td:nth-child(3),
  .basis-kline-card .basis-kline-table th:nth-child(4),
  .basis-kline-card .basis-kline-table td:nth-child(4),
  .basis-kline-card .basis-kline-table th:nth-child(5),
  .basis-kline-card .basis-kline-table td:nth-child(5) {
    width: 15% !important;
    text-align: right !important;
  }

  .basis-kline-card .basis-kline-table th:nth-child(6),
  .basis-kline-card .basis-kline-table td:nth-child(6) {
    width: 7% !important;
    text-align: center !important;
  }

  .basis-kline-card .basis-kline-table .basis-combo-name {
    max-width: 100% !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }
}

@media (max-width: 560px) {
  /* 手机端：允许左右滑动，但把整张表宽度从 760 压到 650，减少空白跨度 */
  .basis-kline-card .basis-kline-table-wrap {
    overflow-x: auto !important;
    overflow-y: hidden !important;
    -webkit-overflow-scrolling: touch !important;
    scrollbar-width: thin !important;
    overscroll-behavior-x: contain !important;
    touch-action: pan-x pan-y !important;
  }

  .basis-kline-card .basis-kline-table {
    width: 650px !important;
    min-width: 650px !important;
    table-layout: fixed !important;
    font-size: 11.2px !important;
  }

  .basis-kline-card .basis-kline-table th,
  .basis-kline-card .basis-kline-table td {
    padding: 7px 5px !important;
    font-size: 11.2px !important;
    line-height: 1.2 !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }

  .basis-kline-card .basis-kline-table th {
    font-size: 10.7px !important;
  }

  .basis-kline-card .basis-kline-table th:nth-child(1),
  .basis-kline-card .basis-kline-table td:nth-child(1) {
    width: 145px !important;
    min-width: 145px !important;
    text-align: left !important;
  }

  .basis-kline-card .basis-kline-table th:nth-child(2),
  .basis-kline-card .basis-kline-table td:nth-child(2) {
    width: 170px !important;
    min-width: 170px !important;
    text-align: left !important;
  }

  .basis-kline-card .basis-kline-table th:nth-child(3),
  .basis-kline-card .basis-kline-table td:nth-child(3),
  .basis-kline-card .basis-kline-table th:nth-child(4),
  .basis-kline-card .basis-kline-table td:nth-child(4),
  .basis-kline-card .basis-kline-table th:nth-child(5),
  .basis-kline-card .basis-kline-table td:nth-child(5) {
    width: 92px !important;
    min-width: 92px !important;
    text-align: right !important;
  }

  .basis-kline-card .basis-kline-table th:nth-child(6),
  .basis-kline-card .basis-kline-table td:nth-child(6) {
    width: 55px !important;
    min-width: 55px !important;
    text-align: center !important;
  }

  .basis-kline-card .basis-kline-table-wrap::after {
    content: "← 左右滑动查看更多 →";
    display: block;
    padding: 5px 2px 0;
    color: rgba(154, 181, 215, .72);
    font-size: 10px;
    text-align: center;
    letter-spacing: .02em;
  }
}

@media (max-width: 390px) {
  .basis-kline-card .basis-kline-table {
    width: 620px !important;
    min-width: 620px !important;
    font-size: 10.8px !important;
  }

  .basis-kline-card .basis-kline-table th,
  .basis-kline-card .basis-kline-table td {
    padding-left: 4px !important;
    padding-right: 4px !important;
    font-size: 10.8px !important;
  }

  .basis-kline-card .basis-kline-table th:nth-child(1),
  .basis-kline-card .basis-kline-table td:nth-child(1) {
    width: 140px !important;
    min-width: 140px !important;
  }

  .basis-kline-card .basis-kline-table th:nth-child(2),
  .basis-kline-card .basis-kline-table td:nth-child(2) {
    width: 160px !important;
    min-width: 160px !important;
  }

  .basis-kline-card .basis-kline-table th:nth-child(3),
  .basis-kline-card .basis-kline-table td:nth-child(3),
  .basis-kline-card .basis-kline-table th:nth-child(4),
  .basis-kline-card .basis-kline-table td:nth-child(4),
  .basis-kline-card .basis-kline-table th:nth-child(5),
  .basis-kline-card .basis-kline-table td:nth-child(5) {
    width: 88px !important;
    min-width: 88px !important;
  }

  .basis-kline-card .basis-kline-table th:nth-child(6),
  .basis-kline-card .basis-kline-table td:nth-child(6) {
    width: 52px !important;
    min-width: 52px !important;
  }
}


/* =========================================================
   v25_106 手机端基差表列距进一步压缩
   - 基于 v25_105，只改 CSS，不动 app.js / services.py / 数据逻辑
   - 目标：减少“组合名称”和“价差开”之间的大块空白
   - 周期列继续保持在最末列
   ========================================================= */
@media (max-width: 560px) {
  .basis-kline-card .basis-body {
    padding-left: 7px !important;
    padding-right: 7px !important;
  }

  .basis-kline-card .basis-kline-table-wrap {
    overflow-x: auto !important;
    overflow-y: hidden !important;
    -webkit-overflow-scrolling: touch !important;
    scrollbar-width: thin !important;
    overscroll-behavior-x: contain !important;
    touch-action: pan-x pan-y !important;
  }

  /* 从 v25_105 的约 650px 继续压到 570px，避免左侧可视区域出现大块空白 */
  .basis-kline-card .basis-kline-table {
    width: 570px !important;
    min-width: 570px !important;
    table-layout: fixed !important;
    font-size: 10.6px !important;
  }

  .basis-kline-card .basis-kline-table th,
  .basis-kline-card .basis-kline-table td {
    padding: 6px 3px !important;
    font-size: 10.6px !important;
    line-height: 1.18 !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }

  .basis-kline-card .basis-kline-table th {
    font-size: 10.2px !important;
  }

  .basis-kline-card .basis-kline-table th:nth-child(1),
  .basis-kline-card .basis-kline-table td:nth-child(1) {
    width: 138px !important;
    min-width: 138px !important;
    max-width: 138px !important;
    text-align: left !important;
  }

  .basis-kline-card .basis-kline-table th:nth-child(2),
  .basis-kline-card .basis-kline-table td:nth-child(2) {
    width: 142px !important;
    min-width: 142px !important;
    max-width: 142px !important;
    text-align: left !important;
  }

  .basis-kline-card .basis-kline-table th:nth-child(3),
  .basis-kline-card .basis-kline-table td:nth-child(3),
  .basis-kline-card .basis-kline-table th:nth-child(4),
  .basis-kline-card .basis-kline-table td:nth-child(4),
  .basis-kline-card .basis-kline-table th:nth-child(5),
  .basis-kline-card .basis-kline-table td:nth-child(5) {
    width: 80px !important;
    min-width: 80px !important;
    max-width: 80px !important;
    text-align: left !important;
  }

  .basis-kline-card .basis-kline-table th:nth-child(6),
  .basis-kline-card .basis-kline-table td:nth-child(6) {
    width: 50px !important;
    min-width: 50px !important;
    max-width: 50px !important;
    text-align: center !important;
  }

  .basis-kline-card .basis-kline-table .basis-combo-name {
    max-width: 100% !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }
}

@media (max-width: 390px) {
  /* 极窄手机再压一档 */
  .basis-kline-card .basis-kline-table {
    width: 540px !important;
    min-width: 540px !important;
    font-size: 10.2px !important;
  }

  .basis-kline-card .basis-kline-table th,
  .basis-kline-card .basis-kline-table td {
    padding-left: 2px !important;
    padding-right: 2px !important;
    font-size: 10.2px !important;
  }

  .basis-kline-card .basis-kline-table th:nth-child(1),
  .basis-kline-card .basis-kline-table td:nth-child(1) {
    width: 132px !important;
    min-width: 132px !important;
    max-width: 132px !important;
  }

  .basis-kline-card .basis-kline-table th:nth-child(2),
  .basis-kline-card .basis-kline-table td:nth-child(2) {
    width: 132px !important;
    min-width: 132px !important;
    max-width: 132px !important;
  }

  .basis-kline-card .basis-kline-table th:nth-child(3),
  .basis-kline-card .basis-kline-table td:nth-child(3),
  .basis-kline-card .basis-kline-table th:nth-child(4),
  .basis-kline-card .basis-kline-table td:nth-child(4),
  .basis-kline-card .basis-kline-table th:nth-child(5),
  .basis-kline-card .basis-kline-table td:nth-child(5) {
    width: 76px !important;
    min-width: 76px !important;
    max-width: 76px !important;
  }

  .basis-kline-card .basis-kline-table th:nth-child(6),
  .basis-kline-card .basis-kline-table td:nth-child(6) {
    width: 48px !important;
    min-width: 48px !important;
    max-width: 48px !important;
  }
}


/* =========================================================
   v25_107 账号管理页移动端适配修复
   - 基于 v25_106，只补账号管理页 mobile CSS
   - 不修改 dashboard app.js / services.py / 数据逻辑
   - 修复手机端 /admin/accounts 出现侧栏挤压、文字竖排、页面横向错位的问题
   ========================================================= */
@media (max-width: 820px) {
  body.admin-console-body {
    min-width: 0 !important;
    width: 100% !important;
    max-width: 100vw !important;
    overflow-x: hidden !important;
  }

  /* 账号管理页不沿用看板侧边抽屉；移动端改成顶部功能导航区 */
  body.admin-console-body .sidebar.admin-sidebar {
    position: static !important;
    inset: auto !important;
    transform: none !important;
    opacity: 1 !important;
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    max-height: none !important;
    margin: 0 !important;
    padding: 10px 10px 8px !important;
    border-right: 0 !important;
    border-bottom: 1px solid rgba(93, 164, 230, .18) !important;
    border-radius: 0 !important;
    background:
      radial-gradient(circle at 12% 0%, rgba(65, 199, 255, .12), transparent 42%),
      linear-gradient(180deg, rgba(5, 15, 29, .98), rgba(3, 9, 18, .96)) !important;
    box-shadow: none !important;
    overflow: visible !important;
    pointer-events: auto !important;
  }

  body.admin-console-body .main.admin-main {
    margin-left: 0 !important;
    width: 100% !important;
    max-width: 100vw !important;
    min-width: 0 !important;
    min-height: auto !important;
  }

  body.admin-console-body .main.admin-main::before {
    display: none !important;
    content: none !important;
  }

  /* 顶部品牌条压缩成横向，不再让文字竖排 */
  body.admin-console-body .sidebar.admin-sidebar .side-brand {
    display: grid !important;
    grid-template-columns: 34px minmax(0, 1fr) !important;
    gap: 8px !important;
    align-items: center !important;
    min-height: 48px !important;
    margin: 0 0 8px !important;
    padding: 8px !important;
    border-radius: 15px !important;
  }

  body.admin-console-body .sidebar.admin-sidebar .side-logo {
    width: 34px !important;
    height: 34px !important;
    border-radius: 12px !important;
    font-size: 14px !important;
  }

  body.admin-console-body .sidebar.admin-sidebar .side-brand h1 {
    margin: 0 !important;
    font-size: 17px !important;
    line-height: 1.05 !important;
    white-space: nowrap !important;
  }

  body.admin-console-body .sidebar.admin-sidebar .side-brand p {
    margin: 2px 0 0 !important;
    font-size: 10.5px !important;
    line-height: 1.1 !important;
    white-space: nowrap !important;
  }

  /* 功能导航改为横向/两列按钮，避免 92px 窄侧栏导致汉字竖排 */
  body.admin-console-body .admin-side-tabs {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 6px !important;
    margin-top: 0 !important;
  }

  body.admin-console-body .admin-side-tabs button {
    min-width: 0 !important;
    width: 100% !important;
    min-height: 34px !important;
    height: 34px !important;
    padding: 0 9px !important;
    border-radius: 11px !important;
    font-size: 12px !important;
    line-height: 1 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 6px !important;
    text-align: left !important;
    writing-mode: horizontal-tb !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    transform: none !important;
  }

  body.admin-console-body .admin-side-tabs button:first-child {
    margin-bottom: 0 !important;
  }

  body.admin-console-body .admin-side-tabs .nav-full {
    display: inline-block !important;
    min-width: 0 !important;
    max-width: 100% !important;
    writing-mode: horizontal-tb !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }

  body.admin-console-body .nav-count {
    flex: 0 0 auto !important;
    min-width: 20px !important;
    height: 18px !important;
    padding: 0 5px !important;
    font-size: 10px !important;
  }

  body.admin-console-body .side-note {
    display: none !important;
  }

  /* 账号管理页 topbar 移动端也改为普通块，不走看板右上浮窗布局 */
  body.admin-console-body .topbar.admin-topbar {
    position: static !important;
    inset: auto !important;
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 8px !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: 12px 12px 10px !important;
    border-bottom: 1px solid rgba(93, 164, 230, .16) !important;
  }

  body.admin-console-body .topbar.admin-topbar .top-title {
    display: grid !important;
    grid-template-columns: 32px minmax(0, 1fr) !important;
    gap: 8px !important;
    align-items: center !important;
  }

  body.admin-console-body .topbar.admin-topbar .top-badge {
    width: 32px !important;
    height: 32px !important;
    border-radius: 11px !important;
  }

  body.admin-console-body .topbar.admin-topbar h2 {
    font-size: 20px !important;
    line-height: 1.06 !important;
    margin: 0 !important;
    writing-mode: horizontal-tb !important;
  }

  body.admin-console-body .topbar.admin-topbar p {
    margin-top: 4px !important;
    font-size: 12px !important;
    line-height: 1.25 !important;
    writing-mode: horizontal-tb !important;
  }

  body.admin-console-body .topbar.admin-topbar .top-actions {
    padding-left: 0 !important;
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 6px !important;
    overflow: visible !important;
  }

  body.admin-console-body .topbar.admin-topbar .pill,
  body.admin-console-body .topbar.admin-topbar .btn {
    height: 28px !important;
    min-height: 28px !important;
    padding: 0 9px !important;
    border-radius: 10px !important;
    font-size: 11px !important;
    line-height: 26px !important;
    white-space: nowrap !important;
  }

  body.admin-console-body .content.admin-content {
    width: 100% !important;
    max-width: 100vw !important;
    min-width: 0 !important;
    padding: 12px 10px 18px !important;
  }

  body.admin-console-body .admin-shell,
  body.admin-console-body .admin-section,
  body.admin-console-body .admin-users-card {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
  }

  body.admin-console-body .admin-section-head {
    padding: 14px !important;
    margin-bottom: 12px !important;
    border-radius: 18px !important;
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 10px !important;
  }

  body.admin-console-body .admin-section-head h2 {
    font-size: 22px !important;
    line-height: 1.08 !important;
    writing-mode: horizontal-tb !important;
  }

  body.admin-console-body .admin-section-head p,
  body.admin-console-body .admin-help-card,
  body.admin-console-body .timer-definition-box {
    writing-mode: horizontal-tb !important;
    word-break: normal !important;
    overflow-wrap: break-word !important;
  }

  body.admin-console-body .admin-head-actions {
    justify-content: flex-start !important;
    gap: 7px !important;
  }

  body.admin-console-body .admin-head-actions .btn,
  body.admin-console-body .admin-head-actions button {
    min-height: 32px !important;
    height: 32px !important;
    padding: 0 10px !important;
    font-size: 12px !important;
  }

  body.admin-console-body .invite-pool-grid,
  body.admin-console-body .timer-status-grid,
  body.admin-console-body .admin-form-grid {
    grid-template-columns: 1fr !important;
    gap: 10px !important;
  }

  body.admin-console-body .invite-card {
    min-height: 154px !important;
    padding: 14px !important;
    border-radius: 18px !important;
  }

  body.admin-console-body .invite-card-top {
    margin-bottom: 10px !important;
  }

  body.admin-console-body .invite-code {
    font-size: clamp(22px, 7.2vw, 30px) !important;
    letter-spacing: .045em !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    writing-mode: horizontal-tb !important;
  }

  body.admin-console-body .invite-meta {
    font-size: 12px !important;
    line-height: 1.3 !important;
  }

  body.admin-console-body .invite-copy {
    min-height: 34px !important;
  }

  /* 大表格在手机端只在表格内部横向滑动，页面本身不横向错位 */
  body.admin-console-body .admin-wide-table,
  body.admin-console-body .admin-users-table-wrap {
    width: 100% !important;
    max-width: 100% !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    -webkit-overflow-scrolling: touch !important;
    overscroll-behavior-x: contain !important;
    border-radius: 14px !important;
  }

  body.admin-console-body .admin-users-table {
    width: 1120px !important;
    min-width: 1120px !important;
    table-layout: fixed !important;
  }

  body.admin-console-body .admin-users-body {
    padding: 10px !important;
  }

  body.admin-console-body table th,
  body.admin-console-body table td {
    writing-mode: horizontal-tb !important;
    word-break: normal !important;
  }
}

@media (max-width: 430px) {
  body.admin-console-body .admin-side-tabs {
    grid-template-columns: 1fr 1fr !important;
    gap: 5px !important;
  }

  body.admin-console-body .admin-side-tabs button {
    height: 32px !important;
    min-height: 32px !important;
    padding: 0 7px !important;
    font-size: 11px !important;
  }

  body.admin-console-body .content.admin-content {
    padding-left: 8px !important;
    padding-right: 8px !important;
  }

  body.admin-console-body .invite-card {
    padding: 13px !important;
  }

  body.admin-console-body .invite-code {
    font-size: clamp(21px, 7vw, 28px) !important;
  }
}


/* =========================================================
   v25_108 集合看板顶部区结构优化
   - 基于 v25_107，只调整 dashboard.html 顶部结构 + CSS
   - 宽版/窄版都隐藏“行情、基差、内外盘比、订单流与数据状态。”
   - 该位置改放“未处理 / 数据更新”整块胶囊
   - 周期、刷新频率、暂停、账号管理、退出保留在原操作区，并左对齐/可换行
   - 不修改 app.js / services.py / 数据逻辑
   ========================================================= */

/* 宽版同样去掉顶部说明小字，但保留 DOM，避免 app.js 更新 pageDesc 时出错 */
body.dashboard-body .top-title #pageDesc {
  display: none !important;
}

/* top-title 内的新状态胶囊 */
body.dashboard-body .top-title-copy {
  min-width: 0 !important;
}

body.dashboard-body .top-title .top-status-pill {
  margin-top: 5px !important;
  width: fit-content !important;
  max-width: min(520px, 100%) !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: flex-start !important;
  gap: 7px !important;
  height: 30px !important;
  padding: 0 10px !important;
  white-space: nowrap !important;
  overflow: visible !important;
  text-overflow: clip !important;
}

body.dashboard-body .top-title .top-status-pill .unprocessed-count {
  flex: 0 0 auto !important;
}

body.dashboard-body .top-title .top-status-pill #statusText {
  min-width: 0 !important;
  white-space: nowrap !important;
}

/* top-actions 现在只负责周期/刷新/按钮，不再承载状态胶囊 */
body.dashboard-body .top-actions {
  justify-content: flex-start !important;
  align-items: center !important;
}

@media (min-width: 981px) {
  body.dashboard-body .topbar {
    align-items: center !important;
    gap: 18px !important;
  }

  body.dashboard-body .top-title {
    align-items: center !important;
  }

  body.dashboard-body .top-actions {
    flex: 0 0 auto !important;
    display: flex !important;
    flex-wrap: wrap !important;
    justify-content: flex-start !important;
    gap: 8px !important;
  }
}

@media (max-width: 980px) {
  /* 顶部不再强行把所有控件塞同一行；标题区放状态，操作区左对齐换行 */
  body.dashboard-body .topbar,
  body.dashboard-body.sidebar-expanded .topbar,
  body.dashboard-body.sidebar-collapsed .topbar {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 6px !important;
    padding: 9px 44px 9px 10px !important;
    min-height: 0 !important;
    align-items: start !important;
  }

  body.dashboard-body .top-title {
    grid-template-columns: 28px minmax(0, 1fr) !important;
    align-items: center !important;
    gap: 7px !important;
    min-width: 0 !important;
  }

  body.dashboard-body .top-title h2 {
    font-size: 17px !important;
    line-height: 1.03 !important;
    margin: 0 !important;
  }

  body.dashboard-body .top-title .top-status-pill {
    margin-top: 4px !important;
    height: 24px !important;
    max-width: 100% !important;
    padding: 0 7px !important;
    gap: 4px !important;
    border-radius: 10px !important;
    font-size: 9.6px !important;
    line-height: 22px !important;
  }

  body.dashboard-body .top-title .top-status-pill .unprocessed-count {
    height: 19px !important;
    padding: 0 6px !important;
    font-size: 9.6px !important;
    line-height: 17px !important;
  }

  body.dashboard-body .top-title .top-status-pill .dot {
    width: 6px !important;
    height: 6px !important;
  }

  body.dashboard-body .top-actions {
    width: 100% !important;
    padding-left: 35px !important;
    margin-top: 0 !important;
    display: flex !important;
    flex-wrap: wrap !important;
    justify-content: flex-start !important;
    align-items: center !important;
    gap: 5px !important;
    overflow: visible !important;
  }

  body.dashboard-body .top-actions .pill:not(.data-status-pill),
  body.dashboard-body .top-actions select,
  body.dashboard-body .top-actions .btn {
    height: 23px !important;
    min-height: 23px !important;
    border-radius: 9px !important;
    font-size: 9.2px !important;
    line-height: 21px !important;
  }

  body.dashboard-body .top-actions .pill:not(.data-status-pill) {
    padding-left: 5px !important;
    padding-right: 5px !important;
    gap: 3px !important;
  }

  body.dashboard-body .top-actions select,
  body.dashboard-body .top-actions #periodSelect {
    width: 56px !important;
    min-width: 56px !important;
    max-width: 56px !important;
    padding-left: 6px !important;
    padding-right: 14px !important;
  }

  body.dashboard-body .top-actions #refreshSelect {
    width: 52px !important;
    min-width: 52px !important;
    max-width: 52px !important;
  }

  body.dashboard-body .top-actions .btn {
    padding-left: 6px !important;
    padding-right: 6px !important;
    white-space: nowrap !important;
  }

  body.dashboard-body.sidebar-collapsed .sidebar .side-topbar {
    top: 9px !important;
    right: 9px !important;
  }
}

@media (max-width: 560px) {
  body.dashboard-body .topbar,
  body.dashboard-body.sidebar-expanded .topbar,
  body.dashboard-body.sidebar-collapsed .topbar {
    padding: 8px 40px 8px 8px !important;
    gap: 5px !important;
  }

  body.dashboard-body .top-title {
    grid-template-columns: 26px minmax(0, 1fr) !important;
    gap: 6px !important;
  }

  body.dashboard-body .top-title h2 {
    font-size: 16px !important;
  }

  body.dashboard-body .top-title .top-status-pill {
    height: 23px !important;
    padding-left: 6px !important;
    padding-right: 6px !important;
    font-size: 9px !important;
    gap: 3px !important;
  }

  body.dashboard-body .top-title .top-status-pill .unprocessed-count {
    height: 18px !important;
    padding-left: 5px !important;
    padding-right: 5px !important;
    font-size: 9px !important;
  }

  body.dashboard-body .top-actions {
    padding-left: 32px !important;
    gap: 4px !important;
  }

  body.dashboard-body .top-actions .pill:not(.data-status-pill),
  body.dashboard-body .top-actions select,
  body.dashboard-body .top-actions .btn {
    height: 22px !important;
    min-height: 22px !important;
    font-size: 8.7px !important;
  }

  body.dashboard-body .top-actions select,
  body.dashboard-body .top-actions #periodSelect {
    width: 52px !important;
    min-width: 52px !important;
    max-width: 52px !important;
    padding-left: 5px !important;
    padding-right: 12px !important;
  }

  body.dashboard-body .top-actions #refreshSelect {
    width: 48px !important;
    min-width: 48px !important;
    max-width: 48px !important;
  }

  body.dashboard-body .top-actions .btn {
    padding-left: 5px !important;
    padding-right: 5px !important;
  }
}

@media (max-width: 390px) {
  body.dashboard-body .top-title .top-status-pill {
    font-size: 8.5px !important;
    padding-left: 5px !important;
    padding-right: 5px !important;
  }

  body.dashboard-body .top-title .top-status-pill .unprocessed-count {
    font-size: 8.5px !important;
    padding-left: 4px !important;
    padding-right: 4px !important;
  }

  body.dashboard-body .top-actions {
    padding-left: 30px !important;
    gap: 3px !important;
  }

  body.dashboard-body .top-actions select,
  body.dashboard-body .top-actions #periodSelect {
    width: 48px !important;
    min-width: 48px !important;
    max-width: 48px !important;
  }

  body.dashboard-body .top-actions #refreshSelect {
    width: 44px !important;
    min-width: 44px !important;
    max-width: 44px !important;
  }
}


/* =========================================================
   v25_109 同步观察窄屏/手机端操作按钮一行化
   - 基于 v25_108，只改同步观察展开区工具栏样式
   - 不修改 app.js / services.py / 数据逻辑
   - 目标：最早/左右/最新/放大/缩小/全量/重置/收起 9个按钮同一行均分
   ========================================================= */
@media (max-width: 980px) {
  .sync-watch-open-panel .sync-watch-toolbar {
    display: flex !important;
    flex-wrap: wrap !important;
    align-items: center !important;
    justify-content: stretch !important;
    gap: 4px !important;
    row-gap: 5px !important;
    padding: 5px 6px !important;
    overflow: visible !important;
    white-space: normal !important;
  }

  /* 添加选择器仍保留在第一行，压缩高度 */
  .sync-watch-open-panel .sync-add-select-wrap {
    order: 1 !important;
    flex: 1 1 100% !important;
    min-width: 0 !important;
    max-width: none !important;
    height: 28px !important;
    padding: 0 7px !important;
    gap: 5px !important;
    border-radius: 13px !important;
  }

  .sync-watch-open-panel .sync-add-select-wrap span {
    font-size: 10px !important;
    line-height: 1 !important;
  }

  .sync-watch-open-panel .sync-add-select,
  .sync-watch-open-panel .sync-layer-menu-trigger {
    height: 24px !important;
    min-height: 24px !important;
    font-size: 10.2px !important;
  }

  /* 周期 + 已添加：第二行左右均分 */
  .sync-watch-open-panel .mini-period-control {
    order: 2 !important;
    flex: 1 1 calc(50% - 3px) !important;
    min-width: 0 !important;
    height: 26px !important;
    min-height: 26px !important;
    padding: 0 7px !important;
    border-radius: 13px !important;
  }

  .sync-watch-open-panel .mini-period-button {
    height: 24px !important;
    min-width: 0 !important;
    width: 100% !important;
    padding: 0 16px 0 4px !important;
    font-size: 10px !important;
  }

  .sync-watch-open-panel .period-control-caption {
    font-size: 9.6px !important;
  }

  .sync-watch-open-panel .sync-watch-toolbar .tag {
    order: 3 !important;
    flex: 1 1 calc(50% - 3px) !important;
    min-width: 0 !important;
    height: 26px !important;
    min-height: 26px !important;
    justify-content: center !important;
    padding: 0 7px !important;
    border-radius: 13px !important;
    font-size: 10px !important;
    line-height: 24px !important;
  }

  /* 核心：9 个工具按钮第三行一行均分 */
  .sync-watch-open-panel .sync-tool-btn {
    order: 4 !important;
    flex: 1 1 calc((100% - 32px) / 9) !important;
    width: auto !important;
    min-width: 0 !important;
    max-width: none !important;
    height: 25px !important;
    min-height: 25px !important;
    padding: 0 1px !important;
    border-radius: 12px !important;
    font-size: 9.8px !important;
    line-height: 23px !important;
    font-weight: 900 !important;
    letter-spacing: 0 !important;
    justify-content: center !important;
    text-align: center !important;
  }

  .sync-watch-open-panel .sync-selected-row {
    min-height: 24px !important;
    padding: 5px 7px !important;
    gap: 5px !important;
    font-size: 11px !important;
  }

  .sync-watch-open-panel .sync-selected-row.empty {
    padding-top: 5px !important;
    padding-bottom: 5px !important;
  }
}

@media (max-width: 560px) {
  .sync-watch-open-panel .sync-watch-toolbar {
    gap: 3px !important;
    row-gap: 4px !important;
    padding: 4px 5px !important;
  }

  .sync-watch-open-panel .sync-add-select-wrap {
    height: 26px !important;
    padding: 0 6px !important;
  }

  .sync-watch-open-panel .sync-add-select-wrap span {
    font-size: 9.5px !important;
  }

  .sync-watch-open-panel .sync-add-select,
  .sync-watch-open-panel .sync-layer-menu-trigger {
    height: 23px !important;
    min-height: 23px !important;
    font-size: 9.5px !important;
  }

  .sync-watch-open-panel .mini-period-control,
  .sync-watch-open-panel .sync-watch-toolbar .tag {
    height: 24px !important;
    min-height: 24px !important;
    border-radius: 12px !important;
    font-size: 9.2px !important;
  }

  .sync-watch-open-panel .mini-period-button {
    height: 22px !important;
    font-size: 9.2px !important;
  }

  .sync-watch-open-panel .period-control-caption {
    font-size: 9px !important;
  }

  /* 手机端使用更短标签，确保 9 个按钮同排不挤爆 */
  .sync-watch-open-panel .sync-tool-btn {
    height: 24px !important;
    min-height: 24px !important;
    border-radius: 11px !important;
    font-size: 0 !important;
    line-height: 22px !important;
  }

  .sync-watch-open-panel .sync-tool-btn::before {
    display: inline-block;
    font-size: 11px;
    line-height: 22px;
    font-weight: 950;
  }

  .sync-watch-open-panel .sync-tool-btn:nth-of-type(1)::before { content: "早"; }
  .sync-watch-open-panel .sync-tool-btn:nth-of-type(2)::before { content: "←"; }
  .sync-watch-open-panel .sync-tool-btn:nth-of-type(3)::before { content: "→"; }
  .sync-watch-open-panel .sync-tool-btn:nth-of-type(4)::before { content: "新"; }
  .sync-watch-open-panel .sync-tool-btn:nth-of-type(5)::before { content: "+"; font-size: 13px; }
  .sync-watch-open-panel .sync-tool-btn:nth-of-type(6)::before { content: "−"; font-size: 13px; }
  .sync-watch-open-panel .sync-tool-btn:nth-of-type(7)::before { content: "全"; }
  .sync-watch-open-panel .sync-tool-btn:nth-of-type(8)::before { content: "重"; }
  .sync-watch-open-panel .sync-tool-btn:nth-of-type(9)::before { content: "收"; }

  .sync-watch-open-panel .sync-selected-row {
    min-height: 22px !important;
    padding: 4px 6px !important;
    font-size: 10.5px !important;
  }

  .sync-watch-open-panel .sync-chart-shell {
    margin-top: 0 !important;
  }
}

@media (max-width: 390px) {
  .sync-watch-open-panel .sync-watch-toolbar {
    gap: 2px !important;
  }

  .sync-watch-open-panel .sync-tool-btn {
    flex-basis: calc((100% - 16px) / 9) !important;
    height: 23px !important;
    min-height: 23px !important;
  }

  .sync-watch-open-panel .sync-tool-btn::before {
    font-size: 10.5px;
  }
}


/* =========================================================
   v25_110 同步观察工具按钮二次优化
   - 基于 v25_109，只改同步观察展开区按钮样式
   - 不修改 app.js / services.py / 数据逻辑
   - 去掉重复的“收起”工具按钮：展开标题本身已可收起
   - 其余 8 个按钮用更易懂的双字标签，并同一行均分
   ========================================================= */

/* “收起”按钮功能重复，所有屏宽下隐藏同步观察工具栏中的最后一个按钮 */
.sync-watch-open-panel .sync-tool-btn:nth-of-type(9) {
  display: none !important;
}

@media (max-width: 980px) {
  .sync-watch-open-panel .sync-watch-toolbar {
    display: flex !important;
    flex-wrap: wrap !important;
    align-items: center !important;
    justify-content: stretch !important;
    gap: 4px !important;
    row-gap: 5px !important;
    padding: 5px 6px !important;
    overflow: visible !important;
    white-space: normal !important;
  }

  .sync-watch-open-panel .sync-add-select-wrap {
    order: 1 !important;
    flex: 1 1 100% !important;
    min-width: 0 !important;
    max-width: none !important;
    height: 28px !important;
    padding: 0 7px !important;
    gap: 5px !important;
    border-radius: 13px !important;
  }

  .sync-watch-open-panel .mini-period-control {
    order: 2 !important;
    flex: 1 1 calc(50% - 3px) !important;
    min-width: 0 !important;
    height: 26px !important;
    min-height: 26px !important;
    padding: 0 7px !important;
    border-radius: 13px !important;
  }

  .sync-watch-open-panel .sync-watch-toolbar .tag {
    order: 3 !important;
    flex: 1 1 calc(50% - 3px) !important;
    min-width: 0 !important;
    height: 26px !important;
    min-height: 26px !important;
    justify-content: center !important;
    padding: 0 7px !important;
    border-radius: 13px !important;
    font-size: 10px !important;
    line-height: 24px !important;
  }

  /* 8 个按钮一行均分，比 v25_109 的 9 个按钮更宽、更容易读 */
  .sync-watch-open-panel .sync-tool-btn {
    order: 4 !important;
    flex: 1 1 calc((100% - 28px) / 8) !important;
    width: auto !important;
    min-width: 0 !important;
    max-width: none !important;
    height: 27px !important;
    min-height: 27px !important;
    padding: 0 2px !important;
    border-radius: 13px !important;
    font-size: 10.2px !important;
    line-height: 25px !important;
    font-weight: 900 !important;
    letter-spacing: .01em !important;
    justify-content: center !important;
    text-align: center !important;
    white-space: nowrap !important;
  }

  .sync-watch-open-panel .sync-tool-btn:nth-of-type(9) {
    display: none !important;
  }
}

@media (max-width: 560px) {
  .sync-watch-open-panel .sync-watch-toolbar {
    gap: 3px !important;
    row-gap: 4px !important;
    padding: 4px 5px !important;
  }

  .sync-watch-open-panel .sync-add-select-wrap {
    height: 26px !important;
    padding: 0 6px !important;
  }

  .sync-watch-open-panel .mini-period-control,
  .sync-watch-open-panel .sync-watch-toolbar .tag {
    height: 24px !important;
    min-height: 24px !important;
    border-radius: 12px !important;
    font-size: 9.2px !important;
  }

  /* 手机端用双字标签，不再用单字；理解成本更低 */
  .sync-watch-open-panel .sync-tool-btn {
    flex-basis: calc((100% - 21px) / 8) !important;
    height: 25px !important;
    min-height: 25px !important;
    border-radius: 12px !important;
    font-size: 0 !important;
    line-height: 23px !important;
    padding: 0 1px !important;
  }

  .sync-watch-open-panel .sync-tool-btn::before {
    display: inline-block;
    font-size: 10.4px;
    line-height: 23px;
    font-weight: 950;
    letter-spacing: 0;
    white-space: nowrap;
  }

  .sync-watch-open-panel .sync-tool-btn:nth-of-type(1)::before { content: "最早"; }
  .sync-watch-open-panel .sync-tool-btn:nth-of-type(2)::before { content: "左移"; }
  .sync-watch-open-panel .sync-tool-btn:nth-of-type(3)::before { content: "右移"; }
  .sync-watch-open-panel .sync-tool-btn:nth-of-type(4)::before { content: "最新"; }
  .sync-watch-open-panel .sync-tool-btn:nth-of-type(5)::before { content: "放大"; }
  .sync-watch-open-panel .sync-tool-btn:nth-of-type(6)::before { content: "缩小"; }
  .sync-watch-open-panel .sync-tool-btn:nth-of-type(7)::before { content: "全量"; }
  .sync-watch-open-panel .sync-tool-btn:nth-of-type(8)::before { content: "重置"; }
  .sync-watch-open-panel .sync-tool-btn:nth-of-type(9) { display: none !important; }

  .sync-watch-open-panel .sync-selected-row {
    min-height: 22px !important;
    padding: 4px 6px !important;
    font-size: 10.5px !important;
  }
}

@media (max-width: 390px) {
  .sync-watch-open-panel .sync-watch-toolbar {
    gap: 2px !important;
  }

  .sync-watch-open-panel .sync-tool-btn {
    flex-basis: calc((100% - 14px) / 8) !important;
    height: 24px !important;
    min-height: 24px !important;
  }

  .sync-watch-open-panel .sync-tool-btn::before {
    font-size: 9.8px;
  }
}


/* =========================================================
   v25_111 同步观察图层防频闪补丁
   - 与 app.js 的视窗稳定/刷新节流配合
   - 不改变取数逻辑，不改变图表功能
   ========================================================= */
.sync-chart-shell,
.sync-watch-open-panel .sync-chart-shell {
  contain: layout paint style !important;
}

.sync-stack-svg,
.sync-watch-open-panel .sync-stack-svg {
  backface-visibility: hidden !important;
  transform: translateZ(0) !important;
  will-change: contents !important;
}

/* v25_111：app.js 已移除“收起”工具按钮；保留 8 个按钮的一行均分策略 */
@media (max-width: 980px) {
  .sync-watch-open-panel .sync-tool-btn {
    flex: 1 1 calc((100% - 28px) / 8) !important;
  }
}

@media (max-width: 560px) {
  .sync-watch-open-panel .sync-tool-btn {
    flex-basis: calc((100% - 21px) / 8) !important;
  }

  .sync-watch-open-panel .sync-tool-btn:nth-of-type(1)::before { content: "最早"; }
  .sync-watch-open-panel .sync-tool-btn:nth-of-type(2)::before { content: "左移"; }
  .sync-watch-open-panel .sync-tool-btn:nth-of-type(3)::before { content: "右移"; }
  .sync-watch-open-panel .sync-tool-btn:nth-of-type(4)::before { content: "最新"; }
  .sync-watch-open-panel .sync-tool-btn:nth-of-type(5)::before { content: "放大"; }
  .sync-watch-open-panel .sync-tool-btn:nth-of-type(6)::before { content: "缩小"; }
  .sync-watch-open-panel .sync-tool-btn:nth-of-type(7)::before { content: "全量"; }
  .sync-watch-open-panel .sync-tool-btn:nth-of-type(8)::before { content: "重置"; }
}


/* =========================================================
   v25_112 同步观察内外盘比柱状图优化
   - 内外盘比图层已在 app.js 中取消 50% 基准线与 0~100 写死上限
   - CSS 仅补充图层稳定与柱状图视觉细节
   ========================================================= */
.sync-watch-open-panel .sync-stack-svg rect {
  shape-rendering: geometricPrecision;
}

/* 同步观察柱状图区域保留清爽深色，不额外叠 50% 基准视觉 */
.sync-chart-panel {
  transform: translateZ(0);
}


/* =========================================================
   v25_113 同步观察展开图视觉细节优化
   - 配合 app.js 中的柱宽、颜色、横坐标实线调整
   - 不改变后端取数与数据计算
   ========================================================= */
.sync-watch-open-panel .sync-stack-svg line,
.sync-watch-open-panel .sync-stack-svg rect {
  shape-rendering: crispEdges;
}

.sync-watch-open-panel .sync-stack-svg .sync-latest-marker line,
.sync-watch-open-panel .sync-stack-svg .sync-latest-marker rect {
  shape-rendering: geometricPrecision;
}


/* =========================================================
   v25_114 同步观察全量/多图层防重绘频闪
   - app.js 已冻结手动视窗下的定时重绘；CSS 只降低大型 SVG 合成层抖动风险
   ========================================================= */
.sync-watch-open-panel .sync-stack-svg {
  will-change: auto !important;
}

.sync-watch-open-panel .sync-chart-shell {
  overflow: hidden !important;
}


/* =========================================================
   v25_115 同步观察 Excel 导出功能样式
   - 管理员页全局开关
   - 同步观察展开区导出按钮
   ========================================================= */
.sync-export-admin-toggle {
  margin: 0 !important;
  display: inline-flex;
  align-items: center;
}

.sync-export-admin-toggle .sync-export-switch {
  border: 1px solid rgba(124, 205, 255, .18);
  cursor: pointer;
  gap: 7px;
  font-weight: 900;
}

.sync-export-admin-toggle .sync-export-switch.enabled {
  color: #dfffee;
  background: linear-gradient(135deg, rgba(22, 158, 108, .34), rgba(6, 47, 37, .78));
  border-color: rgba(37, 240, 173, .34);
}

.sync-export-admin-toggle .sync-export-switch.disabled {
  color: #b9c7d8;
  background: rgba(8, 20, 37, .62);
  border-color: rgba(124, 205, 255, .14);
}

.sync-export-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  display: inline-block;
  background: #7b8798;
  box-shadow: 0 0 0 3px rgba(123, 135, 152, .10);
}

.sync-export-switch.enabled .sync-export-dot {
  background: #25f0ad;
  box-shadow: 0 0 10px rgba(37, 240, 173, .66);
}

.sync-export-excel-btn {
  order: 4 !important;
  height: 27px !important;
  min-height: 27px !important;
  padding: 0 10px !important;
  border-radius: 13px !important;
  font-size: 10.5px !important;
  font-weight: 950 !important;
  color: #072118 !important;
  background: linear-gradient(135deg, #8fffd6, #42d9ff) !important;
  border-color: rgba(143, 255, 214, .38) !important;
  box-shadow: 0 10px 26px rgba(37, 240, 173, .10);
  white-space: nowrap !important;
}

.sync-export-excel-btn:disabled {
  opacity: .55;
  cursor: wait;
}

@media (max-width: 980px) {
  .sync-export-excel-btn {
    flex: 1 1 calc(50% - 3px) !important;
    order: 3 !important;
    height: 26px !important;
    min-height: 26px !important;
    padding: 0 8px !important;
    font-size: 10px !important;
  }

  .sync-watch-open-panel .sync-watch-toolbar .tag {
    flex: 1 1 calc(50% - 3px) !important;
  }
}

@media (max-width: 560px) {
  .sync-export-excel-btn {
    height: 24px !important;
    min-height: 24px !important;
    border-radius: 12px !important;
    font-size: 9.5px !important;
    padding: 0 7px !important;
  }

  body.admin-console-body .sync-export-admin-toggle {
    width: 100%;
  }

  body.admin-console-body .sync-export-admin-toggle .sync-export-switch {
    width: 100%;
    justify-content: center;
  }
}


/* =========================================================
   v25_119 批量添加图层弹窗移动端 / DevTools 模拟移动端稳定性
   - 只针对同步观察“批量添加图层”弹窗
   - 禁止滚动锚定导致选中下方复选项后弹窗整体位移
   - 不影响图形绘制、导出 Excel、数据库和后端逻辑
   ========================================================= */

.sync-layer-modal,
.sync-layer-modal * {
  overflow-anchor: none;
}

.sync-layer-modal {
  overscroll-behavior: contain;
  scrollbar-gutter: stable both-edges;
}

.sync-layer-dialog {
  display: flex !important;
  flex-direction: column !important;
  overflow: hidden !important;
  max-height: min(86vh, 820px) !important;
  overscroll-behavior: contain;
  transform: translateZ(0);
}

.sync-layer-body,
.sync-layer-scroll,
.sync-layer-content,
.sync-layer-groups {
  min-height: 0 !important;
  overscroll-behavior: contain;
  overflow-anchor: none;
}

.sync-layer-dialog > .sync-layer-body,
.sync-layer-dialog > .sync-layer-scroll,
.sync-layer-dialog > .sync-layer-content {
  flex: 1 1 auto !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
  scrollbar-gutter: stable;
}

.sync-layer-footer,
.sync-layer-actions,
.sync-layer-bottom,
.sync-batch-footer,
.sync-batch-actions {
  flex: 0 0 auto !important;
  position: sticky !important;
  bottom: 0 !important;
  z-index: 8 !important;
  overflow-anchor: none;
  transform: translateZ(0);
}

.sync-layer-option,
.sync-layer-check-row,
.sync-layer-group,
.sync-layer-category,
.sync-layer-card {
  overflow-anchor: none;
}

@media (max-width: 720px), (hover: none) and (pointer: coarse) {
  .sync-layer-dialog {
    width: min(94vw, 560px) !important;
    height: min(86dvh, 820px) !important;
    max-height: min(86dvh, 820px) !important;
  }

  @supports not (height: 1dvh) {
    .sync-layer-dialog {
      height: min(86vh, 820px) !important;
      max-height: min(86vh, 820px) !important;
    }
  }

  .sync-layer-dialog > .sync-layer-body,
  .sync-layer-dialog > .sync-layer-scroll,
  .sync-layer-dialog > .sync-layer-content {
    -webkit-overflow-scrolling: touch;
  }
}