/* Creative Lab — styles scoped inside Meta Ads container */
#ma-dashboard .cl-root { padding: 0 32px 32px; }
@keyframes cl-fadeIn { from { opacity: 0; transform: translateY(-10px); } to { opacity: 1; transform: none; } }

/* Subtabs */
#ma-dashboard .cl-subtabs { display: flex; gap: 6px; padding: 16px 32px; border-bottom: 1px solid #27272a; }
#ma-dashboard .cl-subtab { padding: 8px 18px; border-radius: 8px; background: #18181b; color: #a1a1aa; border: 1px solid #27272a; font-size: 13px; font-weight: 500; cursor: pointer; transition: all .2s; }
#ma-dashboard .cl-subtab:hover { background: #27272a; color: #fafafa; }
#ma-dashboard .cl-subtab.active { background: linear-gradient(135deg, #8b5cf6, #6d28d9); color: #fff; border-color: transparent; box-shadow: 0 0 20px rgba(139,92,246,0.3); }

#ma-dashboard .cl-body { padding: 20px 32px; }

/* Labels / inputs */
#ma-dashboard .cl-label { display: block; font-size: 11px; color: #71717a; text-transform: uppercase; letter-spacing: .5px; margin-bottom: 6px; font-weight: 600; }

/* Lib tabs */
#ma-dashboard .cl-lib-tab { padding: 8px 16px; border-radius: 8px; background: #18181b; color: #a1a1aa; border: 1px solid #27272a; font-size: 13px; cursor: pointer; transition: all .2s; }
#ma-dashboard .cl-lib-tab:hover { background: #27272a; color: #fafafa; }
#ma-dashboard .cl-lib-tab.active { background: #27272a; color: #fafafa; border-color: #8b5cf6; }

/* Upload zone */
#ma-dashboard .cl-upload-zone { border: 2px dashed #3f3f46; background: #18181b; border-radius: 14px; margin-bottom: 16px; transition: all .2s; cursor: pointer; }
#ma-dashboard .cl-upload-zone:hover { border-color: #8b5cf6; background: #1a1a1f; }
#ma-dashboard .cl-upload-zone.drag { border-color: #8b5cf6; background: rgba(139,92,246,0.08); }

/* Filter row */
#ma-dashboard .cl-filter-row { display: flex; align-items: center; gap: 10px; margin-bottom: 16px; flex-wrap: wrap; }
#ma-dashboard .cl-filter-row .cl-label { margin: 0; }

/* Buttons */
#ma-dashboard .cl-btn-primary { padding: 9px 20px !important; border-radius: 10px !important; background: linear-gradient(135deg, #8b5cf6, #6d28d9) !important; color: #fff !important; border: none !important; font-size: 13px !important; font-weight: 600; cursor: pointer; transition: all .2s; }
#ma-dashboard .cl-btn-primary:hover:not(:disabled) { transform: translateY(-1px); box-shadow: 0 6px 20px rgba(139,92,246,0.4); }
#ma-dashboard .cl-btn-primary:disabled { opacity: .5; cursor: not-allowed; }
#ma-dashboard .cl-btn-primary.cl-btn-big { padding: 14px 32px !important; font-size: 15px !important; margin-top: 20px; }
#ma-dashboard .cl-btn-secondary { padding: 8px 16px !important; border-radius: 10px !important; background: #27272a !important; color: #fafafa !important; border: 1px solid #3f3f46 !important; font-size: 13px !important; cursor: pointer; transition: all .2s; }
#ma-dashboard .cl-btn-secondary:hover { background: #3f3f46 !important; }
#ma-dashboard .cl-btn-mini { padding: 4px 10px !important; border-radius: 6px !important; background: #27272a !important; color: #a1a1aa !important; border: 1px solid #3f3f46 !important; font-size: 11px !important; cursor: pointer; margin-left: 4px; }
#ma-dashboard .cl-btn-mini:hover { background: #3f3f46 !important; color: #fafafa !important; }
#ma-dashboard .cl-btn-danger { color: #f87171 !important; border-color: rgba(239,68,68,0.3) !important; }
#ma-dashboard .cl-btn-danger:hover { background: rgba(239,68,68,0.1) !important; }

