/* comp.css — 自选/多周期组件、趋势曲线区（表格与图表组件样式） */
/* ---------- 自选板块 / 多周期 ---------- */
.seg.sm button{padding:5px 9px;font-size:12px}
.wseg{gap:6px}
.cell{font-family:var(--mono);font-size:12.5px;white-space:nowrap;font-weight:600}
.cell.up{color:var(--up)} .cell.down{color:var(--down)} .cell.flat{color:var(--tx-3)}
.cell.dim{font-weight:400;color:var(--tx-2)}
.cell.pend{color:var(--tx-3);font-weight:400;letter-spacing:1px}
/* 综合列：五个周期的小色条 + 流入周期数 */
.c5{display:inline-flex;align-items:center;gap:2px;vertical-align:middle}
.c5 i{display:block;width:5px;height:13px;border-radius:1px;background:var(--line)}
.c5 i.d0{background:var(--line);opacity:.55}
.cn{font-family:var(--mono);font-size:10px;color:var(--tx-3);margin-left:4px;vertical-align:middle}
.cn.up{color:var(--up)} .cn.down{color:var(--down)}
th.c,td.c{text-align:center}
td.c{padding-left:6px;padding-right:6px}
td.c{cursor:pointer;white-space:nowrap}
td.c:hover .c5 i{filter:brightness(1.15)}
/* 多周期明细面板 */
.dsub{font-size:11px;color:var(--tx-3);padding:10px 16px 6px;letter-spacing:.2px}
.multi{padding:2px 16px 10px}
.multi .mrow{display:grid;grid-template-columns:52px minmax(40px,1fr) 82px 62px;gap:8px;align-items:center;
  padding:7px 0;border-bottom:1px solid var(--line-soft);font-size:12px}
.multi .mrow:last-child{border-bottom:0}
.multi .mk{color:var(--tx-3);white-space:nowrap}
.multi .mv{font-family:var(--mono);font-weight:600;text-align:right;white-space:nowrap;font-size:11.5px}
.multi .mc{font-family:var(--mono);text-align:right;color:var(--tx-2);white-space:nowrap}
.multi .mbar{height:7px;background:var(--panel-2);border:1px solid var(--line-soft);border-radius:3px;overflow:hidden;position:relative}
.multi .mbar i{position:absolute;top:0;bottom:0;border-radius:3px}
.multi .mhead{display:grid;grid-template-columns:52px minmax(40px,1fr) 82px 62px;gap:8px;font-size:10.5px;
  color:var(--tx-3);padding-bottom:4px;border-bottom:1px solid var(--line-soft);margin-bottom:2px}
.multi .mhead span:nth-child(3),.multi .mhead span:nth-child(4){text-align:right}
.wdel{
  opacity:.28;border:0;background:transparent;color:var(--tx-3);cursor:pointer;
  font-size:15px;line-height:1;padding:1px 5px;border-radius:5px;
  transition:opacity .15s,color .15s;vertical-align:middle;
}
tbody tr:hover .wdel{opacity:.7}
@media (hover:none){ .wdel{opacity:.5} }
.wdel:hover{opacity:1!important;color:var(--down);background:rgba(128,128,128,.16)}
.addbtn{
  height:34px;padding:0 12px;border-radius:9px;border:1px dashed var(--line);
  background:transparent;color:var(--tx-2);font-size:12.5px;font-family:inherit;
  cursor:pointer;white-space:nowrap;transition:border-color .15s,color .15s;
}
.addbtn:hover{border-color:var(--tx-3);color:var(--tx)}
.mask{position:fixed;inset:0;background:rgba(0,0,0,.42);z-index:60;display:none}
.mask.on{display:block}
.pick{
  position:fixed;left:50%;top:50%;transform:translate(-50%,-50%);
  width:min(400px,calc(100vw - 28px));max-height:74vh;display:none;flex-direction:column;
  background:var(--panel);border:1px solid var(--line);border-radius:13px;
  box-shadow:0 18px 60px rgba(0,0,0,.45);z-index:61;overflow:hidden;
}
.pick.on{display:flex}
.pick .ph{padding:13px 15px 10px;border-bottom:1px solid var(--line-soft)}
.pick .ph h4{margin:0 0 9px;font-size:13.5px;font-weight:650}
.pick input{
  width:100%;height:33px;border-radius:8px;border:1px solid var(--line);
  background:var(--panel-2);color:var(--tx);padding:0 10px;font-size:13px;
  outline:none;font-family:inherit;box-sizing:border-box;
}
.pick input:focus{border-color:var(--tx-3)}
.pick .pl{overflow:auto;flex:1;padding:6px}
.pick .pi{
  display:flex;align-items:center;gap:8px;padding:8px 10px;border-radius:7px;
  cursor:pointer;font-size:12.5px;
}
.pick .pi:hover{background:var(--panel-2)}
.pick .pi b{font-weight:500}
.pick .pi .cd{font-size:10.5px;color:var(--tx-3);font-family:var(--mono)}
.pick .pi .tg{margin-left:auto;font-size:11px;color:var(--tx-3)}
.pick .pi.on{opacity:.45;cursor:default}
.pick .pn{padding:8px 12px;font-size:11.5px;color:var(--tx-3);text-align:center}
@media (max-width:720px){
  .hide-s{display:none}
  .cell{font-size:12px}
  .wseg{order:9;width:100%}
  .addbtn{padding:0 10px;font-size:12px}
  .seg button{padding:5px 8px;font-size:11.5px}
  tbody td{padding-right:7px}
  thead th{padding-right:7px}
}

