/* ════════════════════════════════════════════════════════════
   交易位信号系统 · 苹果风全站改造（v14）
   令牌来源 apple-design-skill（design-tokens / typography）：
   浅灰底白卡片、无彩边框、胶囊按钮、分段控件、多层阴影、克制蓝
   系统字体栈（PingFang SC / Microsoft YaHei），不引外链字体（CSP: style-src 'self'）
   ════════════════════════════════════════════════════════════ */
:root {
  /* 背景与文本 */
  --apple-bg-white: #FFFFFF;
  --apple-bg-dark: #1D1D1F;
  --apple-bg-light-gray: #F5F5F7;
  --apple-bg-elevated: #FBFBFD;
  --apple-text-primary: #1D1D1F;
  --apple-text-secondary: #6E6E73;
  --apple-text-tertiary: #86868B;
  --apple-link-blue: #0066CC;
  --apple-link-blue-hover: #0077ED;
  --apple-link-blue-active: #0053A1;
  --apple-accent-green: #2D8C3C;
  --apple-accent-orange: #E85D04;
  --apple-accent-red: #E30000;
  /* 边框（Apple 灰阶细线） */
  --apple-border: #D2D2D7;
  --apple-border-light: #E4E4E9;
  --apple-border-hover: #AEAEB2;
  /* 圆角 */
  --apple-radius-card: 18px;
  --apple-radius-card-sm: 12px;
  --apple-radius-input: 10px;
  --apple-radius-button: 980px;
  --apple-radius-check: 6px;
  --apple-radius-badge: 4px;
  /* 阴影（多层、克制） */
  --apple-shadow-card: 0 2px 8px rgba(0, 0, 0, 0.04), 0 8px 24px rgba(0, 0, 0, 0.06);
  --apple-shadow-hover: 0 4px 12px rgba(0, 0, 0, 0.06), 0 12px 32px rgba(0, 0, 0, 0.10);
  --apple-shadow-sm: 0 1px 4px rgba(0, 0, 0, 0.04), 0 4px 12px rgba(0, 0, 0, 0.06);
  --apple-shadow-modal: 0 8px 20px rgba(0, 0, 0, 0.08), 0 20px 60px rgba(0, 0, 0, 0.16);
  /* 字体（zh-CN 栈 + 拉丁系统字在前） */
  --apple-font-display: -apple-system, BlinkMacSystemFont, 'SF Pro Display', 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', 'Helvetica Neue', Arial, sans-serif;
  --apple-font-text: -apple-system, BlinkMacSystemFont, 'SF Pro Text', 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', 'Helvetica Neue', Arial, sans-serif;
  --apple-weight-title: 600;
  --apple-weight-title-bold: 700;
  --apple-weight-body: 400;
  --apple-weight-body-medium: 500;
  --apple-tracking-zh-ui: 0.02em;
  /* 内容宽度（数据工具取宽幅档） */
  --apple-content-max-width: 1200px;

  /* Element Plus 主题桥接：一套主色变量同时驱动 选择器/日期/开关/分页/表格高亮 */
  --el-color-primary: var(--apple-link-blue);
  --el-color-primary-light-3: #4C94DB;
  --el-color-primary-light-5: #80B2E6;
  --el-color-primary-light-7: #B2D1F0;
  --el-color-primary-light-8: #CCE0F5;
  --el-color-primary-light-9: #E5F0FA;
  --el-color-primary-dark-2: var(--apple-link-blue-active);
  --el-text-color-primary: var(--apple-text-primary);
  --el-text-color-regular: var(--apple-text-primary);
  --el-text-color-secondary: var(--apple-text-secondary);
  --el-text-color-placeholder: var(--apple-text-tertiary);
  --el-border-color: var(--apple-border);
  --el-border-color-light: var(--apple-border-light);
  --el-border-color-lighter: var(--apple-border-light);
  --el-fill-color-light: var(--apple-bg-light-gray);
  --el-font-family: var(--apple-font-text);
}

/* ── 基础 ─────────────────────────────────────────── */
body {
  margin: 0;
  background: var(--apple-bg-light-gray);
  font-family: var(--apple-font-text);
  color: var(--apple-text-primary);
  -webkit-font-smoothing: antialiased;
}
#app { max-width: var(--apple-content-max-width); margin: 0 auto; padding: 20px 24px 48px; }

