/* ================================================================
   Alpha-7 Web Console — Design System v3.0
   基于 Impeccable + design-taste-frontend 审计升级
   ================================================================ */

/* Self-hosted Geist Sans (variable font, 1 file covers 100-900) */
@font-face {
  font-family: 'Geist Sans';
  src: url('/web/static/fonts/geist/Geist-Variable.woff2') format('woff2-variations');
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

/* Self-hosted JetBrains Mono (variable font, latin-only, 覆盖 400/500/600) */
@font-face {
  font-family: 'JetBrains Mono';
  src: url('/web/static/fonts/jetbrains-mono/JetBrainsMono-Variable.woff2') format('woff2-variations');
  font-weight: 100 800;
  font-style: normal;
  font-display: swap;
}

/* ── 1. Design Tokens — Semi Design v2 调色板 ──────────────────
   Default: Dark mode(深色模式)
   主色 Blue 5 #0064FA(亮蓝),与 New API/Semi 视觉一致
   灰阶取自 Semi Grey 0-9
   ──────────────────────────────────────────────────────────── */
:root {
  /* Color — Brand (保留 indigo 不动) */
  --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 (v4: 6 档，卡片反向更暗) */
  --cq-bg-l0:  #0A0A0C;
  --cq-bg-l1:  #0F0F12;
  --cq-bg-l2:  #141417;
  --cq-bg-l3:  #1A1A1F;
  --cq-bg-l4:  #1F1F25;
  --cq-bg-l5:  #26262E;

  /* Color — Borders */
  --cq-border-default:  rgba(255,255,255,0.06);
  --cq-border-hover:    rgba(77,127,255,0.32);
  --cq-border-active:   rgba(77,127,255,0.48);
  --cq-border-subtle:   rgba(255,255,255,0.04);

  /* Color — Text */
  --cq-text-primary:    #EDEDED;
  --cq-text-secondary:  #C5C7CA;
  --cq-text-tertiary:   #8B8B93;
  --cq-text-disabled:   #5F6368;

  /* Avatar palette */
  --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;

  /* 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:   11px;
  --cq-text-sm:   12px;
  --cq-text-base: 13px;
  --cq-text-md:   14px;
  --cq-text-lg:   15px;
  --cq-text-xl:   18px;
  --cq-text-2xl:  22px;
  --cq-text-3xl:  28px;
  --cq-text-4xl:  36px;

  /* Spacing (保留) */
  --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 (xl 12→10) */
  --cq-radius-sm:   4px;
  --cq-radius-md:   6px;
  --cq-radius-lg:   8px;
  --cq-radius-xl:   10px;
  --cq-radius-full: 9999px;

  /* Shadows — v4 用 glow 替代 dark 下看不见的 drop shadow */
  --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);

  --cq-glow-xs: 0 0 0 1px rgba(77,127,255,0.16);
  --cq-glow-sm: 0 0 0 1px rgba(77,127,255,0.16), 0 0 12px rgba(77,127,255,0.06);
  --cq-glow-md: 0 0 0 1px rgba(77,127,255,0.24), 0 0 24px rgba(77,127,255,0.10);

  /* Transitions — 三档收敛 150/180/220 */
  --cq-duration-fast:   150ms;
  --cq-duration-medium: 180ms;
  --cq-duration-slow:   220ms;
  --cq-duration-normal: 180ms; /* 兼容旧引用 */
  --cq-ease-default: cubic-bezier(0.4, 0, 0.2, 1);
  --cq-ease-out:     cubic-bezier(0.16, 1, 0.3, 1);

  /* Layout */
  --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 玻璃态(dark) */
  --cq-header-bg:               rgba(15,15,18,0.78);
  --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='%238B8B93' 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 (v4) ────────────────────────────────────────── */
[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);

  /* Light 主题状态色 — 在白底/浅 tinted bg 上加深以过 WCAG AA (≥4.5:1)。
     原色 (#00A870/#F93920/#FFB400/#0064FA/#A7ABB0) 是从暗色主题直接复用,
     light 上对比度 1.68~3.75 全不过 AA。实测加深后:
       profit  #00754F on rgba(34,197,94,.1)/白  → ~5.30
       loss    #C12612 on rgba(249,57,32,.1)/白  → ~5.06
       warning #946000 on rgba(255,180,0,.1)/白  → ~5.06
       info    #1A5FCC on rgba(0,100,250,.1)/白  → ~5.90
       text-disabled #6B7280 on 白              → ~4.88
     暗色主题(line 29-36)不动 — dark 实测都 ≥5,本来就过。 */
  --cq-color-profit:         #00754F;
  --cq-color-profit-muted:   rgba(0,168,112,0.10);
  --cq-color-loss:           #C12612;
  --cq-color-loss-muted:     rgba(249,57,32,0.10);
  --cq-color-warning:        #946000;
  --cq-color-warning-muted:  rgba(255,180,0,0.10);
  --cq-color-info:           #1A5FCC;
  --cq-color-info-muted:     rgba(0,100,250,0.10);

  --cq-bg-l0:  #F7F8FA;
  --cq-bg-l1:  #FFFFFF;
  --cq-bg-l2:  #FFFFFF;
  --cq-bg-l3:  #F0F1F4;
  --cq-bg-l4:  #EAECEF;
  --cq-bg-l5:  #ECEEF2;  /* input 凹陷感：跟 bg-l2 白色对比要够 */

  --cq-border-default: rgba(28,31,35,0.08);
  --cq-border-hover:   rgba(0,100,250,0.32);
  --cq-border-active:  rgba(0,100,250,0.48);
  --cq-border-subtle:  rgba(28,31,35,0.05);

  --cq-text-primary:    #1C1F23;
  --cq-text-secondary:  #41464C;
  /* text-tertiary 在白底 4.93 过 AA,但在 bg-l3(#F0F1F4) 灰底 (如 table TH) 只 4.43,
     加深 1 档到 #5F6368 让 bg-l3 上也 ≥5.3。其他白底用法不受影响(白底足够亮)。 */
  --cq-text-tertiary:   #5F6368;
  /* text-disabled 在 accounts.js STATUS_MAP.disabled 里被复用作"已禁用"标签字色,
     light 主题原 #A7ABB0 vs 白 仅 2.31 → 加深到 #6B7280 (4.88)。
     "禁用感"由更弱的 bg 与位置传达,不必非常浅。 */
  --cq-text-disabled:   #6B7280;

  --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);

  --cq-glow-xs: 0 0 0 1px rgba(0,100,250,0.12);
  --cq-glow-sm: 0 0 0 1px rgba(0,100,250,0.12), 0 0 12px rgba(0,100,250,0.04);
  --cq-glow-md: 0 0 0 1px rgba(0,100,250,0.20), 0 0 24px rgba(0,100,250,0.06);

  /* Header 玻璃态(light) — 关键修复：原本是 .75 白色，在白页上无对比 */
  --cq-header-bg:               rgba(247,248,250,0.85);
  --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");
}

