/* ================================================================
   币钱袋 (CryptoQuant) Web Console — Design System v3.0
   基于 Impeccable + design-taste-frontend 审计升级
   ================================================================ */

/* ── 1. Design Tokens — Semi Design v2 调色板 ──────────────────
   Default: Dark mode(深色模式)
   主色 Blue 5 #0064FA(亮蓝),与 New API/Semi 视觉一致
   灰阶取自 Semi Grey 0-9
   ──────────────────────────────────────────────────────────── */
:root {
  /* Color — Brand (Semi Blue) */
  --cq-color-primary:        #4D7FFF;
  --cq-color-primary-hover:  #6F97FF;
  --cq-color-primary-active: #2E66E6;
  --cq-color-primary-muted:  rgba(77,127,255,0.16);
  --cq-color-primary-subtle: rgba(77,127,255,0.08);

  /* Color — Semantic */
  --cq-color-profit:         #00A870;
  --cq-color-profit-muted:   rgba(0,168,112,0.16);
  --cq-color-loss:           #F93920;
  --cq-color-loss-muted:     rgba(249,57,32,0.16);
  --cq-color-warning:        #FFB400;
  --cq-color-warning-muted:  rgba(255,180,0,0.16);
  --cq-color-info:           #4D7FFF;
  --cq-color-info-muted:     rgba(77,127,255,0.16);

  /* Color — Surfaces (Dark, Semi 灰阶) */
  --cq-bg-l0:  #0E1015;       /* Page background */
  --cq-bg-l1:  #16181D;       /* Header / Sider */
  --cq-bg-l2:  #1C1F23;       /* Card */
  --cq-bg-l3:  #2A2D33;       /* Hover / Selected lighter */

  /* Color — Borders */
  --cq-border-default:  rgba(255,255,255,0.08);
  --cq-border-hover:    rgba(255,255,255,0.16);
  --cq-border-active:   var(--cq-color-primary);
  --cq-border-subtle:   rgba(255,255,255,0.04);

  /* Color — Text (Semi Grey 0-4 inverted) */
  --cq-text-primary:    #E8EAED;   /* Grey 0 */
  --cq-text-secondary:  #C5C7CA;   /* Grey 1 */
  --cq-text-tertiary:   #9AA0A6;   /* Grey 3 */
  --cq-text-disabled:   #5F6368;   /* Grey 5 */

  /* Avatar palette — 数据看板 6 色彩条(蓝紫绿青黄粉) */
  --cq-avatar-blue:    #4D7FFF;
  --cq-avatar-violet:  #B85AFF;
  --cq-avatar-green:   #00A870;
  --cq-avatar-cyan:    #00B8D9;
  --cq-avatar-yellow:  #FFB400;
  --cq-avatar-pink:    #F758C0;
  --cq-avatar-orange:  #FF7D00;

  /* Color — Exchange brands */
  --cq-color-binance:  #F0B90B;
  --cq-color-okx:      #FFFFFF;
  --cq-color-htx:      #2A6EDB;

  /* Typography */
  --cq-font-sans:  'Geist Sans', 'Inter', 'PingFang SC', 'Noto Sans SC', system-ui, -apple-system, sans-serif;
  --cq-font-mono:  'JetBrains Mono', 'Geist Mono', 'Fira Code', ui-monospace, monospace;

  --cq-text-xs:   12px;
  --cq-text-sm:   13px;
  --cq-text-base: 14px;
  --cq-text-md:   14px;
  --cq-text-lg:   16px;
  --cq-text-xl:   18px;
  --cq-text-2xl:  20px;
  --cq-text-3xl:  24px;
  --cq-text-4xl:  30px;

  /* Spacing — Semi 间距阶 */
  --cq-space-1:  4px;
  --cq-space-2:  8px;
  --cq-space-3:  12px;
  --cq-space-4:  16px;
  --cq-space-5:  20px;
  --cq-space-6:  24px;
  --cq-space-8:  32px;
  --cq-space-10: 40px;
  --cq-space-12: 48px;

  /* Radius — Semi 圆角阶(更克制) */
  --cq-radius-sm:   3px;
  --cq-radius-md:   6px;
  --cq-radius-lg:   8px;
  --cq-radius-xl:   12px;
  --cq-radius-full: 9999px;

  /* Shadows — Semi elevation 三档 */
  --cq-shadow-xs: 0 1px 2px rgba(0,0,0,0.30);
  --cq-shadow-sm: 0 2px 6px rgba(0,0,0,0.32);
  --cq-shadow-md: 0 4px 12px rgba(0,0,0,0.36);
  --cq-shadow-lg: 0 8px 24px rgba(0,0,0,0.42);

  /* Transitions */
  --cq-duration-fast:   150ms;
  --cq-duration-normal: 200ms;
  --cq-duration-slow:   300ms;
  --cq-ease-default:    cubic-bezier(0.4, 0, 0.2, 1);

  /* Layout — 与 New API/Semi 实际尺寸对齐 */
  --cq-sidebar-width:           180px;
  --cq-sidebar-width-collapsed: 60px;
  --cq-sidebar-current-width:   var(--cq-sidebar-width);
  --cq-header-height:           64px;
  --cq-content-max-width:       1440px;

  /* Header 玻璃态背景(深色) */
  --cq-header-bg:               rgba(22,24,29,0.75);
  --cq-header-blur:             saturate(180%) blur(12px);

  /* Theme toggle icon */
  --cq-theme-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='%239AA0A6' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79z'/%3E%3C/svg%3E");
}

/* ── Light Theme — Semi 浅色模式 ─────────────────────────────── */
[data-theme="light"] {
  --cq-color-primary:        #0064FA;
  --cq-color-primary-hover:  #2E80FB;
  --cq-color-primary-active: #0050D6;
  --cq-color-primary-muted:  rgba(0,100,250,0.10);
  --cq-color-primary-subtle: rgba(0,100,250,0.05);

  --cq-color-profit:         #00A870;
  --cq-color-profit-muted:   rgba(0,168,112,0.10);
  --cq-color-loss:           #F93920;
  --cq-color-loss-muted:     rgba(249,57,32,0.10);
  --cq-color-warning:        #FFB400;
  --cq-color-warning-muted:  rgba(255,180,0,0.10);
  --cq-color-info:           #0064FA;
  --cq-color-info-muted:     rgba(0,100,250,0.10);

  --cq-bg-l0:  #F5F6F7;
  --cq-bg-l1:  #FFFFFF;
  --cq-bg-l2:  #FFFFFF;
  --cq-bg-l3:  #F0F1F2;

  --cq-border-default:  rgba(28,31,35,0.08);
  --cq-border-hover:    rgba(28,31,35,0.16);
  --cq-border-subtle:   rgba(28,31,35,0.05);

  --cq-text-primary:    #1C1F23;
  --cq-text-secondary:  #41464C;
  --cq-text-tertiary:   #6B7075;
  --cq-text-disabled:   #A7ABB0;

  --cq-color-binance:  #C59B08;
  --cq-color-okx:      #1E293B;
  --cq-color-htx:      #1D4ED8;

  --cq-shadow-xs: 0 1px 2px rgba(0,0,0,0.04);
  --cq-shadow-sm: 0 2px 6px rgba(0,0,0,0.06);
  --cq-shadow-md: 0 4px 12px rgba(0,0,0,0.08);
  --cq-shadow-lg: 0 8px 24px rgba(0,0,0,0.10);

  /* Header 玻璃态背景(浅色) */
  --cq-header-bg:               rgba(255,255,255,0.75);
  --cq-header-blur:             saturate(180%) blur(12px);

  --cq-theme-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='%2341464C' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='5'/%3E%3Cline x1='12' y1='1' x2='12' y2='3'/%3E%3Cline x1='12' y1='21' x2='12' y2='23'/%3E%3Cline x1='4.22' y1='4.22' x2='5.64' y2='5.64'/%3E%3Cline x1='18.36' y1='18.36' x2='19.78' y2='19.78'/%3E%3Cline x1='1' y1='12' x2='3' y2='12'/%3E%3Cline x1='21' y1='12' x2='23' y2='12'/%3E%3Cline x1='4.22' y1='19.78' x2='5.64' y2='18.36'/%3E%3Cline x1='18.36' y1='5.64' x2='19.78' y2='4.22'/%3E%3C/svg%3E");
}

/* Body 折叠态:切换 sidebar 当前宽度 */
body.is-sidebar-collapsed {
  --cq-sidebar-current-width: var(--cq-sidebar-width-collapsed);
}

/* ── 2. Reset & Base ─────────────────────────────────────────── */
*, *::before, *::after { -webkit-tap-highlight-color: transparent; box-sizing: border-box; margin: 0; padding: 0; }

body {
  font-family: var(--cq-font-sans);
  font-size: var(--cq-text-base);
  font-weight: 400;
  line-height: 1.5;
  color: var(--cq-text-primary);
  background: var(--cq-bg-l0);
  min-height: 100dvh;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  transition: background-color var(--cq-duration-slow) var(--cq-ease-default),
              color var(--cq-duration-slow) var(--cq-ease-default);
}

/* Numeric text — tabular numbers for alignment */
.cq-num, .stat-value, .data-table td, .metric-value {
  font-family: var(--cq-font-mono);
  font-feature-settings: "tnum";
  letter-spacing: -0.02em;
}

/* ── 3. Login Page ───────────────────────────────────────────── */
.login-wrap {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100dvh;
  padding: var(--cq-space-5);
  background: var(--cq-bg-l0);
}

