.market-grid {
      display: grid;
      grid-template-columns: repeat(3, minmax(0, 1fr));
      gap: 8px;
      margin-bottom: 10px;
    }
    .metric {
      border: 1px solid var(--line);
      border-radius: 8px;
      background: var(--panel);
      padding: 8px;
      min-height: 58px;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      text-align: center;
    }
    .metric .label {
      color: var(--muted);
      font-size: 12px;
      margin-bottom: 4px;
    }
    .metric .value {
      font-size: 19px;
      font-weight: 700;
      letter-spacing: 0;
      overflow-wrap: anywhere;
    }
    .stats-grid {
      display: grid;
      grid-template-columns: repeat(4, minmax(0, 1fr));
      gap: 8px;
      margin: 8px 0;
    }
    .strategy-stats-grid {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 8px;
      margin: 8px 0;
    }
    .strategy-stats-grid.single {
      grid-template-columns: 1fr;
    }
    .strategy-stats-title {
      color: var(--muted);
      font-size: 12px;
      font-weight: 750;
      margin: 0 0 8px;
      text-align: center;
      text-transform: uppercase;
    }
    .strategy-stats-cells {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 8px;
    }
    .stat {
      border: 1px solid var(--line);
      border-radius: 8px;
      background: var(--panel2);
      padding: 8px;
      min-height: 54px;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      text-align: center;
    }
    .stat .label {
      color: var(--muted);
      font-size: 12px;
      margin-bottom: 3px;
    }
    .stat .value {
      font-size: 16px;
      font-weight: 700;
    }
    .section-title {
      color: var(--muted);
      font-size: 12px;
      font-weight: 700;
      letter-spacing: 0;
      margin: 10px 0 6px;
      text-transform: uppercase;
    }
    .funding-grid {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 8px;
      margin-bottom: 10px;
    }
    .funding-card {
      border: 1px solid var(--line);
      border-radius: 8px;
      background: var(--panel);
      padding: 8px;
      min-width: 0;
    }
    .funding-head {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 10px;
      margin-bottom: 6px;
      text-align: center;
    }
    .funding-symbol {
      font-size: 14px;
      font-weight: 750;
    }
    .funding-age {
      color: var(--muted);
      font-size: 12px;
      white-space: nowrap;
    }
    .funding-values {
      display: grid;
      grid-template-columns: repeat(4, minmax(0, 1fr));
      gap: 6px;
    }
    .funding-cell {
      border: 1px solid var(--line);
      border-radius: 8px;
      background: var(--panel2);
      padding: 6px;
      min-height: 50px;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      text-align: center;
    }
    .funding-cell .label {
      color: var(--muted);
      font-size: 11px;
      margin-bottom: 3px;
    }
    .funding-cell .value {
      font-size: 14px;
      font-weight: 720;
      overflow-wrap: anywhere;
    }
    .chart-head {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 12px;
      margin: 10px 0 6px;
    }
    .view-controls {
      display: flex;
      gap: 6px;
      flex-wrap: wrap;
      justify-content: flex-start;
    }
    .controls {
      display: flex;
      gap: 6px;
      flex-wrap: wrap;
      justify-content: flex-end;
    }
    button {
      border: 1px solid var(--line);
      border-radius: 8px;
      background: #12151b;
      color: var(--text);
      height: 30px;
      padding: 0 9px;
      cursor: pointer;
    }
    button:hover {
      border-color: #555762;
    }
    button.active {
      border-color: var(--blue);
      color: var(--blue);
    }
    .live-toggle.active {
      border-color: var(--green);
      color: var(--green);
      background: rgba(33, 197, 139, 0.08);
    }
    .chart-stack {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 10px;
    }
    .chart-stack.single {
      grid-template-columns: 1fr;
    }
    .chart-box {
      border: 1px solid var(--line);
      border-radius: 8px;
      background: var(--panel);
      padding: 12px;
      height: min(42vh, 480px);
      min-height: 340px;
      position: relative;
      display: flex;
      flex-direction: column;
      min-width: 0;
    }
    .hedge-history-panel {
      border: 1px solid var(--line);
      border-radius: 8px;
      background: var(--panel);
      padding: 12px;
      margin: 10px 0 0;
      min-width: 0;
    }
    .hedge-chart-box {
      position: relative;
      height: min(28vh, 300px);
      min-height: 210px;
      margin-top: 8px;
      min-width: 0;
    }
    .chart-title {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 10px;
      margin-bottom: 10px;
      min-width: 0;
    }
    .chart-title .name {
      font-size: 14px;
      font-weight: 750;
      text-align: center;
      overflow-wrap: anywhere;
    }
    .chart-canvas {
      position: relative;
      flex: 1;
      min-height: 0;
    }
    .empty {
      position: absolute;
      inset: 0;
      display: none;
      align-items: center;
      justify-content: center;
      color: var(--muted);
      border: 1px dashed var(--line);
      border-radius: 8px;
      pointer-events: none;
    }
    .empty.show { display: flex; }
    .loading {
      position: absolute;
      top: 12px;
      right: 12px;
      z-index: 4;
      display: none;
      align-items: center;
      gap: 8px;
      border: 1px solid var(--line);
      border-radius: 8px;
      background: rgba(13, 14, 16, 0.88);
      color: var(--text);
      padding: 7px 10px;
      font-size: 12px;
      font-weight: 700;
      pointer-events: none;
    }
    .loading.show { display: flex; }
    .loading::before {
      content: "";
      width: 12px;
      height: 12px;
      border: 2px solid rgba(238, 242, 248, 0.24);
      border-top-color: var(--blue);
      border-radius: 50%;
      animation: spin 0.75s linear infinite;
    }
    @keyframes spin {
      to { transform: rotate(360deg); }
    }
    canvas {
      width: 100% !important;
      height: 100% !important;
      cursor: grab;
      touch-action: none;
      user-select: none;
    }
    .chart-box.grabbing canvas,
    .hedge-chart-box.grabbing canvas {
      cursor: grabbing;
    }
    .chart-box.axis-x-hover canvas,
    .chart-box.axis-x-dragging canvas,
    .hedge-chart-box.axis-x-hover canvas,
    .hedge-chart-box.axis-x-dragging canvas {
      cursor: ew-resize;
    }
    .chart-box.axis-y-hover canvas,
    .chart-box.axis-y-dragging canvas,
    .hedge-chart-box.axis-y-hover canvas,
    .hedge-chart-box.axis-y-dragging canvas {
      cursor: ns-resize;
    }
    .links {
      display: flex;
      gap: 10px;
      flex-wrap: wrap;
      color: var(--muted);
    }
    .links a {
      border: 1px solid var(--line);
      border-radius: 8px;
      padding: 5px 8px;
      text-decoration: none;
      background: #12151b;
      font-size: 12px;
    }
    @media (max-width: 1280px) {
      .bot-jobs-list {
        grid-template-columns: repeat(3, minmax(0, 1fr));
      }
    }
    @media (max-width: 900px) {
      header, .chart-head { align-items: flex-start; flex-direction: column; }
      .status, .controls, .view-controls, .links { justify-content: flex-start; }
      .pair-toolbar { grid-template-columns: 1fr; gap: 8px; }
      .pair-selector { width: min(100%, 360px); }
      .market-ribbon { grid-template-columns: 1fr; }
      .market-hedge-card { min-height: 62px; }
      .instrument-ribbon { grid-template-columns: minmax(118px, 0.78fr) minmax(120px, 0.82fr) minmax(0, 2fr); }
      .strategy-ribbon { grid-template-columns: 1fr; }
      .strategy-ribbon-title,
      .strategy-signal-row { border-right: 0; border-bottom: 1px solid var(--line); }
      .strategy-grid { grid-template-columns: 1fr; }
      .admin-grid,
      .admin-two-col { grid-template-columns: 1fr; }
      .bot-create-form,
      .bot-job-edit { grid-template-columns: repeat(2, minmax(0, 1fr)); }
      .bot-level-editor { grid-template-columns: repeat(2, minmax(0, 1fr)); }
      .bot-alert-layout { grid-template-columns: repeat(2, minmax(0, 1fr)); }
      .bot-jobs-list,
      .pair-bot-panel .bot-jobs-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
      .bot-metric-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
      .bot-job-top { flex-direction: column; }
      .bot-job-side {
        width: 100%;
        max-width: 100%;
        justify-content: flex-start;
      }
      .bot-job-status { text-align: left; }
      .market-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
      .stats-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
      .strategy-stats-grid { grid-template-columns: 1fr; }
      .funding-grid { grid-template-columns: 1fr; }
      .chart-stack { grid-template-columns: 1fr; }
    }
    @media (max-width: 520px) {
      .wrap { width: min(100vw - 20px, 1380px); padding-top: 12px; }
      .pair-selector { width: 100%; }
      .all-pairs-action { width: min(100%, 260px); }
      .admin-table { min-width: 560px; }
      .access-table { min-width: 1060px; }
      .access-form { grid-template-columns: 1fr; }
      .bot-create-form,
      .bot-job-edit,
      .bot-alert-layout,
      .bot-alert-form,
      .bot-alert-rules,
      .bot-jobs-list,
      .pair-bot-panel .bot-jobs-list,
      .bot-metric-grid { grid-template-columns: 1fr; }
      .bot-alert-watchdog,
      .bot-alert-pushover,
      .bot-alert-balance,
      .bot-alert-spread {
        grid-template-rows: none;
        align-content: start;
      }
      .bot-alert-group-grid { grid-template-columns: 1fr; }
      .bot-level-editor { grid-template-columns: 1fr; }
      .bot-metric-unavailable { display: none; }
      .bot-create-level-field,
      .bot-create-pair-field { grid-column: span 1; }
      .bot-runtime div { grid-template-columns: 1fr; }
      .bot-toolbar { justify-content: flex-start; }
      .admin-pairs-table { min-width: 680px; }
      .admin-action-row { justify-content: flex-start; }
      .compact-table { min-width: 640px; font-size: 11px; }
      .market-summary-table { min-width: 640px; }
      .strategy-summary-table { min-width: 720px; }
      .compact-table th,
      .compact-table td { padding: 5px 7px; }
      .compact-table .large-value { font-size: 15px; }
      .instrument-ribbon { grid-template-columns: 1fr; }
      .instrument-title,
      .instrument-quote { border-right: 0; border-bottom: 1px solid var(--line); }
      .instrument-title,
      .instrument-quote,
      .mini-metric { padding: 7px 8px; }
      .instrument-metrics { grid-template-columns: repeat(2, minmax(0, 1fr)); }
      .mini-metric { border-bottom: 1px solid var(--line); }
      .mini-metric:nth-child(2n) { border-right: 0; }
      .mini-metric:last-child { grid-column: 1 / -1; border-right: 0; border-bottom: 0; }
      .strategy-stat-row { grid-template-columns: repeat(2, minmax(0, 1fr)); }
      .stat-chip:nth-child(2n) { border-right: 0; }
      .stat-chip:nth-last-child(-n + 2) { border-bottom: 0; }
      .stat-chip { border-bottom: 1px solid var(--line); }
      .signal-card strong { font-size: 20px; }
      .strategy-values, .market-grid, .stats-grid, .strategy-stats-cells, .funding-values { grid-template-columns: 1fr; }
      .funding-values { grid-template-columns: repeat(2, minmax(0, 1fr)); }
      .chart-box { min-height: 250px; }
      .chart-title { align-items: center; justify-content: center; text-align: center; }
    }