/* Light 主题:多处 primary 文字落在浅蓝 primary-muted bg 上,
   字色 var(--cq-color-primary)=#0064FA 对比度仅 4.33,差 AA 0.17。
   局部 override 字色到 primary-active (#0050D6) → 5.86。
   不动 --cq-color-primary token 是为了 .cq-btn--primary 等按钮 bg 视觉重量不变。
   暗色主题(浅蓝底 #0064FA 文字)本来就过,无需 override。
   覆盖:
     - .cq-tag--info / .cq-header__tag — header 与 info 标签
     - .cq-log-card__type--order / .cq-event-list__type 系列订单标签
     - .cq-drawer__tab.is-active / .cq-segmented__item.is-active — 选中态 tab */
[data-theme="light"] .cq-tag--info,
[data-theme="light"] .cq-header__tag,
[data-theme="light"] .cq-log-card__type--order,
[data-theme="light"] .cq-log-card__type--signal,
[data-theme="light"] .cq-drawer__tab.is-active,
[data-theme="light"] .cq-segmented__item.is-active,
[data-theme="light"] .cq-strategy-filter-tab.is-active,
[data-theme="light"] .cq-margin-btn.is-active,
[data-theme="light"] .cq-param-value,
[data-theme="light"] .sidebar-nav-item.active {
  color: var(--cq-color-primary-active);
}

/* Light:sym-sel__tag(现货/合约)硬编码 Tailwind green-500/orange-400,
   在浅底上 2.06/2.12 远不过 AA。light 主题给死字色加深(token 不可复用,
   profit/warning token 是另一个色相)。暗色主题不动。 */
[data-theme="light"] .sym-sel__tag--spot { color: #166534; }
[data-theme="light"] .sym-sel__tag--perp { color: #9A3412; }
/* 注:.sym-sel__icon (BTC 橙 / ETH 紫等)是币种品牌识别色,行业惯例,且元素旁
   即有完整币种文本,豁免 WCAG 文本对比要求。 */

/* Dark 主题修复:几处白字 on primary bg / 红字 on loss-muted 对比度不过 AA。
   只 override dark,light 此处本来就过(已在前面处理)。 */
:root .cq-header__user-avatar,
:root .cq-day-pill.is-active {
  /* primary #4D7FFF 上白字仅 3.62,改用 primary-active #2E66E6 → 5.07。
     "active" dark 视觉上是更深一档蓝,与未选 pill 反差更强,语义也清晰。 */
  background: var(--cq-color-primary-active);
  border-color: var(--cq-color-primary-active);
}
[data-theme="light"] .cq-header__user-avatar,
[data-theme="light"] .cq-day-pill.is-active,
[data-theme="light"] .cq-btn--primary {
  /* light 这几个白字 + primary bg 本来 4.97 过 AA,恢复原 primary。 */
  background: var(--cq-color-primary);
  border-color: var(--cq-color-primary);
}
[data-theme="light"] .cq-btn--primary:hover:not(:disabled) {
  background: var(--cq-color-primary-hover);
  border-color: var(--cq-color-primary-hover);
}
:root .cq-btn--danger {
  /* dark loss #F93920 on loss-muted bg 仅 4.23,加亮一档 #FF6B5C → 5.61。
     light 已通过 --cq-color-loss token (#C12612) 在前面修复,不命中此 override。 */
  color: #FF6B5C;
}
[data-theme="light"] .cq-btn--danger {
  /* light 恢复 token(已 #C12612 → 5.06 过 AA)。 */
  color: var(--cq-color-loss);
}

/* 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; }

/* a11y:键盘焦点 ring 全局兜底。
   覆盖所有 button/a/input/select/textarea/[role=button]/[tabindex] 在 :focus-visible
   (浏览器判定为键盘焦点)时显示 primary 蓝 ring,鼠标 click 不触发不影响视觉。
   用 :where() 0 specificity:.cq-btn:focus-visible / .cq-input:focus 等 site 已有规则
   specificity 更高自动 override,这里只兜未被显式定义的 ~50 个按钮 (cq-icon-btn / cq-day-pill /
   cq-instance-row / cq-event-list__item / cq-collapse-btn 等),否则键盘用户 Tab 切焦点没视觉反馈。
   WCAG 2.1 AA 2.4.7 Focus Visible 强制要求。 */
:where(button, a[href], input, select, textarea, [role="button"], [tabindex]:not([tabindex="-1"])):focus-visible {
  outline: 2px solid var(--cq-color-primary);
  outline-offset: 2px;
}

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-medium) var(--cq-ease-default),
              color var(--cq-duration-medium) 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: calc(var(--cq-header-height) + env(safe-area-inset-top));
  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: env(safe-area-inset-top) max(var(--cq-space-4), env(safe-area-inset-right)) 0 max(var(--cq-space-4), env(safe-area-inset-left));
  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;
  /* dark 用 primary-hover(#6F97FF 更亮)在 muted bg 上过 AA;
     light 用 primary 在浅蓝 muted 上只 4.33,由下方 [data-theme="light"] 块 override 到 primary-active。 */
  color: var(--cq-color-primary-hover);
  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); }

