/* ==========================================================================
   短线复盘看板 —— 样式
   配色与版式沿用「巴菲特的计算器 / 打开看板」的暗色红调设计语言
   ========================================================================== */
:root{
  --bg:#000000;--surface:#0a0a0a;--surface-2:#121212;--surface-3:#1b1b1b;
  --line:rgba(255,255,255,.10);--line-2:rgba(255,255,255,.18);
  --fg:#f5f5f5;--fg-2:#9a9a9a;--fg-3:#6a6a6a;
  --red:#e5382b;--red-hi:#ff4b3d;--red-dim:rgba(229,56,43,.15);
  --green:#1fa97a;--green-hi:#2fcb95;--green-dim:rgba(31,169,122,.14);
  --amber:#e0a03a;--amber-dim:rgba(224,160,58,.14);
  --blue:#4a8fe0;--blue-dim:rgba(74,143,224,.14);
  --fs-2xs:.6875rem;--fs-xs:.75rem;--fs-sm:.8125rem;--fs-md:.875rem;
  --fs-lg:1rem;--fs-xl:1.125rem;
  --r-sm:7px;--r-md:10px;--r-lg:14px;
  --maxw:1560px;--padx:28px;
}
html{font-size:100%;scroll-behavior:smooth}
@media (min-width:1900px){html{font-size:106%}}
@media (min-width:2400px){html{font-size:114%}}
@media (max-width:1024px){html{font-size:94%}}
*{box-sizing:border-box}
::selection{background:var(--red-dim)}
body{margin:0;background:var(--bg);color:var(--fg);min-height:100vh;
 font-size:var(--fs-md);line-height:1.6;
 font-family:-apple-system,BlinkMacSystemFont,"Segoe UI","PingFang SC","Microsoft YaHei",
 Roboto,"Helvetica Neue",sans-serif;
 -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;
 -webkit-text-size-adjust:100%}
.wrap{width:100%;max-width:var(--maxw);margin:0 auto;padding:0 var(--padx)}
.num{font-variant-numeric:tabular-nums;font-feature-settings:"tnum"}
a{color:inherit}

/* ---------- 顶部导航 ---------- */
.topnav{position:sticky;top:0;z-index:60;background:rgba(0,0,0,.88);
 border-bottom:1px solid var(--line);
 -webkit-backdrop-filter:saturate(1.2) blur(10px);backdrop-filter:saturate(1.2) blur(10px)}
.topnav .inner{display:flex;align-items:center;gap:22px;height:62px}
.brand{display:inline-flex;align-items:center;gap:9px;color:var(--fg);
 font-weight:650;font-size:.9375rem;text-decoration:none;letter-spacing:-.01em;flex:none}
.brand svg{width:19px;height:19px;color:var(--red)}
.brand em{font-style:normal;color:var(--fg-3);font-weight:400;font-size:var(--fs-xs);
 margin-left:4px;letter-spacing:0}
.navlinks{display:flex;gap:22px;margin-left:14px}
.navlinks a{color:var(--fg-2);font-size:.8125rem;text-decoration:none;transition:color .15s}
.navlinks a:hover{color:var(--fg)}
.navspacer{margin-left:auto}
@media (max-width:1100px){.navlinks{display:none}}

/* ---------- 控件 ---------- */
.ctrl{display:inline-flex;align-items:center;gap:8px}
select,input[type=date]{background:var(--surface-2);color:var(--fg);
 border:1px solid var(--line-2);border-radius:var(--r-sm);
 padding:7px 11px;font-size:var(--fs-sm);font-family:inherit;outline:none;
 transition:border-color .15s}
select:hover,input[type=date]:hover{border-color:rgba(255,255,255,.3)}
select:focus{border-color:var(--red)}
.btn{display:inline-flex;align-items:center;gap:8px;background:var(--red);color:#fff;
 font-size:.8125rem;font-weight:650;padding:8px 15px;border-radius:var(--r-sm);
 text-decoration:none;border:none;cursor:pointer;letter-spacing:.01em;
 transition:background .15s;font-family:inherit}
.btn:hover{background:var(--red-hi)}
.btn.ghost{background:var(--surface-2);color:var(--fg-2);border:1px solid var(--line-2)}
.btn.ghost:hover{background:var(--surface-3);color:var(--fg)}
.btn.ghost.on{background:var(--red-dim);color:var(--red-hi);border-color:rgba(229,56,43,.45)}
.btn svg{width:14px;height:14px;flex:none}
@keyframes spin{to{transform:rotate(360deg)}}

