/* ============================================================
   chart-app.css v2 — 全屏交易终端
   严格对齐 fxcn Premium Flat:
     - 深底 #0a0a0a · 真灰阶 · 唯一强调色 #d4a017
     - 不出现 #facc15(浅黄)/ #3b82f6(蓝)/ #a855f7(紫)等
     - 涨跌克制:#16a34a / #dc2626(比常用稍暗)
   ============================================================ */

html,body{height:100%;margin:0;padding:0;overflow:hidden}
body.chart-app-body{
  display:flex;flex-direction:column;
  background:#0a0a0a;color:#d4d4d4;
  /* 与 app.css 共用 --sans 变量(交易终端与主站同字体) */
  font-family:var(--sans, 'Inter', 'Noto Sans SC', -apple-system, BlinkMacSystemFont, "PingFang SC", "Microsoft YaHei", sans-serif);
  font-size:13px;line-height:1.4;
  font-variant-numeric:tabular-nums;
}
*{box-sizing:border-box}

/* ────────── 顶栏(36px) ────────── */
.chart-topbar{
  flex:0 0 36px;
  display:flex;align-items:center;justify-content:space-between;
  background:#0a0a0a;color:#fafafa;
  padding:0 16px;border-bottom:1px solid #1a1a1a;
  font-size:12px;
}
.chart-topbar-left,.chart-topbar-right{display:flex;align-items:center;gap:10px}
.chart-logo{display:flex;align-items:center;gap:8px;color:#fafafa;text-decoration:none}
.logo-mark-mini{
  width:24px;height:24px;border-radius:6px;
  background:#0a0a0a;color:#d4a017;border:1px solid #2a2a2a;
  display:flex;align-items:center;justify-content:center;
  font-weight:800;font-size:10px;letter-spacing:.04em;
}
.chart-logo-text{font-weight:800;letter-spacing:.04em;color:#fafafa}
.chart-topbar-divider{width:1px;height:18px;background:#1f1f1f}
.chart-topbar-page-title{font-size:11px;color:#737373;text-transform:uppercase;letter-spacing:.1em}
.chart-topbar-link{color:#a3a3a3;text-decoration:none;padding:4px 8px;border-radius:5px;font-size:12px;transition:.14s}
.chart-topbar-link:hover{color:#fafafa;background:#1a1a1a}
.chart-lang-switch{display:flex;gap:2px}
.chart-lang-switch a{
  display:inline-flex;align-items:center;justify-content:center;
  width:26px;height:24px;border-radius:5px;text-decoration:none;
  font-size:14px;line-height:1;transition:.14s;
}
.chart-lang-switch a:hover{background:#1a1a1a}
.chart-lang-switch a.on{background:#262626;box-shadow:inset 0 -2px 0 #d4a017}

/* ────────── 主工作区 ────────── */
.chart-app{
  flex:1;
  display:grid;
  grid-template-columns:260px 1fr 360px;
  min-height:0;
  background:#0a0a0a;
}
.chart-app-body.left-collapsed  .chart-app{grid-template-columns:0px 1fr 360px}
.chart-app-body.right-collapsed .chart-app{grid-template-columns:260px 1fr 0px}
.chart-app-body.left-collapsed  .chart-app-left,
.chart-app-body.right-collapsed .chart-app-right{display:none}

@media (max-width:1100px){
  .chart-app{grid-template-columns:0 1fr 0}
  .chart-app-left,.chart-app-right{display:none}
}

/* ────────── 左侧 ────────── */
.chart-app-left{
  background:#0f0f0f;border-right:1px solid #1a1a1a;
  display:flex;flex-direction:column;min-height:0;overflow:hidden;
}
.chart-app-section-title{
  font-size:10px;text-transform:uppercase;letter-spacing:.1em;
  color:#737373;font-weight:600;
  padding:10px 14px 6px;display:flex;justify-content:space-between;align-items:center;
}
.chart-mini-btn{
  background:transparent;border:1px solid #262626;color:#737373;
  width:22px;height:22px;border-radius:5px;cursor:pointer;font-size:12px;
}
.chart-mini-btn:hover{color:#fafafa;border-color:#404040}
.chart-symbol-search{padding:0 14px 6px}
.chart-symbol-search input{
  width:100%;background:#1a1a1a;border:1px solid #262626;color:#fafafa;
  padding:7px 12px;border-radius:6px;font-size:12px;outline:none;
}
.chart-symbol-search input::placeholder{color:#737373}
.chart-symbol-search input:focus{border-color:#d4a017}
.chart-symbol-cats{display:flex;gap:2px;padding:0 14px 6px}
.chart-cat-tab{
  background:transparent;border:none;color:#737373;
  padding:5px 6px;border-radius:5px;font-size:11px;cursor:pointer;flex:1;transition:.14s;
}
.chart-cat-tab:hover{color:#fafafa;background:#1a1a1a}
.chart-cat-tab.active{color:#0a0a0a;background:#d4a017;font-weight:600}
.chart-symbol-list{flex:1;overflow-y:auto;padding:0 8px 10px}
.chart-symbol-row{
  display:flex;justify-content:space-between;align-items:center;
  padding:8px 10px;margin:1px 0;border-radius:6px;cursor:pointer;transition:.1s;
  font-size:12px;color:#d4d4d4;
}
.chart-symbol-row:hover{background:#1a1a1a;color:#fafafa}
.chart-symbol-row.active{background:#262626;color:#d4a017;font-weight:600;box-shadow:inset 3px 0 0 #d4a017}
.chart-symbol-row .sym-col{display:flex;flex-direction:column;gap:1px;min-width:0;flex:1}
.chart-symbol-row .sym-col strong{font-size:12px}
.chart-symbol-row .name{font-size:10px;color:#737373;font-weight:400;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.chart-symbol-row .px{font-variant-numeric:tabular-nums;font-size:11px}
.chart-symbol-row .px.up{color:#16a34a}
.chart-symbol-row .px.down{color:#dc2626}

/* 滚动条统一 */
.chart-symbol-list::-webkit-scrollbar,
.chart-right-pane::-webkit-scrollbar{width:5px}
.chart-symbol-list::-webkit-scrollbar-track,
.chart-right-pane::-webkit-scrollbar-track{background:transparent}
.chart-symbol-list::-webkit-scrollbar-thumb,
.chart-right-pane::-webkit-scrollbar-thumb{background:#262626;border-radius:3px}
.chart-symbol-list::-webkit-scrollbar-thumb:hover,
.chart-right-pane::-webkit-scrollbar-thumb:hover{background:#404040}

/* ────────── 中间 K 线主区 ────────── */
.chart-app-main{
  display:flex;flex-direction:column;min-width:0;min-height:0;
  background:#0a0a0a;
}
.chart-app-toolbar{
  flex:0 0 40px;
  display:flex;align-items:center;gap:14px;
  background:#0f0f0f;border-bottom:1px solid #1a1a1a;
  padding:0 16px;color:#fafafa;font-size:12px;
  overflow-x:auto;white-space:nowrap;
}
.chart-tool-group{display:flex;align-items:center;gap:8px;flex-shrink:0}
.chart-tool-label{font-size:10px;text-transform:uppercase;letter-spacing:.1em;color:#737373;font-weight:600}
.chart-tool-divider{width:1px;height:18px;background:#1f1f1f}
.chart-symbol-display{font-weight:700;font-size:14px;color:#fafafa;letter-spacing:.02em}
.chart-symbol-name{font-size:11px;color:#737373}

.chart-tf-tabs{display:inline-flex;background:#1a1a1a;border:1px solid #262626;border-radius:6px;padding:2px}
.chart-tf-tabs button{
  background:transparent;border:none;color:#a3a3a3;
  padding:4px 9px;border-radius:4px;font-size:11px;cursor:pointer;
  font-family:'JetBrains Mono','SF Mono',monospace;font-weight:600;
  transition:.14s;
}
.chart-tf-tabs button:hover{color:#fafafa}
.chart-tf-tabs button.active{background:#d4a017;color:#0a0a0a}

.chart-draw-tools{display:inline-flex;background:#1a1a1a;border:1px solid #262626;border-radius:6px;padding:2px}
.chart-draw-tools button{
  background:transparent;border:none;color:#a3a3a3;
  width:26px;height:24px;border-radius:4px;cursor:pointer;font-size:13px;
  display:inline-flex;align-items:center;justify-content:center;transition:.14s;
}
.chart-draw-tools button:hover{color:#fafafa;background:#262626}
.chart-draw-tools button.active{background:#d4a017;color:#0a0a0a}

.chart-sub-toggle{
  background:#1a1a1a;border:1px solid #262626;color:#737373;
  padding:4px 9px;border-radius:5px;font-size:10px;font-weight:700;letter-spacing:.04em;cursor:pointer;transition:.14s;
}
.chart-sub-toggle:hover{color:#fafafa;border-color:#404040}
.chart-sub-toggle.on{background:#262626;color:#d4a017;border-color:#d4a017}

.chart-price-tape{display:flex;align-items:center;gap:10px;margin-left:auto;font-variant-numeric:tabular-nums;font-size:11px;color:#a3a3a3;flex-shrink:0}
.chart-price-tape strong{color:#fafafa;font-weight:600}
.chart-price-tape .up{color:#16a34a}
.chart-price-tape .down{color:#dc2626}
.chart-live-dot{color:#16a34a;font-size:8px;animation:pulse 2s infinite}
.chart-time-display{color:#737373;font-size:10px}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.3}}

/* ────────── K 线画布 + 副图(volume 独立!) ────────── */
.chart-app-canvas{
  flex:1;position:relative;min-height:0;
  display:flex;flex-direction:column;
  background:#0a0a0a;
}
.chart-lwc-main{
  flex:1 1 0;
  position:relative;
  min-height:240px;
}

/* ★ 副图:像 TradingView 一样,每个独立一块,默认 130px */
.chart-lwc-sub{
  flex:0 0 130px;
  border-top:1px solid #1a1a1a;
  background:#0a0a0a;
  display:flex;flex-direction:column;
  position:relative;
}
.chart-lwc-sub-header{
  flex:0 0 22px;
  display:flex;align-items:center;justify-content:space-between;
  padding:0 10px;
  background:#0f0f0f;
  border-bottom:1px solid #1a1a1a;
}
.chart-lwc-sub-header .sub-label{
  font-size:10px;font-weight:700;color:#d4a017;
  text-transform:uppercase;letter-spacing:.08em;
  font-family:'JetBrains Mono','SF Mono',monospace;
}
.chart-lwc-sub-header .sub-close{
  background:transparent;border:none;color:#737373;
  width:18px;height:18px;border-radius:3px;cursor:pointer;font-size:14px;line-height:1;
  display:flex;align-items:center;justify-content:center;
}
.chart-lwc-sub-header .sub-close:hover{background:#262626;color:#dc2626}
.chart-lwc-sub-area{flex:1;position:relative;min-height:0}

#news-tip{
  position:absolute;z-index:30;
  background:rgba(10,10,10,.97);color:#fafafa;font-size:12px;
  border:1px solid #262626;border-radius:6px;padding:10px;max-width:340px;
  box-shadow:0 10px 30px rgba(0,0,0,.5);display:none;pointer-events:none;line-height:1.5;
}
#news-tip .src{color:#d4a017;font-size:10px;text-transform:uppercase;letter-spacing:.06em;margin-bottom:6px}
#news-tip .title{font-weight:600;margin-bottom:6px}
#news-tip .sum{color:#a3a3a3;font-size:11px}

/* ────────── 右侧 panel ────────── */
.chart-app-right{
  background:#0f0f0f;border-left:1px solid #1a1a1a;
  display:flex;flex-direction:column;min-height:0;overflow:hidden;
}
.chart-right-tabs{
  display:flex;align-items:center;gap:2px;
  padding:6px 8px;border-bottom:1px solid #1a1a1a;background:#0a0a0a;
}
.chart-right-tab{
  background:transparent;border:none;color:#737373;
  padding:6px 12px;border-radius:5px;font-size:11px;font-weight:600;cursor:pointer;transition:.14s;
}
.chart-right-tab:hover{color:#fafafa;background:#1a1a1a}
.chart-right-tab.active{color:#d4a017;background:#262626}

.chart-right-pane{display:none;flex:1;overflow-y:auto;padding:14px}
.chart-right-pane.active{display:block}
.chart-right-pane h4{
  font-size:11px;text-transform:uppercase;letter-spacing:.1em;
  color:#737373;font-weight:600;margin:14px 0 8px;
}
.chart-right-pane h4:first-child{margin-top:0}

/* ind-toggle 深色版 */
.chart-app .ind-toggle{
  background:#1a1a1a;border:1px solid #262626;color:#d4d4d4;
  display:flex;justify-content:space-between;align-items:center;
  padding:8px 10px;border-radius:5px;font-size:12px;margin-bottom:4px;cursor:pointer;
}
.chart-app .ind-toggle:hover{border-color:#404040}
.chart-app .ind-toggle .switch{width:30px;height:16px;border-radius:999px;background:#262626;position:relative;transition:.14s}
.chart-app .ind-toggle .switch::after{content:"";position:absolute;left:2px;top:2px;width:12px;height:12px;border-radius:50%;background:#737373;transition:.14s}
.chart-app .ind-toggle .switch.on{background:#d4a017}
.chart-app .ind-toggle .switch.on::after{transform:translateX(14px);background:#0a0a0a}

/* 共振 dots */
.chart-resonance{display:flex;gap:8px}
.res-dot{
  width:48px;height:30px;border-radius:5px;background:#1a1a1a;border:1px solid #262626;
  display:flex;align-items:center;justify-content:center;
  font-size:10px;color:#737373;font-weight:600;
}
.res-dot.bull{background:rgba(22,163,74,.15);color:#16a34a;border-color:#16a34a}
.res-dot.bear{background:rgba(220,38,38,.15);color:#dc2626;border-color:#dc2626}
.res-dot.neutral{background:rgba(212,160,23,.15);color:#d4a017;border-color:#d4a017}

/* 新闻列表(右栏) */
.chart-news-list{display:flex;flex-direction:column;gap:6px}
.chart-news-item{
  padding:8px 10px;border-radius:5px;background:#1a1a1a;border:1px solid transparent;
  cursor:pointer;transition:.14s;text-decoration:none;color:#d4d4d4;
}
.chart-news-item:hover{border-color:#262626;background:#262626}
.chart-news-item .meta{font-size:10px;color:#737373;display:flex;justify-content:space-between;margin-bottom:3px}
.chart-news-item .sentiment-dot{display:inline-block;width:6px;height:6px;border-radius:50%;margin-right:4px}
.chart-news-item .sentiment-dot.bullish{background:#16a34a}
.chart-news-item .sentiment-dot.bearish{background:#dc2626}
.chart-news-item .sentiment-dot.neutral{background:#d4a017}
.chart-news-item .title{font-size:12px;color:#fafafa;line-height:1.4}

/* 信号列表(右栏) */
.chart-signals-list{display:flex;flex-direction:column;gap:6px}
.chart-signal-item{
  padding:8px 10px;border-radius:5px;background:#1a1a1a;border-left:3px solid #262626;
  font-size:11px;color:#d4d4d4;
}
.chart-signal-item.long{border-left-color:#16a34a}
.chart-signal-item.short{border-left-color:#dc2626}
.chart-signal-item .top{display:flex;justify-content:space-between;font-size:10px;color:#737373;margin-bottom:4px}
.chart-signal-item .sym{color:#fafafa;font-weight:700}

/* ────────── 状态栏(24px) ────────── */
.chart-statusbar{
  flex:0 0 24px;
  display:flex;align-items:center;gap:8px;
  background:#0f0f0f;border-top:1px solid #1a1a1a;
  padding:0 16px;color:#737373;font-size:10px;
}
.chart-statusbar-divider{width:1px;height:12px;background:#1f1f1f}

/* ────────── AI 分析面板 ────────── */
.ai-analyze-btn{
  width:100%;margin-top:10px;padding:10px 12px;border-radius:6px;cursor:pointer;
  background:#d4a017;color:#0a0a0a;border:none;font-weight:700;font-size:13px;transition:.14s;
}
.ai-analyze-btn:hover{background:#e0b020}
.ai-analyze-btn:disabled{opacity:.5;cursor:not-allowed}
.ai-result{margin-top:12px}
.ai-plan-card{background:#1a1a1a;border:1px solid #262626;border-radius:8px;padding:12px;font-size:12px}
.ai-plan-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:8px}
.ai-plan-dir{font-weight:800;font-size:14px;padding:2px 10px;border-radius:5px}
.ai-plan-dir.long{background:rgba(22,163,74,.18);color:#16a34a}
.ai-plan-dir.short{background:rgba(220,38,38,.18);color:#dc2626}
.ai-plan-dir.neutral{background:rgba(212,160,23,.18);color:#d4a017}
.ai-plan-conf{font-size:11px;color:#737373}
.ai-plan-levels{display:grid;grid-template-columns:repeat(3,1fr);gap:6px;margin:8px 0}
.ai-plan-levels .lv{background:#0f0f0f;border:1px solid #262626;border-radius:5px;padding:6px;text-align:center}
.ai-plan-levels .lv .k{font-size:9px;color:#737373;text-transform:uppercase;letter-spacing:.06em}
.ai-plan-levels .lv .v{font-size:13px;font-weight:700;color:#fafafa;font-variant-numeric:tabular-nums}
.ai-plan-section{margin-top:8px}
.ai-plan-section .lbl{font-size:10px;color:#737373;text-transform:uppercase;letter-spacing:.06em;margin-bottom:2px}
.ai-plan-section .txt{font-size:12px;color:#d4d4d4;line-height:1.5}
.ai-plan-tf{display:flex;flex-direction:column;gap:3px;margin-top:6px}
.ai-plan-tf .row{display:flex;gap:6px;font-size:11px;color:#a3a3a3}
.ai-plan-tf .row b{color:#d4a017;min-width:38px}
.ai-plan-foot{margin-top:10px;font-size:10px;color:#525252;border-top:1px solid #262626;padding-top:8px}
.ai-msg{font-size:12px;color:#a3a3a3;padding:14px;text-align:center;line-height:1.6}
.ai-msg a{color:#d4a017}

/* ────────── Symbol modal (Cmd+K) ────────── */
.chart-modal{position:fixed;inset:0;z-index:100;display:flex;align-items:flex-start;justify-content:center;padding-top:80px}
.chart-modal-overlay{position:absolute;inset:0;background:rgba(0,0,0,.7);backdrop-filter:blur(8px)}
.chart-modal-content{position:relative;width:90%;max-width:560px;background:#0f0f0f;border:1px solid #262626;border-radius:10px;box-shadow:0 24px 64px rgba(0,0,0,.8);overflow:hidden}
.chart-modal-content input{width:100%;background:transparent;border:none;border-bottom:1px solid #262626;color:#fafafa;padding:18px 20px;font-size:16px;outline:none}
.chart-modal-content input::placeholder{color:#737373}
#symbol-modal-list{max-height:400px;overflow-y:auto;padding:8px}