/* ============================================================================
   个股页面 · 布局层（stockpage.css）
   ----------------------------------------------------------------------------
   设计目标
     1. 一屏填满：终结「顶栏挤两行 + 底部 56px 白边 + 整页滚动」
     2. 三段式信息层级：全局导航 / 个股标题 / 主体工作区
     3. 价格成为页面唯一最强信号，OHLC 提供可比上下文
     4. 底部「缠论结构明细」不再被裁切，改为内部滚动 + 吸顶表头

   加载位置
     必须在 style.css / vi.css 之后加载（本层为覆盖层）。
     回滚方式：删除 index.html 里的 stockpage.css 引用即可，不改动任何原有文件。

   坐标与高度（1440×900 基准）
     顶栏        52px   全局导航，不含个股信息
     个股标题栏   72px   名称/代码/价格/涨跌/开高低昨收/状态/操作
     主体       flex    284px 左栏 + 图表卡片 + 结构明细
   ============================================================================ */

/* ==========================================================================
   §1  局部令牌（只作用于本页，不改动全站 VI）
   ========================================================================== */
:root {
  --sp-bg:          #f5f6f8;   /* 页面底 */
  --sp-surface:     #ffffff;   /* 顶栏 / 侧栏 / 卡片 */
  --sp-sunken:      #f8f9fb;   /* 卡片内层格 */
  --sp-sunken-2:    #f1f3f7;   /* 分段控件底 */
  --sp-line:        #e5e7eb;   /* 常规分隔 */
  --sp-line-strong: #d1d5db;   /* 控件描边 */

  --sp-t1:          #1f2937;   /* 主文字 */
  --sp-t2:          #6b7280;   /* 次文字 */
  --sp-t3:          #9ca3af;   /* 弱文字 / 标签 */

  --sp-brand:       #2563eb;   /* 主色 */
  --sp-brand-soft:  rgba(37, 99, 235, 0.08);

  /* 中国股市口径：涨红、跌绿 */
  --sp-up:          #dc2626;
  --sp-down:        #16a34a;
  --sp-flat:        #6b7280;

  --sp-warn:        #d97706;   /* 警示 / 顶分型 */
  --sp-purple:      #7c3aed;   /* 中枢 / 底分型 */
  --sp-cyan:        #0891b2;

  --sp-appbar-h:    52px;
  --sp-head-h:      72px;
  --sp-rail-w:      284px;

  --sp-mono: var(--vi-font-num, 'SF Mono', 'JetBrains Mono', Consolas, Menlo, monospace);
  --sp-ease: .16s ease;
}

/* ==========================================================================
   §2  整页骨架 —— 一屏填满，各区域内部各自滚动
   旧版 .main 用 min-height:calc(100dvh - 44px)，而顶栏实际已 100px，
   差值 56px 正是页面底部那条白边与整页滚动的来源。
   ========================================================================== */
html { height: 100%; }

body {
  height: 100dvh;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background: var(--sp-bg);
}

/* 覆盖 style.css 里为旧顶栏写的 min-height */
.main {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  align-items: stretch;
}

/* ==========================================================================
   §3  顶栏 —— 只承担全局导航
   ========================================================================== */
.appbar {
  flex: 0 0 auto;
  height: var(--sp-appbar-h);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 0 20px;
  background: var(--sp-surface);
  border-bottom: 1px solid var(--sp-line);
  position: relative;
  z-index: 40;
}

.appbar-left,
.appbar-right {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}
.appbar-left { gap: 22px; }

.appbar-brand {
  display: flex;
  align-items: center;
  gap: 9px;
  text-decoration: none;
  flex: 0 0 auto;
}
.appbar-logo { width: 26px; height: 26px; flex: 0 0 26px; display: block; }
.appbar-title {
  font-size: 15px;
  font-weight: 700;
  color: var(--sp-t1);
  letter-spacing: .2px;
  white-space: nowrap;
  line-height: 1.2;
}
.appbar-sub {
  font-size: 12px;
  color: var(--sp-t3);
  white-space: nowrap;
  line-height: 1.2;
}