/* ---------- Hero / 概览 ---------- */
.hero{position:relative;border-bottom:1px solid var(--line);overflow:hidden}
.herodeco{position:absolute;inset:0;overflow:hidden;pointer-events:none}
.herodeco::after{content:"";position:absolute;top:-58%;right:-10%;width:760px;height:760px;
 background:radial-gradient(circle,rgba(229,56,43,.20),rgba(229,56,43,.04) 46%,transparent 66%)}
.herodeco::before{content:"";position:absolute;inset:0;opacity:.5;
 background-image:linear-gradient(rgba(255,255,255,.028) 1px,transparent 1px),
  linear-gradient(90deg,rgba(255,255,255,.028) 1px,transparent 1px);
 background-size:64px 64px;
 -webkit-mask-image:linear-gradient(105deg,transparent 38%,#000 88%);
 mask-image:linear-gradient(105deg,transparent 38%,#000 88%)}
.hero .inner{position:relative;z-index:1;padding:30px 0 8px}
.hero h1{margin:0;font-size:clamp(1.5rem,2.6vw,2.05rem);font-weight:800;
 line-height:1.2;letter-spacing:-.03em}
.hero h1 em{font-style:normal;color:var(--red)}
.hero .sub{margin:9px 0 0;color:var(--fg-2);font-size:var(--fs-sm)}
.hero .sub b{color:var(--fg);font-weight:600}
.tag{display:inline-flex;align-items:center;gap:6px;padding:3px 9px;border-radius:999px;
 font-size:var(--fs-2xs);border:1px solid var(--line-2);color:var(--fg-2);
 background:var(--surface-2)}
.tag.live{border-color:rgba(31,169,122,.4);color:var(--green-hi);background:var(--green-dim)}
.tag.stale{border-color:rgba(224,160,58,.4);color:var(--amber);background:var(--amber-dim)}

/* 概览指标网格 */
.stats{display:grid;grid-template-columns:repeat(6,1fr);gap:0;
 margin:22px 0 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.stats>div{padding:16px 18px 18px;border-right:1px solid var(--line)}
.stats>div:last-child{border-right:none}
.stats .k{font-size:var(--fs-2xs);color:var(--fg-3);letter-spacing:.02em;
 display:flex;align-items:center;gap:6px;white-space:nowrap}
.stats .v{font-size:clamp(1.35rem,1.9vw,1.7rem);font-weight:750;letter-spacing:-.03em;
 line-height:1.15;margin-top:6px}
.stats .v small{font-size:.5em;font-weight:600;color:var(--fg-2);margin-left:3px;
 letter-spacing:0}
.stats .d{font-size:var(--fs-2xs);color:var(--fg-3);margin-top:3px}
@media (max-width:1200px){.stats{grid-template-columns:repeat(3,1fr)}
 .stats>div:nth-child(3n){border-right:none}
 .stats>div:nth-child(n+4){border-top:1px solid var(--line)}}
@media (max-width:620px){.stats{grid-template-columns:repeat(2,1fr)}
 .stats>div{border-right:none;border-top:1px solid var(--line);padding:13px 12px 14px}
 .stats>div:nth-child(-n+2){border-top:none}}

/* ---------- 区块标题 ---------- */
.sechead{display:flex;align-items:center;gap:13px;margin:44px 0 18px;
 font-size:1.1875rem;font-weight:700;letter-spacing:-.022em;color:var(--fg);flex-wrap:wrap}
.sechead::before{content:"";width:4px;height:1.05em;background:var(--red);
 border-radius:2px;flex:none}
.sechead small{font-size:.8125rem;font-weight:400;color:var(--fg-3);
 letter-spacing:0;margin-left:2px}
.sechead .headctrl{margin-left:auto;display:flex;gap:8px;align-items:center}

/* ---------- 通用卡片 ---------- */
.card{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);
 overflow:hidden}
.card.pad{padding:16px 18px}
.grid{display:grid;gap:16px}
.g2{grid-template-columns:1fr 1fr}
.g3{grid-template-columns:repeat(3,1fr)}
@media (max-width:1100px){.g2,.g3{grid-template-columns:1fr}}

/* ---------- 情绪趋势图 ---------- */
.trend{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);
 padding:16px 18px 8px}
.trend svg{width:100%;height:auto;display:block;overflow:visible}
.legend{display:flex;gap:18px;flex-wrap:wrap;font-size:var(--fs-xs);color:var(--fg-2);
 margin:2px 0 10px}
.legend i{display:inline-block;width:9px;height:9px;border-radius:2px;margin-right:6px;
 vertical-align:middle}

/* ---------- 题材轮动 ---------- */
.themes{display:grid;grid-template-columns:repeat(2,1fr);gap:12px}
@media (max-width:900px){.themes{grid-template-columns:1fr}}
.theme{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-md);
 padding:13px 15px;cursor:pointer;transition:border-color .15s,background .15s;
 position:relative;overflow:hidden}
.theme:hover{border-color:rgba(229,56,43,.42);background:var(--surface-2)}
.theme .rank{position:absolute;right:12px;top:10px;font-size:1.5rem;font-weight:800;
 color:rgba(255,255,255,.06);letter-spacing:-.04em;line-height:1}
.theme .t1{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap}
.theme .name{font-size:var(--fs-lg);font-weight:700;letter-spacing:-.02em}
.theme .cnt{font-size:1.35rem;font-weight:800;color:var(--red-hi);letter-spacing:-.03em}
.theme .cnt small{font-size:.55em;color:var(--fg-3);font-weight:600;margin-left:2px}
.theme .bar{height:4px;border-radius:2px;background:rgba(255,255,255,.07);margin:10px 0 9px;
 overflow:hidden}
.theme .bar i{display:block;height:100%;background:linear-gradient(90deg,var(--red),var(--red-hi));
 border-radius:2px}
.theme .meta{display:flex;gap:14px;flex-wrap:wrap;font-size:var(--fs-2xs);color:var(--fg-2)}
.theme .meta b{color:var(--fg);font-weight:600}
/* 「详情」按钮那一行：靠右（和其它板块保持一致的观感） */
.theme .acts{margin-top:10px;display:flex;justify-content:flex-end;align-items:center;gap:8px}
.chip{display:inline-flex;align-items:center;gap:5px;padding:3px 8px;border-radius:6px;
 background:var(--surface-3);border:1px solid var(--line);font-size:var(--fs-2xs)}
.chip b{font-weight:600}
.chip .bd{color:var(--amber);font-weight:700}

/* ---------- 连板梯队 ---------- */
.ladder{display:flex;flex-direction:column;gap:12px}
.rung{display:grid;grid-template-columns:78px 1fr;gap:14px;align-items:start;
 background:var(--surface);border:1px solid var(--line);border-radius:var(--r-md);
 padding:12px 14px}
.rung .lbl{display:flex;flex-direction:column;gap:5px}
.rung .lbl b{font-size:1.05rem;font-weight:800;letter-spacing:-.02em;color:var(--red-hi)}
.rung .lbl span{font-size:var(--fs-2xs);color:var(--fg-3)}
/* 首板：弱化 */
.rung.k-first .lbl b{color:var(--fg-2)}
.rung.k-first{background:rgba(255,255,255,.012)}
/* 断续板：反包信号，用琥珀色突出 */
.rung.k-duan{border-color:rgba(224,160,58,.32);
 background:linear-gradient(90deg,rgba(224,160,58,.07),transparent 42%)}
.rung.k-duan .lbl b{color:var(--amber)}
/* 炸板：冲板失败，绿调弱化 */
.rung.k-broken{border-color:rgba(31,169,122,.28);
 background:linear-gradient(90deg,rgba(31,169,122,.06),transparent 42%)}
.rung.k-broken .lbl b{color:var(--green-hi)}
.rung .body{display:flex;flex-wrap:wrap;gap:7px}
.stk{display:inline-flex;align-items:center;gap:7px;padding:6px 10px;border-radius:8px;
 background:var(--surface-2);border:1px solid var(--line);font-size:var(--fs-sm);
 cursor:default;transition:border-color .15s,background .15s}
.stk:hover{border-color:rgba(229,56,43,.5);background:var(--surface-3)}
.stk .nm{font-weight:600}
.stk .ind{color:var(--fg-3);font-size:var(--fs-2xs)}
.stk .bd{color:var(--amber);font-weight:700;font-size:var(--fs-2xs)}
.stk .bd.duan{color:var(--amber);background:var(--amber-dim);padding:1px 5px;border-radius:4px}
.stk .bd.brk{color:var(--green-hi);background:var(--green-dim);padding:1px 5px;border-radius:4px}
.stk.hot{border-color:rgba(229,56,43,.38)}
.stk.yizi{background:linear-gradient(180deg,rgba(229,56,43,.14),rgba(229,56,43,.03));
 border-color:rgba(229,56,43,.34)}
.stk.broken{border-color:rgba(31,169,122,.22);background:rgba(31,169,122,.05)}
.stk.broken:hover{border-color:rgba(31,169,122,.5)}
@media (max-width:700px){.rung{grid-template-columns:1fr;gap:9px}}

/* ---------- 板块梯队 ---------- */
.sectors{display:grid;grid-template-columns:repeat(auto-fill,minmax(268px,1fr));gap:12px}
/* 卡片做成「等高 + 纵向撑开」：
   板块名字长短、有没有「炸板」这一项、成分股名字长短都会让内容高度不一样，
   如果按钮紧跟在内容后面，就会一行里高高低低很难看。
   flex 撑开后，把「详情」那一行用 margin-top:auto 钉在卡片底部 —— 所有卡片对齐。 */
.sector{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-md);
 padding:13px 15px;cursor:pointer;transition:border-color .15s,background .15s;
 display:flex;flex-direction:column;height:100%;min-height:132px}
