/*
 * AI 跟单控制台 · Clean workspace theme
 *
 * 一套完整的视觉系统：
 * - 石墨灰工作区，不使用多层渐变和霓虹发光
 * - 单一蓝灰主色，状态色只出现在状态信息
 * - 移动端一列优先，桌面端自然扩展
 * - 所有导航和页面切换保持静态，减少视觉噪音
 */
:root {
  color-scheme: dark;
  --clean-bg: #111214;
  --clean-surface: #181a1d;
  --clean-surface-raised: #202328;
  --clean-surface-soft: #25292e;
  --clean-border: #2d3238;
  --clean-border-strong: #464d55;
  --clean-text: #f1f3f5;
  --clean-muted: #a1a8b0;
  --clean-faint: #737b84;
  --clean-accent: #6e9fcb;
  --clean-accent-hover: #85b5df;
  --clean-success: #82be98;
  --clean-warning: #d2b777;
  --clean-danger: #d38f98;
  --clean-shadow: 0 10px 28px rgb(0 0 0 / 22%);

  --bg: var(--clean-bg);
  --panel: var(--clean-surface);
  --panel-2: var(--clean-surface-raised);
  --panel-3: #141619;
  --border: var(--clean-border);
  --text: var(--clean-text);
  --muted: var(--clean-muted);
  --blue: var(--clean-accent);
  --blue-2: var(--clean-accent-hover);
  --green: var(--clean-success);
  --yellow: var(--clean-warning);
  --red: var(--clean-danger);
  --shadow: var(--clean-shadow);
}

* {
  box-sizing: border-box;
}

html {
  min-width: 320px;
  background: var(--clean-bg);
}

body {
  min-height: 100dvh;
  margin: 0;
  color: var(--clean-text);
  background: var(--clean-bg);
  font-family: Inter, ui-sans-serif, system-ui, -apple-system,
    BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Microsoft YaHei", sans-serif;
  font-size: 14px;
  letter-spacing: -.005em;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  -webkit-tap-highlight-color: transparent;
}

body::before,
body::after {
  display: none;
}

button,
input,
select {
  font: inherit;
}

button {
  cursor: pointer;
}

button:focus-visible,
input:focus-visible,
select:focus-visible {
  outline: 2px solid rgb(110 159 203 / 62%);
  outline-offset: 2px;
}

.app-shell {
  display: grid;
  grid-template-columns: 196px minmax(0, 1fr);
  min-height: 100dvh;
  background: var(--clean-bg);
}

.sidebar {
  position: sticky;
  top: 0;
  z-index: 10;
  display: flex;
  flex-direction: column;
  height: 100dvh;
  padding: 18px 12px 14px;
  border-right: 1px solid var(--clean-border);
  background: #151719;
}

.nav {
  display: grid;
  gap: 2px;
}

.nav button,
.nav button:hover,
.nav button.active,
.nav button:active {
  min-height: 38px;
  padding: 8px 10px;
  border: 0;
  border-radius: 7px;
  color: var(--clean-muted);
  background: transparent;
  box-shadow: none;
  font-size: 13px;
  font-weight: 500;
  text-align: left;
  transform: none;
  transition: none !important;
}

.nav button::before,
.nav button::after {
  display: none !important;
}

.nav button:hover {
  color: var(--clean-text);
}

.nav button.active {
  color: var(--clean-text);
  background: var(--clean-surface-raised);
  font-weight: 650;
}

.sidebar-foot {
  margin-top: auto;
  padding: 12px;
  border: 1px solid var(--clean-border);
  border-radius: 10px;
  background: var(--clean-surface);
}

.mode-line {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 5px;
}

.status-dot {
  display: inline-block;
  width: 7px;
  height: 7px;
  margin-right: 7px;
  border-radius: 50%;
  background: var(--clean-success);
}

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

.small {
  font-size: 12px;
}

.pill {
  display: inline-flex;
  align-items: center;
  min-height: 24px;
  padding: 4px 8px;
  border: 1px solid var(--clean-border);
  border-radius: 999px;
  color: var(--clean-muted);
  background: var(--clean-surface-soft);
  font-size: 10px;
  white-space: nowrap;
}

.pill.yellow {
  border-color: #62563d;
  color: var(--clean-warning);
  background: #2a271f;
}

main {
  width: min(1180px, 100%);
  padding: 24px 30px 56px;
  margin: 0 auto;
  background: var(--clean-bg);
}

.page {
  display: none;
}

.page.active {
  display: block;
  animation: none;
}

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

.service-row {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
  margin-bottom: 14px;
}

/* 后台登录态与退出登录入口：跟单台能操作实盘，必须有一个随时可点的退出入口
   （原来 clearBackendToken 只在收到 401 时被动调用，页面上没有任何入口）。 */
.backend-session-row {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
  margin: -4px 0 14px;
}

.service-card, .card, .channel-card, .provider-card{
  border: 1px solid var(--clean-border);
  background: var(--clean-surface);
  box-shadow: var(--clean-shadow);
}

.service-card,
.card {
  border-radius: 12px;
}

.service-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  min-height: 142px;
  padding: 14px 11px 11px;
  overflow: hidden;
  text-align: center;
  transition: none !important;
}

.service-card:hover, .card:hover, .channel-card:hover, .provider-card:hover{
  border-color: var(--clean-border-strong);
  background: var(--clean-surface-raised);
  box-shadow: var(--clean-shadow);
}

.service-card:hover {
  transform: none;
}

.service-icon {
  display: grid;
  width: 43px;
  height: 43px;
  margin-bottom: 8px;
  place-items: center;
  border: 1px solid var(--clean-border-strong);
  border-radius: 11px;
  background: var(--clean-surface-soft);
  box-shadow: none;
}

.service-icon svg {
  display: block;
  width: 28px;
  height: 28px;
}

.service-icon.discord-logo {
  border-color: #5b6170;
  background: #505666;
}

.service-icon.discord-logo svg {
  width: 29px;
  height: 29px;
  fill: #f4f5f7;
}

.service-icon.bybit-logo {
  width: 72px;
  border-color: #4b4e52;
  background: #dededb;
}

.service-icon.bybit-logo svg {
  width: 60px;
  filter: saturate(.55);
}

.service-card strong {
  color: var(--clean-text);
  font-size: 13px;
  font-weight: 650;
}

.service-card small {
  min-height: 18px;
  color: var(--clean-muted);
  font-size: 10px;
}

.service-actions {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  width: 100%;
  margin-top: auto;
}

.service-connect-pill {
  position: relative;
  display: inline-block;
  width: 50px;
  min-width: 50px;
  height: 27px;
  min-height: 27px;
  padding: 0;
  border: 0;
  border-radius: 999px;
  color: transparent;
  background: #3b4045;
  box-shadow: inset 0 0 0 1px rgb(255 255 255 / 6%);
  overflow: hidden;
  font-size: 0;
  transition: none !important;
}

.service-connect-pill::before {
  position: absolute;
  inset: 0;
  width: auto;
  height: auto;
  border-radius: inherit;
  background: transparent;
  box-shadow: none;
  content: "";
}

.service-connect-pill::after {
  position: absolute;
  top: 3px;
  left: 3px;
  width: 21px;
  height: 21px;
  border-radius: 50%;
  background: #e7e9eb;
  box-shadow: 0 2px 5px rgb(0 0 0 / 38%);
  content: "";
  transition: none !important;
}

.service-connect-pill:hover {
  background: #454b51;
}

.service-connect-pill.is-connected,
.service-card.live .service-connect-pill.is-connected,
.service-card.live .service-connect-pill.is-connected::before {
  border: 0;
  background: #5e9474;
}

.service-connect-pill.is-connected::after {
  background: #edf3ee;
  transform: translateX(23px);
}

.service-card .btn {
  min-height: 28px;
  padding: 5px 10px;
  border-radius: 8px;
  font-size: 11px;
}

.card {
  grid-column: span 12;
  padding: 15px;
}

.card-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 12px;
}

.heading {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin: 0;
  color: var(--clean-text);
  font-size: 15px;
  font-weight: 650;
  letter-spacing: -.01em;
}

.heading-icon {
  display: inline-grid;
  width: 24px;
  height: 24px;
  place-items: center;
  border: 0;
  border-radius: 7px;
  color: var(--clean-accent-hover);
  background: rgb(110 159 203 / 15%);
  font-size: 12px;
}

.provider-head {
  align-items: center;
  margin-bottom: 11px;
}

.provider-toolbar {
  display: flex;
  align-items: center;
  gap: 6px;
}

.provider-count {
  color: var(--clean-faint);
  font-size: 10px;
  white-space: nowrap;
}

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 34px;
  padding: 7px 11px;
  border: 1px solid var(--clean-border-strong);
  border-radius: 8px;
  color: var(--clean-text);
  background: var(--clean-surface-soft);
  box-shadow: none;
  font-size: 11px;
  font-weight: 550;
  transition: none !important;
}

.btn:hover,
.btn:active {
  border-color: #5b646d;
  color: var(--clean-text);
  background: #30363d;
  box-shadow: none;
  transform: none;
}

.btn.primary,
.service-card .btn.primary {
  border-color: var(--clean-accent);
  color: #fff;
  background: var(--clean-accent);
}

.btn.primary:hover,
.service-card .btn.primary:hover {
  border-color: var(--clean-accent-hover);
  color: #fff;
  background: var(--clean-accent-hover);
}

.btn.danger,
.service-card.live .btn.danger {
  border-color: #68474f;
  color: var(--clean-danger);
  background: #302428;
}

.btn.danger:hover,
.service-card.live .btn.danger:hover {
  border-color: #846069;
  color: #e1adb4;
  background: #3d2c31;
}

.btn-icon {
  margin-right: 5px;
  font-size: 14px;
}

input,
select {
  width: 100%;
  min-height: 40px;
  padding: 9px 11px;
  border: 1px solid var(--clean-border-strong);
  border-radius: 8px;
  outline: none;
  color: var(--clean-text);
  background: #1a1c1f;
  box-shadow: none;
}

input::placeholder {
  color: #7b838c;
}

input:hover,
select:hover {
  border-color: #5b646d;
}

input:focus,
select:focus {
  border-color: var(--clean-accent);
  box-shadow: 0 0 0 3px rgb(110 159 203 / 16%);
}

label {
  display: block;
  margin-bottom: 6px;
  color: var(--clean-text);
  font-size: 12px;
  font-weight: 600;
}

.hint {
  margin: 6px 0 0;
  color: var(--clean-muted);
  font-size: 11px;
}

.history-read-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 0 0 9px;
}

.history-read-meta span {
  min-width: 0;
  padding: 4px 7px;
  border: 1px solid var(--clean-border);
  border-radius: 999px;
  color: var(--clean-muted);
  background: var(--clean-surface-soft);
  font-size: 10px;
  overflow-wrap: anywhere;
}

.history-message-preview {
  max-height: min(44dvh, 420px);
  padding: 11px;
  overflow: auto;
  border: 1px solid var(--clean-border);
  border-radius: 8px;
  color: var(--clean-text);
  background: #15171a;
  font-size: 12px;
  line-height: 1.62;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

.history-message-preview:focus {
  border-color: var(--clean-accent);
  outline: none;
}

.modal-note{
  display: flex;
  align-items: flex-start;
  gap: 9px;
  padding: 10px 11px;
  margin-bottom: 15px;
  border: 1px solid #62563d;
  border-radius: 9px;
  color: var(--clean-warning);
  background: #29271f;
  font-size: 11px;
}

.runtime-alert {
  display: flex;
  align-items: flex-start;
  gap: 9px;
  padding: 10px 11px;
  margin: 0 0 14px;
  border: 1px solid #62563d;
  border-radius: 9px;
  color: var(--clean-warning);
  background: #29271f;
  font-size: 11px;
  line-height: 1.5;
}

.runtime-alert[hidden] {
  display: none;
}

.runtime-alert.is-danger {
  border-color: #68474f;
  color: var(--clean-danger);
  background: #302428;
}

.runtime-alert-icon {
  display: inline-grid;
  flex: 0 0 auto;
  width: 22px;
  height: 22px;
  place-items: center;
  border: 1px solid currentColor;
  border-radius: 50%;
  font-size: 11px;
  font-weight: 700;
}

.runtime-alert-content {
  display: grid;
  min-width: 0;
  gap: 2px;
}

.runtime-alert-content strong {
  color: currentColor;
  font-size: 12px;
}

.runtime-alert-content span {
  overflow-wrap: anywhere;
}

.notice-icon {
  display: inline-grid;
  flex: 0 0 auto;
  width: 22px;
  height: 22px;
  place-items: center;
  border: 1px solid currentColor;
  border-radius: 50%;
  font-size: 11px;
  font-weight: 700;
}

.form-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 13px;
}

.field {
  min-width: 0;
}

.field.full {
  grid-column: 1 / -1;
}

.secret-wrap {
  position: relative;
}

.secret-wrap input {
  padding-right: 68px;
}

.show-secret {
  position: absolute;
  top: 6px;
  right: 6px;
  min-height: 28px;
  padding: 4px 8px;
  border: 0;
  border-radius: 6px;
  color: var(--clean-accent-hover);
  background: var(--clean-surface-soft);
  font-size: 11px;
}

.toggle-line {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 15px;
  padding: 11px 12px;
  border: 1px solid var(--clean-border-strong);
  border-radius: 9px;
  background: var(--clean-surface-soft);
}

.toggle {
  position: relative;
  display: inline-flex;
  flex: 0 0 auto;
  width: 45px;
  height: 25px;
}

.toggle input {
  width: 0;
  height: 0;
  opacity: 0;
}

.slider {
  position: absolute;
  inset: 0;
  border-radius: 999px;
  background: #555c63;
  cursor: pointer;
}

.slider::before {
  position: absolute;
  bottom: 4px;
  left: 4px;
  width: 17px;
  height: 17px;
  border-radius: 50%;
  background: #e5e8eb;
  content: "";
}

.toggle input:checked + .slider {
  background: #5e9474;
}

.toggle input:checked + .slider::before {
  transform: translateX(20px);
}

.actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 8px;
  margin-top: 17px;
}

.channel-grid,
.provider-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.channel-card,
.provider-card {
  position: relative;
  min-width: 0;
  padding: 11px;
  border-radius: 10px;
  background: var(--clean-surface);
  box-shadow: 0 5px 18px rgb(0 0 0 / 18%);
}

.provider-card {
  transition: border-color .2s ease, background .2s ease, box-shadow .2s ease, transform .2s ease;
}

.channel-card-head,
.provider-card-head {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
  margin-bottom: 9px;
}

.provider-number{
  display: grid;
  flex: 0 0 auto;
  width: 27px;
  height: 27px;
  place-items: center;
  border-radius: 8px;
  color: #c3d9ec;
  background: rgb(110 159 203 / 18%);
  font-size: 11px;
  font-weight: 700;
}

.channel-name,
.provider-name {
  min-width: 0;
  overflow: hidden;
  color: var(--clean-text);
  font-size: 12px;
  font-weight: 650;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.channel-card-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  min-height: 20px;
  margin: 0 0 9px 35px;
}

.channel-meta-item {
  display: inline-flex;
  align-items: center;
  min-height: 20px;
  padding: 3px 7px;
  border: 1px solid var(--clean-border);
  border-radius: 999px;
  color: var(--clean-muted);
  background: rgb(118 118 128 / 9%);
  font-size: 10px;
}

.channel-meta-item.live {
  border-color: #68474f;
  color: var(--clean-danger);
  background: #302428;
}

.channel-card-foot {
  display: flex;
  gap: 6px;
  margin-top: 9px;
}

.channel-card-foot .btn {
  min-height: 28px;
  padding: 5px 8px;
  font-size: 10px;
}

.channel-empty {
  display: none;
  align-items: center;
  gap: 9px;
  margin-top: 10px;
  padding: 11px;
  border: 1px dashed var(--clean-border-strong);
  border-radius: 9px;
  color: var(--clean-muted);
  background: var(--clean-surface-soft);
}

.channel-empty.is-visible {
  display: flex;
}

.channel-empty strong,
.channel-empty small {
  display: block;
}

.channel-empty strong {
  color: var(--clean-text);
  font-size: 12px;
}

.channel-empty small {
  margin-top: 3px;
  color: var(--clean-muted);
  font-size: 10px;
}

.channel-note-icon {
  display: grid;
  flex: 0 0 auto;
  width: 28px;
  height: 28px;
  place-items: center;
  border-radius: 8px;
  color: var(--clean-accent-hover);
  background: rgb(110 159 203 / 15%);
  font-weight: 700;
}

.provider-card {
  cursor: grab;
  touch-action: pan-y;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
}

.provider-card-head[data-provider-drag-handle] {
  touch-action: none;
}

.provider-card:active,
.provider-card.is-long-pressing {
  cursor: grabbing;
}

.provider-card select,
.provider-card button,
.provider-card input,
.provider-card textarea {
  user-select: auto;
}

.provider-model {
  display: flex;
  gap: 6px;
  margin-bottom: 8px;
}

.provider-model select {
  min-height: 36px;
  padding: 7px 9px;
  border-color: var(--clean-border-strong);
  border-radius: 8px;
  background: var(--clean-surface-raised);
  font-size: 10px;
}

.provider-divider {
  height: 1px;
  margin: 8px 0;
  border: 0;
  background: var(--clean-border);
}

.provider-model-stats {
  display: grid;
  gap: 5px;
  color: var(--clean-muted);
  font-size: 10px;
  line-height: 1.2;
}

.model-stat-row {
  display: grid;
  grid-template-columns: auto auto;
  justify-content: space-between;
  align-items: center;
  min-height: 18px;
  padding: 0 2px;
}

.provider-model-stats .model-stat-row > strong {
  min-width: 0;
  overflow: hidden;
  color: var(--clean-text);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.provider-model-stats .model-stat-row b {
  color: var(--clean-text);
  font-weight: 650;
}

.provider-model-stats .model-stat-row .success {
  color: var(--clean-success);
}

.provider-model-stats .model-stat-row .failure {
  color: var(--clean-danger);
}

.provider-model-stats .model-stat-row.provider-token-usage {
  grid-template-columns: minmax(0, 1fr);
  color: var(--clean-muted);
  line-height: 1.35;
  overflow-wrap: anywhere;
}

.provider-card-foot {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 6px;
  width: 100%;
  margin-top: 9px;
}

.provider-card-foot .btn {
  width: 100%;
  min-width: 0;
  min-height: 28px;
  padding: 5px 7px;
  font-size: 10px;
}

.provider-card-foot [data-provider-models] {
  border-color: #526e88;
  color: #b8d1e6;
  background: #263b50;
}

.provider-card-foot .btn[data-provider-delete] {
  border-color: #68474f;
  color: var(--clean-danger);
  background: #302428;
}

.provider-card.is-dragging {
  z-index: 1000;
  opacity: .98;
  pointer-events: none;
  touch-action: none;
  border-color: var(--clean-accent);
  background: var(--clean-surface-raised);
  box-shadow: 0 18px 38px rgb(0 0 0 / 38%);
  transform: translate3d(
    var(--provider-drag-x, 0px),
    var(--provider-drag-y, 0px),
    0
  ) rotate(var(--provider-drag-rotate, 0deg)) scale(1.015);
  animation: none;
  transition: none !important;
  will-change: transform;
}

.provider-card.is-long-pressing {
  border-color: #5d748a;
  box-shadow: 0 10px 28px rgb(0 0 0 / 30%);
  animation: provider-long-press-pulse .5s ease-out;
}

.provider-card.is-dragging::after,
.provider-card.is-drag-over::after {
  display: none;
}

.provider-card.is-drag-over {
  border-color: var(--clean-accent);
  background: rgb(110 159 203 / 10%);
  box-shadow: 0 0 0 2px rgb(110 159 203 / 14%);
  transform: scale(.985);
  animation: none;
}

.provider-drag-placeholder {
  box-sizing: border-box;
  min-width: 0;
  border: 1px dashed var(--clean-accent);
  border-radius: 10px;
  background: rgb(110 159 203 / 9%);
  box-shadow: inset 0 0 0 1px rgb(110 159 203 / 9%);
  opacity: .92;
  pointer-events: none;
  animation: provider-placeholder-pulse 1.2s ease-in-out infinite;
}

@keyframes provider-long-press-pulse {
  0% {
    box-shadow: 0 10px 28px rgb(0 0 0 / 30%);
  }
  100% {
    box-shadow: 0 18px 38px rgb(0 0 0 / 38%);
  }
}

@keyframes provider-placeholder-pulse {
  0%,
  100% {
    opacity: .62;
  }
  50% {
    opacity: .96;
  }
}

.placeholder {
  display: grid;
  min-height: 210px;
  place-items: center;
  padding: 28px;
  border: 1px dashed var(--clean-border-strong);
  border-radius: 12px;
  color: var(--clean-muted);
  background: var(--clean-surface);
  text-align: center;
}

.placeholder strong {
  display: block;
  margin-bottom: 6px;
  color: var(--clean-text);
  font-size: 16px;
}

.placeholder-icon {
  display: grid;
  width: 46px;
  height: 46px;
  margin: 0 auto 12px;
  place-items: center;
  border-radius: 12px;
  color: var(--clean-accent-hover);
  background: rgb(110 159 203 / 15%);
  font-size: 22px;
}

.modal {
  position: fixed;
  inset: 0;
  z-index: 30;
  display: none;
  place-items: center;
  padding: 16px;
  background: rgb(0 0 0 / 68%);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}

.modal.open {
  display: grid;
}

.modal-panel {
  width: min(560px, 100%);
  max-height: min(720px, calc(100dvh - 32px));
  overflow: auto;
  padding: 20px;
  border: 1px solid var(--clean-border-strong);
  border-radius: 14px;
  color: var(--clean-text);
  background: var(--clean-surface-raised);
  box-shadow: 0 24px 70px rgb(0 0 0 / 55%);
}

.modal-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 14px;
  margin-bottom: 16px;
}

.modal-head h2 {
  margin: 0;
  color: var(--clean-text);
  font-size: 17px;
}

.modal-head p {
  margin: 3px 0 0;
  color: var(--clean-muted);
  font-size: 12px;
}

.modal-close {
  display: grid;
  width: 30px;
  height: 30px;
  place-items: center;
  border: 1px solid var(--clean-border);
  border-radius: 50%;
  color: var(--clean-muted);
  background: var(--clean-surface-soft);
  font-size: 18px;
}

.modal-close:hover {
  color: var(--clean-text);
  border-color: var(--clean-border-strong);
  background: #30363d;
}

.bybit-test-status {
  color: var(--clean-muted);
}