.appbar-nav {
  display: flex;
  align-items: center;
  gap: 2px;
  flex-wrap: nowrap;
  min-width: 0;
}
.appbar-navitem {
  display: inline-flex;
  align-items: center;
  height: 30px;
  padding: 0 12px;
  border: none;
  border-radius: 7px;
  background: transparent;
  font-family: inherit;
  font-size: 13px;
  font-weight: 400;
  color: var(--sp-t2);
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  transition: color var(--sp-ease), background var(--sp-ease);
}
.appbar-navitem:hover { color: var(--sp-brand); background: var(--sp-brand-soft); }
.appbar-navitem.active {
  color: var(--sp-brand);
  background: var(--sp-brand-soft);
  font-weight: 500;
}

/* 返回按钮：沿用原 class 名，改为次要按钮外观 */
.back-results-btn {
  height: 30px;
  padding: 0 12px;
  border-radius: 7px;
  border: 1px solid var(--sp-line-strong);
  background: var(--sp-surface);
  color: var(--sp-t2);
  font-family: inherit;
  font-size: 12px;
  cursor: pointer;
  white-space: nowrap;
  transition: all var(--sp-ease);
}
.back-results-btn:hover {
  border-color: var(--sp-brand);
  color: var(--sp-brand);
  background: var(--sp-brand-soft);
}

.user-area { display: flex; align-items: center; gap: 8px; margin-left: 0; }

/* 顶栏内的搜索框（默认隐藏，保留 DOM） */
.search-box { position: relative; display: flex; align-items: center; }
.search-input {
  height: 32px;
  width: 220px;
  padding: 0 12px;
  border: 1px solid var(--sp-line-strong);
  border-radius: 8px;
  background: var(--sp-surface);
  color: var(--sp-t1);
  font-family: inherit;
  font-size: 13px;
  outline: none;
}
.search-input:focus { border-color: var(--sp-brand); box-shadow: 0 0 0 3px var(--sp-brand-soft); }

/* ==========================================================================
   §4  个股标题栏 —— 价格是页面最强信号
   ========================================================================== */
.stockhead {
  flex: 0 0 auto;
  height: var(--sp-head-h);
  background: var(--sp-surface);
  border-bottom: 1px solid var(--sp-line);
  position: relative;
  z-index: 30;
}

/* 未选股时的轻量占位（图表区仍保留大搜索框） */
.stockhead-empty {
  display: flex;
  align-items: center;
  gap: 9px;
  height: 100%;
  padding: 0 20px;
  font-size: 13px;
  color: var(--sp-t3);
}
.stockhead-empty .she-dot {
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--sp-line-strong);
}

/* JS 会把 display 设为 flex，这里只负责内部排布 */
.stock-info {
  display: flex;
  align-items: center;
  gap: 16px;
  height: 100%;
  padding: 0 20px;
  margin-left: 0;              /* 覆盖 style.css 的 margin-left:auto */
  white-space: nowrap;
}

/* --- 自选星标 --- */
.sh-star {
  flex: 0 0 32px;
  width: 32px; height: 32px;
  display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid var(--sp-line-strong);
  border-radius: 8px;
  background: var(--sp-surface);
  cursor: pointer;
  transition: all var(--sp-ease);
}
.sh-star:hover { border-color: var(--sp-warn); background: #fffbf5; }

/* --- 标的身份 --- */
.sh-id { display: flex; flex-direction: column; gap: 4px; }
.sh-idrow { display: flex; align-items: baseline; gap: 8px; }

#stockName {
  font-size: 20px;
  font-weight: 700;
  color: var(--sp-t1);
  line-height: 1.15;
  letter-spacing: .2px;
}
.sh-code {
  font-family: var(--sp-mono);
  font-size: 12px;
  color: var(--sp-t3);
  letter-spacing: .4px;
  font-variant-numeric: tabular-nums;
}
.sh-tag {
  font-size: 11px;
  color: var(--sp-t2);
  background: var(--sp-sunken);
  border: 1px solid var(--sp-line);
  border-radius: 4px;
  padding: 1px 6px;
  line-height: 1.5;
}
.sh-meta { font-size: 12px; color: var(--sp-t3); }

