/* 厂家活动管理页样式（仅本页使用，独立维护） */
:root {
  --cm-primary: #2b6de8;
  --cm-primary-dark: #1f56bd;
  --cm-danger: #d9363e;
  --cm-text: #1f2329;
  --cm-text-sub: #646a73;
  --cm-border: #e5e6eb;
  --cm-bg: #f5f6f8;
  --cm-card-bg: #ffffff;
  --cm-radius: 12px;
}

* { box-sizing: border-box; margin: 0; padding: 0; }
[hidden] { display: none !important; }

html, body {
  font-family: -apple-system, BlinkMacSystemFont, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  font-size: 16px;
  line-height: 1.5;
  background: var(--cm-bg);
  color: var(--cm-text);
  -webkit-text-size-adjust: 100%;
}

button { font-family: inherit; cursor: pointer; }
input, select, textarea { font-family: inherit; font-size: 14px; }

/* ===== 顶部栏 ===== */
.cm-header {
  position: sticky; top: 0; z-index: 20;
  background: var(--cm-card-bg);
  border-bottom: 1px solid #e4e9ed;
}
.cm-header-inner {
  max-width: 720px; height: 46px; margin: 0 auto; padding: 0 6px;
  display: grid; grid-template-columns: 44px minmax(0, 1fr) 44px; align-items: center; gap: 6px;
}
.cm-title { min-width: 0; font-size: 20px; font-weight: 600; text-align: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cm-btn-back { width: 26px; height: 26px; display: inline-flex; align-items: center; justify-content: center; border: 0; background: transparent; }
.cm-btn-back img { width: 22px; height: 22px; display: block; }
.cm-header-spacer { width: 44px; height: 44px; }

/* ===== 权限不足 ===== */
.cm-state-card {
  max-width: 480px; margin: 80px auto; padding: 40px 24px;
  background: var(--cm-card-bg); border-radius: var(--cm-radius);
  text-align: center;
}
.cm-state-icon { font-size: 40px; margin-bottom: 12px; }
.cm-state-text { color: var(--cm-text-sub); margin-bottom: 20px; line-height: 1.6; }

/* ===== 主容器 ===== */
.cm-container { max-width: 720px; margin: 0 auto; padding: 6px; }

.cm-btn-primary {
  background: var(--cm-primary); color: #fff; border: none;
  border-radius: 8px; padding: 6px; font-size: 14px;
}
.cm-btn-primary:hover { background: var(--cm-primary-dark); }
.cm-btn-primary:disabled { background: #a9c1ef; cursor: not-allowed; }
.cm-btn-secondary {
  background: var(--cm-card-bg); color: var(--cm-text); border: 1px solid var(--cm-border);
  border-radius: 8px; padding: 6px; font-size: 14px;
}
.cm-btn-danger {
  background: var(--cm-danger); color: #fff; border: none;
  border-radius: 8px; padding: 6px; font-size: 14px;
}
.cm-btn-sm { padding: 6px 12px; font-size: 14px; }

/* ===== 名额卡片 ===== */
.cm-quota-card {
  background: var(--cm-card-bg); border-radius: var(--cm-radius);
  padding: 6px; margin-bottom: 6px;
  border: 1px solid var(--cm-border);
}
.cm-quota-head { margin-bottom: 6px; }
.cm-quota-title { font-size: 14px; font-weight: 600; }
.cm-quota-sub { font-size: 12px; font-weight: 500; color: var(--cm-text-sub); margin-top: 4px; }
.cm-quota-stats {
  display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 6px;
}
.cm-quota-stat {
  flex: 1 1 90px; background: #f7f9fc; border: 1px solid var(--cm-border);
  border-radius: 10px; padding: 6px; text-align: center;
}
.cm-quota-label { display: block; font-size: 12px; font-weight: 500; color: var(--cm-text-sub); margin-bottom: 4px; }
.cm-quota-value { font-size: 12px; font-weight: 500; color: var(--cm-primary); }

.cm-slot-form .cm-field { display: block; font-size: 12px; font-weight: 500; color: var(--cm-text-sub); margin-bottom: 6px; }
.cm-slot-row { display: flex; align-items: end; gap: 6px; }
.cm-slot-row .cm-input { flex: 1; min-width: 0; }
.cm-slot-row .cm-btn-primary { flex: 0 0 auto; width: auto; white-space: nowrap; }
.cm-input {
  width: 100%; border: 1px solid var(--cm-border); border-radius: 8px;
  padding: 6px; font-size: 14px; background: #fff;
}
.cm-input:focus, .cm-select:focus, .cm-textarea:focus {
  outline: none; border-color: var(--cm-primary);
}
.cm-help { font-size: 12px; font-weight: 500; color: var(--cm-text-sub); margin-top: 6px; }
.cm-feedback { font-size: 12px; font-weight: 500; margin-top: 6px; }
.cm-feedback.success { color: #16a34a; }
.cm-feedback.error { color: var(--cm-danger); }

/* ===== 活动列表 ===== */
.cm-section {
  background: var(--cm-card-bg); border-radius: var(--cm-radius);
  padding: 6px; border: 1px solid var(--cm-border);
}
.cm-list-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 6px; gap: 6px; }
.cm-list-actions { display: flex; gap: 6px; }
.cm-section-title { font-size: 14px; font-weight: 600; }
.cm-filter-row { display: flex; align-items: center; gap: 6px; margin-bottom: 6px; flex-wrap: wrap; }
.cm-filter { display: flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 500; color: var(--cm-text-sub); }
.cm-select {
  border: 1px solid var(--cm-border); border-radius: 8px; padding: 6px 10px;
  background: #fff; font-size: 14px;
}
.cm-loading, .cm-empty, .cm-error { font-size: 12px; font-weight: 500; padding: 16px 0; text-align: center; }
.cm-empty { color: var(--cm-text-sub); }
.cm-error { color: var(--cm-danger); }
.cm-list { display: flex; flex-direction: column; gap: 6px; }

.cm-campaign-card {
  border: 1px solid var(--cm-border); border-radius: 10px; padding: 6px;
}
.cm-campaign-card.is-expired { background: #fafafa; }
.cm-card-head { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.cm-card-title { font-size: 14px; font-weight: 600; flex: 1 1 auto; min-width: 0; }
.cm-card-meta { font-size: 12px; font-weight: 500; color: var(--cm-text-sub); margin-top: 6px; line-height: 1.7; }
.cm-card-actions { display: flex; gap: 6px; margin-top: 6px; flex-wrap: wrap; }
.cm-metrics { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 6px; margin-top: 8px; padding-top: 8px; border-top: 1px solid var(--cm-border); }
.cm-metrics div { min-width: 0; text-align: center; }
.cm-metrics span, .cm-metrics b { display: block; }
.cm-metrics span { color: var(--cm-text-sub); font-size: 11px; white-space: nowrap; }
.cm-metrics b { color: var(--cm-primary); font-size: 16px; font-weight: 600; margin-top: 2px; }
.cm-btn-link {
  background: none; border: none; color: var(--cm-primary); font-size: 14px; padding: 2px;
}
.cm-btn-link.danger { color: var(--cm-danger); }
.cm-btn-link:disabled { color: #b9bcc4; cursor: not-allowed; }

.cm-badge {
  display: inline-block; font-size: 12px; padding: 2px 8px; border-radius: 10px; white-space: nowrap;
}
.cm-badge.draft { background: #eef0f3; color: #646a73; }
.cm-badge.scheduled { background: #e8f3ff; color: #2b6de8; }
.cm-badge.active { background: #e6f7ef; color: #16a34a; }
.cm-badge.ended { background: #f5f5f5; color: #8a8f99; }
.cm-badge.cancelled { background: #fdecec; color: #d9363e; }
.cm-badge.effective { background: #e6f7ef; color: #16a34a; }
.cm-badge.ineffective { background: #fdecec; color: #d9363e; }

.cm-pagination {
  display: flex; align-items: center; justify-content: center; gap: 6px; margin-top: 6px;
}
.cm-pagination button {
  border: 1px solid var(--cm-border); background: #fff; border-radius: 8px;
  padding: 6px; font-size: 14px;
}
.cm-pagination button:disabled { opacity: 0.5; cursor: not-allowed; }
.cm-page-info { font-size: 12px; font-weight: 500; color: var(--cm-text-sub); }

/* ===== 弹窗 ===== */
.cm-modal-overlay {
  position: fixed; inset: 0; z-index: 100; background: rgba(0, 0, 0, 0.45);
  display: flex; align-items: flex-start; justify-content: center;
  padding: 6px; overflow-y: auto;
}
.cm-modal {
  background: #fff; border-radius: 14px; width: 100%; max-width: 560px;
  margin: 6px auto; box-shadow: 0 8px 32px rgba(0, 0, 0, 0.16);
}
.cm-modal-sm { max-width: 400px; }
.cm-modal-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 6px; border-bottom: 1px solid var(--cm-border);
}
.cm-modal-title { font-size: 14px; font-weight: 600; }
.cm-modal-close {
  background: none; border: none; font-size: 22px; line-height: 1; color: var(--cm-text-sub);
}
.cm-modal-body { padding: 6px; }

.cm-form-group { margin-bottom: 6px; }
.cm-form-group-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 6px; }
.cm-form-group-head .cm-field { margin-bottom: 0; }
.cm-campaign-price-tools { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; }
.cm-store-discount-input { width: 76px; padding: 6px 8px; }
.cm-item-row-form {
  border: 1px solid var(--cm-border); border-radius: 10px;
  padding: 6px; margin-bottom: 6px; background: #fbfcfe;
}
.cm-item-row-form .cm-field { display: block; font-size: 12px; font-weight: 500; color: var(--cm-text-sub); margin-bottom: 6px; }
.cm-product-select { display: flex; flex-direction: column; gap: 6px; }
.cm-product-select .cm-select { width: 100%; padding: 6px; font-size: 14px; }
.cm-radio-row { display: flex; gap: 6px; margin-bottom: 6px; }
.cm-radio { display: flex; align-items: center; gap: 5px; font-size: 14px; }
.cm-price-row { display: flex; gap: 6px; align-items: center; }
.cm-price-row .cm-input { flex: 1; min-width: 0; }
.cm-discount-row { display: flex; gap: 6px; align-items: center; flex: 1; min-width: 0; }
.cm-discount-row .cm-input { flex: 1; min-width: 0; }
.cm-unit { color: var(--cm-text-sub); font-size: 12px; font-weight: 500; }
.cm-price-preview { margin: 6px 0 0; color: var(--cm-text-sub); font-size: 12px; line-height: 1.4; }
.cm-sku-discount-preview { margin-top: 6px; padding: 6px 8px; border: 1px solid var(--cm-border); border-radius: 6px; background: #f8fafc; font-size: 12px; }
.cm-sku-discount-title { color: var(--cm-text-sub); margin-bottom: 3px; }
.cm-sku-discount-table { width: 100%; border-collapse: collapse; table-layout: fixed; }
.cm-sku-discount-table th,
.cm-sku-discount-table td { padding: 3px 6px; border-bottom: 1px solid #e5eaf0; text-align: left; white-space: nowrap; }
.cm-sku-discount-table th { color: var(--cm-text-sub); font-weight: 500; }
.cm-sku-discount-table tr:last-child td { border-bottom: 0; }
.cm-sku-discount-table .cm-discounted-price { color: #c0392b; font-weight: 600; }
.cm-sku-discount-input { width: 66px; padding: 3px 5px; border: 1px solid #d7dee7; border-radius: 4px; font-size: 12px; }
.cm-time-row { display: flex; gap: 6px; flex-wrap: nowrap; }
.cm-time-field { flex: 1 1 0; min-width: 0; }
.cm-time-field .cm-input { width: 100%; min-width: 0; font-size: 12px; }
.cm-textarea {
  width: 100%; border: 1px solid var(--cm-border); border-radius: 8px;
  padding: 6px; font-size: 14px; resize: vertical;
}
.cm-headline-fields { border: 1px solid #dbe5f5; background: #f5f9ff; padding: 10px; border-radius: 8px; }
.cm-headline-preview { display: block; width: 100%; aspect-ratio: 21 / 9; object-fit: cover; border-radius: 6px; margin-top: 6px; background: #f1f3f5; }
.cm-cropper { position: relative; width: 100%; aspect-ratio: 21 / 9; overflow: hidden; background: #111; margin-top: 6px; border-radius: 6px; cursor: grab; }
.cm-cropper:active { cursor: grabbing; }
.cm-cropper img { position: absolute; max-width: none; display: block; user-select: none; transform-origin: 0 0; }
.cm-cropper-mask { position: absolute; inset: 0; border: 2px solid #fff; pointer-events: none; }
.cm-headline-points { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; align-items: end; margin-top: 8px; }
.cm-headline-points .cm-field { margin-bottom: 0; }
.cm-headline-product-preview { display: flex; align-items: center; gap: 8px; margin-top: 8px; padding: 6px; background: #fff; border: 1px solid var(--cm-border); border-radius: 6px; }
.cm-headline-product-preview img { width: 56px; height: 56px; object-fit: cover; border-radius: 4px; background: #f1f3f5; }
.cm-headline-product-preview b, .cm-headline-product-preview span { display: block; font-size: 12px; }
.cm-headline-product-preview span { color: var(--cm-text-sub); margin-top: 2px; }
@media (max-width: 480px) { .cm-headline-points { grid-template-columns: 1fr; } }
.cm-modal-actions { display: flex; justify-content: flex-end; gap: 6px; margin-top: 6px; }

.cm-confirm-text { font-size: 16px; line-height: 1.6; margin-bottom: 8px; }
.cm-confirm-warn { font-size: 12px; font-weight: 500; color: var(--cm-danger); line-height: 1.6; }

/* ===== 详情 ===== */
.cm-detail-row {
  display: flex; justify-content: space-between; gap: 6px;
  padding: 6px 0; border-bottom: 1px dashed var(--cm-border); font-size: 16px;
}
.cm-detail-label { color: var(--cm-text-sub); flex-shrink: 0; font-size: 12px; font-weight: 500; }
.cm-detail-value { text-align: right; word-break: break-all; }
.cm-detail-section { margin-top: 6px; }
.cm-modal-body > .cm-metrics { margin: 8px 0; }
.cm-detail-section-title { font-size: 14px; font-weight: 600; margin-bottom: 6px; }
.cm-item-row {
  border: 1px solid var(--cm-border); border-radius: 8px; padding: 6px; margin-bottom: 6px;
  font-size: 16px;
}
.cm-item-row .cm-item-main { font-weight: 500; margin-bottom: 4px; }

/* ===== 移动端适配（320/375/390 语义结构，不依赖横向滚动） ===== */
@media (max-width: 480px) {
  .cm-header-inner { padding: 0 6px; }
  .cm-container { padding: 6px; }
  .cm-quota-stats { gap: 6px; }
  .cm-quota-stat { flex: 1 1 30%; }
  .cm-slot-row { flex-direction: row; }
  .cm-price-row { flex-direction: column; align-items: stretch; }
  .cm-modal { margin: 6px auto; }
  .cm-metrics { gap: 2px; }
  .cm-metrics span { font-size: 10px; }
  .cm-metrics b { font-size: 14px; }
}
 .cm-headline-detail-image { display:block; width:min(360px,100%); max-height:160px; object-fit:cover; border-radius:6px; }
.cm-headline-card-main{display:flex;gap:10px;align-items:flex-start}.cm-headline-thumb{width:120px;height:58px;object-fit:cover;border-radius:5px;background:#f1f3f5}.cm-headline-label{font-size:12px;color:#e67700;font-weight:600}.cm-headline-title{font-size:14px;font-weight:600;margin-top:2px}.cm-headline-product,.cm-headline-created{font-size:12px;color:#646a73;margin-top:3px}.cm-headline-metrics{display:flex;justify-content:space-between;margin-top:9px;padding-top:7px;border-top:1px solid #e5e6eb;font-size:11px;color:#646a73}
.cm-product-thumb{display:block;width:54px;height:42px;object-fit:cover;border-radius:4px;margin-top:5px}
.cm-headline-row{display:flex;align-items:center;gap:8px;padding:4px 0}.cm-headline-row-content{display:flex;align-items:center;gap:8px;min-width:0;flex:1;flex-wrap:wrap}.cm-headline-row-top .cm-headline-billing-text{flex-basis:100%;order:3}.cm-headline-row-bottom .cm-headline-row-content{display:block}.cm-headline-row-top .cm-headline-label{white-space:nowrap}.cm-headline-billing-text{font-size:11px;color:#d46b08;white-space:nowrap}.cm-headline-row-top .cm-btn-link{margin-left:auto}.cm-headline-row-bottom .cm-headline-thumb{width:120px;height:58px;margin:0}
.cm-headline-card-main>div:first-child{display:flex;gap:6px;flex:0 0 auto}.cm-headline-card-main>div:last-child{min-width:0;flex:1}.cm-headline-card{position:relative}.cm-headline-billing-inline{white-space:nowrap}.cm-headline-billing-inline .cm-btn-link{margin-left:8px;float:right}.cm-headline-product{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cm-headline-billing-inline{display:flex;align-items:center;font-size:11px;color:#d46b08;margin:2px 0 4px}.cm-headline-billing-inline .cm-btn-link{margin-left:auto}.cm-headline-label{font-size:12px}.cm-headline-product{font-size:12px}.cm-headline-created{display:block;font-size:11px;margin-top:5px}.cm-headline-metrics{font-size:11px}
.cm-card-products{display:flex;align-items:center;gap:6px;font-size:12px}.cm-campaign-product-thumb{width:42px;height:32px;object-fit:cover;border-radius:4px}