/* ======================================================================
   [2026-06-17 / Claude] TrueLink 戰情大廳共用現代化 UI 原語（精緻深色）
   ----------------------------------------------------------------------
   只放「可跨頁重用」的視覺原語：KPI 指標磚、數值膠囊、區段標題。
   一律用 var(--tc-*, <fallback>) → 沒定義 --tc-* 的頁面也能正確顯示，
   會員中心其他頁（member / wallet / profile…）日後 <link> 本檔即可一致套用。
   設計取向：扁平、實線細邊 + 左側細色條、收斂配色（藍為主，金/綠/紫只當語意）、
   等寬數字、柔和層次（不堆厚陰影/虛線）。對應 #839：結構圖示一律 FA、非 emoji。
   ====================================================================== */

/* ── KPI 指標磚（總點擊 / 曝光 / CTR / 排名…）────────────────────── */
.tlc-kpi-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 14px; }
.tlc-kpi {
  background: var(--tc-bg, #050B14);
  border: 1px solid var(--tc-border, #334155);
  border-left: 3px solid var(--tc-blue, #38BDF8);
  border-radius: 12px;
  padding: 15px 18px;
  transition: border-color .2s ease, transform .2s ease;
}
.tlc-kpi:hover { transform: translateY(-2px); }
.tlc-kpi-label { color: var(--tc-muted, #94A3B8); font-size: 0.82rem; font-weight: 600; display: flex; align-items: center; gap: 7px; }
.tlc-kpi-label i { font-size: 0.9rem; line-height: 1; }
.tlc-kpi-value { color: var(--tc-text-main, #F8FAFC); font-size: 1.85rem; font-weight: 800; font-family: 'Inter', ui-monospace, 'SFMono-Regular', monospace; margin-top: 6px; line-height: 1.1; letter-spacing: -0.5px; }
.tlc-kpi-sub { color: var(--tc-muted, #94A3B8); font-size: 0.76rem; margin-top: 4px; display: flex; align-items: center; gap: 5px; }
.tlc-kpi--blue   { border-left-color: var(--tc-blue, #38BDF8); }   .tlc-kpi--blue   .tlc-kpi-label i { color: var(--tc-blue, #38BDF8); }
.tlc-kpi--purple { border-left-color: #A78BFA; }                    .tlc-kpi--purple .tlc-kpi-label i { color: #A78BFA; }
.tlc-kpi--green  { border-left-color: var(--tc-green, #10B981); }   .tlc-kpi--green  .tlc-kpi-label i { color: var(--tc-green, #10B981); }
.tlc-kpi--gold   { border-left-color: var(--tc-gold, #F59E0B); }    .tlc-kpi--gold   .tlc-kpi-label i { color: var(--tc-gold, #F59E0B); }
.tlc-kpi--up   { color: var(--tc-green, #10B981); }

/* ── 數值膠囊（餘額 / 圈存 / 狀態）──────────────────────────────── */
.tlc-chip {
  background: var(--tc-panel, #1E293B);
  border: 1px solid var(--tc-border, #334155);
  border-radius: 12px;
  padding: 9px 16px;
  min-width: 124px;
  display: flex; flex-direction: column; gap: 3px;
}
.tlc-chip-label { color: var(--tc-muted, #94A3B8); font-size: 0.72rem; font-weight: 700; letter-spacing: .3px; display: flex; align-items: center; gap: 6px; }
.tlc-chip-label i { font-size: 0.8rem; }
.tlc-chip-value { color: var(--tc-text-main, #F8FAFC); font-size: 1.15rem; font-weight: 800; font-family: 'Inter', ui-monospace, 'SFMono-Regular', monospace; }
.tlc-chip--gold .tlc-chip-value { color: var(--tc-gold, #F59E0B); }
.tlc-chip--gold .tlc-chip-label i { color: var(--tc-gold, #F59E0B); }

/* ── 區段標題（icon + 標題 + 副標）────────────────────────────── */
.tlc-section-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 18px; }
.tlc-section-title { margin: 0; font-size: 1.45rem; font-weight: 800; color: var(--tc-text-main, #F8FAFC); display: flex; align-items: center; gap: 10px; letter-spacing: -0.3px; }
.tlc-section-title i { color: var(--tc-blue, #38BDF8); font-size: 1.2rem; }
.tlc-section-sub { color: var(--tc-muted, #94A3B8); font-size: 0.9rem; margin: 5px 0 0 0; }

@media (max-width: 768px) {
  .tlc-chip { width: 100%; min-width: 0; }
  .tlc-kpi-value { font-size: 1.6rem; }
}