/* 面板类可拆卸功能的样式:数据窗口、导出图表数据、标的详情。每个功能一段,拆功能时连同 js/features/ 里的文件删掉对应段落。 */

/* ===== feature:datawindow(侧栏页签「自选 / 数据窗口」与数据窗口) ===== */
.sd-tabs { display: flex; align-items: stretch; gap: 18px; height: 32px; padding: 0 6px 0 12px; border-bottom: 1px solid var(--line); flex: none; }
.sd-tabs [data-tab] { position: relative; padding: 0 1px; font-size: 12px; color: var(--dim); transition: color .12s; }
.sd-tabs [data-tab]:hover { color: var(--text); }
.sd-tabs [data-tab].on { color: var(--text); font-weight: 500; }
.sd-tabs [data-tab].on::after { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 2px; border-radius: 1px; background: var(--ours); }
.sd-tabs [data-tab]:focus-visible { outline-offset: -2px; }
.sd-tz { align-self: center; color: var(--faint); font-size: 11px; font-weight: 300; white-space: nowrap; }
.sd-act { align-self: center; width: 26px; height: 26px; margin-left: 2px; display: grid; place-items: center; color: var(--dim); border-radius: var(--r-s); }
.sd-act:hover { color: var(--text); background: var(--hover); }
#side.dw-on > :not(.sd-tabs):not(#dw) { display: none !important; }
#side:not(.dw-on) > #dw { display: none; }
#dw { flex: 1; min-height: 0; overflow-y: auto; padding: 2px 0 10px; contain: layout paint; }   /* 十字线移动时数字变化只在面板内重排 */
.dw-sec { padding: 7px 12px 5px; }
.dw-sec + .dw-sec { border-top: 1px solid color-mix(in srgb, var(--line) 55%, transparent); }   /* 同一窗格内的指标之间:淡线 */
.dw-pane { height: 1px; margin: 3px 0; background: var(--line-2); }   /* 窗格之间:实线 */
.dw-t { display: flex; align-items: baseline; gap: 6px; height: 21px; min-width: 0; font-size: 12px; font-weight: 500; color: var(--text); white-space: nowrap; overflow: hidden; }
.dw-t > span { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.dw-t small { flex: none; color: var(--dim); font-size: 11px; font-weight: 300; }
.dw-t em { flex: none; margin-left: auto; color: var(--faint); font-size: 11px; font-weight: 300; font-style: normal; }
.dw-r { display: flex; align-items: center; justify-content: space-between; gap: 12px; height: 22px; font-size: 12px; }
.dw-k { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--dim); font-weight: 300; }
.dw-v { flex: none; color: var(--text); font-weight: 400; white-space: nowrap; font-variant-numeric: tabular-nums; }
.dw-v.pos { color: var(--up); } .dw-v.neg { color: var(--down); } .dw-v.dim { color: var(--faint); font-weight: 300; }
.dw-r.ref .dw-v:not(.dim) { color: var(--ref); font-weight: 300; }
.dw-sec.is-off .dw-r, .dw-r.is-off { opacity: .42; }
.dw-empty { padding: 28px 14px; color: var(--dim); font-weight: 300; text-align: center; }
/* 脱敏:数据窗口与图例同一规则——名称换代号、不显示参数,数值照常显示(图上的线、价格轴标签本来就看得到数值) */

/* ===== feature:exportcsv(导出图表数据) ===== */
.ex-m .f-pane { padding-top: 2px; }
.ex-m .f-row .f-r > span { color: var(--text); font-size: 13px; }
.ex-sum { margin: 10px 0 2px; padding: 9px 12px; border: 1px solid var(--line); border-radius: var(--r-s); background: var(--surface); color: var(--dim); font-size: 12px; font-weight: 300; font-variant-numeric: tabular-nums; }