/* Card grid */
#ma-dashboard .cl-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 14px; margin-top: 16px; }
#ma-dashboard .cl-card { background: #18181b; border: 1px solid #27272a; border-radius: 12px; overflow: hidden; transition: all .2s; position: relative; display: flex; flex-direction: column; }
#ma-dashboard .cl-card:hover { border-color: #8b5cf6; transform: translateY(-2px); }
#ma-dashboard .cl-card-media { height: 160px; background: #0a0a0a; display: flex; align-items: center; justify-content: center; position: relative; overflow: hidden; }
#ma-dashboard .cl-card-media img { max-width: 100%; max-height: 100%; object-fit: cover; width: 100%; height: 100%; }
#ma-dashboard .cl-video-badge { position: absolute; top: 8px; left: 8px; background: rgba(0,0,0,0.7); color: #fff; padding: 3px 8px; border-radius: 6px; font-size: 10px; font-weight: 700; }
#ma-dashboard .cl-winner-badge { position: absolute; top: 8px; right: 8px; background: linear-gradient(135deg, #f59e0b, #d97706); color: #fff; padding: 3px 8px; border-radius: 6px; font-size: 10px; font-weight: 700; }
#ma-dashboard .cl-card-body { padding: 10px 12px; flex: 1; }
#ma-dashboard .cl-card-title { font-size: 13px; font-weight: 600; color: #fafafa; margin-bottom: 6px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#ma-dashboard .cl-card-meta { display: flex; align-items: center; gap: 6px; font-size: 11px; color: #71717a; }
#ma-dashboard .cl-dot { width: 8px; height: 8px; border-radius: 50%; display: inline-block; }
#ma-dashboard .cl-card-status { font-size: 11px; color: #a1a1aa; }
#ma-dashboard .cl-card-tags { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 6px; }
#ma-dashboard .cl-card-stats { font-size: 11px; color: #71717a; margin-top: 6px; }
#ma-dashboard .cl-card-actions { padding: 8px 12px; display: flex; justify-content: flex-end; gap: 6px; border-top: 1px solid #27272a; }

/* Tags */
#ma-dashboard .cl-tag { display: inline-block; padding: 2px 8px; border-radius: 6px; background: #27272a; color: #a1a1aa; font-size: 10px; font-weight: 500; }
#ma-dashboard .cl-tag-cat { background: rgba(139,92,246,0.15); color: #c4b5fd; }

/* Section cards */
#ma-dashboard .cl-section-card { background: #18181b; border: 1px solid #27272a; border-radius: 14px; padding: 20px; margin-bottom: 16px; }
#ma-dashboard .cl-section-title { font-size: 15px; font-weight: 600; color: #fafafa; margin-bottom: 14px; display: flex; align-items: center; gap: 8px; }

/* Form grid */
#ma-dashboard .cl-form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }

/* Copies list */
#ma-dashboard .cl-copies-list { display: flex; flex-direction: column; gap: 10px; margin-top: 14px; }
#ma-dashboard .cl-copy-card { background: #18181b; border: 1px solid #27272a; border-radius: 12px; padding: 14px; }
#ma-dashboard .cl-copy-card:hover { border-color: #3f3f46; }

/* Empty / loading */
#ma-dashboard .cl-empty { text-align: center; padding: 40px; color: #71717a; font-size: 13px; }
#ma-dashboard .cl-loading { text-align: center; padding: 30px; color: #a1a1aa; font-size: 13px; }

/* AI results */
#ma-dashboard .cl-ai-result { padding: 12px; background: #0e0e10; border: 1px solid #27272a; border-radius: 10px; margin-bottom: 8px; }

/* Stepper */
#ma-dashboard .cl-stepper { display: flex; gap: 8px; margin-bottom: 20px; align-items: center; }
#ma-dashboard .cl-step { display: flex; align-items: center; gap: 8px; padding: 8px 14px; border-radius: 20px; background: #18181b; border: 1px solid #27272a; color: #71717a; font-size: 12px; font-weight: 500; }
#ma-dashboard .cl-step.active { background: rgba(139,92,246,0.15); border-color: #8b5cf6; color: #c4b5fd; }
#ma-dashboard .cl-step.done { background: rgba(34,197,94,0.1); border-color: rgba(34,197,94,0.4); color: #4ade80; }
#ma-dashboard .cl-step-num { width: 22px; height: 22px; border-radius: 50%; background: #27272a; color: inherit; display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 11px; }
#ma-dashboard .cl-step.active .cl-step-num { background: #8b5cf6; color: #fff; }
#ma-dashboard .cl-step.done .cl-step-num { background: #22c55e; color: #fff; }

