/* ══════════════════════════════════════════════════════════════════════════
   流水监控专用样式 · v8.6.136
   ──────────────────────────────────────────────────────────────────────────
   只服务「每日使用消耗」这条主线的三块内容：
     1. .hk-tooltip-dark  —— 图表悬浮卡片，必须解决深色底看不清的问题
     2. .hk-ledger        —— 账号 → 项目 → 产品线 流水台账
     3. .hk-drama         —— 剧创积分卡片（不再裸列，融入台账体系）
   全部使用 Design Token，禁止硬编码色值；数字统一 tabular-nums。
   ══════════════════════════════════════════════════════════════════════════ */

/* ── 1. 悬浮卡片：深色底上的可读性 ─────────────────────────────────────── */
.hk-tooltip-dark {
  --hk-tip-fg: rgba(255, 255, 255, 0.96);
  --hk-tip-fg-2: rgba(255, 255, 255, 0.74);
  --hk-tip-fg-3: rgba(255, 255, 255, 0.52);
  --hk-tip-line: rgba(255, 255, 255, 0.14);
  min-width: 268px;
  max-width: 420px;
  font-size: 12.5px;
  line-height: 1.62;
  color: var(--hk-tip-fg);
  font-variant-numeric: tabular-nums;
}
.hk-tip-head { display:flex; align-items:baseline; justify-content:space-between; gap:12px; }
.hk-tip-head strong { font-size:13.5px; font-weight:700; letter-spacing:.01em; color:var(--hk-tip-fg); }
.hk-tip-head small { font-size:11px; color:var(--hk-tip-fg-3); }
.hk-tip-total { display:flex; align-items:baseline; gap:8px; margin:6px 0 2px; }
.hk-tip-total b { font-size:19px; font-weight:750; font-variant-numeric:tabular-nums; }
.hk-tip-total span { font-size:11.5px; color:var(--hk-tip-fg-2); }
.hk-tip-lines { margin:2px 0 0; }
.hk-tip-lines > div { font-size:12px; color:var(--hk-tip-fg-2); }
.hk-tip-lines b { color:var(--hk-tip-fg); font-weight:600; }
.hk-tip-divide { height:1px; background:var(--hk-tip-line); margin:9px 0 8px; }
.hk-tip-section-title { display:flex; align-items:center; justify-content:space-between; font-size:11.5px; font-weight:700; color:var(--hk-tip-fg); margin-bottom:6px; letter-spacing:.02em; }
.hk-tip-section-title span { font-weight:500; color:var(--hk-tip-fg-3); font-size:10.5px; }
.hk-tip-row { margin:0 0 7px; }
.hk-tip-row-top { display:flex; align-items:baseline; justify-content:space-between; gap:10px; }
.hk-tip-name { font-size:12px; color:var(--hk-tip-fg); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; max-width:236px; }
.hk-tip-name .hk-tip-rank { display:inline-block; min-width:15px; color:var(--hk-tip-fg-3); font-size:10.5px; }
.hk-tip-amount { font-size:12.5px; font-weight:700; font-variant-numeric:tabular-nums; white-space:nowrap; }
.hk-tip-amount em { font-style:normal; font-size:10.5px; font-weight:500; color:var(--hk-tip-fg-2); margin-left:5px; }
.hk-tip-bar { height:4px; border-radius:99px; background:rgba(255,255,255,0.16); margin-top:4px; overflow:hidden; }
.hk-tip-bar > i { display:block; height:100%; border-radius:99px; background:linear-gradient(90deg, var(--chart-1), var(--brand-cyan)); transform-origin:left center; animation:hkTipBarGrow .45s cubic-bezier(.2,.8,.2,1) both; }
.hk-tip-row.is-drama .hk-tip-bar > i { background:linear-gradient(90deg, var(--brand-purple), var(--brand-pink)); }
.hk-tip-meta { font-size:10.8px; color:var(--hk-tip-fg-3); margin-top:3px; }
.hk-tip-foot { font-size:10.5px; color:var(--hk-tip-fg-3); margin-top:7px; line-height:1.6; }
.hk-tip-badge { display:inline-block; padding:1px 6px; border-radius:99px; font-size:10px; font-weight:600; border:1px solid var(--hk-tip-line); color:var(--hk-tip-fg-2); }
.hk-tip-badge.is-drama { color:var(--brand-pink); border-color:color-mix(in srgb, var(--brand-pink) 45%, transparent); }
@keyframes hkTipBarGrow { from { transform:scaleX(0); } to { transform:scaleX(1); } }