/* ---------- 资金流趋势曲线（四个板块视图共用） ---------- */
.body{grid-template-rows:minmax(0,1fr) 254px}
.tablewrap{grid-column:1;grid-row:1}
aside{grid-row:1 / 3}
.trend{
  display:flex;flex-direction:column;min-height:0;min-width:0;position:relative;
  grid-column:1;grid-row:2;background:var(--panel);border-top:1px solid var(--line);
}
.tbar{display:flex;align-items:center;gap:9px;padding:8px 14px 4px;flex:0 0 auto;flex-wrap:nowrap;min-height:30px;min-width:0;overflow:hidden}
.tbar .tname{font-size:12.5px;font-weight:600;letter-spacing:.1px;flex:0 0 auto}
.tbar .tmeta{font-size:11px;color:var(--tx-3);flex:1 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.tbar .sp{display:none}
/* 两条线的图例（双轴：净流入=左轴，涨跌幅=右轴） */
.tbar .lg{
  display:inline-flex;align-items:center;gap:5px;font-size:10.5px;color:var(--tx-3);
  padding:2px 7px;border-radius:6px;background:var(--panel-2);border:1px solid var(--line-soft);
  white-space:nowrap;flex:0 0 auto;
}
.tbar .lg i{width:8px;height:8px;border-radius:2px;flex:0 0 auto;display:block}
.tbar .lg.lgNet i{background:var(--tnet)}
.tbar .lg.lgChg i{background:var(--tchg)}
.tbar .lg b{font-family:var(--mono);font-size:11px;font-weight:600;color:var(--tx-2)}
.tbar .lg b.up{color:var(--up)} .tbar .lg b.down{color:var(--down)}
.tbar .tdraw{
  height:24px;padding:0 9px;border-radius:6px;border:1px solid var(--line);background:var(--panel-2);
  color:var(--tx-2);font-size:11px;font-family:inherit;cursor:pointer;transition:.15s;white-space:nowrap;
}
.tbar .tdraw:hover{color:var(--tx);border-color:var(--tx-3)}
/* 「净流入 / 涨跌幅」切换（全部板块模式） */
.tbar .tseg{display:inline-flex;flex:0 0 auto;border:1px solid var(--line);border-radius:6px;overflow:hidden;background:var(--panel-2)}
.tbar .tseg button{
  height:22px;padding:0 8px;border:0;background:transparent;color:var(--tx-3);
  font-size:10.5px;font-family:inherit;cursor:pointer;transition:.15s;white-space:nowrap;
}
.tbar .tseg button + button{border-left:1px solid var(--line-soft)}
.tbar .tseg button:hover{color:var(--tx-2)}
.tbar .tseg button.on{background:var(--acc-soft);color:var(--acc);font-weight:600}
.tbar .tback{
  height:22px;padding:0 7px;border-radius:6px;border:1px solid var(--line);background:var(--panel-2);
  color:var(--tx-2);font-size:11px;font-family:inherit;cursor:pointer;transition:.15s;flex:0 0 auto;
}
.tbar .tback:hover{color:var(--tx);border-color:var(--tx-3)}
.tbar .hide{display:none!important}
.chips{display:flex;gap:5px;flex-wrap:nowrap;align-items:center;overflow-x:auto;overflow-y:hidden;flex:0 0 auto;min-width:0;max-width:46%;scrollbar-width:none;
  -webkit-mask-image:linear-gradient(90deg,#000 0,#000 calc(100% - 16px),transparent 100%);
  mask-image:linear-gradient(90deg,#000 0,#000 calc(100% - 16px),transparent 100%)}
.chips::-webkit-scrollbar{display:none}
.tbar.many .chips{max-width:56%}
.chipc{
  display:inline-flex;align-items:center;gap:5px;font-size:11px;padding:2px 7px;
  border-radius:20px;border:1px solid var(--line);background:var(--panel-2);
  color:var(--tx-2);cursor:pointer;transition:.15s;white-space:nowrap;
}
.chipc i{width:6px;height:6px;border-radius:50%;flex:0 0 auto}
.chipc:hover{color:var(--tx);border-color:var(--tx-3)}
.tcwrap{position:relative;flex:1;min-height:0;padding:0 2px 2px;overflow:hidden}
.tcwrap svg{display:block;width:100%;height:100%;overflow:visible}
.tg{stroke:var(--line-soft);stroke-width:1;shape-rendering:crispEdges}
.tgl{fill:var(--tx-3);font-size:10px;font-family:var(--mono)}
.tgl1{fill:var(--tnet);font-size:9.5px;font-family:var(--mono);opacity:.9}
.tgl2{fill:var(--tchg);font-size:9.5px;font-family:var(--mono);opacity:.9}
.tz{stroke:var(--line);stroke-width:1.2}
.tz2{stroke:var(--tchg);stroke-width:1;stroke-dasharray:3 4;opacity:.4}
.tsep{stroke:var(--line);stroke-width:1;stroke-dasharray:2 3;opacity:.75}
.tlim{fill:var(--tx-3);font-size:10px;opacity:.85}
.ttip{
  position:absolute;top:6px;left:0;z-index:3;pointer-events:none;opacity:0;
  background:var(--panel-2);border:1px solid var(--line);border-radius:8px;
  padding:7px 9px;font-size:11.5px;box-shadow:var(--shadow);transition:opacity .12s;
  white-space:nowrap;min-width:104px;
}
.ttip .hh{font-size:10.5px;color:var(--tx-3);font-family:var(--mono);margin-bottom:3px}
.ttip .tr{display:flex;align-items:center;gap:6px;margin-top:2px}
.ttip .tr i{width:7px;height:7px;border-radius:50%;flex:0 0 auto}
.ttip .tr span{color:var(--tx-2)}
.ttip .tr b{margin-left:auto;font-family:var(--mono);font-weight:600}
/* 放大按钮：点开后曲线区 fixed 覆盖整页（含表格），便于细看多条线 */
.tbar .tzoom{
  height:24px;padding:0 9px;border-radius:6px;border:1px solid var(--line);background:var(--panel-2);
  color:var(--tx-2);font-size:11px;font-family:inherit;cursor:pointer;transition:.15s;white-space:nowrap;flex:0 0 auto;
  display:inline-flex;align-items:center;gap:4px;
}
.tbar .tzoom:hover{color:var(--tx);border-color:var(--tx-3)}
.tbar .tzoom.on{background:var(--acc-soft);border-color:var(--acc-soft);color:var(--acc);font-weight:600}
/* 播放按钮：只在放大模式出现，按时间把曲线逐点长出来 */
.tbar .tplay{
  height:24px;width:27px;padding:0;border-radius:6px;border:1px solid var(--line);background:var(--panel-2);
  color:var(--tx-2);font-size:9.5px;font-family:inherit;cursor:pointer;transition:.15s;flex:0 0 auto;
  display:inline-flex;align-items:center;justify-content:center;line-height:1;
}
.tbar .tplay:hover{color:var(--tx);border-color:var(--tx-3)}
.tbar .tplay.on{background:var(--acc-soft);border-color:var(--acc-soft);color:var(--acc)}
.tbar .tplay svg{display:block}
.tbar .tplay .ipause{display:none}
.tbar .tplay.on .iplay{display:none}
.tbar .tplay.on .ipause{display:block}
.tbar .tptime{
  font-family:var(--mono);font-size:11px;color:var(--acc);background:var(--acc-soft);
  border:1px solid var(--acc-soft);border-radius:6px;padding:2px 7px;flex:0 0 auto;white-space:nowrap;
}
.trend.big{
  position:fixed;inset:0;z-index:49;grid-column:auto;grid-row:auto;border-top:0;   /* 低于抽屉(50)，放大时仍能开成分股 */
  box-shadow:0 -14px 44px rgba(0,0,0,.4);
}
.trend.big .tbar{padding:13px 20px 6px;min-height:42px;gap:12px}
.trend.big .tname{font-size:14px}
.trend.big .tmeta{font-size:11.5px}
.trend.big .tcwrap{padding:0 12px 12px}
.trend.big .chips,.trend.big .tbar.many .chips{max-width:58%}
.trend.big .tgl{font-size:11px}
.trend.big .tgl1,.trend.big .tgl2{font-size:10.5px}
.trend.big .ttip{font-size:12.5px}
.trend.big .tbar .tzoom{height:26px}
body.zoom-on{overflow:hidden}
/* 放大模式下曲线末端的板块名，用同色文字 + 底色描边保证压在网格上仍可读 */
.tlbl{
  font-family:inherit;font-size:10.5px;font-weight:500;
  paint-order:stroke;stroke:var(--panel);stroke-width:3px;stroke-linejoin:round;
}
.trend.big .tlbl{stroke-width:3.4px}
@media (max-width:1080px){
  .body{grid-template-rows:minmax(0,1fr) 232px}
}
@media (max-width:720px){
  .body{grid-template-rows:minmax(0,1fr) 196px}
  .tbar{padding:5px 10px 2px;gap:8px;min-height:24px;flex-wrap:nowrap;overflow:hidden}
  .tbar .tname{font-size:12px;flex:0 0 auto;max-width:96px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .tbar .lg{padding:1px 5px;font-size:10px;gap:4px}
  .tbar .lg b{display:none}
  .tbar .tmeta{display:none}
  .tbar .sp{display:none}
  .tbar .tdraw{padding:0 7px;font-size:10.5px;height:22px;flex:0 0 auto;margin-left:auto}
  .tbar .tseg button{height:20px;padding:0 6px;font-size:10px}
  .tbar .tback{height:20px;padding:0 6px;font-size:10px}
  .tbar .tzoom{height:20px;padding:0 6px;font-size:10px}
  .tbar .tplay{height:20px;width:23px}
  .tbar .tptime{font-size:10px;padding:1px 5px}
  .tbar .tzoom .zt{display:none}      /* 窄屏只留图标，别把工具条挤爆 */
  .trend.big .tbar{padding:9px 11px 4px;gap:8px;min-height:32px}
  .trend.big .tname{font-size:12.5px;max-width:none}
  .trend.big .tcwrap{padding:0 4px 6px}
  .trend.big .chips,.trend.big .tbar.many .chips{max-width:42%}
  .trend.big .ttip{font-size:11.5px}
  .chips,.tbar.many .chips{max-width:36%}
  .chipc{font-size:10px;padding:1px 5px;gap:4px}
  /* 窄屏表格更紧凑：综合视图 6 列要一屏放下 */
  #th th, #tb td{padding-left:4px;padding-right:4px}
  .cell{font-size:11px}
  .nm{max-width:80px}
  thead tr.h1 th{padding:5px 4px 3px}
}