@media (pointer: coarse) {
  .cq-icon-btn { width: 44px; height: 44px; }
}

.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);
  /* dark 用 primary-hover 过 AA;light 由下方 override 到 primary-active。 */
  color: var(--cq-color-primary-hover);
  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) max(var(--cq-space-6), env(safe-area-inset-right)) max(var(--cq-space-6), env(safe-area-inset-bottom)) max(var(--cq-space-6), env(safe-area-inset-left));
  min-height: calc(100dvh - var(--cq-header-height) - env(safe-area-inset-top));
  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 — v4 Linear 风:反层次 + hover 蓝 border + glow */
.cq-card {
  background: var(--cq-bg-l2);
  border: 1px solid var(--cq-border-default);
  border-radius: var(--cq-radius-xl);
  padding: var(--cq-space-5);
  transition: border-color var(--cq-duration-fast) var(--cq-ease-default),
              box-shadow var(--cq-duration-fast) var(--cq-ease-default),
              transform var(--cq-duration-medium) var(--cq-ease-out),
              background-color var(--cq-duration-medium) var(--cq-ease-default);
}

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

.cq-card--selected {
  background: var(--cq-bg-l4);
  border-color: var(--cq-border-active);
  box-shadow: var(--cq-glow-md);
}

.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-hover); }
.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 {
  /* dark primary=#4D7FFF + 白字 仅 3.62 不过 AA,用 primary-active(#2E66E6 → 5.07)。
     light override 在下方还原成 primary(#0064FA 白字 4.97 已过)。 */
  background: var(--cq-color-primary-active);
  color: #fff;
  border-color: var(--cq-color-primary-active);
}
.cq-btn--primary:hover:not(:disabled) {
  /* hover 瞬态,WCAG 不强制;dark 反向亮一档让 hover 反馈清晰。 */
  background: var(--cq-color-primary);
  border-color: var(--cq-color-primary);
  box-shadow: var(--cq-glow-sm);
}
.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); }

/* full 宽度按钮通常是页面主 CTA(登录 / 开始回测),移动端要满足 WCAG 触摸目标 ≥44px */
.cq-btn--full { width: 100%; min-height: 44px; }

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

/* Input — v4: bg-l5 凹陷感 + focus 蓝 glow */
.cq-input {
  background: var(--cq-bg-l5);
  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-base);
  font-family: var(--cq-font-sans);
  width: 100%;
  /* iOS Safari 对 input[type=date] 有 intrinsic min-content（中文 yyyy年m月d日 + native picker icon 实测 ~190px），
     即使 width:100% + box-sizing:border-box 仍会撑大父 grid/flex cell 导致溢出。
     min-width:0 强制 input 服从外层容器宽度。 */
  min-width: 0;
  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-medium) 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: var(--cq-glow-xs);
}

.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); }

/* iOS Safari 把 input[type=date|time|datetime-local|month|week] 当 native atomic 控件渲染：
   忽略 box-sizing:border-box / min-width:0，padding 算在 width 外，导致 width:100% 的 date
   input 比父 cell 实际宽出左右 padding 总和，溢出 card。安卓 Chromium 没这个 quirk。
   appearance:none 强制走通用 input 渲染路径，box-sizing 等 CSS 生效；点击仍弹 iOS native picker。
   代价：iOS 显示 ISO 格式 (2025-05-15) 而非中文本地化 (2025年5月15日)。 */
input[type="date"].cq-input,
input[type="time"].cq-input,
input[type="datetime-local"].cq-input,
input[type="month"].cq-input,
input[type="week"].cq-input {
  -webkit-appearance: none;
  appearance: none;
}
input[type="date"].cq-input::-webkit-date-and-time-value,
input[type="datetime-local"].cq-input::-webkit-date-and-time-value,
input[type="time"].cq-input::-webkit-date-and-time-value,
input[type="month"].cq-input::-webkit-date-and-time-value,
input[type="week"].cq-input::-webkit-date-and-time-value {
  text-align: left;
  min-width: 0;
}

/* 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-fast) var(--cq-ease-default),
              box-shadow var(--cq-duration-fast) var(--cq-ease-default);
  display: inline-block;
  flex-shrink: 0;
}

.cq-toggle:hover {
  box-shadow: var(--cq-glow-xs);
}

.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);
  /* dark: count 继承父 primary-hover 字色 + 白叠加 16% 蓝灰底,对比度仅 3.22 不过 AA。
     bg 已经亮,用纯白字 8.97 过。light 主题下 bg 是几乎纯白,白字看不见 → 由 light override 还原。 */
  color: #fff;
}
[data-theme="light"] .cq-strategy-filter-tab.is-active .cq-strategy-filter-tab__count {
  /* light 还原继承(父 primary-active 字色) */
  color: inherit;
}

.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-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;
}

/* ── 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-glow-md);
  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-metrics-detail__body 的 max-height:2000px 限制（43+笔 trade 会被
   切掉无法滚动），改为表格内部容器自身限高 + 垂直滚动条。折叠瞬切牺牲掉，但 60+
   笔回测能看全。 */
.cq-trades-detail .cq-metrics-detail__body {
  max-height: none;
}

