/* campaign-material.css —— 投放「物料库」整页样式（原型 page-materials 的 5 子页签 + 素材卡墙）
   与 campaign.js / campaign-creative.js 的类名约定一致：全部规则挂在 .oc .oc-mat-* / .mat-* 命名空间下。 */
.oc .oc-mat-page .ad-kpis { margin-bottom: 16px; }
.oc .oc-mat-tabs { display: flex; gap: 4px; border-bottom: 1px solid #e5e7eb; margin-bottom: 14px; flex-wrap: wrap; }
.oc .oc-mat-tab { padding: 8px 16px; font-size: 13px; color: #6b7280; cursor: pointer; border-bottom: 2px solid transparent; }
.oc .oc-mat-tab:hover { color: #8b1a1a; }
.oc .oc-mat-tab.active { color: #8b1a1a; border-bottom-color: #8b1a1a; font-weight: 700; }
.oc .oc-mat-filter { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; margin-bottom: 14px; }
/* 原型筛选条一行放完：fld-input 默认 width:100% 会把下拉/搜索撑成三行（同 .oc-filter 的处理） */
.oc .oc-mat-filter .fld-input { width: auto; box-sizing: border-box; height: 30px; padding: 6px 10px; font-size: 12.5px; border-radius: 8px; }
.oc .oc-mat-filter select.fld-input { min-width: 118px; }
.oc .oc-mat-search { flex: 1; display: flex; justify-content: flex-end; min-width: 200px; }
.oc .oc-mat-search .fld-input { width: 220px; }
.oc .oc-mat-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }
.oc .mat-card { background: #fff; border: 1px solid #f0f1f3; border-radius: 10px; overflow: hidden; }
.oc .mat-thumb { height: 140px; background: linear-gradient(135deg, #1e293b, #334155); position: relative; display: flex; align-items: center; justify-content: center; }
.oc .mat-thumb-icon { font-size: 40px; color: rgba(255, 255, 255, .22); }
.oc .mat-thumb-tl { position: absolute; top: 8px; left: 8px; }
.oc .mat-thumb-tr { position: absolute; top: 8px; right: 8px; }
.oc .mat-thumb-br { position: absolute; bottom: 8px; right: 8px; background: rgba(0, 0, 0, .6); color: #fff; font-size: 10px; padding: 2px 6px; border-radius: 4px; }
.oc .mat-body { padding: 10px 12px; }
.oc .mat-name { font-size: 12.5px; font-weight: 700; color: #1f2937; margin-bottom: 6px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.oc .mat-meta { font-size: 11px; color: #6b7280; line-height: 1.7; }
.oc .mat-meta-row { display: flex; justify-content: space-between; margin-top: 4px; color: #9ca3af; }
.oc .mat-tag { font-size: 10px; padding: 2px 8px; border-radius: 4px; font-weight: 600; background: #eef2ff; color: #4338ca; }
.oc .mat-tag.state-active { background: #dcfce7; color: #059669; }
.oc .mat-tag.state-draft { background: #fef3c7; color: #d97706; }
.oc .mat-tag.state-deactivated { background: #f3f4f6; color: #6b7280; }
.oc .oc-mat-pixel { background: #f8fafc; border: 1px dashed #e5e7eb; border-radius: 10px; padding: 14px; font-size: 12px; color: #6b7280; line-height: 1.8; }