/**
 * 银行流水尽调分析 — 可视化共享样式 (SPEC-11)
 * 用于 report.html 和 index.html dd-panel
 */

/* ═══════════════════════════════════════════════════════
   CSS 设计令牌
   ═══════════════════════════════════════════════════════ */
:root {
  /* ── 主色系 ── */
  --dd-primary: #40a9ff;
  --dd-primary-light: rgba(64, 169, 255, 0.08);
  --dd-primary-15: rgba(64, 169, 255, 0.15);
  --dd-accent: #f59e0b;
  --dd-accent-dark: #d97706;
  --dd-accent-light: rgba(245, 158, 11, 0.08);
  --dd-accent-15: rgba(245, 158, 11, 0.15);
  --dd-cyan: #2ee6d6;
  --dd-cyan-light: rgba(46, 230, 214, 0.08);

  /* ── 功能色 ── */
  --dd-ok: #52c41a;
  --dd-ok-bg: #d1fae5;
  --dd-ok-text: #065f46;
  --dd-warn: #ffb440;
  --dd-warn-bg: #fef3c7;
  --dd-warn-text: #92400e;
  --dd-err: #fa5a48;
  --dd-err-bg: #fee2e2;
  --dd-err-text: #991b1b;

  /* ── 文字 ── */
  --dd-text: rgba(0,0,0,0.88);
  --dd-text-secondary: rgba(0,0,0,0.56);
  --dd-text-tertiary: rgba(0,0,0,0.32);

  /* ── 背景 ── */
  --dd-bg: #f5f6f8;
  --dd-card-bg: #fff;
  --dd-row-hover: #fafafa;

  /* ── 边框 ── */
  --dd-border: 1px dashed rgba(0,0,0,0.08);
  --dd-border-solid: 1px solid rgba(0,0,0,0.06);

  /* ── 投影 ── */
  --dd-shadow-sm: 0 1px 3px rgba(0,0,0,0.06);
  --dd-shadow-md: 0 2px 8px rgba(0,0,0,0.10);

  /* ── 圆角 ── */
  --dd-radius-sm: 4px;
  --dd-radius: 8px;
  --dd-radius-lg: 12px;

  /* ── 间距 ── */
  --dd-gap-xs: 4px;
  --dd-gap-sm: 8px;
  --dd-gap: 12px;
  --dd-gap-lg: 16px;
  --dd-gap-xl: 24px;

  /* ── 表格 ── */
  --dd-th-bg: #f9fafb;
  --dd-th-weight: 500;
  --dd-th-color: rgba(0,0,0,0.56);
  --dd-cell-p: 8px 12px;

  /* ── 图表 ── */
  --dd-chart-h: 300px;
  --dd-chart-compact-h: 200px;
}

/* ═══════════════════════════════════════════════════════
   基础布局
   ═══════════════════════════════════════════════════════ */
.dd-container { max-width: 1320px; margin: 0 auto; padding: 0 24px; }

/* ═══════════════════════════════════════════════════════
   卡片
   ═══════════════════════════════════════════════════════ */
.dd-cards-row { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--dd-gap-lg); margin-bottom: var(--dd-gap-xl); }
.dd-cards-row.cols-3 { grid-template-columns: repeat(3, 1fr); }

.dd-card {
  background: var(--dd-card-bg); border-radius: var(--dd-radius);
  box-shadow: var(--dd-shadow-sm); padding: 16px 20px;
  transition: box-shadow 0.2s, transform 0.2s;
}
.dd-card:hover { box-shadow: var(--dd-shadow-md); transform: translateY(-2px); }
.dd-card .label { font-size: 12px; color: var(--dd-text-secondary); margin-bottom: 6px; letter-spacing: 0.5px; }
.dd-card .value { font-size: 22px; font-weight: 700; line-height: 1.3; color: var(--dd-text); }
.dd-card .value.small { font-size: 16px; }
.dd-card .sub { font-size: 12px; color: var(--dd-text-secondary); margin-top: 4px; }
.dd-card.warn { border-left: 3px solid var(--dd-warn); }
.dd-card.risk { border-left: 3px solid var(--dd-err); }
.dd-card.ok   { border-left: 3px solid var(--dd-ok); }

/* ═══════════════════════════════════════════════════════
   KPI 指标卡片行 (dd-metric)
   ═══════════════════════════════════════════════════════ */
.dd-metric-row { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: var(--dd-gap); margin-bottom: var(--dd-gap-lg); }
.dd-metric { padding: 12px 16px; background: var(--dd-th-bg); border-radius: var(--dd-radius-sm); }

.dd-cards-row .dd-metric {
  background: var(--dd-card-bg); box-shadow: var(--dd-shadow-sm);
  padding: 16px 20px; border-radius: var(--dd-radius);
  transition: box-shadow 0.2s, transform 0.2s;
}
.dd-cards-row .dd-metric:hover { box-shadow: var(--dd-shadow-md); transform: translateY(-2px); }

/* ═══════════════════════════════════════════════════════
   Section 折叠面板
   ═══════════════════════════════════════════════════════ */
.dd-section { margin-bottom: var(--dd-gap-xl); }
.dd-section-header {
  font-size: 15px; font-weight: 700; padding: 14px 20px;
  background: var(--dd-th-bg); border-radius: var(--dd-radius) var(--dd-radius) 0 0;
  cursor: pointer; display: flex; align-items: center; gap: var(--dd-gap-sm);
  user-select: none; border: var(--dd-border-solid); border-bottom: none;
}
.dd-arrow { transition: transform 0.25s ease; font-size: 12px; display: inline-block; }
.dd-collapsed .dd-arrow { transform: rotate(-90deg); }
.dd-collapsed .dd-section-body { display: none; }
.dd-section-body {
  background: var(--dd-card-bg); border: var(--dd-border-solid); border-top: none;
  border-radius: 0 0 var(--dd-radius) var(--dd-radius); padding: 16px 20px;
}