.cq-trades-detail .cq-table-wrap {
  max-height: 70vh;
  overflow-y: auto;
}

/* 表头 sticky，长列表滚动时仍能看到列名 */
.cq-trades-detail .cq-trades-table thead th {
  position: sticky;
  top: 0;
  background: var(--cq-bg-l1);
  z-index: 1;
}

.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;
}

.cq-market-layout {
  display: grid;
  grid-template-columns: minmax(0, 1.65fr) minmax(320px, 0.9fr);
  gap: var(--cq-space-5);
  align-items: stretch;
}

.cq-market-chart-panel {
  min-width: 0;
}


/* 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);
}

.cq-segmented-control {
  display: inline-flex;
  width: 100%;
  border: 1px solid var(--cq-border-default);
  border-radius: var(--cq-radius-md);
  overflow: hidden;
  background: var(--cq-bg-l2);
}

.cq-margin-btn {
  flex: 1;
  min-height: 40px;
  border: 0;
  background: transparent;
  color: var(--cq-text-secondary);
  font-size: var(--cq-text-sm);
  font-weight: 600;
  cursor: pointer;
}

.cq-margin-btn.is-active {
  background: rgba(99, 102, 241, 0.12);
  color: var(--cq-color-primary-hover);
}

/* ── 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-glow-md);
  animation: cq-dialog-in var(--cq-duration-medium) var(--cq-ease-out);
}

@keyframes cq-dialog-in {
  from { opacity: 0; transform: scale(0.96) translateY(4px); }
  to   { opacity: 1; transform: scale(1) translateY(0); }
}

.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);
}

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

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

.cq-empty-inline {
  display: grid;
  place-items: center;
  min-height: 180px;
  color: var(--cq-text-tertiary);
  font-size: var(--cq-text-sm);
}

.cq-empty-state--compact {
  padding: var(--cq-space-5);
  text-align: center;
}

.cq-instance-table,
.cq-event-list,
.cq-status-list,
.cq-event-table {
  display: flex;
  flex-direction: column;
  gap: var(--cq-space-2);
}

/* 实时活动 50 条全铺开会把同行权益曲线 card 撑到 3000+ px,锁滚动并对齐右侧 chart (240px) */
#dashboard-activity-stream {
  max-height: 240px;
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: var(--cq-border-subtle) transparent;
}
#dashboard-activity-stream::-webkit-scrollbar { width: 4px; }
#dashboard-activity-stream::-webkit-scrollbar-track { background: transparent; }
#dashboard-activity-stream::-webkit-scrollbar-thumb { background: var(--cq-border-subtle); border-radius: 2px; }

.cq-instance-row,
.cq-event-list__item,
.cq-event-table__row {
  width: 100%;
  border: 1px solid var(--cq-border-subtle);
  background: var(--cq-bg-l2);
  color: inherit;
  border-radius: 8px;
  padding: var(--cq-space-3);
}

.cq-instance-row {
  display: grid;
  grid-template-columns: 10px minmax(0, 1.6fr) auto auto auto;
  align-items: center;
  gap: var(--cq-space-3);
  text-align: left;
  cursor: pointer;
}

.cq-instance-row__status {
  width: 10px;
  height: 10px;
  border-radius: 999px;
  background: var(--cq-text-disabled);
}

.cq-instance-row__status--running { background: var(--cq-color-profit); }
.cq-instance-row__status--paused { background: var(--cq-color-warning); }
.cq-instance-row__status--stopped { background: var(--cq-text-disabled); }
.cq-instance-row__status--draft { background: var(--cq-color-info); }

.cq-instance-row__main,
.cq-event-list__item,
.cq-event-list__item--static {
  min-width: 0;
}

.cq-instance-row__title {
  display: block;
  font-weight: 600;
  color: var(--cq-text-primary);
}

.cq-instance-row__meta,
.cq-instance-row__action,
.cq-event-list__time {
  font-size: var(--cq-text-xs);
  color: var(--cq-text-tertiary);
}

.cq-instance-row__metric,
.cq-event-list__summary {
  font-size: var(--cq-text-sm);
}

.cq-event-list__item,
.cq-event-list__item--static {
  display: grid;
  grid-template-columns: 64px auto minmax(0, 1fr);
  gap: var(--cq-space-3);
  align-items: start;
  text-align: left;
}

.cq-status-list__item {
  display: flex;
  justify-content: space-between;
  gap: var(--cq-space-3);
  padding: var(--cq-space-3);
  border-radius: 8px;
  background: var(--cq-bg-l2);
  font-size: var(--cq-text-sm);
}

.cq-drawer {
  position: fixed;
  inset: 0;
  /* 高于 .cq-header 的 z-index:100，否则 sticky header 会盖住 drawer 顶部 64px */
  z-index: 150;
}

.cq-drawer__overlay {
  position: absolute;
  inset: 0;
  background: rgba(15, 23, 42, 0.42);
}

.cq-drawer__panel {
  position: absolute;
  top: 0;
  right: 0;
  width: min(480px, calc(100vw - 64px));
  height: 100%;
  padding-top: env(safe-area-inset-top);
  padding-right: env(safe-area-inset-right);
  padding-bottom: env(safe-area-inset-bottom);
  background: var(--cq-bg-l1);
  border-left: 1px solid var(--cq-border-default);
  display: flex;
  flex-direction: column;
  transform: translateX(0);
  transition: transform 0.2s ease;
}

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

.cq-drawer__header h2 {
  margin: 0;
  font-size: var(--cq-text-lg);
}

.cq-drawer__tabs {
  display: flex;
  gap: var(--cq-space-2);
  padding: var(--cq-space-3) var(--cq-space-4);
  border-bottom: 1px solid var(--cq-border-subtle);
  overflow-x: auto;
}