/* Wizard nav */
#ma-dashboard .cl-wizard-nav { display: flex; justify-content: space-between; margin-top: 16px; gap: 10px; }
#ma-dashboard .cl-wizard-nav button:only-child { margin-left: auto; }

/* Select grids */
#ma-dashboard .cl-select-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 10px; margin: 14px 0; }
#ma-dashboard .cl-select-card { display: flex; flex-direction: column; gap: 6px; padding: 10px; background: #0e0e10; border: 2px solid #27272a; border-radius: 10px; cursor: pointer; transition: all .2s; }
#ma-dashboard .cl-select-card:hover { border-color: #3f3f46; }
#ma-dashboard .cl-select-card input[type="checkbox"] { align-self: flex-end; }
#ma-dashboard .cl-select-card:has(input:checked) { border-color: #8b5cf6; background: rgba(139,92,246,0.08); }
#ma-dashboard .cl-select-card img { width: 100%; height: 100px; object-fit: cover; border-radius: 6px; background: #0a0a0a; }
#ma-dashboard .cl-select-label { font-size: 12px; font-weight: 600; color: #fafafa; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#ma-dashboard .cl-select-sub { font-size: 10px; color: #71717a; }

#ma-dashboard .cl-select-list { display: flex; flex-direction: column; gap: 8px; margin: 14px 0; }
#ma-dashboard .cl-select-copy { display: flex; align-items: flex-start; gap: 10px; padding: 12px; background: #0e0e10; border: 2px solid #27272a; border-radius: 10px; cursor: pointer; }
#ma-dashboard .cl-select-copy:has(input:checked) { border-color: #8b5cf6; background: rgba(139,92,246,0.05); }

#ma-dashboard .cl-combinations { margin-top: 14px; padding: 12px 16px; background: rgba(139,92,246,0.1); border: 1px solid rgba(139,92,246,0.3); border-radius: 10px; color: #c4b5fd; }

/* Recap */
#ma-dashboard .cl-recap { background: #0e0e10; border: 1px solid #27272a; border-radius: 10px; padding: 16px; margin-bottom: 14px; }
#ma-dashboard .cl-recap > div { padding: 6px 0; color: #e4e4e7; font-size: 13px; border-bottom: 1px solid rgba(39,39,42,0.5); }
#ma-dashboard .cl-recap > div:last-child { border-bottom: none; }
#ma-dashboard .cl-recap strong { color: #a1a1aa; font-weight: 500; display: inline-block; min-width: 150px; }

#ma-dashboard .cl-warn { padding: 10px 14px; background: rgba(245,158,11,0.1); border: 1px solid rgba(245,158,11,0.3); border-radius: 10px; color: #fcd34d; font-size: 12px; margin: 14px 0; }

/* Test row */
#ma-dashboard .cl-test-row { display: flex; justify-content: space-between; align-items: center; padding: 14px 18px; background: #18181b; border: 1px solid #27272a; border-radius: 12px; margin-bottom: 8px; transition: all .2s; }
#ma-dashboard .cl-test-row:hover { border-color: #3f3f46; }

/* Modal */
#ma-dashboard .cl-modal { position: fixed; inset: 0; background: rgba(0,0,0,0.75); backdrop-filter: blur(8px); z-index: 9999; display: flex; align-items: center; justify-content: center; padding: 20px; animation: cl-fadeIn .15s; }
#ma-dashboard .cl-modal-inner { background: #09090b; border: 1px solid #27272a; border-radius: 16px; padding: 24px; max-width: 1100px; width: 100%; max-height: 85vh; overflow: auto; }