.bybit-test-status.is-success {
  color: var(--clean-success);
}

.bybit-test-status.is-failed {
  color: var(--clean-danger);
}

.channel-add-button {
  display: inline-grid;
  width: 32px;
  min-width: 32px;
  height: 32px;
  min-height: 32px;
  padding: 0;
  place-items: center;
  border: 1px solid var(--clean-border-strong);
  border-radius: 8px;
  color: #d3d9df;
  background: var(--clean-surface-soft);
  font-size: 0;
}

.channel-add-button:hover {
  border-color: #5b646d;
  color: #fff;
  background: #30363d;
}

.channel-add-button .btn-icon {
  margin: 0;
  font-size: 18px;
  line-height: 1;
}

.toast {
  position: fixed;
  right: 18px;
  bottom: 18px;
  z-index: 20;
  max-width: min(380px, calc(100vw - 36px));
  padding: 11px 13px;
  border: 1px solid var(--clean-border-strong);
  border-radius: 9px;
  color: var(--clean-text);
  background: #25292e;
  box-shadow: 0 14px 32px rgb(0 0 0 / 35%);
  opacity: 0;
  pointer-events: none;
  transform: translateY(8px);
  transition: opacity .16s ease, transform .16s ease;
  font-size: 11px;
}

.toast.show {
  opacity: 1;
  transform: none;
}

html.provider-dragging,
body.provider-dragging {
  overscroll-behavior: none;
  touch-action: none;
}

@media (max-width: 980px) {
  .app-shell {
    display: block;
  }

  .sidebar {
    position: sticky;
    top: 0;
    height: auto;
    padding: max(6px, env(safe-area-inset-top)) 8px 5px;
    border-right: 0;
    border-bottom: 1px solid var(--clean-border);
    background: #151719;
  }

  .nav {
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 2px;
  }

  .nav button,
  .nav button:hover,
  .nav button.active {
    justify-content: center;
    min-height: 42px;
    padding: 4px 2px;
    border: 0;
    border-radius: 6px;
    background: transparent;
    box-shadow: none;
    font-size: 11px;
    text-align: center;
  }

  .nav button.active {
    color: var(--clean-text);
    background: #202328;
  }

  .sidebar-foot {
    display: none;
  }

  main {
    width: 100%;
    padding: 14px 12px calc(28px + env(safe-area-inset-bottom));
  }
}

@media (max-width: 720px) {
  .card-head {
    align-items: center;
  }

  .provider-head {
    align-items: flex-start;
  }

  .provider-toolbar {
    flex-wrap: wrap;
    justify-content: flex-end;
  }

  .provider-grid,
  .channel-grid {
    grid-template-columns: 1fr;
  }

  }

@media (max-width: 560px) {
  .service-row {
    gap: 7px;
  }

  .service-card {
    min-height: 113px;
    padding: 9px 4px 7px;
    border-radius: 10px;
  }

  .service-icon {
    width: 33px;
    height: 33px;
    margin-bottom: 5px;
    border-radius: 9px;
  }

  .service-icon svg,
  .service-icon.discord-logo svg {
    width: 22px;
    height: 22px;
  }

  .service-icon.bybit-logo {
    width: 54px;
    height: 29px;
  }

  .service-icon.bybit-logo svg {
    width: 46px;
  }

  .service-card strong {
    font-size: 11px;
  }

  .service-card small {
    font-size: 11px;
  }

  .service-actions {
    gap: 4px;
  }

  .service-connect-pill {
    width: 46px;
    min-width: 46px;
    height: 24px;
    min-height: 24px;
  }

  .service-connect-pill::after {
    top: 3px;
    left: 3px;
    width: 18px;
    height: 18px;
  }

  .service-connect-pill.is-connected::after {
    transform: translateX(22px);
  }

  .service-card .btn {
    min-height: 24px;
    padding: 4px 7px;
    border-radius: 7px;
    font-size: 9px;
  }

  .card {
    padding: 11px;
    border-radius: 11px;
  }

  .card-head {
    gap: 8px;
    margin-bottom: 9px;
  }

  .heading {
    gap: 6px;
    font-size: 14px;
  }

  .heading-icon {
    width: 22px;
    height: 22px;
  }

  .provider-toolbar .btn {
    min-height: 29px;
    padding: 5px 8px;
    font-size: 9px;
  }

  .channel-card,
  .provider-card {
    padding: 10px;
    border-radius: 9px;
  }

  .provider-name,
  .channel-name {
    font-size: 11px;
  }

  .provider-model select {
    min-height: 34px;
    font-size: 10px;
  }

  .model-stat-row {
    grid-template-columns: auto auto;
    font-size: 9px;
  }

  .provider-card-foot .btn,
  .channel-card-foot .btn {
    min-height: 28px;
    font-size: 10px;
  }

  .modal {
    padding: 10px;
  }

  .modal-panel {
    padding: 17px;
    border-radius: 13px;
  }

  .form-grid {
    grid-template-columns: 1fr;
  }

  .field.full {
    grid-column: auto;
  }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    scroll-behavior: auto !important;
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
}

/*
 * 2026-08 · Soft contrast palette
 *
 * 这一层是最终视觉覆盖：
 * - 不再使用发灰的石墨黑，改为带蓝调的深色底
 * - 只保留一个主强调色，状态色用于成功/失败信息
 * - 卡片之间用层级和边框区分，不靠霓虹、渐变或大面积发光
 * - 中转站和监听频道在手机上也保持双列
 */
:root {
  --clean-bg: #101822;
  --clean-surface: #172331;
  --clean-surface-raised: #1e2d3d;
  --clean-surface-soft: #26394c;
  --clean-border: #304457;
  --clean-border-strong: #4b6176;
  --clean-text: #f3f6f9;
  --clean-muted: #aab8c7;
  --clean-faint: #8292a4;
  --clean-accent: #69a4d8;
  --clean-accent-hover: #86b9e6;
  --clean-success: #83cba5;
  --clean-warning: #dfb66a;
  --clean-danger: #de8b97;
  --clean-shadow: 0 14px 34px rgb(2 9 17 / 28%);

  --bg: var(--clean-bg);
  --panel: var(--clean-surface);
  --panel-2: var(--clean-surface-raised);
  --panel-3: #121d29;
  --border: var(--clean-border);
  --text: var(--clean-text);
  --muted: var(--clean-muted);
  --blue: var(--clean-accent);
  --blue-2: #477fae;
  --green: var(--clean-success);
  --yellow: var(--clean-warning);
  --red: var(--clean-danger);
  --shadow: var(--clean-shadow);
}

html,
body {
  background: var(--clean-bg);
}

body {
  color: var(--clean-text);
  background: #101822;
}

.app-shell,
main {
  background: var(--clean-bg);
}

.sidebar {
  border-right-color: #2b3e51;
  background: #141f2b;
  box-shadow: 10px 0 30px rgb(2 9 17 / 12%);
}

.nav button,
.nav button:hover,
.nav button.active,
.nav button:active {
  color: var(--clean-muted);
}

.nav button:hover {
  color: var(--clean-text);
  background: #1b2a39;
}

.nav button.active {
  color: var(--clean-text);
  background: #24374b;
  box-shadow: inset 2px 0 0 var(--clean-accent);
}

.sidebar-foot {
  border-color: #304457;
  background: #182534;
}

.pill {
  border-color: #42576b;
  color: #b7c4d1;
  background: #223346;
}

.pill.yellow {
  border-color: #725f3c;
  color: var(--clean-warning);
  background: #302b20;
}

.service-card, .card, .channel-card, .provider-card{
  border-color: #33495e;
  background: var(--clean-surface);
  box-shadow: var(--clean-shadow);
}

.service-card:hover, .card:hover, .channel-card:hover, .provider-card:hover{
  border-color: #4c657b;
  background: #1b2938;
  box-shadow: 0 16px 38px rgb(2 9 17 / 34%);
}

.service-card {
  border-top: 2px solid #5d96c8;
}

.service-card.live {
  border-top-color: #b67884;
}

.service-icon {
  border-color: #466077;
  background: #26394c;
}

.service-icon.discord-logo {
  border-color: #7280ed;
  background: #5865f2;
}

.service-icon.discord-logo svg {
  fill: #fff;
}

.service-icon.bybit-logo {
  border-color: #d6d9dd;
  background: #f0f1ef;
}

.service-icon.bybit-logo svg {
  filter: none;
}

.service-connect-pill {
  background: #435160;
  box-shadow: inset 0 0 0 1px rgb(255 255 255 / 8%);
}

.service-connect-pill:hover {
  background: #536476;
}

.service-connect-pill.is-connected,
.service-card.live .service-connect-pill.is-connected,
.service-card.live .service-connect-pill.is-connected::before {
  background: #5f9f7e;
}

.heading-icon {
  color: var(--clean-accent-hover);
  background: #29435d;
}

.btn {
  border-color: #4a6379;
  color: #edf3f8;
  background: #294055;
}

.btn:hover,
.btn:active {
  border-color: #6a9dca;
  color: #fff;
  background: #34536e;
}

.btn.primary,
.service-card .btn.primary {
  border-color: #6aa6d9;
  color: #f8fbff;
  background: #477fae;
}

.btn.primary:hover,
.service-card .btn.primary:hover {
  border-color: #87bce9;
  background: #568fbe;
}

.btn.danger,
.service-card.live .btn.danger {
  border-color: #80515c;
  color: #e8afb7;
  background: #3a2930;
}

.btn.danger:hover,
.service-card.live .btn.danger:hover {
  border-color: #a06a75;
  color: #f2c4ca;
  background: #4a3038;
}

input,
select {
  border-color: #496177;
  color: var(--clean-text);
  background: #14212e;
}

input::placeholder {
  color: #8899aa;
}

input:hover,
select:hover {
  border-color: #66849e;
}

input:focus,
select:focus {
  border-color: var(--clean-accent-hover);
  box-shadow: 0 0 0 3px rgb(105 164 216 / 18%);
}

label {
  color: #dbe5ee;
}

.toggle-line{
  border-color: #496177;
  background: #223346;
}

.slider {
  background: #566575;
}

.toggle input:checked + .slider {
  background: #5f9f7e;
}

.provider-card,
.channel-card {
  border-color: #385067;
  background: #182635;
}

.provider-card::before {
  background: #65a2d6;
}

.channel-card::before {
  background: #6bb48e;
}

.provider-number {
  color: #e8f4ff;
  background: #2f526e;
}

.provider-model select {
  border-color: #49647c;
  background: #1d2d3d;
}

.provider-divider {
  background: #344b60;
}

/* 统计行是卡片内的纯文字行，不用边框盒子，避免卡片里再套一层框。 */
.model-stat-row, .provider-model-stats .model-stat-row.current-model-row{
  border: 0;
  background: none;
  box-shadow: none;
}

.provider-card-foot [data-provider-models] {
  border-color: #5d86a7;
  color: #d1e6f7;
  background: #2b4d68;
}

.provider-card-foot .btn[data-provider-delete] {
  border-color: #80515c;
  color: #e7aeb7;
  background: #3a2930;
}

.provider-card.is-dragging {
  border-color: var(--clean-accent-hover);
  background: #21354a;
  box-shadow: 0 20px 42px rgb(2 9 17 / 46%);
}

.provider-card.is-long-pressing {
  border-color: #6d8ca6;
  box-shadow: 0 12px 30px rgb(2 9 17 / 36%);
}

.provider-card.is-drag-over {
  border-color: var(--clean-accent-hover);
  background: #20384e;
  box-shadow: 0 0 0 2px rgb(105 164 216 / 20%);
}

.channel-meta-item {
  border-color: #40566b;
  color: #b6c6d5;
  background: #223346;
}

.channel-meta-item.live {
  border-color: #80515c;
  color: #e7aeb7;
  background: #3a2930;
}

.channel-empty {
  border-color: #496177;
  background: #1b2b3b;
}

.channel-note-icon,
.placeholder-icon {
  color: var(--clean-accent-hover);
  background: #29435d;
}

.placeholder {
  border-color: #496177;
  background: var(--clean-surface);
}

.modal {
  background: rgb(3 9 16 / 72%);
}

.modal-panel {
  border-color: #4b647b;
  background: #1a2938;
  box-shadow: 0 26px 80px rgb(0 0 0 / 58%);
}

.modal-close {
  border-color: #496177;
  background: #223346;
}

.modal-close:hover {
  border-color: #6b8da9;
  background: #304960;
}

.channel-add-button {
  border-color: #58738b;
  color: #e6eff6;
  background: #294055;
}

.demo-overview-card {
  margin-top: 12px;
}

.demo-overview-body {
  display: grid;
  gap: 18px;
}

.demo-position-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.demo-order-list {
  display: grid;
  gap: 7px;
}

@media (max-width: 720px) {
  .demo-position-grid,
  .manual-review-list {
    grid-template-columns: 1fr;
  }

  }

.channel-add-button:hover {
  border-color: #78a9d3;
  color: #fff;
  background: #34536e;
}

.toast {
  border-color: #4b647b;
  background: #263a4e;
}

/* 恢复手机端双列卡片，避免长页面滚动。 */
@media (max-width: 720px) {
  .provider-grid,
  .channel-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 9px;
  }

  .provider-card,
  .channel-card {
    padding: 10px;
  }

  .provider-card-foot,
  .channel-card-foot {
    gap: 5px;
  }
}

@media (max-width: 380px) {
  .provider-grid,
  .channel-grid {
    gap: 7px;
  }

  .provider-card,
  .channel-card {
    padding: 8px;
  }

  .provider-name,
  .channel-name {
    font-size: 10px;
  }
}

/* 中转站标题栏保持单行；窄屏把长文案收成两个清晰的图标。 */
.provider-head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
}

.provider-head > div:first-child,
.provider-head .heading {
  min-width: 0;
}

.provider-head .heading {
  white-space: nowrap;
}

.provider-toolbar {
  flex-wrap: nowrap;
  white-space: nowrap;
}

.batch-model-label-short {
  display: none;
}

.batch-probe-label-short {
  display: none;
}

.provider-sync-hermes-label-short {
  display: none;
}

@media (max-width: 720px) {
  .provider-head {
    gap: 7px;
  }

  .provider-toolbar {
    gap: 4px;
  }

  .provider-toolbar .btn[data-provider-add],
  .provider-toolbar .btn[data-provider-sync-hermes],
  .provider-toolbar .btn[data-provider-batch-models],
  .provider-toolbar .btn[data-provider-batch-probe] {
    width: 31px;
    min-width: 31px;
    height: 31px;
    min-height: 31px;
    padding: 0;
    font-size: 0;
  }

  .provider-toolbar .btn[data-provider-add] .btn-icon,
  .provider-toolbar .btn[data-provider-sync-hermes] .btn-icon,
  .provider-toolbar .btn[data-provider-batch-models] .btn-icon,
  .provider-toolbar .btn[data-provider-batch-probe] .btn-icon {
    margin: 0;
    font-size: 16px;
    line-height: 1;
  }

  .provider-toolbar .btn[data-provider-add] .batch-model-label,
  .provider-toolbar .btn[data-provider-add] .batch-model-label-short,
  .provider-toolbar .btn[data-provider-sync-hermes] .provider-sync-hermes-label,
  .provider-toolbar .btn[data-provider-sync-hermes] .provider-sync-hermes-label-short,
  .provider-toolbar .btn[data-provider-batch-models] .batch-model-label,
  .provider-toolbar .btn[data-provider-batch-models] .batch-model-label-short,
  .provider-toolbar .btn[data-provider-batch-probe] .batch-probe-label,
  .provider-toolbar .btn[data-provider-batch-probe] .batch-probe-label-short {
    display: none;
  }
}

/* 监听频道改为三列，卡片内部的编号图标、标签和操作按钮居中。 */
.channel-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.channel-card {
  text-align: center;
}

.channel-card-head {
  flex-direction: column;
  justify-content: center;
  gap: 6px;
  margin-bottom: 8px;
}

.channel-name {
  max-width: 100%;
  text-align: center;
}

.channel-card-meta {
  justify-content: center;
  margin: 0;
}

.channel-card-foot {
  justify-content: center;
  gap: 6px;
}

.channel-card-foot .btn {
  flex: 1 1 0;
  max-width: 110px;
}

.channel-meta-item {
  appearance: none;
  -webkit-appearance: none;
  margin: 0;
  font: inherit;
  cursor: pointer;
}

.channel-meta-item:hover,
.channel-meta-item:focus-visible {
  border-color: #6d9cc1;
  color: #e5f1fb;
  background: #2b4a63;
}

.channel-meta-item.live:hover,
.channel-meta-item.live:focus-visible {
  border-color: #a26b77;
  color: #f0c0c7;
  background: #49303a;
}

.channel-card-foot .btn:only-child {
  flex: 0 0 auto;
  width: min(110px, 100%);
}

@media (max-width: 720px) {
  .channel-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 7px;
  }

  .channel-card {
    padding: 9px 7px;
  }

  .channel-card-foot {
    gap: 4px;
  }

  .channel-card-foot .btn {
    min-width: 0;
    padding-inline: 4px;
    font-size: 10px;
  }
}

@media (max-width: 380px) {
  .channel-card {
    padding: 8px 5px;
  }

  .channel-card-foot .btn {
    font-size: 9px;
  }
}

/* 模拟盘：持仓中 / 未成交两类，以及参考图风格的订单卡片。 */
.demo-overview-tabs {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 7px;
  margin-bottom: 12px;
  padding: 4px;
  border: 1px solid var(--clean-border);
  border-radius: 11px;
  background: var(--clean-surface-soft);
}

.demo-overview-tab {
  min-height: 34px;
  border: 1px solid transparent;
  border-radius: 8px;
  color: var(--clean-muted);
  background: transparent;
  font: inherit;
  font-size: 12px;
  font-weight: 650;
  cursor: pointer;
}

.demo-overview-tab span {
  display: inline-flex;
  min-width: 20px;
  justify-content: center;
  margin-left: 4px;
  padding: 2px 5px;
  border-radius: 999px;
  color: var(--clean-muted);
  background: rgb(255 255 255 / 7%);
  font-size: 10px;
}

.demo-overview-tab.active {
  border-color: #496f8e;
  color: #e7f2fa;
  background: linear-gradient(135deg, #203d5b, #162b43);
  box-shadow: 0 5px 16px rgb(0 0 0 / 18%);
}

.demo-overview-tab.active span {
  color: #d8ecfa;
  background: rgb(133 196 232 / 16%);
}

.demo-section-panel[hidden] {
  display: none;
}

.demo-card-list {
  display: grid;
  gap: 10px;
}

.demo-trade-card {
  position: relative;
  padding: 13px;
  overflow: hidden;
  border: 1px solid #314e70;
  border-radius: 14px;
  background:
    linear-gradient(145deg, rgb(17 34 59 / 96%), rgb(8 18 35 / 98%)),
    var(--clean-surface);
  box-shadow: 0 12px 26px rgb(0 0 0 / 16%);
}

.demo-trade-card::before {
  position: absolute;
  top: 0;
  right: 9%;
  left: 9%;
  height: 2px;
  border-radius: 0 0 6px 6px;
  background: #3bb89f;
  content: "";
}

.demo-trade-card.pending::before {
  background: #7d9ed1;
}

.demo-symbol {
  display: block;
  color: #edf5fb;
  font-size: 18px;
  letter-spacing: .02em;
}

.demo-list-empty {
  display: none;
  padding: 32px 12px 20px;
  color: var(--clean-muted);
  text-align: center;
}

.demo-list-empty.is-visible {
  display: block;
}

.demo-list-empty .placeholder-icon {
  width: 38px;
  height: 38px;
  margin: 0 auto 9px;
  font-size: 18px;
}

.demo-list-empty strong,
.demo-list-empty small {
  display: block;
}

.demo-list-empty strong {
  color: var(--clean-text);
  font-size: 13px;
}

.demo-list-empty small {
  margin-top: 4px;
  font-size: 11px;
}

@media (max-width: 560px) {
  .demo-symbol {
    font-size: 16px;
  }

  }

/* 模拟盘订单卡片：按“订单摘要 → 交易员时间线 → 价格层级 → 盈亏”的阅读顺序排版。 */
.demo-overview-controls {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(220px, .42fr);
  gap: 10px;
  align-items: center;
  margin-bottom: 14px;
}

.demo-overview-controls .demo-overview-tabs {
  margin-bottom: 0;
}

.demo-trader-filter {
  display: flex;
  align-items: center;
  gap: 9px;
  min-width: 0;
  min-height: 44px;
  padding: 5px 8px 5px 12px;
  border: 1px solid var(--clean-border);
  border-radius: 11px;
  color: var(--clean-muted);
  background: var(--clean-surface-soft);
  font-size: 11px;
  white-space: nowrap;
}

.demo-trader-filter select {
  min-width: 0;
  flex: 1;
  height: 32px;
  padding: 0 26px 0 9px;
  border: 1px solid var(--clean-border);
  border-radius: 8px;
  color: var(--clean-text);
  background: var(--clean-surface-raised);
  font-size: 12px;
}

.demo-trader-filter input[type="date"] {
  min-width: 0;
  flex: 1;
  height: 32px;
  padding: 0 6px;
  border: 1px solid var(--clean-border);
  border-radius: 8px;
  color: var(--clean-text);
  background: var(--clean-surface-raised);
  font-size: 12px;
  color-scheme: dark;
}

.demo-date-range-filter em {
  flex: none;
  font-style: normal;
}

.demo-position-grid {
  grid-template-columns: minmax(0, 1fr);
}

.demo-order-card {
  padding: 16px;
  border-color: var(--clean-border-strong);
  border-radius: 14px;
  background: var(--clean-surface-raised);
  box-shadow: 0 14px 30px rgb(0 0 0 / 22%);
}

.demo-order-card::before {
  right: 14%;
  left: 14%;
  height: 2px;
  background: var(--clean-success);
}

.demo-order-card.pending::before {
  background: var(--clean-accent);
}

.demo-order-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}

.demo-order-head .demo-symbol {
  font-size: 21px;
  letter-spacing: .025em;
}

.demo-order-head small {
  display: block;
  margin-top: 4px;
  color: var(--clean-muted);
  font-size: 11px;
}

.demo-order-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 6px;
}

.demo-order-action {
  display: inline-flex;
  min-height: 25px;
  align-items: center;
  padding: 3px 9px;
  border: 1px solid var(--clean-border-strong);
  border-radius: 999px;
  color: var(--clean-muted);
  background: var(--clean-surface-soft);
  font-size: 10px;
  white-space: nowrap;
}

.demo-order-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 5px 13px;
  margin-top: 11px;
  color: var(--clean-muted);
  font-size: 10px;
}