/* ===== feature:symdetail(标的详情:自选表下方) ===== */
#symd { flex: none; border-top: 1px solid var(--line); contain: layout paint; }
.sdx-h { width: 100%; height: 32px; display: flex; align-items: center; gap: 7px; padding: 0 12px 0 8px; text-align: left; white-space: nowrap; transition: background .12s; }
.sdx-h:hover { background: var(--hover); }
.sdx-chev { width: 14px; flex: none; display: grid; place-items: center; color: var(--faint); transition: transform .15s; }
#symd.collapsed .sdx-chev { transform: rotate(-90deg); }
.sdx-n { font-size: 13px; font-weight: 500; }
.sdx-ex { min-width: 0; overflow: hidden; text-overflow: ellipsis; color: var(--dim); font-size: 11px; font-weight: 300; }
.sdx-mkt { display: inline-flex; align-items: center; gap: 5px; flex: none; color: var(--dim); font-size: 11px; font-weight: 300; }
.sdx-mkt i { width: 6px; height: 6px; border-radius: 50%; background: var(--up); }
#symd.collapsed .sdx-b { display: none; }
.sdx-b { padding: 0 12px 11px; }
.sdx-px { display: flex; align-items: baseline; gap: 6px; height: 27px; }
.sdx-last { font-size: 20px; font-weight: 500; letter-spacing: -.01em; font-variant-numeric: tabular-nums; }
.sdx-cur { color: var(--dim); font-size: 11px; font-weight: 300; }
.sdx-line { display: flex; align-items: baseline; gap: 8px; height: 18px; font-size: 12px; white-space: pre; }
.sdx-chg { font-variant-numeric: tabular-nums; }
.sdx-line small { color: var(--faint); font-size: 11px; font-weight: 300; }
.sdx-sec { margin: 10px 0 6px; color: var(--faint); font-size: 11px; letter-spacing: .04em; }
.sdx-perf { display: grid; grid-template-columns: repeat(3, 1fr); gap: 4px; }
.sdx-tile { height: 36px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1px; border-radius: var(--r-s); background: var(--raised); }
.sdx-tile b { font-size: 12px; font-weight: 500; line-height: 1.25; font-variant-numeric: tabular-nums; }
.sdx-tile span { color: var(--dim); font-size: 10.5px; font-weight: 300; line-height: 1.2; }
.sdx-tile.pos { background: color-mix(in srgb, var(--up) 10%, transparent); } .sdx-tile.pos b { color: var(--up); }
.sdx-tile.neg { background: color-mix(in srgb, var(--down) 10%, transparent); } .sdx-tile.neg b { color: var(--down); }
.sdx-tile.na b { color: var(--faint); font-weight: 300; }
.sdx-stats { margin-top: 9px; padding-top: 5px; border-top: 1px solid color-mix(in srgb, var(--line) 70%, transparent); }
.sdx-kv { height: 22px; display: flex; align-items: center; justify-content: space-between; gap: 10px; font-size: 12px; }
.sdx-k { color: var(--dim); font-size: 12px; font-weight: 300; white-space: nowrap; }
.sdx-vv { display: flex; align-items: baseline; gap: 6px; white-space: nowrap; }
.sdx-v, .sdx-rv { font-weight: 400; white-space: nowrap; font-variant-numeric: tabular-nums; }
.sdx-sub { color: var(--faint); font-size: 11px; font-weight: 300; font-variant-numeric: tabular-nums; }
.sdx-rng { padding-bottom: 5px; }
.sdx-track { position: relative; height: 2px; margin: 1px 0 0; border-radius: 1px; background: var(--line-2); }
.sdx-fill { position: absolute; left: 0; top: 0; bottom: 0; border-radius: 1px; background: color-mix(in srgb, var(--ours) 50%, transparent); }
.sdx-dot { position: absolute; top: 50%; width: 7px; height: 7px; margin: -3.5px 0 0 -3.5px; border-radius: 50%; background: var(--text); box-shadow: 0 0 0 2px var(--surface); }
.sdx-rng.na .sdx-fill, .sdx-rng.na .sdx-dot { display: none; }
@media (max-height: 860px) { .sdx-stats, #symd .sdx-sec { display: none; } #symd .sdx-perf { margin-top: 8px; } .sdx-tile { height: 32px; } }   /* 矮屏:只留价格与表现,自选表不被挤没 */