.cq-drawer__tab,
.cq-segmented__item {
  white-space: nowrap;
  border: 1px solid var(--cq-border-default);
  background: transparent;
  color: var(--cq-text-secondary);
  border-radius: 999px;
  padding: 8px 12px;
  font-size: var(--cq-text-sm);
}

.cq-drawer__tab.is-active,
.cq-segmented__item.is-active {
  background: var(--cq-color-primary-muted);
  border-color: var(--cq-color-primary);
  /* dark primary-hover 过 AA;light 由下方 override。 */
  color: var(--cq-color-primary-hover);
}

.cq-drawer__body {
  flex: 1;
  overflow: auto;
  padding: var(--cq-space-4);
}

.cq-settings-pane:not(.is-active) {
  display: none;
}

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

.cq-settings-readonly__item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--cq-space-3);
  padding: var(--cq-space-3);
  border-radius: 8px;
  background: var(--cq-bg-l2);
}

/* Legacy .cq-settings-form rules removed in v4 — see end of file for
   the v4 settings-form rules (cq-settings-form__group + bg-l5 inputs). */

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

.cq-instance-summary__grid > div {
  padding: var(--cq-space-3);
  border-radius: 8px;
  background: var(--cq-bg-l2);
}

.cq-instance-summary__grid span {
  display: block;
  font-size: var(--cq-text-xs);
  color: var(--cq-text-tertiary);
  margin-bottom: 4px;
}

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

.cq-instance-kline summary {
  cursor: pointer;
  margin-bottom: var(--cq-space-3);
}

.cq-event-filters {
  display: grid;
  grid-template-columns: 1fr 1fr minmax(220px, 320px);
  gap: var(--cq-space-3);
  margin-bottom: var(--cq-space-4);
  align-items: center;
}

.cq-checkbox-label {
  display: inline-flex;
  align-items: center;
  gap: var(--cq-space-2);
  font-size: var(--cq-text-sm);
  color: var(--cq-text-secondary);
  cursor: pointer;
  user-select: none;
}
.cq-checkbox-label input[type="checkbox"] {
  cursor: pointer;
  width: 14px;
  height: 14px;
}

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

.cq-event-table__row {
  display: grid;
  grid-template-columns: 150px 90px 70px minmax(0, 1fr);
  gap: var(--cq-space-3);
  text-align: left;
}

.cq-event-pagination {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: var(--cq-space-3);
  margin-top: var(--cq-space-4);
}

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

/* grid item 默认 min-width:auto = min-content，会被内部 cq-grid-3 等 min-content 撑出 1fr track。
   显式 min-width:0 后 1fr 才按容器宽度真实分配 */
.backtest-layout > * { min-width: 0; }

/* Tablet & compact desktop (≤1080px) — structural only */
@media (max-width: 1080px) {
  .backtest-layout { grid-template-columns: 1fr !important; }
  .cq-market-layout { grid-template-columns: 1fr; }
  .cq-grid-2,
  .cq-event-filters { grid-template-columns: 1fr; }
  .cq-instance-row,
  .cq-event-table__row { grid-template-columns: 1fr; }
}

/* 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-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; }
  /* 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; }
  .cq-instance-summary__grid { grid-template-columns: 1fr; }
  .cq-instance-actions { flex-direction: column; }

  /* 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; }

  /* Drawer 在窄/半屏下：上限 520px，留至少 64px overlay 让用户能瞥到背景 +
     点空白关闭；desktop 480px 固定宽在 700px 窗口下既挡左侧又散，半屏更糟 */
  .cq-drawer__panel { width: min(520px, calc(100vw - 64px)); max-width: none; }
}

/* 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; }
}

/* ── Strategy Template Cards (v4) ────────────────────────────── */
.cq-template-card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: var(--cq-space-2);
}

.cq-template-card {
  display: flex;
  align-items: flex-start;
  gap: var(--cq-space-3);
  padding: var(--cq-space-3);
  background: var(--cq-bg-l2);
  border: 1px solid var(--cq-border-default);
  border-radius: var(--cq-radius-lg);
  cursor: pointer;
  text-align: left;
  font-family: inherit;
  color: var(--cq-text-primary);
  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-medium) var(--cq-ease-default),
              transform var(--cq-duration-medium) var(--cq-ease-out);
}

.cq-template-card:hover {
  border-color: var(--cq-border-hover);
  box-shadow: var(--cq-glow-sm);
  transform: translateY(-1px);
}

.cq-template-card.is-selected {
  background: var(--cq-bg-l4);
  border-color: var(--cq-border-active);
  box-shadow: var(--cq-glow-md);
}

.cq-template-card__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: var(--cq-radius-md);
  background: var(--cq-color-primary-muted);
  color: var(--cq-color-primary);
  flex-shrink: 0;
}
.cq-template-card__icon svg { width: 16px; height: 16px; }

.cq-template-card__body {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
  flex: 1;
}

.cq-template-card__name {
  font-size: var(--cq-text-md);
  font-weight: 600;
  color: var(--cq-text-primary);
  line-height: 1.4;
}

.cq-template-card__desc {
  font-size: var(--cq-text-sm);
  color: var(--cq-text-tertiary);
  line-height: 1.45;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
}

.cq-template-card__chevron {
  color: var(--cq-text-tertiary);
  flex-shrink: 0;
  margin-top: 4px;
  transition: transform var(--cq-duration-fast) var(--cq-ease-default),
              color var(--cq-duration-fast) var(--cq-ease-default);
}

.cq-template-card:hover .cq-template-card__chevron {
  color: var(--cq-color-primary);
  transform: translateX(2px);
}

.cq-template-card.is-selected .cq-template-card__chevron {
  color: var(--cq-color-primary);
}