.login-card {
  background: var(--cq-bg-l1);
  border: 1px solid var(--cq-border-default);
  border-radius: var(--cq-radius-xl);
  padding: var(--cq-space-8) var(--cq-space-6);
  width: 100%;
  max-width: 400px;
  box-shadow: var(--cq-shadow-lg);
}

.login-card .cq-logo {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--cq-space-3);
  margin-bottom: var(--cq-space-2);
}

.login-card .cq-logo svg {
  width: 36px;
  height: 36px;
}

.login-card .cq-logo-text {
  font-size: var(--cq-text-2xl);
  font-weight: 700;
  color: var(--cq-text-primary);
  letter-spacing: -0.02em;
}

.login-card .subtitle {
  font-size: var(--cq-text-sm);
  color: var(--cq-text-tertiary);
  text-align: center;
  margin-bottom: var(--cq-space-8);
}

/* ── 4. Top Header(玻璃态,sticky 64px) ──────────────────────── */
.cq-header {
  position: sticky;
  top: 0;
  left: 0;
  right: 0;
  height: var(--cq-header-height);
  background: var(--cq-header-bg);
  -webkit-backdrop-filter: var(--cq-header-blur);
          backdrop-filter: var(--cq-header-blur);
  border-bottom: 1px solid var(--cq-border-default);
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 var(--cq-space-4);
  gap: var(--cq-space-4);
}

.cq-header__left,
.cq-header__right {
  display: flex;
  align-items: center;
  gap: var(--cq-space-2);
  min-width: 0;
}

.cq-header__menu-btn { /* 桌面端可见,用于折叠侧栏;移动端用于打开抽屉 */ }

.cq-header__logo {
  display: flex;
  align-items: center;
  gap: var(--cq-space-2);
  margin-left: var(--cq-space-1);
  min-width: 0;
}

.cq-logo-icon {
  width: 32px; height: 32px;
  background: var(--cq-color-primary);
  border-radius: var(--cq-radius-md);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.cq-logo-icon svg { width: 20px; height: 20px; }

.cq-header__brand {
  font-size: var(--cq-text-lg);
  font-weight: 700;
  color: var(--cq-text-primary);
  letter-spacing: -0.01em;
  white-space: nowrap;
}

.cq-header__tag {
  display: inline-flex;
  align-items: center;
  height: 22px;
  padding: 0 8px;
  font-size: var(--cq-text-xs);
  font-weight: 500;
  color: var(--cq-color-primary);
  background: var(--cq-color-primary-muted);
  border-radius: var(--cq-radius-full);
  white-space: nowrap;
}

/* 通用图标按钮(Header / 工具栏) */
.cq-icon-btn {
  width: 36px; height: 36px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: none;
  border-radius: var(--cq-radius-full);
  color: var(--cq-text-secondary);
  cursor: pointer;
  transition: background var(--cq-duration-fast) var(--cq-ease-default),
              color var(--cq-duration-fast) var(--cq-ease-default);
  padding: 0;
}
.cq-icon-btn svg { width: 18px; height: 18px; }
.cq-icon-btn:hover {
  background: var(--cq-bg-l3);
  color: var(--cq-text-primary);
}
.cq-icon-btn:active { background: var(--cq-color-primary-muted); }

.cq-header__user {
  display: inline-flex;
  align-items: center;
  gap: var(--cq-space-2);
  height: 36px;
  padding: 0 var(--cq-space-3) 0 var(--cq-space-1);
  border-radius: var(--cq-radius-full);
  cursor: pointer;
  transition: background var(--cq-duration-fast) var(--cq-ease-default);
  margin-left: var(--cq-space-1);
}
.cq-header__user:hover { background: var(--cq-bg-l3); }
.cq-header__user-avatar {
  width: 28px; height: 28px;
  border-radius: 50%;
  background: var(--cq-color-primary);
  color: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: var(--cq-text-xs);
  font-weight: 600;
  text-transform: uppercase;
  flex-shrink: 0;
}
.cq-header__user-name {
  font-size: var(--cq-text-sm);
  font-weight: 500;
  color: var(--cq-text-primary);
  max-width: 120px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* ── 5. Sidebar(Semi 风格 + 折叠 + 抽屉) ──────────────────── */
.sidebar-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.5);
  z-index: 90;
  opacity: 0;
  transition: opacity var(--cq-duration-normal) var(--cq-ease-default);
}
[data-theme="light"] .sidebar-overlay { background: rgba(0,0,0,0.25); }
.sidebar-overlay.active { display: block; opacity: 1; }

.sidebar {
  width: var(--cq-sidebar-current-width);
  background: var(--cq-bg-l0);
  display: flex;
  flex-direction: column;
  position: fixed;
  top: var(--cq-header-height);
  left: 0;
  bottom: 0;
  z-index: 99;
  transition: width var(--cq-duration-normal) var(--cq-ease-default),
              transform var(--cq-duration-normal) var(--cq-ease-default);
  overflow: hidden;
}

.sidebar-nav {
  flex: 1;
  width: 100%;
  background: var(--cq-bg-l0);
  overflow-x: hidden;
  overflow-y: auto;
  scrollbar-width: none;
  -ms-overflow-style: none;
  padding: var(--cq-space-2) 0;
}
.sidebar-nav::-webkit-scrollbar { display: none; }

.sidebar-section { padding-top: var(--cq-space-3); }
.sidebar-section + .sidebar-section { padding-top: var(--cq-space-2); margin-top: var(--cq-space-2); border-top: 1px solid var(--cq-border-subtle); }

.sidebar-group-label {
  padding: var(--cq-space-1) var(--cq-space-4) var(--cq-space-2);
  color: var(--cq-text-tertiary);
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  opacity: 0.85;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.sidebar-nav-item {
  display: flex;
  align-items: center;
  gap: var(--cq-space-3);
  margin: 2px var(--cq-space-2);
  padding: 8px var(--cq-space-3);
  border-radius: var(--cq-radius-md);
  color: var(--cq-text-secondary);
  font-size: var(--cq-text-sm);
  font-weight: 500;
  cursor: pointer;
  transition: background var(--cq-duration-fast) var(--cq-ease-default),
              color var(--cq-duration-fast) var(--cq-ease-default);
  white-space: nowrap;
  overflow: hidden;
}

.sidebar-icon-container {
  width: 22px; height: 22px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  color: inherit;
}
.sidebar-icon-container svg { width: 18px; height: 18px; stroke: currentColor; fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

.sidebar-nav-text {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}

.sidebar-nav-item:hover {
  background: var(--cq-color-primary-subtle);
  color: var(--cq-color-primary);
}

.sidebar-nav-item.active {
  background: var(--cq-color-primary-muted);
  color: var(--cq-color-primary);
  font-weight: 600;
}

/* 折叠态:收起侧栏只显示图标
   关键:用 display:none 而不是 width:0 / opacity:0
   - flex:1 的文本即便 width:0 仍会占据剩余空间,把图标顶到左边
   - 分组标题 padding 不会因 width:0 而消失,会留出一格高度
*/
body.is-sidebar-collapsed .sidebar-group-label,
body.is-sidebar-collapsed .sidebar-nav-text,
body.is-sidebar-collapsed .cq-collapse-label {
  display: none;
}
body.is-sidebar-collapsed .sidebar-nav-item {
  justify-content: center;
  padding: 8px 0;
  margin: 2px var(--cq-space-1);
  gap: 0;
}
/* 折叠态各分组之间不再画分隔线/留空 */
body.is-sidebar-collapsed .sidebar-section { padding-top: var(--cq-space-1); }
body.is-sidebar-collapsed .sidebar-section + .sidebar-section {
  border-top: none;
  margin-top: 0;
  padding-top: var(--cq-space-1);
}

/* 底部折叠按钮 */
.sidebar-collapse-button {
  position: sticky;
  bottom: 0;
  display: flex;
  justify-content: center;
  padding: var(--cq-space-3);
  background: var(--cq-bg-l0);
  border-top: 1px solid var(--cq-border-subtle);
  margin-top: auto;
  z-index: 1;
}

.cq-collapse-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--cq-space-2);
  width: 100%;
  height: 32px;
  padding: 0 var(--cq-space-3);
  border: 1px solid var(--cq-border-default);
  border-radius: var(--cq-radius-md);
  background: transparent;
  color: var(--cq-text-tertiary);
  font-size: var(--cq-text-xs);
  font-weight: 500;
  cursor: pointer;
  transition: background var(--cq-duration-fast) var(--cq-ease-default),
              color var(--cq-duration-fast) var(--cq-ease-default),
              border-color var(--cq-duration-fast) var(--cq-ease-default);
}
.cq-collapse-btn:hover {
  background: var(--cq-bg-l3);
  color: var(--cq-text-primary);
  border-color: var(--cq-border-hover);
}
.cq-collapse-icon {
  width: 14px; height: 14px;
  flex-shrink: 0;
  transition: transform var(--cq-duration-normal) var(--cq-ease-default);
}
body.is-sidebar-collapsed .cq-collapse-icon { transform: rotate(180deg); }
body.is-sidebar-collapsed .cq-collapse-btn { width: 32px; padding: 0; gap: 0; }

/* ── 6. Main Content(top offset = header,left offset = sider) ── */
.app-layout {
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
}

.main-content {
  margin-left: var(--cq-sidebar-current-width);
  flex: 1;
  padding: var(--cq-space-6);
  min-height: calc(100dvh - var(--cq-header-height));
  transition: margin-left var(--cq-duration-normal) var(--cq-ease-default);
}