/* Table */
#ma-dashboard .cl-table-wrap { overflow-x: auto; }
#ma-dashboard .cl-table { width: 100%; border-collapse: collapse; font-size: 12px; }
#ma-dashboard .cl-table th { position: sticky; top: 0; background: #18181b; padding: 10px 8px; text-align: left; color: #71717a; font-weight: 500; border-bottom: 1px solid #27272a; white-space: nowrap; }
#ma-dashboard .cl-table td { padding: 8px; border-bottom: 1px solid rgba(39,39,42,0.5); color: #e4e4e7; vertical-align: middle; }
#ma-dashboard .cl-table tr:hover td { background: #1c1c20; }

#ma-dashboard .cl-tabs-row { display: flex; align-items: center; }

/* ── Custom checkboxes Creative Lab ── */
#ma-dashboard .cl-select-card input[type="checkbox"],
#ma-dashboard .cl-select-copy input[type="checkbox"],
#ma-dashboard .cl-ai-result input[type="checkbox"] {
  -webkit-appearance: none !important;
  -moz-appearance: none !important;
  appearance: none !important;
  width: 22px !important;
  height: 22px !important;
  border: 2px solid #3f3f46 !important;
  border-radius: 6px !important;
  background: #0e0e10 !important;
  cursor: pointer !important;
  position: relative !important;
  transition: all .2s;
  flex-shrink: 0;
  padding: 0 !important;
  margin: 0 !important;
}

#ma-dashboard .cl-select-card input[type="checkbox"]:hover,
#ma-dashboard .cl-select-copy input[type="checkbox"]:hover,
#ma-dashboard .cl-ai-result input[type="checkbox"]:hover {
  border-color: #8b5cf6 !important;
}

#ma-dashboard .cl-select-card input[type="checkbox"]:checked,
#ma-dashboard .cl-select-copy input[type="checkbox"]:checked,
#ma-dashboard .cl-ai-result input[type="checkbox"]:checked {
  background: linear-gradient(135deg, #8b5cf6, #6d28d9) !important;
  border-color: #8b5cf6 !important;
  box-shadow: 0 0 12px rgba(139,92,246,0.45) !important;
}

#ma-dashboard .cl-select-card input[type="checkbox"]:checked::after,
#ma-dashboard .cl-select-copy input[type="checkbox"]:checked::after,
#ma-dashboard .cl-ai-result input[type="checkbox"]:checked::after {
  content: '';
  position: absolute;
  left: 6px;
  top: 2px;
  width: 5px;
  height: 11px;
  border: solid #fff;
  border-width: 0 2.5px 2.5px 0;
  transform: rotate(45deg);
}

/* Align checkbox in select-card (top right) */
#ma-dashboard .cl-select-card input[type="checkbox"] {
  position: absolute !important;
  top: 8px !important;
  right: 8px !important;
  z-index: 2;
  background: rgba(0,0,0,0.7) !important;
  backdrop-filter: blur(4px);
}

#ma-dashboard .cl-select-card { position: relative; }

/* Checkbox in auto_launch toggle (step 1) */
#ma-dashboard #cl-w-auto {
  width: 22px !important;
  height: 22px !important;
  border: 2px solid #3f3f46 !important;
  border-radius: 6px !important;
  background: #0e0e10 !important;
  cursor: pointer !important;
  -webkit-appearance: none !important;
  appearance: none !important;
  position: relative;
  transition: all .2s;
}
#ma-dashboard #cl-w-auto:checked {
  background: linear-gradient(135deg, #8b5cf6, #6d28d9) !important;
  border-color: #8b5cf6 !important;
  box-shadow: 0 0 12px rgba(139,92,246,0.45) !important;
}
#ma-dashboard #cl-w-auto:checked::after {
  content: '';
  position: absolute;
  left: 6px;
  top: 2px;
  width: 5px;
  height: 11px;
  border: solid #fff;
  border-width: 0 2.5px 2.5px 0;
  transform: rotate(45deg);
}

/* Select card preview image fallback */
#ma-dashboard .cl-select-card img {
  width: 100% !important;
  height: 110px !important;
  object-fit: cover !important;
  border-radius: 8px !important;
  background: linear-gradient(135deg, #1a1a1f, #0e0e10) !important;
  display: block !important;
}

/* Show video badge on select cards */
#ma-dashboard .cl-select-card .cl-select-sub {
  font-size: 11px;
  color: #a1a1aa;
  display: flex;
  align-items: center;
  gap: 4px;
}