/* ── 2. 账号 → 项目 流水台账 ────────────────────────────────────────────── */
.hk-ledger-head { display:flex; align-items:center; justify-content:space-between; gap:10px; flex-wrap:wrap; margin:0 0 10px; }
.hk-ledger-head h3 { margin:0; font-size:13.5px; font-weight:650; color:var(--foreground); }
.hk-ledger-head p { margin:2px 0 0; font-size:11.5px; color:var(--muted-foreground); line-height:1.6; }
.hk-ledger-check { display:inline-flex; align-items:center; gap:6px; padding:4px 10px; border-radius:99px; font-size:11.5px; font-weight:600; border:1px solid var(--border); }
.hk-ledger-check.is-ok { color:var(--success); background:color-mix(in srgb, var(--success) 8%, var(--card)); border-color:color-mix(in srgb, var(--success) 30%, var(--border)); }
.hk-ledger-check.is-bad { color:var(--destructive); background:color-mix(in srgb, var(--destructive) 8%, var(--card)); border-color:color-mix(in srgb, var(--destructive) 32%, var(--border)); }
.hk-ledger-check.is-wait { color:var(--warning); background:color-mix(in srgb, var(--warning) 8%, var(--card)); border-color:color-mix(in srgb, var(--warning) 30%, var(--border)); }
.hk-ledger table { width:100%; border-collapse:collapse; font-size:12px; text-align:left; white-space:nowrap; }
.hk-ledger thead th { position:sticky; top:0; z-index:2; background:var(--card); color:var(--muted-foreground); font-weight:600; font-size:11.5px; padding:9px 12px; border-bottom:1px solid var(--border); }
.hk-ledger tbody td { padding:9px 12px; border-bottom:1px solid color-mix(in srgb, var(--border) 60%, transparent); vertical-align:middle; }
.hk-ledger tbody tr.is-group-end td { border-bottom:1px solid var(--border); }
.hk-ledger tbody tr:hover td { background:color-mix(in srgb, var(--chart-1) 4%, var(--card)); }
.hk-ledger .hk-num { text-align:right; font-variant-numeric:tabular-nums; font-family:var(--font-mono); font-size:11.8px; }
.hk-ledger .hk-strong { font-weight:650; color:var(--foreground); }
.hk-ledger .hk-muted { color:var(--muted-foreground); font-size:11px; }
.hk-ledger .hk-acc { display:flex; flex-direction:column; gap:1px; }
.hk-ledger .hk-acc b { font-size:12px; font-weight:650; }
.hk-ledger .hk-acc span { font-size:10.8px; color:var(--muted-foreground); }
.hk-ledger .hk-proj { display:flex; flex-direction:column; gap:1px; }
.hk-ledger .hk-proj b { font-size:12px; font-weight:600; }
.hk-ledger .hk-proj span { font-size:10.8px; color:var(--muted-foreground); }
.hk-ledger .hk-share { display:flex; align-items:center; gap:8px; min-width:112px; }
.hk-ledger .hk-share-bar { flex:1; height:5px; border-radius:99px; background:color-mix(in srgb, var(--muted) 90%, var(--border)); overflow:hidden; }
.hk-ledger .hk-share-bar > i { display:block; height:100%; border-radius:99px; background:linear-gradient(90deg, var(--chart-2), var(--brand-cyan)); transform-origin:left center; animation:hkLedgerBar .6s cubic-bezier(.2,.8,.2,1) both; }
.hk-ledger .hk-share em { font-style:normal; font-size:11px; color:var(--muted-foreground); font-variant-numeric:tabular-nums; min-width:40px; text-align:right; }
.hk-ledger .hk-drama-cell { display:inline-flex; align-items:center; gap:6px; font-variant-numeric:tabular-nums; }
.hk-ledger .hk-drama-cell i { width:6px; height:6px; border-radius:50%; background:var(--brand-purple); }
.hk-ledger .hk-drama-cell.is-none { color:var(--muted-foreground); }
.hk-ledger .hk-drama-cell.is-none i { background:var(--muted-foreground); }
.hk-ledger tfoot td { padding:10px 12px; font-weight:700; background:color-mix(in srgb, var(--card) 94%, var(--accent)); border-top:1px solid var(--border); font-variant-numeric:tabular-nums; }
.hk-ledger details > summary { cursor:pointer; color:var(--chart-2); font-size:11.5px; list-style:none; }
.hk-ledger details > summary::-webkit-details-marker { display:none; }
.hk-ledger details > summary::before { content:"▸"; display:inline-block; margin-right:4px; transition:transform .18s ease; }
.hk-ledger details[open] > summary::before { transform:rotate(90deg); }
.hk-ledger-days { background:color-mix(in srgb, var(--card) 97%, var(--accent)); }
.hk-ledger-days table { font-size:11.3px; }
.hk-ledger-days td { padding:5px 10px; border-bottom:1px dashed color-mix(in srgb, var(--border) 70%, transparent); }
@keyframes hkLedgerBar { from { transform:scaleX(0); opacity:.5; } to { transform:scaleX(1); opacity:1; } }

