/* ═══════════════════════════════════════════════════════════════════
   research.css — 研究室六分頁版面(規格 003-CC2 Step 3)
   token 全沿用 themes.css, 隨深淺主題重繪。
   ═══════════════════════════════════════════════════════════════════ */

.rl-wrap{display:flex;flex-direction:column;height:100%;min-height:0}

/* 頂部:名稱/現價 + 換股搜尋 */
.rl-top{display:flex;align-items:center;justify-content:space-between;gap:16px;
  padding:16px 24px;border-bottom:1px solid var(--border);flex-wrap:wrap}
.rl-id{display:flex;flex-direction:column;gap:3px;min-width:0}
.rl-name-row{display:flex;align-items:baseline;gap:10px}
.rl-name{font-size:20px;font-weight:700}
.rl-code{font-size:13px;color:var(--text-faint);font-variant-numeric:tabular-nums}
.rl-price-row{display:flex;align-items:baseline;gap:12px}
.rl-price{font-size:28px;font-weight:800;font-variant-numeric:tabular-nums}
.rl-chg{font-size:14px;font-weight:600;font-variant-numeric:tabular-nums}
.rl-search{position:relative;width:260px;max-width:42vw}
.rl-search input{width:100%;background:var(--bg-surface);border:1px solid var(--border);
  border-radius:8px;padding:9px 13px;font-size:13px}

/* 六 tab */
.rl-tabs{display:flex;gap:2px;padding:0 24px;border-bottom:1px solid var(--border);
  overflow-x:auto;flex-shrink:0;background:var(--panel)}
.rl-tabs button{background:none;border:none;color:var(--text-muted);font-size:14px;padding:12px 16px;
  border-bottom:2px solid transparent;white-space:nowrap}
.rl-tabs button:hover{color:var(--text)}
.rl-tabs button.active{color:var(--text);font-weight:700;border-bottom-color:var(--accent)}

/* 內容 */
.rl-body{flex:1;overflow-y:auto;padding:20px 24px;display:flex;flex-direction:column;gap:16px}
.rl-note{font-size:11.5px;color:var(--text-faint)}
.rl-cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(120px,1fr));gap:10px}
.rl-stat{background:var(--panel);border:1px solid var(--border);border-radius:10px;padding:13px 15px}
.rl-stat .k{font-size:11.5px;color:var(--text-muted)}
.rl-stat .v{font-size:19px;font-weight:800;margin-top:3px;font-variant-numeric:tabular-nums}
.rl-card{background:var(--panel);border:1px solid var(--border);border-radius:12px;padding:16px 18px}
.rl-card-h{font-size:12px;color:var(--text-muted);margin-bottom:12px}
.rl-card-h .lg{color:var(--text);font-size:14.5px;font-weight:700;margin-right:6px}
.rl-2col{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.rl-3col{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.rl-chart{height:300px}
.rl-canvas{width:100%;height:200px;display:block}
.rl-shell{height:150px;display:flex;align-items:center;justify-content:center;color:var(--text-faint);
  font-size:12.5px;background:var(--bg-deep);border-radius:8px}
.rl-legend{display:flex;gap:14px;font-size:11.5px;color:var(--text-muted);margin-bottom:8px;flex-wrap:wrap}
.rl-legend i{display:inline-block;width:9px;height:9px;border-radius:2px;margin-right:5px;vertical-align:middle}

/* 52 週價格區間 */
.rl-range{padding:22px 8px 4px}
.rl-range-bar{position:relative;height:8px;border-radius:4px;
  background:linear-gradient(90deg,var(--down-bg),var(--bg-deep),var(--up-bg))}
.rl-range-dot{position:absolute;top:-5px;width:12px;height:18px;background:var(--accent);border-radius:3px}
.rl-range-dot span{position:absolute;top:-20px;left:50%;transform:translateX(-50%);font-size:11px;
  color:var(--accent);font-weight:700;white-space:nowrap;font-variant-numeric:tabular-nums}
.rl-range-lbl{display:flex;justify-content:space-between;font-size:11.5px;color:var(--text-muted);
  margin-top:8px;font-variant-numeric:tabular-nums}

/* 去回放實戰 */
.rl-actions{display:flex}
.rl-btn{display:inline-flex;align-items:center;gap:7px;background:var(--bg-surface);
  border:1px solid var(--border-strong);color:var(--text);border-radius:8px;padding:10px 18px;font-size:13.5px}
.rl-btn.primary{background:var(--accent);border-color:var(--accent);color:#fff}
.rl-btn.primary:hover{filter:brightness(1.08)}

/* 河流圖 */
.rl-river{width:100%;height:150px;display:block}

/* 年度報酬 */
.rl-ret{display:flex;flex-direction:column;gap:9px;padding-top:4px}
.rl-ret-row{display:grid;grid-template-columns:44px 1fr 60px;gap:10px;align-items:center;
  font-size:12.5px;font-variant-numeric:tabular-nums}
.rl-ret-y{color:var(--text-muted)}
.rl-ret-track{height:14px;background:var(--bg-deep);border-radius:3px;overflow:hidden}
.rl-ret-fill{height:100%;border-radius:3px}
.rl-ret-fill.pos{background:var(--up)}
.rl-ret-fill.neg{background:var(--down)}
.rl-ret-v{text-align:right;font-weight:600}

/* 同業比較表 */
.rl-table-wrap{overflow-x:auto}
.rl-table{width:100%;border-collapse:collapse;font-size:12.5px}
.rl-table th{text-align:left;color:var(--text-muted);font-weight:500;padding:8px 10px;
  border-bottom:1px solid var(--border);font-size:11.5px}
.rl-table td{padding:9px 10px;border-bottom:1px solid var(--border)}
.rl-table tr.self{background:var(--accent-light)}
.rl-table .pc-id b{font-variant-numeric:tabular-nums}
.rl-table .pc-cap{font-variant-numeric:tabular-nums;color:var(--text-muted)}
.pc-bar{position:relative;height:18px;background:var(--bg-deep);border-radius:3px;min-width:82px}
.pc-bar-fill{height:100%;background:var(--accent);opacity:.32;border-radius:3px}
.pc-bar-v{position:absolute;left:7px;top:0;line-height:18px;font-size:11.5px;font-variant-numeric:tabular-nums}

@media (max-width:900px){ .rl-2col,.rl-3col{grid-template-columns:1fr} }