/* multi_timeframe_picks_detail.css — 详情页样式
 * 由 src/invest/multi_timeframe_picks_html.py 抽离（2026-04-26）
 * 时间周期主题色通过 CSS 变量 --tf-color 注入（在 HTML <style> 里设置）
 */

/* :root 变量已迁入 _base.css */
*{margin:0;padding:0;box-sizing:border-box}
body{background:var(--bg);color:var(--t1);font-family:var(--sans);-webkit-font-smoothing:antialiased}
a{color:inherit;text-decoration:none}
.wrap{max-width:1100px;margin:0 auto;padding:48px 24px 80px}

.hdr{display:flex;align-items:center;gap:16px;margin-bottom:20px;padding-bottom:16px;border-bottom:1px solid var(--bd)}
.hdr-flag{width:48px;height:48px;border-radius:12px;display:flex;align-items:center;justify-content:center;background:var(--s1);border:1px solid var(--bd)}
.hdr-flag img{width:30px;height:20px;border-radius:3px}
.hdr-info{flex:1}
.hdr-info h1{font-size:21px;font-weight:800}
.hdr-info .sub{font-size:11px;color:var(--t2);margin-top:2px}
.hdr-badge{font-size:10px;font-weight:700;padding:4px 12px;border-radius:10px;color:var(--tf-color);background:color-mix(in srgb, var(--tf-color) 7%, transparent);border:1px solid color-mix(in srgb, var(--tf-color) 20%, transparent);white-space:nowrap}

.info-strip{display:flex;gap:0;border:1px solid var(--bd);border-radius:12px;overflow:hidden;margin-bottom:24px}
.is-item{flex:1;padding:12px 8px;text-align:center;background:var(--s1);border-right:1px solid var(--bd)}
.is-item:last-child{border-right:none}
.is-k{font-size:9px;color:var(--t3);margin-bottom:3px}
.is-v{font-size:13px;font-weight:800;font-family:var(--mono)}

/* ── 汇总表格 ── */
.sec-title{font-size:14px;font-weight:700;margin-bottom:12px;display:flex;align-items:center;gap:8px}
.sec-title::before{content:'';width:3px;height:16px;background:var(--tf-color);border-radius:2px}
.tbl-wrap{overflow-x:auto;margin-bottom:32px;border:1px solid var(--bd);border-radius:12px}
table{width:100%;border-collapse:collapse;font-size:12px}
th{background:#0c1018;color:var(--t3);font-size:10px;font-weight:600;padding:10px 12px;text-align:left;letter-spacing:.3px;white-space:nowrap;border-bottom:1px solid var(--bd)}
td{padding:10px 12px;border-bottom:1px solid rgba(255,255,255,.025);font-family:var(--mono);font-size:12px;white-space:nowrap}
tr:last-child td{border-bottom:none}
tr:hover{background:rgba(255,255,255,.015)}
.td-name{font-family:var(--sans);font-weight:700;white-space:normal}
.td-name a{color:var(--t1);text-decoration:none;border-bottom:1px dashed var(--bd)}
.td-name a:hover{color:var(--tf-color);border-color:var(--tf-color)}
.td-tk{font-family:var(--mono);font-size:10px;color:var(--t3);margin-left:4px;font-weight:400}
.td-rec{font-size:9px;font-weight:700;padding:2px 8px;border-radius:6px;border:1px solid;white-space:nowrap}
.td-pct{font-size:9px;margin-top:1px}

/* ── 详细分析 ── */
.detail{background:var(--s1);border:1px solid var(--bd);border-radius:14px;padding:20px;margin-bottom:14px;transition:border-color .2s}
.detail:hover{border-color:#283548}
.d-head{display:flex;align-items:center;gap:12px;margin-bottom:12px}
.d-num{width:28px;height:28px;border-radius:8px;font-family:var(--mono);font-weight:900;font-size:13px;display:flex;align-items:center;justify-content:center;flex-shrink:0}
.d-info{flex:1}
.d-title{font-size:16px;font-weight:800;margin-bottom:4px}
.d-tk{font-family:var(--mono);font-size:11px;color:var(--t3);margin-left:6px}
.d-tags{display:flex;gap:5px;flex-wrap:wrap}
.tag{font-size:9px;font-weight:600;padding:2px 8px;border-radius:6px;border:1px solid;white-space:nowrap}
.tag-dim{color:var(--t2);border-color:var(--bd);background:transparent}
.d-hl{font-size:12px;color:#c8d6e5;background:rgba(255,255,255,.02);padding:8px 12px;border-radius:8px;margin-bottom:14px;border-left:3px solid var(--tf-color);font-weight:500}

.d-prices{display:flex;gap:0;border:1px solid var(--bd);border-radius:10px;overflow:hidden;margin-bottom:14px}
.dp{flex:1;padding:10px;text-align:center;border-right:1px solid var(--bd)}
.dp:last-child{border-right:none}
.dp-k{font-size:9px;color:var(--t3);margin-bottom:3px}
.dp-v{font-family:var(--mono);font-size:15px;font-weight:900}
.dp-up .dp-v{color:var(--up)}
.dp-dn .dp-v{color:var(--dn)}
.dp-pct{font-family:var(--mono);font-size:10px;font-weight:700;margin-top:2px}
.dp-up .dp-pct{color:var(--up)}
.dp-dn .dp-pct{color:var(--dn)}

.d-analysis{padding-top:12px;border-top:1px solid var(--bd)}
.rd{display:flex;gap:10px;margin-bottom:10px}
.rd:last-child{margin-bottom:0}
.rd-icon{font-size:14px;flex-shrink:0;margin-top:1px}
.rd-body{flex:1}
.rd-label{font-size:10px;font-weight:700;color:var(--tf-color);margin-bottom:2px}
.rd-text{font-size:12px;color:#94a3b8;line-height:1.7}

.foot{text-align:center;font-size:10px;color:var(--t3);padding:20px 0;margin-top:16px;border-top:1px solid var(--bd);line-height:1.8}

@media(max-width:640px){
  .wrap{padding:32px 14px 60px}
  .hdr-info h1{font-size:18px}
  .info-strip{flex-wrap:wrap}
  .is-item{min-width:33%}
  .detail{padding:16px}
  .d-prices{flex-wrap:wrap}
  .dp{min-width:48%;flex:unset}
  table{font-size:11px}
  th,td{padding:8px 10px}
}