.sh-div {
  flex: 0 0 1px;
  width: 1px;
  height: 34px;
  background: var(--sp-line);
}

/* --- 价格 --- */
.sh-price { display: flex; align-items: center; gap: 12px; }
.sh-price .price {
  font-family: var(--sp-mono);
  font-size: 34px;
  font-weight: 700;
  line-height: 1;
  letter-spacing: -.5px;
  font-variant-numeric: tabular-nums;
}
.sh-price .price.up   { color: var(--sp-up); }
.sh-price .price.down { color: var(--sp-down); }

.sh-delta { display: flex; flex-direction: column; gap: 2px; }
.sh-chg {
  font-family: var(--sp-mono);
  font-size: 14px;
  font-weight: 700;
  line-height: 1.2;
  font-variant-numeric: tabular-nums;
}
.sh-amt {
  font-family: var(--sp-mono);
  font-size: 12px;
  line-height: 1.2;
  font-variant-numeric: tabular-nums;
}
.sh-chg.up, .sh-amt.up     { color: var(--sp-up); }
.sh-chg.down, .sh-amt.down { color: var(--sp-down); }

/* --- 开高低昨收 --- */
.sh-ohlc { display: flex; gap: 22px; }
.sh-ohlc-cell { display: flex; flex-direction: column; gap: 3px; }
.sh-ohlc-cell i {
  font-style: normal;
  font-size: 11px;
  color: var(--sp-t3);
  line-height: 1.2;
}
.sh-ohlc-v {
  font-family: var(--sp-mono);
  font-size: 12px;
  color: var(--sp-t1);
  line-height: 1.2;
  font-variant-numeric: tabular-nums;
}
.sh-ohlc-v.up   { color: var(--sp-up); }
.sh-ohlc-v.down { color: var(--sp-down); }

.sh-spacer { flex: 1 1 auto; min-width: 12px; }

/* --- 交易状态 --- */
.sh-state {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 26px;
  padding: 0 10px;
  border-radius: 13px;
  background: var(--sp-sunken);
  border: 1px solid var(--sp-line);
  font-size: 12px;
  color: var(--sp-t2);
}
.sh-state i {
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--sp-t3);
  flex: 0 0 6px;
}