/* ── Template Custom-Rule Banner (v4) ────────────────────────── */
.cq-template-banner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--cq-space-4);
  padding: var(--cq-space-4) var(--cq-space-5);
  margin-top: var(--cq-space-3);
  background: linear-gradient(135deg, var(--cq-color-primary-muted), var(--cq-color-primary-subtle));
  border: 1px solid var(--cq-border-default);
  border-radius: var(--cq-radius-lg);
}

.cq-template-banner__body {
  display: flex;
  flex-direction: column;
  gap: var(--cq-space-1);
  min-width: 0;
  flex: 1;
}

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

.cq-template-banner__desc {
  font-size: var(--cq-text-sm);
  color: var(--cq-text-secondary);
  line-height: 1.5;
}

.cq-template-banner__action {
  flex-shrink: 0;
}

/* ── Account cards inside settings drawer (v4) ─────────────────
   Account cards are designed for full-width pages with logo+name
   on the left and balance+actions on the right. The drawer is
   only ~540px wide which squeezes the name column to a single
   character wide. Force vertical stacking inside the drawer. */
.cq-settings-pane .account-card-inner > div {
  flex-direction: column !important;
  align-items: stretch !important;
  gap: var(--cq-space-3) !important;
}

.cq-settings-pane .account-card-inner > div > div:last-child {
  justify-content: space-between !important;
  padding-top: var(--cq-space-3) !important;
  border-top: 1px solid var(--cq-border-subtle) !important;
}

@media (max-width: 640px) {
  .cq-template-banner {
    flex-direction: column;
    align-items: stretch;
    text-align: left;
  }
  .cq-template-banner__action {
    width: 100%;
    justify-content: center;
  }
}

/* ── Drawer header/tabs divider (v4) ──────────────────────────── */
.cq-drawer__header {
  border-bottom: 1px solid var(--cq-border-subtle);
}

.cq-drawer__tabs {
  border-bottom: 1px solid var(--cq-border-subtle);
}

/* ── Settings form (v4) ───────────────────────────────────────── */
.cq-settings-form {
  display: flex;
  flex-direction: column;
  gap: var(--cq-space-4);
  padding: var(--cq-space-4) 0;
}

.cq-settings-form__group {
  display: flex;
  flex-direction: column;
  gap: var(--cq-space-3);
  padding: var(--cq-space-4);
  background: var(--cq-bg-l2);
  border: 1px solid var(--cq-border-default);
  border-radius: var(--cq-radius-lg);
}

.cq-settings-form__group-title {
  font-size: var(--cq-text-xs);
  font-weight: 600;
  color: var(--cq-text-tertiary);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin-bottom: var(--cq-space-1);
}

.cq-settings-section-title {
  font-size: var(--cq-text-base);
  font-weight: 600;
  color: var(--cq-text-primary);
  margin: 0 0 var(--cq-space-2) 0;
}

.cq-settings-section-title--divider {
  margin-top: var(--cq-space-5);
  padding-top: var(--cq-space-5);
  border-top: 1px solid var(--cq-border-default);
}

.cq-settings-form label {
  display: flex;
  flex-direction: column;
  gap: var(--cq-space-2);
  font-size: var(--cq-text-base);
  font-weight: 500;
  color: var(--cq-text-secondary);
}

.cq-settings-form label.cq-checkbox {
  flex-direction: row;
  align-items: center;
  gap: var(--cq-space-2);
  font-weight: 400;
}

.cq-settings-form input[type="text"],
.cq-settings-form input[type="number"],
.cq-settings-form input[type="password"],
.cq-settings-form input:not([type]) {
  background: var(--cq-bg-l5);
  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-family: var(--cq-font-sans);
  font-size: var(--cq-text-base);
  outline: none;
  width: 100%;
  transition: border-color var(--cq-duration-fast) var(--cq-ease-default),
              box-shadow var(--cq-duration-fast) var(--cq-ease-default);
}

.cq-settings-form input:focus-visible {
  outline: none;
}

/* Hide native spinners on number inputs — they squish weirdly at 32px height */
.cq-settings-form input[type="number"] {
  -moz-appearance: textfield;
  appearance: textfield;
}
.cq-settings-form input[type="number"]::-webkit-outer-spin-button,
.cq-settings-form input[type="number"]::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

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

.cq-settings-form input:focus {
  border-color: var(--cq-color-primary);
  box-shadow: var(--cq-glow-xs);
}

.cq-settings-form small {
  font-size: var(--cq-text-sm);
  color: var(--cq-text-tertiary);
  line-height: 1.5;
}

.cq-settings-form small code {
  font-family: var(--cq-font-mono);
  background: var(--cq-bg-l3);
  padding: 1px 4px;
  border-radius: var(--cq-radius-sm);
  font-size: 11px;
}

.cq-settings-form__actions {
  display: flex;
  gap: var(--cq-space-2);
  margin-top: var(--cq-space-2);
}

.cq-settings-form__status {
  font-size: var(--cq-text-sm);
  color: var(--cq-text-tertiary);
  min-height: 20px;
}

.cq-settings-error {
  color: var(--cq-color-loss);
  font-size: var(--cq-text-sm);
}

/* Suppress Chrome/Edge autofill yellow/blue overlay on all inputs.
   Use inset box-shadow trick because background can't be overridden. */
.cq-settings-form input:-webkit-autofill,
.cq-settings-form input:-webkit-autofill:hover,
.cq-settings-form input:-webkit-autofill:focus,
.cq-input:-webkit-autofill,
.cq-input:-webkit-autofill:hover,
.cq-input:-webkit-autofill:focus {
  -webkit-box-shadow: 0 0 0 1000px var(--cq-bg-l5) inset !important;
  -webkit-text-fill-color: var(--cq-text-primary) !important;
  transition: background-color 9999s ease-in-out 0s;
  caret-color: var(--cq-text-primary);
}

