/* performance.css — 績效分析頁專屬樣式（外框與色票來自 terminal-shell.css）。
   時間區段列 + 資金/回撤圖 + 拆解子分頁 + 健康度卡片（語彙沿用紙上艦隊）。 */
.periodbar{display:flex;align-items:center;gap:10px;flex-wrap:wrap;row-gap:8px;padding:9px 18px;border-bottom:1px solid var(--line);background:var(--bg-panel)}
.pseg{display:flex;border:1px solid var(--line-2);border-radius:2px;overflow:hidden}
.pseg button{background:transparent;border:0;color:var(--tx-dim);font-family:var(--pix);font-size:12.8px;padding:6px 12px;cursor:pointer}
.pseg button.on{background:rgba(255,122,26,.14);color:var(--or)}
.pseg button:hover{color:var(--tx)}
.fdate{width:150px!important;flex:0 0 auto;height:30px;background:var(--bg-panel-2);border:1px solid var(--line-2);color:var(--tx-dim);font-family:var(--pix);font-size:12px;padding:0 6px;border-radius:2px}
.prange{margin-left:auto;font-family:var(--pix);font-size:12.4px;color:var(--tx-dim);white-space:nowrap}
.secttl{display:flex;align-items:baseline;gap:12px;flex-wrap:wrap;margin-bottom:14px}
.secttl h2{margin:0;font:500 16.5px/1.35 var(--mono);color:var(--tx)}
.secttl .sub{font-family:var(--pix);font-size:12px;color:var(--tx-faint)}
.chartwrap{border:1px solid var(--line);background:var(--bg-panel-2)}
.chartwrap svg{width:100%;max-width:1160px;height:auto;display:block}
.lg{display:flex;gap:16px;flex-wrap:wrap;align-items:center;font-family:var(--pix);font-size:12.6px;color:var(--tx-dim);padding:9px 14px;border-top:1px solid var(--line)}
.lg i{display:inline-block;width:16px;height:2px;margin-right:6px;vertical-align:middle}
.ddhead{display:flex;align-items:baseline;gap:12px;flex-wrap:wrap;padding:12px 14px 2px;border-top:1px solid var(--line-2);background:rgba(242,96,109,.04)}
.ddhead .t{font:500 15px/1.3 var(--mono);color:var(--tx)}
.ddhead .en{font-family:var(--pix);font-size:12px;color:var(--tx-faint);letter-spacing:.6px}
.ddhead .big{margin-left:auto;font-family:var(--pix);font-size:19px;color:var(--rd);font-variant-numeric:tabular-nums}
.ddhead .bigl{font-family:var(--pix);font-size:12px;color:var(--tx-faint)}
.subbar{display:flex;gap:1px;border-bottom:1px solid var(--line);margin-bottom:2px;overflow-x:auto;scrollbar-width:none}
.subbar::-webkit-scrollbar{display:none}
.subbtn{padding:8px 14px;font-family:var(--pix);font-size:13px;color:var(--tx-dim);cursor:pointer;border-bottom:2px solid transparent;white-space:nowrap}
.subbtn:hover{color:var(--tx)}
.subbtn.on{color:var(--or);border-color:var(--or)}
table{width:100%;border-collapse:collapse}
th,td{text-align:right;padding:8px 12px;border-bottom:1px solid rgba(255,255,255,.04);font-family:var(--pix);font-size:13.6px;font-variant-numeric:tabular-nums;white-space:nowrap}
th{font-size:12px;color:var(--tx-faint);letter-spacing:.5px;border-bottom:1px solid var(--line-2)}
td.l,th.l{text-align:left;font-family:var(--mono);font-size:13.4px;color:var(--tx)}
.bar{position:relative;height:4px;background:rgba(255,255,255,.06);margin-top:5px;min-width:60px}
.bar i{position:absolute;top:0;left:0;height:100%}
.win{color:var(--gr)}.loss{color:var(--rd)}.dim{color:var(--tx-dim)}.faint{color:var(--tx-faint)}
.hgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(358px,1fr));gap:18px}
.hcard{border:1px solid var(--line-2);border-radius:8px;background:var(--bg-panel);padding:20px 22px;display:flex;flex-direction:column;gap:14px}
.hc-top{display:flex;align-items:flex-start;justify-content:space-between;gap:10px}
.hc-name{font-family:var(--pix);font-size:18px;letter-spacing:.4px;color:var(--tx)}
.hc-code{font-size:12.5px;color:var(--tx-faint);margin-top:4px}
.hc-badge{flex:none;white-space:nowrap;font-family:var(--pix);font-size:10.8px;letter-spacing:.6px;border-radius:3px;padding:3px 7px;border:1px solid}
.hc-badge .dot{display:inline-block;width:5px;height:5px;border-radius:50%;vertical-align:middle;margin-right:5px;position:relative;top:-1px}
.b-ok{color:var(--gr);border-color:rgba(58,209,122,.4);background:rgba(58,209,122,.08)}
.b-ok .dot{background:var(--gr)}
.b-watch{color:#ffb066;border-color:rgba(255,178,102,.35);background:rgba(255,122,26,.08)}
.b-watch .dot{background:#ffb066}
.b-bad{color:var(--rd);border-color:rgba(242,96,109,.4);background:rgba(242,96,109,.08)}
.b-bad .dot{background:var(--rd)}
.hc-kpi{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--line);border:1px solid var(--line);border-radius:6px;overflow:hidden}
.hc-kpi>div{background:var(--bg-panel-2);padding:10px 12px}
.hc-kpi .l{font-family:var(--pix);font-size:11.4px;color:var(--tx-faint)}
.hc-kpi .v{font-family:var(--pix);font-size:17px;margin-top:4px;font-variant-numeric:tabular-nums}
.gradwrap{display:flex;flex-direction:column;gap:7px}
.grad-top{display:flex;justify-content:space-between;align-items:baseline;font-family:var(--pix);font-size:11.8px;letter-spacing:.4px;color:var(--tx-faint)}
.grad-top b{color:var(--tx);font-size:13.5px;font-weight:400}
.grad-bar{height:7px;border-radius:4px;background:var(--line-2);overflow:hidden}
.grad-fill{height:100%;border-radius:4px}
.hc-note{font-size:12px;color:var(--tx-faint);line-height:1.6;text-wrap:pretty}
.hm{display:grid;gap:3px;max-width:600px}
.hm div{font-family:var(--pix);font-size:11.8px;height:28px;display:flex;align-items:center;justify-content:center;color:var(--tx-dim)}
.hm .mo{justify-content:flex-end;padding-right:8px;color:var(--tx-faint)}
.note{font-size:12.6px;color:var(--tx-faint);line-height:1.7;margin-top:12px}
.emptynote{padding:36px 4px;font-size:13px;color:var(--tx-faint);line-height:1.7}