.page-header { margin-bottom: var(--cq-space-6); }

.page-header h1 {
  font-size: var(--cq-text-2xl);
  font-weight: 600;
  color: var(--cq-text-primary);
  letter-spacing: -0.02em;
}

.page-header .sub {
  font-size: var(--cq-text-sm);
  color: var(--cq-text-tertiary);
  margin-top: var(--cq-space-1);
}

/* ── 7. Components ──────────────────────────────────────────── */

/* Card — Semi 风:1px 浅边框,无默认阴影,12px 圆角,24px 内边距 */
.cq-card {
  background: var(--cq-bg-l2);
  border: 1px solid var(--cq-border-default);
  border-radius: var(--cq-radius-xl);
  padding: var(--cq-space-6);
  transition: border-color var(--cq-duration-fast) var(--cq-ease-default),
              box-shadow var(--cq-duration-fast) var(--cq-ease-default),
              background-color var(--cq-duration-slow) var(--cq-ease-default);
}

.cq-card--interactive { cursor: pointer; }
.cq-card--interactive:hover {
  border-color: var(--cq-border-hover);
  box-shadow: var(--cq-shadow-sm);
}

.cq-card--selected {
  border-color: var(--cq-color-primary);
  background: var(--cq-color-primary-subtle);
}

.cq-card--sm { padding: var(--cq-space-4); }
.cq-card--flush { padding: 0; }

/* Stat Card(旧版,Semi 风调和,新页面优先用 .cq-stat-* 系列) */
.stat-card { text-align: left; }
.stat-card .stat-label {
  font-size: var(--cq-text-xs);
  color: var(--cq-text-tertiary);
  margin-bottom: var(--cq-space-2);
  font-weight: 500;
}
.stat-card .stat-value {
  font-family: var(--cq-font-mono);
  font-size: var(--cq-text-xl);
  font-weight: 600;
  color: var(--cq-text-primary);
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.01em;
}
.stat-card .stat-sub {
  font-size: var(--cq-text-xs);
  color: var(--cq-text-tertiary);
  margin-top: var(--cq-space-1);
  font-weight: 500;
}

/* ── Stat Grid(数据看板新版,参考 New API 风格) ────────────── */
.cq-stat-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--cq-space-4);
}
@media (max-width: 1280px) { .cq-stat-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px)  { .cq-stat-grid { grid-template-columns: 1fr; } }

.cq-stat-card {
  background: var(--cq-bg-l2);
  border: 1px solid var(--cq-border-default);
  border-radius: var(--cq-radius-xl);
  padding: var(--cq-space-5);
  display: flex;
  flex-direction: column;
  gap: var(--cq-space-3);
}

.cq-stat-card__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--cq-space-2);
}

.cq-stat-card__title {
  display: inline-flex;
  align-items: center;
  gap: var(--cq-space-2);
  color: var(--cq-text-secondary);
  font-size: var(--cq-text-sm);
  font-weight: 600;
}
.cq-stat-card__title svg {
  width: 16px; height: 16px;
  stroke: var(--cq-text-tertiary);
  fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round;
  flex-shrink: 0;
}

.cq-stat-card__action {
  display: inline-flex;
  align-items: center;
  height: 24px;
  padding: 0 var(--cq-space-3);
  border: 1px solid var(--cq-border-default);
  border-radius: var(--cq-radius-full);
  background: transparent;
  color: var(--cq-text-tertiary);
  font-size: var(--cq-text-xs);
  font-weight: 500;
  cursor: pointer;
  transition: background var(--cq-duration-fast) var(--cq-ease-default),
              color var(--cq-duration-fast) var(--cq-ease-default),
              border-color var(--cq-duration-fast) var(--cq-ease-default);
}
.cq-stat-card__action:hover {
  background: var(--cq-bg-l3);
  color: var(--cq-text-primary);
  border-color: var(--cq-border-hover);
}

/* 子项行 */
.cq-stat-row {
  display: flex;
  align-items: center;
  gap: var(--cq-space-3);
  min-height: 44px;
}
.cq-stat-row + .cq-stat-row {
  padding-top: var(--cq-space-3);
  border-top: 1px solid var(--cq-border-subtle);
}

.cq-stat-avatar {
  width: 36px; height: 36px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  color: #fff;
}
.cq-stat-avatar svg {
  width: 18px; height: 18px;
  stroke: #fff;
  fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round;
}

/* 6 色板循环 */
.cq-stat-avatar--blue   { background: var(--cq-avatar-blue); }
.cq-stat-avatar--violet { background: var(--cq-avatar-violet); }
.cq-stat-avatar--green  { background: var(--cq-avatar-green); }
.cq-stat-avatar--cyan   { background: var(--cq-avatar-cyan); }
.cq-stat-avatar--yellow { background: var(--cq-avatar-yellow); }
.cq-stat-avatar--pink   { background: var(--cq-avatar-pink); }
.cq-stat-avatar--orange { background: var(--cq-avatar-orange); }