/* ── 3. 剧创积分卡片 ───────────────────────────────────────────────────── */
.hk-drama { border:1px solid var(--border); border-radius:12px; background:var(--card); overflow:hidden; }
.hk-drama > header { display:flex; align-items:flex-start; justify-content:space-between; gap:14px; padding:14px 16px 12px; border-bottom:1px solid var(--border); background:linear-gradient(180deg, color-mix(in srgb, var(--brand-purple) 4%, var(--card)), var(--card)); }
.hk-drama > header h3 { margin:0; font-size:13.5px; font-weight:650; display:flex; align-items:center; gap:7px; }
.hk-drama > header h3 i { width:7px; height:7px; border-radius:50%; background:var(--brand-purple); box-shadow:0 0 0 3px color-mix(in srgb, var(--brand-purple) 16%, transparent); }
.hk-drama > header p { margin:5px 0 0; font-size:11.5px; color:var(--muted-foreground); line-height:1.65; max-width:820px; }
.hk-drama-legend { display:flex; gap:12px; flex-wrap:wrap; font-size:11px; color:var(--muted-foreground); }
.hk-drama-legend span { display:inline-flex; align-items:center; gap:5px; }
.hk-drama-legend i { width:8px; height:8px; border-radius:2px; }
.hk-drama table { width:100%; border-collapse:collapse; font-size:12px; white-space:nowrap; }
.hk-drama thead th { background:color-mix(in srgb, var(--muted) 45%, var(--card)); color:var(--muted-foreground); font-weight:600; font-size:11.5px; padding:9px 12px; border-bottom:1px solid var(--border); position:sticky; top:0; }
.hk-drama tbody td { padding:9px 12px; border-bottom:1px solid color-mix(in srgb, var(--border) 55%, transparent); font-variant-numeric:tabular-nums; }
.hk-drama tbody tr:hover td { background:color-mix(in srgb, var(--brand-purple) 3%, var(--card)); }
.hk-drama .hk-num { text-align:right; font-family:var(--font-mono); font-size:11.8px; }
.hk-drama .hk-source { font-size:10.8px; color:var(--muted-foreground); }
.hk-drama .hk-source.is-derived { color:var(--brand-purple); }
.hk-drama > footer { padding:10px 16px 12px; font-size:11px; color:var(--muted-foreground); line-height:1.7; border-top:1px solid var(--border); background:color-mix(in srgb, var(--card) 97%, var(--accent)); }
.hk-drama .hk-mini-bar { display:inline-block; height:4px; border-radius:99px; background:linear-gradient(90deg, var(--brand-purple), var(--brand-pink)); vertical-align:middle; margin-left:8px; transform-origin:left center; animation:hkLedgerBar .6s cubic-bezier(.2,.8,.2,1) both; }

/* ── 4. 动效：上量红 / 掉量绿 / 持平中性（站内与邮件口径一致） ─────────── */
.hk-trend { display:inline-flex; align-items:center; gap:5px; padding:2px 8px; border-radius:99px; font-size:11.5px; font-weight:650; border:1px solid transparent; }
.hk-trend.is-up { color:var(--destructive); background:color-mix(in srgb, var(--destructive) 9%, var(--card)); border-color:color-mix(in srgb, var(--destructive) 28%, transparent); }
.hk-trend.is-down { color:var(--success); background:color-mix(in srgb, var(--success) 10%, var(--card)); border-color:color-mix(in srgb, var(--success) 28%, transparent); }
.hk-trend.is-flat { color:var(--muted-foreground); background:var(--muted); border-color:var(--border); }
.hk-trend .hk-trend-arrow { display:inline-block; animation:hkTrendFloat 1.6s ease-in-out infinite; }
.hk-trend.is-up .hk-trend-arrow { color:var(--destructive); }
.hk-trend.is-down .hk-trend-arrow { color:var(--success); }
@keyframes hkTrendFloat { 0%,100% { transform:translateY(0); } 50% { transform:translateY(-2px); } }
.hk-trend.is-up::after,
.hk-trend.is-down::after { content:""; width:5px; height:5px; border-radius:50%; margin-left:2px; animation:hkTrendPulse 1.9s ease-in-out infinite; }
.hk-trend.is-up::after { background:var(--destructive); }
.hk-trend.is-down::after { background:var(--success); }
@keyframes hkTrendPulse { 0%,100% { opacity:.35; box-shadow:0 0 0 0 currentColor; } 50% { opacity:1; box-shadow:0 0 0 4px color-mix(in srgb, currentColor 18%, transparent); } }

/* 行入场：只在需要强调的台账出现，克制、不抢视线 */
.hk-fade-in { animation:hkFadeIn .32s ease both; }
@keyframes hkFadeIn { from { opacity:0; transform:translateY(6px); } to { opacity:1; transform:none; } }

/* 数字统一等宽，避免跳字造成跳动 */
.hk-num, .hk-tip-amount, .hk-tip-total b, .hk-drama .hk-num { font-variant-numeric:tabular-nums; }

@media (prefers-reduced-motion: reduce) {
  .hk-tip-bar > i, .hk-ledger .hk-share-bar > i, .hk-drama .hk-mini-bar,
  .hk-trend .hk-trend-arrow, .hk-trend.is-up::after, .hk-trend.is-down::after, .hk-fade-in { animation:none !important; }
}

/* 窄屏：台账与剧创卡片保留横向滚动，关键列前置不被挤没 */
@media (max-width: 860px) {
  .hk-ledger table, .hk-drama table { min-width: 720px; }
  .hk-tooltip-dark { min-width: 210px; max-width: 300px; font-size:12px; }
  .hk-tip-name { max-width: 168px; }
}