/* ── 账户卡片：持仓折叠区 ───────────────────────────────────── */

.cq-account-positions {
  margin-top: var(--cq-space-3);
  padding-top: var(--cq-space-3);
  border-top: 1px solid var(--cq-border-default);
}

.cq-account-positions__toggle {
  display: inline-flex;
  align-items: center;
  gap: var(--cq-space-2);
  background: transparent;
  border: none;
  padding: 4px 6px;
  margin-left: -6px;
  color: var(--cq-text-secondary);
  font-size: var(--cq-text-sm);
  font-weight: 500;
  cursor: pointer;
  border-radius: var(--cq-radius-sm);
  transition: color var(--cq-duration-fast) var(--cq-ease-default),
              background var(--cq-duration-fast) var(--cq-ease-default);
}

.cq-account-positions__toggle:hover {
  color: var(--cq-text-primary);
  background: var(--cq-bg-l2);
}

.cq-account-positions__chevron {
  transition: transform var(--cq-duration-fast) var(--cq-ease-default);
}

.cq-account-positions__toggle.is-open .cq-account-positions__chevron {
  transform: rotate(90deg);
}

.cq-account-positions__count {
  color: var(--cq-text-tertiary);
  font-variant-numeric: tabular-nums;
}

.cq-account-positions__body {
  margin-top: var(--cq-space-3);
  display: flex;
  flex-direction: column;
  gap: var(--cq-space-2);
}

/* [hidden] 的 UA 默认 display:none 会被上面的 display:flex 覆盖，需显式恢复 */
.cq-account-positions__body[hidden] {
  display: none;
}

.cq-account-positions__empty {
  font-size: var(--cq-text-sm);
  color: var(--cq-text-tertiary);
  padding: var(--cq-space-3);
  text-align: center;
  background: var(--cq-bg-l2);
  border-radius: var(--cq-radius-md);
}

.cq-account-position-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--cq-space-3);
  padding: var(--cq-space-3);
  background: var(--cq-bg-l2);
  border: 1px solid var(--cq-border-default);
  border-radius: var(--cq-radius-md);
}

.cq-account-position-row__main {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
  flex: 1;
}

.cq-account-position-row__head {
  display: flex;
  align-items: center;
  gap: var(--cq-space-2);
  flex-wrap: wrap;
}

.cq-account-position-row__symbol {
  font-weight: 600;
  font-size: var(--cq-text-md);
  color: var(--cq-text-primary);
  font-variant-numeric: tabular-nums;
}

.cq-account-position-row__meta {
  font-size: var(--cq-text-xs);
  color: var(--cq-text-tertiary);
  font-variant-numeric: tabular-nums;
}

.cq-account-position-row__sub {
  font-size: var(--cq-text-xs);
  color: var(--cq-text-tertiary);
}

.cq-text-profit { color: var(--cq-color-profit); }
.cq-text-loss   { color: var(--cq-color-loss); }

/* 窄屏（含设置抽屉、手机端）允许换行，避免按钮挤出可视区或被截断 */
@media (max-width: 600px) {
  .cq-account-position-row {
    flex-wrap: wrap;
  }
}

/* ── json_table 控件（分层止盈 等三列数值配置） ─────────────── */

.cq-json-table {
  display: flex;
  flex-direction: column;
  gap: var(--cq-space-2);
  padding: var(--cq-space-3);
  background: var(--cq-bg-l2);
  border: 1px solid var(--cq-border-default);
  border-radius: var(--cq-radius-md);
}

.cq-json-table__head,
.cq-json-table__row {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 32px;
  gap: var(--cq-space-2);
  align-items: center;
}

.cq-json-table__th {
  display: flex;
  flex-direction: column;
  gap: 1px;
  font-size: var(--cq-text-xs);
  color: var(--cq-text-tertiary);
  font-weight: 500;
  line-height: 1.3;
  padding: 0 2px;
}

.cq-json-table__th small {
  font-size: 10px;
  color: var(--cq-text-disabled);
  font-weight: 400;
}

.cq-json-table__th--actions {
  /* 占位，与行尾删除按钮对齐 */
}

.cq-json-table__input {
  width: 100%;
  min-width: 0;          /* 让 input 可以在 grid cell 里被压缩，不撑爆列宽 */
  box-sizing: border-box;
  height: 32px;
  padding: 4px 8px;
  background: var(--cq-bg-l5);
  border: 1px solid var(--cq-border-default);
  border-radius: var(--cq-radius-sm);
  color: var(--cq-text-primary);
  font-variant-numeric: tabular-nums;
  font-size: var(--cq-text-sm);
  appearance: textfield;
  transition: border-color var(--cq-duration-fast) var(--cq-ease-default),
              box-shadow var(--cq-duration-fast) var(--cq-ease-default);
}

.cq-json-table__input::-webkit-outer-spin-button,
.cq-json-table__input::-webkit-inner-spin-button {
  appearance: none;
  margin: 0;
}

.cq-json-table__input:focus,
.cq-json-table__input:focus-visible {
  outline: none;
  border-color: var(--cq-color-primary);
  box-shadow: 0 0 0 2px var(--cq-color-primary-muted);
}