.cq-stat-row__body {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.cq-stat-row__label {
  font-size: var(--cq-text-xs);
  color: var(--cq-text-tertiary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.cq-stat-row__value {
  font-family: var(--cq-font-mono);
  font-size: var(--cq-text-xl);
  font-weight: 600;
  color: var(--cq-text-primary);
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.01em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.cq-stat-row__value--profit { color: var(--cq-color-profit); }
.cq-stat-row__value--loss   { color: var(--cq-color-loss); }

.cq-stat-row__sub {
  font-size: 11px;
  color: var(--cq-text-tertiary);
}
.cq-stat-row__sub--profit { color: var(--cq-color-profit); }
.cq-stat-row__sub--loss   { color: var(--cq-color-loss); }

/* 行右侧 sparkline 槽 */
.cq-stat-row__spark {
  flex-shrink: 0;
  width: 64px; height: 24px;
  display: inline-flex;
  align-items: center;
  justify-content: flex-end;
  color: var(--cq-text-tertiary);
}

/* Tag — Semi 风:浅色填充 + 3px 圆角小芯片 */
.cq-tag {
  display: inline-flex;
  align-items: center;
  padding: 2px 6px;
  border-radius: var(--cq-radius-sm);
  font-size: 11px;
  font-weight: 500;
  line-height: 1.5;
  gap: var(--cq-space-1);
  white-space: nowrap;
}
.cq-tag--profit  { background: var(--cq-color-profit-muted);  color: var(--cq-color-profit); }
.cq-tag--loss    { background: var(--cq-color-loss-muted);    color: var(--cq-color-loss); }
.cq-tag--info    { background: var(--cq-color-primary-muted); color: var(--cq-color-primary); }
.cq-tag--warn    { background: var(--cq-color-warning-muted); color: var(--cq-color-warning); }
.cq-tag--neutral { background: var(--cq-bg-l3);               color: var(--cq-text-secondary); }

/* Buttons — Semi 风:无 hover 上浮 / 无投影,只换底色 */
.cq-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--cq-space-2);
  font-family: var(--cq-font-sans);
  font-weight: 500;
  font-size: var(--cq-text-sm);
  line-height: 1;
  border: 1px solid transparent;
  cursor: pointer;
  border-radius: var(--cq-radius-md);
  height: 32px;
  padding: 0 var(--cq-space-4);
  transition: background-color var(--cq-duration-fast) var(--cq-ease-default),
              border-color var(--cq-duration-fast) var(--cq-ease-default),
              color var(--cq-duration-fast) var(--cq-ease-default);
  user-select: none;
  text-decoration: none;
  white-space: nowrap;
  background: transparent;
}

.cq-btn:focus-visible {
  outline: 2px solid var(--cq-color-primary);
  outline-offset: 2px;
}

.cq-btn:disabled {
  opacity: 0.45;
  cursor: not-allowed;
  pointer-events: none;
}

/* 主按钮:实心(Semi solid) */
.cq-btn--primary {
  background: var(--cq-color-primary);
  color: #fff;
  border-color: var(--cq-color-primary);
}
.cq-btn--primary:hover:not(:disabled) {
  background: var(--cq-color-primary-hover);
  border-color: var(--cq-color-primary-hover);
}
.cq-btn--primary:active:not(:disabled) {
  background: var(--cq-color-primary-active);
  border-color: var(--cq-color-primary-active);
}

/* 次按钮:描边(Semi outline tertiary) */
.cq-btn--secondary {
  color: var(--cq-text-secondary);
  border-color: var(--cq-border-default);
  background: transparent;
}
.cq-btn--secondary:hover:not(:disabled) {
  color: var(--cq-text-primary);
  border-color: var(--cq-border-hover);
  background: var(--cq-bg-l3);
}
.cq-btn--secondary:active:not(:disabled) {
  background: var(--cq-color-primary-subtle);
}

/* 危险按钮:浅红填充 */
.cq-btn--danger {
  background: var(--cq-color-loss-muted);
  color: var(--cq-color-loss);
  border-color: transparent;
}
.cq-btn--danger:hover:not(:disabled) {
  background: var(--cq-color-loss);
  color: #fff;
}

/* 文字按钮(无背景,hover 浅灰) */
.cq-btn--text {
  color: var(--cq-text-secondary);
  background: transparent;
}
.cq-btn--text:hover:not(:disabled) {
  background: var(--cq-bg-l3);
  color: var(--cq-text-primary);
}

/* 尺寸 */
.cq-btn--sm { height: 28px; padding: 0 var(--cq-space-3); font-size: var(--cq-text-xs); }
.cq-btn--xs { height: 24px; padding: 0 var(--cq-space-2); font-size: var(--cq-text-xs); border-radius: var(--cq-radius-sm); }

.cq-btn--full { width: 100%; }

.cq-btn svg { width: 14px; height: 14px; stroke: currentColor; fill: none; stroke-width: 2; }

/* Input — Semi 风:32 高,1px 边框,聚焦 2px 主色环 */
.cq-input {
  background: var(--cq-bg-l1);
  border: 1px solid var(--cq-border-default);
  border-radius: var(--cq-radius-md);
  height: 32px;
  padding: 0 var(--cq-space-3);
  color: var(--cq-text-primary);
  font-size: var(--cq-text-sm);
  font-family: var(--cq-font-sans);
  width: 100%;
  outline: none;
  transition: border-color var(--cq-duration-fast) var(--cq-ease-default),
              box-shadow var(--cq-duration-fast) var(--cq-ease-default),
              background-color var(--cq-duration-slow) var(--cq-ease-default);
}

.cq-input:hover:not(:focus):not(:disabled) {
  border-color: var(--cq-border-hover);
}

.cq-input:focus {
  border-color: var(--cq-color-primary);
  box-shadow: 0 0 0 2px var(--cq-color-primary-muted);
}

.cq-input::placeholder { color: var(--cq-text-disabled); }

.cq-input:disabled {
  opacity: 0.55;
  cursor: not-allowed;
  background: var(--cq-bg-l3);
}

/* textarea / 多行 */
textarea.cq-input,
select.cq-input[multiple] {
  height: auto;
  min-height: 80px;
  padding: var(--cq-space-2) var(--cq-space-3);
  line-height: 1.55;
  resize: vertical;
}

/* select 下拉箭头空间 */
select.cq-input:not([multiple]) {
  padding-right: var(--cq-space-8);
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%239AA0A6' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right var(--cq-space-3) center;
  background-size: 12px;
}

.cq-input--error { border-color: var(--cq-color-loss); }
.cq-input--error:focus { box-shadow: 0 0 0 2px var(--cq-color-loss-muted); }

/* Label(配合 Input 使用) */
.cq-label {
  display: block;
  font-size: var(--cq-text-xs);
  font-weight: 500;
  color: var(--cq-text-secondary);
  margin-bottom: var(--cq-space-1);
}

/* Slider */
.cq-slider {
  -webkit-appearance: none;
  width: 100%;
  height: 4px;
  border-radius: 2px;
  background: var(--cq-bg-l3);
  outline: none;
}

.cq-slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 18px; height: 18px;
  border-radius: 50%;
  background: var(--cq-color-primary);
  cursor: pointer;
  border: 2px solid var(--cq-bg-l1);
  box-shadow: 0 0 0 3px var(--cq-color-primary-muted);
  transition: box-shadow var(--cq-duration-fast);
}

.cq-slider::-webkit-slider-thumb:hover {
  box-shadow: 0 0 0 5px var(--cq-color-primary-muted);
}

/* Toggle Switch */
.cq-toggle {
  width: 40px; height: 22px;
  border-radius: var(--cq-radius-full);
  background: var(--cq-bg-l3);
  position: relative;
  cursor: pointer;
  transition: background var(--cq-duration-normal) var(--cq-ease-default);
  display: inline-block;
  flex-shrink: 0;
}

.cq-toggle.is-on { background: var(--cq-color-primary); }

.cq-toggle::after {
  content: '';
  position: absolute;
  width: 18px; height: 18px;
  border-radius: 50%;
  background: white;
  top: 2px; left: 2px;
  transition: transform var(--cq-duration-normal) var(--cq-ease-default);
  box-shadow: var(--cq-shadow-xs);
}

.cq-toggle.is-on::after { transform: translateX(18px); }

/* Strategy Card — Legacy, kept for instance cards */

/* ── Strategy Template Pills ───────────────────────────────── */
.cq-template-pills {
  display: flex;
  flex-direction: column;
  gap: var(--cq-space-4);
}

.cq-strategy-layout {
  display: flex;
  flex-direction: column;
  gap: var(--cq-space-6);
}

.cq-strategy-section {
  display: flex;
  flex-direction: column;
  gap: var(--cq-space-4);
}

.cq-strategy-section__header {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: var(--cq-space-4);
}

.cq-strategy-section__header h3 {
  font-size: var(--cq-text-lg);
  font-weight: 600;
  color: var(--cq-text-primary);
}

.cq-strategy-section__header p {
  margin-top: var(--cq-space-1);
  font-size: var(--cq-text-sm);
  color: var(--cq-text-tertiary);
}

.cq-strategy-filter-tabs {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}

.cq-strategy-filter-tab {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 36px;
  padding: 0 12px;
  border: 1px solid var(--cq-border-default);
  border-radius: var(--cq-radius-full);
  background: var(--cq-bg-l2);
  color: var(--cq-text-secondary);
  font-size: var(--cq-text-sm);
  font-weight: 600;
  cursor: pointer;
  transition: background var(--cq-duration-fast) var(--cq-ease-default),
              border-color var(--cq-duration-fast) var(--cq-ease-default),
              color var(--cq-duration-fast) var(--cq-ease-default),
              transform var(--cq-duration-fast) var(--cq-ease-default);
}

.cq-strategy-filter-tab:hover {
  border-color: var(--cq-border-hover);
  color: var(--cq-text-primary);
}

.cq-strategy-filter-tab.is-active {
  background: var(--cq-color-primary-muted);
  border-color: var(--cq-color-primary);
  color: var(--cq-color-primary-hover);
}

.cq-strategy-filter-tab__count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 22px;
  height: 22px;
  padding: 0 6px;
  border-radius: var(--cq-radius-full);
  background: var(--cq-bg-l3);
  color: inherit;
  font-size: 11px;
  font-family: var(--cq-font-mono);
}

.cq-strategy-filter-tab.is-active .cq-strategy-filter-tab__count {
  background: rgba(255,255,255,0.16);
}

.cq-strategy-section--highlight {
  padding: var(--cq-space-5);
  border: 1px solid var(--cq-border-default);
  border-radius: var(--cq-radius-xl);
  background:
    linear-gradient(180deg, var(--cq-color-primary-subtle), transparent 58%),
    var(--cq-bg-l2);
  box-shadow: var(--cq-shadow-xs);
}

.cq-running-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: var(--cq-space-4);
}

.cq-running-card {
  padding: var(--cq-space-5);
  border: 1px solid var(--cq-border-default);
  border-radius: var(--cq-radius-lg);
  background: var(--cq-bg-l1);
}

.cq-running-card__top,
.cq-running-card__bottom {
  display: flex;
  justify-content: space-between;
  gap: var(--cq-space-4);
}

.cq-running-card__top {
  align-items: flex-start;
  margin-bottom: var(--cq-space-4);
}

.cq-running-card__bottom {
  align-items: flex-end;
  margin-top: var(--cq-space-4);
  padding-top: var(--cq-space-4);
  border-top: 1px solid var(--cq-border-subtle);
}

.cq-running-card__title {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--cq-space-2);
  margin-bottom: var(--cq-space-2);
}

.cq-running-card__name {
  font-size: var(--cq-text-md);
  font-weight: 600;
  color: var(--cq-text-primary);
}

.cq-running-card__meta,
.cq-running-card__stamp {
  display: flex;
  flex-wrap: wrap;
  gap: var(--cq-space-2);
  font-size: var(--cq-text-sm);
  color: var(--cq-text-tertiary);
}

.cq-running-card__meta .sep,
.cq-running-card__stamp .sep {
  color: var(--cq-border-hover);
}

.cq-running-card__pnl {
  text-align: right;
  flex-shrink: 0;
}

.cq-running-card__pnl-value {
  font-size: var(--cq-text-xl);
  font-weight: 700;
  font-family: var(--cq-font-mono);
}

.cq-running-card__pnl-sub {
  margin-top: var(--cq-space-1);
  font-size: var(--cq-text-xs);
  color: var(--cq-text-tertiary);
}

.cq-running-metrics {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--cq-space-3);
}

.cq-running-metric {
  padding: var(--cq-space-3);
  border-radius: var(--cq-radius-md);
  background: var(--cq-bg-l2);
  border: 1px solid var(--cq-border-subtle);
}

.cq-running-metric__label {
  font-size: var(--cq-text-xs);
  color: var(--cq-text-tertiary);
}

.cq-running-metric__value {
  margin-top: var(--cq-space-1);
  font-size: var(--cq-text-md);
  font-weight: 600;
  color: var(--cq-text-primary);
  font-family: var(--cq-font-mono);
}

.cq-strategy-list {
  display: flex;
  flex-direction: column;
  gap: var(--cq-space-3);
}

.cq-workbench-toolbar {
  display: grid;
  grid-template-columns: minmax(260px, 0.9fr) minmax(0, 1.1fr);
  gap: var(--cq-space-4);
  align-items: start;
}

.cq-workbench-toolbar__block {
  padding: var(--cq-space-4);
  border: 1px solid var(--cq-border-default);
  border-radius: var(--cq-radius-lg);
  background: var(--cq-bg-l2);
}

.cq-workbench-toolbar__label {
  margin-bottom: var(--cq-space-3);
  font-size: var(--cq-text-xs);
  font-weight: 600;
  color: var(--cq-text-tertiary);
}

.cq-workbench-draft-list {
  display: flex;
  flex-wrap: wrap;
  gap: var(--cq-space-2);
}