.sector:hover{border-color:rgba(229,56,43,.42);background:var(--surface-2)}
.sector .h{display:flex;align-items:baseline;justify-content:space-between;gap:10px}
.sector .nm{font-size:var(--fs-lg);font-weight:700;letter-spacing:-.02em;
 white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sector .sc{font-size:var(--fs-xs);color:var(--fg-3);flex:none}
.sector .sc b{color:var(--amber);font-weight:700;font-size:var(--fs-sm)}
.sector .row{display:flex;gap:14px;flex-wrap:wrap;margin-top:9px;
 font-size:var(--fs-2xs);color:var(--fg-2)}
.sector .row b{color:var(--fg);font-weight:600}
.sector .peek{margin-top:9px;font-size:var(--fs-2xs);color:var(--fg-3);
 overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
/* 「详情」按钮那一行：靠右、钉在卡片底部（margin-top:auto 是关键） */
.sector .acts{margin-top:auto;padding-top:10px;display:flex;
 justify-content:flex-end;align-items:center;gap:8px}

/* ---------- 「详情」按钮 ---------- */
/* 原本这几个板块是「整块/整行都能点」，但没有任何视觉提示，用户不知道要点哪里。
   这里加一个明确的按钮（样式对齐长线看板里的个股「详情」小标）：
   平时红底白字很显眼，鼠标移上去再提亮一档。 */
.detail-chip{display:inline-flex;align-items:center;gap:4px;flex:none;
 padding:2px 9px;border-radius:6px;background:var(--red);color:#fff;
 border:1px solid var(--red);font-size:var(--fs-2xs);font-weight:600;
 white-space:nowrap;cursor:pointer;line-height:1.5;
 transition:background .15s,border-color .15s,box-shadow .15s}
.detail-chip::after{content:"→";font-size:.9em;opacity:.9}
.clickable:hover .detail-chip,.detail-chip:hover{
 background:var(--red-hi);border-color:var(--red-hi);
 box-shadow:0 0 0 3px rgba(229,56,43,.18)}
/* 龙虎榜那种表格行：按钮小一点，别把行高撑起来 */
.detail-chip.sm{padding:1px 7px;font-size:.625rem}
/* 表格里「名称」列：加一个可点的视觉暗示（和长线看板一致） */
table.tbl td .nm.pick{text-decoration:underline;text-decoration-style:dotted;
 text-decoration-color:rgba(229,56,43,.65);text-underline-offset:3px;cursor:pointer}
.lhbmain:hover td .nm.pick{text-decoration-style:solid;text-decoration-color:var(--red-hi)}

/* ---------- 表格 ---------- */
/* 涨停池 60+ 行，整页会很冗长：表格内部滚动 + 表头吸顶，页面长度可控 */
.tblwrap{border:1px solid var(--line);border-radius:var(--r-lg);overflow:hidden;
 background:var(--surface)}
.tblscroll{overflow:auto;max-height:min(74vh,760px)}
.tblscroll::-webkit-scrollbar{width:10px;height:10px}
.tblscroll::-webkit-scrollbar-track{background:var(--surface)}
.tblscroll::-webkit-scrollbar-thumb{background:#2a2a2a;border-radius:5px;
 border:2px solid var(--surface)}
.tblscroll::-webkit-scrollbar-thumb:hover{background:#3a3a3a}
table.tbl{width:100%;border-collapse:separate;border-spacing:0;font-size:var(--fs-sm);
 white-space:nowrap}
table.tbl th{position:sticky;top:0;z-index:2;background:var(--surface-2);color:var(--fg-3);
 font-weight:500;font-size:var(--fs-2xs);text-align:left;padding:9px 12px;
 border-bottom:1px solid var(--line);cursor:pointer;user-select:none;letter-spacing:.02em}
table.tbl th:hover{color:var(--fg)}
table.tbl th.asc::after{content:" ▲";color:var(--red);font-size:.85em}
table.tbl th.desc::after{content:" ▼";color:var(--red);font-size:.85em}
table.tbl td{padding:8px 12px;border-bottom:1px solid rgba(255,255,255,.05)}
table.tbl tbody tr:hover{background:var(--surface-2)}
table.tbl tbody tr:last-child td{border-bottom:none}
table.tbl .nm{font-weight:600}
table.tbl .cd{color:var(--fg-3);font-size:var(--fs-2xs);font-variant-numeric:tabular-nums}
table.tbl td:first-child,table.tbl th:first-child{position:sticky;left:0;z-index:1;
 background:var(--surface)}
table.tbl th:first-child{z-index:3;background:var(--surface-2)}
table.tbl tbody tr:hover td:first-child{background:var(--surface-2)}
.theme-cell{display:flex;gap:5px;flex-wrap:nowrap;max-width:330px;overflow:hidden}
.ttag{padding:1px 6px;border-radius:4px;background:var(--surface-3);
 border:1px solid var(--line);font-size:var(--fs-2xs);color:var(--fg-2)}

/* ---------- 龙虎榜 ---------- */
.lhbgrid{display:grid;grid-template-columns:1.25fr 1fr;gap:16px}
@media (max-width:1100px){.lhbgrid{grid-template-columns:1fr}}
/* 最后一列放「详情」按钮 —— 让用户一眼看出这一行可点 */
.lhbrow{display:grid;grid-template-columns:22px 1fr auto auto;gap:11px;align-items:center;
 padding:9px 14px;border-bottom:1px solid rgba(255,255,255,.05)}
.lhbrow:last-child{border-bottom:none}
.lhbrow .rk{color:var(--fg-3);font-size:var(--fs-xs);font-variant-numeric:tabular-nums}
.lhbrow .nm{font-weight:600}
.lhbrow .sub{font-size:var(--fs-2xs);color:var(--fg-3);margin-top:2px}
.lhbrow .val{text-align:right;font-variant-numeric:tabular-nums;font-weight:700}
.seat{display:flex;align-items:center;gap:10px;padding:8px 14px;
 border-bottom:1px solid rgba(255,255,255,.05);font-size:var(--fs-xs)}
.seat:last-child{border-bottom:none}
.seat .alias{flex:none;padding:2px 7px;border-radius:5px;font-size:var(--fs-2xs);
 border:1px solid rgba(229,56,43,.4);color:var(--red-hi);background:var(--red-dim)}
.seat .sn{flex:1;color:var(--fg-2);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.seat .v{font-variant-numeric:tabular-nums;font-weight:700;flex:none}

/* 全量龙虎榜表 */
table.lhbtbl tbody tr.lhbmain{cursor:pointer}
table.lhbtbl tbody tr.lhbmain:hover{background:var(--surface-2)}
table.lhbtbl tbody tr.lhbmain.open{background:rgba(229,56,43,.07)}
table.lhbtbl tbody tr.lhbmain.open td{border-bottom-color:transparent}
table.lhbtbl td .sub{font-size:var(--fs-2xs);color:var(--fg-3);margin-top:2px}
table.lhbtbl td.reason{color:var(--fg-3);font-size:var(--fs-2xs);max-width:230px;
 overflow:hidden;text-overflow:ellipsis}
table.lhbtbl tr.detail>td{background:#080808;padding:0;
 border-bottom:1px solid var(--line-2)}
/* 席位明细是整行合并单元格，不能沿用首列吸顶（横向滚动会错位） */
table.lhbtbl tr.detail>td:first-child{position:static}
.seatwrap{display:grid;grid-template-columns:1fr 1fr;gap:0;
 border-bottom:1px solid rgba(255,255,255,.05)}
.seatwrap>div{padding:12px 14px}
.seatwrap>div+div{border-left:1px solid rgba(255,255,255,.06)}
@media (max-width:900px){.seatwrap{grid-template-columns:1fr}
 .seatwrap>div+div{border-left:none;border-top:1px solid rgba(255,255,255,.06)}}
.seathead{font-size:var(--fs-xs);font-weight:700;margin-bottom:8px;letter-spacing:.02em}
table.seattbl{width:100%;border-collapse:collapse;white-space:nowrap}
table.seattbl th{background:transparent;color:var(--fg-3);font-size:var(--fs-2xs);
 font-weight:400;padding:3px 8px 6px;border-bottom:1px solid var(--line);text-align:left;
 cursor:default}
table.seattbl th.r{text-align:right}
table.seattbl td{padding:5px 8px;border-bottom:1px solid rgba(255,255,255,.04);
 font-size:var(--fs-xs)}
table.seattbl tr:last-child td{border-bottom:none}
table.seattbl td.r{text-align:right;font-variant-numeric:tabular-nums}
table.seattbl td.rk{color:var(--fg-3);font-weight:700;font-size:var(--fs-2xs)}
table.seattbl td.seatname{white-space:normal;color:var(--fg-2);
 font-size:var(--fs-2xs);line-height:1.4;max-width:330px}
table.seattbl .alias{display:inline-block;margin-left:6px;padding:1px 6px;border-radius:4px;
 font-size:var(--fs-2xs);border:1px solid rgba(229,56,43,.4);color:var(--red-hi);
 background:var(--red-dim);white-space:nowrap}
.seatmeta{display:flex;gap:22px;flex-wrap:wrap;padding:11px 14px;
 font-size:var(--fs-2xs);color:var(--fg-3);background:#060606}
.seatmeta b{color:var(--fg);font-weight:600}
.lhbtools{display:flex;align-items:center;justify-content:space-between;gap:14px;
 margin-top:11px;font-size:var(--fs-xs);color:var(--fg-3);flex-wrap:wrap}

/* ---------- 悬浮窗（点击卡片 / 龙虎榜行后弹出详情） ---------- */
.modal-root{position:fixed;inset:0;z-index:200;display:flex;align-items:center;
 justify-content:center;padding:38px 22px;animation:mFade .16s ease-out}
.modal-backdrop{position:absolute;inset:0;background:rgba(0,0,0,.74);
 -webkit-backdrop-filter:blur(7px);backdrop-filter:blur(7px)}
.modal-panel{position:relative;display:flex;flex-direction:column;width:100%;
 max-width:940px;max-height:86vh;background:var(--surface);
 border:1px solid var(--line-2);border-radius:var(--r-lg);
 box-shadow:0 28px 90px rgba(0,0,0,.75);animation:mPop .18s cubic-bezier(.2,.9,.3,1.2)}
.modal-panel.wide{max-width:1180px}
@keyframes mFade{from{opacity:0}to{opacity:1}}
@keyframes mPop{from{opacity:0;transform:translateY(10px) scale(.985)}
 to{opacity:1;transform:none}}
.modal-head{display:flex;align-items:flex-start;gap:16px;flex:none;
 padding:17px 20px 15px;border-bottom:1px solid var(--line)}
.modal-head .ttl{font-size:1.15rem;font-weight:750;letter-spacing:-.02em;
 display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.modal-head .sub{margin-top:5px;font-size:var(--fs-xs);color:var(--fg-2);
 display:flex;gap:14px;flex-wrap:wrap}
.modal-head .sub b{color:var(--fg);font-weight:600}
.modal-close{margin-left:auto;flex:none;width:30px;height:30px;border-radius:var(--r-sm);
 background:var(--surface-2);border:1px solid var(--line);color:var(--fg-2);
 font-size:19px;line-height:1;cursor:pointer;display:flex;align-items:center;
 justify-content:center;font-family:inherit;transition:background .15s,color .15s}
.modal-close:hover{background:var(--surface-3);color:var(--fg);border-color:var(--line-2)}
.modal-body{overflow:auto;padding:16px 20px 20px}
.modal-body::-webkit-scrollbar{width:10px}
.modal-body::-webkit-scrollbar-track{background:var(--surface)}
.modal-body::-webkit-scrollbar-thumb{background:#2a2a2a;border-radius:5px;
 border:2px solid var(--surface)}
@media (max-width:760px){.modal-root{padding:14px 10px}
 .modal-panel{max-height:92vh}}

/* 悬浮窗内的指标条 */
.mstats{display:grid;grid-template-columns:repeat(auto-fit,minmax(112px,1fr));
 gap:1px;background:var(--line);border:1px solid var(--line);border-radius:var(--r-md);
 overflow:hidden;margin-bottom:16px}
.mstats>div{background:var(--surface);padding:10px 13px}
.mstats .k{font-size:var(--fs-2xs);color:var(--fg-3);white-space:nowrap}
.mstats .v{font-size:var(--fs-xl);font-weight:750;letter-spacing:-.02em;margin-top:4px}
.mstats .v small{font-size:.56em;color:var(--fg-2);font-weight:600;margin-left:2px}

/* 悬浮窗内的个股列表 */
.mlist{display:flex;flex-direction:column;border:1px solid var(--line);
 border-radius:var(--r-md);overflow:hidden}
.mrow{display:grid;grid-template-columns:52px 1fr 96px 92px 84px;gap:12px;
 align-items:center;padding:8px 13px;border-bottom:1px solid rgba(255,255,255,.05);
 font-size:var(--fs-sm)}
.mrow:last-child{border-bottom:none}
.mrow:hover{background:var(--surface-2)}
.mrow .nm{font-weight:600}
.mrow .cd{font-size:var(--fs-2xs);color:var(--fg-3)}
.mrow .r{text-align:right;font-variant-numeric:tabular-nums;color:var(--fg-2);
 font-size:var(--fs-xs)}
.mrow .bd{font-weight:700;color:var(--amber);font-size:var(--fs-xs)}
.mrow .bd.first{color:var(--fg-3);font-weight:500}
.mrow .th{font-size:var(--fs-2xs);color:var(--fg-3);overflow:hidden;
 text-overflow:ellipsis;white-space:nowrap}
.mrow.mhead{background:var(--surface-2);font-size:var(--fs-2xs);color:var(--fg-3)}
.mrow.mhead:hover{background:var(--surface-2)}
@media (max-width:760px){.mrow{grid-template-columns:44px 1fr 74px;gap:9px}
 .mrow .opt{display:none}}

/* 点击卡片 / 行的提示 */
.clickable{cursor:pointer}
.clickable:hover{border-color:var(--line-2);background:var(--surface-2)}
.hint{display:inline-flex;align-items:center;gap:4px;font-size:var(--fs-2xs);
 color:var(--fg-3);opacity:0;transition:opacity .15s}
.clickable:hover .hint,.lhbmain:hover .hint{opacity:1}

/* ---------- 状态色 ---------- */
.up{color:var(--red-hi)}
.down{color:var(--green-hi)}
.flat{color:var(--fg-2)}
.warn{color:var(--amber)}

/* ---------- 空态 / 加载 ---------- */
.empty{padding:34px 20px;text-align:center;color:var(--fg-3);font-size:var(--fs-sm)}
.skel{background:linear-gradient(90deg,var(--surface) 25%,var(--surface-3) 50%,var(--surface) 75%);
 background-size:200% 100%;animation:sk 1.3s ease-in-out infinite;border-radius:var(--r-md)}
@keyframes sk{0%{background-position:200% 0}100%{background-position:-200% 0}}
#loading{padding:60px 0;text-align:center;color:var(--fg-3)}
.spinner{width:26px;height:26px;border:2.5px solid var(--line);border-top-color:var(--red);
 border-radius:50%;margin:0 auto 14px;animation:spin .8s linear infinite}
.errbox{background:var(--surface);border:1px solid rgba(229,56,43,.4);border-radius:var(--r-md);
 padding:16px 18px;color:var(--red-hi);font-size:var(--fs-sm);white-space:pre-wrap;
 word-break:break-all;max-height:230px;overflow:auto}

/* ---------- 底部 ---------- */
.foot{margin:60px 0 40px;padding-top:20px;border-top:1px solid var(--line);
 color:var(--fg-3);font-size:var(--fs-xs);display:flex;justify-content:space-between;
 gap:16px;flex-wrap:wrap}
.foot code{background:var(--surface-2);padding:2px 6px;border-radius:4px;
 border:1px solid var(--line);font-size:var(--fs-2xs)}