/* 道氏趋势图表 — 深色交易终端风格（对标源站三栏布局） */
:root{
  --bg:#0b0e11; --panel:#12161d; --panel2:#171c26; --card:#1a2130;
  --border:#232b3a; --border-soft:#1c2330;
  --text:#eaecef; --dim:#8a94a6; --dim2:#5e6879;
  --green:#0ecb81; --red:#f6465d; --amber:#f0b90b; --blue:#3b82f6;
  --purple:#b18cff; --teal:#2ebd85;
  --mono:"JetBrains Mono","SF Mono",Consolas,"Roboto Mono",monospace;
}
*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%}
body{background:var(--bg);color:var(--text);font:13px/1.5 -apple-system,"PingFang SC","Microsoft YaHei","Segoe UI",sans-serif;overflow:hidden}
.mono{font-family:var(--mono)}
b{font-weight:600}

/* ── 顶栏 ─────────────────────────── */
#topbar{height:48px;display:flex;align-items:center;gap:20px;padding:0 14px;background:var(--panel);border-bottom:1px solid var(--border)}
.brand{display:flex;align-items:center;gap:8px;white-space:nowrap}
.brand-logo{font-size:22px;color:var(--amber);font-weight:700}
.brand-name{font-size:15px;font-weight:700;letter-spacing:.5px}
.brand-name em{font-style:normal;color:var(--dim);font-size:11px;margin-left:7px;font-weight:400}
.top-symbol{display:flex;align-items:center;gap:9px}
#ts-symbol{font-weight:700;font-size:14px}
.tag-perp{background:#2a3350;color:#9db4e8;font-size:10px;padding:1px 6px;border-radius:3px}
#ts-price{font-size:14px;font-weight:600}
.up{color:var(--green)!important}.down{color:var(--red)!important}
.top-right{margin-left:auto;display:flex;align-items:center;gap:12px}
.src-badge{color:var(--dim);font-size:11px;border:1px solid var(--border);padding:2px 8px;border-radius:10px}
.conn{display:flex;align-items:center;gap:6px;font-size:11px;color:var(--dim)}
.dot{width:8px;height:8px;border-radius:50%;display:inline-block}
.dot-on{background:var(--green);box-shadow:0 0 6px var(--green)}
.dot-off{background:var(--red)}
.endpoint{color:var(--dim2);font-size:11px}

/* ── 三栏布局 ─────────────────────── */
#layout{display:flex;height:calc(100vh - 48px)}

/* 左：行情列表 */
#watchlist{width:232px;flex:none;background:var(--panel);border-right:1px solid var(--border);display:flex;flex-direction:column}
.wl-head{padding:10px 10px 6px;display:flex;flex-direction:column;gap:8px}
.wl-title{font-weight:700;font-size:13px}
#wl-filter{background:var(--panel2);border:1px solid var(--border);border-radius:5px;color:var(--text);padding:5px 8px;font-size:12px;outline:none}
#wl-filter:focus{border-color:var(--blue)}
.wl-cols{display:flex;padding:4px 12px;color:var(--dim2);font-size:11px;border-bottom:1px solid var(--border-soft)}
.wl-cols span:nth-child(1){flex:1.2}.wl-cols span:nth-child(2){flex:1;text-align:right}.wl-cols span:nth-child(3){flex:.8;text-align:right}
#wl-body{flex:1;overflow-y:auto}
.wl-row{display:flex;padding:7px 12px;cursor:pointer;border-bottom:1px solid rgba(255,255,255,.02);font-family:var(--mono);font-size:12px;align-items:center}
.wl-row:hover{background:var(--panel2)}
.wl-row.active{background:#1d2637;box-shadow:inset 2px 0 0 var(--amber)}
.wl-row .s{flex:1.2;font-family:inherit;font-weight:600}
.wl-row .p{flex:1;text-align:right}
.wl-row .chg{flex:.8;text-align:right}
.wl-foot{padding:7px 12px;color:var(--dim2);font-size:11px;border-top:1px solid var(--border-soft)}

/* 中：图表区 */
#center{flex:1;display:flex;flex-direction:column;min-width:0}
#chart-head{display:flex;justify-content:space-between;align-items:center;padding:7px 12px;background:var(--panel);border-bottom:1px solid var(--border-soft);gap:12px;flex-wrap:wrap}
.ohlc{display:flex;gap:12px;color:var(--dim);font-size:12px;flex-wrap:wrap}
.ohlc b{color:var(--text);font-weight:500}
.ohlc-sym{color:var(--text);font-weight:700}
.stats{display:flex;gap:14px;color:var(--dim);font-size:11px}
.stats b{color:var(--text);font-weight:500}
#toolbar{display:flex;align-items:center;gap:8px;padding:6px 10px;background:var(--panel);border-bottom:1px solid var(--border);flex-wrap:wrap}
.tb-group{display:flex;gap:2px}
.tb-group button{background:transparent;border:1px solid transparent;color:var(--dim);padding:4px 9px;border-radius:5px;cursor:pointer;font-size:12px}
.tb-group button:hover{color:var(--text);background:var(--panel2)}
.tb-group button.active{background:#26314a;color:#fff;border-color:#33456b}
.tb-group .tg.active{background:#22304d;color:#cfe1ff;border-color:#33507e}
.tb-sep{width:1px;height:18px;background:var(--border)}
.strength{color:var(--dim);font-size:12px;display:flex;align-items:center;gap:6px}
.strength select{background:var(--panel2);color:var(--text);border:1px solid var(--border);border-radius:5px;padding:3px 6px;font-size:12px}
#recalc-note{color:var(--dim2);font-size:11px;margin-left:auto}
#chart-wrap{flex:1;position:relative;background:#0d1117}
#chart{position:absolute;inset:0}
#chart-loading{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;color:var(--dim);font-size:13px;background:rgba(11,14,17,.6);z-index:5}
#trend-watermark{position:absolute;top:12px;left:14px;z-index:4;font-size:26px;font-weight:800;letter-spacing:2px;opacity:.13;pointer-events:none}
#footbar{display:flex;gap:8px;align-items:center;padding:5px 12px;background:var(--panel);border-top:1px solid var(--border-soft);color:var(--dim2);font-size:11px}
.foot-right{margin-left:auto;color:var(--dim)}

/* 右：策略面板 */
#panel{width:318px;flex:none;background:var(--panel);border-left:1px solid var(--border);overflow-y:auto;padding:12px}
.panel-head{display:flex;align-items:baseline;gap:8px;margin-bottom:10px}
.panel-title{font-size:14px;font-weight:700}
.panel-sub{color:var(--dim2);font-size:11px}
.strategy-card{background:var(--card);border:1px solid var(--border);border-radius:10px;padding:12px;margin-bottom:10px}
.active-card{border-color:#33456b;box-shadow:0 2px 14px rgba(0,0,0,.35)}
.dim-card{opacity:.55}
.sc-head{display:flex;align-items:center;gap:10px}
.sc-icon{font-size:19px;color:var(--amber);width:26px;text-align:center}
.dim-card .sc-icon{color:var(--dim)}
.sc-titles{flex:1;min-width:0}
.sc-name{font-size:14px;font-weight:700}
.sc-sub{color:var(--dim);font-size:11px;margin-top:1px}
.sc-badge{background:#2f5fd0;color:#fff;font-size:10px;padding:2px 8px;border-radius:4px;white-space:nowrap}
.badge-dim{background:#2a3245;color:var(--dim)}
.sc-body{margin-top:12px;border-top:1px solid var(--border-soft);padding-top:11px}
.trend-row{display:flex;justify-content:space-between;align-items:center;margin-bottom:8px}
.trend-row .k,.level-row .k{color:var(--dim);font-size:12px}
.trend-badge{font-weight:700;font-size:12px;padding:2px 10px;border-radius:4px}
.tb-up{background:rgba(14,203,129,.14);color:var(--green)}
.tb-down{background:rgba(246,70,93,.14);color:var(--red)}
.tb-range{background:rgba(240,185,11,.13);color:var(--amber)}
.chips{display:flex;gap:4px}
.chip{font-size:10px;padding:1px 5px;border-radius:3px;background:#232c3f;color:#aebdd6}
.chip.h{color:#7ee2b8}.chip.l{color:#ff9db0}
.levels{background:var(--panel2);border:1px solid var(--border-soft);border-radius:8px;padding:8px 10px;margin:10px 0}
.level-row{display:flex;justify-content:space-between;padding:2.5px 0;font-size:12px}
.lv-r{color:var(--red)!important}.lv-s{color:var(--teal)!important}
.sig-head{display:flex;justify-content:space-between;color:var(--text);font-weight:700;font-size:12px;margin:12px 0 6px}
.sig-count{color:var(--dim2);font-weight:400}
#signals{display:flex;flex-direction:column;gap:5px}
.sig{display:flex;align-items:center;gap:8px;background:var(--panel2);border:1px solid var(--border-soft);border-radius:7px;padding:6px 9px;cursor:pointer;font-size:12px}
.sig:hover{border-color:#33507e}
.sig .dir{font-weight:800;font-size:11px;padding:1px 6px;border-radius:3px}
.dir.long{background:rgba(14,203,129,.16);color:var(--green)}
.dir.short{background:rgba(246,70,93,.16);color:var(--red)}
.sig .lbl{flex:1}
.sig .meta{color:var(--dim2);font-size:11px;text-align:right}
.sig-empty{color:var(--dim2);font-size:12px;padding:4px 2px}
#swing-list{display:flex;flex-direction:column;gap:3px;font-size:11px}
.sw-row{display:flex;justify-content:space-between;color:var(--dim);padding:2px 4px;border-bottom:1px dashed rgba(255,255,255,.04)}
.sw-row b{color:var(--text);font-weight:500}
.sw-tag{font-weight:700}
.sw-tag.H{color:#7ee2b8}.sw-tag.L{color:#ff9db0}
.howto{margin-top:12px;color:var(--dim);font-size:12px}
.howto summary{cursor:pointer;color:var(--text);font-weight:600;font-size:12px}
.howto p{margin-top:7px}
.howto b{color:var(--text)}

/* 滚动条 */
::-webkit-scrollbar{width:8px;height:8px}
::-webkit-scrollbar-thumb{background:#2a3345;border-radius:4px}
::-webkit-scrollbar-track{background:transparent}

/* 响应式：窄屏堆叠 */
@media (max-width:1100px){
  #watchlist{display:none}
}
@media (max-width:820px){
  body{overflow:auto}
  #layout{flex-direction:column;height:auto}
  #chart-wrap{height:56vh}
  #panel{width:100%;border-left:none;border-top:1px solid var(--border)}
  .top-symbol .tag-perp,.src-badge{display:none}
}