.cq-workbench-draft-pill {
  display: inline-flex;
  align-items: center;
  gap: var(--cq-space-2);
  min-width: 0;
  max-width: 100%;
  padding: 8px 12px;
  border: 1px solid var(--cq-border-default);
  border-radius: var(--cq-radius-full);
  background: var(--cq-bg-l1);
  color: var(--cq-text-secondary);
  cursor: pointer;
  transition: border-color var(--cq-duration-fast) var(--cq-ease-default),
              background var(--cq-duration-fast) var(--cq-ease-default),
              color var(--cq-duration-fast) var(--cq-ease-default);
}

.cq-workbench-draft-pill:hover {
  border-color: var(--cq-border-hover);
  color: var(--cq-text-primary);
}

.cq-workbench-draft-pill.is-active {
  border-color: var(--cq-color-primary);
  background: var(--cq-color-primary-muted);
  color: var(--cq-color-primary);
}

.cq-workbench-draft-pill__text {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.cq-workbench-draft-pill__name {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: var(--cq-text-sm);
  font-weight: 600;
}

.cq-workbench-draft-pill__meta {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 11px;
  color: var(--cq-text-tertiary);
}

.cq-template-group {
  padding: var(--cq-space-3);
  border: 1px solid var(--cq-border-subtle);
  border-radius: var(--cq-radius-lg);
  background: rgba(255,255,255,0.01);
}

.cq-template-group__header {
  display: flex;
  align-items: baseline;
  gap: var(--cq-space-2);
  margin-bottom: var(--cq-space-3);
}

.cq-template-group__title {
  font-size: var(--cq-text-sm);
  font-weight: 700;
  color: var(--cq-text-primary);
}

.cq-template-group__hint {
  font-size: var(--cq-text-xs);
  color: var(--cq-text-tertiary);
}

.cq-template-group__pills {
  display: flex;
  gap: var(--cq-space-3);
  flex-wrap: wrap;
}

.cq-pill {
  display: inline-flex;
  align-items: center;
  gap: var(--cq-space-2);
  padding: 6px 12px;
  border-radius: var(--cq-radius-full);
  border: 1px solid var(--cq-border-default);
  background: var(--cq-bg-l2);
  color: var(--cq-text-secondary);
  font-size: var(--cq-text-sm);
  font-weight: 500;
  cursor: pointer;
  transition: background var(--cq-duration-fast) var(--cq-ease-default),
              border-color var(--cq-duration-fast) var(--cq-ease-default),
              color var(--cq-duration-fast) var(--cq-ease-default);
  user-select: none;
  white-space: nowrap;
  min-width: 0;
}

.cq-pill:hover {
  border-color: var(--cq-border-hover);
  color: var(--cq-text-primary);
  background: var(--cq-bg-l3);
}

.cq-pill.is-selected {
  border-color: var(--cq-color-primary);
  background: var(--cq-color-primary-muted);
  color: var(--cq-color-primary);
}

.cq-pill__icon {
  width: 28px;
  height: 28px;
  border-radius: var(--cq-radius-sm);
  background: var(--cq-color-primary-subtle);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: background var(--cq-duration-fast);
}

.cq-pill.is-selected .cq-pill__icon {
  background: var(--cq-color-primary-muted);
}

.cq-pill__icon svg {
  width: 16px;
  height: 16px;
  stroke: var(--cq-color-primary);
  fill: none;
  stroke-width: 2;
}

.cq-pill__name {
  font-size: var(--cq-text-sm);
  font-weight: 600;
  line-height: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.cq-pill__check {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--cq-color-primary);
  display: none;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  margin-left: var(--cq-space-1);
}

.cq-pill.is-selected .cq-pill__check {
  display: flex;
}

.cq-pill__check svg {
  width: 12px;
  height: 12px;
  stroke: white;
  stroke-width: 3;
}

.cq-template-group--compact {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--cq-space-4);
}

.cq-template-group--compact .cq-template-group__header {
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
  margin-bottom: 0;
  min-width: 0;
}

.cq-template-group--compact .cq-template-group__pills {
  flex-wrap: nowrap;
  flex-shrink: 0;
}

.cq-template-group--compact .cq-pill {
  max-width: 100%;
}

/* ── Create Form Card ──────────────────────────────────────── */
.cq-create-form-wrap {
  margin-bottom: var(--cq-space-5);
  animation: cq-slide-down 0.3s var(--cq-ease-default) forwards;
}

@keyframes cq-slide-down {
  from { opacity: 0; transform: translateY(-8px); }
  to { opacity: 1; transform: translateY(0); }
}

.cq-create-card {
  padding: 0;
  overflow: hidden;
}

.cq-create-card__header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--cq-space-3);
  padding: var(--cq-space-4) var(--cq-space-5);
  border-bottom: 1px solid var(--cq-border-subtle);
  background: var(--cq-color-primary-subtle);
}

.cq-create-card__actions {
  display: flex;
  align-items: center;
  gap: var(--cq-space-2);
  flex-wrap: wrap;
  justify-content: flex-end;
}

.cq-create-card__title {
  display: flex;
  align-items: center;
  gap: var(--cq-space-2);
  font-size: var(--cq-text-md);
  font-weight: 600;
  color: var(--cq-text-primary);
}

.cq-create-card__title svg {
  flex-shrink: 0;
}

.cq-create-card__body {
  padding: var(--cq-space-5);
}

.cq-form-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--cq-space-4) var(--cq-space-5);
  margin-bottom: var(--cq-space-3);
}

.cq-form-field {
  min-width: 0;
}

.cq-form-hint {
  font-size: var(--cq-text-xs);
  color: var(--cq-text-tertiary);
  margin-bottom: var(--cq-space-4);
  padding-left: var(--cq-space-1);
}

.cq-param-sliders {
  margin-bottom: var(--cq-space-5);
  padding-top: var(--cq-space-3);
  border-top: 1px solid var(--cq-border-subtle);
}

.cq-param-sliders:empty {
  display: none;
}

/* Param slider group */
.cq-param-group {
  margin-bottom: var(--cq-space-4);
}

.cq-param-group:last-child {
  margin-bottom: 0;
}

.cq-param-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: var(--cq-space-2);
}

.cq-param-label {
  font-size: var(--cq-text-sm);
  font-weight: 500;
  color: var(--cq-text-secondary);
}

.cq-param-value {
  font-family: var(--cq-font-mono);
  font-size: var(--cq-text-sm);
  font-weight: 600;
  color: var(--cq-color-primary-hover);
  background: var(--cq-color-primary-subtle);
  padding: 2px 8px;
  border-radius: var(--cq-radius-sm);
}

/* ── Instance Card ─────────────────────────────────────────── */
.cq-instance-card {
  margin-bottom: var(--cq-space-3);
}

.cq-instance-card__header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--cq-space-4);
}

.cq-instance-card__info {
  min-width: 0;
}

.cq-instance-card__name-row {
  display: flex;
  align-items: center;
  gap: var(--cq-space-2);
  margin-bottom: var(--cq-space-1);
  flex-wrap: wrap;
}

.cq-instance-card__name {
  font-size: var(--cq-text-md);
  font-weight: 600;
  color: var(--cq-text-primary);
}

.cq-instance-card__meta {
  font-size: var(--cq-text-sm);
  color: var(--cq-text-tertiary);
  display: flex;
  align-items: center;
  gap: var(--cq-space-2);
  flex-wrap: wrap;
}

.cq-instance-card__meta .sep {
  color: var(--cq-border-subtle);
}

.cq-instance-card__pnl {
  text-align: right;
  flex-shrink: 0;
}

.cq-instance-card__pnl-value {
  font-family: var(--cq-font-mono);
  font-size: var(--cq-text-md);
  font-weight: 600;
}

.cq-instance-card__pnl-rate {
  font-size: var(--cq-text-xs);
  color: var(--cq-text-tertiary);
}

.cq-instance-card__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--cq-space-2);
  margin-top: var(--cq-space-3);
}

.cq-workbench-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--cq-space-2);
}

.cq-workbench-actions .cq-btn {
  min-width: 124px;
}

/* ── Theme Toggle ─────────────────────────────────────────────── */
.cq-theme-toggle {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: var(--cq-radius-md);
  border: none;
  background: transparent;
  cursor: pointer;
  color: var(--cq-text-tertiary);
  transition: all var(--cq-duration-fast) var(--cq-ease-default);
  padding: 0;
  flex-shrink: 0;
}

.cq-theme-toggle:hover {
  background: var(--cq-color-primary-subtle);
  color: var(--cq-text-secondary);
}

.cq-theme-toggle:active {
  transform: scale(0.92);
}

.cq-theme-toggle svg {
  width: 18px;
  height: 18px;
  stroke: currentColor;
  fill: none;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* ── 8. Grid System — auto-fit fluid ──────────────────────── */
.cq-grid-2 { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: var(--cq-space-4); }
.cq-grid-3 { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: var(--cq-space-4); }
.cq-grid-4 { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: var(--cq-space-4); }

/* ── 9. Table ───────────────────────────────────────────────── */
/* Table — Semi 风:表头浅灰底 + 紧凑行 + hover 浅底 */
.cq-table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }

.cq-table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  min-width: 600px;
  font-size: var(--cq-text-sm);
}

.cq-table thead th {
  position: sticky;
  top: 0;
  z-index: 1;
  text-align: left;
  font-size: var(--cq-text-xs);
  color: var(--cq-text-tertiary);
  font-weight: 600;
  letter-spacing: 0;
  text-transform: none;
  padding: var(--cq-space-2) var(--cq-space-3);
  background: var(--cq-bg-l3);
  border-bottom: 1px solid var(--cq-border-default);
  white-space: nowrap;
  height: 36px;
}