/* --- 操作按钮 --- */
.sh-actions { display: flex; align-items: center; gap: 8px; flex: 0 0 auto; }
.sh-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 32px;
  padding: 0 14px;
  border-radius: 8px;
  border: 1px solid var(--sp-line-strong);
  background: var(--sp-surface);
  color: var(--sp-t1);
  font-family: inherit;
  font-size: 13px;
  line-height: 1;
  white-space: nowrap;
  cursor: pointer;
  transition: all var(--sp-ease);
}
.sh-btn:hover {
  border-color: var(--sp-brand);
  color: var(--sp-brand);
  background: var(--sp-brand-soft);
}
.sh-btn.primary {
  background: var(--sp-brand);
  border-color: var(--sp-brand);
  color: #fff;
}
.sh-btn.primary:hover { background: #1d4ed8; border-color: #1d4ed8; color: #fff; }

/* ==========================================================================
   §5  左栏
   ========================================================================== */
.sidebar {
  flex: 0 0 var(--sp-rail-w);
  width: var(--sp-rail-w);
  background: var(--sp-surface);
  border-right: 1px solid var(--sp-line);
  overflow-y: auto;
  overflow-x: hidden;
}

.sb-section { border-bottom: 1px solid var(--sp-line); }
.sb-section-head {
  height: 38px;
  padding: 0 16px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  cursor: pointer;
  user-select: none;
  transition: background var(--sp-ease);
}
.sb-section-head:hover { background: var(--sp-sunken); }
.sb-section-title {
  font-size: 12px;
  font-weight: 600;
  color: var(--sp-t2);
  letter-spacing: .6px;
}
.sb-section-arrow { font-size: 11px; color: var(--sp-t3); }
.sb-section-body { padding: 0 16px 14px; }
.sb-section-compact .sb-section-body { padding: 14px 16px; }

.sb-placeholder {
  padding: 10px 0;
  color: var(--sp-t3);
  font-size: 12px;
  line-height: 1.6;
}

/* 行情网格：3 列在 284px 内每格只有 73px，装不下「成交额（亿元）」这类标签，改 2 列 */
.data-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}
.data-cell {
  background: var(--sp-sunken);
  border: 1px solid var(--sp-line);
  border-radius: 8px;
  padding: 9px 11px;
  text-align: left;
}
.data-label {
  font-size: 11px;
  color: var(--sp-t3);
  margin-bottom: 3px;
  line-height: 1.3;
}
.data-value {
  font-family: var(--sp-mono);
  font-size: 16px;
  font-weight: 700;
  line-height: 1.2;
  color: var(--sp-t1);
  font-variant-numeric: tabular-nums;
}

/* 笔段列表 */
.stroke-list { margin: 0; }
.stroke-item {
  display: flex;
  align-items: center;
  padding: 7px 10px;
  margin: 3px 0;
  background: var(--sp-sunken);
  border: 1px solid var(--sp-line);
  border-radius: 8px;
  font-size: 13px;
  transition: all var(--sp-ease);
}
.stroke-item:hover { border-color: var(--sp-line-strong); }
.stroke-item .tag {
  width: 24px; height: 18px;
  border-radius: 4px;
  font-size: 11px;
  font-weight: 700;
  display: flex; align-items: center; justify-content: center;
  margin-right: 8px;
  color: #fff;
  flex: 0 0 24px;
}
.stroke-item .tag.up   { background: var(--sp-up); }
.stroke-item .tag.down { background: var(--sp-down); }
.stroke-item .detail {
  flex: 1;
  color: var(--sp-t1);
  font-family: var(--sp-mono);
  font-size: 12px;
  font-variant-numeric: tabular-nums;
}

/* 中枢列表 */
.cz-list { margin: 0; }
.cz-item {
  padding: 9px 11px;
  margin: 4px 0;
  background: var(--sp-sunken);
  border-radius: 8px;
  border-left: 3px solid var(--sp-purple);
  transition: all var(--sp-ease);
}
.cz-item.orange { border-left-color: var(--sp-warn); }
.cz-name {
  font-size: 12.5px;
  font-weight: 600;
  color: var(--sp-purple);
  line-height: 1.4;
}
.cz-item.orange .cz-name { color: var(--sp-warn); }
.cz-line {
  font-family: var(--sp-mono);
  font-size: 12px;
  color: var(--sp-t2);
  margin-top: 2px;
  line-height: 1.5;
  font-variant-numeric: tabular-nums;
}

/* 信号 */
.signal-box {
  margin: 0;
  padding: 10px 12px;
  background: var(--sp-sunken);
  border: 1px solid var(--sp-line);
  border-radius: 8px;
}
.signal-box:has(.sb-placeholder) { background: transparent; border: none; padding: 0; }
.signal-item {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  padding: 5px 0;
  font-size: 12.5px;
  color: var(--sp-t1);
  line-height: 1.55;
}
.signal-item + .signal-item { border-top: 1px solid var(--sp-line); }
/* 中国股市口径：买点红、卖点绿，与 K 线涨跌色保持同一套语义 */
.signal-dot {
  width: 7px; height: 7px;
  border-radius: 50%;
  flex: 0 0 7px;
  margin-top: 6px;
}
.signal-dot.buy   { background: var(--sp-up); }
.signal-dot.sell  { background: var(--sp-down); }
.signal-dot.watch { background: var(--sp-warn); }