/* ── 吸顶导航栏：半透明毛玻璃 + 发丝线（apple.com 导航语汇） ── */
.ts-navbar {
  position: sticky; top: 0; z-index: 100;
  background: rgba(251, 251, 253, 0.82);
  -webkit-backdrop-filter: saturate(180%) blur(20px);
  backdrop-filter: saturate(180%) blur(20px);
  border-bottom: 0.5px solid rgba(0, 0, 0, 0.1);
}
.ts-navbar-inner {
  max-width: var(--apple-content-max-width); margin: 0 auto;
  min-height: 52px; padding: 0 24px;
  display: flex; align-items: center; justify-content: space-between;
}
.ts-brand { display: flex; align-items: center; gap: 10px; cursor: pointer; user-select: none; }
.ts-brand-name { font-family: var(--apple-font-display); font-size: 17px; font-weight: var(--apple-weight-title-bold); color: var(--apple-text-primary); letter-spacing: var(--apple-tracking-zh-ui); }
.ts-brand-sub { font-size: 10px; font-weight: var(--apple-weight-body-medium); color: var(--apple-text-tertiary); letter-spacing: 0.14em; margin-top: 2px; }
.ts-nav { display: flex; align-items: center; gap: 8px; }
.ts-nav a {
  padding: 6px 16px; border-radius: var(--apple-radius-button);
  font-size: 13px; font-weight: var(--apple-weight-body-medium);
  color: rgba(29, 29, 31, 0.72); cursor: pointer;
  transition: color 0.2s ease, background-color 0.2s ease;
}
.ts-nav a:hover { color: var(--apple-text-primary); }
.ts-nav a.on { background: var(--apple-bg-dark); color: var(--apple-bg-white); }