/* ═══════════════════════════════════════════════════════
   Accordion 折叠面板组
   ═══════════════════════════════════════════════════════ */
.dd-accordion {
  background: var(--dd-card-bg); border-radius: var(--dd-radius);
  box-shadow: var(--dd-shadow-sm); margin-bottom: var(--dd-gap);
  overflow: hidden;
}
.dd-accordion-header {
  padding: 14px 20px; cursor: pointer; display: flex; align-items: center;
  gap: var(--dd-gap-sm); font-weight: 600; font-size: 14px;
  user-select: none; transition: background 0.15s;
}
.dd-accordion-header:hover { background: var(--dd-th-bg); }
.dd-accordion-header .arrow { transition: transform 0.25s ease; font-size: 12px; display: inline-block; }
.dd-accordion.collapsed .arrow { transform: rotate(-90deg); }
.dd-accordion.collapsed .dd-accordion-body { display: none; }
.dd-accordion-body { padding: 0 20px 16px; }
.dd-acc-badge {
  display: inline-block; padding: 2px 10px; border-radius: 12px;
  font-size: 12px; font-weight: 600; margin-left: auto;
}

/* ═══════════════════════════════════════════════════════
   Segmented 分段控件
   ═══════════════════════════════════════════════════════ */
.dd-segmented { display: inline-flex; background: #f3f4f6; border-radius: 10px; padding: 3px; }
.dd-seg-btn {
  padding: 6px 16px; border: none; background: transparent; cursor: pointer;
  font-size: 13px; color: var(--dd-text-secondary); border-radius: 8px;
  transition: all 0.15s; font-family: inherit; white-space: nowrap;
}
.dd-seg-btn:hover { color: var(--dd-text); background: rgba(255,255,255,0.6); }
.dd-seg-btn.active { background: var(--dd-card-bg); color: var(--dd-accent-dark); font-weight: 600; box-shadow: var(--dd-shadow-sm); }
.dd-seg-count { display: inline-block; background: rgba(0,0,0,0.06); border-radius: 10px; padding: 0 6px; font-size: 11px; margin-left: 4px; min-width: 18px; text-align: center; }

/* 尽调报告 Tab */
.dd-tabs {
  display: flex; gap: 0; overflow-x: auto; background: var(--dd-card-bg);
  border: var(--dd-border-solid); border-bottom: none;
  border-radius: var(--dd-radius) var(--dd-radius) 0 0;
}
.dd-tab {
  position: relative; flex: 0 0 auto; padding: 12px 24px;
  border: none; border-bottom: 2px solid transparent;
  background: none; color: var(--dd-text-secondary); cursor: pointer;
  font-size: 14px; font-family: inherit; white-space: nowrap;
  transition: all 0.2s;
}
.dd-tab:hover { color: var(--dd-text); }
.dd-tab.active { color: var(--dd-accent-dark); border-bottom-color: var(--dd-accent); font-weight: 600; }
.dd-tab-panel {
  display: none; padding: 24px; background: var(--dd-card-bg);
  border: var(--dd-border-solid); border-top: none;
  border-radius: 0 0 var(--dd-radius) var(--dd-radius);
}
.dd-tab-panel.active { display: block; }

/* ═══════════════════════════════════════════════════════
   Drawer 抽屉
   ═══════════════════════════════════════════════════════ */
.dd-drawer-overlay { position: fixed; top: 0; left: 0; right: 0; bottom: 0; z-index: 10000; }
.dd-drawer-mask { position: absolute; inset: 0; background: rgba(0,0,0,0.4); opacity: 0; transition: opacity 0.3s ease; pointer-events: none; }
.dd-drawer-panel { position: absolute; top: 0; right: 0; bottom: 0; background: var(--dd-card-bg); box-shadow: -4px 0 16px rgba(0,0,0,0.1); overflow-y: auto; transform: translateX(100%); transition: transform 0.3s ease; display: flex; flex-direction: column; }
.dd-drawer-overlay.open .dd-drawer-mask { opacity: 1; pointer-events: auto; }
.dd-drawer-overlay.open .dd-drawer-panel { transform: translateX(0); }
.dd-drawer-header { padding: 20px 24px; border-bottom: var(--dd-border-solid); display: flex; align-items: center; justify-content: space-between; flex-shrink: 0; }
.dd-drawer-header h3 { margin: 0; font-size: 16px; }
.dd-drawer-close { background: none; border: none; font-size: 22px; cursor: pointer; color: var(--dd-text-secondary); padding: 4px 8px; border-radius: var(--dd-radius-sm); }
.dd-drawer-close:hover { background: var(--dd-th-bg); color: var(--dd-text); }
.dd-drawer-body { padding: 24px; flex: 1; overflow-y: auto; }

/* ── Drawer 拖拽调整宽度（可调宽 Drawer）── */
.dd-drawer-resizer {
  position: absolute; top: 0; left: 0; bottom: 0; width: 8px;
  cursor: col-resize; z-index: 3; touch-action: none;
  user-select: none; -webkit-user-select: none;
}
/* 手柄视觉：默认轻淡竖线，悬停/拖动时高亮（明显但不影响视觉） */
.dd-drawer-resizer::after {
  content: ''; position: absolute; top: 0; bottom: 0; left: 3px; width: 2px;
  background: rgba(0,0,0,0.08); transition: background 0.15s ease, box-shadow 0.15s ease;
}
.dd-drawer-resizer:hover::after,
.dd-drawer-resizer.dd-drag-active::after {
  background: var(--dd-primary, #40a9ff);
  box-shadow: 0 0 4px rgba(64,169,255,0.6);
}
/* 拖动中：禁止选中文字、统一光标、关闭过渡保证流畅无抖动 */
body.dd-drawer-resizing { cursor: col-resize; user-select: none; -webkit-user-select: none; }
body.dd-drawer-resizing .dd-drawer-panel { transition: none; }
.dd-drawer-overlay { outline: none; }

/* ── Drawer 内容自适应：宽度变化时自动换行、不横向溢出 ── */
.dd-drawer-body { overflow-x: hidden; }
.dd-drawer-body .dd-table th,
.dd-drawer-body .dd-table td { white-space: normal; overflow-wrap: anywhere; word-break: break-word; }
.dd-drawer-body pre,
.dd-drawer-body code { white-space: pre-wrap; overflow-wrap: anywhere; word-break: break-word; }

/* 桌面端宽度范围约束：400px ~ 80vw（移动端保持 100vw 全屏，见下方响应式） */
@media (min-width: 769px) {
  .dd-drawer-panel { min-width: 400px; max-width: 80vw; }
}

/* ═══════════════════════════════════════════════════════
   搜索/筛选工具栏
   ═══════════════════════════════════════════════════════ */
.dd-toolbar { display: flex; gap: var(--dd-gap-sm); align-items: center; margin-bottom: var(--dd-gap-lg); flex-wrap: wrap; }
.dd-search-box { position: relative; flex: 1; min-width: 180px; max-width: 320px; }
.dd-search-icon { position: absolute; left: 10px; top: 50%; transform: translateY(-50%); font-size: 14px; opacity: 0.4; pointer-events: none; }
.dd-search-input { width: 100%; padding: 7px 10px 7px 30px; border: var(--dd-border-solid); border-radius: var(--dd-radius-sm); font-size: 13px; font-family: inherit; outline: none; transition: border-color 0.2s; background: var(--dd-card-bg); }
.dd-search-input:focus { border-color: var(--dd-primary); }
.dd-filter-select { padding: 7px 10px; border: var(--dd-border-solid); border-radius: var(--dd-radius-sm); font-size: 13px; font-family: inherit; background: var(--dd-card-bg); cursor: pointer; }

/* ═══════════════════════════════════════════════════════
   表格
   ═══════════════════════════════════════════════════════ */
.dd-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.dd-table thead th { text-align: left; padding: var(--dd-cell-p); background: var(--dd-th-bg); border-bottom: 2px solid rgba(0,0,0,0.06); font-weight: var(--dd-th-weight); color: var(--dd-th-color); white-space: nowrap; }
.dd-table thead th[data-sort] { cursor: pointer; user-select: none; }
.dd-table thead th[data-sort]:hover { color: var(--dd-text); }
.dd-table thead th.sort-asc::after { content: ' ▴'; font-size: 10px; }
.dd-table thead th.sort-desc::after { content: ' ▾'; font-size: 10px; }
.dd-table tbody td { padding: var(--dd-cell-p); border-bottom: var(--dd-border); }
.dd-table tbody tr { transition: background 0.15s; }
.dd-table tbody tr:hover { background: var(--dd-row-hover); }
.dd-table tbody tr.clickable { cursor: pointer; }
.dd-table tbody tr.expanded { background: var(--dd-row-hover); }
.dd-table tbody tr.expandable::before { content: '▸'; display: inline-block; width: 16px; text-align: center; font-size: 10px; transition: transform 0.2s; }
.dd-table tbody tr.expandable.expanded::before { transform: rotate(90deg); }
.dd-table .col-num { text-align: right; font-variant-numeric: tabular-nums; }
.dd-table .col-center { text-align: center; }

/* 子表（行展开） */
.dd-detail-table { margin: 0; font-size: 12px; }
.dd-detail-table td { padding: 6px 12px; background: var(--dd-row-hover); }
.dd-detail-row td { padding: 0; background: var(--dd-row-hover); }

/* ═══════════════════════════════════════════════════════
   徽章/标签
   ═══════════════════════════════════════════════════════ */
.dd-badge { display: inline-block; padding: 2px 10px; border-radius: 12px; font-size: 12px; font-weight: 600; }
.dd-badge-ok   { background: var(--dd-ok-bg); color: var(--dd-ok-text); }
.dd-badge-warn { background: var(--dd-warn-bg); color: var(--dd-warn-text); }
.dd-badge-risk { background: var(--dd-err-bg); color: var(--dd-err-text); }
.dd-badge-muted { background: rgba(0,0,0,0.04); color: var(--dd-text-tertiary); }

.dd-tag { display: inline-block; padding: 2px 8px; border-radius: var(--dd-radius-sm); font-size: 12px; font-weight: 500; }
.dd-tag-blue   { background: var(--dd-primary-light); color: var(--dd-primary); }
.dd-tag-orange { background: rgba(255,180,64,0.12); color: var(--dd-warn); }
.dd-tag-red    { background: rgba(250,90,72,0.10); color: var(--dd-err); }
.dd-tag-green  { background: var(--dd-ok-bg); color: var(--dd-ok-text); }
.dd-tag-gray   { background: rgba(0,0,0,0.04); color: var(--dd-text-secondary); }

/* ═══════════════════════════════════════════════════════
   进度条
   ═══════════════════════════════════════════════════════ */
.dd-quality-card {
  background: var(--dd-card-bg); border-radius: var(--dd-radius);
  box-shadow: var(--dd-shadow-sm); padding: 20px 24px; margin-bottom: var(--dd-gap-lg);
}
.dd-quality-header { display: flex; align-items: center; gap: var(--dd-gap); margin-bottom: var(--dd-gap); }
.dd-quality-label { font-weight: 600; font-size: 14px; }
.dd-quality-grade { font-size: 14px; font-weight: 700; padding: 2px 10px; border-radius: 12px; }
.dd-grade-ok { background: var(--dd-ok-bg); color: var(--dd-ok-text); }
.dd-grade-warn { background: var(--dd-warn-bg); color: var(--dd-warn-text); }
.dd-grade-risk { background: var(--dd-err-bg); color: var(--dd-err-text); }
.dd-quality-score { font-size: 22px; font-weight: 700; margin-left: auto; }

.dd-progress-bar { height: 8px; background: #f0f0f0; border-radius: 4px; margin: 12px 0 8px; overflow: hidden; position: relative; }
.dd-progress-fill { height: 100%; border-radius: 4px; background: linear-gradient(90deg, #fa5a48 0%, #ffb440 40%, #52c41a 70%, #40a9ff 100%); transition: width 1s ease; }

.dd-dim-row { display: flex; align-items: center; gap: var(--dd-gap); margin: 6px 0; font-size: 13px; }
.dd-dim-label { width: 56px; font-weight: 500; color: var(--dd-text-secondary); flex-shrink: 0; }
.dd-dim-bar-bg { flex: 1; height: 6px; background: #f0f0f0; border-radius: 3px; overflow: hidden; }
.dd-dim-bar-fill { height: 100%; border-radius: 3px; background: linear-gradient(90deg, #fa5a48, #ffb440 30%, #52c41a 60%, #40a9ff); transition: width 1s ease; }
.dd-dim-detail { font-size: 11px; color: var(--dd-text-tertiary); display: flex; gap: 6px; flex-wrap: wrap; }

/* ═══════════════════════════════════════════════════════
   风险特征卡片
   ═══════════════════════════════════════════════════════ */
.dd-risk-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: var(--dd-gap); }
.dd-risk-card {
  background: var(--dd-card-bg); border: var(--dd-border-solid); border-radius: var(--dd-radius-sm);
  padding: 16px; cursor: pointer; transition: all 0.15s;
}
.dd-risk-card:hover { box-shadow: var(--dd-shadow-md); transform: translateY(-2px); }
.dd-risk-card.risk-high  { border-left: 3px solid var(--dd-err); }
.dd-risk-card.risk-med   { border-left: 3px solid var(--dd-warn); }
.dd-risk-card.risk-low   { border-left: 3px solid var(--dd-ok); }
.dd-risk-card.risk-none  { border-left: 3px solid #bfbfbf; opacity: 0.7; }

.dd-risk-icon { font-size: 18px; margin-bottom: 6px; }
.dd-risk-name { font-size: 13px; font-weight: 600; margin-bottom: 4px; color: var(--dd-text); }
.dd-risk-count { font-size: 22px; font-weight: 700; color: var(--dd-text); }
.dd-risk-amount { font-size: 12px; color: var(--dd-text-secondary); margin-top: 2px; }

/* ═══════════════════════════════════════════════════════
   行为画像
   ═══════════════════════════════════════════════════════ */
.dd-portrait-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--dd-gap-lg); }
.dd-portrait-group {
  padding: 16px; border: var(--dd-border-solid); border-radius: var(--dd-radius);
  background: linear-gradient(145deg, var(--dd-card-bg), var(--dd-th-bg));
}
.dd-portrait-group h4 {
  margin: 0 0 12px; padding-bottom: 10px; border-bottom: var(--dd-border-solid);
  font-size: 15px; color: var(--dd-text); font-weight: 700;
}
.dd-portrait-metrics { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.dd-portrait-metric { min-width: 0; padding: 10px 12px; border-radius: var(--dd-radius-sm); background: var(--dd-card-bg); }
.dd-portrait-metric > span { display: block; color: var(--dd-text-secondary); font-size: 12px; margin-bottom: 5px; }
.dd-portrait-value { display: block; font-size: 18px; line-height: 1.3; color: var(--dd-text); font-weight: 700; overflow-wrap: anywhere; }

/* 交易对手总览：指标、颜色图例与重点名单 */
.dd-cp-kpis .dd-metric .label { display: flex; align-items: center; gap: 7px; }
.dd-cp-kpis .dd-metric .label i,
.dd-cp-legend i { display: inline-block; width: 9px; height: 9px; border-radius: 50%; flex: 0 0 auto; }
.dd-cp-kpis .cp-in i, .dd-cp-legend i.cp-in { background: #40a9ff; }
.dd-cp-kpis .cp-out i, .dd-cp-legend i.cp-out { background: #f59e0b; }
.dd-cp-kpis .cp-overlap i, .dd-cp-legend i.cp-overlap { background: #8b5cf6; }
.dd-cp-kpis .cp-attention i, .dd-cp-legend i.cp-attention { background: #fa5a48; }
.dd-cp-legend i.cp-related { background: #ffc53d; }
.dd-cp-legend i.cp-empty { background: #bfbfbf; }
.dd-cp-legend {
  display: flex; align-items: center; justify-content: center; flex-wrap: wrap;
  gap: 8px 18px; margin: 14px 0 2px; color: var(--dd-text-secondary); font-size: 12px;
}
.dd-cp-legend span { display: inline-flex; align-items: center; gap: 6px; }
.dd-cp-rank { margin-top: 8px; padding: 14px; border: var(--dd-border-solid); border-radius: var(--dd-radius); background: var(--dd-th-bg); }
.dd-cp-rank-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: 10px; }
.dd-cp-rank-head strong { font-size: 14px; }
.dd-cp-rank-head span { color: var(--dd-text-tertiary); font-size: 11px; }
.dd-cp-rank-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.dd-cp-rank-item {
  display: grid; grid-template-columns: 9px minmax(100px, 1fr) auto; align-items: center;
  gap: 7px 9px; min-width: 0; padding: 10px 12px; border: var(--dd-border-solid);
  border-radius: var(--dd-radius-sm); background: var(--dd-card-bg); color: var(--dd-text);
  font: inherit; text-align: left; cursor: pointer;
}
.dd-cp-rank-item:hover { border-color: var(--dd-primary); box-shadow: var(--dd-shadow-sm); }
.dd-cp-rank-item > i { width: 9px; height: 9px; border-radius: 50%; }
.dd-cp-rank-item .name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 13px; font-weight: 600; }
.dd-cp-rank-item .type { color: var(--dd-text-secondary); font-size: 11px; }
.dd-cp-rank-item .amount { grid-column: 2 / -1; color: var(--dd-text-tertiary); font-size: 11px; }

/* ═══════════════════════════════════════════════════════
   流入流出分布条
   ═══════════════════════════════════════════════════════ */
.dd-dist-bar { display: flex; align-items: center; gap: 6px; padding: 2px 0; }
.dd-dist-in { height: 6px; background: var(--dd-primary); border-radius: 3px 0 0 3px; }
.dd-dist-out { height: 6px; background: var(--dd-accent); border-radius: 0 3px 3px 0; }
.dd-dist-label { font-size: 11px; color: var(--dd-text-tertiary); white-space: nowrap; }

/* ═══════════════════════════════════════════════════════
   图表容器
   ═══════════════════════════════════════════════════════ */
.dd-chart-container { width: 100%; height: var(--dd-chart-h); margin: var(--dd-gap-lg) 0; }
.dd-chart-container.compact { height: var(--dd-chart-compact-h); }
.dd-cashflow-category-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 24px;
  margin-top: 16px;
}
.dd-cashflow-category-grid > * { min-width: 0; }
.dd-cashflow-category-grid .dd-lineage-table-scroll {
  max-width: 100%;
  overflow-x: auto;
}

/* ═══════════════════════════════════════════════════════
   空状态
   ═══════════════════════════════════════════════════════ */
.dd-empty { text-align: center; padding: 48px 24px; color: var(--dd-text-secondary); }
.dd-empty-icon { font-size: 36px; margin-bottom: 12px; }
.dd-empty-title { font-size: 16px; font-weight: 600; color: var(--dd-text); margin-bottom: 4px; }
.dd-empty-desc { font-size: 13px; color: var(--dd-text-secondary); }
.dd-empty.ok { color: var(--dd-ok-text); }
.dd-empty.ok .dd-empty-icon { color: var(--dd-ok); }
.dd-empty.ok .dd-empty-title { color: var(--dd-ok-text); }

/* ═══════════════════════════════════════════════════════
   Spinner
   ═══════════════════════════════════════════════════════ */
@keyframes dd-spin { to { transform: rotate(360deg); } }
.dd-spinner { display: inline-block; width: 20px; height: 20px; border: 2px solid rgba(0,0,0,0.08); border-top-color: var(--dd-accent); border-radius: 50%; animation: dd-spin 0.8s linear infinite; }

/* ═══════════════════════════════════════════════════════
   动画
   ═══════════════════════════════════════════════════════ */
@keyframes dd-pulse { 0%, 100% { transform: scale(1); opacity: 1; } 50% { transform: scale(1.5); opacity: 0.4; } }
@keyframes dd-fadeIn { from { opacity: 0; } to { opacity: 1; } }

/* 断点表格行高亮 (SPEC-22) */
.dd-row-highlight { background: rgba(250, 90, 72, 0.12) !important; }

/* ═══════════════════════════════════════════════════════
   内联按钮
   ═══════════════════════════════════════════════════════ */
.dd-btn-inline { background: none; border: var(--dd-border-solid); border-radius: var(--dd-radius-sm); padding: 3px 10px; font-size: 12px; cursor: pointer; color: var(--dd-text-secondary); font-family: inherit; transition: all 0.15s; }
.dd-btn-inline:hover { border-color: var(--dd-primary); color: var(--dd-primary); background: var(--dd-primary-light); }

/* ═══════════════════════════════════════════════════════
   响应式
   ═══════════════════════════════════════════════════════ */
@media (max-width: 1200px) {
  .dd-cards-row { grid-template-columns: repeat(2, 1fr); }
  .dd-chart-container { height: 260px; }
}
@media (max-width: 768px) {
  .dd-cards-row { grid-template-columns: 1fr; }
  .dd-metric-row { grid-template-columns: 1fr; }
  .dd-chart-container { height: 220px; }
  .dd-risk-cards { grid-template-columns: 1fr; }
  .dd-portrait-grid { grid-template-columns: 1fr; }
  .dd-drawer-panel { width: 100vw !important; }
  .dd-drawer-resizer { display: none; }
  .dd-segmented { overflow-x: auto; }
  .dd-toolbar { flex-direction: column; align-items: stretch; }
  .dd-search-box { max-width: none; }
  .dd-core-counterparty-groups { grid-template-columns: 1fr; }
  .dd-cashflow-category-grid { grid-template-columns: minmax(0, 1fr); }
}

/* ═══════════════════════════════════════════════════════════
   Phase 2A: 结论条 / 风险摘要 / 核心对手方 / Tab 角标
   ═══════════════════════════════════════════════════════════ */
/* 报告结论条 */
.dd-conclusion {
  display: flex; align-items: center; gap: var(--dd-gap-lg);
  background: var(--dd-card-bg); border: var(--dd-border-solid);
  border-left: 3px solid var(--dd-ok);
  border-radius: var(--dd-radius); padding: 12px 20px;
  margin-bottom: var(--dd-gap-xl); box-shadow: var(--dd-shadow-sm);
}
.dd-conclusion.has-risk { border-left-color: var(--dd-err); }
.dd-conclusion-main { display: flex; align-items: center; gap: var(--dd-gap-sm); white-space: nowrap; }
.dd-conclusion-score { font-size: 15px; font-weight: 700; color: var(--dd-text); }
.dd-conclusion-attention-label { font-size: 13px; color: var(--dd-text-secondary); white-space: nowrap; }
.dd-conclusion-risk { font-size: 13px; color: var(--dd-err-text); font-weight: 600; white-space: nowrap; }
.dd-conclusion.has-risk .dd-conclusion-risk { display: inline-block; }
.dd-conclusion-risk:empty { display: none; }
.dd-conclusion-text { font-size: 13px; color: var(--dd-text-secondary); flex: 1; }

/* 风险摘要区 */
.dd-risk-summary { margin-bottom: var(--dd-gap-xl); }
.dd-risk-summary-head {
  font-size: 15px; font-weight: 700; padding: 14px 20px;
  background: var(--dd-th-bg); border-radius: var(--dd-radius) var(--dd-radius) 0 0;
  cursor: pointer; display: flex; align-items: center; gap: var(--dd-gap-sm);
  user-select: none; border: var(--dd-border-solid); border-bottom: none;
}
.dd-risk-summary-body {
  background: var(--dd-card-bg); border: var(--dd-border-solid); border-top: none;
  border-radius: 0 0 var(--dd-radius) var(--dd-radius); padding: 16px 20px;
}
.dd-risk-summary-card { margin-bottom: 0; }
.dd-risk-desc { font-size: 12px; color: var(--dd-text-tertiary); margin-top: 4px; }
.dd-collapsed > .dd-risk-summary-body { display: none; }

/* 核心对手方卡 */
.dd-core-counterparty-card { grid-column: 1 / -1; }
.dd-core-counterparty-groups {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--dd-gap-xl);
}
.dd-cc-group { margin-top: 8px; }
.dd-cc-group + .dd-cc-group { margin-top: 10px; }
.dd-core-counterparty-groups .dd-cc-group { margin-top: 8px; }
.dd-cc-group-title { font-size: 11px; color: var(--dd-text-tertiary); margin-bottom: 4px; letter-spacing: 0.5px; }
.dd-cc-line {
  display: flex; align-items: center; gap: var(--dd-gap-sm);
  padding: 4px 0; font-size: 12px; border-bottom: 1px dashed rgba(0,0,0,0.06);
}
.dd-cc-line:last-child { border-bottom: none; }
.dd-cc-line:hover { background: var(--dd-th-bg); border-radius: 4px; }
.dd-cc-name { font-weight: 600; color: var(--dd-text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 96px; }
.dd-core-counterparty-card .dd-cc-name { flex: 1; max-width: none; }
.dd-cc-amt { margin-left: auto; font-weight: 600; color: var(--dd-text); white-space: nowrap; }
.dd-cc-pct { font-size: 11px; color: var(--dd-text-tertiary); white-space: nowrap; }
.dd-cc-empty { font-size: 12px; color: var(--dd-text-tertiary); padding: 4px 0; }

/* 余额趋势图控制 */
.dd-balance-chart-toolbar {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--dd-gap); margin-bottom: 12px; flex-wrap: wrap;
}
.dd-balance-break-controls { display: flex; align-items: center; gap: var(--dd-gap-sm); }
.dd-balance-break-label, .dd-balance-break-note { font-size: 12px; color: var(--dd-text-tertiary); white-space: nowrap; }

/* 余额断点分组明细 */
.dd-break-overview {
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--dd-gap); margin-bottom: var(--dd-gap-lg);
}
.dd-break-overview > div { padding: 12px 14px; background: var(--dd-th-bg); border-radius: var(--dd-radius-sm); }
.dd-break-overview span { display: block; font-size: 11px; color: var(--dd-text-tertiary); margin-bottom: 4px; }
.dd-break-overview strong { font-size: 16px; color: var(--dd-text); }
.dd-break-toolbar {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  padding: 10px 12px; margin-bottom: 10px; background: var(--dd-th-bg);
  border: var(--dd-border-solid); border-radius: var(--dd-radius-sm);
}
.dd-break-toolbar > span { font-size: 12px; font-weight: 600; color: var(--dd-text-secondary); margin-right: 2px; }
.dd-break-toolbar .dd-btn-inline.is-active { color: var(--dd-primary); border-color: var(--dd-primary); background: var(--dd-primary-light); }
.dd-break-toolbar small { margin-left: auto; color: var(--dd-text-tertiary); font-size: 11px; }
.dd-break-month { border: var(--dd-border-solid); border-radius: var(--dd-radius-sm); overflow: hidden; margin-top: var(--dd-gap-sm); }
.dd-break-month-head {
  width: 100%; display: flex; align-items: center; gap: 8px;
  padding: 8px 10px 8px 0; background: var(--dd-card-bg);
}
.dd-break-month-toggle, .dd-break-day-head {
  width: 100%; border: none; background: var(--dd-card-bg); cursor: pointer;
  display: flex; align-items: center; gap: var(--dd-gap-sm); text-align: left;
  color: var(--dd-text); font-family: inherit;
}
.dd-break-month-toggle { flex: 1; min-width: 0; padding: 4px 4px 4px 14px; }
.dd-break-month-head:hover, .dd-break-day-head:hover { background: var(--dd-th-bg); }
.dd-break-month-toggle:hover { background: transparent; }
.dd-break-month-tools { display: flex; align-items: center; gap: 6px; flex: 0 0 auto; }
.dd-break-month-tools .dd-btn-inline { padding: 3px 8px; font-size: 11px; white-space: nowrap; }
.dd-break-group-arrow { width: 14px; color: var(--dd-text-tertiary); transition: transform 0.18s; flex: 0 0 auto; }
.dd-break-month.is-open > .dd-break-month-head .dd-break-group-arrow,
.dd-break-day.is-open > .dd-break-day-head .dd-break-group-arrow { transform: rotate(90deg); }
.dd-break-month-name { font-size: 14px; font-weight: 700; min-width: 92px; }
.dd-break-day-name { font-size: 13px; font-weight: 600; min-width: 90px; }
.dd-break-group-count { font-size: 12px; color: var(--dd-err-text); white-space: nowrap; }
.dd-break-group-meta { margin-left: auto; font-size: 12px; color: var(--dd-text-secondary); white-space: nowrap; }
.dd-break-month-body { display: none; padding: 0 12px 12px; background: var(--dd-th-bg); }
.dd-break-month.is-open > .dd-break-month-body { display: block; }
.dd-break-day { border-top: 1px dashed rgba(0,0,0,0.08); }
.dd-break-day:first-child { border-top: none; }
.dd-break-day-head { padding: 10px 8px; background: transparent; }
.dd-break-day-detail { display: none; max-height: 420px; overflow: auto; background: var(--dd-card-bg); border-radius: var(--dd-radius-sm); }
.dd-break-day.is-open > .dd-break-day-detail { display: block; }

/* 借贷分析：列表检索与抽屉明细 */
.dd-loan-toolbar {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  padding: 10px 12px; margin-bottom: 12px; background: var(--dd-th-bg);
  border: var(--dd-border-solid); border-radius: var(--dd-radius-sm);
}
.dd-loan-toolbar #seg-loan-type { flex: 0 0 auto; }
.dd-loan-toolbar .dd-search-box { margin-left: auto; }
.dd-loan-toolbar .dd-search-count { color: var(--dd-text-tertiary); font-size: 12px; }
.dd-loan-lender-row td { vertical-align: middle; }
.dd-loan-lender-name {
  max-width: 280px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  color: var(--dd-text); font-size: 13px; font-weight: 600;
}
.dd-loan-lender-reasons {
  max-width: 280px; margin-top: 3px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  color: var(--dd-text-tertiary); font-size: 11px;
}
.dd-loan-detail-summary {
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px;
  margin-bottom: 14px;
}
.dd-loan-detail-summary > div { padding: 12px; background: var(--dd-th-bg); border-radius: var(--dd-radius-sm); }
.dd-loan-detail-summary span { display: block; margin-bottom: 5px; color: var(--dd-text-tertiary); font-size: 11px; }
.dd-loan-detail-summary strong { color: var(--dd-text); font-size: 16px; }
.dd-loan-detail-tags { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; margin-bottom: 14px; }
.dd-loan-detail-tags > span:first-child, .dd-loan-muted { color: var(--dd-text-tertiary); font-size: 12px; }
.dd-loan-detail-toolbar { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; flex-wrap: wrap; }
.dd-loan-detail-toolbar .dd-search-box { max-width: none; }
.dd-loan-detail-toolbar .dd-search-count { margin-left: auto; color: var(--dd-text-tertiary); font-size: 12px; }
.dd-loan-detail-scroll {
  max-height: 460px; overflow: auto; border: var(--dd-border-solid); border-radius: var(--dd-radius-sm);
}
.dd-loan-detail-scroll .dd-table { margin: 0; }
.dd-loan-detail-scroll thead { position: sticky; top: 0; z-index: 1; background: var(--dd-th-bg); }
.dd-loan-detail-pager { display: flex; align-items: center; justify-content: space-between; margin-top: 12px; }
.dd-loan-page-text { color: var(--dd-text-tertiary); font-size: 12px; }

@media (max-width: 768px) {
  .dd-break-overview { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .dd-break-toolbar small { width: 100%; margin-left: 0; }
  .dd-break-month-head { flex-wrap: wrap; padding-left: 0; }
  .dd-break-month-toggle, .dd-break-day-head { flex-wrap: wrap; }
  .dd-break-month-tools { margin-left: 36px; }
  .dd-break-group-meta { width: 100%; margin-left: 22px; white-space: normal; }
  .dd-loan-toolbar { align-items: stretch; }
  .dd-loan-toolbar #seg-loan-type, .dd-loan-toolbar .dd-search-box { width: 100%; margin-left: 0; }
  .dd-loan-detail-summary { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .dd-loan-detail-toolbar .dd-search-box { width: 100%; }
}

@media (max-width: 768px) {
  .dd-cp-rank-list, .dd-portrait-metrics { grid-template-columns: 1fr; }
  .dd-cp-rank-head { display: block; }
  .dd-cp-rank-head span { display: block; margin-top: 4px; }
}

/* Tab 风险角标: 统一口径 = 风险项数量 */
.dd-tab { position: relative; }
.dd-tab-badge {
  display: inline-block; min-width: 18px; height: 18px; line-height: 18px;
  margin-left: 6px; padding: 0 5px; border-radius: 9px; text-align: center;
  background: var(--dd-err-bg); color: var(--dd-err-text);
  font-size: 11px; font-weight: 700; vertical-align: 1px;
}

/* Phase 2A 口径修正: 信息提示卡(存在借贷行为等非风险信息) */
.dd-info-card { border-left-color: var(--dd-primary) !important; background: var(--dd-primary-light); }
.dd-info-card .dd-risk-icon { color: var(--dd-primary); }

/* ═══ 报告元素来源追溯（SPEC-23） ═══ */
.dd-lineage-target {
  position: relative;
  cursor: inherit;
}
.dd-lineage-mark {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  position: absolute;
  top: 6px;
  right: 6px;
  z-index: 2;
  width: 24px;
  height: 24px;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: rgba(180, 83, 9, 0.72);
  font: inherit;
  font-size: 12px;
  font-style: normal;
  font-weight: 700;
  line-height: 1;
  opacity: 0;
  cursor: pointer;
  transition: opacity 120ms ease;
}
.dd-lineage-target:hover > .dd-lineage-mark,
.dd-lineage-target:focus-within > .dd-lineage-mark {
  opacity: 0.32;
}
.dd-lineage-mark:hover { opacity: 1 !important; }
.dd-lineage-mark:focus-visible {
  opacity: 1;
  outline: 2px solid var(--dd-accent, #f59e0b);
  outline-offset: 2px;
}
.dd-table th.dd-lineage-target > .dd-lineage-mark {
  top: -16px;
  right: 0;
  transform: none;
}
.dd-break-day-detail,
.dd-lineage-table-scroll,
.dd-loan-detail-scroll { padding-top: 16px; }
.dd-lineage-popover {
  display: none;
  position: fixed;
  box-sizing: border-box;
  z-index: 10050;
  max-height: min(680px, calc(100vh - 24px));
  overflow: auto;
  padding: 14px;
  border: 1px solid rgba(255,255,255,0.10);
  border-radius: 12px;
  background: #202936;
  color: #e7edf5;
  box-shadow: 0 16px 40px rgba(20, 29, 43, 0.28);
  font-size: 12px;
  line-height: 1.55;
  pointer-events: none;
}
.dd-lineage-popover.is-open {
  display: block;
  pointer-events: auto;
}
.dd-lineage-popover.is-pinned {
  border-color: rgba(245, 158, 11, 0.7);
}
.dd-lineage-popover-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 10px;
  padding-bottom: 9px;
  border-bottom: 1px solid rgba(255,255,255,0.12);
}
.dd-lineage-popover-head > strong { color: #fff; font-size: 14px; }
.dd-lineage-pin-state { flex: none; color: #ffc49f; font-size: 11px; }
.dd-lineage-block { margin: 9px 0; }
.dd-lineage-block > span,
.dd-lineage-detail-rule > span {
  display: block;
  margin-bottom: 3px;
  color: #94a3b8;
  font-size: 11px;
}
.dd-lineage-block p,
.dd-lineage-block ul { margin: 0; color: #edf2f7; }
.dd-lineage-block ul { padding-left: 18px; }
.dd-lineage-block code,
.dd-lineage-evidence code {
  color: #ffd2b6;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  white-space: normal;
  overflow-wrap: anywhere;
}
.dd-lineage-evidence {
  margin-top: 11px;
  padding-top: 10px;
  border-top: 1px solid rgba(255,255,255,0.12);
}
.dd-lineage-evidence h4 { margin: 0 0 7px; color: #fff; font-size: 12px; }
.dd-lineage-evidence-row {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 14px;
  padding: 4px 0;
}
.dd-lineage-evidence-row > span { color: #94a3b8; }
.dd-lineage-evidence-row > strong { color: inherit; text-align: right; overflow-wrap: anywhere; }
.dd-lineage-unavailable {
  display: flex;
  flex-direction: column;
  gap: 3px;
  padding: 9px 10px;
  border-radius: 8px;
  background: rgba(245,158,11,0.12);
  color: #ffd2b6;
}
.dd-lineage-details-btn {
  width: 100%;
  margin-top: 12px;
  padding: 8px 11px;
  border: 1px solid rgba(255,196,159,0.55);
  border-radius: 8px;
  background: transparent;
  color: #ffc49f;
  font: inherit;
  cursor: pointer;
}
.dd-lineage-details-btn:hover { background: rgba(255,196,159,0.08); }
.dd-lineage-detail-tabs {
  display: flex;
  gap: 6px;
  margin-bottom: 14px;
  border-bottom: 1px solid var(--dd-border, #e5e7eb);
}
.dd-lineage-detail-tabs button {
  padding: 9px 12px;
  border: none;
  border-bottom: 2px solid transparent;
  background: transparent;
  color: var(--dd-text-secondary);
  font: inherit;
  cursor: pointer;
}
.dd-lineage-detail-tabs button.is-active {
  border-bottom-color: var(--dd-accent, #f59e0b);
  color: var(--dd-accent-dark, #b45309);
  font-weight: 600;
}
.dd-lineage-detail-pane { display: none; }
.dd-lineage-detail-pane.is-active { display: block; }
.dd-lineage-detail-pane .dd-lineage-evidence-row {
  padding: 8px 0;
  border-bottom: 1px solid var(--dd-border, #eef0f3);
}
.dd-lineage-detail-rule { margin-bottom: 16px; }
.dd-lineage-detail-rule p,
.dd-lineage-detail-rule ul { margin: 4px 0 0; }

@media (max-width: 600px) {
  .dd-lineage-popover {
    width: calc(100vw - 24px) !important;
    max-height: calc(100vh - 24px);
  }
  .dd-lineage-detail-tabs { overflow-x: auto; }
  .dd-lineage-detail-tabs button { white-space: nowrap; }
}

@media (hover: none) {
  .dd-lineage-mark { opacity: 0.45; }
}

@media (prefers-reduced-motion: reduce) {
  .dd-lineage-mark { transition: none; }
}

@media print {
  .dd-lineage-mark,
  .dd-lineage-popover,
  .dd-drawer-overlay:has(.dd-lineage-detail-tabs) { display: none !important; }
  .dd-lineage-target { cursor: default; outline: none !important; }
}

/* ═══════════════════════════════════════════════════════════
   Phase 2B: 数据可查性(复制/分页/搜索计数)
   ═══════════════════════════════════════════════════════════ */
/* 行内复制按钮: hover 显示, 低干扰 */
.dd-copy-cell { position: relative; }
.dd-copy-btn {
  display: none; margin-left: 6px; padding: 0 4px; border: none;
  background: var(--dd-primary-light); color: var(--dd-primary);
  border-radius: 3px; cursor: pointer; font-size: 11px; line-height: 16px;
  vertical-align: middle;
}
.dd-copy-cell:hover .dd-copy-btn { display: inline-block; }
.dd-copy-btn:hover { background: var(--dd-primary); color: #fff; }

/* 搜索结果计数 */
.dd-search-count { white-space: nowrap; }

/* 轻量分页控件 */
.dd-pagination { display: flex; align-items: center; gap: var(--dd-gap-sm); }
.dd-pagination .dd-btn-inline { font-size: 12px; padding: 3px 10px; }
.dd-pagination .dd-btn-inline:disabled { opacity: 0.45; cursor: not-allowed; }

/* 排序指示器 */
th[data-sort].sort-asc::after { content: ' ▲'; font-size: 9px; color: var(--dd-accent-dark); }
th[data-sort].sort-desc::after { content: ' ▼'; font-size: 9px; color: var(--dd-accent-dark); }