/* 导出 */
.export-bar { display: flex; gap: 8px; }
.export-btn {
  flex: 1 1 0;
  height: 32px;
  border-radius: 8px;
  border: 1px solid var(--sp-line-strong);
  background: var(--sp-surface);
  color: var(--sp-t1);
  font-family: inherit;
  font-size: 12px;
  cursor: pointer;
  transition: all var(--sp-ease);
}
.export-btn:hover {
  border-color: var(--sp-brand);
  color: var(--sp-brand);
  background: var(--sp-brand-soft);
}

/* ==========================================================================
   §6  图表区
   ========================================================================== */
.chart-area {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 14px;
  overflow: hidden;
}

.chart-card {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
  background: var(--sp-surface);
  border: 1px solid var(--sp-line);
  border-radius: 12px;
  overflow: hidden;
}

.chart-head {
  flex: 0 0 auto;
  height: 46px;
  padding: 0 14px;
  display: flex;
  align-items: center;
  gap: 14px;
  border-bottom: 1px solid var(--sp-line);
}
.chart-title {
  font-size: 13px;
  font-weight: 600;
  color: var(--sp-t1);
  white-space: nowrap;
}
.chart-head-spacer { flex: 1 1 auto; min-width: 8px; }

/* 周期分段控件：把「周期」从顶栏挪到图表卡片，归属更准确 */
.period-group {
  display: flex;
  align-items: center;
  gap: 2px;
  padding: 2px;
  background: var(--sp-sunken-2);
  border-radius: 8px;
  flex-wrap: nowrap;
}
.period-btn {
  height: 26px;
  padding: 0 11px;
  border: none;
  border-radius: 6px;
  background: transparent;
  color: var(--sp-t2);
  font-family: inherit;
  font-size: 12px;
  font-weight: 500;
  cursor: pointer;
  white-space: nowrap;
  transition: all var(--sp-ease);
}
.period-btn:hover { color: var(--sp-t1); background: var(--sp-surface); }
.period-btn.active {
  background: var(--sp-surface);
  color: var(--sp-brand);
  font-weight: 600;
  box-shadow: 0 1px 2px rgba(0, 0, 0, .07);
}

/* 图例：与图中实际绘制元素一一对应 */
.chart-legend {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: nowrap;
}
.chart-legend .lg {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 11px;
  color: var(--sp-t2);
  white-space: nowrap;
}
.chart-legend .lg i { width: 9px; height: 3px; border-radius: 2px; flex: 0 0 9px; }
.chart-legend .lg i.bi   { background: var(--sp-t2); }
.chart-legend .lg i.cz   { background: var(--sp-purple); }
.chart-legend .lg i.sig  { background: var(--sp-warn); }
.chart-legend .lg i.kup  { background: var(--sp-up); }
.chart-legend .lg i.kdn  { background: var(--sp-down); }

/* 图表主体：ECharts 容器与空状态互为兄弟节点。
   空状态不能放进 #klineChart —— zrender 初始化会清空挂载容器，
   导致「重新搜索」后空状态再也回不来。 */
.chart-body {
  flex: 1 1 auto;
  min-height: 0;
  position: relative;
}
.chart-container {
  position: absolute;
  inset: 0;
  background: var(--sp-surface);
}