/* ── 工具区卡片 ───────────────────────────────────── */
.toolbar {
  background: var(--apple-bg-white);
  border-radius: var(--apple-radius-card);
  box-shadow: var(--apple-shadow-card);
  padding: 18px 22px;
  margin: 8px 0 20px;
}
.period-btns { margin-bottom: 16px; }
.selector-row { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.selector-row .label { color: var(--apple-text-secondary); font-size: 14px; font-weight: var(--apple-weight-body-medium); letter-spacing: var(--apple-tracking-zh-ui); }
.param-panel { margin-top: 16px; border-top: 1px dashed var(--apple-border); padding-top: 16px; }
.param-panel .el-form-item { margin-bottom: 12px; }

/* ── 分段控件（日/周/月/季、季度、复权 共用一套）：无底轨，选中=蓝底白字胶囊 ── */
.el-radio-group {
  display: inline-flex; align-items: center;
  gap: 12px;
}
.el-radio-button { vertical-align: middle; }
.el-radio-button__inner {
  border: none !important;
  border-radius: 8px !important;
  padding: 6px 16px;
  background: transparent;
  color: var(--apple-text-secondary);
  font-size: 13px;
  font-weight: var(--apple-weight-body);
  box-shadow: none !important;
  transition: background-color 0.2s ease, color 0.2s ease;
}
.el-radio-button__inner:hover { color: var(--apple-text-primary); }
.el-radio-button__original-radio:checked + .el-radio-button__inner {
  background: var(--apple-link-blue);
  color: var(--apple-bg-white);
  font-weight: var(--apple-weight-title);
}
.period-btns .el-radio-button__inner { padding: 7px 18px; font-size: 14px; }
@media (max-width: 733px) {
  .period-btns .el-radio-button__inner { padding: 6px 13px; font-size: 13px; }
}

/* ── 输入框 / 选择器：白底细边，聚焦蓝环 ──────────── */
.selector-row .el-input__wrapper,
.selector-row .el-select__wrapper {
  border-radius: var(--apple-radius-input);
  background: var(--apple-bg-white);
  box-shadow: 0 0 0 1px var(--apple-border) inset;
  transition: box-shadow 0.2s ease;
}
.selector-row .el-input__wrapper:hover,
.selector-row .el-select__wrapper:hover { box-shadow: 0 0 0 1px var(--apple-border-hover) inset; }
.selector-row .el-input__wrapper.is-focus,
.selector-row .el-select__wrapper.is-focused {
  box-shadow: 0 0 0 1px var(--apple-link-blue) inset, 0 0 0 3px rgba(0, 102, 204, 0.18);
}
.selector-row .el-input__inner { color: var(--apple-text-primary); font-weight: var(--apple-weight-body); }
.selector-row .el-input__inner::placeholder,
.selector-row .el-select__placeholder { color: var(--apple-text-tertiary); }
.selector-row .el-input__prefix,
.selector-row .el-input__suffix { color: var(--apple-text-tertiary); }

/* ── 按钮：主操作实心蓝胶囊，次操作白底描边 ────────── */
.selector-row .el-button {
  border-radius: var(--apple-radius-button);
  padding: 8px 18px; font-weight: var(--apple-weight-body-medium);
  transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease, box-shadow 0.2s ease;
}
.selector-row .el-button--primary {
  --el-button-text-color: var(--apple-bg-white);
  --el-button-bg-color: var(--apple-link-blue);
  --el-button-border-color: var(--apple-link-blue);
  --el-button-hover-text-color: var(--apple-bg-white);
  --el-button-hover-bg-color: var(--apple-link-blue-hover);
  --el-button-hover-border-color: var(--apple-link-blue-hover);
  --el-button-active-bg-color: var(--apple-link-blue-active);
  --el-button-active-border-color: var(--apple-link-blue-active);
}
.selector-row .el-button--primary.is-plain {
  --el-button-text-color: var(--apple-link-blue);
  --el-button-bg-color: var(--apple-bg-white);
  --el-button-border-color: #C7C7CC;
  --el-button-hover-text-color: var(--apple-link-blue);
  --el-button-hover-bg-color: #EDF4FB;
  --el-button-hover-border-color: var(--apple-link-blue);
  --el-button-active-text-color: var(--apple-link-blue);
  --el-button-active-bg-color: #E1EDF8;
  --el-button-active-border-color: var(--apple-link-blue);
}
.selector-row .el-button + .el-button { margin-left: -3px; }
.selector-row .el-button:focus-visible,
.board-toggle-all:focus-visible { outline: 2px solid rgba(0, 102, 204, 0.45); outline-offset: 2px; }
.selector-row .el-button .el-icon { width: 13px; height: 13px; font-size: 13px; }

/* ── 卡片：白底 18px 圆角多层阴影，无边框 ─────────── */
.el-card {
  border: none;
  border-radius: var(--apple-radius-card);
  box-shadow: var(--apple-shadow-card);
}
.el-card__header {
  border-bottom: 1px solid var(--apple-border-light);
  padding: 16px 24px 12px;
  font-family: var(--apple-font-display);
  font-weight: var(--apple-weight-title);
  font-size: 17px;
  color: var(--apple-text-primary);
  letter-spacing: var(--apple-tracking-zh-ui);
}
.el-card__body { padding-top: 12px; }
.all-card { margin-bottom: 20px; }
.lists { display: flex; gap: 20px; align-items: stretch; }
.list-card { flex: 1; min-width: 0; }
.chart-card { margin-top: 20px; }
.card-head { display: flex; justify-content: space-between; align-items: center; }
.chart-head { display: flex; justify-content: space-between; align-items: center; }
.chart-head .period { color: var(--apple-text-primary); font-weight: var(--apple-weight-title); font-size: 15px; }

/* ── 表格：透明表头小字标签、发丝分隔、浅灰悬停 ───── */
.el-table {
  --el-table-border-color: var(--apple-border-light);
  --el-table-header-bg-color: transparent;
  --el-table-header-text-color: var(--apple-text-secondary);
  --el-table-row-hover-bg-color: var(--apple-bg-light-gray);
  --el-table-current-row-bg-color: #E5F0FA;
  --el-table-text-color: var(--apple-text-primary);
  font-variant-numeric: tabular-nums;
}
.el-table th.el-table__cell {
  font-size: 12px; font-weight: var(--apple-weight-body-medium);
  letter-spacing: var(--apple-tracking-zh-ui); color: var(--apple-text-secondary);
}
/* 末列右内边距：纵向滚动条只压住空白，右侧留出呼吸空间 */
.el-table th:last-child .cell,
.el-table td:last-child .cell { padding-right: 48px; }
/*
 * 所有股票：列是 min-width 自适应（总宽一定够），横向滚动条没有存在意义。
 * Windows 经典滚动条（约17px）会让 el-table 表头补 gutter 列导致总宽溢出，
 * 从而冒出横向滚动条——直接禁掉横向滚动。
 */
.all-card .el-table__body-wrapper { overflow-x: hidden; }
.all-pager { margin-top: 10px; justify-content: flex-end; }
tr.clickable-row { cursor: pointer; }

/* ── 自选星标 / 板块徽标 / 提示点 ─────────────────── */
.fav-star { cursor: pointer; font-size: 15px; color: #C7C7CC; user-select: none; transition: color 0.15s ease; }
.fav-star:hover { transform: scale(1.2); display: inline-block; }
.fav-star.on { color: #E8A33D; }
/* 股票挂牌徽标（boardType 字典：0=上交所主板 1=科创板 2=创业板 3=北交所 4=深交所主板） */
.code-cell { white-space: nowrap; }
.x-badge {
  box-sizing: border-box; display: inline-block; min-width: 15px; height: 14px; line-height: 14px;
  padding: 0 3px; margin-left: 5px; border-radius: var(--apple-radius-badge);
  font-size: 9px; font-weight: var(--apple-weight-title); text-align: center; color: var(--apple-bg-white); vertical-align: 1px;
}
.x-0 { background: #3E6FB0; }
.x-1 { background: var(--apple-accent-green); }
.x-2 { background: #C86A14; }
.x-3 { background: #7A57C7; }
.x-4 { background: #C13E3E; }
/* 图表标题徽标：代码前，17px（与表格 14px 区分） */
.chart-badge { min-width: 17px; height: 17px; line-height: 17px; margin-left: 0; margin-right: 6px; padding: 0 4px; border-radius: 5px; font-size: 11px; vertical-align: 2px; }
/* 表格代码列徽标：代码前，尺寸不变（14px），间距在徽标右侧 */
.code-cell .x-badge:not(.chart-badge) { margin-left: 0; margin-right: 5px; }
/* 查询按钮的未应用修改提示点 */
.query-dot { display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: #E8A33D; margin-left: 5px; vertical-align: middle; }

/* ── 弹层（板块/列设置）：苹果风小卡片 ────────────── */
.el-popover.el-popper {
  border: 1px solid var(--apple-border-light);
  border-radius: var(--apple-radius-card-sm);
  box-shadow: var(--apple-shadow-modal);
  padding: 14px 16px;
  color: var(--apple-text-primary);
}
.board-settings-head { display: flex; justify-content: space-between; align-items: center; font-weight: var(--apple-weight-title); margin-bottom: 6px; letter-spacing: var(--apple-tracking-zh-ui); }
.board-toggle-all { font-size: 12px; color: var(--apple-link-blue); cursor: pointer; font-weight: var(--apple-weight-body); }
.board-toggle-all:hover { color: var(--apple-link-blue-hover); }
.board-opt-label { display: flex; align-items: center; gap: 9px; padding: 5px 0; cursor: pointer; user-select: none; font-size: 14px; color: var(--apple-text-primary); }
.board-opt-label .x-badge { margin-left: 0; }
.board-empty-tip { color: var(--apple-text-tertiary); font-size: 12px; margin-top: 8px; }
.col-checks { display: flex; flex-direction: column; gap: 4px; }
/* 勾选框：苹果蓝实底 + 白勾 */
.board-opt-label input,
.col-checks input,
.bull-check input {
  -webkit-appearance: none; appearance: none; width: 16px; height: 16px;
  margin: 0; border: 1px solid #C7C7CC; border-radius: var(--apple-radius-check);
  background: var(--apple-bg-white); cursor: pointer; position: relative; flex: none;
  transition: border-color 0.15s ease, background 0.15s ease;
}
.board-opt-label input:hover,
.col-checks input:hover,
.bull-check input:hover { border-color: var(--apple-border-hover); }
.board-opt-label input:checked,
.col-checks input:checked,
.bull-check input:checked { background: var(--apple-link-blue); border-color: var(--apple-link-blue); }
.board-opt-label input:checked::after,
.col-checks input:checked::after,
.bull-check input:checked::after {
  content: ""; position: absolute; left: 5px; top: 2px;
  width: 4px; height: 8px; border: solid var(--apple-bg-white); border-width: 0 2px 2px 0; transform: rotate(45deg);
}
/* 卡片头右侧工具组：「仅看涨」勾选框 + 「列设置」按钮 */
.head-tools { display: flex; align-items: center; gap: 12px; }
.bull-check { display: flex; align-items: center; gap: 6px; cursor: pointer; user-select: none;
  font-size: 12px; color: var(--apple-text-secondary); white-space: nowrap; }

/* ── 参数面板杂项 ─────────────────────────────────── */
.param-panel .el-switch { --el-switch-on-color: var(--apple-link-blue); }
.el-alert { border-radius: var(--apple-radius-card-sm); }

/* ── 图表卡片：双周期标签与分隔 ───────────────────── */
#kdjChart { width: 100%; height: 560px; }
/* 图表双周期（B 版）：截止/最新周期内联标签 + 分隔线；
   注意：图表网格/标注按 560px 高度写死像素坐标，双图不可压缩高度，否则 KDJ 区被裁 */
.chart-label { font-size: 13px; color: var(--apple-text-tertiary); margin: 2px 2px 6px; }
.chart-label b { color: var(--apple-text-primary); font-weight: var(--apple-weight-title); }
.chart-divider { border-top: 1px dashed var(--apple-border); margin: 14px 0 12px; }
#kdjChartLatest { width: 100%; height: 560px; }

/* ════════════════════════════════════════════════════════════
   登录页：浅色渐变底 + 纯白卡片 + 填充式输入 + 蓝胶囊 CTA
   ════════════════════════════════════════════════════════════ */
.auth-overlay {
  position: fixed; inset: 0; z-index: 3000;
  display: flex; align-items: center; justify-content: center;
  background: linear-gradient(180deg, var(--apple-bg-elevated) 0%, var(--apple-bg-light-gray) 100%);
  overflow: hidden;
}
.auth-overlay::before {
  content: ""; position: absolute; width: 520px; height: 520px; border-radius: 50%;
  background: radial-gradient(circle, rgba(0, 102, 204, 0.06), transparent 70%);
  top: -140px; right: -120px;
}
.auth-overlay::after {
  content: ""; position: absolute; width: 420px; height: 420px; border-radius: 50%;
  background: radial-gradient(circle, rgba(41, 151, 255, 0.05), transparent 70%);
  bottom: -120px; left: -100px;
}
.auth-card {
  position: relative; z-index: 1; width: 368px; padding: 44px 40px 36px;
  background: var(--apple-bg-white);
  border-radius: 20px;
  box-shadow: var(--apple-shadow-modal);
}
.auth-logo { text-align: center; margin-bottom: 8px; }
.auth-title {
  text-align: center; font-family: var(--apple-font-display);
  font-size: 21px; font-weight: var(--apple-weight-title-bold);
  color: var(--apple-text-primary); letter-spacing: 0.06em;
}
.auth-sub {
  text-align: center; font-size: 11px; font-weight: var(--apple-weight-body-medium);
  color: var(--apple-text-tertiary); letter-spacing: 0.22em; margin: 7px 0 32px;
}
.auth-field { margin-bottom: 14px; }
.auth-field input {
  width: 100%; box-sizing: border-box;
  border: none; border-radius: var(--apple-radius-input);
  background: var(--apple-bg-light-gray);
  padding: 12px 14px; font-size: 14px; font-family: var(--apple-font-text);
  color: var(--apple-text-primary); outline: none;
  transition: box-shadow 0.2s ease, background 0.2s ease;
}
.auth-field input:hover { background: #EDEDF0; }
.auth-field input:focus {
  background: var(--apple-bg-white);
  box-shadow: 0 0 0 1.5px var(--apple-link-blue), 0 0 0 3.5px rgba(0, 102, 204, 0.18);
}
.auth-field input::placeholder { color: var(--apple-text-tertiary); }
.auth-btn {
  width: 100%; margin-top: 12px; padding: 13px;
  border: none; border-radius: var(--apple-radius-button);
  font-size: 15px; font-weight: var(--apple-weight-title);
  letter-spacing: 0.2em; text-indent: 0.2em;
  color: var(--apple-bg-white); cursor: pointer;
  background: var(--apple-link-blue);
  box-shadow: 0 6px 18px rgba(0, 102, 204, 0.28);
  transition: background 0.2s ease, transform 0.15s ease, box-shadow 0.2s ease;
}
.auth-btn:hover:not(:disabled) { background: var(--apple-link-blue-hover); transform: translateY(-1px); box-shadow: 0 10px 24px rgba(0, 102, 204, 0.35); }
.auth-btn:active:not(:disabled) { background: var(--apple-link-blue-active); transform: translateY(0); }
.auth-btn:disabled { opacity: 0.6; cursor: not-allowed; }
.auth-switch { text-align: center; margin-top: 20px; font-size: 13px; color: var(--apple-text-secondary); }
.auth-switch a { color: var(--apple-link-blue); text-decoration: none; margin-left: 4px; cursor: pointer; }
.auth-switch a:hover { color: var(--apple-link-blue-hover); text-decoration: underline; }

/* 认证提示条：白底细线小浮层，3 秒自动消失 */
.auth-toast {
  position: fixed; top: 24px; left: 50%; transform: translateX(-50%); z-index: 3001;
  padding: 11px 24px; border-radius: var(--apple-radius-card-sm);
  background: var(--apple-bg-white); font-size: 14px; font-weight: var(--apple-weight-body-medium);
  box-shadow: var(--apple-shadow-modal);
  animation: auth-toast-in 0.25s ease;
}
.auth-toast.error { color: var(--apple-accent-red); border: 1px solid rgba(227, 0, 0, 0.18); }
.auth-toast.success { color: var(--apple-link-blue); border: 1px solid #CCE0F5; }
@keyframes auth-toast-in { from { opacity: 0; transform: translateX(-50%) translateY(-8px); } to { opacity: 1; transform: translateX(-50%) translateY(0); } }