.cq-table tbody td {
  padding: var(--cq-space-3);
  height: 44px;
  color: var(--cq-text-primary);
  border-bottom: 1px solid var(--cq-border-subtle);
  white-space: nowrap;
}

.cq-table tbody tr:last-child td { border-bottom: none; }

.cq-table tbody tr:hover td { background: var(--cq-bg-l3); }

/* 数值列右对齐 */
.cq-table td.cq-num,
.cq-table th.cq-num { text-align: right; font-variant-numeric: tabular-nums; }

/* ── 10. Animation ──────────────────────────────────────────── */
@keyframes cq-fade-in {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes cq-slide-up {
  from { opacity: 0; transform: translateY(12px); }
  to { opacity: 1; transform: translateY(0); }
}

@keyframes cq-pulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.5; transform: scale(1.4); }
}

.cq-anim-slide-up { animation: cq-slide-up 0.3s var(--cq-ease-default) forwards; }

.cq-pulse-dot {
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--cq-color-profit);
  animation: cq-pulse 2s infinite;
  display: inline-block;
}

/* Skeleton Loading */
.cq-skeleton {
  background: linear-gradient(90deg, var(--cq-bg-l2) 25%, var(--cq-bg-l3) 50%, var(--cq-bg-l2) 75%);
  background-size: 200% 100%;
  animation: cq-shimmer 1.5s infinite;
  border-radius: var(--cq-radius-md);
}

@keyframes cq-shimmer {
  0% { background-position: -200% 0; }
  100% { background-position: 200% 0; }
}

/* ── 11. Toast ──────────────────────────────────────────────── */
.cq-toast {
  position: fixed;
  top: var(--cq-space-6);
  left: 50%;
  transform: translateX(-50%) translateY(-12px);
  background: var(--cq-bg-l3);
  border: 1px solid var(--cq-border-hover);
  padding: var(--cq-space-3) var(--cq-space-6);
  border-radius: var(--cq-radius-lg);
  font-size: var(--cq-text-sm);
  font-weight: 500;
  z-index: 1000;
  opacity: 0;
  transition: all var(--cq-duration-normal) var(--cq-ease-default);
  white-space: nowrap;
  pointer-events: none;
  max-width: 90vw;
  overflow: hidden;
  text-overflow: ellipsis;
  box-shadow: var(--cq-shadow-lg);
  display: flex;
  align-items: center;
  gap: var(--cq-space-2);
}

.cq-toast.is-visible {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}

.cq-toast svg { width: 16px; height: 16px; stroke: currentColor; fill: none; stroke-width: 2; flex-shrink: 0; }

/* ── 12. Page Transitions ───────────────────────────────────── */
.page-view { display: none; }
.page-view.active { display: block; animation: cq-fade-in 0.2s var(--cq-ease-default); }

/* Constrained content — centers page on wide screens */
.cq-constrained {
  max-width: var(--cq-content-max-width);
  margin-left: auto;
  margin-right: auto;
  width: 100%;
}

/* ── 13. Section Title ──────────────────────────────────────── */
.cq-section-title {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: var(--cq-space-3);
}

.cq-section-title h3 {
  font-size: var(--cq-text-md);
  font-weight: 600;
  color: var(--cq-text-primary);
}

.cq-section-title a, .cq-section-title span {
  font-size: var(--cq-text-sm);
  color: var(--cq-text-tertiary);
  cursor: pointer;
  transition: color var(--cq-duration-fast);
}

.cq-section-title a:hover, .cq-section-title span:hover {
  color: var(--cq-color-primary-hover);
}

/* ── 14. Empty State ────────────────────────────────────────── */
.cq-empty-state {
  text-align: center;
  padding: var(--cq-space-10) var(--cq-space-6);
}

/* 只命中空状态卡片直接子级的插图 SVG,
   避免后代选择器把按钮里的 icon 也撑到 56px */
.cq-empty-state > svg {
  width: 56px; height: 56px;
  stroke: var(--cq-text-disabled);
  fill: none;
  stroke-width: 1.5;
  margin-bottom: var(--cq-space-4);
}

.cq-empty-state h3 {
  font-size: var(--cq-text-md);
  font-weight: 500;
  color: var(--cq-text-secondary);
  margin-bottom: var(--cq-space-2);
}

.cq-empty-state p {
  font-size: var(--cq-text-sm);
  color: var(--cq-text-tertiary);
  margin-bottom: var(--cq-space-6);
}

/* ================================================================
   Symbol Selector — 交易对选择器
   ================================================================ */
.sym-sel { position: relative; }

.sym-sel__trigger {
  display: flex; align-items: center; gap: var(--cq-space-2);
  background: var(--cq-bg-l2); border: 1px solid var(--cq-border-default);
  border-radius: var(--cq-radius-md); padding: 8px 36px 8px 10px;
  color: var(--cq-text-primary); cursor: pointer; min-height: 42px;
  position: relative; transition: border-color 0.15s, box-shadow 0.15s;
  user-select: none;
}
.sym-sel__trigger:hover { border-color: var(--cq-color-primary-muted); }
.sym-sel__trigger:active,
.sym-sel.is-open .sym-sel__trigger { border-color: var(--cq-color-primary); box-shadow: 0 0 0 3px var(--cq-color-primary-muted); }

.sym-sel__chevron {
  position: absolute; right: 10px; top: 50%; transform: translateY(-50%);
  color: var(--cq-text-tertiary); transition: transform 0.2s;
}
.sym-sel.is-open .sym-sel__chevron { transform: translateY(-50%) rotate(180deg); }

.sym-sel__icon {
  display: inline-flex; align-items: center; justify-content: center;
  width: 28px; height: 28px; border-radius: var(--cq-radius-sm);
  font-size: 10px; font-weight: 700; letter-spacing: -0.5px; flex-shrink: 0;
}

.sym-sel__name { font-size: var(--cq-text-sm); font-weight: 500; white-space: nowrap; }

.sym-sel__tag {
  font-size: 10px; padding: 1px 6px; border-radius: 3px; font-weight: 600;
  line-height: 1.4; white-space: nowrap;
}
.sym-sel__tag--spot { background: rgba(34,197,94,0.12); color: #22C55E; }
.sym-sel__tag--perp { background: rgba(251,146,60,0.12); color: #FB923C; }

.sym-sel__dropdown {
  position: absolute; top: calc(100% + 4px); left: 0; right: 0; z-index: 100;
  background: var(--cq-bg-l1); border: 1px solid var(--cq-border-default);
  border-radius: var(--cq-radius-lg); box-shadow: 0 12px 32px rgba(0,0,0,0.32);
  overflow: hidden; min-width: 260px;
}

.sym-sel__search-wrap {
  display: flex; align-items: center; gap: var(--cq-space-2);
  padding: var(--cq-space-2) var(--cq-space-3);
  border-bottom: 1px solid var(--cq-border-subtle);
}
.sym-sel__search {
  flex: 1; background: none; border: none; outline: none;
  color: var(--cq-text-primary); font-size: var(--cq-text-sm);
  font-family: inherit;
}
.sym-sel__search::placeholder { color: var(--cq-text-disabled); }

.sym-sel__filters {
  display: flex; gap: 4px; padding: var(--cq-space-1) var(--cq-space-3);
  border-bottom: 1px solid var(--cq-border-subtle);
}
.sym-sel__filter {
  background: none; border: 1px solid transparent; border-radius: 3px;
  color: var(--cq-text-tertiary); font-size: 11px; padding: 3px 8px;
  cursor: pointer; font-family: inherit; transition: all 0.15s;
}
.sym-sel__filter:hover { color: var(--cq-text-secondary); border-color: var(--cq-border-subtle); }
.sym-sel__filter.active {
  background: var(--cq-color-primary); color: #fff; border-color: var(--cq-color-primary);
}

.sym-sel__list {
  max-height: 260px; overflow-y: auto; padding: var(--cq-space-1) 0;
  scrollbar-width: thin; scrollbar-color: var(--cq-border-subtle) transparent;
}
.sym-sel__list::-webkit-scrollbar { width: 4px; }
.sym-sel__list::-webkit-scrollbar-track { background: transparent; }
.sym-sel__list::-webkit-scrollbar-thumb { background: var(--cq-border-subtle); border-radius: 2px; }

.sym-sel__group-label {
  font-size: 10px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.5px;
  color: var(--cq-text-disabled); padding: var(--cq-space-2) var(--cq-space-3) var(--cq-space-1);
}

.sym-sel__item {
  display: flex; align-items: center; gap: var(--cq-space-2);
  padding: 6px var(--cq-space-3); cursor: pointer; transition: background 0.1s;
}
.sym-sel__item:hover { background: var(--cq-bg-l2); }
.sym-sel__item.is-active { background: var(--cq-color-primary-muted); }

.sym-sel__item-name { flex: 1; font-size: var(--cq-text-sm); color: var(--cq-text-primary); }

.sym-sel__empty {
  padding: var(--cq-space-4); text-align: center;
  color: var(--cq-text-disabled); font-size: var(--cq-text-sm);
}

/* ── 15. Collapsible Detail Panels ─────────────────────────── */
.cq-metrics-detail {
  padding: 0;
  overflow: hidden;
}

.cq-metrics-detail__header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: var(--cq-space-3) var(--cq-space-4);
  cursor: pointer;
  user-select: none;
  transition: background var(--cq-duration-fast) var(--cq-ease-default);
}

.cq-metrics-detail__header:hover {
  background: var(--cq-color-primary-subtle);
}

.cq-metrics-detail__chevron {
  transition: transform var(--cq-duration-normal) var(--cq-ease-default);
}

.cq-metrics-detail.is-collapsed .cq-metrics-detail__chevron {
  transform: rotate(-90deg);
}

.cq-metrics-detail__body {
  padding: 0 var(--cq-space-4) var(--cq-space-4);
  max-height: 2000px;
  overflow: hidden;
  transition: max-height 0.3s var(--cq-ease-default),
              padding 0.3s var(--cq-ease-default),
              opacity 0.2s var(--cq-ease-default);
}

.cq-metrics-detail.is-collapsed .cq-metrics-detail__body {
  max-height: 0;
  padding-top: 0;
  padding-bottom: 0;
  opacity: 0;
}

.cq-metrics-detail__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: var(--cq-space-3) var(--cq-space-5);
  border-top: 1px solid var(--cq-border-subtle);
  padding-top: var(--cq-space-3);
}