/* 空状态改为绝对定位，避免它撑高容器影响 ECharts 取尺寸 */
.empty-state {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 20px;
  color: var(--sp-t2);
  background: var(--sp-surface);
}
.empty-state .icon {
  width: 46px; height: 46px;
  opacity: .5;
  display: flex; align-items: center; justify-content: center;
}
.empty-state .text { font-size: 16px; font-weight: 600; color: var(--sp-t1); }
.empty-state .hint {
  font-size: 13px;
  color: var(--sp-t3);
  max-width: 360px;
  text-align: center;
  line-height: 1.6;
}
.empty-search {
  display: flex;
  gap: 6px;
  margin-top: 8px;
  width: 100%;
  max-width: 440px;
  position: relative;
}
.empty-search-input {
  flex: 1;
  border: 1px solid var(--sp-line-strong);
  border-radius: 8px;
  padding: 10px 14px;
  background: var(--sp-surface);
  color: var(--sp-t1);
  font-family: inherit;
  font-size: 14px;
  outline: none;
  transition: border var(--sp-ease), box-shadow var(--sp-ease);
}
.empty-search-input:focus { border-color: var(--sp-brand); box-shadow: 0 0 0 3px var(--sp-brand-soft); }
.empty-search-input::placeholder { color: var(--sp-t3); font-size: 13px; }
.empty-search-btn {
  border: none;
  border-radius: 8px;
  padding: 10px 24px;
  background: var(--sp-brand);
  color: #fff;
  font-family: inherit;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
  transition: background var(--sp-ease);
}
.empty-search-btn:hover { background: #1d4ed8; }
.empty-search-btn:disabled { background: var(--sp-line-strong); cursor: not-allowed; }
#emptySearchDropdown { top: 46px; }

.empty-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 4px;
  justify-content: center;
}
.empty-tag {
  background: var(--sp-surface);
  border: 1px solid var(--sp-line);
  border-radius: 14px;
  padding: 4px 12px;
  font-size: 12px;
  color: var(--sp-t2);
  cursor: pointer;
  transition: all var(--sp-ease);
}
.empty-tag:hover {
  border-color: var(--sp-brand);
  color: var(--sp-brand);
  background: var(--sp-brand-soft);
}

/* ==========================================================================
   §7  缠论结构明细
   旧版：面板总高 36px，而 head 33 + body 62 = 95px（overflow:hidden 直接裁掉）
   新版：head 固定 46px，body 占满剩余并内部滚动，表头吸顶
   ========================================================================== */
.bottom-panel {
  flex: 0 0 auto;
  background: var(--sp-surface);
  border: 1px solid var(--sp-line);
  border-radius: 12px;
  overflow: hidden;
  transition: height .22s ease;
}
.bottom-panel.collapsed { height: 46px; }
.bottom-panel.expanded  { height: 236px; }

.bottom-panel-head {
  height: 46px;
  padding: 0 14px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid var(--sp-line);
}
.bottom-panel.collapsed .bottom-panel-head { border-bottom: none; }
.bottom-panel-head h4 {
  margin: 0;
  font-size: 13px;
  font-weight: 600;
  color: var(--sp-t1);
  letter-spacing: .3px;
}
.bottom-toggle-btn {
  background: none;
  border: none;
  color: var(--sp-t3);
  font-size: 13px;
  line-height: 1;
  cursor: pointer;
  padding: 4px 6px;
  border-radius: 4px;
  transition: all var(--sp-ease);
}
.bottom-toggle-btn:hover { background: var(--sp-sunken); color: var(--sp-t1); }
.bottom-panel.collapsed .bottom-toggle-btn { transform: rotate(-90deg); }

.bottom-panel-body {
  height: calc(100% - 46px);
  max-height: none;   /* 覆盖 style.css 的 136px，否则展开态也只显示约 3 行 */
  padding: 0 14px 10px;
  overflow: auto;
}
.bottom-panel table {
  width: 100%;
  border-collapse: collapse;
  font-size: 12.5px;
  font-variant-numeric: tabular-nums;
}
.bottom-panel thead th {
  position: sticky;
  top: 0;
  z-index: 1;
  background: var(--sp-surface);
  text-align: left;
  color: var(--sp-t3);
  font-weight: 600;
  font-size: 11.5px;
  padding: 7px 8px;
  border-bottom: 1px solid var(--sp-line);
  white-space: nowrap;
}
.bottom-panel tbody td {
  padding: 6px 8px;
  border-bottom: 1px solid var(--sp-sunken-2);
  color: var(--sp-t1);
  white-space: nowrap;
}
.bottom-panel tbody tr:hover td { background: var(--sp-sunken); }
.bottom-panel tbody td:nth-child(n+4) { font-family: var(--sp-mono); }
.bottom-panel .red   { color: var(--sp-up); }
.bottom-panel .green { color: var(--sp-down); }