.demo-order-trader {
  color: var(--clean-text);
  font-weight: 650;
}

.demo-order-trader-select {
  max-width: 150px;
  min-height: 25px;
  padding: 3px 24px 3px 8px;
  border: 1px solid var(--clean-accent);
  border-radius: 7px;
  color: var(--clean-text);
  background: var(--clean-surface-soft);
  font-size: 10px;
  font-weight: 650;
}

.demo-order-unassigned {
  color: var(--clean-muted);
  font-size: 10px;
}

.demo-order-levels {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
  margin-top: 14px;
}

.demo-level-card {
  display: grid;
  min-width: 0;
  min-height: 76px;
  align-content: center;
  gap: 3px;
  padding: 9px 10px;
  border: 1px solid var(--clean-border);
  border-radius: 10px;
  color: var(--clean-text);
  background: var(--clean-surface-soft);
}

.demo-level-card.entry,
.demo-level-card.dca {
  border-color: #3c766b;
  background: #1c3432;
}

.demo-level-card.stop {
  border-color: #4d6485;
  background: #202e45;
}

.demo-level-card.target {
  border-color: #536b93;
  background: #222f46;
}

.demo-level-label {
  display: flex;
  align-items: center;
  justify-content: space-between;
  color: var(--clean-muted);
  font-size: 10px;
  font-weight: 650;
}

.demo-level-card.entry .demo-level-label,
.demo-level-card.dca .demo-level-label {
  color: #a9d9ca;
}

.demo-level-card.stop .demo-level-label,
.demo-level-card.target .demo-level-label {
  color: #b7c9e4;
}

.demo-level-card strong {
  min-width: 0;
  overflow: hidden;
  color: var(--clean-text);
  font-size: 14px;
  font-variant-numeric: tabular-nums;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.demo-level-card small {
  min-width: 0;
  overflow: hidden;
  color: var(--clean-muted);
  font-size: 11px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.demo-order-summary {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(180px, .95fr);
  gap: 10px;
  margin-top: 13px;
  padding-top: 13px;
  border-top: 1px solid var(--clean-border);
}

.demo-order-pnl-block{
  display: grid;
  align-content: start;
  gap: 4px;
  min-width: 0;
  padding: 11px 12px;
  border: 1px solid var(--clean-border);
  border-radius: 10px;
  background: var(--clean-surface);
}

.demo-order-pnl-block > span{
  color: var(--clean-muted);
  font-size: 11px;
}

.demo-order-pnl-block strong{
  color: var(--clean-success);
  font-size: 18px;
  font-variant-numeric: tabular-nums;
}

.demo-order-pnl-block strong.negative{
  color: var(--clean-danger);
}

.demo-order-pnl-block small{
  color: var(--clean-muted);
  font-size: 10px;
}

.demo-order-pnl-block .pending-text{
  color: var(--clean-accent-hover);
}

.demo-order-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-top: 12px;
  color: var(--clean-muted);
  font-size: 10px;
}

.demo-close-button {
  min-width: 66px;
  min-height: 30px;
  padding: 4px 12px;
  border: 1px solid #80515c;
  border-radius: 9px;
  color: var(--clean-danger);
  background: transparent;
  font-size: 11px;
}

.demo-close-button:hover {
  border-color: var(--clean-danger);
  background: rgb(211 143 152 / 10%);
}

@media (max-width: 720px) {
  .demo-overview-controls {
    grid-template-columns: 1fr;
  }

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

  .demo-order-summary {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 460px) {
  .demo-order-card {
    padding: 13px;
  }

  .demo-order-head {
    gap: 8px;
  }

  .demo-order-head .demo-symbol {
    font-size: 16px;
  }

  .demo-order-actions {
    max-width: 56%;
  }

  .demo-order-action {
    padding-inline: 7px;
    min-height: 34px;
    font-size: 11px;
  }

  .demo-level-card {
    min-height: 70px;
    padding: 8px;
  }

  .demo-level-card strong {
    font-size: 13px;
  }
}

/* 订单卡片细节：右上角四个真实操作胶囊，价格信息按截图的分段小胶囊排列。 */
.demo-page-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  margin: 5px 0 18px;
}

.demo-page-heading h1 {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0;
  color: var(--clean-text);
  font-size: clamp(24px, 4vw, 34px);
  letter-spacing: .02em;
}

.demo-page-heading h1 span {
  color: var(--clean-accent-hover);
  font-size: .78em;
}

.demo-page-heading .muted {
  margin-top: 5px;
}

.demo-refresh-button {
  min-height: 44px;
  padding: 7px 18px;
  border: 1px solid var(--clean-border-strong);
  border-radius: 12px;
  color: var(--clean-text);
  background: var(--clean-surface-soft);
  font: inherit;
  font-size: 13px;
  cursor: pointer;
}

.demo-refresh-button:hover,
.demo-refresh-button:focus-visible {
  border-color: var(--clean-accent-hover);
  background: var(--clean-surface-raised);
}

.demo-overview-card {
  background:
    linear-gradient(90deg, rgb(105 150 196 / 5%) 1px, transparent 1px),
    linear-gradient(0deg, rgb(105 150 196 / 5%) 1px, transparent 1px),
    var(--clean-surface);
  background-size: 48px 48px;
}

.demo-order-title {
  min-width: 0;
}

.demo-order-title-main {
  display: flex;
  min-width: 0;
  align-items: baseline;
  gap: 8px;
}

.demo-side-pill,
.demo-type-pill,
.demo-trace-action {
  display: inline-flex;
  min-height: 28px;
  align-items: center;
  justify-content: center;
  padding: 4px 10px;
  border: 1px solid var(--clean-border-strong);
  border-radius: 999px;
  color: var(--clean-muted);
  background: var(--clean-surface-soft);
  font-size: 11px;
  font-weight: 650;
  white-space: nowrap;
}

.demo-side-pill.long {
  border-color: #287c72;
  color: #8fe1cd;
  background: rgb(35 128 112 / 18%);
}

.demo-side-pill.short {
  border-color: #865b67;
  color: #efb7c0;
  background: rgb(128 66 81 / 18%);
}

.demo-side-pill.unknown {
  border-color: var(--clean-border-strong);
  color: var(--clean-muted);
  background: var(--clean-surface-soft);
}

.demo-type-pill {
  border-color: #4d6993;
  color: #c0d4f1;
  background: rgb(67 91 139 / 20%);
}

.demo-order-action.demo-trace-action, .demo-order-action.demo-share-action{
  appearance: none;
  color: #c2d6ee;
  background: rgb(36 60 98 / 60%);
  cursor: pointer;
}

.demo-order-action.demo-trace-action:hover, .demo-order-action.demo-trace-action:focus-visible, .demo-order-action.demo-share-action:hover, .demo-order-action.demo-share-action:focus-visible{
  border-color: var(--clean-accent-hover);
  color: var(--clean-text);
  background: rgb(79 120 177 / 28%);
}

.demo-order-card.demo-location-target {
  scroll-margin-top: 18px;
  outline: 2px solid var(--clean-accent);
  outline-offset: 2px;
  box-shadow: 0 0 0 5px rgb(94 166 255 / 16%);
}

.demo-order-time b {
  color: var(--clean-text);
  font-weight: 650;
}

.demo-order-levels {
  display: flex;
  flex-wrap: wrap;
  align-items: stretch;
}

.demo-level-card {
  flex: 1 1 168px;
  grid-template-columns: auto minmax(0, 1fr);
  grid-template-rows: auto auto;
  min-height: 62px;
  padding: 0;
  overflow: hidden;
}

.demo-level-card .demo-level-label {
  grid-row: 1 / 3;
  align-self: stretch;
  justify-content: center;
  min-width: 48px;
  padding: 9px 8px;
  border-right: 1px solid rgb(255 255 255 / 8%);
}

.demo-level-card strong {
  align-self: end;
  padding: 9px 10px 0;
}

.demo-level-card small {
  align-self: start;
  padding: 0 10px 8px;
}

.demo-level-card.trigger {
  border-color: #5b6c92;
  background: #222f46;
}

.demo-level-card.trigger .demo-level-label {
  color: #c0cce5;
}

.trace-view-card {
  margin-top: 14px;
}

.trace-empty {
  padding: 42px 16px 34px;
  color: var(--clean-muted);
  text-align: center;
}

.trace-empty .placeholder-icon {
  width: 42px;
  height: 42px;
  margin: 0 auto 10px;
  font-size: 20px;
}

.trace-empty strong,
.trace-empty small {
  display: block;
}

.trace-empty strong {
  color: var(--clean-text);
  font-size: 14px;
}

.trace-empty small {
  max-width: 520px;
  margin: 6px auto 0;
  font-size: 11px;
  line-height: 1.6;
}

.trace-content {
  display: grid;
  gap: 14px;
}

.trace-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 7px 14px;
  padding: 11px 13px;
  border: 1px solid var(--clean-border);
  border-radius: 11px;
  color: var(--clean-muted);
  background: var(--clean-surface-soft);
  font-size: 11px;
}

.trace-meta b {
  color: var(--clean-text);
  font-weight: 650;
}

.trace-external-link {
  color: var(--clean-accent-hover);
  text-decoration: none;
}

.trace-external-link:hover {
  text-decoration: underline;
}

.trace-message {
  padding: 15px;
  border: 1px solid var(--clean-border);
  border-radius: 12px;
  background: var(--clean-surface);
}

.trace-message pre {
  margin: 0;
  color: var(--clean-text);
  font: inherit;
  font-size: 13px;
  line-height: 1.75;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

.trace-source-fragment + .trace-source-fragment {
  margin-top: 13px;
  padding-top: 13px;
  border-top: 1px dashed var(--clean-border);
}

.trace-source-fragment > strong,
.trace-source-attachments > strong {
  display: block;
  margin-bottom: 7px;
  color: var(--clean-muted);
  font-size: 11px;
  font-weight: 650;
}

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

.trace-attachments {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 7px;
  color: var(--clean-muted);
  font-size: 11px;
}

.trace-source-attachments + .trace-source-attachments {
  margin-top: 9px;
}

.trace-attachment {
  padding: 6px 9px;
  border: 1px solid var(--clean-border);
  border-radius: 8px;
  color: var(--clean-accent-hover);
  background: var(--clean-surface-soft);
  text-decoration: none;
}

.trace-attachment:hover {
  border-color: var(--clean-accent-hover);
}

.trace-timeline {
  display: grid;
  gap: 10px;
}

.trace-event {
  display: grid;
  grid-template-columns: 11px minmax(0, 1fr);
  align-items: start;
  gap: 10px;
  padding: 12px 13px;
  border: 1px solid var(--clean-border);
  border-radius: 11px;
  background: var(--clean-surface-soft);
}

.trace-event-dot {
  width: 9px;
  height: 9px;
  margin-top: 5px;
  border-radius: 50%;
  background: var(--clean-accent);
  box-shadow: 0 0 0 4px rgb(110 159 211 / 14%);
}

.trace-event-dot.source {
  background: var(--clean-success);
  box-shadow: 0 0 0 4px rgb(74 185 151 / 14%);
}

.trace-event-dot.ai {
  background: #b09bd9;
  box-shadow: 0 0 0 4px rgb(176 155 217 / 14%);
}

.trace-event-dot.link {
  background: var(--clean-accent-hover);
}

.trace-event b,
.trace-log-error b {
  display: block;
  color: var(--clean-text);
  font-size: 12px;
}

.trace-event small {
  display: block;
  margin-top: 4px;
  color: var(--clean-muted);
  font-size: 11px;
}

.trace-log-error {
  display: grid;
  gap: 5px;
  padding: 12px 13px;
  border: 1px solid rgb(211 143 152 / 46%);
  border-radius: 11px;
  color: var(--clean-danger);
  background: rgb(128 66 81 / 12%);
  font-size: 11px;
}

.trace-signal-facts {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
}

.trace-signal-facts span {
  padding: 6px 9px;
  border: 1px solid var(--clean-border);
  border-radius: 999px;
  color: var(--clean-muted);
  background: var(--clean-surface-soft);
  font-size: 11px;
}

@media (max-width: 720px) {
  .demo-order-actions {
    max-width: 68%;
  }

  .demo-level-card {
    flex-basis: calc(50% - 4px);
  }

  .demo-order-action {
    min-height: 34px;
    font-size: 11px;
  }
}

@media (max-width: 460px) {
  .demo-page-heading {
    align-items: flex-start;
  }

  .demo-page-heading h1 {
    font-size: 24px;
  }

  .demo-refresh-button {
    min-height: 40px;
    padding-inline: 12px;
    font-size: 12px;
  }

  .demo-order-actions {
    gap: 4px;
  }

  .demo-side-pill,
  .demo-type-pill,
  .demo-trace-action {
    min-height: 34px;
    padding-inline: 7px;
    font-size: 11px;
  }

  .demo-level-card {
    flex-basis: calc(33.333% - 6px);
    min-width: 0;
  }

  }

/* 订单卡片更新区：价格改为紧凑胶囊，下方固定为更新 / 盈亏两列。 */
.demo-order-levels {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  margin-top: 12px;
}

.demo-level-card {
  display: inline-flex;
  flex: 0 1 auto;
  min-width: 0;
  min-height: 29px;
  align-items: center;
  gap: 5px;
  padding: 5px 9px;
  border-radius: 999px;
  overflow: hidden;
}

.demo-level-card .demo-level-label {
  display: inline-flex;
  grid-row: auto;
  align-items: center;
  justify-content: initial;
  min-width: auto;
  padding: 0;
  border-right: 0;
  font-size: 9px;
  white-space: nowrap;
}

.demo-level-card strong {
  align-self: auto;
  padding: 0;
  font-size: 11px;
  line-height: 1.2;
}

.demo-level-card small {
  align-self: auto;
  max-width: 130px;
  padding: 0;
  font-size: 9px;
  line-height: 1.2;
  text-overflow: ellipsis;
}

.demo-order-summary {
  align-items: stretch;
}

.demo-order-updates,
.demo-order-pnl-block {
  min-height: 92px;
}

.demo-order-updates {
  display: grid;
  align-content: start;
  gap: 7px;
  min-width: 0;
  padding: 11px 12px;
  border: 1px solid var(--clean-border);
  border-radius: 10px;
  background: var(--clean-surface);
}

.demo-summary-title{
  color: var(--clean-muted);
  font-size: 11px;
}

.demo-history-panel-title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: nowrap;
  gap: 6px 10px;
}

.demo-history-panel-title .demo-trace-action,
.demo-order-update-head .demo-trace-action {
  flex: 0 0 auto;
  margin-left: auto;
}

.demo-update-panel-title {
  display: flex;
  align-items: baseline;
  flex-wrap: nowrap;
  gap: 3px 8px;
  min-width: 0;
}

.demo-order-update-list {
  display: grid;
  gap: 6px;
}

.demo-order-update {
  display: grid;
  gap: 2px;
  min-width: 0;
  padding: 6px 8px;
  border: 1px solid rgb(112 148 181 / 20%);
  border-radius: 8px;
  background: var(--clean-surface-soft);
}

.demo-order-update-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  min-width: 0;
}