.cq-metrics-detail__item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--cq-space-2);
}

.cq-metrics-detail__label {
  font-size: var(--cq-text-sm);
  color: var(--cq-text-tertiary);
  white-space: nowrap;
}

.cq-metrics-detail__value {
  font-size: var(--cq-text-sm);
  font-weight: 600;
  color: var(--cq-text-primary);
  white-space: nowrap;
}

/* Trades table tweaks */
.cq-trades-detail {
  padding: 0;
  overflow: hidden;
}

.cq-trades-table {
  min-width: 720px;
}

.cq-trades-table th,
.cq-trades-table td {
  font-size: var(--cq-text-sm);
}

/* ── 16. Market Ticker Cards ───────────────────────────────── */
.cq-grid-5 { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: var(--cq-space-3); }

.cq-ticker-card {
  padding: var(--cq-space-3) var(--cq-space-4);
  cursor: pointer;
  transition: border-color var(--cq-duration-fast) var(--cq-ease-default),
              box-shadow var(--cq-duration-fast) var(--cq-ease-default);
}

.cq-ticker-card:hover {
  border-color: var(--cq-border-hover);
  box-shadow: var(--cq-shadow-sm);
}

.cq-ticker-card.is-active {
  border-color: var(--cq-color-primary);
  box-shadow: 0 0 0 3px var(--cq-color-primary-muted);
}

.cq-ticker-card__header {
  display: flex;
  align-items: baseline;
  gap: var(--cq-space-1);
  margin-bottom: var(--cq-space-1);
}

.cq-ticker-card__base {
  font-weight: 600;
  font-size: var(--cq-text-md);
  color: var(--cq-text-primary);
}

.cq-ticker-card__quote {
  font-size: var(--cq-text-xs);
  color: var(--cq-text-tertiary);
}

.cq-ticker-card__price {
  font-size: var(--cq-text-lg);
  font-weight: 700;
  color: var(--cq-text-primary);
  margin-bottom: 2px;
}

.cq-ticker-card__change {
  font-size: var(--cq-text-xs);
  font-weight: 600;
  margin-bottom: var(--cq-space-2);
}

.cq-ticker-card__spark {
  height: 24px;
}

/* Price flash animation */
@keyframes cq-flash {
  0% { background: transparent; }
  30% { background: var(--cq-color-primary-muted); }
  100% { background: transparent; }
}
.cq-flash { animation: cq-flash 0.4s var(--cq-ease-default); border-radius: 4px; }

/* Interval / Exchange buttons */
.cq-interval-btn,
.cq-exchange-btn,
.cq-chart-type-btn {
  background: var(--cq-bg-l2);
  border: 1px solid var(--cq-border-default);
  border-radius: var(--cq-radius-sm);
  color: var(--cq-text-tertiary);
  font-size: 11px;
  font-weight: 600;
  font-family: var(--cq-font-mono);
  padding: 4px 10px;
  cursor: pointer;
  transition: all var(--cq-duration-fast) var(--cq-ease-default);
}

.cq-interval-btn:hover,
.cq-exchange-btn:hover,
.cq-chart-type-btn:hover {
  color: var(--cq-text-secondary);
  border-color: var(--cq-border-hover);
}

.cq-interval-btn.is-active,
.cq-exchange-btn.is-active,
.cq-chart-type-btn.is-active {
  background: var(--cq-color-primary);
  color: white;
  border-color: var(--cq-color-primary);
}

.cq-interval-select {
  width: 92px;
  min-width: 92px;
  height: 28px;
  padding: 0 28px 0 10px;
  font-size: 11px;
  font-weight: 600;
  font-family: var(--cq-font-mono);
  border-radius: var(--cq-radius-sm);
}

/* Buy/Sell side buttons */
.cq-side-btn {
  background: var(--cq-bg-l2);
  border: 1px solid var(--cq-border-default);
  border-radius: var(--cq-radius-md);
  color: var(--cq-text-secondary);
  font-size: var(--cq-text-md);
  font-weight: 600;
  padding: 10px;
  cursor: pointer;
  transition: all var(--cq-duration-fast) var(--cq-ease-default);
}

.cq-side-btn:hover {
  border-color: var(--cq-border-hover);
}

.cq-side-btn[data-side="buy"].is-active {
  background: var(--cq-color-profit-muted);
  color: var(--cq-color-profit);
  border-color: var(--cq-color-profit);
}

.cq-side-btn[data-side="sell"].is-active {
  background: var(--cq-color-loss-muted);
  color: var(--cq-color-loss);
  border-color: var(--cq-color-loss);
}

/* Order type buttons */
.cq-otype-btn {
  background: var(--cq-bg-l2);
  border: 1px solid var(--cq-border-default);
  border-radius: var(--cq-radius-sm);
  color: var(--cq-text-tertiary);
  font-size: var(--cq-text-sm);
  font-weight: 500;
  padding: 6px 14px;
  cursor: pointer;
  transition: all var(--cq-duration-fast) var(--cq-ease-default);
}

.cq-otype-btn.is-active {
  background: var(--cq-color-primary-muted);
  color: var(--cq-color-primary-hover);
  border-color: var(--cq-color-primary);
}

/* ── 17. Dialog / Modal ──────────────────────────────────── */
.cq-dialog-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.5);
  display: none;
  align-items: center;
  justify-content: center;
  z-index: 200;
  padding: var(--cq-space-4);
}

[data-theme="light"] .cq-dialog-overlay {
  background: rgba(0,0,0,0.25);
}

.cq-dialog-overlay.is-visible {
  display: flex;
}

.cq-dialog {
  background: var(--cq-bg-l1);
  border: 1px solid var(--cq-border-default);
  border-radius: var(--cq-radius-xl);
  width: 100%;
  max-width: 400px;
  box-shadow: var(--cq-shadow-lg);
}

.cq-dialog__header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: var(--cq-space-4) var(--cq-space-5);
  border-bottom: 1px solid var(--cq-border-subtle);
}

.cq-dialog__body {
  padding: var(--cq-space-5);
}

.cq-dialog__footer {
  display: flex;
  justify-content: flex-end;
  gap: var(--cq-space-3);
  padding: var(--cq-space-4) var(--cq-space-5);
  border-top: 1px solid var(--cq-border-subtle);
}

/* ── 18. Strategy Performance Modal ──────────────────────── */
.cq-perf-modal {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.5);
  display: none;
  align-items: center;
  justify-content: center;
  z-index: 200;
  padding: var(--cq-space-4);
  overflow-y: auto;
}

[data-theme="light"] .cq-perf-modal { background: rgba(0,0,0,0.25); }

.cq-perf-modal.is-visible { display: flex; }

.cq-perf-panel {
  background: var(--cq-bg-l1);
  border: 1px solid var(--cq-border-default);
  border-radius: var(--cq-radius-xl);
  width: 100%;
  max-width: 600px;
  max-height: 85vh;
  overflow-y: auto;
  box-shadow: var(--cq-shadow-lg);
}

.cq-perf-panel__header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: var(--cq-space-4) var(--cq-space-5);
  border-bottom: 1px solid var(--cq-border-subtle);
  position: sticky;
  top: 0;
  background: var(--cq-bg-l1);
  z-index: 1;
}

.cq-perf-panel__body {
  padding: var(--cq-space-5);
}

/* Equity curve day selector pills */
.cq-day-pills {
  display: flex;
  gap: var(--cq-space-1);
}

.cq-day-pill {
  background: var(--cq-bg-l2);
  border: 1px solid var(--cq-border-default);
  border-radius: var(--cq-radius-full);
  color: var(--cq-text-tertiary);
  font-size: 11px;
  font-weight: 600;
  padding: 3px 12px;
  cursor: pointer;
  transition: all var(--cq-duration-fast) var(--cq-ease-default);
}

.cq-day-pill:hover { color: var(--cq-text-secondary); border-color: var(--cq-border-hover); }
.cq-day-pill.is-active { background: var(--cq-color-primary); color: white; border-color: var(--cq-color-primary); }

/* ── 19. Rule Builder — 自定义规则策略构建器 ──────────────── */
.cq-rule-builder {
  display: flex;
  flex-direction: column;
  gap: var(--cq-space-5);
}

.cq-rule-section {
  background: var(--cq-bg-l2);
  border: 1px solid var(--cq-border-default);
  border-radius: var(--cq-radius-lg);
  padding: var(--cq-space-4);
}