/* ==========================================================================
   §8  响应式
   ========================================================================== */
@media (max-width: 1200px) {
  /* 横向空间不足时，先收掉「开高低昨收」这一组次要上下文 */
  .sh-ohlc { display: none; }
}

@media (max-width: 1000px) {
  :root { --sp-rail-w: 248px; }
  .chart-legend .lg:nth-child(n+4) { display: none; }
}

@media (max-width: 900px) {
  /* 窄屏恢复整页滚动 */
  body { height: auto; min-height: 100dvh; overflow: auto; }

  .appbar {
    height: auto;
    min-height: var(--sp-appbar-h);
    flex-wrap: wrap;
    gap: 8px;
    padding: 8px 12px;
  }
  .appbar-left { gap: 10px; flex-wrap: wrap; }
  .appbar-navitem { padding: 0 9px; font-size: 12px; }

  .stockhead { height: auto; min-height: var(--sp-head-h); }
  .stockhead-empty { height: 56px; padding: 0 12px; }
  .stock-info {
    height: auto;
    flex-wrap: wrap;
    gap: 10px;
    padding: 10px 12px;
    white-space: normal;
  }
  .sh-div { display: none; }
  .sh-spacer { display: none; }
  .sh-price .price { font-size: 28px; }

  .main { flex-direction: column; }
  /* 手机/平板：侧栏排到图表之后。
     实测 390px：.sidebar（行情概览 + 缠论结构，约 630px）排在图表前面，
     K 线图被推到 y=861 —— 正好落在第一屏（844px）之外，
     用户得先滚一整屏才看到图。股票页的主内容是图，故把侧栏改为 order:2。 */
  .sidebar {
    order: 2;
    flex: 1 1 auto;
    width: 100%;
    border-right: none;
    border-bottom: 1px solid var(--sp-line);
    overflow: visible;
  }
  .chart-area { padding: 10px; gap: 10px; overflow: visible; }
  .chart-card { min-height: 58vh; }
  .bottom-panel.expanded { height: 260px; }
  .chart-legend { display: none; }
  /* 标题 + 6 个周期按钮在 390px 宽下塞不进一行：
     period-group 会从 x=147 起延伸出视口右缘约 50px 被裁掉。
     允许换行，并给周期组自身的横向滚动兜底。 */
  .chart-head {
    height: auto;
    min-height: 46px;
    flex-wrap: wrap;
    gap: 8px;
    padding: 8px 12px;
  }
  .chart-head-spacer { display: none; }
  .period-group { max-width: 100%; overflow-x: auto; }
  /* 8 列明细在 390px 下必然放不下：给表格最小宽度，让容器横向滚动，
     而不是把「最低/幅度」两列挤成看不见 */
  .bottom-panel table { min-width: 560px; }
}

@media (max-width: 600px) {
  #stockName { font-size: 17px; }
  .sh-price .price { font-size: 26px; }
  .sh-price { gap: 8px; }
  .data-grid { gap: 6px; }
  .data-value { font-size: 15px; }
  .empty-state .icon { width: 36px; height: 36px; }
  .empty-tags { gap: 4px; }
  .empty-tag { padding: 3px 10px; font-size: 11px; }
  .period-btn { padding: 0 9px; font-size: 11.5px; }
  .bottom-panel.expanded { height: 300px; }
}