.cq-json-table__remove {
  width: 28px;
  height: 28px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: 1px solid transparent;
  border-radius: var(--cq-radius-sm);
  color: var(--cq-text-tertiary);
  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-json-table__remove:hover {
  background: var(--cq-color-loss-muted);
  color: var(--cq-color-loss);
  border-color: var(--cq-color-loss-muted);
}

.cq-json-table__add {
  align-self: flex-start;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 2px;
  padding: 6px 10px;
  background: transparent;
  border: 1px dashed var(--cq-border-default);
  border-radius: var(--cq-radius-sm);
  color: var(--cq-text-secondary);
  font-size: var(--cq-text-sm);
  cursor: pointer;
  transition: color var(--cq-duration-fast) var(--cq-ease-default),
              border-color var(--cq-duration-fast) var(--cq-ease-default),
              background var(--cq-duration-fast) var(--cq-ease-default);
}

.cq-json-table__add:hover {
  color: var(--cq-color-primary);
  border-color: var(--cq-color-primary);
  background: var(--cq-color-primary-muted);
}

/* ── 日志抽屉 / 单实例日志卡片 ─────────────────────────────────── */
.cq-log-feed {
  display: flex;
  flex-direction: column;
  gap: var(--cq-space-3);
}

.cq-log-card {
  border: 1px solid var(--cq-border-subtle);
  background: var(--cq-bg-l2);
  border-radius: 10px;
  padding: var(--cq-space-3) var(--cq-space-4);
  display: flex;
  flex-direction: column;
  gap: var(--cq-space-2);
}

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

.cq-log-card__type {
  font-size: var(--cq-text-xs);
  font-weight: 600;
  padding: 2px 8px;
  border-radius: 999px;
  background: var(--cq-bg-l4);
  color: var(--cq-text-secondary);
  letter-spacing: 0.02em;
}

.cq-log-card__type--signal {
  background: var(--cq-color-info-muted, rgba(56, 132, 255, 0.14));
  /* dark info=#4D7FFF on info-muted 仅 4.19,改用 primary-hover(#6F97FF) 过 AA;
     light info=#1A5FCC 在浅蓝底 ≈ 5.9 已过,由下方 override 强制。 */
  color: var(--cq-color-primary-hover);
}

.cq-log-card__type--order {
  background: var(--cq-color-primary-muted);
  color: var(--cq-color-primary-hover);
}

.cq-log-card__type--auto_pause,
.cq-log-card__type--risk_alert {
  background: var(--cq-color-warning-muted, rgba(245, 158, 11, 0.14));
  color: var(--cq-color-warning, #f59e0b);
}

.cq-log-card__type--user_action {
  background: var(--cq-color-profit-muted);
  color: var(--cq-color-profit);
}

.cq-log-card__type--system {
  background: var(--cq-bg-l4);
  color: var(--cq-text-tertiary);
}

/* severity 色条 — 左边 3px 边框做强度提示 */
.cq-log-card--sev-info { border-left: 3px solid var(--cq-border-subtle); }
.cq-log-card--sev-warning { border-left: 3px solid var(--cq-color-warning); }
.cq-log-card--sev-error { border-left: 3px solid var(--cq-color-loss); }
.cq-log-card--sev-critical {
  border-left: 3px solid var(--cq-color-loss);
  background: var(--cq-color-loss-muted);
}

.cq-log-card__sev {
  font-size: var(--cq-text-xs);
  font-weight: 600;
  padding: 2px 8px;
  border-radius: 999px;
  letter-spacing: 0.02em;
}
.cq-log-card__sev--warning {
  background: var(--cq-color-warning-muted);
  color: var(--cq-color-warning);
}
.cq-log-card__sev--error,
.cq-log-card__sev--critical {
  background: var(--cq-color-loss-muted);
  color: var(--cq-color-loss);
}

.cq-log-card__toggle {
  align-self: flex-start;
  border: none;
  background: transparent;
  color: var(--cq-color-primary);
  font-size: var(--cq-text-xs);
  cursor: pointer;
  padding: 0;
}
.cq-log-card__toggle:hover { text-decoration: underline; }

.cq-log-card__link {
  border: none;
  background: var(--cq-bg-l3);
  color: var(--cq-text-secondary);
  font-size: var(--cq-text-xs);
  padding: 2px 8px;
  border-radius: 999px;
  cursor: pointer;
  font-variant-numeric: tabular-nums;
}
.cq-log-card__link:hover {
  background: var(--cq-color-primary-muted);
  color: var(--cq-color-primary);
}

/* 跳转目标卡片短暂高亮 (jumpToOrderEvent) */
.cq-log-card--highlight {
  outline: 2px solid var(--cq-color-primary);
  outline-offset: -1px;
  transition: outline 200ms ease;
}

/* dashboard 活动流加 severity 色条 + 类型 chip */
.cq-event-list__item {
  border-left: 3px solid transparent;
}
.cq-event-list__item--sev-warning { border-left-color: var(--cq-color-warning); }
.cq-event-list__item--sev-error { border-left-color: var(--cq-color-loss); }
.cq-event-list__item--sev-critical {
  border-left-color: var(--cq-color-loss);
  background: var(--cq-color-loss-muted);
}
.cq-event-list__type {
  font-size: var(--cq-text-xs);
  font-weight: 600;
  padding: 2px 6px;
  border-radius: 6px;
  flex-shrink: 0;
}

.cq-log-card__time {
  font-size: var(--cq-text-xs);
  color: var(--cq-text-tertiary);
  font-variant-numeric: tabular-nums;
}

.cq-log-card__summary {
  font-size: var(--cq-text-base);
  color: var(--cq-text-primary);
  margin: 0;
  line-height: 1.45;
  word-break: break-word;
}

.cq-log-card__detail {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: var(--cq-space-1) var(--cq-space-3);
  padding-top: var(--cq-space-2);
  border-top: 1px dashed var(--cq-border-subtle);
}

.cq-log-card__kv {
  display: flex;
  gap: var(--cq-space-2);
  align-items: baseline;
  font-size: var(--cq-text-xs);
  min-width: 0;
}

.cq-log-card__k {
  color: var(--cq-text-tertiary);
  flex-shrink: 0;
}

.cq-log-card__v {
  color: var(--cq-text-secondary);
  word-break: break-all;
  font-variant-numeric: tabular-nums;
}