.cq-rule-section__header {
  display: flex;
  align-items: center;
  gap: var(--cq-space-2);
  font-size: var(--cq-text-md);
  font-weight: 600;
  color: var(--cq-text-primary);
  margin-bottom: var(--cq-space-3);
}

.cq-rule-section__header svg {
  flex-shrink: 0;
}

.cq-rule-section__header span {
  flex: 1;
}

/* AND/OR 逻辑切换 */
.cq-rule-logic-toggle {
  display: flex;
  gap: 2px;
  background: var(--cq-bg-l1);
  border-radius: var(--cq-radius-sm);
  padding: 2px;
  border: 1px solid var(--cq-border-default);
}

.cq-logic-btn {
  background: transparent;
  border: none;
  color: var(--cq-text-tertiary);
  font-size: 11px;
  font-weight: 700;
  font-family: var(--cq-font-mono);
  padding: 3px 10px;
  border-radius: 4px;
  cursor: pointer;
  transition: all var(--cq-duration-fast) var(--cq-ease-default);
  letter-spacing: 0.5px;
}

.cq-logic-btn:hover {
  color: var(--cq-text-secondary);
}

.cq-logic-btn.is-active {
  background: var(--cq-color-primary);
  color: white;
}

/* 条件列表 */
.cq-rule-conditions {
  display: flex;
  flex-direction: column;
  gap: var(--cq-space-2);
  margin-bottom: var(--cq-space-3);
  min-height: 40px;
}

.cq-rule-empty {
  font-size: var(--cq-text-sm);
  color: var(--cq-text-disabled);
  text-align: center;
  padding: var(--cq-space-4);
  border: 1px dashed var(--cq-border-default);
  border-radius: var(--cq-radius-md);
}

/* 单个条件行 */
.cq-rule-condition {
  background: var(--cq-bg-l1);
  border: 1px solid var(--cq-border-subtle);
  border-radius: var(--cq-radius-md);
  padding: var(--cq-space-3);
  animation: cq-slide-up 0.2s var(--cq-ease-default);
}

.cq-cond-row {
  display: flex;
  align-items: center;
  gap: var(--cq-space-2);
  flex-wrap: wrap;
}

.cq-cond-indicator {
  width: 140px;
  flex-shrink: 0;
}

.cq-cond-operator {
  width: 70px;
  flex-shrink: 0;
}

.cq-cond-value {
  width: 100px;
  flex-shrink: 0;
}

.cq-cond-remove {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  border-radius: var(--cq-radius-sm);
  border: none;
  background: transparent;
  color: var(--cq-text-disabled);
  cursor: pointer;
  transition: all var(--cq-duration-fast) var(--cq-ease-default);
  flex-shrink: 0;
  margin-left: auto;
}

.cq-cond-remove:hover {
  background: var(--cq-color-loss-muted);
  color: var(--cq-color-loss);
}

.cq-cond-params {
  display: flex;
  gap: var(--cq-space-2);
  margin-top: var(--cq-space-2);
  flex-wrap: wrap;
}

.cq-cond-param {
  display: flex;
  align-items: center;
  gap: var(--cq-space-1);
}

.cq-cond-param__label {
  font-size: var(--cq-text-xs);
  color: var(--cq-text-tertiary);
  white-space: nowrap;
}

.cq-cond-param__input {
  width: 70px;
  padding: 4px 6px;
  font-size: var(--cq-text-sm);
}

/* 添加条件按钮 */
.cq-add-condition-btn {
  width: 100%;
  justify-content: center;
  border-style: dashed;
}

/* 风控参数网格 */
.cq-rule-risk-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: var(--cq-space-4);
}

/* 规则预览 */
.cq-rule-preview {
  display: flex;
  flex-direction: column;
  gap: var(--cq-space-3);
}

.cq-rule-preview-text {
  font-family: var(--cq-font-mono);
  font-size: 11px;
  line-height: 1.5;
  color: var(--cq-text-tertiary);
  background: var(--cq-bg-l2);
  border: 1px solid var(--cq-border-default);
  border-radius: var(--cq-radius-md);
  padding: var(--cq-space-3);
  max-height: 200px;
  overflow-y: auto;
  white-space: pre-wrap;
  word-break: break-all;
}

.cq-rule-validation-msg {
  font-size: var(--cq-text-sm);
  padding: var(--cq-space-2) var(--cq-space-3);
  border-radius: var(--cq-radius-md);
  display: flex;
  align-items: center;
  gap: var(--cq-space-2);
}

.cq-rule-valid {
  background: var(--cq-color-profit-muted);
  color: var(--cq-color-profit);
}

.cq-rule-invalid {
  background: var(--cq-color-loss-muted);
  color: var(--cq-color-loss);
}

/* ── 20. Responsive ─────────────────────────────────────────── */

/* Tablet & small desktop (≤1200px) — structural only */
@media (max-width: 1200px) {
  .backtest-layout { grid-template-columns: 1fr !important; }
  #page-trading > div[style*="grid-template-columns"] { grid-template-columns: 1fr !important; }
}

/* Mobile (≤768px) — Sider 变全屏抽屉,Header 保持 sticky */
@media (max-width: 768px) {
  /* 移动端 sider 变抽屉:默认隐藏,展开时滑入 */
  .sidebar {
    width: 260px;
    transform: translateX(-100%);
    background: var(--cq-bg-l1);
    border-right: 1px solid var(--cq-border-default);
  }
  .sidebar.open { transform: translateX(0); }
  /* 主内容区不再让出侧栏宽度 */
  .main-content { margin-left: 0; padding: var(--cq-space-4); }
  /* 移动端折叠态无意义,强制展开样式 */
  body.is-sidebar-collapsed .sidebar-group-label,
  body.is-sidebar-collapsed .sidebar-nav-text,
  body.is-sidebar-collapsed .cq-collapse-label { opacity: 1; pointer-events: auto; width: auto; }
  body.is-sidebar-collapsed .sidebar-nav-item { justify-content: flex-start; padding: 8px var(--cq-space-3); margin: 2px var(--cq-space-2); gap: var(--cq-space-3); }
  /* Header 隐藏品牌副标签节省空间 */
  .cq-header__tag { display: none; }
  .cq-header__user-name { display: none; }
  /* 折叠按钮在移动端隐藏(抽屉里没意义) */
  .sidebar-collapse-button { display: none; }

  .cq-card { padding: var(--cq-space-3); border-radius: var(--cq-radius-lg); }

  .login-card { padding: var(--cq-space-6) var(--cq-space-5); }

  /* Strategy pills — turn into reachable grid on mobile */
  .cq-strategy-section__header { align-items: flex-start; }
  .cq-strategy-filter-tabs {
    width: 100%;
  }
  .cq-strategy-filter-tab {
    flex: 1 1 calc(33.333% - 8px);
    justify-content: center;
  }
  .cq-workbench-toolbar { grid-template-columns: 1fr; }
  .cq-workbench-toolbar__block { padding: var(--cq-space-4); }
  .cq-template-group__header {
    flex-direction: column;
    gap: 2px;
  }
  .cq-template-group__pills {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--cq-space-2);
  }
  .cq-pill {
    width: 100%;
    padding: 8px 12px;
  }
  .cq-pill__check { margin-left: auto; }
  .cq-template-group--compact {
    display: block;
  }
  .cq-template-group--compact .cq-template-group__pills {
    grid-template-columns: minmax(0, 1fr);
  }


  /* Create form — single column on mobile */
  .cq-form-grid { grid-template-columns: 1fr; gap: var(--cq-space-3); }
  .cq-create-card__header { padding: var(--cq-space-3) var(--cq-space-4); }
  .cq-create-card__body { padding: var(--cq-space-4); }
  .cq-create-card__actions { justify-content: flex-start; }
  .cq-workbench-actions .cq-btn { flex: 1 1 100%; min-width: 0; }

  /* Instance cards */
  .cq-instance-card__header { flex-direction: column; align-items: flex-start; gap: var(--cq-space-2); }
  .cq-instance-card__pnl { text-align: left; }

  /* Rule builder mobile */
  .cq-cond-row { flex-direction: column; align-items: stretch; }
  .cq-cond-indicator, .cq-cond-operator, .cq-cond-value { width: 100%; }
  .cq-cond-remove { margin-left: 0; align-self: flex-end; }
  .cq-rule-risk-grid { grid-template-columns: 1fr; }
}

/* Small phone (≤480px) — tight spacing only */
@media (max-width: 480px) {
  .cq-header { height: 56px; padding: 0 var(--cq-space-3); }
  .main-content { padding: var(--cq-space-3); }

  .cq-card { padding: var(--cq-space-3); border-radius: var(--cq-radius-md); }

  .cq-table th { font-size: 10px; padding: var(--cq-space-2) var(--cq-space-1); }
  .cq-table td { font-size: var(--cq-text-sm); padding: var(--cq-space-2) var(--cq-space-1); }

  .cq-btn--full-sm { width: 100%; }

  .login-card { padding: var(--cq-space-5) var(--cq-space-4); border-radius: var(--cq-radius-lg); }

  .cq-toast { font-size: var(--cq-text-xs); padding: var(--cq-space-2) var(--cq-space-4); max-width: 85vw; }
  .cq-template-group__pills { grid-template-columns: minmax(0, 1fr); }

  .account-card-inner { flex-direction: column !important; align-items: flex-start !important; gap: var(--cq-space-3) !important; }
  .account-card-actions { width: 100%; display: flex; justify-content: space-between; align-items: center; }
}