@import url('https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;600;700;800&family=Noto+Sans+SC:wght@300;400;500;600;700&display=swap');
:root{
  --bg:#0a0f1e;--bg2:#0f1729;--bg3:#151e33;--bg4:#1a2540;
  --border:rgba(255,255,255,0.08);--text:#d0daf0;--dim:#5a6a85;
  --green:#00e5a0;--red:#ff4d6d;--blue:#4d9fff;--purple:#a78bfa;
  --owl:#a78bfa;--fox:#38bdf8;--leopard:#fb923c;
  --row-odd:#0f1729;--row-even:#111e35;
  --pp:#00b36b;--pn:#cc1f3f;
  /* 吸顶偏移量：由 app.js 的 updateStickyOffsets() 按真实高度实时写入。
     之前这里写死 58px/74px，桌面端顶栏刚好 58px 没问题，手机端顶栏会换成多行（约 110-130px），
     二级吸顶的面板标题条被压在顶栏后面，看起来就是"没吸住" */
  --hdr-h:58px;     /* 顶栏高度 */
  --tabs-h:0px;     /* 手机端"标的总览/买卖信号"标签条高度，不可见时为 0 */
}
[data-theme="light"]{
  --bg:#f0f2f7;--bg2:#ffffff;--bg3:#e8eaf0;--bg4:#dde1ea;
  --border:rgba(0,0,0,0.10);--text:#1a1f2e;--dim:#6b7585;
  --green:#008a55;--red:#d92040;--blue:#1565c0;--purple:#6b4fd8;
  --owl:#6b4fd8;--fox:#0277bd;--leopard:#e65100;
  --row-odd:#ffffff;--row-even:#f5f6fa;
  --pp:#008a55;--pn:#d92040;
}

/* 亮色主题：覆盖所有硬编码白色文字 */
[data-theme="light"] .cc-nm,
[data-theme="light"] .sc-nm,
[data-theme="light"] .pi-nm,
[data-theme="light"] .cell-sym div:first-child,
[data-theme="light"] .tf-sym,
[data-theme="light"] .tf-price,
[data-theme="light"] .ccard,
[data-theme="light"] .panel,
[data-theme="light"] #sym-table,
[data-theme="light"] .drw { color: var(--text); }

[data-theme="light"] #sym-table thead th { color: var(--dim); background: rgba(0,0,0,0.03); }
[data-theme="light"] #sym-table tbody tr:hover { background: rgba(21,101,192,0.06); }
[data-theme="light"] #sym-table tbody tr.row-holding { background: rgba(0,138,85,0.05); }
[data-theme="light"] #sym-table tbody tr.sel { background: rgba(21,101,192,0.10) !important; }