.demo-order-update-head b,
.demo-order-update-head span {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.demo-order-update-head b {
  color: var(--clean-text);
  font-size: 10px;
}

.demo-order-update-head span,
.demo-order-update small {
  color: var(--clean-muted);
  font-size: 9px;
}

.demo-order-update small {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.demo-update-trace-times {
  display: flex;
  flex-wrap: wrap;
  gap: 3px 8px;
  min-width: 0;
  color: var(--clean-muted);
  font-size: 9px;
  line-height: 1.25;
}

.demo-update-trace-times .demo-order-time {
  white-space: nowrap;
}

.demo-update-trace-times .demo-order-time b {
  color: var(--clean-text);
  font-weight: 650;
}

.demo-order-update-footer {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 8px;
  min-width: 0;
  margin-top: 2px;
}

.demo-order-update-footer > .demo-update-trace-times {
  flex: 1 1 auto;
  min-width: 0;
}

.demo-order-update-footer > .demo-update-actions {
  flex: 0 0 auto;
  justify-content: flex-end;
  min-width: max-content;
  margin-top: 0;
  margin-left: auto;
}

.demo-update-time-separator {
  margin-inline: 1px;
  color: var(--clean-muted);
  font-size: inherit;
}

.demo-order-pnl-block {
  display: grid;
  align-content: start;
  gap: 8px;
}

.demo-pnl-row{
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  min-width: 0;
}

.demo-pnl-row span{
  color: var(--clean-muted);
  font-size: 10px;
}

.demo-pnl-row strong{
  font-size: 16px;
  font-variant-numeric: tabular-nums;
}

@media (max-width: 720px) {
  .demo-order-summary {
    grid-template-columns: 1fr;
  }
}

/* 参考图布局：首行入场 / 数量 / SL，后续目标价继续换行排列。 */
.demo-order-meta {
  gap: 5px 12px;
  font-size: 11px;
}

.demo-order-levels {
  align-items: stretch;
  gap: 7px;
}

.demo-level-card {
  display: grid;
  flex: 0 1 auto;
  grid-template-columns: auto minmax(0, 1fr);
  grid-template-rows: 1fr auto;
  min-width: 126px;
  min-height: 38px;
  align-items: center;
  gap: 0;
  padding: 0;
  border-radius: 10px;
}

.demo-level-card .demo-level-label {
  grid-row: 1 / 3;
  align-self: stretch;
  justify-content: center;
  min-width: 43px;
  padding: 6px 7px;
  border-right: 1px solid rgb(255 255 255 / 8%);
  font-size: 10px;
}

.demo-level-card strong {
  grid-column: 2;
  align-self: center;
  padding: 5px 8px 0;
  font-size: 13px;
}

.demo-level-card small {
  grid-column: 2;
  align-self: start;
  max-width: none;
  padding: 0 8px 4px;
  font-size: 8px;
}

.demo-level-card.quantity {
  border-color: #4d648e;
  background: #1e2e4d;
}

.demo-level-card.quantity .demo-level-label {
  color: #b9cae8;
  background: rgb(84 111 164 / 18%);
}

.demo-level-card.target {
  border-color: #4d6485;
  background: #202e45;
}

.demo-level-card.target .demo-level-label,
.demo-level-card.stop .demo-level-label {
  color: #b7c9e4;
  background: rgb(84 111 164 / 18%);
}

/* 1R 条件单已被撤销（交易所不联动撤销 closeOnTrigger 条件单），
   用灰色区分「未触发」，避免误读成还挂着。2026-09-24 */
.demo-level-card.cancelled {
  border-color: #4a4f57;
  background: #23262b;
  opacity: 0.75;
}

.demo-level-card.cancelled .demo-level-label {
  color: #b9bec7;
  background: rgb(120 128 140 / 18%);
}

/* 该档预设止盈被本单的临时手动 TP 顶替（程序自己撤的单、数量由手动 TP
   接管）。用灰色区分「已撤销」，说成「已撤销」会被误读成交易员撤单；
   同时比「未触发」更暗，避免看成还挂着。2026-10-01 */
.demo-level-card.replaced {
  border-color: #46484d;
  background: #212327;
  opacity: 0.7;
}

.demo-level-card.replaced .demo-level-label {
  color: #a9adb5;
  background: rgb(120 128 140 / 14%);
}

.demo-level-card.replaced .demo-level-value {
  color: #b6bac1;
}

.demo-level-card.replaced .demo-level-trigger-time {
  color: #9aa0a8;
}

.demo-level-card.entry,
.demo-level-card.target.triggered,
.demo-level-card.stop.triggered,
.demo-level-card.triggered {
  border-color: #2b8d7b;
  background: #173d3b;
}

.demo-level-card.entry .demo-level-label,
.demo-level-card.target.triggered .demo-level-label,
.demo-level-card.stop.triggered .demo-level-label,
.demo-level-card.triggered .demo-level-label {
  color: #b5ebdc;
  background: rgb(47 158 133 / 17%);
}

/* 挂单入场尚未触发，使用蓝色层级，避免误读为已成交。 */
.demo-level-card.pending-entry {
  border-color: #4d6485;
  background: #202e45;
}

.demo-level-card.pending-entry .demo-level-label {
  color: #b7c9e4;
  background: rgb(84 111 164 / 18%);
}

.demo-order-updates {
  align-content: start;
  gap: 8px;
}

.demo-update-summary {
  color: var(--clean-text);
  font-size: 13px;
  line-height: 1.35;
}

.demo-update-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: auto;
}

@media (max-width: 720px) {
  .demo-level-card {
    min-width: 118px;
  }
}

/* 最终紧凑版订单卡片：移动端底部固定为“更新 / 盈亏”两个小格。 */
.demo-order-card {
  padding: 10px;
  border-radius: 11px;
}

.demo-order-head {
  gap: 7px;
}

.demo-order-head .demo-symbol {
  font-size: 17px;
}

.demo-order-actions {
  gap: 3px;
}

.demo-order-meta {
  gap: 3px 8px;
  margin-top: 6px;
  font-size: 9px;
}

.demo-order-levels {
  align-items: center;
  gap: 4px;
  margin-top: 8px;
}

.demo-level-card {
  display: inline-flex;
  flex: 0 1 auto;
  flex-basis: auto;
  grid-template-columns: none;
  grid-template-rows: none;
  min-width: 0;
  min-height: 27px;
  align-items: center;
  padding: 4px 7px;
  border-radius: 8px;
}

.demo-level-card .demo-level-label {
  grid-row: auto;
  align-self: auto;
  min-width: auto;
  padding: 0;
  border-right: 0;
  font-size: 9px;
}

.demo-level-card strong {
  grid-column: auto;
  align-self: auto;
  padding: 0;
  font-size: 11px;
}

.demo-level-card small {
  grid-column: auto;
  align-self: auto;
  max-width: 96px;
  padding: 0;
  font-size: 8px;
}

.demo-order-summary {
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 6px;
  margin-top: 8px;
  padding-top: 8px;
}

.demo-order-updates,
.demo-order-pnl-block {
  min-height: 0;
  padding: 7px 8px;
  border-radius: 8px;
}

.demo-order-updates {
  align-content: start;
  gap: 4px;
}

.demo-summary-title {
  color: var(--clean-muted);
  font-size: 10px;
  line-height: 1.25;
}

.demo-no-update {
  color: var(--clean-muted);
  font-size: 11px;
  line-height: 1.35;
}

/*
 * 数据一致性告警：交易所存在本单出场记录、但本地审计里没有任何登记时显示。
 * 这是排查入口，不是装饰——命中就说明卡片上的数字不可信，必须以交易所为准。
 * 用告警色而非中性灰，且行高放宽，保证 390px 手机上能一眼看清。
 */
.demo-data-gap {
  margin: 0 0 6px;
  padding: 6px 8px;
  border: 1px solid rgba(214, 106, 42, 0.55);
  border-radius: 6px;
  background: rgba(214, 106, 42, 0.10);
  color: var(--clean-text, inherit);
  font-size: 11px;
  line-height: 1.5;
}

.demo-data-gap b {
  display: block;
  color: #d66a2a;
  font-weight: 700;
}

.demo-data-gap span {
  color: var(--clean-muted);
}

.demo-data-gap ul {
  margin: 4px 0 0;
  padding-left: 16px;
  color: var(--clean-text, inherit);
}

.demo-data-gap li {
  font-variant-numeric: tabular-nums;
  word-break: break-all;
}

.demo-order-update-list {
  gap: 4px;
}

.demo-order-update {
  padding: 4px 6px;
  border-radius: 6px;
}

.demo-order-update-head b {
  font-size: 9px;
}

.demo-order-update-head span,
.demo-order-update small {
  font-size: 8px;
}

.demo-order-pnl-block {
  gap: 4px;
}

.demo-pnl-row {
  min-height: 17px;
  align-items: center;
  gap: 5px;
}

.demo-pnl-row > span {
  font-size: 9px;
  white-space: nowrap;
}

.demo-pnl-row strong {
  display: inline-flex;
  min-width: 0;
  align-items: baseline;
  justify-content: flex-end;
  gap: 4px;
  overflow: hidden;
  color: var(--clean-success);
  font-size: 11px;
  line-height: 1.2;
  text-align: right;
}

.demo-pnl-row strong.negative {
  color: var(--clean-danger);
}

.demo-pnl-usd,
.demo-pnl-r {
  white-space: nowrap;
}

.demo-pnl-r {
  color: inherit;
  font-size: 9px;
}

.demo-pnl-separator {
  color: var(--clean-muted);
  font-size: 9px;
}

.demo-pnl-row strong.positive .demo-pnl-usd,
.demo-pnl-row strong.positive .demo-pnl-r {
  color: var(--clean-success);
}

.demo-pnl-row strong.negative .demo-pnl-usd,
.demo-pnl-row strong.negative .demo-pnl-r {
  color: var(--clean-danger);
}

.demo-pnl-empty {
  min-height: 1em;
  color: transparent !important;
}

.demo-update-actions {
  gap: 4px;
  margin-top: 2px;
}

.demo-order-update-footer {
  gap: 4px;
  margin-top: 1px;
}

.demo-order-footer {
  margin-top: 7px;
  font-size: 9px;
}

@media (max-width: 720px) {
  .demo-order-summary {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 460px) {
  .demo-order-card {
    padding: 9px;
  }

  .demo-order-head .demo-symbol {
    font-size: 16px;
  }

  .demo-order-action.demo-trace-action, .demo-side-pill, .demo-type-pill{
    min-height: 23px;
    padding-inline: 6px;
    font-size: 9px;
  }

  .demo-level-card {
    min-height: 25px;
    padding-inline: 6px;
  }
}

/* 订单价格和操作胶囊统一使用 11px，避免同一胶囊的分段字号不一致。 */
.demo-level-card,
.demo-level-card .demo-level-label,
.demo-level-card strong,
.demo-level-card small,
.demo-level-sub-label,
.demo-level-sub-value,
.demo-order-head .demo-side-pill,
.demo-order-head .demo-type-pill,
.demo-order-head .demo-order-action.demo-trace-action {
  font-size: 11px;
}

/* 价格胶囊分段：标签、价格、数量标签和数量值各自有清晰分隔线。 */
.demo-level-card {
  gap: 0;
  padding: 0;
  overflow: hidden;
}

.demo-level-card .demo-level-label {
  align-self: stretch;
  padding: 4px 7px;
  border-right: 1px solid rgb(255 255 255 / 12%);
}

.demo-level-card strong {
  display: inline-flex;
  align-items: center;
  padding: 4px 7px;
}

.demo-level-card small {
  display: inline-flex;
  align-items: stretch;
  max-width: none;
  padding: 0;
  border-left: 1px solid rgb(255 255 255 / 12%);
}

.demo-level-sub-label,
.demo-level-sub-value {
  display: inline-flex;
  align-items: center;
  padding: 4px 6px;
  white-space: nowrap;
}

.demo-level-sub-label {
  color: var(--clean-muted);
  border-right: 1px solid rgb(255 255 255 / 10%);
}

.demo-level-sub-value {
  color: var(--clean-muted);
}

/* 固定每个分段的列宽，让不同订单的竖向分割线保持对齐。 */
.demo-level-card .demo-level-label {
  box-sizing: border-box;
  flex: 0 0 56px;
  justify-content: center;
}

.demo-level-card > strong {
  box-sizing: border-box;
  flex: 0 0 76px;
  justify-content: center;
  overflow: hidden;
  text-overflow: ellipsis;
}

.demo-level-card > small > .demo-level-sub-label:nth-child(1) {
  box-sizing: border-box;
  flex: 0 0 44px;
  justify-content: center;
}

.demo-level-card > small > .demo-level-sub-value:nth-child(2) {
  box-sizing: border-box;
  flex: 0 0 60px;
  justify-content: center;
  overflow: hidden;
  text-overflow: ellipsis;
}

.demo-level-card > small > .demo-level-sub-label:nth-child(3) {
  box-sizing: border-box;
  flex: 0 0 56px;
  justify-content: center;
}

.demo-level-card > small > .demo-level-sub-value:nth-child(4) {
  box-sizing: border-box;
  flex: 0 1 auto;
  min-width: 60px;
  max-width: 110px;
  overflow: hidden;
  text-overflow: ellipsis;
}

@media (max-width: 460px) {
  .demo-level-card .demo-level-label {
    flex-basis: 46px;
  }

  .demo-level-card > strong {
    flex-basis: 72px;
  }

  .demo-level-card > small > .demo-level-sub-label:nth-child(1) {
    flex-basis: 38px;
  }

  .demo-level-card > small > .demo-level-sub-value:nth-child(2) {
    flex-basis: 48px;
  }

  .demo-level-card > small > .demo-level-sub-label:nth-child(3) {
    flex-basis: 44px;
  }

  .demo-level-card > small > .demo-level-sub-value:nth-child(4) {
    min-width: 48px;
  }
}

/* 手动 TP 没有固定价格，用市价胶囊与预设 TP 并排显示。 */
.demo-level-card.manual-target {
  border-color: #536b93;
  background: #222f46;
}

.demo-level-card.manual-target .demo-level-label {
  color: #b7c9e4;
}

.demo-level-card.manual-target.triggered {
  border-color: #2b8d7b;
  background: #173d3b;
}

.demo-level-card.manual-target.triggered .demo-level-label {
  color: #b5ebdc;
}

.demo-history-panel-stack {
  display: grid;
  gap: 8px;
  min-width: 0;
}

/* 历史订单与订单日志沿用模拟盘订单卡片的层级和紧凑阅读方式。 */
.demo-list-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.demo-list-toolbar > strong {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  color: var(--clean-text);
  font-size: 13px;
}

.demo-list-toolbar > strong span {
  display: inline-flex;
  min-width: 23px;
  align-items: center;
  justify-content: center;
  padding: 2px 7px;
  border-radius: 999px;
  color: var(--clean-accent-hover);
  background: rgb(110 159 203 / 14%);
  font-size: 10px;
}

.demo-list-toolbar .demo-trader-filter {
  min-height: 38px;
  margin-left: auto;
}

.demo-log-outcome-tabs {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  margin-bottom: 14px;
}

.demo-log-outcome-tabs .demo-manual-review-tab {
  color: var(--clean-warning);
}

.demo-log-outcome-tabs .demo-manual-review-tab:hover,
.demo-log-outcome-tabs .demo-manual-review-tab:focus-visible {
  border-color: #62563d;
  color: #f4d38a;
  background: rgb(159 116 42 / 16%);
}

.demo-history-order-card::before {
  background: var(--clean-accent-hover);
}

.demo-log-order-card::before {
  background: #9f8bd1;
}

.demo-history-close-panel{
  min-height: 0;
}

.demo-history-close-panel {
  display: grid;
  align-content: start;
  gap: 7px;
}

.demo-history-close-facts {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  overflow: hidden;
  border: 1px solid rgb(112 148 181 / 20%);
  border-radius: 8px;
  background: var(--clean-surface-soft);
}

.demo-history-close-fact {
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-width: 0;
  min-height: 48px;
  gap: 3px;
  padding: 7px 8px;
  border-right: 1px solid rgb(112 148 181 / 18%);
}

.demo-history-close-fact:last-child {
  border-right: 0;
}

.demo-history-close-fact span {
  color: var(--clean-muted);
  font-size: 9px;
  white-space: nowrap;
}

.demo-history-close-fact strong {
  min-width: 0;
  overflow: hidden;
  color: var(--clean-text);
  font-size: 11px;
  font-variant-numeric: tabular-nums;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.demo-history-pnl-block,
.demo-log-pnl-block {
  min-height: 0;
  align-content: stretch;
}

.demo-order-pnl-block.demo-history-pnl-block {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 0;
  padding: 0;
  overflow: hidden;
}

.demo-history-pnl-block .demo-pnl-row {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  min-width: 0;
  min-height: 56px;
  gap: 3px;
  padding: 6px 8px;
  border-right: 1px solid var(--clean-border);
}

.demo-history-pnl-block .demo-pnl-row:last-child {
  border-right: 1px solid var(--clean-border);
}

.demo-history-pnl-block .demo-pnl-provider-cell {
  display: flex;
  min-width: 0;
  min-height: 76px;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  gap: 5px;
  padding: 9px 10px;
  overflow: hidden;
  border-right: 1px solid var(--clean-border);
}

.demo-history-pnl-block .demo-pnl-provider-cell > .demo-pnl-cell-label {
  font-size: 10px;
}

.demo-history-pnl-block .demo-pnl-provider-cell > small {
  color: var(--clean-muted);
  font-size: 9px;
}

.demo-history-delete-cell {
  display: flex;
  min-width: 0;
  min-height: 76px;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  gap: 4px;
  padding: 9px 10px;
}

.demo-history-delete-cell > span {
  color: var(--clean-muted);
  font-size: 10px;
  white-space: nowrap;
}

.demo-history-delete-cell .demo-history-delete-action {
  width: 100%;
  min-width: 0;
  justify-content: center;
}

.demo-history-delete-cell .demo-history-delete-action:focus-visible {
  position: relative;
  z-index: 1;
}

.demo-log-delete-cell {
  display: flex;
  min-width: 92px;
  flex-direction: column;
  align-items: stretch;
  justify-content: center;
  gap: 4px;
  padding: 9px 10px;
}

.demo-log-delete-cell > span {
  color: var(--clean-muted);
  font-size: 10px;
  white-space: nowrap;
}

.demo-log-delete-cell .demo-history-delete-action {
  width: 100%;
  min-width: 0;
  justify-content: center;
}

.demo-log-delete-cell .demo-history-delete-action:focus-visible {
  position: relative;
  z-index: 1;
}

.demo-history-pnl-block .demo-pnl-row > span {
  color: var(--clean-muted);
  font-size: 10px;
  white-space: nowrap;
}

.demo-history-pnl-block .demo-pnl-row strong {
  display: grid;
  min-width: 0;
  gap: 2px;
  overflow: visible;
  color: var(--clean-success);
  font-size: 13px;
  line-height: 1.15;
  text-align: left;
}

.demo-history-pnl-block .demo-pnl-row strong.negative {
  color: var(--clean-danger);
}

.demo-history-pnl-block .demo-pnl-separator {
  display: none;
}

.demo-history-pnl-block .demo-pnl-usd, .demo-history-pnl-block .demo-pnl-r{
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.demo-history-pnl-block .demo-pnl-r {
  font-size: 10px;
}

.demo-order-update-head span.positive{
  color: var(--clean-success);
}

.demo-order-update-head span.negative{
  color: var(--clean-danger);
}

.demo-order-update-head span.warning{
  color: var(--clean-warning);
}

.demo-log-pnl-block {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 0;
  padding: 0;
  overflow: hidden;
}

.demo-log-pnl-block .demo-pnl-row,
.demo-log-pnl-block .demo-pnl-provider-cell,
.demo-log-pnl-block .demo-log-delete-cell {
  min-height: 76px;
  border-right: 1px solid var(--clean-border);
}

.demo-log-pnl-block .demo-pnl-row {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  gap: 4px;
  padding: 9px 10px;
}

.demo-log-pnl-block .demo-pnl-row > span {
  color: var(--clean-muted);
  font-size: 10px;
  white-space: nowrap;
}

.demo-log-pnl-block .demo-pnl-row strong {
  min-width: 0;
  overflow: hidden;
  color: var(--clean-text);
  font-size: 11px;
  line-height: 1.2;
  text-overflow: ellipsis;
  white-space: normal;
  overflow-wrap: anywhere;
  word-break: break-word;
}

.demo-log-pnl-block .demo-pnl-row strong.negative {
  color: var(--clean-danger);
}

.demo-log-pnl-block .demo-pnl-row strong.warning {
  color: var(--clean-warning);
}

.demo-log-pnl-block .demo-pnl-row strong.positive {
  color: var(--clean-success);
}

.demo-log-reason-cell {
  overflow: hidden;
}

.demo-log-pnl-block .demo-log-reason {
  display: -webkit-box;
  overflow: hidden;
  color: var(--clean-text);
  font-size: 9px;
  line-height: 1.35;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  white-space: normal;
  overflow-wrap: anywhere;
}

.demo-log-pnl-block .demo-log-delete-cell {
  min-width: 0;
  border-right: 0;
}

.demo-log-reason {
  overflow: visible;
  line-height: 1.45;
  white-space: normal;
}

.demo-log-reason b {
  color: var(--clean-text);
  font-weight: 600;
}

#page-orders .trace-view-card,
#page-logs .trace-view-card {
  margin-top: 12px;
}

#demo-source-view[hidden],
#demo-log-view[hidden] {
  display: none;
}

@media (max-width: 720px) {
  .demo-list-toolbar {
    align-items: stretch;
    flex-direction: column;
    gap: 7px;
  }

  .demo-list-toolbar .demo-trader-filter {
    width: 100%;
    margin-left: 0;
  }

  .demo-history-close-fact {
    min-height: 44px;
    padding: 6px;
  }

  .demo-history-close-fact span {
    font-size: 8px;
  }

  .demo-history-close-fact strong {
    font-size: 10px;
  }

  .demo-history-pnl-block .demo-pnl-row {
    min-height: 72px;
    padding: 8px 6px;
  }

  .demo-history-pnl-block .demo-pnl-provider-cell,
  .demo-log-pnl-block .demo-pnl-row,
  .demo-log-pnl-block .demo-pnl-provider-cell,
  .demo-log-pnl-block .demo-log-delete-cell {
    min-height: 72px;
    padding: 8px 6px;
  }

  .demo-history-delete-cell {
    min-height: 72px;
    padding: 8px 6px;
  }

  .demo-history-pnl-block .demo-pnl-row > span {
    font-size: 9px;
  }

  .demo-history-pnl-block .demo-pnl-row strong {
    font-size: 11px;
  }

  .demo-history-pnl-block .demo-pnl-r {
    font-size: 8px;
  }

  .demo-history-pnl-block .demo-pnl-provider-cell > .demo-pnl-cell-label,
  .demo-log-pnl-block .demo-pnl-row > span,
  .demo-log-pnl-block .demo-pnl-provider-cell > .demo-pnl-cell-label,
  .demo-log-pnl-block .demo-log-reason {
    font-size: 8px;
  }

  .demo-history-delete-cell > span {
    font-size: 9px;
  }

  .demo-history-delete-cell .demo-history-delete-action {
    padding-inline: 5px;
    font-size: 9px;
  }
}

/* 订单卡片底部改为按行展示：盈亏、识别中转站和操作分行排列。 */
.demo-order-pnl-block.demo-position-pnl-block {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 0;
  padding: 0;
  overflow: hidden;
}

.demo-position-pnl-block .demo-pnl-row,
.demo-position-pnl-block .demo-pnl-close-cell,
.demo-position-pnl-block .demo-pnl-provider-cell {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  min-width: 0;
  min-height: 82px;
  padding: 10px 11px;
  border-right: 1px solid var(--clean-border);
}

.demo-position-pnl-block .demo-pnl-row {
  gap: 4px;
}

.demo-pnl-provider-cell {
  gap: 5px;
  overflow: hidden;
}

.demo-pnl-cell-label {
  color: var(--clean-muted);
  font-size: 10px;
  white-space: nowrap;
}

.demo-pnl-provider-list {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  min-width: 0;
  overflow: visible;
  white-space: normal;
}

.demo-pnl-provider-attempt {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  flex: 0 1 auto;
  max-width: 100%;
  min-width: 0;
  padding: 3px 4px;
  border: 1px solid var(--clean-border);
  border-radius: 4px;
  font-size: 9px;
  line-height: 1.1;
}

.demo-pnl-provider-attempt b,
.demo-pnl-provider-attempt em {
  flex: 0 0 auto;
}

.demo-pnl-provider-attempt b {
  color: var(--clean-text);
  font-weight: 700;
}

.demo-pnl-provider-attempt em {
  font-style: normal;
}

.demo-pnl-provider-attempt.success em {
  color: var(--clean-success);
}

.demo-pnl-provider-attempt.failed em {
  color: var(--clean-danger);
}

.demo-pnl-provider-attempt.skipped em {
  color: var(--clean-muted);
}

.demo-position-pnl-block .demo-pnl-provider-cell > small {
  color: var(--clean-muted);
  font-size: 9px;
}

.demo-position-pnl-block .demo-pnl-row:last-of-type,
.demo-position-pnl-block .demo-pnl-provider-cell {
  border-right: 1px solid var(--clean-border);
}

.demo-position-pnl-block .demo-pnl-close-cell {
  border-right: 0;
}

.demo-position-pnl-block .demo-log-delete-cell {
  min-width: 0;
  border-right: 0;
}

.demo-position-pnl-block .demo-pnl-row > span {
  color: var(--clean-muted);
  font-size: 10px;
  white-space: nowrap;
}

.demo-position-pnl-block .demo-pnl-row strong {
  display: grid;
  min-width: 0;
  gap: 2px;
  overflow: visible;
  color: var(--clean-success);
  font-size: 13px;
  line-height: 1.15;
  text-align: left;
}

.demo-position-pnl-block .demo-pnl-row strong.negative {
  color: var(--clean-danger);
}

.demo-position-pnl-block .demo-pnl-separator {
  display: none;
}

.demo-position-pnl-block .demo-pnl-usd,
.demo-position-pnl-block .demo-pnl-r {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.demo-position-pnl-block .demo-pnl-r {
  font-size: 10px;
}

.demo-position-pnl-block .demo-pnl-close-cell {
  align-items: stretch;
}

.demo-position-pnl-block .demo-close-button {
  width: 100%;
  min-width: 0;
  min-height: 34px;
  padding: 4px 8px;
}

.demo-pnl-close-unavailable {
  width: 100%;
  color: var(--clean-muted);
  font-size: 10px;
  text-align: center;
}

@media (max-width: 720px) {
  .demo-position-pnl-block .demo-pnl-row,
  .demo-position-pnl-block .demo-pnl-close-cell,
  .demo-position-pnl-block .demo-pnl-provider-cell {
    min-height: 74px;
    padding: 8px 6px;
  }

  .demo-position-pnl-block .demo-pnl-row > span {
    font-size: 9px;
  }

  .demo-position-pnl-block .demo-pnl-row strong {
    font-size: 11px;
  }

  .demo-position-pnl-block .demo-pnl-r, .demo-position-pnl-block .demo-pnl-cell-label, .demo-position-pnl-block .demo-pnl-provider-attempt, .demo-pnl-close-unavailable{
    font-size: 8px;
  }

  .demo-position-pnl-block .demo-close-button {
    min-height: 31px;
    padding-inline: 4px;
    font-size: 10px;
  }
}

/* 所有订单卡片右上角的类型、方向、原文、日志胶囊统一使用 11px。 */
.demo-order-head .demo-side-pill,
.demo-order-head .demo-type-pill,
.demo-order-head .demo-order-action.demo-trace-action,
.demo-order-head .demo-order-action.demo-share-action,
.demo-order-head .demo-order-action.demo-close-button,
.demo-order-head .demo-order-action.live-danger-action,
.demo-order-head .demo-order-action.manual-review-action,
.demo-order-head .demo-order-action.demo-history-delete-action {
  min-height: 30px;
  padding: 5px 11px;
  font-size: 11px;
}

@media (max-width: 720px) {
.demo-order-head .demo-side-pill,
.demo-order-head .demo-type-pill,
.demo-order-head .demo-order-action.demo-trace-action,
.demo-order-head .demo-order-action.demo-share-action,
.demo-order-head .demo-order-action.demo-close-button,
.demo-order-head .demo-order-action.live-danger-action,
.demo-order-head .demo-order-action.demo-history-delete-action {
  min-height: 27px;
  padding: 4px 9px;
  font-size: 11px;
}
}

/* 程序内确认弹窗：替代浏览器原生 confirm，保持当前暗色卡片视觉。 */
.confirm-panel {
  width: min(480px, 100%);
  border-color: var(--clean-border-strong);
}

.confirm-modal-body {
  display: grid;
  grid-template-columns: 38px minmax(0, 1fr);
  grid-template-areas:
    "icon message"
    ". note";
  gap: 7px 11px;
  padding: 14px;
  border: 1px solid var(--clean-border);
  border-radius: 12px;
  background: var(--clean-surface-soft);
}

.confirm-modal-icon {
  grid-area: icon;
  display: grid;
  width: 38px;
  height: 38px;
  place-items: center;
  border: 1px solid #6d5a34;
  border-radius: 50%;
  color: #e7c27b;
  background: rgb(159 116 42 / 16%);
  font-size: 18px;
  font-weight: 700;
  line-height: 1;
}

.confirm-modal-message {
  grid-area: message;
  align-self: center;
  margin: 0;
  color: var(--clean-text);
  font-size: 14px;
  line-height: 1.6;
}

.confirm-modal-note {
  grid-area: note;
  margin: 0;
  color: var(--clean-muted);
  font-size: 12px;
  line-height: 1.6;
}

.confirm-modal-actions {
  margin-top: 14px;
}

.demo-price-edit-action {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  min-height: 22px;
  margin-left: 5px;
  padding: 2px 6px;
  border: 1px solid rgb(112 161 207 / 62%);
  border-radius: 6px;
  color: #b9d8f4;
  background: rgb(40 76 119 / 45%);
  font-size: 9px;
  font-weight: 700;
  line-height: 1;
  white-space: nowrap;
}

.demo-price-edit-action:hover,
.demo-price-edit-action:focus-visible {
  border-color: var(--clean-accent-hover);
  color: var(--clean-text);
  background: rgb(68 119 177 / 58%);
}

.demo-price-edit-action:disabled {
  cursor: wait;
  opacity: .62;
}

.demo-level-card > small .demo-price-edit-action {
  align-self: center;
  padding-block: 3px;
  border-left: 1px solid rgb(255 255 255 / 14%);
}

.price-edit-panel {
  width: min(430px, 100%);
}

.price-edit-fields {
  display: grid;
  gap: 10px;
  padding: 14px;
  border: 1px solid var(--clean-border);
  border-radius: 12px;
  background: var(--clean-surface-soft);
}

.price-edit-fields .field {
  margin: 0;
}

/* 改价弹窗的条件字段（数量/止损方式/周期）按类型显隐：hidden 属性必须生效，
 * 不能被 grid 布局覆盖（INIT 改 TP 时曾冒出止损方式+周期）。 */
.price-edit-fields .field[hidden] {
  display: none;
}

.price-edit-fields small {
  color: var(--clean-muted);
  font-size: 11px;
  line-height: 1.55;
}

@media (max-width: 520px) {
  .confirm-modal-body {
    grid-template-columns: 33px minmax(0, 1fr);
    padding: 12px;
  }

  .confirm-modal-icon {
    width: 33px;
    height: 33px;
    font-size: 16px;
  }

  .price-edit-panel {
    padding: 14px;
  }

  .price-edit-fields {
    padding: 12px;
  }
}

.demo-order-action.demo-history-delete-action {
  border-color: #68474f;
  color: var(--clean-danger);
  background: #302428;
}

.demo-order-action.demo-history-delete-action:hover,
.demo-order-action.demo-history-delete-action:focus-visible {
  border-color: #846069;
  color: #e1adb4;
  background: #3d2c31;
}

.demo-order-action.demo-history-delete-action:disabled {
  cursor: wait;
  opacity: .6;
}

.demo-order-head .demo-order-action.demo-history-delete-action {
  min-height: 30px;
  padding: 5px 11px;
  font-size: 12px;
}

@media (max-width: 720px) {
  .demo-order-head .demo-order-action.demo-history-delete-action {
    min-height: 27px;
    padding: 4px 9px;
    font-size: 10px;
  }

}

/* 历史页交易员盈亏总览：汇总指标与参考图一致使用 U / R 双行展示。 */
.demo-history-summary-card {
  display: grid;
  gap: 13px;
  margin-bottom: 12px;
  background:
    linear-gradient(90deg, rgb(105 150 196 / 5%) 1px, transparent 1px),
    linear-gradient(0deg, rgb(105 150 196 / 5%) 1px, transparent 1px),
    var(--clean-surface);
  background-size: 48px 48px;
}

.demo-history-kpi-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}

.demo-history-kpi {
  display: grid;
  min-width: 0;
  min-height: 78px;
  align-content: center;
  gap: 4px;
  padding: 10px 11px;
  border: 1px solid var(--clean-border);
  border-radius: 10px;
  background: rgb(7 18 34 / 72%);
}

.demo-history-kpi > span,
.demo-history-kpi > small {
  color: var(--clean-muted);
  font-size: 10px;
}

.demo-history-kpi > strong {
  min-width: 0;
  overflow: hidden;
  color: var(--clean-text);
  font-size: 17px;
  font-variant-numeric: tabular-nums;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.demo-history-kpi > small {
  color: #b7c9e4;
  font-size: 10px;
  font-variant-numeric: tabular-nums;
}

.demo-history-trader-list {
  display: grid;
  gap: 6px;
}

.demo-trader-pnl-card {
  min-width: 0;
  padding: 8px 10px;
  border: 1px solid var(--clean-border-strong);
  border-radius: 10px;
  background: rgb(5 17 34 / 76%);
  box-shadow: 0 6px 14px rgb(0 0 0 / 15%);
}

.demo-trader-pnl-card.positive {
  box-shadow: inset 2px 0 0 #41c6a2, 0 6px 14px rgb(0 0 0 / 15%);
}

.demo-trader-pnl-card.negative {
  box-shadow: inset 2px 0 0 #e86e82, 0 6px 14px rgb(0 0 0 / 15%);
}

.demo-trader-pnl-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.demo-trader-pnl-identity {
  display: flex;
  align-items: baseline;
  flex: 1 1 auto;
  min-width: 0;
  gap: 6px;
}

.demo-trader-pnl-identity strong {
  flex: 0 1 auto;
  min-width: 0;
  overflow: hidden;
  color: var(--clean-text);
  font-size: 13px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.demo-trader-pnl-identity small,
.demo-trader-pnl-identity span {
  min-width: 0;
  overflow: hidden;
  color: var(--clean-muted);
  font-size: 9px;
  font-variant-numeric: tabular-nums;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.demo-trader-pnl-identity span {
  color: var(--clean-text);
  font-weight: 650;
}

.demo-trader-pnl-net {
  display: flex;
  align-items: baseline;
  flex: 0 0 auto;
  gap: 4px;
}

.demo-trader-pnl-net strong {
  font-size: 12px;
  font-variant-numeric: tabular-nums;
}

.demo-trader-pnl-card.positive .demo-trader-pnl-net strong {
  color: var(--clean-success);
}

.demo-trader-pnl-card.negative .demo-trader-pnl-net strong {
  color: var(--clean-danger);
}

.demo-trader-pnl-net small {
  color: var(--clean-text);
  font-size: 9px;
  font-variant-numeric: tabular-nums;
}

.demo-trader-pnl-bar {
  position: relative;
  height: 14px;
  margin: 6px 0 5px;
  overflow: hidden;
  border-radius: 999px;
  background: #0d1c30;
  box-shadow: inset 0 0 0 1px rgb(76 109 150 / 12%);
}

.demo-trader-pnl-fill {
  position: absolute;
  top: 2px;
  bottom: 2px;
  z-index: 1;
  width: var(--trader-pnl-width, 0%);
  border-radius: 999px;
}

.demo-trader-pnl-fill.positive {
  right: 50%;
  background: linear-gradient(90deg, #238d78, #53d6af);
}

.demo-trader-pnl-fill.fee {
  left: 50%;
  z-index: 3;
  transform: translateX(-50%);
  background: linear-gradient(90deg, #c18a3d, #f1c56e, #c18a3d);
  box-shadow: 0 0 8px rgb(241 197 110 / 34%);
}

.demo-trader-pnl-fill.negative {
  left: 50%;
  background: linear-gradient(90deg, #e86e82, #973e58);
}

.demo-trader-pnl-details {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  align-items: stretch;
  gap: 4px 8px;
  color: var(--clean-muted);
  font-size: 9px;
  font-variant-numeric: tabular-nums;
}

.demo-trader-pnl-detail {
  display: flex;
  align-items: baseline;
  min-width: 0;
  gap: 3px;
  white-space: nowrap;
}

.demo-trader-pnl-detail.positive {
  justify-content: flex-start;
  justify-items: start;
  text-align: left;
}

.demo-trader-pnl-detail.fee {
  justify-content: center;
  justify-items: center;
  text-align: center;
}

.demo-trader-pnl-detail.negative {
  justify-content: flex-end;
  justify-items: end;
  text-align: right;
}

.demo-trader-pnl-detail > span,
.demo-trader-pnl-detail > strong,
.demo-trader-pnl-detail > small {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.demo-trader-pnl-detail > span {
  color: var(--clean-muted);
  font-size: 8px;
}

.demo-trader-pnl-detail > strong {
  font-size: 12px;
  line-height: 1.15;
}

.demo-trader-pnl-detail > small {
  color: var(--clean-muted);
  font-size: 8px;
  line-height: 1.15;
}

.demo-trader-pnl-detail.positive > strong {
  color: var(--clean-success);
}

.demo-trader-pnl-detail.fee > strong {
  color: var(--clean-warning);
}

.demo-trader-pnl-detail.negative > strong {
  color: var(--clean-danger);
}

.demo-history-summary-empty {
  display: none;
  padding: 20px 12px 8px;
  color: var(--clean-muted);
  text-align: center;
}

.demo-history-summary-empty.is-visible {
  display: block;
}

.demo-history-summary-empty .placeholder-icon {
  width: 34px;
  height: 34px;
  margin: 0 auto 8px;
  font-size: 17px;
}

.demo-history-summary-empty strong,
.demo-history-summary-empty small {
  display: block;
}

.demo-history-summary-empty strong {
  color: var(--clean-text);
  font-size: 12px;
}

.demo-history-summary-empty small {
  margin-top: 4px;
  font-size: 10px;
}

/* 日志卡片与历史卡片一样，在执行日志前展示所有后续订单更新。 */
.demo-log-order-card .demo-order-summary {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.demo-log-order-card .demo-log-updates-panel {
  grid-column: 1 / -1;
}

.demo-log-order-card .demo-log-pnl-block {
  grid-column: 1 / -1;
}

.demo-log-updates-panel .demo-order-update {
  gap: 3px;
}

.demo-log-updates-panel .demo-order-update small {
  overflow: visible;
  line-height: 1.35;
  white-space: normal;
}

.demo-log-updates-panel .demo-update-actions {
  margin-top: 3px;
}

.manual-review-panel {
  margin-top: 14px;
}

.manual-review-count {
  display: inline-grid;
  min-width: 22px;
  height: 22px;
  padding: 0 6px;
  place-items: center;
  border: 1px solid #62563d;
  border-radius: 999px;
  color: var(--clean-warning);
  background: #29271f;
  font-size: 11px;
  font-variant-numeric: tabular-nums;
}

.manual-review-list {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 10px;
}

.manual-review-item.demo-order-card {
  display: block;
  min-width: 0;
}

.manual-review-item {
  display: grid;
  gap: 8px;
  min-width: 0;
}

.manual-review-item-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
}

.manual-review-item-head > div {
  display: grid;
  min-width: 0;
  gap: 2px;
}

.manual-review-item-head strong {
  color: var(--clean-text);
  font-size: 12px;
}

.manual-review-item-head small,
.manual-review-item-head time {
  color: var(--clean-muted);
  font-size: 10px;
  font-variant-numeric: tabular-nums;
}

.manual-review-item-head time {
  flex: 0 0 auto;
  white-space: nowrap;
}

.manual-review-facts {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 8px;
  margin-top: 10px;
}

.manual-review-fact {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 3px;
  min-width: 0;
  padding: 8px 10px;
  border: 1px solid var(--clean-border);
  border-radius: 10px;
  background: var(--clean-surface-soft);
}

.manual-review-fact > span {
  color: var(--clean-muted);
  font-size: 10px;
}

.manual-review-fact > strong,
.manual-review-fact > small {
  min-width: 0;
  color: var(--clean-text);
  font-size: 12px;
  line-height: 1.45;
  overflow-wrap: anywhere;
}

.manual-review-fact > small {
  color: var(--clean-warning);
}

.manual-review-fact select {
  width: 100%;
  min-height: 34px;
  padding: 6px 8px;
  font-size: 12px;
}

.demo-order-head .demo-order-action.manual-review-action:disabled {
  opacity: .45;
  cursor: not-allowed;
}

.manual-review-empty{
  color: var(--clean-muted);
  font-size: 11px;
  line-height: 1.5;
}

.manual-review-empty {
  display: none;
  padding: 18px 8px 5px;
  text-align: center;
}

.manual-review-empty.is-visible {
  display: block;
}

.manual-review-empty strong,
.manual-review-empty small {
  display: block;
}

.manual-review-empty strong {
  color: var(--clean-text);
  font-size: 12px;
}

.manual-review-empty small {
  margin-top: 4px;
}

@media (max-width: 720px) {
  .demo-history-kpi-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .demo-log-order-card .demo-order-summary {
    grid-template-columns: 1fr;
  }

  .demo-log-order-card .demo-log-updates-panel {
    grid-column: auto;
  }

  }

@media (max-width: 460px) {
  .demo-history-kpi {
    min-height: 70px;
    padding: 8px;
  }

  .demo-history-kpi > strong {
    font-size: 14px;
  }

  .demo-trader-pnl-card {
    padding: 7px 8px;
  }

  .demo-trader-pnl-head {
    gap: 5px;
  }

  .demo-trader-pnl-identity {
    gap: 4px;
  }

  .demo-trader-pnl-identity strong {
    font-size: 12px;
  }

  .demo-trader-pnl-identity small {
    font-size: 8px;
  }

  .demo-trader-pnl-net {
    gap: 3px;
  }

  .demo-trader-pnl-net strong {
    font-size: 10px;
  }

  .demo-trader-pnl-net small {
    font-size: 8px;
  }

  .manual-review-panel {
    padding: 12px;
  }

  .manual-review-item-head {
    display: grid;
    gap: 4px;
  }

  .manual-review-item-head time {
    white-space: normal;
  }

  .demo-trader-pnl-details {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 3px 5px;
  }

  .demo-trader-pnl-detail {
    gap: 2px;
  }

  .demo-trader-pnl-detail > span {
    display: none;
  }

  .demo-trader-pnl-detail > strong {
    font-size: 10px;
  }

  .demo-trader-pnl-detail > small {
    font-size: 8px;
  }
}

/*
 * 2026-08 · Information density pass
 *
 * 目标：
 * - 保留当前蓝灰暗色层级，不改变业务信息和交互；
 * - 减少重复留白，让手机首屏能看到更多有效字段；
 * - 统一配置、订单、历史和日志的卡片节奏；
 * - 仍以 390px 宽度为优先，避免通过缩小字体换取密度。
 */
main {
  padding-top: 20px;
  padding-bottom: 46px;
}

.grid {
  gap: 12px;
}

.service-row {
  gap: 10px;
  margin-bottom: 12px;
}

.card {
  padding: 13px;
}

.card-head {
  gap: 10px;
  margin-bottom: 10px;
}

.provider-grid {
  gap: 8px;
}

.provider-card,
.channel-card {
  padding: 9px;
}

.provider-card-head,
.channel-card-head {
  margin-bottom: 7px;
}

.provider-model {
  gap: 5px;
  margin-bottom: 6px;
}

.provider-model select {
  min-height: 33px;
  padding-block: 5px;
}

/* 卡片内已有按钮区分隔线，这条横线只增加空白，不再显示。 */
.provider-divider {
  display: none;
}

.provider-model-stats {
  gap: 4px;
}

.provider-card-foot {
  gap: 5px;
  margin-top: 7px;
}

.provider-card-foot .btn {
  min-height: 26px;
  padding-block: 4px;
}

.channel-card-meta {
  margin-bottom: 7px;
}

.channel-card-foot {
  gap: 5px;
  margin-top: 7px;
}

.demo-page-heading {
  margin: 2px 0 12px;
}

.demo-page-heading h1 {
  font-size: clamp(22px, 3.5vw, 32px);
}

.demo-refresh-button {
  min-height: 38px;
  padding-inline: 14px;
}

.demo-overview-card {
  margin-top: 8px;
}

.demo-overview-body {
  gap: 12px;
}

.demo-overview-controls {
  gap: 8px;
  margin-bottom: 10px;
}

.demo-overview-tabs {
  gap: 5px;
  margin-bottom: 8px;
  padding: 3px;
}

.demo-overview-tab {
  min-height: 31px;
  font-size: 11px;
}

.demo-trader-filter {
  min-height: 38px;
  padding: 4px 7px 4px 10px;
}

.demo-trader-filter select {
  height: 29px;
  font-size: 11px;
}

.demo-trader-filter input[type="date"] {
  height: 29px;
  font-size: 11px;
}

.demo-card-list {
  gap: 8px;
}

.demo-order-card {
  padding: 11px;
  border-radius: 12px;
}

.demo-order-meta {
  gap: 4px 10px;
  margin-top: 8px;
}

.demo-order-levels {
  gap: 5px;
  margin-top: 9px;
}

.demo-order-summary {
  gap: 8px;
  margin-top: 9px;
  padding-top: 9px;
}

.demo-order-updates,
.demo-order-pnl-block {
  padding: 9px 10px;
}

.demo-order-update-list {
  gap: 5px;
}

.demo-order-update {
  padding: 5px 7px;
}

.demo-order-footer {
  margin-top: 8px;
}

.demo-history-summary-card {
  gap: 10px;
  margin-bottom: 9px;
}

.demo-history-kpi-grid {
  gap: 7px;
}

.demo-history-kpi {
  min-height: 70px;
  padding: 8px 9px;
}

.demo-history-trader-list {
  gap: 5px;
}

.demo-log-outcome-tabs {
  margin-bottom: 9px;
}

.manual-review-panel {
  margin-top: 10px;
}

.trace-view-card {
  margin-top: 10px;
}

.trace-content,
.trace-timeline {
  gap: 10px;
}

@media (max-width: 720px) {
  main {
    padding: 10px 9px calc(28px + env(safe-area-inset-bottom));
  }

  .grid {
    gap: 8px;
  }

  .service-row {
    gap: 6px;
    margin-bottom: 9px;
  }

  .service-card {
    min-height: 104px;
    padding: 7px 3px 6px;
  }

  .service-icon {
    width: 30px;
    height: 30px;
    margin-bottom: 4px;
    border-radius: 8px;
  }

  .service-icon svg,
  .service-icon.discord-logo svg {
    width: 20px;
    height: 20px;
  }

  .service-icon.bybit-logo {
    width: 50px;
    height: 27px;
  }

  .service-icon.bybit-logo svg {
    width: 42px;
  }

  .service-card small {
    display: none;
    min-height: 0;
  }

  .service-actions {
    gap: 3px;
  }

  .service-connect-pill {
    width: 43px;
    min-width: 43px;
    height: 22px;
    min-height: 22px;
  }

  .service-connect-pill::after {
    top: 3px;
    left: 3px;
    width: 16px;
    height: 16px;
  }

  .service-connect-pill.is-connected::after {
    transform: translateX(21px);
  }

  .service-card .btn {
    min-height: 22px;
    padding: 3px 5px;
    border-radius: 6px;
    font-size: 8px;
  }

  .card {
    padding: 9px;
    border-radius: 10px;
  }

  .card-head {
    gap: 6px;
    margin-bottom: 7px;
  }

  .heading {
    gap: 5px;
    font-size: 13px;
  }

  .heading-icon {
    width: 20px;
    height: 20px;
    border-radius: 6px;
    font-size: 11px;
  }

  .provider-grid {
    gap: 6px;
  }

  .provider-card,
  .channel-card {
    padding: 7px;
    border-radius: 8px;
  }

  .provider-card-head,
  .channel-card-head {
    gap: 5px;
    margin-bottom: 5px;
  }

  .provider-number {
    width: 23px;
    height: 23px;
    border-radius: 7px;
    font-size: 10px;
  }

  .provider-name,
  .channel-name {
    font-size: 10px;
  }

  .provider-model {
    gap: 4px;
    margin-bottom: 5px;
  }

  .provider-model select {
    min-height: 30px;
    padding: 4px 7px;
    border-radius: 7px;
    font-size: 9px;
  }

  .provider-divider {
    margin: 5px 0;
  }

  .provider-model-stats {
    gap: 3px;
    font-size: 9px;
  }

  .model-stat-row {
    grid-template-columns: auto auto;
    justify-content: space-between;
    min-height: 15px;
    padding: 0 1px;
    font-size: 9px;
  }

  .provider-card-foot {
    gap: 4px;
    margin-top: 5px;
  }

  .provider-card-foot .btn {
    min-height: 24px;
    padding: 3px 4px;
    border-radius: 6px;
    font-size: 9px;
  }

  .channel-grid {
    gap: 5px;
  }

  .channel-card {
    padding: 7px 4px;
  }

  .channel-card-head {
    gap: 4px;
    margin-bottom: 4px;
  }

  .channel-card-meta {
    gap: 3px;
    margin-bottom: 5px;
  }

  .channel-meta-item {
    min-height: 18px;
    padding: 2px 4px;
    font-size: 8px;
  }

  .channel-card-foot {
    gap: 4px;
    margin-top: 5px;
  }

  .channel-card-foot .btn {
    min-height: 24px;
    padding: 3px 4px;
    border-radius: 6px;
    font-size: 9px;
  }

  .demo-page-heading {
    gap: 8px;
    margin: 0 0 8px;
  }

  .demo-page-heading h1 {
    font-size: 21px;
  }

  .demo-page-heading .muted {
    margin-top: 3px;
    font-size: 10px;
  }

  .demo-refresh-button {
    min-height: 34px;
    padding-inline: 9px;
    border-radius: 9px;
    font-size: 10px;
  }

  .demo-overview-card {
    margin-top: 6px;
  }

  .demo-overview-body {
    gap: 8px;
  }

  .demo-overview-controls {
    gap: 6px;
    margin-bottom: 7px;
  }

  .demo-overview-tabs {
    gap: 4px;
    margin-bottom: 6px;
    padding: 3px;
    border-radius: 8px;
  }

  .demo-overview-tab {
    min-height: 29px;
    border-radius: 6px;
    font-size: 10px;
  }

  .demo-overview-tab span {
    min-width: 18px;
    margin-left: 3px;
    padding: 1px 4px;
    font-size: 9px;
  }

  .demo-trader-filter {
    min-height: 34px;
    padding: 3px 6px 3px 8px;
    border-radius: 8px;
    font-size: 10px;
  }

  .demo-trader-filter select {
    height: 27px;
    padding-left: 7px;
    border-radius: 6px;
    font-size: 10px;
  }

  .demo-trader-filter input[type="date"] {
    height: 27px;
    padding: 0 4px;
    border-radius: 6px;
    font-size: 10px;
  }

  .demo-card-list {
    gap: 6px;
  }

  .demo-order-card {
    padding: 8px;
    border-radius: 10px;
  }

  .demo-order-head {
    gap: 5px;
  }

  .demo-order-head .demo-symbol {
    font-size: 15px;
  }

  .demo-order-actions {
    max-width: 64%;
    gap: 2px;
  }

  .demo-order-head .demo-side-pill,
  .demo-order-head .demo-type-pill,
  .demo-order-head .demo-order-action.demo-trace-action,
  .demo-order-head .demo-order-action.demo-share-action {
    min-height: 22px;
    padding: 3px 5px;
    border-radius: 999px;
    font-size: 9px;
  }

  .demo-order-meta {
    gap: 2px 6px;
    margin-top: 4px;
    font-size: 8px;
  }

  .demo-update-trace-times {
    gap: 2px 6px;
    font-size: 8px;
  }

  .demo-order-levels {
    gap: 3px;
    margin-top: 6px;
  }

  .demo-level-card {
    min-height: 23px;
    border-radius: 7px;
  }

  .demo-level-card .demo-level-label,
  .demo-level-card strong,
  .demo-level-sub-label,
  .demo-level-sub-value {
    padding-top: 3px;
    padding-bottom: 3px;
  }

  .demo-order-summary {
    gap: 5px;
    margin-top: 6px;
    padding-top: 6px;
  }

  .demo-order-updates,
  .demo-order-pnl-block {
    padding: 6px 7px;
    border-radius: 7px;
  }

  .demo-order-updates {
    gap: 3px;
  }

  .demo-order-update-list {
    gap: 3px;
  }

  .demo-order-update {
    padding: 3px 5px;
    border-radius: 5px;
  }

  .demo-update-actions {
    gap: 3px;
    margin-top: 1px;
  }

  .demo-order-footer {
    margin-top: 5px;
    font-size: 8px;
  }

  .demo-history-summary-card {
    gap: 8px;
    margin-bottom: 8px;
  }

  .demo-history-kpi-grid {
    gap: 5px;
  }

  .demo-history-kpi {
    min-height: 60px;
    gap: 2px;
    padding: 7px;
    border-radius: 8px;
  }

  .demo-history-kpi > span,
  .demo-history-kpi > small {
    font-size: 9px;
  }

  .demo-history-kpi > strong {
    font-size: 13px;
  }

  .demo-list-toolbar {
    gap: 5px;
  }

  .demo-list-toolbar > strong {
    gap: 5px;
    font-size: 12px;
  }

  .demo-list-toolbar > strong span {
    min-width: 20px;
    padding-inline: 5px;
    font-size: 9px;
  }

  .demo-log-outcome-tabs {
    margin-bottom: 7px;
  }

  .manual-review-panel {
    margin-top: 8px;
  }

  .manual-review-panel .card-head {
    margin-bottom: 6px;
  }

  .manual-review-list {
    grid-template-columns: 1fr;
    gap: 8px;
  }

  .trace-view-card {
    margin-top: 8px;
  }

  .trace-content,
  .trace-timeline {
    gap: 8px;
  }

  .trace-meta,
  .trace-event,
  .trace-message {
    padding: 8px 9px;
  }
}

/*
 * 2026-08 · Editorial terminal polish
 *
 * 最终视觉层：用更明确的层级、克制的强调色和一致的交互反馈，
 * 让配置、识别和订单信息更像一个安静的工作台，而不是堆叠的面板。
 * 仅覆盖展示层，不改变任何数据或交互语义。
 */
:root {
  --clean-radius-sm: 9px;
  --clean-radius-md: 13px;
  --clean-radius-lg: 17px;
  --clean-focus: 0 0 0 3px rgb(105 164 216 / 22%);
  --clean-accent-soft: rgb(105 164 216 / 13%);
  --clean-success-soft: rgb(131 203 165 / 13%);
  --clean-danger-soft: rgb(222 139 151 / 13%);
}

html {
  background: var(--clean-bg);
  scroll-behavior: smooth;
}

body {
  background:
    radial-gradient(circle at 92% -8%, rgb(70 121 167 / 10%), transparent 34rem),
    var(--clean-bg);
  letter-spacing: .005em;
}

.app-shell {
  background: transparent;
}

.sidebar {
  width: 250px;
  border-right: 1px solid rgb(75 97 118 / 72%);
  background: rgb(20 31 43 / 90%);
  backdrop-filter: blur(18px);
}

.sidebar::after {
  position: absolute;
  inset: 0 0 auto;
  height: 88px;
  background: linear-gradient(180deg, rgb(105 164 216 / 7%), transparent);
  pointer-events: none;
  content: "";
}

.nav {
  gap: 6px;
}

.nav button {
  position: relative;
  min-height: 44px;
  padding-inline: 15px;
  border: 1px solid transparent;
  border-radius: var(--clean-radius-sm);
  color: #9eafbf;
  transition: color .18s ease, background .18s ease, border-color .18s ease, transform .18s ease;
}

.nav button:hover {
  border-color: rgb(105 164 216 / 18%);
  background: rgb(105 164 216 / 9%);
  transform: translateX(2px);
}

.nav button.active {
  border-color: rgb(105 164 216 / 28%);
  background: linear-gradient(90deg, rgb(105 164 216 / 18%), rgb(105 164 216 / 7%));
  box-shadow: inset 3px 0 0 var(--clean-accent), 0 8px 20px rgb(2 9 17 / 12%);
}

.nav button.active::after {
  position: absolute;
  right: 14px;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--clean-accent-hover);
  box-shadow: 0 0 0 4px rgb(105 164 216 / 10%);
  content: "";
}

main {
  max-width: 1380px;
  padding-top: clamp(24px, 4vw, 48px);
}

.page > .card:first-child{
  margin-top: 0;
}

.card, .service-card, .provider-card, .channel-card{
  border-radius: var(--clean-radius-md);
  box-shadow: 0 12px 30px rgb(2 9 17 / 18%);
  transition: border-color .2s ease, background .2s ease, box-shadow .2s ease, transform .2s ease;
}

.card:hover, .service-card:hover, .provider-card:hover, .channel-card:hover{
  transform: translateY(-1px);
}

.card-head {
  margin-bottom: 16px;
}

.heading,
.page h1,
.page h2 {
  letter-spacing: -.015em;
}

.heading-icon,
.demo-page-heading h1 span {
  display: inline-grid;
  width: 28px;
  height: 28px;
  place-items: center;
  border: 1px solid rgb(105 164 216 / 24%);
  border-radius: 9px;
  color: var(--clean-accent-hover);
  background: var(--clean-accent-soft);
  font-size: 14px;
}

.muted,
.small {
  line-height: 1.55;
}

.btn, .demo-refresh-button, .channel-add-button{
  min-height: 38px;
  border-radius: var(--clean-radius-sm);
  font-weight: 650;
  letter-spacing: .01em;
  transition: color .18s ease, background .18s ease, border-color .18s ease, box-shadow .18s ease, transform .18s ease;
}

.btn:hover,
.btn:focus-visible,
.demo-refresh-button:hover,
.demo-refresh-button:focus-visible,
.channel-add-button:hover {
  box-shadow: 0 6px 16px rgb(2 9 17 / 18%);
  transform: translateY(-1px);
}

.btn:focus-visible,
button:focus-visible,
select:focus-visible,
input:focus-visible,
a:focus-visible {
  outline: none;
  box-shadow: var(--clean-focus);
}

.btn.primary {
  box-shadow: 0 6px 16px rgb(49 99 139 / 20%);
}

.btn.danger,
.demo-close-button {
  background: var(--clean-danger-soft);
}

input,
select,
textarea {
  border-radius: var(--clean-radius-sm);
}

.service-row{
  gap: 12px;
}

.service-card {
  position: relative;
  overflow: hidden;
  padding: 18px;
}

.service-card::before {
  position: absolute;
  inset: 0 auto 0 0;
  width: 3px;
  background: var(--clean-accent);
  opacity: .7;
  content: "";
}

.service-card.live::before {
  background: var(--clean-danger);
}

.service-card .card-head,
.provider-card-head,
.channel-card-head {
  align-items: flex-start;
}

.provider-panel, .demo-overview-card{
  overflow: hidden;
}

.provider-head {
  padding-bottom: 13px;
  border-bottom: 1px solid rgb(75 97 118 / 45%);
}

.provider-count {
  min-height: 25px;
  padding: 4px 9px;
  border: 1px solid rgb(131 203 165 / 28%);
  border-radius: 999px;
  color: #a7dfbe;
  background: var(--clean-success-soft);
  font-size: 10px;
  font-weight: 700;
}

.provider-card,
.channel-card {
  position: relative;
  background: linear-gradient(145deg, rgb(30 45 61 / 96%), rgb(23 35 49 / 98%));
}

.provider-card::before,
.channel-card::before {
  width: 3px;
  border-radius: 0 3px 3px 0;
  opacity: .85;
}

.provider-name,
.channel-name {
  color: var(--clean-text);
  font-weight: 700;
}

/* 中转站卡片：按钮区上方的横线保留，但不再叠加 14+11 的空白。 */
.provider-card-foot {
  margin-top: 8px;
  padding-top: 6px;
  border-top: 1px solid rgb(75 97 118 / 36%);
}

.channel-card-foot {
  margin-top: 14px;
  padding-top: 11px;
  border-top: 1px solid rgb(75 97 118 / 36%);
}

.demo-page-heading {
  margin-bottom: 20px;
}

.demo-page-heading h1 {
  gap: 10px;
  font-weight: 760;
}

.demo-refresh-button {
  padding-inline: 14px;
}

.demo-overview-card {
  border-radius: var(--clean-radius-lg);
}

.demo-overview-controls {
  margin-bottom: 16px;
}

.demo-overview-tabs,
.demo-trader-filter {
  border-radius: var(--clean-radius-md);
}

.demo-overview-tab {
  min-height: 38px;
  border-radius: 10px;
}

.demo-order-card {
  border-radius: var(--clean-radius-md);
  box-shadow: 0 14px 34px rgb(2 9 17 / 22%);
}

.demo-order-card:hover {
  border-color: #5c7790;
  box-shadow: 0 18px 38px rgb(2 9 17 / 28%);
}

.demo-level-card, .demo-order-pnl-block, .trace-meta, .trace-message, .trace-event{
  border-radius: var(--clean-radius-sm);
}

.modal {
  background: rgb(3 9 16 / 78%);
  backdrop-filter: blur(6px);
}

.modal-panel {
  border-radius: var(--clean-radius-lg);
  box-shadow: 0 30px 90px rgb(2 9 17 / 64%);
}

.toast {
  border-radius: 12px;
  box-shadow: 0 14px 34px rgb(2 9 17 / 30%);
}

@media (max-width: 980px) {
  .sidebar {
    width: 100%;
    border-right: 0;
    border-bottom: 1px solid rgb(75 97 118 / 72%);
  }

  .sidebar::after {
    height: 100%;
    background: linear-gradient(90deg, rgb(105 164 216 / 6%), transparent 60%);
  }

  .nav button:hover {
    transform: none;
  }

  .nav button.active::after {
    right: 50%;
    bottom: 6px;
    transform: translateX(50%);
  }
}

@media (max-width: 600px) {
  main {
    padding: 18px 12px 42px;
  }

  .card,
  .service-card {
    padding: 14px;
  }

  .heading {
    font-size: 17px;
  }

  .provider-head {
    padding-bottom: 10px;
  }

  .demo-page-heading {
    align-items: flex-start;
    margin-bottom: 14px;
  }

  .demo-page-heading h1 {
    font-size: 24px;
  }

  .demo-refresh-button {
    min-height: 38px;
    padding-inline: 11px;
    font-size: 11px;
  }

  .demo-overview-card {
    padding: 11px;
  }

  .demo-order-card {
    padding: 12px;
  }
}

@media (max-width: 380px) {
  main {
    padding-inline: 9px;
  }

  .card,
  .service-card {
    padding: 12px;
  }

  .nav button {
    padding-inline: 9px;
    font-size: 11px;
  }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    scroll-behavior: auto !important;
    transition-duration: .01ms !important;
    animation-duration: .01ms !important;
  }
}

/* 订单卡片中被省略的字段仍可点击查看完整内容。 */
.demo-expandable.is-truncated,
.demo-expandable[data-demo-expand-always="true"] {
  cursor: zoom-in;
  -webkit-tap-highlight-color: transparent;
  text-decoration-line: underline;
  text-decoration-style: dotted;
  text-decoration-color: rgb(151 187 220 / 42%);
  text-underline-offset: 2px;
}

.demo-expandable.is-truncated:hover,
.demo-expandable.is-truncated:focus-visible,
.demo-expandable[data-demo-expand-always="true"]:hover,
.demo-expandable[data-demo-expand-always="true"]:focus-visible {
  color: var(--clean-text);
  text-decoration-color: var(--clean-accent-hover);
}

.demo-expandable.is-truncated:focus-visible,
.demo-expandable[data-demo-expand-always="true"]:focus-visible {
  outline: 2px solid rgb(105 164 216 / 72%);
  outline-offset: 2px;
}

.detail-panel {
  width: min(640px, 100%);
}

.detail-modal-body {
  min-width: 0;
  padding: 12px 13px;
  border: 1px solid var(--clean-border);
  border-radius: var(--clean-radius-md);
  background: var(--clean-surface-soft);
}

#demo-detail-content {
  max-height: min(60vh, 520px);
  margin: 0;
  overflow: auto;
  color: var(--clean-text);
  font: inherit;
  font-size: 12px;
  line-height: 1.65;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

/* 即使其他层叠样式带有 entry/dca 类，未成交状态也不能显示为绿色。 */
.demo-level-card.pending-entry,
.demo-level-card.pending-entry.entry,
.demo-level-card.pending-entry.dca {
  border-color: #4d6485;
  background: #202e45;
}

.demo-level-card.pending-entry .demo-level-label {
  color: #b7c9e4;
  background: rgb(84 111 164 / 18%);
}

@media (max-width: 520px) {
  .detail-panel {
    padding: 14px;
  }

  .detail-modal-body {
    padding: 10px;
  }

  #demo-detail-content {
    font-size: 11px;
  }
}

/* 订单卡片底部使用四格主行，中转站单独占一整行。 */
.demo-pnl-main-row {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  align-items: stretch;
  width: 100%;
  min-width: 0;
  border-bottom: 1px solid var(--clean-border);
}

.demo-pnl-provider-row {
  display: flex;
  align-items: stretch;
  width: 100%;
  min-width: 0;
}

.demo-pnl-main-row > .demo-pnl-row,
.demo-pnl-main-row > .demo-pnl-close-cell,
.demo-pnl-main-row > .demo-history-delete-cell,
.demo-pnl-main-row > .demo-log-delete-cell {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  min-width: 0;
  min-height: 56px;
  gap: 3px;
  padding: 6px 8px;
  border-right: 1px solid var(--clean-border);
}

.demo-pnl-main-row > :last-child {
  border-right: 0;
}

.demo-pnl-main-row > .demo-pnl-row > span,
.demo-pnl-main-row > .demo-history-delete-cell > span,
.demo-pnl-main-row > .demo-log-delete-cell > span {
  color: var(--clean-muted);
  font-size: 10px;
  white-space: nowrap;
}

.demo-pnl-main-row > .demo-pnl-row > strong {
  display: grid;
  min-width: 0;
  gap: 2px;
  overflow: visible;
  color: var(--clean-success);
  font-size: 13px;
  line-height: 1.15;
  text-align: left;
}

.demo-pnl-main-row > .demo-pnl-row > strong.negative {
  color: var(--clean-danger);
}

.demo-pnl-main-row > .demo-pnl-row .demo-pnl-separator {
  display: none;
}

.demo-pnl-main-row > .demo-pnl-row .demo-pnl-usd,
.demo-pnl-main-row > .demo-pnl-row .demo-pnl-r {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.demo-pnl-main-row > .demo-pnl-row .demo-pnl-r {
  font-size: 10px;
}

.demo-pnl-provider-row > .demo-pnl-provider-cell {
  display: flex;
  flex: 1 1 100%;
  flex-direction: column;
  align-items: stretch;
  justify-content: center;
  min-width: 0;
  min-height: 0;
  gap: 3px;
  padding: 6px 8px;
  overflow: visible;
  border-right: 0;
}

.demo-pnl-provider-row > .demo-pnl-provider-cell > .demo-pnl-cell-label {
  font-size: 10px;
}

.demo-pnl-provider-row > .demo-pnl-provider-cell > small {
  color: var(--clean-muted);
  font-size: 9px;
}

.demo-pnl-provider-row .demo-pnl-provider-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-items: stretch;
  width: 100%;
  min-width: 0;
  gap: 4px;
  overflow: visible;
}

.demo-pnl-provider-row .demo-pnl-provider-attempt {
  display: flex;
  align-items: center;
  width: 100%;
  max-width: none;
  min-width: 0;
  gap: 4px;
  padding: 3px 4px;
  border: 1px solid var(--clean-border);
  border-radius: 4px;
  font-size: 9px;
  line-height: 1.15;
}

.demo-pnl-provider-row .demo-pnl-provider-attempt b {
  flex: 1 1 auto;
  min-width: 0;
  overflow: visible;
  color: var(--clean-text);
  text-align: left;
  font-weight: 700;
  white-space: normal;
  overflow-wrap: anywhere;
  word-break: break-word;
}

.demo-pnl-provider-row .demo-pnl-provider-attempt em {
  flex: 0 0 auto;
  min-width: 0;
  font-style: normal;
  white-space: nowrap;
}

.demo-pnl-provider-row .demo-pnl-provider-attempt small {
  flex: 0 0 auto;
  margin-left: auto;
  min-width: 0;
  overflow: hidden;
  color: var(--clean-muted);
  text-align: right;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.demo-pnl-provider-row .demo-pnl-provider-attempt.success em {
  color: var(--clean-success);
}

.demo-pnl-provider-row .demo-pnl-provider-attempt.resolved em {
  color: var(--clean-success);
}

.demo-pnl-provider-row .demo-pnl-provider-attempt.failed em {
  color: var(--clean-danger);
}

.demo-pnl-provider-row .demo-pnl-provider-attempt.skipped em {
  color: var(--clean-muted);
}

.demo-position-pnl-block .demo-pnl-main-row > .demo-pnl-close-cell,
.demo-history-pnl-block .demo-pnl-main-row > .demo-history-delete-cell,
.demo-log-pnl-block .demo-pnl-main-row > .demo-log-delete-cell {
  align-items: stretch;
}

.demo-log-pnl-block .demo-pnl-main-row > .demo-pnl-row > strong {
  display: block;
  font-size: 11px;
  line-height: 1.2;
  white-space: normal;
  overflow-wrap: anywhere;
  word-break: break-word;
}

.demo-log-pnl-block .demo-pnl-main-row > .demo-log-reason-cell {
  overflow: hidden;
}

@media (max-width: 720px) {
  .demo-pnl-main-row > .demo-pnl-row,
  .demo-pnl-main-row > .demo-pnl-close-cell,
  .demo-pnl-main-row > .demo-history-delete-cell,
  .demo-pnl-main-row > .demo-log-delete-cell {
    min-height: 52px;
    padding: 5px 6px;
  }

  .demo-pnl-provider-row > .demo-pnl-provider-cell {
    gap: 2px;
    padding: 5px 6px;
  }

  .demo-pnl-main-row > .demo-pnl-row > span,
  .demo-pnl-main-row > .demo-history-delete-cell > span,
  .demo-pnl-main-row > .demo-log-delete-cell > span,
  .demo-pnl-provider-row > .demo-pnl-provider-cell > .demo-pnl-cell-label {
    font-size: 8px;
  }

  .demo-pnl-main-row > .demo-pnl-row > strong {
    font-size: 11px;
  }

  .demo-pnl-main-row > .demo-pnl-row .demo-pnl-r,
  .demo-pnl-provider-row .demo-pnl-provider-attempt,
  .demo-pnl-provider-row > .demo-pnl-provider-cell > small {
    font-size: 8px;
  }

  .demo-pnl-provider-row .demo-pnl-provider-attempt {
    gap: 3px;
    padding: 3px 4px;
  }

  .demo-pnl-provider-row .demo-pnl-provider-attempt b {
    text-align: left;
  }

  .demo-pnl-provider-row .demo-pnl-provider-attempt small {
    text-align: right;
  }

  .demo-pnl-provider-row .demo-pnl-provider-attempt em {
    flex-basis: auto;
  }
}

/* 保留原有价格胶囊样式，在最右侧补充价格触发时间。 */
.demo-level-card {
  flex-wrap: nowrap;
  align-items: stretch;
  max-width: 100%;
  --demo-level-divider: 1px solid rgb(255 255 255 / 14%);
}

.demo-level-card .demo-level-label {
  box-sizing: border-box;
  flex: 0 0 52px;
  min-width: 0;
  padding-inline: 6px;
  border-right: 0;
}

.demo-level-card > strong {
  box-sizing: border-box;
  flex: 0 1 auto;
  width: max-content;
  min-width: 64px;
  max-width: 96px;
  padding-inline: 6px;
  border-left: var(--demo-level-divider);
}

.demo-level-card > small {
  flex: 1 1 auto;
  min-width: 68px;
  max-width: 100%;
  align-self: stretch;
  border-left: var(--demo-level-divider);
  overflow: hidden;
}

.demo-level-card > small > .demo-level-sub-label,
.demo-level-card > small > .demo-level-sub-value {
  box-sizing: border-box;
  flex: 0 1 auto;
  min-width: 0;
  padding-inline: 4px;
  border-right: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}

.demo-level-card > small > * + * {
  border-left: var(--demo-level-divider);
}

.demo-level-card > small > .demo-level-sub-label:nth-child(1) {
  flex: 0 1 40px;
  min-width: 30px;
  justify-content: center;
}

.demo-level-card > small > .demo-level-sub-value:nth-child(2) {
  flex: 0 1 52px;
  min-width: 36px;
  justify-content: center;
}

.demo-level-card > small > .demo-level-sub-label:nth-child(3) {
  flex: 0 1 48px;
  min-width: 34px;
  justify-content: center;
}

.demo-level-card > small > .demo-level-sub-value:nth-child(4) {
  flex: 1 1 72px;
  min-width: 0;
  max-width: 130px;
}

.demo-level-trigger-time {
  display: inline-flex;
  flex: 0 1 auto;
  width: max-content;
  min-width: 0;
  max-width: 108px;
  align-items: center;
  gap: 3px;
  padding: 4px 6px;
  border-top: 0;
  border-left: var(--demo-level-divider);
  color: var(--clean-muted);
  font-size: 9px;
  font-family: inherit;
  font-weight: 500;
  font-variant-numeric: tabular-nums;
  line-height: 1.15;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.demo-level-trigger-time > span {
  font-family: inherit;
  font-size: inherit;
  line-height: inherit;
}

.demo-level-trigger-value {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.demo-level-trigger-time.is-triggered {
  color: #b8e8d7;
}

@media (max-width: 460px) {
  .demo-level-card .demo-level-label {
    flex-basis: 40px;
  }

  .demo-level-card > strong {
    flex-basis: auto;
    width: max-content;
    min-width: 56px;
    max-width: 72px;
  }

  .demo-level-card > small > .demo-level-sub-label:nth-child(1) {
    flex-basis: 27px;
    min-width: 23px;
  }

  .demo-level-card > small > .demo-level-sub-value:nth-child(2) {
    flex-basis: 31px;
    min-width: 27px;
  }

  .demo-level-card > small > .demo-level-sub-label:nth-child(3) {
    flex-basis: 30px;
    min-width: 26px;
  }

  .demo-level-card > small > .demo-level-sub-value:nth-child(4) {
    flex: 1 1 46px;
    min-width: 0;
    max-width: 52px;
  }

  .demo-level-card > small {
    min-width: 52px;
  }

  .demo-level-card > small > .demo-level-sub-label,
  .demo-level-card > small > .demo-level-sub-value {
    padding-inline: 2px;
  }

  .demo-level-trigger-time {
    flex: 0 1 auto;
    width: max-content;
    min-width: 0;
    max-width: 100px;
    gap: 3px;
    padding: 3px 3px;
    font-size: 9px;
  }
}

/* 价格胶囊改用固定基础列 + 内容列，基础竖线保持对齐，长内容只压缩自己的列。 */
.demo-level-card[class*="demo-level-fields-"] {
  display: grid;
  grid-auto-flow: column;
  grid-template-rows: minmax(0, 1fr);
  align-items: stretch;
  gap: 0;
  flex: 0 0 auto;
  width: max-content;
  max-width: none;
  padding: 0;
  overflow: hidden;
}

.demo-level-card.demo-level-fields-2 {
  grid-template-columns: 52px 80px 40px 52px minmax(0, max-content);
}

.demo-level-card.demo-level-fields-3 {
  grid-template-columns:
    52px 80px 40px 52px
    minmax(0, max-content) minmax(0, max-content);
}

.demo-level-card.demo-level-fields-4 {
  grid-template-columns:
    52px 80px 40px 52px 48px
    minmax(0, max-content) minmax(0, max-content);
}

.demo-level-card.demo-level-fields-5 {
  grid-template-columns:
    52px 80px 40px 52px 48px
    minmax(0, max-content) minmax(0, max-content)
    minmax(0, max-content);
}

.demo-level-card.demo-level-fields-6 {
  grid-template-columns:
    52px 80px 40px 52px 48px
    minmax(0, max-content) 48px minmax(0, max-content)
    minmax(0, max-content);
}

.demo-level-card.demo-level-fields-7 {
  grid-template-columns:
    52px 80px 40px 52px 48px
    minmax(0, max-content) 48px minmax(0, max-content)
    minmax(0, max-content) minmax(0, max-content);
}

.demo-level-card[class*="demo-level-fields-"] > .demo-level-label,
.demo-level-card[class*="demo-level-fields-"] > strong,
.demo-level-card[class*="demo-level-fields-"] > small > *,
.demo-level-card[class*="demo-level-fields-"] > .demo-level-trigger-time {
  box-sizing: border-box;
  width: auto;
  min-width: 0;
  max-width: none;
  flex: none;
  align-self: stretch;
}

.demo-level-card[class*="demo-level-fields-"] > .demo-level-label,
.demo-level-card[class*="demo-level-fields-"] > strong {
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.demo-level-card[class*="demo-level-fields-"] > .demo-level-label {
  padding: 4px 6px;
  border-right: 0;
}

.demo-level-card[class*="demo-level-fields-"] > strong {
  padding: 4px 6px;
  border-left: var(--demo-level-divider);
}

.demo-level-card[class*="demo-level-fields-"] > small {
  display: contents;
}

.demo-level-card[class*="demo-level-fields-"] > small > * {
  display: inline-flex;
  align-items: center;
  padding: 4px 4px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.demo-level-card[class*="demo-level-fields-"]
  > small
  > .demo-level-sub-value:nth-child(4) {
  max-width: none;
}

.demo-level-card[class*="demo-level-fields-"] > small > .demo-level-sub-label:first-child,
.demo-level-card[class*="demo-level-fields-"] > small > * + *,
.demo-level-card[class*="demo-level-fields-"] > .demo-level-trigger-time {
  border-left: var(--demo-level-divider);
}

.demo-level-card[class*="demo-level-fields-"] > .demo-level-trigger-time {
  display: flex;
  align-items: center;
  gap: 3px;
  padding: 4px 6px;
  border-top: 0;
  color: var(--clean-muted);
  font-family: inherit;
  font-size: 9px;
  font-weight: 500;
  line-height: 1.15;
  font-variant-numeric: tabular-nums;
  overflow: hidden;
  white-space: nowrap;
}

.demo-level-card[class*="demo-level-fields-"] > .demo-level-trigger-time > span {
  flex: 0 0 auto;
  min-width: 0;
  font: inherit;
  line-height: inherit;
}

.demo-level-card[class*="demo-level-fields-"] > .demo-level-trigger-time
  > .demo-level-trigger-value {
  flex: 1 1 auto;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

@media (max-width: 460px) {
  .demo-level-card.demo-level-fields-2 {
    grid-template-columns: 40px 64px 28px 40px minmax(0, max-content);
  }

  .demo-level-card.demo-level-fields-3 {
    grid-template-columns:
      40px 64px 28px 40px
      minmax(0, max-content) minmax(0, max-content);
  }

  .demo-level-card.demo-level-fields-4 {
    grid-template-columns:
      40px 64px 28px 40px 32px
      minmax(0, max-content) minmax(0, max-content);
  }

  .demo-level-card.demo-level-fields-5 {
    grid-template-columns:
      40px 64px 28px 40px 32px
      minmax(0, max-content) minmax(0, max-content)
      minmax(0, max-content);
  }

  .demo-level-card.demo-level-fields-6 {
    grid-template-columns:
      40px 64px 28px 40px 32px
      minmax(0, max-content) 32px minmax(0, max-content)
      minmax(0, max-content);
  }

  .demo-level-card.demo-level-fields-7 {
    grid-template-columns:
      40px 64px 28px 40px 32px
      minmax(0, max-content) 32px minmax(0, max-content)
      minmax(0, max-content) minmax(0, max-content);
  }

  .demo-level-card[class*="demo-level-fields-"] > .demo-level-label,
  .demo-level-card[class*="demo-level-fields-"] > strong,
  .demo-level-card[class*="demo-level-fields-"] > small > * {
    padding-top: 3px;
    padding-bottom: 3px;
  }

  .demo-level-card[class*="demo-level-fields-"] > .demo-level-trigger-time {
    padding: 3px 3px;
    font-size: 9px;
  }
}

/* 超长字段不再被页面裁掉；只有价格区域自身横向滚动，卡片和页面不会被撑宽。 */
.demo-order-levels {
  min-width: 0;
  max-width: 100%;
  overflow-x: auto;
  overflow-y: hidden;
  scrollbar-width: thin;
  scrollbar-color: rgb(133 181 223 / 42%) transparent;
}

.demo-order-levels::-webkit-scrollbar {
  height: 4px;
}

.demo-order-levels::-webkit-scrollbar-track {
  background: transparent;
}

.demo-order-levels::-webkit-scrollbar-thumb {
  border-radius: 999px;
  background: rgb(133 181 223 / 42%);
}

/* 订单类型、方向和快捷操作回到交易对右侧，同一行展示。 */
.demo-order-head {
  align-items: center;
}

.demo-order-title {
  flex: 1 1 auto;
  min-width: 0;
}

.demo-order-title-main {
  min-width: 0;
}

.demo-order-head .demo-symbol {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.demo-order-actions {
  flex: 0 1 auto;
  min-width: 0;
  max-width: 68%;
  flex-wrap: nowrap;
  justify-content: flex-end;
  overflow-x: auto;
  overflow-y: hidden;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}

.demo-order-actions::-webkit-scrollbar {
  display: none;
}

.demo-order-actions > * {
  flex: 0 0 auto;
}

@media (max-width: 460px) {
  .demo-order-head {
    gap: 5px;
  }

  .demo-order-actions {
    max-width: 68%;
    gap: 4px;
  }
}

/* 原文、分享保持原有颜色，仅拉宽为真正的横向扁平胶囊，避免短文字呈圆形。 */
.demo-order-head .demo-order-action.demo-trace-action,
.demo-order-head .demo-order-action.demo-share-action {
  min-width: 48px;
  justify-content: center;
  border-radius: 999px;
  padding-inline: 12px;
}

@media (max-width: 720px) {
  .demo-order-head .demo-order-action.demo-trace-action,
  .demo-order-head .demo-order-action.demo-share-action {
    min-width: 46px;
    padding-inline: 10px;
  }
}

/* 右上角类型、方向和操作统一占位，避免短文字按钮一大一小。 */
.demo-order-head .demo-order-actions > .demo-side-pill,
.demo-order-head .demo-order-actions > .demo-type-pill,
.demo-order-head .demo-order-actions > .demo-order-action {
  box-sizing: border-box;
  flex: 0 0 44px;
  width: 44px;
  min-width: 44px;
  max-width: 44px;
  min-height: 28px;
  justify-content: center;
  padding: 4px 3px;
  overflow: hidden;
  text-align: center;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.demo-order-head .demo-order-actions > .demo-order-action.manual-review-action,
.demo-order-head .demo-order-actions > .demo-order-action.demo-history-delete-action {
  flex: 0 0 auto;
  width: auto;
  min-width: 44px;
  max-width: none;
  padding-inline: 10px;
}

@media (max-width: 720px) {
  .demo-order-head .demo-order-actions > .demo-side-pill,
  .demo-order-head .demo-order-actions > .demo-type-pill,
  .demo-order-head .demo-order-actions > .demo-order-action {
    flex-basis: 40px;
    width: 40px;
    min-width: 40px;
    max-width: 40px;
    min-height: 25px;
    padding: 3px 2px;
  }
}

@media (max-width: 460px) {
  .demo-order-head .demo-order-actions > .demo-side-pill,
  .demo-order-head .demo-order-actions > .demo-type-pill,
  .demo-order-head .demo-order-actions > .demo-order-action {
    flex-basis: 34px;
    width: 34px;
    min-width: 34px;
    max-width: 34px;
    min-height: 22px;
    padding: 2px 1px;
    font-size: 8px;
  }

  .demo-order-head .demo-order-actions > .demo-order-action.manual-review-action,
  .demo-order-head .demo-order-actions > .demo-order-action.demo-history-delete-action {
    flex-basis: auto;
    width: auto;
    min-width: 40px;
    max-width: none;
    min-height: 24px;
    padding: 3px 8px;
    font-size: 11px;
  }

  .demo-order-head .demo-order-actions {
    flex: 1 1 auto;
    width: auto;
    max-width: 72%;
    gap: 2px;
  }
}

/* 实盘页：读写动作分层，账户快照保持只读语义，人工资金操作单独强调。 */
.live-page-heading {
  align-items: flex-start;
}

.live-page-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 8px;
}

.live-trade-card::before {
  background: var(--clean-danger);
}

.live-danger-action {
  border-color: rgb(211 143 152 / 58%) !important;
  color: #f0c7cc !important;
  background: rgb(95 43 53 / 34%) !important;
}

.live-danger-action:hover,
.live-danger-action:focus-visible {
  border-color: var(--clean-danger) !important;
  background: rgb(120 54 66 / 48%) !important;
}

@media (max-width: 720px) {
  .live-page-actions {
    max-width: 48%;
  }

  }

@media (max-width: 390px) {
  .live-page-heading {
    gap: 7px;
  }

  .live-page-actions {
    max-width: 52%;
    gap: 4px;
  }

  .live-page-actions .demo-refresh-button {
    min-height: 32px;
    padding-inline: 7px;
    font-size: 9px;
  }

  }

/* 宽屏下中转站卡片改成两行：上行名称与成功/失败，下行模型与按钮。 */
@media (min-width: 721px) {
  .provider-card {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    column-gap: 12px;
    row-gap: 8px;
    align-items: center;
  }

  .provider-card-head {
    grid-area: 1 / 1;
    margin-bottom: 0;
  }

  .provider-model-stats {
    grid-area: 1 / 2;
    min-width: 108px;
  }

  .provider-model {
    grid-area: 2 / 1;
    margin-bottom: 0;
  }

  .provider-card-foot {
    grid-area: 2 / 2;
    margin-top: 0;
    padding-top: 0;
    border-top: 0;
  }

  .provider-card-foot .btn {
    min-width: 78px;
  }
}


.telegram-bot-list {
  display: grid;
  gap: 10px;
  margin: 10px 0;
}

.telegram-bot-card {
  display: grid;
  gap: 8px;
  padding: 12px;
  border: 1px solid var(--clean-border);
  border-radius: 12px;
  background: var(--clean-surface);
}

.telegram-channel-list {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 12px;
}

.telegram-channel-option {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
}

.telegram-setup-hint {
  display: grid;
  gap: 4px;
  margin: 0 0 8px;
}

.telegram-setup-hint .hint {
  margin: 0;
}

/* 交易员配置（监听频道）长按拖拽排序，与中转站卡片保持同一套视觉反馈。 */
.channel-card {
  cursor: grab;
  touch-action: pan-y;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
}

.channel-card-head[data-channel-drag-handle] {
  touch-action: none;
}

.channel-card:active,
.channel-card.is-long-pressing {
  cursor: grabbing;
}

.channel-card button,
.channel-card input,
.channel-card select,
.channel-card textarea {
  user-select: auto;
}

.channel-card.is-dragging {
  z-index: 1000;
  opacity: .98;
  pointer-events: none;
  touch-action: none;
  border-color: var(--clean-accent);
  background: var(--clean-surface-raised);
  box-shadow: 0 18px 38px rgb(0 0 0 / 38%);
  transform: translate3d(
    var(--channel-drag-x, 0px),
    var(--channel-drag-y, 0px),
    0
  ) scale(1.02);
  animation: none;
  transition: none !important;
  will-change: transform;
}

.channel-card.is-long-pressing {
  border-color: #5d748a;
  box-shadow: 0 10px 28px rgb(0 0 0 / 30%);
}

.channel-card.is-drag-over {
  border-color: var(--clean-accent);
  background: rgb(110 159 203 / 10%);
  box-shadow: 0 0 0 2px rgb(110 159 203 / 14%);
  transform: scale(.985);
  animation: none;
}

.channel-drag-placeholder {
  box-sizing: border-box;
  min-width: 0;
  border: 1px dashed var(--clean-accent);
  border-radius: 10px;
  background: rgb(110 159 203 / 9%);
  box-shadow: inset 0 0 0 1px rgb(110 159 203 / 9%);
  opacity: .92;
  pointer-events: none;
  animation: channel-placeholder-pulse 1.2s ease-in-out infinite;
}

@keyframes channel-placeholder-pulse {
  0%,
  100% {
    opacity: .62;
  }
  50% {
    opacity: .96;
  }
}

html.channel-dragging,
body.channel-dragging {
  overscroll-behavior: none;
  touch-action: none;
}

/* 回测设置：界面选定回测/真实回放用的中转站与并发路数，不影响生产识别。 */
.replay-defaults {
  margin-top: 9px;
  padding: 9px 10px;
  border: 1px solid #3b4d61;
  border-radius: 8px;
  background: #1c2836;
}

.replay-defaults-head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 6px;
  margin-bottom: 7px;
}

.replay-defaults-head strong {
  font-size: 11px;
  color: #cfe0ef;
}

.replay-defaults-body {
  display: grid;
  grid-template-columns: minmax(0, 2fr) minmax(0, 1fr) auto;
  align-items: end;
  gap: 6px;
}

.replay-defaults-body label {
  display: grid;
  gap: 3px;
  min-width: 0;
  font-size: 10px;
  color: #9fb4c7;
}

.replay-defaults-body select,
.replay-defaults-body input {
  width: 100%;
  min-width: 0;
  min-height: 28px;
  padding: 4px 6px;
  font-size: 11px;
}

.replay-defaults-body .btn {
  min-height: 28px;
  padding: 4px 10px;
  font-size: 10px;
  white-space: nowrap;
}

.replay-defaults-status {
  display: block;
  margin-top: 5px;
  font-size: 10px;
  color: #82be98;
}

@media (max-width: 560px) {
  .replay-defaults-body {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  }

  .replay-defaults-body .btn {
    grid-column: 1 / -1;
  }
}

/* 中转站卡片：模型搜索框。
   中转站模型列表动辄几百条，逐个下拉翻找不现实；关键词只过滤 options，
   不改选中值（过滤把 select 的值清空会触发错误的 change 保存）。
   卡片 DOM 会被后台统计刷新整块重建，关键词由 app.js 的 providerModelSearchTerms 保存。 */
.provider-model {
  display: grid;
  gap: 5px;
}

.provider-model-search {
  min-height: 30px;
  padding: 5px 9px;
  border-color: var(--clean-border);
  border-radius: 8px;
  background: var(--clean-surface);
  font-size: 10px;
}

.provider-model-search::placeholder {
  color: var(--clean-faint);
}

@media (max-width: 720px) {
  .provider-model-search {
    min-height: 28px;
    padding: 4px 8px;
    font-size: 9px;
  }
}


/* 中转站卡片顺序就是生产识别的调用顺序（逐家顺序、失败才下一家），
   这条提示把「拖拽排序」与生产行为的关系说清楚。 */
.provider-order-hint {
  margin: 0 0 8px;
  font-size: 10px;
  color: var(--clean-muted);
}

/*
 * 2026-10 · 平板竖屏档（561~1023px）：窄平板继续沿用手机版式。
 *
 * 561px 是手机（≤560px）与平板的分界：601/768/834 竖屏平板落在这里。
 * 除导航格子封顶 120px（见导航注释）、点击区放大到 34px 外，布局与手机一致。
 */
@media (min-width: 561px) and (max-width: 1023px) {
  /* 侧边栏顶栏化，释放被固定侧栏占掉的整列宽度。 */
  .app-shell {
    display: block;
  }
  .sidebar {
    position: sticky;
    top: 0;
    height: auto;
    width: 100%;
    padding: max(6px, env(safe-area-inset-top)) 8px 5px;
    border-right: 0;
    border-bottom: 1px solid var(--clean-border);
    background: #151719;
  }
  /*
   * 导航：手机档（≤720px，见本文件 1258 行）是 5 等分铺满整宽。
   * 直接铺到平板上，1024px 视口每格宽到 200px、五个中文标签被拉散；
   * 所以保留「一行 5 格」的手机结构，只给格子设 120px 上限：
   * 窄平板（600px）按剩余宽度均分，接近手机的紧凑观感；
   * 宽平板（≥768px）到顶后由 space-evenly 在整条栏内均匀留白，不撑出视口。
   */
  .nav {
    grid-template-columns: repeat(5, minmax(0, 120px));
    justify-content: space-evenly;
    gap: 2px;
  }
  .nav button,
  .nav button:hover,
  .nav button.active {
    justify-content: center;
    min-height: 42px;
    padding: 4px 2px;
    border: 0;
    border-radius: 6px;
    background: transparent;
    box-shadow: none;
    font-size: 11px;
    text-align: center;
  }
  .nav button.active {
    color: var(--clean-text);
    background: #202328;
  }
  .sidebar-foot {
    display: none;
  }
  main {
    width: 100%;
    padding: 10px 9px calc(28px + env(safe-area-inset-bottom));
  }
  .grid {
    gap: 8px;
  }
  .card {
    padding: 9px;
    border-radius: 10px;
  }
  .card-head {
    align-items: center;
    gap: 6px;
    margin-bottom: 7px;
  }
  .heading {
    gap: 5px;
    font-size: 13px;
  }
  /* 中转站与交易员卡片：手机端的两列并排。 */
  .provider-grid,
  .channel-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 6px;
  }
  .provider-card,
  .channel-card {
    padding: 7px;
    border-radius: 8px;
  }
  .provider-card-head,
  .channel-card-head {
    gap: 5px;
    margin-bottom: 5px;
  }
  .provider-number {
    width: 23px;
    height: 23px;
    border-radius: 7px;
    font-size: 10px;
  }
  .provider-name,
  .channel-name {
    font-size: 10px;
  }
  .provider-model {
    gap: 4px;
    margin-bottom: 5px;
  }
  .provider-model select {
    min-height: 30px;
    padding: 4px 7px;
    border-radius: 7px;
    font-size: 9px;
  }
  .provider-divider {
    margin: 5px 0;
  }
  .provider-model-stats {
    gap: 3px;
    font-size: 9px;
  }
  .model-stat-row {
    grid-template-columns: auto auto;
    justify-content: space-between;
    min-height: 15px;
    padding: 0 1px;
    font-size: 9px;
  }
  .provider-model-search {
    min-height: 28px;
    padding: 4px 8px;
    font-size: 9px;
  }
  /* 宽屏专用的「上行名称 / 下行模型」两行卡片在平板下不再启用。 */
  .provider-card {
    display: block;
  }
  .provider-card-head,
  .provider-model-stats,
  .provider-model,
  .provider-card-foot {
    grid-area: auto;
  }
  .provider-card-foot,
  .channel-card-foot {
    gap: 4px;
    margin-top: 5px;
    padding-top: 0;
    border-top: 0;
  }
  .provider-card-foot .btn,
  .channel-card-foot .btn {
    min-width: 0;
    min-height: 24px;
    padding: 3px 4px;
    border-radius: 6px;
    font-size: 9px;
  }
  .provider-toolbar {
    gap: 4px;
    flex-wrap: wrap;
    justify-content: flex-end;
  }
  .provider-toolbar .btn[data-provider-add],
  .provider-toolbar .btn[data-provider-sync-hermes],
  .provider-toolbar .btn[data-provider-batch-models],
  .provider-toolbar .btn[data-provider-batch-probe] {
    width: 31px;
    min-width: 31px;
    height: 31px;
    min-height: 31px;
    padding: 0;
    font-size: 0;
  }
  .provider-toolbar .btn[data-provider-add] .btn-icon,
  .provider-toolbar .btn[data-provider-sync-hermes] .btn-icon,
  .provider-toolbar .btn[data-provider-batch-models] .btn-icon,
  .provider-toolbar .btn[data-provider-batch-probe] .btn-icon {
    margin: 0;
    font-size: 16px;
    line-height: 1;
  }
  .provider-toolbar .btn[data-provider-add] .batch-model-label,
  .provider-toolbar .btn[data-provider-add] .batch-model-label-short,
  .provider-toolbar .btn[data-provider-sync-hermes] .provider-sync-hermes-label,
  .provider-toolbar .btn[data-provider-sync-hermes] .provider-sync-hermes-label-short,
  .provider-toolbar .btn[data-provider-batch-models] .batch-model-label,
  .provider-toolbar .btn[data-provider-batch-models] .batch-model-label-short,
  .provider-toolbar .btn[data-provider-batch-probe] .batch-probe-label,
  .provider-toolbar .btn[data-provider-batch-probe] .batch-probe-label-short {
    display: none;
  }
  .channel-grid {
    gap: 5px;
  }
  .channel-card {
    padding: 7px 4px;
  }
  .channel-card-head {
    gap: 4px;
    margin-bottom: 4px;
  }
  .channel-card-meta {
    gap: 3px;
    margin-bottom: 5px;
  }
  .channel-meta-item {
    min-height: 18px;
    padding: 2px 4px;
    font-size: 8px;
  }
  /* 订单页页头与概览。 */
  .demo-page-heading {
    gap: 8px;
    margin: 0 0 8px;
  }
  .demo-page-heading h1 {
    font-size: 21px;
  }
  .demo-page-heading .muted {
    margin-top: 3px;
    font-size: 10px;
  }
  .demo-refresh-button {
    min-height: 34px;
    padding-inline: 9px;
    border-radius: 9px;
    font-size: 10px;
  }
  .demo-overview-card {
    margin-top: 6px;
  }
  .demo-overview-body {
    gap: 8px;
  }
  .demo-overview-controls {
    gap: 6px;
    margin-bottom: 7px;
    grid-template-columns: 1fr;
  }
  .demo-overview-tabs {
    gap: 4px;
    margin-bottom: 6px;
    padding: 3px;
    border-radius: 8px;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .demo-overview-tab {
    min-height: 29px;
    border-radius: 6px;
    font-size: 10px;
  }
  .demo-overview-tab span {
    min-width: 18px;
    margin-left: 3px;
    padding: 1px 4px;
    font-size: 9px;
  }
  .demo-trader-filter {
    min-height: 34px;
    padding: 3px 6px 3px 8px;
    border-radius: 8px;
    font-size: 10px;
  }
  .demo-trader-filter select {
    height: 27px;
    padding-left: 7px;
    border-radius: 6px;
    font-size: 10px;
  }

  .demo-trader-filter input[type="date"] {
    height: 27px;
    padding: 0 4px;
    border-radius: 6px;
    font-size: 10px;
  }
  /* 订单卡：卡片内部仍是手机端的单列摘要 + 单行进场位，但列表本身按可用宽度
     自动排成多列，避免平板上一张卡被拉满整行。410px 在下述 kpi 那档之下，
     保证 796px 容器放得下两列，而 1242px 因为算不下三列仍是两列、卡宽更舒展。 */
  /* 订单卡：竖屏固定两列，卡内是手机同款单列摘要。 */
  .demo-card-list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 5px;
  }

  /*
   * 手机档这两处是「铺满整宽的横条」，平板上会被拉得很长：
   * .demo-overview-controls 的页签行会从 342px 拉到 1242px，.demo-list-toolbar
   * 更是整条撑满。这里改成居中 + 各自封顶，版式与手机一致、只是不再被拉伸。
   * 筛选器仍然单独占一行（手机档就是上下两行），避免和页签挤在同一行误触。
   */
  .demo-overview-controls {
    grid-template-columns: 1fr;
    justify-items: center;
  }
  .demo-overview-controls .demo-overview-tabs {
    width: min(100%, 420px);
  }
  .demo-list-toolbar {
    align-items: center;
    justify-content: center;
    flex-direction: row;
    flex-wrap: wrap;
    gap: 8px;
  }
  .demo-list-toolbar .demo-trader-filter {
    width: auto;
    min-width: 148px;
    max-width: 220px;
    margin-left: 0;
  }

  /*
   * 以下都是手机档 2~3 列自适应的容器，平板上容器宽到 796~1242px 后
   * 每列被拉成 400~600px 的超宽横条（历史 KPI 尤其明显：三个数字块占满整行）。
   * 用 auto-fill + 各自的最小舒服宽度封顶，列数只增不减、窄机档位不受影响。
   */
  /*
   * 注意：这三条必须写在平板块「最末」，否则会被本块内更靠后的
   * 同优先级规则（7800 行的历史 KPI、7817 行的工具条等）按源码顺序盖掉。
   * 见文件末尾「平板覆盖收口」小节。
   */
  .service-row {
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    justify-content: center;
  }
  .replay-defaults-body {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) auto;
  }
  .replay-defaults-body .btn {
    grid-column: auto;
  }

  /* 订单详情/日志详情是整段阅读区，不跟着宽屏铺满；原文正文本就该短行距。 */
  .trace-view-card {
    max-width: 960px;
    margin-inline: auto;
  }
  .demo-order-card {
    padding: 6px;
    border-radius: 9px;
  }
  .demo-order-head {
    gap: 4px;
  }
  .demo-order-levels {
    gap: 3px;
    margin-top: 5px;
  }
  .demo-order-summary {
    gap: 4px;
    margin-top: 5px;
    padding-top: 5px;
  }
  .demo-order-updates,
  .demo-order-pnl-block {
    padding: 5px 6px;
  }
  .demo-order-footer {
    margin-top: 4px;
  }
  .demo-card-list {
    gap: 5px;
  }
  .demo-history-summary-card {
    gap: 6px;
    margin-bottom: 6px;
  }
  .demo-history-kpi {
    min-height: 56px;
    padding: 5px 7px;
  }
  .demo-order-head .demo-symbol {
    font-size: 15px;
  }
  .demo-order-actions {
    max-width: 68%;
    gap: 2px;
  }
  .demo-order-head .demo-side-pill,
  .demo-order-head .demo-type-pill,
  .demo-order-head .demo-order-action.demo-trace-action,
  .demo-order-head .demo-order-action.demo-share-action,
  .demo-order-head .demo-order-action.demo-close-button,
  .demo-order-head .demo-order-action.live-danger-action,
  .demo-order-head .demo-order-action.demo-history-delete-action {
    min-height: 22px;
    padding: 3px 5px;
    border-radius: 999px;
    font-size: 9px;
  }
  .demo-order-head .demo-order-action.demo-history-delete-action {
    padding: 4px 9px;
  }
  .demo-order-head .demo-actions > *,
  .demo-order-head .demo-order-actions > * {
    flex: 0 0 auto;
  }
  .demo-order-meta {
    gap: 2px 6px;
    margin-top: 4px;
    font-size: 8px;
  }
  .demo-update-trace-times {
    gap: 2px 6px;
    font-size: 8px;
  }
  .demo-order-levels {
    gap: 3px;
    margin-top: 6px;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .demo-level-card {
    min-height: 23px;
    min-width: 118px;
    border-radius: 7px;
    flex-basis: calc(50% - 4px);
  }
  .demo-level-card .demo-level-label,
  .demo-level-card strong,
  .demo-level-sub-label,
  .demo-level-sub-value {
    padding-top: 3px;
    padding-bottom: 3px;
  }
  .demo-order-action {
    min-height: 34px;
    font-size: 11px;
  }
  .demo-order-summary {
    grid-template-columns: 1fr;
    gap: 5px;
    margin-top: 6px;
    padding-top: 6px;
  }
  .demo-order-updates,
  .demo-order-pnl-block {
    min-height: 0;
    padding: 6px 7px;
    border-radius: 7px;
  }
  .demo-order-updates {
    gap: 3px;
    align-content: start;
  }
  .demo-summary-title {
    font-size: 10px;
  }
  .demo-order-update-list {
    gap: 3px;
  }
  .demo-order-update {
    padding: 3px 5px;
    border-radius: 5px;
  }
  .demo-update-actions {
    gap: 3px;
    margin-top: 1px;
  }
  .demo-order-footer {
    margin-top: 5px;
    font-size: 8px;
  }
  /*
   * 这里不能再列 .demo-position-grid：它与上面的 .demo-card-list 同优先级，
   * 写在这里会按源码顺序盖掉多列定义。卡片内的盈亏块与人工复核页仍保持单列。
   * .manual-review-list 必须在最后：它与上面的 .demo-card-list 同优先级，
   * 写在这里才能按源码顺序把人工复核卡片收回单列（复核卡是选择表单，不是摘要卡）。
   */
  .demo-position-pnl-block {
    grid-template-columns: 1fr;
  }
  .manual-review-list {
    grid-template-columns: 1fr;
  }
  .demo-position-pnl-block .demo-pnl-row,
  .demo-position-pnl-block .demo-pnl-close-cell,
  .demo-position-pnl-block .demo-pnl-provider-cell,
  .demo-pnl-main-row > .demo-pnl-row,
  .demo-pnl-main-row > .demo-pnl-close-cell,
  .demo-pnl-main-row > .demo-history-delete-cell,
  .demo-pnl-main-row > .demo-log-delete-cell {
    min-height: 52px;
    padding: 5px 6px;
  }
  .demo-position-pnl-block .demo-pnl-row > span,
  .demo-pnl-main-row > .demo-pnl-row > span,
  .demo-pnl-main-row > .demo-history-delete-cell > span,
  .demo-pnl-main-row > .demo-log-delete-cell > span,
  .demo-pnl-provider-row > .demo-pnl-provider-cell > .demo-pnl-cell-label,
  .demo-position-pnl-block .demo-pnl-r,
  .demo-position-pnl-block .demo-pnl-cell-label,
  .demo-position-pnl-block .demo-pnl-provider-attempt,
  .demo-pnl-close-unavailable {
    font-size: 8px;
  }
  .demo-position-pnl-block .demo-pnl-row strong,
  .demo-pnl-main-row > .demo-pnl-row > strong {
    font-size: 11px;
  }
  .demo-pnl-main-row > .demo-pnl-row .demo-pnl-r,
  .demo-pnl-provider-row .demo-pnl-provider-attempt,
  .demo-pnl-provider-row > .demo-pnl-provider-cell > small {
    font-size: 8px;
  }
  .demo-position-pnl-block .demo-close-button {
    min-height: 31px;
    padding-inline: 4px;
    font-size: 10px;
  }
  /* 历史与日志区。 */
  .demo-history-summary-card {
    gap: 8px;
    margin-bottom: 8px;
  }
  .demo-history-kpi-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 5px;
  }
  .demo-history-kpi {
    min-height: 60px;
    gap: 2px;
    padding: 7px;
    border-radius: 8px;
  }
  .demo-history-kpi > span,
  .demo-history-kpi > small {
    font-size: 9px;
  }
  .demo-history-kpi > strong {
    font-size: 13px;
  }
  .demo-list-toolbar {
    gap: 5px;
    align-items: stretch;
    flex-direction: column;
  }
  .demo-list-toolbar > strong {
    gap: 5px;
    font-size: 12px;
  }
  .demo-list-toolbar > strong span {
    min-width: 20px;
    padding-inline: 5px;
    font-size: 9px;
  }
  .demo-list-toolbar .demo-trader-filter {
    width: 100%;
    margin-left: 0;
  }
  .demo-log-outcome-tabs {
    margin-bottom: 7px;
  }
  .demo-log-order-card .demo-order-summary {
    grid-template-columns: 1fr;
  }
  .demo-log-order-card .demo-log-updates-panel {
    grid-column: auto;
  }
  .demo-history-close-fact {
    min-height: 44px;
    padding: 6px;
  }
  .demo-history-close-fact span {
    font-size: 8px;
  }
  .demo-history-close-fact strong {
    font-size: 10px;
  }
  .demo-history-pnl-block .demo-pnl-row,
  .demo-history-pnl-block .demo-pnl-provider-cell,
  .demo-log-pnl-block .demo-pnl-row,
  .demo-log-pnl-block .demo-pnl-provider-cell,
  .demo-log-pnl-block .demo-log-delete-cell,
  .demo-history-delete-cell {
    min-height: 72px;
    padding: 8px 6px;
  }
  .demo-history-pnl-block .demo-pnl-row > span {
    font-size: 9px;
  }
  .demo-history-pnl-block .demo-pnl-row strong {
    font-size: 11px;
  }
  .demo-history-pnl-block .demo-pnl-r {
    font-size: 8px;
  }
  .demo-history-pnl-block .demo-pnl-provider-cell > .demo-pnl-cell-label,
  .demo-log-pnl-block .demo-pnl-row > span,
  .demo-log-pnl-block .demo-pnl-provider-cell > .demo-pnl-cell-label,
  .demo-log-pnl-block .demo-log-reason {
    font-size: 8px;
  }
  .demo-history-delete-cell > span {
    font-size: 9px;
  }
  .demo-history-delete-cell .demo-history-delete-action {
    padding-inline: 5px;
    font-size: 9px;
  }
  /* 实盘页动作区同样收窄。 */
  .live-page-actions {
    max-width: 48%;
  }
  /* 人工复核与追踪面板。 */
  .manual-review-panel {
    margin-top: 8px;
  }
  .manual-review-panel .card-head {
    margin-bottom: 6px;
  }
  .manual-review-list {
    gap: 8px;
  }
  .trace-view-card {
    margin-top: 8px;
  }
  .trace-content,
  .trace-timeline {
    gap: 8px;
  }
  .trace-meta,
  .trace-event,
  .trace-message {
    padding: 8px 9px;
  }
  .replay-defaults-body {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  }
  .replay-defaults-body .btn {
    grid-column: 1 / -1;
  }
  /* 表单与业务卡片：手机端的单列表单。 */
  .form-grid {
    grid-template-columns: 1fr;
  }
  .field.full {
    grid-column: auto;
  }
  .service-row {
    gap: 6px;
    margin-bottom: 9px;
  }
  .service-card {
    min-height: 104px;
    padding: 7px 3px 6px;
  }
  .service-icon {
    width: 30px;
    height: 30px;
    margin-bottom: 4px;
    border-radius: 8px;
  }
  .service-icon svg,
  .service-icon.discord-logo svg {
    width: 20px;
    height: 20px;
  }
  .service-icon.bybit-logo {
    width: 50px;
    height: 27px;
  }
  .service-icon.bybit-logo svg {
    width: 42px;
  }
  .service-card small {
    display: none;
    min-height: 0;
  }
  .service-actions {
    gap: 3px;
  }
  .service-connect-pill {
    width: 43px;
    min-width: 43px;
    height: 22px;
    min-height: 22px;
  }
  .service-connect-pill::after {
    top: 3px;
    left: 3px;
    width: 16px;
    height: 16px;
  }
  .service-connect-pill.is-connected::after {
    transform: translateX(21px);
  }
  .service-card .btn {
    min-height: 22px;
    padding: 3px 5px;
    border-radius: 6px;
    font-size: 8px;
  }
  /*
   * 平板可点尺寸兜底：手机那套 8~10px 字号在窄机上靠指腹勉强可用，
   * 放到平板会变成明显的误触源。这里只放大命中区，不动任何布局档位，
   * 因此版式与手机一致、手感更接近桌面。
   */
  .nav button,
  .demo-overview-tab,
  .demo-refresh-button,
  .demo-trader-filter select,
  .demo-order-action,
  .provider-card-foot .btn,
  .channel-card-foot .btn,
  .service-card .btn {
    min-height: 34px;
  }
  .demo-order-head .demo-order-actions > .demo-side-pill,
  .demo-order-head .demo-order-actions > .demo-type-pill,
  .demo-order-head .demo-order-actions > .demo-order-action {
    min-height: 30px;
  }

  /*
   * 平板覆盖收口：以下规则必须放在本媒体块的最末。
   *
   * 原因：上面大部分平板规则写在手机档规则「之前」，与手机档同优先级时靠
   * 源码顺序决胜负——本块内 7800 行还有一条手机档搬过来的
   * .demo-history-kpi-grid { repeat(3, ...) }，7817 行还有一条
   * .demo-list-toolbar 竖排；只要多列规则写在它们前面就会整条失效
   * （实测 1242px 下历史 KPI 仍是 3×410px 的超宽块）。
   * 放到最末，既覆盖本块内先出现的手机档副本，也覆盖块外的手机档规则。
   */
  .demo-history-kpi-grid {
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  }
  .demo-history-trader-list {
    grid-template-columns: repeat(auto-fill, minmax(440px, 1fr));
  }
  /*
   * 以下三组是「历史/日志/实盘」里手机档搬过来的容器规则，与上面收口段
   * 里的多列规则同优先级、位置更靠后；留在原位会把多列盖回单列/全宽。
   * 必须在同一处收口，见文件末尾「平板覆盖收口」。
   */
  .demo-history-trader-list {
    grid-template-columns: repeat(auto-fill, minmax(440px, 1fr));
  }
  .demo-list-toolbar {
    align-items: center;
    justify-content: center;
    flex-direction: row;
    flex-wrap: wrap;
    gap: 8px;
  }
  .demo-list-toolbar .demo-trader-filter {
    width: auto;
    min-width: 148px;
    max-width: 220px;
    margin-left: 0;
  }
  /*
   * 门限取 200px 而不是 300px：560px 档手机是两列，平板档若写 300px，
   * 561–720px 这段会掉回单列（实测 600px 档 562px 单列、反而比手机更差）。
   * 200px 在 561px 起就是两列，834px 起是三到四列。
   */
  .provider-grid,
  .channel-grid {
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  }
}

/*
 * 2026-10 · 平板横屏档（1024~1366px）：宽屏多列版式。
 *
 * 竖屏档（561~1023px）沿用手机版式；横屏宽度够摆两到三张卡，继续用手机
 * 单列就是浪费。本档只做三件事：
 * ① 侧栏保持顶栏化（561px 起已是顶栏，不恢复 980px 的桌面侧栏）；
 * ② 订单/历史/日志卡片按可用宽度排两到三列（minmax 按卡片最小舒服宽度取）；
 * ③ 工具条、统计栅格、服务卡片同样按宽度自适应，不再整行拉伸。
 * 放在文件最末：与上面竖屏块同优先级时靠源码顺序覆盖同名规则。
 */
@media (min-width: 1024px) and (max-width: 1366px) {
  /* 侧边栏顶栏化：与竖屏档一致，不恢复桌面固定侧栏。 */
  .app-shell {
    display: block;
  }
  .sidebar {
    position: sticky;
    top: 0;
    height: auto;
    width: 100%;
    padding: max(6px, env(safe-area-inset-top)) 8px 5px;
    border-right: 0;
    border-bottom: 1px solid var(--clean-border);
    background: #151719;
  }
  .nav {
    grid-template-columns: repeat(5, minmax(0, 120px));
    justify-content: space-evenly;
    gap: 2px;
  }
  .nav button,
  .nav button:hover,
  .nav button.active {
    justify-content: center;
    min-height: 42px;
    padding: 4px 2px;
    border: 0;
    border-radius: 6px;
    background: transparent;
    box-shadow: none;
    font-size: 12px;
    text-align: center;
  }
  .nav button.active {
    color: var(--clean-text);
    background: #202328;
  }
  .sidebar-foot {
    display: none;
  }
  main {
    width: 100%;
    max-width: 1320px;
    margin-inline: auto;
    padding: 10px 12px calc(24px + env(safe-area-inset-bottom));
  }
  .card {
    padding: 10px;
    border-radius: 11px;
  }
  .card-head {
    margin-bottom: 8px;
  }
  .demo-page-heading {
    margin-bottom: 10px;
  }
  /* 配置页服务卡：横屏一行四张，不再整行拉伸。 */
  .service-row {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 8px;
    margin-bottom: 10px;
  }
  .service-card {
    min-height: 0;
    padding: 10px 8px 8px;
  }
  /* 中转站/频道：横屏三到四列。 */
  .provider-grid,
  .channel-grid {
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: 8px;
  }
  .provider-card,
  .channel-card {
    padding: 8px;
  }
  /* 订单卡：横屏两到三列，卡片内部保持现有摘要版式。 */
  /* 订单卡：横屏固定两列。auto-fill 在 1280 下会算出三列、每张约 406px，
   * 卡内四格 pnl 与价格胶囊被压扁（方式/实际成交价/时间竖排、盈亏只剩省略号）。
   * 两列每张约 610px，卡内恢复正常横排，密度靠卡片自身收紧保证。 */
  /* 订单卡：横屏固定三列，卡内是手机同款单列摘要（更新/盈亏上下排）。
   * 卡宽约 400px，价格胶囊与盈亏数字不断裂；密度靠卡片自身收紧保证。 */
  .demo-card-list {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 5px;
  }
  .demo-order-card {
    padding: 6px;
    border-radius: 9px;
  }
  .demo-order-head {
    gap: 4px;
  }
  .demo-order-meta {
    gap: 2px 6px;
    margin-top: 4px;
  }
  .demo-order-levels {
    gap: 3px;
    margin-top: 5px;
  }
  .demo-order-summary {
    grid-template-columns: 1fr;
    gap: 4px;
    margin-top: 5px;
    padding-top: 5px;
  }
  .demo-order-updates,
  .demo-order-pnl-block {
    min-height: 0;
    padding: 5px 6px;
  }
  .demo-order-footer {
    margin-top: 4px;
  }
  /* 历史 KPI：横屏六张一行，不再是三列两行。 */
  .demo-history-kpi-grid {
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: 5px;
  }
  .demo-history-kpi {
    min-height: 54px;
    padding: 5px 7px;
  }
  .demo-history-summary-card {
    gap: 6px;
    margin-bottom: 6px;
  }
  /* 平仓三段与价格胶囊里的长数字/长时刻允许换行，不再挤出省略号。 */
  .demo-history-close-fact strong,
  .demo-level-card > strong {
    white-space: normal;
    overflow-wrap: anywhere;
    word-break: break-all;
  }
  .demo-level-trigger-time,
  .demo-level-card[class*="demo-level-fields-"] > .demo-level-trigger-time {
    max-width: none;
    white-space: normal;
    overflow-wrap: anywhere;
  }
  .demo-history-trader-list {
    grid-template-columns: repeat(auto-fill, minmax(440px, 1fr));
  }
  /* 工具条：横屏居中一行，不过度拉伸。 */
  .demo-overview-controls {
    grid-template-columns: 1fr;
    justify-items: center;
  }
  .demo-overview-controls .demo-overview-tabs {
    width: min(100%, 420px);
  }
  .demo-list-toolbar {
    align-items: center;
    justify-content: center;
    flex-direction: row;
    flex-wrap: wrap;
    gap: 8px;
  }
  .demo-list-toolbar .demo-trader-filter {
    width: auto;
    min-width: 148px;
    max-width: 220px;
    margin-left: 0;
  }
  /* 详情阅读区：横屏居中限宽，不跟着铺满。 */
  .trace-view-card {
    max-width: 960px;
    margin-inline: auto;
  }
  /* 点击区保持平板可点尺寸。 */
  .nav button,
  .demo-overview-tab,
  .demo-refresh-button,
  .demo-trader-filter select,
  .demo-order-action,
  .provider-card-foot .btn,
  .channel-card-foot .btn,
  .service-card .btn {
    min-height: 34px;
  }
}