/* Shared K-line chart skin — single source for the three chart pages:
   index.html (回测结果) / tradebook.html (策略拆解标注图) / view.html (在线查看).
   Do NOT copy these rules back into page CSS; link this file instead.
   Load order: this link goes BEFORE each page's inline <style> so pages can
   still override (e.g. index's own .muted). */
.muted { color: #94a3b8; }
.legend { display: flex; gap: 18px; font-size: 12px; color: #475569; margin: 8px 0; flex-wrap: wrap; }
.legend span { display: inline-flex; align-items: center; gap: 5px; }
.legend .muted { font-size: 12px; }
.dot { width: 10px; height: 10px; border-radius: 50%; display: inline-block; }
.arrow-up { width: 0; height: 0; border-left: 5px solid transparent; border-right: 5px solid transparent; border-bottom: 9px solid #26a69a; display: inline-block; }
.arrow-down { width: 0; height: 0; border-left: 5px solid transparent; border-right: 5px solid transparent; border-top: 9px solid #ef5350; display: inline-block; }
.deal-pop { position: absolute; background: #fff; border: 1px solid #cbd5e1; border-radius: 8px; box-shadow: 0 4px 12px rgba(0,0,0,.15); padding: 10px 12px; font-size: 12px; z-index: 5; display: none; min-width: 200px; pointer-events: none; }
.deal-pop table td { padding: 2px 6px; }

/* 全站 toast（index/tradebook/view 三页共用；各页 JS 只建元素挂类名）：
   右上角、sticky 顶栏下方（不挡顶栏右侧账号/菜单按钮）、可堆叠、
   绿=成功/中性 红=失败；pointer-events:none 保证 4s 存活期不吞点击。
   z-index 高于 stModalCore(9999)——分享管理等弹窗内动作的反馈要浮在弹窗上。 */
.qs-toast-box { position: fixed; right: 20px; top: 68px; z-index: 10000; display: flex; flex-direction: column; gap: 8px; align-items: flex-end; pointer-events: none; }
.qs-toast { padding: 10px 14px; border-radius: 8px; font-size: 14px; max-width: min(380px, calc(100vw - 40px)); box-shadow: 0 4px 12px rgba(0, 0, 0, .12); background: #ecfdf5; color: #065f46; border: 1px solid #a7f3d0; animation: qsToastIn .18s ease-out; pointer-events: none; }
.qs-toast.bad { background: #fef2f2; color: #b91c1c; border-color: #fecaca; }
@keyframes qsToastIn { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }

/* =====================================================================
   设计令牌层（2026-10-12 统一重构）——五页唯一视觉事实源
   之前三页三套主色（index 天蓝 #0369a1 系/tradebook 旧扁平 #2563eb/view
   渐变 #2563eb）、四种选中态、两套 spinner、三套表格、两种 KPI 卡。
   统一决策：主色=#2563eb 家族（三页多数派+图表蓝+toast 已用）；选中态=
   实心主色白字；按钮=渐变+悬停上浮（保留 index 升级的质感、对齐色相）。
   页面局部样式在 common.css 之后加载，仍可覆盖（勿反向引用页面私有名）。
   ===================================================================== */
:root {
  --qs-ink: #0f172a; --qs-ink2: #334155; --qs-ink3: #64748b;
  --qs-line: #e2e8f0; --qs-line2: #eef2f7;
  --qs-pri: #2563eb; --qs-pri-d: #1d4ed8; --qs-pri-t: #eff6ff;
  --qs-ok: #059669; --qs-ok-t: #ecfdf5; --qs-warn: #b45309; --qs-warn-t: #fffbeb;
  --qs-err: #dc2626; --qs-err-t: #fef2f2;
  --qs-r-lg: 12px; --qs-r-md: 8px; --qs-r-sm: 6px;
  --qs-sh-1: 0 1px 3px rgba(15, 23, 42, .08); --qs-sh-2: 0 4px 14px rgba(15, 23, 42, .10);
  --qs-head-grad: linear-gradient(120deg, #0f172a 0%, #1e3a8a 55%, #1d4ed8 100%);
}

/* ---- 按钮（index/tradebook 共用元素级；view 的 .btn 链接形态见其页内令牌化） ---- */
button {
  background: linear-gradient(180deg, #3b82f6, #2563eb); color: #fff; border: none;
  padding: 10px 22px; border-radius: var(--qs-r-md); font-size: 14px; font-weight: 600;
  font-family: inherit; cursor: pointer; transition: all .16s ease;
}
button:hover { background: linear-gradient(180deg, #2563eb, #1d4ed8); transform: translateY(-1px); }
button:active { transform: translateY(0); }
button:disabled { background: #94a3b8; transform: none; cursor: not-allowed; }
button.ghost { background: #fff; color: var(--qs-pri); border: 1px solid var(--qs-pri); }
button.ghost:hover { background: var(--qs-pri-t); }
/* 危险操作行内轻量款：红描边白底（悬停淡红底）；实心红只用于弹窗内最终确认 */
button.danger { background: #fff; color: var(--qs-err); border: 1px solid var(--qs-err); }
button.danger:hover { background: var(--qs-err-t); }

/* ---- 输入控件（不带 width：tradebook 的下拉在 flex 行里靠内容自适应，
   index 需要满宽的输入框由其页内补 width:100%） ---- */
textarea, input, select { padding: 10px 12px; border: 1px solid #d1d5db; border-radius: var(--qs-r-md); font-size: 14px; font-family: inherit; background: #fff; }
textarea:focus, input:focus, select:focus { outline: 2px solid var(--qs-pri); border-color: transparent; }

/* ---- 表格基线：必须类作用域（.qs-table），禁止裸 table/th/td ——
   LightweightCharts 内部布局表是无 class 的裸 <table>，裸元素规则会渗进去
   压垮图表面板（view.html 有历史注释为证）。各页既有表格保留其语境化
   密度/边框（整格线=多列数据明细，横线式=清单），新表格用本基线 ---- */
.qs-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.qs-table th { text-align: left; background: #f1f5f9; padding: 8px 10px; font-size: 12px; color: var(--qs-ink2); }
.qs-table td { padding: 7px 10px; border-bottom: 1px solid #f1f5f9; }

/* ---- 切换片（周期/品种/指标/明细页签）：白底待选，实心主色选中（全站一种选中态） ---- */
.tf-btn, .tfbtn { background: #fff; color: var(--qs-ink2); border: 1px solid var(--qs-line); border-radius: var(--qs-r-sm); cursor: pointer; }
.tf-btn { padding: 3px 10px; font-size: 12px; }
.tfbtn { padding: 6px 14px; font-size: 13px; }
.tabs button { padding: 5px 12px; background: #fff; color: var(--qs-ink2); border: 1px solid var(--qs-line); border-radius: var(--qs-r-sm); font-size: 13px; cursor: pointer; }
.tf-btn:hover, .tfbtn:hover, .tabs button:hover { border-color: var(--qs-pri); color: var(--qs-pri); }
.tf-btn.on, .tfbtn.on, .tabs button.on, .ind-item.on { background: var(--qs-pri); border-color: var(--qs-pri); color: #fff; font-weight: 600; }

/* ---- KPI 卡（统一为 index 升级版的左缘渐变竖条形态） ---- */
.kpi { display: inline-block; position: relative; overflow: hidden; background: linear-gradient(180deg, #fbfcfe, #f6f8fc); border: 1px solid var(--qs-line); border-radius: var(--qs-r-lg); padding: 10px 14px; margin: 0 8px 8px 0; font-size: 12px; color: var(--qs-ink3); }
.kpi::before { content: ""; position: absolute; inset: 0 auto 0 0; width: 3px; background: linear-gradient(180deg, #60a5fa, transparent); }
.kpi b { display: block; font-size: 16px; color: var(--qs-ink); margin-top: 2px; }

/* ---- 加载 spinner（index 原 .spinner 收编；.sm=遮罩/状态行小尺寸） ---- */
.qs-spinner, .spinner { width: 18px; height: 18px; border: 3px solid #dbeafe; border-top-color: var(--qs-pri); border-radius: 50%; animation: qsSpin .8s linear infinite; display: inline-block; vertical-align: middle; }
.qs-spinner.sm { width: 14px; height: 14px; border-width: 2px; }
@keyframes qsSpin { to { transform: rotate(360deg); } }

/* ---- 空状态提示（列表无数据等；各页原 .st-empty/.muted 12px 两规格归一） ---- */
.qs-empty { color: #94a3b8; font-size: 13px; padding: 8px 0; }

/* ---- 法务页品牌条（privacy/terms）：与全站顶栏同一渐变语言，view 分享页同构 ---- */
.qs-brandbar { position: sticky; top: 0; z-index: 10; background: var(--qs-head-grad); color: #fff; padding: 12px 22px; display: flex; align-items: center; gap: 16px; flex-wrap: wrap; box-shadow: 0 6px 24px rgba(15, 23, 42, .22); }
.qs-brandbar .brand { display: inline-flex; align-items: center; gap: 8px; color: #fff; font-weight: 700; font-size: 16px; letter-spacing: 1px; text-decoration: none; }
.qs-brandbar .brand::before { content: ""; width: 9px; height: 9px; border-radius: 3px; flex: 0 0 auto; background: conic-gradient(from 210deg, #0ea5e9, #34d399, #60a5fa, #0ea5e9); box-shadow: 0 0 10px rgba(56, 189, 248, .8); }
.qs-brandbar a { color: #93c5fd; text-decoration: none; font-size: 13px; }
.qs-brandbar a:hover { text-decoration: underline; }