/* campaign-overview.css —— 投放「数据概览」剩余结构块（ADS-03 第二块）样式
   为什么不写进 styles.css：styles.css 已超行数上限（单文件棘轮只许缩小），新样式单开文件
   （先例 rec-editor.css / ops-status.css / dash-daily.css）。 */

/* 卡头右侧动作区（趋势卡页签 + 每日详细数据入口 / 渠道卡计数 + 绑定渠道） */
.oc .oc-card-head > .oc-head-actions { margin-left: auto; display: flex; align-items: center; gap: 8px; }
.oc .oc-head-actions .ad-tabs { margin-bottom: 0; }
.oc .oc-head-actions .oc-head-count { font-size: 11.5px; color: #9ca3af; }
.oc .ad-jump-btn { color: #8b1a1a; border-color: #8b1a1a; background: #fff; }
.oc .ad-jump-btn:hover { background: #8b1a1a; color: #fff; }

/* 趋势折线图 */
.oc .chart-legend { display: flex; gap: 16px; align-items: center; margin-bottom: 8px; }
.oc .chart-legend .legend-item { display: inline-flex; align-items: center; gap: 6px; font-size: 11.5px; color: #4b5563; }
.oc .chart-legend .legend-dot { width: 9px; height: 9px; border-radius: 50%; display: inline-block; }
.oc .chart-box { border: 1px solid #f0f1f3; border-radius: 8px; padding: 8px 10px; background: #fff; }
.oc .chart-box .trend-svg { width: 100%; height: 180px; display: block; }

/* 排行卡三列 / 渠道四小卡 */
.oc .rank-grid { display: grid; gap: 14px; }
.oc .rank-grid.cols-3 { grid-template-columns: 1fr 1fr 1fr; }
.oc .rank-grid.cols-4 { grid-template-columns: repeat(4, 1fr); gap: 10px; margin-bottom: 12px; }
.oc .rank-card { border: 1px solid #f0f1f3; border-radius: 8px; padding: 10px 12px; background: #fff; }
.oc .rank-head { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 8px; }
.oc .rank-title { font-size: 12.5px; font-weight: 700; color: #111827; display: inline-flex; align-items: center; gap: 6px; }
.oc .rank-more { font-size: 11px; font-weight: 600; color: #8b1a1a; cursor: pointer; }
.oc .rank-tabs { margin-left: auto; display: inline-flex; gap: 2px; background: #f3f4f6; border-radius: 6px; padding: 2px; }
.oc .rank-tab { font-size: 11px; padding: 2px 8px; border-radius: 5px; cursor: pointer; color: #6b7280; }
.oc .rank-tab.active { background: #fff; color: #111827; font-weight: 700; box-shadow: 0 1px 2px rgba(0, 0, 0, .06); }
.oc .rank-list { max-height: 420px; overflow: auto; }
.oc .rank-mini { background: #f9fafb; border-radius: 8px; padding: 10px 14px; }
.oc .rank-mini-top { display: flex; align-items: center; gap: 6px; }
.oc .rank-mini-label { font-size: 11px; color: #9ca3af; }
.oc .rank-mini-value { font-size: 18px; font-weight: 800; color: #2563eb; }
.oc .rank-mini-sub { font-size: 10px; color: #9ca3af; }

/* 元素级说明位（三问） */
.oc .gap-row { border: 1px dashed #e5e7eb; border-radius: 8px; padding: 8px 10px; margin-bottom: 8px; }
.oc .gap-row-label { font-size: 12px; font-weight: 700; color: #374151; margin-bottom: 4px; }
.oc .gap-row-q { font-size: 11.5px; color: #6b7280; line-height: 1.7; }