:root {
      color-scheme: light;
      --page-bg: #f5f7fb;
      --panel-bg: #ffffff;
      --text: #172033;
      --muted: #667085;
      --line: #d9e0ea;
      --soft: #f8fafc;
      --blue: #2563eb;
      --green: #15803d;
      --red: #b42318;
      --amber: #b7791f;
      --violet: #6d28d9;
    }

    * {
      box-sizing: border-box;
    }

    html,
    body,
    #app {
      height: 100%;
      min-height: 100%;
    }

    body {
      margin: 0;
      background: var(--page-bg);
      color: var(--text);
      font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Microsoft YaHei", sans-serif;
      font-size: 13px;
    }

    [v-cloak] {
      display: none;
    }

    .dashboard-shell {
      height: 100vh;
      padding: 12px;
      gap: 12px;
      overflow: hidden;
    }

    .sidebar {
      display: flex;
      flex-direction: column;
      gap: 12px;
      min-width: 0;
      min-height: 0;
      overflow: auto;
    }

    .main {
      min-width: 0;
      min-height: 0;
      padding: 0;
      overflow: hidden;
    }

    .panel {
      background: var(--panel-bg);
      border: 1px solid var(--line);
      border-radius: 8px;
    }

    .side-panel {
      padding: 14px;
    }

    .main-panel {
      height: 100%;
      min-height: 0;
      overflow: hidden;
      padding: 14px 16px 16px;
      display: flex;
      flex-direction: column;
    }

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

    .page-title {
      margin: 0;
      font-size: 18px;
      line-height: 1.25;
      font-weight: 750;
      letter-spacing: 0;
    }

    .page-subtitle {
      margin-top: 4px;
      color: var(--muted);
      font-size: 12px;
    }

    .panel-title {
      margin: 0 0 10px;
      font-size: 14px;
      line-height: 1.3;
      font-weight: 700;
    }

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

    .price-grid {
      display: grid;
      gap: 8px;
    }

    .price-card {
      display: grid;
      grid-template-columns: 28px minmax(0, 1fr) auto;
      gap: 8px;
      align-items: center;
      padding: 10px;
      border: 1px solid var(--line);
      border-radius: 8px;
      background: var(--soft);
    }

    .price-icon {
      display: inline-grid;
      place-items: center;
      width: 28px;
      height: 28px;
      border-radius: 50%;
      color: #fff;
      font-size: 16px;
      font-weight: 800;
      line-height: 1;
    }

    .price-icon-btc {
      background: #f7931a;
    }

    .price-icon-eth {
      background: #627eea;
    }

    .price-symbol {
      color: var(--muted);
      font-size: 12px;
      font-weight: 700;
    }

    .price-value {
      font-size: 16px;
      font-weight: 760;
      font-variant-numeric: tabular-nums;
      text-align: right;
    }

    .price-time {
      grid-column: 1 / -1;
      color: var(--muted);
      font-size: 12px;
    }

    .manual-grid {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 8px;
    }

    .manual-symbol-list,
    .manual-symbol-group {
      display: grid;
      gap: 8px;
    }

    .manual-symbol-group {
      border: 1px solid var(--line);
      border-radius: 7px;
      background: var(--soft);
      padding: 8px;
    }

    .manual-symbol-title {
      font-size: 12px;
      font-weight: 800;
      color: var(--blue);
      line-height: 1.1;
    }

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

    .switch-row {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 10px;
      padding: 9px 0;
      border-top: 1px solid var(--line);
    }

    .switch-row:first-child {
      border-top: 0;
      padding-top: 0;
    }

    .toolbar {
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      justify-content: space-between;
      gap: 10px;
      margin-bottom: 12px;
      padding: 10px;
      border: 1px solid var(--line);
      border-radius: 8px;
      background: var(--soft);
    }

    .toolbar-left,
    .toolbar-right {
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      gap: 8px;
    }

    .content-tabs {
      min-height: 0;
      display: flex;
      flex: 1;
      flex-direction: column;
    }

    .content-tabs > .el-tabs__content {
      min-height: 0;
      flex: 1;
      overflow: hidden;
    }

    .content-tabs .el-tab-pane {
      height: 100%;
      min-height: 0;
      overflow: auto;
    }

    .table-footer {
      display: flex;
      justify-content: flex-end;
      margin-top: 0;
      padding: 0 12px 12px;
    }

    .direction-up {
      color: var(--green);
      font-weight: 700;
    }

    .direction-down {
      color: var(--red);
      font-weight: 700;
    }

    .profit-positive,
    .pnl-positive {
      color: var(--green);
      font-weight: 700;
    }

    .profit-negative,
    .pnl-negative {
      color: var(--red);
      font-weight: 700;
    }

    .result-win {
      color: var(--green);
      font-weight: 700;
    }

    .result-loss {
      color: var(--red);
      font-weight: 700;
    }

    .account-grid {
      display: grid;
      grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
      gap: 10px;
      margin-bottom: 12px;
    }

    .account-card {
      border: 1px solid var(--line);
      border-radius: 8px;
      background: var(--panel-bg);
      padding: 10px;
    }

    .account-card-title {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 8px;
      margin-bottom: 8px;
      font-weight: 700;
    }

    .metric-grid {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 6px;
    }

    .metric {
      border-radius: 8px;
      background: var(--soft);
      padding: 8px;
    }

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

    .metric-value {
      margin-top: 2px;
      font-size: 14px;
      font-weight: 740;
      font-variant-numeric: tabular-nums;
    }

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

    .strategy-row,
    .chain-row {
      display: grid;
      grid-template-columns: minmax(0, 1fr) auto;
      gap: 12px;
      padding: 12px;
      border: 1px solid var(--line);
      border-radius: 8px;
      background: var(--panel-bg);
    }

    .strategy-title,
    .chain-title {
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      gap: 8px;
      margin-bottom: 6px;
      font-weight: 760;
    }

    .strategy-desc,
    .chain-desc {
      color: var(--muted);
      line-height: 1.55;
    }

    .config-node {
      margin-bottom: 10px;
    }

    .config-group {
      border: 1px solid var(--line);
      border-radius: 8px;
      padding: 12px;
      background: var(--soft);
    }

    .config-group-title {
      margin-bottom: 10px;
      font-weight: 700;
    }

    .readonly-strategy-detail {
      display: grid;
      gap: 12px;
    }

    .readonly-summary-grid {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
      gap: 8px;
    }

    .readonly-summary-item,
    .readonly-session-card {
      border: 1px solid var(--line);
      border-radius: 7px;
      background: var(--soft);
      padding: 10px;
    }

    .readonly-summary-label {
      color: var(--muted);
      font-size: 11px;
      line-height: 1.2;
    }

    .readonly-summary-value {
      margin-top: 4px;
      font-size: 13px;
      font-weight: 760;
      overflow-wrap: anywhere;
    }

    .readonly-session-list {
      display: grid;
      gap: 8px;
    }

    .readonly-session-head {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 8px;
      margin-bottom: 8px;
    }

    .readonly-session-title {
      font-weight: 760;
    }

    .readonly-status {
      border: 1px solid var(--line);
      border-radius: 999px;
      background: #fff;
      color: var(--muted);
      font-size: 11px;
      line-height: 1;
      padding: 4px 7px;
      white-space: nowrap;
    }

    .readonly-status.enabled {
      border-color: rgba(21, 128, 61, 0.28);
      background: rgba(21, 128, 61, 0.08);
      color: var(--green);
    }

    .readonly-param-grid {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
      gap: 6px;
      margin-top: 8px;
    }

    .readonly-param {
      border: 1px solid var(--line);
      border-radius: 6px;
      background: #fff;
      padding: 7px;
      min-width: 0;
    }

    .readonly-param span {
      display: block;
      color: var(--muted);
      font-size: 11px;
      line-height: 1.2;
    }

    .readonly-param strong {
      display: block;
      margin-top: 3px;
      font-size: 12px;
      line-height: 1.3;
      overflow-wrap: anywhere;
    }

    .chain-editor {
      display: grid;
      gap: 12px;
    }

    .chain-editor-item {
      border: 1px solid var(--line);
      border-radius: 8px;
      padding: 12px;
      background: var(--soft);
    }

    .chain-editor-head {
      display: grid;
      grid-template-columns: minmax(140px, 180px) minmax(180px, 1fr) auto auto;
      gap: 8px;
      align-items: center;
      margin-bottom: 10px;
    }

    .chain-step-list {
      display: grid;
      gap: 8px;
    }

    .chain-step-row {
      display: grid;
      grid-template-columns: minmax(0, 1fr) auto;
      gap: 8px;
      align-items: center;
    }

    .serverchan-row {
      display: grid;
      grid-template-columns: minmax(90px, 140px) minmax(0, 1fr) auto auto;
      gap: 8px;
      align-items: center;
      margin-bottom: 8px;
    }

    .recipient-row {
      display: grid;
      grid-template-columns: minmax(96px, 140px) minmax(0, 1fr) minmax(0, 1fr) auto auto;
      gap: 8px;
      align-items: center;
      margin-bottom: 8px;
    }

    .recipient-section {
      border: 1px solid var(--line);
      border-radius: 8px;
      padding: 10px;
      margin-bottom: 10px;
      background: var(--soft);
    }

    .recipient-section h3 {
      margin: 0 0 8px;
      font-size: 13px;
    }

    .policy-grid {
      display: grid;
      gap: 8px;
      margin-top: 8px;
    }

    .policy-push-types,
    .hour-grid {
      display: flex;
      flex-wrap: wrap;
      gap: 8px 12px;
      align-items: center;
    }

    .hour-grid label,
    .policy-push-types label,
    .policy-time-header label {
      display: inline-flex;
      gap: 4px;
      align-items: center;
      font-size: 12px;
      color: var(--text);
    }

    .policy-time-settings {
      border-top: 1px solid var(--line);
      padding-top: 8px;
    }

    .policy-time-header {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 8px;
      margin-bottom: 8px;
      font-size: 12px;
      color: var(--text);
    }

    .push-summary {
      display: grid;
      gap: 3px;
      margin: 10px 0 0;
      padding: 0;
      list-style: none;
      color: var(--text);
      font-size: 12px;
      line-height: 1.35;
    }

    .push-summary li {
      min-width: 0;
      overflow-wrap: anywhere;
    }

    .push-recipient-list {
      display: grid;
      gap: 8px;
    }

    .push-recipient-card {
      display: grid;
      grid-template-columns: minmax(82px, 0.28fr) minmax(110px, 0.45fr) minmax(160px, 1fr) auto auto auto;
      align-items: center;
      gap: 8px;
      border: 1px solid var(--line);
      border-radius: 6px;
      background: #fff;
      padding: 8px;
      min-width: 0;
    }

    .push-recipient-actions {
      display: flex;
      align-items: center;
      justify-content: flex-end;
      gap: 6px;
    }

    .push-recipient-type,
    .push-recipient-status {
      border: 1px solid var(--line);
      border-radius: 5px;
      background: var(--soft);
      color: var(--muted);
      font-size: 10px;
      line-height: 1;
      padding: 4px 5px;
      white-space: nowrap;
    }

    .push-recipient-status.enabled {
      border-color: rgba(21, 128, 61, 0.28);
      background: rgba(21, 128, 61, 0.08);
      color: var(--green);
    }

    .push-recipient-status.disabled {
      border-color: rgba(180, 35, 24, 0.24);
      background: rgba(180, 35, 24, 0.07);
      color: var(--red);
    }

    .push-recipient-label {
      min-width: 0;
      font-size: 12px;
      line-height: 1.25;
      font-weight: 700;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }

    .push-recipient-target {
      margin: 0;
      color: var(--muted);
      font-size: 11px;
      line-height: 1.35;
      overflow-wrap: anywhere;
      min-width: 0;
    }

    .strategy-item-actions {
      display: inline-flex;
      align-items: center;
      gap: 6px;
      flex: 0 0 auto;
    }

    .empty-pad {
      padding: 32px 0;
    }

    @media (max-width: 920px) {
      .dashboard-shell {
        height: auto;
        min-height: 100vh;
        overflow: auto;
      }

      .dashboard-shell.el-container {
        display: block;
      }

      .sidebar {
        width: 100% !important;
        margin-bottom: 12px;
        overflow: visible;
      }

      .main {
        overflow: visible;
      }

      .main-panel {
        min-height: 760px;
      }

      .topline,
      .strategy-row,
      .chain-row,
      .chain-editor-head,
      .serverchan-row {
        grid-template-columns: 1fr;
        display: grid;
      }

      .recipient-row {
        grid-template-columns: 1fr;
      }

      .push-recipient-card {
        grid-template-columns: 1fr;
      }
    }

    .app-shell {
      display: grid;
      grid-template-columns: 260px minmax(0, 1fr);
      gap: 10px;
      height: 100vh;
      padding: 10px;
      overflow: hidden;
    }

    .content-area {
      display: grid;
      grid-template-rows: 48px minmax(0, 1fr);
      gap: 10px;
      overflow: hidden;
      min-width: 0;
      min-height: 0;
    }

    .control-card,
    .content-header,
    .account-performance-panel,
    .contracts-panel,
    .strategy-section {
      background: var(--panel-bg);
      border: 1px solid var(--line);
      border-radius: 8px;
    }

    .control-card {
      display: grid;
      gap: 8px;
      padding: 10px;
      overflow: hidden;
    }

    .control-card.compact {
      gap: 6px;
    }

    .control-title,
    .content-header,
    .panel-header {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 8px;
    }

    .content-header {
      padding: 0 12px;
      overflow: hidden;
    }

    .sheet-tabs {
      display: inline-flex;
      align-items: center;
      gap: 4px;
      border: 1px solid var(--line);
      border-radius: 7px;
      background: var(--soft);
      padding: 3px;
      min-width: 0;
    }

    .sheet-tabs a {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      height: 30px;
      border-radius: 5px;
      color: var(--muted);
      padding: 0 12px;
      text-decoration: none;
      font-size: 12px;
      font-weight: 700;
      white-space: nowrap;
    }

    .sheet-tabs a[aria-current="page"] {
      background: #fff;
      color: var(--blue);
      border: 1px solid var(--line);
    }

    .price-stack,
    .strategy-list,
    .strategy-chain-tree {
      display: grid;
      gap: 8px;
    }

    .field-row,
    .switch {
      display: flex;
      align-items: center;
      gap: 8px;
      justify-content: space-between;
    }

    .strategy-chain-node-header > input[type="text"] {
      width: 100%;
      height: 30px;
      border: 1px solid var(--line);
      border-radius: 6px;
      background: #fff;
      color: var(--text);
      padding: 0 8px;
      font: inherit;
    }

    .native-button {
      height: 30px;
      border: 1px solid var(--line);
      border-radius: 6px;
      background: #fff;
      color: var(--text);
      padding: 0 9px;
      font: inherit;
      font-weight: 700;
      cursor: pointer;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }

    .native-button:hover {
      border-color: var(--blue);
      color: var(--blue);
    }

    .native-button.primary {
      border-color: var(--blue);
      background: var(--blue);
      color: #fff;
    }

    .native-button.primary:hover {
      border-color: #1d4ed8;
      background: #1d4ed8;
      color: #fff;
    }

    .native-button.danger:hover {
      border-color: var(--red);
      color: var(--red);
    }

    .manual-grid .el-button + .el-button {
      margin-left: 0;
    }

    .manual-order-button.el-button {
      width: 100%;
      height: 30px;
      min-width: 0;
      border-radius: 6px;
      font-size: 12px;
      font-weight: 800;
      --el-button-text-color: #fff;
      --el-button-hover-text-color: #fff;
      --el-button-active-text-color: #fff;
      --el-button-disabled-text-color: rgba(255, 255, 255, 0.78);
    }

    .manual-order-button.manual-order-up {
      --el-button-bg-color: var(--green);
      --el-button-border-color: var(--green);
      --el-button-hover-bg-color: #0f6a40;
      --el-button-hover-border-color: #0f6a40;
      --el-button-active-bg-color: #0d5b37;
      --el-button-active-border-color: #0d5b37;
      --el-button-disabled-bg-color: rgba(21, 128, 61, 0.52);
      --el-button-disabled-border-color: rgba(21, 128, 61, 0.12);
    }

    .manual-order-button.manual-order-down {
      --el-button-bg-color: var(--red);
      --el-button-border-color: var(--red);
      --el-button-hover-bg-color: #9f1f16;
      --el-button-hover-border-color: #9f1f16;
      --el-button-active-bg-color: #86190f;
      --el-button-active-border-color: #86190f;
      --el-button-disabled-bg-color: rgba(180, 35, 24, 0.52);
      --el-button-disabled-border-color: rgba(180, 35, 24, 0.12);
    }

    .list-sheet,
    .strategy-sheet,
    .push-sheet,
    .strategy-chain-sheet {
      min-width: 0;
      min-height: 0;
      overflow: hidden;
    }

    .list-sheet {
      display: grid;
      grid-template-rows: minmax(300px, 300px) minmax(0, 1fr);
      gap: 8px;
    }

    .strategy-sheet {
      display: grid;
      grid-template-rows: minmax(0, 1fr);
      gap: 10px;
    }

    .push-sheet {
      display: grid;
      grid-template-rows: minmax(0, 1fr);
      gap: 10px;
    }

    .strategy-panel {
      display: grid;
      grid-template-columns: minmax(0, 1fr) minmax(360px, 0.42fr);
      gap: 10px;
      overflow: hidden;
    }

    .strategy-section {
      padding: 10px;
      overflow: hidden;
      min-width: 0;
      min-height: 0;
    }

    .strategy-section .strategy-list {
      margin-top: 8px;
    }

    .strategy-item {
      border: 1px solid var(--line);
      border-radius: 6px;
      background: var(--soft);
      padding: 7px;
      overflow: hidden;
    }

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

    .strategy-item-header strong {
      min-width: 0;
      display: block;
      font-size: 12px;
      line-height: 1.2;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }

    .strategy-item p {
      margin: 4px 0 0;
      color: var(--muted);
      font-size: 11px;
      line-height: 1.35;
    }

    .strategy-tags {
      display: flex;
      flex-wrap: wrap;
      gap: 5px;
      margin-top: 6px;
    }

    .strategy-tags span {
      border: 1px solid var(--line);
      border-radius: 5px;
      background: #fff;
      color: var(--muted);
      font-size: 10px;
      line-height: 1;
      padding: 4px 5px;
    }

    .strategy-chain-sheet {
      display: grid;
      grid-template-rows: minmax(0, 1fr);
      grid-template-columns: 1fr;
      gap: 10px;
      min-height: 0;
    }

    .strategy-chain-sheet .strategy-section {
      display: grid;
      grid-template-rows: auto minmax(0, 1fr);
      height: 100%;
      min-height: 0;
    }

    .strategy-chain-sheet .strategy-list {
      display: grid;
      gap: 16px;
      overflow-y: auto;
      align-content: start;
      padding: 4px;
    }

    .strategy-chain-sheet .strategy-item,
    .strategy-chain-sheet .strategy-chain-node {
      overflow: visible;
    }

    /* 优化后的策略链卡片 */
    .strategy-chain-node {
      border: 1px solid var(--line);
      border-radius: 10px;
      background: #fff;
      padding: 18px;
      display: flex;
      flex-direction: column;
      gap: 14px;
      box-shadow: 0 4px 12px rgba(23, 32, 51, 0.03);
      transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
      position: relative;
      overflow: visible;
    }

    .strategy-chain-node:hover {
      transform: translateY(-2px);
      border-color: rgba(37, 99, 235, 0.4);
      box-shadow: 0 8px 24px rgba(37, 99, 235, 0.08);
    }

    /* 重构头部布局，防止 grid 折行冲突 */
    .strategy-chain-node-header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      gap: 12px;
      flex-wrap: wrap;
      border-bottom: 1px solid var(--soft);
      padding-bottom: 12px;
    }

    .strategy-chain-node-header .node-meta-inputs {
      display: flex;
      align-items: center;
      gap: 8px;
      flex: 1 1 auto;
    }

    .strategy-chain-node-header .node-meta-inputs input {
      height: 32px;
      border: 1px solid var(--line);
      border-radius: 6px;
      padding: 0 10px;
      font-size: 12px;
      transition: border-color 0.2s;
      /* field-sizing: content 让输入框像行内元素一样随内容自动伸缩宽度，
         无需 JS 计算，精度最高，Chrome 123+ / Firefox 128+ 支持 */
      field-sizing: content;
      min-width: 60px;    /* 防止空值时缩得过窄 */
      max-width: 280px;   /* 防止超长值撑破卡片布局 */
    }

    .strategy-chain-node-header .node-meta-inputs input:focus {
      border-color: var(--blue);
      outline: none;
    }

    .strategy-chain-node-header .node-meta-inputs input[placeholder="版本号"] {
      font-weight: 700;
      color: var(--blue);
      background: var(--soft);
    }

    .strategy-chain-node-header .node-meta-inputs input[placeholder="展示名称"] {
      /* 展示名称通常更长，单独给一个稍大的最小宽度 */
      min-width: 100px;
    }

    .strategy-chain-node-header .node-meta-ops {
      display: flex;
      align-items: center;
      gap: 8px;
    }

    /* 步骤管道包裹容器，生成左侧垂直导轨 */
    .strategy-chain-steps-container {
      position: relative;
      padding-left: 36px;
      display: flex;
      flex-direction: column;
      gap: 12px;
    }

    .strategy-chain-steps-container::before {
      content: "";
      position: absolute;
      left: 14px;
      top: 10px;
      bottom: 10px;
      width: 2px;
      background: linear-gradient(to bottom, var(--blue) 20%, var(--line) 100%);
      z-index: 1;
    }

    /* 步骤容器 */
    .strategy-step-row {
      display: flex;
      align-items: center;
      gap: 12px;
      position: relative;
      z-index: 2;
    }

    /* 重新美化步骤珍珠徽章 */
    .strategy-step-index {
      width: 30px;
      height: 30px;
      border-radius: 50%;
      background: #fff;
      border: 2px solid var(--line);
      color: var(--muted);
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 11px;
      font-weight: 800;
      flex-shrink: 0;
      box-shadow: 0 2px 5px rgba(0,0,0,0.05);
      transition: all 0.2s;
    }

    /* 阈值节点高亮 */
    .strategy-step-row:first-child .strategy-step-index {
      border-color: var(--blue);
      background: var(--blue);
      color: #fff;
      box-shadow: 0 0 8px rgba(37, 99, 235, 0.3);
    }

    /* 下拉选择与移除按钮微调 */
    .strategy-step-select {
      flex: 1;
      max-width: 360px;
    }

    /* 美化过的虚线添加按钮面板 */
    .strategy-chain-add-step-placeholder {
      border: 1px dashed var(--line);
      border-radius: 6px;
      padding: 10px;
      text-align: center;
      cursor: pointer;
      color: var(--muted);
      font-size: 12px;
      transition: all 0.2s;
      margin-left: 36px;
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 6px;
      background: var(--soft);
    }

    .strategy-chain-add-step-placeholder:hover {
      border-color: var(--blue);
      color: var(--blue);
      background: rgba(37, 99, 235, 0.02);
    }

    .strategy-chain-actions,
    .toolbar-row {
      display: flex;
      gap: 6px;
      flex-wrap: wrap;
      justify-content: flex-end;
      align-items: center;
    }

    .strategy-step-flow {
      display: flex;
      flex-wrap: wrap;
      gap: 6px;
      align-items: center;
      margin-top: 6px;
    }

    .strategy-step-flow span {
      border: 1px solid var(--line);
      border-radius: 6px;
      padding: 4px 6px;
      background: #fff;
      font-size: 11px;
      font-weight: 700;
    }

    .strategy-step-flow i {
      color: var(--muted);
      font-style: normal;
      font-size: 11px;
    }

    .account-performance-panel {
      display: grid;
      grid-template-rows: auto minmax(0, 1fr);
      gap: 6px;
      padding: 6px 8px;
      overflow: hidden;
      max-height: 560px;
      flex-shrink: 0;
    }

    .account-performance-grid {
      display: grid;
      grid-template-columns: repeat(4, minmax(178px, 1fr));
      gap: 6px;
      overflow-y: auto;
      overflow-x: hidden;
      align-content: start;
      min-height: 0;
    }

    .account-performance-card {
      display: grid;
      grid-template-rows: 26px minmax(0, 1fr);
      gap: 4px;
      border: 1px solid var(--line);
      border-radius: 6px;
      background: #fff;
      padding: 6px 8px;
      min-width: 0;
      align-content: start;
    }

    .account-card-head,
    .account-slot-main,
    .account-slot-stats {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 6px;
      min-width: 0;
    }

    .account-card-head {
      padding-bottom: 3px;
      border-bottom: 1px solid var(--line);
    }

    .account-strategy-title {
      min-width: 0;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
      font-size: 11px;
      font-weight: 800;
    }

    .account-total {
      flex: 0 0 auto;
      font-size: 11px;
      font-weight: 800;
      white-space: nowrap;
    }

    .account-slot-grid {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 4px;
      min-width: 0;
    }

    .account-interval-row {
      display: grid;
      gap: 2px;
      min-width: 0;
      border-radius: 5px;
      background: var(--soft);
      padding: 4px 6px;
    }

    .account-slot-name {
      color: var(--muted);
      font-size: 11px;
      font-weight: 700;
      min-width: 0;
      overflow-wrap: anywhere;
    }

    .account-slot-stats {
      flex-direction: row;
      flex-wrap: wrap;
      align-items: center;
      justify-content: flex-end;
      gap: 2px 6px;
    }

    .account-slot-stats small,
    .account-order-stats span {
      color: var(--muted);
      font-size: 10px;
      font-weight: 700;
      line-height: 1.25;
    }

    .account-performance-card strong {
      font-size: 15px;
      line-height: 1.1;
      font-variant-numeric: tabular-nums;
      white-space: nowrap;
    }

    .account-order-stats {
      display: inline-flex;
      align-items: center;
      justify-content: flex-end;
      flex-wrap: wrap;
      gap: 4px;
      min-width: 0;
      white-space: normal;
    }

    .account-order-stats .account-stat-win {
      color: var(--green);
    }

    .account-order-stats .account-stat-loss {
      color: var(--red);
    }

    .account-order-stats .account-stat-total {
      color: var(--muted);
    }

    .account-order-stats .account-stat-rate {
      color: var(--blue);
    }

    .contracts-panel {
      display: grid;
      grid-template-rows: 32px minmax(0, 1fr) 28px;
      gap: 6px;
      padding: 7px 8px;
      overflow: hidden;
      min-height: 0;
    }

    .filter-bar {
      display: flex;
      align-items: center;
      flex-wrap: nowrap;
      gap: 9px;
      overflow-x: auto;
      overflow-y: hidden;
      scrollbar-width: thin;
    }

    .toolbar-group {
      display: flex;
      align-items: center;
      gap: 6px;
      min-width: 0;
      flex: 0 0 auto;
    }

    .filter-bar .filter-select {
      width: 110px;
    }

    .filter-bar .filter-strategy-version {
      width: 180px;
      max-width: 220px;
    }

    .filter-bar > .native-button {
      width: 64px;
    }

    .toolbar-time-range .el-radio-button__inner {
      padding: 5px 9px;
    }

    .toolbar-time-range button {
      width: auto;
    }

    .table-wrap {
      border: 1px solid var(--line);
      border-radius: 7px;
      background: var(--panel-bg);
      overflow: auto;
      min-width: 0;
      min-height: 0;
      height: 100%;
    }

    .contracts-table {
      width: 100%;
      border-collapse: collapse;
      table-layout: fixed;
    }

    .contracts-table th,
    .contracts-table td {
      height: 26px;
      padding: 0 6px;
      border-bottom: 1px solid var(--line);
      text-align: left;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
      line-height: 1.2;
    }

    .contracts-table th {
      position: sticky;
      top: 0;
      z-index: 1;
      height: 30px;
      color: var(--muted);
      font-size: 11px;
      font-weight: 700;
      background: var(--soft);
    }

    .contracts-table td {
      font-size: 14px;
    }

    .contracts-table tr:last-child td {
      border-bottom: 0;
    }

    .col-seq { width: 42px; text-align: center; padding-left: 4px; padding-right: 4px; }
    .col-id { width: 82px; }
    .col-direction { width: 54px; }
    .col-source { width: 76px; }
    .col-strategy { width: 116px; }
    .col-provider { width: 82px; }
    .col-interval { width: 62px; }
    .col-amount { width: 64px; text-align: right; }
    .col-price { width: 82px; text-align: right; }
    .col-time { width: 142px; min-width: 142px; white-space: nowrap; }
    .col-result { width: 52px; text-align: center; }
    .col-pnl { width: 66px; text-align: right; }

    .empty {
      display: grid;
      place-items: center;
      height: 100%;
      padding: 16px;
      text-align: center;
      color: var(--muted);
      font-size: 12px;
    }

    .pager {
      display: flex;
      align-items: center;
      justify-content: flex-end;
      gap: 8px;
      color: var(--muted);
      font-size: 11px;
      overflow: hidden;
    }

    .pager .el-pagination {
      justify-content: flex-end;
      max-width: 100%;
      overflow: hidden;
      --el-pagination-font-size: 11px;
      --el-pagination-button-width: 28px;
      --el-pagination-button-height: 24px;
      --el-pagination-button-disabled-bg-color: #fff;
    }

    .pager .el-pagination .el-select {
      width: 108px;
    }

    .strategy-step-select {
      width: 100%;
    }

    @media (max-width: 900px) {
      .app-shell {
        grid-template-columns: 230px minmax(0, 1fr);
        gap: 8px;
        padding: 8px;
      }

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

      .content-area {
        grid-template-rows: 44px minmax(0, 1fr);
      }

      .list-sheet {
        grid-template-rows: auto minmax(0, 1fr);
      }

      .account-performance-panel {
        max-height: 132px;
      }

      .account-performance-grid {
        grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
        overflow-y: auto;
      }

      .account-slot-grid {
        grid-template-columns: 1fr;
      }

      .contracts-panel {
        grid-template-rows: 32px minmax(0, 1fr) 28px;
      }

      .contracts-table th,
      .contracts-table td {
        height: 23px;
      }

      .strategy-panel {
        grid-template-columns: 1fr;
      }
    }

    /* ==========================================
       PREMIUM LIGHT THEME OVERRIDES
       ========================================== */
    :root {
      color-scheme: light;
      --page-bg: #F5F7FA;
      --panel-bg: #ffffff;
      --text: #1E2329;
      --muted: #707A8A;
      --line: #E3E8EE;
      --soft: #F8F9FC;
      --blue: #D49E00;
      --green: #00B074;
      --red: #EA3943;
      --amber: #D49E00;
      --violet: #7c3aed;

      /* Element Plus Global Variable Overrides */
      --el-color-primary: #D49E00 !important;
      --el-color-primary-light-3: #E6B41F !important;
      --el-color-primary-light-5: #F0C43F !important;
      --el-color-primary-light-7: #F7D97F !important;
      --el-color-primary-light-8: #FAE69F !important;
      --el-color-primary-light-9: #FCF2BF !important;
      --el-color-success: #00B074 !important;
      --el-color-danger: #EA3943 !important;
    }

    /* 1. Sidebar Brand Logo */
    .sidebar-logo {
      display: flex;
      align-items: center;
      gap: 6px;
      padding: 4px 6px 12px;
    }
    .sidebar-logo .logo-text {
      font-size: 15px;
      font-weight: 800;
      color: #1E2329;
      letter-spacing: 0.5px;
    }
    .sidebar-logo .logo-text span {
      color: #707A8A;
      font-weight: 600;
      font-size: 11px;
    }

    /* 2. Soft Shadows for cards & panels */
    .control-card,
    .content-header,
    .account-performance-panel,
    .contracts-panel,
    .strategy-section,
    .panel,
    .config-group {
      box-shadow: 0 1px 3px rgba(0, 0, 0, 0.02), 0 4px 12px rgba(0, 0, 0, 0.015);
      border-color: var(--line) !important;
    }

    /* 3. Manual Order Capsule Buttons */
    .manual-grid {
      gap: 8px 10px !important;
    }
    .manual-order-button {
      height: 32px !important;
      border-radius: 6px !important;
      font-weight: 700 !important;
      font-size: 12px !important;
      transition: all 0.2s ease !important;
      border: 1px solid transparent !important;
    }
    .manual-order-button.manual-order-up {
      background-color: #E6F8F3 !important;
      color: #00B074 !important;
      border-color: rgba(0, 176, 116, 0.15) !important;
    }
    .manual-order-button.manual-order-up:hover {
      background-color: #00B074 !important;
      color: #ffffff !important;
      border-color: #00B074 !important;
    }
    .manual-order-button.manual-order-down {
      background-color: #FCECEF !important;
      color: #EA3943 !important;
      border-color: rgba(234, 57, 67, 0.15) !important;
    }
    .manual-order-button.manual-order-down:hover {
      background-color: #EA3943 !important;
      color: #ffffff !important;
      border-color: #EA3943 !important;
    }

    /* 4. Sheet Tab Navigation */
    .sheet-tabs {
      background: #EAECEF !important;
      border-color: #E3E8EE !important;
      padding: 3px !important;
    }
    .sheet-tabs a {
      transition: all 0.2s ease;
      color: var(--muted) !important;
    }
    .sheet-tabs a[aria-current="page"] {
      background: #ffffff !important;
      color: var(--amber) !important;
      border: 1px solid #E3E8EE !important;
      border-bottom: 2px solid var(--amber) !important;
      box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05) !important;
    }

    /* 5. Account Overview Nested Card layout */
    .account-performance-grid {
      display: grid;
      grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)) !important;
      gap: 12px !important;
    }
    .account-performance-card {
      background: #ffffff !important;
      border: 1px solid #E3E8EE !important;
      border-radius: 8px !important;
      padding: 12px 14px !important;
      box-shadow: 0 1px 3px rgba(0, 0, 0, 0.02), 0 4px 12px rgba(0, 0, 0, 0.015) !important;
    }
    .account-card-head {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding-bottom: 8px;
      border-bottom: 1px solid #F1F3F7;
      margin-bottom: 8px;
    }
    .account-strategy-title {
      font-size: 13px;
      font-weight: 750;
      color: #1E2329;
    }
    .account-total {
      font-size: 12px;
      font-weight: 700;
    }
    .account-slot-grid {
      grid-template-columns: 1fr !important;
      gap: 0px !important;
    }
    .account-interval-row {
      display: block !important;
      background: transparent !important;
      padding: 8px 0 !important;
      border-radius: 0 !important;
      border-top: 1px dashed #E3E8EE !important;
    }
    .account-interval-row:first-child {
      border-top: none !important;
      padding-top: 4px !important;
    }
    .account-slot-main {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-bottom: 4px;
    }
    .account-slot-name {
      font-size: 12px;
      font-weight: 600;
      color: #4A5568;
    }
    .account-slot-main strong {
      font-size: 13px;
      font-weight: 750;
    }
    .account-slot-stats {
      display: flex;
      font-size: 11px;
      color: #707A8A;
    }
    .account-order-stats {
      display: flex !important;
      justify-content: space-between !important;
      gap: 8px;
      width: 100% !important;
    }
    .account-stat-win { color: #00B074; font-weight: 600; }
    .account-stat-loss { color: #EA3943; font-weight: 600; }
    .account-stat-rate { margin-left: auto; font-weight: 700; color: #1E2329; }

    /* 5.5 Price Pulse Dot */
    .price-symbol::after {
      content: " ●";
      color: #00B074;
      font-size: 10px;
      vertical-align: middle;
      display: inline-block;
      animation: pulse-dot 1.5s infinite;
    }
    @keyframes pulse-dot {
      0% { opacity: 0.3; }
      50% { opacity: 1; }
      100% { opacity: 0.3; }
    }

    /* 6. Table Layout & Chip Badges */
    .contracts-table {
      border-collapse: collapse !important;
    }
    .contracts-table th {
      background-color: var(--soft) !important;
      color: var(--muted) !important;
      font-weight: 700 !important;
      border-bottom: 2px solid var(--line) !important;
      padding: 10px 12px !important;
    }
    .contracts-table td {
      border-bottom: 1px solid #F1F3F7 !important;
      padding: 10px 12px !important;
      color: var(--text) !important;
    }
    .contracts-table tr:hover td {
      background-color: #F8F9FC !important;
    }
    .contracts-table .col-seq {
      color: #707A8A !important;
      opacity: 0.8;
    }
    .direction-up, .result-win {
      display: inline-flex !important;
      align-items: center !important;
      justify-content: center !important;
      padding: 3px 8px !important;
      border-radius: 4px !important;
      background-color: #E6F8F3 !important;
      color: #00B074 !important;
      font-weight: 700 !important;
      font-size: 11px !important;
      line-height: 1 !important;
      border: 1px solid rgba(0, 176, 116, 0.15) !important;
    }
    .direction-down, .result-loss {
      display: inline-flex !important;
      align-items: center !important;
      justify-content: center !important;
      padding: 3px 8px !important;
      border-radius: 4px !important;
      background-color: #FCECEF !important;
      color: #EA3943 !important;
      font-weight: 700 !important;
      font-size: 11px !important;
      line-height: 1 !important;
      border: 1px solid rgba(234, 57, 67, 0.15) !important;
    }
    .result-draw, .result-pending {
      display: inline-flex !important;
      align-items: center !important;
      justify-content: center !important;
      padding: 3px 8px !important;
      border-radius: 4px !important;
      background-color: #FFF7E0 !important;
      color: #B7791F !important;
      font-weight: 700 !important;
      font-size: 11px !important;
      line-height: 1 !important;
      border: 1px solid rgba(183, 121, 31, 0.18) !important;
    }
    .result-exception {
      display: inline-flex !important;
      align-items: center !important;
      justify-content: center !important;
      padding: 3px 8px !important;
      border-radius: 4px !important;
      background-color: #F1F3F7 !important;
      color: #707A8A !important;
      font-weight: 700 !important;
      font-size: 11px !important;
      line-height: 1 !important;
      border: 1px solid #E3E8EE !important;
    }

    /* 7. Strategy parameter grid & Status chips */
    .readonly-param {
      background: #ffffff !important;
      border-color: var(--line) !important;
      border-radius: 6px !important;
    }
    .readonly-summary-item, .readonly-session-card {
      background: var(--soft) !important;
      border-color: var(--line) !important;
    }
    .readonly-status.enabled {
      background: #E6F8F3 !important;
      color: #00B074 !important;
      border-color: rgba(0, 176, 116, 0.2) !important;
      font-weight: 700;
    }
    .readonly-status {
      font-weight: 600;
      border-radius: 4px !important;
    }

    /* 8. Strategy Chain Visual tweaks */
    .chain-editor-item {
      background: var(--soft) !important;
      border-color: var(--line) !important;
    }
    .recipient-section {
      background: var(--soft) !important;
      border-color: var(--line) !important;
    }
    .push-recipient-card {
      border-color: var(--line) !important;
    }
    .push-recipient-status.enabled {
      background: #E6F8F3 !important;
      color: #00B074 !important;
      border-color: rgba(0, 176, 116, 0.2) !important;
      font-weight: 700;
    }
    .push-recipient-status.disabled {
      background: #FCECEF !important;
      color: #EA3943 !important;
      border-color: rgba(234, 57, 67, 0.2) !important;
      font-weight: 700;
    }

    /* 9. Strategy Summary Params & Status Badge */
    .strategy-param-summary-grid {
      display: grid !important;
      grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)) !important;
      gap: 6px !important;
      margin-top: 8px !important;
    }
    .strategy-param-summary-item {
      display: flex !important;
      flex-direction: column !important;
      background: var(--soft) !important;
      border: 1px solid var(--line) !important;
      border-radius: 6px !important;
      padding: 6px 8px !important;
    }
    .strategy-param-summary-item .param-label {
      font-size: 10px !important;
      color: var(--muted) !important;
      font-weight: 600 !important;
      margin-bottom: 2px !important;
    }
    .strategy-param-summary-item .param-value {
      font-size: 12px !important;
      color: var(--text) !important;
      font-weight: 750 !important;
    }
    .strategy-active-badge {
      display: inline-flex !important;
      align-items: center !important;
      justify-content: center !important;
      padding: 2px 6px !important;
      border-radius: 4px !important;
      font-size: 11px !important;
      font-weight: 700 !important;
      background-color: #F1F3F7 !important;
      color: #707A8A !important;
      border: 1px solid #E3E8EE !important;
    }
    .strategy-active-badge.active {
      background-color: #E6F8F3 !important;
      color: #00B074 !important;
      border-color: rgba(0, 176, 116, 0.15) !important;
    }
    .real-order-state {
      min-width: 92px !important;
      height: 27px !important;
      padding: 0 8px !important;
    }

    /* 10. Horizontal Flowchart connectors for Strategy Chains */
    .strategy-chain-steps-container {
      display: flex !important;
      flex-direction: row !important;
      flex-wrap: wrap !important;
      align-items: center !important;
      gap: 12px 28px !important;
      padding: 8px 0 !important;
      margin-left: 0px !important;
    }
    .strategy-chain-steps-container::before {
      display: none !important;
    }
    .strategy-step-row {
      position: relative !important;
      display: inline-flex !important;
      align-items: center !important;
      gap: 8px !important;
      background: #ffffff !important;
      border: 1px solid var(--line) !important;
      padding: 6px 10px !important;
      border-radius: 6px !important;
      box-shadow: 0 1px 3px rgba(0, 0, 0, 0.02) !important;
    }
    .strategy-step-row:not(:first-child)::before {
      content: "➔" !important;
      position: absolute !important;
      left: -22px !important;
      top: 50% !important;
      transform: translateY(-50%) !important;
      color: #D49E00 !important;
      font-size: 14px !important;
      font-weight: 700 !important;
    }
    .strategy-step-index {
      background: #FFF9E6 !important;
      color: #D49E00 !important;
      font-weight: 700 !important;
      width: 22px !important;
      height: 22px !important;
      border-radius: 50% !important;
      display: inline-flex !important;
      align-items: center !important;
      justify-content: center !important;
      font-size: 11px !important;
      border: 1px solid rgba(212, 158, 0, 0.2) !important;
    }

    /* 11. Push Recipient Cards Layout */
    .push-recipient-card {
      display: flex !important;
      align-items: center !important;
      justify-content: space-between !important;
      padding: 10px 14px !important;
      margin-bottom: 8px !important;
      background: #ffffff !important;
      border: 1px solid var(--line) !important;
      border-radius: 8px !important;
      box-shadow: 0 1px 3px rgba(0, 0, 0, 0.01) !important;
    }
    .push-recipient-info {
      flex: 1 !important;
      min-width: 0 !important;
    }
    .push-recipient-actions {
      display: flex !important;
      align-items: center !important;
      gap: 8px !important;
    }

    /* 12. Fix strategy list scrolling bug */
    .strategy-sheet,
    .push-sheet,
    .strategy-chain-sheet {
      height: 100% !important;
      min-height: 0 !important;
      overflow: hidden !important;
    }
    .strategy-panel {
      height: 100% !important;
      min-height: 0 !important;
      overflow: hidden !important;
    }
    .strategy-section {
      display: flex !important;
      flex-direction: column !important;
      overflow: hidden !important;
    }
    .strategy-list {
      display: flex !important;
      flex-direction: column !important;
      flex: 1 !important;
      overflow-y: auto !important;
      gap: 10px !important;
      padding-right: 6px !important;
    }
    .strategy-item {
      flex-shrink: 0 !important;
    }
  


/* 页面数据为空时仍保持紧凑，避免继承旧控制台的全高工作区。 */
html, body, #app { height: auto; min-height: 100%; }
body { overflow: auto; }
.app-shell { height: auto; min-height: 100vh; overflow: visible; }
.sidebar { min-height: calc(100vh - 20px); height: auto; overflow: visible; }
.content-area { display: block; min-height: calc(100vh - 20px); height: auto; overflow: visible; }
.content-header { height: 48px; margin-bottom: 10px; }
.list-sheet { display: grid; grid-template-rows: auto auto; min-height: 0; overflow: visible; }
.order-sheet { display: grid; grid-template-rows: auto auto minmax(320px, 1fr); gap: 0; background: var(--panel-bg); border: 1px solid var(--line); border-radius: 8px; overflow: hidden; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.02), 0 4px 12px rgba(0, 0, 0, 0.015); }
.sheet-header { display: flex; align-items: center; justify-content: space-between; min-height: 54px; padding: 10px 14px; border-bottom: 1px solid var(--line); background: var(--panel-bg); }
.sheet-header h1 { margin: 0; color: var(--text); font-size: 16px; line-height: 1.2; }
.order-sheet .account-performance-panel, .order-sheet .contracts-panel { border: 0; border-radius: 0; box-shadow: none; }
.order-sheet .account-performance-panel { border-bottom: 1px solid var(--line); }
.order-sheet .contracts-panel { display: grid; grid-template-rows: minmax(0, 1fr) auto; min-height: 320px; padding: 0 8px 8px; overflow: hidden; }
.order-sheet .contracts-panel .table-wrap { height: auto; min-height: 0; overflow: auto; }
.order-sheet .pager { min-height: 34px; overflow: visible; }
.order-sheet .pager .el-pagination { overflow: visible; }
.account-performance-panel { max-height: none; min-height: 132px; overflow: visible; }
.account-performance-grid { min-height: 96px; max-height: none; overflow: visible; }
.contracts-panel { display: block; min-height: 320px; overflow: visible; }
.contracts-panel .table-wrap { min-height: 160px; overflow: auto; }
.contracts-panel .pager { margin-top: 8px; }
.contracts-table td.col-direction, .contracts-table td.col-result { text-align: center !important; vertical-align: middle !important; }
.order-strategy-main, .order-strategy-provider { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.order-strategy-main { color: var(--text); font-weight: 700; }
.order-strategy-provider { margin-top: 2px; color: var(--muted); font-size: 11px; }
.profit { color: #00B074 !important; font-weight: 700 !important; }
.loss { color: #EA3943 !important; font-weight: 700 !important; }
.native-button-group { display: flex; flex-wrap: wrap; gap: 6px; }
.native-button-group .native-button { width: auto; }
.query-card { gap: 8px; }
.query-fields { display: grid; gap: 7px; }
.query-fields .toolbar-group { display: grid; grid-template-columns: 56px minmax(0, 1fr); gap: 6px; align-items: center; }
.query-fields .toolbar-group label { color: var(--muted); font-size: 11px; }
.query-fields .el-input, .query-fields .el-select { min-width: 0; width: 100%; }
.query-time-group { display: block !important; }
.query-time-group > label { display: block; margin-bottom: 5px; }
.query-time-group .el-radio-group { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); width: 100%; }
.query-time-group .el-radio-button, .query-time-group .el-radio-button__inner { width: 100%; }
.query-time-group .el-radio-button__inner { padding: 6px 2px; font-size: 11px; }
@media (max-width: 900px) {
  .app-shell { display: block; }
  .sidebar { min-height: auto; margin-bottom: 10px; }
  .content-area { min-height: auto; }
  .content-header { height: auto; min-height: 48px; }
}

/* 空数据和长事件流的实际页面边界。 */
.account-performance-panel { min-height: 0; }
.account-performance-grid { min-height: 92px; max-height: 236px; grid-template-columns: repeat(auto-fill, 240px) !important; grid-auto-rows: 112px; overflow-y: auto; align-content: start; }
.account-performance-card { display: flex; flex-direction: column; width: 240px; height: 112px; gap: 8px; padding: 10px 12px !important; }
.account-card-title { display: grid; grid-template-columns: 22px minmax(0, 1fr) auto; grid-template-rows: repeat(2, min-content); align-items: center; gap: 2px 8px; min-width: 0; padding-bottom: 7px; border-bottom: 1px solid #F1F3F7; }
.account-identity { display: grid; gap: 3px; min-width: 0; }
.account-strategy-title { line-height: 1.1; }
.account-card-meta { display: flex; align-items: center; gap: 2px; min-width: 0; }
.account-provider { color: var(--muted); font-size: 11px; line-height: 1.1; }
.account-symbol-icon { grid-row: 1 / span 2; display: inline-grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; color: #fff; font-size: 13px; font-weight: 800; line-height: 1; }
.account-identity { grid-row: 1 / span 2; }
.account-total { grid-row: 1 / span 2; align-self: center; }
.account-metric-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 5px; min-width: 0; }
.account-metric { display: grid; gap: 2px; min-width: 0; padding: 5px 6px; border-radius: 6px; background: var(--soft); }
.account-metric-label { color: var(--muted); font-size: 10px; line-height: 1.1; }
.account-metric-value { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 11px !important; line-height: 1.1; }
.contracts-panel { min-height: 0; }
.contracts-panel .table-wrap { min-height: 130px; }
.event-list { max-height: calc(100vh - 250px); overflow-y: auto; }
@media (max-width: 900px) {
  .account-performance-grid { grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)) !important; grid-auto-rows: auto; max-height: none; }
  .account-performance-card { width: auto; height: auto; }
}
@media (min-width: 901px) {
  html, body, #app { height: 100%; min-height: 0; }
  .app-shell { height: 100vh; min-height: 0; overflow: hidden; }
  .sidebar { height: calc(100vh - 20px); min-height: 0; overflow: hidden; }
  .content-area { height: calc(100vh - 20px); min-height: 0; overflow: hidden; }
  .order-sheet { height: 100%; min-height: 0; grid-template-rows: auto 268px minmax(0, 1fr); }
  .order-sheet .account-performance-panel { min-height: 0; max-height: 268px; overflow: hidden; }
  .order-sheet .account-performance-grid { min-height: 0; max-height: 236px; overflow-y: auto; }
  .order-sheet .contracts-panel { min-height: 0; }
}
@media (min-width: 901px) {
  html, body, #app { height: auto; min-height: 100%; }
  .app-shell { height: auto; min-height: 100vh; overflow: visible; }
  .sidebar { height: auto; min-height: calc(100vh - 20px); overflow: visible; }
  .content-area { height: auto; min-height: calc(100vh - 20px); overflow: visible; }
  .order-sheet { height: auto; min-height: 0; grid-template-rows: auto auto auto; overflow: visible; }
  .order-sheet .account-performance-panel { max-height: 268px; overflow: hidden; }
  .order-sheet .account-performance-grid { max-height: 236px; overflow-y: auto; }
  .order-sheet .contracts-panel { display: block; width: 100%; min-width: 0; min-height: 0; overflow: visible; }
  .order-sheet .contracts-panel .table-wrap { width: 100%; height: auto; min-height: 0; overflow-x: auto; overflow-y: hidden; }
}