[data-theme="light"] .ccard { background: linear-gradient(145deg,#fff,#f0f2f7); box-shadow: 0 2px 12px rgba(0,0,0,0.08); }
[data-theme="light"] .ccard.active { box-shadow: 0 0 0 1px var(--blue), 0 4px 16px rgba(0,0,0,0.12); }
[data-theme="light"] .ccard::after { background: linear-gradient(135deg,var(--ac,var(--blue)) 0%,transparent 55%); }

[data-theme="light"] .cc-nm { color: #1a1f2e; }
[data-theme="light"] .cc-tf { color: var(--dim); }
[data-theme="light"] .csv.neu { color: #1a1f2e; }
[data-theme="light"] .cc-eq.pos { text-shadow: 0 0 14px rgba(0,138,85,0.2); }
[data-theme="light"] .cc-eq.neg { text-shadow: 0 0 14px rgba(217,32,64,0.2); }

[data-theme="light"] .scard { background: linear-gradient(145deg,#fff,#f0f2f7); border-color: rgba(0,0,0,0.08); }
[data-theme="light"] .scard:hover { border-color: var(--blue); }
[data-theme="light"] .scard.sel { border-color: var(--blue); background: rgba(21,101,192,0.05); }
[data-theme="light"] .sc-nm { color: #1a1f2e; }
[data-theme="light"] .sc-bdg.h { background: rgba(0,138,85,0.12); }
[data-theme="light"] .sc-bdg.e { background: rgba(0,0,0,0.06); }

[data-theme="light"] .pi { border-bottom-color: rgba(0,0,0,0.06); }
[data-theme="light"] .pi-nm { color: #1a1f2e; }
[data-theme="light"] .pi:hover { background: rgba(21,101,192,0.04); }
[data-theme="light"] .pi.sel-pi { background: rgba(21,101,192,0.08); border-left-color: var(--blue); }

[data-theme="light"] .ntab { color: var(--dim); }
[data-theme="light"] .ntab.active { background: var(--blue); color: #fff; }
[data-theme="light"] .ntab:not(.active):hover { color: var(--text); }
[data-theme="light"] .hdr-tool { background: rgba(0,0,0,0.03); color: var(--text); }
[data-theme="light"] .hdr-tool:hover { background: rgba(21,101,192,0.06); }
[data-theme="light"] .hdr-link { color: var(--dim); }
[data-theme="light"] .hdr-link:hover { color: var(--blue); }

[data-theme="light"] .tbl-badge.hold { background: rgba(0,138,85,0.12); color: #008a55; }
[data-theme="light"] .tbl-badge.empty { background: rgba(0,0,0,0.06); color: var(--dim); }

[data-theme="light"] .tf-item:hover { background: rgba(21,101,192,0.05); }
[data-theme="light"] .tf-tag.buy { background: rgba(21,101,192,0.12); }
[data-theme="light"] .tf-tag.sell { background: rgba(255,193,7,0.15); }
[data-theme="light"] .tf-char { color: var(--dim); }
[data-theme="light"] .tf-time { color: var(--dim); }
[data-theme="light"] .tf-sym { color: #1a1f2e; }

[data-theme="light"] .drw { background: #fff; border-color: rgba(0,0,0,0.10); }
[data-theme="light"] .drw-top { border-bottom-color: rgba(0,0,0,0.08); }
[data-theme="light"] .addedh { color: var(--dim); }

[data-theme="light"] .ov#detail-modal .drw { background: #fff; }
[data-theme="light"] #sym-table tbody td { color: var(--text); }
[data-theme="light"] .cell-sym div:first-child { color: #1a1f2e; }
[data-theme="light"] .cell-sym div:last-child { color: var(--dim); }

[data-theme="light"] input, [data-theme="light"] select {
  background: #fff !important; color: var(--text) !important;
  border-color: rgba(0,0,0,0.15) !important;
}
[data-theme="light"] input::placeholder { color: var(--dim) !important; }

[data-theme="light"] .status-toggle,
[data-theme="light"] .view-toggle { background: rgba(0,0,0,0.06); }
[data-theme="light"] .st-btn[data-val=""].active { background: var(--blue); color: #fff; }
[data-theme="light"] .vt-btn.active { background: var(--blue); color: #fff; }

[data-theme="light"] .empty { color: var(--dim); }
[data-theme="light"] .ld { color: var(--dim); }

[data-theme="light"] #detail-info-grid > div { background: rgba(0,0,0,0.04); }
[data-theme="light"] #detail-info-grid > div > div:first-child { color: var(--dim); }
[data-theme="light"] #detail-info-grid > div > div:last-child { color: #1a1f2e; }

[data-theme="light"] table thead tr th {
  color: var(--dim); background: rgba(0,0,0,0.03);
  border-bottom-color: rgba(0,0,0,0.10);
}
[data-theme="light"] table tbody tr { border-bottom-color: rgba(0,0,0,0.05); }
[data-theme="light"] table tbody td { color: var(--text); }

[data-theme="light"] #trade-feed .tf-item { border-bottom-color: rgba(0,0,0,0.05); }
[data-theme="light"] .tpanel { background: #fff; }
[data-theme="light"] .tph { border-bottom-color: rgba(0,0,0,0.08); }
[data-theme="light"] .pt { color: #1a1f2e; }
[data-theme="light"] .ps { color: var(--dim); }

[data-theme="light"] .chars-row .csi { background: rgba(0,0,0,0.04); border-color: rgba(0,0,0,0.06); }
[data-theme="light"] .csl { color: var(--dim); }

[data-theme="light"] #theme-toggle { background: rgba(0,0,0,0.06) !important; }
*{margin:0;padding:0;box-sizing:border-box;}
html{overflow-x:hidden;overscroll-behavior-x:none;}
body{background:var(--bg);color:var(--text);font-family:'Noto Sans SC',sans-serif;font-size:14px;min-height:100vh;overscroll-behavior-x:none;}
[data-theme="light"] body::before{display:none}
body::before{content:'';position:fixed;inset:0;z-index:0;
  background:radial-gradient(ellipse 80% 60% at 50% -10%,rgba(77,159,255,0.06),transparent),
  linear-gradient(rgba(77,159,255,0.025) 1px,transparent 1px),
  linear-gradient(90deg,rgba(77,159,255,0.025) 1px,transparent 1px);
  background-size:100% 100%,44px 44px,44px 44px;pointer-events:none;}

/* header 下拉菜单：把「联系我们」「管理」这类次要功能收进按钮点击后
   弹出的菜单里，避免顶栏被一排常驻按钮挤满、挤到 logo 换行 */
.hdr-dropdown{position:relative;}
/* 之前是纯文字小箭头（9px/透明度.6），几乎看不出是"可展开"的标识；
   改成和 .evc-collapse-caret 同一套视觉语言的小圆底徽标，尺寸和存在感都明显加大 */
.hdr-caret{display:inline-flex;align-items:center;justify-content:center;
  width:16px;height:16px;border-radius:50%;background:rgba(0,0,0,.06);
  font-size:9px;opacity:.85;margin-left:2px;transition:background .15s,transform .2s;}
.hdr-tool:hover .hdr-caret{background:rgba(21,101,192,.14);}
.hdr-dropdown.open .hdr-caret{transform:rotate(180deg);}
.hdr-dropdown-menu{position:absolute;top:calc(100% + 8px);right:0;
  background:var(--bg2);border:1px solid var(--border);border-radius:10px;
  box-shadow:0 10px 28px rgba(0,0,0,.22);min-width:220px;padding:6px;
  display:none;z-index:200;}
.hdr-dropdown-menu.show{display:block;}
.hdr-dropdown-item{display:flex;align-items:center;gap:8px;width:100%;
  padding:9px 10px;border-radius:7px;background:transparent;border:none;
  color:var(--text);font-size:13px;cursor:pointer;text-align:left;
  font-family:inherit;transition:background .15s;white-space:nowrap;}
.hdr-dropdown-item:hover{background:var(--bg3);}
.hdr-dropdown-divider{height:1px;background:var(--border);margin:6px 4px;}

/* 标的详情弹窗：普通面板标题（权益曲线/K线图/估值参考/历史买卖明细）不再各自
   置顶——之前这几个标题共用全局 .ph 的 sticky 规则，滚动时会挨个抢占顶部，
   现在只让 EV 计算器整块（标题+输入框+结果）置顶，体现它是随时要用的工具 */
.detail-body .ph{position:static;}
.dev-sticky-wrap{position:-webkit-sticky;position:sticky;top:0;z-index:95;background:var(--bg2);
  padding-top:4px;margin:0 -20px;padding-left:20px;padding-right:20px;
  box-shadow:0 8px 12px -8px rgba(0,0,0,.25);}

/* 折叠/展开按钮：原来是纯边框+暗色文字，太不起眼，容易被忽略成看不见的功能——
   改成和期望计算器主按钮同色系的实心蓝底按钮，加粗字重，明显是可点的交互元素 */
.fold-btn{background:var(--blue);border:none;border-radius:7px;color:#fff;
  padding:5px 13px;font-size:12px;font-weight:700;cursor:pointer;font-family:inherit;
  box-shadow:0 2px 8px rgba(77,159,255,.35);white-space:nowrap;flex-shrink:0;}
.fold-btn:hover{opacity:.88;}

/* 顶部市场切换标签条：标签一多就会溢出——之前只在 ≤640px 断点里写了可滑动，宽一点的屏幕（平板、
   窗口没缩得很窄的桁面端）不吃那条规则，标签一多就会被截断且滑不动——这条本来就应该对所有宽度生效，
   不该锁在手机断点里，改成全局无条件生效，屏宽够时本来就不会触发 */
#market-toggle{overflow-x:auto;-webkit-overflow-scrolling:touch;scrollbar-width:none;
  overscroll-behavior-x:contain;touch-action:pan-x;}
#market-toggle::-webkit-scrollbar{display:none;}
#market-toggle .vt-btn{flex-shrink:0;}

header{position:sticky;top:0;z-index:100;
  background:rgba(255,255,255,0.92);backdrop-filter:blur(16px);
  border-bottom:1px solid var(--border);
  padding:0 32px;display:flex;align-items:center;gap:16px;height:58px;}
.logo{font-family:'JetBrains Mono',monospace;font-weight:800;font-size:18px;
  color:var(--blue);letter-spacing:1px;white-space:nowrap;flex-shrink:0;}
.hdr-nav{display:flex;gap:4px;}
.ntab{padding:6px 18px;border-radius:7px;background:transparent;
  border:1px solid var(--border);color:var(--dim);font-size:13px;cursor:pointer;transition:all .2s;}
.ntab.active,.ntab:hover{background:rgba(77,159,255,0.12);border-color:var(--blue);color:var(--blue);}
/* 顶部按钮语义区分：分段标签切换看 .view-toggle/.vt-btn（如美股/加密货币）；
   下面两类用于「触发动作」和「跳转站外」，样式上要和标签切换明显不同，避免误以为是可选中的状态 */
.hdr-tool{padding:6px 16px;border-radius:7px;background:var(--bg3);
  border:1px solid var(--border);color:var(--text);font-size:13px;cursor:pointer;
  transition:all .2s;font-family:inherit;display:inline-flex;align-items:center;gap:6px;}
.hdr-tool:hover{border-color:var(--blue);color:var(--blue);background:var(--bg4);}
.hdr-link{padding:6px 12px;border-radius:7px;background:transparent;
  border:1px solid transparent;color:var(--dim);font-size:13px;cursor:pointer;
  transition:all .2s;font-family:inherit;display:inline-flex;align-items:center;gap:5px;}
.hdr-link:hover{color:var(--blue);}
.hdr-link .ext-ic{font-size:10px;opacity:.6;transform:translateY(-1px);}
.scan-all{padding:7px 18px;border-radius:7px;
  background:linear-gradient(135deg,#2563eb,#1d4ed8);
  border:none;color:white;font-size:13px;cursor:pointer;
  display:flex;align-items:center;gap:6px;font-weight:500;
  box-shadow:0 2px 12px rgba(37,99,235,.4);}
.scan-all:hover{background:linear-gradient(135deg,#3b82f6,#2563eb);}
.scan-all.loading{opacity:.6;pointer-events:none;}

/* MAIN */
.main{position:relative;z-index:1;padding:24px 32px;max-width:1500px;margin:0 auto;}

/* CHAR CARDS */
.chars-row{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:12px;}
/* grid 子项默认 min-width:auto，会按内容的最小宽度求值而不是按分到的 1fr 轨道宽度求值——
   卡片内部只要有一行文字/数字（如粗体等宽的 +3559.36% 这类权益数字）比分到的轨道宽，
   卡片就会直接撞破轨道向右溢出，而不是被压缩换行——手机宽屏下实际抓图已验证（“均衡派”
   卡片被切掉一半跑出屏幕）。.chars-row 里每个直接子元素（.ccard/.pf-card）都需要显式清零 */
.chars-row > *{min-width:0;}
.ccard{min-width:0;background:linear-gradient(145deg,var(--bg2),var(--bg3));
  border:1px solid var(--border);border-radius:14px;padding:12px 16px;
  cursor:pointer;transition:background .3s;position:relative;overflow:hidden;}
.ccard::after{content:'';position:absolute;inset:0;border-radius:14px;
  background:linear-gradient(135deg,var(--ac,var(--blue)) 0%,transparent 55%);
  opacity:0;transition:opacity .3s;}
.ccard:hover::after,.ccard.active::after{opacity:.08;}
.ccard.active{border-color:var(--ac,var(--blue));
  box-shadow:0 0 0 1px var(--ac,var(--blue)),0 6px 20px rgba(0,0,0,.25);}
.ccard[data-id=weekly]{--ac:var(--owl);}
.ccard[data-id=daily]{--ac:var(--fox);}
.ccard[data-id="4h"]{--ac:var(--leopard);}
.pf-card{
  --ac:var(--leopard);
  border-width:3px 1px 1px 1px;
  border-style:solid dashed dashed dashed;
  border-color:var(--leopard) var(--border) var(--border) var(--border);
  background:linear-gradient(145deg,var(--bg2),rgba(251,146,60,.06));
}
.pf-card.active{border-top-color:var(--leopard);}
.pf-badge{font-size:9px;font-weight:600;color:var(--leopard);background:rgba(251,146,60,.12);
  padding:1px 6px;border-radius:99px;margin-left:6px;vertical-align:middle;}
.pf-edit-icon{position:absolute;top:10px;right:10px;background:rgba(255,255,255,.06);
  border:1px solid var(--border);border-radius:6px;color:var(--dim);width:22px;height:22px;
  font-size:11px;cursor:pointer;display:flex;align-items:center;justify-content:center;
  transition:all .2s;z-index:2;}
.pf-edit-icon:hover{color:var(--leopard);border-color:var(--leopard);}
.cc-z{position:relative;z-index:1;}
.cc-top{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:8px;}
.cc-hdr{display:flex;align-items:center;gap:9px;}
.cc-av{width:28px;height:28px;border-radius:8px;display:flex;align-items:center;
  justify-content:center;font-size:15px;flex-shrink:0;
  background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.1);}
.cc-nm{font-size:13px;font-weight:700;color:var(--text);line-height:1.2;}
.cc-tf{font-size:9px;color:var(--dim);margin-top:1px;}
.cc-eq-block{text-align:right;flex-shrink:0;}
.cc-eq{font-family:'JetBrains Mono',monospace;font-size:18px;font-weight:900;line-height:1.1;}
.cc-eq.pos{color:var(--green);}
.cc-eq.neg{color:var(--red);}
.cc-lbl{font-size:9px;color:var(--dim);}
.cc-stats{display:grid;grid-template-columns:repeat(4,1fr);gap:6px;}
.csi{background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.05);
  border-radius:7px;padding:4px 7px;}
.csl{font-size:9px;color:var(--dim);margin-bottom:1px;letter-spacing:.2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.csv{font-size:12px;font-weight:700;}
.csv.pos{color:var(--green);background:rgba(0,229,160,.10);
  padding:1px 6px;border-radius:4px;}
.csv.neg{color:var(--red);background:rgba(255,77,109,.10);
  padding:1px 6px;border-radius:4px;}
[data-theme="light"] .csv.pos{background:rgba(0,138,85,.10);}
[data-theme="light"] .csv.neg{background:rgba(217,32,64,.10);}
.csv.neu{color:var(--text);}

/* BOTTOM GRID */
.btm{display:grid;grid-template-columns:1fr 400px;gap:16px;}

/* 视图切换 */
.view-toggle{display:flex;background:var(--bg3);border-radius:7px;padding:2px;gap:2px}
/* 美股/加密货币页的手机专属标的总览/买卖信号切换条，默认不显示，只在 ≤1100px 断点里开启 */
.mkt-mobile-tabs{display:none;}
.mkt-tabs-bar{display:none;}
.status-toggle{display:flex;flex-wrap:wrap;background:var(--bg3);border-radius:7px;padding:2px;gap:2px}
.st-btn{padding:5px 12px;border:none;background:transparent;color:var(--dim);
  font-size:12px;border-radius:5px;cursor:pointer;transition:all .2s;font-family:inherit}
.st-btn.active{background:rgba(0,229,160,.18);color:var(--green)}
.st-btn[data-val=""].active{background:var(--blue);color:#fff}
.st-btn[data-val="empty"].active{background:rgba(255,255,255,.12);color:var(--text)}
.st-btn:not(.active):hover{color:var(--text)}

/* 买卖记录资讯流 */
#trade-feed{padding:6px 0;max-height:calc(100vh - 220px);overflow-y:auto}
.tf-item{display:flex;flex-direction:column;gap:5px;padding:10px 16px;
  border-bottom:1px solid rgba(255,255,255,.04);cursor:pointer;transition:background .15s}
.tf-item:hover{background:rgba(77,159,255,.06)}
.tf-row1{display:flex;align-items:center;gap:8px}
.tf-row2{display:flex;align-items:center;justify-content:space-between;padding-left:44px}
.tf-row3{display:flex;flex-wrap:wrap;gap:9px 14px;padding-left:44px;margin-top:4px;
  font-size:12px;color:var(--dim);}
.tf-row3 b{color:var(--text);font-weight:600;}
.tf-row3 b.pp,.tf-row3 b.pn{padding:0;background:none;}
.tf-row3 b.pp{color:var(--green);}
.tf-row3 b.pn{color:var(--red);}

/* 每日买卖记录改成卡片网格，不再撑满整行——每条记录一个小方框，
   多条记录横向排开，和推荐标的卡片风格保持一致 */
.tf-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:10px;
  padding:10px 18px 16px;}
.tf-grid .tf-item{background:rgba(255,255,255,.04);border:1px solid var(--border);
  border-radius:10px;padding:12px;margin:0;cursor:pointer;transition:all .15s;}
[data-theme="light"] .tf-grid .tf-item{background:linear-gradient(145deg,#fff,#f0f2f7);
  border-color:rgba(0,0,0,.08);}
.tf-grid .tf-item:hover{border-color:rgba(77,159,255,.4);background:rgba(77,159,255,.07);}
.tf-grid .tf-row3{flex-direction:column;gap:4px;}
.tf-tag{font-size:11px;font-weight:700;padding:3px 9px;border-radius:99px;flex-shrink:0;width:38px;text-align:center}
.tf-tag.buy{background:rgba(77,159,255,.15);color:var(--blue)}
.tf-tag.sell{background:rgba(255,201,71,.15);color:#ffc947}
.tf-sym{font-weight:600;color:var(--text);font-size:15px;flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.tf-sector{font-size:10px;color:var(--blue);opacity:.7;margin-left:6px}
.tf-char{font-size:12px;color:var(--dim)}
.tf-price{font-family:'JetBrains Mono',monospace;font-size:14px;font-weight:700;color:var(--text)}
.tf-time{font-size:12px;color:var(--dim);flex-shrink:0}
.vt-btn{padding:5px 12px;border:none;background:transparent;color:var(--dim);
  font-size:12px;border-radius:5px;cursor:pointer;transition:all .2s;font-family:inherit;
  display:inline-flex;align-items:center;gap:5px}
.vt-btn.active{background:var(--blue);color:#fff}
.vt-btn:not(.active):hover{color:var(--text)}
.vt-ic{width:14px;height:14px;flex-shrink:0}

/* 列设置面板 */
#column-picker label{display:flex;align-items:center;gap:5px;font-size:12px;
  color:var(--text);cursor:pointer;white-space:nowrap}
#column-picker input[type=checkbox]{accent-color:var(--blue);cursor:pointer}

/* 滚动区域内的"回到顶部"悬浮按钮：定位在非滚动的外层容器上，
   视觉上钉在面板右下角，不随内部滚动条移动 */
.scroll-top-btn{position:absolute;right:16px;bottom:16px;width:38px;height:38px;
  border-radius:50%;background:var(--blue);color:#fff;border:none;cursor:pointer;
  display:flex;align-items:center;justify-content:center;font-size:16px;font-weight:700;
  box-shadow:0 4px 14px rgba(0,0,0,.25);z-index:20;opacity:0;pointer-events:none;
  transform:translateY(8px);transition:opacity .2s,transform .2s;}
.scroll-top-btn.show{opacity:.92;pointer-events:auto;transform:translateY(0);}
.scroll-top-btn:hover{opacity:1;}

/* 整页「回到顶部」悬浮按钮（和上面面板内部的 .scroll-top-btn 不同：那个只管内部滚动区域，这个管整个页面）。
   z-index 刻意压在 90：不要盖住顶栏下拉菜单（它们在顶栏的层叠上下文里，顶栏是 z100）和各种弹窗（z200+） */
.page-top-btn{position:fixed;right:16px;bottom:calc(20px + env(safe-area-inset-bottom,0px));
  width:44px;height:44px;border-radius:50%;border:none;cursor:pointer;padding:0;
  background:var(--blue);color:#fff;display:flex;align-items:center;justify-content:center;
  box-shadow:0 6px 18px rgba(0,0,0,.30);z-index:90;
  opacity:0;pointer-events:none;visibility:hidden;transform:translateY(12px) scale(.9);
  transition:opacity .2s,transform .2s,visibility 0s linear .2s;
  -webkit-tap-highlight-color:transparent;}
.page-top-btn.show{opacity:.95;pointer-events:auto;visibility:visible;transform:none;
  transition:opacity .2s,transform .2s,visibility 0s;}
.page-top-btn:hover{opacity:1;}
.page-top-btn:active{transform:scale(.94);}
.page-top-btn svg{width:20px;height:20px;}
@media (prefers-reduced-motion:reduce){ .page-top-btn,.page-top-btn.show{transition:none;} }

/* 标的总览表格 */
#sym-table{width:100%;border-collapse:collapse;font-size:12px}
#sym-table thead th{padding:10px 14px;text-align:left;background:rgba(255,255,255,.03);
  color:var(--dim);font-weight:500;white-space:nowrap;border-bottom:1px solid var(--border);
  cursor:pointer;user-select:none;transition:color .15s}
#sym-table thead th:hover{color:var(--text)}
#sym-table thead th.sorted{color:var(--blue)}
#sym-table thead th .sort-arrow{font-size:9px;margin-left:3px;opacity:.6}
#sym-table tbody tr{border-bottom:1px solid rgba(255,255,255,.04);cursor:pointer;transition:background .15s}
#sym-table tbody tr:hover{background:rgba(77,159,255,.06)}
#sym-table tbody tr.row-holding{background:rgba(0,229,160,.03)}
#sym-table tbody td{padding:10px 14px;white-space:nowrap}
#sym-table .cell-sym{max-width:160px;overflow:hidden}
#sym-table .cell-sector{font-size:10px;color:var(--blue);opacity:.8;margin-left:6px}
.tbl-badge{display:inline-block;padding:2px 8px;border-radius:99px;font-size:10px;font-weight:600}
.tbl-badge.hold{background:rgba(0,229,160,.13);color:var(--green)}
.tbl-badge.empty{background:rgba(255,255,255,.05);color:var(--dim)}
#sym-table-wrap{max-height:850px;width:100%;overflow-y:auto;overflow-x:auto;border-radius:0 0 18px 18px;
  overscroll-behavior-x:contain;touch-action:pan-x pan-y;-webkit-overflow-scrolling:touch;}
/* 手机宽屏下提示可左右滑动：右边缘一条渐变阴影，暗示右侧还有内容，避免用户不知道能滑动而以为内容被截断了 */
@media (max-width:1100px){
  #sym-table-wrap{position:relative;}
  #v-overview::after{content:'';position:absolute;top:60px;right:0;bottom:0;width:18px;
    background:linear-gradient(90deg,transparent,rgba(0,0,0,.10));pointer-events:none;
    border-radius:0 0 18px 0;}
  [data-theme="light"] #v-overview::after{background:linear-gradient(90deg,transparent,rgba(0,0,0,.06));}
}
.sym-loading{opacity:.45;pointer-events:none;transition:opacity .15s;}
#sym-table-wrap::-webkit-scrollbar-thumb{background:rgba(77,159,255,.3)}
#sym-table tbody tr.sel{background:rgba(77,159,255,.1) !important;box-shadow:inset 3px 0 0 var(--blue)}
.panel{background:linear-gradient(145deg,var(--bg2),var(--bg3));
  border:1px solid var(--border);border-radius:18px;overflow:visible;}
.ph{padding:15px 22px;border-bottom:1px solid var(--border);
  display:flex;align-items:center;justify-content:space-between;
  position:-webkit-sticky;position:sticky;top:calc(var(--hdr-h) + var(--tabs-h));z-index:90;background:var(--bg2);
  border-radius:18px 18px 0 0;}
.pt{font-size:13px;font-weight:600;color:var(--text);letter-spacing:.4px;}
.ps{font-size:12px;color:var(--dim);}

/* SYM GRID */
.sgrid{padding:14px;display:grid;grid-template-columns:repeat(auto-fill,minmax(188px,1fr));
  gap:9px;max-height:850px;overflow-y:auto;border-radius:0 0 18px 18px;}
.sgrid > *{min-width:0;}
.scard{background:rgba(255,255,255,.04);border:1px solid var(--border);
  border-radius:11px;padding:13px;cursor:pointer;transition:all .22s;}
.scard:hover{border-color:rgba(77,159,255,.35);background:rgba(77,159,255,.06);}
.scard.sel{border-color:var(--blue);background:rgba(77,159,255,.08);}
.scard.hold{border-color:rgba(0,229,160,.4);background:rgba(0,229,160,.04);}
.sc-hdr{display:flex;align-items:center;justify-content:space-between;margin-bottom:9px;}
.sc-nm{font-weight:700;font-size:13px;color:var(--text);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:128px;}
.sc-bdg{font-size:10px;padding:2px 8px;border-radius:99px;font-weight:600;}
.sc-bdg.h{background:rgba(0,229,160,.15);color:var(--green);}
.sc-bdg.e{background:rgba(255,255,255,.06);color:var(--dim);}
.sc-eq{font-family:'JetBrains Mono',monospace;font-size:19px;font-weight:700;margin-bottom:7px;}
.sc-eq.pos{color:var(--green);font-weight:700;}
.sc-eq.neg{color:var(--red);font-weight:700;}
.sc-meta{font-size:11px;color:var(--dim);display:flex;gap:10px;}
.sc-entry{font-size:11px;color:var(--blue);margin-top:7px;font-weight:500;}

/* RIGHT */
.rcol{display:flex;flex-direction:column;gap:12px;}
#eq-chart{width:100%;height:255px;}
.plist{padding:0;max-height:490px;overflow-y:auto;}
.pi{padding:13px 20px;border-bottom:1px solid var(--border);
  display:flex;align-items:center;gap:12px;transition:background .15s;}
.pi:hover{background:rgba(255,255,255,.025);}
.pi:last-child{border-bottom:none;}
.pi.sel-pi{background:rgba(77,159,255,.08);border-left:2px solid var(--blue);}
.pi-av{font-size:18px;width:28px;text-align:center;}
.pi-nm{font-weight:600;color:var(--text);font-size:13px;}
.pi-mt{font-size:11px;color:var(--dim);margin-top:2px;}
.pi-val{font-size:13px;font-weight:700;font-family:'JetBrains Mono',monospace;color:var(--blue);}
.pi-lbl{font-size:10px;color:var(--dim);}

/* CONTENT COLUMNS：总览（左，主体）+ 交易记录（右，窄栏） */
.content-cols{display:flex;align-items:flex-start;gap:16px;}
.content-cols-left{flex:1 1 0%;min-width:0;display:flex;flex-direction:column;gap:16px;}
.content-cols #v-trades{flex:0 0 27%;min-width:280px;max-width:400px;}

/* TRADES VIEW */
.tvw{margin-top:0;scroll-margin-top:calc(var(--hdr-h) + 16px);position:-webkit-sticky;position:sticky;top:calc(var(--hdr-h) + 16px);}

#v-overview{scroll-margin-top:calc(var(--hdr-h) + var(--tabs-h) + 16px);}
.tpanel{background:linear-gradient(145deg,var(--bg2),var(--bg3));
  border:1px solid var(--border);border-radius:18px;overflow:hidden;}
/* overflow:hidden 会让 .tpanel 变成"滚动容器"，里面的 sticky 元素就只会相对它吸，永远吸不到视口顶部；
   overflow:clip 同样裁切圆角，但不产生滚动容器，所以手机端买卖信号标题条才能吸顶。
   不支持 clip 的老浏览器保持 hidden（只是不吸顶，不会坏） */
@supports (overflow:clip){ .tpanel{overflow:clip;} }
@media (max-width:1100px){
  .content-cols{flex-direction:column;}
  /* 【已用真实 Chromium 复现并验证】手机/平板下美股·加密货币页顶部菜单不吸顶的根因：
     .content-cols 基础规则是 align-items:flex-start，这里改成纵向（column）后，flex-start 让子项的宽度
     不再“拉满容器”而是按内容大小收缩（fit-content）——fit-content 下限是内容的 min-content。.content-cols-left 里的
     统计卡片行（每张卡定宽152px、不换行）和标的总览表格（列多、单元格不换行）的 min-content 很大，把这个容器撑到
     约1100px宽，整个页面横向溢出、布局视口被撑大（390px屏实测 innerWidth=1147），内层的 overflow-x:auto
     统计卡片/表格因为容器已经足够宽而完全不再横向滚动，“独立横滑”形同虚设。切到“买卖信号”标签时
     .content-cols-left 被 display:none，页面宽度恢复正常，顶栏吸顶也就正常了——和现象完全吻合。
     修复：纵向布局下让子项拉满容器宽度（stretch + width:100%），溢出的内容就会在各自的 overflow-x:auto 容器里滚动。 */
  .content-cols{align-items:stretch;}
  .content-cols-left{width:100%;}
  .content-cols #v-trades{width:100%;max-width:none;position:static;}
  /* 之前只改了 width:100%，没清掉早之前为桌面两栏布局设的 max-width:400px——max-width 优先级比 width 高，
     只要屏幕比 400px 宽（平板、大屏手机），买卖信号面板就会被那条早就该失效的桌面规则重新卡回 400px宽，
     右边留一大块空白 */
  /* 折叠解决不了这个页面的长滚动问题——买卖信号本来就在最下面，折叠它对“先划过上面的长内容”
     无济于事。真正拦视线的是它上面那块标的总览表格（最高850px，内部又带自己的滚动条）。改用
     手机专属的标签切换代替上下堆叠：点一下就直接切页，不需要划过另一块。桌面端（>1100px）不受影响，
     两栏本来就是左右并列，这条标签栏默认 display:none */
  .mkt-mobile-tabs{display:flex !important;}
  /* 二级吸顶：顶栏(z100) → 标签条(z95) → 面板标题条(z90) 三层依次叠在顶部。
     标签条本身是个半透明分段按钮，外面包一层不透明的 .mkt-tabs-bar 当底，
     否则吸住时下面滚过去的内容会从按钮缝隙里透出来 */
  .mkt-tabs-bar{display:block;position:-webkit-sticky;position:sticky;top:var(--hdr-h);z-index:95;
    background:var(--bg);padding:8px 0 8px;margin-bottom:6px;border-bottom:1px solid var(--border);}
  /* 买卖信号的标题条（角色/类型/板块/搜索那一块）手机端也跟着吸顶，滚动买卖列表时随时能切筛选 */
  #v-trades .tph{position:-webkit-sticky;position:sticky;top:calc(var(--hdr-h) + var(--tabs-h));
    z-index:90;background:var(--bg2);border-radius:18px 18px 0 0;}
  #market-view-root.mtab-overview > #v-trades{display:none;}
  #market-view-root.mtab-trades > .content-cols-left{display:none;}
}
.tph{padding:14px 22px;border-bottom:1px solid var(--border);
  display:flex;align-items:center;gap:10px;flex-wrap:wrap;}
.tph .pt{margin-right:8px;}
.fsel{background:var(--bg4);border:1px solid var(--border);border-radius:7px;
  color:var(--text);padding:5px 10px;font-size:12px;cursor:pointer;
  font-family:inherit;outline:none;transition:border-color .2s;}
.fsel:hover,.fsel:focus{border-color:var(--blue);}
.tcnt{margin-left:auto;font-size:12px;color:var(--dim);}
table{width:100%;border-collapse:collapse;font-size:12px;}
thead th{padding:11px 16px;text-align:left;
  background:rgba(255,255,255,.03);color:var(--dim);
  font-weight:500;white-space:nowrap;border-bottom:1px solid var(--border);}
tbody tr:nth-child(odd) {background:var(--row-odd);}
tbody tr:nth-child(even){background:var(--row-even);}
tbody tr:hover{background:rgba(77,159,255,.07)!important;}
tbody td{padding:11px 16px;white-space:nowrap;border-bottom:1px solid rgba(255,255,255,.03);}
.bdg{display:inline-block;padding:3px 9px;border-radius:99px;font-size:11px;font-weight:600;}
.bdg-w{background:rgba(0,229,160,.13);color:var(--green);}
.bdg-l{background:rgba(255,77,109,.13);color:var(--red);}
.bdg-o{background:rgba(77,159,255,.13);color:var(--blue);}
.pp{color:var(--green);font-weight:700;background:rgba(0,229,160,.12);
  padding:2px 7px;border-radius:5px;display:inline-block;}
.pn{color:var(--red);font-weight:700;background:rgba(255,77,109,.12);
  padding:2px 7px;border-radius:5px;display:inline-block;}
[data-theme="light"] .pp{background:rgba(0,138,85,.12);}
[data-theme="light"] .pn{background:rgba(217,32,64,.12);}

/* DRAWER */
.ov{display:none;position:fixed;inset:0;z-index:200;
  background:rgba(0,0,0,.65);backdrop-filter:blur(6px);}
.ov.open{display:block;}
.drw{position:fixed;right:0;top:0;bottom:0;z-index:201;width:360px;
  background:var(--bg2);border-left:1px solid var(--border);
  display:flex;flex-direction:column;
  transform:translateX(100%);transition:transform .3s cubic-bezier(.4,0,.2,1);}
.ov.open .drw{transform:none;}
.drw-top{padding:20px 24px 14px;border-bottom:1px solid var(--border);flex-shrink:0;}
.drw-top h3{font-size:15px;font-weight:700;color:var(--text);margin-bottom:12px;}
.drw-close{position:absolute;top:18px;right:20px;background:none;border:none;
  color:var(--dim);font-size:20px;cursor:pointer;transition:color .2s;}
.drw-close:hover{color:var(--text);}
.drw-tabs{display:flex;gap:6px;margin-bottom:13px;}
.srch{position:relative;}
.srch input{width:100%;padding:9px 12px 9px 36px;background:var(--bg3);
  border:1px solid var(--border);border-radius:8px;color:var(--text);font-size:13px;
  transition:border-color .2s;font-family:inherit;}
.srch input:focus{outline:none;border-color:var(--blue);}
.srch::before{content:'🔍';position:absolute;left:11px;top:50%;transform:translateY(-50%);font-size:12px;}
.drw-body{display:flex;flex:1;overflow:hidden;}
.avail{flex:1;overflow-y:auto;padding:6px;}
.ai{display:flex;align-items:center;gap:8px;padding:8px 10px;
  border-radius:8px;transition:background .15s;}
.ai:hover{background:var(--bg3);}
.ai-sym{font-size:12px;font-weight:600;color:var(--text);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.ai-nm{font-size:11px;color:var(--dim);}
.ai-cat{font-size:10px;color:var(--dim);background:var(--bg3);
  padding:2px 7px;border-radius:5px;white-space:nowrap;flex-shrink:0;}
.addbtn{width:28px;height:28px;border-radius:7px;
  background:rgba(77,159,255,.15);border:none;color:var(--blue);
  font-size:17px;cursor:pointer;display:flex;align-items:center;
  justify-content:center;flex-shrink:0;transition:all .2s;}
.addbtn:hover{background:rgba(77,159,255,.3);}
.addbtn.done{background:rgba(0,229,160,.13);color:var(--green);cursor:default;}
.addedcol{width:158px;border-left:1px solid var(--border);overflow-y:auto;padding:8px;}
.addedh{font-size:11px;color:var(--dim);padding:4px 7px;margin-bottom:5px;}
.addrow{display:flex;align-items:center;gap:6px;
  background:var(--bg3);border-radius:7px;padding:7px 9px;margin-bottom:5px;}
.addnm{font-size:11px;color:var(--text);flex:1;overflow:hidden;
  text-overflow:ellipsis;white-space:nowrap;}
.delbtn{background:none;border:none;color:var(--dim);cursor:pointer;
  font-size:13px;transition:color .2s;}
.delbtn:hover{color:var(--red);}

.empty{text-align:center;padding:2px 8px;color:var(--dim);}
.empty-icon{font-size:34px;margin-bottom:8px;}

/* 标的详情弹窗里的两张表格（估值参考 / 历史买卖明细）之前没有横向滚动包裹，
   列比较多，在窄屏抽屉里会把整个弹窗撑宽甚至溢出；包一层横向滚动容器，
   宽屏下无感知，窄屏下变成表格自己横滑，不影响外层布局 */
.modal-tbl-scroll{overflow-x:auto;overscroll-behavior-x:contain;touch-action:pan-x pan-y;-webkit-overflow-scrolling:touch;}
::-webkit-scrollbar{width:11px;height:11px;}
::-webkit-scrollbar-track{background:transparent;}
::-webkit-scrollbar-thumb{background:var(--bg4);border-radius:6px;border:3px solid transparent;background-clip:padding-box;}
::-webkit-scrollbar-thumb:hover{background:var(--dim);background-clip:padding-box;}
*{scrollbar-width:auto;scrollbar-color:var(--bg4) transparent;}
.sgrid::-webkit-scrollbar-thumb{background:rgba(77,159,255,.4);background-clip:padding-box;}
.plist::-webkit-scrollbar-thumb{background:rgba(0,229,160,.4);background-clip:padding-box;}
#trade-feed::-webkit-scrollbar-thumb{background:rgba(77,159,255,.4);background-clip:padding-box;}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.35}}
.ld{animation:pulse 1.4s ease-in-out infinite;}

/* 登录弹窗 */
.login-mask{display:none;position:fixed;inset:0;z-index:500;
  background:rgba(0,0,0,.75);backdrop-filter:blur(8px);
  align-items:center;justify-content:center;}
/* 弹窗内部可滚动区域滚到顶/底后不再把滚动"传导"给背后的页面
  （配合 JS 的 body 滚动锁，双保险防止滚轮穿透） */
.login-box, .detail-body, .drw-body, .drw-body > *{overscroll-behavior:contain;}
.login-mask.show{display:flex;}
.login-box{background:var(--bg2);border:1px solid var(--border);
  border-radius:18px;padding:36px 40px;width:360px;max-width:92vw;text-align:center;}
.login-box h2{font-size:18px;font-weight:700;color:var(--text);margin-bottom:8px;}
.login-box p{font-size:13px;color:var(--dim);margin-bottom:24px;}
.login-inp{width:100%;padding:11px 14px;background:var(--bg3);
  border:1px solid var(--border);border-radius:9px;color:var(--text);
  font-size:14px;font-family:inherit;outline:none;
  transition:border-color .2s;letter-spacing:2px;text-align:center;}
.login-inp:focus{border-color:var(--blue);}
.login-btn{width:100%;margin-top:14px;padding:11px;border-radius:9px;
  background:linear-gradient(135deg,#2563eb,#1d4ed8);border:none;
  color:white;font-size:14px;font-weight:600;cursor:pointer;
  font-family:inherit;transition:opacity .2s;}
.login-btn:hover{opacity:.88;}
.login-err{font-size:12px;color:var(--red);margin-top:10px;min-height:18px;}
.admin-dot{width:8px;height:8px;border-radius:50%;background:var(--green);
  box-shadow:0 0 6px var(--green);flex-shrink:0;}

/* EV计算器弹窗：输入量比较大，专门加个关闭按钮，不靠点遮罩误触关闭 */
#ev-mask .login-box{position:relative;}
.ev-close-btn{position:absolute;top:14px;right:16px;background:none;border:none;
  color:var(--dim);font-size:20px;line-height:1;cursor:pointer;padding:4px;
  transition:color .15s;}
.ev-close-btn:hover{color:var(--text);}

/* EV计算器：买入价/止损价/胜率的"恢复推荐值"小按钮 */
.ev-restore-btn{background:none;border:none;color:var(--blue);font-size:11px;
  cursor:pointer;padding:0;display:none;}
.ev-restore-btn:hover{text-decoration:underline;}

/* EV计算器通用组件：两个计算器（首页顶部弹窗 + 标的详情内嵌）共用，
   统一间距/分组/分隔线，避免每处都堆一遍内联style导致内容挤成一团 */
.evc-field{margin-bottom:15px;}
.evc-label-row{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:6px;}
.evc-label{font-size:12px;color:var(--dim);font-weight:500;}
.evc-hint{font-size:11px;color:var(--dim);opacity:.7;font-weight:400;margin-left:4px;}
.evc-note{font-size:11px;color:var(--dim);line-height:1.6;margin-top:6px;}
.evc-select{width:100%;padding:9px 12px;background:var(--bg3);border:1px solid var(--border);
  border-radius:8px;color:var(--text);font-size:13px;margin-bottom:8px;font-family:inherit;
  display:none;}
.evc-divider{height:1px;background:var(--border);margin:18px 0;}
.evc-result{margin-top:4px;background:var(--bg3);border-radius:10px;padding:14px 16px;
  font-size:13px;line-height:1.9;color:var(--text);}
.evc-result .evc-ev-line{margin-top:8px;padding-top:8px;border-top:1px solid var(--border);
  display:flex;align-items:baseline;justify-content:space-between;}
.evc-result .evc-ev-value{font-size:22px;font-weight:800;font-family:'JetBrains Mono',monospace;}

/* EV计算器专属强调色：让它在一堆普通面板/弹窗里更显眼，用 color-mix 基于
   --blue 自动适配亮/暗主题，不用为两套主题各写一份颜色
   （之前只有 6%/28% 的极淡色调，跟其他弹窗/面板放在一起区分度太弱，
   加重了色调、加了顶部强调条和外发光，让它一眼就能认出来是"这个功能"） */
.evc-panel-accent{
  background: color-mix(in srgb, var(--blue) 10%, var(--bg2));
  border: 1.5px solid color-mix(in srgb, var(--blue) 45%, var(--border));
  border-radius: 12px;
  padding: 10px 14px 12px;
  box-shadow: 0 4px 16px color-mix(in srgb, var(--blue) 14%, transparent);
}
.evc-panel-accent .ph{
  border-bottom-color: color-mix(in srgb, var(--blue) 24%, var(--border)) !important;
}
#ev-mask .login-box{
  background: color-mix(in srgb, var(--blue) 8%, var(--bg2));
  border: 1.5px solid color-mix(in srgb, var(--blue) 45%, var(--border));
  box-shadow: 0 12px 40px color-mix(in srgb, var(--blue) 22%, rgba(0,0,0,.35)),
              0 0 0 1px color-mix(in srgb, var(--blue) 12%, transparent) inset;
}
/* 弹窗顶部标题区域再叠一层更浓的强调色，和下面输入区拉开层次，
   一打开弹窗视线就先落在标题条上 */
#ev-mask .login-box > div:first-child{
  background: color-mix(in srgb, var(--blue) 10%, transparent);
  border-radius: 17px 17px 0 0;
  border-bottom: 1px solid color-mix(in srgb, var(--blue) 20%, var(--border));
}
#ev-mask .login-box h2{ font-size:19px; }

/* 悬浮提示图标：把原本常驻占地方的说明文字（比如胜率来源、样本数）收进一个
   小图标，鼠标移上去才展开，降低信息密度 */
.evc-info-ic{display:inline-flex;align-items:center;justify-content:center;
  width:14px;height:14px;border-radius:50%;background:var(--bg4);color:var(--dim);
  font-size:10px;font-style:normal;cursor:help;margin-left:4px;position:relative;
  vertical-align:middle;}
.evc-info-ic .evc-tooltip{display:none;position:absolute;left:50%;bottom:calc(100% + 6px);
  transform:translateX(-50%);width:240px;background:var(--bg4);color:var(--text);
  font-size:11px;line-height:1.6;font-weight:400;padding:8px 10px;border-radius:7px;
  border:1px solid var(--border);box-shadow:0 6px 18px rgba(0,0,0,.3);z-index:50;
  text-align:left;white-space:normal;}
.evc-info-ic:hover .evc-tooltip{display:block;}

/* 收起/展开按钮：之前用纯文字箭头太小不好点，改成带圆形底色的按钮，
   尺寸和点击热区都明显加大 */
.evc-collapse-caret{display:inline-flex;align-items:center;justify-content:center;
  width:26px;height:26px;border-radius:50%;background:var(--bg3);
  border:1px solid var(--border);color:var(--text);font-size:14px;
  transition:transform .2s, background .15s;flex-shrink:0;}
.ph:hover .evc-collapse-caret{background:var(--bg4);}

/* 字段颜色标识：买入价/止盈价/止损价/胜率各自一个颜色圆点+输入框边框微调色，
   让用户不用逐个读标签文字，扫一眼颜色就能分清哪个字段是哪个含义 */
.evc-label.evc-dot::before{content:'';display:inline-block;width:7px;height:7px;
  border-radius:50%;margin-right:6px;vertical-align:middle;}
.evc-label.evc-dot-buy::before{background:var(--blue);}
.evc-label.evc-dot-tp::before{background:var(--green);}
.evc-label.evc-dot-sl::before{background:var(--red);}
.evc-label.evc-dot-wr::before{background:var(--purple);}
.evc-inp-tp{border-color:color-mix(in srgb, var(--green) 32%, var(--border)) !important;}
.evc-inp-sl{border-color:color-mix(in srgb, var(--red) 32%, var(--border)) !important;}
.evc-inp-tp:focus{border-color:var(--green) !important;}
.evc-inp-sl:focus{border-color:var(--red) !important;}

/* ══════════════════════════════════════════════════════════════
   移动端适配（≤640px 手机宽度）
   整体思路：这个项目原来完全没有针对手机窄屏做过优化，只有一个处理
   两栏堆叠的 1100px 断点。下面是补的第二层断点，覆盖顶栏、间距、
   弹窗/抽屉宽度、触控热区几类问题。不是逐组件精修，是把"会溢出/
   点不中"的硬伤先堵上。
   ══════════════════════════════════════════════════════════════ */
@media (max-width:640px){
  /* 顶栏：logo沿用类固定字号无法再缩，其余用flex-wrap分成三行——
     第一行 logo+联系我们/管理下拉，第二行市场切换，第三行功能按钮组，
     避免原来挤在一行导致的横向溢出 */
  header{flex-wrap:wrap;height:auto;padding:10px 14px;gap:8px 0;row-gap:8px;}
  .logo{font-size:15px;order:1;}
  header > div[style*="margin-left:auto"]{order:2;margin-left:auto !important;gap:6px !important;}
  /* 之前 #market-toggle 只设了 width:100%，内部4个 vt-btn（每日推荐/美股/加密货币/
     K线图）没有 flex-wrap，合计宽度远超手机屏宽，会把整个页面撑出横向
     滚动条——这是窄屏下最明显的一处硬伤。可滑动本身已改成全局生效（见上面），这里只管
     手机断点下的行内位置/宽度 */
  #market-toggle{order:3;width:100%;margin-left:0 !important;}
  .hdr-nav{order:4;width:100%;margin-left:0 !important;flex-wrap:wrap;gap:6px !important;}
  .hdr-nav button{padding:7px 12px !important;font-size:12px !important;}

  /* 独立看盘页（K线图 tab）：230px固定侧栏 + flex:1图表，这一块不在
     .content-cols 的 1100px 断点管辖范围内（那个断点管的是另一个id），窄屏下
     侧栏会把图表区挤到几乎不可用的宽度，改成上下堆叠；图表高度也从写死的
     600px 降到 360px，避免配合上面的标签行后还要多滚一屏才能看全 */
  #v-chart .content-cols{flex-direction:column;}
  #v-chart .content-cols > .panel:first-child{width:100% !important;}
  #lw-chart-container{height:360px !important;}

  /* 主内容区：桌面端 32px 左右留白在手机上纯粹浪费宽度 */
  .main{padding:14px 12px;}
  .chars-row{
    display:flex;flex-wrap:nowrap;overflow-x:auto;gap:10px;padding-bottom:2px;
    overscroll-behavior-x:contain;touch-action:pan-x;-webkit-overflow-scrolling:touch;
    scrollbar-width:none;}
  .chars-row::-webkit-scrollbar{display:none;}
  .chars-row > *{flex:0 0 152px;width:152px;}

  /* 角色卡片本身也同步缩小：内边距/字号/头像都按比例收窄，配合上面的窄宽卡片，
     不然内容撑破轨道又会重新溢出 */
  .ccard{padding:9px 10px;}
  .cc-av{width:22px;height:22px;font-size:12px;border-radius:6px;}
  .cc-nm{font-size:11px;}
  .cc-tf{font-size:8px;}
  .cc-eq{font-size:14px;}
  .cc-lbl{font-size:8px;}
  .csi{padding:3px 5px;}
  .csl{font-size:8px;}
  .csv{font-size:10px;padding:0 4px;}

  /* 角色卡片内 4 个统计格在窄屏上挤在一起数字会截断，改两列两行 */
  .cc-stats{grid-template-columns:repeat(2,1fr);}

  /* 期望值计算器弹窗：内边距按比例收紧，避免标题区/输入区占太多屏幕宽度 */
  #ev-mask .login-box > div:first-child{padding:20px 18px 4px !important;}
  #ev-mask .login-box > div:last-child{padding:8px 18px 24px !important;}

  /* 详情弹窗内嵌 EV 计算器：买入/止盈/止损/胜率原本 2x2 网格在窄屏输入框
     会被压得很窄，改单列纵向排列，每个输入框都有完整宽度好点按 */
  #dev-ev-body > div[style*="grid-template-columns:1fr 1fr"]{grid-template-columns:1fr !important;}

  /* 管理标的 / 策略精选抽屉原本固定 360px，比很多手机屏幕（如 iPhone SE
     375px 算上边距后）还宽，会被裁切；改成占满屏幕宽度的全屏抽屉，
     符合移动端"抽屉即全屏"的常见模式 */
  #ov .drw, #portfolio-ov .drw{width:100vw;}

  /* 触控热区：标签页/状态筛选/下拉菜单项这几类小按钮桌面端够用，
     手机上偏小，统一加大内边距和最小高度，降低点错概率 */
  .st-btn, .vt-btn{padding:7px 13px;min-height:32px;}
  .hdr-dropdown-item{padding:11px 12px;font-size:14px;}
  .hdr-dropdown-menu{min-width:200px;}
  #sector-filter, #sym-search, #trade-search, .fsel{min-height:34px;}

  /* 手机端两个标题筛选条（标的总览 / 买卖信号）吸顶时，筛选控件必须全部直接可见，不能要求用户左右滑动才能找到
     ——所以保持自动换行（之前试过改成单行横向滑动，参数被藏在屏幕右侧，用户反馈不好用，已撤回）。
     为了少占吸顶高度，用 display:contents 把里面那层分行用的 div “拆掉”，标题和所有控件变成同一层
     flex 子项一起自动排版，不再为每组控件单独占一行，再把内边距、间距收紧一点 */
  #v-overview .ph, #v-trades .tph{padding:10px 12px !important;gap:6px 8px !important;justify-content:flex-start !important;}
  #v-overview .ph > div, #v-trades .tph > div{display:contents !important;}
  #v-overview .ph .pt, #v-trades .tph .pt{margin-right:2px;}
}

/* 更窄的屏幕（≤380px，如 iPhone SE/mini）再收一档 */
@media (max-width:380px){
  .logo{font-size:13px;}
  .cc-stats{grid-template-columns:repeat(2,1fr);gap:5px;}
  .csl{font-size:8px;}
  .csv{font-size:11px;}
}

/* ── 每日：推荐标的卡片 ─────────────────────────────────────── */
.reco-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(320px,1fr));gap:14px;}
.reco-grid > *{min-width:0;}
.reco-card{background:rgba(255,255,255,.04);border:1px solid var(--border);border-radius:12px;
  padding:14px;display:flex;flex-direction:column;gap:8px;cursor:pointer;transition:border-color .15s;}
.reco-card:hover{border-color:rgba(77,159,255,.4);}
[data-theme="light"] .reco-card{background:linear-gradient(145deg,#fff,#f0f2f7);border-color:rgba(0,0,0,0.08);}
.reco-card.closed{opacity:.62;}
.reco-card-top{display:flex;align-items:flex-start;justify-content:space-between;gap:10px;}
.reco-card-sym{min-width:0;}
.reco-card-name{font-weight:700;font-size:14px;color:var(--text);display:block;}
.reco-card-sub{font-size:11px;color:var(--dim);}
.reco-card-pct{font-family:'JetBrains Mono',monospace;font-size:20px;font-weight:800;
  flex-shrink:0;padding:3px 10px;border-radius:8px;}
.reco-card-pct.pos{color:var(--green);background:rgba(0,229,160,.13);}
.reco-card-pct.neg{color:var(--red);background:rgba(255,77,109,.13);}
.reco-card-prices{display:flex;flex-wrap:wrap;gap:10px;font-size:11px;color:var(--dim);}
.reco-card-prices b{color:var(--text);font-family:'JetBrains Mono',monospace;font-weight:600;}
.reco-mkt-tag{display:inline-flex;align-items:center;justify-content:center;width:18px;height:18px;
  border-radius:5px;background:rgba(77,159,255,.15);color:var(--blue);font-size:10px;font-weight:700;
  flex-shrink:0;}
.reco-card-sym{display:flex;align-items:center;gap:6px;flex-wrap:wrap;min-width:0;}
.reco-stat-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:8px;}
.reco-stat{background:rgba(255,255,255,.04);border-radius:8px;padding:8px 10px;min-width:0;}
[data-theme="light"] .reco-stat{background:rgba(0,0,0,.03);}
.reco-stat-label{font-size:10px;color:var(--dim);margin-bottom:3px;white-space:nowrap;}
.reco-stat-value{font-size:14px;font-weight:700;color:var(--text);font-family:'JetBrains Mono',monospace;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.reco-closed-tag{font-size:11px;color:var(--dim);}
@media (max-width:480px){ .reco-grid{grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:8px;} }

/* 推荐日期/买入价/止盈价/止损价/推荐时期望值：这张卡最重要的几个基准数字，
   单独一组、放大加粗，用强调色边框和大号等宽字体和其余辅助信息（现价/胜率）
   拉开视觉层级 */
.reco-hero-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:9px;}
.reco-hero-box{background:rgba(77,159,255,.09);border:1px solid rgba(77,159,255,.25);
  border-radius:9px;padding:9px 11px;min-width:0;}
[data-theme="light"] .reco-hero-box{background:rgba(21,101,192,.06);border-color:rgba(21,101,192,.2);}
.reco-hero-box.wide{grid-column:1/-1;}
.reco-hero-box.tp{background:rgba(0,229,160,.09);border-color:rgba(0,229,160,.28);}
[data-theme="light"] .reco-hero-box.tp{background:rgba(0,150,105,.07);border-color:rgba(0,150,105,.22);}
.reco-hero-box.tp .reco-hero-label{color:var(--green);}
.reco-hero-box.sl{background:rgba(255,77,109,.08);border-color:rgba(255,77,109,.25);}
[data-theme="light"] .reco-hero-box.sl{background:rgba(200,40,60,.06);border-color:rgba(200,40,60,.2);}
.reco-hero-box.sl .reco-hero-label{color:var(--red);}
.reco-hero-label{font-size:11px;color:var(--blue);font-weight:600;margin-bottom:3px;white-space:nowrap;}
.reco-hero-value{font-size:18px;font-weight:800;color:var(--text);font-family:'JetBrains Mono',monospace;
  letter-spacing:.2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.reco-hero-value.pos{color:var(--green);}
.reco-hero-value.neg{color:var(--red);}

/* 当日期望值：整张卡里视觉权重最高的元素，随最新价每天变——用满宽色块+大字号
   和上面那组"推荐时"的静态基准数字拉开差距，一眼能分清"当时怎么样"和"现在怎么样" */
.reco-ev-banner{display:flex;align-items:center;justify-content:space-between;
  padding:10px 14px;border-radius:10px;font-weight:800;}
.reco-ev-banner.pos{background:rgba(0,229,160,.16);box-shadow:inset 0 0 0 1px rgba(0,229,160,.4);}
.reco-ev-banner.neg{background:rgba(255,77,109,.14);box-shadow:inset 0 0 0 1px rgba(255,77,109,.4);}
.reco-ev-banner:not(.pos):not(.neg){background:rgba(255,255,255,.05);box-shadow:inset 0 0 0 1px var(--border);}
.reco-ev-banner-label{font-size:12px;color:var(--text);opacity:.85;}
.reco-ev-banner-value{font-size:22px;font-family:'JetBrains Mono',monospace;}
.reco-ev-banner.pos .reco-ev-banner-value{color:var(--green);}
.reco-ev-banner.neg .reco-ev-banner-value{color:var(--red);}

.reco-mini-row{display:flex;flex-wrap:wrap;gap:6px 16px;font-size:11px;color:var(--dim);
  padding:0 2px;}
.reco-mini-row b{color:var(--text);font-family:'JetBrains Mono',monospace;font-weight:600;}

/* 推荐标的按推荐日期分组，同一天推荐的放一组，不同日期之间加分隔线，
   一眼能看出"这批是同一天推荐的"还是"跨了好几天陆续加的" */
.reco-date-group{margin-bottom:18px;}
.reco-date-group:last-child{margin-bottom:0;}
.reco-date-hdr{display:flex;align-items:center;gap:10px;margin-bottom:10px;}
.reco-date-line{flex:1;height:1px;background:var(--border);}
.reco-date-label{font-size:12px;font-weight:700;color:var(--dim);white-space:nowrap;
  letter-spacing:.3px;}
.reco-card-reason{font-size:12px;line-height:1.6;color:var(--text);background:rgba(255,255,255,.03);
  border-radius:8px;padding:8px 10px;white-space:pre-wrap;word-break:break-word;}
[data-theme="light"] .reco-card-reason{background:rgba(0,0,0,.03);}
.reco-card-actions{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-top:2px;}
.reco-card-link{background:none;border:none;color:var(--blue);font-size:11px;cursor:pointer;
  padding:0;font-family:inherit;}
.reco-card-close-btn{background:none;border:1px solid var(--border);border-radius:6px;
  color:var(--dim);padding:4px 10px;font-size:11px;cursor:pointer;font-family:inherit;}
.reco-card-close-btn:hover{color:var(--red);border-color:var(--red);}
.reco-card-del-btn{background:none;border:1px solid var(--border);border-radius:6px;
  color:var(--dim);padding:4px 10px;font-size:11px;cursor:pointer;font-family:inherit;}
.reco-card-del-btn:hover{color:#fff;background:var(--red);border-color:var(--red);}
.reco-card-edit-btn{background:none;border:1px solid var(--border);border-radius:6px;
  color:var(--dim);padding:4px 10px;font-size:11px;cursor:pointer;font-family:inherit;}
.reco-card-edit-btn:hover{color:var(--blue);border-color:var(--blue);}

/* 手机窄屏：卡片不需要顶满屏幕宽度——上面已经把 .reco-grid 改成 2 列，这里同步收窄卡片内部的
   内边距/字号，不然内容会挤得比卡片本身宽，重新撞破轨道向右溢出。推荐理由比较长，用
   -webkit-line-clamp 券到 2 行，剩下的文字点卡片本身进详情页看 */
@media (max-width:480px){
  .reco-card{padding:9px;gap:5px;}
  .reco-card-name{font-size:12px;}
  .reco-card-sub{font-size:9px;}
  .reco-card-pct{font-size:13px;padding:2px 6px;}
  .reco-mkt-tag{width:15px;height:15px;font-size:9px;}
  .reco-hero-grid{gap:5px;}
  .reco-hero-box{padding:5px 6px;}
  .reco-hero-label{font-size:8px;margin-bottom:1px;}
  .reco-hero-value{font-size:11px;}
  .reco-ev-banner{padding:6px 8px;}
  .reco-ev-banner-label{font-size:8px;}
  .reco-ev-banner-value{font-size:13px;}
  .reco-mini-row{font-size:8px;gap:3px 8px;}
  .reco-stat-grid{gap:5px;}
  .reco-stat{padding:5px 6px;}
  .reco-stat-label{font-size:8px;}
  .reco-stat-value{font-size:10px;}
  .reco-card-reason{font-size:10px;padding:5px 6px;line-height:1.4;
    display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;}
  .reco-card-actions{gap:4px;flex-wrap:wrap;}
  .reco-card-link,.reco-card-close-btn,.reco-card-del-btn,.reco-card-edit-btn{
    font-size:9px;padding:3px 6px;}
}

/* K线图加载中的提示层：盖在图表容器上方，带旋转动画，避免空白图表区让用户以为页面卡住了 */
.lw-chart-wrap{position:relative;}
.lw-loading-overlay{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  gap:8px;background:var(--bg2);z-index:5;pointer-events:none;
  font-size:13px;color:var(--dim);opacity:0;transition:opacity .15s;border-radius:0 0 18px 18px;}
.lw-loading-overlay.show{opacity:1;}
.lw-loading-spin{width:16px;height:16px;border-radius:50%;
  border:2px solid var(--border);border-top-color:var(--blue);
  animation:lw-spin .8s linear infinite;flex-shrink:0;}
@keyframes lw-spin{to{transform:rotate(360deg)}}

/* ══ 手机端布局精简·第 1 步（2026-10）═══════════════════════════════════
   目标：把手机上被固定栏占掉的屏幕还给内容和 K 线。只在 ≤640px 生效，桌面端不受影响。
   想整体撤销：删掉从这条注释到本 @media 块结束的整块（含上面那条 .m-only）；index.html 里的 .m-hide/.m-only
   标记在桌面端本来就没有任何效果，可以留着。
   注意：header 带 data-theme="light"（顶栏始终是亮色变量），而市场切换条 #market-toggle 在 header 里，
   所以搜到底栏后要自己把暗色变量补回去，否则暗色主题下底栏会是一条白底。 */
.m-only{display:none;}
@media (max-width:640px){
  .m-hide{display:none !important;}
  .hdr-dropdown-item.m-only{display:flex;}
  .hdr-dropdown-divider.m-only{display:block;}

  /* 1. 顶栏收成一行：logo + 🧮 + 📮▾ + ⚙️▾。原来每行一组共 3 行（约 110-130px），现在约 48px。
     去掉 backdrop-filter：它会让 header 成为 position:fixed 子元素的定位基准，底栏就被锁在顶栏里了。
     去掉模糊后背景必须改成完全不透明（原来是 92% 白 + 16px 模糊，不模糊的话滚过去的列表文字
     会像鬼影一样清晰地透出来，渲染实测确认过）；header 自带 light 变量，--bg2 就是白色，和原来观感一致。空间不够时会自动换行，不会溢出。 */
  header{backdrop-filter:none;-webkit-backdrop-filter:none;background:var(--bg2);padding:8px 10px;gap:0 6px;row-gap:6px;}
  .logo{font-size:14px;letter-spacing:0;}   /* 原 letter-spacing:1px 在手机上白白多占 ~15px；下面几处内边距也收紧，实测 340px 及以上保持一行，320px 自动换行 */
  .hdr-nav{order:2;width:auto !important;margin-left:auto !important;flex-wrap:nowrap;gap:0 !important;}
  .hdr-nav .hdr-link, .hdr-nav #theme-toggle{display:none !important;}   /* 已收进「📮」菜单 */
  .hdr-nav button{padding:6px 8px !important;}
  header > div[style*="margin-left:auto"]{margin-left:0 !important;gap:6px !important;}
  .hdr-tool{padding:6px 8px;}

  /* 2. 市场切换（每日推荐/美股/加密货币/K线图）变成底部 Tab 栏：拇指够得着，不占顶部。
     仍然是同一组按钮，点击事件和 .active 高亮都由 app.js 维护，这里只改样式，不重复写一套。 */
  #market-toggle{
    position:fixed !important;left:0;right:0;bottom:0;top:auto;z-index:100;
    width:auto !important;margin:0 !important;gap:0;padding:0 0 env(safe-area-inset-bottom,0px);
    border-radius:0;background:var(--bg2);border-top:1px solid var(--border);
    box-shadow:0 -4px 14px rgba(0,0,0,.12);
    overflow:visible;touch-action:manipulation;}
  #market-toggle .vt-btn{flex:1 1 0;min-width:0;flex-direction:column;justify-content:center;
    gap:3px;min-height:54px;padding:6px 2px;border-radius:0;font-size:11px;white-space:nowrap;}
  #market-toggle .vt-ic{width:20px;height:20px;}
  #market-toggle .vt-btn.active{background:transparent;color:var(--blue);box-shadow:inset 0 2px 0 var(--blue);}
  html:not([data-theme="light"]) #market-toggle{
    --bg:#0a0f1e;--bg2:#0f1729;--bg3:#151e33;--bg4:#1a2540;
    --border:rgba(255,255,255,0.08);--text:#d0daf0;--dim:#5a6a85;--blue:#4d9fff;}

  /* 3. 给底栏让位：页面底部留白、「回到顶部」按钮和 PWA 提示条抬高，不被底栏盖住 */
  body{padding-bottom:calc(58px + env(safe-area-inset-bottom,0px));}
  .page-top-btn{bottom:calc(72px + env(safe-area-inset-bottom,0px));}
  body .pwa-bar.pwa-bottom{bottom:calc(70px + env(safe-area-inset-bottom,0px));}

  /* 4. K 线页（仍是上下堆叠，切屏式在第 2 步）：不吸顶；图高按屏高算，不再写死 360px；
     自选列表最高从 70vh 压到 38vh，少划一屏就能到图。
     用 svh（工具栏显示时的最小视口）而不是 dvh：地址栏收起/展开时 svh 不变，图表容器不会跟着抖动。
     第一条是不支持 svh 的旧浏览器的兜底值。 */
  #v-chart .ph{position:static;}
  #lw-chart-container{height:360px !important;height:clamp(300px,calc(100svh - 230px),560px) !important;}
  #chart-watchlist{max-height:38vh !important;max-height:38svh !important;}

  /* 5. 标的详情里的 EV 计算器：手机上不再整块吸顶（展开时能吃掉大半个屏幕），跟着内容滚动 */
  .dev-sticky-wrap{position:static;box-shadow:none;}
}
/* 最窄屏（≤380px）按原规则 logo 再缩一档，这里要把上面 .logo{14px} 覆盖回去 */
@media (max-width:380px){ .logo{font-size:13px;} }

/* ══ 手机端布局精简·第 2 步（2026-10）════════════════════════════════════════
   ① 总览 / 买卖信号的吸顶标题框：手机上默认只留「标题 + ▸ 筛选」一行，筛选控件点开才展开；
   ② 独立看盘页：进入就是 K 线图，顶部「‹ 标的 ▾ ›  🔍」切换标的，自选列表改成点标题弹出的底部面板。
   只在 ≤640px 生效，桌面端不受影响。交互逻辑见 static/mobile.js。
   想整体撤销：删掉从这条注释到本 @media 块结束的整块（含上面 .m-fold-btn 那几条默认隐藏规则）。 */
.m-fold-btn, .cw-mbar, .cw-sheet-mask, .cw-sheet-close{display:none;}
@media (max-width:640px){
  /* ① 折叠筛选。.ph/.tph 里的分行 div 已被 display:contents 拆平（见上面的手机断点），
     收起时直接把控件那一层 div 藏掉，标题和折叠按钮留在原位 */
  .m-fold-btn{display:inline-flex;align-items:center;gap:4px;margin-left:auto;flex-shrink:0;
    background:var(--bg3);border:1px solid var(--border);border-radius:7px;color:var(--text);
    padding:6px 11px;min-height:32px;font-size:12px;font-weight:600;font-family:inherit;
    cursor:pointer;white-space:nowrap;}
  .m-fold-btn.has-filter{color:var(--blue);border-color:var(--blue);}
  #v-overview .ph.m-collapsed > div{display:none !important;}
  #v-trades .tph.m-collapsed > div:nth-child(2){display:none !important;}
  #v-trades .tph.m-collapsed #trade-char-toggle{display:none !important;}

  /* ② 独立看盘页：左右两栏 → 「图表」+「底部面板（原来的自选列表）」。
     整页铺满屏幕宽度（抵消 .main 的左右 12px 留白），面板去掉边框圆角背景，图表更宽 */
  #v-chart{margin:-14px -12px 0;}
  /* #v-chart 的 .content-cols 自带内联样式 align-items:flex-start，会压过 CSS 里的 stretch——竖排时图表面板
     就按内容收缩，宽度不一定占满屏幕（渲染实测：390px 屏上图只有 346px 宽）。内联样式只能用 !important 压回去 */
  #v-chart .content-cols{gap:0;align-items:stretch !important;}
  #v-chart .content-cols > .panel:last-child{width:100%;}
  #v-chart .panel{border:none;border-radius:0;background:transparent;}

  /* 底部面板：复用原来的 #chart-watchlist-body（搜索框 + 分组列表 + 管理员按钮），不重写一套。
     面板坐在底部 Tab 栏的上方（bottom 抬高一个 Tab 栏的高度）：.main 自带 z-index:1 形成了独立层叠上下文，
     面板的 z-index 在里面再大也高不过顶栏/底栏（100），直接贴底会被底栏盖住最下面一截（渲染实测发现） */
  #v-chart .content-cols > .panel:first-child{
    position:fixed;left:0;right:0;bottom:calc(55px + env(safe-area-inset-bottom,0px));top:auto;
    z-index:160;width:100% !important;
    max-height:calc(78vh - 55px);max-height:calc(78svh - 55px);display:flex;flex-direction:column;
    background:var(--bg2);border:1px solid var(--border);border-bottom:none;
    border-radius:16px 16px 0 0;box-shadow:0 -10px 30px rgba(0,0,0,.3);
    transform:translateY(120%);visibility:hidden;
    transition:transform .25s ease,visibility 0s linear .25s;}
  #v-chart.sheet-open .content-cols > .panel:first-child{
    transform:none;visibility:visible;transition:transform .25s ease,visibility 0s;}
  #v-chart .content-cols > .panel:first-child > .ph{
    position:static;border-radius:16px 16px 0 0;padding:12px 14px;}
  #chart-watchlist-collapse-btn{display:none;}   /* 面板里不需要「收起」，关闭用右上角 ✕ */
  .cw-sheet-close{display:inline-flex;align-items:center;justify-content:center;width:32px;height:32px;
    border-radius:50%;background:var(--bg3);border:1px solid var(--border);color:var(--text);
    font-size:15px;line-height:1;cursor:pointer;padding:0;flex-shrink:0;}
  #chart-watchlist{max-height:calc(78vh - 205px) !important;max-height:calc(78svh - 205px) !important;
    overscroll-behavior:contain;}
  #v-chart.sheet-open .cw-sheet-mask{display:block;position:fixed;inset:0;z-index:155;
    background:rgba(0,0,0,.45);touch-action:none;}

  /* 图表区：顶部标的栏 → 周期条（单行横滑）→ 图 → 统计文字 → 说明。
     .ph 用 display:contents 拆平，里面的标题/周期按钮变成 .panel 的直接子项，再用 order 重排 */
  #v-chart .content-cols > .panel:last-child{display:flex;flex-direction:column;}
  #v-chart .content-cols > .panel:last-child > .ph{display:contents;}
  #v-chart .content-cols > .panel:last-child > *{order:3;}
  #v-chart .content-cols > .panel:last-child > .cw-mbar{
    order:0;display:flex;align-items:center;gap:2px;padding:6px 6px;
    background:var(--bg2);border-bottom:1px solid var(--border);}
  .cw-mnav, .cw-msearch{flex:0 0 44px;height:40px;background:none;border:none;color:var(--text);
    font-size:22px;line-height:1;cursor:pointer;font-family:inherit;border-radius:8px;
    -webkit-tap-highlight-color:transparent;}
  .cw-msearch{font-size:18px;}
  .cw-mnav:active, .cw-msearch:active, .cw-mtitle:active{background:var(--bg3);}
  .cw-mtitle{flex:1;min-width:0;height:40px;display:flex;align-items:center;justify-content:center;gap:6px;
    background:none;border:none;color:var(--text);font-size:17px;font-weight:700;font-family:inherit;
    cursor:pointer;border-radius:8px;}
  #cw-mtitle-text{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
  .cw-mcaret{font-size:11px;color:var(--dim);flex-shrink:0;}

  #v-chart .content-cols > .panel:last-child > .ph > #lw-chart-title{display:none;}
  #v-chart .content-cols > .panel:last-child > .ph > div:last-child{
    order:1;display:flex;align-items:center;gap:6px;margin:0 !important;padding:8px 10px;
    overflow-x:auto;scrollbar-width:none;border-bottom:1px solid var(--border);}
  #v-chart .content-cols > .panel:last-child > .ph > div:last-child::-webkit-scrollbar{display:none;}
  #lw-tf-switch{flex:none;}
  #lw-tf-switch button, #lw-log-toggle{padding:7px 13px !important;font-size:13px !important;
    border-radius:8px !important;flex:none;white-space:nowrap;}
  #v-chart .content-cols > .panel:last-child > #lw-chart-container{
    order:2;
    /* 图高按屏宽算（高宽比约 0.78，参考 AICoin 手机端），不跟屏高走：之前“占满屏幕”的做法高宽比达 1.5，K 线挺成细柱、观感变形。
       260 为窄屏保底，440 为大屏封顶（平板竖屏不至于过高） */
    height:clamp(260px,78vw,440px) !important;}
  #v-chart .content-cols > .panel:last-child > .ph > #lw-chart-sub{
    order:4;display:block;padding:6px 12px;font-size:11px;line-height:1.5;}
}

/* ══ 行情条（现价 / 涨跌幅 / 来源）：桌面和手机共用，显示在 K 线图上方。逻辑见 app.js renderChartTicker ═══════════════ */
.cw-tick{display:flex;align-items:baseline;flex-wrap:wrap;gap:4px 12px;padding:14px 22px 4px;}
.cw-tick-price{font-family:'JetBrains Mono',monospace;font-size:26px;font-weight:800;letter-spacing:-.5px;
  font-variant-numeric:tabular-nums;line-height:1.15;color:var(--text);}
.cw-tick-chg{font-size:14px;font-weight:700;font-variant-numeric:tabular-nums;color:var(--dim);cursor:help;}
.cw-tick-lbl{margin-left:6px;font-size:11px;font-weight:600;opacity:.7;}
.cw-tick-meta{margin-left:auto;font-size:12px;color:var(--dim);}
.cw-tick.up .cw-tick-price, .cw-tick.up .cw-tick-chg{color:var(--green);}
.cw-tick.down .cw-tick-price, .cw-tick.down .cw-tick-chg{color:var(--red);}
@media (max-width:640px){
  /* 手机上图表面板是 flex 竖排，用 order 重排：标的栏(0) → 行情条(0，DOM 里在标的栏后面) → 周期条(1) → 图(2) */
  #v-chart .content-cols > .panel:last-child > .cw-tick{order:0;padding:10px 14px 2px;}
  .cw-tick-price{font-size:28px;}
}

/* ── 骨架屏：切市场/切每日推荐/开详情弹窗时，用闪烁灰条占位替代空白或
   "加载中..."文字，让切换动作看起来是"立刻响应+内容还在补"而不是"卡住了" */
@keyframes skel-shimmer{0%{background-position:-200px 0}100%{background-position:calc(200px + 100%) 0}}
.skel{background:linear-gradient(90deg,rgba(255,255,255,.06) 25%,rgba(255,255,255,.13) 37%,rgba(255,255,255,.06) 63%);
  background-size:400px 100%;animation:skel-shimmer 1.3s ease-in-out infinite;border-radius:6px;}
[data-theme="light"] .skel{background:linear-gradient(90deg,rgba(0,0,0,.05) 25%,rgba(0,0,0,.10) 37%,rgba(0,0,0,.05) 63%);
  background-size:400px 100%;}
.skel-card{background:rgba(255,255,255,.03);border:1px solid var(--border);border-radius:12px;padding:14px;}
[data-theme="light"] .skel-card{background:rgba(0,0,0,.02);}
.skel-line{height:12px;margin-bottom:8px;}
.skel-line.w40{width:40%}.skel-line.w60{width:60%}.skel-line.w80{width:80%}.skel-line.w100{width:100%}
.skel-chart{height:100%;min-height:220px;width:100%;border-radius:10px;}
.skel-chip{height:26px;width:70px;border-radius:99px;}

/* ── 独立看盘页侧栏：搜索 + 分组 ────────────────────────────── */
.cw-search-wrap{position:relative;padding:8px 8px 4px;}
.cw-search{width:100%;padding:7px 28px 7px 10px;background:var(--bg3);border:1px solid var(--border);
  border-radius:7px;color:var(--text);font-size:12px;font-family:inherit;outline:none;transition:border-color .2s;}
.cw-search:focus{border-color:var(--blue);}
.cw-search-clear{position:absolute;right:14px;top:50%;transform:translateY(-50%);margin-top:2px;
  background:none;border:none;color:var(--dim);font-size:12px;cursor:pointer;padding:2px 4px;line-height:1;}
.cw-search-clear:hover{color:var(--text);}
/* 分组标题：必须一眼能和下面的交易对区分开——用色块底 + 左侧强调条 + 圆形展开箭头 + 彩色计数徽标，
   交易对条目则是透明底、缩进、带左侧引导线。颜色用 color-mix 基于 --blue 自动适配亮/暗两套主题 */
.cw-group-head{display:flex;align-items:center;gap:7px;padding:7px 9px;margin:10px 0 4px;border-radius:8px;
  cursor:pointer;user-select:none;color:var(--text);font-size:12px;font-weight:700;letter-spacing:.3px;
  background:color-mix(in srgb,var(--blue) 9%,var(--bg2));
  border:1px solid color-mix(in srgb,var(--blue) 22%,var(--border));
  border-left:3px solid var(--blue);transition:background .15s;}
.cw-group-head:first-child{margin-top:0;}
.cw-group-head:hover{background:color-mix(in srgb,var(--blue) 16%,var(--bg2));}
.cw-caret{width:16px;height:16px;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;
  font-size:9px;flex-shrink:0;background:color-mix(in srgb,var(--blue) 20%,transparent);color:var(--blue);}
.cw-group-name{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.cw-group-cnt{font-size:10px;font-weight:700;background:color-mix(in srgb,var(--blue) 18%,transparent);color:var(--blue);
  padding:1px 8px;border-radius:99px;flex-shrink:0;}
/* "未分组"不是真正的分组，用灰色系和真分组区分，避免误以为是一个叫"未分组"的分组 */
.cw-group-head.cw-group-none{background:var(--bg3);border-color:var(--border);border-left-color:var(--dim);color:var(--dim);}
.cw-group-head.cw-group-none:hover{background:var(--bg4);color:var(--text);}
.cw-group-none .cw-caret{background:var(--bg4);color:var(--dim);}
.cw-group-none .cw-group-cnt{background:var(--bg4);color:var(--dim);}
.cw-item{display:flex;align-items:center;gap:6px;padding:8px 10px;border-radius:8px;cursor:pointer;
  margin-bottom:3px;color:var(--text);transition:background .12s;}
.cw-item:hover{background:rgba(77,159,255,.10);}
.cw-item.cw-in-group{margin-left:10px;padding-left:12px;border-left:2px solid var(--border);border-radius:0 8px 8px 0;}
.cw-item.cw-in-group.active{border-left-color:var(--blue);}
.cw-item.active,.cw-item.active:hover{background:var(--blue);color:#fff;}
.cw-item.active .cw-src{background:rgba(255,255,255,.25);color:#fff;}
.cw-name{flex:1;min-width:0;font-size:13px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.cw-act{opacity:.6;font-size:12px;padding:2px 5px;border-radius:5px;flex-shrink:0;cursor:pointer;}
.cw-act:hover{opacity:1;background:rgba(127,127,127,.25);}
.cw-mark{background:rgba(255,201,71,.45);color:inherit;border-radius:3px;padding:0 1px;}
@media (max-width:640px){
  .cw-act{padding:6px 9px;font-size:14px;}   /* 触控热区加大，否则手指很难点中小图标 */
  .cw-search{font-size:14px;padding:9px 30px 9px 10px;}
}