@import url('/ui/fonts/gf/fonts.css?v=20261030');

/* Reusable brand templates */
.template-mode-tabs {
  display: inline-flex;
  width: max-content;
  max-width: 100%;
  gap: 8px;
  margin-bottom: 10px;
  padding: 4px;
  border: 1px solid rgba(124, 58, 237, 0.16);
  border-radius: 14px;
  background: rgba(248, 250, 252, 0.9);
}
.template-mode-tab {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-height: 32px;
  padding: 6px 10px;
  border-radius: 11px;
  color: var(--brand-muted);
  font-size: 12px;
  font-weight: 500;
  cursor: pointer;
}
.template-mode-tab input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}
.template-mode-tab:has(input:checked) {
  background: #fff;
  color: var(--brand-text);
  box-shadow: 0 1px 4px rgba(15, 23, 42, 0.08);
}
.template-picker-panel {
  display: grid;
  gap: 10px;
}
#visual-template-panel[hidden],
#visual-template-generate-panel[hidden] {
  display: none !important;
}
.template-picker-list {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}
.template-picker-card,
.template-empty-card {
  border: 1px solid rgba(124, 58, 237, 0.14);
  border-radius: 16px;
  background: #fff;
}
.template-picker-card {
  display: grid;
  gap: 8px;
  padding: 8px;
  text-align: start;
  cursor: pointer;
}
.template-picker-card.selected {
  border-color: var(--brand-primary);
  box-shadow: 0 0 0 3px rgba(124, 58, 237, 0.14);
}
.template-picker-thumb {
  display: block;
  aspect-ratio: 1 / 1;
  border-radius: 12px;
  overflow: hidden;
  background: linear-gradient(135deg, rgba(124, 58, 237, 0.09), rgba(14, 165, 233, 0.08));
}
.template-picker-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.template-picker-name {
  min-width: 0;
  color: var(--brand-text);
  font-size: 12px;
  font-weight: 700;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.template-picker-hint {
  min-width: 0;
  color: var(--brand-muted);
  font-size: 11px;
  line-height: 1.35;
  display: -webkit-box;
  overflow: hidden;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}
.template-empty-card {
  grid-column: 1 / -1;
  display: grid;
  gap: 4px;
  padding: 14px;
  color: var(--brand-muted);
  font-size: 13px;
}
.template-empty-card strong {
  color: var(--brand-text);
}
.template-picker-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.ob-template-toolbar {
  justify-content: flex-start;
  margin: -6px 0 18px;
}
.template-create-modal-card,
.template-all-modal-card {
  width: min(520px, calc(100vw - 28px));
  padding: 22px 24px 24px;
  font-family: 'Tajawal', system-ui, -apple-system, 'Segoe UI', sans-serif;
}
.template-modal-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 18px;
}
.template-modal-header-copy {
  flex: 1;
  min-width: 0;
}
.template-modal-header .modal-close {
  position: static;
  top: auto;
  right: auto;
  left: auto;
  flex-shrink: 0;
  margin-top: 2px;
}
.template-all-modal-card .modal-title,
.template-create-modal-card .modal-title {
  margin: 0 0 8px;
  font-size: 20px;
  font-weight: 700;
  line-height: 1.35;
  color: var(--brand-text);
  font-family: inherit;
  padding: 0;
}
.template-all-modal-card .hint,
.template-create-modal-card .hint {
  margin: 0;
  font-family: inherit;
  font-size: 14px;
  font-weight: 400;
  line-height: 1.55;
  color: var(--brand-muted);
}
.template-create-modal-card .swipe-visual-previews .swipe-visual-thumb-enlargeable {
  width: 120px;
  height: 120px;
  cursor: zoom-in;
}
.template-create-modal-card .swipe-visual-thumb-enlargeable img {
  cursor: zoom-in;
}
.template-create-modal-card .swipe-visual-thumb-enlargeable .swipe-visual-thumb-remove {
  opacity: 1;
}
.template-create-tabs {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  width: max-content;
  max-width: 100%;
  align-self: flex-start;
  margin: 0 0 18px;
  padding: 4px;
  border-radius: 999px;
  border: 1px solid rgba(124, 58, 237, 0.16);
  background: rgba(248, 250, 252, 0.9);
}
.template-create-tab {
  min-height: 34px;
  padding: 0 14px;
  border: none;
  border-radius: 999px;
  background: transparent;
  color: var(--brand-muted);
  font-family: inherit;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease, box-shadow 0.15s ease;
}
.template-create-tab.active {
  background: #fff;
  color: var(--brand-text);
  box-shadow: 0 1px 3px rgba(15, 23, 42, 0.08);
}
.template-create-panel[hidden],
.template-create-stage[hidden] {
  display: none !important;
}
.template-create-stage {
  display: flex;
  flex-direction: column;
  align-items: stretch;
}
.template-create-panel {
  display: grid;
  gap: 14px;
}
.template-create-modal-card .field {
  display: grid;
  gap: 8px;
  margin: 0;
}
.template-create-modal-card .field > span {
  font-size: 14px;
  font-weight: 500;
  color: var(--brand-text);
  line-height: 1.4;
}
.template-create-modal-card .field input,
.template-create-modal-card .field textarea,
.template-create-modal-card .field input[type="file"] {
  width: 100%;
  border: 1px solid var(--brand-border);
  border-radius: 12px;
  padding: 12px 14px;
  font-size: 14px;
  font-family: inherit;
  line-height: 1.45;
  color: var(--brand-text);
  background: #fff;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.template-create-modal-card .field input:focus,
.template-create-modal-card .field textarea:focus {
  outline: none;
  border-color: rgba(124, 58, 237, 0.45);
  box-shadow: 0 0 0 3px rgba(124, 58, 237, 0.12);
}
.template-create-modal-card .field textarea {
  min-height: 112px;
  resize: vertical;
}
.template-create-modal-card .field input[type="file"] {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}
.template-create-file-picker {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  min-height: 48px;
  padding: 8px 10px 8px 12px;
  border: 1px solid var(--brand-border);
  border-radius: 12px;
  background: #fff;
}
.template-create-file-name {
  flex: 1;
  min-width: 0;
  font-size: 13px;
  font-weight: 500;
  line-height: 1.4;
  color: var(--brand-muted);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  text-align: start;
}
.template-create-file-name.has-file {
  color: var(--brand-text);
}
.template-create-file-trigger {
  flex-shrink: 0;
  min-height: 34px;
  padding: 0 12px;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
}
.template-create-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 16px;
}
.template-create-modal-card .button {
  font-family: inherit;
  font-size: 14px;
  font-weight: 700;
}
.template-create-progress {
  display: grid;
  gap: 12px;
  justify-items: center;
  padding: 28px 12px;
  text-align: center;
  color: var(--brand-muted);
  font-family: inherit;
  font-size: 14px;
  line-height: 1.55;
}
.template-create-progress strong {
  font-size: 16px;
  font-weight: 700;
  color: var(--brand-text);
}
.template-create-progress .loading-hourglass {
  font-size: 28px;
}
.template-create-preview {
  display: grid;
  gap: 12px;
}
.template-create-preview img {
  width: 100%;
  max-height: min(52vh, 420px);
  object-fit: contain;
  border-radius: 16px;
  border: 1px solid rgba(124, 58, 237, 0.14);
  background: rgba(248, 250, 252, 0.8);
}
.template-all-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  gap: 12px;
  margin-top: 16px;
  max-height: min(62vh, 560px);
  overflow: auto;
  padding-inline-end: 2px;
}
.template-all-card {
  display: grid;
  gap: 8px;
  padding: 10px;
  border: 1px solid rgba(124, 58, 237, 0.14);
  border-radius: 16px;
  background: rgba(248, 250, 252, 0.8);
  cursor: pointer;
  text-align: start;
  font-family: inherit;
  transition: border-color 0.15s ease, box-shadow 0.15s ease, transform 0.15s ease;
}
.template-all-card:hover,
.template-all-card.selected {
  border-color: rgba(124, 58, 237, 0.45);
  box-shadow: 0 8px 24px rgba(124, 58, 237, 0.12);
}
.template-all-card.selected {
  transform: translateY(-1px);
}
.template-all-card .template-picker-thumb {
  aspect-ratio: 3 / 4;
}
.template-job-tag {
  border-color: rgba(124, 58, 237, 0.22);
  background: rgba(124, 58, 237, 0.08);
  color: #5b21b6;
}
.template-job-tag-button {
  cursor: pointer;
  border: 1px solid rgba(124, 58, 237, 0.22);
  font-family: 'Tajawal', system-ui, -apple-system, 'Segoe UI', sans-serif;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.02em;
  text-transform: none;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}
.template-job-tag-button:hover,
.template-job-tag-button:focus-visible {
  background: rgba(124, 58, 237, 0.14);
  border-color: rgba(124, 58, 237, 0.36);
  color: #4c1d95;
}
.job-template-pill-card {
  margin-top: 8px;
  align-self: flex-start;
}
.job-item-body .template-job-tag-button {
  text-transform: none;
}
.design-template-preview-modal-card {
  width: min(560px, calc(100vw - 28px));
  font-family: 'Tajawal', system-ui, -apple-system, 'Segoe UI', sans-serif;
}
.design-template-preview-body {
  display: grid;
  gap: 12px;
}
.design-template-preview-image {
  width: 100%;
  max-height: min(70vh, 640px);
  object-fit: contain;
  border-radius: 16px;
  border: 1px solid rgba(124, 58, 237, 0.14);
  background: rgba(248, 250, 252, 0.8);
}
.design-template-preview-empty {
  padding: 18px 12px;
  text-align: center;
}
.design-template-preview-footer,
.design-template-edit-footer {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  flex-wrap: wrap;
  margin-top: 4px;
}
.design-template-edit-modal-card {
  width: min(640px, calc(100vw - 28px));
  max-height: calc(100vh - 32px);
  overflow: auto;
  font-family: 'Tajawal', system-ui, -apple-system, 'Segoe UI', sans-serif;
}
.design-template-edit-form {
  display: grid;
  gap: 12px;
}
.design-template-edit-label {
  font-size: 14px;
  font-weight: 500;
  color: var(--brand-ink, #1a202c);
}
.design-template-edit-design-block {
  display: grid;
  gap: 8px;
}
.design-template-edit-preview-col {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 8px;
  width: 100%;
}
.design-template-edit-preview-btn.design-template-edit-preview-medium {
  width: min(280px, 100%);
  height: auto;
  min-height: 140px;
  max-height: none;
  padding: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  align-self: flex-start;
}
.design-template-edit-preview-btn.design-template-edit-preview-medium .design-template-edit-image {
  width: 100%;
  height: auto;
  max-height: min(42vh, 320px);
  object-fit: contain;
  border-radius: 10px;
}
.design-template-edit-preview-wrap {
  display: flex;
  align-items: center;
  gap: 10px;
}
.design-template-edit-preview-btn {
  padding: 0;
  border: 1px solid rgba(124, 58, 237, 0.14);
  border-radius: 14px;
  overflow: hidden;
  cursor: zoom-in;
  background: rgba(248, 250, 252, 0.8);
  flex-shrink: 0;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.design-template-edit-preview-btn:hover,
.design-template-edit-preview-btn:focus-visible {
  border-color: rgba(124, 58, 237, 0.45);
  box-shadow: 0 0 0 3px rgba(124, 58, 237, 0.12);
}
.design-template-edit-preview-hint {
  font-size: 13px;
  color: var(--brand-muted, #64748b);
}
.design-template-edit-status {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  line-height: 1.4;
  color: var(--brand-muted, #64748b);
}
.design-template-edit-status .loading-hourglass {
  font-size: 14px;
  line-height: 1;
}
.design-template-edit-image {
  display: block;
  border: 0;
  background: transparent;
  max-height: none;
}
.design-template-edit-thumbs {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}
.design-template-edit-thumb {
  width: 56px;
  height: 56px;
  padding: 0;
  border-radius: 10px;
  border: 2px solid transparent;
  background: #fff;
  overflow: hidden;
  cursor: pointer;
}
.design-template-edit-thumb.active {
  border-color: rgba(124, 58, 237, 0.55);
}
.design-template-edit-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.design-template-edit-actions {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}
@media (max-width: 720px) {
  .template-picker-list {
    grid-template-columns: 1fr;
  }
}

:root {
  --brand-primary: #7c3aed;
  --brand-secondary: #ec4899;
  --brand-accent: #ffffff;
  --brand-ink: #1a202c;
  --brand-bg: #f7f7fb;
  --brand-card: #ffffff;
  --brand-border: #e6e8f0;
  --brand-muted: #626976; /* 4.5:1 or better on the app's tinted panels */
  --brand-success: #16a34a;
  --brand-warning: #f59e0b;
  --brand-danger: #ef4444;
  --shadow-soft: 0 10px 30px rgba(147, 51, 234, 0.12);
  --shadow-card: 0 12px 30px rgba(15, 23, 42, 0.08);
  /* Overlay stack — keep below ~1M so native file pickers stay above fixed modals */
  --z-adly-chat-drawer: 220000;
  --z-create-panel: 221000;
  --z-create-nested-modal: 222000;
  --z-lightbox: 223000;
  --z-toast-stack: 224000;
}

/* Meta campaign wizard */
.meta-stepper {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 6px;
  margin: 10px 0 16px;
}

.wizard-steps-bar {
  display: grid;
  grid-template-columns: repeat(6, minmax(120px, 1fr));
  gap: 8px;
  margin: 12px 0 18px;
}

.meta-step {
  border: 1px solid rgba(24, 32, 56, 0.14);
  border-radius: 12px;
  padding: 10px 12px;
  font-size: 13px;
  font-weight: 700;
  color: #475569;
  text-align: center;
  background: #fff;
  box-shadow: inset 0 0 0 1px rgba(24, 32, 56, 0.03);
}

.meta-step.active {
  border-color: rgba(147, 51, 234, 0.45);
  color: #7b2cbf;
  background: linear-gradient(180deg, rgba(147, 51, 234, 0.12), rgba(147, 51, 234, 0.05));
  box-shadow: 0 6px 18px rgba(147, 51, 234, 0.14);
}

.meta-step.done {
  border-color: rgba(34, 197, 94, 0.38);
  color: #166534;
  background: rgba(34, 197, 94, 0.13);
}

.meta-step.clickable {
  cursor: pointer;
}

.meta-step.clickable:hover {
  border-color: rgba(147, 51, 234, 0.35);
  color: #7b2cbf;
  background: rgba(147, 51, 234, 0.08);
}

.meta-step.clickable.done:hover {
  border-color: rgba(34, 197, 94, 0.5);
  color: #14532d;
  background: rgba(34, 197, 94, 0.18);
}

.meta-step.locked {
  cursor: default;
  opacity: 0.55;
}

.meta-step-panel.hidden {
  display: none;
}

.goal-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 10px;
  margin-bottom: 8px;
}

.goal-option {
  border: 1px solid rgba(24, 32, 56, 0.16);
  border-radius: 12px;
  padding: 12px 14px;
  display: flex;
  gap: 10px;
  align-items: center;
  justify-content: flex-start;
  width: 100%;
  min-height: 52px;
  background: #fff;
  transition: border-color 0.18s ease, box-shadow 0.18s ease, transform 0.18s ease;
}

.goal-option:hover {
  border-color: rgba(147, 51, 234, 0.45);
  box-shadow: 0 6px 18px rgba(147, 51, 234, 0.1);
  transform: translateY(-1px);
}

.goal-option input[type="radio"] {
  accent-color: #7b2cbf;
}

.goal-option input[type="radio"]:checked + span {
  font-weight: 700;
  color: #7c3aed;
}

.goal-option.disabled {
  opacity: 0.55;
}

.creative-library-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}

.creative-library-toolbar {
  display: grid;
  grid-template-columns: 2fr repeat(2, minmax(130px, 1fr)) repeat(2, minmax(140px, 1fr)) auto;
  gap: 8px;
  padding: 10px;
  margin-bottom: 8px;
}

.creative-library-toolbar .input,
.creative-library-toolbar select {
  height: 40px;
  border: 1px solid rgba(24, 32, 56, 0.22);
  border-radius: 10px;
  background: #fff;
  padding: 0 12px;
  font-size: 14px;
  font-family: inherit;
}

.creative-library-count {
  margin: 4px 0 10px;
}

.creative-library-card {
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 10px;
  background: #fff;
}

.creative-thumb-wrap {
  margin-top: 8px;
  border-radius: 8px;
  overflow: hidden;
  border: 1px solid var(--border);
  background: #f6f7fb;
}

.creative-thumb {
  width: 100%;
  height: 150px;
  object-fit: cover;
  display: block;
  background: #eef1f8;
}

.creative-editor-card {
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 12px;
  background: #fff;
}

.creative-editor-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 8px;
}

.creative-editor-head .section-title {
  margin-bottom: 0;
  line-height: 1.25;
}

.wizard-remove-selected-creative {
  min-width: 32px;
  width: 32px;
  height: 32px;
  padding: 0;
  line-height: 1;
  border-radius: 10px;
  font-size: 18px;
  font-weight: 700;
}

.creative-editor-body {
  display: grid;
  grid-template-columns: 160px minmax(0, 1fr);
  grid-template-areas: "preview fields";
  gap: 12px;
  align-items: start;
}

.creative-editor-preview-wrap {
  grid-area: preview;
  border-radius: 10px;
  overflow: hidden;
  border: 1px solid var(--border);
  background: #eef1f8;
}

.creative-editor-preview {
  width: 100%;
  height: 120px;
  object-fit: cover;
  display: block;
  background: #eef1f8;
}

.creative-editor-card.is-copy-hydrating {
  border-color: #c4b5fd;
  background: #fcfbff;
}

.creative-copy-progress {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 14px 12px;
  border-radius: 10px;
  background: #f8fafc;
  border: 1px solid #e2e8f0;
}

.creative-copy-progress.is-compact {
  padding: 10px;
  margin-top: 8px;
}

.creative-copy-progress-spinner {
  width: 18px;
  height: 18px;
  flex: 0 0 18px;
}

.creative-copy-progress-text {
  font-size: 13px;
  color: #475569;
}

.creative-editor-fields {
  grid-area: fields;
  display: grid;
  gap: 10px;
}

html[dir="rtl"] .creative-editor-body,
[dir="rtl"] .creative-editor-body,
.rtl .creative-editor-body {
  grid-template-columns: minmax(0, 1fr) 160px;
  grid-template-areas: "fields preview";
}

@media (max-width: 900px) {
  .creative-editor-body {
    grid-template-columns: 1fr;
    grid-template-areas:
      "preview"
      "fields";
  }

  html[dir="rtl"] .creative-editor-body,
  [dir="rtl"] .creative-editor-body,
  .rtl .creative-editor-body {
    grid-template-columns: 1fr;
    grid-template-areas:
      "preview"
      "fields";
  }

  .creative-editor-preview {
    height: 120px;
  }
}

.wizard-generate-copy-btn {
  margin-top: 6px;
}

.approval-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

.wizard-review-approvals-wrap {
  margin-top: 14px;
  padding: 12px;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: #fcfdff;
}

.wizard-review-approvals-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.wizard-review-approvals-header label {
  margin: 0;
}

.wizard-review-approvals-wrap .approval-grid {
  margin-top: 10px;
}

.wizard-review-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 10px;
}

.wizard-review-card {
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 12px;
  background: #fff;
}

.wizard-review-card-title {
  font-size: 13px;
  font-weight: 700;
  color: var(--muted);
  margin-bottom: 8px;
}

.wizard-review-item {
  display: grid;
  grid-template-columns: 120px minmax(0, 1fr);
  gap: 10px;
  align-items: start;
  padding: 7px 0;
  border-top: 1px dashed rgba(15, 23, 42, 0.08);
}

.wizard-review-item:first-of-type {
  border-top: 0;
  padding-top: 0;
}

.wizard-review-item-label {
  font-size: 13px;
  font-weight: 700;
  color: var(--muted);
}

.wizard-review-item-value {
  font-size: 14px;
  color: #111827;
  line-height: 1.35;
  word-break: break-word;
}

.wizard-review-chip-row {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.wizard-review-chip {
  display: inline-flex;
  align-items: center;
  min-height: 24px;
  padding: 3px 9px;
  border-radius: 999px;
  background: #f3f4f6;
  border: 1px solid #e5e7eb;
  font-size: 12px;
  line-height: 1.2;
}

.captions-editor-shell {
  display: grid;
  grid-template-columns: minmax(340px, 380px) minmax(0, 1fr);
  gap: 28px;
  align-items: start;
  padding-bottom: 28px;
}

#wizard-step-3.caption-mode-active > #creative-brief-section,
#wizard-step-3.caption-mode-active > #creative-direction-field,
#wizard-step-3.caption-mode-active > #contact-prefs-panel,
#wizard-step-3.caption-mode-active > #multi-brand-field {
  display: none !important;
}

.captions-editor-side,
.captions-preview-side,
.caption-preview-card,
.ugc-caption-panel {
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

.captions-editor-side,
.captions-preview-side,
.ugc-caption-panel {
  padding: 0;
}

.captions-editor-side {
  display: grid;
  gap: 14px;
  min-width: 0;
}

.captions-preview-side {
  min-width: 0;
}

.caption-step-card {
  border: 0;
  border-radius: 24px;
  background: rgba(255, 255, 255, 0.98);
  box-shadow: 0 18px 44px rgba(15, 23, 42, 0.07);
  padding: 18px 20px;
}

#captions-video-section .caption-step-card {
  background: transparent;
  box-shadow: none;
  padding: 0;
}

.caption-step-head {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 14px;
}

.caption-step-number {
  width: 32px;
  height: 32px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--brand-primary, #7c3aed) 14%, #ffffff);
  color: var(--brand-primary, #7c3aed);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
}

.caption-step-copy {
  min-width: 0;
}

.caption-step-title {
  font-size: 15px;
  font-weight: 700;
  color: #111827;
}

.caption-source-toggle {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  margin-bottom: 18px;
}

.caption-source-option {
  display: block;
  min-height: 114px;
  padding: 0;
  border: 0;
  border-radius: 16px;
  background: transparent;
  cursor: pointer;
  text-align: start;
  transition: transform 0.18s ease, filter 0.18s ease;
  color: #111827;
}

.caption-source-option input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.caption-source-option-body {
  display: grid;
  gap: 12px;
  min-height: 114px;
  padding: 16px;
  border-radius: 16px;
  background: #fff;
  box-shadow:
    inset 0 0 0 1px rgba(24, 32, 56, 0.08),
    0 8px 20px rgba(15, 23, 42, 0.05);
  transition: transform 0.18s ease, box-shadow 0.18s ease, background 0.18s ease, color 0.18s ease, border-color 0.18s ease;
}

.caption-source-option:hover .caption-source-option-body {
  transform: translateY(-2px);
  box-shadow:
    inset 0 0 0 1px rgba(124, 58, 237, 0.24),
    0 14px 30px rgba(15, 23, 42, 0.08);
}

.caption-source-option:has(input:checked) .caption-source-option-body {
  background: rgba(124, 58, 237, 0.06);
  box-shadow:
    inset 0 0 0 2px var(--brand-primary, #7c3aed),
    0 12px 28px rgba(124, 58, 237, 0.10);
}

.caption-source-option-icon {
  width: 42px;
  height: 42px;
  border-radius: 14px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: rgba(124, 58, 237, 0.10);
  color: #6b7280;
  box-shadow: inset 0 0 0 1px rgba(124, 58, 237, 0.10);
  transition: background 0.18s ease, color 0.18s ease, box-shadow 0.18s ease;
}

.caption-source-option:has(input:checked) .caption-source-option-icon {
  background: rgba(124, 58, 237, 0.14);
  color: var(--brand-primary, #7c3aed);
  box-shadow: inset 0 0 0 1px rgba(124, 58, 237, 0.18);
}

.caption-source-option-copy {
  display: grid;
  gap: 4px;
}

.caption-source-option-title {
  font-size: 14px;
  font-weight: 700;
  color: #111827;
}

.caption-source-option-desc {
  font-size: 12px;
  line-height: 1.5;
  color: #6b7280;
}

.caption-library-list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 10px;
}

.ad-copy-library-controls {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.ad-copy-library-controls {
  margin-bottom: 12px;
  flex-wrap: wrap;
}

.ad-copy-library-count {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  border: 1px solid rgba(24, 32, 56, 0.08);
  border-radius: 999px;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(246, 247, 251, 0.96));
  box-shadow: 0 8px 18px rgba(15, 23, 42, 0.06);
  color: #4b5563;
  line-height: 1;
}

.ad-copy-library-count-number {
  font-size: 18px;
  font-weight: 700;
  color: #111827;
}

.ad-copy-library-count-label {
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: #6b7280;
}

html[lang="ar"] .ad-copy-library-count,
html[lang="he"] .ad-copy-library-count,
html[dir="rtl"] .ad-copy-library-count,
[dir="rtl"] .ad-copy-library-count,
.rtl .ad-copy-library-count {
  font-family: 'Cairo', 'Tajawal', system-ui, -apple-system, 'Segoe UI', sans-serif;
}

html[lang="ar"] .ad-copy-library-count-label,
html[lang="he"] .ad-copy-library-count-label,
html[dir="rtl"] .ad-copy-library-count-label,
[dir="rtl"] .ad-copy-library-count-label,
.rtl .ad-copy-library-count-label {
  text-transform: none;
  letter-spacing: 0;
}

.ad-copy-library-filter-group {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.caption-library-card {
  position: relative;
  content-visibility: auto;
  contain: layout paint style;
  contain-intrinsic-size: 180px;
}

.caption-library-item {
  border: 0;
  border-radius: 18px;
  padding: 12px;
  background: rgba(255, 255, 255, 0.98);
  box-shadow: inset 0 0 0 1px rgba(24, 32, 56, 0.08);
  cursor: pointer;
  position: relative;
  overflow: hidden;
  transition: border-color 0.18s ease, box-shadow 0.18s ease, transform 0.18s ease;
}

.caption-library-item:hover {
  box-shadow:
    inset 0 0 0 1px rgba(124, 58, 237, 0.24),
    0 16px 34px rgba(124, 58, 237, 0.12);
  transform: translateY(-1px);
}

.caption-library-item.active {
  background: linear-gradient(180deg, rgba(124, 58, 237, 0.12), rgba(255, 255, 255, 0.98));
  box-shadow:
    inset 0 0 0 3px rgba(124, 58, 237, 0.95),
    0 18px 36px rgba(124, 58, 237, 0.22);
  transform: translateY(-1px) scale(1.01);
}

.caption-library-item.active::after {
  content: 'Selected';
  position: absolute;
  top: 10px;
  right: 10px;
  padding: 4px 9px;
  border-radius: 999px;
  background: rgba(91, 33, 182, 0.96);
  color: #fff;
  font-size: 12px;
  font-weight: 700;
  line-height: 1;
}

.caption-library-thumb {
  width: 100%;
  height: 112px;
  object-fit: cover;
  border-radius: 10px;
  background: #e5e7eb;
  margin-bottom: 8px;
}

.caption-library-item.active .caption-library-thumb {
  box-shadow: 0 0 0 3px rgba(124, 58, 237, 0.7);
}

.caption-library-preview-btn {
  position: absolute;
  top: 44px;
  left: 50%;
  transform: translateX(-50%);
  display: inline-flex;
  align-items: center;
  gap: 8px;
  border: 1px solid rgba(255, 255, 255, 0.45);
  border-radius: 999px;
  padding: 9px 16px;
  background: rgba(17, 24, 39, 0.9);
  color: #fff;
  font-size: 14px;
  line-height: 1.2;
  font-weight: 500;
  letter-spacing: 0.01em;
  white-space: nowrap;
  cursor: pointer;
  z-index: 2;
  box-shadow: 0 8px 24px rgba(15, 23, 42, 0.22);
  transition: background 0.18s ease, border-color 0.18s ease, transform 0.18s ease, box-shadow 0.18s ease;
  font-family: inherit;
}

.caption-library-preview-btn:hover {
  background: rgba(91, 33, 182, 0.88);
  border-color: rgba(255, 255, 255, 0.6);
  transform: translateX(-50%) translateY(-1px);
  box-shadow: 0 12px 28px rgba(91, 33, 182, 0.28);
}

html[lang="ar"] .caption-library-preview-btn,
html[lang="he"] .caption-library-preview-btn,
html[dir="rtl"] .caption-library-preview-btn,
[dir="rtl"] .caption-library-preview-btn,
.rtl .caption-library-preview-btn {
  font-family: 'Cairo', 'Tajawal', system-ui, -apple-system, 'Segoe UI', sans-serif;
  font-weight: 700;
  letter-spacing: 0;
  padding-inline: 18px 16px;
}

html[lang="ar"] .caption-library-preview-btn .action-icon,
html[lang="he"] .caption-library-preview-btn .action-icon,
html[dir="rtl"] .caption-library-preview-btn .action-icon,
[dir="rtl"] .caption-library-preview-btn .action-icon,
.rtl .caption-library-preview-btn .action-icon {
  width: 15px;
  height: 15px;
}

html[lang="ar"] .caption-library-preview-btn .action-icon svg,
html[lang="he"] .caption-library-preview-btn .action-icon svg,
html[dir="rtl"] .caption-library-preview-btn .action-icon svg,
[dir="rtl"] .caption-library-preview-btn .action-icon svg,
.rtl .caption-library-preview-btn .action-icon svg {
  width: 15px;
  height: 15px;
}

.caption-style-editor {
  margin-top: 0;
  padding-top: 0;
  border-top: 0;
}

.caption-style-editor,
.caption-style-editor button,
.caption-style-editor select,
.caption-style-editor input,
.caption-style-editor label {
  font-family: inherit;
}

html[lang="ar"] .caption-style-editor,
html[lang="he"] .caption-style-editor,
html[dir="rtl"] .caption-style-editor,
[dir="rtl"] .caption-style-editor,
.rtl .caption-style-editor {
  font-family: 'Tajawal', 'Cairo', system-ui, -apple-system, Segoe UI, sans-serif;
}

.caption-settings-stack {
  display: grid;
  gap: 16px;
}

.caption-settings-row {
  display: grid;
  align-items: end;
}

.caption-settings-row--two {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px 14px;
}

.caption-control-section--font .caption-settings-row--two {
  grid-template-columns: 1fr;
}

.caption-control-section--font .caption-range-control {
  gap: 8px;
}

.caption-range-field .hint {
  margin-top: 4px;
  text-align: end;
  font-size: 12px;
  color: #6b7280;
}

.caption-range-control {
  display: grid;
  gap: 6px;
}

.caption-control-section {
  display: grid;
  gap: 12px;
  padding: 0 0 16px;
  border-bottom: 1px solid rgba(24, 32, 56, 0.08);
}

.caption-control-section-label {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: #6b7280;
}

.caption-settings-stack .caption-control-section:last-child {
  border-bottom: 0;
  padding-bottom: 0;
}

.caption-choice-group {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}

.caption-choice-button {
  min-height: 46px;
  padding: 10px 14px;
  border: 0;
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.96);
  box-shadow: inset 0 0 0 1px rgba(24, 32, 56, 0.10);
  color: #111827;
  font-size: 13px;
  font-weight: 700;
  font-family: inherit;
  cursor: pointer;
  transition: transform 0.18s ease, box-shadow 0.18s ease, background 0.18s ease, color 0.18s ease;
}

html[lang="ar"] .caption-choice-button,
html[lang="he"] .caption-choice-button,
html[dir="rtl"] .caption-choice-button,
[dir="rtl"] .caption-choice-button,
.rtl .caption-choice-button,
html[lang="ar"] .caption-control-section-label,
html[lang="he"] .caption-control-section-label,
html[dir="rtl"] .caption-control-section-label,
[dir="rtl"] .caption-control-section-label,
.rtl .caption-control-section-label {
  font-family: 'Tajawal', 'Cairo', system-ui, -apple-system, Segoe UI, sans-serif;
}

.caption-choice-button:hover {
  transform: translateY(-1px);
  box-shadow:
    inset 0 0 0 1px color-mix(in srgb, var(--brand-primary, #7c3aed) 20%, transparent),
    0 12px 24px rgba(124, 58, 237, 0.08);
}

.caption-choice-button.is-active {
  background: rgba(124, 58, 237, 0.06);
  box-shadow:
    inset 0 0 0 2px color-mix(in srgb, var(--brand-primary, #7c3aed) 70%, transparent),
    0 10px 22px rgba(124, 58, 237, 0.10);
  color: var(--brand-primary, #7c3aed);
}

.caption-color-field input[type="color"] {
  width: 100%;
  min-width: 0;
  height: 48px;
  padding: 4px;
  border-radius: 16px;
  box-shadow: inset 0 0 0 1px rgba(24, 32, 56, 0.08);
  background: #fff;
}

.caption-toggle-card {
  position: relative;
  display: flex;
  align-items: center;
  gap: 14px;
  min-height: 64px;
  padding: 14px 16px;
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.96);
  box-shadow: inset 0 0 0 1px rgba(24, 32, 56, 0.08);
  cursor: pointer;
}

.caption-toggle-card input {
  position: absolute;
  inset-inline-start: 0;
  top: 0;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}

.caption-toggle-card-copy {
  display: grid;
  gap: 4px;
  flex: 1 1 auto;
  min-width: 0;
}

.caption-toggle-card-title {
  font-weight: 700;
  color: #111827;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.caption-toggle-card-desc {
  font-size: 12px;
  line-height: 1.5;
  color: #6b7280;
}

.caption-switch {
  position: relative;
  width: 50px;
  height: 30px;
  border-radius: 999px;
  background: #d1d5db;
  box-shadow: inset 0 0 0 1px rgba(15, 23, 42, 0.08);
  transition: background 0.2s ease, box-shadow 0.2s ease;
}

.caption-switch::after {
  content: "";
  position: absolute;
  top: 3px;
  right: 3px;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 2px 8px rgba(15, 23, 42, 0.18);
  transition: transform 0.2s ease;
}

.caption-toggle-card:has(input:checked) .caption-switch {
  background: var(--brand-primary, #7c3aed);
  box-shadow: inset 0 0 0 1px rgba(124, 58, 237, 0.18);
}

.caption-toggle-card:has(input:checked) .caption-switch::after {
  transform: translateX(-20px);
}

.caption-inline-toggle {
  align-self: center;
  margin: 0;
}

.caption-editor-actions {
  display: flex;
  justify-content: flex-start;
  margin-top: 6px;
}

.caption-rerender-card {
  width: min(560px, calc(100vw - 28px));
  padding: 24px 24px 20px;
}

.caption-rerender-header {
  margin-bottom: 18px;
}

#caption-rerender-modal .modal-title {
  padding-inline-end: 44px;
  font-size: 22px;
  font-weight: 700;
  line-height: 1.25;
  letter-spacing: -0.01em;
}

.caption-rerender-subtitle {
  margin-top: 8px;
  font-size: 0.95rem;
  line-height: 1.5;
  color: var(--brand-muted, #64748b);
}

.caption-rerender-field {
  gap: 8px;
}

.caption-rerender-field > label {
  font-size: 13px;
  font-weight: 500;
  color: var(--brand-ink, #0f172a);
}

.caption-rerender-field textarea {
  min-height: 168px;
  padding: 12px 14px;
  font-size: 15px;
  line-height: 1.55;
  border-radius: 12px;
  border: 1px solid var(--brand-line, #e5e7eb);
  resize: vertical;
}

.caption-rerender-empty-hint {
  margin-top: 4px;
  font-size: 12px;
  line-height: 1.45;
}

/* DOM: confirm, then cancel. Cluster on the right: LTR row-reverse + flex-end; RTL row + flex-start */
.caption-rerender-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
  width: 100%;
  margin-top: 20px;
  flex-direction: row-reverse;
  justify-content: flex-end;
}

#caption-rerender-confirm {
  min-width: 148px;
}

.caption-rerender-status {
  margin-top: 10px;
  min-height: 1.25em;
  font-size: 13px;
  line-height: 1.45;
}

html[dir="rtl"] #caption-rerender-modal .modal-title,
[dir="rtl"] #caption-rerender-modal .modal-title,
.rtl #caption-rerender-modal .modal-title,
html[lang="ar"] #caption-rerender-modal .modal-title,
html[lang="he"] #caption-rerender-modal .modal-title {
  padding-inline-start: 0;
  padding-inline-end: 44px;
}

html[dir="rtl"] #caption-rerender-modal .modal-close,
[dir="rtl"] #caption-rerender-modal .modal-close,
.rtl #caption-rerender-modal .modal-close,
html[lang="ar"] #caption-rerender-modal .modal-close,
html[lang="he"] #caption-rerender-modal .modal-close {
  right: auto;
  left: 16px;
}

html[dir="rtl"] #caption-rerender-modal .caption-rerender-actions,
[dir="rtl"] #caption-rerender-modal .caption-rerender-actions,
.rtl #caption-rerender-modal .caption-rerender-actions,
html[lang="ar"] #caption-rerender-modal .caption-rerender-actions,
html[lang="he"] #caption-rerender-modal .caption-rerender-actions {
  flex-direction: row;
  justify-content: flex-start;
}

.caption-preview-card {
  padding: 0;
  position: static;
  border-radius: 20px;
  background: #fff;
  box-shadow: 0 16px 40px rgba(15, 23, 42, 0.08);
  padding: 18px;
}

@media (min-width: 1081px) {
  .captions-preview-side {
    position: sticky;
    top: 12px;
    align-self: start;
    z-index: 1;
  }
}

.caption-preview-head {
  display: block;
  margin-bottom: 10px;
}

.caption-preview-status {
  margin-top: 6px;
  font-size: 12px;
  color: #6b7280;
}

.caption-preview-notice {
  margin-top: 8px;
  padding: 8px 10px;
  border-radius: 10px;
  background: rgba(245, 158, 11, 0.12);
  border: 1px solid rgba(245, 158, 11, 0.28);
  color: #92400e;
  font-size: 12px;
  line-height: 1.45;
}

.caption-preview-head .muted {
  font-size: 13px;
  color: #6b7280;
}

.caption-preview-subtitle {
  margin-top: 4px;
  font-size: 13px;
  line-height: 1.55;
  color: #6b7280;
}

.caption-preview-head .section-subtitle {
  color: #111827;
}

.caption-preview-stage-shell {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 0;
  padding: 8px 0 0;
  border-radius: 20px;
  background: transparent;
}

.caption-preview-stage {
  position: relative;
  aspect-ratio: 9 / 16;
  width: min(100%, 340px, calc((100dvh - 360px) * 9 / 16));
  max-height: calc(100dvh - 360px);
  margin: 0 auto;
  border-radius: 24px;
  overflow: hidden;
  background: #0f0f12;
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.04),
    inset 0 14px 40px rgba(255, 255, 255, 0.02),
    0 18px 40px rgba(15, 23, 42, 0.18);
}

.caption-preview-video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  background: #0f0f12;
}

.caption-preview-overlay {
  position: absolute;
  inset: 0;
  pointer-events: none;
  display: flex;
  justify-content: center;
  align-items: flex-end;
  padding: 22px;
}

.caption-preview-overlay.is-top {
  align-items: flex-start;
}

.caption-preview-overlay.is-center {
  align-items: center;
}

.caption-preview-line {
  max-width: min(88%, 680px);
  display: inline-flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 0.12em 0.3em;
  text-align: center;
  line-height: 1.1;
  font-weight: 700;
  letter-spacing: -0.02em;
  text-shadow: 0 2px 10px rgba(0, 0, 0, 0.45);
  transition: transform 0.18s ease, font-size 0.18s ease, background 0.18s ease, box-shadow 0.18s ease;
}

.caption-preview-line[dir="rtl"] {
  direction: rtl;
  unicode-bidi: plaintext;
}

.caption-preview-line.has-bar {
  width: min(92%, 720px);
  padding: 13px 18px;
  border-radius: 22px;
  background: rgba(0, 0, 0, 0.44);
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.24);
}

.caption-preview-line.has-shadow {
  text-shadow:
    0 0 6px rgba(0, 0, 0, 0.85),
    0 6px 20px rgba(0, 0, 0, 0.5);
}

.caption-preview-word {
  display: inline-flex;
  align-items: center;
  transition: transform 0.16s ease, color 0.16s ease;
  unicode-bidi: isolate;
}

.caption-preview-word.active {
  transform: scale(1.045);
}

.caption-preview-stage.is-loading .caption-preview-video,
.caption-preview-stage.is-loading .caption-preview-overlay {
  opacity: 0.2;
}

.caption-preview-skeleton {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(90deg, rgba(255, 255, 255, 0.04) 0%, rgba(255, 255, 255, 0.11) 50%, rgba(255, 255, 255, 0.04) 100%),
    linear-gradient(180deg, #191a20 0%, #121319 100%);
  background-size: 220px 100%, 100% 100%;
  animation: captionPreviewShimmer 1.4s linear infinite;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s ease;
}

.caption-preview-stage.is-loading .caption-preview-skeleton {
  opacity: 1;
}

@keyframes captionPreviewShimmer {
  0% {
    background-position: -220px 0, 0 0;
  }
  100% {
    background-position: calc(100% + 220px) 0, 0 0;
  }
}

.caption-step-card .upload-box,
.caption-step-card .input,
.caption-step-card select {
  border-radius: 16px;
}

.caption-step-card .upload-box {
  background: #faf7ff;
  box-shadow: inset 0 0 0 1px rgba(24, 32, 56, 0.08);
  padding: 18px 16px;
}

#captions-video-section .upload-box {
  margin-top: 2px;
  min-height: 188px;
  border-style: dashed;
  border-width: 1.5px;
  border-color: rgba(124, 58, 237, 0.28);
  background: #faf7ff;
  transition: transform 0.18s ease, border-color 0.18s ease, background 0.18s ease, box-shadow 0.18s ease;
}

#captions-video-section .upload-box:hover,
#captions-video-section .upload-box.drag-over {
  transform: translateY(-1px);
  border-color: rgba(124, 58, 237, 0.72);
  background: #faf7ff;
  box-shadow:
    inset 0 0 0 1px rgba(124, 58, 237, 0.14),
    0 0 0 4px rgba(124, 58, 237, 0.06);
}

.caption-upload-box {
  gap: 8px;
  text-align: center;
}

.caption-video-upload-row {
  align-items: flex-end;
}

.ad-copy-upload-progress {
  flex: 1 1 100%;
  min-width: 0;
  margin-top: 8px;
}

.ad-copy-upload-progress-label {
  font-size: 13px;
  margin-bottom: 6px;
  color: var(--muted, #8b8b9a);
}

.ad-copy-upload-progress-track {
  height: 6px;
  border-radius: 999px;
  background: rgba(124, 58, 237, 0.12);
  overflow: hidden;
}

.ad-copy-upload-progress-bar {
  height: 100%;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--brand-primary, #7c3aed), #a78bfa);
  transition: width 0.12s ease-out;
}

#ad-copy-source-upload-panel.is-busy {
  pointer-events: none;
  opacity: 0.72;
}

.caption-video-upload-thumb {
  border: 0;
  padding: 0;
  cursor: pointer;
  background: #0f0f12;
}

.caption-video-upload-thumb video,
.caption-video-upload-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  background: #0f0f12;
}

.caption-upload-icon {
  width: 58px;
  height: 58px;
  border-radius: 18px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: rgba(124, 58, 237, 0.10);
  color: var(--brand-primary, #7c3aed);
  box-shadow: inset 0 0 0 1px rgba(124, 58, 237, 0.12);
  margin-bottom: 6px;
}

.caption-upload-box .upload-box-title {
  font-size: 20px;
  font-weight: 700;
  color: #111827;
}

.caption-upload-box .upload-box-subtitle {
  font-size: 14px;
  color: #6b7280;
  margin-top: 0;
}

.caption-upload-formats {
  margin-top: 6px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: #8b5cf6;
}

.caption-source-panel {
  display: grid;
  opacity: 0;
  transform: translateY(-8px);
  max-height: 0;
  overflow: hidden;
  pointer-events: none;
  transition: opacity 0.16s ease, transform 0.16s ease, max-height 0.16s ease;
}

.caption-source-panel:not(.is-active) {
  margin: 0 !important;
}

.caption-source-panel.is-active {
  opacity: 1;
  transform: translateY(0);
  max-height: 560px;
  pointer-events: auto;
}

.caption-source-config-row {
  display: grid;
  grid-template-columns: minmax(220px, 260px) minmax(0, 1fr);
  gap: 16px;
  align-items: start;
}

.caption-source-config-panel {
  min-width: 0;
  align-self: end;
}

#ad-copy-source-library-panel.caption-source-panel.is-active {
  display: grid;
  grid-template-rows: auto auto minmax(0, 1fr);
  gap: 12px;
  max-height: min(56vh, 560px);
  overflow: hidden;
}

#ad-copy-library-list {
  max-height: min(42vh, 420px);
  overflow-y: auto;
  overflow-x: hidden;
  padding-inline-end: 6px;
  -webkit-overflow-scrolling: touch;
}

.caption-source-url-panel {
  max-width: 420px;
}

.caption-step-card .field > label,
.caption-preview-head .section-subtitle {
  font-weight: 700;
  color: #111827;
}

.caption-step-card .field {
  margin-bottom: 12px;
}

.caption-step-card .field:last-child {
  margin-bottom: 0;
}

.caption-step-card select,
.caption-step-card .input {
  min-height: 46px;
  padding-top: 9px;
  padding-bottom: 9px;
}

.caption-step-card input[type="range"] {
  margin: 0;
}

#captions-video-section .field {
  margin-bottom: 14px;
}

#captions-video-section .field:last-child {
  margin-bottom: 0;
}

.caption-language-field {
  min-width: 0;
  max-width: none;
  margin-top: 0;
}

.caption-language-field select {
  width: 100%;
  min-width: 0;
  height: auto;
  min-height: 50px;
  box-sizing: border-box;
  padding-top: 12px;
  padding-bottom: 12px;
  padding-right: 42px;
  line-height: 1.25;
}

.caption-source-url-panel .input {
  height: 46px;
  min-height: 46px;
  box-sizing: border-box;
  padding-top: 0;
  padding-bottom: 0;
}

.ugc-caption-wrap {
  margin-top: 16px;
}

.ugc-caption-toggle-card {
  position: relative;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 16px;
  border: 1px solid rgba(24, 32, 56, 0.12);
  border-radius: 16px;
  background: #fff;
  cursor: pointer;
}

.ugc-caption-toggle-copy {
  display: grid;
  gap: 2px;
}

.ugc-caption-toggle-title {
  font-weight: 700;
  color: #111827;
}

.ugc-caption-toggle-subtitle {
  color: #6b7280;
  font-size: 13px;
}

.ugc-caption-panel {
  margin-top: 12px;
}

.caption-style-editor-compact {
  margin-top: 10px;
  padding-top: 10px;
}

.ugc-caption-mini-preview {
  margin-top: 12px;
  display: grid;
  gap: 10px;
}

.ugc-caption-mini-screen {
  min-height: 160px;
  border-radius: 16px;
  background: linear-gradient(180deg, #1f2937 0%, #0f172a 100%);
  display: flex;
  align-items: flex-end;
  justify-content: center;
  padding: 18px;
}

.ugc-caption-mini-text {
  max-width: 90%;
  text-align: center;
  color: #fff;
  font-weight: 700;
  line-height: 1.1;
  padding: 10px 14px;
  border-radius: 18px;
  background: rgba(0, 0, 0, 0.44);
  box-shadow: 0 8px 24px rgba(15, 23, 42, 0.22);
}

@media (max-width: 1080px) {
  .captions-editor-shell {
    grid-template-columns: 1fr;
  }

  .caption-source-config-row {
    grid-template-columns: 1fr;
  }

  .caption-preview-card {
    position: static;
  }

  .caption-preview-stage-shell {
    min-height: auto;
  }
}

@media (max-width: 720px) {
  #caption-library-list.caption-library-list,
  #ad-copy-library-list.caption-library-list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
  }

  #caption-library-list .caption-library-card,
  #ad-copy-library-list .caption-library-card {
    min-width: 0;
  }

  #caption-library-list .caption-library-item,
  #ad-copy-library-list .caption-library-item {
    padding: 10px;
    border-radius: 16px;
  }

  #caption-library-list .caption-library-thumb,
  #ad-copy-library-list .caption-library-thumb {
    height: 96px;
  }

  #caption-library-list .caption-library-preview-btn,
  #ad-copy-library-list .caption-library-preview-btn {
    position: static;
    left: auto;
    top: auto;
    transform: none;
    width: 100%;
    justify-content: center;
    margin-top: 8px;
    padding: 8px 10px;
    font-size: 12px;
    gap: 6px;
  }

  .caption-source-toggle {
    grid-template-columns: 1fr;
  }

  .caption-settings-row--two,
  .caption-choice-group {
    grid-template-columns: 1fr;
  }

  .caption-preview-card {
    padding: 14px;
    border-radius: 22px;
  }

  .caption-preview-stage {
    width: min(100%, 320px);
  }
}

.wizard-review-empty {
  font-size: 13px;
  color: var(--muted);
}

@media (max-width: 900px) {
  .approval-grid {
    grid-template-columns: 1fr;
  }

  .wizard-review-approvals-header {
    flex-direction: column;
    align-items: flex-start;
  }

  .wizard-review-item {
    grid-template-columns: 1fr;
    gap: 4px;
  }
}

.review-row {
  padding: 8px 10px;
  border: 1px solid var(--border);
  border-radius: 8px;
  font-size: 14px;
}

.wizard-budget-estimate-note {
  margin-top: 10px;
  padding: 12px 14px;
}

.wizard-budget-estimate-title {
  font-weight: 700;
  font-size: 15px;
  margin-bottom: 4px;
}

.wizard-budget-estimate-body {
  font-weight: 500;
}

.wizard-budget-estimate-equation {
  display: inline-block;
  font-weight: 700;
  letter-spacing: 0.01em;
}

.campaign-item {
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 10px 12px;
}

.campaign-item-head {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  align-items: flex-start;
  margin-bottom: 8px;
}

.campaign-wizard-modal-card {
  width: min(1100px, calc(100vw - 32px));
  max-height: calc(100vh - 32px);
  overflow-y: auto;
  border-radius: 18px;
  position: relative;
}

.campaign-wizard-modal-card .modal-title {
  font-size: 20px;
  font-weight: 700;
}

.campaign-wizard-modal-card .wizard-step-panel .section-title {
  font-size: 16px;
  font-weight: 700;
  margin-bottom: 8px;
}

.campaign-wizard-modal-card .field label {
  font-size: 15px;
  font-weight: 700;
}

.campaign-wizard-modal-card .field input,
.campaign-wizard-modal-card .field select,
.campaign-wizard-modal-card .field textarea {
  font-size: 15px;
}

.campaign-wizard-modal-card .inline-actions {
  width: 100%;
}

.campaign-wizard-modal-card .wizard-footer-actions {
  justify-content: flex-start;
}

.campaign-wizard-modal-card .wizard-step-panel[data-step="3"] .row + .row {
  margin-top: 12px;
}

html[dir="rtl"] #campaign-wizard-modal .modal-close,
[dir="rtl"] #campaign-wizard-modal .modal-close,
.rtl #campaign-wizard-modal .modal-close {
  left: 16px;
  right: auto;
}

html[lang="ar"] #campaign-wizard-modal .modal-close,
html[lang="he"] #campaign-wizard-modal .modal-close {
  left: 16px !important;
  right: auto !important;
}

html[dir="rtl"] #campaign-stats-modal .modal-close,
[dir="rtl"] #campaign-stats-modal .modal-close,
.rtl #campaign-stats-modal .modal-close,
html[dir="rtl"] #constraints-modal .modal-close,
[dir="rtl"] #constraints-modal .modal-close,
.rtl #constraints-modal .modal-close,
html[dir="rtl"] #campaign-details-modal .modal-close,
[dir="rtl"] #campaign-details-modal .modal-close,
.rtl #campaign-details-modal .modal-close {
  left: 16px !important;
  right: auto !important;
}

.wizard-map {
  height: 300px;
  border: 1px solid var(--border);
  border-radius: 10px;
  margin-top: 8px;
}

.campaign-toolbar {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1fr;
  gap: 12px;
  margin: 12px 0 14px;
  align-items: center;
}

.quick-stats-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
}

.quick-stat-card {
  border: 1px solid var(--border);
  border-radius: 10px;
  background: #fff;
  padding: 10px;
}

.quick-stat-label {
  color: var(--muted);
  font-size: 12px;
  margin-bottom: 4px;
}

.quick-stat-value {
  font-size: 20px;
  font-weight: 700;
}

.campaign-toolbar .input,
.campaign-toolbar select {
  height: 42px;
  border: 1px solid rgba(24, 32, 56, 0.22);
  border-radius: 10px;
  background: #fff;
  padding: 0 12px;
  font-size: 14px;
  font-family: inherit;
  box-shadow: inset 0 0 0 1px rgba(24, 32, 56, 0.06);
}

.campaign-toolbar .input:focus,
.campaign-toolbar select:focus {
  outline: none;
  border-color: #7b2cbf;
  box-shadow: 0 0 0 3px rgba(123, 44, 191, 0.14);
}

.campaign-toolbar select {
  appearance: none;
  background-image:
    linear-gradient(45deg, transparent 50%, var(--muted) 50%),
    linear-gradient(135deg, var(--muted) 50%, transparent 50%);
  background-position:
    calc(100% - 16px) calc(1em + 2px),
    calc(100% - 11px) calc(1em + 2px);
  background-size: 5px 5px, 5px 5px;
  background-repeat: no-repeat;
  padding-right: 34px;
}

.campaign-toolbar select option {
  font-family: inherit;
}

.campaign-table-wrap {
  border: 1px solid var(--border);
  border-radius: 12px;
  overflow: auto;
  background: #fff;
}

.campaign-table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  min-width: 980px;
}

.campaign-table th {
  text-align: left;
  font-size: 12px;
  letter-spacing: 0.02em;
  color: var(--muted);
  font-weight: 700;
  padding: 12px 14px;
  border-bottom: 1px solid var(--border);
  background: #fafbff;
}

html[dir="rtl"] .campaign-table th,
[dir="rtl"] .campaign-table th,
.rtl .campaign-table th {
  text-align: right;
}

.campaign-table td {
  padding: 12px 14px;
  border-bottom: 1px solid var(--border);
  vertical-align: middle;
  font-size: 14px;
}

.campaign-table tbody tr:nth-child(odd) td {
  background: #ffffff;
}

.campaign-table tbody tr:nth-child(even) td {
  background: #fafbff;
}

.campaign-table tbody tr td {
  transition: background-color 0.15s ease;
}

.campaign-table tbody tr:hover td {
  background: #f2f5ff;
}

.campaign-table tbody tr:last-child td {
  border-bottom: 0;
}

.campaign-name {
  font-weight: 700;
  color: var(--brand-ink);
}

.campaign-cell.campaign-actions-cell .inline-actions {
  justify-content: flex-end;
  flex-wrap: nowrap;
  gap: 4px;
}

.campaign-cell.campaign-actions-cell .inline-actions .button {
  white-space: nowrap;
  padding: 5px 10px;
  font-size: 12px;
}

.campaign-table .status-pill {
  margin-top: 0;
  border-radius: 999px;
  padding: 4px 10px;
  font-size: 12px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.campaign-table .status-pill .status-pill-icon {
  width: 10px;
  height: 10px;
  border-radius: 999px;
  background: currentColor;
  opacity: 0.85;
  flex-shrink: 0;
}

.campaign-table .status-pill.status-toggle {
  cursor: pointer;
  user-select: none;
}

.campaign-table .status-pill.status-toggle:hover {
  opacity: 0.9;
}

.campaign-table .status-pill.active .status-pill-icon {
  background: #22c55e;
}

.campaign-table .status-pill.in_review .status-pill-icon {
  background: #f59e0b;
}

.campaign-table .status-pill.paused .status-pill-icon {
  width: 10px;
  height: 10px;
  border-radius: 2px;
  background:
    linear-gradient(to right, #f72585 0 35%, transparent 35% 65%, #f72585 65% 100%);
}

.btn-icon {
  margin-right: 6px;
  font-size: 12px;
  vertical-align: -1px;
}

[dir="rtl"] .btn-icon,
.rtl .btn-icon {
  margin-right: 0;
  margin-left: 6px;
}

.campaign-details-modal-card {
  width: min(1160px, calc(100vw - 32px));
  max-height: 90vh;
  border: 1px solid rgba(15, 23, 42, 0.08);
  box-shadow: 0 18px 48px rgba(15, 23, 42, 0.16);
  background: #f8fafc;
  border-radius: 16px;
  padding: 24px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  position: relative;
}

#campaign-details-modal .modal-close {
  top: 16px;
  left: 16px !important;
  right: auto !important;
  z-index: 3;
  width: 40px;
  height: 40px;
  border-radius: 999px;
  border: 1px solid #e2e8f0;
  background: #ffffff;
  box-shadow: 0 2px 8px rgba(15, 23, 42, 0.08);
  display: inline-flex;
  align-items: center;
  justify-content: center;
}


.meta-hierarchy-content {
  margin-top: 0;
  overflow-y: auto;
  overflow-x: hidden;
  min-height: 0;
  flex: 1 1 auto;
  padding-inline-end: 4px;
  scrollbar-gutter: stable both-edges;
}

.meta-hierarchy-shell {
  display: grid;
  gap: 16px;
  min-width: 0;
  text-align: start;
}

.meta-hierarchy-header {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 10px;
  padding-inline-start: 48px;
  padding-inline-end: 4px;
}

.meta-hierarchy-shell[dir="rtl"] .meta-hierarchy-header {
  align-items: flex-end;
  text-align: right;
}

.meta-hierarchy-title {
  margin: 0;
  width: 100%;
  font-size: clamp(18px, 1.6vw, 20px);
  line-height: 1.3;
  font-weight: 700;
  color: #0f172a;
  unicode-bidi: plaintext;
}

.meta-hierarchy-shell[dir="rtl"] .meta-hierarchy-title {
  text-align: right;
}

.meta-hierarchy-header-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
  justify-content: flex-start;
}

.meta-hierarchy-shell[dir="rtl"] .meta-hierarchy-header-chips {
  justify-content: flex-end;
}

.meta-hierarchy-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  border-radius: 999px;
  border: 1px solid #e2e8f0;
  background: #ffffff;
  color: #475569;
  font-size: 12px;
  font-weight: 700;
  line-height: 1.2;
  white-space: nowrap;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
}

.meta-hierarchy-chip-active {
  border-color: #bbf7d0;
  background: #ecfdf5;
  color: #047857;
}

.meta-hierarchy-chip-draft {
  border-color: #ddd6fe;
  background: #f5f3ff;
  color: #6d28d9;
}

.meta-hierarchy-chip-muted {
  border-color: #e2e8f0;
  background: #f8fafc;
  color: #64748b;
}

.meta-hierarchy-chip-objective,
.meta-hierarchy-chip-budget,
.meta-hierarchy-chip-schedule,
.meta-hierarchy-chip-count {
  border-color: #e2e8f0;
  background: #ffffff;
  color: #334155;
}

.meta-hierarchy-section {
  display: grid;
  gap: 10px;
  min-width: 0;
}

.meta-hierarchy-section-title {
  margin: 0;
  display: inline-flex;
  align-items: center;
  width: fit-content;
  max-width: 100%;
  padding: 4px 10px;
  border-radius: 999px;
  border: 1px solid #e2e8f0;
  background: #f8fafc;
  color: #64748b;
  font-size: 11px;
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.meta-hierarchy-summary-card,
.meta-hierarchy-node {
  border: 1px solid #e2e8f4;
  border-radius: 16px;
  background: #ffffff;
  box-shadow: 0 2px 8px rgba(15, 23, 42, 0.04);
}

.meta-hierarchy-summary-card {
  padding: 16px 18px;
}

.meta-hierarchy-stats-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px 16px;
}

.meta-hierarchy-stat {
  display: grid;
  gap: 4px;
  min-width: 0;
}

.meta-hierarchy-stat-label {
  color: #64748b;
  font-size: 12px;
  font-weight: 700;
  line-height: 1.2;
}

.meta-hierarchy-stat-value {
  color: #0f172a;
  font-size: 14px;
  font-weight: 700;
  line-height: 1.35;
  unicode-bidi: plaintext;
}

.meta-hierarchy-adset-list {
  display: grid;
  gap: 10px;
}

.meta-hierarchy-loading {
  padding: 24px 8px;
  text-align: center;
}

.meta-hierarchy-node-adset {
  overflow: hidden;
}

.meta-hierarchy-details {
  min-width: 0;
}

.meta-hierarchy-summary {
  list-style: none;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 16px;
  cursor: pointer;
  user-select: none;
  min-width: 0;
}

.meta-hierarchy-shell[dir="rtl"] .meta-hierarchy-summary {
  flex-direction: row-reverse;
}

.meta-hierarchy-summary::-webkit-details-marker {
  display: none;
}

.meta-hierarchy-chevron {
  width: 10px;
  height: 10px;
  border-inline-end: 2px solid #64748b;
  border-bottom: 2px solid #64748b;
  transform: rotate(-45deg);
  transition: transform 0.18s ease;
  flex: 0 0 auto;
}

.meta-hierarchy-details[open] .meta-hierarchy-chevron {
  transform: rotate(45deg);
}

[dir="rtl"] .meta-hierarchy-chevron,
.meta-hierarchy-shell[dir="rtl"] .meta-hierarchy-chevron {
  transform: rotate(135deg);
}

[dir="rtl"] .meta-hierarchy-details[open] .meta-hierarchy-chevron,
.meta-hierarchy-shell[dir="rtl"] .meta-hierarchy-details[open] .meta-hierarchy-chevron {
  transform: rotate(-135deg);
}

.meta-hierarchy-summary-content {
  flex: 1 1 auto;
  min-width: 0;
}

.meta-hierarchy-adset-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px 12px;
  flex-wrap: wrap;
  min-width: 0;
}

.meta-hierarchy-node-name {
  flex: 1 1 auto;
  min-width: 0;
  color: #0f172a;
  font-size: 15px;
  font-weight: 700;
  line-height: 1.35;
  unicode-bidi: plaintext;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.meta-hierarchy-adset-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: center;
  flex: 0 1 auto;
  justify-content: flex-end;
  min-width: 0;
}

.meta-hierarchy-node-body {
  border-top: 1px solid #edf2f7;
  padding: 12px 16px 16px;
  display: grid;
  gap: 12px;
  background: #fbfdff;
}

.meta-hierarchy-compact-rows {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px 14px;
}

.meta-hierarchy-compact-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  min-width: 0;
  padding: 8px 10px;
  border-radius: 10px;
  background: #f8fafc;
  border: 1px solid #eef2f7;
}

.meta-hierarchy-compact-label {
  color: #64748b;
  font-size: 12px;
  font-weight: 700;
  flex: 0 0 auto;
}

.meta-hierarchy-compact-value {
  color: #0f172a;
  font-size: 13px;
  font-weight: 500;
  text-align: end;
  min-width: 0;
  unicode-bidi: plaintext;
}

.meta-hierarchy-ads-section {
  display: grid;
  gap: 8px;
}

.meta-hierarchy-ads-section-title {
  color: #64748b;
  font-size: 13px;
  font-weight: 700;
}

.meta-hierarchy-ads-list {
  display: grid;
  gap: 8px;
}

.meta-hierarchy-ad-card {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  border: 1px solid #e8edf5;
  border-radius: 14px;
  padding: 10px 12px;
  background: #ffffff;
  min-width: 0;
  overflow: hidden;
}

.meta-hierarchy-ad-content {
  order: 1;
  flex: 1 1 auto;
  min-width: 0;
  display: grid;
  gap: 4px;
}

.meta-hierarchy-ad-head {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
  min-width: 0;
}

.meta-hierarchy-ad-level {
  display: inline-flex;
  align-items: center;
  flex: 0 0 auto;
  padding: 3px 8px;
  border-radius: 999px;
  border: 1px solid #dbeafe;
  background: #eff6ff;
  color: #1d4ed8;
  font-size: 10px;
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: 0.03em;
  text-transform: uppercase;
}

.meta-hierarchy-ad-head .meta-hierarchy-chip,
.meta-hierarchy-ad-head .status-pill {
  flex: 0 0 auto;
  max-width: 100%;
}

.meta-hierarchy-ad-name {
  color: #0f172a;
  font-size: 13px;
  font-weight: 700;
  line-height: 1.35;
  unicode-bidi: plaintext;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.meta-hierarchy-ad-meta {
  display: block;
  min-width: 0;
  color: #64748b;
  font-size: 12px;
  font-weight: 500;
  line-height: 1.35;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  unicode-bidi: plaintext;
}

.meta-hierarchy-ad-thumb-wrap {
  flex: 0 0 auto;
  width: 56px;
  height: 56px;
  border-radius: 12px;
  overflow: hidden;
  border: 1px solid #e2e8f0;
  background: #f1f5f9;
}

.meta-hierarchy-ad-thumb {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.meta-hierarchy-ad-thumb-empty {
  width: 100%;
  height: 100%;
  background: linear-gradient(135deg, #eef2ff 0%, #f8fafc 100%);
}

.meta-hierarchy-empty {
  padding: 12px 14px;
  border-radius: 12px;
  border: 1px dashed #dbe3ef;
  color: #64748b;
  font-size: 13px;
  font-weight: 500;
  background: #f8fafc;
}

.meta-hierarchy-empty-block {
  text-align: center;
}

#campaign-details-modal .status-pill {
  font-size: 11px;
  padding: 4px 8px;
}

#campaign-details-modal .status-pill .status-pill-icon {
  width: 7px;
  height: 7px;
}

@media (max-width: 900px) {
  .meta-hierarchy-stats-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .meta-hierarchy-compact-rows {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 720px) {
  .campaign-details-modal-card {
    width: calc(100vw - 20px);
    padding: 18px 14px;
  }

  .meta-hierarchy-header {
    padding-inline: 0;
    padding-top: 44px;
  }

  .meta-hierarchy-adset-head {
    align-items: flex-start;
    flex-direction: column;
  }

  .meta-hierarchy-ad-thumb-wrap {
    width: 56px;
    height: 56px;
  }
}

.campaign-name-link {
  max-width: 280px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-weight: 700;
  unicode-bidi: plaintext;
  color: inherit;
  background: none;
  border: none;
  padding: 0;
  margin: 0;
  font: inherit;
  cursor: pointer;
  text-align: inherit;
  display: block;
  transition: color 0.16s ease;
}

.campaign-name-link:hover,
.campaign-name-link:focus-visible {
  color: #4f46e5;
  text-decoration: underline;
  outline: none;
}

.campaign-name-row .campaign-name-link {
  flex: 1 1 auto;
  min-width: 0;
}

.campaign-constraints-modal-card {
  width: min(900px, calc(100vw - 32px));
}

.campaign-stats-modal-card {
  width: min(1100px, calc(100vw - 32px));
  max-height: 90vh;
  border: 1px solid rgba(15, 23, 42, 0.08);
  box-shadow: 0 18px 48px rgba(15, 23, 42, 0.16);
  background: #ffffff;
  border-radius: 16px;
  padding: 24px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

#campaign-stats-modal .modal-title {
  font-size: clamp(24px, 2vw, 28px);
  line-height: 1.2;
  margin: 0;
  padding-inline-start: 40px;
}

#campaign-stats-modal .modal-close {
  top: 12px;
  left: 12px !important;
  right: auto !important;
  z-index: 3;
}

#campaign-stats-content {
  margin-top: 12px !important;
  overflow-y: auto;
  overflow-x: hidden;
  min-height: 0;
  padding-inline-start: 8px;
  padding-inline-end: 8px;
  scrollbar-gutter: stable both-edges;
}

.stats-shell {
  display: grid;
  gap: 12px;
  min-width: 0;
}

.meta-dashboard {
  max-width: 1180px;
  margin: 0 auto;
  padding: 12px 16px 20px;
  display: grid;
  gap: 12px;
  min-width: 0;
  overflow-x: hidden;
}

.meta-command-center {
  gap: 16px;
  --cc-border: #e3e8f1;
}

.meta-command-center .meta-surface-card {
  border-color: var(--cc-border);
  box-shadow: 0 6px 20px rgba(15, 23, 42, 0.04);
  transition: border-color 0.18s ease, box-shadow 0.18s ease, transform 0.18s ease;
}

.meta-command-center .meta-surface-card:hover {
  border-color: #d4dbea;
  box-shadow: 0 10px 24px rgba(15, 23, 42, 0.07);
}

.meta-page-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
}

.meta-page-heading {
  display: grid;
  gap: 8px;
}

.meta-page-title {
  margin: 0;
  font-size: 30px;
  line-height: 1.2;
  font-weight: 700;
  color: #0f172a;
}

.meta-page-subtitle {
  margin: 0;
  color: #64748b;
  font-size: 14px;
}

.meta-page-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.meta-dashboard .button {
  min-height: 36px;
  border-radius: 12px;
  font-weight: 700;
  box-shadow: none;
}

.meta-dashboard .button:not(.secondary):not(.danger) {
  background: #7c3aed;
  border: 1px solid #7c3aed;
  color: #fff;
}

.meta-dashboard .button.secondary {
  background: #ffffff;
  border: 1px solid #d0d7e2;
  color: #111827;
}

.meta-dashboard .button.danger,
.meta-dashboard .button.subtle-danger {
  background: #fff;
  border: 1px solid #f2c8cd;
  color: #b42318;
}

.meta-surface-card {
  background: #ffffff;
  border: 1px solid var(--cc-border);
  border-radius: 16px;
  padding: 16px;
  min-width: 0;
}

.meta-global-settings {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
}

.meta-global-card {
  min-height: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 14px;
}

.meta-card-head {
  display: flex;
  justify-content: flex-start;
  align-items: flex-start;
  gap: 12px;
}

.mobile-settings-toggle {
  display: none;
  margin-inline-start: auto;
  min-width: 74px;
  padding: 6px 10px;
}

.meta-card-head > div:not(.meta-card-icon) {
  flex: 1 1 auto;
  min-width: 0;
  text-align: start;
}

html[dir="rtl"] .meta-card-head > div:not(.meta-card-icon) {
  text-align: right;
}

html[dir="rtl"] .meta-card-head .meta-card-icon {
  order: 2;
}

html[dir="rtl"] .meta-card-head > div:not(.meta-card-icon) {
  order: 1;
}

.meta-card-icon {
  width: 30px;
  height: 30px;
  border-radius: 8px;
  flex: 0 0 auto;
  border: 1px solid var(--cc-border);
  background: #f6f8fc;
  position: relative;
}

.meta-card-icon::after {
  content: '';
  position: absolute;
  inset: 8px;
  border-radius: 5px;
  background: #7c3aed;
  opacity: 0.8;
}

.meta-card-icon-settings::after {
  inset: 9px;
  border-radius: 50%;
}

.meta-key-metrics-row {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.meta-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 8px;
  border-radius: 999px;
  border: 1px solid var(--cc-border);
  background: #f8fafd;
  max-width: 100%;
}

.meta-pill-label {
  color: #64748b;
  font-size: 11px;
}

.meta-pill-value {
  color: #0f172a;
  font-size: 11px;
  font-weight: 700;
  max-width: 180px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.meta-pill-budget .meta-pill-value {
  max-width: 260px;
}

.meta-connection-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-inline-end: 8px;
  padding: 3px 10px;
  border-radius: 999px;
  border: 1px solid #f0d5d9;
  color: #9f1239;
  background: #fff7f9;
  font-size: 12px;
  font-weight: 700;
  white-space: nowrap;
}

#ads-connection-status {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 24px;
}

.meta-connection-badge.connected {
  border-color: #bde5c8;
  color: #166534;
  background: #f0fdf4;
}

.meta-card-title {
  margin: 0;
  font-size: 18px;
  font-weight: 700;
  color: #0f172a;
}

.meta-card-meta {
  margin: 2px 0 0;
  font-size: 13px;
  color: #64748b;
}

.meta-card-actions {
  margin-top: 4px;
  display: flex;
  gap: 8px;
}

.meta-account-actions {
  margin-top: 4px;
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.meta-account-actions .button {
  min-width: 184px;
}

#open-wizard-btn {
  margin-left: 2px;
}

.meta-section-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 12px;
  margin-bottom: 8px;
}

.meta-section-title {
  margin: 0;
  font-size: 20px;
  font-weight: 700;
  color: #0f172a;
}

.meta-quick-stats-card {
  display: grid;
  gap: 8px;
}

.meta-ai-audit-card {
  position: relative;
  overflow: hidden;
  border-radius: 18px;
  border: 1px solid #d8ccf7;
  background: linear-gradient(135deg, #faf8ff 0%, #f3edff 42%, #eef6ff 100%);
  box-shadow: 0 14px 36px rgba(91, 33, 182, 0.08);
}

.meta-ai-audit-glow {
  position: absolute;
  inset: -40% auto auto -10%;
  width: 280px;
  height: 280px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(124, 58, 237, 0.18) 0%, rgba(124, 58, 237, 0) 70%);
  pointer-events: none;
}

.meta-ai-audit-inner {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 16px;
  align-items: center;
  padding: 18px 20px;
}

.meta-ai-audit-icon {
  width: 56px;
  height: 56px;
  border-radius: 16px;
  display: grid;
  place-items: center;
  color: #6d28d9;
  background: rgba(255, 255, 255, 0.82);
  border: 1px solid rgba(124, 58, 237, 0.18);
  box-shadow: 0 8px 20px rgba(124, 58, 237, 0.12);
}

.meta-ai-audit-copy {
  display: grid;
  gap: 6px;
  min-width: 0;
}

.meta-ai-audit-eyebrow {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #7c3aed;
}

.meta-ai-audit-title {
  margin: 0;
  font-size: 22px;
  line-height: 1.2;
  font-weight: 700;
  color: #1e1b4b;
}

.meta-ai-audit-subtitle {
  margin: 0;
  color: #475569;
  font-size: 14px;
  line-height: 1.45;
  max-width: 62ch;
}

.meta-ai-audit-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 2px;
}

.meta-ai-audit-tag {
  display: inline-flex;
  align-items: center;
  padding: 3px 8px;
  border-radius: 999px;
  border: 1px solid rgba(124, 58, 237, 0.16);
  background: rgba(255, 255, 255, 0.72);
  color: #5b21b6;
  font-size: 11px;
  font-weight: 700;
}

.meta-ai-audit-actions {
  display: grid;
  gap: 8px;
  justify-items: end;
}

.meta-ai-audit-score-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.88);
  border: 1px solid rgba(124, 58, 237, 0.18);
  color: #312e81;
  font-size: 12px;
  font-weight: 700;
}

.meta-ai-audit-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 42px;
  padding: 0 18px;
  border-radius: 14px;
  background: linear-gradient(135deg, #7c3aed 0%, #6d28d9 55%, #5b21b6 100%);
  border: 1px solid #6d28d9;
  box-shadow: 0 10px 24px rgba(91, 33, 182, 0.24);
  white-space: nowrap;
}

.meta-ai-audit-btn:hover:not(:disabled) {
  transform: translateY(-1px);
  box-shadow: 0 14px 28px rgba(91, 33, 182, 0.28);
}

.meta-ai-audit-btn:disabled {
  opacity: 0.65;
  cursor: not-allowed;
}

.meta-ai-audit-btn-icon {
  font-size: 14px;
  line-height: 1;
}

.meta-ai-audit-modal-card {
  width: min(760px, calc(100vw - 24px));
  max-height: calc(100vh - 32px);
  overflow: auto;
}

.meta-ai-audit-modal-content {
  margin-top: 14px;
  display: grid;
  gap: 16px;
}

.meta-ai-audit-loading {
  display: grid;
  gap: 12px;
  justify-items: center;
  padding: 28px 12px;
  text-align: center;
}

.meta-ai-audit-loading-text {
  color: #475569;
  font-size: 14px;
  max-width: 36ch;
}

.meta-ai-audit-hero {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 16px;
  align-items: center;
  padding: 16px;
  border-radius: 16px;
  border: 1px solid #e7e2fb;
  background: linear-gradient(135deg, #faf8ff 0%, #f5f3ff 100%);
}

.meta-ai-audit-score-ring {
  width: 92px;
  height: 92px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: conic-gradient(#7c3aed calc(var(--score, 0) * 1%), #ece9fe 0);
  position: relative;
  flex: 0 0 auto;
}

.meta-ai-audit-score-ring > div {
  position: relative;
  z-index: 1;
  display: grid;
  justify-items: center;
  gap: 2px;
}

.meta-ai-audit-score-ring::after {
  content: '';
  position: absolute;
  inset: 8px;
  border-radius: 50%;
  background: #fff;
}

.meta-ai-audit-score-value {
  position: relative;
  z-index: 1;
  font-size: 26px;
  font-weight: 700;
  color: #312e81;
  line-height: 1;
}

.meta-ai-audit-grade {
  position: relative;
  z-index: 1;
  margin-top: 2px;
  font-size: 12px;
  font-weight: 700;
  color: #7c3aed;
}

.meta-ai-audit-summary {
  margin: 0;
  color: #334155;
  font-size: 14px;
  line-height: 1.55;
}

.meta-ai-audit-categories {
  display: grid;
  gap: 10px;
}

.meta-ai-audit-category {
  display: grid;
  gap: 6px;
}

.meta-ai-audit-category-head {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  font-size: 13px;
  font-weight: 700;
  color: #0f172a;
}

.meta-ai-audit-category-bar {
  height: 8px;
  border-radius: 999px;
  background: #ececf6;
  overflow: hidden;
}

.meta-ai-audit-category-bar > span {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, #7c3aed, #a78bfa);
}

.meta-ai-audit-section-title {
  margin: 0;
  font-size: 15px;
  font-weight: 700;
  color: #0f172a;
}

.meta-ai-audit-findings,
.meta-ai-audit-quick-wins {
  display: grid;
  gap: 10px;
}

.meta-ai-audit-finding,
.meta-ai-audit-quick-win {
  border: 1px solid var(--cc-border);
  border-radius: 14px;
  padding: 12px 14px;
  background: #fff;
  display: grid;
  gap: 6px;
}

.meta-ai-audit-finding-head {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.meta-ai-audit-severity {
  display: inline-flex;
  align-items: center;
  padding: 2px 8px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.meta-ai-audit-severity.critical {
  background: #fee4e2;
  color: #b42318;
}

.meta-ai-audit-severity.high {
  background: #fff4e5;
  color: #b54708;
}

.meta-ai-audit-severity.medium {
  background: #eef4ff;
  color: #175cd3;
}

.meta-ai-audit-severity.low {
  background: #f2f4f7;
  color: #475467;
}

.meta-ai-audit-finding-title {
  font-size: 14px;
  font-weight: 700;
  color: #0f172a;
}

.meta-ai-audit-finding-impact,
.meta-ai-audit-finding-action,
.meta-ai-audit-quick-win-action {
  margin: 0;
  font-size: 13px;
  line-height: 1.45;
  color: #475569;
}

.meta-ai-audit-finding-action,
.meta-ai-audit-quick-win-action {
  color: #1e293b;
}

.meta-ai-audit-quick-win-title {
  font-size: 14px;
  font-weight: 700;
  color: #0f172a;
}

.meta-ai-audit-quick-win-meta {
  font-size: 12px;
  color: #64748b;
  font-weight: 700;
}

.meta-ai-audit-fix-row {
  display: flex;
  justify-content: flex-start;
  margin-top: 4px;
}

.meta-ai-audit-fix-btn {
  background: linear-gradient(135deg, #7c3aed 0%, #6d28d9 100%);
  border: 1px solid #6d28d9;
  color: #fff;
  min-height: 34px;
  border-radius: 10px;
  font-weight: 700;
}

.meta-ai-audit-fix-btn:disabled {
  opacity: 0.7;
}

.meta-ai-audit-fix-applied {
  margin-top: 4px;
  font-size: 12px;
  font-weight: 700;
  color: #027a48;
}

.meta-ai-audit-footer-actions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  flex-wrap: wrap;
}

.meta-ai-audit-modal-card {
  width: min(980px, calc(100vw - 24px));
  height: min(88vh, 900px);
  max-height: min(88vh, 900px);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  padding: 0;
}

.meta-ai-audit-modal-card > .modal-close,
.meta-ai-audit-modal-card > .modal-title {
  display: none;
}

.meta-ai-audit-modal-content {
  margin-top: 0;
  flex: 1 1 auto;
  min-height: 0;
  display: block;
}

.meta-ai-audit-shell {
  height: 100%;
  min-height: 0;
  display: flex;
  flex-direction: column;
  background: #f8fafc;
}

.meta-ai-audit-sticky-head {
  position: sticky;
  top: 0;
  z-index: 4;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 14px;
  align-items: start;
  padding: 18px 20px 16px;
  border-bottom: 1px solid rgba(226, 232, 240, 0.9);
  background: rgba(255, 255, 255, 0.96);
  backdrop-filter: blur(14px);
}

.meta-ai-audit-head-copy {
  min-width: 0;
}

.meta-ai-audit-head-title-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
}

.meta-ai-audit-head-kicker {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #7c3aed;
}

.meta-ai-audit-head-title {
  margin: 2px 0 0;
  color: #0f172a;
  font-size: 20px;
  line-height: 1.2;
  font-weight: 700;
  letter-spacing: -0.03em;
}

.meta-ai-audit-head-summary {
  margin: 8px 0 0;
  max-width: 72ch;
  color: #475569;
  font-size: 13px;
  line-height: 1.7;
}

.meta-ai-audit-head-score {
  flex: 0 0 auto;
  display: inline-grid;
  place-items: center;
  min-width: 58px;
  min-height: 48px;
  padding: 5px 10px;
  border: 1px solid #ddd6fe;
  border-radius: 16px;
  background: linear-gradient(135deg, #faf5ff, #eef2ff);
  color: #4c1d95;
}

.meta-ai-audit-head-score strong {
  font-size: 22px;
  line-height: 1;
  font-weight: 950;
}

.meta-ai-audit-head-score span {
  margin-top: 2px;
  font-size: 11px;
  font-weight: 700;
}

.meta-ai-audit-head-close {
  width: 34px;
  height: 34px;
  border: 1px solid #e2e8f0;
  border-radius: 999px;
  background: #fff;
  color: #475569;
  cursor: pointer;
  font-weight: 700;
  line-height: 1;
}

.meta-ai-audit-scroll-body {
  flex: 1 1 auto;
  min-height: 0;
  overflow: auto;
  padding: 16px 20px 18px;
  display: grid;
  gap: 16px;
}

.meta-ai-audit-overview-card,
.meta-ai-audit-section {
  border: 1px solid rgba(226, 232, 240, 0.95);
  border-radius: 20px;
  background: rgba(255, 255, 255, 0.92);
  box-shadow: 0 12px 32px rgba(15, 23, 42, 0.04);
}

.meta-ai-audit-overview-card {
  padding: 16px;
  display: grid;
  gap: 14px;
}

.meta-ai-audit-overview-score {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 14px;
  align-items: center;
  min-width: 0;
}

.meta-ai-audit-overview-score .meta-ai-audit-score-ring {
  width: 74px;
  height: 74px;
}

.meta-ai-audit-overview-score .meta-ai-audit-score-ring::after {
  inset: 6px;
}

.meta-ai-audit-overview-score .meta-ai-audit-score-value {
  font-size: 22px;
}

.meta-ai-audit-overview-score .meta-ai-audit-grade {
  font-size: 10px;
}

.meta-ai-audit-overview-card .meta-ai-audit-summary {
  margin-top: 5px;
  max-width: 78ch;
  font-size: 13px;
  line-height: 1.65;
  color: #475569;
}

.meta-ai-audit-metrics-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
}

.meta-ai-audit-metric-card {
  display: grid;
  gap: 9px;
  min-width: 0;
  padding: 12px;
  border: 1px solid #e2e8f0;
  border-radius: 16px;
  background: #fff;
}

.meta-ai-audit-metric-top {
  display: grid;
  gap: 4px;
}

.meta-ai-audit-metric-label {
  color: #475569;
  font-size: 12px;
  line-height: 1.35;
  font-weight: 700;
}

.meta-ai-audit-metric-card strong {
  color: #0f172a;
  font-size: 16px;
  line-height: 1;
  font-weight: 700;
}

.meta-ai-audit-category-bar {
  height: 5px;
  background: #edf2f7;
}

.meta-ai-audit-metric-card.tone-good .meta-ai-audit-category-bar > span {
  background: linear-gradient(90deg, #12b76a, #6ee7b7);
}

.meta-ai-audit-metric-card.tone-medium .meta-ai-audit-category-bar > span {
  background: linear-gradient(90deg, #f59e0b, #60a5fa);
}

.meta-ai-audit-metric-card.tone-high .meta-ai-audit-category-bar > span {
  background: linear-gradient(90deg, #f97316, #ef4444);
}

.meta-ai-audit-section {
  padding: 16px;
  display: grid;
  gap: 12px;
}

.meta-ai-audit-section-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.meta-ai-audit-section-title {
  font-size: 16px;
  letter-spacing: -0.02em;
}

.meta-ai-audit-quick-wins {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}

.meta-ai-audit-quick-win-card {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 12px;
  min-width: 0;
  min-height: 100%;
  padding: 13px;
  border: 1px solid #e2e8f0;
  border-radius: 16px;
  background: linear-gradient(180deg, #ffffff, #fbfdff);
}

.meta-ai-audit-quick-win-title {
  font-size: 14px;
  line-height: 1.45;
  font-weight: 700;
}

.meta-ai-audit-quick-win-action {
  margin: 7px 0 0;
  font-size: 13px;
  line-height: 1.65;
  color: #475569;
}

.meta-ai-audit-findings {
  gap: 12px;
}

.meta-ai-audit-issue-card {
  display: grid;
  grid-template-columns: 150px minmax(0, 1fr);
  gap: 16px;
  padding: 15px;
  border: 1px solid #e2e8f0;
  border-radius: 18px;
  background: #fff;
  box-shadow: 0 10px 24px rgba(15, 23, 42, 0.035);
}

.meta-ai-audit-issue-card.severity-critical,
.meta-ai-audit-issue-card.severity-high {
  border-color: #fed7aa;
  background: linear-gradient(180deg, #fff, #fffaf5);
}

.meta-ai-audit-issue-card.severity-medium {
  border-color: #bfdbfe;
  background: linear-gradient(180deg, #fff, #f8fbff);
}

.meta-ai-audit-issue-card.severity-low {
  border-color: #d1fae5;
  background: linear-gradient(180deg, #fff, #f7fefb);
}

.meta-ai-audit-issue-meta {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
  min-width: 0;
}

.meta-ai-audit-issue-code,
.meta-ai-audit-issue-category {
  display: inline-flex;
  max-width: 100%;
  padding: 4px 9px;
  border-radius: 999px;
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  color: #475569;
  font-size: 11px;
  line-height: 1.2;
  font-weight: 850;
}

.meta-ai-audit-issue-content {
  display: grid;
  gap: 10px;
  min-width: 0;
}

.meta-ai-audit-finding-title {
  font-size: 16px;
  line-height: 1.45;
  letter-spacing: -0.01em;
}

.meta-ai-audit-issue-block {
  display: grid;
  gap: 3px;
  padding-top: 2px;
}

.meta-ai-audit-issue-label {
  color: #312e81;
  font-size: 12px;
  line-height: 1.3;
  font-weight: 700;
}

.meta-ai-audit-issue-text {
  margin: 0;
  color: #475569;
  font-size: 13px;
  line-height: 1.7;
}

.meta-ai-audit-empty {
  padding: 14px;
  border-radius: 14px;
  background: #f8fafc;
  color: #64748b;
  font-size: 13px;
  line-height: 1.6;
}

/* WhatsApp ops audit report (shared between client modal and admin panel) */
.wa-field-help {
  font-size: 12px;
  font-weight: 400;
  line-height: 1.55;
  color: #64748b;
  margin-top: -1px;
}
.wa-ops-audit-stats-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 8px;
}
.wa-ops-audit-stat-chip {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 10px 12px;
  border-radius: 12px;
  border: 1px solid #e2e8f0;
  background: #f8fafc;
  font-size: 12px;
  color: #64748b;
}
.wa-ops-audit-stat-chip strong {
  font-size: 16px;
  font-weight: 700;
  color: #0f172a;
}
.wa-ops-audit-quotes {
  margin: 10px 0 0;
  padding: 10px;
  background: #efeae2;
  border: 1px solid #e2e8f0;
  border-radius: 12px;
  font-size: 13px;
  color: #334155;
}
.wa-ops-audit-chat {
  display: grid;
  gap: 6px;
}
.wa-ops-audit-chat-row {
  display: flex;
}
.wa-ops-audit-chat-row.is-customer {
  justify-content: flex-start;
}
.wa-ops-audit-chat-row.is-business {
  justify-content: flex-end;
}
.wa-ops-audit-chat-bubble {
  max-width: 84%;
  padding: 7px 10px 8px;
  border-radius: 12px;
  box-shadow: 0 1px 1px rgba(15, 23, 42, 0.08);
  font-size: 13px;
  line-height: 1.5;
}
.wa-ops-audit-chat-row.is-customer .wa-ops-audit-chat-bubble {
  background: #ffffff;
  border-start-start-radius: 4px;
}
.wa-ops-audit-chat-row.is-business .wa-ops-audit-chat-bubble {
  background: #d9fdd3;
  border-start-end-radius: 4px;
}
.wa-ops-audit-chat-role {
  display: block;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #64748b;
  margin-bottom: 2px;
}
.wa-ops-audit-chat-row.is-business .wa-ops-audit-chat-role {
  color: #15803d;
}
.wa-ops-audit-chat-text {
  color: #1f2937;
  white-space: pre-wrap;
  word-break: break-word;
}
.wa-ops-audit-chat-voice {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin: 4px 0 6px;
  padding: 3px 8px;
  border-radius: 999px;
  border: 1px solid rgba(124, 58, 237, 0.22);
  background: rgba(124, 58, 237, 0.08);
  color: var(--brand-primary);
  font-size: 11px;
  font-weight: 700;
}
.wa-ops-audit-chat-voice svg {
  width: 13px;
  height: 13px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.wa-ops-audit-meta-only {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  margin: 10px 0 4px;
  font-size: 13px;
  font-weight: 500;
  color: var(--brand-ink);
  cursor: pointer;
}
.wa-ops-audit-meta-only input {
  margin-top: 2px;
}
.wa-ops-audit-group {
  border: 1px solid #e2e8f0;
  border-radius: 14px;
  background: #fff;
  overflow: hidden;
}
.wa-ops-audit-group > summary {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 14px;
  cursor: pointer;
  list-style: none;
  font-weight: 700;
  color: #0f172a;
  background: #f8fafc;
}
.wa-ops-audit-group > summary::-webkit-details-marker {
  display: none;
}
.wa-ops-audit-group > summary::after {
  content: "▾";
  margin-inline-start: auto;
  color: #64748b;
  font-size: 12px;
  transition: transform 0.15s ease;
}
.wa-ops-audit-group[open] > summary::after {
  transform: rotate(180deg);
}
.wa-ops-audit-group-title {
  font-size: 14px;
}
.wa-ops-audit-group-count {
  flex: 0 0 auto;
  min-width: 26px;
  padding: 2px 8px;
  border-radius: 999px;
  background: #e2e8f0;
  color: #334155;
  font-size: 12px;
  font-weight: 700;
  text-align: center;
}
.wa-ops-audit-group-hint {
  font-size: 12px;
  font-weight: 500;
  color: #64748b;
}
.wa-ops-audit-group-body {
  display: grid;
  gap: 10px;
  padding: 12px;
  border-top: 1px solid #e2e8f0;
}
.wa-ops-cat-how {
  margin: 6px 0 0;
  font-size: 11px;
  line-height: 1.5;
  color: #64748b;
}
.wa-ops-source-coverage {
  margin: 2px 0 0;
  font-size: 11px;
  color: #92400e;
  background: #fffbeb;
  border: 1px solid #fde68a;
  border-radius: 8px;
  padding: 5px 8px;
}
.wa-ops-source-compare {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  padding: 0 16px 16px;
}
.wa-ops-source-card {
  border: 1px solid #e2e8f0;
  border-radius: 16px;
  background: linear-gradient(180deg, #fff, #f8fafc);
  padding: 14px;
  display: grid;
  gap: 10px;
}
.wa-ops-source-card.is-meta {
  border-color: #bbf7d0;
  background: linear-gradient(180deg, #fff, #f0fdf4);
}
.wa-ops-source-card h4 {
  margin: 0;
  font-size: 15px;
  font-weight: 700;
  color: #0f172a;
}
.wa-ops-source-card .wa-ops-source-kicker {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #64748b;
}
.wa-ops-source-card.is-meta .wa-ops-source-kicker {
  color: #15803d;
}
.wa-ops-source-row {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  font-size: 13px;
  color: #475569;
}
.wa-ops-source-row strong {
  color: #0f172a;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}
.wa-ops-source-row.is-good strong { color: #15803d; }
.wa-ops-source-row.is-bad strong { color: #b91c1c; }
.wa-ops-verdict {
  margin: 0 16px 4px;
  padding: 12px 14px;
  border-radius: 14px;
  border: 1px solid #e2e8f0;
  background: #fff;
  font-size: 14px;
  line-height: 1.55;
  font-weight: 500;
  color: #0f172a;
}
.wa-ops-verdict.is-meta_worse,
.wa-ops-verdict.is-bad {
  border-color: #fecaca;
  background: #fef2f2;
  color: #7f1d1d;
}
.wa-ops-verdict.is-meta_better,
.wa-ops-verdict.is-good {
  border-color: #bbf7d0;
  background: #f0fdf4;
  color: #14532d;
}
@media (max-width: 720px) {
  .wa-ops-source-compare {
    grid-template-columns: 1fr;
  }
}

.meta-ai-audit-fix-row {
  margin-top: 2px;
}

.meta-ai-audit-fix-btn {
  min-height: 36px;
  padding: 0 14px;
  border-radius: 12px;
  box-shadow: 0 8px 18px rgba(109, 40, 217, 0.18);
}

.meta-ai-audit-footer-actions {
  flex: 0 0 auto;
  justify-content: flex-end;
  padding: 12px 20px;
  border-top: 1px solid rgba(226, 232, 240, 0.95);
  background: rgba(255, 255, 255, 0.96);
  backdrop-filter: blur(14px);
}

.meta-ai-audit-footer-actions .button {
  min-height: 38px;
  border-radius: 12px;
  font-weight: 850;
}

.wa-ops-audit-share-status {
  flex: 0 0 auto;
  padding: 0 20px 14px;
  border-top: 0;
  background: rgba(255, 255, 255, 0.96);
}
.wa-ops-audit-share-status.hidden {
  display: none;
}
.wa-ops-audit-share-card {
  border: 1px solid #bbf7d0;
  background: #f0fdf4;
  border-radius: 12px;
  padding: 10px 12px;
}
.wa-ops-audit-share-note {
  font-size: 13px;
  font-weight: 500;
  color: #166534;
  margin-bottom: 8px;
  line-height: 1.45;
}
.wa-ops-audit-share-row {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  align-items: center;
}
.wa-ops-audit-share-input {
  flex: 1 1 220px;
  min-width: 0;
  min-height: 36px;
  font-size: 12px;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
}

html[dir="rtl"] .meta-ai-audit-glow,
[dir="rtl"] .meta-ai-audit-glow,
html[lang="ar"] .meta-ai-audit-glow {
  inset: -40% -10% auto auto;
}

html[dir="rtl"] .meta-ai-audit-inner,
[dir="rtl"] .meta-ai-audit-inner,
html[lang="ar"] .meta-ai-audit-inner {
  text-align: right;
}

html[dir="rtl"] .meta-ai-audit-copy,
[dir="rtl"] .meta-ai-audit-copy,
html[lang="ar"] .meta-ai-audit-copy {
  text-align: right;
}

html[dir="rtl"] .meta-ai-audit-eyebrow,
[dir="rtl"] .meta-ai-audit-eyebrow,
html[lang="ar"] .meta-ai-audit-eyebrow {
  letter-spacing: 0;
  text-transform: none;
}

html[dir="rtl"] .meta-ai-audit-actions,
[dir="rtl"] .meta-ai-audit-actions,
html[lang="ar"] .meta-ai-audit-actions {
  justify-items: start;
}

html[dir="rtl"] .meta-ai-audit-btn,
[dir="rtl"] .meta-ai-audit-btn,
html[lang="ar"] .meta-ai-audit-btn {
  flex-direction: row-reverse;
}

html[dir="rtl"] .meta-ai-audit-hero,
[dir="rtl"] .meta-ai-audit-hero,
html[lang="ar"] .meta-ai-audit-hero {
  text-align: right;
}

html[dir="rtl"] .meta-ai-audit-category-head,
[dir="rtl"] .meta-ai-audit-category-head,
html[lang="ar"] .meta-ai-audit-category-head {
  flex-direction: row-reverse;
}

html[dir="rtl"] .meta-ai-audit-category-bar,
[dir="rtl"] .meta-ai-audit-category-bar,
html[lang="ar"] .meta-ai-audit-category-bar {
  direction: ltr;
}

html[dir="rtl"] .meta-ai-audit-finding-head,
[dir="rtl"] .meta-ai-audit-finding-head,
html[lang="ar"] .meta-ai-audit-finding-head {
  flex-direction: row-reverse;
}

html[dir="rtl"] .meta-ai-audit-finding-impact strong,
[dir="rtl"] .meta-ai-audit-finding-impact strong,
html[dir="rtl"] .meta-ai-audit-finding-action strong,
[dir="rtl"] .meta-ai-audit-finding-action strong,
html[lang="ar"] .meta-ai-audit-finding-impact strong,
html[lang="ar"] .meta-ai-audit-finding-action strong {
  display: inline-block;
  margin-left: 4px;
  margin-right: 0;
}

html[dir="rtl"] .meta-ai-audit-fix-row,
[dir="rtl"] .meta-ai-audit-fix-row,
html[lang="ar"] .meta-ai-audit-fix-row {
  justify-content: flex-start;
}

html[dir="rtl"] .meta-ai-audit-footer-actions,
[dir="rtl"] .meta-ai-audit-footer-actions,
html[lang="ar"] .meta-ai-audit-footer-actions {
  justify-content: flex-start;
}

html[dir="rtl"] .meta-ai-audit-sticky-head,
[dir="rtl"] .meta-ai-audit-sticky-head,
html[lang="ar"] .meta-ai-audit-sticky-head {
  grid-template-columns: minmax(0, 1fr) auto;
}

html[dir="rtl"] .meta-ai-audit-head-title-row,
[dir="rtl"] .meta-ai-audit-head-title-row,
html[lang="ar"] .meta-ai-audit-head-title-row {
  justify-content: flex-start;
  width: fit-content;
  max-width: 100%;
  margin-left: auto;
  margin-right: 0;
}

html[dir="rtl"] .meta-ai-audit-head-title-row > div,
[dir="rtl"] .meta-ai-audit-head-title-row > div,
html[lang="ar"] .meta-ai-audit-head-title-row > div {
  min-width: 0;
  text-align: right;
}

html[dir="rtl"] .meta-ai-audit-head-score,
[dir="rtl"] .meta-ai-audit-head-score,
html[lang="ar"] .meta-ai-audit-head-score {
  order: -1;
}

html[dir="rtl"] .meta-ai-audit-head-kicker,
[dir="rtl"] .meta-ai-audit-head-kicker,
html[lang="ar"] .meta-ai-audit-head-kicker {
  letter-spacing: 0;
  text-transform: none;
}

html[dir="rtl"] .meta-ai-audit-overview-score,
[dir="rtl"] .meta-ai-audit-overview-score,
html[lang="ar"] .meta-ai-audit-overview-score {
  text-align: right;
}

html[dir="rtl"] .meta-ai-audit-issue-meta,
[dir="rtl"] .meta-ai-audit-issue-meta,
html[lang="ar"] .meta-ai-audit-issue-meta {
  align-items: flex-start;
}

html[dir="rtl"] .meta-ai-audit-issue-text,
[dir="rtl"] .meta-ai-audit-issue-text,
html[lang="ar"] .meta-ai-audit-issue-text,
html[dir="rtl"] .meta-ai-audit-quick-win-action,
[dir="rtl"] .meta-ai-audit-quick-win-action,
html[lang="ar"] .meta-ai-audit-quick-win-action {
  line-height: 1.75;
}

@media (max-width: 900px) {
  .meta-ai-audit-metrics-grid,
  .meta-ai-audit-quick-wins {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .meta-ai-audit-issue-card {
    grid-template-columns: 128px minmax(0, 1fr);
  }
}

@media (max-width: 640px) {
  .meta-ai-audit-modal-card {
    width: calc(100vw - 16px);
    height: min(92vh, 900px);
    max-height: min(92vh, 900px);
  }

  .meta-ai-audit-sticky-head {
    padding: 14px;
  }

  .meta-ai-audit-head-title-row {
    align-items: flex-start;
  }

  .meta-ai-audit-head-summary {
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }

  .meta-ai-audit-scroll-body {
    padding: 12px;
    gap: 12px;
  }

  .meta-ai-audit-overview-score,
  .meta-ai-audit-issue-card {
    grid-template-columns: 1fr;
  }

  .meta-ai-audit-overview-score .meta-ai-audit-score-ring {
    width: 68px;
    height: 68px;
  }

  .meta-ai-audit-metrics-grid,
  .meta-ai-audit-quick-wins {
    grid-template-columns: 1fr;
  }

  .meta-ai-audit-issue-meta {
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
  }

  .meta-ai-audit-footer-actions {
    justify-content: stretch;
    padding: 10px 12px;
  }

  .meta-ai-audit-footer-actions .button {
    flex: 1 1 auto;
  }
}

.modal.open.modal-stacked {
  z-index: 1200;
}

.modal-back.meta-audit-submodal-back {
  position: absolute;
  top: 16px;
  left: 16px;
  right: auto;
  border: none;
  background: rgba(15, 23, 42, 0.08);
  border-radius: 999px;
  width: 36px;
  height: 36px;
  font-size: 18px;
  line-height: 1;
  cursor: pointer;
  z-index: 2;
}

.add-ad-to-adset-modal-card {
  max-width: 720px;
  width: min(720px, calc(100vw - 24px));
  display: flex;
  flex-direction: column;
  max-height: min(88vh, 900px);
}

.add-ad-to-adset-modal-content {
  flex: 1 1 auto;
  overflow: auto;
  min-height: 0;
  padding-bottom: 8px;
}

.add-ad-to-adset-modal-footer {
  flex: 0 0 auto;
  border-top: 1px solid var(--border, #e5e7eb);
  padding: 12px 0 0;
  background: #fff;
}

.add-ad-to-adset-target-note {
  margin: 0 0 12px;
  padding: 10px 12px;
  border-radius: 10px;
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  font-size: 13px;
}

.meta-ai-audit-budget-modal-card {
  max-width: 520px;
  width: min(520px, calc(100vw - 24px));
}

.meta-ai-audit-budget-preview {
  display: grid;
  gap: 10px;
  margin-top: 8px;
}

.meta-ai-audit-budget-preview-row {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding: 8px 0;
  border-bottom: 1px solid #eef2f7;
}

.meta-ai-audit-budget-preview-row strong {
  text-align: end;
}

.meta-ai-audit-budget-actions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  margin-top: 16px;
}

.add-ad-to-adset-subtitle {
  margin: 0 0 12px;
}

.add-ad-to-adset-form .readonly-field {
  padding: 10px 12px;
  border: 1px solid var(--border, #e5e7eb);
  border-radius: 8px;
  background: var(--surface-muted, #f9fafb);
}

.add-ad-to-adset-grid {
  grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
}

.add-ad-to-adset-card {
  cursor: pointer;
  border: 2px solid transparent;
  transition: border-color 0.15s ease;
}

.add-ad-to-adset-card.selected {
  border-color: var(--primary, #2563eb);
}

.add-ad-to-adset-card input[type="radio"] {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.add-ad-to-adset-card .creative-thumb-wrap video,
.add-ad-to-adset-card .creative-thumb-wrap img {
  pointer-events: none;
}

.add-ad-to-adset-actions {
  justify-content: flex-end;
  gap: 8px;
  margin-top: 4px;
}

html[dir="rtl"] .add-ad-to-adset-actions,
[dir="rtl"] .add-ad-to-adset-actions,
html[lang="ar"] .add-ad-to-adset-actions {
  justify-content: flex-start;
}

html[dir="rtl"] #meta-ai-audit-modal .modal-close,
[dir="rtl"] #meta-ai-audit-modal .modal-close,
.rtl #meta-ai-audit-modal .modal-close,
html[lang="ar"] #meta-ai-audit-modal .modal-close,
html[lang="he"] #meta-ai-audit-modal .modal-close {
  left: 16px !important;
  right: auto !important;
}

html[dir="rtl"] #add-ad-to-adset-modal .modal-close,
[dir="rtl"] #add-ad-to-adset-modal .modal-close,
.rtl #add-ad-to-adset-modal .modal-close,
html[lang="ar"] #add-ad-to-adset-modal .modal-close,
html[lang="he"] #add-ad-to-adset-modal .modal-close,
html[dir="rtl"] #meta-ai-audit-budget-modal .modal-close,
[dir="rtl"] #meta-ai-audit-budget-modal .modal-close,
.rtl #meta-ai-audit-budget-modal .modal-close,
html[lang="ar"] #meta-ai-audit-budget-modal .modal-close,
html[lang="he"] #meta-ai-audit-budget-modal .modal-close {
  left: 16px !important;
  right: auto !important;
}

html[dir="rtl"] #add-ad-to-adset-modal .modal-back,
[dir="rtl"] #add-ad-to-adset-modal .modal-back,
html[lang="ar"] #add-ad-to-adset-modal .modal-back,
html[lang="he"] #add-ad-to-adset-modal .modal-back,
html[dir="rtl"] #meta-ai-audit-budget-modal .modal-back,
[dir="rtl"] #meta-ai-audit-budget-modal .modal-back,
html[lang="ar"] #meta-ai-audit-budget-modal .modal-back,
html[lang="he"] #meta-ai-audit-budget-modal .modal-back {
  left: auto !important;
  right: 16px !important;
}

html[dir="rtl"] #add-ad-to-adset-modal .modal-title,
[dir="rtl"] #add-ad-to-adset-modal .modal-title,
html[lang="ar"] #add-ad-to-adset-modal .modal-title,
html[lang="he"] #add-ad-to-adset-modal .modal-title,
html[dir="rtl"] #meta-ai-audit-budget-modal .modal-title,
[dir="rtl"] #meta-ai-audit-budget-modal .modal-title,
html[lang="ar"] #meta-ai-audit-budget-modal .modal-title,
html[lang="he"] #meta-ai-audit-budget-modal .modal-title {
  text-align: right;
  padding-inline-start: 72px;
  padding-inline-end: 16px;
}

html[dir="rtl"] #meta-ai-audit-modal .modal-title,
[dir="rtl"] #meta-ai-audit-modal .modal-title,
html[lang="ar"] #meta-ai-audit-modal .modal-title,
html[lang="he"] #meta-ai-audit-modal .modal-title {
  text-align: right;
}

html[dir="rtl"] .meta-ai-audit-section-title,
[dir="rtl"] .meta-ai-audit-section-title,
html[lang="ar"] .meta-ai-audit-section-title {
  text-align: right;
}

html[dir="rtl"] .meta-ai-audit-loading-text,
[dir="rtl"] .meta-ai-audit-loading-text,
html[lang="ar"] .meta-ai-audit-loading-text {
  text-align: center;
}

html[dir="rtl"] .meta-ai-audit-score-pill,
[dir="rtl"] .meta-ai-audit-score-pill,
html[lang="ar"] .meta-ai-audit-score-pill {
  direction: ltr;
  unicode-bidi: isolate;
}

.meta-campaigns-card {
  padding-top: 12px;
}

.quick-stats-grid {
  margin-top: 0;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}

.quick-stat-card {
  border: 1px solid var(--cc-border);
  border-radius: 12px;
  padding: 8px;
  display: grid;
  gap: 3px;
  background: #fff;
  min-height: 92px;
}

.quick-stat-card-primary {
  border-color: #d9d8f8;
  background: #fcfbff;
  box-shadow: inset 0 0 0 1px rgba(124, 58, 237, 0.06);
}

.quick-stat-card-zero {
  border-color: #edf1f6;
  background: #fcfdff;
}

.quick-stat-progress {
  width: 100%;
  height: 4px;
  border-radius: 999px;
  background: #ebeef6;
  overflow: hidden;
}

.quick-stat-progress > span {
  display: block;
  height: 100%;
  background: #7c3aed;
}

.quick-stat-label {
  color: #64748b;
  font-size: 11px;
  font-weight: 700;
  min-height: 16px;
}

.quick-stat-value {
  color: #0f172a;
  font-size: 19px;
  font-weight: 700;
  line-height: 1.2;
  min-height: 24px;
}

.quick-stat-card-zero .quick-stat-value,
.quick-stat-card-zero .quick-stat-label {
  color: #9aa7b8;
}

.quick-stat-context {
  color: #94a3b8;
  font-size: 11px;
}

.meta-campaigns-safety-note {
  margin: 0 0 6px;
  font-weight: 500;
  line-height: 1.25;
  border-color: var(--cc-border);
  background: #f8fbff;
  padding: 6px 10px;
  font-size: 12px;
}

.campaign-toolbar {
  display: grid;
  grid-template-columns: minmax(280px, 1.6fr) repeat(3, minmax(110px, 0.8fr)) auto;
  gap: 6px;
  margin-bottom: 6px;
  padding: 8px;
  border: 1px solid var(--cc-border);
  border-radius: 12px;
  background: #fbfcff;
}

.campaign-toolbar-check {
  height: 40px;
  border: 1px solid #dbe2ef;
  border-radius: 10px;
  background: #fff;
  padding: 0 10px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  white-space: nowrap;
  color: #334155;
  font-size: 12px;
  font-weight: 500;
}

.campaign-toolbar-check input[type="checkbox"] {
  margin: 0;
}

.campaigns-summary-row {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  margin: 8px 2px 2px;
  color: #64748b;
  font-size: 13px;
}

.campaign-summary-item {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  line-height: 1.25;
}

.campaign-summary-label {
  font-size: 13px;
  color: #64748b;
}

.campaign-summary-adly-label {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.campaign-summary-adly-logo {
  width: 12px;
  height: 12px;
  object-fit: contain;
  display: inline-block;
  vertical-align: middle;
  border-radius: 2px;
}

.campaign-summary-value {
  font-size: 13px;
  color: #111827;
  font-weight: 700;
}

.campaign-summary-sep {
  color: #94a3b8;
}

.campaign-toolbar .input,
.campaign-toolbar select {
  height: 40px;
  border-color: #dbe2ef;
}

#campaign-search {
  background: #fff;
}

.campaign-table-wrap {
  width: 100%;
  max-width: 100%;
  overflow-x: auto;
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
}

.campaign-table {
  width: 100%;
  min-width: 990px;
  max-width: none;
  border-collapse: separate;
  border-spacing: 0 8px;
}

.campaign-table thead th {
  background: #f8fafc;
  color: #475569;
  font-size: 12px;
  font-weight: 700;
  text-align: right;
  padding: 12px;
  border-bottom: 1px solid var(--cc-border);
  white-space: nowrap;
  border-top: 1px solid var(--cc-border);
}

.campaign-sort-btn {
  border: 0;
  background: transparent;
  color: inherit;
  font: inherit;
  font-weight: inherit;
  width: 100%;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: flex-start;
  gap: 6px;
  cursor: pointer;
}

html[dir="rtl"] .campaign-sort-btn {
  justify-content: flex-end;
}

.campaign-sort-btn.is-active {
  color: #334155;
}

.campaign-sort-indicator {
  color: #94a3b8;
  font-size: 11px;
  line-height: 1;
}

.campaign-sort-btn.is-active .campaign-sort-indicator {
  color: #7c3aed;
}

.campaign-table thead th:first-child {
  border-inline-start: 1px solid var(--cc-border);
  border-radius: 10px 0 0 10px;
}

.campaign-table thead th:last-child {
  border-inline-end: 1px solid var(--cc-border);
  border-radius: 0 10px 10px 0;
}

.campaign-table tbody td {
  background: #fff;
  padding: 10px 12px;
  border-top: 1px solid var(--cc-border);
  border-bottom: 1px solid var(--cc-border);
  vertical-align: middle;
}

.campaign-table tbody td:first-child {
  border-inline-start: 1px solid var(--cc-border);
  border-radius: 12px 0 0 12px;
}

.campaign-table tbody td:last-child {
  border-inline-end: 1px solid var(--cc-border);
  border-radius: 0 12px 12px 0;
}

html[dir="rtl"] .campaign-table thead th:first-child {
  border-radius: 0 10px 10px 0;
}

html[dir="rtl"] .campaign-table thead th:last-child {
  border-radius: 10px 0 0 10px;
}

html[dir="rtl"] .campaign-table tbody td:first-child {
  border-radius: 0 12px 12px 0;
}

html[dir="rtl"] .campaign-table tbody td:last-child {
  border-radius: 12px 0 0 12px;
}

.campaign-table-row:hover td {
  background: #fbfcff;
  border-color: #dde5f2;
}

.campaign-name {
  max-width: 280px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-weight: 700;
  unicode-bidi: plaintext;
}

.campaign-name-row {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}

.campaign-name-row .campaign-name {
  flex: 1 1 auto;
  min-width: 0;
}

.campaign-origin-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border: 1px solid #ddd7f7;
  background: #f8f5ff;
  color: #5b21b6;
  border-radius: 999px;
  padding: 2px 8px;
  font-size: 11px;
  font-weight: 700;
  white-space: nowrap;
  flex: 0 0 auto;
}

.campaign-origin-logo {
  width: 14px;
  height: 14px;
  border-radius: 5px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: #7c3aed;
  color: #fff;
  font-size: 10px;
  line-height: 1;
  font-weight: 700;
}

.campaign-origin-logo-img {
  width: 14px;
  height: 14px;
  object-fit: contain;
  display: block;
  border-radius: 3px;
}

.campaign-origin-badge-icon-only {
  padding: 2px 6px;
}

.campaign-origin-legend {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin: 2px 0 8px;
  padding: 4px 8px;
  border: 1px solid var(--cc-border);
  border-radius: 10px;
  background: #fbfcff;
}

.campaign-origin-legend-text {
  color: #64748b;
  font-size: 12px;
  font-weight: 500;
}

.campaign-submeta {
  margin-top: 4px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: #738295;
  font-size: 11px;
}

.objective-pill {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 5px 9px;
  border-radius: 999px;
  border: 1px solid #e2e8f4;
  color: #334155;
  background: #f9fbff;
  font-size: 12px;
  font-weight: 700;
}

.objective-pill::before {
  content: '';
  width: 7px;
  height: 7px;
  border-radius: 999px;
  background: #7c3aed;
}

.objective-pill.obj-traffic::before {
  background: #0ea5e9;
}

.objective-pill.obj-leads::before {
  background: #16a34a;
}

.objective-pill.obj-sales::before {
  background: #f59e0b;
}

.campaign-col-money {
  text-align: end;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

.campaign-col-date {
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
  color: #475569;
}

.status-pill {
  font-size: 12px;
  line-height: 1;
  padding: 7px 10px;
  border-radius: 999px;
  border: 1px solid #d7dee8;
  background: #f8fafc;
  color: #334155;
  gap: 6px;
}

.status-pill .status-pill-icon {
  width: 6px;
  height: 6px;
}

.campaign-actions-cell .inline-actions {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  align-items: center;
}

.campaign-actions-primary .button {
  min-width: 84px;
}

.campaign-more-actions {
  position: relative;
}

.campaign-more-actions summary {
  list-style: none;
}

.campaign-more-actions summary::-webkit-details-marker {
  display: none;
}

.campaign-more-menu {
  position: absolute;
  inset-inline-end: 0;
  top: calc(100% + 6px);
  min-width: 170px;
  background: #fff;
  border: 1px solid #e4e9f2;
  border-radius: 12px;
  box-shadow: 0 16px 34px rgba(15, 23, 42, 0.1);
  padding: 8px;
  display: grid;
  gap: 6px;
  z-index: 5;
}

.campaign-more-menu .button {
  width: 100%;
  justify-content: center;
}

.campaign-actions-cell .button {
  min-height: 34px;
  padding: 7px 10px;
  border-radius: 10px;
  white-space: nowrap;
}

.campaign-actions-cell .btn-icon {
  display: none;
}

.meta-drafts-card {
  opacity: 0.94;
  padding-top: 12px;
}

.draft-list {
  display: grid;
  gap: 8px;
}

.draft-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  border: 1px solid var(--cc-border);
  border-radius: 12px;
  background: #fcfdff;
  padding: 10px 12px;
}

.draft-row:hover {
  border-color: #d8dff0;
}

.draft-main {
  min-width: 0;
  flex: 1 1 auto;
}

.draft-title-row {
  display: flex;
  align-items: center;
  gap: 8px;
}

.draft-title {
  color: #0f172a;
  font-weight: 700;
  max-width: 420px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  unicode-bidi: plaintext;
}

.draft-badge {
  font-size: 11px;
  font-weight: 700;
  color: #6d28d9;
  border: 1px solid #dfd1fb;
  background: #f7f2ff;
  border-radius: 999px;
  padding: 3px 8px;
}

.draft-meta {
  margin-top: 4px;
  color: #64748b;
  font-size: 12px;
  display: inline-flex;
  gap: 6px;
  align-items: center;
}

.draft-actions {
  display: flex;
  gap: 8px;
  justify-content: flex-end;
  flex: 0 0 auto;
}

.campaign-empty-state {
  border: 1px dashed var(--cc-border);
  border-radius: 14px;
  background: #fcfdff;
  padding: 20px 14px;
  text-align: center;
  display: grid;
  gap: 8px;
  justify-items: center;
}

.campaign-empty-icon {
  width: 34px;
  height: 34px;
  border-radius: 10px;
  border: 1px solid var(--cc-border);
  background: #f6f8fc;
  position: relative;
}

.campaign-empty-icon::after {
  content: '';
  position: absolute;
  inset: 9px;
  border-radius: 4px;
  background: #7c3aed;
  opacity: 0.75;
}

.campaign-empty-title {
  color: #111827;
  font-size: 16px;
  font-weight: 700;
}

.campaign-empty-subtitle {
  color: #64748b;
  font-size: 13px;
}

.campaign-empty-actions {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  justify-content: center;
}

.stats-header {
  margin-top: 0;
  display: flex;
  justify-content: flex-start;
  gap: 8px;
  align-items: flex-start;
  padding: 12px;
  border: 1px solid rgba(15, 23, 42, 0.08);
  border-radius: 12px;
  background: #fcfcfd;
}

.stats-header-copy {
  display: grid;
  gap: 4px;
}

.stats-campaign-name {
  font-weight: 700;
  font-size: 15px;
  line-height: 1.25;
  color: #64748b;
}

.stats-summary-line {
  font-size: 12px;
  color: #64748b;
  font-weight: 700;
}

.stats-toolbar {
  display: flex;
  gap: 8px;
  align-items: flex-end;
  flex-wrap: wrap;
  padding: 10px 12px;
  border: 1px solid rgba(15, 23, 42, 0.08);
  border-radius: 12px;
  background: #ffffff;
}

.stats-toolbar .field {
  min-width: 140px;
}

.stats-toolbar .field label {
  color: #4b5563;
  font-size: 12px;
  font-weight: 700;
}

.stats-toolbar .input,
.stats-toolbar select,
.stats-toolbar .button {
  height: 38px;
}

.stats-custom-range {
  display: flex;
  gap: 8px;
}

.stats-kpi-grid {
  margin-top: 0;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
  min-width: 0;
}

.stats-kpi-card {
  border: 1px solid rgba(15, 23, 42, 0.08);
  border-radius: 12px;
  padding: 16px;
  background: #ffffff;
  box-shadow: none;
  min-width: 0;
  overflow: hidden;
}

.stats-kpi-card-prominent {
  border-color: rgba(124, 58, 237, 0.28);
  background: #fcfbff;
}

.stats-kpi-label {
  color: #64748b;
  font-size: 12px;
  margin-bottom: 6px;
  font-weight: 700;
  overflow-wrap: anywhere;
}

.stats-kpi-value {
  font-size: 24px;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: #111827;
}

.stats-section {
  margin-top: 0;
  border: 1px solid rgba(15, 23, 42, 0.08);
  border-radius: 12px;
  padding: 12px;
  background: #ffffff;
}

.stats-section .section-title {
  margin-bottom: 8px;
  font-size: 18px;
  font-weight: 700;
}

.stats-bars {
  border: 1px solid rgba(15, 23, 42, 0.08);
  border-radius: 12px;
  padding: 10px;
  background: #f8fafc;
  max-height: 190px;
  overflow-y: auto;
}

.stats-bar-row {
  display: grid;
  grid-template-columns: 110px 1fr 72px;
  align-items: center;
  gap: 8px;
  margin-bottom: 6px;
}

.stats-bar-row:last-child {
  margin-bottom: 0;
}

.stats-bar-date {
  text-align: end;
  color: var(--muted);
  font-size: 12px;
  white-space: nowrap;
}

.stats-bar-track {
  height: 8px;
  background: #e5e7eb;
  border-radius: 999px;
  overflow: hidden;
}

.stats-bar-fill {
  height: 100%;
  background: #7c3aed;
}

.stats-bar-value {
  text-align: start;
  font-size: 12px;
  color: #374151;
  font-weight: 700;
  white-space: nowrap;
}

.stats-daily-table td,
.stats-daily-table th {
  white-space: nowrap;
}

.stats-daily-table {
  min-width: 0;
  width: 100%;
}

.stats-daily-table thead th {
  background: #f8fafc;
  color: #475569;
  font-weight: 700;
  position: sticky;
  top: 0;
  z-index: 1;
}

.stats-daily-table tbody tr:nth-child(even) td {
  background: #fcfdff;
}

.stats-num {
  text-align: end;
  font-variant-numeric: tabular-nums;
}

.stats-date-cell {
  white-space: nowrap;
}

@media (max-width: 900px) {
  .meta-dashboard {
    padding: 12px 12px 24px;
    gap: 12px;
  }
  .meta-page-header {
    flex-direction: column;
  }
  .meta-page-actions {
    width: 100%;
  }
  .meta-page-actions .button {
    flex: 1 1 auto;
  }
  .meta-account-actions {
    flex-wrap: nowrap;
  }
  .meta-account-actions .button {
    min-width: 0;
    flex: 1 1 0;
  }
  .meta-global-settings {
    grid-template-columns: 1fr;
  }
  .mobile-settings-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }
  .meta-global-card.is-collapsed .meta-card-collapsible-content {
    display: none;
  }
  .quick-stats-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .meta-ai-audit-inner {
    grid-template-columns: 1fr;
    gap: 14px;
  }
  .meta-ai-audit-actions {
    justify-items: stretch;
  }
  .meta-ai-audit-btn {
    width: 100%;
    justify-content: center;
  }
  .meta-ai-audit-hero {
    grid-template-columns: 1fr;
    justify-items: center;
    text-align: center;
  }
  .campaigns-summary-row {
    gap: 6px;
  }
  .campaign-toolbar {
    grid-template-columns: 1fr;
  }
  .campaign-table {
    min-width: 760px;
  }
  .draft-row {
    flex-direction: column;
    align-items: flex-start;
  }
  .meta-stepper {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .wizard-steps-bar {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .goal-grid {
    grid-template-columns: repeat(1, minmax(0, 1fr));
  }
  .creative-library-grid {
    grid-template-columns: repeat(1, minmax(0, 1fr));
  }
  .creative-library-toolbar {
    grid-template-columns: 1fr;
  }
  .approval-grid {
    grid-template-columns: repeat(1, minmax(0, 1fr));
  }
  .campaign-toolbar {
    grid-template-columns: 1fr;
  }
  .campaign-wizard-modal-card .modal-title {
    font-size: 18px;
  }
  .campaign-wizard-modal-card .wizard-step-panel .section-title {
    font-size: 15px;
  }
  .campaign-wizard-modal-card .field label {
    font-size: 14px;
  }
  .campaign-wizard-modal-card .field input,
  .campaign-wizard-modal-card .field select,
  .campaign-wizard-modal-card .field textarea {
    font-size: 14px;
  }
  .campaign-wizard-modal-card .wizard-footer-actions #wizard-next-btn {
    order: 1;
  }
  .campaign-wizard-modal-card .wizard-footer-actions #wizard-back-btn {
    order: 2;
  }
  .campaign-wizard-modal-card .wizard-footer-actions #wizard-save-draft-btn {
    order: 3;
  }
  .campaign-wizard-modal-card .wizard-footer-actions #wizard-launch-btn {
    order: 4;
  }
  .meta-global-settings {
    grid-template-columns: 1fr;
  }
  .stats-kpi-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .campaign-stats-modal-card {
    padding: 16px;
    max-height: 90vh;
  }
  #campaign-stats-modal .modal-title {
    padding-inline-start: 34px;
  }
  .stats-toolbar {
    flex-direction: column;
    align-items: stretch;
  }
  .stats-toolbar .field {
    width: 100%;
  }
  .stats-toolbar .button {
    width: 100%;
  }
  .stats-bar-row {
    grid-template-columns: 95px 1fr 64px;
  }
  .stats-custom-range {
    width: 100%;
  }
}

@media (max-width: 640px) {
  .campaigns-summary-row {
    font-size: 12px;
  }
  .campaign-table {
    min-width: 680px;
  }
  .stats-kpi-grid {
    grid-template-columns: 1fr;
  }
  .campaign-stats-modal-card {
    width: min(1100px, calc(100vw - 12px));
    padding: 12px;
    border-radius: 14px;
  }
  #campaign-stats-content {
    padding-inline-start: 2px;
    padding-inline-end: 2px;
  }
  .stats-shell,
  .stats-section,
  .stats-kpi-grid,
  .stats-kpi-card {
    min-width: 0;
  }
  .stats-kpi-value {
    overflow-wrap: anywhere;
    word-break: break-word;
  }
  #campaign-stats-content .campaign-table-wrap {
    max-width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
  .stats-daily-table {
    min-width: 560px;
  }
}

* {
  box-sizing: border-box;
}

html {
  font-size: 115%;
}

body {
  margin: 0;
  font-family: 'Cairo', system-ui, -apple-system, Segoe UI, sans-serif;
  color: var(--brand-ink);
  background: var(--brand-bg);
}

.adly-chat-entry {
  display: flex;
  justify-content: flex-end;
  margin: 0 0 14px;
}
[dir="rtl"] .adly-chat-entry {
  justify-content: flex-start;
}
.adly-chat-open-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: #5b21b6 !important;
  font-weight: 700;
  background: linear-gradient(180deg, #ffffff 0%, #faf5ff 100%) !important;
  border-color: rgba(124, 58, 237, 0.28) !important;
  box-shadow: 0 5px 16px rgba(124, 58, 237, 0.08);
  transition: transform 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease, background 0.15s ease;
}
.adly-chat-open-btn:hover {
  color: #4c1d95 !important;
  background: linear-gradient(180deg, #ffffff 0%, #f3e8ff 100%) !important;
  border-color: rgba(124, 58, 237, 0.48) !important;
  box-shadow: 0 8px 22px rgba(124, 58, 237, 0.14);
  transform: translateY(-1px);
}
.adly-chat-open-btn .adly-chat-open-avatar {
  animation: adlyChatAvatarPulse 1.8s infinite ease-in-out;
}
.adly-chat-open-avatar {
  width: 24px;
  height: 24px;
  border-radius: 999px;
  object-fit: contain;
  background: rgba(255, 255, 255, 0.92);
  padding: 2px;
  box-shadow: 0 0 0 1px rgba(124, 58, 237, 0.18), 0 4px 10px rgba(124, 58, 237, 0.16);
}
.adly-chat-open-experimental {
  margin-inline-start: 2px;
  padding: 2px 7px;
  border-radius: 999px;
  background: linear-gradient(135deg, #7c3aed 0%, #a855f7 100%);
  color: #ffffff;
  font-size: 10px;
  font-weight: 700;
  line-height: 1.2;
  box-shadow: 0 5px 14px rgba(124, 58, 237, 0.22);
  white-space: nowrap;
}
.adly-chat-drawer {
  position: fixed;
  inset: 0;
  z-index: var(--z-adly-chat-drawer);
  display: none;
  align-items: stretch;
  justify-content: flex-end;
  background: rgba(15, 23, 42, 0.34);
  padding: 18px;
}
[dir="rtl"] .adly-chat-drawer {
  justify-content: flex-start;
}
.adly-chat-drawer.open {
  display: flex;
}
.adly-chat-panel {
  width: min(440px, 100%);
  background: #ffffff;
  border: 1px solid var(--brand-border, #e5e7eb);
  border-radius: 22px;
  box-shadow: 0 24px 70px rgba(15, 23, 42, 0.22);
  display: grid;
  grid-template-rows: auto 1fr auto;
  overflow: hidden;
  font-family: 'Tajawal', 'Cairo', system-ui, -apple-system, 'Segoe UI', sans-serif;
}
.adly-chat-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 12px;
  padding: 18px 18px 14px;
  border-bottom: 1px solid var(--brand-border, #e5e7eb);
}
.adly-chat-title {
  font-size: 17px;
  font-weight: 700;
  color: var(--brand-ink, #111827);
}
.adly-chat-title-row {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
.adly-chat-experimental {
  border-radius: 999px;
  padding: 5px 10px;
  color: #ffffff;
  background: linear-gradient(135deg, #7c3aed 0%, #a855f7 100%);
  border: 1px solid rgba(255, 255, 255, 0.34);
  box-shadow: 0 7px 18px rgba(124, 58, 237, 0.24);
  font-size: 11.5px;
  font-weight: 700;
  line-height: 1;
  letter-spacing: 0.01em;
  text-transform: uppercase;
  display: inline-flex;
  align-items: center;
  gap: 5px;
}
.adly-chat-experimental::before {
  content: '';
  width: 6px;
  height: 6px;
  border-radius: 999px;
  background: #ffffff;
  box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.18);
}
.adly-chat-subtitle {
  margin-top: 4px;
  color: var(--brand-muted, #6b7280);
  font-size: 13px;
  line-height: 1.35;
}
.adly-chat-close {
  border: 0;
  background: #f8fafc;
  color: var(--brand-muted, #6b7280);
  border-radius: 999px;
  width: 32px;
  height: 32px;
  cursor: pointer;
  font-size: 18px;
  line-height: 1;
}
.adly-chat-messages {
  padding: 16px;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 10px;
  background: #fbfcfd;
  min-height: 0;
}
.adly-chat-row {
  display: flex;
  align-items: flex-end;
  gap: 8px;
  max-width: 92%;
}
.adly-chat-row.user {
  align-self: flex-end;
  flex-direction: row-reverse;
}
.adly-chat-row.assistant {
  align-self: flex-start;
}
.adly-chat-avatar {
  width: 28px;
  height: 28px;
  border-radius: 10px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  overflow: hidden;
  font-size: 12px;
  font-weight: 700;
}
.adly-chat-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.adly-chat-avatar.brand {
  background: color-mix(in srgb, var(--brand-primary, #9435E1) 14%, #ffffff);
  color: var(--brand-primary, #9435E1);
  border: 1px solid color-mix(in srgb, var(--brand-primary, #9435E1) 24%, #e5e7eb);
}
.adly-chat-avatar.adly {
  background: #ffffff;
  border: 1px solid rgba(124, 58, 237, 0.18);
  box-shadow: 0 4px 10px rgba(124, 58, 237, 0.12);
}
.adly-chat-message {
  max-width: 100%;
  padding: 10px 12px;
  border-radius: 16px;
  white-space: pre-wrap;
  line-height: 1.45;
  font-size: 14px;
  font-family: 'Tajawal', 'Cairo', system-ui, -apple-system, 'Segoe UI', sans-serif;
}
.adly-chat-message.user {
  background: color-mix(in srgb, var(--brand-primary, #9435E1) 13%, #ffffff);
  border: 1px solid color-mix(in srgb, var(--brand-primary, #9435E1) 22%, #e5e7eb);
  color: var(--brand-ink, #111827);
}
.adly-chat-message.assistant {
  background: #ffffff;
  border: 1px solid var(--brand-border, #e5e7eb);
  color: var(--brand-muted, #374151);
}

/* Autopilot / Think with me drawer: readable type, 44px tap targets on phones, visible focus.
   Scoped to the drawer so it also wins over the idea generator's local copy of these rules. */
.adly-chat-drawer .adly-chat-message {
  font-size: 15px;
  line-height: 1.65;
}

.adly-chat-drawer .adly-chat-message.assistant {
  color: var(--brand-ink, #1a202c);
}

.adly-chat-drawer .adly-chat-input {
  font-size: 15px;
  line-height: 1.6;
}

.adly-chat-drawer .adly-chat-input:focus {
  outline: none;
  border-color: var(--brand-primary, #7c3aed);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--brand-primary, #7c3aed) 15%, transparent);
}

.adly-chat-drawer .adly-chat-close {
  width: 40px;
  height: 40px;
  display: grid;
  place-items: center;
  flex: 0 0 auto;
}

.adly-chat-drawer .adly-chat-close svg,
.adly-chat-drawer .adly-chat-image-add-btn svg {
  width: 18px;
  height: 18px;
  display: block;
}

.adly-chat-drawer .adly-chat-close:focus-visible,
.adly-chat-drawer .adly-chat-voice-btn:focus-visible,
.adly-chat-drawer .adly-chat-image-add-btn:focus-visible,
.adly-chat-drawer #send-adly-chat:focus-visible {
  outline: 2px solid var(--brand-primary, #7c3aed);
  outline-offset: 2px;
}

@media (max-width: 768px) {
  /* 16px keeps iOS from zooming the page when the message box gets focus. */
  .adly-chat-drawer .adly-chat-message,
  .adly-chat-drawer .adly-chat-input {
    font-size: 16px;
  }

  .adly-chat-drawer .adly-chat-close,
  .adly-chat-drawer .adly-chat-image-add-btn,
  .adly-chat-drawer .adly-chat-voice-btn {
    width: 44px;
    height: 44px;
  }

  .adly-chat-drawer #send-adly-chat {
    min-height: 44px;
    padding-inline: 20px;
  }
}
.adly-chat-message-rich {
  padding: 0;
  background: transparent;
  border: 0;
  box-shadow: none;
  max-width: 100%;
  width: 100%;
  white-space: normal;
  line-height: normal;
}
.adly-chat-row.assistant:has(.adly-chat-message-rich) {
  max-width: 100%;
  width: 100%;
  align-self: stretch;
}
.adly-chat-rich-intro {
  padding: 10px 12px;
  margin-bottom: 8px;
  border-radius: 16px;
  background: #ffffff;
  border: 1px solid var(--brand-border, #e5e7eb);
  color: var(--brand-muted, #374151);
}
.adly-chat-action-row {
  align-self: flex-start;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: -4px;
}
.adly-chat-inline-cta {
  margin-top: 10px;
}
.adly-chat-inline-cta .button.small {
  width: 100%;
  box-sizing: border-box;
  justify-content: center;
}

/* Carousel proposal card */
.adly-chat-carousel-proposal {
  align-self: stretch;
  border: 1px solid var(--brand-border, #e5e7eb);
  border-radius: 18px;
  padding: 14px;
  background: #ffffff;
  box-shadow: 0 4px 16px rgba(15, 23, 42, 0.06);
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.adly-chat-carousel-proposal-title {
  font-size: 13px;
  font-weight: 700;
  color: var(--brand-ink, #111827);
}
.adly-chat-carousel-edit-hint {
  font-size: 12px;
  line-height: 1.45;
  margin: 0;
}
.adly-chat-carousel-slides-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.adly-chat-carousel-slides-list .carousel-slide-item {
  margin: 0;
}
.adly-chat-carousel-slide-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  flex-wrap: wrap;
}
.adly-chat-carousel-slide-count {
  font-size: 12px;
}
.adly-chat-review-summary {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.adly-chat-review-chip {
  border: 1px solid var(--brand-border, #e5e7eb);
  border-radius: 999px;
  color: var(--brand-ink, #111827);
  background: var(--brand-surface, #f8fafc);
  font-size: 12px;
  line-height: 1.35;
  padding: 5px 8px;
}
.adly-chat-review-controls {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.adly-chat-review-controls[hidden] {
  display: none;
}
.adly-chat-settings-review .adly-chat-review-grid {
  display: grid;
  gap: 8px;
}
.adly-chat-settings-review .field {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin: 0;
}
.adly-chat-settings-review .field > span {
  font-size: 11px;
  font-weight: 700;
  color: var(--brand-muted, #64748b);
  line-height: 1.3;
}
.adly-chat-settings-review .field .input,
.adly-chat-settings-review .field input,
.adly-chat-settings-review .field select,
.adly-chat-settings-review .field textarea {
  font-size: 12px;
  line-height: 1.35;
  padding: 7px 10px;
  border-radius: 10px;
}
.adly-chat-settings-review .checkbox-line {
  font-size: 12px;
  line-height: 1.35;
  gap: 6px;
}
.adly-chat-settings-review .adly-chat-action-row {
  margin-top: 0;
}
.adly-chat-settings-review .adly-chat-action-row-foot {
  margin-top: 4px;
  padding-top: 8px;
  border-top: 1px solid var(--brand-border, #e5e7eb);
}
.adly-chat-ugc-review .adly-chat-ugc-actor-row {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 8px 0 4px;
  flex-wrap: wrap;
}
.adly-chat-ugc-actor-pick {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}
.adly-chat-ugc-actor-pick-name {
  font-size: 13px;
  max-width: 160px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.adly-chat-ugc-actor-thumb {
  width: 40px;
  height: 40px;
  border-radius: 999px;
  object-fit: cover;
  border: 1px solid var(--brand-border, #e5e7eb);
  flex-shrink: 0;
}
.adly-chat-ugc-actor-thumb--placeholder,
.adly-chat-ugc-actor-thumb--loading {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 999px;
  border: 1px solid var(--brand-border, #e5e7eb);
  background: var(--brand-surface-muted, #f3f4f6);
  color: var(--brand-text-muted, #6b7280);
  font-size: 14px;
  font-weight: 500;
  flex-shrink: 0;
}
.adly-chat-ugc-actor-thumb--loading {
  animation: adly-chat-ugc-actor-pulse 1.2s ease-in-out infinite;
}
@keyframes adly-chat-ugc-actor-pulse {
  0%, 100% { opacity: 0.55; }
  50% { opacity: 1; }
}
.adly-chat-ugc-scripts-block {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin: 10px 0 4px;
}
.adly-chat-ugc-script-card .field {
  width: 100%;
}
.adly-chat-ugc-scripts-loading,
.adly-chat-ugc-scripts-error {
  font-size: 13px;
  padding: 8px 0;
}
.adly-chat-ugc-scripts-error {
  color: #b91c1c;
}
.adly-chat-ugc-idea-field {
  grid-column: 1 / -1;
}
.adly-chat-ugc-regen-idea-btn {
  align-self: flex-start;
  margin-top: 4px;
}
.adly-chat-ugc-actor-modal {
  position: fixed;
  inset: 0;
  z-index: 12000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
}
.adly-chat-ugc-actor-modal-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(15, 23, 42, 0.45);
}
.adly-chat-ugc-actor-modal-panel {
  position: relative;
  z-index: 1;
  width: min(720px, 100%);
  max-height: min(80vh, 760px);
  overflow: auto;
  background: #fff;
  border-radius: 16px;
  border: 1px solid var(--brand-border, #e5e7eb);
  box-shadow: 0 24px 60px rgba(15, 23, 42, 0.18);
  padding: 16px;
}
.adly-chat-ugc-actor-modal-head,
.adly-chat-ugc-actor-modal-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}
.adly-chat-ugc-actor-modal-filters {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  margin: 12px 0;
}
.adly-chat-ugc-actor-grid {
  max-height: 52vh;
  overflow: auto;
}
.adly-chat-carousel-slides {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.adly-chat-carousel-slide {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  font-size: 13px;
  line-height: 1.4;
}
.adly-chat-carousel-slide-badge {
  font-size: 11px;
  font-weight: 700;
  background: var(--brand-primary-light, rgba(147,51,234,.1));
  color: var(--brand-primary, #7c3aed);
  border-radius: 6px;
  padding: 2px 6px;
  white-space: nowrap;
  flex-shrink: 0;
  margin-top: 1px;
}
.adly-chat-carousel-slide-content {
  color: var(--brand-ink, #111827);
  flex: 1;
  min-width: 0;
}
.adly-chat-carousel-ctas {
  font-size: 12px;
  color: var(--brand-muted, #6b7280);
  border-top: 1px solid var(--brand-border, #e5e7eb);
  padding-top: 8px;
  display: flex;
  flex-wrap: wrap;
  gap: 4px 14px;
}
.adly-chat-carousel-cta-item {
  display: flex;
  gap: 4px;
}
.adly-chat-carousel-cta-label {
  font-weight: 500;
  color: var(--brand-ink, #111827);
}
.adly-chat-carousel-note {
  font-size: 11px;
  line-height: 1.35;
  color: var(--brand-muted, #6b7280);
  margin-top: -2px;
}
.adly-chat-carousel-note a {
  color: var(--brand-primary, #7c3aed);
  font-weight: 500;
  text-decoration: none;
}
.adly-chat-carousel-note a:hover {
  text-decoration: underline;
}

.adly-chat-ideas-card {
  align-self: stretch;
  border: 1px solid var(--brand-border, #e5e7eb);
  border-radius: 18px;
  padding: 12px;
  background: #ffffff;
  box-shadow: 0 12px 30px rgba(15, 23, 42, 0.08);
}
.adly-chat-ideas-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 10px;
}
.adly-chat-ideas-title {
  color: var(--brand-ink, #111827);
  font-size: 13px;
  font-weight: 700;
}
.adly-chat-ideas-subtitle,
.adly-chat-ideas-link {
  color: var(--brand-muted, #6b7280);
  font-size: 12px;
}
.adly-chat-ideas-link {
  color: var(--brand-primary, #7c3aed);
  font-weight: 700;
  text-decoration: none;
  white-space: nowrap;
}
.adly-chat-ideas-list {
  display: grid;
  gap: 8px;
}
.adly-chat-idea-item {
  display: grid;
  grid-template-columns: 26px minmax(0, 1fr);
  gap: 8px;
  padding: 10px;
  border: 1px solid #eef2f7;
  border-radius: 14px;
  background: #f8fafc;
}
.adly-chat-idea-index {
  width: 26px;
  height: 26px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: color-mix(in srgb, var(--brand-primary, #7c3aed) 12%, #ffffff);
  color: var(--brand-primary, #7c3aed);
  font-size: 12px;
  font-weight: 700;
}
.adly-chat-idea-body {
  min-width: 0;
}
.adly-chat-idea-body strong,
.adly-chat-idea-body p,
.adly-chat-idea-body span {
  display: block;
}
.adly-chat-idea-body strong {
  color: var(--brand-ink, #111827);
  font-size: 13px;
}
.adly-chat-idea-body p,
.adly-chat-idea-body span {
  margin: 4px 0 0;
  color: var(--brand-muted, #64748b);
  font-size: 12px;
  line-height: 1.4;
}
.adly-chat-idea-body span {
  font-style: italic;
}
.adly-chat-create-idea {
  margin-top: 8px;
}

.adly-chat-calendar-plan .adly-chat-cal-week-picker {
  display: grid;
  gap: 6px;
}
.adly-chat-cal-week-option {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 8px 10px;
  border: 1px solid var(--brand-border, #e5e7eb);
  border-radius: 12px;
  background: #fff;
  cursor: pointer;
  text-align: inherit;
}
.adly-chat-cal-week-option.selected {
  border-color: color-mix(in srgb, var(--brand-primary, #7c3aed) 45%, #ffffff);
  background: color-mix(in srgb, var(--brand-primary, #7c3aed) 8%, #ffffff);
}
.adly-chat-cal-week-option-info {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  min-width: 0;
}
.adly-chat-cal-week-option-label {
  font-size: 12px;
  font-weight: 700;
  color: var(--brand-ink, #111827);
}
.adly-chat-cal-week-badge {
  font-size: 11px;
  font-weight: 700;
  color: var(--brand-primary, #7c3aed);
  background: color-mix(in srgb, var(--brand-primary, #7c3aed) 12%, #ffffff);
  border-radius: 999px;
  padding: 2px 8px;
}
.adly-chat-cal-week-radio {
  width: 18px;
  height: 18px;
  border-radius: 999px;
  border: 2px solid #cbd5e1;
  flex-shrink: 0;
}
.adly-chat-cal-week-option.selected .adly-chat-cal-week-radio {
  border-color: var(--brand-primary, #7c3aed);
  background: radial-gradient(circle at center, var(--brand-primary, #7c3aed) 0 5px, transparent 6px);
}
.adly-chat-calendar-plan-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}
.adly-chat-calendar-plan-week-title {
  font-size: 13px;
  font-weight: 700;
  color: var(--brand-ink, #111827);
}
.adly-chat-cal-range-row {
  display: flex;
  align-items: center;
  gap: 8px;
}
.adly-chat-cal-range-row input[type="range"] {
  flex: 1;
  height: 4px;
}
.adly-chat-cal-range-val {
  min-width: 18px;
  font-size: 12px;
  font-weight: 700;
  color: var(--brand-primary, #7c3aed);
}
.adly-chat-cal-channel-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.adly-chat-cal-channel-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 10px;
  border: 1px solid var(--brand-border, #e5e7eb);
  border-radius: 999px;
  background: #fff;
  cursor: pointer;
  font-size: 11px;
  font-weight: 700;
}
.adly-chat-cal-channel-chip img {
  width: 16px;
  height: 16px;
  border-radius: 4px;
  object-fit: cover;
}
.adly-chat-cal-channel-chip.selected {
  border-color: #16a34a;
  background: color-mix(in srgb, #16a34a 8%, #ffffff);
}
.adly-chat-cal-super-mode {
  border: 1px solid color-mix(in srgb, var(--brand-primary, #7c3aed) 25%, #ffffff);
  border-radius: 12px;
  padding: 8px 10px;
  background: color-mix(in srgb, var(--brand-primary, #7c3aed) 5%, #ffffff);
}
.adly-chat-cal-super-mode .field > span {
  font-size: 12px;
  font-weight: 700;
  color: var(--brand-ink, #111827);
}
.adly-chat-cal-super-mode .checkbox-line span {
  font-size: 11px;
  color: var(--brand-muted, #64748b);
}
.adly-chat-calendar-posts-card {
  align-self: stretch;
  border: 1px solid var(--brand-border, #e5e7eb);
  border-radius: 18px;
  padding: 14px;
  background: #ffffff;
  box-shadow: 0 4px 16px rgba(15, 23, 42, 0.06);
  white-space: normal;
  line-height: normal;
}
.adly-chat-calendar-week-chip {
  margin-top: 6px;
  display: inline-flex;
  font-size: 12px;
  font-weight: 700;
  color: var(--brand-primary, #7c3aed);
}
.adly-chat-calendar-posts-list {
  display: grid;
  gap: 10px;
  margin-top: 12px;
}
.adly-chat-calendar-post-item {
  display: grid;
  grid-template-columns: 72px minmax(0, 1fr);
  gap: 8px;
  align-items: start;
  padding: 8px;
  border: 1px solid #eef2f7;
  border-radius: 14px;
  background: #f8fafc;
}
.adly-chat-calendar-post-preview {
  width: 72px;
  height: 72px;
  border-radius: 12px;
  overflow: hidden;
  background: #e2e8f0;
  display: flex;
  align-items: center;
  justify-content: center;
}
.adly-chat-calendar-post-preview-btn {
  width: 100%;
  height: 100%;
  padding: 0;
  border: 0;
  background: transparent;
  cursor: zoom-in;
  display: block;
}
.adly-chat-calendar-post-preview-btn img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.adly-chat-calendar-post-preview img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.adly-chat-calendar-post-placeholder {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}
.adly-chat-cal-spinner {
  width: 18px;
  height: 18px;
  border: 2px solid #cbd5e1;
  border-top-color: var(--brand-primary, #7c3aed);
  border-radius: 999px;
  animation: adly-chat-cal-spin 0.8s linear infinite;
}
@keyframes adly-chat-cal-spin {
  to { transform: rotate(360deg); }
}
.adly-chat-calendar-post-body {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.adly-chat-calendar-post-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  margin: 0;
}
.adly-chat-calendar-post-index {
  width: 22px;
  height: 22px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: color-mix(in srgb, var(--brand-primary, #7c3aed) 12%, #ffffff);
  color: var(--brand-primary, #7c3aed);
  font-size: 11px;
  font-weight: 700;
}
.adly-chat-calendar-post-date,
.adly-chat-calendar-post-status {
  font-size: 11px;
  font-weight: 700;
}
.adly-chat-calendar-post-date {
  color: var(--brand-muted, #64748b);
}
.adly-chat-calendar-post-status {
  color: var(--brand-primary, #7c3aed);
}
.adly-chat-calendar-post-item.status-ready .adly-chat-calendar-post-status {
  color: #16a34a;
}
.adly-chat-calendar-post-item.status-failed .adly-chat-calendar-post-status {
  color: #dc2626;
}
.adly-chat-calendar-post-body strong,
.adly-chat-calendar-post-body p {
  display: block;
  margin: 0;
  white-space: normal;
}
.adly-chat-calendar-post-body strong {
  font-size: 13px;
  line-height: 1.3;
  color: var(--brand-ink, #111827);
}
.adly-chat-calendar-post-body p {
  font-size: 12px;
  line-height: 1.35;
  color: var(--brand-muted, #64748b);
}
.adly-chat-calendar-post-channels {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 4px 0 0;
}
.adly-chat-calendar-post-channels span {
  font-size: 11px;
  font-weight: 700;
  color: #475569;
  background: #fff;
  border: 1px solid #e2e8f0;
  border-radius: 999px;
  padding: 2px 8px;
}
.adly-chat-calendar-posts-footer {
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px solid var(--brand-border, #e5e7eb);
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.adly-chat-calendar-posts-next {
  margin: 0;
  font-size: 13px;
  line-height: 1.45;
  color: var(--brand-ink, #111827);
}
.adly-chat-calendar-view-btn {
  width: 100%;
  justify-content: center;
  text-decoration: none;
}

.adly-chat-workflow-card {
  align-self: stretch;
  min-width: 0;
  max-width: 100%;
  border: 1px solid var(--brand-border, #e5e7eb);
  border-radius: 18px;
  padding: 12px;
  background: #ffffff;
  box-shadow: 0 12px 30px rgba(15, 23, 42, 0.08);
}
.adly-chat-workflow-animated-plan {
  min-width: 0;
}
.adly-chat-workflow-animated-plan .animated-video-plan-only-helper {
  overflow-wrap: anywhere;
  word-break: break-word;
}
.adly-chat-workflow-animated-plan-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 10px;
}
.adly-chat-workflow-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 10px;
}
.adly-chat-workflow-title {
  color: var(--brand-ink, #111827);
  font-weight: 700;
  font-size: 13px;
}
.adly-chat-workflow-head-side {
  display: grid;
  justify-items: end;
  gap: 5px;
  min-width: 0;
}
.adly-chat-workflow-footer {
  flex-basis: 100%;
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
  gap: 6px;
  margin-top: 4px;
  direction: ltr;
}
.adly-chat-end-task-btn {
  border: 1px solid #fee2e2;
  border-radius: 999px;
  padding: 3px 8px;
  color: #dc2626;
  background: rgba(254, 242, 242, 0.55);
  font: inherit;
  font-size: 10px;
  font-weight: 500;
  line-height: 1.25;
  cursor: pointer;
}
.adly-chat-end-task-btn:hover {
  color: #b91c1c;
  border-color: #fecaca;
  background: rgba(254, 242, 242, 0.85);
}
.adly-chat-end-task-btn:disabled {
  cursor: not-allowed;
  opacity: 0.55;
}
.adly-chat-workflow-stage {
  display: inline-flex;
  align-items: center;
  justify-content: flex-end;
  gap: 7px;
  color: var(--brand-muted, #6b7280);
  font-size: 12px;
  text-align: end;
}
.adly-chat-workflow-stage.is-busy {
  color: var(--brand-primary, #7c3aed);
  font-weight: 700;
}
.adly-chat-workflow-stage-dot {
  width: 9px;
  height: 9px;
  border-radius: 999px;
  background: var(--brand-primary, #7c3aed);
  box-shadow: 0 0 0 0 rgba(124, 58, 237, 0.42);
  animation: adlyChatWorkflowPulse 1.2s ease-out infinite;
  flex: 0 0 auto;
}
@keyframes adlyChatWorkflowPulse {
  0% { box-shadow: 0 0 0 0 rgba(124, 58, 237, 0.42); transform: scale(0.9); }
  70% { box-shadow: 0 0 0 9px rgba(124, 58, 237, 0); transform: scale(1); }
  100% { box-shadow: 0 0 0 0 rgba(124, 58, 237, 0); transform: scale(0.9); }
}
.adly-chat-workflow-preview {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  max-width: 100%;
  max-height: min(300px, 48vh);
  min-width: 0;
  min-height: 0;
  border: 0;
  border-radius: 14px;
  padding: 0;
  overflow: hidden;
  background: #f8fafc;
  cursor: pointer;
  box-sizing: border-box;
}
.adly-chat-workflow-preview::marker {
  content: '';
}
.adly-chat-workflow-preview.is-processing::after {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(115deg, transparent 0%, transparent 36%, rgba(255, 255, 255, 0.42) 48%, transparent 60%, transparent 100%);
  transform: translateX(-120%);
  animation: adlyChatPreviewSweep 1.8s ease-in-out infinite;
}
.adly-chat-workflow-preview.is-processing::before {
  content: '';
  position: absolute;
  inset: 10px;
  border-radius: 12px;
  border: 2px solid rgba(124, 58, 237, 0.26);
  pointer-events: none;
  animation: adlyChatPreviewGlow 1.4s ease-in-out infinite;
  z-index: 1;
}
@keyframes adlyChatPreviewSweep {
  0% { transform: translateX(-120%); }
  60%, 100% { transform: translateX(120%); }
}
@keyframes adlyChatPreviewGlow {
  0%, 100% { opacity: 0.35; }
  50% { opacity: 1; }
}
.adly-chat-workflow-preview img {
  display: block;
  max-width: 100%;
  max-height: min(300px, 48vh);
  width: auto;
  height: auto;
  object-fit: contain;
}
.adly-chat-workflow-processing {
  position: relative;
  display: grid;
  grid-template-columns: 38px minmax(0, 1fr);
  gap: 12px;
  align-items: center;
  margin: 8px 0 10px;
  padding: 12px;
  border-radius: 16px;
  border: 1px solid rgba(124, 58, 237, 0.18);
  background:
    radial-gradient(circle at 16% 24%, rgba(124, 58, 237, 0.16), transparent 34%),
    linear-gradient(135deg, rgba(124, 58, 237, 0.08), rgba(249, 250, 251, 0.96));
  overflow: hidden;
}
.adly-chat-workflow-processing-orb {
  position: relative;
  width: 38px;
  height: 38px;
  border-radius: 14px;
  background: rgba(124, 58, 237, 0.12);
}
.adly-chat-workflow-processing-orb::before {
  content: '';
  position: absolute;
  inset: 8px;
  border-radius: 999px;
  border: 3px solid rgba(124, 58, 237, 0.18);
  border-top-color: var(--brand-primary, #7c3aed);
  animation: adlyChatWorkflowSpin 0.8s linear infinite;
}
.adly-chat-workflow-processing-orb::after {
  content: '';
  position: absolute;
  inset: 16px;
  border-radius: 999px;
  background: var(--brand-primary, #7c3aed);
  box-shadow: 0 0 18px rgba(124, 58, 237, 0.6);
}
.adly-chat-workflow-processing-copy {
  display: grid;
  gap: 4px;
  min-width: 0;
}
.adly-chat-workflow-processing-copy strong {
  color: var(--brand-ink, #111827);
  font-size: 13px;
  line-height: 1.25;
}
.adly-chat-workflow-processing-copy span {
  color: var(--brand-muted, #6b7280);
  font-size: 12px;
  line-height: 1.35;
}
.adly-chat-workflow-processing-bar {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 3px;
  background: linear-gradient(90deg, transparent, var(--brand-primary, #7c3aed), transparent);
  transform: translateX(-100%);
  animation: adlyChatWorkflowBar 1.4s ease-in-out infinite;
}
@keyframes adlyChatWorkflowBar {
  0% { transform: translateX(-100%); }
  55%, 100% { transform: translateX(100%); }
}
.adly-chat-workflow-generating-note {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  margin-top: 8px;
  color: var(--brand-muted, #6b7280);
  font-size: 12px;
  line-height: 1.3;
}
.adly-chat-workflow-spinner {
  width: 14px;
  height: 14px;
  border-radius: 999px;
  border: 2px solid rgba(124, 58, 237, 0.18);
  border-top-color: var(--brand-primary, #7c3aed);
  animation: adlyChatWorkflowSpin 0.8s linear infinite;
  flex-shrink: 0;
}
@keyframes adlyChatWorkflowSpin {
  to { transform: rotate(360deg); }
}
.adly-chat-workflow-thumbs {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  margin-top: 8px;
  padding-bottom: 2px;
}
.adly-chat-workflow-thumb {
  position: relative;
  width: 54px;
  height: 54px;
  border: 2px solid transparent;
  border-radius: 12px;
  padding: 0;
  overflow: hidden;
  background: #f8fafc;
  flex: 0 0 auto;
  cursor: pointer;
}
.adly-chat-workflow-thumb::after {
  content: '';
}
.adly-chat-message-attachments {
  max-width: 100%;
  min-width: 0;
}
.adly-chat-message-attachment {
  display: block;
  max-width: 100%;
  margin: 8px 0 0;
  padding: 0;
  border: 0;
  border-radius: 12px;
  overflow: hidden;
  background: transparent;
  cursor: zoom-in;
}
.adly-chat-message-attachment img {
  display: block;
  max-width: 100%;
  max-height: 180px;
  width: auto;
  height: auto;
  border-radius: 12px;
  object-fit: contain;
}
.adly-chat-workflow-thumb:hover,
.adly-chat-workflow-preview:hover {
  filter: brightness(0.98);
}
.adly-chat-workflow-thumb:focus-visible,
.adly-chat-workflow-preview:focus-visible {
  outline: 3px solid rgba(124, 58, 237, 0.25);
  outline-offset: 2px;
}
.adly-chat-workflow-thumb.active {
  border-color: var(--brand-primary, #7c3aed);
}
.adly-chat-workflow-thumb img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
}
.adly-chat-attachment-preview img {
  cursor: zoom-in;
}
.adly-chat-workflow-copy,
.adly-chat-workflow-hint {
  margin-top: 10px;
  padding: 10px 12px;
  border-radius: 12px;
  color: var(--brand-ink, #111827);
  background: #f8fafc;
  font-size: 13px;
  line-height: 1.45;
  white-space: pre-wrap;
}
.adly-chat-workflow-hint {
  color: var(--brand-primary, #7c3aed);
  background: color-mix(in srgb, var(--brand-primary, #7c3aed) 10%, #ffffff);
  font-weight: 700;
}
.adly-chat-workflow-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 10px;
}
.adly-chat-publish-box {
  width: 100%;
  display: grid;
  gap: 10px;
  margin-top: 2px;
}
.adly-chat-publish-title {
  color: var(--brand-ink, #111827);
  font-size: 13px;
  font-weight: 700;
  line-height: 1.35;
}
.adly-chat-publish-desc {
  color: var(--brand-muted, #64748b);
  font-size: 13px;
  line-height: 1.45;
}
.adly-chat-publish-destinations,
.adly-chat-publish-options {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.adly-chat-publish-segmented {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 4px;
  padding: 4px;
  border: 1px solid var(--brand-border, #e5e7eb);
  border-radius: 16px;
  background: #f8fafc;
}
.adly-chat-publish-segment {
  min-height: 42px;
  border: 0;
  border-radius: 12px;
  padding: 0 12px;
  background: transparent;
  color: var(--brand-muted, #64748b);
  font: inherit;
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
  transition: background .15s ease, color .15s ease, box-shadow .15s ease, transform .15s ease;
}
.adly-chat-publish-segment:hover:not(:disabled),
.adly-chat-publish-segment:focus-visible {
  box-shadow: inset 0 0 0 1px rgba(124, 58, 237, 0.18);
}
.adly-chat-publish-segment.is-active {
  color: #ffffff;
  background: linear-gradient(135deg, #8b5cf6 0%, var(--brand-primary, #7c3aed) 100%);
  box-shadow: 0 8px 18px rgba(124, 58, 237, 0.22);
}
.adly-chat-publish-segment:disabled {
  cursor: not-allowed;
  opacity: 0.6;
}
.adly-chat-publish-destination {
  min-width: 0;
  flex: 1 1 150px;
  border: 1px solid var(--brand-border, #e5e7eb);
  border-radius: 12px;
  padding: 9px 10px;
  background: #ffffff;
  color: var(--brand-ink, #111827);
  text-align: start;
  cursor: pointer;
}
.adly-chat-publish-destination.selected {
  border-color: var(--brand-primary, #7c3aed);
  background: color-mix(in srgb, var(--brand-primary, #7c3aed) 10%, #ffffff);
}
.adly-chat-publish-destination span,
.adly-chat-publish-destination strong {
  display: block;
}
.adly-chat-publish-destination span {
  color: var(--brand-muted, #64748b);
  font-size: 11px;
  font-weight: 700;
}
.adly-chat-publish-destination strong {
  margin-top: 3px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 13px;
}
.adly-chat-publish-platform-list {
  gap: 7px;
}
.adly-chat-publish-platform-row {
  grid-template-columns: 22px 20px minmax(64px, auto) 8px 28px minmax(0, 1fr);
  gap: 7px;
  padding: 9px 10px;
  border-radius: 12px;
}
.adly-chat-publish-platform-row .publishing-platform-name,
.adly-chat-publish-platform-row .publishing-account-label {
  font-size: 12px;
}
.adly-chat-publish-platform-row .publishing-account-avatar {
  width: 28px;
  height: 28px;
  font-size: 12px;
}
.adly-chat-publish-timing-toggle {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-height: 42px;
  border: 1px solid var(--brand-border, #e5e7eb);
  border-radius: 999px;
  padding: 7px 8px 7px 14px;
  background: #ffffff;
  color: var(--brand-ink, #111827);
  cursor: pointer;
  font: inherit;
  text-align: start;
}
.adly-chat-publish-timing-toggle::after {
  content: '';
  width: 34px;
  height: 20px;
  border-radius: 999px;
  background:
    radial-gradient(circle at 10px 50%, #ffffff 0 6px, transparent 6.5px),
    #d1d5db;
  box-shadow: inset 0 0 0 2px rgba(15, 23, 42, 0.04);
  flex-shrink: 0;
}
.adly-chat-publish-timing-toggle.is-scheduled {
  border-color: color-mix(in srgb, var(--brand-primary, #7c3aed) 45%, #e5e7eb);
  background: color-mix(in srgb, var(--brand-primary, #7c3aed) 8%, #ffffff);
}
.adly-chat-publish-timing-toggle.is-scheduled::after {
  background:
    radial-gradient(circle at 24px 50%, #ffffff 0 6px, transparent 6.5px),
    var(--brand-primary, #7c3aed);
}
.adly-chat-publish-timing-main,
.adly-chat-publish-timing-hint {
  display: block;
}
.adly-chat-publish-timing-main {
  font-weight: 700;
  font-size: 13px;
}
.adly-chat-publish-timing-hint {
  margin-top: 2px;
  color: var(--brand-muted, #64748b);
  font-size: 11px;
  line-height: 1.25;
}
.adly-chat-publish-later-note {
  flex-basis: 100%;
  color: var(--brand-muted, #64748b);
  font-size: 12px;
  line-height: 1.35;
}
.adly-chat-publish-progress-card,
.adly-chat-publish-result-card {
  margin-top: 4px;
  padding: 12px;
  border-radius: 14px;
  box-shadow: none;
}
.adly-chat-publish-progress-card strong {
  margin-bottom: 10px;
  font-size: 13px;
}
.adly-chat-publish-progress-card .publishing-progress-row,
.adly-chat-publish-result-card .publishing-result-platform {
  font-size: 12px;
}
.adly-chat-publish-progress-card p {
  margin-top: 10px;
  font-size: 11px;
}
.adly-chat-schedule-fields {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(104px, 0.8fr);
  gap: 8px;
}
.adly-chat-publish-date,
.adly-chat-publish-time {
  min-height: 38px;
  border: 1px solid var(--brand-border, #e5e7eb);
  border-radius: 10px;
  padding: 0 10px;
  font: inherit;
  font-size: 13px;
  color: var(--brand-muted, #64748b);
  background: #ffffff;
  cursor: pointer;
  min-width: 0;
}
.adly-chat-publish-time {
  font-weight: 500;
}
.adly-chat-publish-confirm {
  justify-self: start;
}
.adly-chat-video-after-publish {
  margin-top: 2px;
  min-height: 30px;
  padding: 0 10px;
  border-radius: 10px;
  border-color: #e5e7eb;
  color: var(--brand-muted, #64748b);
  background: #ffffff;
  font-size: 12px;
  font-weight: 700;
  box-shadow: none;
}
.adly-chat-video-after-publish .action-icon {
  width: 14px;
  height: 14px;
}
.adly-chat-video-after-publish:hover,
.adly-chat-video-after-publish:focus-visible {
  color: var(--brand-primary, #7c3aed);
  border-color: rgba(124, 58, 237, 0.28);
  background: #ffffff;
  box-shadow: none;
}
.adly-chat-workflow-status-stack {
  display: grid;
  gap: 10px;
  width: 100%;
  margin-top: 10px;
}
.adly-chat-video-progress-card,
.adly-chat-video-result-card {
  margin-top: 0;
}
.adly-chat-video-result-card .button.small {
  margin-top: 8px;
}
.adly-chat-video-size-box {
  display: grid;
  gap: 10px;
  width: 100%;
  padding: 12px;
  border: 1px solid rgba(124, 58, 237, 0.16);
  border-radius: 14px;
  background: rgba(124, 58, 237, 0.05);
}
.adly-chat-video-size-options {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}
.adly-chat-video-size-option {
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr);
  gap: 9px;
  align-items: center;
  min-height: 74px;
  padding: 10px;
  border: 1px solid var(--brand-border, #e5e7eb);
  border-radius: 13px;
  background: #ffffff;
  color: var(--brand-ink, #111827);
  text-align: start;
  cursor: pointer;
}
.adly-chat-video-size-option:hover {
  border-color: rgba(124, 58, 237, 0.42);
  box-shadow: 0 10px 22px rgba(124, 58, 237, 0.1);
}
.adly-chat-video-size-option:disabled {
  cursor: not-allowed;
  opacity: 0.65;
  box-shadow: none;
}
.adly-chat-video-size-icon {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border-radius: 12px;
  color: var(--brand-primary, #7c3aed);
  background: rgba(124, 58, 237, 0.1);
}
.adly-chat-video-size-option strong,
.adly-chat-video-size-option small {
  display: block;
}
.adly-chat-video-size-option strong {
  font-size: 12px;
  line-height: 1.25;
}
.adly-chat-video-size-option small {
  margin-top: 3px;
  color: var(--brand-muted, #6b7280);
  font-size: 10.5px;
  line-height: 1.25;
}
@media (max-width: 520px) {
  .adly-chat-video-size-options {
    grid-template-columns: 1fr;
  }
}
/* Typing indicator: Adly avatar + bouncing dots */
.adly-chat-thinking-msg {
  display: flex;
  align-items: center;
  gap: 8px;
}
.adly-chat-busy-card {
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr);
  gap: 12px;
  align-items: center;
  width: min(100%, 420px);
  padding: 14px;
  border: 1px solid rgba(124, 58, 237, 0.22);
  background:
    radial-gradient(circle at 20% 20%, rgba(124, 58, 237, 0.14), transparent 32%),
    linear-gradient(135deg, rgba(124, 58, 237, 0.08), rgba(255, 255, 255, 0.96));
  box-shadow: 0 16px 34px rgba(17, 24, 39, 0.08);
}
.adly-chat-busy-orb {
  position: relative;
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  border-radius: 16px;
  color: var(--brand-primary, #7c3aed);
  background: rgba(124, 58, 237, 0.1);
  overflow: hidden;
}
.adly-chat-busy-orb::before {
  content: '';
  position: absolute;
  inset: 7px;
  border-radius: 999px;
  border: 3px solid rgba(124, 58, 237, 0.18);
  border-top-color: currentColor;
  animation: adlyChatBusySpin 0.9s linear infinite;
}
.adly-chat-busy-orb span {
  width: 8px;
  height: 8px;
  border-radius: 999px;
  background: currentColor;
  box-shadow: 0 0 18px rgba(124, 58, 237, 0.7);
}
.adly-chat-busy-copy {
  display: grid;
  gap: 4px;
  min-width: 0;
}
.adly-chat-busy-copy strong {
  color: var(--brand-ink, #111827);
  font-size: 13px;
  line-height: 1.25;
}
.adly-chat-busy-copy span {
  color: var(--brand-muted, #6b7280);
  font-size: 12px;
  line-height: 1.35;
  overflow-wrap: anywhere;
  word-break: break-word;
}
@keyframes adlyChatBusySpin {
  to { transform: rotate(360deg); }
}
.adly-chat-avatar-typing {
  width: 30px;
  height: 30px;
  border-radius: 10px;
  flex-shrink: 0;
  animation: adlyChatAvatarPulse 1.8s infinite ease-in-out;
}
@keyframes adlyChatAvatarPulse {
  0%, 100% { transform: scale(1);   filter: brightness(1)   drop-shadow(0 0 0px rgba(124,58,237,0)); }
  50%       { transform: scale(1.1); filter: brightness(1.1) drop-shadow(0 0 6px rgba(124,58,237,0.45)); }
}
.adly-chat-typing {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  min-width: 30px;
  min-height: 18px;
}
.adly-chat-typing span {
  width: 6px;
  height: 6px;
  border-radius: 999px;
  background: var(--brand-primary, #7c3aed);
  opacity: 0.5;
  animation: adlyChatTyping 1s infinite ease-in-out;
}
.adly-chat-typing span:nth-child(2) {
  animation-delay: 0.16s;
}
.adly-chat-typing span:nth-child(3) {
  animation-delay: 0.32s;
}
@keyframes adlyChatTyping {
  0%, 80%, 100% { transform: translateY(0);   opacity: 0.5; }
  40%           { transform: translateY(-5px); opacity: 1; }
}
.adly-chat-form {
  display: grid;
  gap: 10px;
  padding: 14px;
  border-top: 1px solid var(--brand-border, #e5e7eb);
  background: #ffffff;
  min-width: 0;
}
.adly-chat-input-wrap {
  position: relative;
}
.adly-chat-input {
  width: 100%;
  min-height: 82px;
  resize: vertical;
  border: 1px solid var(--brand-border, #e5e7eb);
  border-radius: 14px;
  padding: 12px 58px 48px 14px;
  color: var(--brand-ink, #111827);
  font-family: 'Tajawal', 'Cairo', system-ui, -apple-system, 'Segoe UI', sans-serif;
}
[dir="rtl"] .adly-chat-input {
  padding-right: 14px;
  padding-left: 58px;
}
.adly-chat-attachment-row {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: nowrap;
  min-width: 0;
  width: 100%;
}
.adly-chat-image-add-btn {
  width: 42px;
  height: 42px;
  border-radius: 12px;
  border: 2px dashed var(--brand-border, #e2e8f0);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  color: var(--brand-primary, #7c3aed);
  background: rgba(124, 58, 237, 0.03);
  font-size: 24px;
  font-weight: 500;
  line-height: 1;
  transition: border-color .15s, color .15s, background .15s, transform .15s;
  flex-shrink: 0;
}
.adly-chat-image-add-btn:hover,
.adly-chat-image-add-btn:focus-visible {
  border-color: var(--brand-primary, #7c3aed);
  background: rgba(124, 58, 237, 0.08);
  transform: translateY(-1px);
}
.adly-chat-attachment-preview {
  flex: 0 1 auto;
  min-width: 0;
  max-width: min(220px, calc(100% - 132px));
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 5px 9px 5px 5px;
  border: 1px solid var(--brand-border, #e5e7eb);
  border-radius: 12px;
  background: #ffffff;
  overflow: hidden;
}
.adly-chat-attachment-preview.hidden {
  display: none;
}
.adly-chat-attachment-thumb {
  width: 32px;
  height: 32px;
  border-radius: 9px;
  overflow: hidden;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  background: rgba(124, 58, 237, 0.08);
  color: var(--brand-primary, #7c3aed);
  font-size: 9px;
  font-weight: 700;
}
.adly-chat-attachment-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.adly-chat-attachment-name {
  flex: 1 1 0;
  min-width: 0;
  color: var(--brand-muted, #6b7280);
  font-size: 12px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.adly-chat-form-actions {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
}
.adly-chat-action-buttons {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.adly-chat-voice-btn {
  position: absolute;
  right: 16px;
  bottom: 16px;
  width: 36px;
  height: 36px;
  border-radius: 999px;
  padding: 0;
  display: inline-grid;
  place-items: center;
  border: 1px solid rgba(124, 58, 237, 0.18);
  background: linear-gradient(180deg, #ffffff 0%, #faf7ff 100%);
  color: var(--brand-primary, #7c3aed);
  cursor: pointer;
  box-shadow: 0 5px 12px rgba(124, 58, 237, 0.1);
  transition: transform .15s ease, border-color .15s ease, background .15s ease, box-shadow .15s ease;
  z-index: 2;
  animation: none;
}
.adly-chat-voice-btn::before {
  content: "";
  position: absolute;
  inset: -4px;
  border-radius: inherit;
  pointer-events: none;
  border: 1px solid rgba(124, 58, 237, 0.22);
  animation: adlyChatVoiceSoftRing 2.2s ease-out infinite;
}
.adly-chat-voice-btn:hover,
.adly-chat-voice-btn:focus-visible {
  border-color: rgba(124, 58, 237, 0.34);
  background: linear-gradient(180deg, #ffffff 0%, #f3e8ff 100%);
  box-shadow: 0 7px 16px rgba(124, 58, 237, 0.16);
  transform: translateY(-1px);
}
.adly-chat-voice-btn:hover::before,
.adly-chat-voice-btn:focus-visible::before {
  border-color: rgba(124, 58, 237, 0.3);
  animation-duration: 1.45s;
}
[dir="rtl"] .adly-chat-voice-btn {
  right: auto;
  left: 16px;
}
.adly-chat-voice-btn svg {
  width: 18px;
  height: 18px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.4;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.adly-chat-voice-btn.recording {
  color: #ffffff;
  border-color: #ef4444;
  background: linear-gradient(135deg, #fb7185 0%, #ef4444 100%);
  box-shadow: 0 8px 18px rgba(239, 68, 68, 0.26);
  animation: adlyChatVoiceRecording 1.1s ease-in-out infinite;
}
.adly-chat-voice-btn.recording::before {
  border-color: rgba(239, 68, 68, 0.22);
}
.adly-chat-voice-btn.transcribing {
  color: #ffffff;
  border-color: var(--brand-primary, #7c3aed);
  background: linear-gradient(135deg, #8b5cf6 0%, var(--brand-primary, #7c3aed) 100%);
  animation: adlyChatVoiceTranscribing 1s linear infinite;
}
@keyframes adlyChatVoiceBreathe {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.02); }
}
@keyframes adlyChatVoiceRing {
  0% { opacity: 0.45; transform: scale(0.92); }
  75%, 100% { opacity: 0; transform: scale(1.12); }
}
@keyframes adlyChatVoiceSoftRing {
  0% { opacity: 0.7; transform: scale(0.9); }
  65%, 100% { opacity: 0; transform: scale(1.32); }
}
@keyframes adlyChatVoiceRecording {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.04); }
}
@keyframes adlyChatVoiceTranscribing {
  0% { filter: hue-rotate(0deg); transform: rotate(0deg) scale(1); }
  50% { filter: hue-rotate(18deg); transform: rotate(2deg) scale(1.04); }
  100% { filter: hue-rotate(0deg); transform: rotate(0deg) scale(1); }
}
@media (prefers-reduced-motion: reduce) {
  .adly-chat-voice-btn,
  .adly-chat-voice-btn::before,
  .adly-chat-voice-btn.recording,
  .adly-chat-voice-btn.transcribing {
    animation: none;
  }
}
.adly-chat-status {
  color: var(--brand-muted, #6b7280);
  font-size: 12px;
  flex: 1 1 0;
  min-width: 0;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.adly-chat-attachment-row > .button {
  flex-shrink: 0;
}
@media (max-width: 600px) {
  body.app-page .page-title-row,
  body.app-page .app-jobs-cta-row {
    box-sizing: border-box;
    padding-inline: 12px;
    margin-right: 0;
  }
  body.app-page .app-jobs-page-title .jobs-title {
    flex-wrap: wrap;
    row-gap: 6px;
  }
  .adly-chat-drawer {
    padding: 0;
  }
  .adly-chat-panel {
    width: 100%;
    height: 100%;
    border-radius: 0;
  }
}

.app-shell {
  display: flex;
  min-height: 0;
}

body.app-shell-booting:not(.admin-shell) .app-content > main.container,
body.app-shell-booting:not(.admin-shell) .app-content > main,
body.app-shell-booting:not(.admin-shell) > .app-content {
  position: relative;
  pointer-events: none;
  user-select: none;
}

.app-shell-boot-overlay {
  position: absolute;
  inset: 0;
  z-index: 25;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 14px;
  background: color-mix(in srgb, var(--bg, #fff) 76%, transparent);
  backdrop-filter: blur(2px);
  pointer-events: auto;
}

.app-shell-boot-overlay[hidden] {
  display: none !important;
}

/* Workspace content gate: injected early from locale-head.js on html.adly-app-shell-gate.
   Main content stays hidden until JS adds html.app-shell-ready (non-gated users only).
   Trial paywall users never receive app-shell-ready — only placeholder + modal. */
html.adly-app-shell-gate:not(.app-shell-ready) .app-content > main,
html.adly-app-shell-gate:not(.app-shell-ready) .app-content > main.container {
  position: relative;
  pointer-events: none;
  user-select: none;
  min-height: 40vh;
}
html.adly-app-shell-gate:not(.app-shell-ready) .app-content > main > *:not(.app-shell-boot-overlay):not(.subscription-trial-paywall-page-placeholder),
html.adly-app-shell-gate:not(.app-shell-ready) .app-content > main.container > *:not(.app-shell-boot-overlay):not(.subscription-trial-paywall-page-placeholder) {
  visibility: hidden !important;
}
html.adly-app-shell-gate.subscription-trial-paywall-gated .subscription-trial-paywall-page-placeholder,
html.adly-app-shell-gate.subscription-trial-paywall-gated .subscription-trial-paywall-page-placeholder * {
  visibility: visible !important;
}

.app-shell-boot-spinner {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  border: 3px solid rgba(124, 58, 237, 0.18);
  border-top-color: var(--brand-primary, #7c3aed);
  animation: spin 0.9s linear infinite;
  flex: 0 0 auto;
}

.app-shell-boot-error {
  max-width: min(360px, 90%);
  text-align: center;
  font-size: 14px;
  font-weight: 500;
  color: var(--brand-text, #0f172a);
  line-height: 1.5;
}

.app-content {
  flex: 1;
  min-width: 0;
  margin-left: 238px;
  min-height: 100vh;
}

html[dir="rtl"] .app-content,
[dir="rtl"] .app-content,
.rtl .app-content {
  margin-left: 0;
  margin-right: 238px;
}

/* Desktop: fixed sidebar */
@media (min-width: 961px) {
  .sidebar {
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    height: auto;
    max-height: none;
    z-index: 30;
  }

  html[dir="rtl"] .sidebar,
  [dir="rtl"] .sidebar,
  .rtl .sidebar {
    left: auto;
    right: 0;
  }

}

.app-content.meta-loading-active {
  position: relative;
  overflow: hidden;
}

.meta-page-loading-overlay {
  position: absolute;
  inset: 0;
  z-index: 80;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(241, 245, 254, 0.76);
  backdrop-filter: blur(2px);
}

.meta-page-loading-card {
  min-width: 260px;
  max-width: 90%;
  padding: 22px 24px;
  border-radius: 16px;
  border: 1px solid rgba(46, 96, 255, 0.2);
  background: linear-gradient(160deg, rgba(255, 255, 255, 0.96), rgba(242, 247, 255, 0.98));
  box-shadow: 0 18px 40px rgba(16, 24, 40, 0.16);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
}

.meta-page-loading-spinner {
  width: 46px;
  height: 46px;
  border-radius: 50%;
  border: 3px solid rgba(46, 96, 255, 0.18);
  border-top-color: var(--brand-primary);
  border-right-color: rgba(46, 96, 255, 0.64);
  animation: metaPageSpin 0.85s linear infinite;
}

.meta-page-loading-text {
  font-size: 14px;
  font-weight: 700;
  color: var(--brand-ink);
  text-align: center;
}

@keyframes metaPageSpin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

.app-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 16px 24px;
  background: var(--brand-card);
  border-bottom: 1px solid var(--brand-border);
  position: sticky;
  top: 0;
  z-index: 9;
}

.header-title {
  font-weight: 700;
  font-size: 18px;
}

.header-left {
  display: flex;
  align-items: center;
  gap: 12px;
}

.header-actions {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: nowrap;
}

.report-notifications {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 12px 24px 0;
}
.admin-event-notifications {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 12px 24px 0;
}
.admin-event-notification-modal {
  position: fixed;
  inset: 0;
  z-index: 200000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
}
.admin-event-notification-modal.is-upgrade-prompt {
  padding: 12px;
  align-items: center;
}
.admin-event-notification-modal-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(15, 23, 42, 0.45);
}
.admin-event-notification-modal-card {
  position: relative;
  width: min(760px, 96vw);
  max-height: 88vh;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 10px;
  background: #ffffff;
  border: 1px solid var(--brand-border, #e2e8f0);
  border-radius: 14px;
  box-shadow: 0 22px 56px rgba(2, 6, 23, 0.35);
  padding: 12px;
}
.admin-event-notification-modal-card .report-notice {
  margin: 0;
}
.admin-event-notification-modal.is-premium-paywall .admin-event-notification-modal-backdrop {
  background: rgba(15, 23, 42, 0.46);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}
.admin-event-notification-modal.is-premium-paywall .admin-event-notification-modal-card {
  width: min(540px, 94vw);
  border-radius: 18px;
  border: 1px solid color-mix(in srgb, var(--brand-border, #e2e8f0) 88%, #ffffff);
  box-shadow: 0 22px 56px rgba(15, 23, 42, 0.18);
  background: var(--brand-card, #ffffff);
  padding: 16px;
}
.admin-event-notification-modal.is-premium-paywall .admin-event-notification-modal-card .report-notice.admin-event-notice.is-premium-paywall {
  border-left-color: color-mix(in srgb, var(--brand-primary, #7c3aed) 85%, #1f2937);
  border-radius: 16px;
  background: var(--brand-card, #ffffff);
  border-width: 1px;
  padding: 22px 14px;
}
.admin-event-notification-modal .report-notice.admin-event-notice.is-premium-paywall .report-notice-title {
  font-size: 1.75rem;
  line-height: 1.2;
  letter-spacing: -0.015em;
  color: var(--brand-ink, #0f172a);
}
.admin-event-notification-modal .report-notice.admin-event-notice.is-premium-paywall .report-notice-body {
  font-size: 0.98rem;
  line-height: 1.6;
}
.admin-event-notification-modal .report-notice.admin-event-notice.is-premium-paywall .report-notice-close {
  border-radius: 10px;
  width: 36px;
  height: 36px;
  font-size: 20px;
}
.admin-event-notification-modal .report-notice.admin-event-notice {
  position: relative;
  padding-inline-end: 44px;
}
.admin-event-notification-modal .report-notice.admin-event-notice .report-notice-close {
  position: absolute;
  top: 10px;
  inset-inline-end: 10px;
  margin: 0;
  z-index: 1;
}
html[dir="rtl"] .admin-event-notification-modal .report-notice.admin-event-notice .report-notice-close,
.admin-event-notification-modal[dir="rtl"] .report-notice.admin-event-notice .report-notice-close {
  inset-inline-end: auto;
  inset-inline-start: 10px;
  right: auto;
  left: 10px;
}
html[dir="rtl"] .admin-event-notification-modal .report-notice.admin-event-notice,
.admin-event-notification-modal[dir="rtl"] .report-notice.admin-event-notice {
  padding-inline-end: 14px;
  padding-inline-start: 44px;
}

.admin-event-notice-cta-actions {
  margin-top: 10px;
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  gap: 10px;
  width: auto;
  max-width: 100%;
}
.admin-event-notification-modal-card .admin-event-notice-cta-actions {
  margin-top: 12px;
}
.report-notice .admin-event-notice-cta-actions {
  padding: 0;
}
.admin-event-notice-cta-primary.button,
.admin-event-notice-cta-primary.notif-inline-button {
  width: auto;
  max-width: 100%;
  box-sizing: border-box;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  text-decoration: none;
  font-weight: 700;
  padding: 10px 20px;
  border-radius: 11px;
  font-size: 0.95rem;
  color: var(--brand-on-primary, #ffffff);
  border: none;
}
.admin-event-notice-cta-primary.button:hover,
.admin-event-notice-cta-primary.notif-inline-button:hover {
  color: var(--brand-on-primary, #ffffff);
}

/* Announcement modal (standard variant): one calm card, icon on top, title, text, one button.
   Scoped so premium and upgrade modals and the inline banners keep their own looks. */
.admin-event-notification-modal:not(.is-premium-paywall):not(.is-upgrade-prompt) {
  padding: 16px;
}
.admin-event-notification-modal:not(.is-premium-paywall):not(.is-upgrade-prompt) .admin-event-notification-modal-backdrop {
  background: rgba(15, 23, 42, 0.5);
  animation: adminNoticeFade 200ms ease-out both;
}
.admin-event-notification-modal:not(.is-premium-paywall):not(.is-upgrade-prompt) .admin-event-notification-modal-card {
  width: min(440px, 100%);
  gap: 0;
  padding: 0;
  border: 0;
  border-radius: 20px;
  background: #ffffff;
  box-shadow: 0 24px 60px rgba(15, 23, 42, 0.24), 0 2px 8px rgba(15, 23, 42, 0.08);
  animation: adminNoticeRise 260ms cubic-bezier(0.16, 1, 0.3, 1) both;
}
.admin-event-notification-modal:not(.is-premium-paywall):not(.is-upgrade-prompt) .admin-event-notification-modal-card .report-notice.admin-event-notice {
  display: block;
  border: 0;
  border-radius: 0;
  background: transparent;
  padding: 32px 28px 28px;
}
.admin-event-notification-modal:not(.is-premium-paywall):not(.is-upgrade-prompt) .admin-event-notification-modal-card .report-notice.admin-event-notice + .report-notice.admin-event-notice {
  border-top: 1px solid var(--brand-border, #e6e8f0);
}
.admin-event-notification-modal:not(.is-premium-paywall):not(.is-upgrade-prompt) .report-notice-main {
  flex-direction: column;
  align-items: flex-start;
  gap: 18px;
}
.admin-event-notification-modal:not(.is-premium-paywall):not(.is-upgrade-prompt) .report-notice-logo-col {
  width: auto;
}
.admin-event-notification-modal:not(.is-premium-paywall):not(.is-upgrade-prompt) .notif-event-icon-slot:not(.is-square) {
  width: 52px;
  height: 52px;
  border-radius: 16px;
  background: color-mix(in srgb, var(--brand-primary, #7c3aed) 11%, #ffffff);
  color: var(--brand-primary, #7c3aed);
  border: 0;
  box-shadow: none;
}
.admin-event-notification-modal:not(.is-premium-paywall):not(.is-upgrade-prompt) .notif-event-icon-line {
  width: 26px;
  height: 26px;
}
.admin-event-notification-modal:not(.is-premium-paywall):not(.is-upgrade-prompt) .report-notice-title {
  margin: 0 0 8px;
  font-size: 1.25rem;
  line-height: 1.4;
  font-weight: 700;
  text-wrap: balance;
}
.admin-event-notification-modal:not(.is-premium-paywall):not(.is-upgrade-prompt) .report-notice-body {
  font-size: 0.9375rem;
  line-height: 1.7;
  font-weight: 400;
  color: #4b5563;
}
.admin-event-notification-modal:not(.is-premium-paywall):not(.is-upgrade-prompt) .admin-event-notification-modal-card .admin-event-notice-cta-actions {
  margin-top: 24px;
}
.admin-event-notification-modal:not(.is-premium-paywall):not(.is-upgrade-prompt) .admin-event-notice-cta-primary.button {
  min-height: 48px;
  padding: 0 28px;
  border-radius: 12px;
  font-size: 0.9375rem;
  font-weight: 700;
}
.admin-event-notification-modal:not(.is-premium-paywall):not(.is-upgrade-prompt) .report-notice.admin-event-notice .report-notice-close {
  top: 12px;
  right: auto;
  left: auto;
  inset-inline-start: auto;
  inset-inline-end: 12px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 12px;
  color: #6b7280;
  transition: background-color 150ms ease, color 150ms ease;
}
.admin-event-notification-modal:not(.is-premium-paywall):not(.is-upgrade-prompt) .report-notice-close:hover {
  background: #f1f2f7;
  color: var(--brand-ink, #1a202c);
}
.admin-event-notification-modal:not(.is-premium-paywall):not(.is-upgrade-prompt) .report-notice-close:focus-visible {
  outline: 2px solid var(--brand-primary, #7c3aed);
  outline-offset: 2px;
}
@keyframes adminNoticeFade { from { opacity: 0; } to { opacity: 1; } }
@keyframes adminNoticeRise { from { opacity: 0; transform: translateY(10px) scale(0.98); } to { opacity: 1; transform: none; } }
@media (max-width: 520px) {
  .admin-event-notification-modal:not(.is-premium-paywall):not(.is-upgrade-prompt) .admin-event-notification-modal-card .report-notice.admin-event-notice {
    padding: 28px 22px 22px;
  }
  .admin-event-notification-modal:not(.is-premium-paywall):not(.is-upgrade-prompt) .admin-event-notice-cta-actions,
  .admin-event-notification-modal:not(.is-premium-paywall):not(.is-upgrade-prompt) .admin-event-notice-cta-primary.button {
    width: 100%;
  }
}
@media (prefers-reduced-motion: reduce) {
  .admin-event-notification-modal-backdrop,
  .admin-event-notification-modal-card { animation: none !important; }
}

/* ─── Upgrade Prompt component ─────────────────────────────────────────────
   Reusable paywall / upgrade modal (design_variant = 'upgrade').
   Stack: optional admin {{icon|…}} inline with title → subtitle → CTA (+ optional dismiss toolbar).
   Optional future: .upgrade-prompt-secondary-action (text link under CTA)
   ────────────────────────────────────────────────────────────────────────── */
.admin-event-notification-modal.is-upgrade-prompt .admin-event-notification-modal-backdrop {
  background: rgba(15, 23, 42, 0.52);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}

.upgrade-prompt {
  position: relative;
  z-index: 1;
  width: min(760px, calc(100vw - 32px));
  max-width: min(760px, calc(100vw - 32px));
  min-width: min(100%, 260px);
  background: var(--brand-card, #ffffff);
  border-radius: 14px;
  border: 1px solid rgba(15, 23, 42, 0.08);
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.035), 0 12px 32px rgba(15, 23, 42, 0.09);
  padding: 8px 18px 14px;
  display: flex;
  flex-direction: column;
  box-sizing: border-box;
}

/* Dismiss in document flow — not absolutely positioned in a corner */
.upgrade-prompt-toolbar {
  display: flex;
  justify-content: flex-end;
  flex-shrink: 0;
  margin: 0 0 0;
  width: 100%;
}

.upgrade-prompt-close {
  position: relative;
  top: auto;
  right: auto;
  left: auto;
  width: 28px;
  height: 28px;
  border-radius: 8px;
  border: none;
  background: transparent;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 15px;
  line-height: 1;
  color: color-mix(in srgb, var(--brand-ink, #0f172a) 38%, transparent);
  transition: background 0.12s, color 0.12s;
  padding: 0;
  flex-shrink: 0;
}

.upgrade-prompt-close:hover {
  background: rgba(15, 23, 42, 0.06);
  color: var(--brand-ink, #0f172a);
}

/* EN / AR: slight nudge below toolbar / card top for headline + icon row alignment */
.upgrade-prompt.upgrade-prompt--title-top-pad .upgrade-prompt-content > .upgrade-prompt-heading,
.upgrade-prompt.upgrade-prompt--title-top-pad .upgrade-prompt-content > .upgrade-prompt-title {
  padding-top: 5px;
}

/* Content uses full card width (padding only); line length is not artificially capped */
.upgrade-prompt-content {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  align-self: stretch;
  min-width: 0;
  width: 100%;
  max-width: none;
  text-align: start;
}

/* Optional eyebrow / label above title (future or CMS) */
.upgrade-prompt-eyebrow {
  display: block;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--brand-primary, #7c3aed);
  margin: 0 0 8px;
}

/* Admin {{icon|key}} + title: one row, icon is a small system chip (not a corner tile) */
.upgrade-prompt-heading {
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  gap: 10px;
  margin: 0 0 8px;
  width: 100%;
  max-width: 100%;
  min-width: 0;
}
.upgrade-prompt-heading-icon-only {
  margin-bottom: 6px;
}
.upgrade-prompt-heading .upgrade-prompt-title {
  margin: 0;
  flex: 1 1 auto;
  min-width: 0;
}
.upgrade-prompt-icon {
  flex-shrink: 0;
  width: 26px;
  height: 26px;
  border-radius: 7px;
  border: 1px solid color-mix(in srgb, var(--brand-primary, #7c3aed) 12%, rgba(15, 23, 42, 0.1));
  background: color-mix(in srgb, var(--brand-primary, #7c3aed) 4%, #ffffff);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  margin-top: 0.14em;
}
.upgrade-prompt-icon-svg {
  width: 16px;
  height: 16px;
  color: color-mix(in srgb, var(--brand-primary, #7c3aed) 88%, var(--brand-ink, #0f172a));
  fill: none;
}

/* Title: subdued headline — no oversized display type */
.upgrade-prompt-title {
  font-size: clamp(0.95rem, 1.65vw + 0.4rem, 1.25rem);
  font-weight: 700;
  line-height: 1.28;
  letter-spacing: -0.015em;
  color: var(--brand-ink, #0f172a);
  margin: 0 0 8px;
  max-width: 100%;
  overflow-wrap: anywhere;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* Subtitle: sits in same column as title; CTA spaced tightly below */
.upgrade-prompt-body.upgrade-prompt-subtitle {
  font-size: 0.9375rem;
  line-height: 1.52;
  color: color-mix(in srgb, var(--brand-ink, #0f172a) 70%, transparent);
  margin: 0 0 14px;
  max-width: 100%;
  align-self: stretch;
}

.upgrade-prompt-body p { margin: 0 0 8px; }
.upgrade-prompt-body p:last-child { margin-bottom: 0; }
.upgrade-prompt-body ul {
  margin: 6px 0 8px;
  padding-inline-start: 1.15em;
}
.upgrade-prompt-body li { margin-bottom: 4px; }

.upgrade-prompt-actions {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0;
  margin: 0;
}

.upgrade-prompt-cta.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: fit-content;
  max-width: 100%;
  min-width: 116px;
  box-sizing: border-box;
  padding: 10px 18px;
  border-radius: 9px;
  font-size: 0.875rem;
  font-weight: 700;
  text-decoration: none;
  background: var(--brand-primary, #7c3aed);
  color: #ffffff;
  border: none;
  cursor: pointer;
  transition: filter 0.12s, opacity 0.12s;
}

.upgrade-prompt-cta.button:hover {
  filter: brightness(1.06);
  color: #ffffff;
}

/* Trust microcopy: compact pills in one row (wraps only if needed on narrow widths) */
.upgrade-prompt-trust-list {
  list-style: none;
  margin: 12px 0 0;
  padding: 0;
  width: 100%;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  row-gap: 6px;
  align-self: stretch;
}
.upgrade-prompt-trust-item {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  max-width: 100%;
  padding: 3px 8px 3px 7px;
  border-radius: 999px;
  border: 1px solid rgba(15, 23, 42, 0.09);
  background: color-mix(in srgb, var(--brand-ink, #0f172a) 4%, #ffffff);
  font-size: 0.625rem;
  font-weight: 500;
  line-height: 1.3;
  letter-spacing: 0.01em;
  color: color-mix(in srgb, var(--brand-ink, #0f172a) 70%, transparent);
  box-sizing: border-box;
}
.upgrade-prompt-trust-check {
  flex-shrink: 0;
  width: 12px;
  height: 12px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--brand-primary, #7c3aed) 14%, transparent);
  color: var(--brand-primary, #7c3aed);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 6px;
  font-weight: 700;
  line-height: 1;
  margin-top: 0;
  box-sizing: border-box;
}
.upgrade-prompt-trust-text {
  flex: 0 1 auto;
  min-width: 0;
}

/* Arabic: semibold (600) reads very heavy; keep pills closer to regular body weight */
html:lang(ar) .upgrade-prompt-trust-item {
  font-weight: 400;
}

/* Future: secondary text action under primary CTA */
.upgrade-prompt-secondary-action {
  margin-top: 12px;
  font-size: 0.875rem;
  font-weight: 500;
  color: color-mix(in srgb, var(--brand-ink, #0f172a) 55%, transparent);
  text-decoration: none;
  border: none;
  background: none;
  cursor: pointer;
  padding: 0;
  align-self: flex-start;
}
.upgrade-prompt-secondary-action:hover {
  color: var(--brand-primary, #7c3aed);
  text-decoration: underline;
}

html[dir="rtl"] .upgrade-prompt,
[dir="rtl"] .upgrade-prompt,
.rtl .upgrade-prompt {
  direction: rtl;
  text-align: right;
}

@media (max-width: 600px) {
  .upgrade-prompt {
    width: min(100%, calc(100vw - 24px));
    max-width: min(760px, calc(100vw - 24px));
    padding: 8px 16px 14px;
    border-radius: 12px;
  }
  .upgrade-prompt-body.upgrade-prompt-subtitle {
    font-size: 0.9rem;
  }
  .upgrade-prompt-cta.button {
    min-width: min(100%, 200px);
  }
}

/* Subscription-trial paywall: same modal shell as admin notifications; fixed to viewport over main area */
body.subscription-trial-paywall-open {
  overflow: hidden;
}
@media (min-width: 961px) {
  .admin-event-notification-modal.subscription-trial-paywall-modal {
    left: 238px;
    right: 0;
    width: auto;
  }
  html[dir="rtl"] .admin-event-notification-modal.subscription-trial-paywall-modal,
  [dir="rtl"] .admin-event-notification-modal.subscription-trial-paywall-modal,
  .rtl .admin-event-notification-modal.subscription-trial-paywall-modal {
    left: 0;
    right: 238px;
  }
}

/* Subscription-trial paywall: keep header + profile menu tappable above modal (z-index 200000). */
body.subscription-trial-paywall-open .app-header {
  z-index: 210001;
}
body.subscription-trial-paywall-open .user-chip-wrap {
  position: relative;
  z-index: 210002;
}
body.subscription-trial-paywall-open .user-chip-menu.open {
  z-index: 210003;
}

/* Mobile trial paywall: slide-out nav above blurred overlay (matches nav-onboarding ~210000). */
@media (max-width: 960px) {
  body.subscription-trial-paywall-open .sidebar-overlay {
    z-index: 210002;
  }
  body.subscription-trial-paywall-open .sidebar {
    z-index: 210003;
  }
}

body.subscription-trial-paywall-open .subscription-trial-paywall-page-placeholder,
body.subscription-trial-paywall-open .subscription-trial-paywall-placeholder-main {
  pointer-events: none;
  user-select: none;
}

.subscription-trial-paywall-page-placeholder {
  display: flex;
  flex-direction: column;
  gap: 20px;
  padding: 8px 0 24px;
  min-height: min(72vh, 720px);
}

.subscription-trial-paywall-page-placeholder-head {
  display: flex;
  flex-direction: column;
  gap: 10px;
  max-width: 420px;
}

.subscription-trial-paywall-page-placeholder-line {
  display: block;
  height: 14px;
  border-radius: 999px;
  background: linear-gradient(
    90deg,
    color-mix(in srgb, var(--brand-border, #e2e8f0) 88%, transparent),
    color-mix(in srgb, var(--brand-border, #e2e8f0) 52%, transparent),
    color-mix(in srgb, var(--brand-border, #e2e8f0) 88%, transparent)
  );
  animation: subscription-trial-paywall-shimmer 1.35s ease-in-out infinite;
}

.subscription-trial-paywall-page-placeholder-line.title {
  height: 22px;
  width: min(280px, 72%);
}

.subscription-trial-paywall-page-placeholder-line.subtitle {
  width: min(360px, 92%);
}

.subscription-trial-paywall-page-placeholder-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 16px;
}

.subscription-trial-paywall-page-placeholder-card {
  display: block;
  min-height: 148px;
  border-radius: 14px;
  border: 1px solid color-mix(in srgb, var(--brand-border, #e2e8f0) 80%, transparent);
  background: linear-gradient(
    135deg,
    color-mix(in srgb, var(--brand-border, #e2e8f0) 42%, transparent),
    color-mix(in srgb, var(--bg, #fff) 88%, transparent)
  );
  animation: subscription-trial-paywall-shimmer 1.35s ease-in-out infinite;
}

@keyframes subscription-trial-paywall-shimmer {
  0% { opacity: 0.72; }
  50% { opacity: 1; }
  100% { opacity: 0.72; }
}

.report-notice {
  background: #f8fafc;
  border: 1px solid var(--brand-border);
  border-left: 4px solid var(--brand-primary);
  border-radius: 10px;
  padding: 24px 14px;
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 12px;
}
.report-notice.report-notice-no-dismiss {
  justify-content: flex-start;
}
.report-notice-content {
  flex: 1 1 auto;
  width: 100%;
  min-width: 0;
}
.report-notice-main {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  width: 100%;
  min-width: 0;
  direction: inherit;
}
.report-notice-text-block {
  flex: 1 1 auto;
  min-width: 0;
}
.report-notice-logo-col {
  align-self: flex-start;
  width: 56px;
  display: flex;
  justify-content: center;
}
.report-notice-logo-slot {
  margin: 0;
  flex-shrink: 0;
}
.report-notice.refunded { border-left-color: #22c55e; }
.report-notice.declined { border-left-color: #ef4444; }
.report-notice.admin-event-notice { border-left-color: #8b5cf6; }
.notif-brand-logo-inline {
  display: inline-block;
  width: 48px;
  height: 48px;
  border-radius: 12px;
  object-fit: contain;
  background: #ffffff;
  padding: 4px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
  vertical-align: middle;
  margin-inline: 6px;
}
.notif-event-icon-slot {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  border-radius: 999px;
  /* Purple line icon on white, like the brand logo tiles beside it. */
  background: #ffffff;
  border: 1px solid color-mix(in srgb, var(--brand-primary, #7c3aed) 20%, #ffffff);
  color: color-mix(in srgb, var(--brand-primary, #7c3aed) 88%, var(--brand-ink, #0f172a));
  font-size: 0;
  line-height: 1;
  box-shadow: 0 2px 8px rgba(15, 23, 42, 0.06);
}
.notif-event-icon-line {
  width: 24px;
  height: 24px;
  color: inherit;
  fill: none;
}
.notif-event-icon-slot.is-square {
  border-radius: 12px;
  width: 48px;
  height: 48px;
  background: #ffffff;
  color: #d97706;
  border: 1px solid rgba(217, 119, 6, 0.18);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
  padding: 0;
}
.notif-event-icon-slot .notif-event-icon-svg {
  width: 22px;
  height: 22px;
  stroke: currentColor;
  fill: none;
  stroke-width: 2;
}
.notif-event-icon-slot.is-square .notif-event-icon-svg {
  width: 24px;
  height: 24px;
}
.notif-inline-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-top: 6px;
  direction: inherit;
  text-align: start;
}
.notif-inline-button:hover {
  filter: brightness(0.95);
}
.report-notice-title {
  font-weight: 700;
  font-size: 0.95rem;
  color: var(--brand-ink, #1e293b);
  margin-bottom: 4px;
}
.report-notice-body {
  font-size: 0.85rem;
  color: var(--brand-muted, #64748b);
  line-height: 1.4;
}
.report-notice-body h1,
.report-notice-body h2,
.report-notice-body h3 {
  color: var(--brand-ink, #1e293b);
  font-weight: 700;
  line-height: 1.25;
  margin: 0 0 8px;
}
.report-notice-body h1 { font-size: 1.35rem; }
.report-notice-body h2 { font-size: 1.2rem; }
.report-notice-body h3 { font-size: 1.05rem; }
.report-notice-body p {
  margin: 0 0 8px;
}
.report-notice-body ul,
.report-notice-body ol {
  margin: 0 0 10px;
  padding-inline-start: 18px;
}
.report-notice-body a:not(.button),
.notif-editor-body a:not(.button) {
  color: var(--brand-primary, #7c3aed);
  text-decoration: underline;
  font-weight: 500;
  cursor: pointer;
}
.report-notice-body a.button,
.notif-editor-body a.button,
.report-notice .admin-event-notice-cta-actions .button {
  color: var(--brand-on-primary, #ffffff);
  text-decoration: none;
}
.report-notice-body a.button:hover,
.notif-editor-body a.button:hover,
.report-notice .admin-event-notice-cta-actions .button:hover {
  color: var(--brand-on-primary, #ffffff);
}
.report-notice-close {
  background: none;
  border: none;
  cursor: pointer;
  font-size: 1.1rem;
  color: var(--brand-muted, #64748b);
}

/* Inline admin banners (e.g. "Upload your brand logo"). Admin sets the background, title colour and
   body copy, so the frame stays neutral: hairline border instead of a side stripe, a real close
   target, an icon that sits on the title line and a compact CTA. */
.admin-event-notifications .report-notice.admin-event-notice {
  position: relative;
  gap: 0;
  padding: 16px 20px;
  padding-inline-end: 52px;
  border: 1px solid rgba(15, 23, 42, 0.08);
  border-radius: 16px;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
}
/* No admin background set: a soft brand tint, so the banner reads as a notice and not as the page grey. */
.admin-event-notifications .report-notice.admin-event-notice:not([style*="background"]) {
  background: color-mix(in srgb, var(--brand-primary, #7c3aed) 6%, #ffffff);
  border-color: color-mix(in srgb, var(--brand-primary, #7c3aed) 16%, #ffffff);
}
.admin-event-notifications .admin-event-notice .report-notice-main { gap: 14px; }
.admin-event-notifications .admin-event-notice .report-notice-logo-col { width: auto; }
.admin-event-notifications .admin-event-notice .notif-event-icon-slot,
.admin-event-notifications .admin-event-notice .notif-brand-logo-inline {
  width: 44px;
  height: 44px;
  margin: 0;
  border-radius: 12px;
  border: 1px solid rgba(15, 23, 42, 0.06);
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.06);
}
.admin-event-notifications .admin-event-notice .report-notice-text-block {
  min-height: 44px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.admin-event-notifications .admin-event-notice .report-notice-title {
  margin: 0 0 4px;
  font-size: 16px;
  font-weight: 500;
  line-height: 1.4;
}
.admin-event-notifications .admin-event-notice .report-notice-body {
  max-width: 68ch;
  font-size: 14px;
  line-height: 1.6;
}
/* Admin copy sometimes carries a stray inline direction; follow the page instead. */
.admin-event-notifications .admin-event-notice .report-notice-body [style*="direction"],
.admin-event-notifications .admin-event-notice .report-notice-body [dir] {
  direction: inherit !important;
}
.admin-event-notifications .admin-event-notice .report-notice-body .notif-inline-button,
.admin-event-notifications .admin-event-notice .admin-event-notice-cta-primary {
  min-height: 40px;
  margin-top: 12px;
  padding: 0 18px !important;
  border-radius: 10px;
  font-size: 14px !important;
  font-weight: 500;
  line-height: 1;
  box-shadow: none;
  transition: filter 0.15s ease;
}
.admin-event-notifications .admin-event-notice .admin-event-notice-cta-actions { margin-top: 0; }
.admin-event-notifications .admin-event-notice .notif-inline-button:focus-visible {
  outline: 2px solid var(--brand-primary, #7c3aed);
  outline-offset: 2px;
}
.admin-event-notifications .admin-event-notice .report-notice-close {
  position: absolute;
  top: 12px;
  inset-inline-end: 12px;
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  padding: 0;
  border-radius: 8px;
  color: rgba(15, 23, 42, 0.45);
  transition: background-color 0.15s ease, color 0.15s ease;
}
.admin-event-notifications .admin-event-notice .report-notice-close:hover {
  background: rgba(15, 23, 42, 0.06);
  color: rgba(15, 23, 42, 0.8);
}
.admin-event-notifications .admin-event-notice .report-notice-close:focus-visible {
  outline: 2px solid var(--brand-primary, #7c3aed);
  outline-offset: 0;
}
.report-notice-close .report-notice-close-icon { display: block; width: 18px; height: 18px; }
/* More than one banner: one row that swipes, with a dot per banner. */
.admin-event-notices-track {
  display: flex;
  /* Each notice keeps its own height; the row is sized to the notice in view (script), not stretched to the tallest. */
  align-items: flex-start;
  gap: 12px;
  overflow-x: auto;
  overflow-y: hidden;
  transition: height 0.2s ease;
  scroll-snap-type: x mandatory;
  overscroll-behavior-x: contain;
  scrollbar-width: none;
}
.admin-event-notices-track::-webkit-scrollbar { display: none; }
.admin-event-notices-track > * {
  flex: 0 0 100%;
  min-width: 0;
  box-sizing: border-box;
  scroll-snap-align: start;
  scroll-snap-stop: always;
}
.admin-event-notices-dots {
  display: flex;
  justify-content: center;
  margin-top: -4px;
}
.admin-event-notices-dot {
  display: grid;
  place-items: center;
  height: 20px;
  padding: 0 3px;
  border: 0;
  background: none;
  cursor: pointer;
}
.admin-event-notices-dot::before {
  content: '';
  width: 6px;
  height: 6px;
  border-radius: 999px;
  background: rgba(15, 23, 42, 0.2);
  transition: width 0.2s ease, background-color 0.2s ease;
}
.admin-event-notices-dot:hover::before { background: rgba(15, 23, 42, 0.35); }
.admin-event-notices-dot.is-active::before { width: 18px; background: var(--brand-primary, #7c3aed); }
.admin-event-notices-dot:focus-visible { outline: 2px solid var(--brand-primary, #7c3aed); outline-offset: 0; border-radius: 6px; }
@media (prefers-reduced-motion: reduce) {
  .admin-event-notices-dot::before { transition: none; }
  .admin-event-notices-track { transition: none; }
}
@media (max-width: 640px) {
  /* Line up with the 12px page gutter used by the content below. */
  .admin-event-notifications { padding: 12px 12px 0; }
  .admin-event-notifications .report-notice.admin-event-notice {
    padding: 14px;
    padding-inline-end: 40px;
  }
  .admin-event-notifications .admin-event-notice .report-notice-main { gap: 12px; }
  .admin-event-notifications .admin-event-notice .notif-event-icon-slot,
  .admin-event-notifications .admin-event-notice .notif-brand-logo-inline { width: 40px; height: 40px; }
  .admin-event-notifications .admin-event-notice .report-notice-text-block { min-height: 40px; }
  .admin-event-notifications .admin-event-notice .report-notice-title { font-size: 15px; }
  .admin-event-notifications .admin-event-notice .report-notice-close { top: 8px; inset-inline-end: 8px; }
}

.trial-welcome-banner {
  background: linear-gradient(135deg, #faf5ff 0%, #f0f9ff 100%);
  border: 1px solid #e9d5ff;
  border-left: 4px solid #a855f7;
  border-radius: 12px;
  padding: 20px;
  margin: 12px 24px 0;
  box-shadow: 0 2px 8px rgba(168, 85, 247, 0.08);
  animation: bannerSlideIn 0.4s ease-out;
}

@keyframes bannerSlideIn {
  from {
    opacity: 0;
    transform: translateY(-10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@media (max-width: 768px) {
  .admin-event-notification-modal {
    padding: 12px;
    align-items: center;
  }
  .admin-event-notification-modal-card {
    width: min(760px, 96vw);
    max-height: 84vh;
    border-radius: 14px;
  }
  .trial-welcome-banner {
    margin: 12px 16px 0;
    padding: 16px;
  }
}

.header-credits {
  display: flex;
  gap: 6px;
  align-items: center;
}

.header-credits .credit-pill {
  padding: 6px 12px;
  height: 32px;
  border-radius: 10px;
}

.icon-button {
  background: rgba(15, 23, 42, 0.06);
  border: 1px solid rgba(15, 23, 42, 0.08);
  border-radius: 12px;
  width: 38px;
  height: 38px;
  display: grid;
  place-items: center;
  cursor: pointer;
  color: #374151;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.icon-button:hover {
  transform: translateY(-1px);
  box-shadow: 0 8px 18px rgba(15, 23, 42, 0.12);
}

.sidebar {
  width: 238px;
  background: #f9fafb;
  border-right: 1px solid var(--brand-border);
  padding: 14px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  font-size: 122%;
  box-sizing: border-box;
  overflow-y: auto;
  overflow-x: hidden;
}

.sidebar-header {
  display: flex;
  align-items: center;
  gap: 10px;
  padding-bottom: 4px;
}

.sidebar-header .brand-lockup {
  display: flex;
  align-items: center;
  gap: 10px;
  flex: 0 1 auto;
  min-width: 0;
  border-radius: 10px;
  padding: 4px 6px;
  margin: -4px -6px;
}

.sidebar-header .sidebar-close {
  margin-inline-start: auto;
}

.sidebar-header .sidebar-brand-edit {
  flex: 0 0 auto;
  margin-inline-start: -4px;
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  border-radius: 8px;
  color: var(--brand-muted, #64748b);
  transition: background-color 0.15s ease, color 0.15s ease;
}
.sidebar-header .sidebar-brand-edit:hover {
  background: color-mix(in srgb, var(--brand-primary, #7c3aed) 10%, transparent);
  color: var(--brand-ink, #0f172a);
}
.sidebar-header .sidebar-brand-edit:focus-visible {
  outline: 2px solid var(--brand-primary, #7c3aed);
  outline-offset: 2px;
}

.sidebar-header .brand-logo {
  width: 32px;
  height: 32px;
  border-radius: 8px;
  background: #f3f4f6;
  display: grid;
  place-items: center;
  overflow: hidden;
  flex-shrink: 0;
}

.sidebar-header .brand-logo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.sidebar-header .brand-title {
  font-weight: 700;
  font-size: 15px;
  color: #1f2937;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  line-height: 1.2;
}

.sidebar-close {
  display: none;
}

.brand-switcher-slot {
  padding-bottom: 12px;
}

.brand-switcher-slot .brand-switcher {
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: wrap !important;
  align-items: center !important;
  gap: 6px !important;
  padding: 0 !important;
  border: none !important;
  background: none !important;
  box-shadow: none !important;
  border-radius: 0 !important;
}

.brand-switcher-slot .brand-switcher .select {
  flex: 1;
  min-width: 0 !important;
  height: 38px;
  border-radius: 10px;
  border: 1px solid #e5e7eb;
  background: #fff;
  color: #1f2937;
  font-size: 13px;
  font-weight: 500;
  padding: 0 10px;
}

.brand-switcher-slot .brand-switcher .brand-select-search {
  width: 100%;
  order: -1;
  height: 36px;
  border-radius: 10px;
  border: 1px solid #e5e7eb;
  background: #fff;
  color: var(--brand-ink);
  font-family: inherit;
  font-size: 13px;
  padding: 0 10px;
  box-sizing: border-box;
  margin-bottom: 2px;
}
.brand-switcher-slot .brand-switcher .brand-select-search:focus {
  outline: none;
  border-color: var(--brand-primary);
}

.sidebar-section {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.sidebar-label {
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.09em;
  color: #9ca3af;
  font-weight: 500;
  opacity: 0.86;
}

/* ===== Sidebar Navigation ===== */
.sidebar-nav {
  display: flex;
  flex-direction: column;
  gap: 0;
  padding: 0 8px;
}

/* --- Section groups --- */
.nav-group {
  display: flex;
  flex-direction: column;
  gap: 0;
}
.nav-group:first-child {
  margin-top: 0;
}
.nav-group + .nav-group {
  margin-top: 20px;
  padding-top: 12px;
  border-top: 1px solid #e5e7eb;
}
.nav-group-continued {
  margin-top: 6px;
  padding-top: 0;
  border-top: none;
}
.nav-icon-brand {
  object-fit: contain;
  border-radius: 6px;
}
.nav-group-label {
  font-size: 12px;
  font-weight: 500;
  color: #9ca3af;
  text-transform: uppercase;
  letter-spacing: 0.09em;
  padding: 0 10px 10px;
  line-height: 1;
  user-select: none;
  opacity: 0.86;
}
.nav-group-toggle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  width: 100%;
  margin: 0;
  border: 0;
  background: transparent;
  cursor: pointer;
  font: inherit;
  font-size: 12px;
  font-weight: 500;
  color: #9ca3af;
  text-transform: uppercase;
  letter-spacing: 0.09em;
  padding: 0 10px 10px;
  line-height: 1.2;
  text-align: start;
  opacity: 0.86;
  transition: color 120ms ease, opacity 120ms ease;
}
.nav-group-toggle:hover {
  color: #6b7280;
  opacity: 1;
}
.nav-group-toggle-label {
  flex: 1 1 auto;
  min-width: 0;
}
.nav-group-chevron {
  width: 8px;
  height: 8px;
  flex-shrink: 0;
  border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  transform: rotate(45deg);
  transition: transform 0.15s ease;
  opacity: 0.75;
  margin-top: -2px;
}
.nav-group.is-collapsed .nav-group-chevron {
  transform: rotate(-45deg);
}
.nav-group-items {
  display: flex;
  flex-direction: column;
  gap: 0;
}
.nav-group.is-collapsed .nav-group-items {
  display: none;
}
.nav-group.is-nav-group-locked .nav-group-toggle {
  cursor: default;
  pointer-events: none;
}
.nav-group.is-nav-group-locked .nav-group-chevron {
  display: none;
}
html[lang="ar"] .nav-group-toggle,
html[lang="he"] .nav-group-toggle,
html[dir="rtl"] .nav-group-toggle,
[dir="rtl"] .nav-group-toggle {
  font-family: 'Tajawal', 'Cairo', system-ui, -apple-system, 'Segoe UI', sans-serif;
  text-transform: none;
  letter-spacing: 0;
}
.nav-group-label .nav-icon,
.sidebar-label .nav-icon {
  display: none;
}
.nav-group + .nav-group .nav-group-label,
.nav-group + .nav-group .nav-group-toggle {
  position: relative;
  padding-top: 8px;
}
.nav-group + .nav-group .nav-group-label::before,
.nav-group + .nav-group .nav-group-toggle::before {
  content: none;
}

/* --- Locked --- */
.sidebar-nav .nav-item.locked {
  opacity: 0.5;
  cursor: not-allowed;
  pointer-events: none;
}

/* --- Nav item base --- */
.nav-item {
  min-height: 44px;
  padding-inline-start: 16px;
  padding-inline-end: 16px;
  border-radius: 8px;
  color: #374151;
  font-weight: 500;
  font-size: 13.23px;
  line-height: 1.2;
  display: flex;
  align-items: center;
  gap: 0;
  text-decoration: none;
  position: relative;
  transition: background 120ms ease, color 120ms ease;
}
.nav-group .nav-item + .nav-item {
  margin-top: 6px;
}

/* --- Active item: taller, stronger --- */
.nav-item.active {
  min-height: 44px;
  background: rgba(147, 51, 234, 0.08);
  color: #111827;
  font-weight: 500;
}

/* Keep multi-brand label on one line in sidebar (Arabic can wrap). */
.sidebar .nav-item[data-nav="multi-brand-jobs"] {
  white-space: nowrap;
}

.sidebar .nav-item[data-nav="multi-brand-jobs"] span {
  white-space: nowrap;
}

/* --- Hover: neutral gray --- */
.nav-item:hover:not(.active) {
  background: rgba(147, 51, 234, 0.06);
  color: #111827;
}

/* Accent bar: 24px tall, centered, flush to edge */
.nav-item.active::after {
  content: none;
  position: absolute;
  height: 24px;
  top: 50%;
  transform: translateY(-50%);
  right: 0;
  width: 3px;
  border-radius: 2px;
  background: var(--brand-primary);
}
html[dir="rtl"] .nav-item.active::after,
[dir="rtl"] .nav-item.active::after,
.rtl .nav-item.active::after {
  right: auto;
  left: 0;
}

/* --- Icon container: fixed width for label alignment --- */
.nav-icon {
  width: 17.01px;
  height: 17.01px;
  min-width: 26.46px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  stroke: currentColor;
  fill: none;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
  color: #6b7280;
  transition: color 0.12s ease;
}
.nav-icon.nav-icon-whatsapp,
.nav-icon.nav-icon-autopilot-whatsapp {
  transform: scale(1.24);
  transform-origin: center;
}
.nav-item:hover:not(.active) .nav-icon {
  color: #374151;
}
.nav-item.active .nav-icon {
  color: #4b5563;
}
@keyframes nav-onboarding-ring {
  0% {
    transform: scale(1);
    opacity: 0.55;
  }
  65% {
    transform: scale(2.6);
    opacity: 0;
  }
  100% {
    transform: scale(2.6);
    opacity: 0;
  }
}
/* "New" chip next to a sidebar item (brand colour, never black). The label keeps one line; the chip hugs the end. */
.sidebar-nav .nav-item:has(.nav-new-chip) > span:not(.nav-new-chip):not(.nav-onboarding-dot) {
  flex: 1 1 auto;
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.sidebar-nav .nav-item .nav-new-chip {
  margin-inline-start: 6px;
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  padding: 0 5px;
  height: 15px;
  border-radius: 999px;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.02em;
  line-height: 1;
  color: #fff;
  background: var(--brand-primary, #7c3aed);
}
.sidebar-nav .nav-item .nav-new-chip + .nav-onboarding-dot { margin-inline-start: 8px; }
.nav-onboarding-dot { margin-inline-start: 8px; }
.nav-onboarding-dot {
  margin-inline-start: auto;
  position: relative;
  width: 8px;
  height: 8px;
  border-radius: 999px;
  color: var(--brand-primary);
  background: currentColor;
  flex: 0 0 auto;
}
.nav-onboarding-dot::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 999px;
  background: currentColor;
  animation: nav-onboarding-ring 2.6s ease-out infinite;
}
@media (prefers-reduced-motion: reduce) {
  .nav-onboarding-dot::after {
    animation: none;
  }
}
.sidebar-section.admin-nav {
  margin-top: 18px;
  padding-top: 10px;
  border-top: none;
}
.sidebar-section.admin-nav .sidebar-label {
  margin-bottom: 10px;
}
.admin-shell .sidebar-section.admin-nav {
  margin-top: 0;
  padding: 12px 0;
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.admin-back-to-app {
  display: none;
}
.admin-shell .admin-back-to-app {
  display: block;
  margin-top: 8px;
  opacity: 0.6;
  font-size: 12px;
}
.admin-shell .sidebar-section.admin-nav .sidebar-label {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--brand-muted);
  padding: 0 16px;
  margin-bottom: 8px;
}
@media (min-width: 961px) {
  .admin-shell .sidebar {
    width: 180px;
    padding: 10px;
    font-size: 110%;
    transition: transform 0.2s ease;
  }
  .admin-shell .sidebar .nav-item {
    padding: 7px 12px;
    font-size: 12.285px;
  }
  .admin-shell .app-content {
    margin-left: 180px;
    transition: margin 0.2s ease;
  }
  html[dir="rtl"] .admin-shell .app-content,
  [dir="rtl"] .admin-shell .app-content,
  .rtl .admin-shell .app-content {
    margin-left: 0;
    margin-right: 180px;
  }
  .admin-shell .container {
    max-width: 1120px;
  }
  .admin-shell.admin-sidebar-collapsed .sidebar {
    transform: translateX(-100%);
  }
  html[dir="rtl"] .admin-shell.admin-sidebar-collapsed .sidebar,
  [dir="rtl"] .admin-shell.admin-sidebar-collapsed .sidebar,
  .rtl .admin-shell.admin-sidebar-collapsed .sidebar {
    transform: translateX(100%);
  }
  .admin-shell.admin-sidebar-collapsed .app-content {
    margin-left: 0;
  }
  html[dir="rtl"] .admin-shell.admin-sidebar-collapsed .app-content,
  [dir="rtl"] .admin-shell.admin-sidebar-collapsed .app-content,
  .rtl .admin-shell.admin-sidebar-collapsed .app-content {
    margin-right: 0;
  }
}

.icon {
  width: 16px;
  height: 16px;
  stroke: currentColor;
  fill: none;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.stage-icon {
  width: 14px;
  height: 14px;
  color: var(--brand-primary);
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.inline-icon {
  width: 14px;
  height: 14px;
  color: var(--brand-primary);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-right: 6px;
}

.create-cta {
  padding: 12px 18px;
  font-size: 14px;
  font-weight: 700;
  border-radius: 12px;
  background: #111827;
  color: #ffffff;
  border: 1px solid rgba(17, 24, 39, 0.18);
  box-shadow: none;
}

/* ================================================================
   CREATE WIZARD — unified layout system
   One container · consistent headers · spacing: 16 / 24 / 32 / 48
   ================================================================ */
.create-panel {
  position: fixed;
  inset: 0;
  z-index: var(--z-create-panel);
  margin: 0;
  padding: 0;
  border-radius: 0;
  background: none;
  border: none;
  display: flex;
  align-items: stretch;
  justify-content: center;
}
.create-panel.hidden {
  display: none;
}
.create-panel-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(15, 23, 42, 0.5);
}
.create-takeover {
  position: relative;
  z-index: 1;
  width: min(1040px, calc(100vw - 24px));
  height: calc(100vh - 24px);
  margin: 12px;
  border: 1px solid rgba(15, 23, 42, 0.1);
  border-radius: 24px;
  background: #ffffff;
  box-shadow: 0 32px 72px -20px rgba(15, 23, 42, 0.4), 0 2px 6px rgba(15, 23, 42, 0.06);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.create-panel:not(.hidden):not(.is-closing) .create-panel-backdrop {
  animation: createTakeoverFadeIn .18s ease both;
}
.create-panel:not(.hidden):not(.is-closing) .create-takeover {
  animation: createTakeoverSlideIn .18s ease both;
}
.create-panel.is-closing .create-panel-backdrop {
  animation: createTakeoverFadeOut .16s ease both;
}
.create-panel.is-closing .create-takeover {
  animation: createTakeoverSlideOut .16s ease both;
}
.create-takeover-topbar {
  position: sticky;
  top: 0;
  z-index: 2;
  padding: 26px 32px 20px;
  border-bottom: 1px solid #edf0f5;
  background: #ffffff;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.create-takeover-heading h2 {
  margin: 0;
  font-size: clamp(24px, 2.6vw, 30px);
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: -0.02em;
  color: #111827;
  text-wrap: balance;
}
.create-takeover-heading p {
  margin: 6px 0 0;
  color: #55606f;
  font-size: 14px;
  line-height: 1.5;
}
.create-takeover-close {
  flex: 0 0 auto;
  width: 40px;
  height: 40px;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  border: 1px solid #e0e4ee;
  background: #ffffff;
  color: #374151;
  cursor: pointer;
  transition: background-color 0.16s ease-out, border-color 0.16s ease-out, color 0.16s ease-out, transform 0.16s ease-out;
}
.create-takeover-close:hover {
  background: #f5f1ff;
  border-color: #cdbdf7;
  color: #6d28d9;
}
.create-takeover-close:active { transform: scale(0.94); }
.create-takeover-close:focus-visible {
  outline: 2px solid #7c3aed;
  outline-offset: 2px;
}
.create-takeover ::selection { background: rgba(124, 58, 237, 0.2); }
.create-takeover-topbar-actions {
  display: flex;
  align-items: center;
  gap: 10px;
}
/* "See examples" helper button — JS docks it into the active step-2 header */
.step-panel-header.je-host { position: relative; }
.step-panel-header.je-host > .create-job-examples-btn {
  position: absolute;
  top: 0;
  inset-inline-end: 0;
}
.create-job-examples-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  border: 1px solid #c7d2fe;
  border-radius: 999px;
  background: #eef2ff;
  color: #4f46e5;
  font-family: inherit;
  font-size: 13px;
  font-weight: 500;
  line-height: 1.4;
  cursor: pointer;
  transition: background .15s, border-color .15s, box-shadow .15s;
}
.create-job-examples-btn:hover,
.create-job-examples-btn[aria-expanded="true"] {
  background: #eef2ff;
  border-color: #c7d2fe;
  box-shadow: 0 2px 8px rgba(79, 70, 229, 0.15);
}
.create-job-examples-btn svg { flex: 0 0 auto; }
.create-job-examples-btn[hidden] { display: none; }
.create-job-examples-btn.je-pulsate {
  animation: jeExamplesBtnPulse 1.6s ease-in-out infinite;
}
@keyframes jeExamplesBtnPulse {
  0%, 100% {
    box-shadow: 0 0 0 0 rgba(79, 70, 229, 0.4);
    transform: scale(1);
  }
  50% {
    box-shadow: 0 0 0 10px rgba(79, 70, 229, 0);
    transform: scale(1.05);
  }
}
@media (prefers-reduced-motion: reduce) {
  .create-job-examples-btn.je-pulsate {
    animation: none;
    box-shadow: 0 0 0 2px rgba(79, 70, 229, 0.45);
  }
}

/* Examples popover (carousel) — JS positions it (fixed) under the button */
.job-examples-popover {
  position: fixed;
  top: 0;
  left: 0;
  z-index: calc(var(--z-create-nested-modal, 222000) + 200);
  width: min(330px, calc(100vw - 28px));
  background: #fff;
  border: 1px solid var(--brand-border, #e5e7eb);
  border-radius: 14px;
  box-shadow: 0 18px 44px rgba(15, 23, 42, 0.22);
  padding: 10px;
  animation: jePopIn .14s ease both;
}
.job-examples-popover[hidden] { display: none; }
@keyframes jePopIn { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: translateY(0); } }
.je-pop-arrow {
  position: absolute;
  top: -7px;
  left: 22px;
  width: 13px;
  height: 13px;
  background: #fff;
  border-top: 1px solid var(--brand-border, #e5e7eb);
  border-left: 1px solid var(--brand-border, #e5e7eb);
  transform: rotate(45deg);
}
.je-pop-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin: 0 2px 8px;
}
.je-pop-title { font-size: 13px; font-weight: 700; color: #111827; }
.je-pop-close {
  border: none; background: transparent; font-size: 20px; line-height: 1;
  color: #6b7280; cursor: pointer; padding: 0 4px;
}
.je-pop-close:hover { color: #111827; }
.je-pop-body { position: relative; }
.je-pop-track {
  display: flex;
  gap: 0;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  border-radius: 10px;
  background: #0b0b0f;
}
/* prev/next arrows overlaid on the carousel */
.je-pop-nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 2;
  width: 32px;
  height: 32px;
  border: none;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.55);
  color: #fff;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background .15s, opacity .15s;
}
.je-pop-nav:hover { background: rgba(0, 0, 0, 0.8); }
.je-pop-nav[disabled] { opacity: 0; pointer-events: none; }
.je-pop-nav-start { inset-inline-start: 8px; }
.je-pop-nav-end { inset-inline-end: 8px; }
/* chevrons point toward their edge in both writing directions */
html[dir="rtl"] .je-pop-nav svg { transform: scaleX(-1); }
.je-pop-track::-webkit-scrollbar { display: none; }
.je-pop-item {
  position: relative;
  flex: 0 0 100%;
  scroll-snap-align: center;
  aspect-ratio: 4 / 5;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #0b0b0f;
}
.je-pop-item img,
.je-pop-item video {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}
.je-pop-note-panel {
  margin-top: 8px;
  padding: 9px 11px;
  border-radius: 10px;
  border: 1px solid #e0e7ff;
  background: #f5f3ff;
  text-align: start;
}
.je-pop-note-panel[hidden] { display: none; }
.je-pop-note-label {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: #6366f1;
  margin-bottom: 4px;
}
.je-pop-note-text {
  font-size: 12px;
  font-weight: 500;
  line-height: 1.5;
  color: #374151;
  white-space: pre-wrap;
}
.je-pop-play {
  position: absolute;
  inset: 0;
  margin: auto;
  width: 48px;
  height: 48px;
  border: none;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.55);
  color: #fff;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}
.je-pop-play[hidden] { display: none; }
.je-pop-play svg { margin-inline-start: 2px; }
.je-pop-mute {
  position: absolute;
  inset-inline-end: 10px;
  bottom: 10px;
  z-index: 2;
  width: 36px;
  height: 36px;
  border: none;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.55);
  color: #fff;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  font-family: 'Tajawal', system-ui, -apple-system, 'Segoe UI', sans-serif;
}
.je-pop-mute:hover { background: rgba(0, 0, 0, 0.72); }
.je-pop-mute.is-muted { opacity: 0.92; }
.je-pop-dots {
  display: flex;
  justify-content: center;
  gap: 6px;
  margin-top: 8px;
  min-height: 8px;
}
.je-pop-dots:empty { display: none; }
.je-pop-dot {
  width: 7px; height: 7px; border-radius: 50%;
  background: #d1d5db; border: none; padding: 0; cursor: pointer;
  transition: background .15s, transform .15s;
}
.je-pop-dot.active { background: #4f46e5; transform: scale(1.2); }
.create-takeover-body {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  overflow-x: hidden;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
  scrollbar-width: thin;
  scrollbar-color: #d3d8e4 transparent;
}
#create-panel #wizard-nav {
  position: sticky;
  bottom: 0;
  z-index: 2;
  padding: 12px 0 max(12px, env(safe-area-inset-bottom));
  background: linear-gradient(to top, #ffffff 72%, rgba(255, 255, 255, 0));
}
.create-inner {
  max-width: 760px;
  margin: 0 auto;
  padding: 8px 18px 14px;
}
/* Step 0 gets the wider column its two-up tiles need */
.create-inner:has(#wizard-step-0.active) {
  max-width: 900px;
  padding: 28px 32px 32px;
}
.create-panel #create-form {
  min-height: calc(100vh - 176px);
}
body.create-takeover-open {
  position: fixed;
  inset-inline: 0;
  width: 100%;
  overflow: hidden;
}

/* Nested UI during create must stack above the takeover.
   !important beats #id z-index rules (e.g. #multi-brand-modal, #swipe-modal). */
body.create-takeover-open .modal.open,
body.create-takeover-open .modal.is-open,
body.create-takeover-open .modal:not(.hidden) {
  z-index: var(--z-create-nested-modal) !important;
}

body.create-takeover-open #image-modal.open,
body.create-takeover-open #video-preview-modal.open {
  z-index: var(--z-lightbox) !important;
}

body.create-takeover-open .modal.open.modal-stacked {
  z-index: calc(var(--z-create-nested-modal) + 100) !important;
}

/* Non-.modal shells appended to body during create (paywalls, tooltips, UGC helpers) */
body.create-takeover-open .admin-event-notification-modal,
body.create-takeover-open #subscription-trial-paywall-overlay,
body.create-takeover-open #no-plan-paywall-modal,
body.create-takeover-open .ugc-field-help-popover,
body.create-takeover-open .ugc-actor-preview-overlay,
body.create-takeover-open .style-tooltip-popup.style-tooltip-popup--fixed,
body.create-takeover-open .ugc-word-drag-confirm-backdrop,
body.create-takeover-open .voice-permission-overlay {
  z-index: calc(var(--z-create-nested-modal) + 50) !important;
}

body.create-takeover-open .ugc-word-pill--drag-ghost {
  z-index: calc(var(--z-create-nested-modal) + 60) !important;
}

@keyframes createTakeoverFadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}
@keyframes createTakeoverFadeOut {
  from { opacity: 1; }
  to { opacity: 0; }
}
@keyframes createTakeoverSlideIn {
  from { opacity: 0; transform: translateY(14px); }
  to { opacity: 1; transform: translateY(0); }
}
@keyframes createTakeoverSlideOut {
  from { opacity: 1; transform: translateY(0); }
  to { opacity: 0; transform: translateY(10px); }
}
@media (max-width: 900px) {
  /* Avoid position:fixed on body — iOS Safari can lose all touch handling after
     form submit + keyboard dismiss while the create wizard is open. */
  body.create-takeover-open {
    position: static;
    inset-inline: auto;
    width: auto;
    overflow: hidden;
    height: 100%;
  }
  html.create-takeover-scroll-lock,
  html.create-takeover-scroll-lock body {
    overflow: hidden;
    height: 100%;
  }
  .create-takeover {
    width: 100vw;
    height: 100vh;
    height: 100dvh;
    margin: 0;
    border-radius: 0;
    border-inline: 0;
  }
  .create-takeover-topbar {
    padding: calc(18px + env(safe-area-inset-top)) 16px 14px;
  }
  .create-inner:has(#wizard-step-0.active) {
    padding: 18px 14px 24px;
  }
  .create-takeover-body {
    padding-bottom: env(safe-area-inset-bottom);
  }
  #create-panel #wizard-nav {
    position: sticky;
    bottom: 0;
    z-index: 3;
    border-top: 1px solid rgba(229, 231, 235, 0.92);
    background: rgba(255, 255, 255, 0.98);
    backdrop-filter: blur(10px);
    box-shadow: 0 -10px 28px rgba(15, 23, 42, 0.08);
    padding: 12px 0 max(16px, env(safe-area-inset-bottom));
  }
  #create-panel #wizard-nav .button {
    min-height: 48px;
    padding: 0 18px;
    border-radius: 18px;
    border: 1px solid rgba(148, 163, 184, 0.16);
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.96) 0%, rgba(248, 250, 252, 0.96) 100%);
    box-shadow: 0 12px 28px rgba(15, 23, 42, 0.05);
    font-weight: 700;
  }
  #create-panel #wizard-nav #wizard-back,
  #create-panel #wizard-nav #wizard-cancel {
    color: #475569;
  }
  #create-panel #wizard-nav #wizard-next,
  #create-panel #wizard-nav #wizard-create {
    border-color: rgba(124, 58, 237, 0.18);
    background: linear-gradient(180deg, #8b5cf6 0%, #7c3aed 100%);
    box-shadow: 0 12px 28px rgba(124, 58, 237, 0.22);
    color: #ffffff;
  }
  .create-inner {
    padding: 8px 14px 16px;
  }
}

/* Screen reader only - hidden select */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0,0,0,0);
  white-space: nowrap;
  border: 0;
}

/* ===== Wizard Stepper ===== */
.wizard-steps {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0;
  margin-bottom: 32px;
}
.wizard-step {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 10px;
  border-radius: 8px;
  font-size: 13px;
  font-weight: 500;
  color: var(--brand-muted);
  cursor: pointer;
  transition: color 0.2s, background 0.2s;
  background: none;
  border: none;
  font-family: inherit;
  white-space: nowrap;
  line-height: 1;
}
.wizard-step:hover {
  color: var(--brand-ink);
  background: rgba(0,0,0,0.03);
}
.wizard-step.active {
  color: var(--brand-ink);
  font-weight: 500;
}
.wizard-step.completed {
  color: var(--brand-accent);
}
.wizard-step-num {
  display: inline-grid;
  place-items: center;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--brand-border);
  font-size: 11px;
  font-weight: 700;
  line-height: 1;
  padding-top: 1px; /* stronger optical centering for Cairo numerals */
  flex-shrink: 0;
  transition: background 0.2s, color 0.2s;
}
.wizard-step.active .wizard-step-num {
  background: var(--brand-accent);
  color: var(--brand-accent-text, #fff);
}
.wizard-step.completed .wizard-step-num {
  background: var(--brand-accent);
  color: var(--brand-accent-text, #fff);
}
.wizard-step-label {
  display: inline-flex;
  align-items: center;
  gap: 5px;
}
.wizard-step-type-name {
  font-size: 11px;
  font-weight: 400;
  color: var(--brand-muted);
  max-width: 100px;
  overflow: hidden;
  text-overflow: ellipsis;
}
.wizard-step-type-name:empty { display: none; }
.wizard-step-line {
  width: 32px;
  height: 1px;
  background: var(--brand-border);
  flex-shrink: 0;
  margin: 0 2px;
  transition: background 0.2s;
}
/* Tint line between completed steps */
.wizard-step.completed + .wizard-step-line {
  background: var(--brand-accent);
}

.wizard-steps.caption-wizard-steps .wizard-step {
  transition: color 0.2s ease, background 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
}

.wizard-steps.caption-wizard-steps .wizard-step-line {
  height: 2px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--brand-primary, #7c3aed) 18%, #d1d5db);
}

.wizard-steps.caption-wizard-steps .wizard-step.active {
  color: var(--brand-primary, #7c3aed);
}

.wizard-steps.caption-wizard-steps .wizard-step.active .wizard-step-num,
.wizard-steps.caption-wizard-steps .wizard-step.completed .wizard-step-num {
  box-shadow: 0 8px 18px rgba(124, 58, 237, 0.22);
}

/* UGC / product-scene / animated-video / video-wizard expanded step bar — compact + scrollable */
.wizard-steps.ugc-steps-expanded,
.wizard-steps.tc-steps-expanded,
.wizard-steps.product-scene-steps-expanded,
.wizard-steps.animated-video-steps-expanded,
.wizard-steps.video-wizard-steps-expanded {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  justify-content: flex-start;
  max-width: 100%;
  min-width: 0;
  padding-bottom: 4px;
}
.wizard-steps.ugc-steps-expanded::-webkit-scrollbar,
.wizard-steps.tc-steps-expanded::-webkit-scrollbar,
.wizard-steps.product-scene-steps-expanded::-webkit-scrollbar,
.wizard-steps.animated-video-steps-expanded::-webkit-scrollbar,
.wizard-steps.video-wizard-steps-expanded::-webkit-scrollbar { display: none; }
.wizard-steps.ugc-steps-expanded .wizard-step,
.wizard-steps.tc-steps-expanded .wizard-step,
.wizard-steps.product-scene-steps-expanded .wizard-step,
.wizard-steps.animated-video-steps-expanded .wizard-step,
.wizard-steps.video-wizard-steps-expanded .wizard-step {
  flex-shrink: 0;
}
.wizard-steps.ugc-steps-expanded .wizard-step-line,
.wizard-steps.tc-steps-expanded .wizard-step-line,
.wizard-steps.product-scene-steps-expanded .wizard-step-line,
.wizard-steps.animated-video-steps-expanded .wizard-step-line,
.wizard-steps.video-wizard-steps-expanded .wizard-step-line {
  flex-shrink: 0;
}

/* ===== Create Form — flex column so nav anchors to bottom ===== */
#create-form {
  display: flex;
  flex-direction: column;
  min-height: 0;
}

/* ===== Wizard Panels (single width for all) ===== */
.wizard-panel {
  display: none;
}
.wizard-panel.active {
  display: block;
  flex: 1 0 auto;
  padding-bottom: 16px;      /* guaranteed gap before nav border */
  animation: wizardPanelReveal 0.16s ease both;
}

@keyframes wizardPanelReveal {
  from {
    opacity: 0;
    transform: translateY(-8px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@media (prefers-reduced-motion: reduce) {
  .wizard-panel.active {
    animation: none;
  }
}

/* ===== Step Panel Headers (consistent across all steps) ===== */
.step-panel-header {
  margin-bottom: 20px;
}
.step-panel-title {
  font-size: 18px;
  font-weight: 700;
  color: var(--brand-ink);
  margin: 0;
  letter-spacing: -0.015em;
}
.step-panel-desc {
  font-size: 13px;
  color: var(--brand-muted, #6b7280);
  margin: -12px 0 16px;
  line-height: 1.5;
  line-height: 1.2;
}
.step-panel-subtitle {
  font-size: 12.5px;
  color: var(--brand-muted);
  margin: 4px 0 0;
  line-height: 1.4;
}

/* Header with action button (e.g. step 1 "Duplicate" button) */
.step-panel-header--with-action {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
}

/* ===== Wizard Navigation ===== */
.wizard-nav {
  display: flex;
  gap: 12px;
  justify-content: flex-end;
  align-items: center;
  margin-top: auto;          /* push to bottom of flex container */
  padding-top: 18px;
  padding-bottom: 24px;
}
html[dir="rtl"] .wizard-nav,
[dir="rtl"] .wizard-nav,
.rtl .wizard-nav {
  flex-direction: row-reverse;
}

.wizard-nav.caption-wizard-nav .button {
  transition: transform 0.18s ease, box-shadow 0.18s ease, background 0.18s ease, color 0.18s ease;
}

/* ===== Step 1 — Type Selection ===== */

/* ===== Step 0 Category Picker ===== */
.create-entry-layout {
  display: grid;
  gap: 32px;
  margin-top: 6px;
}
/* Step 1 keeps its framed stage; step 0 is flat so the tiles are the only surfaces */
.job-type-stage {
  position: relative;
  margin: 0;
  padding: 24px 24px 26px;
  border-radius: 24px;
  border: 1px solid rgba(148, 163, 184, 0.18);
  background:
    radial-gradient(circle at top right, rgba(124, 58, 237, 0.07), transparent 34%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.98) 0%, rgba(248, 250, 252, 0.98) 100%);
  box-shadow:
    0 18px 44px rgba(15, 23, 42, 0.06),
    inset 0 1px 0 rgba(255, 255, 255, 0.75);
}
html[dir="rtl"] .job-type-stage,
[dir="rtl"] .job-type-stage,
.rtl .job-type-stage {
  background:
    radial-gradient(circle at top left, rgba(124, 58, 237, 0.07), transparent 34%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.98) 0%, rgba(248, 250, 252, 0.98) 100%);
}
.job-type-stage-head {
  max-width: 760px;
  margin-bottom: 20px;
}
.job-type-stage .step-panel-title {
  font-size: clamp(24px, 2.4vw, 29px);
  line-height: 1.1;
  letter-spacing: -0.03em;
}
.job-type-stage .step-panel-desc {
  margin: 10px 0 0;
  max-width: 640px;
  font-size: 14px;
  line-height: 1.6;
  color: #64748b;
}

.create-choice-stage {
  margin: 0;
  padding: 0;
}
.create-stage-title {
  margin: 0 0 12px;
  font-size: 16px;
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: -0.01em;
  color: #111827;
}
.create-category-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
}
.create-category-card {
  --tone: #7c3aed;
  --tone-soft: #f3eeff;
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  padding: 0;
  overflow: hidden;
  border-radius: 20px;
  border: 1px solid #e6e8f0;
  background: #ffffff;
  color: #111827;
  cursor: pointer;
  text-align: start;
  font-family: 'Tajawal', 'Cairo', system-ui, -apple-system, 'Segoe UI', sans-serif;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
  transition: border-color 0.2s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.25s cubic-bezier(0.16, 1, 0.3, 1), transform 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}
.create-category-card[data-category="video"] { --tone: #db2777; --tone-soft: #fdedf5; }
.create-category-card[data-category="content_publish"] { --tone: #d97706; --tone-soft: #fef3e0; }
.create-category-card[data-category="automations"] { --tone: #0f8f83; --tone-soft: #e3f6f3; }
.create-category-card[data-category="voice"] { --tone: #2563eb; --tone-soft: #e8f0fe; }
.create-category-card:hover {
  transform: translateY(-3px);
  border-color: color-mix(in srgb, var(--tone) 38%, #e6e8f0);
  box-shadow: 0 18px 32px -16px rgba(15, 23, 42, 0.28), 0 2px 4px rgba(15, 23, 42, 0.04);
}
.create-category-card:active {
  transform: translateY(-1px) scale(0.99);
}
.create-category-card:focus-visible,
.create-quick-action:focus-visible {
  outline: 2px solid #7c3aed;
  outline-offset: 3px;
}
.create-category-card.selected {
  border-color: var(--tone);
  box-shadow: 0 0 0 1px var(--tone), 0 18px 32px -16px rgba(15, 23, 42, 0.28);
}
.ccc-art {
  display: block;
  padding: 10px 12px 0;
  color: var(--tone);
  background-color: var(--tone-soft);
  background-image: radial-gradient(circle, color-mix(in srgb, var(--tone) 22%, transparent) 1px, transparent 1.4px);
  background-size: 14px 14px;
  border-bottom: 1px solid color-mix(in srgb, var(--tone) 14%, #ffffff);
}
.ccc-art svg {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 320 / 140;
  overflow: visible;
}
.ccc-art-front,
.ccc-art-back {
  transition: transform 0.45s cubic-bezier(0.16, 1, 0.3, 1);
  transform-box: fill-box;
  transform-origin: center;
}
.create-category-card:hover .ccc-art-front { transform: translateY(-4px); }
.create-category-card:hover .ccc-art-back { transform: translateY(2px) scale(1.04); }
.ccc-copy {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 16px 64px 20px 20px;
  min-width: 0;
}
html[dir="rtl"] .ccc-copy,
[dir="rtl"] .ccc-copy,
.rtl .ccc-copy {
  padding: 16px 20px 20px 64px;
}
.create-category-title {
  font-size: 21px;
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: -0.01em;
  color: #111827;
}
.create-category-desc {
  font-size: 14px;
  line-height: 1.5;
  color: #55606f;
  text-wrap: pretty;
}
.ccc-go {
  position: absolute;
  inset-inline-end: 16px;
  bottom: 18px;
  width: 34px;
  height: 34px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  border: 1px solid #e0e4ee;
  background: #ffffff;
  color: #111827;
  transition: background-color 0.2s ease-out, color 0.2s ease-out, border-color 0.2s ease-out, transform 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}
html[dir="rtl"] .ccc-go svg,
[dir="rtl"] .ccc-go svg,
.rtl .ccc-go svg {
  transform: scaleX(-1);
}
.create-category-card:hover .ccc-go {
  background: var(--tone);
  border-color: var(--tone);
  color: #ffffff;
  transform: translateX(3px);
}
html[dir="rtl"] .create-category-card:hover .ccc-go,
[dir="rtl"] .create-category-card:hover .ccc-go,
.rtl .create-category-card:hover .ccc-go {
  transform: translateX(-3px);
}
.create-category-card.selected .ccc-go {
  background: var(--tone);
  border-color: var(--tone);
  color: #ffffff;
}

/* Most used: one quiet panel of shortcuts split by hairlines, not a second grid of cards.
   Each icon takes the colour of its parent category above (data-category, same tones as the cards). */
.create-quick-start-actions {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1px;
  overflow: hidden;
  border: 1px solid #e6e8f0;
  border-radius: 16px;
  background: #edf0f5;
}
.create-quick-action {
  --tone: #7c3aed;
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 52px;
  padding-block: 0;
  padding-inline: 16px 14px;
  border: 0;
  border-radius: 0;
  background: #ffffff;
  color: #111827;
  font-family: 'Tajawal', 'Cairo', system-ui, -apple-system, 'Segoe UI', sans-serif;
  font-size: 14px;
  font-weight: 500;
  text-align: start;
  cursor: pointer;
  transition: background-color 0.18s ease-out, color 0.18s ease-out;
}
.create-quick-action[data-category="video"] { --tone: #db2777; }
.create-quick-action[data-category="content_publish"] { --tone: #d97706; }
.create-quick-action[data-category="automations"] { --tone: #0f8f83; }
.create-quick-action[data-category="voice"] { --tone: #2563eb; }
.create-quick-action:hover { background: #f8f7fc; }
.create-quick-action:focus-visible { outline-offset: -3px; }
.create-quick-action:active { background: #f3eeff; }
.create-quick-action-icon {
  flex: 0 0 auto;
  width: 20px;
  height: 20px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--tone);
}
.create-quick-action-icon svg { width: 20px; height: 20px; }
.create-quick-action-label {
  flex: 1 1 auto;
  min-width: 0;
  line-height: 1.3;
}
.create-quick-action-out {
  flex: 0 0 auto;
  color: #8a93a3;
  transition: color 0.18s ease-out, transform 0.18s ease-out;
}
.create-quick-action:hover .create-quick-action-out { color: var(--tone); transform: translate(2px, -2px); }
html[dir="rtl"] .create-quick-action-out,
[dir="rtl"] .create-quick-action-out,
.rtl .create-quick-action-out {
  transform: scaleX(-1);
}
html[dir="rtl"] .create-quick-action:hover .create-quick-action-out,
[dir="rtl"] .create-quick-action:hover .create-quick-action-out,
.rtl .create-quick-action:hover .create-quick-action-out { transform: scaleX(-1) translate(2px, -2px); }

/* Help line: shared by step 0 and step 1 */
.create-help-strip {
  padding-top: 18px;
  border-top: 1px solid #edf0f5;
  overflow: visible;
}
.create-help-strip--step1 {
  margin-top: 4px;
}
/* A tip, not a control: a quiet info mark and one sentence, nothing that looks pressable. */
.create-help-strip-content {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  width: 100%;
  padding: 0;
  border: 0;
  background: none;
}
.create-help-strip-icon {
  flex: 0 0 auto;
  display: inline-flex;
  width: 20px;
  height: 20px;
  margin-top: 1px;
  color: #6b7280;
}
.create-help-strip-icon svg { width: 20px; height: 20px; }
.create-help-strip-body {
  min-width: 0;
  flex: 1 1 auto;
}
.create-help-strip-title {
  font-family: 'Tajawal', 'Cairo', system-ui, -apple-system, 'Segoe UI', sans-serif;
  font-size: 14px;
  font-weight: 700;
  color: #111827;
  line-height: 1.4;
}
.create-help-strip-desc {
  margin-top: 2px;
  font-family: 'Tajawal', 'Cairo', system-ui, -apple-system, 'Segoe UI', sans-serif;
  font-size: 14px;
  line-height: 1.5;
  color: #55606f;
  max-width: 62ch;
}

/* One authored moment: tiles and shortcuts rise in on entering step 0 */
@keyframes cccRise {
  from { opacity: 0; transform: translateY(12px); }
  to { opacity: 1; transform: translateY(0); }
}
#wizard-step-0.active .create-category-card,
#wizard-step-0.active .create-quick-start-actions {
  animation: cccRise 0.55s cubic-bezier(0.16, 1, 0.3, 1) both;
}
#wizard-step-0.active .create-category-card:nth-child(2) { animation-delay: 60ms; }
#wizard-step-0.active .create-category-card:nth-child(3) { animation-delay: 120ms; }
#wizard-step-0.active .create-category-card:nth-child(4) { animation-delay: 180ms; }
#wizard-step-0.active .create-quick-start-actions { animation-delay: 260ms; }

/* The types inside a category rise in one after another when it opens (fill backwards keeps hover lifts working). */
#wizard-step-1.active .job-type-grid > .job-type-card { animation: cccRise 0.5s cubic-bezier(0.16, 1, 0.3, 1) backwards; }
#wizard-step-1.active .job-type-grid > .job-type-card:nth-child(2) { animation-delay: 45ms; }
#wizard-step-1.active .job-type-grid > .job-type-card:nth-child(3) { animation-delay: 90ms; }
#wizard-step-1.active .job-type-grid > .job-type-card:nth-child(4) { animation-delay: 135ms; }
#wizard-step-1.active .job-type-grid > .job-type-card:nth-child(5) { animation-delay: 180ms; }
#wizard-step-1.active .job-type-grid > .job-type-card:nth-child(6) { animation-delay: 225ms; }
#wizard-step-1.active .job-type-grid > .job-type-card:nth-child(7) { animation-delay: 270ms; }
#wizard-step-1.active .job-type-grid > .job-type-card:nth-child(8) { animation-delay: 315ms; }
#wizard-step-1.active .job-type-grid > .job-type-card:nth-child(9) { animation-delay: 360ms; }
#wizard-step-1.active .job-type-grid > .job-type-card:nth-child(10) { animation-delay: 405ms; }
#wizard-step-1.active .job-type-grid > .job-type-card:nth-child(11) { animation-delay: 450ms; }
#wizard-step-1.active .job-type-grid > .job-type-card:nth-child(12) { animation-delay: 495ms; }

@media (prefers-reduced-motion: reduce) {
  #wizard-step-1.active .job-type-grid > .job-type-card,
  #wizard-step-0.active .create-category-card,
  #wizard-step-0.active .create-quick-start-actions { animation: none; }
  .create-category-card,
  .ccc-art-front,
  .ccc-art-back,
  .ccc-go { transition: none; }
  .create-category-card:hover { transform: none; }
}

@media (max-width: 900px) {
  .create-panel #create-form {
    min-height: auto;
  }
  .job-type-stage {
    padding: 20px 16px 18px;
    border-radius: 20px;
  }
  .create-entry-layout {
    gap: 26px;
  }
  .create-quick-start-actions {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .job-type-grid,
  .job-type-grid.grid-compact {
    grid-template-columns: 1fr;
    max-width: none;
  }
}
@media (max-width: 640px) {
  .create-category-grid {
    gap: 10px;
  }
  .ccc-art {
    padding: 6px 8px 0;
  }
  .ccc-copy,
  html[dir="rtl"] .ccc-copy,
  [dir="rtl"] .ccc-copy,
  .rtl .ccc-copy {
    padding: 10px 12px 14px;
    gap: 2px;
  }
  .create-category-title { font-size: 16px; }
  .create-category-desc { font-size: 12px; line-height: 1.4; }
  .ccc-go { display: none; }
  .create-category-card { border-radius: 16px; }
}

/* ===== Job Type Sections ===== */
.job-type-section {
  margin-bottom: 18px;
}
.job-type-section:last-child {
  margin-bottom: 0;
}

/* ===== Job Type Grid ===== */
.job-type-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
}
/* Adaptive: fewer items → 2-col centered */
.job-type-grid.grid-compact {
  grid-template-columns: repeat(2, 1fr);
  max-width: 580px;
}

/* ===== Job Type Card ===== */
.job-type-card {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  padding: 16px;
  border-radius: 20px;
  border: 1px solid rgba(148, 163, 184, 0.18);
  background: linear-gradient(180deg, #ffffff 0%, #fbfcff 100%);
  box-shadow: 0 10px 24px rgba(15, 23, 42, 0.06);
  cursor: pointer;
  transition: all 0.2s cubic-bezier(.4,0,.2,1);
  font-family: inherit;
  font-size: inherit;
  color: var(--brand-ink);
  text-align: start;
  position: relative;
}
.job-type-card:hover {
  border-color: rgba(124, 58, 237, 0.22);
  box-shadow: 0 18px 36px rgba(15, 23, 42, 0.1);
  transform: translateY(-3px);
}
.job-type-card.selected {
  border-color: var(--brand-accent);
  box-shadow: 0 0 0 1px rgba(124, 58, 237, 0.14), 0 22px 44px rgba(124, 58, 237, 0.15);
  background: linear-gradient(180deg, rgba(124, 58, 237, 0.08) 0%, rgba(255, 255, 255, 0.99) 38%, rgba(248, 250, 252, 0.98) 100%);
}
.job-type-card.selected::after {
  content: '';
  position: absolute;
  top: 10px;
  inset-inline-end: 10px;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--brand-accent);
  background-image: url("data:image/svg+xml,%3Csvg width='10' height='10' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round' xmlns='http://www.w3.org/2000/svg'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: center;
  background-size: 10px;
}

/* ===== Card Icon ===== */
.jtc-icon {
  width: 34px;
  height: 34px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 8px;
  background: rgba(147,51,234,0.06);
  flex-shrink: 0;
  color: var(--brand-accent);
  transition: all 0.2s;
}
.jtc-icon svg {
  width: 18px;
  height: 18px;
}
.job-type-card:hover .jtc-icon {
  background: rgba(147,51,234,0.10);
}
.job-type-card.selected .jtc-icon {
  background: var(--brand-accent);
  color: #fff;
}

/* ===== Card Text ===== */
.jtc-text {
  display: flex;
  flex-direction: column;
  gap: 1px;
  min-width: 0;
  padding-top: 1px;
}
.jtc-title {
  font-weight: 500;
  font-size: 13px;
  line-height: 1.3;
  color: var(--brand-ink);
}
.job-type-card[data-redirect] .jtc-title {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}
.job-type-card[data-redirect] .jtc-title::after {
  content: "↗";
  font-size: 0.82em;
  line-height: 1;
  opacity: 0.7;
  font-weight: 700;
}
.jtc-desc {
  font-size: 11.5px;
  color: var(--brand-muted);
  line-height: 1.35;
}

/* ===== Style Grid Collapse ===== */
.brief-style-grid.collapsed .brief-style-option:not([data-default]) {
  display: none !important;
}
/* "More" card inside the style grid */
.style-more-card {
  border: 1.5px dashed var(--brand-border) !important;
  background: transparent !important;
  color: var(--brand-muted);
  cursor: pointer;
  transition: border-color 0.15s, color 0.15s;
}
.style-more-card:hover {
  border-color: var(--brand-accent) !important;
  color: var(--brand-accent);
}
.style-more-card .brief-style-emoji {
  font-size: 18px;
  opacity: 0.6;
}
.style-more-card.expanded {
  border-style: solid !important;
}
.style-more-card.expanded .brief-style-emoji::before {
  content: '−';
}

/* ===== Brand Accent Contrast (uses --brand-accent-text synced from --brand-on-primary) ===== */

.nav-credits {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.credit-pill {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 16px;
  height: 36px;
  border-radius: 12px;
  background: color-mix(in srgb, var(--brand-primary, #7c3aed) 6%, #ffffff);
  border: 1px solid color-mix(in srgb, var(--brand-primary, #7c3aed) 25%, transparent);
  font-weight: 500;
  position: relative;
  box-sizing: border-box;
}

.credit-pill::after {
  content: attr(data-tooltip);
  position: absolute;
  left: 50%;
  top: calc(100% + 8px);
  transform: translate(-50%, 4px);
  background: #111827;
  color: #ffffff;
  font-size: 13px;
  line-height: 1.45;
  padding: 8px 10px;
  border-radius: 8px;
  max-width: 320px;
  min-width: 140px;
  white-space: normal;
  text-align: center;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.1s ease, transform 0.1s ease;
  z-index: 5;
  box-shadow: 0 8px 20px rgba(17, 24, 39, 0.2);
}

.credit-pill::before {
  content: '';
  position: absolute;
  left: 50%;
  top: calc(100% + 2px);
  transform: translateX(-50%);
  border: 6px solid transparent;
  border-bottom-color: #111827;
  opacity: 0;
  transition: opacity 0.1s ease;
  pointer-events: none;
  z-index: 5;
}

.credit-pill:hover::after,
.credit-pill:focus-visible::after,
.credit-pill:hover::before,
.credit-pill:focus-visible::before {
  opacity: 1;
  transform: translate(-50%, 8px);
}

.credit-icon {
  width: 16px;
  height: 16px;
  color: var(--brand-primary);
  opacity: 0.6;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.credit-value {
  font-size: 14px;
  font-weight: 500;
  color: #111827;
  line-height: 1.25;
  display: inline-flex;
  align-items: center;
  min-height: 1.25em;
}

.credit-bump {
  display: inline-block;
  line-height: 1.25;
  color: inherit;
  will-change: transform, opacity;
  animation: creditBumpIn 380ms cubic-bezier(0.2, 0.85, 0.2, 1);
}

.credit-bump-up {
  --credit-bump-shift: 6px;
}

.credit-bump-down {
  --credit-bump-shift: -6px;
}

@keyframes creditBumpIn {
  0% {
    opacity: 0;
    transform: translateY(var(--credit-bump-shift, 0)) scale(0.88);
  }
  50% {
    opacity: 1;
    transform: translateY(0) scale(1.15);
  }
  100% {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

.credit-pill-burst {
  animation-duration: 460ms;
  animation-fill-mode: both;
  animation-timing-function: cubic-bezier(0.2, 0.9, 0.2, 1);
}

.credit-pill-burst-up {
  animation-name: creditPillBurstUp;
}

.credit-pill-burst-down {
  animation-name: creditPillBurstDown;
}

.credit-pill-burst .credit-icon {
  animation: creditIconPulse 420ms cubic-bezier(0.2, 0.9, 0.2, 1);
}

@keyframes creditPillBurstUp {
  0% {
    transform: translateY(0) scale(1);
    box-shadow: 0 0 0 rgba(0, 0, 0, 0);
  }
  45% {
    transform: translateY(-2px) scale(1.05);
    box-shadow: 0 10px 22px color-mix(in srgb, var(--brand-primary, #7c3aed) 28%, transparent);
  }
  100% {
    transform: translateY(0) scale(1);
    box-shadow: 0 0 0 rgba(0, 0, 0, 0);
  }
}

@keyframes creditPillBurstDown {
  0% {
    transform: translateY(0) scale(1);
    box-shadow: 0 0 0 rgba(0, 0, 0, 0);
  }
  45% {
    transform: translateY(2px) scale(1.05);
    box-shadow: 0 10px 22px color-mix(in srgb, var(--brand-primary, #7c3aed) 28%, transparent);
  }
  100% {
    transform: translateY(0) scale(1);
    box-shadow: 0 0 0 rgba(0, 0, 0, 0);
  }
}

@keyframes creditIconPulse {
  0% { transform: scale(1); opacity: 0.6; }
  50% { transform: scale(1.25); opacity: 0.95; }
  100% { transform: scale(1); opacity: 0.6; }
}

.credit-secondary {
  opacity: 0.5;
  font-weight: 500;
}

.sidebar-ambassador-card {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 11px 10px 9px;
  border-radius: 12px;
  background: var(--brand-card, #ffffff);
  border: 1px solid color-mix(in srgb, var(--brand-border, #e5e7eb) 82%, transparent);
  box-shadow: none;
}

.sidebar-ambassador-headline {
  display: flex;
  align-items: center;
  gap: 6px;
  justify-content: flex-start;
}

.sidebar-ambassador-headline-icon {
  width: 16px;
  height: 16px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--brand-primary, #7c3aed);
  background: color-mix(in srgb, var(--brand-primary, #7c3aed) 10%, #ffffff);
  border-radius: 999px;
  flex-shrink: 0;
  font-size: 10px;
  font-weight: 700;
  line-height: 1;
}

.sidebar-ambassador-title {
  font-size: 15px;
  line-height: 1.2;
  font-weight: 700;
  color: #111827;
}

.sidebar-ambassador-subtitle {
  font-size: 12px;
  line-height: 1.35;
  color: #6b7280;
}

.sidebar-ambassador-example {
  font-size: 11px;
  line-height: 1.3;
  color: #9ca3af;
}

.button.sidebar-ambassador-cta {
  width: 100%;
  min-height: 32px;
  margin-top: 2px;
  border-radius: 9px;
  padding: 0 11px;
  font-size: 12px;
  background: color-mix(in srgb, var(--brand-primary, #7c3aed) 14%, #ffffff);
  border-color: color-mix(in srgb, var(--brand-primary, #7c3aed) 26%, #ffffff);
  color: var(--brand-primary, #7c3aed);
}

.button.sidebar-ambassador-cta:hover:not(:disabled) {
  background: color-mix(in srgb, var(--brand-primary, #7c3aed) 18%, #ffffff);
  border-color: color-mix(in srgb, var(--brand-primary, #7c3aed) 32%, #ffffff);
  color: color-mix(in srgb, var(--brand-primary, #7c3aed) 88%, #1f2937);
}

.sidebar-ambassador-status {
  min-height: 14px;
  font-size: 11px;
  line-height: 1.3;
  color: var(--brand-primary, #7c3aed);
  opacity: 0;
  transition: opacity 0.15s ease;
}

.sidebar-ambassador-status.is-visible {
  opacity: 1;
}

.sidebar-ambassador-link {
  align-self: flex-start;
  font-size: 11px;
  line-height: 1.2;
  color: #6b7280;
  text-decoration: none;
}

.sidebar-ambassador-link:hover {
  color: var(--brand-primary, #7c3aed);
  text-decoration: underline;
}

.admin-shell .sidebar-ambassador-card {
  display: none;
}

.sidebar-footer {
  margin-top: auto;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.sidebar-footer .select,
.sidebar-footer .button.link {
  color: #111827;
}

.sidebar-footer .lang-picker {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 10px;
  background: #ffffff;
  border: 1px solid #e5e7eb;
  border-radius: 10px;
  position: relative;
}

.sidebar-footer .lang-icon {
  color: #6b7280;
  flex-shrink: 0;
}

.sidebar-footer .lang-picker .lang-select {
  background: transparent !important;
  border: none !important;
  padding: 0 !important;
  color: inherit;
  box-shadow: none !important;
  border-radius: 0 !important;
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
}

/* Mobile fallback: custom language menu to avoid native select popup misplacement */
.sidebar-footer .lang-picker.mobile-lang-picker .lang-select {
  position: absolute;
  width: 0;
  height: 0;
  opacity: 0;
  pointer-events: none;
  min-width: 0;
}

.sidebar-footer .lang-picker .lang-mobile-trigger {
  display: none;
  border: none;
  background: transparent;
  color: #111827;
  font: inherit;
  font-size: 12px;
  font-weight: 500;
  line-height: 1.1;
  cursor: pointer;
  padding: 0;
  min-width: 40px;
  text-align: start;
}

.sidebar-footer .lang-picker.mobile-lang-picker .lang-mobile-trigger {
  display: inline-block;
  flex: 1 1 auto;
  width: 100%;
}

.sidebar-footer .lang-picker.mobile-lang-picker {
  cursor: pointer;
}

.sidebar-footer .lang-picker .lang-mobile-menu {
  display: none;
  position: absolute;
  inset-inline-start: 0;
  inset-inline-end: 0;
  bottom: calc(100% + 8px);
  background: #ffffff;
  border: 1px solid #d1d5db;
  border-radius: 10px;
  box-shadow: 0 10px 24px rgba(15, 23, 42, 0.18);
  padding: 4px;
  z-index: 70;
}

.sidebar-footer .lang-picker .lang-mobile-menu.open {
  display: grid;
  gap: 2px;
}

.sidebar-footer .lang-picker .lang-mobile-option {
  border: none;
  background: transparent;
  color: #111827;
  font: inherit;
  font-weight: 500;
  text-align: start;
  border-radius: 8px;
  padding: 8px 10px;
  cursor: pointer;
}

.sidebar-footer .lang-picker .lang-mobile-option:hover,
.sidebar-footer .lang-picker .lang-mobile-option.active {
  background: color-mix(in srgb, var(--brand-primary, #7c3aed) 10%, #ffffff);
}

.sidebar-footer .select {
  background: #ffffff;
  border: 1px solid #e5e7eb;
  max-width: 100%;
  box-sizing: border-box;
}

.sidebar-footer .button.link {
  background: #f3f4f6;
  border: 1px solid #e5e7eb;
}

.footer-links {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  font-size: 11px;
  color: #9ca3af;
}

.footer-links a {
  color: #6b7280;
  text-decoration: none;
  transition: color 0.15s;
}

.footer-links a:hover {
  color: var(--brand-primary, #B8860B);
  text-decoration: underline;
}

.footer-sep {
  color: #d1d5db;
}

.sidebar-overlay {
  position: fixed;
  inset: 0;
  background: rgba(15, 23, 42, 0.4);
  opacity: 0;
  pointer-events: none;
  display: none;
  transition: opacity 0.2s ease;
  z-index: 40;
}

.mobile-credits {
  display: none;
  gap: 8px;
  align-items: center;
  max-width: 100%;
  overflow: visible;
  scrollbar-width: none;
}

.mobile-credits .credit-pill {
  padding: 4px 10px;
  height: 28px;
  border-radius: 8px;
  white-space: nowrap;
}

.mobile-credits .credit-value {
  font-size: 11px;
}

.mobile-credits .credit-icon {
  width: 14px;
  height: 14px;
}

.mobile-credits-more {
  padding: 4px 8px;
  font-size: 11px;
  line-height: 1;
  border-radius: 999px;
}

/* Make "all" match mobile credit pill size exactly */
.mobile-credits .mobile-credits-more.button {
  min-height: 28px;
  height: 28px;
  padding: 4px 10px;
  border-radius: 8px;
  font-size: 11px;
  font-weight: 500;
  line-height: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: color-mix(in srgb, var(--brand-primary, #7c3aed) 6%, #ffffff);
  border: 1px solid color-mix(in srgb, var(--brand-primary, #7c3aed) 25%, transparent);
  color: #374151;
  box-shadow: none;
}

.mobile-credits .mobile-credits-more.button:hover {
  background: color-mix(in srgb, var(--brand-primary, #7c3aed) 9%, #ffffff);
  border-color: color-mix(in srgb, var(--brand-primary, #7c3aed) 32%, transparent);
  color: #111827;
  transform: none;
}

.mobile-credits::-webkit-scrollbar {
  height: 0;
}

.mobile-credits::-webkit-scrollbar-thumb {
  background: transparent;
}

@media (max-width: 960px) {
  .app-header {
    padding: 12px 16px;
    gap: 8px;
  }

  .header-left {
    gap: 8px;
  }

  .header-actions {
    margin-left: 6px;
    gap: 6px;
  }

  .mobile-credits {
    gap: 6px;
  }

  .app-shell {
    display: block;
  }

  .app-content {
    margin-left: 0;
    margin-right: 0;
  }

  html[dir="rtl"] .app-content,
  [dir="rtl"] .app-content,
  .rtl .app-content {
    margin-left: 0;
    margin-right: 0;
  }

  .sidebar {
    position: fixed;
    left: 0;
    top: 0;
    width: 238px;
    max-width: min(88vw, 320px);
    transform: translateX(-100%);
    transition: transform 0.2s ease;
    z-index: 50;
    height: 100vh;
    max-height: 100vh;
    box-sizing: border-box;
    overflow-y: auto;
    overflow-x: hidden;
  }

  .rtl .sidebar {
    left: auto;
    right: 0;
    transform: translateX(100%);
  }

  .sidebar-close {
    display: inline-grid;
  }

  .job-details-card {
    position: static;
  }

  .sidebar-open .sidebar {
    transform: none;
  }

  /* Native select popovers can render off-position inside transformed parents on mobile.
     Keep sidebar untransformed while open for reliable language menu placement. */
  .sidebar-open .rtl .sidebar,
  html[dir="rtl"] .sidebar-open .sidebar,
  [dir="rtl"] .sidebar-open .sidebar {
    transform: none;
  }

  /* Sidebar language selector: force stable native rendering on mobile */
  .sidebar-footer .lang-picker .lang-select {
    appearance: auto;
    -webkit-appearance: menulist;
    -moz-appearance: menulist;
    font-size: 12px;
    font-weight: 500;
    line-height: 1.2;
    color: #111827;
  }

  .sidebar-footer .lang-picker .lang-select option {
    color: #111827;
    background: #ffffff;
  }

  .sidebar-open .sidebar-overlay {
    opacity: 1;
    pointer-events: auto;
  display: block;
  }

  .nav-credits {
    display: none;
  }

  .header-credits {
    display: none;
  }

  .mobile-credits {
    display: flex;
  }

  .header-actions {
    min-width: 0;
    flex: 1;
    justify-content: flex-end;
  }

  .user-greeting {
    display: none;
  }

  .user-name {
    font-size: 13px;
  }

  .user-chip {
    padding: 6px 10px;
    gap: 5px;
    min-width: 0;
    max-width: min(52vw, 240px);
  }

  .sidebar-header .brand-pill-name {
    font-size: 11px;
    line-height: 1.1;
  }
}

@media (min-width: 961px) {
  #nav-toggle {
    display: none;
  }
  .admin-shell #nav-toggle {
    display: inline-grid;
  }

  .nav-credits {
    display: none;
  }

  .sidebar-close {
    display: none !important;
  }

  #user-chip {
    display: inline-flex;
  }
}

a {
  color: inherit;
  text-decoration: none;
}

.page {
  min-height: 100vh;
  display: block;
  overflow-x: hidden;
}

.topbar {
  background: linear-gradient(135deg, var(--brand-primary), var(--brand-secondary));
  color: var(--brand-on-primary, var(--brand-accent));
  padding: 18px 28px;
  box-shadow: var(--shadow-soft);
  position: sticky;
  top: 0;
  z-index: 10;
}

.topbar-inner {
  max-width: 1120px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

.topbar-center {
  flex: 1;
  display: flex;
  justify-content: center;
}

.brand-switcher {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 8px;
  padding: 8px;
  border-radius: 10px;
  background: #fff;
  border: 1px solid #e5e7eb;
  box-shadow: 0 4px 12px rgba(0,0,0,0.08);
}

.brand-switcher .select {
  background: #ffffff;
  color: var(--brand-ink);
  border: 1px solid #e5e7eb;
  min-width: 0;
  height: 38px;
  border-radius: 8px;
  font-size: 13px;
}

.add-brand-button {
  width: 100%;
  height: 40px;
  font-size: 14px;
  font-weight: 700;
  display: inline-grid;
  place-items: center;
  align-self: stretch;
  margin-top: 2px;
  background: #111827;
  color: #ffffff;
  border: 1px solid rgba(17, 24, 39, 0.12);
  box-shadow: 0 10px 18px rgba(17, 24, 39, 0.18);
}

.add-brand-button:hover,
.create-cta:hover {
  background: #0f172a;
  color: #ffffff;
}

.header-pill {
  margin-left: 12px;
  background: rgba(255, 255, 255, 0.25);
  color: var(--brand-on-primary, var(--brand-accent));
  border: 1px solid rgba(255, 255, 255, 0.35);
}

.brand-switcher-logo {
  width: 30px;
  height: 30px;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.35);
  display: grid;
  place-items: center;
  overflow: hidden;
}

.brand-switcher-logo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.brand-switcher .select {
  min-width: 0;
}

.brand-lockup {
  display: flex;
  align-items: center;
  gap: 12px;
}

.brand-logo {
  width: 44px;
  height: 44px;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.15);
  display: grid;
  place-items: center;
  overflow: hidden;
}

.brand-logo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.brand-logo-placeholder {
  width: 44px;
  height: 44px;
  border-radius: 12px;
  background: linear-gradient(135deg, var(--brand-accent, #6366f1), #8b5cf6);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  font-weight: 700;
  letter-spacing: 0.02em;
}

.brand-title {
  font-weight: 700;
  font-size: 22px;
  letter-spacing: -0.4px;
}

.brand-subtitle {
  font-size: 13px;
  opacity: 0.85;
}

.topbar-actions {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  justify-content: flex-end;
}

.user-chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  border-radius: 8px;
  background: transparent;
  border: 1px solid transparent;
  color: var(--brand-on-primary, var(--brand-accent));
  font-weight: 700;
  text-decoration: none;
  position: relative;
  cursor: pointer;
  transition: color 150ms ease, border-color 150ms ease, background-color 150ms ease, box-shadow 150ms ease;
}

.app-header .user-chip {
  background: color-mix(in srgb, var(--brand-primary, #7c3aed) 6%, #ffffff);
  border-color: transparent;
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--brand-primary, #7c3aed) 25%, transparent);
  color: var(--brand-ink);
}

.app-header .user-avatar {
  background: color-mix(in srgb, var(--brand-primary, #7c3aed) 12%, #f3f4f6);
  color: var(--brand-primary, #7c3aed);
}

.user-chip-text {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.user-chip-row {
  display: inline-flex;
  align-items: center;
  gap: 5px;
}

.user-chip-streak {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 11px;
  font-weight: 700;
  color: #9a3412;
  background: linear-gradient(135deg, #fff7ed 0%, #fff 100%);
  border: 1px solid #fed7aa;
  border-radius: 999px;
  padding: 2px 7px;
  line-height: 1.1;
  white-space: nowrap;
}
.user-chip-streak-flame {
  line-height: 1;
}

.user-greeting {
  font-weight: 500;
  color: #6B7280;
}

.user-name {
  font-weight: 500;
  color: #111827;
}

html[lang="en"] #user-chip .user-greeting,
html[lang="en"] #user-chip .user-name {
  font-size: 85%;
}

.user-chip-edit {
  width: 12px;
  height: 12px;
  color: #9CA3AF;
  opacity: 0.6;
  flex-shrink: 0;
  transition: opacity 0.15s ease, transform 0.15s ease, color 0.15s ease;
}

.app-header .user-chip:hover {
  background: color-mix(in srgb, var(--brand-primary, #7c3aed) 9%, #ffffff);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--brand-primary, #7c3aed) 35%, transparent);
}

.app-header .user-chip:hover .user-name {
  color: #111827;
}

.user-chip:hover .user-chip-edit {
  opacity: 1;
  transform: scale(1.05);
  color: var(--brand-primary, #7c3aed);
}


.user-chip-caret {
  font-size: 0;
  line-height: 1;
  opacity: 0.75;
  margin-inline-start: 4px;
  display: inline-block;
  width: 10px;
}

.user-chip-caret::before {
  content: "→";
  font-size: 11px;
  line-height: 1;
}

.rtl .user-chip-caret {
  transform: none;
}

html[dir="rtl"] .user-chip-caret::before,
[dir="rtl"] .user-chip-caret::before,
.rtl .user-chip-caret::before {
  content: "←";
}

.app-header .user-chip .user-chip-edit {
  display: none;
}

.app-header .user-chip:active {
  background: color-mix(in srgb, var(--brand-primary, #7c3aed) 12%, #ffffff);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--brand-primary, #7c3aed) 42%, transparent);
}

/* ── User chip dropdown menu ── */
.user-chip-wrap {
  position: relative;
}
.user-chip-menu {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  z-index: 1200;
  min-width: 250px;
  background: #fff;
  border-radius: 14px;
  box-shadow: 0 8px 32px rgba(0,0,0,0.12), 0 0 0 1px rgba(0,0,0,0.04);
  padding: 6px;
  opacity: 0;
  transform: translateY(-4px);
  pointer-events: none;
  transition: opacity 0.15s ease, transform 0.15s ease;
}
html[dir="rtl"] .user-chip-menu {
  left: auto;
  right: 0;
}
.user-chip-menu.open {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}
.user-chip-menu-section {
  padding: 8px 10px 4px;
  font-size: 11px;
  font-weight: 500;
  color: #9ca3af;
  letter-spacing: 0.02em;
}
.user-chip-menu-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  border-radius: 10px;
  font-size: 14px;
  color: #1f2937;
  text-decoration: none;
  cursor: pointer;
  transition: background 0.1s ease;
}
.user-chip-menu-item:hover {
  background: #f3f4f6;
  text-decoration: none;
  color: #1f2937;
}
.user-chip-menu-icon {
  width: 20px;
  height: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 15px;
  flex-shrink: 0;
}
.user-chip-menu-brand {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  border-radius: 10px;
  font-size: 14px;
  color: #1f2937;
  cursor: pointer;
  text-decoration: none;
  transition: background 0.1s ease;
}
.user-chip-menu-brand:hover {
  background: #f3f4f6;
  text-decoration: none;
  color: #1f2937;
}
.user-chip-menu-brand-logo {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: var(--brand-primary, #7c3aed);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 11px;
  flex-shrink: 0;
  overflow: hidden;
}
.user-chip-menu-brand-logo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.user-chip-menu-brand-copy {
  margin-left: auto;
  opacity: 0.4;
  font-size: 12px;
  cursor: pointer;
}
.user-chip-menu-brand-copy:hover {
  opacity: 0.8;
}
.user-chip-menu-divider {
  height: 1px;
  background: #f0f0f0;
  margin: 4px 6px;
}

/* ── Profile layout with inner sidebar ── */
.profile-layout {
  display: flex;
  gap: 0;
  min-height: calc(100vh - 80px);
}
.profile-sidebar {
  width: 220px;
  flex-shrink: 0;
  padding: 24px 16px;
  border-right: 1px solid var(--border, #e6e8f0);
  display: flex;
  flex-direction: column;
  gap: 2px;
}
html[dir="rtl"] .profile-sidebar {
  border-right: none;
  border-left: 1px solid var(--border, #e6e8f0);
}
.profile-sidebar .profile-close {
  display: none;
}
.profile-nav-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  border: none;
  background: none;
  border-radius: 10px;
  font-size: 14px;
  font-weight: 500;
  color: #4b5563;
  cursor: pointer;
  transition: background 0.12s ease, color 0.12s ease;
  width: 100%;
  text-align: start;
  font-family: inherit;
}
.profile-nav-item:hover {
  background: #f3f4f6;
  color: #111827;
}
.profile-nav-item.active {
  background: color-mix(in srgb, var(--brand-primary, #7c3aed) 8%, #fff);
  color: var(--brand-primary, #7c3aed);
  font-weight: 500;
}
.profile-nav-icon {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
  opacity: 0.7;
}
.profile-nav-item.active .profile-nav-icon {
  opacity: 1;
}
.profile-content {
  flex: 1;
  padding: 24px 32px;
  min-width: 0;
  max-width: 860px;
}
.profile-tab {
  display: none;
}
.profile-tab.active {
  display: block;
}

/* Streak banner */
.streak-banner {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 14px 20px;
  background: linear-gradient(135deg, #fff7ed 0%, #fff 100%);
  border: 1px solid #fed7aa;
  border-radius: 14px;
  margin-bottom: 20px;
  margin-left: 0;
  margin-right: auto;
  max-width: 640px;
}
.streak-flame {
  font-size: 28px;
  line-height: 1;
}
.streak-info {
  flex: 1;
}
.streak-count {
  font-size: 18px;
  font-weight: 700;
  color: #ea580c;
}
.streak-label {
  font-size: 13px;
  color: #9a3412;
  margin-top: 2px;
}
/* Workspace stats cards */
.ws-stats-row {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
  margin: 20px 0;
}
.ws-stat-card {
  padding: 18px;
  border: 1.5px dashed #d1d5db;
  border-radius: 14px;
  text-align: center;
}
.ws-stat-label {
  font-size: 13px;
  color: #6b7280;
  margin-bottom: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
}
.ws-stat-label .ws-stat-help {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: #e5e7eb;
  color: #9ca3af;
  font-size: 10px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: help;
}
.ws-stat-value {
  font-size: 24px;
  font-weight: 700;
  border-radius: 8px;
  padding: 6px 16px;
  display: inline-block;
}
.ws-stat-value.blue {
  background: #dbeafe;
  color: #2563eb;
}
.ws-stat-value.green {
  background: #d1fae5;
  color: #059669;
}
.ws-stat-value.pink {
  background: #fce7f3;
  color: #db2777;
}

/* Contribution graph */
.contrib-section {
  margin: 24px 0;
}
.contrib-header {
  font-size: 13px;
  color: #6b7280;
  margin-bottom: 10px;
}
.contrib-graph {
  display: block;
  overflow-x: hidden;
  padding-bottom: 4px;
}
.contrib-horizontal-wrap {
  min-width: 0;
  width: 100%;
}
.contrib-days-row {
  display: flex;
  gap: 3px;
  direction: ltr;
}
.contrib-axis {
  position: relative;
  height: 16px;
  margin-top: 8px;
  direction: ltr;
}
html[dir="rtl"] .contrib-days-row,
html[dir="rtl"] .contrib-axis {
  direction: rtl;
}
.contrib-axis-label {
  position: absolute;
  transform: translateX(-50%);
  font-size: 10px;
  color: #6b7280;
  white-space: nowrap;
}
.contrib-axis-label.is-start {
  transform: translateX(0);
}
.contrib-axis-label.is-end {
  transform: translateX(-100%);
}
html[dir="rtl"] .contrib-axis-label.is-start {
  transform: translateX(-100%);
}
html[dir="rtl"] .contrib-axis-label.is-end {
  transform: translateX(0);
}
.contrib-week {
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.contrib-cell {
  width: 12px;
  height: 12px;
  flex: 1 1 0;
  max-width: 12px;
  border-radius: 2px;
  background: #ebedf0;
}
.contrib-cell.l1 { background: #9be9a8; }
.contrib-cell.l2 { background: #40c463; }
.contrib-cell.l3 { background: #30a14e; }
.contrib-cell.l4 { background: #216e39; }
.contrib-legend {
  display: flex;
  align-items: center;
  gap: 4px;
  justify-content: flex-end;
  margin-top: 6px;
  font-size: 11px;
  color: #6b7280;
}
.contrib-legend-cell {
  width: 12px;
  height: 12px;
  border-radius: 2px;
}

/* Profile workspace brand header */
.ws-brand-header {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-bottom: 4px;
}
.ws-brand-logo {
  width: 64px;
  height: 64px;
  border-radius: 16px;
  overflow: hidden;
  background: #f3f4f6;
  display: flex;
  align-items: center;
  justify-content: center;
}
.ws-brand-logo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.ws-brand-name-label {
  font-size: 13px;
  color: #6b7280;
}
.ws-brand-name {
  font-size: 18px;
  font-weight: 500;
  color: #111827;
  margin-top: 2px;
}

.integration-brand {
  padding: 16px;
}
.integration-brand + .integration-brand {
  margin-top: 10px;
}
.profile-integrations-desc {
  margin: 0 0 4px;
}
.profile-integrations-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-top: 12px;
}
.integration-brand-head {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 4px;
}
.integration-brand-logo {
  width: 36px;
  height: 36px;
  border-radius: 10px;
  background: #f3f4f6;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #6b7280;
  font-weight: 500;
  overflow: hidden;
}
.integration-brand-logo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.integration-brand-name {
  font-size: 15px;
  font-weight: 500;
  color: #111827;
}
.integration-row {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  padding: 16px 0;
  border-top: 1px solid #eef0f4;
}
.integration-row:first-child {
  border-top: none;
  padding-top: 8px;
}
.integration-row-main {
  min-width: 0;
  flex: 1;
}
.integration-row-title {
  font-size: 13px;
  font-weight: 500;
  color: var(--brand-muted, #6b7280);
  display: inline-flex;
  align-items: center;
  gap: 7px;
  line-height: 1.4;
}
.integration-row-value {
  font-size: 14px;
  font-weight: 400;
  color: #111827;
  margin-top: 6px;
  word-break: break-word;
  line-height: 1.5;
}
/* Snapchat: which business profile the brand posts as, when the account manages several. */
.integration-snap-picker {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin-top: 8px;
  color: var(--brand-muted, #6b7280);
  font-size: 14px;
}
.integration-snap-picker > span {
  white-space: nowrap;
}
.integration-snap-picker .select {
  flex: 1 1 160px;
  min-width: 0;
  min-height: 36px;
  max-width: 280px;
  font-size: 14px;
}
.integration-row-actions {
  display: inline-flex;
  gap: 8px;
  flex-shrink: 0;
  align-self: center;
  flex-wrap: wrap;
  justify-content: flex-end;
}
.integration-row-actions .button {
  min-height: 34px;
  font-size: 14px;
  font-weight: 500;
  padding: 0 14px;
}
.integration-row-telegram {
  align-items: stretch;
  border: 1px solid #dbeafe;
  border-radius: 16px;
  background: linear-gradient(180deg, #f8fbff 0%, #fff 100%);
  padding: 16px;
  margin-top: 14px;
}
.integration-row-telegram:first-child {
  border-top: 1px solid #dbeafe;
  padding-top: 16px;
}
.integration-row-telegram .integration-row-title {
  color: var(--brand-ink, #111827);
  font-size: 14px;
  font-weight: 700;
}
.integration-row-telegram .integration-row-value {
  color: #334155;
  font-size: 13px;
  margin-top: 8px;
}
.integration-platform-icon-telegram {
  width: 24px;
  height: 24px;
  background: #229ed9;
  color: #fff;
  box-shadow: 0 8px 18px rgba(34, 158, 217, 0.22);
}
.integration-platform-icon-telegram svg {
  width: 16px;
  height: 16px;
}
.integration-telegram-steps {
  margin: 10px 0 0;
  padding-inline-start: 20px;
  color: var(--brand-muted, #64748b);
  font-size: 13px;
  line-height: 1.65;
}
.integration-telegram-link-box,
.integration-telegram-connected {
  display: grid;
  gap: 6px;
  margin-top: 14px;
  padding: 12px 14px;
  border: 1px solid #c7d2fe;
  border-radius: 14px;
  background: #fff;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
}
.integration-telegram-link-box span,
.integration-telegram-connected span {
  color: var(--brand-muted, #64748b);
  font-size: 12px;
  font-weight: 700;
}
.integration-telegram-link-box code,
.integration-telegram-connected strong {
  display: block;
  direction: ltr;
  unicode-bidi: plaintext;
  color: #0f172a;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace;
  font-size: 14px;
  font-weight: 700;
  line-height: 1.45;
  word-break: break-all;
}
.integration-row-telegram .integration-row-actions {
  align-self: flex-end;
  padding-top: 6px;
}
.integration-row-telegram .integration-row-actions .button {
  min-height: 42px;
  border-radius: 12px;
  padding: 0 18px;
}

.integration-row-adly-whatsapp {
  align-items: stretch;
  border: 1px solid #d1fae5;
  border-radius: 16px;
  background: linear-gradient(180deg, #f3fdf7 0%, #fff 100%);
  padding: 16px;
  margin-top: 14px;
}
.integration-row-adly-whatsapp .integration-row-title {
  color: var(--brand-ink, #111827);
  font-size: 14px;
  font-weight: 700;
}
.integration-row-adly-whatsapp .integration-row-value {
  color: #334155;
  font-size: 13px;
  margin-top: 8px;
}
.integration-platform-icon-whatsapp {
  width: 24px;
  height: 24px;
  background: #25d366;
  color: #fff;
  box-shadow: 0 8px 18px rgba(37, 211, 102, 0.22);
}
.integration-platform-icon-whatsapp svg {
  width: 16px;
  height: 16px;
}
.integration-row-adly-whatsapp .integration-row-actions {
  align-self: flex-end;
  padding-top: 6px;
}
.integration-row-adly-whatsapp .integration-row-actions .button {
  min-height: 42px;
  border-radius: 12px;
  padding: 0 18px;
}
.integration-row-messaging-locked {
  opacity: 1;
}
.integration-row-messaging-locked .integration-row-value {
  color: var(--brand-muted, #64748b);
}

.profile-mcp-card {
  padding-top: 4px;
}
.profile-mcp-header {
  margin-bottom: 0;
  gap: 16px;
}
.profile-mcp-header > div:first-child {
  display: flex;
  flex-direction: column;
  gap: 10px;
  min-width: 0;
}
.profile-mcp-header .section-title {
  margin-bottom: 0;
  line-height: 1.35;
}
.profile-mcp-desc {
  margin: 0;
  line-height: 1.55;
}
.profile-mcp-setup {
  margin-top: 16px;
  margin-bottom: 4px;
}
.profile-mcp-setup-intro {
  margin: 0 0 10px;
  line-height: 1.55;
}
.profile-mcp-setup-steps {
  margin: 0;
  padding-inline-start: 20px;
  color: var(--brand-muted, #6b7280);
  font-size: 14px;
  line-height: 1.6;
}
.profile-mcp-setup-steps li + li {
  margin-top: 6px;
}
.profile-mcp-form {
  display: flex;
  flex-direction: column;
  gap: 16px;
  margin-top: 18px;
}
.profile-mcp-form .field label,
.mcp-token-brand-field label {
  font-size: 13px;
  font-weight: 500;
  color: var(--brand-muted, #6b7280);
}
.profile-mcp-card .select,
.profile-mcp-card .field select {
  font-weight: 400;
}
.profile-mcp-pending {
  margin-top: 16px;
  padding: 16px;
  border: 1px solid #dbeafe;
  border-radius: 12px;
  background: #eff6ff;
}
.profile-mcp-pending-title {
  margin: 0 0 8px;
  font-size: 15px;
  font-weight: 700;
  color: var(--brand-text, #111827);
}
.profile-mcp-pending-desc {
  margin: 0;
  font-size: 14px;
  line-height: 1.5;
}
.profile-mcp-new-key {
  margin-top: 18px;
  padding: 16px;
  border: 1px solid #eef0f4;
  border-radius: 12px;
  background: #fafbfc;
}
.profile-mcp-new-key-title {
  margin: 0 0 16px;
  font-size: 14px;
  font-weight: 500;
  line-height: 1.5;
  color: var(--brand-text, #111827);
}
.profile-mcp-new-key .field + .field {
  margin-top: 16px;
}
.profile-mcp-new-key .field label {
  display: block;
  margin-bottom: 6px;
  font-size: 13px;
  font-weight: 500;
  color: var(--brand-muted, #6b7280);
}
.profile-mcp-new-key .field input[readonly],
.profile-mcp-new-key .field textarea[readonly] {
  background: #fff;
  color: var(--brand-text, #111827);
}
.profile-mcp-copy-row {
  display: flex;
  align-items: center;
  gap: 8px;
}
.profile-mcp-copy-row input {
  flex: 1;
}
.profile-mcp-paste {
  width: 100%;
  background: #fff;
  color: var(--brand-text, #111827);
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  font-size: 13px;
  line-height: 1.5;
}
.profile-mcp-copy-message-btn {
  margin-top: 10px;
}
.profile-mcp-option + .profile-mcp-option {
  margin-top: 20px;
}
.profile-mcp-option-help {
  margin: 0 0 10px;
  font-size: 13px;
  line-height: 1.55;
}
.profile-mcp-plan-gate {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 12px;
  margin-top: 16px;
  padding: 16px;
  border: 1px solid #eef0f4;
  border-radius: 12px;
  background: #fafbfc;
}
.profile-mcp-token-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.profile-mcp-token-list:not(:has(.mcp-token-item)) {
  margin-top: 8px;
}
.profile-mcp-token-list:has(.mcp-token-item) {
  margin-top: 20px;
  padding-top: 20px;
  border-top: 1px solid #eef0f4;
}
.mcp-token-item {
  padding: 14px 16px;
  border: 1px solid #eef0f4;
  border-radius: 12px;
  background: #fafbfc;
}
.mcp-token-item.is-revoked {
  opacity: 0.72;
}
.mcp-token-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.mcp-token-name {
  font-size: 15px;
  font-weight: 500;
  color: #111827;
}
.mcp-token-status {
  font-size: 12px;
  font-weight: 500;
  padding: 4px 10px;
  border-radius: 999px;
  white-space: nowrap;
}
.mcp-token-status.is-active {
  color: #065f46;
  background: #ecfdf5;
}
.mcp-token-status.is-revoked {
  color: #6b7280;
  background: #f3f4f6;
}
.mcp-token-meta {
  margin-top: 6px;
  font-size: 13px;
  line-height: 1.5;
}
.mcp-token-controls {
  display: flex;
  align-items: flex-end;
  gap: 12px;
  margin-top: 14px;
  flex-wrap: wrap;
}
.mcp-token-brand-field {
  flex: 1;
  min-width: 180px;
  margin: 0;
  gap: 6px;
}
.mcp-token-brand-field .select {
  width: 100%;
}
.integration-platform-icons {
  display: inline-flex;
  align-items: center;
  gap: 5px;
}
.integration-platform-icon {
  width: 18px;
  height: 18px;
  border-radius: 6px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  line-height: 1;
}
.integration-platform-icon svg {
  width: 11px;
  height: 11px;
}
.integration-platform-icon-facebook {
  background: #1877f2;
}
.integration-platform-icon-instagram {
  background: linear-gradient(135deg, #f58529, #dd2a7b 45%, #8134af 75%, #515bd4);
}
.integration-platform-icon-linkedin {
  background: #0a66c2;
}
.integration-platform-icon-x {
  background: #000;
}
.integration-platform-icon-tiktok {
  background: #000;
}
/* Snapchat: the white ghost on its yellow tile (the glyph keeps its own dark outline). */
.integration-platform-icon-snapchat {
  background: #fffc00;
  --snap-ghost-fill: #fff;
}
.integration-platform-icon-snapchat svg {
  width: 14px;
  height: 14px;
}
.integration-platform-icon-meta-fallback {
  background: #1e40af;
  font-size: 10px;
  font-weight: 700;
}
.integration-platform-icon-img {
  width: 18px;
  height: 18px;
  border-radius: 5px;
  object-fit: cover;
  display: inline-block;
}
.integration-page-avatar {
  width: 20px;
  height: 20px;
  border-radius: 999px;
  overflow: hidden;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: #f3f4f6;
  flex-shrink: 0;
}
.integration-page-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.integration-page-avatar .integration-platform-icon {
  display: none;
}
.integration-page-avatar.is-fallback .integration-platform-icon {
  display: inline-flex;
}

@media (max-width: 768px) {
  .profile-layout {
    flex-direction: column;
  }
  .profile-sidebar {
    width: 100%;
    flex-direction: row;
    overflow-x: auto;
    gap: 4px;
    padding: 12px;
    border-right: none;
    border-bottom: 1px solid var(--border, #e6e8f0);
    position: sticky;
    top: 0;
    background: #fff;
    z-index: 10;
  }
  .profile-sidebar .profile-close {
    display: flex;
    margin-left: auto;
  }
  .profile-nav-item {
    white-space: nowrap;
    padding: 8px 12px;
    font-size: 13px;
  }
  .profile-content {
    padding: 16px;
  }
  .ws-stats-row {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
    margin: 16px 0;
  }
  .ws-stat-card {
    padding: 12px 6px;
  }
  .ws-stat-label {
    font-size: 11px;
    margin-bottom: 8px;
    line-height: 1.3;
  }
  .ws-stat-value {
    font-size: 18px;
    padding: 5px 8px;
  }
  .integration-row {
    flex-direction: column;
    align-items: stretch;
    gap: 12px;
    padding: 14px 0;
  }
  .integration-row-actions {
    width: 100%;
    justify-content: flex-start;
    align-self: stretch;
  }
  .integration-row-title {
    font-size: 13px;
  }
  .integration-row-value {
    font-size: 14px;
  }
  .integration-row-actions .button {
    min-height: 34px;
    font-size: 13px;
    padding: 0 12px;
  }
  .integration-row-telegram,
  .integration-row-adly-whatsapp {
    padding: 14px;
  }
  .integration-row-telegram .integration-row-actions,
  .integration-row-adly-whatsapp .integration-row-actions {
    align-self: stretch;
  }
  .integration-row-telegram .integration-row-actions .button,
  .integration-row-adly-whatsapp .integration-row-actions .button {
    width: 100%;
    justify-content: center;
  }
  .mcp-token-controls {
    flex-direction: column;
    align-items: stretch;
  }
  .mcp-token-brand-field {
    min-width: 0;
  }
}

.user-avatar {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: color-mix(in srgb, var(--brand-primary, #7c3aed) 12%, #f3f4f6);
  display: grid;
  place-items: center;
  font-size: 11px;
  font-weight: 700;
  color: var(--brand-primary, #7c3aed);
  overflow: hidden;
}

.user-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}


.plan-inline {
  font-size: 11px;
  font-weight: 500;
  color: #b45309;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.plan-inline.trial {
  color: #b91c1c;
}

.credit-mini {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 6px;
  border-radius: 999px;
  background: rgba(147, 51, 234, 0.12);
  color: var(--brand-ink);
  font-size: 11px;
  font-weight: 700;
}

.credit-mini .credit-value {
  font-size: 11px;
}

.select {
  background: var(--brand-card);
  border: 1px solid #e5e7eb;
  color: var(--brand-ink);
  border-radius: 999px;
  padding: 10px 16px;
  font-weight: 500;
  cursor: pointer;
  font-family: 'Tajawal', 'Cairo', system-ui, -apple-system, Segoe UI, sans-serif;
  min-width: 180px;
  backdrop-filter: blur(6px);
}

.select option {
  background: #ffffff;
  color: #111827;
}

.container {
  max-width: 1120px;
  margin: 28px auto 60px;
  padding: 0 24px;
  width: 100%;
}

.grid {
  display: grid;
  grid-template-columns: minmax(0, 3fr) minmax(0, 2fr);
  gap: 24px;
}

.full-width {
  grid-column: 1 / -1;
}

.jobs-main-grid {
  grid-template-columns: minmax(0, 3fr) minmax(0, 1fr);
}

.jobs-split {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 20px;
  align-items: start;
}

body.app-page .jobs-split {
  column-gap: 16px;
  row-gap: 10px;
  grid-template-areas:
    "tabs ."
    "list details";
  grid-template-rows: auto 1fr;
}

body.app-page .jobs-source-tabs {
  grid-area: tabs;
}

body.app-page .jobs-list-col {
  grid-area: list;
}

body.app-page .job-details-col {
  grid-area: details;
}
.job-details-col {
  display: block;
}


.jobs-list-col {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

body.app-page .jobs-list-col {
  gap: 10px;
}

.card {
  background: var(--brand-card);
  border-radius: 20px;
  padding: 24px;
  border: 1px solid var(--brand-border);
  box-shadow: var(--shadow-card);
}

.card h2 {
  margin: 0 0 12px;
  font-size: 22px;
}

.card p {
  margin: 0 0 16px;
  color: var(--brand-muted);
}

/* First-time onboarding: no brand yet — full-page activation */
.adly-ob-page-wrap {
  display: flex;
  justify-content: center;
  align-items: flex-start;
  padding: 3rem 1.5rem;
  min-height: 60vh;
  box-sizing: border-box;
}

.adly-ob-empty {
  display: flex;
  justify-content: center;
  align-items: flex-start;
  width: 100%;
  padding: 0;
}

/* Activation panel — base (no chrome; used when embedded in existing card) */
.adly-ob-panel {
  width: 100%;
  max-width: 580px;
  margin-inline: auto;
  background: transparent;
  border: none;
  border-radius: 0;
  padding: 0;
  box-shadow: none;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  align-items: stretch;
}

/* Card chrome only when rendered full-page via renderNoBrandMessage */
.adly-ob-page-wrap .adly-ob-panel {
  background: var(--brand-card, #ffffff);
  border: 1px solid color-mix(in srgb, var(--brand-border, #e2e8f0) 85%, transparent);
  border-radius: 16px;
  padding: 2.25rem 2rem;
  box-shadow:
    0 0 0 1px rgba(15, 23, 42, 0.02),
    0 2px 4px rgba(15, 23, 42, 0.04),
    0 8px 24px rgba(15, 23, 42, 0.05);
}

/* Header */
.adly-ob-head {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  margin-bottom: 1.75rem;
}

/* Only add head top-padding when panel has its own card chrome */
.adly-ob-page-wrap .adly-ob-head {
  margin-bottom: 1.75rem;
}

.adly-ob-symbol {
  width: 52px;
  height: 52px;
  border-radius: 14px;
  background: color-mix(in srgb, var(--brand-primary, #7c3aed) 9%, #ffffff 91%);
  border: 1px solid color-mix(in srgb, var(--brand-primary, #7c3aed) 18%, var(--brand-border, #e2e8f0) 82%);
  box-shadow: 0 1px 3px rgba(15, 23, 42, 0.05);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--brand-primary, #7c3aed);
  flex-shrink: 0;
  margin-bottom: 1rem;
}

.adly-ob-title {
  margin: 0 0 0.4rem;
  font-size: 1.625rem;
  font-weight: 700;
  letter-spacing: -0.036em;
  line-height: 1.14;
  color: var(--brand-ink, #0f172a);
}

.adly-ob-desc {
  margin: 0;
  font-size: 0.9375rem;
  line-height: 1.6;
  color: var(--brand-muted, #64748b);
  max-width: 38ch;
}

/* Benefits */
/* Benefits — 3-col horizontal grid so card is wide not tall */
.adly-ob-benefits {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  margin-bottom: 1.75rem;
}

.adly-ob-benefit {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
  padding: 13px 12px;
  border-radius: 12px;
  background: color-mix(in srgb, var(--brand-bg, #f8fafc) 62%, #ffffff 38%);
  border: 1px solid color-mix(in srgb, var(--brand-border, #e2e8f0) 80%, transparent);
}

.adly-ob-benefit-icon {
  flex-shrink: 0;
  width: 32px;
  height: 32px;
  border-radius: 9px;
  background: color-mix(in srgb, var(--brand-primary, #7c3aed) 10%, #ffffff 90%);
  border: 1px solid color-mix(in srgb, var(--brand-primary, #7c3aed) 16%, var(--brand-border, #e2e8f0) 84%);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--brand-primary, #7c3aed);
}

.adly-ob-benefit-body {
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.adly-ob-benefit-name {
  display: block;
  font-size: 0.8125rem;
  font-weight: 500;
  letter-spacing: -0.015em;
  line-height: 1.32;
  color: var(--brand-ink, #0f172a);
}

.adly-ob-benefit-sub {
  display: block;
  font-size: 0.71875rem;
  font-weight: 400;
  line-height: 1.48;
  color: var(--brand-muted, #64748b);
}

/* CTA */
.adly-ob-cta {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 7px;
  padding-top: 0.25rem;
}

.adly-ob-cta-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 11rem;
  min-height: 42px;
  padding: 0 1.75rem;
  border-radius: 10px;
  background: var(--brand-primary, #7c3aed);
  border: 1px solid color-mix(in srgb, var(--brand-primary, #7c3aed) 80%, #1f2937 20%);
  color: #ffffff;
  font-size: 0.9375rem;
  font-weight: 500;
  letter-spacing: -0.016em;
  text-decoration: none;
  cursor: pointer;
  box-shadow:
    0 1px 2px rgba(15, 23, 42, 0.08),
    0 3px 10px color-mix(in srgb, var(--brand-primary, #7c3aed) 22%, transparent);
  transition: filter 0.14s ease, box-shadow 0.14s ease, transform 0.1s ease;
}

.adly-ob-cta-btn:hover {
  filter: brightness(1.05);
  box-shadow:
    0 1px 2px rgba(15, 23, 42, 0.08),
    0 5px 16px color-mix(in srgb, var(--brand-primary, #7c3aed) 28%, transparent);
}

.adly-ob-cta-btn:active {
  transform: translateY(1px);
}

.adly-ob-cta-btn:focus-visible {
  outline: 2px solid color-mix(in srgb, var(--brand-primary, #7c3aed) 45%, transparent);
  outline-offset: 2px;
}

.adly-ob-note {
  margin: 0;
  text-align: center;
  font-size: 0.71875rem;
  font-weight: 500;
  line-height: 1.4;
  color: color-mix(in srgb, var(--brand-muted, #64748b) 85%, transparent);
}

/* Skip link */
.adly-ob-skip {
  margin-top: 0.9rem;
  text-align: center;
}

.adly-ob-skip-link {
  display: inline-block;
  font-size: 0.75rem;
  font-weight: 500;
  color: var(--brand-muted, #64748b);
  text-decoration: none;
  padding: 5px 8px;
  border-radius: 6px;
  line-height: 1.3;
  transition: color 0.13s ease, background 0.13s ease;
}

.adly-ob-skip-link:hover {
  color: var(--brand-ink, #475569);
  background: color-mix(in srgb, var(--brand-muted, #94a3b8) 8%, transparent);
}

.adly-ob-skip-link:focus-visible {
  outline: 2px solid color-mix(in srgb, var(--brand-primary, #7c3aed) 45%, transparent);
  outline-offset: 2px;
}

@media (max-width: 540px) {
  .adly-ob-page-wrap {
    padding: 1.5rem 1rem;
    min-height: auto;
  }

  .adly-ob-page-wrap .adly-ob-panel {
    max-width: none;
    padding: 1.5rem 1.25rem;
  }

  .adly-ob-benefits {
    grid-template-columns: 1fr;
    gap: 7px;
  }

  .adly-ob-benefit {
    flex-direction: row;
    align-items: flex-start;
    gap: 10px;
  }

  .adly-ob-benefit-icon {
    flex-shrink: 0;
  }

  .adly-ob-desc {
    max-width: min(34ch, 100%);
  }
}

.job-details-card {
  position: sticky;
  top: 16px;
}

body.app-page .job-details-card.card {
  padding: 18px;
}

body.app-page .container {
  margin-top: 18px;
}

body.app-page .container > .stack {
  gap: 8px;
}

body.app-page .container > .stack > section.card {
  padding: 18px;
}

body.app-page .container > .stack > section.card > .section-header {
  margin-bottom: 10px;
  gap: 10px;
}

body.app-page .app-jobs-actions {
  align-items: center;
  margin-top: 0;
}

body.app-page #jobs-title {
  margin-bottom: 0;
  line-height: 1.2;
}

/* App page: page-level title */
.app-jobs-page-title {
  font-size: 20px;
  font-weight: 700;
  margin: 0;
  color: var(--color-text);
  line-height: 1.3;
}

.app-jobs-page-title .jobs-title {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.app-jobs-page-title .jobs-title-logo {
  width: 26px;
  height: 26px;
  border-radius: 6px;
  font-size: 13px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--brand-primary);
  color: #fff;
  flex-shrink: 0;
}

.app-jobs-page-title .jobs-title-logo img {
  width: 100%;
  height: 100%;
  border-radius: inherit;
  object-fit: contain;
}

/* A real logo (often a transparent PNG) must not sit on the purple letter tile: it tints the logo. */
.app-jobs-page-title .jobs-title-logo:has(img) {
  background: #fff;
  border: 1px solid var(--brand-border, #e5e7eb);
  padding: 2px;
}

/* Title row: brand name + edit button inline */
.page-title-row {
  margin-bottom: 6px;
}
.app-jobs-page-title .brand-edit-inline {
  display: inline-flex;
  position: static;
  width: 30px;
  height: 30px;
  min-width: 30px;
  min-height: 30px;
  max-width: 30px;
  max-height: 30px;
  box-sizing: border-box;
  padding: 0;
  border-radius: 8px;
  margin-inline-start: 4px;
  vertical-align: middle;
  flex-shrink: 0;
  border: none;
  background: transparent;
  box-shadow: none;
  color: var(--brand-muted, #6b7280);
}
.app-jobs-page-title .brand-edit-inline:hover {
  background: var(--brand-surface, #f3f4f6);
  color: var(--brand-ink);
}
.app-jobs-page-title .brand-edit-inline svg {
  width: 15px;
  height: 15px;
}

/* Brand bar inside the jobs card: strength pill + edit button */
.card-brand-bar {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 14px;
  margin-bottom: 4px;
}
.card-brand-power-label {
  font-size: 12px;
  font-weight: 500;
  color: var(--brand-muted, #6b7280);
  white-space: nowrap;
  flex-shrink: 0;
}

.brand-edit-inline {
  position: static;
  flex-shrink: 0;
  width: 28px;
  height: 28px;
  padding: 0;
  border-radius: 6px;
  margin-inline-start: auto;
}

/* CTA row: natural-width buttons, no stretching */
.app-jobs-cta-row {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: 14px;
}

.section-title {
  font-size: 18px;
  font-weight: 700;
  margin-bottom: 12px;
}

.section-toggle {
  width: 36px;
  height: 36px;
  padding: 0;
  border-radius: 999px;
  font-size: 16px;
  line-height: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.jobs-title {
  display: inline-flex;
  align-items: center;
  gap: 10px;
}

.jobs-title-logo {
  width: 28px;
  height: 28px;
  border-radius: 10px;
  background: rgba(147, 51, 234, 0.12);
  display: grid;
  place-items: center;
  overflow: hidden;
  font-size: 14px;
  font-weight: 700;
}

.jobs-title-logo img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.jobs-title-logo:has(img) {
  background: #fff;
  border: 1px solid var(--brand-border, #e5e7eb);
  padding: 2px;
}

.stack {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

#ugc-settings .field {
  margin-bottom: 14px;
}

#ugc-settings .field:last-child {
  margin-bottom: 0;
}

.field {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

/* Radio group for options like before/after order */
.radio-group {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.radio-group.horizontal {
  flex-direction: row;
  flex-wrap: wrap;
}

.radio-option {
  display: flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  padding: 8px 12px;
  border: 1px solid var(--border);
  border-radius: 8px;
  transition: all 0.15s ease;
}

.radio-option:hover {
  background: var(--hover);
}

.radio-option input[type="radio"] {
  flex: 0 0 18px;
  width: 18px;
  height: 18px;
  margin: 0;
  accent-color: var(--primary);
  transform: none;
  transition: none;
}

.radio-option input[type="radio"]:checked + span {
  font-weight: 500;
  color: var(--primary);
}

.radio-option input[name="multi_template_mode"]:checked + span {
  font-weight: 400;
}

.radio-option input[name="ba_order"]:checked + span {
  font-weight: 400;
}

.video-section-card {
  background: none;
  border: none;
  border-radius: 0;
  padding: 0;
  margin-bottom: 16px;
}

.video-section-header {
  margin-bottom: 24px;
}

.video-section-title {
  font-size: 15px;
  font-weight: 500;
  margin: 0 0 4px 0;
  color: var(--brand-ink);
}

.video-section-subtitle {
  font-size: 13px;
  color: var(--brand-muted);
  margin: 0;
}

.video-mode-toggle {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
}

.video-mode-card {
  position: relative;
  border: 1.5px solid rgba(0,0,0,0.08);
  border-radius: 12px;
  padding: 0;
  cursor: pointer;
  transition: all 0.2s ease;
  overflow: hidden;
  background: #fff;
}

.video-mode-card input[type="radio"] {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.video-mode-card:hover {
  border-color: rgba(147, 51, 234, 0.3);
  box-shadow: 0 2px 8px rgba(0,0,0,0.04);
}

.video-mode-card:has(input[type="radio"]:checked) {
  border-color: var(--brand-accent);
  box-shadow: 0 0 0 1px var(--brand-accent);
  background: rgba(147, 51, 234, 0.03);
}

.video-mode-card-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: 16px;
  text-align: center;
}

.video-mode-card-icon {
  font-size: 28px;
  margin-bottom: 4px;
}

.video-mode-card-title {
  font-weight: 500;
  font-size: 14px;
  color: var(--brand-ink);
}

.video-mode-card-subtitle {
  font-size: 12px;
  color: var(--brand-muted);
  line-height: 1.4;
}

.video-upload-area {
  margin-top: 16px;
}

.video-ref-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  overflow: hidden;
  align-items: stretch;
}

.video-ref-slot {
  display: flex;
  flex-direction: column;
  gap: 10px;
  min-width: 0;
  overflow: hidden;
  height: 100%;
}

.product-studio-shell {
  --product-studio-label-size: 15px;
  --product-studio-control-size: 14px;
  margin-top: 14px;
  border: 1px solid rgba(226, 232, 240, 0.95);
  border-radius: 24px;
  padding: 18px;
  background: #fff;
  box-shadow: 0 18px 48px rgba(15, 23, 42, 0.06);
  overflow: hidden;
  font-family: 'Tajawal', 'Cairo', system-ui, -apple-system, 'Segoe UI', sans-serif;
}

.product-studio-choose-head {
  margin-bottom: 14px;
}

.product-studio-choose-title {
  margin: 0;
  font-size: var(--product-studio-label-size);
  font-weight: 700;
  color: var(--brand-ink);
}

.product-studio-choose-subtitle {
  margin: 6px 0 0;
  font-size: 13px;
  color: var(--brand-muted);
}

.product-studio-preset-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
  align-items: stretch;
}

.product-studio-preset-card {
  display: flex;
  flex-direction: column;
  gap: 9px;
  min-width: 0;
  border: 1px solid rgba(226, 232, 240, 0.95);
  border-radius: 18px;
  background: #fff;
  padding: 8px;
  text-align: start;
  transition: border-color 0.18s ease, box-shadow 0.18s ease, transform 0.18s ease;
  position: relative;
  cursor: pointer;
  overflow: hidden;
  font-family: 'Tajawal', 'Cairo', system-ui, -apple-system, 'Segoe UI', sans-serif !important;
}

.product-studio-preset-card:hover {
  border-color: rgba(124, 58, 237, 0.42);
  box-shadow: 0 12px 30px rgba(88, 28, 135, 0.10);
  transform: translateY(-1px);
}

.product-studio-preset-card.is-selected {
  border-color: #7c3aed;
  box-shadow: 0 0 0 2px rgba(124, 58, 237, 0.16);
}

.product-studio-check {
  position: absolute;
  top: 12px;
  inset-inline-end: 12px;
  width: 24px;
  height: 24px;
  border-radius: 999px;
  display: none;
  align-items: center;
  justify-content: center;
  background: #7c3aed;
  color: #fff;
  font-size: 12px;
  font-weight: 700;
  z-index: 2;
  box-shadow: 0 8px 18px rgba(124, 58, 237, 0.24);
}

.product-studio-preset-card.is-selected .product-studio-check {
  display: inline-flex;
}

.product-studio-preview-wrap {
  position: relative;
  display: block;
  width: 100%;
  height: 112px;
  border-radius: 14px;
  overflow: hidden;
  border: 1px solid rgba(226, 232, 240, 0.95);
  background: linear-gradient(135deg, #f8fafc, #f3f0ff);
  flex: 0 0 auto;
}

.product-studio-preview,
.product-studio-poster {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.product-studio-preset-card:hover .product-studio-preview,
.product-studio-preset-card:hover .product-studio-poster {
  filter: brightness(1.06);
}

.product-studio-poster {
  display: none;
}

.product-studio-poster.is-static {
  display: block;
}

.product-studio-preset-card.video-failed .product-studio-preview {
  display: none;
}

.product-studio-preset-card.video-failed .product-studio-poster {
  display: block;
}

.product-studio-card-title {
  display: block;
  margin: 0;
  font-size: 13px;
  font-weight: 700;
  color: var(--brand-ink);
  font-family: 'Tajawal', 'Cairo', system-ui, -apple-system, 'Segoe UI', sans-serif !important;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.product-studio-card-subtitle {
  display: block;
  margin-top: 3px;
  font-size: 12px;
  line-height: 1.35;
  color: var(--brand-muted);
  font-family: 'Tajawal', 'Cairo', system-ui, -apple-system, 'Segoe UI', sans-serif !important;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.product-studio-card-copy {
  min-width: 0;
  padding: 0 2px 2px;
}

.product-studio-inputs {
  margin-top: 18px;
  display: grid;
  gap: 14px;
}

.product-studio-asset-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}

.product-studio-asset-slot {
  min-width: 0;
}

.product-studio-asset-card {
  position: relative;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 76px;
  border-radius: 18px;
  border: 1px solid rgba(226, 232, 240, 0.95);
  background: #f8fafc;
  color: #111827;
  cursor: pointer;
  padding: 12px 16px;
  transition: border-color 0.18s ease, background 0.18s ease, box-shadow 0.18s ease;
  overflow: hidden;
  font-family: 'Tajawal', 'Cairo', system-ui, -apple-system, 'Segoe UI', sans-serif !important;
}

.product-studio-asset-card:hover {
  border-color: rgba(124, 58, 237, 0.34);
  background: #fff;
  box-shadow: 0 10px 24px rgba(15, 23, 42, 0.07);
}

.product-studio-asset-plus {
  position: absolute;
  top: 8px;
  inset-inline-end: 8px;
  width: 20px;
  height: 20px;
  border-radius: 999px;
  background: rgba(124, 58, 237, 0.10);
  color: #7c3aed;
  font-size: 18px;
  line-height: 18px;
  text-align: center;
}

.product-studio-asset-icon {
  flex: 0 0 auto;
  width: 28px;
  height: 28px;
  line-height: 1;
  color: #9ca3af;
}

.product-studio-asset-icon svg {
  width: 100%;
  height: 100%;
  display: block;
}

.product-studio-asset-label {
  min-width: 0;
  font-size: var(--product-studio-label-size);
  font-weight: 700;
  text-align: center;
  line-height: 1.25;
  font-family: 'Tajawal', 'Cairo', system-ui, -apple-system, 'Segoe UI', sans-serif !important;
}

.product-studio-inputs .field > label {
  font-size: var(--product-studio-label-size);
  font-weight: 700;
  color: var(--brand-ink);
  font-family: 'Tajawal', 'Cairo', system-ui, -apple-system, 'Segoe UI', sans-serif !important;
}

.product-studio-assets-title {
  margin: 0 2px -6px;
  font-size: var(--product-studio-label-size);
  font-weight: 700;
  color: var(--brand-ink);
  font-family: 'Tajawal', 'Cairo', system-ui, -apple-system, 'Segoe UI', sans-serif !important;
}

.product-studio-inputs .field input,
.product-studio-inputs .field select,
.product-studio-inputs .field textarea,
.product-studio-inputs .product-studio-aspect-trigger,
.product-studio-inputs .product-studio-aspect-option,
.product-studio-inputs .product-studio-duration-dot {
  font-size: var(--product-studio-control-size);
}

.product-studio-asset-card-required {
  border-color: rgba(124, 58, 237, 0.32);
  background: #faf7ff;
}

.product-studio-product-source-panel {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  padding: 10px;
  border: 1px solid rgba(226, 232, 240, 0.95);
  border-radius: 16px;
  background: #f8fafc;
}

.product-studio-product-source-panel[hidden] {
  display: none;
}

.product-studio-source-label {
  font-size: 14px;
  font-weight: 700;
  color: var(--brand-ink);
  margin-inline-end: auto;
  font-family: 'Tajawal', 'Cairo', system-ui, -apple-system, 'Segoe UI', sans-serif !important;
}

.product-studio-product-url-row {
  flex: 1 1 100%;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 8px;
}

.product-studio-product-url-row[hidden] {
  display: none;
}

.product-studio-library-tabs {
  margin: 12px 0;
}

.product-studio-source-tabs {
  margin: 4px 0 2px;
}

.product-studio-source-panel {
  display: grid;
  gap: 12px;
}

.product-studio-modal-upload-card,
.product-studio-modal-url-card {
  border: 1px solid rgba(226, 232, 240, 0.95);
  border-radius: 18px;
  background: #f8fafc;
  padding: 18px;
}

.product-studio-modal-upload-card {
  min-height: 150px;
  display: grid;
  place-items: center;
  text-align: center;
}

.product-studio-modal-upload-card .button {
  min-width: 160px;
}

.product-studio-modal-url-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 10px;
  align-items: center;
}

.product-studio-modal-url-row input {
  height: 44px;
}

.product-studio-library-modal .base-image-library-card {
  width: min(860px, calc(100vw - 32px));
  max-height: min(760px, calc(100vh - 28px));
  gap: 10px;
  padding: 18px 18px 14px;
  border-radius: 22px;
}

.product-studio-library-modal .modal-close {
  width: 38px;
  height: 38px;
  border-radius: 999px;
  background: #f3f4f6;
  color: #111827;
}

.product-studio-library-modal .base-library-header {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: start;
  gap: 12px;
  padding-inline-end: 44px;
  margin-bottom: 2px;
}

[dir="rtl"] .product-studio-library-modal .base-library-header,
.rtl .product-studio-library-modal .base-library-header {
  padding-inline-start: 44px;
  padding-inline-end: 0;
}

.product-studio-library-modal .publishing-flow-eyebrow {
  margin-bottom: 2px;
  font-size: 12px;
}

.product-studio-library-modal .base-library-header h3 {
  margin: 0 0 2px;
  font-size: clamp(22px, 2.4vw, 30px);
  line-height: 1.1;
}

.product-studio-library-modal .base-library-header p {
  font-size: 14px;
  line-height: 1.4;
}

.product-studio-library-modal #product-studio-library-refresh {
  min-height: 38px;
  padding: 8px 14px;
  border-radius: 12px;
}

.product-studio-library-modal .product-studio-source-tabs,
.product-studio-library-modal .product-studio-library-tabs {
  display: inline-flex;
  width: fit-content;
  max-width: 100%;
  padding: 4px;
  gap: 4px;
  border: 1px solid rgba(226, 232, 240, 0.95);
  border-radius: 18px;
  background: #f8fafc;
}

.product-studio-library-modal .product-studio-library-tabs {
  margin: 4px 0 8px;
}

.product-studio-library-modal .caption-choice-button {
  min-height: 38px;
  padding: 8px 14px;
  border-radius: 14px;
  font-size: 13px;
  box-shadow: none;
  background: transparent;
}

.product-studio-library-modal .caption-choice-button.is-active {
  background: #fff;
  box-shadow:
    inset 0 0 0 1.5px color-mix(in srgb, var(--brand-primary, #7c3aed) 72%, transparent),
    0 8px 18px rgba(124, 58, 237, 0.10);
}

.product-studio-library-modal .base-library-grid {
  grid-template-columns: repeat(auto-fill, minmax(128px, 1fr));
  gap: 10px;
  min-height: 0;
  max-height: min(390px, calc(100vh - 315px));
  padding: 2px 4px 4px;
}

.product-studio-library-modal .base-library-card {
  gap: 7px;
  padding: 8px;
  border-radius: 16px;
  box-shadow: none;
}

.product-studio-library-modal .base-library-thumb-wrap {
  border-radius: 12px;
}

.product-studio-library-modal .base-library-card-copy strong {
  font-size: 12.5px;
}

.product-studio-library-modal .base-library-card-copy span {
  font-size: 11.5px;
}

.product-studio-library-modal .base-library-footer {
  justify-content: space-between;
  gap: 10px;
  padding-top: 4px;
  border-top: 1px solid rgba(226, 232, 240, 0.82);
}

.product-studio-library-modal .base-library-empty {
  min-height: 220px;
}

.product-studio-library-modal .product-studio-modal-upload-card,
.product-studio-library-modal .product-studio-modal-url-card {
  padding: 16px;
  border-radius: 16px;
}

.product-studio-library-modal .product-studio-modal-upload-card {
  min-height: 132px;
}

@media (max-width: 700px) {
  .product-studio-library-modal .base-image-library-card {
    width: calc(100vw - 20px);
    padding: 16px 14px 12px;
  }

  .product-studio-library-modal .base-library-header {
    grid-template-columns: 1fr;
    padding-inline-end: 40px;
  }

  [dir="rtl"] .product-studio-library-modal .base-library-header,
  .rtl .product-studio-library-modal .base-library-header {
    padding-inline-start: 40px;
    padding-inline-end: 0;
  }

  .product-studio-library-modal .product-studio-source-tabs,
  .product-studio-library-modal .product-studio-library-tabs {
    width: 100%;
  }

  .product-studio-library-modal .caption-choice-button {
    flex: 1 1 0;
  }

  .product-studio-library-modal .base-library-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    max-height: calc(100vh - 360px);
  }

  .product-studio-library-modal .base-library-footer {
    display: grid;
    justify-items: stretch;
  }
}

@media (max-width: 640px) {
  .product-studio-modal-url-row {
    grid-template-columns: 1fr;
  }
}

.product-studio-output-row {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.product-studio-ratio-select-wrap {
  position: relative;
}

.product-studio-native-ratio-select {
  position: absolute;
  inset: 0;
  opacity: 0;
  pointer-events: none;
}

.product-studio-aspect-trigger {
  width: 100%;
  min-height: 46px;
  border: 1px solid var(--brand-border);
  border-radius: 16px;
  background: #fff;
  color: var(--brand-ink);
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 8px;
  padding: 0 14px;
  font-weight: 700;
  font-size: 14px;
  cursor: pointer;
  box-shadow: none;
  font-family: 'Tajawal', 'Cairo', system-ui, -apple-system, 'Segoe UI', sans-serif !important;
}

.product-studio-aspect-trigger:hover,
.product-studio-aspect-trigger[aria-expanded="true"] {
  border-color: rgba(124, 58, 237, 0.45);
  box-shadow: 0 8px 18px rgba(124, 58, 237, 0.12);
}

.product-studio-aspect-trigger-label {
  flex: 0 0 auto;
  text-align: start;
}

.product-studio-aspect-caret {
  color: #64748b;
  font-size: 18px;
  line-height: 1;
  margin-inline-start: auto;
}

.product-studio-aspect-menu {
  position: absolute;
  z-index: 30;
  inset-inline: 0;
  top: calc(100% + 8px);
  display: grid;
  gap: 4px;
  padding: 8px;
  border: 1px solid rgba(15, 23, 42, 0.14);
  border-radius: 18px;
  background: #fff;
  box-shadow: 0 18px 42px rgba(15, 23, 42, 0.18);
}

.product-studio-aspect-menu[hidden] {
  display: none;
}

/* Create wizard: aspect-ratio dropdown above sticky submit bar */
#create-panel #create-form.create-aspect-menu-open .wizard-panel.active {
  position: relative;
  z-index: 100;
}

#create-panel #create-form.create-aspect-menu-open #wizard-nav {
  z-index: 0;
}

#create-panel #create-form.create-aspect-menu-open :is(
  .video-animate-output-settings,
  .product-studio-output-row,
  .animated-video-output-stack,
  .animated-video-aspect-output-item,
  .product-studio-ratio-select-wrap
) {
  overflow: visible;
}

/* Drop upward in create flow so the list clears the sticky action bar */
#create-panel #create-form.create-aspect-menu-open .product-studio-aspect-menu:not([hidden]) {
  top: auto !important;
  bottom: calc(100% + 8px);
  z-index: 101;
}

.product-studio-aspect-option {
  width: 100%;
  border: 0;
  border-radius: 12px;
  background: transparent;
  color: #64748b;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-height: 42px;
  padding: 8px 12px;
  font-size: 15px;
  font-weight: 700;
  cursor: pointer;
  font-family: 'Tajawal', 'Cairo', system-ui, -apple-system, 'Segoe UI', sans-serif !important;
}

.product-studio-aspect-option:hover {
  background: #f8fafc;
  color: #111827;
}

.product-studio-aspect-option.is-selected {
  background: linear-gradient(135deg, rgba(124, 58, 237, 0.14), rgba(236, 72, 153, 0.1));
  color: #111827;
}

.product-studio-aspect-preview {
  width: 24px;
  height: 24px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
  color: #6b7280;
  flex: 0 0 24px;
}

.product-studio-aspect-option.is-selected .product-studio-aspect-preview,
.product-studio-aspect-trigger[aria-expanded="true"] .product-studio-aspect-preview {
  color: #7c3aed;
}

.product-studio-aspect-icon {
  display: block;
  border: 2px solid currentColor;
  border-radius: 4px;
  background: rgba(124, 58, 237, 0.06);
}

.product-studio-aspect-preview[data-ratio="9:16"] .product-studio-aspect-icon {
  width: 11px;
  height: 20px;
}

.product-studio-aspect-preview[data-ratio="16:9"] .product-studio-aspect-icon {
  width: 22px;
  height: 13px;
}

.product-studio-aspect-preview[data-ratio="1:1"] .product-studio-aspect-icon {
  width: 18px;
  height: 18px;
}

.product-studio-aspect-preview[data-ratio="4:3"] .product-studio-aspect-icon {
  width: 21px;
  height: 16px;
}

.product-studio-aspect-preview[data-ratio="3:4"] .product-studio-aspect-icon {
  width: 16px;
  height: 21px;
}

.product-studio-aspect-preview[data-ratio="21:9"] .product-studio-aspect-icon {
  width: 24px;
  height: 10px;
  border-radius: 999px;
}

.product-studio-aspect-preview[data-ratio="3:2"] .product-studio-aspect-icon {
  width: 22px;
  height: 15px;
}

.product-studio-aspect-preview[data-ratio="2:3"] .product-studio-aspect-icon {
  width: 15px;
  height: 22px;
}

.product-studio-duration-picker {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 8px;
  padding: 8px;
  border-radius: 16px;
  background: #f8fafc;
  border: 1px solid rgba(226, 232, 240, 0.95);
}

.product-studio-duration-dot {
  border: 0;
  background: transparent;
  color: #64748b;
  font-size: 14px;
  font-weight: 700;
  padding: 12px 6px;
  border-radius: 12px;
  cursor: pointer;
}

.product-studio-duration-dot.is-selected {
  color: #111827;
  background: #fff;
  box-shadow: 0 8px 18px rgba(15, 23, 42, 0.08);
}

#product_studio_notes {
  font-size: 12px;
}
#product_studio_notes::placeholder {
  font-size: 12px;
}

@media (max-width: 1180px) {
  .product-studio-preset-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
  .product-studio-asset-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 760px) {
  .product-studio-preset-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .product-studio-output-row {
    grid-template-columns: 1fr;
  }
}

.director-premium-card {
  position: relative;
  overflow: hidden;
  border: 1px solid rgba(148, 163, 184, 0.18);
  background:
    radial-gradient(circle at top right, rgba(99, 102, 241, 0.12), transparent 30%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(248, 250, 252, 0.94));
  box-shadow: 0 24px 64px rgba(15, 23, 42, 0.08);
}

.director-hero {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: space-between;
  gap: 20px;
  margin-bottom: 20px;
}

.director-hero-copy {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  gap: 8px;
  min-width: 0;
}

.director-kicker {
  display: inline-flex;
  align-items: center;
  width: fit-content;
  padding: 7px 12px;
  border-radius: 999px;
  background: rgba(79, 70, 229, 0.09);
  color: #4338ca;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.02em;
}

.director-price-badge {
  flex: 0 1 auto;
  min-width: min(100%, 260px);
  max-width: 100%;
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 13px 15px;
  border-radius: 14px;
  border: 1px solid rgba(217, 119, 6, 0.28);
  background: rgba(255, 251, 235, 0.95);
}

.director-price-badge-icon {
  flex-shrink: 0;
  font-size: 18px;
  line-height: 1.3;
}

.director-price-label {
  display: block;
  margin-bottom: 4px;
  font-size: 12px;
  color: var(--brand-muted);
}

.director-price-badge strong {
  display: block;
  font-size: 12px;
  font-weight: 500;
  line-height: 1.5;
  color: #92400e;
  font-family: 'Tajawal', 'Cairo', system-ui, -apple-system, 'Segoe UI', sans-serif;
}

.director-workspace-stack {
  gap: 18px;
}

.director-surface {
  padding: 18px;
  border-radius: 20px;
  border: 1px solid rgba(148, 163, 184, 0.16);
  background: rgba(255, 255, 255, 0.82);
  box-shadow: 0 10px 28px rgba(15, 23, 42, 0.05);
}

.director-surface-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 16px;
}

.director-surface-head > :first-child {
  flex: 1 1 auto;
  min-width: 0;
}

.director-surface-title {
  font-size: 15px;
  font-weight: 700;
  color: var(--brand-ink);
}

.director-surface-subtitle {
  margin: 4px 0 0;
  font-size: 13px;
  line-height: 1.5;
  color: var(--brand-muted);
}

.director-reference-mode-banner {
  display: none;
  position: relative;
  z-index: 2;
  margin: 0 0 14px;
  padding: 10px 12px;
  border-radius: 12px;
  background: #ffffff;
  border: 1px solid rgba(148, 163, 184, 0.24);
  font-size: 13px;
  line-height: 1.5;
  font-weight: 500;
  color: var(--brand-ink);
}

.director-surface.director-reference-mode-disabled .director-reference-mode-banner:not([hidden]) {
  display: block;
}

.director-surface.director-reference-mode-disabled .director-reference-mode-body {
  opacity: 0.42;
  pointer-events: none;
  user-select: none;
}

.director-surface.director-reference-mode-disabled .director-reference-mode-body .upload-box {
  cursor: not-allowed;
  border-color: #e5e7eb;
  background: #f3f4f6;
}

#director-multimodal-url-fields.director-reference-mode-disabled {
  opacity: 0.42;
  pointer-events: none;
}

#director-multimodal-url-fields.director-reference-mode-disabled textarea {
  cursor: not-allowed;
}

.director-field-heading {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.director-field-title-row {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.director-reference-callout {
  margin-top: 12px;
  padding: 12px 14px;
  border-radius: 14px;
  background: linear-gradient(135deg, rgba(239, 246, 255, 0.95), rgba(248, 250, 252, 0.95));
  border: 1px solid rgba(191, 219, 254, 0.95);
  color: #1d4ed8;
  font-size: 13px;
  line-height: 1.5;
}

.director-anchor-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.director-controls-surface .video-settings-row {
  margin-bottom: 0;
}

.director-controls-surface .director-advanced-compact {
  margin-top: 16px;
}

.director-advanced {
  border: 1px solid rgba(148, 163, 184, 0.18);
  border-radius: 18px;
  padding: 0 16px 16px;
  background: rgba(255, 255, 255, 0.74);
}

.director-advanced > summary {
  cursor: pointer;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  padding: 16px 0 10px;
  color: var(--brand-muted, #94a3b8);
  font-family: 'Tajawal', 'Cairo', system-ui, -apple-system, 'Segoe UI', sans-serif;
}

.director-advanced-stack {
  gap: 14px;
  margin-top: 4px;
}

.director-advanced-compact {
  padding: 0 14px 12px;
  border-radius: 16px;
}

.director-advanced-compact > summary {
  padding: 12px 0;
  font-size: 11px !important;
}

.director-advanced-compact[open] > summary {
  padding-bottom: 8px;
}

.director-advanced-compact .director-advanced-stack {
  gap: 10px;
}

.director-inline-label {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--brand-muted, #94a3b8);
  font-family: 'Tajawal', 'Cairo', system-ui, -apple-system, 'Segoe UI', sans-serif;
  margin-bottom: 4px;
}

.director-inline-label span:first-child {
  min-width: 0;
}

/* Override .field label default for fields inside director advanced section */
.director-advanced-stack .field label:not(.caption-toggle-card),
.director-advanced-stack .field > label:not(.caption-toggle-card) {
  font-size: 11px !important;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--brand-muted, #94a3b8);
  font-family: 'Tajawal', 'Cairo', system-ui, -apple-system, 'Segoe UI', sans-serif;
}

.director-advanced-stack .caption-toggle-card-title {
  font-size: 13px;
  font-weight: 700;
  color: var(--brand-ink, #1f2937);
  font-family: 'Tajawal', 'Cairo', system-ui, -apple-system, 'Segoe UI', sans-serif;
  text-transform: none;
  letter-spacing: 0;
}

.director-help-btn {
  width: 20px;
  height: 20px;
  font-size: 10px;
}

.director-prompt-shell #creative-direction-field {
  margin-bottom: 0;
}

.director-prompt-mode-wrap {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-bottom: 14px;
  padding-bottom: 14px;
  border-bottom: 1px solid rgba(148, 163, 184, 0.14);
}

.director-prompt-mode-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
}

/* ── Director prompt-mode label (وضع البرومبت) ── */
.director-prompt-mode-label {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--brand-muted, #94a3b8);
  font-family: 'Tajawal', 'Cairo', system-ui, -apple-system, 'Segoe UI', sans-serif;
}

.director-prompt-idea-panel {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.director-prompt-actions {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.director-prompt-actions .hint {
  margin: 0;
}

/* Field labels inside the prompt shell (فكرتك / برومبت الفيديو) */
.director-prompt-shell #creative-direction-field label,
.director-prompt-shell .field > label:not(.caption-toggle-card):not(.upload-box) {
  font-size: 11px !important;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--brand-muted, #94a3b8);
  font-family: 'Tajawal', 'Cairo', system-ui, -apple-system, 'Segoe UI', sans-serif;
}

.director-prompt-shell #director_prompt_idea,
.director-prompt-shell #creative-direction-field textarea {
  min-height: 140px;
  border-radius: 18px;
  background: rgba(248, 250, 252, 0.92);
}

.director-prompt-shell #director_prompt_idea {
  min-height: 110px;
}

.director-prompt-insert-note {
  margin: 0 0 12px;
  font-size: 12px;
  line-height: 1.45;
  color: var(--brand-muted);
}

.director-prompt-assets {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 12px;
  margin-bottom: 14px;
}

.director-prompt-asset {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  padding: 12px;
  border: 1px solid rgba(148, 163, 184, 0.18);
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.92);
  box-shadow: 0 8px 22px rgba(15, 23, 42, 0.05);
  cursor: grab;
  text-align: start;
  transition: transform 0.15s ease, box-shadow 0.15s ease, border-color 0.15s ease;
}

.director-prompt-asset:hover {
  transform: translateY(-1px);
  border-color: rgba(99, 102, 241, 0.3);
  box-shadow: 0 12px 28px rgba(15, 23, 42, 0.08);
}

.director-prompt-asset:active {
  cursor: grabbing;
}

.director-prompt-asset-preview {
  width: 54px;
  height: 54px;
  border-radius: 14px;
  overflow: hidden;
  flex: 0 0 auto;
  background: linear-gradient(135deg, rgba(226, 232, 240, 0.95), rgba(241, 245, 249, 0.95));
  border: 1px solid rgba(148, 163, 184, 0.16);
  display: flex;
  align-items: center;
  justify-content: center;
}

.director-prompt-asset-preview img,
.director-prompt-asset-preview video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.director-prompt-asset-icon {
  font-size: 18px;
}

.director-prompt-asset-copy {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}

.director-prompt-asset-token {
  display: inline-flex;
  align-items: center;
  width: fit-content;
  padding: 4px 8px;
  border-radius: 999px;
  background: rgba(79, 70, 229, 0.08);
  color: #4338ca;
  font-size: 11px;
  font-weight: 700;
}

.director-prompt-asset-label {
  font-size: 12px;
  font-weight: 500;
  color: var(--brand-ink);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.director-prompt-asset-subtitle {
  font-size: 11px;
  color: var(--brand-muted);
}

.director-prompt-shell #creative-direction-field textarea.is-token-drop-target {
  border-color: rgba(99, 102, 241, 0.45);
  box-shadow: 0 0 0 4px rgba(99, 102, 241, 0.12);
}

.director-reference-chip {
  display: inline-flex;
  align-items: center;
  width: fit-content;
  margin: 8px 0 0;
  padding: 4px 8px;
  border-radius: 999px;
  background: rgba(79, 70, 229, 0.08);
  color: #4338ca;
  font-size: 11px;
  font-weight: 700;
}

.video-ref-label {
  font-weight: 700;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--brand-muted, #94a3b8);
  display: flex;
  align-items: center;
  gap: 4px;
  font-family: 'Tajawal', 'Cairo', system-ui, -apple-system, 'Segoe UI', sans-serif;
}

.video-ref-required {
  font-size: 11px;
  font-weight: 500;
  color: #dc2626;
}

#director-reference-images-preview {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 12px;
}

#director-reference-images-preview .upload-thumb {
  border-radius: 16px;
  border: 1px solid rgba(148, 163, 184, 0.18);
  background: rgba(255, 255, 255, 0.94);
  box-shadow: 0 10px 24px rgba(15, 23, 42, 0.06);
}

#director-reference-images-preview .upload-thumb img {
  aspect-ratio: 1 / 1;
  object-fit: cover;
}

@media (max-width: 900px) {
  .director-hero {
    flex-direction: column;
  }

  .director-price-badge {
    width: 100%;
    min-width: 0;
  }

  .director-prompt-assets {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 600px) {
  .director-premium-card {
    overflow: visible;
    padding: 14px;
    border-radius: 16px;
  }
  .director-surface {
    border: 1px solid rgba(148, 163, 184, 0.35);
    background: #fff;
    box-shadow: 0 2px 8px rgba(15, 23, 42, 0.06);
    padding: 14px;
    border-radius: 14px;
  }
  .director-workspace-stack {
    gap: 12px;
  }
  .director-anchor-grid,
  .video-ref-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
  }
  .director-controls-surface .video-settings-row {
    grid-template-columns: 1fr;
    gap: 10px;
  }
  .director-surface-title {
    font-size: 14px;
  }
  .director-surface-subtitle {
    font-size: 12px;
  }
  .director-hero-copy .step-panel-title {
    font-size: 20px;
  }
  .director-price-badge {
    padding: 11px 13px;
    border-radius: 12px;
    gap: 8px;
  }
  .director-price-badge strong {
    font-size: 11px;
  }
  .director-prompt-insert-note {
    font-size: 11px;
  }
}

.upload-box-compact {
  padding: 16px;
  min-height: 80px;
  overflow: hidden;
}

.upload-box-compact .upload-box-title {
  font-size: 13px;
}

.upload-box-generated {
  position: relative;
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 8px;
  max-width: 100%;
  overflow: hidden;
}

.upload-box-preview-wrapper {
  position: relative;
  cursor: pointer;
  display: inline-block;
  max-width: 100%;
  overflow: hidden;
}

.upload-box-preview-img {
  width: 100%;
  max-width: 100%;
  max-height: 100px;
  border-radius: 8px;
  object-fit: contain;
  display: block;
  transition: opacity 0.2s ease;
}

.upload-box-preview-wrapper:hover .upload-box-preview-img {
  opacity: 0.85;
}

.upload-box-zoom-icon {
  position: absolute;
  bottom: 4px;
  right: 4px;
  background: rgba(0, 0, 0, 0.7);
  color: white;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  opacity: 0;
  transition: opacity 0.2s ease;
  pointer-events: none;
}

.upload-box-preview-wrapper:hover .upload-box-zoom-icon {
  opacity: 1;
}

.rtl .upload-box-zoom-icon {
  left: 4px;
  right: auto;
}

.upload-box-generated-label {
  font-size: 11px;
  font-weight: 500;
  color: var(--brand-primary);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  text-align: center;
  width: 100%;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  padding: 0 4px;
  box-sizing: border-box;
}

.upload-box-generated-label.uploaded-label {
  color: #059669;
}

.upload-box-file-name {
  font-size: 11px;
  color: var(--brand-text);
  text-align: center;
  width: 100%;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  padding: 0 8px;
  margin-top: 2px;
  box-sizing: border-box;
}

.upload-box-file-size {
  font-size: 10px;
  color: var(--brand-text-muted);
  text-align: center;
  margin-top: 2px;
}

.upload-box-generated .upload-remove {
  position: absolute;
  top: 8px;
  right: 8px;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.7);
  color: white;
  border: none;
  cursor: pointer;
  font-size: 18px;
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.2s ease;
  z-index: 10;
}

.upload-box-generated .upload-remove:hover {
  background: rgba(220, 38, 38, 0.9);
}

.video-ref-or {
  text-align: center;
  font-size: 11px;
  color: var(--brand-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.8px;
  font-weight: 500;
  margin: 12px 0;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
}

.video-ref-or::before,
.video-ref-or::after {
  content: '';
  flex: 1;
  height: 1px;
  background: var(--brand-border);
  margin: 0 12px;
}

.video-ref-source-card {
  display: flex;
  flex-direction: column;
  gap: 10px;
  flex: 1;
  min-height: 0;
  padding: 10px;
  border: 1px solid rgba(148, 163, 184, 0.22);
  border-radius: 14px;
  background: linear-gradient(180deg, #ffffff 0%, #fbfcff 100%);
  box-shadow: 0 8px 20px rgba(15, 23, 42, 0.04);
}
.video-ref-slot[data-ref-slot="product"] .video-ref-source-card {
  flex: 0 1 auto;
  padding: 0;
  border: none;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}
.video-ref-slot[data-ref-slot="product"] .video-ref-source-card::before {
  display: none;
}
.video-ref-source-tabs {
  margin: 0;
  gap: 6px;
  justify-content: flex-start;
}
.video-ref-source-tabs .tab-button {
  flex: 0 0 auto;
  font-size: 12px;
  font-weight: 500;
  padding: 5px 14px;
  min-height: 28px;
  border-radius: 999px;
  font-family: 'Tajawal', 'Cairo', system-ui, -apple-system, 'Segoe UI', sans-serif;
}
.video-ref-tab-panel {
  display: grid;
  gap: 8px;
}
.video-ref-tab-panel[hidden] {
  display: none !important;
}
.video-ref-tab-panel[data-video-ref-panel="create"] textarea {
  min-height: 72px;
  margin: 0;
}

.video-ref-source-row {
  align-items: center;
  gap: 10px;
  margin: 0;
}

.video-ref-source-row .create-base-image-add.has-file {
  display: none;
}

.video-ref-source-card .swipe-visual-previews,
.video-ref-source-card .create-base-image-preview {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin: 0;
}

.video-ref-source-card .video-ref-generated-enlargeable,
.video-ref-source-card .video-ref-generated-enlargeable img {
  cursor: zoom-in;
}

.video-ref-source-card .video-ref-generated-enlargeable:focus-visible {
  outline: 2px solid var(--brand-primary);
  outline-offset: 3px;
}

.video-ref-or-inset {
  margin: 2px 0;
  font-size: 10px;
  letter-spacing: 0.06em;
}

.video-ref-source-card textarea {
  min-height: 62px;
  margin: 0;
}

.video-ref-generate-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  width: 100%;
  min-height: 32px;
  margin: 0;
  padding: 6px 10px;
  border-radius: 10px;
  border: 1px solid rgba(148, 163, 184, 0.28);
  background: #f8fafc;
  color: var(--brand-ink);
  font-size: 12px;
  font-weight: 500;
  line-height: 1.2;
  font-family: inherit;
  cursor: pointer;
  transition: border-color 0.15s ease, background 0.15s ease;
}

.video-ref-generate-btn:hover {
  border-color: rgba(124, 58, 237, 0.32);
  background: rgba(124, 58, 237, 0.06);
}

.video-ref-generate-btn:disabled {
  opacity: 0.55;
  cursor: not-allowed;
}

.video-ref-generate-btn .button-credit-badge {
  margin-inline-start: 4px;
  padding: 2px 6px;
  font-size: 10px;
}

.video-ref-slot textarea {
  min-height: 70px;
  font-size: 13px;
  padding: 12px 14px;
  border: 1.5px solid var(--brand-border);
  border-radius: 10px;
  background: var(--card-bg);
  color: var(--brand-text);
  resize: vertical;
  transition: all 0.2s ease;
  font-family: inherit;
  line-height: 1.5;
}

.music-video-files-list,
#music-video-files-list {
  display: grid;
  gap: 16px;
  margin-top: 16px;
}

.music-video-wizard {
  display: grid;
  gap: 14px;
}

.music-video-wizard-step {
  border: 1px solid var(--border-color);
  border-radius: 12px;
  padding: 14px;
  background: var(--card-bg);
}

.music-video-wizard-step-head {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 10px;
}

.music-video-wizard-step-number {
  width: 24px;
  height: 24px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  font-weight: 700;
  color: var(--brand-primary);
  background: rgba(147, 51, 234, 0.12);
}

.music-video-wizard-step-title {
  font-size: 13px;
  font-weight: 700;
  color: var(--text-primary);
}

.music-video-upload-card {
  border: 1.5px solid var(--border-color);
  border-radius: 12px;
  padding: 0;
  background: var(--card-bg);
  overflow: hidden;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.music-video-upload-card:hover {
  border-color: rgba(147, 51, 234, 0.4);
  box-shadow: 0 2px 8px rgba(0,0,0,0.08);
}

.music-video-upload-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 14px;
  background: rgba(147, 51, 234, 0.04);
  border-bottom: 1px solid var(--border-color);
}

.music-video-upload-number {
  font-size: 14px;
  font-weight: 500;
  color: var(--brand-primary);
}

.icon-button-small {
  width: 28px;
  height: 28px;
  border-radius: 6px;
  border: none;
  background: rgba(0,0,0,0.05);
  color: var(--text-muted);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  transition: all 0.2s ease;
}

.icon-button-small:hover {
  background: rgba(255,0,0,0.1);
  color: #e53e3e;
}

.music-video-upload-body {
  display: grid;
  grid-template-columns: 200px 1fr;
  gap: 14px;
  padding: 14px;
}

.music-video-preview-container {
  position: relative;
  width: 200px;
  border-radius: 8px;
  overflow: hidden;
  background: #000;
  cursor: pointer;
  align-self: center;
}

.music-video-preview-thumb {
  width: 100%;
  height: auto;
  max-height: 150px;
  object-fit: contain;
  display: block;
  background: #000;
}

.music-video-preview-overlay {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.3);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: opacity 0.2s ease;
  pointer-events: auto;
}

.music-video-preview-overlay:hover {
  background: rgba(0, 0, 0, 0.5);
}

.play-button {
  width: 48px;
  height: 48px;
  background: rgba(147, 51, 234, 0.9);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
  transition: all 0.2s ease;
}

.play-button svg {
  width: 22px;
  height: 22px;
  display: block;
}

.music-video-preview-overlay:hover .play-button {
  transform: scale(1.1);
  background: var(--brand-primary);
}

.music-video-file-meta {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  background: linear-gradient(to top, rgba(0,0,0,0.8) 0%, transparent 100%);
  padding: 8px 10px;
}

.music-video-file-name {
  font-size: 11px;
  font-weight: 500;
  color: white;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.music-video-file-size {
  font-size: 10px;
  color: rgba(255, 255, 255, 0.8);
  margin-top: 2px;
}

.music-video-upload-prompt {
  display: flex;
  flex-direction: column;
  gap: 6px;
  flex: 1;
}

.music-mode-toggle-row {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.music-mode-wrapper {
  margin-top: 10px;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
}

.music-mode-separator {
  display: none;
}

.music-mode-label {
  font-size: 12px;
  font-weight: 500;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

.music-mode-switch {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px;
  border: 1px solid rgba(147, 51, 234, 0.16);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.92);
  box-shadow: none;
}

.music-mode-switch input[type="radio"] {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.music-mode-switch label {
  font-size: 12px;
  font-weight: 500;
  color: var(--text-primary);
  border-radius: 999px;
  padding: 6px 10px;
  border: 1px solid transparent;
  cursor: pointer;
  user-select: none;
  transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}

.music-mode-switch input[type="radio"]:checked + label {
  background: rgba(147, 51, 234, 0.11);
  color: var(--brand-primary);
  border-color: rgba(147, 51, 234, 0.14);
  font-weight: 700;
}

.music-mode-switch input[type="radio"]:not(:checked) + label {
  color: var(--text-primary);
}

.music-video-prompt-label {
  font-size: 12px;
  font-weight: 500;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

.music-personality-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  gap: 8px;
  margin-top: 8px;
}

.personality-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: 12px 8px;
  border: 2px solid var(--border-color);
  border-radius: 10px;
  background: white;
  cursor: pointer;
  transition: all 0.2s ease;
  font-family: inherit;
  position: relative;
}

.personality-card:hover {
  border-color: rgba(147, 51, 234, 0.4);
  background: rgba(147, 51, 234, 0.02);
  transform: translateY(-2px);
  box-shadow: 0 2px 8px rgba(0,0,0,0.08);
}

.personality-card.active {
  border: 2px solid var(--brand-primary);
  background: var(--brand-primary);
  box-shadow: 0 4px 16px rgba(147, 51, 234, 0.4);
  transform: translateY(-2px);
}

.personality-card.active .personality-icon {
  transform: scale(1.05);
  filter: brightness(1.2);
}

.personality-card.active .personality-name {
  font-weight: 700;
  color: white;
}

.personality-icon {
  font-size: 24px;
  line-height: 1;
  transition: transform 0.2s ease;
}

.personality-name {
  font-size: 11px;
  font-weight: 500;
  color: var(--text-primary);
  text-align: center;
  line-height: 1.3;
  transition: all 0.2s ease;
}

.music-custom-prompt-wrapper {
  margin-top: 12px;
}

.music-custom-prompt-wrapper textarea {
  width: 100%;
  min-height: 68px;
  resize: vertical;
  font-size: 13px;
  padding: 10px 12px;
  border: 1.5px solid var(--border-color);
  border-radius: 8px;
  background: var(--card-bg);
  color: var(--text-primary);
  font-family: inherit;
  line-height: 1.5;
  transition: all 0.2s ease;
}

.music-custom-prompt-wrapper textarea:focus {
  outline: none;
  border-color: var(--brand-primary);
  background: var(--hover);
}

.music-custom-prompt-wrapper textarea::placeholder {
  color: var(--text-muted);
  opacity: 0.6;
}

@media (max-width: 640px) {
  .music-video-upload-body {
    grid-template-columns: 1fr;
    gap: 12px;
  }
  
  .music-video-preview-container {
    width: 100%;
  }
  
  .music-video-preview-thumb {
    height: auto;
    aspect-ratio: 16 / 9;
  }
}

.music-video-inline-actions {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-top: 8px;
}

/* Approved card - clean and simple */
.music-video-approved-card {
  border: 1px solid rgba(34, 197, 94, 0.3);
  border-radius: 12px;
  padding: 0;
  background: white;
  overflow: hidden;
  margin-bottom: 20px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.04);
}

.music-video-approved-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 16px;
  background: rgba(34, 197, 94, 0.05);
  border-bottom: 1px solid rgba(34, 197, 94, 0.1);
}

.music-video-approved-title {
  font-size: 16px;
  font-weight: 700;
  color: #16a34a;
}

.music-video-approved-badge {
  padding: 6px 14px;
  border-radius: 20px;
  font-size: 12px;
  font-weight: 700;
  background: #22c55e;
  color: white;
  box-shadow: 0 2px 6px rgba(34, 197, 94, 0.3);
}

.music-video-approved-meta {
  padding: 12px 20px;
  background: rgba(147, 51, 234, 0.03);
  border-bottom: 1px solid var(--border-color);
}

.music-video-approved-personality {
  font-size: 13px;
  font-weight: 500;
  color: var(--brand-primary);
}

.music-video-approved-preview {
  width: 100%;
  max-width: 600px;
  display: block;
  margin: 20px auto;
  border-radius: 12px;
  background: #000;
  box-shadow: 0 4px 16px rgba(0,0,0,0.2);
}

.music-video-approved-actions {
  padding: 16px;
  display: flex;
  justify-content: center;
  gap: 12px;
}

/* Pending/generating card */
.music-video-details-card {
  border: 2px solid var(--border-color);
  border-radius: 16px;
  padding: 0;
  background: white;
  overflow: hidden;
  margin-bottom: 20px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.04);
}

.music-video-details-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 20px;
  background: linear-gradient(135deg, rgba(147, 51, 234, 0.08) 0%, rgba(147, 51, 234, 0.04) 100%);
  border-bottom: 2px solid rgba(147, 51, 234, 0.1);
}

.music-video-details-title {
  font-size: 16px;
  font-weight: 700;
  color: var(--brand-primary);
  display: flex;
  align-items: center;
  gap: 8px;
}

.music-video-details-title::before {
  content: "🎵";
  font-size: 20px;
}

.status-badge {
  padding: 5px 12px;
  border-radius: 16px;
  font-size: 10.5px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 140px;
  flex-shrink: 0;
  box-shadow: 0 1px 2px rgba(0,0,0,0.06);
}

.status-badge.success {
  background: linear-gradient(135deg, #22c55e 0%, #16a34a 100%);
  color: white;
}

.status-badge.ready {
  background: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%);
  color: white;
}

.status-badge.generating {
  background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%);
  color: white;
  animation: pulse 2s ease-in-out infinite;
}

@keyframes pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.7; }
}

.status-badge.failed {
  background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%);
  color: white;
}

.status-badge.pending {
  background: rgba(156, 163, 175, 0.2);
  color: #6b7280;
}

.music-video-details-prompt-section {
  padding: 16px 20px;
  border-bottom: 1px solid var(--border-color);
}

.music-video-generate-section {
  padding: 20px;
  display: flex;
  justify-content: center;
}

.music-video-details-prompt {
  display: flex;
  flex-direction: column;
  gap: 8px;
  flex: 1;
  min-width: 0;
  overflow: hidden;
}

.music-video-details-prompt textarea[readonly] {
  background: rgba(0,0,0,0.04);
  cursor: not-allowed;
  opacity: 0.6;
}

.music-video-details-label {
  font-size: 12px;
  font-weight: 700;
  color: var(--brand-primary);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  display: flex;
  align-items: center;
  gap: 6px;
}

.music-video-details-label::before {
  content: "✨";
  font-size: 14px;
}

.music-personality-display {
  width: 100%;
  max-width: 100%;
  padding: 12px 16px;
  border: 2px solid rgba(147, 51, 234, 0.2);
  border-radius: 12px;
  background: rgba(147, 51, 234, 0.05);
  color: var(--brand-primary);
  font-size: 13px;
  font-weight: 500;
  text-align: center;
  word-wrap: break-word;
  overflow-wrap: break-word;
  white-space: normal;
  line-height: 1.5;
  overflow: hidden;
  box-sizing: border-box;
}

.music-video-details-prompt textarea {
  width: 100%;
  min-height: 90px;
  max-height: 140px;
  resize: vertical;
  font-size: 14px;
  padding: 14px 16px;
  border: 2px solid var(--border-color);
  border-radius: 12px;
  background: white;
  color: var(--text-primary);
  font-family: inherit;
  line-height: 1.6;
  transition: all 0.2s ease;
  box-shadow: inset 0 1px 3px rgba(0,0,0,0.05);
}

.music-video-details-prompt textarea:focus {
  outline: none;
  border-color: var(--brand-primary);
  background: white;
  box-shadow: 0 0 0 3px rgba(147, 51, 234, 0.1), inset 0 1px 3px rgba(0,0,0,0.05);
}

.music-video-details-controls .button {
  align-self: flex-start;
  width: 100%;
  max-width: 180px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  padding: 12px 20px;
  font-weight: 700;
  font-size: 14px;
  box-shadow: 0 2px 8px rgba(147, 51, 234, 0.2);
  transition: all 0.2s ease;
  box-sizing: border-box;
}

.music-video-details-controls .button:hover:not(:disabled) {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(147, 51, 234, 0.3);
}

.music-video-details-controls .button:disabled {
  opacity: 0.5;
  cursor: not-allowed;
  background: #e5e7eb;
  color: #9ca3af;
  box-shadow: none;
}

.music-video-error {
  margin: 0 16px 16px 16px;
}

.music-video-tracks-section {
  padding: 20px;
  background: rgba(59, 130, 246, 0.02);
}

/* Carousel music section (shown below slides in design panel) */
.carousel-music-section {
  margin-top: 16px;
  padding: 14px 16px;
  border: 1px solid var(--brand-border, #e6e8f0);
  border-radius: 12px;
  background: var(--card-bg, #fff);
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.carousel-music-header {
  font-size: 13px;
  font-weight: 700;
  color: var(--brand-primary, #7c3aed);
  letter-spacing: -0.01em;
}

.carousel-music-track-item {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.carousel-music-track-label {
  font-size: 12px;
  font-weight: 500;
  color: var(--brand-muted, #6b7280);
  white-space: nowrap;
}

.carousel-music-audio {
  flex: 1;
  min-width: 160px;
  height: 36px;
}

.carousel-music-note {
  font-size: 12px;
  line-height: 1.4;
}

.carousel-music-badge {
  background: rgba(124, 58, 237, 0.08);
  color: var(--brand-primary, #7c3aed);
  border: 1px solid rgba(124, 58, 237, 0.18);
}

.music-video-tracks-section .lazy-video-preview {
  width: 100%;
  max-width: 500px;
  margin: 0 auto 20px auto;
  box-shadow: 0 4px 16px rgba(0,0,0,0.15);
}

.music-video-tracks-section .lazy-video-preview .music-video-track-preview {
  width: 100%;
  max-width: 100%;
  margin: 0;
  border-radius: 12px;
  background: #000;
  box-shadow: none;
}

.music-video-track-preview {
  width: 100%;
  max-width: 500px;
  display: block;
  margin: 0 auto 20px auto;
  border-radius: 12px;
  background: #000;
  box-shadow: 0 4px 16px rgba(0,0,0,0.15);
}

.music-video-tracks-header {
  font-size: 14px;
  font-weight: 700;
  color: var(--brand-primary);
  margin-bottom: 16px;
  text-align: center;
}

.music-video-track-item {
  background: white;
  border: 2px solid var(--border-color);
  border-radius: 12px;
  padding: 16px;
  margin-bottom: 12px;
}

.music-video-track-item:last-child {
  margin-bottom: 0;
}

.music-video-track-row {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.music-video-track-info {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.music-video-track-number {
  font-size: 13px;
  font-weight: 700;
  color: var(--brand-primary);
}

.music-video-audio {
  width: 100%;
  height: 40px;
  border-radius: 8px;
}

.music-video-approve-btn {
  width: 100%;
  font-weight: 700;
  font-size: 15px;
}

.music-video-final-section {
  border-top: 2px solid rgba(34, 197, 94, 0.2);
  padding: 20px;
  background: linear-gradient(135deg, rgba(34, 197, 94, 0.05) 0%, rgba(34, 197, 94, 0.02) 100%);
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.music-video-final-header {
  font-size: 16px;
  font-weight: 700;
  color: #16a34a;
  display: flex;
  align-items: center;
  gap: 8px;
}

.music-video-final-header::before {
  content: "✅";
  font-size: 20px;
}

.music-video-final-preview {
  width: 100%;
  max-width: 520px;
  border-radius: 12px;
  background: #000;
  box-shadow: 0 4px 16px rgba(0,0,0,0.15);
}

.music-video-download-btn {
  align-self: flex-start;
  min-width: 200px;
  font-weight: 700;
  font-size: 15px;
  box-shadow: 0 3px 10px rgba(34, 197, 94, 0.2);
}

.music-video-download-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 16px rgba(34, 197, 94, 0.3);
}

#music-config-modal .modal-card {
  position: relative;
  padding: 24px;
}

#music-config-modal .modal-close {
  position: absolute;
  top: 12px;
  right: 12px;
}

html[dir="rtl"] #music-config-modal .modal-close,
[dir="rtl"] #music-config-modal .modal-close,
.rtl #music-config-modal .modal-close {
  right: auto;
  left: 12px;
}

@media (max-width: 768px) {
  .music-video-details-card {
    border-radius: 12px;
    margin-bottom: 16px;
  }
  
  .music-video-details-body {
    grid-template-columns: 1fr;
    gap: 16px;
    padding: 16px;
  }
  
  .music-video-details-preview {
    width: 100%;
    height: auto;
    aspect-ratio: 16 / 9;
  }
  
  .music-video-details-controls .button {
    width: 100%;
  }
  
  .music-video-approve-btn,
  .music-video-download-btn {
    width: 100%;
  }
  
  .music-video-tracks-section,
  .music-video-final-section {
    padding: 16px;
  }
}

/* Legacy styles for backwards compatibility */
.music-video-item {
  border: 1px solid var(--border-color);
  border-radius: 10px;
  padding: 14px;
  background: var(--card-bg);
}

.music-video-item .music-video-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 10px;
}

.music-video-item .music-video-name {
  font-size: 14px;
  font-weight: 500;
  color: var(--text-primary);
}

.music-video-item textarea {
  width: 100%;
  min-height: 70px;
  resize: vertical;
}

.video-ref-slot textarea::placeholder {
  color: var(--brand-text-muted);
  opacity: 0.7;
}

.video-ref-slot textarea:hover {
  border-color: rgba(147, 51, 234, 0.3);
  background: var(--hover);
}

.video-ref-slot textarea:focus {
  outline: none;
  border-color: var(--brand-primary);
  box-shadow: 0 0 0 3px rgba(147, 51, 234, 0.1);
  background: var(--card-bg);
}

.video-ref-slot textarea:disabled {
  background: var(--brand-bg);
  color: var(--brand-muted);
  cursor: not-allowed;
  opacity: 0.6;
}

.video-ref-slot .video-ref-generate-btn {
  margin-top: 8px;
}

.video-veo-frame-source-row .create-library-pick,
.video-ref-source-row .create-library-pick {
  width: auto;
  margin-top: 0;
  flex: 0 0 auto;
  min-height: 42px;
  padding-inline: 16px;
  border-radius: 14px;
  font-size: 13px;
  font-weight: 850;
  letter-spacing: -0.01em;
}

.button-credit-badge {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  margin-inline-start: 6px;
  padding: 3px 8px;
  background: rgba(147, 51, 234, 0.15);
  color: var(--brand-primary);
  border: 1px solid rgba(147, 51, 234, 0.28);
  font-size: 11px;
  font-weight: 700;
  border-radius: 999px;
  vertical-align: middle;
  line-height: 1;
  flex-shrink: 0;
}

.button-credit-badge + .button-credit-badge {
  margin-inline-start: 4px;
}

.btn-credit-icon {
  width: 11px;
  height: 11px;
  color: inherit;
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
}

.btn-credit-count {
  line-height: 1;
}

/* On primary (dark) buttons the badge flips to white */
.button:not(.secondary):not(.outline) .button-credit-badge {
  background: rgba(255, 255, 255, 0.32);
  border-color: rgba(255, 255, 255, 0.5);
  color: #fff;
}

.video-ref-info-alert {
  margin-top: 12px;
  margin-bottom: 0;
}

.video-settings-group {
  margin-top: 24px;
  padding-top: 24px;
  border-top: 1px solid rgba(0,0,0,0.06);
}

.video-settings-row {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 16px;
  margin-bottom: 16px;
}

.video-settings-row .field {
  margin-bottom: 0;
}
.video-settings-row .field label,
.video-settings-row .field > label {
  font-size: 11px !important;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--brand-muted, #94a3b8);
  margin-bottom: 4px;
  font-family: 'Tajawal', 'Cairo', system-ui, -apple-system, 'Segoe UI', sans-serif;
}

.video-settings-row .hint {
  margin-top: 4px;
  font-size: 11px;
}

@media (max-width: 768px) {
  .video-mode-toggle {
    grid-template-columns: repeat(2, 1fr);
    gap: 8px;
  }
  .video-mode-card-content {
    padding: 10px 8px;
    gap: 4px;
  }
  .video-mode-card-icon {
    font-size: 20px;
    margin-bottom: 2px;
  }
  .video-mode-card-title {
    font-size: 12px;
  }
  .video-mode-card-subtitle {
    font-size: 10px;
  }
  
  .video-ref-grid {
    grid-template-columns: 1fr;
    gap: 0;
  }
  .video-ref-grid .video-ref-slot {
    padding: 16px 0;
    border-bottom: 1px solid #E5E7EB;
  }
  .video-ref-grid .video-ref-slot:first-child {
    padding-top: 0;
  }
  .video-ref-grid .video-ref-slot:last-child {
    border-bottom: none;
    padding-bottom: 0;
  }
  .video-ref-grid .video-ref-label {
    font-size: 14px;
    font-weight: 700;
    color: #111827;
    padding-bottom: 4px;
    margin-bottom: 2px;
  }
  
  .video-settings-row {
    grid-template-columns: 1fr;
  }

  .ugc-product-row > .field#product-images-field .upload-box {
    padding: 14px;
  }
  .ugc-product-row > .field#product-images-field .upload-box-title { font-size: 13px; }
  .ugc-product-row > .field#product-images-field .upload-box-subtitle { font-size: 11px; }
}

/* Compact form fields */
#create-form .field {
  margin-bottom: 2px;
}

#create-form .stack {
  gap: 8px;
}

.field label {
  font-weight: 500;
  font-size: 14px;
}

.required-star {
  color: #e53935;
  font-weight: 700;
}

.required-label {
  display: inline-block;
  margin-left: 6px;
  padding: 2px 6px;
  border-radius: 8px;
  font-size: 11px;
  font-weight: 700;
  color: #b91c1c;
  background: #fee2e2;
  text-transform: uppercase;
  letter-spacing: 0.3px;
}

.required-field input,
.required-field textarea,
.required-field select {
  border-color: rgba(239, 68, 68, 0.5);
  background: rgba(254, 242, 242, 0.4);
}

.required-field input:focus,
.required-field textarea:focus,
.required-field select:focus {
  border-color: #ef4444;
  box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.15);
}

.optional-label {
  color: var(--brand-text-muted);
  font-weight: 400;
  font-size: 12px;
}

.from-image-note {
  font-size: 11px;
  font-weight: 400;
  margin-inline-start: 4px;
}

.field input,
.field textarea,
.field select {
  border: 1px solid var(--brand-border);
  border-radius: 12px;
  padding: 12px 14px;
  font-size: 14px;
  font-family: inherit;
  transition: border 0.2s ease, box-shadow 0.2s ease;
}

.color-input-row {
  display: flex;
  align-items: center;
  gap: 8px;
}

.color-input-row input[type="color"] {
  width: 44px;
  height: 44px;
  padding: 0;
  border-radius: 10px;
  border: 1px solid var(--brand-border);
  background: #fff;
}

.color-input-row .color-code-input {
  flex: 1;
  min-width: 0;
  border: 1px solid var(--brand-border);
  border-radius: 12px;
  padding: 12px 14px;
  font-size: 14px;
  background: #fff;
  min-height: 44px;
  box-sizing: border-box;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  transition: border 0.2s ease, box-shadow 0.2s ease;
}

.color-input-row .color-code-input:focus {
  outline: none;
  border-color: var(--brand-primary);
  box-shadow: 0 0 0 3px rgba(147, 51, 234, 0.15);
}

.brand-colors-block .row:first-child {
  margin-bottom: 4px;
}

.brand-colors-block .row:last-child {
  margin-top: 4px;
}

.brand-colors-inputs-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  gap: 10px;
  align-items: center;
}

.brand-colors-inputs-row .color-input-row {
  min-width: 0;
}

.brand-colors-inputs-row > .field.brand-color-input-field {
  min-width: 0;
  margin: 0;
}

.brand-color-swap-btn {
  box-sizing: border-box;
  width: 40px;
  height: 40px;
  min-width: 40px;
  max-width: 40px;
  padding: 0;
  margin: 0;
  border: 1px solid var(--brand-border);
  border-radius: 12px;
  background: #fff;
  box-shadow: 0 2px 8px rgba(15, 23, 42, 0.12);
  color: var(--brand-primary, #7c3aed);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  flex: none;
  font-family: inherit;
  appearance: none;
  -webkit-appearance: none;
  transition: box-shadow 0.2s ease, transform 0.2s ease;
}

.brand-color-swap-btn:hover {
  transform: translateY(-1px);
  box-shadow: 0 6px 16px rgba(15, 23, 42, 0.16);
}

.brand-color-swap-btn svg {
  display: block;
  flex: none;
}

@media (max-width: 520px) {
  .brand-colors-inputs-row {
    grid-template-columns: 1fr;
    gap: 8px;
  }

  .brand-color-swap-btn {
    justify-self: center;
  }
}

.field input:focus,
.field textarea:focus,
.field select:focus {
  outline: none;
  border-color: var(--brand-primary);
  box-shadow: 0 0 0 3px rgba(147, 51, 234, 0.15);
}

.field textarea {
  min-height: 110px;
  resize: vertical;
  width: 100%;
}

.field textarea.full-width {
  width: 100%;
}

#creative-direction-field {
  width: 100%;
}

#creative-direction-field label,
#creative-direction-field textarea {
  display: block;
  width: 100%;
}

.row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 12px;
}

#product-images-slot {
  width: 100%;
  margin-top: 12px;
}

.ugc-inline-row {
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  align-items: start;
}

.ugc-inline-row .field select {
  display: block;
  width: 100%;
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* ===== UGC: force single-column when active ===== */
.row.create-top.ugc-active {
  grid-template-columns: 1fr;
}
/* Product toggle + upload — toggle stays in place, upload overlaps below */
.ugc-product-row {
  position: relative;
}
.ugc-product-row > #ugc-product-field {
  flex-shrink: 0;
}
.ugc-product-row > .field#product-images-field {
  margin-top: 8px;
}
.ugc-product-row > .field#product-images-field > label { font-size: 12px; }
.ugc-product-row > .field#product-images-field .upload-box {
  min-height: 0;
  padding: 10px 14px;
}
.ugc-product-row > .field#product-images-field .upload-box-title { font-size: 12px; }
.ugc-product-row > .field#product-images-field .upload-box-subtitle { font-size: 10px; }
.ugc-product-row > .field#product-images-field > .hint { display: none; }
.ugc-product-row > .field#product-images-field > .hint#ugc-product-upload-override-hint { display: block; }
.ugc-product-row > .field#product-images-field.ugc-url-mode > .upload-box,
.ugc-product-row > .field#product-images-field.ugc-url-mode > .upload-preview,
.ugc-product-row > .field#product-images-field.ugc-url-mode > .hint[data-i18n="app_product_required"],
.ugc-product-row > .field#product-images-field.ugc-url-mode > .hint#ugc-product-upload-override-hint {
  display: none !important;
}
.ugc-product-source-row {
  margin-bottom: 10px;
  flex-wrap: wrap;
}
.ugc-product-url-panel {
  margin-bottom: 10px;
  padding: 8px 0 0;
  border: 0;
  border-radius: 0;
  background: transparent;
}
.ugc-product-url-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 8px;
  align-items: center;
}
.ugc-product-url-row input {
  min-width: 0;
}
.ugc-product-url-panel > .hint {
  margin-top: 10px;
}
.ugc-product-url-hint-feedback a {
  color: var(--brand-primary, #7c3aed);
  font-weight: 700;
}
.ugc-product-url-hint-feedback a:hover {
  color: color-mix(in srgb, var(--brand-primary, #7c3aed) 88%, #000 12%);
}
.ugc-product-url-status {
  display: none;
  margin-top: 8px;
  font-size: 12px;
  color: var(--brand-muted);
}
.ugc-product-url-status.is-visible {
  display: block;
}
.ugc-product-url-status.is-error {
  color: var(--danger, #dc2626);
}
.ugc-product-url-status.is-success {
  color: var(--success, #059669);
}
.ugc-product-candidates {
  display: block;
  gap: 10px;
  margin-top: 12px;
}
.ugc-product-candidates-title {
  font-size: 12px;
  font-weight: 700;
  color: var(--brand-ink);
  margin-bottom: 8px;
}
.ugc-product-candidates-grid {
  display: grid;
  gap: 10px;
}
.ugc-product-candidate {
  border: 1px solid rgba(15, 23, 42, 0.07);
  border-radius: 14px;
  background: #fff;
  padding: 12px;
  width: 100%;
  text-align: start;
  cursor: pointer;
  transition: border-color .16s ease, box-shadow .16s ease, background-color .16s ease;
  box-shadow: 0 8px 24px rgba(15, 23, 42, 0.04);
}
.ugc-product-candidate.is-selected {
  border-color: rgba(124, 58, 237, 0.5);
  box-shadow: 0 0 0 1px rgba(124, 58, 237, 0.08), 0 10px 28px rgba(15, 23, 42, 0.05);
  background: #fcfbff;
}
.ugc-product-candidate-media {
  width: 72px;
  min-width: 72px;
  height: 72px;
  border-radius: 12px;
  overflow: hidden;
  border: 0;
  background: #fff;
}
.ugc-product-candidate-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.ugc-product-candidate-content {
  min-width: 0;
  flex: 1;
}
.ugc-product-candidate {
  display: flex;
  gap: 12px;
  align-items: flex-start;
}
.ugc-product-candidate-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 10px;
}
.ugc-product-candidate-name {
  font-size: 14px;
  font-weight: 700;
  color: var(--brand-ink);
}
.ugc-product-candidate-price {
  font-size: 12px;
  font-weight: 700;
  color: var(--brand-ink);
  white-space: nowrap;
}
.ugc-product-candidate-desc {
  margin-top: 6px;
  font-size: 12px;
  color: var(--brand-muted);
  line-height: 1.45;
}
.ugc-product-candidate-actions {
  margin-top: 10px;
}
.ugc-product-candidate-cta {
  display: inline-flex;
  align-items: center;
  min-height: 30px;
  padding: 0 10px;
  border-radius: 999px;
  background: rgba(15, 23, 42, 0.05);
  color: var(--brand-ink);
  font-size: 12px;
  font-weight: 700;
}
.ugc-product-selected {
  margin-top: 12px;
}
.ugc-scene-place-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(112px, 1fr));
  gap: 10px;
}
.ugc-scene-place-card {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 0;
  border: 2px solid transparent;
  border-radius: 12px;
  background: #f8fafc;
  overflow: hidden;
  cursor: pointer;
  text-align: start;
  font-family: 'Tajawal', system-ui, -apple-system, 'Segoe UI', sans-serif;
  color: var(--brand-ink, #1f2937);
}
.ugc-scene-place-card:hover,
.ugc-scene-place-card:focus-visible {
  border-color: color-mix(in srgb, var(--brand-primary, #7c3aed) 45%, transparent);
}
.ugc-scene-place-card.is-selected {
  border-color: var(--brand-primary, #7c3aed);
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--brand-primary, #7c3aed) 16%, transparent);
}
.ugc-scene-place-card img {
  width: 100%;
  aspect-ratio: 1;
  object-fit: cover;
  display: block;
  background: #eef2f7;
}
.ugc-scene-place-card-meta {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 0 8px 8px;
  min-width: 0;
}
.ugc-scene-place-card-cat {
  font-size: 12px;
  font-weight: 500;
  color: var(--brand-muted, #6b7280);
}
.ugc-scene-place-card-caption {
  font-size: 12px;
  font-weight: 400;
  color: var(--brand-ink, #1f2937);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.ugc-product-review-card {
  border: 1px solid rgba(15, 23, 42, 0.07);
  border-radius: 16px;
  background: #fff;
  padding: 14px;
  box-shadow: 0 10px 30px rgba(15, 23, 42, 0.04);
}
.ugc-product-review-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  margin-bottom: 12px;
}
.ugc-product-review-title {
  font-size: 13px;
  font-weight: 700;
  color: var(--brand-ink);
}
.ugc-product-review-body {
  display: grid;
  grid-template-columns: 180px minmax(0, 1fr);
  gap: 14px;
  align-items: start;
}
.ugc-product-review-media {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.ugc-product-review-main-image {
  width: 100%;
  height: auto;
  max-height: 240px;
  border-radius: 14px;
  border: 0;
  object-fit: contain;
  display: block;
  background: #f8fafc;
}
.ugc-product-review-thumbs {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(62px, 1fr));
  gap: 8px;
}
.ugc-product-review-details {
  display: flex;
  flex-direction: column;
  gap: 12px;
  min-width: 0;
}
.ugc-product-review-field {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.ugc-product-review-label {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--brand-muted);
}
.ugc-product-review-value {
  font-size: 13px;
  line-height: 1.5;
  color: var(--brand-ink);
  word-break: break-word;
}
.ugc-product-review-input {
  width: 100%;
  min-width: 0;
  padding: 10px 12px;
  border: 1px solid rgba(15, 23, 42, 0.08);
  border-radius: 12px;
  background: #fff;
  color: var(--brand-ink);
  font: inherit;
  line-height: 1.45;
}
.ugc-product-review-input:focus {
  outline: none;
  border-color: rgba(124, 58, 237, 0.45);
  box-shadow: 0 0 0 3px rgba(124, 58, 237, 0.10);
}
.ugc-product-review-textarea {
  resize: vertical;
  min-height: 110px;
}
.ugc-product-review-description {
  max-height: none;
  overflow: visible;
  padding: 0;
  border-radius: 0;
  background: transparent;
  border: 0;
}
.ugc-product-image-option {
  position: relative;
  border: 1px solid rgba(15, 23, 42, 0.07);
  border-radius: 12px;
  overflow: hidden;
  background: #fff;
  cursor: pointer;
  padding: 0;
}
.ugc-product-image-option.is-selected {
  border-color: rgba(124, 58, 237, 0.5);
  box-shadow: 0 0 0 1px rgba(124, 58, 237, 0.08);
}
.ugc-product-image-option img {
  width: 100%;
  height: auto;
  max-height: 72px;
  object-fit: contain;
  display: block;
  background: #fff;
}
.ugc-product-image-option-label {
  padding: 6px 8px;
  font-size: 11px;
  font-weight: 500;
  text-align: center;
  color: var(--brand-ink);
}
@media (max-width: 720px) {
  .ugc-product-url-row {
    grid-template-columns: 1fr;
  }
  .ugc-product-review-body {
    grid-template-columns: 1fr;
  }
  .ugc-product-candidate {
    flex-direction: column;
  }
  .ugc-product-candidate-media {
    width: 100%;
    height: 148px;
  }
}

/* ===== UGC Panel Layout ===== */
.ugc-panel {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.ugc-panel > .field,
.ugc-panel > .ugc-field-compact,
.ugc-panel > .ugc-product-row,
.ugc-panel > .ugc-settings-row,
.ugc-panel > .ugc-idea-section,
.ugc-panel > .ugc-manual-fields {
  padding-top: 12px;
}
/* Segmented pill */
.ugc-mode-pill {
  display: inline-flex;
  border: 1.5px solid var(--brand-border);
  border-radius: 10px;
  overflow: hidden;
  align-self: flex-start;
  background: var(--brand-bg);
}
.ugc-pill-btn {
  padding: 7px 24px;
  font-size: 13px;
  font-weight: 500;
  font-family: inherit;
  border: none;
  background: transparent;
  color: var(--brand-muted);
  cursor: pointer;
  transition: all 0.15s;
  white-space: nowrap;
  line-height: 1.4;
}
.ugc-pill-btn,
.ugc-toggle-option {
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
.ugc-toggle-option span {
  display: inline-block;
  line-height: 1.25;
}
.ugc-pill-btn.active {
  background: var(--brand-primary);
  color: #fff;
}
.ugc-pill-btn:not(.active):hover {
  color: var(--brand-ink);
  background: rgba(0,0,0,0.03);
}
/* Product toggle — compact Yes/No inline */
.ugc-field-compact {
  margin-bottom: 0;
}
.ugc-toggle-row {
  display: inline-flex;
  gap: 6px;
  margin-top: 4px;
}
.ugc-toggle-option {
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 5px 14px;
  border: 1.5px solid var(--brand-border);
  border-radius: 8px;
  font-size: 13px;
  font-weight: 500;
  color: var(--brand-ink);
  cursor: pointer;
  transition: all 0.15s;
  white-space: nowrap;
}
.ugc-toggle-option:has(input:checked) {
  border-color: var(--brand-primary);
  background: rgba(147,51,234,0.06);
  color: var(--brand-primary);
}
.ugc-toggle-option input {
  display: none;
}
html[lang="ar"] .ugc-pill-btn,
html[lang="ar"] .ugc-toggle-option,
html[lang="ar"] .ugc-toggle-option span {
  font-family: 'Tajawal', 'Cairo', system-ui, -apple-system, 'Segoe UI', sans-serif;
  font-weight: 700;
  letter-spacing: 0;
}
html[lang="ar"] .ugc-pill-btn,
html[lang="ar"] .ugc-toggle-option {
  line-height: 1.2;
}
/* Settings row: Duration | Language | Accent | Quality */
.ugc-settings-row {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
  align-items: end;
}
.ugc-settings-row .field {
  margin-bottom: 0;
}
.ugc-settings-row .field label,
.ugc-settings-row .field > label {
  font-size: 11px !important;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--brand-muted, #94a3b8);
  margin-bottom: 4px;
  font-family: 'Tajawal', 'Cairo', system-ui, -apple-system, 'Segoe UI', sans-serif;
}
.ugc-settings-row select {
  font-size: 13px;
  padding: 7px 10px;
  font-family: 'Tajawal', 'Cairo', system-ui, -apple-system, 'Segoe UI', sans-serif;
}

/* Compact product / place section headings */
#ugc-product-field > label,
#ugc-scene-place-field > label {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--brand-muted, #94a3b8);
  margin-bottom: 6px;
  font-family: 'Tajawal', 'Cairo', system-ui, -apple-system, 'Segoe UI', sans-serif;
}
#ugc-scene-place-field {
  margin-top: 12px;
}
#ugc-scene-place-field .ugc-scene-place-controls {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}
#ugc-scene-place-field .ugc-scene-place-controls .ugc-toggle-row {
  margin-top: 0;
}
#ugc-scene-place-field .brand-assets-manage-pill {
  margin-top: 0;
}
#ugc-scene-place-field .ugc-scene-place-picker {
  margin-top: 10px;
}
#ugc-scene-place-field .ugc-scene-place-empty {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin: 0 0 8px;
}

#ugc-brand-logo-field > label {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--brand-muted, #94a3b8);
  margin-bottom: 6px;
  font-family: 'Tajawal', 'Cairo', system-ui, -apple-system, 'Segoe UI', sans-serif;
}
#ugc-brand-logo-field {
  margin-top: 12px;
}
#ugc-brand-logo-field .ugc-toggle-row {
  margin-top: 0;
}
#ugc-brand-logo-field .ugc-brand-logo-placement-wrap {
  margin-top: 10px;
}
#ugc-brand-logo-field .ugc-brand-logo-placement-wrap > label {
  display: block;
  font-size: 12px;
  font-weight: 500;
  color: var(--brand-text, #0f172a);
  margin-bottom: 4px;
}
#ugc-brand-logo-field .ugc-brand-logo-placement-wrap select {
  width: 100%;
  max-width: 280px;
}

/* Source toggle (upload/url) — make compact */
.ugc-product-source-row .ugc-toggle-option {
  font-size: 12px;
  padding: 4px 12px;
  font-family: 'Tajawal', 'Cairo', system-ui, -apple-system, 'Segoe UI', sans-serif;
}

/* Entire ugc panel font baseline */
.ugc-basic-setup,
.ugc-panel {
  font-family: 'Tajawal', 'Cairo', system-ui, -apple-system, 'Segoe UI', sans-serif;
}
.ugc-field-label-row {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 6px;
  margin-bottom: 3px;
}
.ugc-field-label-row label {
  margin-bottom: 0;
  flex: 0 1 auto;
  min-width: 0;
}
.ugc-field-help-btn {
  flex-shrink: 0;
  width: 22px;
  height: 22px;
  border: none;
  border-radius: 999px;
  background: rgba(100, 116, 139, 0.14);
  color: #64748b;
  font-size: 11px;
  font-weight: 700;
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  padding: 0;
  transition: background 0.15s ease, color 0.15s ease, transform 0.15s ease;
}
.ugc-field-help-btn:hover {
  background: var(--brand-primary);
  color: #fff;
  transform: scale(1.06);
}
/* Contextual help next to UGC fields (not toast-stack) */
.ugc-field-help-popover {
  position: fixed;
  z-index: 100060;
  min-width: 220px;
  max-width: min(320px, calc(100vw - 24px));
  padding: 0;
  margin: 0;
  border-radius: 12px;
  background: #111827;
  color: #f9fafb;
  box-shadow: 0 12px 40px rgba(17, 24, 39, 0.35);
  border: 1px solid rgba(255, 255, 255, 0.08);
  animation: ugcHelpPopoverIn 0.15s ease-out;
  pointer-events: auto;
}
.ugc-field-help-popover-inner {
  position: relative;
  padding: 12px 14px 12px 12px;
}
.ugc-field-help-popover-close {
  position: absolute;
  top: 8px;
  inset-inline-end: 8px;
  width: 28px;
  height: 28px;
  border: none;
  border-radius: 8px;
  background: transparent;
  color: inherit;
  cursor: pointer;
  font-size: 14px;
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0.85;
}
.ugc-field-help-popover-close:hover {
  opacity: 1;
  background: rgba(255, 255, 255, 0.08);
}
.ugc-field-help-popover-title {
  font-size: 14px;
  font-weight: 700;
  padding-inline-end: 32px;
  margin-bottom: 8px;
  line-height: 1.35;
}
.ugc-field-help-popover-body {
  font-size: 13px;
  font-weight: 400;
  line-height: 1.45;
  color: rgba(249, 250, 251, 0.92);
  max-height: min(50vh, 280px);
  overflow-y: auto;
}
@keyframes ugcHelpPopoverIn {
  from { opacity: 0; transform: translateY(4px); }
  to { opacity: 1; transform: translateY(0); }
}
/* Idea section (auto mode) */
.ugc-idea-section {
  display: flex;
  flex-direction: column;
}
.ugc-idea-section .field {
  margin-bottom: 0;
}
.ugc-idea-header {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 10px;
}
.ugc-idea-header label {
  margin-bottom: 0;
}
.ugc-auto-idea-info {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 12px 14px;
  margin: 10px 0 10px;
  background: linear-gradient(135deg, #eff6ff 0%, #f8fbff 100%);
  border: 1px solid #bfdbfe;
  border-radius: 12px;
  color: #1e3a8a;
  font-size: 13px;
  line-height: 1.5;
}
.ugc-auto-idea-info strong {
  color: #1e40af;
  font-size: 13px;
}
.ugc-auto-idea-btn {
  white-space: nowrap;
  padding: 6px 10px;
}
.ugc-manual-fields {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  padding-top: 24px;
  margin-top: 8px;
  border-top: 1px solid var(--brand-border);
}
.ugc-manual-fields .field {
  margin-bottom: 0;
}
.ugc-manual-fields textarea {
  resize: vertical;
  min-height: 80px;
}
.ugc-actor-label {
  display: flex;
  align-items: center;
  gap: 6px;
  font-weight: 500;
  font-size: 14px;
  cursor: pointer;
}
.ugc-actor-label input[type="checkbox"] {
  margin: 0;
}
.ugc-segment-scenes-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  justify-content: center;
  margin-top: 14px;
  margin-bottom: 0;
}
.ugc-video-count-control {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--brand-muted, #6b7280);
  font-size: 13px;
  font-weight: 500;
}
.ugc-video-count-control select {
  min-width: 136px;
}
#ugc-ai-write-idea-modal .ugc-ai-write-idea-modal-card {
  max-width: 520px;
  width: min(520px, calc(100vw - 32px));
}
#ugc-ai-write-idea-modal .ugc-ai-write-idea-input {
  width: 100%;
  min-height: 110px;
  resize: vertical;
  margin-top: 4px;
  font-family: 'Tajawal', 'Cairo', system-ui, -apple-system, 'Segoe UI', sans-serif;
}
#ugc-ai-write-idea-modal .ugc-ai-write-idea-modal-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 16px;
}
html[dir="rtl"] #ugc-ai-write-idea-modal .modal-close,
[dir="rtl"] #ugc-ai-write-idea-modal .modal-close,
.rtl #ugc-ai-write-idea-modal .modal-close,
html[lang="ar"] #ugc-ai-write-idea-modal .modal-close,
html[lang="he"] #ugc-ai-write-idea-modal .modal-close {
  left: 16px;
  right: auto;
}
.ugc-segment-scenes-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.ugc-segment-scene-card {
  position: relative;
  padding: 18px 18px 20px;
  border-radius: 22px;
  border: 1px solid rgba(148, 163, 184, 0.18);
  background:
    radial-gradient(circle at top right, rgba(124, 58, 237, 0.07), transparent 34%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.98) 0%, rgba(248, 250, 252, 0.98) 100%);
  box-shadow:
    0 18px 44px rgba(15, 23, 42, 0.06),
    0 2px 8px rgba(15, 23, 42, 0.04);
}
html[dir="rtl"] .ugc-segment-scene-card,
[dir="rtl"] .ugc-segment-scene-card {
  background:
    radial-gradient(circle at top left, rgba(124, 58, 237, 0.07), transparent 34%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.98) 0%, rgba(248, 250, 252, 0.98) 100%);
}
.ugc-segment-scene-card-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 14px;
}
.ugc-segment-scene-card-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
  flex-wrap: wrap;
}
.ugc-seg-ai-write-tools {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}
/* Scene 2+ AI Writes only — do not frame the free-text field as "based on Scene 1". */
.ugc-seg-ai-write-tools--from-scene1 {
  flex-direction: column;
  align-items: flex-end;
  gap: 3px;
}
html[dir="rtl"] .ugc-seg-ai-write-tools--from-scene1,
[dir="rtl"] .ugc-seg-ai-write-tools--from-scene1 {
  align-items: flex-start;
}
.ugc-seg-ai-write-from-scene1 {
  font-size: 11px;
  font-weight: 500;
  line-height: 1.2;
  color: var(--brand-primary, #6366f1);
  font-family: 'Tajawal', 'Cairo', system-ui, -apple-system, 'Segoe UI', sans-serif;
  opacity: 0.9;
  white-space: nowrap;
}
.ugc-segment-scene-card .video-ai-write-personality-panel {
  margin: 0 0 12px;
}
.ugc-seg-ai-write-btn {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 5px 13px;
  border-radius: 20px;
  border: 1.5px solid rgba(99, 102, 241, 0.35);
  background: linear-gradient(135deg, rgba(99, 102, 241, 0.08) 0%, rgba(124, 58, 237, 0.08) 100%);
  color: var(--brand-primary, #6366f1);
  font-size: 12px;
  font-weight: 500;
  font-family: 'Tajawal', 'Cairo', system-ui, -apple-system, 'Segoe UI', sans-serif;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s, opacity 0.15s;
  white-space: nowrap;
}
.ugc-seg-ai-write-btn:before {
  content: '✦';
  font-size: 10px;
  opacity: 0.8;
}
.ugc-seg-ai-write-btn:hover {
  background: linear-gradient(135deg, rgba(99, 102, 241, 0.14) 0%, rgba(124, 58, 237, 0.14) 100%);
  border-color: rgba(99, 102, 241, 0.6);
}
.ugc-seg-ai-write-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}
.ugc-seg-ai-write-btn.is-loading {
  opacity: 1;
  cursor: wait;
  pointer-events: none;
}
.ugc-seg-ai-write-btn.is-loading:before {
  display: none;
}
.ugc-seg-ai-write-loading-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.ugc-seg-ai-write-spinner {
  width: 12px;
  height: 12px;
  border: 2px solid rgba(99, 102, 241, 0.25);
  border-top-color: var(--brand-primary, #6366f1);
  border-radius: 50%;
  animation: ugc-ai-write-spin 0.75s linear infinite;
  flex-shrink: 0;
}
.ugc-seg-ai-write-loading-label {
  font-size: 12px;
  font-weight: 500;
  line-height: 1;
}
@keyframes ugc-ai-write-spin {
  to { transform: rotate(360deg); }
}
@media (prefers-reduced-motion: reduce) {
  .ugc-seg-ai-write-spinner {
    animation: none;
    border-top-color: rgba(99, 102, 241, 0.25);
    background: rgba(99, 102, 241, 0.35);
  }
}

/* Nudge users toward AI Writes instead of hand-typing video prompts */
@keyframes video-ai-write-vibrate {
  0%, 70%, 100% { transform: translate3d(0, 0, 0) rotate(0deg); }
  73% { transform: translate3d(-3px, 0, 0) rotate(-1.5deg); }
  76% { transform: translate3d(3px, 0, 0) rotate(1.5deg); }
  79% { transform: translate3d(-2.5px, 0, 0) rotate(-1deg); }
  82% { transform: translate3d(2.5px, 0, 0) rotate(1deg); }
  85% { transform: translate3d(-1.5px, 0, 0) rotate(-0.5deg); }
  88% { transform: translate3d(1.5px, 0, 0) rotate(0.5deg); }
  91% { transform: translate3d(-1px, 0, 0) rotate(0deg); }
  94% { transform: translate3d(1px, 0, 0) rotate(0deg); }
}
.ugc-seg-ai-write-btn[data-video-ai-write-trigger]:not(:disabled):not([hidden]):not([aria-expanded="true"]) {
  animation: video-ai-write-vibrate 2.2s ease-in-out infinite;
  will-change: transform;
}
.ugc-seg-ai-write-btn[data-video-ai-write-trigger]:hover,
.ugc-seg-ai-write-btn[data-video-ai-write-trigger]:focus-visible,
.ugc-seg-ai-write-btn[data-video-ai-write-trigger][aria-expanded="true"],
.ugc-seg-ai-write-btn[data-video-ai-write-trigger]:disabled {
  animation: none;
}
@media (prefers-reduced-motion: reduce) {
  .ugc-seg-ai-write-btn[data-video-ai-write-trigger] {
    animation: none !important;
  }
}

.ugc-segment-remove-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  border: 1px solid rgba(148, 163, 184, 0.3);
  background: transparent;
  color: var(--brand-muted, #9ca3af);
  font-size: 14px;
  cursor: pointer;
  line-height: 1;
  transition: background 0.12s, color 0.12s;
}
.ugc-segment-remove-btn:hover {
  background: rgba(239, 68, 68, 0.08);
  color: #ef4444;
  border-color: rgba(239, 68, 68, 0.3);
}
.ugc-segment-scene-card-header {
  margin-bottom: 8px;
}
.ugc-segment-scene-index {
  display: block;
  font-weight: 700;
  font-size: 14px;
  font-family: 'Tajawal', 'Cairo', system-ui, -apple-system, 'Segoe UI', sans-serif;
  text-align: start;
}
.ugc-segment-scene-card-top--with-meter {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px 14px;
}
.ugc-seg-meter {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 10px;
  font-size: 12px;
  line-height: 1.35;
  max-width: 100%;
  text-align: end;
}
.ugc-seg-meter-words {
  color: var(--brand-muted, #6b7280);
  font-variant-numeric: tabular-nums;
}
.ugc-seg-meter-time {
  font-variant-numeric: tabular-nums;
  color: var(--brand-text, #374151);
}
.ugc-seg-meter-badge {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  padding: 3px 8px;
  border-radius: 999px;
}
.ugc-seg-meter--short .ugc-seg-meter-badge {
  background: rgba(59, 130, 246, 0.12);
  color: #1d4ed8;
}
.ugc-seg-meter--safe .ugc-seg-meter-badge {
  background: rgba(22, 163, 74, 0.14);
  color: #15803d;
}
.ugc-seg-meter--risky .ugc-seg-meter-badge {
  background: rgba(234, 179, 8, 0.2);
  color: #a16207;
}
.ugc-seg-meter--bad .ugc-seg-meter-badge {
  background: rgba(220, 38, 38, 0.14);
  color: #b91c1c;
}
.ugc-segment-scene-words-block {
  margin: 0;
  text-align: start;
}
.ugc-segment-scene-words-label {
  display: block;
  font-size: 11px;
  font-weight: 500;
  font-family: 'Tajawal', 'Cairo', system-ui, -apple-system, 'Segoe UI', sans-serif;
  margin-bottom: 8px;
}
.ugc-segment-words-hint {
  margin: 0 0 10px !important;
  font-size: 12px !important;
}
.ugc-seg-words {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 8px;
  align-items: center;
  justify-content: flex-start;
  width: 100%;
  box-sizing: border-box;
  min-height: 36px;
  padding: 8px 10px;
  border-radius: 10px;
  border: 1px dashed var(--brand-border, #d4d4d8);
  background: var(--surface-elevated, rgba(0, 0, 0, 0.02));
  transition: border-color 0.15s, background 0.15s;
  touch-action: none;
  unicode-bidi: isolate;
}
.ugc-seg-words.is-drop-target {
  border-color: var(--brand-primary, #6366f1);
  background: rgba(99, 102, 241, 0.06);
}
.ugc-word-pill {
  display: inline-flex;
  align-items: center;
  margin: 0;
  padding: 5px 10px;
  font-size: 13px;
  font-family: inherit;
  line-height: 1.3;
  border-radius: 999px;
  border: 1px solid var(--border-subtle, #e5e7eb);
  background: var(--brand-bg, #fff);
  color: var(--brand-text, #1f2937);
  cursor: grab;
  user-select: none;
  -webkit-user-select: none;
  max-width: 100%;
  word-break: break-word;
  touch-action: none;
  -webkit-tap-highlight-color: transparent;
  text-align: inherit;
}
.ugc-word-pill:active {
  cursor: grabbing;
}
.ugc-word-pill.is-pointer-dragging {
  opacity: 0.22;
  z-index: 1;
  box-shadow: none;
  cursor: grabbing;
}
.ugc-word-pill--armed {
  outline: 2px solid var(--brand-primary, #6366f1);
  outline-offset: 2px;
}
.ugc-word-drag-confirm-backdrop {
  position: fixed;
  inset: 0;
  z-index: 10060;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  padding: 16px;
  background: rgba(15, 23, 42, 0.45);
  box-sizing: border-box;
}
.ugc-word-drag-confirm-sheet {
  width: 100%;
  max-width: 400px;
  padding: 20px;
  border-radius: 16px 16px 12px 12px;
  background: var(--brand-bg, #fff);
  color: var(--brand-text, #1f2937);
  box-shadow: 0 -8px 40px rgba(0, 0, 0, 0.18);
}
.ugc-word-drag-confirm-title {
  font-weight: 500;
  font-size: 16px;
  margin-bottom: 8px;
}
.ugc-word-drag-confirm-word {
  display: inline-block;
  margin-bottom: 8px;
  padding: 4px 10px;
  border-radius: 999px;
  border: 1px solid var(--border-subtle, #e5e7eb);
  font-size: 14px;
}
.ugc-word-drag-confirm-desc {
  font-size: 13px;
  margin: 0 0 16px;
}
.ugc-word-drag-confirm-actions {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  justify-content: flex-end;
}
.ugc-word-pill--drag-ghost {
  position: fixed;
  left: 0;
  top: 0;
  z-index: 10050;
  pointer-events: none;
  margin: 0;
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.16), 0 0 0 1px rgba(99, 102, 241, 0.35);
  opacity: 1;
  transform: scale(1.05);
  cursor: grabbing;
  max-width: min(90vw, 320px);
  background: var(--brand-bg, #fff);
}
.ugc-seg-words-empty {
  font-size: 12px;
  font-style: italic;
}
.ugc-segment-scene-dialogue {
  margin: 0 0 14px;
  padding: 0;
  white-space: pre-wrap;
  text-align: start;
}
.ugc-segment-scene-dialogue-inner {
  font-size: 15px;
  line-height: 1.55;
  font-style: italic;
  color: var(--brand-text, #1f2937);
  quotes: '\201C' '\201D' '\2018' '\2019';
}
.ugc-segment-scene-dialogue-inner::before {
  content: open-quote;
  font-size: 1.35em;
  font-family: Georgia, 'Times New Roman', ui-serif, serif;
  font-style: normal;
  line-height: 0;
  vertical-align: -0.12em;
  opacity: 0.55;
  margin-inline-end: 0.08em;
}
.ugc-segment-scene-dialogue-inner::after {
  content: close-quote;
  font-size: 1.35em;
  font-family: Georgia, 'Times New Roman', ui-serif, serif;
  font-style: normal;
  line-height: 0;
  vertical-align: -0.12em;
  opacity: 0.55;
  margin-inline-start: 0.08em;
}
.ugc-segment-scene-mode-row {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  margin-bottom: 8px;
  font-size: 13px;
}
/* Match job “edit copy” / #create-form .field textarea styling (border-radius 12px, focus ring). */
.ugc-segment-scene-field.field {
  margin-top: 4px;
  margin-bottom: 0;
}
/* Same scale as .ugc-segment-scene-words-label — default .field label is 14px and reads oversized here. */
.ugc-segment-scene-field.field > label {
  font-size: 12px;
  font-weight: 500;
}
.ugc-segment-scene-field.field textarea.ugc-seg-scene-input,
.ugc-segment-scene-field.field .voice-input-wrap textarea.ugc-seg-scene-input {
  min-height: 120px;
  font-size: 13px;
  line-height: 1.5;
}
.ugc-segment-scene-auto-block {
  margin-top: 4px;
  padding: 10px 12px;
  border-radius: 10px;
  border: 1px dashed var(--brand-border, #d4d4d8);
  background: var(--surface-elevated, rgba(0, 0, 0, 0.02));
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  flex-wrap: wrap;
}
.ugc-segment-scene-auto-label {
  font-size: 12px;
  font-weight: 500;
  color: var(--brand-muted, #6b7280);
}
.ugc-segment-scene-auto-badge {
  font-size: 12px;
  font-weight: 700;
  padding: 4px 10px;
  border-radius: 999px;
  background: rgba(99, 102, 241, 0.12);
  color: var(--brand-primary, #4f46e5);
}
.ugc-generate-all-scenes-btn {
  display: inline-flex;
  align-items: center;
  gap: 0;
  flex-wrap: wrap;
}
.ugc-generate-all-scenes-btn .button-credit-badge {
  margin-inline-start: 8px;
}
.ugc-segment-scene-textwrap textarea {
  width: 100%;
  min-height: 72px;
  font-size: 13px;
}
.ugc-seg-dialogue-shell {
  position: relative;
}
.ugc-seg-dialogue-shell .voice-input-wrap {
  width: 100%;
}
.ugc-seg-dialogue-shell textarea.ugc-seg-dialogue-input {
  width: 100%;
  min-height: 58px;
  max-height: 120px;
  resize: vertical;
  border: 1px solid var(--brand-border, #e5e7eb);
  border-radius: 14px;
  background: var(--brand-surface, #fff);
  color: var(--brand-text, #111827);
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
  font-size: 13px;
  line-height: 1.45;
  font-family: 'Tajawal', 'Cairo', system-ui, -apple-system, 'Segoe UI', sans-serif;
  padding-block: 10px !important;
  padding-inline-start: 12px !important;
  padding-inline-end: 44px !important;
  transition: border-color 0.16s ease, box-shadow 0.16s ease, background 0.16s ease;
}
.ugc-seg-fill-hint:empty {
  display: none;
}
.ugc-seg-dialogue-shell textarea.ugc-seg-dialogue-input:focus {
  outline: none;
  border-color: var(--brand-primary, #6366f1);
  box-shadow: 0 0 0 4px rgba(99, 102, 241, 0.12);
  background: #fff;
}
.ugc-seg-dialogue-shell textarea.ugc-seg-dialogue-input::placeholder {
  color: var(--brand-muted, #9ca3af);
  opacity: 1;
  font-family: 'Tajawal', 'Cairo', system-ui, -apple-system, 'Segoe UI', sans-serif;
  font-size: 12px;
}
.ugc-seg-dialogue-shell .voice-mic-btn {
  inset-inline-end: 12px;
  top: 12px;
  border-color: transparent;
  background: rgba(17, 24, 39, 0.05);
}
.ugc-seg-dialogue-count {
  margin-top: 6px !important;
  text-align: end;
  font-variant-numeric: tabular-nums;
}
#ugc-generate-preview {
  align-self: flex-end;
  margin-top: 10px;
}
html[dir="rtl"] #ugc-generate-preview {
  align-self: flex-start;
}
@media (max-width: 768px) {
  .ugc-manual-fields {
    grid-template-columns: 1fr;
  }
  #ugc-generate-preview {
    width: 100%;
    align-self: stretch;
  }
}

@media (max-width: 640px) {
  .ugc-settings-row {
    grid-template-columns: 1fr 1fr;
    gap: 10px;
  }
  .ugc-settings-row .field#ugc-video-duration-field,
  .ugc-settings-row .field#ugc-output-quality-field {
    grid-column: 1 / -1;
  }
  .ugc-mode-pill {
    align-self: stretch;
  }
  .ugc-pill-btn {
    flex: 1;
    text-align: center;
  }
}

/* ===== UGC Persuasion Layer Styles ===== */

/* Goal cards */
.ugc-goal-cards {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 10px;
}
.ugc-goal-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding: 14px 12px 12px;
  border-radius: 12px;
  border: 1px solid #e5e7eb;
  background: #fff;
  cursor: pointer;
  text-align: center;
  transition: border-color 0.15s, background 0.15s, box-shadow 0.15s;
  font-family: inherit;
}
.ugc-goal-icon {
  font-size: 22px;
  line-height: 1;
}
.ugc-goal-title {
  font-size: 13px;
  font-weight: 500;
  color: var(--brand-ink, #1f2937);
  line-height: 1.3;
}
.ugc-goal-desc {
  font-size: 11px;
  color: #6b7280;
  line-height: 1.3;
}
.ugc-format-preview {
  position: relative;
  width: 100%;
  aspect-ratio: 4 / 5;
  border-radius: 10px;
  overflow: hidden;
  background: linear-gradient(180deg, #f8fafc 0%, #eef2ff 100%);
  border: 1px solid #e5e7eb;
}
.ugc-format-preview-skeleton {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(90deg, rgba(255,255,255,0) 0%, rgba(255,255,255,0.75) 50%, rgba(255,255,255,0) 100%),
    linear-gradient(180deg, #f3f4f6 0%, #e5e7eb 100%);
  background-size: 180px 100%, 100% 100%;
  background-repeat: no-repeat;
  animation: ugcFormatPreviewShimmer 1.4s infinite linear;
}
.ugc-format-preview-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  opacity: 0;
  transition: opacity 0.18s ease;
}
.ugc-format-preview.is-ready .ugc-format-preview-image {
  opacity: 1;
}
.ugc-format-preview.is-ready .ugc-format-preview-skeleton {
  display: none;
}
.ugc-format-preview.is-error::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(248, 250, 252, 0.95) 0%, rgba(238, 242, 255, 0.95) 100%);
}
.ugc-format-preview.is-error .ugc-format-preview-skeleton {
  display: none;
}
@keyframes ugcFormatPreviewShimmer {
  0% {
    background-position: -180px 0, 0 0;
  }
  100% {
    background-position: calc(100% + 180px) 0, 0 0;
  }
}
.ugc-goal-card:hover {
  border-color: #d1d5db;
  background: #f9fafb;
}
.ugc-goal-card.active {
  border-color: var(--brand-primary, #7c3aed);
  background: color-mix(in srgb, var(--brand-primary, #7c3aed) 8%, #fff);
}
.ugc-goal-card.active .ugc-goal-title {
  color: var(--brand-primary, #7c3aed);
}

.ugc-format-stage {
  position: relative;
  margin: 4px auto 0;
  padding: 28px 28px 30px;
  border-radius: 24px;
  border: 1px solid rgba(148, 163, 184, 0.18);
  background:
    radial-gradient(circle at top right, rgba(124, 58, 237, 0.08), transparent 34%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.98) 0%, rgba(248, 250, 252, 0.98) 100%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.75);
}
html[dir="rtl"] .ugc-format-stage,
[dir="rtl"] .ugc-format-stage,
.rtl .ugc-format-stage {
  background:
    radial-gradient(circle at top left, rgba(124, 58, 237, 0.08), transparent 34%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.98) 0%, rgba(248, 250, 252, 0.98) 100%);
}
.ugc-format-stage-head {
  max-width: 760px;
  margin-bottom: 24px;
}
.ugc-format-stage-head.je-host > .create-job-examples-btn {
  top: -3px;
}
.ugc-format-stage .step-panel-title {
  font-size: clamp(26px, 3.2vw, 32px);
  line-height: 1.1;
  letter-spacing: -0.03em;
}
.ugc-format-stage .step-panel-desc {
  margin: 10px 0 0;
  max-width: 640px;
  font-size: 15px;
  line-height: 1.6;
  color: #64748b;
}
.ugc-format-grid-shell {
  padding-top: 2px;
}
#ugc-format-cards {
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: 18px;
}
#ugc-format-cards > .ugc-format-card {
  grid-column: span 4;
}
#ugc-format-cards > .ugc-format-card:nth-child(4),
#ugc-format-cards > .ugc-format-card:nth-child(5) {
  grid-column: span 6;
}
.ugc-format-card {
  position: relative;
  align-items: stretch;
  gap: 14px;
  min-height: 100%;
  padding: 18px;
  border-radius: 22px;
  border: 1px solid rgba(148, 163, 184, 0.18);
  background: linear-gradient(180deg, #ffffff 0%, #fbfcff 100%);
  text-align: start;
  box-shadow: 0 10px 28px rgba(15, 23, 42, 0.06);
  overflow: hidden;
  isolation: isolate;
  transition:
    transform 0.18s ease,
    box-shadow 0.18s ease,
    border-color 0.18s ease,
    background 0.18s ease;
}
.ugc-format-card::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(124, 58, 237, 0.03) 0%, transparent 44%);
  opacity: 0;
  transition: opacity 0.18s ease;
  pointer-events: none;
}
.ugc-format-card-top {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 14px;
}
.ugc-goal-title-wrap {
  display: inline-flex;
  align-items: center;
  gap: 0;
  min-width: 0;
}
.ugc-format-card .ugc-goal-title {
  font-size: 16px;
  font-weight: 700;
  line-height: 1.25;
  letter-spacing: -0.02em;
}
.ugc-format-card-marker {
  position: relative;
  width: 24px;
  height: 24px;
  border-radius: 999px;
  border: 1.5px solid rgba(148, 163, 184, 0.55);
  background: rgba(255, 255, 255, 0.88);
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
  flex-shrink: 0;
  transition: all 0.18s ease;
}
.ugc-format-card-marker::before {
  content: '';
  position: absolute;
  top: 5px;
  left: 8px;
  width: 6px;
  height: 11px;
  border-right: 2px solid #fff;
  border-bottom: 2px solid #fff;
  transform: rotate(45deg) scale(0.7);
  opacity: 0;
  transition: all 0.18s ease;
}
.ugc-format-card .ugc-format-preview {
  position: relative;
  z-index: 1;
  border-radius: 18px;
  border: 1px solid rgba(226, 232, 240, 0.9);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.65),
    0 6px 18px rgba(15, 23, 42, 0.08);
  background: #edf2f7;
}
.ugc-format-card .ugc-format-preview-image {
  opacity: 1;
}
.ugc-format-card .ugc-goal-desc {
  position: relative;
  z-index: 1;
  font-size: 14.5px;
  line-height: 1.55;
  color: #5b6879;
  max-width: none;
}
.ugc-format-card:hover {
  transform: translateY(-3px);
  border-color: rgba(124, 58, 237, 0.22);
  background: linear-gradient(180deg, #ffffff 0%, #f8f8ff 100%);
  box-shadow: 0 18px 36px rgba(15, 23, 42, 0.1);
}
.ugc-format-card:hover::before {
  opacity: 1;
}
.ugc-format-card:hover .ugc-format-card-marker {
  border-color: rgba(124, 58, 237, 0.45);
  background: rgba(124, 58, 237, 0.06);
}
.ugc-format-card.active {
  transform: translateY(-4px);
  border-color: rgba(124, 58, 237, 0.45);
  background: linear-gradient(180deg, rgba(124, 58, 237, 0.08) 0%, rgba(255, 255, 255, 0.99) 38%, rgba(248, 250, 252, 0.98) 100%);
  box-shadow:
    0 0 0 1px rgba(124, 58, 237, 0.14),
    0 22px 44px rgba(124, 58, 237, 0.15);
}
.ugc-format-card.active::before {
  opacity: 1;
}
.ugc-format-card.active .ugc-goal-title {
  color: var(--brand-primary, #7c3aed);
}
.ugc-format-card.active .ugc-format-card-marker {
  border-color: var(--brand-primary, #7c3aed);
  background: var(--brand-primary, #7c3aed);
  box-shadow: 0 8px 18px rgba(124, 58, 237, 0.28);
}
.ugc-format-card.active .ugc-format-card-marker::before {
  opacity: 1;
  transform: rotate(45deg) scale(1);
}

#create-panel #wizard-step-2,
#create-panel #wizard-step-3,
#create-panel #ugc-wizard-step-3,
#create-panel #ugc-wizard-step-4,
#create-panel #ugc-wizard-step-5,
#create-panel #ugc-wizard-step-6,
#create-panel #ugc-wizard-step-7 {
  padding: 24px 20px 20px;
  border-radius: 24px;
  border: 1px solid rgba(148, 163, 184, 0.18);
  background:
    radial-gradient(circle at top right, rgba(124, 58, 237, 0.045), transparent 32%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.985) 0%, rgba(249, 250, 252, 0.985) 100%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.75);
}
html[dir="rtl"] #create-panel #wizard-step-2,
html[dir="rtl"] #create-panel #wizard-step-3,
html[dir="rtl"] #create-panel #ugc-wizard-step-3,
html[dir="rtl"] #create-panel #ugc-wizard-step-4,
html[dir="rtl"] #create-panel #ugc-wizard-step-5,
html[dir="rtl"] #create-panel #ugc-wizard-step-6,
html[dir="rtl"] #create-panel #ugc-wizard-step-7,
[dir="rtl"] #create-panel #wizard-step-2,
[dir="rtl"] #create-panel #wizard-step-3,
[dir="rtl"] #create-panel #ugc-wizard-step-3,
[dir="rtl"] #create-panel #ugc-wizard-step-4,
[dir="rtl"] #create-panel #ugc-wizard-step-5,
[dir="rtl"] #create-panel #ugc-wizard-step-6,
[dir="rtl"] #create-panel #ugc-wizard-step-7,
.rtl #create-panel #wizard-step-2,
.rtl #create-panel #wizard-step-3,
.rtl #create-panel #ugc-wizard-step-3,
.rtl #create-panel #ugc-wizard-step-4,
.rtl #create-panel #ugc-wizard-step-5,
.rtl #create-panel #ugc-wizard-step-6,
.rtl #create-panel #ugc-wizard-step-7 {
  background:
    radial-gradient(circle at top left, rgba(124, 58, 237, 0.045), transparent 32%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.985) 0%, rgba(249, 250, 252, 0.985) 100%);
}

@media (max-width: 760px) {
  #create-panel #wizard-step-2,
  #create-panel #wizard-step-3,
  #create-panel #ugc-wizard-step-3,
  #create-panel #ugc-wizard-step-4,
  #create-panel #ugc-wizard-step-5,
  #create-panel #ugc-wizard-step-6,
  #create-panel #ugc-wizard-step-7 {
    padding: 20px 14px 16px;
  }
}

#create-panel .wizard-steps {
  gap: 10px;
  margin-bottom: 24px;
  padding: 12px 14px;
  border-radius: 18px;
  border: 1px solid rgba(148, 163, 184, 0.16);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.96) 0%, rgba(248, 250, 252, 0.96) 100%);
  box-shadow: 0 12px 28px rgba(15, 23, 42, 0.05);
  max-width: 100%;
  min-width: 0;
  box-sizing: border-box;
}
#create-panel .wizard-steps .wizard-step {
  min-height: 42px;
  padding: 8px 12px;
  border-radius: 14px;
  border: 1px solid transparent;
  background: rgba(255, 255, 255, 0.76);
  color: #64748b;
}
#create-panel .wizard-steps .wizard-step:hover {
  color: var(--brand-ink, #0f172a);
  border-color: rgba(148, 163, 184, 0.2);
  background: rgba(255, 255, 255, 0.96);
}
#create-panel .wizard-steps .wizard-step.active {
  color: var(--brand-primary, #7c3aed);
  border-color: rgba(124, 58, 237, 0.18);
  background: rgba(124, 58, 237, 0.08);
  box-shadow: 0 8px 20px rgba(124, 58, 237, 0.12);
}
#create-panel .wizard-steps .wizard-step.completed {
  color: #475569;
}
#create-panel .wizard-steps .wizard-step-line {
  width: 22px;
  height: 2px;
  border-radius: 999px;
  background: rgba(203, 213, 225, 0.9);
  margin: 0;
}
#create-panel .wizard-steps .wizard-step.completed + .wizard-step-line {
  background: rgba(124, 58, 237, 0.42);
}
#create-panel .wizard-steps .wizard-step-label {
  font-size: 13px;
  font-weight: 500;
}
#create-panel .wizard-steps .wizard-step-num {
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.45);
}
#create-panel .wizard-steps .wizard-step.active .wizard-step-num,
#create-panel .wizard-steps .wizard-step.completed .wizard-step-num {
  box-shadow: 0 8px 18px rgba(124, 58, 237, 0.22);
}
[dir="rtl"] #create-panel .wizard-steps,
.rtl #create-panel .wizard-steps {
  justify-content: center;
}
#create-panel .wizard-steps.ugc-steps-expanded,
#create-panel .wizard-steps.tc-steps-expanded,
#create-panel .wizard-steps.product-scene-steps-expanded,
#create-panel .wizard-steps.animated-video-steps-expanded,
#create-panel .wizard-steps.video-wizard-steps-expanded {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  justify-content: flex-start;
}
#create-panel .wizard-steps.ugc-steps-expanded::-webkit-scrollbar,
#create-panel .wizard-steps.tc-steps-expanded::-webkit-scrollbar,
#create-panel .wizard-steps.product-scene-steps-expanded::-webkit-scrollbar,
#create-panel .wizard-steps.animated-video-steps-expanded::-webkit-scrollbar,
#create-panel .wizard-steps.video-wizard-steps-expanded::-webkit-scrollbar {
  display: none;
}
[dir="rtl"] #create-panel .wizard-steps.ugc-steps-expanded,
.rtl #create-panel .wizard-steps.ugc-steps-expanded,
[dir="rtl"] #create-panel .wizard-steps.tc-steps-expanded,
.rtl #create-panel .wizard-steps.tc-steps-expanded,
[dir="rtl"] #create-panel .wizard-steps.product-scene-steps-expanded,
.rtl #create-panel .wizard-steps.product-scene-steps-expanded,
[dir="rtl"] #create-panel .wizard-steps.animated-video-steps-expanded,
.rtl #create-panel .wizard-steps.animated-video-steps-expanded,
[dir="rtl"] #create-panel .wizard-steps.video-wizard-steps-expanded,
.rtl #create-panel .wizard-steps.video-wizard-steps-expanded {
  justify-content: flex-start;
}
[dir="rtl"] .ugc-format-card,
.rtl .ugc-format-card {
  text-align: right;
}
[dir="rtl"] .ugc-goal-title-wrap,
.rtl .ugc-goal-title-wrap {
  flex-direction: row-reverse;
}
[dir="rtl"] .ugc-format-card-top,
.rtl .ugc-format-card-top {
  flex-direction: row-reverse;
}
@media (max-width: 1200px) {
  #ugc-format-cards > .ugc-format-card,
  #ugc-format-cards > .ugc-format-card:nth-child(4),
  #ugc-format-cards > .ugc-format-card:nth-child(5) {
    grid-column: span 6;
  }
}
@media (max-width: 760px) {
  .ugc-format-stage {
    padding: 22px 18px 20px;
    border-radius: 20px;
  }
  .ugc-format-stage-head {
    margin-bottom: 18px;
  }
  .ugc-format-stage .step-panel-title {
    font-size: 24px;
  }
  .ugc-format-stage .step-panel-desc {
    font-size: 14px;
    line-height: 1.55;
  }
  #create-panel .wizard-steps {
    margin-bottom: 18px;
    padding: 10px 10px 12px;
  }
  #create-panel #create-form.video-wizard-choice-step #wizard-step-2.active {
    padding-bottom: 16px;
    border-radius: 20px 20px 0 0;
  }
  #create-panel #create-form.video-wizard-choice-step #wizard-nav {
    padding-inline: 14px;
    border-radius: 0 0 20px 20px;
  }
  #ugc-format-cards {
    gap: 12px;
  }
  #ugc-format-cards > .ugc-format-card,
  #ugc-format-cards > .ugc-format-card:nth-child(4),
  #ugc-format-cards > .ugc-format-card:nth-child(5) {
    grid-column: span 6;
  }
  .ugc-format-card {
    padding: 12px;
    gap: 10px;
    border-radius: 18px;
  }
  .ugc-format-card .ugc-goal-title {
    font-size: 14px;
  }
  .ugc-format-card .ugc-goal-desc {
    font-size: 13.5px;
    line-height: 1.45;
  }
  .ugc-format-card .ugc-format-preview {
    border-radius: 14px;
  }
}

/* Persona auto row */
.ugc-persona-auto-row {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 8px;
}
.ugc-persona-auto-toggle {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  cursor: pointer;
  font-size: 12px;
  font-weight: 500;
  color: var(--brand-ink, #1f2937);
  user-select: none;
}
.ugc-persona-auto-toggle input[type="checkbox"] {
  -webkit-appearance: none;
  appearance: none;
  width: 36px;
  height: 20px;
  border-radius: 10px;
  background: #d1d5db;
  position: relative;
  cursor: pointer;
  transition: background 0.2s;
  flex-shrink: 0;
  margin: 0;
}
.ugc-persona-auto-toggle input[type="checkbox"]::after {
  content: '';
  position: absolute;
  top: 2px;
  inset-inline-start: 2px;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: #fff;
  transition: inset-inline-start 0.2s;
  box-shadow: 0 1px 2px rgba(0,0,0,0.15);
}
.ugc-persona-auto-toggle input[type="checkbox"]:checked {
  background: var(--brand-primary, #7c3aed);
}
.ugc-persona-auto-toggle input[type="checkbox"]:checked::after {
  inset-inline-start: 18px;
}
.ugc-persona-auto-badge {
  font-size: 12px;
  font-weight: 500;
  color: var(--brand-primary, #7c3aed);
  background: color-mix(in srgb, var(--brand-primary, #7c3aed) 8%, #fff);
  padding: 4px 10px;
  border-radius: 8px;
  border: 1px solid color-mix(in srgb, var(--brand-primary, #7c3aed) 20%, transparent);
}

/* Persona group labels inside dropdown */
.ugc-persona-group-label {
  font-size: 11px !important;
  font-weight: 700 !important;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: #9ca3af !important;
  padding: 10px 14px 4px !important;
  cursor: default !important;
  pointer-events: none;
}
.ugc-persona-group-label:hover {
  background: transparent !important;
}

/* Persona combobox — matches .field input / .field select styling */
.ugc-persona-combo {
  position: relative;
  display: flex;
  align-items: center;
}
.ugc-persona-input {
  width: 100%;
  padding: 12px 38px 12px 14px;
  border-radius: 12px;
  border: 1px solid var(--brand-border, #e5e7eb);
  background: #fff;
  color: var(--brand-ink, #1f2937);
  font-size: 14px;
  font-family: inherit;
  outline: none;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
[dir="rtl"] .ugc-persona-input,
.rtl .ugc-persona-input {
  padding: 12px 14px 12px 38px;
}
.ugc-persona-input:focus {
  border-color: var(--brand-primary, #7c3aed);
  box-shadow: 0 0 0 3px rgba(147, 51, 234, 0.15);
}
.ugc-persona-toggle {
  position: absolute;
  right: 12px;
  top: 50%;
  transform: translateY(-50%);
  background: none;
  border: none;
  color: var(--brand-muted, #9ca3af);
  cursor: pointer;
  padding: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform 0.2s;
}
[dir="rtl"] .ugc-persona-toggle,
.rtl .ugc-persona-toggle {
  right: auto;
  left: 12px;
}
.ugc-persona-combo.open .ugc-persona-toggle {
  transform: translateY(-50%) rotate(180deg);
}
.ugc-persona-dropdown {
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  right: 0;
  background: #fff;
  border: 1px solid var(--brand-border, #e5e7eb);
  border-radius: 12px;
  list-style: none;
  margin: 0;
  padding: 4px 0;
  z-index: 50;
  max-height: 240px;
  overflow-y: auto;
  box-shadow: 0 4px 16px rgba(0,0,0,0.10);
}
.ugc-persona-dropdown li {
  padding: 10px 14px;
  font-size: 14px;
  color: var(--brand-ink, #1f2937);
  cursor: pointer;
  transition: background 0.12s;
}
.ugc-persona-dropdown li:hover,
.ugc-persona-dropdown li.highlighted {
  background: color-mix(in srgb, var(--brand-primary, #7c3aed) 8%, #fff);
}
.ugc-persona-dropdown li.selected {
  color: var(--brand-primary, #7c3aed);
  font-weight: 500;
  background: color-mix(in srgb, var(--brand-primary, #7c3aed) 6%, #fff);
}

/* Hook intro & selected summary */
.ugc-hooks-intro {
  margin-top: 16px;
  padding: 10px 14px;
  background: #f9fafb;
  border-radius: 10px;
  border: 1px solid var(--brand-border, #e5e7eb);
}
.ugc-hooks-intro p {
  margin: 0;
  font-size: 14px;
  line-height: 1.5;
  color: var(--brand-muted, #6b7280);
  font-family: inherit;
}
.ugc-hook-selected-summary {
  display: flex;
  align-items: baseline;
  gap: 8px;
  margin-top: 12px;
  padding: 10px 14px;
  background: #f9fafb;
  border: 1px solid var(--brand-border, #e5e7eb);
  border-radius: 10px;
}
.ugc-hook-selected-label {
  font-size: 13px;
  font-weight: 700;
  color: var(--brand-primary, #7c3aed);
  white-space: nowrap;
}
.ugc-hook-selected-text {
  font-size: 14px;
  line-height: 1.5;
  color: var(--brand-ink, #1f2937);
  font-family: inherit;
}

/* Hook grid */
.ugc-hook-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
  margin-top: 12px;
}
.ugc-hook-card {
  border: 1px solid var(--brand-border, #e5e7eb);
  border-radius: 12px;
  padding: 16px;
  background: #fff;
  cursor: pointer;
  transition: border-color 0.15s, background 0.15s, box-shadow 0.15s;
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-width: 0;
  overflow: hidden;
}
.ugc-hook-card:hover {
  border-color: #d1d5db;
  box-shadow: 0 2px 8px rgba(0,0,0,0.04);
}
.ugc-hook-card.selected {
  border-color: var(--brand-primary, #7c3aed);
  background: color-mix(in srgb, var(--brand-primary, #7c3aed) 4%, #fff);
}
.ugc-hook-card-header {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 4px;
}
.ugc-hook-type-label {
  font-size: 13px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: var(--brand-primary, #7c3aed);
}
.ugc-hook-alt-line {
  font-size: 14px;
  line-height: 1.5;
  padding: 10px 14px 10px 36px;
  border-radius: 8px;
  cursor: pointer;
  transition: background 0.12s, border-color 0.12s;
  word-wrap: break-word;
  overflow-wrap: break-word;
  hyphens: auto;
  color: var(--brand-ink, #1f2937);
  font-family: inherit;
  border: 1px solid #e5e7eb;
  background: #fafafa;
  position: relative;
}
html[dir="rtl"] .ugc-hook-alt-line {
  padding: 10px 36px 10px 14px;
}
.ugc-hook-alt-line::before {
  content: '';
  position: absolute;
  inset-inline-start: 12px;
  top: 13px;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  border: 2px solid #d1d5db;
  background: #fff;
  transition: border-color 0.12s, background 0.12s;
}
.ugc-hook-alt-line:hover {
  background: #f3f4f6;
  border-color: #d1d5db;
}
.ugc-hook-alt-line:hover::before {
  border-color: var(--brand-primary, #7c3aed);
}
.ugc-hook-alt-line.selected {
  background: color-mix(in srgb, var(--brand-primary, #7c3aed) 8%, #fff);
  border-color: var(--brand-primary, #7c3aed);
  color: var(--brand-primary, #7c3aed);
  font-weight: 500;
}
.ugc-hook-alt-line.selected::before {
  border-color: var(--brand-primary, #7c3aed);
  background: var(--brand-primary, #7c3aed);
  box-shadow: inset 0 0 0 2px #fff;
}
.ugc-hook-expand-btn {
  font-size: 12px;
  color: var(--brand-muted, #6b7280);
  background: none;
  border: none;
  cursor: pointer;
  text-align: start;
  padding: 4px 0 0;
  font-family: inherit;
}
.ugc-hook-expand-btn:hover {
  color: var(--brand-primary, #7c3aed);
}
.ugc-hook-more {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-top: 6px;
  padding-top: 10px;
  border-top: 1px solid #f3f4f6;
}
.ugc-hook-actions {
  display: flex;
  gap: 8px;
  align-items: center;
  margin-bottom: 8px;
}

/* Actor source tabs — compact inline pills, not full-width */
.ugc-actor-source-tabs {
  margin: 0 0 14px;
  gap: 6px;
  justify-content: flex-start;
}
.ugc-actor-source-tabs .tab-button {
  flex: 0 0 auto;
  font-size: 12px;
  font-weight: 500;
  padding: 5px 14px;
  min-height: 28px;
  border-radius: 999px;
  font-family: 'Tajawal', 'Cairo', system-ui, -apple-system, 'Segoe UI', sans-serif;
}
.ugc-actor-source-panel {
  margin: 0;
}
.ugc-actor-filters {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-top: 12px;
}
.ugc-custom-actors {
  border: 1px solid var(--brand-border, #e5e7eb);
  border-radius: 12px;
  padding: 10px;
  background: #fff;
}
.ugc-actor-subsection + .ugc-actor-subsection {
  margin-top: 10px;
  padding-top: 0;
}
.ugc-custom-actors-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}
.ugc-custom-actors-shell-header {
  margin-bottom: 8px;
}
.ugc-custom-actors-shell-body.is-collapsed {
  display: none;
}
.ugc-custom-actors-shell-toggle {
  border: 0;
  background: transparent;
  font-size: 14px;
  font-weight: 500;
  color: var(--brand-ink, #1f2937);
  cursor: pointer;
  padding: 2px 0;
  font-family: 'Tajawal', 'Cairo', system-ui, -apple-system, Segoe UI, sans-serif;
}
.ugc-custom-actors-shell-toggle::before {
  content: '▾';
  display: inline-block;
  margin-inline-end: 6px;
  transition: transform 0.15s ease;
}
.ugc-custom-actors-shell-toggle[aria-expanded="false"]::before {
  transform: rotate(-90deg);
}
.ugc-custom-actors-title {
  font-size: 14px;
  font-weight: 500;
  color: var(--brand-ink, #1f2937);
  padding: 2px 0;
  font-family: 'Tajawal', 'Cairo', system-ui, -apple-system, Segoe UI, sans-serif;
}
.ugc-custom-actors-toggle {
  border: 0;
  background: transparent;
  font-size: 14px;
  font-weight: 500;
  color: var(--brand-ink, #1f2937);
  cursor: pointer;
  padding: 2px 0;
  font-family: 'Tajawal', 'Cairo', system-ui, -apple-system, Segoe UI, sans-serif;
}
.ugc-custom-actors-toggle::before {
  content: '▾';
  display: inline-block;
  margin-inline-end: 6px;
  transition: transform 0.15s ease;
}
.ugc-custom-actors-toggle[aria-expanded="false"]::before {
  transform: rotate(-90deg);
}
.ugc-custom-actor-add-btn {
  min-width: 32px;
  height: 32px;
  padding: 0;
  font-size: 18px;
  line-height: 1;
}
.ugc-custom-actors-body {
  margin-top: 8px;
}
.ugc-custom-actors-body.is-collapsed {
  display: none;
}
.ugc-custom-actor-grid {
  margin-top: 0;
  margin-bottom: 10px;
}
.ugc-custom-actor-form {
  display: grid;
  gap: 8px;
}
.ugc-custom-actor-picker {
  width: 140px;
  height: 140px;
  border-radius: 50%;
  border: 2px dashed var(--brand-border, #d1d5db);
  background: #f8fafc;
  color: var(--brand-muted, #6b7280);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  cursor: pointer;
  overflow: hidden;
  transition: border-color 0.15s, box-shadow 0.15s, transform 0.12s;
}
.ugc-custom-actor-picker:hover,
.ugc-custom-actor-picker:focus-visible {
  border-color: var(--brand-primary, #7c3aed);
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--brand-primary, #7c3aed) 16%, transparent);
}
.ugc-custom-actor-picker-plus {
  font-size: 52px;
  line-height: 1;
  font-weight: 500;
}
.ugc-custom-actor-picker img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.ugc-custom-actor-form .input {
  width: 100%;
  min-height: 46px;
  padding: 10px 14px;
  border: 1px solid var(--brand-border, #d1d5db);
  border-radius: 10px;
  background: #fff;
  color: var(--brand-ink, #1f2937);
  font-size: 16px;
  line-height: 1.35;
  text-align: start;
  direction: inherit;
  font-family: 'Tajawal', 'Cairo', system-ui, -apple-system, Segoe UI, sans-serif;
}
.ugc-custom-actor-form .input:focus {
  border-color: var(--brand-primary, #7c3aed);
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--brand-primary, #7c3aed) 18%, transparent);
}
.ugc-custom-actor-form .input::placeholder {
  color: #9ca3af;
  font-family: 'Tajawal', 'Cairo', system-ui, -apple-system, Segoe UI, sans-serif;
}
.ugc-custom-actor-form-actions {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}
@media (min-width: 768px) {
  .ugc-custom-actor-form .input {
    width: min(360px, 100%);
  }
}
.ugc-custom-actor-file-name {
  font-size: 12px;
  color: var(--brand-muted, #6b7280);
  margin-top: 2px;
}
.ugc-custom-actor-add-card {
  border-style: dashed;
}
.ugc-custom-actor-card {
  position: relative;
  padding-bottom: 40px;
}
.ugc-custom-actor-add-icon {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  border: 2px dashed var(--brand-border, #d1d5db);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 28px;
  color: var(--brand-muted, #6b7280);
}
.ugc-custom-actor-remove {
  position: absolute;
  inset-inline-end: 10px;
  bottom: 10px;
  width: 24px;
  height: 24px;
  border-radius: 999px;
  border: 1px solid #fecaca;
  background: #fff;
  color: #ef4444;
  font-size: 16px;
  line-height: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  padding: 0;
}
.ugc-custom-actor-remove:hover {
  background: #fef2f2;
  border-color: #fca5a5;
}
.ugc-actor-filter-select {
  padding: 6px 12px;
  border: 1px solid var(--brand-border, #e5e7eb);
  border-radius: 8px;
  background: #fff;
  color: var(--brand-ink, #1f2937);
  font-size: 13px;
  font-family: inherit;
  cursor: pointer;
  outline: none;
  min-width: 120px;
}
.ugc-actor-filter-select:focus {
  border-color: var(--brand-primary, #7c3aed);
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--brand-primary, #7c3aed) 15%, transparent);
}
.ugc-actor-empty {
  grid-column: 1 / -1;
  text-align: center;
  padding: 32px 16px;
  color: var(--brand-muted, #9ca3af);
  font-size: 14px;
  font-family: inherit;
}

/* Actor grid */
.ugc-actor-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
  margin-top: 12px;
}
.ugc-actor-card {
  border: 1px solid var(--brand-border, #e5e7eb);
  border-radius: 16px;
  padding: 14px 10px;
  background: #fff;
  text-align: center;
  cursor: pointer;
  transition: border-color 0.15s, background 0.15s, box-shadow 0.15s;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 7px;
  min-width: 0;
  overflow: hidden;
  box-shadow: 0 1px 3px rgba(15, 23, 42, 0.05);
}
.ugc-actor-card:hover {
  border-color: var(--brand-primary, #7c3aed);
  box-shadow: 0 2px 8px rgba(0,0,0,0.06);
}
.ugc-actor-card.selected {
  border-color: var(--brand-primary, #7c3aed);
  background: color-mix(in srgb, var(--brand-primary, #7c3aed) 6%, #fff);
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--brand-primary, #7c3aed) 20%, transparent);
}
.ugc-actor-thumb {
  width: 70px;
  height: 70px;
  border-radius: 50%;
  object-fit: cover;
  flex-shrink: 0;
  border: 2.5px solid var(--brand-border, #e5e7eb);
  transition: border-color 0.15s, transform 0.15s;
  cursor: zoom-in;
}
.ugc-actor-thumb:hover {
  transform: scale(1.08);
}
.ugc-actor-card.selected .ugc-actor-thumb {
  border-color: var(--brand-primary, #7c3aed);
}
.ugc-actor-thumb-placeholder {
  width: 70px;
  height: 70px;
  border-radius: 50%;
  background: #f3f4f6;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--brand-muted, #9ca3af);
  flex-shrink: 0;
}
.ugc-actor-name {
  font-size: 12px;
  font-weight: 500;
  line-height: 1.3;
  font-family: 'Tajawal', 'Cairo', system-ui, -apple-system, 'Segoe UI', sans-serif;
  word-wrap: break-word;
  overflow-wrap: break-word;
  max-width: 100%;
}
.ugc-actor-meta {
  font-size: 10.5px;
  color: var(--brand-muted, #9ca3af);
  font-family: 'Tajawal', 'Cairo', system-ui, -apple-system, 'Segoe UI', sans-serif;
  white-space: nowrap;
}
.ugc-actor-header {
  display: flex;
  align-items: center;
  gap: 10px;
}
.ugc-actor-auto-toggle {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  cursor: pointer;
  font-size: 12px;
  font-weight: 500;
  white-space: nowrap;
  color: var(--brand-muted, #6b7280);
  user-select: none;
}
.ugc-actor-auto-toggle input[type="checkbox"] {
  -webkit-appearance: none;
  appearance: none;
  width: 36px;
  height: 20px;
  border-radius: 10px;
  background: #d1d5db;
  position: relative;
  cursor: pointer;
  transition: background 0.2s;
  flex-shrink: 0;
  margin: 0;
}
.ugc-actor-auto-toggle input[type="checkbox"]::after {
  content: '';
  position: absolute;
  top: 2px;
  inset-inline-start: 2px;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: #fff;
  transition: inset-inline-start 0.2s;
  box-shadow: 0 1px 2px rgba(0,0,0,0.15);
}
.ugc-actor-auto-toggle input[type="checkbox"]:checked {
  background: var(--brand-primary, #7c3aed);
}
.ugc-actor-auto-toggle input[type="checkbox"]:checked::after {
  inset-inline-start: 18px;
}

/* Blurred overlay when auto is on */
.ugc-actor-grid.auto-blur {
  filter: blur(3px);
  opacity: 0.5;
  pointer-events: none;
  user-select: none;
}
.ugc-actor-filters.auto-blur {
  filter: blur(2px);
  opacity: 0.4;
  pointer-events: none;
  user-select: none;
}
.ugc-custom-actors.auto-blur {
  filter: blur(2px);
  opacity: 0.45;
  pointer-events: none;
  user-select: none;
}

/* Actor image preview overlay */
.ugc-actor-preview-overlay {
  position: fixed;
  inset: 0;
  z-index: 9999;
  background: rgba(0,0,0,0.55);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  animation: ugcFadeIn 0.15s ease;
}
@keyframes ugcFadeIn { from { opacity: 0; } to { opacity: 1; } }
.ugc-actor-preview-overlay img {
  width: 280px;
  height: 280px;
  border-radius: 50%;
  object-fit: cover;
  border: 4px solid #fff;
  box-shadow: 0 8px 32px rgba(0,0,0,0.3);
  animation: ugcScaleIn 0.18s ease;
}
@keyframes ugcScaleIn { from { transform: scale(0.8); opacity: 0; } to { transform: scale(1); opacity: 1; } }
.ugc-actor-preview-name {
  position: absolute;
  bottom: max(20%, 80px);
  left: 50%;
  transform: translateX(-50%);
  color: #fff;
  font-size: 16px;
  font-weight: 500;
  text-shadow: 0 2px 8px rgba(0,0,0,0.5);
  white-space: nowrap;
}

/* Variant controls */
.ugc-variant-controls {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 8px;
}
.ugc-variants-toggle {
  font-weight: 500;
  gap: 7px;
  cursor: pointer;
  user-select: none;
}
.ugc-variants-toggle input[type="checkbox"] {
  -webkit-appearance: none;
  appearance: none;
  width: 36px;
  height: 20px;
  border-radius: 10px;
  background: #d1d5db;
  position: relative;
  cursor: pointer;
  transition: background 0.2s;
  flex-shrink: 0;
  margin: 0;
}
.ugc-variants-toggle input[type="checkbox"]::after {
  content: '';
  position: absolute;
  top: 2px;
  inset-inline-start: 2px;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: #fff;
  transition: inset-inline-start 0.2s;
  box-shadow: 0 1px 2px rgba(0,0,0,0.15);
}
.ugc-variants-toggle input[type="checkbox"]:checked {
  background: var(--brand-primary, #7c3aed);
}
.ugc-variants-toggle input[type="checkbox"]:checked::after {
  inset-inline-start: 18px;
}
.ugc-variant-controls .select-sm {
  padding: 4px 8px;
  font-size: 13px;
  border-radius: 6px;
  border: 1px solid #e5e7eb;
  background: #fff;
  color: var(--brand-ink, #1f2937);
}
.ugc-variant-actions {
  display: flex;
  gap: 10px;
  align-items: center;
  margin-bottom: 8px;
}
.ugc-variants-hint {
  font-size: 13px;
  color: var(--brand-muted, #6b7280);
  margin: 0 0 6px;
}

/* Variants list */
.ugc-variants-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.ugc-variant-card {
  border: 1px solid #e5e7eb;
  border-radius: 10px;
  padding: 16px 18px;
  background: #fff;
  transition: all 0.15s;
  cursor: pointer;
}
.ugc-variant-card:hover {
  border-color: #d1d5db;
  box-shadow: 0 2px 8px rgba(0,0,0,0.04);
}
.ugc-variant-card.winner {
  border-color: var(--brand-primary, #7c3aed);
  background: color-mix(in srgb, var(--brand-primary, #7c3aed) 4%, #fff);
}
.ugc-variant-header {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 6px;
}
.ugc-variant-num {
  font-size: 13px;
  font-weight: 700;
  color: var(--brand-primary, #7c3aed);
  background: color-mix(in srgb, var(--brand-primary, #7c3aed) 12%, transparent);
  padding: 3px 10px;
  border-radius: 4px;
}
.ugc-variant-tag {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 12px;
  color: var(--brand-ink, #1f2937);
  background: #f3f4f6;
  border: 1px solid #e5e7eb;
  border-radius: 5px;
  padding: 3px 9px;
}
.ugc-variant-tag-key {
  font-size: 10px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: var(--brand-muted, #6b7280);
}
.ugc-variant-hook-line {
  font-size: 16px;
  font-weight: 500;
  margin-bottom: 6px;
  line-height: 1.45;
  color: var(--brand-ink, #1f2937);
}
.ugc-variant-preview {
  font-size: 14px;
  color: var(--brand-muted, #6b7280);
  line-height: 1.5;
  margin-bottom: 10px;
}
.ugc-variant-expand-btn {
  font-size: 13px;
  color: var(--brand-primary, #7c3aed);
  background: none;
  border: none;
  cursor: pointer;
  padding: 4px 0;
  margin-bottom: 4px;
}
.ugc-variant-script-full {
  border-top: 1px solid #e5e7eb;
  padding-top: 10px;
  margin-bottom: 10px;
}
.ugc-script-section {
  margin-bottom: 8px;
}
.ugc-script-section-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 2px;
}
.ugc-script-section-actions {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.ugc-section-edit-btn {
  min-width: auto;
  width: auto;
  height: auto;
  padding-inline: 10px;
  padding-block: 5px;
  gap: 6px;
}
.ugc-section-edit-btn .action-icon {
  width: 14px;
  height: 14px;
}
.ugc-ss-edit-icon {
  min-width: 30px;
  width: 30px;
  height: 30px;
  padding: 0;
  border-radius: 8px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.ugc-ss-edit-icon .action-icon {
  width: 14px;
  height: 14px;
}
.ugc-script-section-header strong {
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--brand-primary, #7c3aed);
}
.ugc-section-regen-btn {
  font-size: 12px;
  color: var(--brand-muted, #6b7280);
  background: none;
  border: 1px solid #e5e7eb;
  border-radius: 4px;
  padding: 3px 10px;
  cursor: pointer;
  transition: all 0.1s;
}
.ugc-section-regen-btn:hover {
  border-color: var(--brand-primary, #7c3aed);
  color: var(--brand-primary, #7c3aed);
}
.ugc-script-section-text {
  font-size: 15px;
  line-height: 1.55;
  color: var(--brand-ink, #1f2937);
}
.ugc-script-section-edit-wrap {
  margin-top: 6px;
}
.ugc-script-section-input {
  width: 100%;
  min-height: 74px;
  border: 1px solid #e5e7eb;
  border-radius: 8px;
  padding: 10px;
  font-size: 14px;
  line-height: 1.5;
  color: var(--brand-ink, #1f2937);
  resize: vertical;
  box-sizing: border-box;
}
.ugc-script-section-input:focus {
  outline: none;
  border-color: var(--brand-primary, #7c3aed);
  box-shadow: 0 0 0 3px rgba(124, 58, 237, 0.12);
}
.ugc-script-section-edit-actions {
  margin-top: 8px;
  display: flex;
  gap: 8px;
  justify-content: flex-end;
}
/* Winner check mark */
.ugc-variant-check {
  display: none;
  margin-inline-start: auto;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: var(--brand-primary, #7c3aed);
  color: #fff;
  font-size: 14px;
  font-weight: 700;
  line-height: 24px;
  text-align: center;
  flex-shrink: 0;
}
.ugc-variant-card.winner .ugc-variant-check {
  display: block;
}

/* Winner preview */
.ugc-winner-list {
  margin-bottom: 10px;
}
.ugc-winner-card {
  border: 1px solid #e5e7eb;
  border-radius: 12px;
  padding: 20px;
  background: #fff;
  position: relative;
}
.ugc-winner-label {
  font-size: 15px;
  font-weight: 700;
  color: var(--brand-ink, #1f2937);
  margin-bottom: 6px;
}
.ugc-winner-edit-hint {
  margin: 0 0 12px;
  font-size: 12px;
  color: var(--brand-muted, #6b7280);
}
.ugc-winner-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 16px;
}
.ugc-winner-tag {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  color: var(--brand-ink, #1f2937);
  background: #f3f4f6;
  border: 1px solid #e5e7eb;
  border-radius: 6px;
  padding: 5px 12px;
}
.ugc-winner-tag-key {
  font-size: 11px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: var(--brand-muted, #6b7280);
}

/* New review card */
.ugc-review-card {
  border-radius: 20px;
  border: 1px solid rgba(148, 163, 184, 0.18);
  background:
    radial-gradient(circle at top right, rgba(124, 58, 237, 0.06), transparent 40%),
    linear-gradient(180deg, #fff 0%, #f8fafc 100%);
  box-shadow: 0 14px 40px rgba(15, 23, 42, 0.07), 0 2px 6px rgba(15, 23, 42, 0.04);
  padding: 20px;
  font-family: 'Tajawal', 'Cairo', system-ui, -apple-system, 'Segoe UI', sans-serif;
}
html[dir="rtl"] .ugc-review-card,
[dir="rtl"] .ugc-review-card {
  background:
    radial-gradient(circle at top left, rgba(124, 58, 237, 0.06), transparent 40%),
    linear-gradient(180deg, #fff 0%, #f8fafc 100%);
}

/* Tags row */
.ugc-review-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 18px;
}
.ugc-review-tag {
  display: inline-flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 1px;
  background: rgba(241, 245, 249, 0.9);
  border: 1px solid rgba(148, 163, 184, 0.2);
  border-radius: 10px;
  padding: 5px 10px;
}
.ugc-review-tag-k {
  font-size: 9.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--brand-muted, #94a3b8);
  line-height: 1.2;
}
.ugc-review-tag-v {
  font-size: 12px;
  font-weight: 500;
  color: var(--brand-ink, #1f2937);
  line-height: 1.3;
}

/* Actor / place / product identity row — chips sit back-to-back, no stretch */
.ugc-review-actor {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  justify-content: flex-start;
  gap: 10px 14px;
  padding: 0 0 16px;
  margin-bottom: 16px;
  border-bottom: 1px solid rgba(148, 163, 184, 0.15);
}
.ugc-review-identity {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
  flex: 0 0 auto;
  width: auto;
  max-width: 220px;
}
.ugc-review-actor-thumb {
  width: 44px;
  height: 44px;
  border-radius: 12px;
  overflow: hidden;
  background: color-mix(in srgb, var(--brand-primary, #7c3aed) 10%, #f8fafc);
  color: var(--brand-primary, #7c3aed);
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  border: 1.5px solid rgba(124, 58, 237, 0.15);
  padding: 0;
  margin: 0;
}
button.ugc-review-actor-thumb--preview {
  appearance: none;
  -webkit-appearance: none;
  cursor: zoom-in;
  background: color-mix(in srgb, var(--brand-primary, #7c3aed) 10%, #f8fafc);
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
button.ugc-review-actor-thumb--preview:hover {
  border-color: rgba(124, 58, 237, 0.35);
  box-shadow: 0 0 0 2px rgba(124, 58, 237, 0.12);
}
button.ugc-review-actor-thumb--preview:focus-visible {
  outline: none;
  border-color: rgba(124, 58, 237, 0.5);
  box-shadow: 0 0 0 3px rgba(124, 58, 237, 0.16);
}
.ugc-review-actor-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.ugc-review-actor-initial {
  font-size: 18px;
  font-weight: 700;
  line-height: 1;
}
.ugc-review-actor-copy {
  min-width: 0;
  flex: 0 1 auto;
  width: auto;
}
.ugc-review-actor-meta-label {
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--brand-muted, #94a3b8);
  margin-bottom: 2px;
  font-family: 'Tajawal', system-ui, -apple-system, 'Segoe UI', sans-serif;
}
.ugc-review-actor-name {
  font-size: 14px;
  font-weight: 700;
  color: var(--brand-ink, #1f2937);
  line-height: 1.3;
  font-family: 'Tajawal', system-ui, -apple-system, 'Segoe UI', sans-serif;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.ugc-review-product-thumb {
  width: 44px;
  height: 44px;
  border-radius: 12px;
  overflow: hidden;
  background: #f1f5f9;
  flex: 0 0 auto;
  border: 1.5px solid rgba(148, 163, 184, 0.22);
}
.ugc-review-product-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.ugc-review-product-thumb--loading {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, #f1f5f9 25%, #e2e8f0 50%, #f1f5f9 75%);
  background-size: 200% 100%;
  animation: ugc-shimmer 1.2s infinite;
}
@keyframes ugc-shimmer {
  0% { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

/* Videos section */
.ugc-review-videos-section {
  padding-top: 0;
}
.ugc-review-videos-label {
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--brand-muted, #94a3b8);
  margin-bottom: 10px;
}
.ugc-review-video-list {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.ugc-review-video-list > .ugc-review-video-row + .ugc-review-video-row {
  margin-top: 0;
}
.ugc-review-video-row {
  border: 1px solid rgba(148, 163, 184, 0.18);
  border-radius: 12px;
  padding: 8px 12px;
  background: rgba(248, 250, 252, 0.8);
  margin: 0;
}
.ugc-review-video-index {
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--brand-primary, #7c3aed);
  margin: 0 0 2px;
}
.ugc-review-video-script {
  font-size: 13px;
  font-weight: 500;
  color: var(--brand-ink, #1f2937);
  line-height: 1.45;
  margin: 0;
}
.ugc-review-empty {
  color: var(--brand-muted, #94a3b8);
}
.ugc-review-product-thumb--loading {
  background: linear-gradient(90deg, #f1f5f9 25%, #e2e8f0 50%, #f1f5f9 75%);
  background-size: 200% 100%;
  animation: ugc-shimmer 1.2s infinite;
}
@keyframes ugc-shimmer {
  0% { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}
.ugc-winner-section-label {
  font-size: 11px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--brand-primary, #7c3aed);
  margin-bottom: 4px;
}
.ugc-winner-section-input {
  width: 100%;
  min-height: 72px;
  padding: 10px 12px;
  border: 1px solid #e5e7eb;
  border-radius: 10px;
  font-size: 14px;
  line-height: 1.5;
  color: var(--brand-ink, #1f2937);
  background: #fff;
  resize: vertical;
  box-sizing: border-box;
}
.ugc-winner-section-input:focus {
  border-color: var(--brand-primary, #7c3aed);
  box-shadow: 0 0 0 3px rgba(124, 58, 237, 0.12);
  outline: none;
}

/* Per-clip scene beats — minimal typographic list (same cadence as winner hook/script rows) */
.ugc-winner-scene-beat-list {
  list-style: none;
  margin: 6px 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 18px;
}
.ugc-winner-scene-beat-item {
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.ugc-winner-scene-beat-meta {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 8px;
}
.ugc-winner-scene-beat-badge {
  display: block;
  margin: 0;
  padding: 0;
  border: none;
  border-radius: 0;
  background: none;
  font-size: 11px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--brand-muted, #6b7280);
  line-height: 1.3;
}
.ugc-winner-scene-beat-body {
  margin: 0;
  padding: 0;
  font-size: 14px;
  line-height: 1.55;
  font-weight: 400;
  color: var(--brand-ink, #1f2937);
  white-space: pre-wrap;
  word-break: break-word;
  background: none;
  border: none;
  border-radius: 0;
  box-shadow: none;
}
.ugc-winner-scene-beat-body--empty {
  color: var(--brand-muted, #9ca3af);
  font-style: italic;
  font-weight: 400;
}
.ugc-winner-scene-beat-body--auto {
  font-style: normal;
  font-weight: 500;
  color: var(--brand-primary, #4f46e5);
}

/* Loading states */
.ugc-loading {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 16px;
  font-size: 13px;
  color: var(--brand-muted, #9ca3af);
}

/* Responsive */
@media (max-width: 768px) {
  .ugc-hook-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  .ugc-actor-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}
@media (max-width: 600px) {
  .ugc-actor-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (max-width: 480px) {
  .ugc-hook-grid {
    grid-template-columns: 1fr;
  }
  .ugc-goal-cards {
    grid-template-columns: repeat(2, 1fr);
  }
}

.button {
  border: 1px solid color-mix(in srgb, var(--brand-primary, #7c3aed) 35%, #4c1d95);
  border-radius: 11px;
  min-height: 42px;
  padding: 0 18px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  background: color-mix(in srgb, var(--brand-primary, #7c3aed) 88%, #1f2937);
  color: var(--brand-on-primary, #ffffff);
  box-shadow: none;
  font-family: inherit;
  appearance: none;
  -webkit-appearance: none;
  transition: background-color 120ms ease-in-out, border-color 120ms ease-in-out, color 120ms ease-in-out, transform 120ms ease-in-out;
}

.button:hover {
  background: color-mix(in srgb, var(--brand-primary, #7c3aed) 92%, #111827);
  color: var(--brand-on-primary, #ffffff);
  box-shadow: none;
  transform: none;
}

.button:active {
  transform: translateY(1px);
}

.button:disabled {
  opacity: 1;
  background: #e5e7eb !important;
  border-color: #e5e7eb !important;
  color: #9ca3af !important;
  cursor: not-allowed;
  box-shadow: none;
  transform: none !important;
  pointer-events: none;
}

.button.loading {
  position: relative;
  padding-right: 42px;
}

.button.loading::after {
  content: '';
  position: absolute;
  right: 16px;
  top: 50%;
  width: 14px;
  height: 14px;
  margin-top: -7px;
  border: 2px solid rgba(255, 255, 255, 0.5);
  border-top-color: #ffffff;
  border-radius: 50%;
  animation: spin 0.9s linear infinite;
}

.button.secondary.loading::after {
  border: 2px solid rgba(55, 65, 81, 0.25);
  border-top-color: #374151;
}

html[dir="rtl"] .button.loading,
[dir="rtl"] .button.loading {
  padding-right: 16px;
  padding-left: 42px;
}

html[dir="rtl"] .button.loading::after,
[dir="rtl"] .button.loading::after {
  right: auto;
  left: 16px;
}

@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}

.loading-pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  border-radius: 10px;
  background: rgba(147, 51, 234, 0.1);
  color: var(--brand-primary);
  font-weight: 700;
  font-size: 13px;
}

#create-panel #wizard-create.create-submit-loading:disabled {
  background: linear-gradient(180deg, #8b5cf6 0%, #7c3aed 100%) !important;
  border-color: rgba(124, 58, 237, 0.18) !important;
  color: #ffffff !important;
  opacity: 0.92;
  cursor: not-allowed;
  pointer-events: none;
  box-shadow: 0 12px 28px rgba(124, 58, 237, 0.22);
}

/* Author .button-credit-badge { display: inline-flex } overrides UA [hidden]. */
#create-panel #wizard-create.create-submit-loading .button-credit-badge[hidden],
#create-panel #wizard-create.create-submit-loading .super-mode-button-badge[hidden] {
  display: none !important;
}

#create-panel #wizard-create.create-submit-loading .create-submit-loading-pill {
  padding: 0;
  background: transparent;
  color: #ffffff;
  font-size: inherit;
  font-weight: 700;
}

.loading-with-tip {
  display: inline-flex;
  flex-direction: column;
  align-items: flex-start;
}

.loading-tip {
  margin-top: 6px;
  font-size: 12px;
  color: var(--muted, #6b7280);
}

.loading-pill.error-pill {
  background: rgba(239, 68, 68, 0.1);
  color: #dc2626;
  border: 1px solid rgba(239, 68, 68, 0.3);
}

.error-text {
  color: #dc2626;
  font-weight: 500;
}

.elapsed-timer {
  font-weight: 400;
  opacity: 0.8;
  font-size: 12px;
  font-variant-numeric: tabular-nums;
}

.loading-hourglass {
  display: inline-block;
  animation: hourglass 1.2s ease-in-out infinite;
}

@keyframes hourglass {
  0% { transform: rotate(0deg); }
  50% { transform: rotate(180deg); }
  100% { transform: rotate(360deg); }
}

.button.secondary {
  background: transparent;
  color: #374151;
  border: 1px solid #e5e7eb;
  box-shadow: none;
  font-weight: 500;
}

.button.secondary:hover {
  background: #f9fafb;
  color: #111827;
  border-color: #d1d5db;
  transform: none;
}

.button.compact {
  min-height: 40px;
  padding: 0 16px;
  font-size: 14px;
  line-height: 1.2;
  font-weight: 500;
}

.button.publish {
  background: color-mix(in srgb, var(--brand-primary, #7c3aed) 88%, #1f2937);
  color: #ffffff;
  border: 1px solid color-mix(in srgb, var(--brand-primary, #7c3aed) 35%, #4c1d95);
  box-shadow: none;
}

#add-multi-product {
  margin-top: 16px;
}

.button.publish:hover {
  background: color-mix(in srgb, var(--brand-primary, #7c3aed) 92%, #111827);
  transform: none;
  box-shadow: none;
}

.button.publish:active {
  transform: translateY(1px);
}
.button.link {
  background: transparent;
  color: #6b7280;
  border: 1px solid transparent;
  box-shadow: none;
  min-height: 40px;
  padding: 0 14px;
  font-weight: 500;
}

.button.link:hover {
  background: rgba(107, 114, 128, 0.10);
  color: #374151;
  border-color: transparent;
  transform: none;
}

.topbar-actions .button.link {
  background: rgba(255, 255, 255, 0.18);
  backdrop-filter: blur(6px);
  border-color: rgba(255, 255, 255, 0.35);
  color: #ffffff;
  font-weight: 500;
}

.topbar-actions .button.link:hover {
  background: rgba(255, 255, 255, 0.28);
  color: #ffffff;
}

.hint {
  font-size: 12px;
  color: var(--brand-muted);
}

/* Textarea + “may be printed” footnote read as one unit */
.text-include-input-block {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

/* Creative style is its own section; keep it off the “printed text” footnote (esp. when verbatim row is hidden). */
#creative-brief-section #creative-style-field {
  margin-top: 4px;
  padding-top: 14px;
}

.text-include-input-block .text-include-print-hint {
  margin: 0;
}

/* General Design & other non–Idea-Swipe briefs (announcement, product_sale, from_image, …) */
#creative-brief-section:not(.swipe-mode-active) #visual-direction-field {
  margin-top: 10px;
  padding-top: 12px;
  padding-bottom: 0;
}

/*
 * Space above "معلومات يمكن تضمينها" = same rhythm as above "الأسلوب الإبداعي":
 * stack gap 8px + creative-style margin-top 4px + padding-top 14px → 12px + 14px before this section’s label.
 */
#wizard-step-3 #creative-brief-section:not(.swipe-mode-active) ~ #contact-prefs-panel {
  margin-top: 12px;
  padding-top: 14px;
}

#wizard-step-3 #creative-brief-section:not(.swipe-mode-active) ~ #contact-prefs-panel .contact-prefs-inline {
  margin-top: 2px;
}

#wizard-step-3 #creative-brief-section:not(.swipe-mode-active) ~ #contact-prefs-panel .hint[data-i18n="create_contact_brand_hint"] {
  margin-top: 10px;
  padding-top: 0;
}

/* Idea Swipe — same contact spacing as General Design; matches creative-style-field inset */
#creative-brief-section.swipe-mode-active #visual-direction-field {
  margin-top: 10px;
  padding-top: 12px;
  padding-bottom: 0;
}

#creative-brief-section.swipe-mode-active ~ #contact-prefs-panel,
#wizard-step-3:has(#creative-brief-section.swipe-mode-active) #contact-prefs-panel {
  margin-top: 12px;
  padding-top: 14px;
}

#creative-brief-section.swipe-mode-active ~ #contact-prefs-panel .contact-prefs-inline,
#wizard-step-3:has(#creative-brief-section.swipe-mode-active) #contact-prefs-panel .contact-prefs-inline {
  margin-top: 2px;
}

#creative-brief-section.swipe-mode-active ~ #contact-prefs-panel .hint[data-i18n="create_contact_brand_hint"],
#wizard-step-3:has(#creative-brief-section.swipe-mode-active) #contact-prefs-panel .hint[data-i18n="create_contact_brand_hint"] {
  margin-top: 10px;
  padding-top: 0;
}

.language-options {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
}

.language-option {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  border-radius: 999px;
  border: 1px solid var(--brand-border);
  background: #fff;
  cursor: pointer;
  font-weight: 500;
}

.language-option input {
  accent-color: var(--brand-primary);
}

#language-field .language-option {
  font-weight: 400;
}

#create-panel #language-field .language-option input[type="radio"] {
  flex: 0 0 16px;
  width: 16px;
  height: 16px;
  margin: 0;
  transform: none;
  transition: none;
}

#from-image-mode-field {
  padding-top: 10px;
}

.from-image-use-all-wrap {
  margin-top: 12px;
}

#swipe-use-all-assets-field .auto-toggle-inline,
.from-image-use-all-wrap .auto-toggle-inline {
  padding: 0;
  border-radius: 0;
  background: transparent;
}

#swipe-use-all-assets-field .auto-toggle-inline:hover,
.from-image-use-all-wrap .auto-toggle-inline:hover {
  background: transparent;
}

#base-image-field > label,
#from-image-mode-field > label,
#from-image-mode-field .from-image-mode-label-row > label {
  font-size: 14px;
  font-weight: 500;
}

#from-image-mode-field .from-image-mode-label-row {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  width: fit-content;
}

#from-image-mode-field .from-image-mode-help {
  flex: 0 0 auto;
  margin: 0;
  width: 17px;
  height: 17px;
  padding: 0;
  border-color: rgba(148, 163, 184, 0.34);
  background: rgba(255, 255, 255, 0.78);
  color: #64748b;
  font-size: 11px;
}

#from-image-mode-field .from-image-mode-help::after {
  min-width: 260px;
  max-width: min(320px, calc(100vw - 48px));
  font-family: 'Tajawal', 'Cairo', system-ui, -apple-system, 'Segoe UI', sans-serif;
  font-size: 12px;
  font-weight: 500;
  line-height: 1.55;
  text-align: start;
}

#from-image-mode-field .from-image-mode-toggle {
  display: flex;
  align-items: center;
  width: fit-content;
  max-width: 100%;
  gap: 4px;
  flex-wrap: nowrap;
  padding: 3px;
  border: 1px solid rgba(147, 51, 234, 0.16);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.92);
  box-shadow: none;
}

#from-image-mode-field .language-option {
  position: relative;
  justify-content: center;
  min-height: 0;
  margin: 0;
  padding: 8px 16px;
  border: 1px solid transparent;
  border-radius: 999px;
  background: transparent;
  color: var(--text-primary);
  font-size: 14px;
  font-weight: 500;
  text-align: center;
  white-space: nowrap;
  transition: background 0.18s ease, border-color 0.18s ease, color 0.18s ease;
}

#from-image-mode-field .language-option:hover {
  color: var(--brand-primary);
}

#from-image-mode-field .language-option:has(input:checked) {
  background: rgba(147, 51, 234, 0.11);
  color: var(--brand-primary);
  border-color: rgba(147, 51, 234, 0.14);
  font-weight: 700;
}

#from-image-mode-field .language-option input {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  opacity: 0;
  cursor: pointer;
}

#from-image-mode-field .from-image-mode-option-copy {
  position: relative;
  z-index: 1;
  display: grid;
  gap: 2px;
  pointer-events: none;
}

#from-image-mode-field .from-image-mode-option-title {
  line-height: 1.25;
}

#from-image-mode-field .hint {
  margin-top: 8px;
  padding-top: 4px;
}

.checkbox-line {
  margin-top: 10px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  color: var(--brand-ink);
  cursor: pointer;
}

[dir="rtl"] #wizard-target-languages-label + .inline-actions,
.rtl #wizard-target-languages-label + .inline-actions {
  width: 100%;
  display: flex;
  direction: rtl;
  justify-content: flex-end;
  align-items: center;
  text-align: right;
}

[dir="rtl"] #wizard-target-languages-label + .inline-actions .checkbox-line,
.rtl #wizard-target-languages-label + .inline-actions .checkbox-line {
  flex-direction: row;
}

[dir="rtl"] #wizard-target-languages-label + .inline-actions .checkbox-line input,
.rtl #wizard-target-languages-label + .inline-actions .checkbox-line input {
  order: 2;
}

[dir="rtl"] #wizard-target-languages-label + .inline-actions .checkbox-line span,
.rtl #wizard-target-languages-label + .inline-actions .checkbox-line span {
  order: 1;
}

#wizard-target-languages-label + .inline-actions .checkbox-line {
  margin-top: 0;
}

.wizard-step-panel[data-step="4"] #wizard-target-languages-label + .inline-actions {
  margin-top: 2px;
  column-gap: 22px;
  row-gap: 10px;
}

.wizard-step-panel[data-step="4"] > .row + .field,
.wizard-step-panel[data-step="4"] > .field + .field {
  margin-top: 12px;
}

.wizard-step-panel[data-step="4"] .wizard-age-row {
  grid-template-columns: minmax(110px, 140px) 16px minmax(110px, 140px) minmax(180px, 260px);
  width: fit-content;
  max-width: 100%;
  justify-content: start;
  align-items: end;
  column-gap: 6px;
}

.wizard-step-panel[data-step="4"] .wizard-age-field {
  max-width: 140px;
  min-width: 110px;
}

.wizard-step-panel[data-step="4"] .wizard-age-field input {
  width: 100%;
}

.wizard-step-panel[data-step="4"] .wizard-age-separator {
  font-size: 18px;
  line-height: 1;
  align-self: end;
  padding-bottom: 12px;
  text-align: center;
  color: #8d9099;
}

.wizard-step-panel[data-step="4"] .wizard-gender-field {
  min-width: 150px;
  align-self: start;
  justify-content: flex-start;
}

.wizard-step-panel[data-step="4"] .wizard-gender-options {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: nowrap;
  white-space: nowrap;
  margin-top: 2px;
}

.wizard-step-panel[data-step="4"] .wizard-gender-options .checkbox-line {
  margin-top: 0;
}

.wizard-step-panel[data-step="4"] #wizard-geo-countries {
  margin-top: 12px;
}

.wizard-step-panel[data-step="4"] .wizard-country-multi-select {
  min-height: 150px;
  height: auto;
  padding: 8px;
}

.wizard-step-panel[data-step="4"] #wizard-geo-radius > .row {
  margin-top: 12px;
}

.wizard-step-panel[data-step="4"] #wizard-radius-center {
  margin-top: 10px;
}

.wizard-step-panel[data-step="4"] #wizard-radius-points .review-row {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: nowrap;
  min-width: 0;
}

.wizard-step-panel[data-step="4"] .wizard-radius-point-controls {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-inline-start: auto;
  flex-shrink: 0;
}

.wizard-step-panel[data-step="4"] .wizard-radius-point-radius {
  width: 92px;
  min-width: 92px;
  height: 42px;
  padding: 8px 10px;
  border: 1px solid #cbd5e1;
  border-radius: 10px;
  background: #fff;
  color: #0f172a;
  font-weight: 700;
  text-align: center;
  direction: ltr;
}

.wizard-step-panel[data-step="4"] .wizard-radius-point-radius:focus {
  border-color: #6366f1;
  box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.14);
  outline: none;
}

.wizard-step-panel[data-step="4"] .wizard-radius-point-remove {
  margin-inline-start: auto;
  flex-shrink: 0;
}

.wizard-step-panel[data-step="4"] .wizard-interest-input-row {
  display: flex;
  align-items: end;
  gap: 8px;
}

.wizard-step-panel[data-step="4"] .wizard-interest-input-field {
  flex: 1 1 auto;
  min-width: 0;
}

.wizard-step-panel[data-step="4"] .audience-estimate-card {
  margin-top: 10px;
  margin-bottom: 12px;
  border: 1px solid #dbe2ef;
  border-radius: 12px;
  background: #ffffff;
  padding: 12px 14px;
  display: grid;
  gap: 6px;
  text-align: center;
  transition: border-color .14s ease, box-shadow .14s ease, background-color .14s ease;
}

.wizard-step-panel[data-step="4"] .audience-estimate-card.is-loading {
  background: #fafbff;
}

.wizard-step-panel[data-step="4"] .audience-estimate-card.is-too-limited {
  border-color: #fecaca;
  background: #fff7f7;
}

.wizard-step-panel[data-step="4"] .audience-estimate-card.is-limited {
  border-color: #fde68a;
  background: #fffcf2;
}

.wizard-step-panel[data-step="4"] .audience-estimate-card.is-good {
  border-color: #c7d2fe;
  background: #f8faff;
}

.wizard-step-panel[data-step="4"] .audience-estimate-card.is-broad {
  border-color: #dbe2ef;
  background: #f8fafc;
}

.wizard-step-panel[data-step="4"] .audience-estimate-head {
  display: flex;
  align-items: center;
  justify-content: center;
}

.wizard-step-panel[data-step="4"] .audience-estimate-title {
  font-size: 13px;
  font-weight: 700;
  color: #334155;
}

.wizard-step-panel[data-step="4"] .audience-estimate-status {
  display: flex;
  justify-content: center;
  align-items: center;
  margin-top: 2px;
  margin-bottom: 2px;
}

.wizard-step-panel[data-step="4"] .audience-estimate-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 4px 12px;
  border-radius: 999px;
  font-size: 13px;
  font-weight: 700;
  border: 1px solid transparent;
  white-space: nowrap;
  letter-spacing: .01em;
}

.wizard-step-panel[data-step="4"] .audience-estimate-badge-loading,
.wizard-step-panel[data-step="4"] .audience-estimate-badge-muted {
  background: #f1f5f9;
  color: #64748b;
  border-color: #e2e8f0;
}

.wizard-step-panel[data-step="4"] .audience-estimate-badge-too_limited {
  background: #fee2e2;
  color: #b91c1c;
  border-color: #fecaca;
}

.wizard-step-panel[data-step="4"] .audience-estimate-badge-limited {
  background: #fef3c7;
  color: #92400e;
  border-color: #fde68a;
}

.wizard-step-panel[data-step="4"] .audience-estimate-badge-good {
  background: #e0e7ff;
  color: #3730a3;
  border-color: #c7d2fe;
}

.wizard-step-panel[data-step="4"] .audience-estimate-badge-broad {
  background: #f1f5f9;
  color: #334155;
  border-color: #dbe2ef;
}

.wizard-step-panel[data-step="4"] .audience-estimate-value {
  font-size: 21px;
  font-weight: 700;
  color: #0f172a;
  line-height: 1.25;
}

.wizard-step-panel[data-step="4"] .audience-estimate-coverage {
  font-size: 12px;
  color: #475569;
}

.wizard-step-panel[data-step="4"] .audience-estimate-hint {
  font-size: 12px;
  color: #64748b;
}

.wizard-step-panel[data-step="4"] #wizard-geo-mode-field {
  margin-bottom: 10px;
}

.wizard-step-panel[data-step="4"] .wizard-auto-targeting-btn {
  min-height: 40px;
  min-width: 40px;
  border-radius: 12px;
  padding: 0 12px;
  font-size: 13px;
  font-weight: 700;
  line-height: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  white-space: nowrap;
}

.wizard-step-panel[data-step="4"] .wizard-auto-targeting-btn .wizard-auto-targeting-icon {
  font-size: 16px;
  line-height: 1;
}

.wizard-step-panel[data-step="4"] .wizard-radius-actions {
  width: 100%;
  display: flex !important;
  justify-content: flex-start;
}

#wizard-radius-drop-pin-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

#wizard-radius-clear-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.wizard-radius-btn-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 16px;
  line-height: 1;
}

[dir="rtl"] .wizard-step-panel[data-step="4"] .wizard-radius-actions,
.rtl .wizard-step-panel[data-step="4"] .wizard-radius-actions {
  justify-content: flex-end !important;
  flex-direction: row-reverse;
  margin-inline-start: auto;
}

.wizard-modal-loading-overlay {
  z-index: 120;
}

.wizard-modal-loading-success {
  color: #166534;
  font-size: 15px;
}

[dir="rtl"] .campaign-wizard-modal-card .wizard-steps-bar,
.rtl .campaign-wizard-modal-card .wizard-steps-bar {
  direction: rtl;
}

[dir="rtl"] .campaign-wizard-modal-card .wizard-step-panel .section-title,
.rtl .campaign-wizard-modal-card .wizard-step-panel .section-title,
[dir="rtl"] .campaign-wizard-modal-card .field label,
.rtl .campaign-wizard-modal-card .field label {
  text-align: right;
}

[dir="rtl"] .campaign-wizard-modal-card .goal-option,
.rtl .campaign-wizard-modal-card .goal-option {
  flex-direction: row-reverse;
  justify-content: flex-end;
  text-align: right;
}

[dir="rtl"] .campaign-wizard-modal-card .wizard-footer-actions,
.rtl .campaign-wizard-modal-card .wizard-footer-actions {
  flex-direction: row-reverse;
  justify-content: flex-end;
}

#contact-prefs-panel .contact-prefs-inline {
  display: flex;
  flex-wrap: wrap;
  gap: 12px 16px;
  margin-top: 8px;
}

#contact-prefs-panel .hint[data-i18n="create_contact_brand_hint"] {
  margin-top: 10px;
  padding-top: 0;
}

#contact-prefs-panel .contact-prefs-inline .checkbox-line {
  margin-top: 0;
  font-weight: 400;
}

#contact-prefs-panel .contact-prefs-inline input[type="checkbox"] {
  flex: 0 0 16px;
  width: 16px;
  height: 16px;
  margin: 0;
  transform: none;
  transition: none;
}

#wizard-step-3 #contact-prefs-panel + #multi-brand-field {
  margin-top: 32px;
}

.multi-brand-compact {
  border: 1px solid var(--brand-border);
  border-radius: 14px;
  padding: 12px 14px;
  background: linear-gradient(180deg, rgba(249, 250, 251, 0.9) 0%, #fff 100%);
}

.multi-brand-compact.is-active {
  border-color: rgba(124, 58, 237, 0.35);
  box-shadow: 0 4px 18px rgba(124, 58, 237, 0.07);
}

.multi-brand-compact-head {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: nowrap;
}

.multi-brand-compact-row {
  flex: 1;
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0;
  cursor: pointer;
  font-weight: 500;
  font-size: 14px;
  color: var(--brand-ink);
  user-select: none;
}

.multi-brand-compact-box {
  width: 22px;
  height: 22px;
  flex-shrink: 0;
  border-radius: 7px;
  border: 2px solid #cbd5e1;
  background: #fff;
  display: grid;
  place-items: center;
  transition: border-color 0.15s ease, background 0.15s ease, box-shadow 0.15s ease;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.8);
}

.multi-brand-expand-cb:focus-visible + .multi-brand-compact-box {
  outline: 2px solid var(--brand-primary);
  outline-offset: 2px;
}

.multi-brand-expand-cb:checked + .multi-brand-compact-box {
  background: var(--brand-primary);
  border-color: var(--brand-primary);
  box-shadow: 0 1px 3px rgba(124, 58, 237, 0.35);
}

.multi-brand-expand-cb:checked + .multi-brand-compact-box::after {
  content: '';
  width: 5px;
  height: 9px;
  margin-bottom: 2px;
  border: solid #fff;
  border-width: 0 2.5px 2.5px 0;
  transform: rotate(45deg);
}

.multi-brand-help-btn {
  flex-shrink: 0;
  width: 22px;
  height: 22px;
  border: none;
  border-radius: 999px;
  background: rgba(100, 116, 139, 0.14);
  color: #64748b;
  font-size: 11px;
  font-weight: 700;
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: help;
  padding: 0;
  transition: background 0.15s ease, color 0.15s ease, transform 0.15s ease;
  position: relative;
}

.multi-brand-help-btn:hover {
  background: var(--brand-primary);
  color: #fff;
  transform: scale(1.06);
}

.multi-brand-compact-panel {
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid rgba(148, 163, 184, 0.35);
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.multi-brand-compact-panel[hidden] {
  display: none !important;
}

.multi-brand-panel-lede {
  margin: 0;
}

.multi-brand-compact .multi-brand-open-btn {
  align-self: flex-start;
}

.multi-brand-compact .multi-brand-summary {
  margin-top: 0;
}

.multi-brand-compact .multi-brand-inline-actions {
  margin-top: 0;
}

.multi-brand-summary {
  margin-top: 14px;
  padding: 12px 14px;
  border-radius: 12px;
  font-size: 13px;
  color: var(--brand-ink);
  background: rgba(124, 58, 237, 0.06);
  border: 1px solid rgba(124, 58, 237, 0.12);
}

.multi-brand-summary.is-empty {
  color: #6b7280;
  background: rgba(107, 114, 128, 0.06);
  border-color: rgba(107, 114, 128, 0.14);
}

.multi-brand-inline-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 12px;
}

.multi-brand-actions {
  margin: 16px 0 8px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.multi-brand-count {
  font-size: 13px;
  color: #6b7280;
  font-weight: 500;
}

.multi-brand-list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 8px;
  margin: 12px 0 20px;
  max-height: 400px;
  overflow-y: auto;
  padding: 4px;
  border: 1px solid #e5e7eb;
  border-radius: 12px;
  background: #f9fafb;
}

.multi-brand-list::-webkit-scrollbar {
  width: 8px;
}

.multi-brand-list::-webkit-scrollbar-track {
  background: #f1f5f9;
  border-radius: 4px;
}

.multi-brand-list::-webkit-scrollbar-thumb {
  background: #cbd5e1;
  border-radius: 4px;
}

.multi-brand-list::-webkit-scrollbar-thumb:hover {
  background: #94a3b8;
}

.multi-brand-list .checkbox-line {
  margin: 0;
  padding: 12px 16px;
  border-radius: 8px;
  background: white;
  border: 2px solid #e5e7eb;
  transition: all 0.2s;
  cursor: pointer;
}

.multi-brand-list .checkbox-line:hover {
  border-color: #7c3aed;
  background: #faf5ff;
}

.multi-brand-list .checkbox-line input:checked + span {
  color: #7c3aed;
  font-weight: 500;
}

.multi-brand-list .checkbox-line input:checked {
  background: #7c3aed;
  border-color: #7c3aed;
}

#multi-brand-modal .modal-card {
  max-width: 800px;
}

#multi-brand-modal {
  z-index: 10020;
}

html[dir="rtl"] #multi-brand-modal .modal-close,
[dir="rtl"] #multi-brand-modal .modal-close,
.rtl #multi-brand-modal .modal-close {
  left: 16px;
  right: auto;
}

#multi-brand-modal .modal-subtitle {
  margin-bottom: 4px;
}

.multi-brand-groups {
  margin-top: 16px;
  display: grid;
  gap: 16px;
}

.multi-brand-card .section-header {
  align-items: center;
}

.multi-brand-counts {
  display: flex;
  gap: 16px;
  font-size: 13px;
  color: #6b7280;
  margin-top: 8px;
}

.multi-brand-row {
  display: grid;
  grid-template-columns: 1fr auto auto;
  gap: 12px;
  align-items: center;
  padding: 8px 0;
  border-bottom: 1px solid #eef2f7;
}

.multi-brand-row:last-child {
  border-bottom: none;
}

.multi-brand-status {
  font-size: 12px;
  padding: 2px 8px;
  border-radius: 999px;
  background: #f3f4f6;
  color: #374151;
  text-transform: capitalize;
}

.multi-brand-status.success {
  background: #dcfce7;
  color: #166534;
}

.multi-brand-status.error {
  background: #fee2e2;
  color: #991b1b;
}

.multi-brand-status.pending {
  background: #e0f2fe;
  color: #075985;
}

.checkbox-line input {
  accent-color: var(--brand-primary);
}

.super-mode-field {
  margin: -6px 0 18px;
  padding: 0;
  border: 0;
  position: relative;
  z-index: 40;
  cursor: pointer;
}

.super-mode-toggle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  cursor: pointer;
  padding: 13px 14px;
  border: 1px solid rgba(148, 163, 184, 0.22);
  border-radius: 20px;
  background:
    radial-gradient(circle at 16px 10px, rgba(255,255,255,0.95), transparent 34px),
    linear-gradient(135deg, rgba(248, 250, 252, 0.96), rgba(255, 255, 255, 0.98) 52%, rgba(241, 245, 249, 0.9));
  box-shadow: 0 10px 26px rgba(15, 23, 42, 0.055);
  transition: border-color 0.18s ease, box-shadow 0.18s ease, transform 0.18s ease;
}

.super-mode-toggle:hover {
  border-color: rgba(100, 116, 139, 0.34);
  box-shadow: 0 10px 22px rgba(15, 23, 42, 0.07);
  transform: translateY(-1px);
}

.super-mode-copy {
  display: grid;
  gap: 2px;
  min-width: 0;
  position: relative;
  padding-inline-start: 34px;
}

.super-mode-copy::before {
  content: '\26A1\FE0E';
  position: absolute;
  inset-inline-start: 0;
  top: 50%;
  width: 24px;
  height: 24px;
  transform: translateY(-50%);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  color: #94a3b8;
  background: #f1f5f9;
  font-size: 12px;
  font-family: Arial, system-ui, sans-serif;
  filter: grayscale(1);
  box-shadow: inset 0 0 0 1px rgba(148, 163, 184, 0.26);
}

.super-mode-title-row {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: 14px;
  font-weight: 850;
  color: #111827;
  letter-spacing: -0.01em;
  line-height: 1.2;
}

.super-mode-short {
  font-size: 12px;
  color: #64748b;
  line-height: 1.35;
}

.super-mode-help {
  margin: 0;
  width: 17px;
  height: 17px;
  padding: 0;
  border-color: rgba(148, 163, 184, 0.34);
  background: rgba(255, 255, 255, 0.78);
  color: #64748b;
  font-size: 11px;
}

.super-mode-help::after {
  min-width: 260px;
  max-width: min(320px, calc(100vw - 48px));
  font-family: 'Tajawal', 'Cairo', system-ui, -apple-system, 'Segoe UI', sans-serif;
  font-size: 12px;
  font-weight: 500;
  line-height: 1.55;
  text-align: start;
}

.super-mode-help::before {
  font-family: 'Tajawal', 'Cairo', system-ui, -apple-system, 'Segoe UI', sans-serif;
}

.super-mode-help::after,
.super-mode-help::before,
.super-mode-help:hover::after,
.super-mode-help:focus::after,
.super-mode-help:hover::before,
.super-mode-help:focus::before {
  opacity: 0;
  transform: translate(-50%, 8px);
}

.super-mode-help.is-tooltip-active::after,
.super-mode-help.is-tooltip-active::before {
  opacity: 1;
  transform: translate(-50%, 0);
}

.super-mode-power {
  position: relative;
  flex: 0 0 auto;
}

.super-mode-power input {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  opacity: 0;
  cursor: pointer;
  z-index: 2;
}

.super-mode-power-track {
  position: relative;
  display: grid;
  grid-template-columns: 44px 38px 44px;
  align-items: center;
  gap: 4px;
  min-width: 140px;
  height: 44px;
  padding: 4px;
  border-radius: 999px;
  overflow: hidden;
  background: #f1f5f9;
  box-shadow:
    inset 0 0 0 1px rgba(148, 163, 184, 0.24),
    0 8px 16px rgba(15, 23, 42, 0.07);
  transition: box-shadow 0.2s ease, background 0.2s ease, transform 0.2s ease;
}

.super-mode-power-track::before {
  content: '';
  position: absolute;
  inset-block: 4px;
  inset-inline-start: 4px;
  width: 44px;
  border-radius: 999px;
  background: rgba(148, 163, 184, 0.16);
  transition: inset-inline-start 0.2s ease, background 0.2s ease, box-shadow 0.2s ease;
}

.super-mode-power-text {
  position: relative;
  z-index: 1;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  text-align: center;
  color: rgba(100, 116, 139, 0.54);
  line-height: 1;
}

.super-mode-power-text--off {
  color: #475569;
  text-shadow: none;
}

.super-mode-power-core {
  position: relative;
  z-index: 1;
  width: 34px;
  height: 34px;
  border-radius: 999px;
  background: #f8fafc;
  box-shadow:
    0 5px 14px rgba(0, 0, 0, 0.3),
    inset 0 0 0 1px rgba(148, 163, 184, 0.42);
  transition: transform 0.22s ease, background 0.22s ease, box-shadow 0.22s ease;
}

.super-mode-power-core::after {
  content: '\26A1\FE0E';
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #64748b;
  font-size: 13px;
  font-family: Arial, system-ui, sans-serif;
  filter: grayscale(1) saturate(0);
}

.super-mode-power input:checked + .super-mode-power-track {
  background: #6d28d9;
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,0.18),
    0 0 0 3px rgba(124, 58, 237, 0.08),
    0 8px 18px rgba(124, 58, 237, 0.2);
}

.super-mode-power input:checked + .super-mode-power-track::before {
  inset-inline-start: calc(100% - 48px);
  background: rgba(255, 255, 255, 0.22);
  box-shadow: 0 0 18px rgba(255,255,255,0.42);
}

.super-mode-power input:checked + .super-mode-power-track .super-mode-power-core {
  transform: scale(1.08);
  background: #7c3aed;
  box-shadow:
    0 0 10px rgba(124, 58, 237, 0.38),
    0 5px 12px rgba(88, 28, 135, 0.3),
    inset 0 0 0 1px rgba(255,255,255,0.22);
}

.super-mode-power input:checked + .super-mode-power-track .super-mode-power-core::after {
  color: #fff;
  filter: none;
}

.super-mode-power input:checked + .super-mode-power-track .super-mode-power-text--off {
  color: rgba(255, 255, 255, 0.52);
  text-shadow: none;
}

.super-mode-power input:checked + .super-mode-power-track .super-mode-power-text--on {
  color: #fff;
  text-shadow: 0 1px 10px rgba(255,255,255,0.48);
}

.super-mode-power input:focus-visible + .super-mode-power-track {
  outline: 3px solid rgba(124, 58, 237, 0.28);
  outline-offset: 3px;
}

.super-mode-power input:disabled + .super-mode-power-track {
  cursor: not-allowed;
  filter: grayscale(0.65);
  opacity: 0.58;
}

.super-mode-field.is-selected .super-mode-toggle {
  border-color: rgba(124, 58, 237, 0.44);
  background:
    radial-gradient(circle at 20px 14px, rgba(255,255,255,0.96), transparent 40px),
    linear-gradient(135deg, rgba(250, 245, 255, 0.98), rgba(255, 255, 255, 1) 42%, rgba(237, 233, 254, 0.96));
  box-shadow: 0 8px 20px rgba(124, 58, 237, 0.1);
}

.super-mode-field.is-selected .super-mode-copy::before {
  color: #fff;
  background: linear-gradient(135deg, #7c3aed, #a855f7);
  filter: none;
  box-shadow: 0 8px 18px rgba(124, 58, 237, 0.28);
}

.super-mode-field.is-selected .super-mode-help {
  border-color: rgba(124, 58, 237, 0.22);
  color: #7c3aed;
}

.super-mode-field.is-disabled .super-mode-toggle {
  opacity: 0.66;
  cursor: not-allowed;
}

.super-mode-field.is-locked,
.super-mode-field.is-locked .super-mode-toggle,
.super-mode-field.is-locked .super-mode-power input,
.super-mode-field.is-locked .super-mode-power-track {
  cursor: not-allowed;
}

.super-mode-field.is-locked .super-mode-power input {
  pointer-events: none;
}

.super-mode-hint {
  margin: 6px 12px 0;
  font-size: 12px;
}

[dir="rtl"] .super-mode-help::after,
.rtl .super-mode-help::after {
  font-family: 'Tajawal', 'Cairo', system-ui, -apple-system, 'Segoe UI', sans-serif;
  direction: rtl;
  text-align: right;
}

.super-mode-button-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  margin-inline-end: 6px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.28);
  color: #fff;
  font-size: 12px;
  line-height: 1;
}

#wizard-create.super-mode-active {
  box-shadow: 0 14px 34px rgba(124, 58, 237, 0.3), 0 0 0 1px rgba(255, 255, 255, 0.16) inset;
}

/* Carousel mode selector */
.carousel-mode-options {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
}

.carousel-mode-option {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 16px;
  border-radius: 999px;
  border: 1px solid var(--brand-border);
  background: #fff;
  cursor: pointer;
  font-weight: 500;
  transition: all 0.2s ease;
}

.carousel-mode-option:has(input:checked) {
  border-color: var(--brand-primary);
  background: rgba(147, 51, 234, 0.08);
}

.carousel-mode-option input {
  accent-color: var(--brand-primary);
}

.carousel-mode-option input[type="radio"] {
  flex: 0 0 16px;
  width: 16px;
  height: 16px;
  margin: 0;
  transform: none;
  transition: none;
}

/* Carousel slide preview */
#carousel-preview-section {
  margin-top: 16px;
}

#carousel-preview-section .alert,
#multi-products-section .alert {
  margin-bottom: 16px;
}

/* ===== Collapsible Field (details/summary) ===== */
.collapsible-field {
  border: 1px solid var(--brand-border);
  border-radius: 10px;
  padding: 0;
  margin-bottom: 4px;
}
.collapsible-toggle {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 10px 14px;
  font-size: 13px;
  font-weight: 500;
  color: var(--brand-muted);
  cursor: pointer;
  list-style: none;
  user-select: none;
}
.collapsible-toggle::-webkit-details-marker { display: none; }
.collapsible-toggle::before {
  content: '＋';
  font-size: 13px;
  font-weight: 700;
  color: var(--brand-muted);
  transition: transform 0.2s;
}
.collapsible-field[open] > .collapsible-toggle::before {
  content: '－';
}
.collapsible-body {
  padding: 0 14px 14px;
}

#multi-company-logo-field {
  border: 0;
  margin-bottom: 8px;
  background: transparent;
}

#multi-company-logo-field > .collapsible-toggle {
  justify-content: center;
  width: 100%;
  min-height: 46px;
  padding: 12px 16px;
  border: 1px solid var(--brand-border);
  border-radius: 12px;
  background: #fff;
  color: var(--brand-ink);
  font-weight: 700;
  box-shadow: 0 6px 20px rgba(15, 23, 42, 0.04);
  transition: border-color 0.18s ease, box-shadow 0.18s ease, background 0.18s ease;
}

#multi-company-logo-field > .collapsible-toggle:hover {
  border-color: var(--brand-primary);
  box-shadow: 0 8px 24px rgba(124, 58, 237, 0.10);
}

#multi-company-logo-field > .collapsible-toggle::before {
  order: 2;
  margin-inline-start: 8px;
  color: var(--brand-primary);
  font-size: 15px;
}

#multi-company-logo-field[open] > .collapsible-toggle {
  background: rgba(124, 58, 237, 0.05);
  border-color: rgba(124, 58, 237, 0.28);
}

#multi-company-logo-field > .collapsible-body {
  margin-top: 10px;
  padding: 0;
}

#generate-carousel-preview {
  margin-top: 8px;
}

.section-subtitle {
  font-size: 14px;
  font-weight: 500;
  color: var(--brand-ink);
  margin-bottom: 8px;
}

/* Match .create-choice-stage premium surface */
.carousel-slide-item {
  position: relative;
  margin: 0 0 16px;
  padding: 18px 18px 20px;
  border-radius: 22px;
  border: 1px solid rgba(148, 163, 184, 0.18);
  background:
    radial-gradient(circle at top right, rgba(124, 58, 237, 0.07), transparent 34%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.98) 0%, rgba(248, 250, 252, 0.98) 100%);
  box-shadow:
    0 18px 44px rgba(15, 23, 42, 0.06),
    inset 0 1px 0 rgba(255, 255, 255, 0.75);
}

.carousel-slide-item[data-slide="0"] {
  background:
    radial-gradient(circle at top right, rgba(124, 58, 237, 0.1), transparent 38%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.98) 0%, rgba(248, 250, 252, 0.98) 100%);
}

html[dir="rtl"] .carousel-slide-item,
[dir="rtl"] .carousel-slide-item,
.rtl .carousel-slide-item {
  background:
    radial-gradient(circle at top left, rgba(124, 58, 237, 0.07), transparent 34%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.98) 0%, rgba(248, 250, 252, 0.98) 100%);
}

html[dir="rtl"] .carousel-slide-item[data-slide="0"],
[dir="rtl"] .carousel-slide-item[data-slide="0"],
.rtl .carousel-slide-item[data-slide="0"] {
  background:
    radial-gradient(circle at top left, rgba(124, 58, 237, 0.1), transparent 38%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.98) 0%, rgba(248, 250, 252, 0.98) 100%);
}

.carousel-slide-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 14px;
  padding-bottom: 0;
  border-bottom: none;
}

.carousel-slide-label {
  font-size: 16px;
  font-weight: 700;
  color: var(--brand-ink);
  letter-spacing: -0.02em;
  text-transform: none;
}

.carousel-slide-primary {
  margin-bottom: 0;
}

.carousel-slide-field-label {
  display: block;
  font-size: 12px;
  font-weight: 500;
  color: var(--brand-ink);
  text-transform: none;
  letter-spacing: 0;
  margin-bottom: 8px;
}

.carousel-slide-primary .carousel-slide-field-label {
  font-size: 11px;
  font-weight: 500;
  margin-bottom: 6px;
}

.carousel-slide-primary .carousel-slide-input {
  margin-top: 0;
}

.carousel-slide-primary .carousel-slide-input.cover-input,
.carousel-slide-primary .carousel-slide-input.tip-input {
  font-size: 14px;
  font-weight: 500;
}

.carousel-slide-primary .carousel-slide-input.cover-input::placeholder,
.carousel-slide-primary .carousel-slide-input.tip-input::placeholder {
  font-size: 13px;
  font-weight: 400;
  opacity: 0.78;
}

.carousel-slide-remove {
  background: none;
  border: none;
  font-size: 18px;
  color: var(--brand-muted);
  cursor: pointer;
  padding: 0 4px;
  line-height: 1;
  transition: color 0.2s ease;
}

.carousel-slide-remove:hover {
  color: #dc2626;
}

.carousel-slide-input {
  width: 100%;
  padding: 11px 13px;
  border: 1px solid rgba(15, 23, 42, 0.08);
  border-radius: 10px;
  font-size: 15px;
  font-family: inherit;
  resize: vertical;
  background: #fafafa;
  transition: border-color 0.15s ease, background 0.15s ease, box-shadow 0.15s ease;
}

.carousel-slide-input:focus {
  outline: none;
  background: #fff;
  border-color: rgba(124, 58, 237, 0.45);
  box-shadow: 0 0 0 3px rgba(124, 58, 237, 0.12);
}

.carousel-slide-input.cover-input {
  font-weight: 500;
  font-size: 14px;
}

.carousel-slide-actions {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 8px;
}

.carousel-slide-count {
  font-size: 12px;
  color: var(--brand-muted);
}

#carousel-ai-status {
  margin-top: 8px;
}

#carousel-ai-status.loading {
  color: var(--brand-primary);
}

#carousel-ai-status.error {
  color: #dc2626;
}

.carousel-cta-field {
  margin-top: 18px;
  padding-top: 16px;
  border-top: 1px solid rgba(15, 23, 42, 0.08);
}

.carousel-slide-extras {
  margin-top: 16px;
}

.carousel-slide-extras-toggle {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  flex-wrap: nowrap;
  width: 100%;
  gap: 6px;
  padding: 6px 2px 8px;
  margin: 0;
  border: none;
  background: transparent;
  font: inherit;
  font-size: 12.5px;
  font-weight: 500;
  color: var(--brand-muted);
  cursor: pointer;
  text-align: inherit;
  border-radius: 0;
  transition: color 0.15s ease;
}

.carousel-slide-extras-toggle:hover {
  color: var(--brand-ink);
}

.carousel-slide-extras-toggle:focus-visible {
  outline: 2px solid rgba(124, 58, 237, 0.35);
  outline-offset: 2px;
  border-radius: 6px;
}

.carousel-slide-extras-chevron {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  color: var(--brand-muted);
}

.carousel-slide-extras-chevron svg {
  display: block;
  transition: transform 0.2s ease;
  transform: rotate(0deg);
}

.carousel-slide-extras--open .carousel-slide-extras-chevron svg {
  transform: rotate(90deg);
}

.carousel-slide-meta-stack {
  display: grid;
  gap: 16px;
  margin-top: 18px;
  padding-top: 18px;
  border-top: 1px solid rgba(15, 23, 42, 0.08);
  border-radius: 0;
  border-left: none;
  border-right: none;
  border-bottom: none;
  background: transparent;
  padding-left: 0;
  padding-right: 0;
}

/* Author `display: grid` above overrides the UA [hidden] rule; keep collapsed panels hidden. */
.carousel-slide-meta-stack[hidden] {
  display: none !important;
}

.carousel-slide-extras .carousel-slide-meta-stack {
  margin-top: 14px;
  padding-top: 16px;
}

.carousel-slide-section-label {
  grid-column: 1 / -1;
  font-size: 13px;
  font-weight: 500;
  color: var(--brand-muted);
  text-transform: none;
  letter-spacing: 0;
  margin: 0 0 2px;
  padding-bottom: 0;
  border-bottom: none;
}

.carousel-slide-meta-field {
  display: flex;
  flex-direction: column;
  gap: 0;
}

.carousel-slide-meta-label {
  display: block;
  font-size: 12px;
  font-weight: 500;
  color: var(--brand-muted);
  margin-bottom: 4px;
}

.carousel-slide-meta-label .optional-label {
  font-weight: 400;
  opacity: 0.9;
}

.carousel-slide-meta-stack .carousel-slide-input {
  margin-top: 0;
  font-size: 14px;
}

.carousel-slide-source-field .swipe-visual-previews {
  min-height: 48px;
}

/* Softer upload control: less “second box” */
.carousel-slide-meta-stack .swipe-add-btn {
  border-style: solid;
  border-color: rgba(15, 23, 42, 0.1);
  border-width: 1px;
  background: #fafafa;
}

.carousel-slide-meta-stack .swipe-add-btn:hover,
.carousel-slide-meta-stack .swipe-add-btn:focus-visible {
  background: #fff;
}

.carousel-cta-label {
  display: block;
  font-size: 12px;
  font-weight: 500;
  color: var(--brand-muted);
  text-transform: none;
  letter-spacing: 0;
  margin-bottom: 6px;
}

/* Auto toggle row - flex container to align checkbox */
.auto-toggle-row {
  display: flex;
  justify-content: flex-start;
  margin-bottom: 8px;
}

/* Auto toggle - the actual checkbox label */
.auto-toggle-inline {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  color: var(--brand-muted);
  cursor: pointer;
  padding: 6px 12px;
  border-radius: 20px;
  background: rgba(147, 51, 234, 0.08);
  transition: all 0.2s ease;
  width: fit-content;
}

.auto-toggle-inline:hover {
  background: rgba(147, 51, 234, 0.15);
}

.auto-toggle-inline input {
  accent-color: var(--brand-primary);
  flex: 0 0 16px;
  width: 16px;
  height: 16px;
  margin: 0;
  transform: none;
  transition: none;
}

.auto-toggle-inline input:checked + span {
  color: var(--brand-primary);
  font-weight: 500;
}

/* Spacing below style grid */
.brief-style-grid {
  margin-bottom: 24px;
}

/* Verbatim toggle - below textarea */
.verbatim-toggle {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  line-height: 1.25;
  color: var(--brand-ink);
  cursor: pointer;
  margin-top: 8px;
  margin-bottom: 4px;
}

/* Hint after verbatim toggle needs extra spacing below */
.verbatim-toggle + .hint {
  margin-bottom: 24px;
}

.verbatim-toggle input {
  accent-color: var(--brand-primary);
  width: 16px;
  height: 16px;
  margin: 0;
  flex: 0 0 auto;
}

.verbatim-toggle span {
  display: inline-flex;
  align-items: center;
  line-height: 1.25;
}

.verbatim-toggle input:checked + span {
  color: var(--brand-primary);
  font-weight: 500;
}

/* Disabled textarea style */
textarea:disabled {
  background: var(--brand-bg);
  color: var(--brand-muted);
  cursor: not-allowed;
  opacity: 0.6;
}

/* Brief Style Grid */
.brief-style-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
}

@media (max-width: 768px) {
  .brief-style-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .super-mode-field {
    margin-bottom: 12px;
  }

  .super-mode-toggle,
  .super-mode-field.is-selected .super-mode-toggle {
    box-shadow: 0 6px 14px rgba(124, 58, 237, 0.08);
  }

  .super-mode-power input:checked + .super-mode-power-track {
    box-shadow:
      inset 0 0 0 1px rgba(255,255,255,0.16),
      0 5px 12px rgba(124, 58, 237, 0.16);
  }
}

.brief-style-option {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  padding: 12px 8px;
  border: 1.5px solid rgba(0,0,0,0.08);
  border-radius: 12px;
  background: #fff;
  cursor: pointer;
  transition: all 0.2s ease;
}

button.brief-style-option {
  width: 100%;
  margin: 0;
  font: inherit;
  appearance: none;
  -webkit-appearance: none;
}

.brief-style-option input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.brief-style-emoji {
  font-size: 22px;
  line-height: 1;
  filter: grayscale(1) saturate(0) opacity(0.42);
  transition: transform 0.2s ease, filter 0.2s ease;
}

.brief-style-label {
  font-size: 12px;
  font-weight: 500;
  color: var(--brand-muted);
  transition: color 0.2s ease;
}

.brief-style-option:hover {
  border-color: color-mix(in srgb, var(--brand-primary, #7c3aed) 32%, #e5e7eb);
  background: color-mix(in srgb, var(--brand-primary, #7c3aed) 4%, #ffffff);
}

.brief-style-option.selected {
  border-color: color-mix(in srgb, var(--brand-primary, #7c3aed) 52%, #e5e7eb);
  background: color-mix(in srgb, var(--brand-primary, #7c3aed) 9%, #ffffff);
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--brand-primary, #7c3aed) 16%, transparent);
}

.brief-style-option.selected .brief-style-emoji {
  filter: none;
  transform: scale(1.05);
}

.brief-style-option.selected .brief-style-label {
  color: var(--brand-primary, #7c3aed);
  font-weight: 700;
}

/* Style help icon (?) for tooltips */
.style-help {
  position: absolute;
  top: 4px;
  left: 4px;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: rgba(100, 116, 139, 0.15);
  color: #64748b;
  font-size: 10px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: help;
  z-index: 2;
  transition: all 0.2s ease;
}
[dir="rtl"] .style-help {
  left: auto;
  right: 4px;
}
.style-help:hover {
  background: var(--brand-primary);
  color: #fff;
  transform: scale(1.1);
}
.style-tooltip-popup {
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  background: #1e293b;
  color: #fff;
  padding: 10px 14px;
  border-radius: 8px;
  font-size: 12px;
  font-weight: 500;
  max-width: min(320px, calc(100vw - 24px));
  white-space: normal;
  text-align: center;
  line-height: 1.45;
  z-index: 2000;
  box-shadow: 0 4px 12px rgba(0,0,0,0.2);
  animation: tooltipFade 0.2s ease;
}

/* Appended to body — avoids overflow:hidden on wizard/panels; no transform in animation */
.style-tooltip-popup.style-tooltip-popup--fixed {
  position: fixed;
  top: auto;
  left: auto;
  transform: none;
  text-align: center;
  z-index: 100050;
  min-width: 220px;
  animation: tooltipFadeFixed 0.2s ease;
}

html[dir="rtl"] .style-tooltip-popup,
[dir="rtl"] .style-tooltip-popup,
.rtl .style-tooltip-popup {
  font-family: 'Tajawal', 'Cairo', system-ui, -apple-system, 'Segoe UI', sans-serif;
}

.style-tooltip-popup::before {
  content: '';
  position: absolute;
  bottom: 100%;
  left: 50%;
  transform: translateX(-50%);
  border: 6px solid transparent;
  border-bottom-color: #1e293b;
}

/* Hide arrow when using fixed layer (position varies; arrow less meaningful) */
.style-tooltip-popup.style-tooltip-popup--fixed::before {
  display: none;
}

@keyframes tooltipFade {
  from { opacity: 0; transform: translateX(-50%) translateY(-4px); }
  to { opacity: 1; transform: translateX(-50%) translateY(0); }
}

@keyframes tooltipFadeFixed {
  from { opacity: 0; }
  to { opacity: 1; }
}
.brief-style-option,
.style-option {
  position: relative;
}

/* Ensure style-help tooltips render above neighboring option cards (mobile stacking contexts) */
.brief-style-option.tooltip-open,
.style-option.tooltip-open {
  z-index: 1500;
}

.upload-box {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: 96px;
  border: 1.5px dashed rgba(0,0,0,0.12);
  background: rgba(0,0,0,0.015);
  border-radius: 12px;
  padding: 24px 16px;
  cursor: pointer;
  text-align: center;
  transition: border-color 0.2s, background 0.2s;
  overflow: hidden;
  position: relative;
}

.upload-box-small {
  min-height: 80px;
  padding: 16px;
}

/* Before/After uploads grid */
.ba-uploads-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}

.ba-uploads-grid .upload-preview {
  max-height: 150px;
}

.ba-uploads-grid .upload-preview img {
  max-height: 140px;
  object-fit: contain;
}

.upload-input {
  display: none;
}

/* Overlay technique: file input covers the upload zone so it receives clicks directly.
   Fixes file picker not opening on mobile/iOS when using display:none + programmatic click. */
.upload-box .upload-input {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  opacity: 0;
  cursor: pointer;
  z-index: 1;
  display: block;
}

.upload-box:hover {
  border-color: var(--brand-accent);
  background: rgba(147, 51, 234, 0.04);
}

.upload-box.drag-over {
  border-color: var(--brand-accent);
  background: rgba(147, 51, 234, 0.06);
}

.upload-box.has-file {
  border-color: var(--brand-accent);
  background: rgba(147, 51, 234, 0.04);
  padding: 12px;
  cursor: default;
  border-style: solid;
}

.upload-box-title {
  font-weight: 500;
  color: var(--brand-ink);
  font-size: 14px;
}

.upload-box-subtitle {
  font-size: 12px;
  color: var(--brand-muted);
  margin-top: 4px;
}

.upload-preview {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 10px;
}

.upload-thumb {
  position: relative;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  border-radius: 12px;
  border: 1px solid var(--brand-border);
  background: #ffffff;
  min-width: 160px;
}

.upload-thumb .remove-thumb,
.upload-thumb .upload-remove {
  position: absolute;
  top: -6px;
  right: -6px;
  border: none;
  background: #ef4444;
  color: #fff;
  width: 22px;
  height: 22px;
  border-radius: 999px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  font-weight: bold;
  line-height: 1;
  box-shadow: 0 2px 4px rgba(0,0,0,0.2);
  transition: background 0.15s, transform 0.15s;
  z-index: 1;
}

.upload-thumb .upload-remove:hover {
  background: #dc2626;
  transform: scale(1.1);
}

.upload-thumb img,
.upload-thumb video {
  width: 42px;
  height: 42px;
  border-radius: 10px;
  object-fit: cover;
  border: 1px solid #e2e8f0;
}

.animated-video-breakdown-card {
  margin-top: 14px;
  padding: 14px;
  border: 1px solid var(--brand-border);
  border-radius: 16px;
  background: rgba(248, 250, 252, 0.86);
}

.animated-video-breakdown-list {
  display: grid;
  gap: 8px;
  margin-top: 10px;
}

.animated-video-breakdown-row {
  display: grid;
  grid-template-columns: minmax(72px, 110px) 1fr;
  gap: 10px;
  align-items: start;
  padding: 8px 10px;
  border-radius: 12px;
  background: #fff;
  border: 1px solid rgba(148, 163, 184, 0.18);
}

.animated-video-breakdown-time {
  font-weight: 700;
  color: var(--brand-primary);
  direction: ltr;
}

.animated-video-breakdown-scene {
  color: var(--text-primary);
  line-height: 1.5;
  font-size: 12px;
}

.animated-video-breakdown-list-detailed {
  gap: 12px;
}

.animated-video-breakdown-detail-card {
  display: grid;
  gap: 8px;
  padding: 10px 12px;
  border-radius: 14px;
  background: #fff;
  border: 1px solid rgba(148, 163, 184, 0.2);
}

.animated-video-breakdown-detail-card .animated-video-breakdown-row {
  padding: 0;
  border: 0;
  background: transparent;
}

.animated-video-breakdown-scene-copy {
  display: grid;
  gap: 4px;
  min-width: 0;
}

.animated-video-breakdown-scene-label,
.animated-video-breakdown-motion-label {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: #6d28d9;
}

.animated-video-breakdown-scene-text,
.animated-video-breakdown-motion-text {
  color: var(--text-primary);
  font-size: 13.5px;
  line-height: 1.55;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

.animated-video-breakdown-motion {
  margin-top: 2px;
}

.animated-video-breakdown-motion-toggle {
  appearance: none;
  border: 0;
  background: transparent;
  padding: 0;
  font-family: inherit;
  font-size: 12.5px;
  font-weight: 500;
  line-height: 1.45;
  color: #64748b;
  cursor: pointer;
  text-align: inherit;
}

html[lang="ar"] .animated-video-breakdown-motion-toggle,
html[lang="he"] .animated-video-breakdown-motion-toggle,
html[dir="rtl"] .animated-video-breakdown-motion-toggle,
[dir="rtl"] .animated-video-breakdown-motion-toggle {
  font-family: 'Tajawal', 'Cairo', system-ui, -apple-system, 'Segoe UI', sans-serif;
}

.animated-video-breakdown-motion-toggle:hover,
.animated-video-breakdown-motion-toggle:focus-visible {
  color: #475569;
  outline: 0;
}

.animated-video-breakdown-motion-toggle::after {
  content: '▸';
  margin-inline-start: 4px;
  font-size: 10px;
  opacity: 0.85;
}

.animated-video-breakdown-motion-toggle[aria-expanded='true']::after {
  content: '▾';
}

html[dir="rtl"] .animated-video-breakdown-motion-toggle:not([aria-expanded='true'])::after,
[dir="rtl"] .animated-video-breakdown-motion-toggle:not([aria-expanded='true'])::after {
  content: '◂';
}

.animated-video-breakdown-motion-panel {
  margin-top: 6px;
  padding-inline-start: 2px;
}

.animated-video-breakdown-motion-text {
  color: #64748b;
  font-size: 12.5px;
  line-height: 1.5;
}

html[lang="ar"] .animated-video-breakdown-motion-text,
html[lang="he"] .animated-video-breakdown-motion-text,
html[dir="rtl"] .animated-video-breakdown-motion-text,
[dir="rtl"] .animated-video-breakdown-motion-text {
  font-family: 'Tajawal', 'Cairo', system-ui, -apple-system, 'Segoe UI', sans-serif;
}

.animated-video-edit-breakdown-hint {
  margin: 0;
  font-size: 12.5px;
  line-height: 1.45;
  color: #64748b;
}

.animated-video-edit-breakdown-panel {
  max-height: min(52vh, 520px);
  overflow: auto;
  padding: 2px;
}

.animated-video-breakdown-concept {
  margin: 0 0 4px;
  font-size: 13px;
  line-height: 1.5;
}

.animated-video-plan-only-panel {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.animated-video-plan-only-helper {
  margin: 0;
  font-size: 12.5px;
  line-height: 1.45;
}

.animated-video-plan-only-panel .animated-video-breakdown-list.compact {
  gap: 7px;
  margin-top: 0;
}

.animated-video-plan-only-panel .animated-video-breakdown-row {
  grid-template-columns: minmax(58px, 76px) 1fr;
  gap: 8px;
  padding: 7px 9px;
  border-radius: 11px;
}

.animated-video-plan-only-panel .animated-video-breakdown-time {
  font-size: 11px;
  line-height: 1.25;
  font-weight: 700;
}

.animated-video-plan-only-panel .animated-video-breakdown-scene {
  font-size: 12px;
  line-height: 1.4;
  color: #374151;
}

.animated-video-plan-only-panel .animated-video-breakdown-more {
  margin-top: 2px;
  font-size: 12px;
}

.animated-video-create-mode .step-panel-header {
  margin-bottom: 18px;
}

.animated-video-create-mode .step-panel-title {
  font-size: clamp(23px, 2.1vw, 28px) !important;
  line-height: 1.12;
  letter-spacing: -0.035em;
  font-weight: 850;
  color: #111827;
}

.animated-video-create-mode .step-panel-subtitle {
  margin-top: 6px;
  max-width: 780px;
  font-size: 14px !important;
  line-height: 1.55;
  color: #64748b;
}

.animated-video-create-mode .director-workspace-stack {
  gap: 16px;
}

.animated-video-create-mode .animated-video-inline-section {
  gap: 22px;
}

.animated-video-create-mode .animated-video-inline-group {
  padding: 0;
  border: 0;
  background: transparent;
  box-shadow: none;
}

.animated-video-create-mode .animated-video-inline-head {
  margin-bottom: 14px;
}

.animated-video-create-mode .animated-video-inline-title {
  font-size: 15px;
  line-height: 1.2;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: #1f2937;
}

.animated-video-create-mode .animated-video-inline-subtitle {
  max-width: 720px;
  margin: 5px 0 0;
  font-size: 13.5px;
  line-height: 1.5;
  color: #64748b;
}

.animated-video-create-mode .animated-video-intro-note {
  margin: 0 0 18px;
  border: 1px solid rgba(124, 58, 237, 0.16);
  border-radius: 18px;
  background:
    radial-gradient(circle at top right, rgba(124, 58, 237, 0.1), transparent 34%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(250, 247, 255, 0.78));
  box-shadow: 0 14px 32px rgba(15, 23, 42, 0.055);
}

.animated-video-intro-toggle {
  padding: 13px 15px;
  font-size: 13.5px;
  font-weight: 700;
  color: #111827;
}

.animated-video-intro-body {
  padding: 0 15px 14px;
}

.animated-video-intro-lead {
  margin: 0 0 8px;
  font-size: 13px;
  line-height: 1.55;
  font-weight: 650;
  color: #334155;
}

.animated-video-intro-text {
  margin: 0;
  font-size: 12.5px;
  line-height: 1.55;
  color: #64748b;
}

.animated-video-length-picker {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 8px;
  width: 100%;
  max-width: 420px;
  font-family: 'Tajawal', 'Cairo', system-ui, -apple-system, 'Segoe UI', sans-serif;
}

.field .animated-video-length-picker input[type="range"],
.animated-video-length-picker .animated-video-length-slider {
  width: 100%;
  margin: 0;
  padding: 0;
  border: none;
  border-radius: 0;
  accent-color: #7c3aed;
  cursor: pointer;
  box-shadow: none;
  outline: none;
  height: 24px;
  background: transparent;
}

.field .animated-video-length-picker input[type="range"]:focus,
.field .animated-video-length-picker input[type="range"]:focus-visible,
.field .animated-video-length-picker input[type="range"]:active,
.animated-video-length-picker .animated-video-length-slider:focus,
.animated-video-length-picker .animated-video-length-slider:focus-visible,
.animated-video-length-picker .animated-video-length-slider:active {
  outline: none !important;
  border: none !important;
  box-shadow: none !important;
}

.animated-video-length-stops {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 4px;
  margin-top: -2px;
  padding: 0 2px;
}

.animated-video-length-stop {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: 4px 2px 2px;
  border: none;
  border-radius: 10px;
  background: transparent;
  color: inherit;
  cursor: pointer;
  transition: color 0.15s ease;
  font-family: 'Tajawal', 'Cairo', system-ui, -apple-system, 'Segoe UI', sans-serif !important;
}

.animated-video-length-stop:hover,
.animated-video-length-stop:focus-visible {
  outline: none;
}

.animated-video-length-stop:hover .animated-video-length-stop-label,
.animated-video-length-stop:focus-visible .animated-video-length-stop-label {
  color: #7c3aed;
}

.animated-video-length-stop-mark {
  width: 8px;
  height: 8px;
  border-radius: 999px;
  background: rgba(124, 58, 237, 0.22);
  transition: background 0.15s ease, transform 0.15s ease;
}

.animated-video-length-stop.is-active .animated-video-length-stop-mark {
  background: #7c3aed;
  transform: scale(1.15);
}

.animated-video-length-stop-label {
  font-size: 12px;
  line-height: 1.2;
  font-weight: 700;
  color: #64748b;
  text-align: center;
  transition: color 0.15s ease;
  font-family: 'Tajawal', 'Cairo', system-ui, -apple-system, 'Segoe UI', sans-serif !important;
}

.animated-video-length-stop.is-active .animated-video-length-stop-label {
  color: #111827;
  font-weight: 700;
}

.animated-video-length-detail {
  margin-top: 4px;
  padding: 12px 14px;
  border: 1px solid rgba(124, 58, 237, 0.18);
  border-radius: 14px;
  background: linear-gradient(180deg, rgba(124, 58, 237, 0.06), rgba(255, 255, 255, 0.98));
}

.animated-video-length-detail-tagline {
  display: block;
  font-size: 13px;
  line-height: 1.25;
  font-weight: 700;
  color: #7c3aed;
  font-family: 'Tajawal', 'Cairo', system-ui, -apple-system, 'Segoe UI', sans-serif !important;
}

.animated-video-length-detail-hint {
  margin: 6px 0 0;
  font-size: 12px;
  line-height: 1.45;
  color: #64748b;
  font-family: 'Tajawal', 'Cairo', system-ui, -apple-system, 'Segoe UI', sans-serif !important;
}

html[lang="ar"] .animated-video-length-stop,
html[lang="ar"] .animated-video-length-stop-label,
html[lang="ar"] .animated-video-length-detail-tagline,
html[lang="ar"] .animated-video-length-detail-hint,
html[dir="rtl"] .animated-video-length-stop,
html[dir="rtl"] .animated-video-length-stop-label,
html[dir="rtl"] .animated-video-length-detail-tagline,
html[dir="rtl"] .animated-video-length-detail-hint,
.rtl .animated-video-length-stop,
.rtl .animated-video-length-stop-label,
.rtl .animated-video-length-detail-tagline,
.rtl .animated-video-length-detail-hint {
  font-family: 'Tajawal', 'Cairo', system-ui, -apple-system, 'Segoe UI', sans-serif !important;
}

html[dir="rtl"] .animated-video-length-picker {
  font-family: 'Tajawal', 'Cairo', system-ui, -apple-system, 'Segoe UI', sans-serif;
}

html[dir="rtl"] .animated-video-length-detail-hint {
  text-align: right;
}

.animated-video-create-mode .animated-video-length-output-item {
  max-width: 100%;
}

.animated-video-length-picker {
  margin: 0 0 10px;
}

.animated-video-prompt-mode-wrap {
  margin-bottom: 14px;
}

.animated-video-write-prompt-hint {
  margin: 4px 0 10px;
  font-size: 12.5px;
  line-height: 1.55;
}

.animated-video-create-mode .animated-video-prompt-mode-wrap .director-prompt-mode-label {
  font-size: 13px;
  font-weight: 700;
  text-transform: none;
  letter-spacing: -0.01em;
  color: #334155;
}

.animated-video-create-mode .animated-video-write-prompt-label {
  display: block;
  margin: 0 0 6px;
  font-size: 14px;
  font-weight: 700;
  line-height: 1.35;
  color: #0f172a;
}

.animated-video-create-mode .animated-video-write-prompt-input {
  min-height: 168px;
  font-size: 14px;
  line-height: 1.55;
}

.animated-video-ideas-surface {
  padding: 16px 18px;
  border: 1px solid rgba(124, 58, 237, 0.14);
  border-radius: 18px;
  background:
    radial-gradient(circle at top right, rgba(124, 58, 237, 0.08), transparent 38%),
    linear-gradient(180deg, #fff 0%, #faf8ff 100%);
  box-shadow: 0 10px 28px rgba(15, 23, 42, 0.05);
}

.animated-video-generate-ideas-panel {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.animated-video-ideas-panel-head {
  display: grid;
  gap: 6px;
}

.animated-video-ideas-panel-title {
  margin: 0;
  font-size: 17px;
  font-weight: 700;
  line-height: 1.3;
  color: #0f172a;
  letter-spacing: -0.01em;
}

.animated-video-ideas-panel-desc {
  margin: 0;
  font-size: 13px;
  line-height: 1.6;
  color: #64748b;
}

.animated-video-ideas-form-panel {
  display: grid;
  gap: 14px;
}

.animated-video-ideas-field-label {
  display: block;
  margin: 0 0 8px;
  font-size: 13px;
  font-weight: 700;
  line-height: 1.35;
  color: #334155;
}

.animated-video-ideas-seed-field {
  margin: 0;
}

.animated-video-ideas-seed-input {
  min-height: 112px;
  font-size: 14px;
  line-height: 1.55;
  border-radius: 14px;
}

.animated-video-ideas-assets-field {
  margin: 0;
}

.animated-video-ideas-assets-check {
  font-size: 13px;
  font-weight: 500;
  color: #334155;
}

.animated-video-ideas-assets-hint {
  margin-top: 6px;
  font-size: 12px;
  line-height: 1.5;
}

.animated-video-ideas-inline-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: flex-start;
}

.animated-video-ideas-generate-btn,
.animated-video-ideas-back-btn {
  min-height: 42px;
  padding-inline: 18px;
  font-size: 14px;
  font-weight: 700;
}

.animated-video-ideas-status {
  margin: 0;
  font-size: 12.5px;
  line-height: 1.5;
}

.animated-video-ideas-results-panel {
  display: grid;
  gap: 12px;
  margin-top: 2px;
}

.animated-video-ideas-results-panel[hidden] {
  display: none !important;
}

.animated-video-ideas-results-title {
  margin: 0;
  font-size: 15px;
  font-weight: 700;
  line-height: 1.35;
  color: #0f172a;
}

.animated-video-ideas-grid {
  display: grid;
  gap: 10px;
}

.animated-video-idea-card {
  padding: 12px 14px;
  border: 1px solid rgba(148, 163, 184, 0.24);
  border-radius: 14px;
  background: #fff;
  cursor: pointer;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.animated-video-idea-card:hover {
  border-color: rgba(124, 58, 237, 0.28);
}

.animated-video-idea-card.is-expanded {
  border-color: rgba(124, 58, 237, 0.34);
  box-shadow: 0 8px 22px rgba(124, 58, 237, 0.08);
}

.animated-video-idea-card-title {
  margin: 0 0 6px;
  font-size: 13px;
  font-weight: 700;
  line-height: 1.4;
  color: #0f172a;
}

.animated-video-idea-card-preview {
  margin: 0;
  font-size: 12px;
  line-height: 1.55;
  color: #64748b;
  white-space: pre-wrap;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  overflow: hidden;
}

.animated-video-idea-card.is-expanded .animated-video-idea-card-preview {
  display: block;
  -webkit-line-clamp: unset;
  overflow: visible;
  color: #475569;
}

.animated-video-idea-card-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px solid rgba(148, 163, 184, 0.16);
}

.animated-video-idea-expand-hint {
  font-size: 11px;
  font-weight: 500;
  line-height: 1.3;
  color: #7c3aed;
}

.animated-video-idea-card.is-expanded .animated-video-idea-expand-hint {
  color: #64748b;
}

.animated-video-idea-use-btn.button {
  flex-shrink: 0;
  min-height: 28px;
  padding: 0 10px;
  font-size: 11px;
  font-weight: 500;
  line-height: 1.2;
  border-radius: 8px;
}

#animated-video-ideas-status.is-loading {
  color: #7c3aed;
}

#animated-video-ideas-status.is-error {
  color: #dc2626;
}

.animated-video-create-mode .director-surface {
  padding: 20px;
  border-radius: 22px;
  border: 1px solid rgba(148, 163, 184, 0.24);
  background: linear-gradient(180deg, #fff 0%, #fbfbff 100%);
  box-shadow: 0 14px 36px rgba(15, 23, 42, 0.055);
}

.animated-video-create-mode .director-surface-head {
  margin-bottom: 14px;
}

.animated-video-create-mode .director-surface-title {
  font-size: 17px;
  line-height: 1.25;
  font-weight: 850;
  letter-spacing: -0.025em;
  color: #111827;
}

.animated-video-create-mode .director-surface-subtitle {
  max-width: 720px;
  margin-top: 5px;
  font-size: 13.5px;
  line-height: 1.5;
  color: #64748b;
}

.animated-video-create-mode .field > label:not(.caption-toggle-card):not(.upload-box),
.animated-video-create-mode .video-ref-label,
.animated-video-create-mode #language-field > label,
.animated-video-create-mode .video-settings-row .field label,
.animated-video-create-mode .video-settings-row .field > label {
  margin-bottom: 8px;
  font-size: 15px !important;
  line-height: 1.2;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: #1f2937;
}

.animated-video-create-mode .language-option,
.animated-video-create-mode .language-option span,
.animated-video-create-mode .readonly-input,
.animated-video-create-mode .product-studio-aspect-trigger,
.animated-video-create-mode .product-studio-aspect-option,
.animated-video-create-mode .create-library-pick,
.animated-video-create-mode textarea,
.animated-video-create-mode .input,
.animated-video-create-mode select {
  font-size: 14px !important;
  line-height: 1.45;
}

.animated-video-create-mode .hint,
.animated-video-create-mode .muted {
  font-size: 12.5px;
  line-height: 1.45;
  color: #6b7280;
}

.animated-video-create-mode textarea,
.animated-video-create-mode .input,
.animated-video-create-mode select,
.animated-video-create-mode .product-studio-aspect-trigger {
  line-height: 1.45;
}

.animated-video-create-mode textarea.full-width {
  min-height: 118px;
  padding: 14px 16px;
  border-radius: 16px;
}

#product-images-field.animated-video-upload-style > label[for="product_images"] {
  display: block;
  margin-bottom: 4px;
  font-size: 15px;
  line-height: 1.2;
  font-weight: 850;
  color: #111827;
}

#product-images-field.animated-video-upload-style .animated-video-assets-desc {
  margin-bottom: 12px;
  font-size: 13.5px;
  line-height: 1.5;
  color: #64748b;
}

#product-images-field.animated-video-upload-style .animated-video-assets-row {
  justify-content: flex-start;
  align-items: center;
  gap: 10px;
  margin-top: 8px;
}

#product-images-field.animated-video-upload-style .animated-video-assets-upload-status {
  margin-top: 10px;
  padding: 9px 11px;
  border-radius: 12px;
  font-size: 12.5px;
  line-height: 1.35;
  font-weight: 700;
}

#product-images-field.animated-video-upload-style .animated-video-assets-upload-status.is-muted {
  color: #64748b;
  background: #f8fafc;
}

#product-images-field.animated-video-upload-style .animated-video-assets-upload-status.is-loading {
  color: #6d28d9;
  background: rgba(124, 58, 237, 0.08);
}

#product-images-field.animated-video-upload-style .animated-video-assets-upload-status.is-success {
  color: #047857;
  background: rgba(16, 185, 129, 0.09);
}

#product-images-field.animated-video-upload-style .animated-video-assets-upload-status.is-error {
  color: #b91c1c;
  background: rgba(239, 68, 68, 0.09);
}

#product-images-field.animated-video-upload-style .upload-preview {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin-top: 0;
}

#product-images-field.animated-video-upload-style .animated-video-assets-add {
  display: inline-grid;
  width: 56px;
  height: 56px;
  min-width: 56px;
  min-height: 56px;
  border-radius: 12px;
  border: 2px dashed var(--brand-primary, #7c3aed);
  background: transparent;
  color: var(--brand-primary, #7c3aed);
}

#product-images-field.animated-video-upload-style .create-library-pick {
  min-height: 42px;
  padding-inline: 16px;
  border-radius: 14px;
  font-size: 13px;
  font-weight: 850;
  letter-spacing: -0.01em;
}

#product-images-field.animated-video-upload-style .animated-video-assets-row.is-drag-over {
  outline: 2px dashed rgba(124, 58, 237, 0.55);
  outline-offset: 4px;
  border-radius: 14px;
}

/* Animate an image — asset row matches motion video upload chrome */
#video-image-mode-field {
  margin-top: 12px;
}

#video-image-mode-field .video-image-mode-hint {
  margin-top: 8px;
}

#video-single-upload.animate-image-upload-style .video-animate-source-label {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 0.92rem;
  margin-bottom: 2px;
}

.video-veo-frame-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.video-veo-frame-grid--tagged {
  grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
  align-items: start;
}

.video-veo-frame-grid--tagged .video-frame-tagged {
  min-width: 0;
  overflow: hidden;
}

.video-veo-frame-source-row {
  align-items: center;
  gap: 10px;
}

.video-veo-tagged-source-row {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: 10px;
  min-width: 0;
  width: 100%;
}

.video-veo-tagged-source-row #video-veo-start-preview,
.video-veo-tagged-source-row .create-base-image-preview {
  display: flex;
  flex: 1 1 auto;
  min-width: 0;
  max-width: 100%;
}

.video-create-tagged-multi {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: flex-start;
  min-width: 0;
  max-width: 100%;
  margin: 0;
}

.video-create-tagged-thumb.upload-thumb {
  flex: 0 0 auto;
}

.video-veo-frame-source-row .create-base-image-add.has-file {
  display: none;
}

#video-create-tagged-prompt-wrap {
  margin: 0 0 10px;
}

@media (max-width: 720px) {
  .video-veo-frame-grid--tagged {
    grid-template-columns: 1fr;
  }
}

#video-single-upload.animate-image-upload-style .video-animate-assets-row {
  justify-content: flex-start;
  align-items: center;
  gap: 10px;
  margin-top: 8px;
}

#video-single-upload.animate-image-upload-style .swipe-visual-previews,
#video-single-upload.animate-image-upload-style .create-base-image-preview {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin-top: 0;
}

#video-single-upload.animate-image-upload-style .video-animate-add {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  min-width: 56px;
  min-height: 56px;
  border-radius: 12px;
  border: 2px dashed var(--brand-primary, #7c3aed);
  background: transparent;
  color: var(--brand-primary, #7c3aed);
}

#video-single-upload.animate-image-upload-style .video-animate-add svg {
  display: block;
  flex: 0 0 auto;
}

#video-single-upload.animate-image-upload-style .video-animate-add.has-file {
  display: none;
}

#video-single-upload.animate-image-upload-style .create-library-pick {
  min-height: 42px;
  padding-inline: 16px;
  border-radius: 14px;
  font-size: 13px;
  font-weight: 850;
  letter-spacing: -0.01em;
}

.animate-video-prompt-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 8px;
}

.animate-video-prompt-head .animated-video-write-prompt-label {
  margin: 0;
}

.video-ai-write-tools {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
}

.video-ai-write-menu-wrap {
  position: relative;
  display: inline-flex;
  align-items: center;
}

.video-ai-write-menu {
  position: absolute;
  top: calc(100% + 6px);
  inset-inline-end: 0;
  z-index: 40;
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 240px;
  max-width: min(92vw, 320px);
  padding: 6px;
  border-radius: 14px;
  border: 1px solid color-mix(in srgb, var(--brand-primary, #7c3aed) 18%, #e2e8f0);
  background: #fff;
  box-shadow: 0 10px 28px rgba(15, 23, 42, 0.12);
}

.video-ai-write-menu[hidden] {
  display: none !important;
}

.video-ai-write-menu-item {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
  width: 100%;
  margin: 0;
  padding: 10px 12px;
  border: 0;
  border-radius: 10px;
  background: transparent;
  color: var(--brand-text, #0f172a);
  font-family: 'Tajawal', system-ui, -apple-system, 'Segoe UI', sans-serif;
  text-align: start;
  cursor: pointer;
}

.video-ai-write-menu-item:hover,
.video-ai-write-menu-item:focus-visible {
  background: color-mix(in srgb, var(--brand-primary, #7c3aed) 8%, #fff);
  outline: none;
}

.video-ai-write-menu-item:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

.video-ai-write-menu-item:disabled:hover {
  background: transparent;
}

.video-ai-write-menu-title {
  font-size: 13px;
  font-weight: 700;
  line-height: 1.3;
  color: var(--brand-text, #0f172a);
}

.video-ai-write-menu-desc {
  font-size: 12px;
  font-weight: 400;
  line-height: 1.35;
  color: var(--brand-muted, #64748b);
}

.video-ai-write-personality-toggle {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  min-height: 32px;
  padding: 4px 10px;
  border-radius: 999px;
  border: 1px solid color-mix(in srgb, var(--brand-primary, #7c3aed) 28%, transparent);
  background: #fff;
  color: var(--brand-text, #111827);
  font-family: 'Tajawal', system-ui, -apple-system, 'Segoe UI', sans-serif;
  font-size: 12px;
  font-weight: 500;
  cursor: pointer;
}

.video-ai-write-personality-toggle:hover {
  border-color: color-mix(in srgb, var(--brand-primary, #7c3aed) 55%, transparent);
  background: color-mix(in srgb, var(--brand-primary, #7c3aed) 6%, #fff);
}

.video-ai-write-personality-toggle[aria-expanded="true"] {
  border-color: var(--brand-primary, #7c3aed);
  background: color-mix(in srgb, var(--brand-primary, #7c3aed) 10%, #fff);
}

.video-ai-write-personality-toggle-label {
  max-width: 7.5rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.video-ai-write-personality-chevron {
  font-size: 12px;
  line-height: 1;
  color: var(--brand-muted, #6b7280);
  transition: transform 0.15s ease;
}

.video-ai-write-personality-toggle[aria-expanded="true"] .video-ai-write-personality-chevron {
  transform: rotate(180deg);
}

.video-ai-write-personality-panel {
  margin: 0 0 10px;
  padding: 10px 12px;
  border-radius: 12px;
  border: 1px solid rgba(148, 163, 184, 0.28);
  background: color-mix(in srgb, var(--brand-primary, #7c3aed) 4%, #fff);
}

.video-ai-write-personality-panel[hidden] {
  display: none !important;
}

.video-ai-write-personality-heading {
  font-size: 12px;
  font-weight: 700;
  color: var(--brand-muted, #6b7280);
  margin: 0 0 8px;
  font-family: 'Tajawal', system-ui, -apple-system, 'Segoe UI', sans-serif;
}

.video-ai-write-personality-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.video-ai-write-personality-chip {
  appearance: none;
  border: 1px solid rgba(148, 163, 184, 0.35);
  background: #fff;
  color: var(--brand-text, #111827);
  border-radius: 999px;
  padding: 6px 10px;
  font-size: 12px;
  font-weight: 500;
  font-family: 'Tajawal', system-ui, -apple-system, 'Segoe UI', sans-serif;
  cursor: pointer;
  line-height: 1.2;
}

.video-ai-write-personality-chip:hover {
  border-color: color-mix(in srgb, var(--brand-primary, #7c3aed) 45%, transparent);
}

.video-ai-write-personality-chip.is-selected {
  border-color: var(--brand-primary, #7c3aed);
  background: color-mix(in srgb, var(--brand-primary, #7c3aed) 12%, #fff);
  color: var(--brand-primary, #7c3aed);
}

#video-style-field-wrap .brief-style-grid {
  margin-bottom: 0;
}

#video-style-anchor-step2,
#video-style-anchor-animate,
#video-style-anchor-step3:not([hidden]) {
  margin-top: 16px;
}

.video-animate-aspect-picker {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.video-animate-aspect-dot {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 34px;
  padding: 6px 12px;
  border-radius: 999px;
  border: 1.5px solid rgba(148, 163, 184, 0.35);
  background: #fff;
  color: var(--brand-text, #111827);
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
  transition: border-color 0.15s, background 0.15s, color 0.15s;
}

.video-animate-aspect-dot.is-selected {
  border-color: var(--brand-primary, #7c3aed);
  background: rgba(124, 58, 237, 0.08);
  color: var(--brand-primary, #7c3aed);
}

.video-animate-output-settings .video-animate-controls-row {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
  align-items: start;
}

.video-animate-output-settings .video-animate-controls-row .field {
  margin-bottom: 0;
}

.video-animate-output-settings .video-animate-controls-row .field label,
.video-animate-output-settings .video-animate-controls-row .field > label {
  font-size: 14px !important;
  font-weight: 500;
  text-transform: none;
  letter-spacing: normal;
  color: inherit;
  margin-bottom: 4px;
  font-family: inherit;
}

.video-animate-output-settings .video-animate-credit-hint {
  margin-top: 4px;
  font-size: 11px;
}

.video-animate-output-settings .video-animate-controls-row select {
  min-height: 46px;
}

@media (max-width: 768px) {
  .video-animate-output-settings .video-animate-controls-row {
    grid-template-columns: 1fr;
    gap: 12px;
  }
}

/* Match resolution select height (padding 12px + 14px font + border). */
.video-animate-output-settings .video-animate-duration-picker {
  display: flex;
  align-items: stretch;
  gap: 4px;
  padding: 4px;
  border-radius: 12px;
  min-height: 46px;
  box-sizing: border-box;
  background: #f1f5f9;
  border: 1px solid var(--brand-border);
}

.video-animate-output-settings .video-animate-duration-picker .product-studio-duration-dot {
  flex: 1 1 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 8px;
  font-size: 14px;
  line-height: 1.2;
  border-radius: 8px;
  min-height: 0;
  border: 1px solid transparent;
  transition: border-color 0.15s, background 0.15s, color 0.15s, box-shadow 0.15s;
}

.video-animate-output-settings .video-animate-duration-picker .product-studio-duration-dot.is-selected {
  color: var(--brand-primary, #7c3aed);
  background: #fff;
  border-color: rgba(124, 58, 237, 0.45);
  box-shadow: 0 2px 8px rgba(124, 58, 237, 0.18);
  font-weight: 700;
}

/* Animate an image: optional short motion nudge (max 85 chars) */
.video-motion-nudge {
  margin-top: 18px;
  margin-bottom: 0;
}

.video-motion-nudge-box {
  position: relative;
}

.video-motion-nudge-box input {
  width: 100%;
  min-height: 46px;
  box-sizing: border-box;
  padding-block: 12px;
  padding-inline: 14px 64px;
  border: 1px solid var(--brand-border);
  border-radius: 12px;
  background: #fff;
  font: inherit;
  font-size: 15px;
  color: var(--brand-text, #1a202c);
  transition: border-color 0.15s, box-shadow 0.15s;
}

/* Keep room for the counter even where #create-panel resets field padding on smaller screens. */
#create-panel .field.video-motion-nudge .video-motion-nudge-box input {
  padding-inline: 14px 64px;
}

.video-motion-nudge-box input::placeholder {
  color: #8a8f9c;
}

.video-motion-nudge-box input:focus {
  outline: none;
  border-color: var(--brand-primary, #7c3aed);
  box-shadow: 0 0 0 3px rgba(124, 58, 237, 0.14);
}

.video-motion-nudge-count {
  position: absolute;
  inset-inline-end: 14px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 13px;
  font-variant-numeric: tabular-nums;
  color: #8a8f9c;
  pointer-events: none;
  transition: color 0.15s;
}

.video-motion-nudge.is-near .video-motion-nudge-count {
  color: #b45309;
}

.video-motion-nudge.is-full .video-motion-nudge-count {
  color: var(--brand-primary, #7c3aed);
  font-weight: 700;
}

.video-motion-nudge.is-full .video-motion-nudge-box input {
  border-color: rgba(124, 58, 237, 0.45);
}

.video-motion-nudge .video-motion-nudge-hint {
  margin-top: 6px;
}

.video-motion-nudge-limit {
  margin: 8px 0 0;
  padding: 10px 12px;
  border-radius: 10px;
  background: #f5f0ff;
  border: 1px solid #e4d7ff;
  color: #3b0f8c;
  font-size: 13px;
  line-height: 1.6;
}

.video-motion-nudge-limit b {
  font-weight: 700;
  color: #5b21b6;
  white-space: nowrap;
}

.video-motion-nudge.is-full .video-motion-nudge-hint {
  display: none;
}

@media (prefers-reduced-motion: reduce) {
  .video-motion-nudge-box input,
  .video-motion-nudge-count {
    transition: none;
  }
}

.video-wizard-choice-grid {
  margin-top: 4px;
}

/* Video wizard choice substeps — close the panel with a footer section instead of an abrupt cut */
#create-panel #create-form.video-wizard-choice-step {
  min-height: auto;
  gap: 0;
}
#create-panel #create-form.video-wizard-choice-step #wizard-step-2.active {
  flex: 0 0 auto;
  margin-bottom: 0;
  padding-bottom: 18px;
  border-bottom: none;
  border-radius: 24px 24px 0 0;
  box-shadow:
    0 8px 24px rgba(15, 23, 42, 0.04),
    inset 0 1px 0 rgba(255, 255, 255, 0.75);
}
#create-panel #create-form.video-wizard-choice-step #wizard-nav {
  margin-top: 0;
  padding: 14px 20px max(16px, env(safe-area-inset-bottom));
  border: 1px solid rgba(148, 163, 184, 0.18);
  border-top: 1px solid rgba(148, 163, 184, 0.14);
  border-radius: 0 0 24px 24px;
  background: linear-gradient(180deg, rgba(248, 250, 252, 0.98) 0%, rgba(255, 255, 255, 0.99) 100%);
  box-shadow: 0 14px 32px rgba(15, 23, 42, 0.06);
}
#create-panel #create-form.video-wizard-choice-step .video-wizard-substep:not([hidden]) {
  margin-bottom: 0;
}
#create-panel #create-form.video-wizard-choice-step .video-wizard-choice-grid {
  margin-top: 0;
  margin-bottom: 0;
}

label.job-type-card.video-wizard-choice-card {
  width: 100%;
  margin: 0;
  align-items: flex-start;
}
/* Keep descriptions visible on video wizard choice cards (mobile hides .jtc-desc globally). */
#create-panel #video-wizard-goal-step .jtc-desc,
#create-panel #video-wizard-create-mode-step .jtc-desc,
#create-panel label.job-type-card.video-wizard-choice-card .jtc-desc {
  display: block !important;
  font-size: 12.5px;
  line-height: 1.4;
  margin-top: 4px;
  color: var(--brand-muted);
}
label.job-type-card.video-wizard-choice-card input[type="radio"] {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}
label.job-type-card.video-wizard-choice-card:has(input:checked) {
  border-color: var(--brand-accent);
  box-shadow: 0 0 0 1px rgba(124, 58, 237, 0.14), 0 22px 44px rgba(124, 58, 237, 0.15);
  background: linear-gradient(180deg, rgba(124, 58, 237, 0.08) 0%, rgba(255, 255, 255, 0.99) 38%, rgba(248, 250, 252, 0.98) 100%);
}
label.job-type-card.video-wizard-choice-card:has(input:checked)::after {
  content: '';
  position: absolute;
  top: 10px;
  inset-inline-end: 10px;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--brand-accent);
  background-image: url("data:image/svg+xml,%3Csvg width='10' height='10' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round' xmlns='http://www.w3.org/2000/svg'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: center;
  background-size: 10px;
}
label.job-type-card.video-wizard-choice-card:has(input:checked) .jtc-icon {
  background: var(--brand-accent);
  color: #fff;
}

.video-wizard-settings-panel {
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.video-wizard-settings-panel .video-animate-controls-row {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
  align-items: start;
}
.video-wizard-settings-panel .video-animate-controls-row .field {
  margin-bottom: 0;
}
.video-wizard-settings-panel .video-animate-controls-row .field label,
.video-wizard-settings-panel .video-animate-controls-row .field > label {
  font-size: 14px !important;
  font-weight: 500;
  text-transform: none;
  letter-spacing: normal;
  color: inherit;
  margin-bottom: 4px;
  font-family: inherit;
}
.video-wizard-settings-panel .video-animate-controls-row select {
  width: 100%;
  min-height: 46px;
}
#video-wizard-animate-settings .video-animate-controls-row,
.video-animate-output-settings .video-animate-controls-row {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}
#video-veo-frames-settings > .video-upload-area {
  margin-top: 0;
}
#video-veo-start-end-uploads .hint {
  margin-top: 8px;
  margin-bottom: 0;
}
#video-veo-frames-settings > #video-veo-start-end-uploads + .field {
  margin-top: -6px;
}
#video-veo-reference-settings {
  margin-top: 20px;
  padding-top: 4px;
}
#video-veo-reference-settings .video-animate-controls-row {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
#create-panel .video-omni-options {
  margin-top: 20px;
}
.video-omni-options-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 10px;
}
.video-omni-options-title {
  font-size: 14px;
  font-weight: 500;
  line-height: 1.35;
  color: var(--brand-ink, #1f2937);
}
.video-omni-availability {
  display: inline-flex;
  align-items: center;
  min-height: 26px;
  padding: 4px 9px;
  border-radius: 999px;
  background: #f1f5f9;
  font-size: 11.5px;
  font-weight: 500;
  line-height: 1.3;
  color: var(--brand-muted, #64748b);
  white-space: nowrap;
}
#create-panel .video-omni-feature-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}
#create-panel .video-omni-options .video-omni-option {
  width: 100%;
  min-height: 76px;
  justify-content: space-between;
  gap: 14px;
  margin: 0;
  padding: 13px 14px;
  border-radius: 16px;
  border: 1px solid color-mix(in srgb, var(--brand-border, #e5e7eb) 88%, #cbd5e1);
  background: #fff;
  color: var(--brand-ink, #1f2937);
  text-align: start;
  white-space: normal;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.025);
}
#create-panel .video-omni-options .video-omni-option:hover {
  border-color: color-mix(in srgb, var(--brand-accent, #7c3aed) 28%, var(--brand-border, #e5e7eb));
  background: #fcfbff;
}
#create-panel .video-omni-options .video-omni-option:has(input:checked) {
  border-color: color-mix(in srgb, var(--brand-accent, #7c3aed) 48%, var(--brand-border, #e5e7eb));
  background: color-mix(in srgb, var(--brand-accent, #7c3aed) 4%, #fff);
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--brand-accent, #7c3aed) 8%, transparent);
}
.video-omni-option-copy {
  display: grid;
  gap: 3px;
  min-width: 0;
}
#create-panel .video-omni-option .video-omni-option-title {
  overflow: visible;
  font-size: 14.5px !important;
  font-weight: 500;
  line-height: 1.35;
  color: var(--brand-ink, #1f2937);
  text-overflow: clip;
}
#create-panel .video-omni-option .video-omni-option-desc {
  overflow: visible;
  font-size: 12px !important;
  font-weight: 400;
  line-height: 1.4;
  color: var(--brand-muted, #64748b);
  white-space: normal;
  text-overflow: clip;
}
.video-omni-options .video-omni-option input[type="checkbox"] {
  flex: 0 0 18px;
  width: 18px;
  height: 18px;
  margin: 0;
  transform: none;
  transition: none;
}
.video-omni-customize {
  width: 100%;
  min-height: 58px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  align-items: center;
  gap: 10px;
  margin-top: 10px;
  padding: 10px 14px;
  border: 1px solid var(--brand-border, #e5e7eb);
  border-radius: 14px;
  background: #f8fafc;
  color: var(--brand-ink, #1f2937);
  font-family: 'Tajawal', system-ui, -apple-system, 'Segoe UI', sans-serif;
  text-align: start;
  cursor: pointer;
}
.video-omni-customize[hidden] {
  display: none !important;
}
.video-omni-customize:hover {
  border-color: color-mix(in srgb, var(--brand-accent, #7c3aed) 28%, var(--brand-border, #e5e7eb));
  background: #f6f4ff;
}
.video-omni-customize:focus-visible {
  outline: 3px solid color-mix(in srgb, var(--brand-accent, #7c3aed) 22%, transparent);
  outline-offset: 2px;
}
.video-omni-customize[aria-expanded="true"] {
  border-radius: 14px 14px 0 0;
  background: #fff;
}
.video-omni-customize-copy {
  display: grid;
  gap: 2px;
  min-width: 0;
}
.video-omni-customize-label {
  font-size: 11.5px;
  font-weight: 500;
  line-height: 1.3;
  color: var(--brand-muted, #64748b);
}
.video-omni-customize-summary {
  overflow: hidden;
  font-size: 13.5px;
  font-weight: 500;
  line-height: 1.4;
  color: var(--brand-ink, #1f2937);
  white-space: nowrap;
  text-overflow: ellipsis;
}
.video-omni-customize-action {
  font-size: 12.5px;
  font-weight: 500;
  color: var(--brand-accent, #7c3aed);
  white-space: nowrap;
}
.video-omni-customize-chevron {
  font-size: 18px;
  line-height: 1;
  color: var(--brand-muted, #64748b);
  transform: rotate(0);
}
.video-omni-customize[aria-expanded="true"] .video-omni-customize-chevron {
  transform: rotate(180deg);
}
.video-omni-suboptions {
  margin-top: -1px;
  padding: 16px;
  border: 1px solid var(--brand-border, #e5e7eb);
  border-radius: 0 0 14px 14px;
  background: #fff;
}
.video-omni-suboptions[hidden] {
  display: none !important;
}
.video-omni-suboptions label,
#create-panel .video-omni-suboptions label,
#video-scenes-modal .video-omni-suboptions label {
  display: block;
  margin: 0 0 6px;
  font-size: 12.5px;
  font-weight: 500;
  line-height: 1.35;
  color: var(--brand-muted, #64748b);
  font-family: 'Tajawal', system-ui, -apple-system, 'Segoe UI', sans-serif;
}
.video-omni-suboptions > label,
#create-panel .video-omni-suboptions > label {
  font-size: 12.5px;
  font-weight: 500;
  color: var(--brand-muted, #64748b);
}
.video-omni-suboptions select,
#create-panel .video-omni-suboptions select,
#video-scenes-modal .video-omni-suboptions select {
  display: block;
  width: 100%;
  box-sizing: border-box;
  min-width: 0;
  min-height: 44px;
  margin: 0 0 12px;
  padding: 10px 12px;
  padding-inline-end: 36px;
  border: 1px solid var(--brand-border, #e5e7eb);
  border-radius: 12px;
  background-color: #fff;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8' fill='none'%3E%3Cpath d='M1 1.5L6 6.5L11 1.5' stroke='%236b7280' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
  background-size: 12px 8px;
  color: var(--brand-text, #111827);
  font-size: 14px;
  font-weight: 400;
  font-family: 'Tajawal', system-ui, -apple-system, 'Segoe UI', sans-serif;
  line-height: 1.35;
  appearance: none;
  -webkit-appearance: none;
}
html[dir="rtl"] .video-omni-suboptions select,
html[dir="rtl"] #create-panel .video-omni-suboptions select,
html[dir="rtl"] #video-scenes-modal .video-omni-suboptions select {
  background-position: left 12px center;
}
.video-omni-suboptions select:focus,
#create-panel .video-omni-suboptions select:focus,
#video-scenes-modal .video-omni-suboptions select:focus {
  outline: none;
  border-color: color-mix(in srgb, var(--brand-primary, #2563eb) 55%, var(--brand-border, #e5e7eb));
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--brand-primary, #2563eb) 16%, transparent);
}
.video-omni-suboptions select option,
#create-panel .video-omni-suboptions select option {
  font-size: 14px;
}
.video-omni-narrator-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 12px;
  margin-top: 4px;
}
.video-omni-narrator-grid > div {
  min-width: 0;
}
.video-omni-narrator-grid select,
#create-panel .video-omni-narrator-grid select,
#video-scenes-modal .video-omni-narrator-grid select {
  margin-bottom: 0;
}
@media (min-width: 720px) {
  .video-omni-narrator-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}
#create-panel .video-omni-suboptions .hint {
  margin: 9px 0 0;
  font-size: 12px;
  font-weight: 400;
  line-height: 1.45;
  color: var(--brand-muted, #64748b);
}
@media (max-width: 768px) {
  .video-wizard-settings-panel .video-animate-controls-row,
  #video-veo-reference-settings .video-animate-controls-row {
    grid-template-columns: 1fr;
    gap: 12px;
  }
  #video-wizard-animate-settings .video-animate-controls-row,
  .video-animate-output-settings .video-animate-controls-row {
    grid-template-columns: 1fr;
    gap: 12px;
  }
}
@media (max-width: 640px) {
  #create-panel .video-omni-feature-grid {
    grid-template-columns: 1fr;
  }
  .video-omni-options-header {
    align-items: flex-start;
    flex-direction: column;
    gap: 6px;
  }
}
@media (max-width: 480px) {
  .video-omni-narrator-grid > :last-child {
    grid-column: auto;
  }
  #create-panel .video-omni-options .video-omni-option {
    width: 100%;
    white-space: normal;
  }
  .video-omni-customize {
    grid-template-columns: minmax(0, 1fr) auto;
  }
  .video-omni-customize-action {
    display: none;
  }
}

/* Compact image-to-video creation flow */
#video-from-image-section.is-from-image-active #video-veo-frames-settings,
#video-from-image-section.is-prompt-active #video-veo-prompt-settings,
#video-from-image-section #video-veo-reference-settings {
  gap: 20px;
  font-family: 'Tajawal', system-ui, -apple-system, 'Segoe UI', sans-serif;
  color: var(--brand-ink, #1f2937);
}
#video-from-image-section .video-create-compact-header {
  display: grid;
  gap: 4px;
  padding-bottom: 2px;
}
#video-from-image-section .video-create-compact-header h3,
#video-from-image-section .video-create-section-heading h4 {
  margin: 0;
  color: var(--brand-ink, #1f2937);
  font-family: inherit;
}
#video-from-image-section .video-create-compact-header h3 {
  font-size: clamp(20px, 2.4vw, 24px);
  font-weight: 700;
  line-height: 1.35;
}
#video-from-image-section .video-create-compact-header p,
#video-from-image-section .video-create-section-heading p {
  margin: 0;
  color: #526174;
  font-size: 14px;
  line-height: 1.55;
}
#video-from-image-section .video-create-section-heading {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 10px;
}
#video-from-image-section .video-create-section-heading h4,
#video-from-image-section .video-create-basic-options .video-omni-options-title {
  font-size: 15.5px;
  font-weight: 650;
  line-height: 1.4;
}
#video-from-image-section .video-create-media-section {
  margin: 0;
  padding: 14px;
  border: 0;
  border-radius: 14px;
  background: transparent;
}
#video-from-image-section .video-veo-frame-grid {
  gap: 12px;
}
#video-from-image-section .video-veo-frame-grid .video-ref-slot {
  gap: 7px;
  padding: 0;
  border: 0;
}
#video-from-image-section .video-veo-frame-grid .video-ref-label {
  margin: 0;
  padding: 0;
  color: var(--brand-ink, #1f2937);
  font-size: 15.5px;
  font-weight: 650;
}
#video-from-image-section .video-frame-optional .video-ref-label {
  color: var(--brand-ink, #1f2937);
  font-weight: 650;
}
#video-from-image-section .video-frame-optional .optional-label {
  color: #526174;
  font-size: 13.5px;
  font-weight: 500;
}
#video-from-image-section .video-veo-frame-source-row {
  min-height: 82px;
  align-items: center;
  justify-content: flex-start;
  gap: 8px;
  padding: 10px;
  border: 1px dashed #cbd5e1;
  border-radius: 12px;
  background: #fff;
}
#video-from-image-section .video-frame-optional .video-veo-frame-source-row {
  background: rgba(255, 255, 255, 0.62);
}
#video-from-image-section .video-veo-frame-source-row:focus-within {
  border-color: var(--brand-accent, #7c3aed);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--brand-accent, #7c3aed) 13%, transparent);
}
#video-from-image-section .video-veo-frame-source-row .create-base-image-preview {
  min-width: 0;
  flex: 0 0 auto;
  margin: 0;
}
#video-from-image-section .video-veo-frame-source-row .create-base-image-preview:empty {
  display: none;
}
#video-from-image-section .video-veo-frame-source-row .create-library-pick {
  display: inline-flex;
  min-height: 42px;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 8px 12px;
  border: 1px solid var(--brand-border, #e5e7eb);
  border-radius: 10px;
  background: #fff;
  color: var(--brand-ink, #1f2937);
  font-family: inherit;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
}
#video-from-image-section .video-veo-frame-source-row .video-veo-frame-add {
  display: inline-flex;
  flex: 0 0 44px;
  width: 44px;
  height: 44px;
  min-height: 44px;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: 1px solid var(--brand-border, #e5e7eb);
  border-radius: 10px;
  background: #fff;
  color: var(--brand-ink, #1f2937);
  cursor: pointer;
}
#video-from-image-section .video-veo-frame-source-row .video-veo-frame-add:hover,
#video-from-image-section .video-veo-frame-source-row .create-library-pick:hover {
  border-color: #b8c0cc;
  background: #f8fafc;
}
#video-from-image-section .video-create-media-section > .hint {
  margin: 9px 0 0;
  color: #526174;
  font-size: 13.5px;
}
#video-from-image-section .video-create-prompt-field {
  margin: 0;
}
#video-from-image-section .video-create-prompt-field > label {
  margin-bottom: 8px;
  color: var(--brand-ink, #1f2937);
  font-size: 15.5px;
  font-weight: 650;
}
#video-from-image-section .video-create-prompt-field .voice-input-wrap textarea,
#video-from-image-section .video-create-prompt-field > textarea {
  min-height: 124px;
  max-height: 260px;
  padding: 13px 14px;
  border: 1px solid var(--brand-border, #e5e7eb);
  border-radius: 12px;
  font-size: 15px;
  line-height: 1.55;
  resize: vertical;
}
#video-from-image-section .video-create-prompt-field textarea:focus {
  border-color: var(--brand-accent, #7c3aed);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--brand-accent, #7c3aed) 13%, transparent);
}
#video-from-image-section .video-create-prompt-field .hint {
  margin: 7px 0 0;
  color: #526174;
  font-size: 13.5px;
  line-height: 1.45;
}
#create-panel .video-create-basic-options {
  margin: 0;
}
#create-panel .video-create-basic-options.is-visibility-transitioning {
  overflow: hidden;
  transition:
    max-height 0.26s ease,
    opacity 0.18s ease,
    transform 0.22s ease;
}
#create-panel .video-create-basic-options.is-visibility-closing {
  pointer-events: none;
}
.video-create-basic-options .video-omni-options-header {
  margin-bottom: 6px;
}
.video-create-basic-options .video-omni-options-title {
  font-size: 13px;
  font-weight: 500;
}
.video-create-basic-options .video-omni-availability {
  min-height: 0;
  padding: 0;
  border-radius: 0;
  background: transparent;
  color: #526174;
  font-size: 11.5px;
}
#create-panel .video-create-basic-options .video-omni-feature-grid {
  grid-template-columns: 1fr;
  gap: 0;
  overflow: visible;
  border: 0;
  border-radius: 0;
  background: transparent;
}
#create-panel .video-create-basic-options .video-omni-option-group {
  overflow: hidden;
  border-bottom: 1px solid var(--brand-border, #e5e7eb);
}
#create-panel .video-create-basic-options .video-omni-option-group:last-child {
  border-bottom: 0;
}
#create-panel .video-create-basic-options .video-omni-option {
  min-height: 0;
  align-items: center;
  gap: 10px;
  padding: 9px 12px;
  border: 0;
  border-bottom: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}
#create-panel .video-create-basic-options .video-omni-option:has(+ .video-omni-customize:not([hidden])) {
  padding-bottom: 2px;
}
#create-panel .video-create-basic-options .video-omni-option:hover,
#create-panel .video-create-basic-options .video-omni-option:has(input:checked) {
  border-color: var(--brand-border, #e5e7eb);
  background: transparent;
  box-shadow: none;
}
#create-panel .video-create-basic-options .video-omni-option:has(input:checked) .video-omni-option-title {
  color: var(--brand-accent, #7c3aed);
}
#create-panel .video-create-basic-options .video-omni-option:has(input:checked) .video-omni-option-desc {
  display: none;
}
#create-panel .video-create-basic-options .video-omni-option .video-omni-option-title {
  font-size: 13px !important;
  font-weight: 650;
  line-height: 1.3;
}
#create-panel .video-create-basic-options .video-omni-option .video-omni-option-desc {
  font-size: 11.5px !important;
  line-height: 1.35;
}
.video-create-basic-options .video-omni-option input[type="checkbox"] {
  position: relative;
  flex: 0 0 36px;
  width: 36px;
  height: 22px;
  margin: 0;
  appearance: none;
  -webkit-appearance: none;
  border: 0;
  border-radius: 999px;
  background: #cbd5e1;
  box-shadow: inset 0 0 0 1px rgba(15, 23, 42, 0.08);
  cursor: pointer;
}
.video-create-basic-options .video-omni-option input[type="checkbox"]::after {
  content: '';
  position: absolute;
  top: 3px;
  inset-inline-start: 3px;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 1px 3px rgba(15, 23, 42, 0.2);
  transition: inset-inline-start 0.16s ease;
}
.video-create-basic-options .video-omni-option input[type="checkbox"]:checked {
  background: var(--brand-accent, #7c3aed);
}
.video-create-basic-options .video-omni-option input[type="checkbox"]:checked::after {
  inset-inline-start: 17px;
}
.video-create-basic-options .video-omni-option input[type="checkbox"]:focus-visible {
  outline: 3px solid color-mix(in srgb, var(--brand-accent, #7c3aed) 24%, transparent);
  outline-offset: 2px;
}
.video-create-basic-options .video-omni-advanced-shell {
  margin-top: 9px;
}
.video-create-basic-options .video-omni-advanced-heading {
  display: none;
  margin: 0 0 7px;
  color: #526174;
  font-size: 12px;
  font-weight: 500;
}
.video-create-basic-options .video-omni-advanced-shell:has(.video-omni-customize:not([hidden])) .video-omni-advanced-heading {
  display: block;
}
.video-create-basic-options .video-omni-customize {
  min-height: 0;
  margin: 0;
  padding: 0 12px 8px;
  border: 0;
  border-radius: 0;
  background: transparent;
  gap: 8px;
}
.video-create-basic-options .video-omni-customize-label {
  display: none;
}
.video-create-basic-options .video-omni-customize:hover {
  border-color: transparent;
  background: transparent;
}
.video-create-basic-options .video-omni-customize[aria-expanded="true"] {
  border-radius: 0;
  background: transparent;
}
.video-create-basic-options .video-omni-customize[aria-expanded="true"] .video-omni-customize-summary {
  display: none;
}
.video-create-basic-options .video-omni-customize-summary {
  font-size: 11.5px;
  font-weight: 400;
  line-height: 1.35;
  color: var(--brand-muted, #64748b);
}
.video-create-basic-options .video-omni-customize-action {
  font-size: 12px;
}
.video-create-basic-options .video-omni-suboptions {
  overflow: hidden;
  max-height: 0;
  padding: 0 12px;
  border: 0;
  border-radius: 0;
  background: transparent;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition:
    max-height 0.26s ease,
    padding 0.26s ease,
    opacity 0.18s ease,
    visibility 0s linear 0.26s;
}
.video-create-basic-options .video-omni-suboptions.is-open {
  max-height: 520px;
  padding: 2px 12px 10px;
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transition-delay: 0s;
}
.video-create-basic-options .video-omni-customize-chevron {
  font-size: 14px;
  transition: transform 0.22s ease;
}
@media (prefers-reduced-motion: reduce) {
  #create-panel .video-create-basic-options.is-visibility-transitioning,
  .video-create-basic-options .video-omni-suboptions,
  .video-create-basic-options .video-omni-customize-chevron {
    transition: none;
  }
}
.video-create-basic-options .video-omni-suboptions label,
.video-create-basic-options .video-omni-suboptions > label {
  font-size: 11.5px !important;
  font-weight: 500;
  margin-bottom: 4px;
  line-height: 1.3;
}
.video-create-basic-options .video-omni-suboptions select,
.video-create-basic-options .video-omni-suboptions select option {
  min-height: 34px;
  font-size: 12.5px !important;
  font-weight: 400;
}
#create-panel .video-create-basic-options .video-omni-suboptions .hint {
  font-size: 11.5px;
}
#video-from-image-section .video-output-heading {
  margin: 0 0 -10px;
}
#video-from-image-section .video-output-controls-row {
  gap: 12px;
  margin-bottom: 0;
}
/* Spacing used to come from .video-output-heading; keep a gap when that title is absent. */
#video-from-image-section .video-output-controls-row + .video-veo-duration-field {
  margin-top: 18px;
}
#video-from-image-section .video-output-controls-row select {
  min-height: 42px;
  border-color: var(--brand-border, #e5e7eb);
  border-radius: 10px;
  background-color: #fff;
  font-size: 14px;
}
#video-from-image-section .video-output-controls-row select option {
  font-size: 14px;
}
#video-from-image-section .video-output-controls-row .field > label {
  color: var(--brand-ink, #1f2937);
  font-size: 15.5px;
  font-weight: 650;
}
#video-from-image-section .video-duration-label-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 8px;
}
#video-from-image-section .video-duration-label-row label {
  margin: 0;
  color: var(--brand-ink, #1f2937);
  font-size: 15.5px;
  font-weight: 650;
}
#video-from-image-section .video-duration-label-row span {
  color: #526174;
  font-size: 13px;
}
#video-from-image-section .video-veo-duration-slider-wrap {
  gap: 12px;
}
#video-from-image-section .video-veo-duration-slider-value {
  min-width: 74px;
  padding: 7px 10px;
  border-radius: 9px;
  background: #f1f5f9;
  color: var(--brand-ink, #1f2937);
  font-size: 14px;
  font-weight: 500;
  text-align: center;
  white-space: nowrap;
}
#video-from-image-section .video-veo-duration-field {
  margin: 0;
}
#video-from-image-section .video-veo-duration-field .video-duration-label-row {
  margin-top: 0;
}
#video-from-image-section .video-veo-duration-field .hint {
  color: #526174;
  font-size: 13.5px;
}
@media (max-width: 768px) {
  #video-from-image-section .video-create-section-heading,
  #video-from-image-section .video-duration-label-row {
    align-items: flex-start;
    flex-direction: column;
    gap: 3px;
  }
  #video-from-image-section .video-veo-frame-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (max-width: 600px) {
  #video-from-image-section .video-veo-frame-grid {
    grid-template-columns: 1fr;
  }
  #video-from-image-section .video-veo-frame-grid .video-ref-slot {
    padding: 0;
    border: 0;
  }
  #video-from-image-section .video-create-media-section {
    padding: 12px;
  }
  #video-from-image-section .video-veo-frame-source-row {
    flex-wrap: wrap;
  }
  #video-from-image-section .video-veo-frame-source-row .create-library-pick {
    flex: 1 1 auto;
    min-width: 0;
  }
  #video-from-image-section .video-create-prompt-field .voice-input-wrap textarea,
  #video-from-image-section .video-create-prompt-field > textarea {
    min-height: 116px;
  }
}

.video-veo-duration-base-picker {
  display: inline-flex;
  gap: 8px;
  flex-wrap: wrap;
}
.video-veo-duration-pill {
  min-width: 56px;
  padding: 10px 14px;
  border-radius: 999px;
  border: 1px solid var(--brand-border);
  background: #fff;
  color: var(--brand-ink);
  font-weight: 500;
  cursor: pointer;
  transition: border-color 0.15s, background 0.15s, color 0.15s;
}
.video-veo-duration-pill.is-selected {
  border-color: var(--brand-accent, #7c3aed);
  background: rgba(124, 58, 237, 0.08);
  color: var(--brand-accent, #7c3aed);
}
.video-veo-duration-extend-wrap {
  margin-top: 10px;
  max-width: 220px;
}
.video-veo-duration-slider-wrap {
  display: flex;
  align-items: center;
  gap: 14px;
}
.video-veo-duration-slider-wrap input[type="range"] {
  flex: 1;
  min-width: 0;
  margin: 0;
  padding: 0;
  border: none;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  outline: none;
  accent-color: var(--brand-accent, #7c3aed);
  cursor: pointer;
}
.video-veo-duration-slider-wrap input[type="range"]:focus,
.video-veo-duration-slider-wrap input[type="range"]:focus-visible,
.video-veo-duration-slider-wrap input[type="range"]:active {
  outline: none !important;
  border: none !important;
  box-shadow: none !important;
}
.video-veo-duration-slider-value {
  min-width: 40px;
  font-weight: 700;
  color: var(--brand-ink);
  text-align: end;
}
.video-veo-prompt-duration-check.is-checking {
  color: var(--brand-muted);
}
.video-veo-prompt-duration-check.is-mismatch {
  margin-top: 10px;
}
.video-veo-prompt-duration-alert {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 12px 14px;
  border-radius: 12px;
  border: 1px solid color-mix(in srgb, var(--brand-warning, #f59e0b) 35%, #fde68a);
  background: color-mix(in srgb, #fffbeb 82%, #ffffff);
  color: #92400e;
  font-size: 14px;
  line-height: 1.5;
  font-weight: 500;
}
.video-veo-prompt-duration-alert-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  margin-top: 1px;
  border-radius: 999px;
  background: var(--brand-warning, #f59e0b);
  color: #fff;
  font-size: 13px;
  font-weight: 700;
  flex: 0 0 auto;
}
.video-veo-prompt-duration-alert-text {
  flex: 1 1 auto;
  min-width: 0;
}
#create-panel #wizard-create.wizard-create-anyway {
  background: linear-gradient(180deg, #f59e0b 0%, #d97706 100%) !important;
  border-color: rgba(217, 119, 6, 0.22) !important;
  box-shadow: 0 12px 28px rgba(217, 119, 6, 0.22);
}
.video-veo-locked-value {
  min-height: 46px;
  display: flex;
  align-items: center;
  padding: 0;
  border: none;
  background: transparent;
  font-weight: 400;
  color: var(--brand-text, #111827);
}
.base-image-library-modal .base-image-library-filter-group {
  margin: 0 0 14px;
}

.base-image-library-modal .base-library-footer-actions {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  justify-content: flex-end;
}

.base-image-library-modal .base-library-footer-meta {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}

.base-image-library-modal .base-library-page-count {
  color: var(--brand-muted);
  font-size: 13px;
  font-weight: 700;
}

[dir="rtl"] .base-image-library-modal .base-library-footer-actions {
  direction: ltr;
  order: 1;
}

[dir="rtl"] .base-image-library-modal .base-library-older-action {
  order: 1;
}

[dir="rtl"] .base-image-library-modal .base-library-newer-action {
  order: 2;
}

[dir="rtl"] .base-image-library-modal .base-library-done-action {
  order: 3;
}

[dir="rtl"] .base-image-library-modal .base-library-footer-meta {
  order: 2;
}

.base-image-library-modal .base-library-thumb-wrap video.base-library-thumb {
  object-fit: cover;
}

#product-images-field.animated-video-upload-style .upload-thumb {
  width: auto;
  min-width: 0;
  min-height: 0;
  flex: 0 0 auto;
  padding: 4px;
  gap: 0;
  align-items: center;
  justify-content: center;
  border-radius: 16px;
}

#product-images-field.animated-video-upload-style .upload-thumb img,
#product-images-field.animated-video-upload-style .upload-thumb video {
  width: 68px;
  height: 68px;
  border-radius: 16px;
  object-fit: cover;
}

#product-images-field.animated-video-upload-style .upload-meta {
  display: none;
}

#product-images-field.animated-video-upload-style .upload-name {
  max-width: 48px;
  font-size: 10.5px;
  font-weight: 750;
  line-height: 1.25;
}

#product-images-field.animated-video-upload-style .upload-thumb .muted {
  font-size: 10px;
}

#product-images-field.animated-video-upload-style > .hint[data-i18n="animated_video_assets_required"] {
  margin-top: 8px;
}

.animated-video-create-mode .video-settings-row {
  gap: 18px;
  align-items: start;
}

.animated-video-create-mode .animated-video-output-section {
  margin-top: 28px;
  position: relative;
  z-index: 20;
}

.animated-video-create-mode .animated-video-output-stack {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 14px;
}

.animated-video-create-mode .animated-video-output-row {
  display: flex;
  align-items: flex-start;
  gap: 24px;
  flex-wrap: wrap;
}

.animated-video-create-mode .animated-video-output-item {
  flex: 0 0 auto;
  width: 100%;
  max-width: 320px;
  margin-bottom: 0;
}

.animated-video-create-mode .animated-video-aspect-output-item {
  position: relative;
  z-index: 30;
}

.animated-video-create-mode .animated-video-output-line {
  display: flex;
  align-items: center;
  gap: 9px;
  min-height: 46px;
}

.animated-video-create-mode .animated-video-aspect-output-item {
  display: grid;
  grid-template-rows: 20px 46px;
  row-gap: 5px;
}

.animated-video-create-mode .animated-video-aspect-output-item .product-studio-ratio-select-wrap {
  align-self: start;
}

.animated-video-create-mode .animated-video-output-label {
  display: inline-flex;
  align-items: center;
  margin: 0 !important;
  font-size: 15px !important;
  line-height: 1.2;
  font-weight: 700;
  color: #1f2937;
}

.animated-video-create-mode .animated-video-auto-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 30px;
  padding: 5px 13px;
  border-radius: 999px;
  background: rgba(124, 58, 237, 0.1);
  color: #6d28d9;
  font-size: 13px;
  line-height: 1;
  font-weight: 850;
}

.animated-video-create-mode .animated-video-output-item .hint {
  margin-top: 5px;
  max-width: 280px;
}

.animated-video-create-mode .readonly-input {
  min-height: 46px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-inline: 14px;
  border-radius: 15px;
  border-color: rgba(148, 163, 184, 0.35);
  background: #f8fafc;
  font-weight: 750;
  color: #111827;
}

.animated-video-create-mode .product-studio-aspect-trigger {
  min-height: 46px;
  border-radius: 15px;
  font-weight: 750;
  color: #111827;
  max-width: 280px;
}

.animated-video-create-mode #animated-video-aspect-menu {
  top: auto;
  bottom: calc(100% + 8px);
  z-index: 10000;
  max-height: min(280px, 50vh);
  overflow-y: auto;
}

.animated-video-create-mode .product-studio-aspect-option {
  min-height: 42px;
  font-weight: 750;
}

.animated-video-create-mode #creative-direction-field > label {
  display: none;
}

.animated-video-create-mode #creative-direction-field textarea {
  min-height: 150px;
  font-size: 14px !important;
  line-height: 1.55;
  border-radius: 18px;
}

.animated-video-create-mode #wizard-step-4 .step-panel-header {
  margin-bottom: 16px;
}

.animated-video-create-mode #animated-video-plan-status,
.animated-video-create-mode #animated-video-plan-revision-status {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 14px 16px;
  border: 1px solid rgba(124, 58, 237, 0.16);
  border-radius: 16px;
  background: rgba(124, 58, 237, 0.045);
  font-size: 13.5px;
  font-weight: 700;
  color: #5b21b6;
}

.animated-video-plan-loading-body {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
  flex: 1;
  min-width: 0;
}

.animated-video-plan-loading-title {
  display: block;
  line-height: 1.4;
}

.animated-video-create-mode #animated-video-plan-revision-status:not(.is-loading):not(.is-error):empty {
  display: none;
}

.animated-video-create-mode .animated-video-breakdown-card {
  margin-top: 0;
  padding: 16px;
  border-radius: 18px;
}

.animated-video-create-mode .animated-video-breakdown-head {
  display: flex;
  align-items: baseline;
  justify-content: flex-start;
  flex-wrap: wrap;
  gap: 6px 10px;
  margin-bottom: 8px;
}

.animated-video-create-mode .animated-video-breakdown-card .section-subtitle {
  font-size: 15px;
  line-height: 1.25;
  font-weight: 850;
  color: #111827;
}

.animated-video-plan-loading-helper {
  display: block;
  margin: 0;
  color: #7c3aed;
  font-size: 12px;
  line-height: 1.45;
  font-weight: 500;
}

.animated-video-plan-loading-leave-hint {
  display: block;
  margin: 2px 0 0;
  color: #6b7280;
  font-size: 12px;
  line-height: 1.45;
  font-weight: 500;
}

.animated-video-create-mode .animated-video-breakdown-list {
  gap: 9px;
  margin-top: 12px;
}

.animated-video-create-mode .animated-video-breakdown-row {
  grid-template-columns: minmax(76px, 112px) 1fr;
  gap: 12px;
  padding: 11px 12px;
  border-radius: 14px;
}

.animated-video-create-mode .animated-video-breakdown-time {
  font-size: 12px;
  line-height: 1.35;
  font-weight: 850;
}

.animated-video-create-mode .animated-video-breakdown-scene {
  font-size: 12px;
  line-height: 1.45;
  color: #374151;
}

.animated-video-create-mode .animated-video-breakdown-concept {
  margin: 0 0 6px;
  font-size: 13px;
  line-height: 1.5;
  color: #4b5563;
}

.animated-video-create-mode [data-animated-plan-time],
.animated-video-create-mode [data-animated-plan-scene] {
  min-height: 22px;
  border-radius: 8px;
  outline: 0;
}

.animated-video-create-mode .animated-video-editable-field {
  position: relative;
  display: block;
  align-items: flex-start;
  cursor: text;
  padding-right: 24px;
}

.animated-video-create-mode .animated-video-editable-text {
  display: block;
  min-width: 0;
  outline: 0;
}

.animated-video-create-mode .animated-video-edit-icon {
  position: absolute;
  top: 0;
  right: 0;
  width: 17px;
  height: 17px;
  display: inline-grid;
  place-items: center;
  border: 0;
  padding: 0;
  border-radius: 999px;
  background: rgba(124, 58, 237, 0.08);
  color: #7c3aed;
  font-size: 10px;
  line-height: 1;
  opacity: 0.72;
  transform: translateY(1px);
  cursor: pointer;
}

.animated-video-create-mode .animated-video-editable-field:hover .animated-video-edit-icon,
.animated-video-create-mode .animated-video-editable-field:focus .animated-video-edit-icon {
  opacity: 1;
}

.animated-video-create-mode [data-animated-plan-time]:focus-within,
.animated-video-create-mode [data-animated-plan-scene]:focus-within {
  box-shadow: 0 0 0 2px rgba(124, 58, 237, 0.18);
  background: rgba(124, 58, 237, 0.045);
}

.animated-video-create-mode .animated-video-inline-edit-hint {
  margin: 0;
  font-size: 12px;
  line-height: 1.45;
  text-align: inherit;
}

.animated-video-advanced-toggle {
  width: fit-content;
  margin-top: 12px;
  padding: 7px 11px;
  border: 1px solid rgba(124, 58, 237, 0.18);
  border-radius: 999px;
  background: rgba(124, 58, 237, 0.055);
  color: #6d28d9;
  font-family: inherit;
  font-size: 11.5px;
  font-weight: 700;
  line-height: 1.2;
  cursor: pointer;
}

.animated-video-advanced-toggle:hover,
.animated-video-advanced-toggle:focus-visible {
  outline: none;
  border-color: rgba(124, 58, 237, 0.38);
  background: rgba(124, 58, 237, 0.09);
}

.animated-video-animation-instructions {
  margin-top: 10px;
  padding: 12px;
  border: 1px dashed rgba(124, 58, 237, 0.26);
  border-radius: 14px;
  background: rgba(248, 250, 252, 0.88);
}

.animated-video-animation-instructions-title {
  color: #4c1d95;
  font-size: 12.5px;
  font-weight: 850;
}

.animated-video-create-mode .animated-video-instruction-row {
  background: #fff;
}

.animated-video-plan-edit-grid,
.animated-video-edit-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 18px;
}

.animated-video-plan-panel {
  display: grid;
  gap: 18px;
}

.animated-video-plan-edit-grid .field {
  padding: 16px;
  border: 1px solid rgba(148, 163, 184, 0.2);
  border-radius: 18px;
  background: #fff;
}

.animated-video-voiceover-card {
  padding: 14px 16px;
  border: 1px solid rgba(124, 58, 237, 0.16);
  border-radius: 18px;
  background: rgba(124, 58, 237, 0.055);
}

.animated-video-voiceover-toggle {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: 15px;
  font-weight: 700;
  color: #1f1538;
  cursor: pointer;
}

.animated-video-voiceover-options {
  display: grid;
  gap: 8px;
  margin-top: 12px;
}

.animated-video-voiceover-options select {
  width: 100%;
  min-height: 46px;
  padding: 10px 42px 10px 14px;
  border: 1px solid rgba(124, 58, 237, 0.22);
  border-radius: 14px;
  background-color: #fff;
  color: #1f2937;
  font-family: 'Tajawal', 'Cairo', system-ui, -apple-system, Segoe UI, sans-serif;
  font-size: 14px;
  font-weight: 750;
  line-height: 1.35;
}

html[dir="rtl"] .animated-video-voiceover-options select {
  padding: 10px 14px 10px 42px;
}

.animated-video-voiceover-options select:focus {
  outline: none;
  border-color: rgba(124, 58, 237, 0.55);
  box-shadow: 0 0 0 3px rgba(124, 58, 237, 0.14);
}

.animated-video-version-strip {
  display: flex;
  gap: 10px;
  width: 100%;
  overflow-x: auto;
  padding: 4px 2px 8px;
}

.animated-video-version-thumb {
  display: grid;
  gap: 6px;
  min-width: 96px;
  padding: 6px;
  border: 1px solid rgba(148, 163, 184, 0.28);
  border-radius: 14px;
  background: #fff;
  color: #475569;
  font-size: 11px;
  font-weight: 700;
  cursor: pointer;
}

.animated-video-version-thumb.active {
  border-color: #7c3aed;
  color: #5b21b6;
  box-shadow: 0 0 0 2px rgba(124, 58, 237, 0.12);
}

.animated-video-version-thumb video {
  width: 84px;
  height: 84px;
  border-radius: 10px;
  background: #020617;
  object-fit: cover;
}

.animated-video-edit-modal {
  align-items: flex-start;
  overflow: auto;
  padding: 16px;
}

.animated-video-edit-card {
  box-sizing: border-box;
  width: min(920px, 100%);
  max-width: calc(100vw - 32px);
  max-height: calc(100dvh - 32px);
  overflow-x: hidden;
  overflow-y: auto;
}

html[dir="rtl"] #animated-video-edit-modal .modal-close,
[dir="rtl"] #animated-video-edit-modal .modal-close,
.rtl #animated-video-edit-modal .modal-close {
  left: 16px;
  right: auto;
}

.animated-video-edit-preview video {
  display: block;
  width: min(100%, 360px);
  max-height: 42vh;
  margin: 0 auto;
  border-radius: 18px;
  background: #020617;
}

.animated-video-edit-preview,
.animated-video-edit-controls,
.animated-video-edit-grid,
.animated-video-edit-mode-option,
.animated-video-edit-controls .field {
  min-width: 0;
}

.animated-video-edit-preview .lazy-video-preview {
  max-width: 100%;
}

.animated-video-edit-controls {
  display: flex;
  flex-direction: column;
  gap: 11px;
}

.animated-video-edit-controls .section-subtitle,
.animated-video-edit-preview h3 {
  font-size: 15px;
  line-height: 1.2;
  font-weight: 700;
  letter-spacing: -0.015em;
  color: #111827;
}

.animated-video-edit-controls label {
  font-size: 13px;
  font-weight: 850;
  color: #111827;
}

.animated-video-edit-flow-hint {
  padding: 10px 12px;
  border: 1px solid rgba(124, 58, 237, 0.18);
  border-radius: 14px;
  background: rgba(124, 58, 237, 0.06);
  color: #4c1d95;
  font-size: 12px;
  font-weight: 750;
  line-height: 1.45;
}

.animated-video-edit-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
}

.animated-video-edit-actions .button.secondary.is-complete {
  border-color: rgba(22, 163, 74, 0.35);
  background: rgba(22, 163, 74, 0.08);
  color: #166534;
  cursor: default;
}

.animated-video-edit-actions .button.animated-video-edit-submit-ready {
  box-shadow: 0 0 0 3px rgba(124, 58, 237, 0.18);
}

.animated-video-edit-controls textarea {
  font-size: 12.5px;
  line-height: 1.45;
  border-radius: 16px;
}

.animated-video-edit-mode {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 9px;
}

.animated-video-edit-mode-option {
  display: flex;
  align-items: flex-start;
  gap: 9px;
  padding: 10px 12px;
  border: 1px solid rgba(148, 163, 184, 0.28);
  border-radius: 14px;
  background: rgba(248, 250, 252, 0.76);
  cursor: pointer;
  transition: border-color 0.16s ease, background 0.16s ease, box-shadow 0.16s ease;
}

.animated-video-edit-mode-option.active {
  border-color: rgba(124, 58, 237, 0.55);
  background: rgba(124, 58, 237, 0.08);
  box-shadow: 0 8px 22px rgba(124, 58, 237, 0.08);
}

.animated-video-edit-mode-option input {
  margin-top: 3px;
  accent-color: #7c3aed;
}

.animated-video-edit-mode-option span {
  display: grid;
  gap: 3px;
}

.animated-video-edit-mode-option strong {
  font-size: 12.5px;
  line-height: 1.2;
  color: #111827;
}

.animated-video-edit-mode-option small {
  font-size: 11px;
  line-height: 1.35;
  color: #64748b;
}

.animated-video-edit-controls .animated-video-breakdown-card {
  margin-top: 0;
  padding: 10px;
  border-radius: 14px;
}

.animated-video-edit-controls .animated-video-breakdown-list {
  gap: 7px;
  margin-top: 8px;
}

.animated-video-edit-controls .animated-video-breakdown-row {
  grid-template-columns: minmax(58px, 76px) 1fr;
  gap: 8px;
  padding: 7px 9px;
  border-radius: 11px;
}

.animated-video-music-modal {
  overflow: auto;
  padding: 16px;
}

.animated-video-music-card {
  box-sizing: border-box;
  width: min(520px, calc(100vw - 32px));
  max-width: calc(100vw - 32px);
  overflow-x: hidden;
  overflow-y: auto;
}

.animated-video-music-modal .modal-close {
  top: 16px;
  right: 16px;
  left: auto;
}

html[dir="rtl"] .animated-video-music-modal .modal-close,
[dir="rtl"] .animated-video-music-modal .modal-close,
.rtl .animated-video-music-modal .modal-close,
html[lang="ar"] .animated-video-music-modal .modal-close,
html[lang="he"] .animated-video-music-modal .modal-close {
  left: 16px;
  right: auto;
}

.animated-video-music-modal .modal-title {
  padding-inline-end: 44px;
}

html[dir="rtl"] .animated-video-music-modal .modal-title,
[dir="rtl"] .animated-video-music-modal .modal-title,
.rtl .animated-video-music-modal .modal-title,
html[lang="ar"] .animated-video-music-modal .modal-title,
html[lang="he"] .animated-video-music-modal .modal-title {
  padding-inline-end: 0;
  padding-inline-start: 44px;
}

.animated-video-music-options {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.animated-video-music-modal .radio-option {
  align-items: flex-start;
  min-width: 0;
}

.animated-video-music-modal .radio-option input[type="radio"] {
  flex: 0 0 auto;
  margin-top: 2px;
}

.animated-video-music-modal .radio-option input[type="radio"]:checked + .animated-video-music-option-text {
  font-weight: 400;
  color: inherit;
}

.animated-video-music-option-text {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
  flex: 1;
  overflow-wrap: anywhere;
}

.animated-video-music-option-title {
  font-weight: 400;
  line-height: 1.35;
  color: var(--brand-ink, #0f172a);
}

.animated-video-music-modal .radio-option input[type="radio"]:checked + .animated-video-music-option-text .animated-video-music-option-title {
  color: var(--primary);
}

.animated-video-music-option-hint {
  display: block;
  font-size: 13px;
  line-height: 1.4;
  color: var(--brand-muted);
}

.animated-video-music-modal .field,
.animated-video-music-modal textarea,
.animated-video-music-modal .full-width {
  min-width: 0;
  max-width: 100%;
  box-sizing: border-box;
}

.animated-video-music-actions {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  margin-top: 16px;
  direction: ltr;
}

.animated-video-music-actions .button {
  flex: 0 1 auto;
  min-width: 0;
}

.animated-video-edit-controls .animated-video-breakdown-time {
  font-size: 11px;
  line-height: 1.25;
}

.animated-video-edit-controls .animated-video-breakdown-scene {
  font-size: 13px;
  line-height: 1.5;
  min-width: 0;
  overflow-wrap: anywhere;
}

.animated-video-edit-controls .animated-video-breakdown-scene-text,
.animated-video-edit-controls .animated-video-breakdown-motion-text {
  font-size: 13.5px;
  line-height: 1.55;
}

.animated-video-create-mode .animated-video-breakdown-scene-text,
.animated-video-create-mode .animated-video-editable-text {
  font-size: 13.5px;
  line-height: 1.55;
}

@media (max-width: 860px) {
  .animated-video-plan-edit-grid,
  .animated-video-edit-grid {
    grid-template-columns: 1fr;
  }

  .animated-video-edit-mode {
    grid-template-columns: 1fr;
  }

  .animated-video-edit-modal {
    padding: 10px;
  }

  .animated-video-edit-card {
    max-width: calc(100vw - 20px);
    max-height: calc(100dvh - 20px);
    padding: 18px;
    border-radius: 20px;
  }

  .animated-video-create-mode .step-panel-title {
    font-size: 22px !important;
  }

  .animated-video-create-mode .director-surface {
    padding: 16px;
    border-radius: 18px;
  }

  #product-images-field.animated-video-upload-style .animated-video-assets-row {
    gap: 10px;
  }

  .animated-video-create-mode .animated-video-output-row {
    display: grid;
    grid-template-columns: 1fr;
    gap: 14px;
  }

  .animated-video-create-mode .animated-video-output-item {
    flex-basis: auto;
  }
}

.upload-meta {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.upload-name {
  font-size: 12px;
  font-weight: 500;
  color: var(--brand-ink);
  max-width: 180px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.logo-options-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 16px;
  margin-top: 16px;
}

.logo-option-card {
  border: 1px solid var(--brand-border);
  border-radius: 16px;
  padding: 12px;
  background: #fff;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.logo-option-card img {
  width: 100%;
  height: 180px;
  object-fit: contain;
  background: #f7f7fb;
  border-radius: 12px;
  border: 1px solid #edf0f7;
}

.copy-item {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.copy-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.copy-icon {
  border: 1px solid rgba(147, 51, 234, 0.35);
  background: rgba(147, 51, 234, 0.08);
  color: var(--brand-primary);
  width: 30px;
  height: 30px;
  border-radius: 8px;
  display: grid;
  place-items: center;
  cursor: pointer;
  font-size: 14px;
}

.copy-icon svg {
  width: 14px;
  height: 14px;
  stroke: currentColor;
  fill: none;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.copy-icon:hover {
  background: linear-gradient(135deg, var(--brand-primary), var(--brand-secondary));
  color: #fff;
  border-color: transparent;
}

.logo-option-actions {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.logo-edit-box {
  display: flex;
  gap: 8px;
  flex-direction: column;
}

.logo-edit-box input {
  width: 100%;
}

.brand-list-item {
  padding: 12px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 12px;
}

.brand-list-left {
  display: flex;
  align-items: center;
  gap: 12px;
}

.brand-list-left .section-title {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.brand-list-left.compact {
  align-items: flex-start;
}

.brand-list-logo {
  width: 42px;
  height: 42px;
  border-radius: 12px;
  background: rgba(147, 51, 234, 0.12);
  display: grid;
  place-items: center;
  overflow: hidden;
  font-weight: 700;
  color: var(--brand-primary);
}

.brand-list-logo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.brand-list-logo.small {
  width: 32px;
  height: 32px;
  border-radius: 10px;
}

.brand-list-actions {
  display: inline-flex;
  gap: 8px;
  flex-wrap: wrap;
}

.brand-list-actions.compact {
  width: 100%;
  justify-content: flex-start;
  flex-wrap: wrap;
  align-items: center;
}

.brand-list-actions.compact .button {
  padding: 8px 10px;
  font-size: 13px;
  border-radius: 10px;
  white-space: nowrap;
}

.brand-list-actions.compact .button span {
  white-space: nowrap;
}

.brand-list-actions .button {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.action-icon {
  width: 14px;
  height: 14px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.action-icon svg {
  width: 14px;
  height: 14px;
  stroke: currentColor;
  fill: none;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.inline-actions {
  display: inline-flex;
  gap: 8px;
  flex-wrap: wrap;
}

.section-header .inline-actions {
  flex-wrap: nowrap;
}

.section-header .inline-actions .button {
  white-space: nowrap;
}

.section-header {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.section-header .section-title {
  white-space: nowrap;
}

.section-header .inline-actions {
  margin-top: 10px;
}

.stats-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 12px;
  margin: 12px 0 18px;
}

.stat-card {
  background: rgba(147, 51, 234, 0.08);
  border: 1px solid rgba(147, 51, 234, 0.2);
  border-radius: 14px;
  padding: 12px 14px;
}

.stats-grid-icons .stat-card {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.stat-icon {
  width: 24px;
  height: 24px;
  color: var(--brand-primary);
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.stat-icon svg {
  width: 20px;
  height: 20px;
  stroke: currentColor;
  fill: none;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.stat-label {
  font-size: 12px;
  color: var(--brand-muted);
  font-weight: 500;
}

.stat-value {
  font-size: 20px;
  font-weight: 700;
  color: var(--brand-ink);
}

.stat-row {
  display: flex;
  align-items: center;
  gap: 10px;
}


.plan-panel {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.plan-panel-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 20px;
  flex-wrap: wrap;
}

.plan-meta {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 8px;
  color: var(--brand-muted);
  font-weight: 500;
  font-size: 13px;
  flex-wrap: wrap;
}

.plan-tier {
  color: var(--brand-primary);
  font-weight: 700;
  letter-spacing: 0.03em;
}

.inline-actions {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.inline-actions .button {
  white-space: nowrap;
  font-size: 14px;
  padding: 10px 18px;
}

/* RTL: do not row-reverse the header — with dir=rtl, flex row flows main-start on the right,
   so the plan title/meta stay on the right and actions on the left, matching reading order. */
[dir="rtl"] .plan-panel-header > div:first-child {
  text-align: right;
}

[dir="rtl"] .plan-meta {
  justify-content: flex-end;
}

@media (max-width: 768px) {
  .plan-panel-header {
    flex-direction: column;
    align-items: stretch;
    gap: 16px;
  }
  
  .inline-actions:not(.leads-toolbar) {
    flex-direction: column;
    width: 100%;
  }
  
  .inline-actions:not(.leads-toolbar) .button {
    width: 100%;
    justify-content: center;
  }
  
  [dir="rtl"] .plan-panel-header > div:first-child {
    text-align: right;
  }

  .wizard-step-panel[data-step="4"] #wizard-target-languages-label + .inline-actions {
    align-items: flex-start;
    justify-content: flex-start;
  }

  [dir="rtl"] .wizard-step-panel[data-step="4"] #wizard-target-languages-label + .inline-actions,
  .rtl .wizard-step-panel[data-step="4"] #wizard-target-languages-label + .inline-actions {
    direction: rtl;
    text-align: right;
    align-items: flex-end;
    justify-content: flex-end;
    margin-inline-start: auto;
  }
}

.plan-credits-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
  gap: 12px;
}

.plan-credit-card {
  border-radius: 16px;
  background: rgba(147, 51, 234, 0.1);
  padding: 14px 12px;
  display: grid;
  justify-items: center;
  gap: 6px;
  text-align: center;
}

.plan-limits-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 12px;
  margin-top: 12px;
}

.plan-limit-card {
  background: rgba(147, 51, 234, 0.06);
  border: 1px solid rgba(147, 51, 234, 0.16);
  border-radius: 14px;
  padding: 10px 12px;
  display: grid;
  gap: 4px;
}

.plan-referral-row {
  margin-top: 12px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 14px;
  border: 1px solid var(--brand-border);
  border-radius: 14px;
  background: var(--brand-card);
}

#referral-apply-section {
  margin-top: 16px;
}

#referral-apply-section .muted {
  padding-top: 6px;
}

.plan-limit-label {
  font-size: 12px;
  color: var(--brand-muted);
  font-weight: 500;
}

.plan-limit-value {
  font-size: 14px;
  font-weight: 700;
  color: var(--brand-ink);
}

.plan-credit-icon {
  width: 20px;
  height: 20px;
  color: var(--brand-primary);
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.plan-credit-icon svg {
  width: 20px;
  height: 20px;
  stroke: currentColor;
  fill: none;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.plan-credit-value {
  font-size: 20px;
  font-weight: 700;
  color: var(--brand-ink);
}

.plan-credit-label {
  font-size: 12px;
  font-weight: 700;
  color: var(--brand-muted);
}

.plan-credit-card.is-plan-inactive {
  background: rgba(15, 23, 42, 0.05);
}

.plan-credit-card.is-plan-inactive .plan-credit-value,
.plan-credit-card.is-plan-inactive .plan-credit-label {
  color: var(--brand-muted);
}

.plan-trial-note {
  font-size: 13px;
  font-weight: 500;
  color: var(--brand-muted);
}

.plan-trial-info {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  padding: 4px 0 20px;
  margin-bottom: 8px;
  background: transparent;
  border: none;
  border-radius: 0;
}

.plan-trial-info-icon {
  flex-shrink: 0;
  margin-top: 2px;
  line-height: 0;
  color: var(--brand-muted, #6b7280);
}

.plan-trial-info-icon svg {
  display: block;
}

.plan-trial-info-content {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 12px;
  min-width: 0;
}

.plan-trial-info-title {
  font-size: 14px;
  line-height: 1.55;
  color: var(--brand-ink, #1a202c);
  font-weight: 500;
  margin: 0;
}

.plan-trial-info .button.small {
  align-self: flex-start;
  white-space: nowrap;
}

/* RTL: inherit html dir=rtl — row flows main-start on the right, so icon (first) sits on the right.
   Do not use row-reverse; it puts the icon on the left and mirrors LTR. */
html[dir="rtl"] .plan-trial-info,
[dir="rtl"] .plan-trial-info {
  text-align: right;
}

html[dir="rtl"] .plan-trial-info-content,
[dir="rtl"] .plan-trial-info-content {
  text-align: right;
  align-items: flex-start;
}

html[dir="rtl"] .plan-trial-info .button.small,
[dir="rtl"] .plan-trial-info .button.small {
  align-self: flex-start;
}

@media (max-width: 640px) {
  .plan-trial-info {
    flex-direction: column;
    gap: 12px;
    padding: 4px 0 16px;
    align-items: center;
    text-align: center;
  }
  
  .plan-trial-info-icon {
    margin-top: 0;
  }

  .plan-trial-info-icon svg {
    width: 20px;
    height: 20px;
  }
  
  .plan-trial-info-title {
    font-size: 13px;
  }
  
  .plan-trial-info .button.small {
    width: 100%;
    align-self: stretch;
    padding: 10px 16px;
    font-size: 13px;
  }
  
  html[dir="rtl"] .plan-trial-info,
  [dir="rtl"] .plan-trial-info {
    align-items: stretch;
    text-align: right;
  }

  html[dir="rtl"] .plan-trial-info-icon,
  [dir="rtl"] .plan-trial-info-icon {
    align-self: flex-start; /* cross-start = inline-start = right in RTL column */
  }

  html[dir="rtl"] .plan-trial-info-content,
  [dir="rtl"] .plan-trial-info-content {
    align-items: stretch;
    width: 100%;
  }

  html[dir="rtl"] .plan-trial-info .button.small,
  [dir="rtl"] .plan-trial-info .button.small {
    align-self: stretch;
  }
}


.usage-card {
  margin-top: 16px;
}

.usage-chart {
  width: 100%;
  margin-top: 12px;
  min-height: 140px;
  position: relative;
}

.usage-chart svg {
  width: 100%;
  height: 180px;
  display: block;
}

.usage-dot {
  cursor: pointer;
}

.usage-tooltip {
  position: absolute;
  left: 0;
  top: 0;
  transform: translate(-50%, -6px);
  padding: 6px 10px;
  background: #111827;
  color: #ffffff;
  font-size: 12px;
  border-radius: 8px;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.15s ease, transform 0.15s ease;
  white-space: nowrap;
  z-index: 2;
}

.usage-controls {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 8px;
}

.usage-control {
  display: grid;
  gap: 6px;
  font-size: 12px;
  color: var(--brand-muted);
}

.usage-pagination {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-top: 16px;
}

.usage-sort {
  cursor: pointer;
  user-select: none;
}

.usage-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 10px;
  font-size: 12px;
  color: var(--brand-muted);
  font-weight: 500;
}

.usage-totals {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 10px;
}

.usage-total-item {
  display: inline-flex;
  align-items: baseline;
  gap: 6px;
  background: #f8fafc;
  border: 1px solid #e5e7eb;
  border-radius: 8px;
  padding: 6px 10px;
}

.usage-total-label {
  font-size: 12px;
  color: #6b7280;
  font-weight: 500;
}

.usage-total-value {
  font-size: 13px;
  color: #111827;
  font-weight: 700;
}

.user-daily-image-cap {
  align-items: center;
}

.usage-total-label-brand {
  max-width: 180px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.usage-total-item.is-at-limit {
  background: #fef2f2;
  border-color: #fecaca;
}

.usage-total-item.is-at-limit .usage-total-value {
  color: #b91c1c;
}

.animated-video-create-mode #animated-video-plan-status.is-loading::before,
.animated-video-create-mode #animated-video-plan-revision-status.is-loading::before {
  content: '';
  width: 16px;
  height: 16px;
  flex: 0 0 auto;
  border: 2px solid rgba(124, 58, 237, 0.22);
  border-top-color: #7c3aed;
  border-radius: 999px;
  animation: spin 0.8s linear infinite;
}

.animated-video-create-mode #animated-video-plan-status.is-error,
.animated-video-create-mode #animated-video-plan-revision-status.is-error {
  border-color: rgba(239, 68, 68, 0.2);
  background: rgba(239, 68, 68, 0.07);
  color: #b91c1c;
}

.image-edit-credit-note {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin: 8px 0 10px;
  padding: 8px 10px;
  border-radius: 10px;
  border: 1px solid #bfdbfe;
  background: #eff6ff;
  color: #1e3a8a;
  font-size: 12px;
}

.image-edit-credit-note.is-hidden {
  display: none;
}

.image-edit-credit-note-text {
  line-height: 1.35;
}

.image-edit-note-help {
  height: 24px;
  padding: 0 10px;
  border-radius: 999px;
  border: 1px solid #1d4ed8;
  background: #ffffff;
  color: #1d4ed8;
  font-size: 11px;
  font-weight: 700;
  cursor: pointer;
  flex: 0 0 auto;
  white-space: nowrap;
}

.image-edit-help-card {
  width: min(560px, 92vw);
}

.image-edit-help-list {
  margin: 12px 0 0;
  padding-inline-start: 20px;
  display: grid;
  gap: 8px;
}

.image-edit-help-list li {
  color: #334155;
  line-height: 1.45;
}

html[dir="rtl"] #image-edit-help-modal .modal-close,
[dir="rtl"] #image-edit-help-modal .modal-close,
.rtl #image-edit-help-modal .modal-close {
  right: auto;
  left: 12px;
}

.user-charts-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 14px;
}

.user-charts-controls {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.user-charts-range-bar {
  border: 1px solid #e5e7eb;
  border-radius: 12px;
  padding: 8px;
  background: #f8fafc;
}

.user-charts-custom-controls {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.user-charts-custom-controls.is-hidden {
  display: none;
}

.user-charts-date-range {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.user-charts-control {
  height: 40px;
  border-radius: 10px;
}

.user-charts-range-select {
  min-width: 180px;
}

.user-charts-date-input {
  min-width: 155px;
}

.user-charts-date-sep {
  font-weight: 500;
}

.user-charts-apply-btn {
  min-height: 40px;
  padding-inline: 16px;
  border-radius: 10px;
}

@media (max-width: 760px) {
  .user-charts-controls {
    width: 100%;
  }

  .user-charts-range-select,
  .user-charts-date-input,
  .user-charts-apply-btn {
    flex: 1 1 100%;
    min-width: 0;
  }

  .user-charts-custom-controls {
    display: grid;
    width: 100%;
    grid-template-columns: 1fr;
  }

  .user-charts-date-range {
    width: 100%;
    display: grid;
    grid-template-columns: 1fr;
  }

  .user-charts-date-sep {
    display: none;
  }
}

.usage-legend-item {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  cursor: pointer;
}

.usage-legend-item.inactive {
  opacity: 0.4;
  text-decoration: line-through;
}

.usage-legend-dot {
  width: 10px;
  height: 10px;
  border-radius: 999px;
  display: inline-block;
}

.usage-table-wrap {
  margin-top: 16px;
  overflow-x: auto;
}

.usage-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 12px;
}

.usage-table th,
.usage-table td {
  padding: 8px 10px;
  border-bottom: 1px solid var(--brand-border);
  text-align: left;
}

.usage-table th {
  color: var(--brand-muted);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.stat-note {
  margin-top: 10px;
  font-size: 12px;
  line-height: 1.4;
}

.ambassador-stats-row .ambassador-invalid-note {
  flex: 0 0 100%;
  margin-top: 0;
  max-width: 100%;
}

.ambassador-invalid-note,
.plan-referral-voided-note {
  margin-top: 16px;
  font-size: 13px;
  line-height: 1.45;
}

.referral-balance-voided,
.referral-profit-voided {
  text-decoration: line-through;
  color: #94a3b8;
  margin-inline-end: 8px;
}

.referral-balance-adjusted,
.referral-profit-adjusted {
  font-weight: 700;
  color: #0f172a;
}

.referral-profit-invalid {
  color: #b45309;
  font-weight: 500;
}

.ambassador-referral-row-invalid td {
  background: #fffbeb;
}

.ambassador-referrals-details {
  overflow: hidden;
}

.ambassador-referrals-summary {
  list-style: none;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  cursor: pointer;
}

.ambassador-referrals-summary::-webkit-details-marker {
  display: none;
}

.ambassador-referrals-summary-copy {
  margin: 8px 0 0;
}

.ambassador-referrals-summary-icon {
  flex: 0 0 auto;
  font-size: 24px;
  line-height: 1;
  color: var(--brand-muted);
}

.ambassador-referrals-details[open] .ambassador-referrals-summary-icon {
  transform: rotate(45deg);
}

.ambassador-referrals-table-wrap {
  margin-top: 16px;
}

.ambassador-plan-dates {
  margin-top: 4px;
  font-size: 11px;
  white-space: nowrap;
}

html[dir="rtl"] #tab-ambassador .ambassador-referrals-summary,
[dir="rtl"] #tab-ambassador .ambassador-referrals-summary,
.rtl #tab-ambassador .ambassador-referrals-summary {
  text-align: right;
}

html[dir="rtl"] #tab-ambassador .usage-table th,
html[dir="rtl"] #tab-ambassador .usage-table td,
[dir="rtl"] #tab-ambassador .usage-table th,
[dir="rtl"] #tab-ambassador .usage-table td,
.rtl #tab-ambassador .usage-table th,
.rtl #tab-ambassador .usage-table td {
  text-align: right;
}

/* ── Ambassador wallet (profile > Ambassador) ──
   Type steps: 12 status · 13 help · 14 rows · 18 titles · 20 dialog title · 28 available amount. */
#tab-ambassador .amb-wallet [hidden],
#tab-ambassador .amb-history[hidden],
.amb-modal [hidden] {
  display: none !important;
}

#tab-ambassador .amb-wallet {
  margin-top: 24px;
  padding-top: 20px;
  border-top: 1px solid var(--brand-border, #e6e8f0);
}

#tab-ambassador .amb-wallet-title,
#tab-ambassador .amb-history-title {
  margin: 0 0 12px;
  font-size: 18px;
  font-weight: 700;
  color: var(--brand-text, #1a202c);
}

#tab-ambassador .amb-wallet-available {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 16px;
  padding: 16px 18px;
  border-radius: 16px;
  background: color-mix(in srgb, var(--brand-primary, #7c3aed) 6%, #ffffff);
  border: 1px solid color-mix(in srgb, var(--brand-primary, #7c3aed) 16%, #ffffff);
}

#tab-ambassador .amb-wallet-label {
  display: block;
  font-size: 13px;
  font-weight: 500;
  color: #5b6474;
}

#tab-ambassador .amb-wallet-available-amount {
  display: block;
  margin-top: 4px;
  font-size: 28px;
  font-weight: 700;
  line-height: 1.1;
  color: var(--brand-text, #1a202c);
  font-variant-numeric: tabular-nums;
}

#tab-ambassador .amb-wallet-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

#tab-ambassador .amb-wallet-actions .button[disabled] {
  opacity: 0.45;
  cursor: not-allowed;
}

#tab-ambassador .amb-wallet-notice {
  margin: 12px 0 0;
  font-size: 13px;
  line-height: 1.5;
  color: #5b6474;
}

#tab-ambassador .amb-wallet-notice.is-warning {
  padding: 10px 12px;
  border-radius: 10px;
  background: #fffbeb;
  color: #92400e;
}

#tab-ambassador .amb-ledger {
  margin: 8px 0 0;
}

#tab-ambassador .amb-ledger-row {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: baseline;
  column-gap: 16px;
  padding: 12px 0;
  border-bottom: 1px solid var(--brand-border, #e6e8f0);
}

#tab-ambassador .amb-ledger-row dt {
  font-size: 14px;
  font-weight: 400;
  color: var(--brand-text, #1a202c);
}

#tab-ambassador .amb-ledger-row dd {
  margin: 0;
  font-size: 14px;
  font-weight: 700;
  color: var(--brand-text, #1a202c);
  font-variant-numeric: tabular-nums;
  text-align: end;
}

#tab-ambassador .amb-ledger-sub {
  display: block;
  margin-top: 2px;
  font-size: 13px;
  color: #5b6474;
}

#tab-ambassador .amb-ledger-row dd.amb-release {
  grid-column: 1 / -1;
  margin-top: 8px;
  font-weight: 400;
  text-align: start;
}

#tab-ambassador .amb-release-list {
  list-style: none;
  margin: 0;
  padding: 0;
}

#tab-ambassador .amb-release-list li {
  position: relative;
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding: 4px 0;
  padding-inline-start: 16px;
  font-size: 13px;
  color: #5b6474;
}

#tab-ambassador .amb-release-list li::before {
  content: "";
  position: absolute;
  inset-inline-start: 2px;
  top: 50%;
  width: 6px;
  height: 6px;
  margin-top: -3px;
  border-radius: 50%;
  background: color-mix(in srgb, var(--brand-primary, #7c3aed) 45%, #ffffff);
}

#tab-ambassador .amb-release-amount {
  font-variant-numeric: tabular-nums;
  color: var(--brand-text, #1a202c);
}

#tab-ambassador .amb-release-list li.amb-release-more::before {
  display: none;
}

#tab-ambassador .amb-wallet-footnote {
  margin: 12px 0 0;
  max-width: 65ch;
  font-size: 13px;
  line-height: 1.5;
  color: #5b6474;
}

#tab-ambassador .amb-history {
  margin-top: 24px;
}

#tab-ambassador .amb-history-list {
  list-style: none;
  margin: 0;
  padding: 0;
}

#tab-ambassador .amb-history-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 12px 0;
  border-bottom: 1px solid var(--brand-border, #e6e8f0);
}

#tab-ambassador .amb-history-row:last-child {
  border-bottom: 0;
}

#tab-ambassador .amb-history-main,
#tab-ambassador .amb-history-side {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

#tab-ambassador .amb-history-side {
  align-items: flex-end;
  flex-shrink: 0;
}

#tab-ambassador .amb-history-what {
  font-size: 14px;
  font-weight: 500;
  color: var(--brand-text, #1a202c);
}

#tab-ambassador .amb-history-meta {
  font-size: 13px;
  color: #5b6474;
  overflow-wrap: anywhere;
}

#tab-ambassador .amb-history-amount {
  font-size: 14px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

.amb-ltr-inline {
  unicode-bidi: isolate;
}

#tab-ambassador .amb-status {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 500;
  background: #f1f2f6;
  color: #374151;
}

#tab-ambassador .amb-status-applied,
#tab-ambassador .amb-status-paid {
  background: #dcfce7;
  color: #15603a;
}

#tab-ambassador .amb-status-requested {
  background: #fef3c7;
  color: #854d0e;
}

#tab-ambassador .amb-status-rejected {
  background: #fee9e8;
  color: #b42318;
}

/* Dialog */
.amb-modal.modal-card {
  width: min(480px, 92vw);
  padding: 28px 24px 24px;
}

.amb-modal .amb-modal-title {
  margin: 0;
  padding-inline-end: 44px;
  font-size: 20px;
  font-weight: 700;
  color: var(--brand-text, #1a202c);
}

.amb-modal .amb-modal-title:focus {
  outline: none;
}

.amb-modal .amb-modal-intro {
  margin: 6px 0 20px;
  font-size: 14px;
  line-height: 1.5;
  color: #5b6474;
}

.amb-modal .amb-field {
  margin: 0 0 16px;
  min-width: 0;
}

.amb-modal .amb-field > label,
.amb-modal .amb-methods legend {
  display: block;
  margin-bottom: 6px;
  padding: 0;
  font-size: 14px;
  font-weight: 500;
  color: var(--brand-text, #1a202c);
}

.amb-modal .amb-optional {
  font-weight: 400;
  color: #5b6474;
}

.amb-modal .input {
  width: 100%;
  box-sizing: border-box;
  min-height: 44px;
  padding: 0 14px;
  border: 1px solid var(--brand-border, #e6e8f0);
  border-radius: 12px;
  background: #ffffff;
  color: var(--brand-text, #1a202c);
  font: inherit;
  font-size: 14px;
}

.amb-modal .input:focus {
  outline: none;
  border-color: var(--brand-primary, #7c3aed);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--brand-primary, #7c3aed) 18%, transparent);
}

.amb-modal .input[aria-invalid="true"] {
  border-color: #b42318;
}

.amb-modal .amb-amount-wrap {
  position: relative;
  display: flex;
  align-items: center;
}

.amb-modal .amb-amount-currency {
  position: absolute;
  inset-inline-start: 14px;
  font-size: 14px;
  font-weight: 500;
  color: #5b6474;
  pointer-events: none;
}

/* The number is typed left to right in both languages, so the paddings follow the page side the
   $ sign and the Use all button sit on, not the input's own direction. */
.amb-modal .amb-amount-input {
  padding-left: 28px;
  padding-right: 84px;
  font-variant-numeric: tabular-nums;
  direction: ltr;
  text-align: left;
}

[dir="rtl"] .amb-modal .amb-amount-input {
  padding-left: 84px;
  padding-right: 28px;
  text-align: right;
}

.amb-modal .amb-max {
  position: absolute;
  inset-inline-end: 6px;
  min-height: 32px;
  padding: 0 10px;
  border: 0;
  border-radius: 8px;
  background: color-mix(in srgb, var(--brand-primary, #7c3aed) 10%, #ffffff);
  color: color-mix(in srgb, var(--brand-primary, #7c3aed) 80%, #1f2937);
  font: inherit;
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
}

.amb-modal .amb-max:hover {
  background: color-mix(in srgb, var(--brand-primary, #7c3aed) 16%, #ffffff);
}

.amb-modal .amb-max:focus-visible,
.amb-modal .amb-method:has(input:focus-visible) {
  outline: 2px solid var(--brand-primary, #7c3aed);
  outline-offset: 2px;
}

.amb-modal .amb-help {
  margin: 6px 0 0;
  font-size: 13px;
  color: #5b6474;
}

.amb-modal .amb-methods {
  border: 0;
  padding: 0;
}

.amb-modal .amb-method-options {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}

.amb-modal .amb-method {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: 0 8px;
  border: 1px solid var(--brand-border, #e6e8f0);
  border-radius: 12px;
  font-size: 14px;
  font-weight: 500;
  color: #374151;
  cursor: pointer;
  text-align: center;
}

.amb-modal .amb-method:hover {
  border-color: color-mix(in srgb, var(--brand-primary, #7c3aed) 40%, #e6e8f0);
}

.amb-modal .amb-method input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.amb-modal .amb-method:has(input:checked) {
  border-color: var(--brand-primary, #7c3aed);
  background: color-mix(in srgb, var(--brand-primary, #7c3aed) 7%, #ffffff);
  color: color-mix(in srgb, var(--brand-primary, #7c3aed) 75%, #1f2937);
}

.amb-modal .amb-field-row {
  display: grid;
  grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr);
  gap: 12px;
}

.amb-modal .amb-ltr {
  direction: ltr;
}

[dir="rtl"] .amb-modal .amb-ltr {
  text-align: end;
}

.amb-modal .amb-form-error {
  margin: 0 0 12px;
  padding: 10px 12px;
  border-radius: 10px;
  background: #fee9e8;
  color: #b42318;
  font-size: 13px;
  line-height: 1.5;
}

.amb-modal .amb-modal-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 20px;
}

.amb-modal .amb-modal-actions .button[aria-busy="true"] {
  opacity: 0.7;
  cursor: progress;
}

.amb-modal .amb-result-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  margin-bottom: 12px;
  border-radius: 50%;
  background: #dcfce7;
  color: #15803d;
}

@media (max-width: 640px) {
  #tab-ambassador .amb-wallet-available {
    flex-direction: column;
    align-items: stretch;
  }

  #tab-ambassador .amb-wallet-actions {
    flex-direction: column;
  }

  #tab-ambassador .amb-wallet-actions .button {
    width: 100%;
    min-height: 44px;
  }

  .amb-modal .amb-field-row {
    grid-template-columns: 1fr;
    gap: 0;
  }

  /* A short dialog: keep it centred and its close button inside the card (the global mobile rule
     pins close buttons to the viewport corner for tall modals). */
  #amb-modal.modal {
    align-items: center;
  }

  #amb-modal .modal-close {
    position: absolute;
    top: 14px;
    right: 14px;
    left: auto;
  }

  html[dir="rtl"] #amb-modal .modal-close,
  [dir="rtl"] #amb-modal .modal-close {
    left: 14px;
    right: auto;
  }

  /* 16px keeps iOS Safari from zooming into the field. */
  .amb-modal .input {
    font-size: 16px;
  }

  .amb-modal .amb-modal-actions .button {
    flex: 1 1 100%;
    min-height: 44px;
  }
}

.brand-logo-warning {
  margin: 16px 24px 0;
  padding: 16px 20px;
  border-radius: 12px;
  background: linear-gradient(135deg, rgba(251, 191, 36, 0.15), rgba(245, 158, 11, 0.1));
  border: 1px solid rgba(245, 158, 11, 0.4);
  color: #92400e;
}

.brand-logo-warning .warning-content {
  display: flex;
  align-items: center;
  gap: 16px;
}

.brand-logo-warning .warning-icon {
  width: 32px;
  height: 32px;
  flex-shrink: 0;
  color: #d97706;
}

.brand-logo-warning .warning-text {
  flex: 1;
}

.brand-logo-warning .warning-text strong {
  display: block;
  font-size: 15px;
  font-weight: 700;
  color: #78350f;
  margin-bottom: 4px;
}

.brand-logo-warning .warning-text p {
  margin: 0;
  font-size: 13px;
  color: #92400e;
  line-height: 1.4;
}

.brand-logo-warning .button {
  flex-shrink: 0;
  white-space: nowrap;
}

.brand-welcome-notice {
  margin: 12px 24px 0;
  padding: 16px 20px;
  border-radius: 12px;
  background: var(--brand-card);
  border: 1px solid var(--brand-border);
  box-shadow: inset 4px 0 0 var(--brand-primary);
}

.brand-welcome-notice .warning-content {
  display: flex;
  align-items: center;
  gap: 16px;
}

.brand-welcome-notice .warning-icon {
  width: 36px;
  height: 36px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  flex-shrink: 0;
  background: linear-gradient(135deg, var(--brand-primary), var(--brand-secondary));
  color: #fff;
}

.brand-welcome-notice .warning-text {
  flex: 1;
}

.brand-welcome-notice .warning-text strong {
  display: block;
  font-size: 15px;
  font-weight: 700;
  color: var(--brand-ink);
  margin-bottom: 4px;
}

.brand-welcome-notice .warning-text p {
  margin: 0;
  font-size: 13px;
  color: var(--brand-muted);
  line-height: 1.4;
}

.brand-welcome-notice .button {
  flex-shrink: 0;
  white-space: nowrap;
}

@media (max-width: 768px) {
  .brand-welcome-notice {
    margin: 12px 16px 0;
  }
}

.no-logo-theme .sidebar-footer .select,
.no-logo-theme .sidebar-footer .button.link {
  color: var(--brand-ink);
}

.no-logo-theme .sidebar-footer .select {
  background: #ffffff;
  border: 1px solid var(--brand-border);
}

.default-theme .sidebar-footer .select,
.default-theme .sidebar-footer .button.link {
  color: var(--brand-ink);
}

.default-theme .sidebar-footer .select {
  background: #ffffff;
  border: 1px solid var(--brand-border);
}

@media (max-width: 720px) {
  .plan-panel-header {
    flex-direction: column;
    align-items: flex-start;
  }
}

.pricing-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 18px;
  margin-top: 18px;
}

.pricing-page {
  --brand-primary: #7c3aed;
  --brand-secondary: #ec4899;
  --brand-on-primary: #ffffff;
  --brand-ink: #1f2430;
  --brand-border: #e4e7f3;
  --brand-card: #ffffff;
  --pricing-compare-thead-top: 57px;
}

.pricing-page .button.secondary.selected {
  background: var(--brand-primary);
  border-color: var(--brand-primary);
  color: var(--brand-on-primary);
  box-shadow: 0 12px 26px rgba(109, 40, 217, 0.22);
}

.pricing-page .button.secondary.selected:hover {
  background: #5b21b6;
  border-color: #5b21b6;
}

.pricing-page .pricing-card {
  border-color: #e6e9f4;
  background: linear-gradient(180deg, var(--plan-accent, #7c3aed) 0 6px, #ffffff 6px, #fbfaff 100%);
  box-shadow: 0 18px 40px rgba(22, 24, 35, 0.08);
  overflow: visible;
  position: relative;
  z-index: 0;
}

.pricing-page .pricing-card:hover {
  z-index: 2;
}

.pricing-page .pricing-card.highlight {
  border-color: rgba(124, 58, 237, 0.35);
  box-shadow: 0 22px 48px rgba(124, 58, 237, 0.18);
}

.pricing-page .pricing-card[data-tier="starter"] {
  --plan-accent: #7c3aed;
  --plan-accent-dark: #5b21b6;
}

.pricing-page .pricing-card[data-tier="growth"] {
  --plan-accent: #0ea5e9;
  --plan-accent-dark: #0284c7;
}

.pricing-page .pricing-card[data-tier="pro"] {
  --plan-accent: #f59e0b;
  --plan-accent-dark: #d97706;
}

.pricing-page .pricing-card[data-tier="agency"] {
  --plan-accent: #10b981;
  --plan-accent-dark: #059669;
}

.pricing-page .pricing-card .pricing-cta {
  background: var(--plan-accent);
  color: #ffffff;
  border: none;
  box-shadow: 0 14px 28px rgba(15, 23, 42, 0.18);
}

.pricing-page .pricing-card .pricing-cta:hover {
  background: var(--plan-accent-dark);
  color: #ffffff;
}

.pricing-page .pricing-card .section-title {
  font-size: 22px;
}

.pricing-page .pricing-card .muted {
  font-size: 14px;
}

.pricing-page .pricing-card:hover {
  border-color: rgba(124, 58, 237, 0.25);
  box-shadow: 0 22px 48px rgba(15, 23, 42, 0.12);
}

.pricing-card {
  border: 1px solid var(--brand-border);
  border-radius: 22px;
  padding: 20px;
  background: #fff;
  display: flex;
  flex-direction: column;
  gap: 12px;
  min-height: 460px;
  position: relative;
  transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
  box-shadow: var(--shadow-card);
}

.plan-badge {
  position: absolute;
  top: 14px;
  right: 14px;
  background: var(--plan-accent, var(--brand-primary));
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  padding: 4px 10px;
  border-radius: 999px;
  letter-spacing: 0.2px;
}

[dir="rtl"] .plan-badge {
  right: auto;
  left: 14px;
}

.pricing-card:hover {
  transform: translateY(-4px);
  border-color: rgba(147, 51, 234, 0.5);
  box-shadow: 0 18px 40px rgba(147, 51, 234, 0.18);
}

.pricing-card.highlight {
  border-color: var(--brand-primary);
  box-shadow: 0 12px 28px rgba(147, 51, 234, 0.15);
}

.pricing-price {
  display: flex;
  align-items: baseline;
  gap: 6px;
  font-size: 20px;
  font-weight: 700;
  color: var(--brand-ink);
}

.price-value {
  font-size: 52px;
  font-weight: 700;
  letter-spacing: -1px;
}

.price-cycle {
  font-size: 18px;
  color: var(--brand-muted);
  font-weight: 500;
}

.pricing-list {
  list-style: none;
  margin: 0;
  padding: 0;
  color: var(--brand-muted);
  font-size: 15px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  position: relative;
  z-index: 5;
}

.pricing-list li {
  display: flex;
  align-items: center;
  gap: 8px;
  white-space: normal;
}

.pricing-tooltip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  border-radius: 999px;
  margin-left: 6px;
  border: 1px solid #c4b5fd;
  background: #f5f3ff;
  color: #7c3aed;
  font-family: 'Tajawal', 'Cairo', system-ui, -apple-system, 'Segoe UI', sans-serif;
  font-size: 12px;
  font-weight: 700;
  line-height: 1;
  cursor: pointer;
  flex: 0 0 auto;
  position: relative;
  z-index: 30;
}

.pricing-tooltip:hover {
  background: #f5f3ff;
  color: #7c3aed;
}

[dir="rtl"] .pricing-tooltip {
  margin-left: 0;
  margin-right: 6px;
}

.pricing-tooltip::after {
  content: attr(data-tooltip);
  position: absolute;
  left: 50%;
  bottom: calc(100% + 8px);
  transform: translate(-50%, 8px);
  background: #111827;
  color: #ffffff;
  font-size: 11px;
  padding: 6px 8px;
  border-radius: 8px;
  max-width: 320px;
  min-width: 200px;
  white-space: normal;
  text-align: center;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.1s ease, transform 0.1s ease;
  z-index: 40;
  box-shadow: 0 8px 20px rgba(17, 24, 39, 0.2);
}

.pricing-tooltip::before {
  content: '';
  position: absolute;
  left: 50%;
  bottom: calc(100% - 4px);
  transform: translateX(-50%);
  border: 6px solid transparent;
  border-top-color: #111827;
  opacity: 0;
  transition: opacity 0.1s ease;
  z-index: 39;
}

.pricing-page .pricing-card .pricing-cta {
  position: relative;
  z-index: 0;
}

.pricing-tooltip:hover::after,
.pricing-tooltip:focus::after,
.pricing-tooltip:hover::before,
.pricing-tooltip:focus::before {
  opacity: 1;
  transform: translate(-50%, 0);
}

/* Super mode sits inside a full-row click target, so its help bubble must ignore the generic pricing tooltip hover. */
.super-mode-help.pricing-tooltip::after,
.super-mode-help.pricing-tooltip::before,
.super-mode-help.pricing-tooltip:hover::after,
.super-mode-help.pricing-tooltip:focus::after,
.super-mode-help.pricing-tooltip:hover::before,
.super-mode-help.pricing-tooltip:focus::before {
  opacity: 0 !important;
  transform: translate(-50%, 8px) !important;
}

.super-mode-help.pricing-tooltip.is-tooltip-active::after,
.super-mode-help.pricing-tooltip.is-tooltip-active::before {
  opacity: 1 !important;
  transform: translate(-50%, 0) !important;
}

/* Carousel settings: same pinned-tooltip behaviour as Super mode (hover + tap via is-tooltip-active) */
.carousel-option-help.pricing-tooltip::after,
.carousel-option-help.pricing-tooltip::before,
.carousel-option-help.pricing-tooltip:hover::after,
.carousel-option-help.pricing-tooltip:focus::after,
.carousel-option-help.pricing-tooltip:hover::before,
.carousel-option-help.pricing-tooltip:focus::before {
  opacity: 0 !important;
  transform: translate(-50%, 8px) !important;
}

.carousel-option-help.pricing-tooltip.is-tooltip-active::after,
.carousel-option-help.pricing-tooltip.is-tooltip-active::before {
  opacity: 1 !important;
  transform: translate(-50%, 0) !important;
}

.carousel-option-help::after {
  min-width: 260px;
  max-width: min(320px, calc(100vw - 48px));
  font-family: 'Tajawal', 'Cairo', system-ui, -apple-system, 'Segoe UI', sans-serif;
  font-size: 12px;
  font-weight: 500;
  line-height: 1.55;
  text-align: start;
}

.carousel-option-help::before {
  font-family: 'Tajawal', 'Cairo', system-ui, -apple-system, 'Segoe UI', sans-serif;
}

[dir="rtl"] .carousel-option-help::after,
.rtl .carousel-option-help::after {
  direction: rtl;
  text-align: right;
}

/* ===== Tips / carousel section: typography & hierarchy ===== */

/* Keep carousel content mode clear of Brand Knowledge prefs above it */
#tips-section {
  margin-top: 18px;
  padding-top: 4px;
}

/* Section title inside the form is a sub-heading, not a page title */
#tips-section .section-title {
  font-size: 15px;
  font-weight: 700;
  letter-spacing: -0.01em;
  margin: 0 0 10px;
  color: var(--brand-ink, #111827);
  text-transform: none;
}

/* Space between the mode-selector hint and the checkboxes below it */
#tips-section > .field > .hint {
  margin-bottom: 10px;
}

/* The three setting-option checkboxes: secondary weight so they read as options, not labels */
#tips-section .field > .checkbox-line {
  font-size: 13px;
  font-weight: 500;
  margin-top: 0;
}

#tips-section .field > .checkbox-line input[type="checkbox"] {
  flex: 0 0 16px;
  width: 16px;
  height: 16px;
  margin: 0;
  transform: none;
  transition: none;
}

/* Visual grouping: treat the 3 option checkboxes as a tighter cluster */
#tips-section .field:has(> .checkbox-line) {
  margin-bottom: 2px;
}

/* Hairline separator before the AI / preview section */
#tips-section #carousel-ai-section,
#tips-section #carousel-preview-section {
  border-top: 1px solid var(--brand-border, #e6e8f0);
  padding-top: 14px;
}

/* AI section spacing from checkboxes */
#tips-section #carousel-ai-section {
  margin-top: 12px;
}

.pricing-list li::before {
  content: '✓';
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--plan-accent, #7c3aed);
  color: #ffffff;
  font-size: 12px;
  font-weight: 700;
}

.pricing-note {
  font-size: 13px;
  color: var(--brand-muted);
}

.pricing-cta {
  margin-top: auto;
}

.pricing-custom {
  margin-top: 18px;
  padding: 18px 20px;
  border-radius: 18px;
  border: 1px solid rgba(124, 58, 237, 0.2);
  background: linear-gradient(180deg, rgba(124, 58, 237, 0.08) 0%, rgba(124, 58, 237, 0.02) 100%);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

.pricing-custom .section-title {
  font-size: 18px;
}

.pricing-custom .muted {
  font-size: 13px;
  max-width: 520px;
}

.pricing-custom-cta {
  white-space: nowrap;
}

@media (max-width: 900px) {
  .pricing-custom {
    flex-direction: column;
    align-items: flex-start;
  }
}

.pricing-trust .trust-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 16px;
}

.trust-item {
  display: flex;
  gap: 12px;
  align-items: center;
  padding: 18px 20px;
  border: 1px solid var(--brand-border);
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.7);
}

.pricing-trust-simple .trust-grid {
  padding: 0;
}

.pricing-trust-simple .trust-item {
  padding: 0;
  border: none;
  border-radius: 0;
  background: transparent;
}

.trust-icon {
  width: 28px;
  height: 28px;
  color: var(--brand-primary);
  display: flex;
  align-items: center;
  justify-content: center;
}

.trust-icon svg {
  width: 24px;
  height: 24px;
  stroke: currentColor;
  fill: none;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.trust-title {
  font-weight: 700;
  font-size: 16px;
}

.pricing-trust-top {
  margin-bottom: 20px;
}

.pricing-page .pricing-page-section-header {
  margin-top: 12px;
  margin-bottom: 0;
}

.pricing-page .pricing-trust-top {
  margin: 2px 0 8px;
}

.pricing-trust-icons .trust-icons-row {
  display: flex;
  justify-content: center;
  gap: 16px;
  padding: 12px 0;
}

.pricing-trust-icons .trust-icon-pill {
  min-width: 120px;
  padding: 6px 8px;
  border-radius: 12px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  background: transparent;
  border: none;
  box-shadow: none;
}

.pricing-trust-icons .trust-icon {
  font-size: 20px;
}

.pricing-trust-icons .trust-icon-text {
  font-size: 12px;
  font-weight: 700;
  color: var(--brand-ink);
  text-align: left;
}

/* Pricing page conversion refresh */
.pricing-page .pricing-grid {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 18px;
  align-items: stretch;
  direction: ltr;
  margin-top: 14px;
}
[dir="rtl"] .pricing-page .pricing-grid {
  direction: rtl;
}

.pricing-page .pricing-card {
  border: 1px solid #e7e5f4;
  background: #ffffff;
  box-shadow: 0 10px 24px rgba(15, 23, 42, 0.07);
  min-height: 100%;
  gap: 10px;
  padding: 24px 22px 18px;
  font-family: "Cairo", "Tajawal", system-ui, -apple-system, "Segoe UI", sans-serif;
}

.pricing-page .pricing-card:hover {
  border-color: #d8b4fe;
  box-shadow: 0 12px 26px rgba(147, 51, 234, 0.11);
}

.pricing-page .pricing-card.highlight {
  border-color: #c4b5fd;
  background: #faf5ff;
  box-shadow: 0 16px 36px rgba(124, 58, 237, 0.18);
}

.pricing-page .pricing-card .section-title {
  font-size: 24px;
  margin-bottom: 2px;
}

.pricing-page .pricing-card .muted {
  font-size: 14px;
}

.pricing-page .pricing-price {
  align-items: baseline;
  gap: 4px;
}

.pricing-page .price-value {
  font-size: 47px;
  line-height: 1;
  color: #7c3aed;
  font-variant-numeric: tabular-nums;
  font-weight: 700;
}

.pricing-page .price-cycle {
  font-size: 15px;
  color: #626976;
  font-weight: 500;
}

.pricing-page .pricing-note {
  font-size: 13px;
  color: #6b7280;
  line-height: 1.45;
  font-weight: 500;
  white-space: pre-line;
}

.pricing-billing-toggle-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  margin: 18px 0 8px;
}

.pricing-billing-toggle {
  display: inline-flex;
  padding: 4px;
  border-radius: 14px;
  background: rgba(124, 58, 237, 0.08);
  border: 1px solid rgba(124, 58, 237, 0.22);
  gap: 4px;
}

.pricing-billing-toggle button {
  border: none;
  background: transparent;
  padding: 10px 20px;
  border-radius: 11px;
  font-weight: 700;
  font-size: 14px;
  color: #5b6170;
  cursor: pointer;
  font-family: inherit;
}

.pricing-billing-toggle button.is-active {
  background: #fff;
  color: #7c3aed;
  box-shadow: 0 4px 14px rgba(124, 58, 237, 0.18);
}

.pricing-billing-toggle-year {
  display: inline-flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  flex-wrap: nowrap;
  gap: 8px;
  line-height: 1.15;
}

.pricing-billing-toggle-year-label {
  display: inline;
  white-space: nowrap;
}

.pricing-billing-pill-tag {
  display: inline-block;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.03em;
  line-height: 1.2;
  color: #fff;
  background: linear-gradient(135deg, #16a34a 0%, #15803d 100%);
  padding: 3px 8px;
  border-radius: 6px;
  white-space: nowrap;
  box-shadow: 0 1px 4px rgba(21, 128, 61, 0.35);
  text-transform: uppercase;
}

.pricing-billing-toggle button.is-active .pricing-billing-pill-tag {
  background: linear-gradient(135deg, #16a34a 0%, #15803d 100%);
  box-shadow: 0 2px 6px rgba(21, 128, 61, 0.45);
}
.pricing-billing-hint {
  font-size: 13px;
  text-align: center;
  max-width: 540px;
  margin: 0;
}

.pricing-compare-wrap {
  margin: 22px 0 8px;
  text-align: center;
}

.pricing-compare-toggle {
  font-size: 14px;
  font-weight: 700;
}

.pricing-compare-panel {
  margin-top: 20px;
  text-align: start;
}

.pricing-compare-panel.hidden {
  display: none;
}

.pricing-compare-title {
  margin: 0 0 14px;
  font-size: 18px;
  font-weight: 700;
  text-align: center;
  color: #0f172a;
}

.pricing-compare-scroll {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  border: 1px solid var(--brand-border, #e2e8f0);
  border-radius: 14px;
  background: #fff;
  box-shadow: 0 8px 24px rgba(15, 23, 42, 0.05);
}

.pricing-compare-table {
  width: 100%;
  min-width: 680px;
  border-collapse: collapse;
  font-size: 13px;
}

.pricing-compare-table th,
.pricing-compare-table td {
  padding: 11px 14px;
  border-bottom: 1px solid var(--brand-border, #e2e8f0);
  vertical-align: middle;
}

.pricing-compare-table thead th {
  font-weight: 700;
  background: #f8fafc;
  text-align: center;
  color: #0f172a;
  white-space: nowrap;
}

.pricing-compare-table th.pricing-compare-feature-col,
.pricing-compare-table tbody th.pricing-compare-feature-col {
  text-align: start;
  font-weight: 700;
  color: #334155;
  position: sticky;
  left: 0;
  z-index: 2;
  background: #fff;
  min-width: 180px;
  max-width: 240px;
}

.pricing-compare-table thead th.pricing-compare-feature-col {
  background: #f8fafc;
  z-index: 3;
}

.pricing-compare-table tbody td {
  text-align: center;
  color: #334155;
  font-weight: 500;
  font-variant-numeric: tabular-nums;
}

.pricing-compare-table tbody tr:last-child th,
.pricing-compare-table tbody tr:last-child td {
  border-bottom: none;
}

.pricing-compare-col-highlight {
  background: rgba(124, 58, 237, 0.05);
}

.pricing-compare-table thead .pricing-compare-col-highlight {
  background: rgba(124, 58, 237, 0.1);
  color: #6d28d9;
}

.pricing-compare-yes {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  border-radius: 999px;
  background: rgba(22, 163, 74, 0.12);
  color: #16a34a;
  font-weight: 700;
  font-size: 14px;
  line-height: 1;
}

.pricing-compare-no {
  color: #cbd5e1;
  font-weight: 700;
  font-size: 16px;
}

[dir="rtl"] .pricing-compare-table th.pricing-compare-feature-col,
[dir="rtl"] .pricing-compare-table tbody th.pricing-compare-feature-col {
  left: auto;
  right: 0;
}

.pricing-price-yearly-detail {
  font-size: 12px;
  color: #64748b;
  line-height: 1.35;
  font-weight: 500;
  margin-top: 6px;
}

.pricing-price-compare {
  font-size: 12px;
  color: #94a3b8;
  text-decoration: line-through;
  font-weight: 500;
}

.pricing-page .pricing-yearly-was-above:not([hidden]) {
  text-decoration: line-through;
  color: #94a3b8;
  font-size: 17px;
  font-weight: 500;
  line-height: 1.25;
  margin: 0 0 4px;
  font-variant-numeric: tabular-nums;
}

.pricing-yearly-was-line {
  text-decoration: line-through;
  color: #94a3b8;
  font-size: 14px;
  font-weight: 500;
  font-variant-numeric: tabular-nums;
}

.pricing-yearly-charge-actual {
  font-size: 12px;
  color: #626976;
  font-weight: 500;
  line-height: 1.4;
  font-variant-numeric: tabular-nums;
  margin-top: 2px;
  max-width: 24em;
}

.pricing-modal-price-yearly-stack {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 6px;
}

#plan-modal #modal-plan-price .pricing-modal-price-yearly-stack .pricing-yearly-was-line {
  font-size: 13px;
}

#plan-modal #modal-plan-price .pricing-modal-yearly-main {
  font-size: 24px;
  font-weight: 700;
  line-height: 1.1;
  color: #7c3aed;
  font-variant-numeric: tabular-nums;
}

#plan-modal #modal-plan-price .pricing-modal-yearly-main span {
  font-size: 15px;
  font-weight: 500;
  color: #94a3b8;
}

#plan-modal #modal-plan-price .pricing-modal-price-yearly-stack .pricing-yearly-charge-actual {
  font-size: 11px;
  color: #94a3b8;
  font-weight: 500;
  line-height: 1.4;
  margin-top: 0;
  max-width: none;
}

.pricing-page .pricing-list {
  gap: 6px;
  margin-bottom: 8px;
  flex: 1;
}

.pricing-page .pricing-list li {
  border-bottom: none;
  padding: 6px 0;
  align-items: flex-start;
  color: #334155;
  gap: 8px;
  position: relative;
}

.pricing-feature-inline {
  display: inline;
}

.pricing-page .pricing-list li::before {
  width: auto;
  height: auto;
  border-radius: 0;
  background: transparent;
  color: #a78bfa;
  font-size: 13px;
  font-weight: 700;
}

.pricing-page .pricing-card .pricing-list li:nth-child(n+7) {
  display: none;
}

.pricing-page .pricing-card.features-expanded .pricing-list li:nth-child(n+7) {
  display: flex;
}

.pricing-page .pricing-features-toggle {
  border: 0;
  background: transparent;
  color: #7c3aed;
  font-size: 13px;
  font-weight: 700;
  font-family: inherit;
  text-align: start;
  padding: 4px 0 10px;
  cursor: pointer;
}

.pricing-page .pricing-features-toggle:hover {
  color: #5b21b6;
}

.pricing-page .pricing-card .pricing-cta {
  width: 100%;
  margin-top: auto;
  border-radius: 12px;
  justify-content: center;
  padding: 12px 18px;
  font-size: 15px;
  font-weight: 700;
  border: 1.5px solid #c4b5fd;
  background: #ffffff;
  color: #7c3aed;
  box-shadow: none;
}

.pricing-page.pricing-auth-pending .pricing-card .pricing-cta,
.pricing-page.pricing-auth-pending .pricing-card .pricing-cta-note {
  visibility: hidden;
}

.pricing-page .pricing-card .pricing-cta:hover {
  background: #f5f3ff;
  border-color: #7c3aed;
  color: #7c3aed;
}

.pricing-page .pricing-card.highlight .pricing-cta {
  background: #7c3aed;
  border-color: transparent;
  color: #ffffff;
  box-shadow: 0 8px 20px rgba(109, 40, 217, 0.2);
}

.pricing-page .pricing-card.highlight .pricing-cta:hover {
  color: #ffffff;
  transform: translateY(-1px);
  box-shadow: 0 12px 24px rgba(147, 51, 234, 0.3);
}

.pricing-page .pricing-cta-note {
  margin-top: 8px;
  text-align: center;
  color: #94a3b8;
  font-size: 12px;
}

.pricing-page .plan-badge {
  top: -11px;
  left: 50%;
  right: auto;
  transform: translateX(-50%);
  background: var(--brand-primary, #7c3aed);
  color: #ffffff;
  padding: 5px 16px;
  border-radius: 6px;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.pricing-page .pricing-social-proof {
  margin-top: 18px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  color: #6b7280;
  font-size: 14px;
  font-weight: 500;
}

.pricing-page .pricing-social-proof-avatars {
  display: flex;
  align-items: center;
}

.pricing-page .pricing-social-proof-avatars .avatar-badge {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  border: 2px solid #ffffff;
  background: linear-gradient(135deg, #ddd6fe 0%, #c4b5fd 100%);
  color: #4c1d95;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  font-weight: 700;
  margin-inline-end: -8px;
  overflow: hidden;
}

.pricing-page .pricing-social-proof-avatars .avatar-badge img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  background: #ffffff;
}

.pricing-page .pricing-social-proof-avatars .avatar-badge:last-child {
  margin-inline-end: 0;
}

.pricing-page .pricing-card {
  min-height: 0;
  display: flex;
  flex-direction: column;
  padding: 20px 18px 16px;
  gap: 8px;
}

.pricing-page .pricing-card-head {
  min-height: 48px;
}

.pricing-page .pricing-note {
  font-size: 12px;
  margin-top: -2px;
}

.pricing-page .pricing-card-tagline {
  margin-top: 4px;
  line-height: 1.45;
}

.pricing-page .pricing-card-usage {
  margin: 0;
  font-size: 12px;
  line-height: 1.45;
  color: #64748b;
}

.pricing-page .pricing-card-usage-short {
  color: #94a3b8;
  font-size: 11.5px;
}

.pricing-page .pricing-card-usage-highlight {
  padding: 10px 12px;
  border-radius: 10px;
  background: #f5f3ff;
  border: 1px solid #ddd6fe;
  color: #5b21b6;
  font-size: 12.5px;
  font-weight: 500;
  line-height: 1.5;
}

.pricing-page .pricing-card-usage-note {
  padding: 0;
  margin-top: 2px;
  border: none;
  background: transparent;
  color: #6d28d9;
  font-size: 11.5px;
  font-weight: 500;
  line-height: 1.45;
}

.pricing-page .pricing-header-compact {
  text-align: center;
  margin: 0 auto 10px;
  max-width: 680px;
}

.pricing-page .pricing-hero-title {
  margin: 0 0 8px;
  font-size: clamp(21px, 2.6vw, 27px);
  font-weight: 700;
  line-height: 1.35;
  color: #0f172a;
}

.pricing-page .pricing-hero-subtitle {
  margin: 0;
  color: #64748b;
  font-size: 14px;
  line-height: 1.5;
  font-weight: 500;
}

.pricing-page .pricing-card.recommended {
  border-width: 2px;
  border-color: #8b5cf6;
  background: #fcfbff;
  box-shadow: 0 16px 36px rgba(124, 58, 237, 0.16);
}

.pricing-page .pricing-card.recommended .price-value {
  color: #6d28d9;
}

.pricing-page .pricing-card.recommended .plan-badge {
  background: #6d28d9;
  font-size: 10.5px;
  padding: 5px 14px;
  letter-spacing: 0.03em;
  text-transform: none;
}

.pricing-page .pricing-card-footer {
  margin-top: auto;
  width: 100%;
  padding-top: 6px;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 8px;
}

.pricing-page .pricing-card .pricing-cta {
  width: 100%;
  margin-top: auto;
  min-height: 46px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.pricing-page .pricing-all-plans-strip {
  margin: 4px 0 12px;
  padding: 10px 12px;
  border: 1px solid #e8edf3;
  border-radius: 12px;
  background: #fafbfc;
  max-width: 920px;
  margin-inline: auto;
}

.pricing-page .pricing-all-plans-strip-title {
  margin: 0 0 8px;
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.02em;
  color: #64748b;
  text-align: center;
}

.pricing-page .pricing-all-plans-strip-items {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 6px;
}

.pricing-page .pricing-all-plans-pill {
  display: inline-flex;
  align-items: center;
  padding: 4px 10px;
  border-radius: 999px;
  border: 1px solid #e2e8f0;
  background: #fff;
  color: #475569;
  font-size: 11px;
  font-weight: 500;
  line-height: 1.3;
  white-space: nowrap;
}

.pricing-page a.pricing-view-all-features.pricing-features-toggle {
  display: inline-block;
  width: auto;
  text-decoration: none;
}

.pricing-page .pricing-list-compact {
  margin-bottom: 0;
}

.pricing-page .pricing-list-compact li {
  padding: 6px 0;
  font-size: 15px;
}

.pricing-page .pricing-card .pricing-list-compact li:nth-child(n+7) {
  display: flex;
}

.pricing-page .pricing-card .pricing-cta-primary,
.pricing-page .pricing-card.recommended .pricing-cta {
  background: #7c3aed;
  border-color: transparent;
  color: #ffffff;
  box-shadow: 0 10px 24px rgba(109, 40, 217, 0.28);
  padding: 13px 18px;
  font-size: 16px;
}

.pricing-page .pricing-card .pricing-cta-primary:hover,
.pricing-page .pricing-card.recommended .pricing-cta:hover {
  background: #6d28d9;
  color: #ffffff;
}

.pricing-page .pricing-post-grid {
  margin: 36px 0 6px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  text-align: center;
  max-width: 820px;
  margin-inline: auto;
}

.pricing-page .pricing-post-grid .pricing-social-proof {
  margin-top: 0;
}

.pricing-page .pricing-trust-primary {
  margin: 0;
  color: #334155;
  font-size: 14px;
  font-weight: 700;
  line-height: 1.5;
}

.pricing-page .pricing-trust-secondary {
  margin: 0;
  color: #626976;
  font-size: 12px;
  line-height: 1.45;
  font-weight: 500;
}

.pricing-page .pricing-compare-panel {
  margin: 40px auto 36px;
  max-width: 920px;
}

.pricing-page #pricing-comparison {
  scroll-margin-top: calc(var(--pricing-compare-thead-top) + 12px);
}

.pricing-page .pricing-compare-scroll-hint {
  display: none;
  margin: 0 0 10px;
  text-align: center;
  font-size: 12px;
  font-weight: 500;
  line-height: 1.45;
  color: #626976;
}

.pricing-page .pricing-compare-scroll.pricing-compare-shell,
.pricing-page .pricing-compare-shell {
  --pricing-compare-radius: 16px;
  border: 1px solid #e8edf3;
  border-radius: var(--pricing-compare-radius);
  background: #fff;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04), 0 10px 28px rgba(15, 23, 42, 0.05);
  overflow: hidden;
}

.pricing-page .pricing-compare-table-premium {
  width: 100%;
  min-width: 640px;
  border-collapse: separate;
  border-spacing: 0;
  font-size: 13px;
}

.pricing-page .pricing-compare-table-premium th,
.pricing-page .pricing-compare-table-premium td {
  padding: 8px 12px;
  border: none;
  border-bottom: 1px solid #f1f5f9;
  vertical-align: middle;
}

.pricing-page .pricing-compare-table-premium thead th {
  background: #fff;
  border-bottom: 2px solid #e8edf3;
  font-size: 12px;
  font-weight: 700;
  color: #0f172a;
  text-align: center;
  white-space: nowrap;
  padding: 11px 10px;
}

.pricing-page .pricing-compare-plan-head {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  line-height: 1.25;
}

.pricing-page .pricing-compare-plan-name {
  font-size: 12px;
  font-weight: 700;
}

.pricing-page .pricing-compare-plan-price {
  font-size: 10.5px;
  font-weight: 700;
  color: #7c3aed;
  font-variant-numeric: tabular-nums;
}

.pricing-page .pricing-compare-table-premium thead .pricing-compare-col-recommended .pricing-compare-plan-price {
  color: #6d28d9;
}

.pricing-page .pricing-compare-table-premium thead th.pricing-compare-feature-col {
  text-align: start;
  color: #64748b;
  font-size: 11px;
  font-weight: 700;
  border-inline-end: 1px solid #e8edf3;
  box-shadow: none;
}

.pricing-page .pricing-compare-table-premium tbody td {
  text-align: center;
  font-variant-numeric: tabular-nums;
}

.pricing-page .pricing-compare-table-premium tbody th.pricing-compare-feature-col {
  text-align: start;
  font-weight: 500;
  color: #475569;
  font-size: 12.5px;
  line-height: 1.4;
  min-width: 190px;
  max-width: 260px;
  position: sticky;
  left: 0;
  z-index: 2;
  background: #fff;
  overflow: visible;
  border-inline-end: 1px solid #e8edf3;
  box-shadow: none;
}

.pricing-page .pricing-compare-table-premium tbody tr.is-striped th.pricing-compare-feature-col,
.pricing-page .pricing-compare-table-premium tbody tr.is-striped td {
  background-color: #fafbfc;
}

.pricing-page .pricing-compare-table-premium tbody tr.is-striped .pricing-compare-col-highlight,
.pricing-page .pricing-compare-table-premium tbody tr.is-striped .pricing-compare-col-recommended {
  background-color: rgba(124, 58, 237, 0.055);
}

.pricing-page .pricing-compare-section-row th.pricing-compare-section-col {
  position: sticky;
  left: 0;
  z-index: 3;
  background: #e8edf3 !important;
  color: #0f172a !important;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0;
  text-transform: none;
  text-align: start;
  padding: 10px 14px 7px !important;
  border-bottom: 1px solid #dde3ea !important;
  min-width: 190px;
  max-width: 260px;
  border-inline-end: 1px solid #dde3ea;
  box-shadow: none;
}

.pricing-page .pricing-compare-section-row td.pricing-compare-section-fill {
  background: #e8edf3 !important;
  border-bottom: 1px solid #dde3ea !important;
  padding: 0 !important;
}

.pricing-page .pricing-compare-section-row.is-first-section th.pricing-compare-section-col {
  padding-top: 10px !important;
}

[dir="rtl"] .pricing-page .pricing-compare-section-row th.pricing-compare-section-col {
  left: auto;
  right: 0;
  text-align: right;
}

.pricing-page .pricing-compare-section-row + .pricing-compare-row th,
.pricing-page .pricing-compare-section-row + .pricing-compare-row td {
  padding-top: 8px;
}

.pricing-page .pricing-compare-row.is-key-row .pricing-compare-feature-col,
.pricing-page .pricing-compare-row.is-key-row .pricing-compare-label-text {
  color: #0f172a;
  font-weight: 700;
}

.pricing-page .pricing-compare-row.is-uniform-bool .pricing-compare-feature-col {
  color: #475569;
  font-weight: 500;
}

.pricing-page .pricing-compare-col-highlight,
.pricing-page .pricing-compare-col-recommended {
  background: rgba(124, 58, 237, 0.06) !important;
}

.pricing-page .pricing-compare-table-premium thead .pricing-compare-col-highlight,
.pricing-page .pricing-compare-table-premium thead .pricing-compare-col-recommended {
  background: rgba(124, 58, 237, 0.1) !important;
  color: #5b21b6;
  box-shadow: inset 1px 0 0 rgba(124, 58, 237, 0.14), inset -1px 0 0 rgba(124, 58, 237, 0.14);
}

.pricing-page .pricing-compare-table-premium tbody .pricing-compare-col-recommended {
  box-shadow: inset 1px 0 0 rgba(124, 58, 237, 0.1), inset -1px 0 0 rgba(124, 58, 237, 0.1);
}

.pricing-page .pricing-compare-value {
  font-weight: 700;
  color: #334155;
  font-size: 13px;
}

.pricing-page .pricing-compare-row.is-key-row .pricing-compare-value {
  color: #0f172a;
  font-weight: 700;
  font-size: 13.5px;
}

.pricing-page .pricing-compare-row.is-diff-row .pricing-compare-value {
  color: #1e293b;
  font-weight: 700;
}

.pricing-page .pricing-compare-label {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  line-height: 1.35;
  max-width: 100%;
}

.pricing-page .pricing-compare-label-text {
  min-width: 0;
}

.pricing-page .pricing-compare-tip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 14px;
  height: 14px;
  padding: 0;
  border: 1px solid #e2e8f0;
  border-radius: 999px;
  background: #f8fafc;
  color: #94a3b8;
  font-family: inherit;
  font-size: 9px;
  font-weight: 700;
  line-height: 1;
  cursor: help;
  flex-shrink: 0;
  position: relative;
}

.pricing-page .pricing-tooltip::after,
.pricing-page .pricing-tooltip::before,
.pricing-page .pricing-compare-tip::after {
  display: none !important;
}

.pricing-tooltip-popup {
  position: fixed;
  z-index: 100050;
  max-width: min(280px, calc(100vw - 24px));
  padding: 8px 11px;
  background: #1e293b;
  color: #fff;
  font-size: 11.5px;
  font-weight: 500;
  line-height: 1.5;
  border-radius: 8px;
  box-shadow: 0 8px 22px rgba(15, 23, 42, 0.22);
  text-align: start;
  pointer-events: none;
}

.pricing-tooltip-popup[hidden] {
  display: none !important;
}

[dir="rtl"] .pricing-tooltip-popup {
  font-family: 'Tajawal', 'Cairo', system-ui, -apple-system, 'Segoe UI', sans-serif;
}

.pricing-page .pricing-compare-yes {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  border-radius: 5px;
  background: rgba(124, 58, 237, 0.08);
  color: #7c3aed;
}

.pricing-page .pricing-compare-yes svg {
  display: block;
  width: 11px;
  height: 11px;
}

.pricing-page .pricing-compare-row.is-diff-row .pricing-compare-yes {
  background: rgba(124, 58, 237, 0.11);
  color: #6d28d9;
}

.pricing-page .pricing-compare-no {
  color: #e2e8f0;
  font-size: 15px;
  font-weight: 400;
  line-height: 1;
}

.pricing-page .pricing-compare-row.is-diff-row .pricing-compare-no {
  color: #cbd5e1;
}

[dir="rtl"] .pricing-page .pricing-compare-table-premium tbody th.pricing-compare-feature-col,
[dir="rtl"] .pricing-page .pricing-compare-table-premium thead th.pricing-compare-feature-col {
  left: auto;
  right: 0;
  text-align: right;
}

.pricing-page .pricing-compare-head-pin {
  position: fixed;
  z-index: 8;
  display: none;
  box-sizing: border-box;
  pointer-events: none;
  background: #fff;
  border-bottom: 2px solid #e8edf3;
  box-shadow: 0 2px 8px rgba(15, 23, 42, 0.08);
}

.pricing-page .pricing-compare-head-pin.is-active {
  display: block;
}

.pricing-page .pricing-compare-head-pin-scroll {
  overflow: hidden;
}

.pricing-page .pricing-compare-head-pin-scroll .pricing-compare-table-premium {
  margin: 0;
}

.pricing-page .pricing-compare-table-premium tbody tr:last-child th,
.pricing-page .pricing-compare-table-premium tbody tr:last-child td {
  border-bottom: none;
}

.pricing-page .pricing-compare-table-premium thead tr > :first-child {
  border-start-start-radius: calc(var(--pricing-compare-radius, 16px) - 1px);
}

.pricing-page .pricing-compare-table-premium thead tr > :last-child {
  border-start-end-radius: calc(var(--pricing-compare-radius, 16px) - 1px);
}

.pricing-page .pricing-compare-table-premium tbody tr:last-child > :first-child {
  border-end-start-radius: calc(var(--pricing-compare-radius, 16px) - 1px);
}

.pricing-page .pricing-compare-table-premium tbody tr:last-child > :last-child {
  border-end-end-radius: calc(var(--pricing-compare-radius, 16px) - 1px);
}

.pricing-page .pricing-compare-table-premium thead .pricing-compare-col-highlight,
.pricing-page .pricing-compare-table-premium thead .pricing-compare-col-recommended,
.pricing-page .pricing-compare-table-premium tbody tr:last-child .pricing-compare-col-highlight,
.pricing-page .pricing-compare-table-premium tbody tr:last-child .pricing-compare-col-recommended {
  background-clip: padding-box;
}

.pricing-page .pricing-faq {
  margin: 32px auto 14px;
  max-width: 920px;
  width: 100%;
}

.pricing-page .pricing-faq-title {
  margin: 0 0 10px;
  text-align: center;
  font-size: 18px;
  font-weight: 700;
  color: #0f172a;
}

.pricing-page .pricing-faq-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.pricing-page .pricing-faq-item {
  border: 1px solid #e8edf3;
  border-radius: 13px;
  background: #fff;
  overflow: hidden;
  transition: border-color 0.18s ease, box-shadow 0.18s ease;
}

.pricing-page .pricing-faq-item[open] {
  border-color: #ddd6fe;
  box-shadow: 0 2px 10px rgba(124, 58, 237, 0.05);
}

.pricing-page .pricing-faq-item summary {
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 12px;
  font-weight: 700;
  color: #1e293b;
  min-height: 50px;
  padding: 12px 16px;
  box-sizing: border-box;
  list-style: none;
  font-size: 15px;
  line-height: 1.45;
}

.pricing-page .pricing-faq-item summary::-webkit-details-marker {
  display: none;
}

.pricing-page .pricing-faq-chevron {
  width: 7px;
  height: 7px;
  border-right: 2px solid #94a3b8;
  border-bottom: 2px solid #94a3b8;
  transform: rotate(45deg);
  flex-shrink: 0;
  transition: transform 0.18s ease, border-color 0.18s ease;
}

.pricing-page .pricing-faq-item[open] .pricing-faq-chevron {
  transform: rotate(-135deg);
  border-color: #7c3aed;
}

.pricing-page .pricing-faq-question {
  flex: 1;
  min-width: 0;
}

[dir="rtl"] .pricing-page .pricing-faq-item summary {
  flex-direction: row-reverse;
}

[dir="rtl"] .pricing-page .pricing-faq-question {
  text-align: start;
}

.pricing-page .pricing-faq-item p {
  margin: 0;
  padding: 0 16px 14px;
  color: #64748b;
  font-size: 14px;
  line-height: 1.55;
}

.pricing-page .pricing-faq-item p a {
  color: #7c3aed;
  font-weight: 500;
  text-decoration: underline;
  text-underline-offset: 2px;
}

.pricing-page .pricing-faq-item p a:hover {
  color: #6d28d9;
}

.pricing-page .pricing-compare-label-with-icon {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-width: 0;
}

.pricing-page .pricing-compare-autopilot-icon {
  width: 16px;
  height: 16px;
  border-radius: 50%;
  object-fit: contain;
  flex-shrink: 0;
}

.pricing-page .pricing-custom {
  margin: 36px auto 14px;
  padding: 20px;
  border-radius: 14px;
  border: 1px solid #e8edf3;
  background: #fff;
  box-shadow: none;
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: 16px 20px;
  max-width: 920px;
  width: 100%;
  box-sizing: border-box;
}

.pricing-page .pricing-custom-body {
  flex: 1;
  min-width: 0;
}

.pricing-page .pricing-custom .section-title {
  font-size: 18px;
  margin-bottom: 8px;
}

.pricing-page .pricing-custom-points {
  list-style: none;
  margin: 0;
  padding: 0;
}

.pricing-page .pricing-custom-points li {
  display: flex;
  align-items: center;
  gap: 8px;
  color: #64748b;
  font-size: 13px;
  margin-bottom: 6px;
}

.pricing-page .pricing-custom-points li:last-child {
  margin-bottom: 0;
}

.pricing-page .pricing-custom-points li::before {
  content: '•';
  color: #7c3aed;
  font-weight: 700;
}

.pricing-page .pricing-custom-cta {
  border-radius: 12px;
  border-color: #c4b5fd;
  color: #7c3aed;
  white-space: nowrap;
  flex-shrink: 0;
  align-self: center;
  min-width: 132px;
  text-align: center;
  justify-content: center;
}

.pricing-page .pricing-custom-cta:hover {
  border-color: #7c3aed;
}

.pricing-page .pricing-trust-top.is-compact {
  margin-bottom: 8px;
}

.pricing-page .pricing-trust-top.is-compact .trust-grid {
  gap: 8px;
}

.pricing-page .pricing-trust-top.is-compact .trust-item {
  padding: 8px 14px 8px 8px;
}

.pricing-page .pricing-trust-top.is-compact .trust-title {
  font-size: 13px;
}

.pricing-page .pricing-trust-top.is-compact .muted {
  font-size: 11.5px;
}

.pricing-page .pricing-hero {
  margin-top: 0;
  padding-top: 12px;
  padding-bottom: 6px;
}

.pricing-page .pricing-billing-toggle-wrap {
  margin-top: 10px;
  margin-bottom: 4px;
}

.pricing-page .pricing-trust-top .trust-grid {
  gap: 10px;
}

.pricing-page .pricing-trust-top .trust-item {
  padding: 10px 18px 10px 10px;
  border-radius: 11px;
  border: 1.5px solid rgba(124, 58, 237, 0.18);
  background: #fff;
  box-shadow: 0 2px 8px rgba(124, 58, 237, 0.07);
  gap: 10px;
  transition: box-shadow 0.15s, border-color 0.15s;
}

.pricing-page .pricing-trust-top .trust-item:hover {
  border-color: rgba(124, 58, 237, 0.38);
  box-shadow: 0 4px 14px rgba(124, 58, 237, 0.13);
}

.pricing-page .pricing-trust-top .trust-icon {
  width: 32px;
  height: 32px;
  min-width: 32px;
  border-radius: 50%;
  background: linear-gradient(135deg, rgba(124, 58, 237, 0.12) 0%, rgba(124, 58, 237, 0.06) 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #7c3aed;
}

.pricing-page .pricing-trust-top .trust-icon svg {
  width: 16px;
  height: 16px;
}

.pricing-page .pricing-trust-top .trust-title {
  font-size: 13.5px;
  font-weight: 700;
  color: #3b1f7d;
  letter-spacing: -0.01em;
}

.pricing-page .pricing-trust-top .muted {
  display: none;
}

@media (max-width: 1200px) {
  .pricing-page .pricing-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 768px) {
  .pricing-page main.container {
    overflow-x: clip;
    padding-bottom: 88px;
  }

  .pricing-page .pricing-grid {
    grid-template-columns: 1fr;
    gap: 14px;
  }

  .pricing-page .pricing-card {
    padding: 20px 18px 18px;
    gap: 8px;
  }

  .pricing-page .pricing-card.recommended .pricing-card-head,
  .pricing-page .pricing-card.highlight .pricing-card-head {
    padding-top: 22px;
  }

  .pricing-page .pricing-card .plan-badge {
    top: -11px;
    left: 50%;
    right: auto;
    transform: translateX(-50%);
    max-width: calc(100% - 24px);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  [dir="rtl"] .pricing-page .pricing-card .plan-badge {
    left: 50%;
    right: auto;
    transform: translateX(-50%);
  }

  .pricing-page .price-value {
    font-size: 44px;
  }

  .pricing-page .pricing-card.plan-launch {
    order: 0;
  }

  .pricing-page .pricing-card.plan-starter {
    order: 1;
  }

  .pricing-page .pricing-card.plan-spark {
    order: 2;
  }

  .pricing-page .pricing-card.plan-growth {
    order: 3;
  }

  .pricing-page .pricing-card.plan-pro {
    order: 4;
  }

  .pricing-page .pricing-card.recommended {
    transform: none;
  }

  .pricing-page .pricing-card .pricing-cta {
    width: 100%;
    margin-top: auto;
  }

  .pricing-page a.pricing-view-all-features.pricing-features-toggle {
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    padding: 6px 0 8px;
    -webkit-tap-highlight-color: transparent;
  }

  .pricing-page .pricing-social-proof {
    font-size: 13px;
    gap: 10px;
  }

  .pricing-page .pricing-custom {
    grid-template-columns: 1fr;
    padding: 16px;
  }

  .pricing-page .pricing-custom-cta {
    width: 100%;
    justify-self: stretch;
  }

  .pricing-page .pricing-compare-panel,
  .pricing-page .pricing-faq,
  .pricing-page .pricing-custom,
  .pricing-page .pricing-post-grid,
  .pricing-page .pricing-all-plans-strip {
    max-width: 100%;
    width: 100%;
    box-sizing: border-box;
  }

  .pricing-page .pricing-compare-panel {
    overflow: visible;
    padding-inline: 0;
  }

  .pricing-page .pricing-compare-scroll-hint {
    display: block;
    padding: 0 4px;
  }

  .pricing-page .pricing-all-plans-pill {
    font-size: 10.5px;
    padding: 3px 8px;
  }

  .pricing-page .pricing-compare-scroll.pricing-compare-shell,
  .pricing-page .pricing-compare-shell {
    --pricing-compare-radius: 14px;
    width: 100%;
    max-width: 100%;
    border-radius: var(--pricing-compare-radius);
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
  }

  .pricing-page .pricing-compare-head-pin {
    z-index: 25;
  }

  .pricing-page .pricing-compare-table-premium {
    min-width: 0;
    font-size: 12px;
  }

  .pricing-page .pricing-compare-table-premium th,
  .pricing-page .pricing-compare-table-premium td {
    padding: 8px 6px;
  }

  .pricing-page .pricing-compare-table-premium thead th {
    white-space: normal;
    padding: 9px 5px;
  }

  .pricing-page .pricing-compare-table-premium thead th.pricing-compare-feature-col,
  .pricing-page .pricing-compare-table-premium tbody th.pricing-compare-feature-col,
  .pricing-page .pricing-compare-section-row th.pricing-compare-section-col {
    width: 108px;
    min-width: 108px;
    max-width: 118px;
    padding: 8px 6px !important;
    white-space: normal;
    word-break: break-word;
    overflow-wrap: anywhere;
    line-height: 1.4;
    box-shadow: none;
  }

  .pricing-page .pricing-compare-table-premium tbody th.pricing-compare-feature-col,
  .pricing-page .pricing-compare-section-row th.pricing-compare-section-col {
    z-index: 3;
  }

  .pricing-page .pricing-compare-table-premium tbody th.pricing-compare-feature-col {
    font-size: 12px;
  }

  .pricing-page .pricing-compare-table-premium thead th:not(.pricing-compare-feature-col),
  .pricing-page .pricing-compare-table-premium tbody td {
    min-width: 72px;
    width: 72px;
  }

  .pricing-page .pricing-faq {
    overflow-x: clip;
    padding-inline: 0;
  }

  .pricing-page .pricing-faq-item {
    max-width: 100%;
  }

  .pricing-page .pricing-faq-item summary {
    align-items: center;
  }

  .pricing-page .pricing-faq-question {
    overflow-wrap: anywhere;
  }

  .pricing-page .pricing-faq-item p {
    overflow-wrap: anywhere;
  }
}

/* ============================================================
   Eid yearly promo strip (pricing)
   Clean rebuild: deterministic top row + action row
   ============================================================ */
.eid-adha-strip {
  position: relative;
  box-sizing: border-box;
  margin: 0 0 16px;
  padding: 12px 40px 12px 12px;
  border-radius: 18px;
  border: 1px solid rgba(124, 58, 237, 0.16);
  background: #ffffff;
  box-shadow: 0 1px 4px rgba(88, 28, 135, 0.06);
}

[dir="rtl"] .eid-adha-strip {
  padding: 12px 12px 12px 40px;
}

.eid-adha-strip-top {
  display: grid;
  direction: ltr;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
}

.eid-adha-strip-thumb-wrap {
  width: 44px;
  height: 44px;
  flex-shrink: 0;
  border-radius: 12px;
  overflow: hidden;
  border: 1px solid rgba(124, 58, 237, 0.12);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.16);
}

.eid-adha-strip-thumb {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 28%;
  display: block;
}

.eid-adha-strip-thumb[src=""],
.eid-adha-strip-thumb:not([src]) {
  display: none;
}

.eid-adha-strip-thumb-wrap.is-hidden {
  display: none;
}

.eid-adha-strip-body {
  min-width: 0;
  height: 44px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 3px;
}

[dir="ltr"] .eid-adha-strip-body {
  text-align: left;
}

[dir="rtl"] .eid-adha-strip-body {
  text-align: right;
}

.eid-adha-strip-title {
  margin: 0;
  padding: 0;
  font-size: 15px;
  font-weight: 500;
  color: #111827;
  line-height: 1.25;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.eid-adha-strip-desc {
  margin: 0 !important;
  margin-bottom: 0 !important;
  padding: 0;
  font-size: 13px;
  font-weight: 400;
  color: #6b7280;
  line-height: 1.25;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.eid-adha-strip-actions {
  display: flex;
  direction: ltr;
  align-items: center;
  justify-content: flex-end;
  margin-top: 10px;
  gap: 8px;
}

.eid-adha-strip-code-val {
  box-sizing: border-box;
  height: 32px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 13px;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  border: 1.5px dashed rgba(124, 58, 237, 0.32);
  background: rgba(124, 58, 237, 0.05);
  color: #5b21b6;
  border-radius: 8px;
  user-select: all;
}

.eid-adha-strip-copy-btn {
  box-sizing: border-box;
  appearance: none;
  margin: 0;
  cursor: pointer;
  height: 32px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 13px;
  font-family: inherit;
  font-size: 12.5px;
  font-weight: 500;
  line-height: 1;
  white-space: nowrap;
  border-radius: 8px;
  border: 1px solid #e5e7eb;
  background: #f9fafb;
  color: #374151;
  transition: background 0.15s, border-color 0.15s;
}

.eid-adha-strip-copy-btn:hover {
  background: #f3f4f6;
  border-color: #d1d5db;
}

.eid-adha-strip-copy-btn:focus-visible {
  outline: 2px solid rgba(124, 58, 237, 0.45);
  outline-offset: 2px;
}

.eid-adha-copied-msg {
  font-size: 12px;
  font-weight: 500;
  color: #7c3aed;
  white-space: nowrap;
}

@keyframes eid-copied-pop {
  from { opacity: 0; transform: translateY(2px); }
  to { opacity: 1; transform: none; }
}

.eid-adha-copied-msg:not([hidden]) {
  animation: eid-copied-pop 0.2s ease-out;
}

.eid-adha-strip-close {
  position: absolute;
  top: 9px;
  right: 11px;
  z-index: 1;
  width: 22px;
  height: 22px;
  padding: 0;
  margin: 0;
  border: none;
  background: transparent;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 15px;
  font-weight: 300;
  line-height: 1;
  color: #c4c9d4;
  cursor: pointer;
  border-radius: 4px;
  transition: color 0.15s, background 0.15s;
}

.eid-adha-strip-close:hover {
  color: #9ca3af;
  background: rgba(0, 0, 0, 0.04);
}

.eid-adha-strip-close:focus-visible {
  outline: 2px solid rgba(124, 58, 237, 0.45);
  outline-offset: 2px;
}

[dir="rtl"] .eid-adha-strip .eid-adha-strip-close {
  right: auto;
  left: 11px;
}

@media (max-width: 640px) {
  .eid-adha-strip {
    padding: 11px 34px 11px 10px;
  }

  [dir="rtl"] .eid-adha-strip {
    padding: 11px 10px 11px 34px;
  }

  .eid-adha-strip-top {
    gap: 10px;
  }

  .eid-adha-strip-thumb-wrap {
    width: 40px;
    height: 40px;
  }

  .eid-adha-strip-body {
    height: 40px;
    justify-content: center;
  }

  .eid-adha-strip-title {
    font-size: 14px;
  }

  .eid-adha-strip-desc {
    font-size: 12px;
  }

  .eid-adha-strip-actions {
    flex-wrap: nowrap;
    margin-top: 9px;
  }

  .eid-adha-strip-close {
    top: 8px;
    right: 8px;
  }

  [dir="rtl"] .eid-adha-strip .eid-adha-strip-close {
    left: 8px;
  }
}

/* ============================================================ */

.pricing-credits .credits-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 10px;
  margin-top: 12px;
}

.credits-item {
  padding: 10px 12px;
  border-radius: 12px;
  background: rgba(147, 51, 234, 0.08);
  font-size: 13px;
}

.modal {
  position: fixed;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 50;
  overflow: hidden;
  overscroll-behavior: contain;
  padding: 20px;
}

/* Above subscription trial paywall / admin notification modals (200000) so nav intro + bullet rows stay visible */
#nav-onboarding-modal.modal {
  z-index: 210000;
}

body.modal-open {
  overflow: hidden;
}

body.modal-open #adly-live-chat,
body.logo-gate-open #adly-live-chat,
body.create-takeover-open #adly-live-chat,
body.onboarding-review-modal-open #adly-live-chat,
body:has(.adly-chat-drawer.open) #adly-live-chat,
body:has(.modal.open) #adly-live-chat,
body:has(.modal.is-open) #adly-live-chat {
  display: none !important;
  visibility: hidden !important;
  pointer-events: none !important;
}

.modal.hidden {
  display: none;
}

.modal-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(15, 23, 42, 0.55);
}

.modal-card {
  position: relative;
  width: min(720px, 92vw);
  background: var(--brand-card);
  border-radius: 24px;
  padding: 24px;
  z-index: 1;
  box-shadow: 0 30px 70px rgba(15, 23, 42, 0.25);
  max-height: calc(100vh - 40px);
  overflow-y: auto;
  overscroll-behavior: contain;
}
#nav-onboarding-modal .nav-onboarding-modal-card {
  width: min(438px, calc(100vw - 28px));
  max-width: 438px;
  background: var(--brand-card);
  border: 1px solid color-mix(in srgb, var(--brand-primary) 18%, rgba(15, 23, 42, 0.08));
  border-radius: 20px;
  padding: 18px 20px 16px;
  box-shadow: 0 14px 34px rgba(15, 23, 42, 0.14), 0 1px 0 rgba(255, 255, 255, 0.28) inset;
}
#nav-onboarding-modal .nav-onboarding-modal-topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 8px;
}
#nav-onboarding-modal .nav-onboarding-modal-icon {
  width: 40px;
  height: 40px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: color-mix(in srgb, var(--brand-primary) 7%, transparent);
  border: 1px solid color-mix(in srgb, var(--brand-primary) 14%, transparent);
  color: var(--brand-primary);
}
#nav-onboarding-modal .nav-onboarding-modal-icon-svg {
  width: 16px;
  height: 16px;
  stroke: currentColor;
  fill: none;
  stroke-width: 2;
}
#nav-onboarding-modal .nav-onboarding-modal-title {
  text-align: center;
  margin: 0 0 8px;
  font-size: 1.46rem;
  line-height: 1.16;
  letter-spacing: -0.02em;
  color: var(--brand-ink);
}
#nav-onboarding-modal .nav-onboarding-modal-copy {
  color: var(--brand-ink);
  text-align: start;
  max-width: 100%;
  margin: 0 auto;
  font-size: 0.91rem;
  line-height: 1.62;
}
#nav-onboarding-modal .nav-onboarding-modal-copy .nav-onboarding-lead {
  margin: 0 0 12px;
  text-align: center;
}
#nav-onboarding-modal .nav-onboarding-modal-copy p {
  margin: 0;
  color: var(--brand-muted);
}
#nav-onboarding-modal .nav-onboarding-modal-copy ul {
  margin: 0;
  padding: 0;
  text-align: start;
  list-style: none;
}
#nav-onboarding-modal .nav-onboarding-modal-copy li {
  color: var(--brand-ink);
  text-align: start;
}
#nav-onboarding-modal .nav-onboarding-modal-copy li + li {
  margin-top: 7px;
}
#nav-onboarding-modal .nav-onboarding-feature-row {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 0;
}
#nav-onboarding-modal .nav-onboarding-feature-marker {
  flex: 0 0 auto;
  width: 18px;
  height: 18px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-top: 2px;
  background: color-mix(in srgb, var(--brand-primary) 8%, transparent);
  color: var(--brand-primary);
}
#nav-onboarding-modal .nav-onboarding-feature-icon {
  width: 10px;
  height: 10px;
  stroke: currentColor;
  fill: none;
  stroke-width: 2.4;
}
#nav-onboarding-modal .nav-onboarding-feature-content {
  display: block;
  font-size: 0.89rem;
  line-height: 1.5;
  color: var(--brand-ink);
}
#nav-onboarding-modal .nav-onboarding-modal-actions {
  margin-top: 14px;
  display: flex;
  justify-content: center;
}
#nav-onboarding-modal .nav-onboarding-modal-actions .button {
  width: 100%;
  max-width: 204px;
  min-height: 40px;
  border-radius: 10px;
  background: linear-gradient(180deg, color-mix(in srgb, var(--brand-primary) 94%, white) 0%, var(--brand-primary) 100%);
  border: 1px solid color-mix(in srgb, var(--brand-primary) 70%, black);
  color: #fff;
  box-shadow: 0 4px 10px color-mix(in srgb, var(--brand-primary) 14%, transparent);
  font-size: 0.93rem;
}
#nav-onboarding-modal .modal-close {
  position: static;
  width: 28px;
  height: 28px;
  border-radius: 8px;
  background: color-mix(in srgb, var(--brand-primary) 4%, rgba(15, 23, 42, 0.025));
  border: 1px solid color-mix(in srgb, var(--brand-primary) 8%, rgba(15, 23, 42, 0.05));
  color: var(--brand-muted);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  transition: background 0.18s ease, color 0.18s ease, border-color 0.18s ease;
}
#nav-onboarding-modal .modal-close:hover {
  background: color-mix(in srgb, var(--brand-primary) 7%, rgba(15, 23, 42, 0.03));
  border-color: color-mix(in srgb, var(--brand-primary) 13%, rgba(15, 23, 42, 0.06));
  color: var(--brand-ink);
}
[dir="rtl"] #nav-onboarding-modal .nav-onboarding-modal-copy,
.rtl #nav-onboarding-modal .nav-onboarding-modal-copy {
  text-align: right;
}
[dir="rtl"] #nav-onboarding-modal .nav-onboarding-modal-copy .nav-onboarding-lead,
.rtl #nav-onboarding-modal .nav-onboarding-modal-copy .nav-onboarding-lead {
  text-align: center;
}
[dir="rtl"] #nav-onboarding-modal .nav-onboarding-feature-row,
.rtl #nav-onboarding-modal .nav-onboarding-feature-row {
  direction: rtl;
}
[dir="rtl"] #nav-onboarding-modal .nav-onboarding-feature-content,
.rtl #nav-onboarding-modal .nav-onboarding-feature-content {
  direction: rtl;
  text-align: right;
}

.job-details-modal .modal-card {
  width: min(96vw, 720px);
  max-height: 92vh;
  padding: 0;
  overflow: hidden;
  border: 1px solid var(--brand-border);
  border-radius: 20px;
  background: var(--brand-card);
}

.job-details-modal {
  z-index: 60;
}

#image-modal {
  z-index: var(--z-lightbox);
}

#image-modal .modal-card {
  max-width: min(92vw, 960px);
  max-height: 92vh;
  overflow: auto;
  padding-top: 44px;
  position: relative;
  z-index: calc(var(--z-lightbox) + 1);
}

#video-preview-modal {
  z-index: calc(var(--z-lightbox) + 1);
}

#video-preview-modal .modal-card {
  width: min(92vw, 960px);
  max-height: 92vh;
  overflow: auto;
  padding: 44px 18px 18px;
  position: relative;
  background: #0f172a;
}

#video-preview-modal-player {
  width: 100%;
  max-height: calc(92vh - 80px);
  display: block;
  border-radius: 14px;
  background: #000;
}

#image-modal #modal-image {
  width: 100%;
  height: auto;
  display: block;
  border-radius: 8px;
}
#image-modal .image-modal-cta {
  margin-top: 12px;
  display: flex;
  justify-content: center;
}
#image-modal .image-modal-cta .button {
  min-width: 220px;
}

#image-modal .modal-close,
#video-preview-modal .modal-close,
#card-lightbox-preview .modal-close {
  position: absolute;
  top: 12px;
  right: 12px;
  z-index: 2;
}

#video-preview-modal .modal-close {
  color: #ffffff;
}

#image-modal .lightbox-nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background: rgba(15, 23, 42, 0.8);
  border: none;
  border-radius: 50%;
  width: 48px;
  height: 48px;
  font-size: 32px;
  color: #ffffff;
  cursor: pointer;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.2s;
}

#image-modal .lightbox-nav:hover:not(:disabled) {
  background: rgba(15, 23, 42, 0.95);
}

#image-modal .lightbox-nav:disabled {
  opacity: 0.3;
  cursor: not-allowed;
}

#image-modal .lightbox-nav.prev {
  left: 16px;
}

#image-modal .lightbox-nav.next {
  right: 16px;
}

.rtl #image-modal .modal-close,
.rtl #video-preview-modal .modal-close,
.rtl #card-lightbox-preview .modal-close {
  left: 12px;
  right: auto;
}

#card-lightbox-preview[dir="rtl"] .modal-close {
  left: 12px;
  right: auto;
}

.rtl #image-modal .lightbox-nav.prev {
  right: 16px;
  left: auto;
}

.rtl #image-modal .lightbox-nav.next {
  left: 16px;
  right: auto;
}

html[dir="rtl"] #image-modal .modal-close,
[dir="rtl"] #image-modal .modal-close,
html[lang="ar"] #image-modal .modal-close,
html[lang="he"] #image-modal .modal-close {
  left: 12px;
  right: auto;
}

html[dir="rtl"] #image-modal .lightbox-nav.prev,
[dir="rtl"] #image-modal .lightbox-nav.prev,
html[lang="ar"] #image-modal .lightbox-nav.prev,
html[lang="he"] #image-modal .lightbox-nav.prev {
  right: 16px;
  left: auto;
}

html[dir="rtl"] #image-modal .lightbox-nav.next,
[dir="rtl"] #image-modal .lightbox-nav.next,
html[lang="ar"] #image-modal .lightbox-nav.next,
html[lang="he"] #image-modal .lightbox-nav.next {
  left: 16px;
  right: auto;
}

#card-lightbox-preview .card-lightbox-modal-card {
  position: relative;
  max-width: min(92vw, 960px);
  max-height: 92vh;
  overflow: auto;
  padding-top: 44px;
}

#card-lightbox-preview .lightbox-nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background: rgba(15, 23, 42, 0.8);
  border: none;
  border-radius: 50%;
  width: 48px;
  height: 48px;
  font-size: 32px;
  color: #ffffff;
  cursor: pointer;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.2s;
}

#card-lightbox-preview .lightbox-nav svg {
  width: 28px;
  height: 28px;
  stroke: currentColor;
  stroke-width: 2.5;
  stroke-linecap: round;
  stroke-linejoin: round;
  fill: none;
  pointer-events: none;
}

#card-lightbox-preview .lightbox-nav:hover:not(:disabled) {
  background: rgba(15, 23, 42, 0.95);
}

#card-lightbox-preview .lightbox-nav:disabled {
  opacity: 0.3;
  cursor: not-allowed;
}

#card-lightbox-preview .lightbox-nav.prev {
  left: 16px;
}

#card-lightbox-preview .lightbox-nav.next {
  right: 16px;
}

.rtl #card-lightbox-preview .lightbox-nav.prev {
  left: 16px;
  right: auto;
}

.rtl #card-lightbox-preview .lightbox-nav.next {
  right: 16px;
  left: auto;
}

#card-lightbox-preview[dir="rtl"] .lightbox-nav.prev {
  left: 16px;
  right: auto;
}

#card-lightbox-preview[dir="rtl"] .lightbox-nav.next {
  right: 16px;
  left: auto;
}

#card-logo-banner-order-field[hidden] {
  display: none !important;
}

.job-details-modal .job-details-modal-body {
  max-height: 92vh;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}

/* Let vertical scroll pass through large previews (iOS blocks scroll on <img> by default). */
.job-details-modal .design-preview-box,
.job-details-modal .image-preview,
.job-details-modal .design-preview-box img,
.job-details-modal .video-preview {
  touch-action: pan-y;
  -webkit-user-drag: none;
  user-drag: none;
}

.job-details-modal .job-details-card {
  border: none;
  border-radius: 0;
  box-shadow: none;
  margin: 0;
  position: static;
  width: 100%;
}

.job-details-modal .job-header {
  padding-right: 44px;
}

.rtl .job-details-modal .job-header {
  padding-right: 0;
  padding-left: 44px;
}

.job-details-modal .modal-close {
  top: 8px;
  right: 8px;
  z-index: 2;
  background: #ffffff;
  border: 1px solid var(--brand-border);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  color: #0f172a;
}

.job-details-modal .modal-close.is-back {
  color: #0f172a;
  border-color: rgba(15, 23, 42, 0.22);
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.06);
}

.job-details-modal .modal-close .job-details-modal-nav-icon {
  width: 20px;
  height: 20px;
  display: block;
  color: inherit;
}

.rtl .job-details-modal .modal-close {
  left: 8px;
  right: auto;
}

/* Pricing: trial/payment modal close button should be on the left in RTL */
html[dir="rtl"] #plan-modal .modal-close,
[dir="rtl"] #plan-modal .modal-close,
.rtl #plan-modal .modal-close {
  left: 16px;
  right: auto;
}

.modal-close {
  position: absolute;
  top: 16px;
  right: 16px;
  border: none;
  background: rgba(15, 23, 42, 0.08);
  border-radius: 999px;
  width: 36px;
  height: 36px;
  font-size: 14px;
  cursor: pointer;
}

html[dir="rtl"] .modal-close,
[dir="rtl"] .modal-close,
.rtl .modal-close,
html[lang="ar"] .modal-close,
html[lang="he"] .modal-close {
  left: 16px;
  right: auto;
}

.modal-title {
  font-size: 22px;
  font-weight: 700;
}

.credits-modal-body {
  margin-top: 16px;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  max-width: 100%;
  overflow-x: hidden;
}

.credits-modal-actions {
  margin-top: 16px;
  display: flex;
  gap: 8px;
}

#credits-modal .modal-card {
  /* Allow credit-pill tooltips to render outside the card (bottom rows were clipped) */
  overflow: visible;
}

/* Credits modal: make credit pills compact (avoid tall "tiles") */
#credits-modal .credits-modal-body {
  justify-content: flex-start;
}

/* RTL: keep items aligned to the visual "start" (right) */
html[dir="rtl"] #credits-modal .credits-modal-body,
[dir="rtl"] #credits-modal .credits-modal-body,
.rtl #credits-modal .credits-modal-body {
  direction: rtl;
  justify-content: flex-start;
}

#credits-modal .credit-pill {
  height: 72px;
  padding: 10px 16px;
  border-radius: 14px;
  justify-content: center;
}

/* Credits modal: use inline info (no floating tooltips inside the modal) */
#credits-modal .credit-pill::before,
#credits-modal .credit-pill::after {
  display: none;
}

.credits-modal-info {
  margin-top: 10px;
  padding: 10px 12px;
  border-radius: 14px;
  border: 1px dashed color-mix(in srgb, var(--brand-primary, #7c3aed) 35%, transparent);
  background: color-mix(in srgb, var(--brand-primary, #7c3aed) 4%, #ffffff);
  color: var(--brand-ink);
  font-size: 13px;
  min-height: 0;
  display: none;
}

.credits-modal-info.visible {
  display: block;
}

/* Credits modal: in RTL move close button to the left so it doesn't overlap title */
html[dir="rtl"] #credits-modal .modal-close,
[dir="rtl"] #credits-modal .modal-close {
  left: 16px;
  right: auto;
}

.modal-subtitle {
  color: var(--brand-muted);
  margin-top: 4px;
}

#plan-modal .modal-card {
  width: min(560px, 92vw);
  border-radius: 16px;
  padding: 30px 28px 28px;
  background: #ffffff;
  border: 1px solid #e5e7eb;
  box-shadow: 0 12px 30px rgba(15, 23, 42, 0.12);
}

#plan-modal .modal-close {
  border-radius: 10px;
  background: #f8fafc;
  border: 1px solid #e5e7eb;
  color: #334155;
}

#plan-modal .modal-title {
  font-size: 24px;
  font-weight: 700;
  letter-spacing: -0.01em;
}

#plan-modal .modal-subtitle {
  margin-top: 8px;
  color: #64748b;
}

.pricing-modal-reassurance {
  margin-top: 14px;
  display: grid;
  gap: 8px;
}

.pricing-modal-reassurance-item {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  color: #334155;
}

.pricing-modal-check {
  width: 14px;
  height: 14px;
  border-radius: 0;
  background: transparent;
  color: color-mix(in srgb, var(--brand-primary, #7c3aed) 68%, #334155);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 10px;
  font-weight: 700;
  flex: 0 0 14px;
}

.modal-plan {
  margin-top: 22px;
  padding: 16px 18px;
  border-radius: 12px;
  border: 1px solid #e5e7eb;
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: #ffffff;
}

.trial-badge {
  padding: 4px 10px;
  border-radius: 999px;
  border: 1px solid #d1d5db;
  background: transparent;
  color: #475569;
  font-weight: 500;
  font-size: 11px;
  letter-spacing: 0.01em;
  box-shadow: none;
}

.modal-actions {
  margin-top: 16px;
}

.modal-payment {
  margin-top: 20px;
  padding-top: 2px;
  border-top: none;
}

.modal-note {
  font-size: 13px;
  color: var(--brand-muted);
  margin: 10px 0 16px;
}

.modal-checkout {
  margin-top: 14px;
  padding: 14px;
  border-radius: 16px;
  border: 1px solid var(--brand-border);
  background: rgba(255, 255, 255, 0.6);
}

#plan-modal #modal-plan-price {
  font-size: 12px;
  color: #94a3b8;
}

#plan-modal #modal-plan-price span {
  color: #94a3b8;
}

#plan-modal #modal-plan-name {
  font-weight: 700;
}

#plan-modal #stripe-subscribe {
  width: 100%;
  min-height: 46px;
  font-size: 16px;
  font-weight: 700;
  border-radius: 10px;
  background: var(--brand-primary, #7c3aed);
  border-color: var(--brand-primary, #7c3aed);
  box-shadow: none;
}

#plan-modal #stripe-subscribe:hover {
  background: color-mix(in srgb, var(--brand-primary, #7c3aed) 90%, #111827);
  border-color: color-mix(in srgb, var(--brand-primary, #7c3aed) 90%, #111827);
}

.pricing-modal-micro-note {
  margin-top: 6px;
  font-size: 11px;
  line-height: 1.4;
  color: #6b7280;
}

#plan-modal .pricing-modal-prepaid-note {
  margin-top: 10px;
  font-size: 13px;
  line-height: 1.55;
  color: #4b5563;
}

@media (max-width: 768px) {
  #plan-modal.modal {
    padding: 38px 12px 28px;
    align-items: center;
  }

  #plan-modal .modal-card {
    width: min(96vw, 520px);
    max-height: calc(100vh - 52px);
    border-radius: 14px;
    padding: 56px 18px 18px;
    display: flex;
    flex-direction: column;
    gap: 0;
  }

  #plan-modal .modal-close {
    top: 20px;
    left: 20px;
    right: auto;
    width: 24px;
    height: 24px;
    padding: 0;
    border: none;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
    color: #475569;
    font-size: 16px;
    line-height: 1;
    z-index: 3;
  }

  html[dir="rtl"] #plan-modal .modal-close,
  [dir="rtl"] #plan-modal .modal-close,
  .rtl #plan-modal .modal-close {
    left: 20px;
    right: auto;
  }

  #plan-modal .modal-title {
    font-size: clamp(18px, 5vw, 22px);
    line-height: 1.22;
    max-width: none;
    margin-top: 0;
    margin-right: 0;
    margin-bottom: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  html[dir="rtl"] #plan-modal .modal-title,
  [dir="rtl"] #plan-modal .modal-title,
  .rtl #plan-modal .modal-title {
    margin-right: 0;
    margin-left: 0;
  }

  #plan-modal .pricing-modal-days-accent {
    color: color-mix(in srgb, var(--brand-primary, #7c3aed) 84%, #7c3aed);
    font-size: 1.06em;
    font-weight: 700;
    letter-spacing: 0;
  }

  #plan-modal .modal-subtitle {
    margin-top: 3px;
    line-height: 1.45;
  }

  #plan-modal .pricing-modal-reassurance {
    margin-top: 6px;
    gap: 4px;
  }

  #plan-modal .pricing-modal-reassurance-item {
    gap: 5px;
    line-height: 1.35;
  }

  #plan-modal .pricing-modal-check {
    color: color-mix(in srgb, var(--brand-primary, #7c3aed) 52%, #94a3b8);
    font-weight: 500;
  }

  #plan-modal .modal-plan {
    margin-top: 16px;
    border-color: color-mix(in srgb, var(--brand-primary, #7c3aed) 22%, #d1d5db);
    background: color-mix(in srgb, var(--brand-primary, #7c3aed) 4%, #ffffff);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.75);
  }

  #plan-modal .modal-payment {
    position: sticky;
    bottom: 0;
    margin-top: 16px;
    margin-inline: -18px;
    padding: 12px 18px calc(6px + env(safe-area-inset-bottom));
    background: linear-gradient(to top, #ffffff 78%, rgba(255, 255, 255, 0.86));
    border-top: 1px solid rgba(15, 23, 42, 0.07);
    box-shadow: 0 -5px 12px rgba(15, 23, 42, 0.06), 0 -1px 0 rgba(255, 255, 255, 0.9);
    z-index: 2;
  }

  #plan-modal #stripe-subscribe {
    min-height: 48px;
  }
}

/* No-plan paywall modal (event: triedtocreatenoplan) */
#no-plan-paywall-modal {
  z-index: 200010;
  padding: 24px;
}

#no-plan-paywall-modal .no-plan-paywall-backdrop {
  background: rgba(15, 23, 42, 0.46);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  opacity: 0;
  transition: opacity 200ms ease-out;
}

#no-plan-paywall-modal .no-plan-paywall-card {
  width: min(540px, 94vw);
  border-radius: 18px;
  border: 1px solid color-mix(in srgb, var(--brand-border, #e5e7eb) 84%, #ffffff);
  box-shadow: 0 22px 56px rgba(15, 23, 42, 0.18);
  background: var(--brand-card, #ffffff);
  padding: 28px 24px 20px;
  overflow: hidden;
  transform: translateY(8px) scale(0.975);
  opacity: 0;
  transition: transform 200ms ease-out, opacity 200ms ease-out;
}

#no-plan-paywall-modal.is-open .no-plan-paywall-backdrop {
  opacity: 1;
}

#no-plan-paywall-modal.is-open .no-plan-paywall-card {
  transform: translateY(0) scale(1);
  opacity: 1;
}

#no-plan-paywall-modal .no-plan-paywall-close {
  top: 14px;
  right: 14px;
  background: color-mix(in srgb, var(--brand-muted, #64748b) 10%, #ffffff);
  border: 1px solid color-mix(in srgb, var(--brand-border, #e5e7eb) 88%, #ffffff);
  color: var(--brand-muted, #64748b);
}

html[dir="rtl"] #no-plan-paywall-modal .no-plan-paywall-close,
[dir="rtl"] #no-plan-paywall-modal .no-plan-paywall-close,
.rtl #no-plan-paywall-modal .no-plan-paywall-close,
html[lang="ar"] #no-plan-paywall-modal .no-plan-paywall-close,
html[lang="he"] #no-plan-paywall-modal .no-plan-paywall-close {
  left: 14px;
  right: auto;
}

#no-plan-paywall-modal .no-plan-paywall-header {
  padding-right: 36px;
}

html[dir="rtl"] #no-plan-paywall-modal .no-plan-paywall-header,
[dir="rtl"] #no-plan-paywall-modal .no-plan-paywall-header,
.rtl #no-plan-paywall-modal .no-plan-paywall-header,
html[lang="ar"] #no-plan-paywall-modal .no-plan-paywall-header,
html[lang="he"] #no-plan-paywall-modal .no-plan-paywall-header {
  padding-right: 0;
  padding-left: 36px;
}

#no-plan-paywall-modal .no-plan-paywall-title {
  font-size: 28px;
  line-height: 1.18;
  letter-spacing: -0.015em;
}

#no-plan-paywall-modal .no-plan-paywall-subtitle {
  margin-top: 10px;
  line-height: 1.55;
  font-size: 14px;
}

#no-plan-paywall-modal .no-plan-paywall-bullets {
  margin: 18px 0 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 10px;
}

#no-plan-paywall-modal .no-plan-paywall-bullets li {
  display: flex;
  align-items: center;
  gap: 10px;
  color: var(--brand-ink, #0f172a);
  font-size: 14px;
}

#no-plan-paywall-modal .no-plan-paywall-icon {
  width: 16px;
  height: 16px;
  color: color-mix(in srgb, var(--brand-primary, #7c3aed) 66%, #1f2937);
  flex: 0 0 16px;
}

#no-plan-paywall-modal .no-plan-paywall-actions {
  margin-top: 20px;
  display: grid;
  gap: 8px;
}

#no-plan-paywall-modal .no-plan-paywall-subscribe-btn {
  width: 100%;
  min-height: 46px;
  border-radius: 12px;
  font-weight: 700;
}

#no-plan-paywall-modal .no-plan-paywall-not-now,
#no-plan-paywall-modal .no-plan-paywall-see-plans {
  justify-self: start;
  padding-inline: 0;
  min-height: 0;
  color: var(--brand-muted, #64748b);
}

#no-plan-paywall-modal .no-plan-paywall-microcopy {
  margin: 8px 0 0;
  font-size: 11px;
  line-height: 1.45;
  color: color-mix(in srgb, var(--brand-muted, #64748b) 86%, #ffffff);
}

#no-plan-paywall-modal.whatsapp-bot-invite-modal .whatsapp-bot-invite-form {
  margin-top: 4px;
}

#no-plan-paywall-modal.whatsapp-bot-invite-modal .whatsapp-bot-invite-form .field {
  margin: 0 0 12px;
}

#no-plan-paywall-modal.whatsapp-bot-invite-modal .whatsapp-bot-invite-form .field label {
  display: block;
  margin-bottom: 6px;
  font-size: 13px;
  font-weight: 500;
  color: var(--brand-text-secondary, #475569);
}

#no-plan-paywall-modal.whatsapp-bot-invite-modal .whatsapp-bot-invite-form textarea.input {
  min-height: 88px;
  resize: vertical;
}

#no-plan-paywall-modal.whatsapp-bot-invite-modal .whatsapp-bot-invite-honeypot {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

#no-plan-paywall-modal.whatsapp-bot-invite-modal .whatsapp-bot-invite-alert-error {
  color: #b91c1c;
}

#no-plan-paywall-modal.whatsapp-bot-invite-modal .whatsapp-bot-invite-alert-success {
  color: #047857;
}

#no-plan-paywall-modal .no-plan-paywall-topup-tip {
  display: block;
  margin-top: 6px;
  font-weight: 500;
  color: var(--brand-text-secondary, #475569);
}

#no-plan-paywall-modal.adly-chat-paywall-modal .no-plan-paywall-backdrop {
  background:
    radial-gradient(circle at 20% 15%, rgba(236, 72, 153, 0.28), transparent 28%),
    radial-gradient(circle at 80% 20%, rgba(124, 58, 237, 0.32), transparent 30%),
    rgba(15, 23, 42, 0.62);
}

#no-plan-paywall-modal .adly-chat-paywall-card {
  width: min(580px, 94vw);
  border: 1px solid rgba(255, 255, 255, 0.64);
  background:
    linear-gradient(145deg, rgba(255, 255, 255, 0.96), rgba(248, 244, 255, 0.98)),
    var(--brand-card, #ffffff);
  box-shadow: 0 30px 90px rgba(76, 29, 149, 0.28);
}

.adly-chat-paywall-hero {
  position: relative;
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 18px;
}

.adly-chat-paywall-orb {
  width: 58px;
  height: 58px;
  border-radius: 22px;
  display: grid;
  place-items: center;
  background: linear-gradient(145deg, rgba(124, 58, 237, 0.16), rgba(236, 72, 153, 0.14));
  box-shadow: 0 14px 34px rgba(124, 58, 237, 0.22), inset 0 0 0 1px rgba(255, 255, 255, 0.78);
}

.adly-chat-paywall-orb img {
  width: 38px;
  height: 38px;
  object-fit: contain;
  border-radius: 999px;
  background: #ffffff;
}

.adly-chat-paywall-sparkle {
  border-radius: 999px;
  padding: 7px 11px;
  color: #ffffff;
  background: linear-gradient(135deg, var(--brand-primary, #7c3aed), var(--brand-secondary, #ec4899));
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.06em;
  box-shadow: 0 12px 26px rgba(124, 58, 237, 0.24);
}

#no-plan-paywall-modal .adly-chat-paywall-header {
  padding-right: 36px;
}

#no-plan-paywall-modal .adly-chat-paywall-bullets li {
  align-items: flex-start;
  padding: 10px 12px;
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.72);
  border: 1px solid rgba(124, 58, 237, 0.08);
}

.adly-chat-paywall-examples {
  margin-top: 16px;
  display: grid;
  gap: 8px;
}

.adly-chat-paywall-examples-label {
  color: var(--brand-muted, #64748b);
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.adly-chat-paywall-example {
  border-radius: 14px;
  padding: 11px 13px;
  color: var(--brand-ink, #0f172a);
  background: linear-gradient(135deg, rgba(124, 58, 237, 0.09), rgba(236, 72, 153, 0.08));
  border: 1px solid rgba(124, 58, 237, 0.12);
  font-weight: 700;
}

#no-plan-paywall-modal .adly-chat-paywall-cta {
  background: linear-gradient(135deg, var(--brand-primary, #7c3aed), var(--brand-secondary, #ec4899));
  box-shadow: 0 14px 30px rgba(124, 58, 237, 0.28);
}

@media (max-width: 768px) {
  #no-plan-paywall-modal {
    align-items: flex-end;
    justify-content: stretch;
    padding: 0;
  }

  #no-plan-paywall-modal .no-plan-paywall-card {
    width: 100%;
    max-height: calc(100vh - 14px);
    border-radius: 18px 18px 0 0;
    padding: 20px 16px calc(14px + env(safe-area-inset-bottom));
    transform: translateY(28px);
    transition: transform 200ms ease-out, opacity 200ms ease-out;
  }

  #no-plan-paywall-modal .no-plan-paywall-title {
    font-size: 22px;
  }

  #no-plan-paywall-modal .no-plan-paywall-not-now,
  #no-plan-paywall-modal .no-plan-paywall-see-plans {
    width: 100%;
    justify-content: center;
  }
}

.card-tight {
  align-self: stretch;
}

.section-header {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 16px;
}

.section-header-left {
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
  gap: 10px;
  margin-bottom: 12px;
}

.section-header-left .section-title {
  margin-bottom: 0;
}

.admin-details {
  margin-top: 10px;
}

.admin-table {
  display: grid;
  gap: 8px;
}

.admin-table-header,
.admin-table-row {
  display: grid;
  grid-template-columns: 2.2fr 0.6fr 0.8fr 0.8fr 0.7fr 1.2fr 0.8fr;
  gap: 10px;
  align-items: center;
  padding: 12px 14px;
  border-radius: 14px;
}

.admin-table-header {
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.6px;
  color: var(--brand-muted);
  background: #f8fafc;
  border: 1px solid var(--brand-border);
}

.admin-table-row {
  background: #fff;
  border: 1px solid var(--brand-border);
}

.admin-cell.main {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

@media (max-width: 980px) {
  .jobs-split {
    grid-template-columns: 1fr;
  }
  body.app-page .jobs-split {
    grid-template-areas:
      "tabs"
      "list"
      "details";
    grid-template-rows: none;
  }
  .jobs-split,
  .jobs-list-col,
  .job-details-col {
    max-width: 100%;
    overflow-x: hidden;
  }
  .job-details-card {
    width: 100%;
  }
  .job-details-modal .job-details-modal-body {
    overflow-y: auto;
    overflow-x: hidden;
    -webkit-overflow-scrolling: touch;
  }
  /* Single scroll container: nested overflow on the card traps touches on the preview image. */
  .job-details-modal .job-details-card {
    max-height: none;
    overflow: visible;
  }
  .job-details-modal .image-preview.compact {
    max-height: 50vh;
    width: auto;
    max-width: 100%;
    object-fit: contain;
  }
  .admin-table-header {
    display: none;
  }
  .admin-table-row {
    grid-template-columns: 1fr;
    gap: 6px;
  }
}

.admin-user-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.admin-user-row > button {
  margin-left: auto;
}

.library-items.collapsed {
  display: none !important;
}

/* Publish Section */
.publish-section {
  background: #fff;
  border: 1px solid var(--brand-border);
  border-radius: 12px;
  padding: 16px;
  margin-top: 16px;
}

.publish-header {
  font-size: 13px;
  font-weight: 500;
  color: var(--brand-muted);
  margin-bottom: 12px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.publish-row {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: center;
}

.publish-row .button.publish {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

/*
 * Publish now markup is [svg icon][label]. row-reverse fixes both directions:
 * - LTR: label left, send icon right, arrow points right (default SVG).
 * - RTL: icon left, label right (flex main-start flips with direction).
 */
.publish-row .button.publish#publish-now {
  flex-direction: row-reverse;
}

/* RTL/Arabic/Hebrew: mirror send arrow so it points left. iconSvg() is <svg class="icon action-icon"> */
html[lang="ar"] .publish-row .button.publish#publish-now svg.icon,
html[lang="he"] .publish-row .button.publish#publish-now svg.icon,
html[dir="rtl"] .publish-row .button.publish#publish-now svg.icon,
[dir="rtl"] .publish-row .button.publish#publish-now svg.icon {
  transform: scaleX(-1);
}
/* Scheduled job: replaces the publish button with when it goes out + Cancel schedule. */
.publish-scheduled {
  flex: 1 1 100%;
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 52px;
  padding: 8px 8px 8px 14px;
  border: 1px solid #dccbff;
  border-radius: 12px;
  background: #f6f1ff;
  color: #2e1065;
}

[dir="rtl"] .publish-scheduled {
  padding: 8px 14px 8px 8px;
}

.publish-scheduled[hidden] {
  display: none;
}

.publish-scheduled-icon {
  flex: 0 0 auto;
  display: inline-grid;
  place-items: center;
  width: 32px;
  height: 32px;
  border-radius: 999px;
  background: #ffffff;
  color: var(--brand-primary, #7c3aed);
}

.publish-scheduled-icon .action-icon {
  width: 16px;
  height: 16px;
}

.publish-scheduled-text {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
  line-height: 1.3;
}

.publish-scheduled-text strong {
  font-size: 14px;
  font-weight: 700;
}

.publish-scheduled-when {
  font-size: 13px;
  color: #5b21b6;
  font-variant-numeric: tabular-nums;
}

.publish-scheduled-cancel.button {
  flex: 0 0 auto;
  min-height: 36px;
  white-space: nowrap;
}

.publish-scheduled-cancel.button:hover:not(:disabled) {
  border-color: #f3b8b2;
  color: #b42318;
  background: #fff7f6;
}

.schedule-group {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.schedule-group input[type="datetime-local"] {
  padding: 10px 14px;
  border: 1px solid var(--brand-border);
  border-radius: 10px;
  font-size: 14px;
  font-family: inherit;
  background: var(--brand-surface);
  color: var(--brand-text);
  min-width: 200px;
  height: 42px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
  -webkit-appearance: none;
  appearance: none;
}

.schedule-group input[type="datetime-local"]:hover {
  border-color: rgba(124, 58, 237, 0.3);
}

.schedule-group input[type="datetime-local"]:focus {
  outline: none;
  border-color: #7c3aed;
  box-shadow: 0 0 0 3px rgba(124, 58, 237, 0.15);
}

/* Style the calendar icon */
.schedule-group input[type="datetime-local"]::-webkit-calendar-picker-indicator {
  cursor: pointer;
  padding: 4px;
  border-radius: 4px;
  opacity: 0.6;
  transition: opacity 0.2s ease;
  filter: invert(40%) sepia(90%) saturate(2000%) hue-rotate(240deg) brightness(90%) contrast(100%);
}

.schedule-group input[type="datetime-local"]::-webkit-calendar-picker-indicator:hover {
  opacity: 1;
  background: rgba(124, 58, 237, 0.1);
}

.schedule-group .button {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 42px;
}

.publish-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px solid rgba(124, 58, 237, 0.1);
}

.publish-actions .action-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  padding: 8px 14px;
  border-radius: 8px;
  transition: all 0.2s ease;
}

.publish-actions .action-pill:hover {
  background: rgba(124, 58, 237, 0.1);
  border-color: rgba(124, 58, 237, 0.3);
}

.turn-design-into-row {
  margin-top: 4px;
}

.turn-design-into-wrap {
  position: relative;
  display: inline-flex;
  max-width: 100%;
}

.turn-design-into-wrap > .action-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.turn-design-into-caret {
  width: 0;
  height: 0;
  margin-inline-start: 2px;
  border-inline-start: 4px solid transparent;
  border-inline-end: 4px solid transparent;
  border-top: 5px solid currentColor;
  opacity: 0.7;
  transition: transform 0.15s ease;
}

.turn-design-into-wrap > .action-pill.is-open .turn-design-into-caret {
  transform: rotate(180deg);
}

.turn-design-into-menu {
  position: absolute;
  top: calc(100% + 6px);
  inset-inline-start: auto;
  inset-inline-end: 0;
  min-width: min(100%, 220px);
  width: max-content;
  max-width: min(340px, calc(100vw - 24px));
  background: #fff;
  border: 1px solid rgba(148, 163, 184, 0.28);
  border-radius: 10px;
  box-shadow: 0 10px 24px rgba(15, 23, 42, 0.14);
  padding: 4px;
  z-index: 40;
  overflow: visible;
}

.turn-design-into-item-row {
  display: flex;
  align-items: center;
  gap: 2px;
  border-radius: 8px;
}

.turn-design-into-item-row:hover,
.turn-design-into-item-row:focus-within {
  background: rgba(124, 58, 237, 0.08);
}

.turn-design-into-item {
  width: 100%;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  border: 0;
  background: transparent;
  text-align: start;
  padding: 9px 12px;
  border-radius: 8px;
  font-size: 13px;
  font-weight: 500;
  color: #334155;
  cursor: pointer;
  font-family: 'Tajawal', system-ui, -apple-system, 'Segoe UI', sans-serif;
}

.turn-design-into-item-row .turn-design-into-item {
  flex: 1 1 auto;
  min-width: 0;
  padding-inline-end: 4px;
}

.turn-design-into-item-row .turn-design-into-item:hover,
.turn-design-into-item-row .turn-design-into-item:focus-visible {
  background: transparent;
}

.turn-design-into-item-text {
  flex: 1 1 auto;
  min-width: 0;
}

.turn-design-into-item:hover,
.turn-design-into-item:focus-visible {
  background: rgba(124, 58, 237, 0.08);
  outline: none;
}

.turn-design-into-item:disabled {
  opacity: 0.55;
  cursor: not-allowed;
}

.turn-design-into-item .action-icon {
  flex: 0 0 auto;
}

.turn-design-into-help.pricing-tooltip {
  margin: 0 8px 0 0;
  z-index: 50;
}

html[dir="rtl"] .turn-design-into-help.pricing-tooltip,
[dir="rtl"] .turn-design-into-help.pricing-tooltip {
  margin: 0 0 0 8px;
}

.turn-design-into-help.pricing-tooltip::after {
  min-width: 160px;
  max-width: 220px;
  z-index: 60;
}

.turn-design-into-help.pricing-tooltip.is-tooltip-active::after,
.turn-design-into-help.pricing-tooltip.is-tooltip-active::before {
  opacity: 1;
  transform: translate(-50%, 0);
}


.publish-actions .loading-pill {
  margin: 0;
}

/* Ensure icons show in publish section */
.publish-section .icon,
.publish-section .action-icon svg,
.publish-row .icon,
.publish-actions .icon {
  width: 14px;
  height: 14px;
  stroke: currentColor;
  fill: none;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.publish-row .button.publish .icon {
  width: 16px;
  height: 16px;
}

.publish-row .field {
  margin: 0;
}

/* Responsive publish section */
@media (max-width: 600px) {
  .publish-row {
    flex-direction: column;
    align-items: stretch;
  }
  
  .schedule-group {
    flex-direction: column;
    align-items: stretch;
  }
  
  .schedule-group input[type="datetime-local"] {
    width: 100%;
  }
  
  .publish-actions {
    flex-direction: column;
  }
  
  .publish-actions .action-pill {
    justify-content: center;
  }
}


.hidden {
  display: none;
}

.status-pill {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 6px;
  border-radius: 10px;
  font-size: 10px;
  font-weight: 700;
  background: rgba(147, 51, 234, 0.1);
  color: var(--brand-primary);
}

.new-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 6px;
  border-radius: 999px;
  font-size: 10px;
  font-weight: 700;
  background: rgba(34, 197, 94, 0.18);
  color: #15803d;
  text-transform: uppercase;
}

.linked-badge {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  padding: 2px 7px;
  border-radius: 999px;
  font-size: 10px;
  font-weight: 500;
  background: rgba(99, 102, 241, 0.12);
  color: #6366f1;
  cursor: pointer;
}

.autopilot-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 7px;
  border-radius: 999px;
  font-size: 10px;
  font-weight: 700;
  background: linear-gradient(135deg, rgba(147,51,234,0.12) 0%, rgba(79,70,229,0.12) 100%);
  color: var(--brand-primary);
  border: 1px solid rgba(147,51,234,0.2);
  white-space: nowrap;
}

.automation-job-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  padding: 2px 7px;
  border-radius: 999px;
  font-size: 10px;
  font-weight: 700;
  line-height: 1.25;
  background: color-mix(in srgb, var(--brand-primary, #6d28d9) 12%, #fff);
  color: #5b21b6;
  border: 1px solid color-mix(in srgb, var(--brand-primary, #6d28d9) 22%, transparent);
  white-space: nowrap;
}

.free-job-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 7px;
  border-radius: 999px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.02em;
  background: rgba(22, 163, 74, 0.12);
  color: #15803d;
  border: 1px solid rgba(22, 163, 74, 0.28);
  white-space: nowrap;
}

.autopilot-badge-icon {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  object-fit: contain;
  flex-shrink: 0;
}

.telegram-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 7px;
  border-radius: 999px;
  font-size: 10px;
  font-weight: 700;
  background: rgba(34, 158, 217, 0.12);
  color: #1a8fc9;
  border: 1px solid rgba(34, 158, 217, 0.28);
  white-space: nowrap;
}

.api-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 7px;
  border-radius: 999px;
  font-size: 10px;
  font-weight: 700;
  background: rgba(15, 118, 110, 0.1);
  color: #0f766e;
  border: 1px solid rgba(15, 118, 110, 0.22);
  white-space: nowrap;
  max-width: 220px;
  overflow: hidden;
  text-overflow: ellipsis;
}

.whatsapp-source-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 7px;
  border-radius: 999px;
  font-size: 10px;
  font-weight: 700;
  background: rgba(22, 163, 74, 0.12);
  color: #15803d;
  border: 1px solid rgba(22, 163, 74, 0.26);
  white-space: nowrap;
}

.mcp-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 7px;
  border-radius: 999px;
  font-size: 10px;
  font-weight: 700;
  background: rgba(124, 58, 237, 0.12);
  color: #6d28d9;
  border: 1px solid rgba(124, 58, 237, 0.24);
  white-space: nowrap;
}

/* Made in ChatGPT: ChatGPT's own black and white, same pill as MCP. */
.gpt-source-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 7px;
  border-radius: 999px;
  font-size: 10px;
  font-weight: 700;
  background: rgba(15, 23, 42, 0.06);
  color: #0f172a;
  border: 1px solid rgba(15, 23, 42, 0.18);
  white-space: nowrap;
}

.gpt-source-badge-icon {
  width: 11px;
  height: 11px;
  flex: 0 0 auto;
}

.catalog-studio-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 7px;
  border-radius: 999px;
  font-size: 10px;
  font-weight: 700;
  background: rgba(14, 165, 233, 0.12);
  color: #0369a1;
  border: 1px solid rgba(14, 165, 233, 0.28);
  white-space: nowrap;
}

.linked-badge .icon,
.linked-badge-icon {
  width: 11px;
  height: 11px;
  stroke: currentColor;
  stroke-width: 2;
  fill: none;
}

.linked-job-hint {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 5px;
  margin-top: 0;
  margin-bottom: 0;
  font-size: 12px;
  font-weight: 400;
  line-height: 1.4;
  color: var(--brand-muted);
}

.job-meta-lines {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
  margin: 6px 0;
}

.job-meta-lines > .job-message,
.job-meta-lines > .job-message-wrap {
  margin: 0;
  width: 100%;
}

.job-lineage {
  display: contents;
}

.job-lineage .linked-job-hint,
.job-lineage .related-jobs {
  margin-top: 0;
  margin-bottom: 0;
}

.linked-job-hint .icon,
.linked-job-hint .linked-badge-icon {
  width: 12px;
  height: 12px;
  stroke: var(--brand-muted);
  stroke-width: 2;
  fill: none;
  flex-shrink: 0;
}

.linked-job-hint a,
.linked-job-hint .linked-job-link {
  color: var(--brand-accent);
  font-weight: 500;
  text-decoration: none;
  cursor: pointer;
}

.linked-job-hint a:hover,
.linked-job-hint .linked-job-link:hover {
  text-decoration: underline;
}

.style-badge {
  display: inline-flex;
  align-items: center;
  padding: 2px 8px;
  border-radius: 999px;
  font-size: 10px;
  font-weight: 500;
  background: rgba(139, 92, 246, 0.15);
  color: #7c3aed;
  text-transform: capitalize;
  letter-spacing: 0.04em;
}

.lang-badge {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  padding: 2px 6px;
  border-radius: 4px;
  font-size: 10px;
  font-weight: 700;
  background: rgba(100, 116, 139, 0.12);
  color: #64748b;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.lang-badge .lang-icon {
  width: 10px !important;
  height: 10px !important;
  min-width: 10px;
  max-width: 10px;
  opacity: 0.7;
  flex-shrink: 0;
}

.super-mode-job-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 7px;
  border-radius: 999px;
  font-size: 10px;
  font-weight: 700;
  background: rgba(124, 58, 237, 0.12);
  color: #6d28d9;
  letter-spacing: 0.02em;
  white-space: nowrap;
}

.super-mode-job-badge-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 12px;
  height: 12px;
  border-radius: 999px;
  background: rgba(124, 58, 237, 0.16);
  color: #6d28d9;
  font-family: Arial, system-ui, sans-serif;
  font-size: 9px;
  line-height: 1;
}

.brand-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 8px;
  border-radius: 6px;
  font-size: 11px;
  font-weight: 500;
  background: rgba(37, 99, 235, 0.12);
  color: #1d4ed8;
  max-width: 180px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.brand-badge .inline-icon {
  width: 11px !important;
  height: 11px !important;
  min-width: 11px;
  opacity: 0.8;
  flex-shrink: 0;
}

.status-pill.published {
  background: rgba(34, 197, 94, 0.16);
  color: #15803d;
}

.job-list {
  display: flex;
  flex-direction: column;
  gap: 14px;
  font-size: 112%;
}

.jobs-toolbar {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  margin: 16px 0;
}

body.app-page .jobs-toolbar {
  gap: 8px;
  margin: 8px 0 10px;
}

body.app-page .jobs-source-tabs {
  display: inline-flex;
  flex: 0 0 auto;
  width: auto;
  margin: 0;
  gap: 6px;
}

body.app-page .jobs-automations-empty {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 10px;
}

body.app-page .jobs-automations-empty-cta {
  min-height: 32px;
  padding: 0 12px;
  font-size: 12px;
  font-weight: 500;
  line-height: 1.2;
  border-radius: 10px;
}

body.app-page .jobs-source-tabs .language-option {
  position: relative;
  min-height: 28px;
  padding: 3px 10px;
  gap: 6px;
  font-size: 12px;
  font-weight: 500;
  line-height: 1.2;
}

body.app-page .jobs-source-tabs .jobs-source-tab-icon {
  width: 13px;
  height: 13px;
  flex: 0 0 auto;
  pointer-events: none;
  position: relative;
  z-index: 1;
}

body.app-page .jobs-source-tabs .language-option span {
  pointer-events: none;
  position: relative;
  z-index: 1;
}

body.app-page .jobs-source-tabs .jobs-source-new-chip {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  padding: 1px 5px;
  border-radius: 999px;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.03em;
  line-height: 1.2;
  text-transform: uppercase;
  color: #fff;
  background: var(--brand-primary);
  overflow: visible;
  text-overflow: clip;
}

body.app-page .jobs-source-tabs .jobs-source-unread-chip {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 16px;
  padding: 1px 5px;
  border-radius: 999px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.02em;
  line-height: 1.2;
  font-variant-numeric: tabular-nums;
  color: #fff;
  background: var(--brand-primary);
  overflow: visible;
  text-overflow: clip;
}

body.app-page .jobs-source-tabs .jobs-source-unread-chip.hidden {
  display: none;
}

body.app-page .jobs-source-tabs .language-option:has(input:checked) {
  border-color: color-mix(in srgb, var(--brand-primary) 45%, var(--brand-border));
  background: color-mix(in srgb, var(--brand-primary) 8%, #fff);
  color: var(--brand-ink);
  font-weight: 700;
}

body.app-page .jobs-source-tabs .language-option:has(input:checked) .jobs-source-tab-icon {
  color: var(--brand-primary);
}

body.app-page .jobs-source-tabs .language-option input[type="radio"] {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  opacity: 0;
  cursor: pointer;
}

body.app-page .jobs-toolbar .input,
body.app-page .jobs-toolbar .select {
  padding-block: 8px;
}

.jobs-toolbar .input {
  flex: 1 1 220px;
  padding: 10px 12px;
  border: 1px solid var(--brand-border);
  border-radius: 12px;
  font-family: inherit;
}

.jobs-toolbar .select {
  background: var(--brand-card);
  color: var(--brand-ink);
  border: 1px solid var(--brand-border);
  border-radius: 12px;
  padding: 10px 12px;
}

.pagination {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 12px;
  margin-top: 12px;
}

[dir="rtl"] .pagination {
  flex-direction: row-reverse;
}

.job-item {
  border: 1px solid var(--brand-border);
  border-radius: 16px;
  padding: 10px 14px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  cursor: pointer;
  transition: transform 0.2s ease, border 0.2s ease, background 0.2s ease, box-shadow 0.2s ease;
  background: #ffffff;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
}
.job-item.just-created {
  border-color: rgba(99, 102, 241, 0.5);
  box-shadow: 0 0 0 2px rgba(99, 102, 241, 0.18), 0 10px 20px rgba(99, 102, 241, 0.12);
  animation: jobJustCreatedPulse 2.4s ease forwards;
}

@keyframes jobJustCreatedPulse {
  0% { transform: translateY(0); }
  20% { transform: translateY(-1px); }
  100% { transform: translateY(0); }
}

.job-item-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
  min-width: 0;
}

.job-item-header .muted {
  font-size: 11px;
  font-weight: 500;
}

.job-item-meta-row {
  width: 100%;
  min-width: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  direction: ltr;
}

.job-item-date {
  flex: 0 0 auto;
  white-space: nowrap;
  color: color-mix(in srgb, var(--brand-muted, #64748b) 82%, #ffffff);
}

.job-item-badges {
  min-width: 0;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 4px;
  row-gap: 3px;
  flex-wrap: wrap;
}

html[dir="rtl"] .job-item-badges,
[dir="rtl"] .job-item-badges,
.rtl .job-item-badges {
  direction: rtl;
}

.job-item-badges > * {
  flex: 0 0 auto;
}

.job-item-body {
  display: flex;
  flex-direction: column;
  gap: 1px;
  min-width: 0;
  padding-inline: 1px;
}

.job-item-title {
  display: flex;
  align-items: center;
  min-width: 0;
  font-weight: 700;
  font-size: 15px;
  line-height: 1.28;
  color: var(--brand-ink);
}

.job-item-title strong {
  display: block;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: inherit;
}

.job-item-summary {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 12px;
  line-height: 1.25;
  color: color-mix(in srgb, var(--brand-muted, #64748b) 88%, #ffffff);
}

.image-size-picker-stack {
  display: flex;
  flex-direction: column;
  gap: 18px;
  margin-top: 8px;
}

.image-size-picker {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

@media (min-width: 768px) {
  .image-size-picker {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

.image-size-guideline-hint {
  margin: 0;
  padding: 0;
  font-size: 15px;
  line-height: 1.5;
  color: var(--color-muted, #6b7280);
}

.image-size-guideline-hint[hidden] {
  display: none !important;
}

.image-size-option {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  font-family: inherit;
  font-size: 15.4px;
  line-height: 1.2;
  border: 1px solid rgba(107, 114, 128, 0.35);
  border-radius: 12px;
  background: #fff;
  color: inherit;
  font-weight: 400;
  padding: 10px 12px;
  cursor: pointer;
  transition: border-color .15s ease, background .15s ease, transform .1s ease, box-shadow .15s ease;
}

.image-size-option:hover {
  border-color: rgba(107, 114, 128, 0.55);
  background: #fff;
}

.image-size-option:active {
  transform: translateY(1px);
}

.image-size-option:focus-visible {
  outline: 2px solid var(--brand-primary);
  outline-offset: 2px;
}

.image-size-option.active {
  border-color: var(--brand-primary);
  background: rgba(147, 51, 234, 0.12);
  box-shadow: 0 0 0 1px rgba(147, 51, 234, 0.25);
}

.image-size-option .size-indicator {
  margin: 0;
}

.size-indicator {
  display: inline-block;
  border: 2px solid rgba(107, 114, 128, 0.4);
  border-radius: 4px;
  background: rgba(107, 114, 128, 0.06);
  box-sizing: border-box;
  vertical-align: middle;
  margin-left: 6px;
}

.size-indicator.square {
  width: 14px;
  height: 14px;
}

.size-indicator.rect {
  width: 11px;
  height: 18px;
}

/* Feed portrait 3:4 (shorter than story / 9:16). */
.size-indicator.rect-post {
  width: 12px;
  height: 16px;
}

.size-indicator.landscape {
  width: 18px;
  height: 11px;
}

.size-indicator.multi {
  width: 11px;
  height: 11px;
  border-radius: 2.5px;
  position: relative;
}

.size-indicator.multi::before,
.size-indicator.multi::after {
  content: '';
  position: absolute;
  width: 11px;
  height: 11px;
  border: 2px solid rgba(107, 114, 128, 0.4);
  border-radius: 2.5px;
  background: rgba(107, 114, 128, 0.06);
  box-sizing: border-box;
}

.size-indicator.multi::before {
  left: 5px;
  top: -5px;
}

.size-indicator.multi::after {
  left: -5px;
  top: 5px;
}

.job-item.selected {
  border-color: color-mix(in srgb, var(--brand-primary) 54%, var(--brand-border));
  box-shadow: 0 2px 10px rgba(147, 51, 234, 0.065), inset 0 0 0 1px rgba(147, 51, 234, 0.045);
  background: linear-gradient(180deg, rgba(147, 51, 234, 0.05), rgba(147, 51, 234, 0.018));
}

.job-item-footer {
  display: flex;
  flex-wrap: wrap; /* a long status (e.g. "Adding words, music and caption") drops under the chips instead of covering them */
  align-items: center;
  justify-content: space-between;
  gap: 8px 10px;
  min-width: 0;
  direction: ltr;
}

.job-thumbs {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
}

.job-thumb {
  width: 31px;
  height: 31px;
  border-radius: 9px;
  object-fit: cover;
  border: 1px solid color-mix(in srgb, var(--brand-border) 86%, var(--brand-primary));
  background: #ffffff;
  flex: 0 0 auto;
}

.job-thumb.text {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 11.5px;
  font-weight: 700;
  color: var(--brand-primary);
  background: rgba(147, 51, 234, 0.12);
}

.job-thumb.video-thumb {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  background: linear-gradient(135deg, #7c3aed 0%, #ec4899 100%);
  color: #fff;
}

.job-thumb.job-thumb-more {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  font-weight: 700;
  color: var(--brand-primary);
  background: rgba(147, 51, 234, 0.12);
}

video.job-thumb.job-thumb-media {
  pointer-events: none;
  object-fit: cover;
}

.job-item .new-badge,
.job-item .linked-badge,
.job-item .style-badge,
.job-item .lang-badge,
.job-item .super-mode-job-badge,
.job-item .brand-badge,
.job-item .automation-job-badge,
.job-item .free-job-badge,
.job-details-card .style-badge,
.job-details-card .lang-badge,
.job-details-card .status-pill,
.job-details-modal .style-badge,
.job-details-modal .lang-badge,
.job-details-modal .status-pill {
  min-height: 18px;
  padding: 1px 6px;
  border-radius: 999px;
  font-size: 9px;
  line-height: 1;
  font-weight: 650;
  letter-spacing: 0.01em;
  background: rgba(100, 116, 139, 0.07);
  color: color-mix(in srgb, var(--brand-muted, #64748b) 86%, var(--brand-ink, #0f172a));
  border: 1px solid rgba(100, 116, 139, 0.09);
  text-transform: none;
  white-space: nowrap;
}

.job-item .brand-badge {
  max-width: 104px;
}

.job-item .new-badge {
  color: #15803d;
  background: rgba(34, 197, 94, 0.09);
  border-color: rgba(34, 197, 94, 0.12);
  text-transform: uppercase;
}

.job-item .automation-job-badge,
.job-details-card .automation-job-badge,
.admin-job-item .automation-job-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #5b21b6;
  background: color-mix(in srgb, var(--brand-primary, #6d28d9) 12%, #fff);
  border-color: color-mix(in srgb, var(--brand-primary, #6d28d9) 22%, transparent);
  line-height: 1.25;
  padding-block: 3px;
  padding-inline: 7px;
}

.job-item .free-job-badge,
.job-details-card .free-job-badge {
  color: #15803d;
  background: rgba(22, 163, 74, 0.12);
  border-color: rgba(22, 163, 74, 0.28);
}

.job-item .linked-badge,
.job-item .style-badge,
.job-item .super-mode-job-badge {
  color: color-mix(in srgb, var(--brand-primary, #7c3aed) 74%, var(--brand-muted, #64748b));
  background: color-mix(in srgb, var(--brand-primary, #7c3aed) 7%, #ffffff);
  border-color: color-mix(in srgb, var(--brand-primary, #7c3aed) 11%, transparent);
}

.job-item .video-ai-style-badge,
.job-details-card .video-ai-style-badge,
.job-details-modal .video-ai-style-badge {
  color: #0284c7;
  background: rgba(14, 165, 233, 0.1);
  border-color: rgba(14, 165, 233, 0.18);
}

.job-item .video-narrator-badge,
.job-details-card .video-narrator-badge,
.job-details-modal .video-narrator-badge {
  color: color-mix(in srgb, var(--brand-primary, #7c3aed) 74%, var(--brand-muted, #64748b));
  background: color-mix(in srgb, var(--brand-primary, #7c3aed) 7%, #ffffff);
  border-color: color-mix(in srgb, var(--brand-primary, #7c3aed) 11%, transparent);
}

.job-item .video-metadata-badge .video-badge-icon,
.job-details-card .video-metadata-badge .video-badge-icon,
.job-details-modal .video-metadata-badge .video-badge-icon {
  width: 12px !important;
  height: 12px !important;
  opacity: 0.9;
}

.job-item .size-indicator,
.job-details-card .size-indicator,
.job-details-modal .size-indicator {
  margin: 0;
  opacity: 0.52;
  transform: scale(0.82);
  transform-origin: center;
  flex: 0 0 auto;
}

.job-item .linked-badge .icon,
.job-item .linked-badge-icon,
.job-item .lang-badge .lang-icon,
.job-item .brand-badge .inline-icon,
.job-item .super-mode-job-badge-icon,
.job-details-card .lang-badge .lang-icon,
.job-details-card .job-meta .action-icon,
.job-details-modal .lang-badge .lang-icon,
.job-details-modal .job-meta .action-icon {
  width: 10px !important;
  height: 10px !important;
  color: currentColor;
  opacity: 0.62;
}

.job-item .super-mode-job-badge-icon {
  background: transparent;
  font-size: 8px;
}

.job-item-footer .status-pill {
  min-width: 0;
  min-height: 31px;
  justify-content: center;
  margin-left: auto;
  padding: 5px 12px;
  border-radius: 999px;
  font-size: 11.5px;
  font-weight: 750;
  background: color-mix(in srgb, var(--brand-primary, #7c3aed) 13%, #ffffff);
  color: var(--brand-primary);
  border: 1px solid color-mix(in srgb, var(--brand-primary, #7c3aed) 22%, transparent);
  box-shadow: 0 2px 8px rgba(147, 51, 234, 0.07);
  white-space: nowrap;
}

html[dir="rtl"] .job-item-footer .status-pill,
[dir="rtl"] .job-item-footer .status-pill,
.rtl .job-item-footer .status-pill {
  direction: rtl;
}

.job-item-footer .status-pill .action-icon,
.job-item-footer .status-pill svg {
  width: 12px;
  height: 12px;
}

/* Published card: one small icon per network the post went to, inside the pill so the card keeps its height.
   The pill is always one line: label, divider, icons. */
.job-item-footer .status-pill.has-networks {
  display: inline-flex;
  align-items: center;
  flex-wrap: nowrap;
  flex-shrink: 0;
  margin-top: 0;
}

.job-item-footer .status-pill .status-pill-networks {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-inline-start: 6px;
  padding-inline-start: 8px;
  border-inline-start: 1px solid color-mix(in srgb, var(--brand-primary, #7c3aed) 30%, transparent);
  flex-wrap: nowrap;
  flex-shrink: 0;
  line-height: 0;
}

.job-item-footer .status-pill .status-pill-networks .publishing-platform-glyph {
  width: 13px;
  height: 13px;
}

.image-preview {
  width: 100%;
  max-height: 70vh;
  border-radius: 16px;
  border: 1px solid var(--brand-border);
  cursor: pointer;
  box-shadow: var(--shadow-card);
  object-fit: contain;
}

.image-preview.compact {
  width: 100%;
  max-width: 100%;
  height: auto;
  max-height: 60vh;
  object-fit: contain;
  display: block;
}

.design-preview-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
}

.design-preview-box {
  position: relative;
  width: 100%;
  display: flex;
  justify-content: center;
}

.video-preview-box {
  width: 100%;
  max-width: 100%;
}

.video-preview-box > .image-download-box,
.video-preview-box > .image-share-box.job-native-share-btn {
  z-index: 6;
}

.video-preview-box .lazy-video-preview {
  width: 100%;
}

.image-download-box {
  position: absolute;
  top: 12px;
  inset-inline-end: 12px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  border-radius: 14px;
  background: rgba(15, 23, 42, 0.94);
  color: #ffffff;
  text-decoration: none;
  border: 1px solid rgba(255, 255, 255, 0.34);
  box-shadow: 0 10px 24px rgba(15, 23, 42, 0.38), 0 0 0 1px rgba(15, 23, 42, 0.18);
  backdrop-filter: blur(8px);
  transition: transform 0.15s ease, background 0.15s ease, box-shadow 0.15s ease;
}

.image-download-box .icon {
  width: 20px;
  height: 20px;
  stroke-width: 2.5;
}

.image-download-box:hover {
  transform: translateY(-2px);
  background: rgba(17, 24, 39, 0.98);
  box-shadow: 0 14px 30px rgba(15, 23, 42, 0.48), 0 0 0 1px rgba(255, 255, 255, 0.22);
}

.image-share-box {
  display: inline-flex;
  inset-inline-end: 62px;
  border: 0;
  cursor: pointer;
}

.job-native-share-icon {
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.job-native-share-btn {
  display: inline-flex;
}

.image-share-box.job-native-share-btn,
.video-preview-box > .image-share-box.job-native-share-btn {
  display: inline-flex;
}

.design-thumbs {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: center;
}

.brand-preview-warning {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 12px;
}

.brand-preview-warning-copy {
  flex: 1;
}

.brand-preview-warning-copy strong {
  display: block;
  margin-bottom: 4px;
}

.brand-preview-warning-copy div {
  line-height: 1.5;
}

.brand-preview-warning-cta {
  flex-shrink: 0;
  align-self: flex-start;
}

.brand-preview-warning .brand-preview-warning-cta,
.brand-preview-warning .brand-preview-warning-cta:hover,
.brand-preview-warning .brand-preview-warning-cta:focus,
.brand-preview-warning .brand-preview-warning-cta:focus-visible,
.brand-preview-warning .brand-preview-warning-cta:active {
  color: #ffffff !important;
  background: var(--brand-primary) !important;
  border-color: transparent !important;
  box-shadow: none !important;
  -webkit-tap-highlight-color: transparent;
}

.brand-preview-warning .brand-preview-warning-cta:hover {
  background: color-mix(in srgb, var(--brand-primary, #7c3aed) 92%, #111827) !important;
}

@media (max-width: 640px) {
  .brand-preview-warning-cta {
    width: 100%;
    justify-content: center;
  }
}

.design-thumb {
  border: 1px solid var(--brand-border);
  background: #ffffff;
  border-radius: 10px;
  padding: 3px;
  width: 64px;
  height: 64px;
  cursor: pointer;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.design-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 7px;
  display: block;
}

.design-thumb.active {
  border-color: var(--brand-primary);
  box-shadow: 0 0 0 2px rgba(147, 51, 234, 0.2);
}

.design-thumbs-carousel {
  gap: 10px;
}

/* Single design: the highlighted thumbnail is the selected version (edited and posted). */
.design-thumbs--versions .design-thumb {
  position: relative;
}

.design-thumbs--versions .design-thumb.active::after {
  content: '';
  position: absolute;
  top: -6px;
  inset-inline-end: -6px;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--brand-primary, #7c3aed) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E") center / 11px 11px no-repeat;
  box-shadow: 0 0 0 2px #ffffff, 0 2px 4px rgba(17, 24, 39, .18);
}

.design-thumb-card {
  position: relative;
  width: 64px;
  height: 64px;
  border-radius: 10px;
}

.design-thumb-card .design-thumb {
  width: 100%;
  height: 100%;
}

.design-thumb-order {
  position: absolute;
  inset-inline-start: -6px;
  top: -6px;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 10px;
  line-height: 1;
  font-weight: 700;
  color: #5b21b6;
  background: #f3e8ff;
  border: 1px solid #ddd6fe;
  box-shadow: 0 2px 6px rgba(91, 33, 182, 0.15);
  pointer-events: none;
}

.design-thumb-remove {
  position: absolute;
  inset-inline-end: -6px;
  top: -6px;
  width: 20px;
  height: 20px;
  border-radius: 999px;
  border: 1px solid #fecaca;
  background: #fff1f2;
  color: #b91c1c;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
  padding: 0;
}

.design-thumb-remove .icon {
  width: 11px;
  height: 11px;
}

.design-thumb-remove:hover {
  background: #ffe4e6;
  border-color: #fca5a5;
  color: #991b1b;
}

.design-thumb-card.dragging {
  opacity: 0.45;
}

.design-thumb-card.drag-over .design-thumb {
  border-color: var(--brand-primary);
  box-shadow: 0 0 0 2px rgba(147, 51, 234, 0.28);
}

.view-full-image {
  align-self: flex-start;
}

.design-preview-animate {
  animation: copyPulse 0.6s ease-out;
}

.edit-pending-note {
  margin-top: 8px;
  text-align: start;
}

/* AI edit in progress: the design itself shows it, with the customer's request and the time so far. */
.design-preview-box.is-editing #design-preview {
  opacity: .55;
  filter: saturate(.7);
  -webkit-mask-image: linear-gradient(100deg, #000 35%, rgba(0, 0, 0, .45) 50%, #000 65%);
  mask-image: linear-gradient(100deg, #000 35%, rgba(0, 0, 0, .45) 50%, #000 65%);
  -webkit-mask-size: 300% 100%;
  mask-size: 300% 100%;
  animation: ad-copy-sweep 1.8s ease-in-out infinite;
  transition: opacity .3s ease-out, filter .3s ease-out;
}

.design-edit-progress {
  width: 100%;
  box-sizing: border-box;
  display: grid;
  gap: 8px;
  padding: 12px 14px;
  border-radius: 14px;
  background: #ffffff;
  border: 1px solid #e9e3fb;
  box-shadow: 0 1px 2px rgba(17, 24, 39, .04);
  text-align: start;
}

.design-edit-progress-head {
  display: flex;
  align-items: center;
  gap: 8px;
}

.design-edit-progress-head .ad-copy-spinner {
  width: 14px;
  height: 14px;
}

.design-edit-progress-title {
  flex: 1 1 auto;
  min-width: 0;
  font-size: 14px;
  font-weight: 500;
  line-height: 1.4;
  color: #1f2937;
}

.design-edit-progress-time {
  flex: 0 0 auto;
  font-size: 12px;
  font-weight: 500;
  font-variant-numeric: tabular-nums;
  color: color-mix(in srgb, var(--brand-primary, #7c3aed) 85%, #1f2937);
}

.design-edit-progress .design-edit-progress-request {
  margin: 0;
  padding: 8px 10px;
  border-radius: 10px;
  background: color-mix(in srgb, var(--brand-primary, #7c3aed) 6%, #ffffff);
  font-size: 13px;
  line-height: 1.5;
  color: #374151;
}

/* Clamp on the inner span so the box padding never shows a sliver of a third line. */
.design-edit-progress-request > span {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  overflow-wrap: anywhere;
}

.design-edit-progress .design-edit-progress-note {
  margin: 0;
  font-size: 12px;
  line-height: 1.5;
  color: #6b7280;
}

/* Version history: every version of the design on one rail, newest first, each one usable or editable again. */
.version-timeline {
  --vt-accent: var(--brand-primary, #7c3aed);
  --vt-accent-ink: color-mix(in srgb, var(--brand-primary, #7c3aed) 80%, #1f2937);
  margin-top: 16px;
  padding: 14px 16px 4px;
  border: 1px solid #eceef1;
  border-radius: 16px;
  background: #ffffff;
}

.vt-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 14px;
}

.vt-title {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  font-weight: 500;
  color: #1f2937;
}

.vt-title-icon,
.vt-title-icon svg {
  width: 16px;
  height: 16px;
  color: var(--vt-accent);
}

.vt-count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 24px;
  height: 24px;
  padding: 0 8px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--vt-accent) 9%, #ffffff);
  color: var(--vt-accent-ink);
  font-size: 12px;
  font-weight: 500;
  font-variant-numeric: tabular-nums;
}

.vt-list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.vt-step {
  position: relative;
  display: grid;
  grid-template-columns: 16px 64px minmax(0, 1fr);
  column-gap: 12px;
  padding-bottom: 16px;
}

.vt-step--pending,
.vt-step--failed {
  grid-template-columns: 16px minmax(0, 1fr);
}

.vt-step.is-overflow {
  display: none;
}

.version-timeline.is-expanded .vt-step.is-overflow {
  display: grid;
}

.vt-rail {
  position: relative;
  display: flex;
  justify-content: center;
  padding-top: 5px;
}

.vt-rail::after {
  content: '';
  position: absolute;
  top: 19px;
  bottom: -5px;
  inset-inline-start: 50%;
  width: 2px;
  margin-inline-start: -1px;
  background: #ece8f8;
}

.vt-step:last-child .vt-rail::after,
.version-timeline:not(.is-expanded) .vt-step:nth-child(3) .vt-rail::after {
  display: none;
}

.vt-dot {
  position: relative;
  z-index: 1;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #ffffff;
  border: 2px solid #cdc3ef;
}

.vt-step.is-current .vt-dot {
  background: var(--vt-accent);
  border-color: var(--vt-accent);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--vt-accent) 18%, transparent);
}

.vt-step--failed .vt-dot {
  border-color: #f1b5b0;
}

.vt-rail .ad-copy-spinner {
  position: relative;
  z-index: 1;
  width: 12px;
  height: 12px;
  background: #ffffff;
}

.vt-thumb {
  display: block;
  width: 64px;
  height: 64px;
  padding: 0;
  border: 1px solid #e5e7eb;
  border-radius: 10px;
  overflow: hidden;
  background: #f4f4f7;
  cursor: zoom-in;
}

.vt-thumb:focus-visible {
  outline: 2px solid var(--vt-accent);
  outline-offset: 2px;
}

.vt-thumb-media {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
}

.vt-step.is-current .vt-thumb {
  border-color: var(--vt-accent);
  box-shadow: 0 0 0 1px var(--vt-accent);
}

.vt-body {
  min-width: 0;
  display: grid;
  align-content: start;
  gap: 4px;
}

.vt-line {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 4px 8px;
}

.vt-name {
  font-size: 13px;
  font-weight: 500;
  color: #1f2937;
}

.vt-current-chip {
  display: none;
  align-items: center;
  padding: 1px 8px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--vt-accent) 10%, #ffffff);
  color: var(--vt-accent-ink);
  font-size: 12px;
  font-weight: 500;
}

.vt-step.is-current .vt-current-chip {
  display: inline-flex;
}

.vt-time {
  flex-basis: 100%;
  font-size: 12px;
  line-height: 1.4;
  color: #6b7280;
}

.version-timeline .vt-request,
.version-timeline .vt-from,
.version-timeline .vt-error {
  margin: 0;
}

.version-timeline .vt-request {
  font-size: 13px;
  line-height: 1.5;
  color: #374151;
}

.vt-request > span,
.vt-error > span {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  overflow-wrap: anywhere;
}

.version-timeline .vt-from {
  font-size: 12px;
  color: #6b7280;
}

.version-timeline .vt-error {
  font-size: 12px;
  line-height: 1.5;
  color: #b42318;
}

.vt-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0 16px;
}

.vt-action {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 32px;
  padding: 0;
  border: 0;
  border-radius: 6px;
  background: none;
  font: inherit;
  font-size: 12px;
  font-weight: 500;
  color: var(--vt-accent-ink);
  cursor: pointer;
}

.vt-action:hover:not(:disabled) {
  color: var(--vt-accent);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.vt-action:focus-visible {
  outline: 2px solid var(--vt-accent);
  outline-offset: 2px;
}

.vt-action:disabled {
  opacity: .5;
  cursor: default;
}

.vt-action.is-busy {
  opacity: 1;
}

.vt-action-icon,
.vt-action-icon svg {
  width: 14px;
  height: 14px;
}

.vt-step.is-current .vt-use {
  display: none;
}

.vt-more {
  display: block;
  width: 100%;
  min-height: 40px;
  margin-top: -4px;
  border: 0;
  border-top: 1px solid #f0f1f4;
  background: none;
  font: inherit;
  font-size: 13px;
  font-weight: 500;
  color: var(--vt-accent-ink);
  cursor: pointer;
}

.vt-more:focus-visible {
  outline: 2px solid var(--vt-accent);
  outline-offset: -2px;
}

@media (max-width: 640px) {
  .version-timeline {
    padding: 12px 12px 4px;
  }

  .vt-action {
    min-height: 40px;
  }
}

/* Design actions stay where they are during an edit, faded, instead of turning into grey blocks. */
.action-row.is-edit-locked .button:disabled {
  opacity: .45;
  background: #ffffff !important;
  border-color: #e5e7eb !important;
  color: #374151 !important;
}

@media (prefers-reduced-motion: reduce) {
  .design-preview-box.is-editing #design-preview {
    animation: none;
  }
}

/* Publish Type Modal */
.publish-type-card {
  max-width: 560px;
  font-family: inherit;
}

.publish-modal-card {
  border-radius: 18px;
}

.publish-type-card button,
.publish-type-card .publish-type-option {
  font-family: inherit;
}

.publish-type-card .modal-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--brand-border);
  margin-bottom: 16px;
}

.publish-type-card .modal-header h3 {
  margin: 0;
  font-size: 18px;
}

html[dir="rtl"] #publish-type-modal .modal-close,
[dir="rtl"] #publish-type-modal .modal-close,
.rtl #publish-type-modal .modal-close,
html[dir="rtl"] #publish-platform-modal .modal-close,
[dir="rtl"] #publish-platform-modal .modal-close,
.rtl #publish-platform-modal .modal-close {
  right: auto;
  left: 16px;
}

.publish-type-subtitle {
  color: var(--color-muted);
  font-size: 14px;
  margin-bottom: 20px;
}

.publish-type-options {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.publish-platform-options {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  margin-bottom: 12px;
}

.publish-platform-option {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 16px;
  border-radius: 12px;
  border: 1px solid var(--brand-border);
  background: #fff;
  font-weight: 500;
  color: var(--color-text);
  cursor: pointer;
  transition: border-color 0.2s ease, background 0.2s ease, transform 0.2s ease;
}

.publish-platform-option .action-icon {
  width: 18px;
  height: 18px;
  opacity: 0.2;
  color: var(--brand-primary);
}

.publish-platform-option.selected {
  border-color: var(--brand-primary);
  background: color-mix(in srgb, var(--brand-primary) 10%, #ffffff);
}

.publish-platform-option:hover {
  transform: translateY(-1px);
}

.publish-platform-option.selected .action-icon {
  opacity: 1;
}

.publish-type-option {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 18px 16px;
  border: 1px solid var(--brand-border);
  border-radius: 14px;
  background: #fff;
  cursor: pointer;
  transition: border-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
  text-align: center;
}

.publish-type-option:hover:not(.disabled) {
  border-color: var(--brand-primary);
  transform: translateY(-1px);
  box-shadow: 0 8px 20px rgba(17, 24, 39, 0.08);
}

.publish-type-option.disabled {
  opacity: 0.56;
  cursor: not-allowed;
}

.publish-type-icon {
  margin-bottom: 12px;
}

.publish-type-icon.size-indicator {
  margin-left: 0;
  border-width: 3px;
  border-radius: 12px;
  border-color: color-mix(in srgb, var(--brand-primary) 55%, transparent);
  background: color-mix(in srgb, var(--brand-primary) 10%, transparent);
}

.publish-type-icon.size-indicator.square {
  width: 44px;
  height: 44px;
}

.publish-type-icon.size-indicator.rect-post {
  width: 36px;
  height: 48px;
}

.publish-type-icon.size-indicator.rect {
  width: 32px;
  height: 52px;
}

.publish-type-label {
  font-size: 16px;
  font-weight: 700;
  color: var(--color-text);
  margin-bottom: 4px;
}

.publish-type-desc {
  font-size: 13px;
  color: var(--color-muted);
}

.publish-type-disabled-note {
  display: block;
  margin-top: 8px;
  font-size: 11px;
  color: #ef4444;
  font-weight: 500;
}

.publish-type-warning-box {
  display: flex;
  gap: 12px;
  margin-top: 16px;
  padding: 14px;
  background: #fff7ed;
  border: 1px solid #fed7aa;
  border-radius: 12px;
}

.publish-type-warning-box .warning-icon {
  font-size: 20px;
  flex-shrink: 0;
}

.publish-type-warning-box .warning-content {
  flex: 1;
}

.publish-type-warning-box .warning-title {
  font-weight: 700;
  color: #9a3412;
  font-size: 14px;
  margin-bottom: 4px;
}

.publish-type-warning-box .warning-text {
  color: #9a3412;
  font-size: 13px;
  line-height: 1.5;
  margin-bottom: 12px;
}

.publish-type-warning-box .warning-checkbox {
  display: flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  font-size: 13px;
  color: #9a3412;
  margin-bottom: 0;
}

.publish-type-warning-box .warning-checkbox input {
  width: 16px;
  height: 16px;
  cursor: pointer;
  accent-color: var(--brand-primary);
}

.publish-modal-actions {
  display: flex;
  gap: 10px;
  margin-top: 16px;
}

.publish-modal-btn {
  width: 100%;
}

.publish-modal-btn-primary {
  border: 1px solid transparent;
}

.publish-modal-btn-primary:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

.publish-type-option.is-active {
  border-color: var(--brand-primary);
  background: color-mix(in srgb, var(--brand-primary) 8%, #ffffff);
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--brand-primary) 18%, transparent);
}

@media (min-width: 480px) {
  .publish-modal-actions {
    justify-content: flex-end;
  }

  .publish-modal-btn {
    width: auto;
    min-width: 130px;
  }
}

@media (max-width: 479px) {
  .publish-type-options,
  .publish-platform-options {
    grid-template-columns: 1fr;
  }
}

/* Publishing Flow Modal */
.publishing-flow-modal {
  background: rgba(15, 23, 42, 0.52);
  backdrop-filter: blur(4px);
}

.publishing-flow-card {
  width: min(720px, 96vw);
  max-height: calc(100dvh - 32px);
  display: flex;
  flex-direction: column;
  padding: 0;
  overflow: hidden;
  border-radius: 22px;
  box-shadow: 0 28px 80px rgba(15, 23, 42, 0.24);
}

.publishing-flow-top {
  display: flex;
  justify-content: space-between;
  gap: 20px;
  align-items: flex-start;
  padding: 24px 26px 16px;
  border-bottom: 1px solid rgba(226, 232, 240, 0.9);
}

.publishing-flow-eyebrow {
  font-size: 13px;
  color: var(--brand-muted);
  font-weight: 700;
  margin-bottom: 6px;
}

.publishing-flow-top h3 {
  margin: 0;
  font-size: 24px;
  letter-spacing: -0.02em;
}

.publishing-flow-body {
  display: grid;
  gap: 14px;
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  padding: 18px 26px;
}

.publishing-flow-section,
.publishing-flow-schedule {
  background: #f8fafc;
  border: 1px solid rgba(226, 232, 240, 0.9);
  border-radius: 16px;
  padding: 14px;
}

.publishing-flow-section-title {
  font-size: 13px;
  font-weight: 700;
  color: var(--brand-muted);
  margin-bottom: 10px;
}

.publishing-caption-box,
.publishing-caption-input {
  width: 100%;
  min-height: 54px;
  max-height: 120px;
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  touch-action: pan-y;
  border-radius: 12px;
  background: #fff;
  border: 1px solid rgba(226, 232, 240, 0.9);
  padding: 12px 14px;
  color: var(--brand-text);
  white-space: pre-wrap;
  line-height: 1.5;
  font-size: 13px;
  font-weight: 400;
  box-sizing: border-box;
}

.publishing-caption-input {
  resize: vertical;
  font-family: inherit;
}

.publishing-caption-input:focus {
  outline: none;
  border-color: color-mix(in srgb, var(--brand-primary) 35%, #cbd5e1);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--brand-primary) 12%, transparent);
}

.publishing-assets-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(86px, 1fr));
  gap: 10px;
}

.publishing-assets-grid.is-sortable {
  gap: 12px;
}

.publishing-assets-hint {
  margin: -2px 0 10px;
  font-family: 'Tajawal', system-ui, -apple-system, 'Segoe UI', sans-serif;
  font-size: 12px;
  font-weight: 500;
  color: var(--brand-muted, #64748b);
  line-height: 1.4;
}

.publishing-asset-card {
  position: relative;
  min-width: 0;
}

.publishing-asset-card.is-sortable {
  cursor: grab;
  touch-action: none;
}

.publishing-asset-card.is-sortable .publishing-asset-tile {
  width: 100%;
  cursor: grab;
}

.publishing-asset-card.is-sortable.dragging {
  opacity: 0.55;
  cursor: grabbing;
}

.publishing-asset-card.is-sortable.dragging .publishing-asset-tile {
  cursor: grabbing;
  box-shadow: 0 10px 24px rgba(15, 23, 42, 0.18);
}

.publishing-asset-card.is-sortable:hover .publishing-asset-tile,
.publishing-asset-card.is-sortable:focus-within .publishing-asset-tile {
  transform: translateY(-1px);
  box-shadow: 0 8px 18px rgba(15, 23, 42, 0.12);
}

.publishing-ig-cover {
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid rgba(226, 232, 240, 0.95);
}

.publishing-ig-cover.is-hidden {
  display: none;
}

.publishing-ig-cover-row {
  display: grid;
  grid-template-columns: 72px minmax(0, 1fr);
  gap: 12px;
  align-items: center;
}

.publishing-ig-cover-preview {
  width: 72px;
  height: 72px;
  border-radius: 12px;
  overflow: hidden;
  background: #0f172a;
  border: 1px solid rgba(226, 232, 240, 0.95);
  position: relative;
}

.publishing-ig-cover-preview video,
.publishing-ig-cover-preview canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  pointer-events: none;
  background: #0f172a;
}

.publishing-ig-cover-preview canvas {
  opacity: 0;
  z-index: 1;
}

.publishing-ig-cover-preview.has-frame canvas {
  opacity: 1;
}

.publishing-ig-cover-meta {
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-width: 0;
}

.publishing-ig-cover-title {
  font-size: 13px;
  font-weight: 700;
  color: var(--brand-text);
}

.publishing-ig-cover-hint {
  font-size: 12px;
  font-weight: 400;
  color: var(--brand-muted);
  line-height: 1.4;
}

.publishing-ig-cover-time {
  font-size: 12px;
  font-weight: 500;
  color: var(--brand-text);
}

.publishing-ig-cover-slider {
  width: 100%;
  margin: 0;
  accent-color: var(--brand-primary);
}

.publishing-asset-tile {
  position: relative;
  aspect-ratio: 1;
  border-radius: 14px;
  overflow: hidden;
  background: #e2e8f0;
  border: 1px solid rgba(226, 232, 240, 0.95);
}

.publishing-asset-tile.is-clickable {
  padding: 0;
  cursor: zoom-in;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.publishing-asset-tile.is-clickable:hover,
.publishing-asset-tile.is-clickable:focus-visible {
  transform: translateY(-1px);
  box-shadow: 0 8px 18px rgba(15, 23, 42, 0.12);
  outline: none;
}

.publishing-asset-tile img,
.publishing-asset-tile video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.publishing-asset-tile video {
  background: #0f172a;
}

.publishing-asset-index {
  position: absolute;
  top: 6px;
  inset-inline-start: 6px;
  min-width: 22px;
  height: 22px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.92);
  color: var(--brand-primary);
  font-size: 12px;
  font-weight: 700;
}

.publishing-asset-video-badge {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 34px;
  height: 34px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transform: translate(-50%, -50%);
  border-radius: 999px;
  background: rgba(15, 23, 42, 0.72);
  box-shadow: 0 8px 18px rgba(15, 23, 42, 0.2);
}

.publishing-asset-video-badge::before {
  content: '';
  width: 0;
  height: 0;
  /* Physical left border — do NOT use logical inline-start or RTL flips ▶ into ◀ */
  margin-left: 3px;
  border-top: 7px solid transparent;
  border-bottom: 7px solid transparent;
  border-left: 11px solid #fff;
  border-right: 0;
}

.publishing-empty-assets {
  color: var(--brand-muted);
  font-size: 14px;
}

.publishing-platform-list {
  display: grid;
  gap: 8px;
}

.publishing-connect-meta-panel,
.publish-platform-options .publishing-connect-meta-panel {
  grid-column: 1 / -1;
  display: grid;
  gap: 12px;
  padding: 16px;
  border-radius: 14px;
  border: 1px solid color-mix(in srgb, var(--brand-primary) 18%, #e9e5ff);
  background: color-mix(in srgb, #f5f3ff 70%, #ffffff);
}

.publishing-connect-meta-heading {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  font-weight: 700;
  font-size: 15px;
  line-height: 1.3;
  color: var(--color-text);
}

.publishing-connect-meta-icons {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.publishing-connect-meta-icons img {
  width: 18px;
  height: 18px;
  object-fit: contain;
  display: block;
}

.publishing-connect-meta-desc {
  margin: 0;
  font-size: 13px;
  line-height: 1.5;
  color: var(--color-text-muted, #4b5563);
}

.publishing-connect-meta-cta {
  justify-self: start;
}

.publishing-platform-notice,
.publish-platform-options .publishing-platform-notice {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 12px;
  padding: 12px 14px;
  border-radius: 14px;
  border: 1px solid color-mix(in srgb, #f59e0b 35%, #fde68a);
  background: color-mix(in srgb, #fffbeb 80%, #ffffff);
  color: #92400e;
  font-size: 13px;
  line-height: 1.45;
}

.publishing-platform-notice-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  border-radius: 999px;
  background: #f59e0b;
  color: #fff;
  font-weight: 700;
  flex: 0 0 auto;
}

.publishing-platform-notice-text {
  flex: 1 1 auto;
  min-width: 0;
}

.publishing-platform-notice-link {
  color: #b45309;
  font-weight: 700;
  text-decoration: underline;
  text-underline-offset: 2px;
  white-space: nowrap;
}

.publishing-platform-notice-link:hover {
  color: #92400e;
}

.publishing-platform-row {
  width: 100%;
  display: grid;
  grid-template-columns: 24px 20px auto 10px 32px 1fr;
  gap: 9px;
  align-items: center;
  padding: 12px 14px;
  border-radius: 14px;
  border: 1px solid rgba(226, 232, 240, 0.9);
  background: #fff;
  color: var(--brand-text);
  cursor: pointer;
  text-align: start;
  font-family: inherit;
}

.publishing-platform-row.is-selected {
  border-color: color-mix(in srgb, var(--brand-primary) 45%, #e2e8f0);
  background: color-mix(in srgb, var(--brand-primary) 6%, #ffffff);
}

.publishing-platform-row.is-connect {
  grid-template-columns: 20px auto 10px 1fr auto;
  cursor: default;
}

.publishing-connect-row-status {
  min-width: 0;
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 4px 10px;
  font-size: 13px;
  color: var(--brand-muted, #6b7280);
}

.publishing-connect-row-guide {
  font-size: 12px;
  color: inherit;
  text-decoration: underline;
  text-underline-offset: 2px;
}

.publishing-connect-row-cta {
  justify-self: end;
  white-space: nowrap;
}

.publishing-platform-row.is-disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.publishing-type-linkedin-hint {
  margin: 10px 0 0;
  font-size: 12px;
  line-height: 1.5;
  color: var(--color-text-muted, #6b7280);
}

.publishing-x-note,
.publishing-tiktok-note {
  margin: -6px 0 0;
  font-size: 12px;
  line-height: 1.5;
  color: var(--color-text-muted, #6b7280);
}

.publishing-platform-check {
  width: 22px;
  height: 22px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid #cbd5e1;
  color: transparent;
}

.publishing-platform-row.is-selected .publishing-platform-check {
  background: var(--brand-primary);
  border-color: var(--brand-primary);
  color: #fff;
}

.publishing-platform-check .icon {
  width: 13px;
  height: 13px;
}

.publishing-platform-icon,
.publishing-account-avatar {
  width: 20px;
  height: 20px;
  border-radius: 999px;
}

.publishing-platform-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--brand-primary);
}

.publishing-platform-glyph {
  width: 17px;
  height: 17px;
  display: block;
}

.publishing-account-avatar {
  width: 32px;
  height: 32px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: #eef2ff;
  color: var(--brand-primary);
  font-weight: 700;
  overflow: hidden;
}

.publishing-account-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.publishing-platform-name,
.publishing-account-label {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.publishing-platform-name {
  font-size: 14px;
  font-weight: 500;
  color: #6b7280;
}

.publishing-platform-dot {
  color: var(--brand-muted);
}

.publishing-account-label {
  color: var(--brand-muted);
}

.publishing-type-row,
.publishing-flow-schedule,
.publishing-datetime-group,
.publishing-flow-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
}

.publishing-type-row {
  position: relative;
  display: inline-grid;
  grid-template-columns: repeat(2, minmax(118px, 1fr));
  gap: 0;
  padding: 4px;
  border-radius: 18px;
  background:
    radial-gradient(circle at 18px 12px, rgba(255, 255, 255, 0.95), transparent 42px),
    linear-gradient(135deg, #f8fafc, #ffffff 48%, #f5f3ff);
  box-shadow:
    inset 0 0 0 1px rgba(226, 232, 240, 0.95),
    0 10px 24px rgba(15, 23, 42, 0.06);
  isolation: isolate;
  overflow: hidden;
}

.publishing-type-row::before {
  content: '';
  position: absolute;
  z-index: 0;
  inset-block: 4px;
  inset-inline-start: 4px;
  width: calc(50% - 4px);
  border-radius: 15px;
  background: linear-gradient(135deg, #7c3aed, #a855f7);
  box-shadow:
    0 8px 18px rgba(124, 58, 237, 0.28),
    inset 0 0 0 1px rgba(255, 255, 255, 0.22);
  transition: inset-inline-start 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
}

.publishing-type-row.is-story::before {
  inset-inline-start: 50%;
}

.publishing-datetime-group.hidden,
.publishing-story-warning.hidden,
.publishing-flow-actions .hidden {
  display: none;
}

.publishing-type-pill,
.publishing-schedule-pill,
.publishing-date-input {
  min-height: 46px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  border-radius: 14px;
  border: 1px solid rgba(226, 232, 240, 0.95);
  background: #fff;
  color: var(--brand-text);
  padding: 10px 16px;
  font-weight: 700;
  font-family: inherit;
}

.publishing-type-pill {
  position: relative;
  z-index: 1;
  border-color: transparent;
  background: transparent;
  box-shadow: none;
  min-width: 0;
  color: #111827;
  transition: color 0.18s ease, transform 0.18s ease;
}

.publishing-type-pill,
.publishing-schedule-pill {
  cursor: pointer;
}

.publishing-type-pill.is-active {
  background: transparent;
  border-color: transparent;
  box-shadow: none;
  color: #fff;
  text-shadow: 0 1px 10px rgba(255, 255, 255, 0.35);
}

.publishing-schedule-pill.is-active {
  background: color-mix(in srgb, var(--brand-primary) 12%, #ffffff);
  border-color: color-mix(in srgb, var(--brand-primary) 45%, #e2e8f0);
  color: var(--brand-primary);
}

.publishing-type-pill.is-disabled {
  opacity: 0.55;
  cursor: not-allowed;
}

.publishing-story-warning {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 10px;
  color: #9a3412;
  font-size: 13px;
}

.publishing-date-input {
  padding: 0 12px;
  box-shadow: 0 6px 16px rgba(15, 23, 42, 0.06);
  font-weight: 400;
}

.publishing-date-input input,
.publishing-date-input select {
  border: 0;
  outline: none;
  background: transparent;
  min-height: 42px;
  font: inherit;
  font-weight: 400;
  color: var(--brand-text);
}

.publishing-date-input select {
  cursor: pointer;
  appearance: none;
  padding-inline-end: 2px;
}

.publishing-date-input .icon,
.publishing-schedule-pill .icon {
  width: 16px;
  height: 16px;
  color: var(--brand-muted);
}

.publishing-flow-status {
  min-height: 20px;
  font-size: 14px;
  color: var(--brand-muted);
}

.publishing-flow-status.is-error {
  color: #dc2626;
}

.publishing-flow-status.is-success {
  color: #16a34a;
}

.publishing-result-card {
  display: grid;
  gap: 14px;
  padding: 16px;
  border-radius: 16px;
  background: #fff;
  border: 1px solid rgba(226, 232, 240, 0.95);
  color: var(--brand-text);
}

.publishing-result-card.is-success {
  background: #f0fdf4;
  border: 1px solid #bbf7d0;
}

.publishing-result-card.is-error {
  background: #fff7ed;
  border: 1px solid #fed7aa;
}

.publishing-progress-card {
  padding: 18px;
  border-radius: 16px;
  background: #fff;
  border: 1px solid rgba(226, 232, 240, 0.95);
  box-shadow: 0 16px 40px rgba(15, 23, 42, 0.08);
}

.publishing-progress-card strong {
  display: block;
  margin-bottom: 14px;
  font-size: 18px;
  color: var(--brand-text);
}

.publishing-progress-list {
  display: grid;
  gap: 10px;
}

.publishing-progress-row {
  display: flex;
  align-items: center;
  gap: 10px;
  color: var(--brand-text);
  font-size: 15px;
  font-weight: 500;
}

.publishing-progress-spinner {
  width: 16px;
  height: 16px;
  border-radius: 999px;
  border: 2px dotted color-mix(in srgb, var(--brand-primary) 78%, #ffffff);
  animation: publishingProgressSpin 900ms linear infinite;
}

.publishing-progress-card p {
  margin: 16px 0 0;
  color: var(--brand-muted);
  font-size: 13px;
  line-height: 1.5;
}

@keyframes publishingProgressSpin {
  to {
    transform: rotate(360deg);
  }
}

.publishing-result-card strong,
.publishing-result-card span {
  display: block;
}

.publishing-result-hint {
  margin-top: 6px;
  color: var(--brand-muted);
  font-size: 13px;
  line-height: 1.45;
}

.publishing-result-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.publishing-result-guide-link {
  min-height: 40px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 9px 14px;
  border-radius: 12px;
  border: 1px solid color-mix(in srgb, var(--brand-primary) 24%, #e2e8f0);
  background: color-mix(in srgb, var(--brand-primary) 7%, #ffffff);
  color: var(--brand-primary);
  font-size: 13px;
  font-weight: 700;
  text-decoration: none;
  transition: background 0.18s ease, border-color 0.18s ease, transform 0.18s ease;
}

.publishing-result-guide-link:hover {
  background: color-mix(in srgb, var(--brand-primary) 11%, #ffffff);
  border-color: color-mix(in srgb, var(--brand-primary) 36%, #e2e8f0);
  transform: translateY(-1px);
}

.publishing-result-guide-link .icon {
  width: 15px;
  height: 15px;
}

.publishing-result-platforms {
  display: grid;
  gap: 10px;
}

.publishing-result-platform {
  display: flex;
  align-items: center;
  gap: 10px;
  font-weight: 700;
  color: var(--brand-text);
}

.publishing-result-platform-icon {
  width: 22px;
  height: 22px;
  border-radius: 999px;
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  flex: 0 0 22px;
  font-size: 13px;
  font-weight: 700;
}

.publishing-result-platform.is-success .publishing-result-platform-icon {
  background: var(--brand-primary);
  color: #fff;
}

.publishing-result-platform.is-error .publishing-result-platform-icon {
  background: #ef4444;
  color: #fff;
}

.publishing-result-platform-icon .icon {
  width: 13px;
  height: 13px;
}

.publishing-flow-actions {
  flex: 0 0 auto;
  justify-content: flex-end;
  padding: 16px 26px 22px;
  border-top: 1px solid rgba(226, 232, 240, 0.9);
  background: var(--brand-card);
}

.publishing-scheduled-link {
  margin-inline-end: auto;
}

html[dir="rtl"] #publishing-flow-modal .modal-close,
[dir="rtl"] #publishing-flow-modal .modal-close,
.rtl #publishing-flow-modal .modal-close,
html[dir="rtl"] #cal-bulk-schedule-modal .modal-close,
[dir="rtl"] #cal-bulk-schedule-modal .modal-close,
.rtl #cal-bulk-schedule-modal .modal-close,
html[lang="ar"] #cal-bulk-schedule-modal .modal-close,
html[lang="he"] #cal-bulk-schedule-modal .modal-close {
  right: auto;
  left: 16px;
}

@media (max-width: 640px) {
  #publishing-flow-modal.modal {
    align-items: stretch;
    justify-content: center;
    padding: max(8px, env(safe-area-inset-top)) 8px max(8px, env(safe-area-inset-bottom));
  }

  .publishing-flow-card {
    width: min(720px, calc(100vw - 16px));
    height: calc(100dvh - max(16px, env(safe-area-inset-top)) - max(16px, env(safe-area-inset-bottom)));
    max-height: calc(100dvh - max(16px, env(safe-area-inset-top)) - max(16px, env(safe-area-inset-bottom)));
    min-height: 0;
    display: block;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }

  .publishing-flow-top,
  .publishing-flow-body,
  .publishing-flow-actions {
    padding-inline: 16px;
  }

  .publishing-flow-top {
    padding-top: 16px;
    padding-bottom: 12px;
  }

  .publishing-flow-body {
    overflow: visible;
    padding-block: 12px;
  }

  .publishing-flow-actions {
    padding-top: 10px;
    padding-bottom: max(12px, env(safe-area-inset-bottom));
    background: var(--brand-card);
  }

  #publishing-flow-submit {
    order: 1;
  }

  .publishing-scheduled-link {
    order: 2;
  }

  #publishing-flow-cancel {
    order: 3;
  }

  .publishing-platform-row {
    grid-template-columns: 24px 20px 1fr;
  }

  .publishing-platform-dot,
  .publishing-account-avatar,
  .publishing-account-label {
    display: none;
  }

  .publishing-date-input,
  .publishing-flow-actions .button,
  .publishing-scheduled-link {
    width: 100%;
  }

  .publishing-scheduled-link {
    margin-inline-end: 0;
  }
}

/* Edit History for users */
.toggle-icon {
  font-family: 'Tajawal', 'Cairo', system-ui, -apple-system, Segoe UI, sans-serif;
  font-size: 12px;
  transition: transform 0.2s;
}

.edit-error {
  font-size: 12px;
  color: #dc2626;
  background: #fff5f5;
  padding: 6px 10px;
  border-radius: 8px;
  margin-bottom: 12px;
  border: 1px solid rgba(239, 68, 68, 0.12);
}

.modal {
  position: fixed;
  inset: 0;
  background: rgba(15, 23, 42, 0.7);
  display: none;
  align-items: center;
  justify-content: center;
  padding: 24px;
  z-index: 50;
}

.modal.open {
  display: flex;
}

.modal.is-open {
  display: flex;
}

.modal-card {
  background: var(--brand-card);
  border-radius: 20px;
  max-width: 900px;
  width: 100%;
  padding: 16px;
  box-shadow: var(--shadow-card);
}

.admin-user-modal {
  max-width: 960px;
}

.crm-table-wrap {
  width: 100%;
  overflow: auto;
}

.crm-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}

.crm-table th,
.crm-table td {
  padding: 10px 12px;
  border-bottom: 1px solid var(--brand-border);
  text-align: left;
  white-space: nowrap;
}

.crm-table th {
  position: sticky;
  top: 0;
  background: var(--brand-card);
  z-index: 1;
}

.crm-metrics {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 8px;
  margin-top: 10px;
}

.crm-metric {
  border: 1px solid var(--brand-border);
  border-radius: 12px;
  padding: 8px 10px;
  background: var(--brand-surface);
}

.cancel-modal {
  max-width: 760px;
  padding: 28px 32px 24px;
}

.cancel-modal .cancel-step {
  display: grid;
  gap: 14px;
}

.cancel-modal-alert-slot:empty {
  display: none;
}

.cancel-modal-alert-slot {
  margin: 0 0 10px;
  position: relative;
  z-index: 3;
}

.cancel-modal .modal-title {
  margin: 0;
  padding-inline-end: 48px;
  font-size: 22px;
  line-height: 1.3;
  letter-spacing: -0.01em;
  font-weight: 700;
}

.cancel-modal p,
.cancel-modal .muted,
.cancel-modal .alert,
.cancel-modal .alert p,
.cancel-modal .alert span {
  font-size: 16px;
  line-height: 1.6;
}

.cancel-modal p {
  margin: 0;
}

.cancel-modal .muted {
  color: #64748b;
}

.cancel-modal .field {
  margin: 0;
}

.cancel-modal .field label {
  display: block;
  margin-bottom: 8px;
  font-size: 15px;
  line-height: 1.45;
  font-weight: 700;
  color: #334155;
}

.cancel-modal .field select,
.cancel-modal .field textarea,
.cancel-modal .field input {
  font-size: 16px;
  line-height: 1.5;
}

.cancel-modal .field textarea {
  min-height: 124px;
}

.cancel-modal .modal-actions {
  margin-top: 4px;
  padding-top: 16px;
  border-top: 1px solid color-mix(in srgb, var(--brand-border, #e2e8f0) 82%, transparent);
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
}

html[dir="rtl"] #cancel-modal .modal-close,
[dir="rtl"] #cancel-modal .modal-close,
.rtl #cancel-modal .modal-close,
html[dir="rtl"] #delete-modal .modal-close,
[dir="rtl"] #delete-modal .modal-close,
.rtl #delete-modal .modal-close {
  left: 16px;
  right: auto;
}

html[dir="rtl"] .cancel-modal,
[dir="rtl"] .cancel-modal,
.rtl .cancel-modal {
  text-align: right;
}

html[dir="rtl"] .cancel-modal .modal-actions,
[dir="rtl"] .cancel-modal .modal-actions,
.rtl .cancel-modal .modal-actions {
  justify-content: flex-start;
}

@media (max-width: 640px) {
  .cancel-modal {
    padding: 22px 18px 18px;
  }

  .cancel-modal .modal-title {
    font-size: 22px;
    padding-inline-end: 40px;
  }

  .cancel-modal .modal-actions {
    flex-wrap: wrap;
  }

  .cancel-modal .modal-actions .button {
    flex: 1 1 160px;
  }

}

.cancel-step.hidden {
  display: none;
}

/* Cancel flow (ui/profile.html #cancel-modal): founder message, reason, save offer, what stops, confirm. */
#cancel-modal .cancel-modal {
  max-width: 680px;
  padding: 28px 32px 24px;
  color: var(--brand-ink, #1a202c);
}

#cancel-modal .cancel-step {
  gap: 16px;
}

#cancel-modal .cancel-close {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #475569;
  transition: background-color 0.15s ease, color 0.15s ease;
}

#cancel-modal .cancel-close:hover {
  background: rgba(15, 23, 42, 0.12);
  color: var(--brand-ink, #1a202c);
}

#cancel-modal .cancel-close svg {
  width: 18px;
  height: 18px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
}

#cancel-modal .cancel-title {
  margin: 0;
  padding-inline-end: 44px;
  font-size: 22px;
  line-height: 1.3;
  font-weight: 700;
  letter-spacing: -0.01em;
  text-wrap: balance;
  outline: none;
}

#cancel-modal .cancel-subtitle {
  margin: 0;
  font-size: 15px;
  line-height: 1.45;
  font-weight: 500;
}

#cancel-modal p,
#cancel-modal li {
  margin: 0;
  font-size: 15px;
  line-height: 1.6;
}

#cancel-modal .muted {
  color: #64748b;
}

#cancel-modal .cancel-title + .cancel-lead {
  margin-top: -10px;
}

#cancel-modal .field label {
  font-size: 15px;
  font-weight: 500;
  color: #334155;
}

#cancel-modal .field textarea {
  min-height: 0;
  font-size: 15px;
}

#cancel-modal .field textarea[aria-invalid="true"] {
  border-color: #dc2626;
  box-shadow: 0 0 0 3px rgba(220, 38, 38, 0.12);
}

#cancel-modal .cancel-field-error,
#cancel-modal .cancel-step-error {
  display: flex;
  align-items: flex-start;
  gap: 6px;
  margin: 0;
  font-size: 13px;
  line-height: 1.5;
  color: #b91c1c;
}

#cancel-modal .cancel-field-error {
  margin-top: 6px;
}

#cancel-modal .cancel-field-error::before,
#cancel-modal .cancel-step-error::before {
  content: "";
  flex: none;
  width: 14px;
  height: 14px;
  margin-top: 0.2em;
  background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 7.5v5.5M12 16.5v.01'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 7.5v5.5M12 16.5v.01'/%3E%3C/svg%3E") center / contain no-repeat;
}

#cancel-modal .cancel-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
  margin-top: 4px;
  padding-top: 16px;
  border-top: 1px solid var(--brand-border, #e6e8f0);
}

html[dir="rtl"] #cancel-modal .cancel-actions,
[dir="rtl"] #cancel-modal .cancel-actions {
  justify-content: flex-start;
}

#cancel-modal .button:focus-visible,
#cancel-modal .cancel-reason:has(input:focus-visible) {
  outline: 2px solid var(--brand-primary, #7c3aed);
  outline-offset: 2px;
}

#cancel-modal .hidden {
  display: none !important;
}

#cancel-modal ::selection {
  background: color-mix(in srgb, var(--brand-primary, #7c3aed) 22%, #fff);
}

/* 1. Founder */
#cancel-modal .cancel-founder {
  display: flex;
  align-items: center;
  gap: 16px;
  padding-inline-end: 44px;
}

#cancel-modal .cancel-founder .cancel-title {
  padding-inline-end: 0;
}

#cancel-modal .cancel-founder-photo {
  width: 64px;
  height: 64px;
  flex: none;
  border-radius: 50%;
  object-fit: cover;
  box-shadow: 0 0 0 3px #fff, 0 0 0 4px var(--brand-border, #e6e8f0), 0 6px 16px rgba(15, 23, 42, 0.12);
}

#cancel-modal .cancel-founder-byline {
  margin-top: 2px;
  font-size: 13px;
  color: #64748b;
}

#cancel-modal .cancel-promise {
  justify-self: start;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 12px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--brand-primary, #7c3aed) 9%, #fff);
  color: color-mix(in srgb, var(--brand-primary, #7c3aed) 78%, #1e1b4b);
  font-size: 13px;
  font-weight: 500;
  line-height: 1.4;
}

#cancel-modal .cancel-promise svg {
  width: 16px;
  height: 16px;
  flex: none;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
}

/* 2. Reason */
#cancel-modal .cancel-reasons {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

#cancel-modal .cancel-reason {
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 48px;
  padding: 10px 14px;
  border: 1px solid var(--brand-border, #e6e8f0);
  border-radius: 12px;
  background: #fff;
  font-size: 15px;
  line-height: 1.4;
  cursor: pointer;
  transition: border-color 0.15s ease, background-color 0.15s ease;
}

#cancel-modal .cancel-reason:hover {
  border-color: #cbd5e1;
}

#cancel-modal .cancel-reason input {
  appearance: none;
  -webkit-appearance: none;
  flex: none;
  width: 18px;
  height: 18px;
  margin: 0;
  border: 1.5px solid #94a3b8;
  border-radius: 50%;
  background: #fff;
  transition: border-color 0.15s ease, background-color 0.15s ease, box-shadow 0.15s ease;
}

#cancel-modal .cancel-reason input:checked {
  border-color: var(--brand-primary, #7c3aed);
  background: var(--brand-primary, #7c3aed);
  box-shadow: inset 0 0 0 3px #fff;
}

#cancel-modal .cancel-reason:has(input:checked) {
  border-color: var(--brand-primary, #7c3aed);
  background: color-mix(in srgb, var(--brand-primary, #7c3aed) 6%, #fff);
}

/* 3. Offer */
#cancel-modal .cancel-offer {
  display: grid;
  gap: 14px;
  padding: 20px;
  border-radius: 16px;
  border: 1px solid color-mix(in srgb, var(--brand-primary, #7c3aed) 24%, #fff);
  background: color-mix(in srgb, var(--brand-primary, #7c3aed) 6%, #fff);
}

#cancel-modal .cancel-offer-price {
  color: #475569;
}

#cancel-modal .cancel-offer-price strong {
  font-size: 28px;
  line-height: 1.1;
  font-weight: 500;
  color: color-mix(in srgb, var(--brand-primary, #7c3aed) 82%, #1e1b4b);
  font-variant-numeric: tabular-nums;
}

#cancel-modal .cancel-offer-price s {
  color: #94a3b8;
  font-variant-numeric: tabular-nums;
}

#cancel-modal .cancel-ticks,
#cancel-modal .cancel-crosses {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 6px;
}

#cancel-modal .cancel-ticks li,
#cancel-modal .cancel-crosses li {
  position: relative;
  padding-inline-start: 26px;
}

#cancel-modal .cancel-ticks li::before,
#cancel-modal .cancel-crosses li::before {
  content: "";
  position: absolute;
  inset-inline-start: 0;
  top: 0.32em;
  width: 16px;
  height: 16px;
  background: var(--brand-primary, #7c3aed);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E") center / contain no-repeat;
}

#cancel-modal .cancel-crosses li::before {
  background: #dc2626;
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.5' stroke-linecap='round'%3E%3Cpath d='M7 7l10 10M17 7L7 17'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.5' stroke-linecap='round'%3E%3Cpath d='M7 7l10 10M17 7L7 17'/%3E%3C/svg%3E");
}

#cancel-modal .cancel-offer-accept {
  justify-self: start;
  min-height: 46px;
  padding: 0 22px;
  font-size: 15px;
}

#cancel-modal .cancel-help {
  display: grid;
  gap: 10px;
  padding: 16px;
  border: 1px solid var(--brand-border, #e6e8f0);
  border-radius: 14px;
}

#cancel-modal .cancel-help-row {
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 16px;
}

#cancel-modal .cancel-help .cancel-subtitle + .muted {
  margin-top: 2px;
}

/* Result */
#cancel-modal .cancel-modal:has(.cancel-result:not(.hidden)) {
  max-width: 460px;
}

#cancel-modal .cancel-result {
  justify-items: center;
  text-align: center;
  gap: 12px;
  padding: 8px 4px 0;
}

#cancel-modal .cancel-result .cancel-title {
  padding-inline-end: 0;
}

#cancel-modal .cancel-result-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  margin-bottom: 4px;
  border-radius: 50%;
  background: color-mix(in srgb, var(--brand-primary, #7c3aed) 10%, #fff);
  color: var(--brand-primary, #7c3aed);
}

#cancel-modal .cancel-result-icon.is-calendar {
  background: #f1f5f9;
  color: #334155;
}

#cancel-modal .cancel-result-icon.is-alert {
  background: #fef2f2;
  color: #b91c1c;
}

#cancel-modal .cancel-result-icon svg {
  width: 26px;
  height: 26px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

#cancel-modal .cancel-result-body {
  max-width: 36ch;
  color: #475569;
}

#cancel-modal .cancel-result-done {
  min-width: 160px;
  min-height: 44px;
  margin-top: 8px;
}

/* 4. What you built + what stops */
#cancel-modal .cancel-thumbs {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
}

#cancel-modal .cancel-thumbs img,
#cancel-modal .cancel-thumbs video {
  width: 100%;
  aspect-ratio: 1;
  object-fit: cover;
  border-radius: 8px;
  background: #f1f5f9;
}

#cancel-modal .cancel-made {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 4px 18px;
  color: #475569;
}

#cancel-modal .cancel-made strong {
  font-weight: 500;
  color: var(--brand-ink, #1a202c);
  font-variant-numeric: tabular-nums;
}

#cancel-modal .cancel-stops {
  display: grid;
  gap: 10px;
  padding: 16px;
  border-radius: 14px;
  background: #f8fafc;
  border: 1px solid var(--brand-border, #e6e8f0);
}

#cancel-modal .cancel-stops .muted {
  font-size: 13px;
  line-height: 1.5;
}

@media (max-width: 640px) {
  #cancel-modal .cancel-modal {
    padding: 22px 18px 18px;
  }

  #cancel-modal .cancel-title {
    font-size: 20px;
  }

  #cancel-modal .cancel-founder-photo {
    width: 52px;
    height: 52px;
  }

  #cancel-modal .cancel-reasons {
    grid-template-columns: minmax(0, 1fr);
  }

  #cancel-modal .cancel-offer {
    padding: 16px;
  }

  #cancel-modal .cancel-offer-accept {
    justify-self: stretch;
  }

  #cancel-modal .cancel-help-row {
    grid-template-columns: minmax(0, 1fr);
  }

  #cancel-modal .cancel-help-row .button {
    justify-self: start;
  }

  #cancel-modal .cancel-actions {
    flex-direction: column-reverse;
    align-items: stretch;
  }

  #cancel-modal .cancel-actions .button {
    width: 100%;
  }
}


.cancel-impact {
  margin-top: 12px;
  display: grid;
  gap: 12px;
}

.cancel-impact-row {
  display: grid;
  gap: 6px;
  padding: 14px 16px;
  border: 1px solid var(--brand-border);
  border-radius: 16px;
  background: linear-gradient(180deg, #ffffff 0%, var(--brand-surface) 100%);
}

.cancel-impact-label {
  font-size: 14px;
  line-height: 1.45;
  font-weight: 500;
  color: #64748b;
}

.cancel-impact-value {
  font-size: 22px;
  line-height: 1.1;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: #0f172a;
}

.cancel-preview-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
  gap: 10px;
}

.cancel-preview-grid img,
.cancel-preview-grid video {
  width: 100%;
  height: 92px;
  object-fit: cover;
  border-radius: 10px;
  border: 1px solid var(--brand-border);
  background: var(--brand-surface);
}

.cancel-impact-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 10px;
}

.cancel-impact-card {
  border: 1px solid var(--brand-border);
  border-radius: 12px;
  padding: 10px 12px;
  background: var(--brand-surface);
}

.cancel-impact-card .value {
  font-size: 18px;
  font-weight: 700;
}

.cancel-warning-list {
  display: grid;
  gap: 8px;
  margin-top: 12px;
}

.button.danger {
  background: transparent;
  color: #dc2626;
  border: 1px solid #fecaca;
  box-shadow: none;
}

.button.danger:hover {
  background: rgba(220, 38, 38, 0.08);
  color: #b91c1c;
  border-color: #fca5a5;
  transform: none;
}

.modal-card img {
  width: 100%;
  border-radius: 16px;
}

.social-preview {
  border: 1px solid var(--brand-border);
  border-radius: 18px;
  overflow: hidden;
  box-shadow: var(--shadow-card);
  background: #ffffff;
}

.social-preview.facebook {
  border-radius: 16px;
}

.social-header.facebook {
  background: #f8fafc;
}

.social-actions.facebook {
  justify-content: space-between;
  font-size: 14px;
  color: var(--brand-muted);
}

.social-actions.facebook span {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.tabs {
  display: flex;
  gap: 8px;
  margin: 12px 0;
  flex-wrap: nowrap;
  align-items: center;
  overflow-x: auto;
}

.tab-button {
  padding: 6px 12px;
  border-radius: 999px;
  border: 1px solid var(--brand-border);
  background: #ffffff;
  font-weight: 700;
  font-size: 13px;
  line-height: 1;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: 'Cairo', 'Tajawal', system-ui, -apple-system, Segoe UI, sans-serif;
}

.tab-button .social-logo {
  width: 18px;
  height: 18px;
  margin: 0;
}

.tab-button.published-tab {
  cursor: default;
}

.tab-button.published-tab .action-icon,
.tab-button.published-tab .action-icon svg {
  width: 12px;
  height: 12px;
}

.tab-link .social-logo {
  width: 28px;
  height: 28px;
}

.tab-links {
  display: inline-flex;
  align-items: center;
  gap: 10px;
}

.tab-links-row {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-top: 6px;
}

.tab-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.publish-links-row {
  display: flex;
  gap: 10px;
  align-items: center;
  flex-wrap: wrap;
}

.publish-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--brand-primary);
  font-weight: 500;
  text-decoration: none;
}

.publish-link:hover {
  text-decoration: underline;
}

.tab-step.published-links {
  gap: 10px;
}

.tab-step {
  display: flex;
  align-items: center;
  gap: 12px;
  flex: 0 0 auto;
}

.tab-connector {
  width: 16px;
  height: 2px;
  background: var(--brand-border);
  border-radius: 999px;
}

.tab-connector.published-connector {
  background: rgba(34, 197, 94, 0.5);
}

.tab-step.completed .tab-button:not(.active) {
  border-color: var(--brand-success);
  background: rgba(34, 197, 94, 0.14);
  color: var(--brand-success);
}

.tab-step.completed .tab-button.active {
  border-color: var(--brand-success);
  background: rgba(34, 197, 94, 0.18);
  color: var(--brand-success);
}

.tab-step.completed .tab-connector {
  background: linear-gradient(90deg, var(--brand-success), #4ade80);
}
.tab-button.active {
  border-color: var(--brand-primary);
  background: rgba(147, 51, 234, 0.1);
  color: var(--brand-primary);
}

.job-details-card .tabs,
.job-details-modal .tabs {
  margin: 2px 0 10px;
  gap: 5px;
}
.job-details-card .job-meta-lines,
.job-details-modal .job-meta-lines {
  margin-bottom: 0;
}
.job-details-card .job-message-expand,
.job-details-modal .job-message-expand {
  margin: 0 auto;
  height: 14px;
}

.job-details-card .tab-step,
.job-details-modal .tab-step {
  gap: 6px;
}

.job-details-card .tab-button,
.job-details-modal .tab-button {
  min-height: 26px;
  padding: 5px 9px;
  font-size: 11.5px;
  color: color-mix(in srgb, var(--brand-muted, #64748b) 88%, #ffffff);
  background: rgba(248, 250, 252, 0.75);
  border-color: rgba(148, 163, 184, 0.26);
}

.job-details-card .tab-button.active,
.job-details-modal .tab-button.active {
  color: var(--brand-primary);
  background: color-mix(in srgb, var(--brand-primary, #7c3aed) 12%, #ffffff);
  border-color: color-mix(in srgb, var(--brand-primary, #7c3aed) 36%, transparent);
  box-shadow: 0 3px 10px rgba(147, 51, 234, 0.08);
}

.job-details-card .tab-step.completed .tab-button:not(.active),
.job-details-modal .tab-step.completed .tab-button:not(.active) {
  color: color-mix(in srgb, var(--brand-success, #22c55e) 70%, var(--brand-muted, #64748b));
  background: rgba(34, 197, 94, 0.08);
  border-color: rgba(34, 197, 94, 0.16);
}

.job-details-card .tab-step.completed .tab-button.active,
.job-details-modal .tab-step.completed .tab-button.active {
  color: var(--brand-success);
  background: rgba(34, 197, 94, 0.12);
  border-color: rgba(34, 197, 94, 0.24);
}

.job-details-card .tab-connector,
.job-details-modal .tab-connector {
  width: 12px;
  opacity: 0.45;
}

.tab-panel {
  display: none;
}

.tab-panel.active {
  display: block;
}
.swipe-flow-tabs {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  overflow-x: hidden;
}
.swipe-flow-tabs .tab-step {
  min-width: 0;
  gap: 0;
}
.swipe-flow-tabs .tab-connector {
  display: none;
}
.swipe-flow-tabs .tab-button {
  width: 100%;
  min-width: 0;
  justify-content: center;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.job-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 8px;
}

.job-title-stack {
  min-width: 0;
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.job-stage-row {
  display: flex;
  align-items: center;
  gap: 6px;
}

.job-meta {
  display: flex;
  align-items: center;
  gap: 5px;
  flex-wrap: wrap;
  color: var(--brand-muted);
  font-size: 11px;
  text-transform: none;
  letter-spacing: 0.01em;
}

.job-meta-item {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.job-meta-label {
  font-weight: 500;
}

.job-meta-value {
  font-weight: 700;
  color: var(--brand-ink);
}

.job-number {
  font-weight: 700;
  opacity: 0.5;
}

.job-stage {
  min-width: 0;
  font-weight: 700;
  font-size: 19px;
  line-height: 1.25;
  color: var(--brand-ink);
}

.brand-card {
  display: flex;
  flex-direction: column;
  gap: 16px;
  position: relative;
  direction: ltr;
  text-align: left;
}

.brand-summary {
  display: flex;
  gap: 14px;
  align-items: center;
}

.brand-summary-logo {
  width: 52px;
  height: 52px;
  border-radius: 14px;
  background: rgba(147, 51, 234, 0.12);
  display: grid;
  place-items: center;
  overflow: hidden;
  font-weight: 700;
  color: var(--brand-primary);
}

.brand-summary-logo.large {
  width: 72px;
  height: 72px;
  border-radius: 18px;
}

html[dir="ltr"] #brand-summary-card:not(.brand-collapsed) .brand-summary-logo.large,
[dir="ltr"] #brand-summary-card:not(.brand-collapsed) .brand-summary-logo.large,
.ltr #brand-summary-card:not(.brand-collapsed) .brand-summary-logo.large {
  margin-left: 52px;
}

.brand-summary-logo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

a.brand-summary-logo {
  cursor: pointer;
  text-decoration: none;
  color: inherit;
  transition: opacity 0.15s ease, box-shadow 0.15s ease;
}
a.brand-summary-logo:hover {
  opacity: 0.85;
  box-shadow: 0 0 0 3px rgba(147, 51, 234, 0.2);
}

.brand-summary-details {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.brand-summary-name {
  font-size: 18px;
  font-weight: 700;
  color: var(--brand-ink);
  padding-left: 0;
  padding-right: 0;
  text-align: left;
}

.brand-summary-name-row {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 10px;
  padding-left: 0;
  padding-right: 0;
}

.brand-summary-name-row.rtl-row {
  flex-direction: row;
  justify-content: flex-start;
  direction: rtl;
  text-align: right;
}

.brand-summary-name + .brand-summary-row {
  margin-top: 4px;
}

.brand-summary-row {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-direction: row;
  justify-content: flex-start;
}
.brand-summary-logo-row {
  direction: ltr;
  flex-direction: row;
  justify-content: flex-start;
}

html[dir="ltr"] #brand-summary-card:not(.brand-collapsed) .brand-summary-logo-row .brand-summary-logo.large,
[dir="ltr"] #brand-summary-card:not(.brand-collapsed) .brand-summary-logo-row .brand-summary-logo.large,
.ltr #brand-summary-card:not(.brand-collapsed) .brand-summary-logo-row .brand-summary-logo.large {
  order: 1;
}

html[dir="ltr"] #brand-summary-card:not(.brand-collapsed) .brand-summary-logo-row #brand-strength-anchor-expanded,
[dir="ltr"] #brand-summary-card:not(.brand-collapsed) .brand-summary-logo-row #brand-strength-anchor-expanded,
.ltr #brand-summary-card:not(.brand-collapsed) .brand-summary-logo-row #brand-strength-anchor-expanded {
  order: 2;
}

.brand-summary-row.rtl-row {
  flex-direction: row-reverse;
  justify-content: flex-start;
  text-align: right;
}

.brand-summary-meta {
  font-size: 14px;
  font-weight: 500;
  color: var(--brand-muted);
}

.brand-card-header {
  display: flex;
  align-items: center;
  gap: 16px;
}

.brand-card-header.rtl-row {
  flex-direction: row-reverse;
  justify-content: flex-start;
}

.brand-summary-details.rtl-row {
  text-align: right;
}

.brand-card.rtl-card {
  direction: rtl;
  text-align: right;
}

.brand-card.rtl-card .brand-summary-row {
  flex-direction: row-reverse;
  justify-content: flex-end;
}
.brand-card.rtl-card .brand-summary-logo-row {
  direction: ltr;
  flex-direction: row;
  justify-content: flex-end;
}

.brand-card.rtl-card .brand-summary-name {
  padding-left: 0;
  padding-right: 0;
  text-align: right;
}

.brand-actions {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}

.brand-card-body {
  position: relative;
}

.brand-summary-card {
  position: relative;
  transition: min-height 0.28s cubic-bezier(0.4, 0, 0.2, 1), padding-bottom 0.28s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Animated expand/collapse for full brand block (grid row 0fr → 1fr) */
.brand-summary-expand-target {
  display: grid;
  grid-template-rows: 1fr;
  transition: grid-template-rows 0.32s cubic-bezier(0.4, 0, 0.2, 1);
}

.brand-summary-card.brand-collapsed .brand-summary-expand-target {
  grid-template-rows: 0fr;
}

.brand-summary-expand-inner {
  min-height: 0;
  overflow: hidden;
}

.brand-summary-compact {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 28px;
  padding-right: 56px;
  padding-left: 56px;
  transition: max-height 0.32s cubic-bezier(0.4, 0, 0.2, 1),
    opacity 0.22s ease,
    padding-block 0.28s cubic-bezier(0.4, 0, 0.2, 1),
    gap 0.28s cubic-bezier(0.4, 0, 0.2, 1);
}

.brand-summary-card.brand-collapsed .brand-summary-compact {
  max-height: 120px;
  opacity: 1;
}

.brand-summary-card:not(.brand-collapsed) .brand-summary-compact {
  max-height: 0;
  min-height: 0;
  opacity: 0;
  overflow: hidden;
  pointer-events: none;
  padding-block: 0;
  gap: 0;
}

.brand-summary-card.brand-summary-rtl .brand-summary-compact {
  direction: rtl;
  justify-content: flex-start;
  text-align: right;
}

.brand-summary-compact-logo {
  width: 24px;
  height: 24px;
  border-radius: 8px;
  overflow: hidden;
  background: rgba(147, 51, 234, 0.12);
  color: var(--brand-primary);
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  text-decoration: none;
}

.brand-summary-compact-logo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.brand-summary-compact-name {
  font-weight: 700;
  color: var(--brand-ink);
}

#brand-summary-card.brand-collapsed .brand-summary-compact {
  min-height: 42px;
  align-items: center;
  gap: 10px;
  padding-inline: 12px;
}

html[dir="ltr"] #brand-summary-card.brand-collapsed .brand-summary-compact,
[dir="ltr"] #brand-summary-card.brand-collapsed .brand-summary-compact,
.ltr #brand-summary-card.brand-collapsed .brand-summary-compact {
  padding-left: 12px;
  padding-right: 112px;
}

html[dir="ltr"] #brand-summary-card.brand-collapsed .brand-summary-compact-logo,
[dir="ltr"] #brand-summary-card.brand-collapsed .brand-summary-compact-logo,
.ltr #brand-summary-card.brand-collapsed .brand-summary-compact-logo {
  order: 1;
}

html[dir="ltr"] #brand-summary-card.brand-collapsed .brand-summary-compact-name,
[dir="ltr"] #brand-summary-card.brand-collapsed .brand-summary-compact-name,
.ltr #brand-summary-card.brand-collapsed .brand-summary-compact-name {
  order: 2;
  min-width: 0;
  flex: 0 1 auto;
  max-width: clamp(120px, 30vw, 300px);
}

html[dir="ltr"] #brand-summary-card.brand-collapsed #brand-strength-anchor-compact,
[dir="ltr"] #brand-summary-card.brand-collapsed #brand-strength-anchor-compact,
.ltr #brand-summary-card.brand-collapsed #brand-strength-anchor-compact {
  order: 3;
  margin-left: 0;
}

#brand-summary-card.brand-collapsed .brand-summary-compact-logo {
  width: 34px;
  height: 34px;
  align-self: center;
  border-radius: 10px;
}

#brand-summary-card.brand-collapsed .brand-summary-compact-logo img {
  height: 100%;
}

html[dir="rtl"] #brand-summary-card.brand-collapsed .brand-summary-compact-name,
[dir="rtl"] #brand-summary-card.brand-collapsed .brand-summary-compact-name,
.rtl #brand-summary-card.brand-collapsed .brand-summary-compact-name {
  order: 2;
}

html[dir="rtl"] #brand-summary-card.brand-collapsed #brand-strength-anchor-compact,
[dir="rtl"] #brand-summary-card.brand-collapsed #brand-strength-anchor-compact,
.rtl #brand-summary-card.brand-collapsed #brand-strength-anchor-compact {
  order: 3;
}

html[dir="rtl"] #brand-summary-card.brand-collapsed .brand-summary-compact,
[dir="rtl"] #brand-summary-card.brand-collapsed .brand-summary-compact,
.rtl #brand-summary-card.brand-collapsed .brand-summary-compact {
  direction: rtl;
  justify-content: flex-start;
  padding-right: 12px;
  padding-left: 112px;
}

.brand-edit-floating {
  position: absolute;
  top: 16px;
  right: 16px;
  z-index: 2;
}

.brand-summary-card.brand-summary-rtl .brand-edit-floating {
  right: auto;
  left: 56px;
}

.brand-summary-card.brand-summary-rtl .brand-collapse-toggle {
  left: 16px;
  right: auto;
}

html[dir="ltr"] #brand-summary-card:not(.brand-collapsed) .brand-collapse-toggle,
[dir="ltr"] #brand-summary-card:not(.brand-collapsed) .brand-collapse-toggle,
.ltr #brand-summary-card:not(.brand-collapsed) .brand-collapse-toggle {
  left: auto;
  right: 16px;
}

html[dir="ltr"] #brand-summary-card:not(.brand-collapsed) .brand-edit-floating,
[dir="ltr"] #brand-summary-card:not(.brand-collapsed) .brand-edit-floating,
.ltr #brand-summary-card:not(.brand-collapsed) .brand-edit-floating {
  right: 60px;
}

html[dir="ltr"] #brand-summary-card.brand-collapsed .brand-collapse-toggle,
[dir="ltr"] #brand-summary-card.brand-collapsed .brand-collapse-toggle,
.ltr #brand-summary-card.brand-collapsed .brand-collapse-toggle {
  left: auto;
  right: 16px;
}

html[dir="ltr"] #brand-summary-card.brand-collapsed .brand-edit-floating,
[dir="ltr"] #brand-summary-card.brand-collapsed .brand-edit-floating,
.ltr #brand-summary-card.brand-collapsed .brand-edit-floating {
  right: 60px;
}

.brand-collapse-toggle {
  position: absolute;
  top: 16px;
  left: 16px;
  z-index: 2;
}

.brand-summary-card.brand-collapsed {
  padding-bottom: 16px;
  min-height: 64px;
  background: var(--brand-card);
}

body.app-page #brand-summary-card.brand-collapsed {
  min-height: 52px;
  padding-block: 10px;
}

body.app-page #brand-summary-card.brand-collapsed .brand-summary-compact {
  min-height: 32px;
}

body.app-page #brand-summary-card.brand-collapsed .brand-summary-compact-logo {
  width: 30px;
  height: 30px;
}

body.app-page #brand-summary-card.brand-collapsed .brand-collapse-toggle,
body.app-page #brand-summary-card.brand-collapsed .brand-edit-floating {
  top: 50%;
  width: 32px;
  height: 32px;
  transform: translateY(-50%);
}

html[dir="ltr"] body.app-page #brand-summary-card.brand-collapsed .brand-collapse-toggle,
[dir="ltr"] body.app-page #brand-summary-card.brand-collapsed .brand-collapse-toggle,
.ltr body.app-page #brand-summary-card.brand-collapsed .brand-collapse-toggle {
  right: 10px;
}

html[dir="ltr"] body.app-page #brand-summary-card.brand-collapsed .brand-edit-floating,
[dir="ltr"] body.app-page #brand-summary-card.brand-collapsed .brand-edit-floating,
.ltr body.app-page #brand-summary-card.brand-collapsed .brand-edit-floating {
  right: 46px;
}

html[dir="rtl"] body.app-page #brand-summary-card.brand-collapsed .brand-collapse-toggle,
[dir="rtl"] body.app-page #brand-summary-card.brand-collapsed .brand-collapse-toggle,
.rtl body.app-page #brand-summary-card.brand-collapsed .brand-collapse-toggle {
  left: 10px;
}

html[dir="rtl"] body.app-page #brand-summary-card.brand-collapsed .brand-edit-floating,
[dir="rtl"] body.app-page #brand-summary-card.brand-collapsed .brand-edit-floating,
.rtl body.app-page #brand-summary-card.brand-collapsed .brand-edit-floating {
  left: 46px;
}

@media (prefers-reduced-motion: reduce) {
  .brand-summary-card,
  .brand-summary-expand-target,
  .brand-summary-compact {
    transition: none !important;
  }
}

.brand-desc-wrap {
  position: relative;
  padding-bottom: 24px;
  margin-top: 4px;
  min-height: 56px;
}

.brand-desc {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  overflow: hidden;
  font-size: 14px;
  line-height: 1.6;
  color: var(--brand-muted);
}

.brand-card-body.collapsed .brand-desc {
  -webkit-line-clamp: 2;
  line-clamp: 2;
}

.brand-card-body.collapsed .brand-actions,
.brand-card-body.collapsed .status-pill {
  display: none;
}

.brand-card-body.collapsed .brand-desc-wrap::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 32px;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0), var(--brand-card));
}

.brand-expand-arrow {
  position: absolute;
  bottom: 2px;
  left: 50%;
  transform: translateX(-50%);
  width: 32px;
  height: 32px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.98);
  border: 1px solid var(--brand-border);
  display: grid;
  place-items: center;
  font-size: 16px;
  cursor: pointer;
  z-index: 2;
  box-shadow: 0 8px 18px rgba(15, 23, 42, 0.12);
}

.brand-summary-header {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  margin-bottom: 14px;
  text-align: left;
}

.brand-summary-header .section-title {
  margin: 0;
  text-align: left;
}

.icon-button {
  width: 38px;
  height: 38px;
  padding: 0;
  border-radius: 12px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
}

.brand-action-card {
  border: 1px solid rgba(147, 51, 234, 0.25);
  background: rgba(147, 51, 234, 0.08);
  color: var(--brand-ink);
  padding: 10px 12px;
  border-radius: 12px;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-weight: 500;
  cursor: pointer;
  transition: transform 0.2s ease, box-shadow 0.2s ease, border 0.2s ease;
  width: 100%;
  max-width: 100%;
  justify-content: center;
}

.brand-action-card:hover {
  transform: translateY(-1px);
  border-color: var(--brand-primary);
  box-shadow: 0 10px 20px rgba(147, 51, 234, 0.15);
}

.brand-action-icon {
  width: 28px;
  height: 28px;
  border-radius: 6px;
  background: rgba(147, 51, 234, 0.15);
  display: grid;
  place-items: center;
  font-size: 14px;
}

.posts-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(400px, 1fr));
  gap: 16px;
  max-width: 100%;
}

@media (min-width: 1200px) {
  .posts-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 900px) {
  .posts-grid {
    grid-template-columns: 1fr;
  }
}

.post-card {
  border: 1px solid var(--brand-border);
  background: #fff;
  border-radius: 12px;
  padding: 12px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.post-card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
}

.post-title {
  font-weight: 700;
  font-size: 14px;
  margin-bottom: 4px;
}

.post-status {
  padding: 4px 10px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 500;
  text-transform: capitalize;
  background: rgba(148, 163, 184, 0.2);
  color: #475569;
  height: fit-content;
}

.post-status.published {
  background: rgba(34, 197, 94, 0.16);
  color: #15803d;
}

.post-status.pending {
  background: rgba(249, 115, 22, 0.16);
  color: #c2410c;
}

.post-status.cancelled {
  background: rgba(239, 68, 68, 0.16);
  color: #b91c1c;
}

.post-details {
  display: grid;
  gap: 4px;
  font-size: 12px;
  color: var(--brand-ink);
}

.post-card-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}

.post-details-compact {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  font-size: 11px;
  color: var(--brand-ink-muted);
  text-align: right;
}

html[dir="ltr"] .post-details-compact {
  text-align: right;
}

html[dir="rtl"] .post-details-compact {
  text-align: left;
}

.post-date-item {
  white-space: nowrap;
}

.post-preview {
  display: grid;
  grid-template-columns: 100px 1fr;
  gap: 12px;
  align-items: start;
}

.post-preview-image,
.post-preview-video {
  width: 100px;
  height: 100px;
  border-radius: 8px;
  object-fit: cover;
  border: 1px solid var(--brand-border);
  background: #f7f7fb;
  flex-shrink: 0;
}

.post-preview-video {
  cursor: pointer;
}

.post-preview-video::-webkit-media-controls-panel {
  background: linear-gradient(to bottom, transparent, rgba(0,0,0,0.4));
}

.post-preview-image.video-placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 40px;
  background: linear-gradient(135deg, #7c3aed 0%, #ec4899 100%);
  border: none;
  color: white;
}

.post-preview-copy {
  font-size: 13px;
  line-height: 1.5;
  color: var(--brand-ink);
  white-space: pre-wrap;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 4;
  -webkit-box-orient: vertical;
}

@media (max-width: 720px) {
  .post-preview {
    grid-template-columns: 1fr;
  }
  .post-preview-image {
    width: 100%;
    height: auto;
  }
}

.post-links {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.button.small {
  min-height: 40px;
  padding: 0 16px;
  font-size: 14px;
  border-radius: 11px;
  font-weight: 500;
}

.publish-reconnect-btn {
  min-height: 34px;
  padding: 0 12px;
  font-size: 12px;
  border-radius: 10px;
  line-height: 1.1;
}

.library-grid {
  display: grid;
  gap: 28px;
}

.brand-library-page .brand-library-container {
  max-width: 1240px;
  margin-inline: auto;
}

.brand-library-page .brand-library-heading {
  margin-top: 10px;
  margin-bottom: 6px;
}

.brand-library-page .library-grid {
  margin-top: 8px;
}

/* Boards bar */
.library-boards-bar {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 22px;
  margin-top: 6px;
  flex-wrap: wrap;
}

.library-board-pill {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 8px 20px 8px 12px;
  border: 2px solid #e5e7eb;
  border-radius: 999px;
  background: #ffffff;
  cursor: pointer;
  transition: all 0.2s ease;
  white-space: nowrap;
  font-size: 14px;
  color: #6b7280;
}

.library-board-pill:hover {
  border-color: #d1d5db;
  background: #f9fafb;
}

.library-board-pill.active {
  border-color: var(--brand-primary, #10b981);
  background: #ffffff;
  color: #111827;
}

.board-pill-emoji {
  font-size: 18px;
  line-height: 1;
  flex-shrink: 0;
}

.board-pill-icon {
  line-height: 1;
}

.board-pill-label {
  display: flex;
  flex-direction: column;
  gap: 1px;
  font-weight: 500;
  line-height: 1.2;
}

.board-pill-count {
  font-size: 11px;
  font-weight: 400;
  color: #9ca3af;
}

.library-board-pill.active .board-pill-count {
  color: #6b7280;
}

/* Board sections */
.library-board-section {
  background: transparent;
}

.library-board-header {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-bottom: 16px;
  flex-wrap: wrap;
}

.library-board-title {
  font-size: 18px;
  font-weight: 700;
  color: #111827;
  white-space: nowrap;
}

/* Filter tabs */
.library-filter-tabs {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}

.library-filter-tab {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 16px;
  border: 1.5px solid #e5e7eb;
  border-radius: 999px;
  background: #ffffff;
  color: #6b7280;
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.18s ease;
  white-space: nowrap;
}

.library-filter-tab:hover {
  border-color: #d1d5db;
  color: #374151;
  background: #f9fafb;
}

.library-filter-tab.active {
  background: var(--brand-primary, #10b981);
  border-color: var(--brand-primary, #10b981);
  color: #ffffff;
}

.library-filter-tab.active .library-filter-count {
  background: rgba(255, 255, 255, 0.25);
  color: #ffffff;
}

.library-filter-icon {
  width: 14px;
  height: 14px;
  stroke: currentColor;
  fill: none;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
  flex-shrink: 0;
}

.library-filter-count {
  min-width: 20px;
  height: 18px;
  padding: 0 6px;
  border-radius: 999px;
  background: #f3f4f6;
  color: #6b7280;
  font-size: 11px;
  font-weight: 500;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
}

#copies-section .library-board-header .library-filter-count {
  font-size: 12px;
  height: 22px;
  padding: 0 8px;
}

/* Visuals grid - masonry-like with consistent columns */
.library-visuals-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
  align-items: start;
}

.library-visual-card {
  position: relative;
  border-radius: 14px;
  overflow: hidden;
  background: #ffffff;
  border: 1px solid #e8eaef;
  cursor: pointer;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.library-visual-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 12px 28px rgba(15, 23, 42, 0.1);
}

.library-visual-media {
  position: relative;
  overflow: hidden;
  background: #f1f5f9;
}

.library-visual-thumb {
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  display: block;
}

.library-new-badge {
  position: absolute;
  top: 10px;
  right: 10px;
  z-index: 2;
  padding: 3px 10px;
  border-radius: 999px;
  background: #ef4444;
  color: #ffffff;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.02em;
  line-height: 1.4;
  pointer-events: none;
}

.library-play-icon {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
  opacity: 0.85;
  transition: opacity 0.18s ease;
}

.library-visual-card:hover .library-play-icon {
  opacity: 0;
}

.library-play-icon svg {
  width: 44px;
  height: 44px;
  color: #ffffff;
  filter: drop-shadow(0 2px 6px rgba(0, 0, 0, 0.35));
}

.library-visual-type {
  position: absolute;
  bottom: 8px;
  left: 8px;
  z-index: 2;
  width: 26px;
  height: 26px;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.88);
  backdrop-filter: blur(6px);
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: opacity 0.18s ease;
  pointer-events: none;
}

.library-visual-card:hover .library-visual-type {
  opacity: 1;
}

.library-type-icon {
  width: 14px;
  height: 14px;
  stroke: #334155;
  fill: none;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* Card action buttons */
.library-visual-actions {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 8px 0 6px;
  opacity: 0;
  transition: opacity 0.18s ease;
}

.library-visual-card:hover .library-visual-actions {
  opacity: 1;
}

.library-action-btn {
  width: 34px;
  height: 34px;
  border: none;
  border-radius: 50%;
  background: #ffffff;
  color: #6b7280;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.16s ease;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.08);
  padding: 0;
}

.library-action-btn:hover {
  background: #f3f4f6;
  color: #111827;
  transform: scale(1.08);
}

.library-action-btn svg {
  width: 16px;
  height: 16px;
  stroke: currentColor;
  fill: none;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.library-action-btn.fav-btn svg {
  fill: none;
  stroke: currentColor;
}

.library-action-btn.fav-btn.is-fav svg {
  fill: #f59e0b;
  stroke: #f59e0b;
}

.library-action-btn.fav-btn.is-fav {
  color: #f59e0b;
}

.library-action-btn.more-btn svg {
  fill: currentColor;
  stroke: none;
}

/* Context menus */
.library-context-menu {
  min-width: 200px;
  background: #ffffff;
  border: 1px solid #e5e7eb;
  border-radius: 12px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12), 0 2px 6px rgba(0, 0, 0, 0.06);
  padding: 6px;
  opacity: 0;
  transform: translateY(-4px);
  transition: opacity 0.14s ease, transform 0.14s ease;
}

.library-context-menu.open {
  opacity: 1;
  transform: translateY(0);
}

.library-menu-item {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 10px 12px;
  border: none;
  border-radius: 8px;
  background: none;
  color: #374151;
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  transition: background 0.12s ease;
  text-align: start;
  white-space: nowrap;
}

.library-menu-item:hover {
  background: #f3f4f6;
}

.library-menu-item svg {
  width: 16px;
  height: 16px;
  stroke: currentColor;
  fill: none;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
  flex-shrink: 0;
}

/* Copies grid */
.library-copies-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
  align-items: start;
}

.library-copy-card {
  background: #ffffff;
  border: 1px solid #e8eaef;
  border-radius: 14px;
  padding: 16px;
  transition: transform 0.18s ease, box-shadow 0.18s ease;
}

.library-copy-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 20px rgba(15, 23, 42, 0.07);
}

.copy-card-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 8px;
}

.copy-meta {
  font-size: 12px;
  color: #9ca3af;
  font-weight: 500;
}

.copy-card-title {
  font-size: 15px;
  font-weight: 500;
  line-height: 1.35;
  color: #111827;
  margin-bottom: 6px;
}

.copy-card-body {
  white-space: pre-wrap;
  font-size: 13px;
  line-height: 1.5;
  color: #6b7280;
  display: -webkit-box;
  -webkit-line-clamp: 5;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.brand-library-page .copy-icon {
  width: 28px;
  height: 28px;
  border-radius: 8px;
  border: 1px solid #e5e7eb;
  background: #ffffff;
  color: #9ca3af;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.15s ease;
  flex-shrink: 0;
  padding: 0;
}

.brand-library-page .copy-icon:hover {
  background: #f9fafb;
  color: #374151;
  border-color: #d1d5db;
}

/* Load more */
.library-load-more {
  display: flex;
  justify-content: center;
  margin-top: 20px;
}

.library-load-more .button.secondary {
  min-height: 36px;
  padding: 0 24px;
  border-radius: 999px;
  font-size: 13px;
  font-weight: 500;
}

/* Empty state */
.library-empty-state {
  grid-column: 1 / -1;
  text-align: center;
  padding: 48px 20px;
  font-size: 14px;
}

.library-selection-bar {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  padding: 12px 14px;
  margin-bottom: 16px;
  border: 1px solid #e5e7eb;
  border-radius: 12px;
  background: #f9fafb;
}

.library-selection-bar[hidden] {
  display: none !important;
}

.library-selection-count {
  font-size: 14px;
  font-weight: 500;
  color: #111827;
}

.library-selection-spacer {
  flex: 1;
}

.brand-library-page .library-visual-card.is-selected {
  border-color: var(--brand-primary, #10b981);
  box-shadow: 0 0 0 2px rgba(16, 185, 129, 0.18);
}

.library-select-checkbox {
  position: absolute;
  top: 10px;
  left: 10px;
  z-index: 3;
  width: 28px;
  height: 28px;
  border: 2px solid #ffffff;
  border-radius: 8px;
  background: rgba(17, 24, 39, 0.45);
  color: transparent;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.18);
}

.library-select-checkbox svg {
  width: 16px;
  height: 16px;
  fill: none;
  stroke: currentColor;
  stroke-width: 3;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.library-select-checkbox.checked {
  background: var(--brand-primary, #10b981);
  color: #ffffff;
}

.brand-library-page.library-selection-mode .library-visual-actions,
.brand-library-page.library-selection-mode .library-upload-test {
  display: none;
}

.library-delete-modal-card {
  max-width: 420px;
}

.library-delete-modal-title {
  font-size: 18px;
  font-weight: 700;
  margin-bottom: 10px;
  padding-inline-end: 44px;
}

.library-delete-modal-message {
  margin: 0 0 18px;
  color: #4b5563;
  line-height: 1.5;
}

.library-delete-modal-actions {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  flex-wrap: wrap;
}

html[dir="rtl"] #library-delete-modal .modal-close,
[dir="rtl"] #library-delete-modal .modal-close,
.rtl #library-delete-modal .modal-close,
html[lang="ar"] #library-delete-modal .modal-close,
html[lang="he"] #library-delete-modal .modal-close {
  left: 16px;
  right: auto;
}

html[dir="rtl"] .library-delete-modal-message,
[dir="rtl"] .library-delete-modal-message,
html[lang="ar"] .library-delete-modal-message,
html[lang="he"] .library-delete-modal-message {
  text-align: start;
}

html[dir="rtl"] .library-delete-modal-actions,
[dir="rtl"] .library-delete-modal-actions,
html[lang="ar"] .library-delete-modal-actions,
html[lang="he"] .library-delete-modal-actions {
  justify-content: flex-start;
}

.library-bk-modal-card {
  max-width: 440px;
}

.library-bk-preview-wrap {
  margin: 0 0 14px;
  border-radius: 12px;
  overflow: hidden;
  background: #f3f4f6;
  aspect-ratio: 4 / 3;
  display: flex;
  align-items: center;
  justify-content: center;
}

.library-bk-preview-wrap img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}

.library-bk-field {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin: 0 0 12px;
  font-size: 13px;
  font-weight: 500;
  color: var(--brand-ink, #111827);
}

.library-bk-field select,
.library-bk-field input {
  font: inherit;
  font-weight: 400;
  font-size: 14px;
  padding: 10px 12px;
  border: 1px solid #e5e7eb;
  border-radius: 10px;
  background: #fff;
  color: inherit;
}

.library-bk-field select:focus,
.library-bk-field input:focus {
  outline: none;
  border-color: var(--brand-primary, #2563eb);
  box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.12);
}

.library-bk-error {
  margin: 0 0 12px;
  color: #dc2626;
  font-size: 13px;
  line-height: 1.4;
}

html[dir="rtl"] #library-bk-modal .modal-close,
[dir="rtl"] #library-bk-modal .modal-close,
.rtl #library-bk-modal .modal-close,
html[lang="ar"] #library-bk-modal .modal-close,
html[lang="he"] #library-bk-modal .modal-close {
  left: 16px;
  right: auto;
}

/* Responsive */
@media (max-width: 1100px) {
  .library-visuals-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
  .library-copies-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 820px) {
  .library-visuals-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
  .library-copies-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
  .library-filter-tabs {
    gap: 4px;
  }
  .library-filter-tab {
    padding: 6px 12px;
    font-size: 12px;
  }
}

@media (max-width: 520px) {
  .library-visuals-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 8px;
  }
  .library-copies-grid {
    grid-template-columns: 1fr !important;
  }
  .library-board-header {
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
  }
  .library-filter-tabs {
    width: 100%;
  }
}

html[lang="ar"] .brand-library-page .library-board-title,
html[lang="ar"] .brand-library-page .library-board-header,
html[lang="ar"] .brand-library-page .library-filter-tab,
html[lang="ar"] .brand-library-page .board-pill-label,
html[lang="ar"] .brand-library-page .library-boards-bar,
html[lang="ar"] .brand-library-page .section-title,
html[lang="ar"] .brand-library-page .copy-card-title,
html[lang="ar"] .brand-library-page .copy-card-body,
html[lang="ar"] .brand-library-page .copy-meta,
html[lang="ar"] .brand-library-page .library-empty-state,
html[lang="ar"] .brand-library-page .library-menu-item {
  font-family: 'Tajawal', 'Cairo', system-ui, -apple-system, Segoe UI, sans-serif;
}

html[lang="he"] .brand-library-page .library-board-title,
html[lang="he"] .brand-library-page .library-board-header,
html[lang="he"] .brand-library-page .library-filter-tab,
html[lang="he"] .brand-library-page .board-pill-label,
html[lang="he"] .brand-library-page .library-boards-bar,
html[lang="he"] .brand-library-page .section-title,
html[lang="he"] .brand-library-page .copy-card-title,
html[lang="he"] .brand-library-page .copy-card-body,
html[lang="he"] .brand-library-page .copy-meta,
html[lang="he"] .brand-library-page .library-empty-state,
html[lang="he"] .brand-library-page .library-menu-item {
  font-family: 'Tajawal', 'Cairo', system-ui, -apple-system, Segoe UI, sans-serif;
}

.leads-inline {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.copy-icon.small {
  width: 24px;
  height: 24px;
  border-radius: 999px;
  border: 1px solid var(--brand-border);
  background: #fff;
  font-size: 12px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}

.lead-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.link-icon {
  font-size: 12px;
  color: var(--brand-muted);
}

.button-icon-primary {
  background: var(--brand-primary);
  color: white;
  border: none;
  border-radius: 10px;
  width: 38px;
  height: 38px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.2s ease;
  box-shadow: 0 2px 4px rgba(147, 51, 234, 0.2);
}

.button-icon-primary:hover {
  background: var(--brand-primary-dark);
  box-shadow: 0 4px 8px rgba(147, 51, 234, 0.3);
  transform: translateY(-1px);
}

.button-icon-primary svg {
  display: block;
}

.multi-products-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 16px;
}

.multi-products-header-actions {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
  flex-wrap: wrap;
  justify-content: flex-end;
}

.multi-download-all-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
  white-space: nowrap;
}

.multi-download-all-btn svg {
  display: block;
  flex: 0 0 auto;
}

.multi-download-all-label {
  font-size: 13px;
  font-weight: 500;
  line-height: 1;
}

.add-multi-product-modal-card {
  max-width: 560px;
}

.add-multi-product-form {
  display: grid;
  gap: 16px;
  margin-top: 12px;
}

.add-multi-product-image-block {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 10px;
}

.add-multi-product-preview {
  width: 140px;
  height: 140px;
  border-radius: 16px;
  border: 1px dashed rgba(15, 23, 42, 0.18);
  background: rgba(15, 23, 42, 0.03);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  cursor: pointer;
}

.add-multi-product-preview.has-image {
  border-style: solid;
}

.add-multi-product-preview img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.add-multi-product-fields {
  display: grid;
  gap: 12px;
}

.add-multi-product-fields .field {
  display: grid;
  gap: 6px;
  margin: 0;
}

.add-multi-product-fields .field span {
  font-size: 13px;
  font-weight: 500;
  color: var(--brand-ink);
}

.add-multi-product-fields .field input {
  width: 100%;
}

.add-multi-product-status {
  min-height: 18px;
  margin-top: 8px;
}

.add-multi-product-status.error-text {
  color: #b91c1c;
}

.multi-card-image.is-previewable {
  cursor: zoom-in;
}

.multi-card-image.is-previewable:focus-visible {
  outline: 2px solid var(--brand-primary, #7c3aed);
  outline-offset: -2px;
}

.multi-product-name {
  font-size: 17px;
  font-weight: 500;
  color: var(--brand-ink);
  margin-bottom: 8px;
}

.multi-product-price {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 6px;
}

.price-current {
  font-size: 18px;
  font-weight: 700;
  color: var(--brand-primary);
}

.price-old {
  font-size: 15px;
  color: var(--brand-muted);
  text-decoration: line-through;
}

.multi-product-notes {
  font-size: 14px;
  color: var(--brand-muted);
  margin-bottom: 8px;
  line-height: 1.4;
}

.status-pill {
  display: inline-block;
  padding: 4px 12px;
  border-radius: 12px;
  font-size: 13px;
  font-weight: 500;
  background: rgba(147, 51, 234, 0.1);
  color: var(--brand-primary);
  text-transform: capitalize;
  margin-top: 8px;
}

.status-complete {
  background: rgba(34, 197, 94, 0.1);
  color: #16a34a;
}

.social-image-container {
  position: relative;
  width: 100%;
}

.social-image-container > .image-share-box.job-native-share-btn {
  inset-inline-end: 12px;
  z-index: 11;
}

.carousel-nav-btn {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background: var(--brand-primary);
  color: white;
  border: none;
  border-radius: 50%;
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  z-index: 10;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
  transition: all 0.2s ease;
  opacity: 0.7;
}

.carousel-nav-btn:hover {
  background: var(--brand-primary-dark);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
  transform: translateY(-50%) scale(1.08);
  opacity: 1;
}

.carousel-nav-btn:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

.carousel-nav-btn svg {
  display: block;
}

.carousel-prev {
  left: 12px;
}

.carousel-next {
  right: 12px;
}

[dir="rtl"] .carousel-prev {
  left: auto;
  right: 12px;
}

[dir="rtl"] .carousel-next {
  right: auto;
  left: 12px;
}

[dir="rtl"] .carousel-nav-btn svg {
  transform: scaleX(-1);
}

.carousel-counter {
  position: absolute;
  bottom: 12px;
  right: 12px;
  background: rgba(0, 0, 0, 0.7);
  color: white;
  padding: 4px 10px;
  border-radius: 12px;
  font-size: 12px;
  font-weight: 500;
  z-index: 10;
}

[dir="rtl"] .carousel-counter {
  right: auto;
  left: 12px;
}

.multi-preview-nav {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  margin-bottom: 16px;
  padding: 12px;
  background: var(--brand-background);
  border-radius: 8px;
}

.multi-prev-btn,
.multi-next-btn {
  background: var(--brand-primary);
  color: white;
  border: none;
  border-radius: 50%;
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: opacity 0.2s ease;
}

.multi-prev-btn:hover,
.multi-next-btn:hover {
  opacity: 0.8;
}

.multi-prev-btn:disabled,
.multi-next-btn:disabled {
  opacity: 0.3;
  cursor: not-allowed;
}

.multi-preview-counter {
  font-weight: 500;
  color: var(--brand-ink);
  min-width: 50px;
  text-align: center;
}

.preview-tabs {
  display: flex;
  gap: 8px;
  margin-bottom: 12px;
}

/* Job preview network switcher: one dropdown plus a few quick icons, so it scales to any number of networks. */
.preview-switcher {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: 12px;
}

.preview-switcher-label {
  color: var(--brand-muted, #5b6474);
  font-size: 13px;
}

.preview-switcher-picker {
  position: relative;
}

.preview-switcher-current {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 38px;
  padding-inline: 8px 12px;
  border-radius: 12px;
  border: 1px solid #e0e4ee;
  background: #ffffff;
  color: #1a202c;
  font-family: inherit;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  transition: border-color .16s ease, background-color .16s ease;
}

.preview-switcher-current:hover,
.preview-switcher-current[aria-expanded="true"] {
  border-color: var(--brand-primary, #7c3aed);
  background: color-mix(in srgb, var(--brand-primary, #7c3aed) 5%, #ffffff);
}

.preview-switcher-caret {
  width: 14px;
  height: 14px;
  color: #5b6474;
  transition: transform .2s cubic-bezier(.16, 1, .3, 1);
}

.preview-switcher-current[aria-expanded="true"] .preview-switcher-caret {
  transform: rotate(180deg);
}

.preview-switcher-menu {
  position: absolute;
  top: calc(100% + 6px);
  inset-inline-start: 0;
  z-index: 40;
  min-width: 200px;
  max-height: 320px;
  overflow-y: auto;
  padding: 6px;
  border-radius: 14px;
  border: 1px solid #e6e8f0;
  background: #ffffff;
  box-shadow: 0 18px 40px -14px rgba(26, 32, 44, .28);
}

.preview-switcher-menu[hidden] {
  display: none;
}

.preview-switcher-option {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 40px;
  padding: 6px 10px;
  border: 0;
  border-radius: 10px;
  background: transparent;
  color: #1a202c;
  font-family: inherit;
  font-size: 14px;
  font-weight: 400;
  text-align: start;
  cursor: pointer;
}

.preview-switcher-option:hover,
.preview-switcher-option:focus-visible {
  background: #f7f7fb;
  outline: none;
}

.preview-switcher-option.is-active {
  font-weight: 500;
}

.preview-switcher-check {
  width: 16px;
  height: 16px;
  margin-inline-start: auto;
  color: var(--brand-primary, #7c3aed);
}

.preview-switcher-quick {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.preview-switcher-quick-btn,
.preview-switcher-more {
  width: 34px;
  height: 34px;
  display: inline-grid;
  place-items: center;
  padding: 0;
  border-radius: 10px;
  border: 1px solid #e6e8f0;
  background: #ffffff;
  cursor: pointer;
  transition: border-color .16s ease, transform .16s cubic-bezier(.16, 1, .3, 1);
}

.preview-switcher-quick-btn:hover,
.preview-switcher-more:hover {
  border-color: #cfd3e0;
  transform: translateY(-1px);
}

.preview-switcher-more {
  color: #5b6474;
  font-family: inherit;
  font-size: 12px;
  font-weight: 500;
}

.preview-switcher-current:focus-visible,
.preview-switcher-quick-btn:focus-visible,
.preview-switcher-more:focus-visible {
  outline: 2px solid var(--brand-primary, #7c3aed);
  outline-offset: 2px;
}

.preview-net-icon {
  width: 22px;
  height: 22px;
  flex: 0 0 auto;
  display: inline-grid;
  place-items: center;
  border-radius: 7px;
  color: #ffffff;
}

.preview-net-icon .publishing-platform-glyph {
  width: 13px;
  height: 13px;
}

.preview-net-icon.is-instagram { background: #e1306c; }
.preview-net-icon.is-facebook { background: #1877f2; }
.preview-net-icon.is-linkedin { background: #0a66c2; }
.preview-net-icon.is-x { background: #111827; }
.preview-net-icon.is-tiktok { background: #000; }
.preview-net-icon.is-snapchat { background: #fffc00; --snap-ghost-fill: #fff; --snap-ghost-stroke: #16191c; }

.social-actions.linkedin {
  justify-content: space-between;
  border-top: 1px solid #eef0f4;
  font-size: 13px;
  color: var(--brand-muted);
}

.social-x-row {
  display: grid;
  grid-template-columns: 36px minmax(0, 1fr);
  gap: 10px;
  padding: 12px 14px;
}

.social-x-body {
  display: grid;
  gap: 6px;
  min-width: 0;
}

.social-x-names {
  display: flex;
  align-items: baseline;
  gap: 6px;
  min-width: 0;
}

.social-x-names .social-meta {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  direction: ltr;
}

.social-preview.x .social-caption {
  padding: 0;
}

.social-preview.x .social-image-container {
  border-radius: 16px;
  overflow: hidden;
  border: 1px solid #eef0f4;
}

.social-actions.x {
  justify-content: space-between;
  padding: 4px 0 0;
  color: var(--brand-muted);
}

/* TikTok preview: media first, caption under it, like the TikTok photo post sheet. */
.social-preview.tiktok .social-header .social-meta {
  direction: ltr;
}

.social-preview.tiktok .social-caption {
  padding: 12px 16px 0;
}

.social-actions.tiktok {
  justify-content: flex-start;
  gap: 18px;
  color: var(--brand-muted);
}

/* Job card Preview tab: LinkedIn, X and TikTok reuse the publish window mock (.pb-mock), so it needs the same tokens. */
.job-preview-mock {
  --pb-deep: #5b21b6;
  --pb-text: #1a202c;
  --pb-muted: #5b6474;
  --pb-line: #e6e8f0;
}

.job-preview-mock .pb-mock-media {
  cursor: default;
}

.job-preview-mock[data-platform="tiktok"] {
  max-width: 340px;
  margin-inline: auto;
}

.job-preview-mock[data-platform="tiktok"] .social-preview {
  border: 0;
}

.job-preview-mock .pb-mock-caption-under {
  white-space: pre-wrap;
}

@media (max-width: 480px) {
  /* Phones: the dropdown names the network, so the label goes and the quick icons stay on the same row. */
  .preview-switcher-label {
    display: none;
  }
}

.preview-item {
  display: none;
}

.preview-item.active {
  display: block;
}

.multi-product-row {
  display: flex;
  gap: 16px;
  padding: 16px;
  border: 1px solid var(--brand-border);
  border-radius: 12px;
  background: #fff;
  align-items: flex-start;
}

.multi-image-section {
  display: flex;
  flex-direction: column;
  gap: 8px;
  align-items: center;
  flex-shrink: 0;
}

.multi-image-preview {
  width: 100px;
  height: 100px;
  border-radius: 12px;
  border: 2px dashed var(--brand-border);
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, #f8f9fc 0%, #e8eaf0 100%);
  overflow: hidden;
  cursor: pointer;
  transition: all 0.2s ease;
  position: relative;
}

.multi-image-preview:hover {
  border-color: var(--brand-primary);
  transform: scale(1.02);
  box-shadow: 0 4px 12px rgba(0,0,0,0.08);
}

.multi-image-preview.has-image {
  border-style: solid;
  border-color: var(--brand-primary);
  background: #fff;
}

.multi-image-preview img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.multi-image-placeholder {
  color: var(--brand-muted);
  opacity: 0.7;
  display: flex;
  align-items: center;
  justify-content: center;
}

.multi-image-placeholder svg {
  width: 36px;
  height: 36px;
}

.multi-image-upload {
  cursor: pointer;
}

.multi-image-upload .button {
  font-size: 13px;
  padding: 8px 16px;
  white-space: nowrap;
}

.multi-fields {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  flex: 1;
}

.multi-field {
  display: flex;
  flex-direction: column;
  gap: 6px;
  font-size: 13px;
  color: var(--brand-muted);
}

.multi-field input,
.multi-field textarea {
  border-radius: 10px;
  border: 1px solid var(--brand-border);
  padding: 8px 10px;
  font-family: inherit;
}

.multi-field.full {
  grid-column: 1 / -1;
}

.multi-field-control {
  display: flex;
  align-items: center;
  gap: 4px;
  min-width: 0;
}

.multi-field-control input {
  flex: 1;
  min-width: 0;
}

.multi-apply-down-btn {
  flex-shrink: 0;
  width: 22px;
  height: 22px;
  padding: 0;
  border: none;
  background: transparent;
  color: var(--brand-muted, #9ca3af);
  font-size: 12px;
  line-height: 1;
  border-radius: 4px;
  cursor: pointer;
  opacity: 0.5;
}

.multi-apply-down-btn:hover:not(:disabled) {
  opacity: 1;
  color: var(--brand-primary, #7c3aed);
  background: color-mix(in srgb, var(--brand-primary, #7c3aed) 10%, transparent);
}

.multi-apply-down-btn[hidden] {
  display: none;
}

.multi-remove {
  align-self: flex-start;
  margin-top: 24px;
}

@media (max-width: 768px) {
  .multi-product-row {
    flex-direction: column;
  }
  .multi-image-section {
    flex-direction: row;
    width: 100%;
    justify-content: flex-start;
  }
  .multi-fields {
    grid-template-columns: 1fr 1fr;
  }
  .multi-remove {
    align-self: flex-end;
    margin-top: 0;
  }
}

.multi-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 16px;
  width: 100%;
  min-width: 0;
}

@media (max-width: 720px) {
  .multi-grid {
    grid-template-columns: 1fr;
    gap: 12px;
  }
}

.multi-card {
  position: relative;
  border: 1px solid var(--brand-border);
  border-radius: 14px;
  overflow: hidden;
  background: #fff;
  box-shadow: var(--shadow-card);
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.multi-card--generating,
.multi-card--pending {
  border-color: color-mix(in srgb, var(--brand-primary, #7c3aed) 22%, var(--brand-border));
  box-shadow: 0 10px 24px rgba(124, 58, 237, 0.06);
}

.multi-card--failed {
  border-color: color-mix(in srgb, var(--brand-danger, #ef4444) 28%, var(--brand-border));
}

.multi-card-image {
  position: relative;
  width: 100%;
  height: 0;
  padding-bottom: 100%;
  background: linear-gradient(180deg, #f8fafc 0%, #eef2f7 100%);
  overflow: hidden;
  border: 0;
  padding-left: 0;
  padding-right: 0;
  padding-top: 0;
}

@supports (aspect-ratio: 1 / 1) {
  .multi-card-image {
    height: auto;
    padding-bottom: 0;
    aspect-ratio: 1 / 1;
  }
}

.multi-card-image.is-busy img {
  filter: saturate(0.88);
}

.multi-card-image img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.multi-card-image-empty {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  color: var(--brand-muted);
}

.multi-card-image-overlay {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(255, 255, 255, 0.52);
  backdrop-filter: blur(2px);
}

.multi-card-spinner {
  width: 30px;
  height: 30px;
  border: 2.5px solid color-mix(in srgb, var(--brand-primary, #7c3aed) 16%, transparent);
  border-top-color: var(--brand-primary, #7c3aed);
  border-radius: 50%;
  animation: multi-card-spin 0.85s linear infinite;
}

@keyframes multi-card-spin {
  to { transform: rotate(360deg); }
}

.multi-card-body {
  padding: 12px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.multi-card-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-top: 2px;
  flex-wrap: wrap;
}

.multi-card-status {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  align-self: flex-start;
  width: fit-content;
  max-width: 100%;
  padding: 5px 10px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 500;
  line-height: 1.2;
  white-space: nowrap;
}

.multi-card-status-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: currentColor;
  opacity: 0.72;
  flex-shrink: 0;
}

.multi-card-status-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  font-size: 10px;
  font-weight: 700;
  flex-shrink: 0;
}

.multi-card-status-spinner {
  width: 12px;
  height: 12px;
  border: 2px solid currentColor;
  border-top-color: transparent;
  border-radius: 50%;
  opacity: 0.85;
  animation: multi-card-spin 0.75s linear infinite;
  flex-shrink: 0;
}

.multi-card-status--pending {
  color: #64748b;
  background: #f8fafc;
  border: 1px solid #e2e8f0;
}

.multi-card-status--generating {
  color: #92400e;
  background: color-mix(in srgb, #f59e0b 12%, #ffffff);
  border: 1px solid color-mix(in srgb, #f59e0b 28%, #fde68a);
}

.multi-card-status--completed {
  color: #15803d;
  background: color-mix(in srgb, #22c55e 12%, #ffffff);
  border: 1px solid color-mix(in srgb, #22c55e 24%, #bbf7d0);
}

.multi-card-status--completed .multi-card-status-icon {
  background: rgba(34, 197, 94, 0.14);
}

.multi-card-status--failed {
  color: #b91c1c;
  background: color-mix(in srgb, #ef4444 10%, #ffffff);
  border: 1px solid color-mix(in srgb, #ef4444 22%, #fecaca);
}

.multi-card-status--failed .multi-card-status-icon {
  background: rgba(239, 68, 68, 0.12);
}

.multi-card-error {
  margin-top: 4px;
  padding: 8px 10px;
  border-radius: 10px;
  font-size: 12px;
  line-height: 1.4;
  color: #b91c1c;
  background: color-mix(in srgb, #ef4444 8%, #ffffff);
  border: 1px solid color-mix(in srgb, #ef4444 18%, #fecaca);
}

.multi-discard {
  position: absolute;
  top: 8px;
  inset-inline-end: 8px;
  z-index: 3;
  width: 30px;
  height: 30px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 0;
  border-radius: 999px;
  background: rgba(15, 23, 42, 0.72);
  color: #fff;
  font-size: 15px;
  font-weight: 700;
  line-height: 1;
  cursor: pointer;
  box-shadow: 0 4px 12px rgba(15, 23, 42, 0.18);
  transition: background 0.15s ease, transform 0.15s ease;
}

.multi-discard:hover,
.multi-discard:focus-visible {
  background: #b91c1c;
  outline: none;
  transform: scale(1.04);
}

.multi-discard:disabled,
.multi-discard.loading {
  opacity: 0.55;
  cursor: wait;
  transform: none;
}

.multi-card-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-left: auto;
  flex-shrink: 0;
}

html[dir="rtl"] .multi-card-actions,
[dir="rtl"] .multi-card-actions,
.rtl .multi-card-actions {
  margin-left: 0;
  margin-right: auto;
}

.multi-card-actions .button {
  min-height: 32px;
  padding-inline: 12px;
}

.multi-card-actions .button:disabled {
  background: transparent !important;
  border-color: var(--brand-border) !important;
  color: var(--brand-muted) !important;
  opacity: 0.72;
  box-shadow: none;
}

.multi-edit-box{
  margin-top: 10px;
  padding: 12px;
  border-radius: 14px;
  background: rgba(124, 58, 237, 0.05);
  border: 1px solid rgba(124, 58, 237, 0.16);
  display: grid;
  gap: 8px;
}

.multi-edit-label{
  display: block;
  font-family: 'Tajawal', system-ui, -apple-system, 'Segoe UI', sans-serif;
  font-size: 13px;
  font-weight: 500;
  color: var(--brand-ink, #0f172a);
  line-height: 1.35;
}

.multi-edit-text{
  display: block;
  width: 100%;
  box-sizing: border-box;
  min-height: 96px;
  margin: 0;
  padding: 12px 14px;
  border: 1px solid var(--brand-border, #e5e7eb);
  border-radius: 12px;
  background: #fff;
  color: var(--brand-text, #0f172a);
  font: 400 14px/1.5 'Tajawal', system-ui, -apple-system, 'Segoe UI', sans-serif;
  resize: vertical;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.multi-edit-text::placeholder{
  color: var(--brand-muted, #94a3b8);
  opacity: 1;
}

.multi-edit-text:focus{
  outline: none;
  border-color: var(--brand-primary, #7c3aed);
  box-shadow: 0 0 0 3px rgba(124, 58, 237, 0.15);
}

.multi-edit-actions{
  display: flex;
  gap: 8px;
  margin-top: 2px;
  flex-wrap: wrap;
  align-items: center;
}

.multi-edit-actions .button{
  font-family: 'Tajawal', system-ui, -apple-system, 'Segoe UI', sans-serif;
}

html[dir="rtl"] .multi-edit-text,
html[lang="ar"] .multi-edit-text,
html[lang="he"] .multi-edit-text{
  text-align: right;
}

.tips-carousel-note{
  margin-top: 8px;
  font-size: 13px;
}

.strike {
  text-decoration: line-through;
  color: var(--brand-muted);
}

.social-header {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 16px;
}

.social-avatar {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: #f1f1f5;
  overflow: hidden;
  display: grid;
  place-items: center;
  font-weight: 700;
}

.social-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.social-handle {
  font-weight: 700;
}

.social-meta {
  font-size: 12px;
  color: var(--brand-muted);
}

.social-image {
  width: 100%;
  display: block;
  object-fit: contain;
  background: #f3f4f6;
  max-height: 60vh;
}

.social-actions {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
}

.social-actions span {
  cursor: default;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.social-actions svg {
  width: 18px;
  height: 18px;
  stroke: currentColor;
  fill: none;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.social-caption {
  padding: 0 16px 16px;
  font-size: 14px;
  white-space: pre-wrap;
}

.rtl {
  direction: rtl;
  text-align: right;
  font-family: 'Tajawal', 'Cairo', system-ui, -apple-system, Segoe UI, sans-serif;
}

.ad-copy-card {
  animation: copyPulse 0.6s ease-out;
  display: flex;
  flex-direction: column;
}

.ad-copy-card-head {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 12px;
  margin-bottom: 8px;
}

.ad-copy-card-title-row {
  display: inline-flex;
  align-items: center;
  gap: 2px;
}

.ad-copy-card-title-row .section-title {
  margin-bottom: 0;
  line-height: 1;
  display: inline-flex;
  align-items: center;
}

.ad-copy-card-copy {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  align-self: center;
  margin-inline-start: 0;
  margin-right: 0;
  padding-right: 0;
}

.ad-copy-inline-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 10px;
  width: fit-content;
  max-width: 100%;
  align-self: flex-start;
  margin-right: auto;
}

.ad-copy-inline-editor {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: 0;
}

.ad-copy-inline-editor[hidden] {
  display: none !important;
}

.ad-copy-inline-textarea {
  min-height: 140px;
  resize: vertical;
  margin: 0;
  padding: 10px 12px;
  border: 1px solid rgba(124, 58, 237, 0.35);
  border-radius: 10px;
  background: #fff;
  color: var(--brand-ink, #1f2937);
  font-family: 'Tajawal', system-ui, -apple-system, 'Segoe UI', sans-serif;
  font-size: 14px;
  font-weight: 400;
  line-height: 1.55;
  white-space: pre-wrap;
  box-shadow: 0 0 0 3px rgba(124, 58, 237, 0.08);
}

.ad-copy-inline-textarea:focus {
  outline: none;
  border-color: rgba(124, 58, 237, 0.55);
  box-shadow: 0 0 0 3px rgba(124, 58, 237, 0.14);
}

.ad-copy-inline-editor-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: flex-end;
  width: 100%;
  /* Keep Cancel → Save with Save on the visual right in RTL too */
  direction: ltr;
}

.ad-copy-card.is-editing-copy .ad-copy-inline-actions,
.ad-copy-card.is-editing-copy .ad-copy-card-copy {
  display: none;
}

.ad-copy-more-wrap {
  position: relative;
  display: inline-flex;
}

.ad-copy-more-btn {
  min-width: 28px;
  padding-inline: 8px;
  justify-content: center;
}

.ad-copy-more-plus {
  font-size: 16px;
  font-weight: 700;
  line-height: 1;
}

.ad-copy-more-menu {
  position: absolute;
  top: calc(100% + 6px);
  /* Anchor to the trailing edge so the menu opens into the card, not off-screen
     (the + control sits on the outer/start side in RTL). */
  inset-inline-start: auto;
  inset-inline-end: 0;
  min-width: 220px;
  max-width: min(280px, calc(100vw - 24px));
  background: #fff;
  border: 1px solid rgba(148, 163, 184, 0.28);
  border-radius: 10px;
  box-shadow: 0 10px 24px rgba(15, 23, 42, 0.14);
  padding: 4px;
  z-index: 40;
}

.ad-copy-more-item {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  border: 0;
  background: transparent;
  text-align: start;
  padding: 9px 12px;
  border-radius: 8px;
  font-size: 12px;
  font-weight: 500;
  color: #334155;
  cursor: pointer;
  font-family: 'Tajawal', system-ui, -apple-system, 'Segoe UI', sans-serif;
  box-sizing: border-box;
}

.ad-copy-more-item-label {
  flex: 1 1 auto;
  min-width: 0;
  text-align: start;
  line-height: 1.35;
}

.ad-copy-more-item .button-credit-badge {
  margin-inline-start: 0;
  flex-shrink: 0;
}

.ad-copy-more-item:hover,
.ad-copy-more-item:focus-visible {
  background: rgba(124, 58, 237, 0.08);
  outline: none;
}

.ad-copy-more-item:disabled {
  opacity: 0.55;
  cursor: not-allowed;
}

.related-jobs {
  /* Reuses .linked-job-hint layout/typography for matching weight + spacing. */
  margin-top: 0;
  margin-bottom: 0;
}

.related-jobs .icon,
.related-jobs .linked-badge-icon {
  width: 12px;
  height: 12px;
  stroke: var(--brand-muted);
  stroke-width: 2;
  fill: none;
  flex-shrink: 0;
}

.related-jobs-label {
  font-weight: 400;
  color: inherit;
}

.related-job-link {
  color: var(--brand-accent);
  font-weight: 500;
  text-decoration: none;
  cursor: pointer;
}

.related-job-link:hover,
.related-job-link:focus-visible {
  text-decoration: underline;
  outline: none;
}

.related-job-id,
.related-job-type {
  font-weight: 500;
  color: inherit;
}

.job-lineage .linked-job-hint,
.job-lineage .related-jobs {
  font-size: 12px;
  font-weight: 400;
  line-height: 1.4;
  color: var(--brand-muted);
}

.related-jobs-hint {
  display: none;
}

.related-jobs-sep {
  color: var(--brand-muted, #6b7280);
  opacity: 0.55;
  user-select: none;
}

/* Legacy chip markup collapses into the same compact hint. */
.related-jobs-head,
.related-jobs-list {
  display: contents;
}

.related-job-chip {
  display: inline;
  min-height: 0;
  max-width: 100%;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  color: var(--brand-accent);
  font-weight: 500;
  font-size: inherit;
  font-family: inherit;
  text-decoration: none;
  cursor: pointer;
}

.related-job-chip:hover,
.related-job-chip:focus-visible {
  border: 0;
  background: transparent;
  box-shadow: none;
  text-decoration: underline;
  outline: none;
}

.copy-step-back-row {
  display: flex;
  justify-content: flex-start;
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px dashed rgba(148, 163, 184, 0.45);
}

.copy-step-back-btn {
  width: auto;
  max-width: 100%;
  justify-content: center;
  color: #64748b !important;
  border-color: rgba(148, 163, 184, 0.45) !important;
  background: #f8fafc !important;
  font-weight: 500;
}

.copy-step-back-btn:hover,
.copy-step-back-btn:focus-visible {
  background: #f1f5f9 !important;
  border-color: rgba(100, 116, 139, 0.55) !important;
  color: #475569 !important;
}

.ad-copy-inline-tool {
  min-height: 28px;
  padding: 0 10px;
  border-radius: 999px;
  font-size: 11px;
  line-height: 1;
  color: #6b7280;
  border-color: #e5e7eb;
  background: #f9fafb;
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.ad-copy-inline-tool .action-icon,
.ad-copy-inline-tool .icon {
  width: 12px;
  height: 12px;
}

.ad-copy-inline-tool.loading {
  min-width: 120px;
}

.ad-copy-inline-tool .button-credit-badge {
  margin-inline-start: 4px;
  transform: scale(0.88);
  transform-origin: center;
}

.ad-copy-inline-status {
  margin-top: 10px;
  margin-bottom: 10px;
}

/* Copy step: one row of ways to change the copy, readable and the same height.
   Even columns so a narrow panel wraps into a tidy 2 x 2 instead of one orphan. */
.ad-copy-tools.ad-copy-inline-actions {
  display: grid;
  grid-template-columns: auto auto auto 34px;
  justify-content: stretch;
  text-align: start;
  gap: 8px;
  align-self: stretch;
  margin-top: 14px;
  padding-top: 12px;
  border-top: 1px solid #eef0f4;
  width: 100%;
}

.ad-copy-tools .ad-copy-inline-tool {
  width: 100%;
  justify-content: center;
  white-space: nowrap;
  min-height: 34px;
  padding: 0 10px;
  border-radius: 10px;
  font-size: 13px;
  font-weight: 500;
  color: #374151;
  border-color: #e2e4ec;
  background: #ffffff;
  gap: 6px;
}

.ad-copy-tools .ad-copy-inline-tool .action-icon,
.ad-copy-tools .ad-copy-inline-tool > .icon {
  flex: 0 0 14px;
  width: 14px;
  height: 14px;
  color: var(--brand-primary, #7c3aed);
}

.ad-copy-tools .ad-copy-inline-tool .button-credit-badge {
  flex: 0 0 auto;
  margin-inline-start: 2px;
}

.ad-copy-tools .ad-copy-inline-tool:hover:not(:disabled),
.ad-copy-tools .ad-copy-inline-tool:focus-visible {
  border-color: #cdb8ff;
  background: #f8f5ff;
  color: #2e1065;
}

.ad-copy-tools .ad-copy-inline-tool.is-active,
.ad-copy-tools .ad-copy-more-btn.is-open {
  border-color: var(--brand-primary, #7c3aed);
  background: #f3edff;
  color: #2e1065;
}

.ad-copy-tools .ad-copy-inline-tool:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.ad-copy-tools .ad-copy-more-btn {
  min-width: 0;
}

.ad-copy-tools .ad-copy-more-wrap {
  display: flex;
}

.ad-copy-tools .ad-copy-more-btn {
  padding: 0;
}

.ad-copy-more-dots {
  width: 16px;
  height: 16px;
}

/* Wide panel: More is a dots button at the end of the row; phones: a labelled 2 x 2. */
.ad-copy-more-label {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

/* The copy card decides the toolbar layout from its own width, not the screen's. */
.ad-copy-card {
  container-type: inline-size;
  container-name: adcopy;
}

@container adcopy (max-width: 460px) {
  .ad-copy-tools.ad-copy-inline-actions {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .ad-copy-tools .ad-copy-more-btn {
    padding: 0 12px;
  }

  .ad-copy-more-label {
    position: static;
    width: auto;
    height: auto;
    overflow: visible;
    clip: auto;
  }
}

/* Very narrow card (tablet side panel): one full-width button per row, nothing squeezed. */
@container adcopy (max-width: 330px) {
  .ad-copy-tools.ad-copy-inline-actions {
    grid-template-columns: minmax(0, 1fr);
  }
}

.ad-copy-tools .ad-copy-more-item {
  font-size: 13px;
}

/* "Ask AI to change" opens right under the toolbar, inside the copy card. */
.ad-copy-ai-box.feedback-box.is-open {
  display: grid;
  text-align: start;
  gap: 8px;
  margin: 12px 0 0;
  padding: 12px;
  border: 1px solid #dccbff;
  border-radius: 12px;
  background: #faf7ff;
}

.ad-copy-ai-box > label:first-child {
  margin: 0;
  font-size: 13px;
  font-weight: 500;
  color: #2e1065;
}

.ad-copy-ai-box textarea {
  margin: 0;
  min-height: 76px;
  font-size: 14px;
  background: #ffffff;
}

.ad-copy-ai-box .checkbox-line {
  margin: 0;
  font-size: 13px;
  color: #5b6474;
}

.ad-copy-ai-box-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 8px;
}

/* The copy step's one next step. */
.copy-primary-actions .copy-approve-btn {
  grid-column: 1 / -1;
  width: 100%;
  flex: 1 1 100%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 46px;
  font-size: 16px;
  font-weight: 700;
  border-radius: 12px;
}

.copy-primary-actions .copy-approve-btn .action-icon {
  width: 16px;
  height: 16px;
}

[dir="rtl"] .copy-primary-actions .copy-approve-btn .action-icon,
html[lang="ar"] .copy-primary-actions .copy-approve-btn .action-icon {
  transform: scaleX(-1);
}

html[dir="rtl"] .ad-copy-card .ad-copy-inline-actions,
[dir="rtl"] .ad-copy-card .ad-copy-inline-actions,
.rtl .ad-copy-inline-actions {
  margin-left: auto;
  margin-right: 0;
}

.ad-copy-supporting-card {
  margin-top: 12px;
}

.ad-copy-supporting-card.is-collapsed {
  padding: 8px 12px !important;
}

.ad-copy-supporting-card.is-collapsed .ad-copy-supporting-head {
  margin-bottom: 0;
  min-height: 32px;
}

.ad-copy-supporting-card.is-collapsed .section-title {
  margin-bottom: 0;
  line-height: 1.1;
}

.ad-copy-supporting-card.is-collapsed .ad-copy-collapse-toggle {
  width: 32px;
  height: 32px;
  min-height: 32px;
  border-radius: 10px;
  font-size: 16px;
}

.ad-copy-supporting-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 8px;
}

#meta-ad-copy-card .section-title {
  font-size: 16px;
}

.ad-copy-supporting-copy {
  flex: 0 0 auto;
}

.ad-copy-supporting-note {
  margin: 0 0 12px;
  font-size: 12px;
  line-height: 1.5;
}

/* Caption text matches the Meta option text size (one scale: 12 / 14 / 16). */
.ad-copy-card .ad-copy-display {
  font-size: 14px;
  line-height: 1.6;
}

.ad-copy-collapse-toggle {
  width: 38px;
  height: 38px;
  min-height: 38px;
  padding: 0;
  border-radius: 12px;
  font-size: 18px;
  line-height: 1;
  flex: 0 0 auto;
}

.ad-copy-meta-variants {
  display: grid;
  gap: 12px;
}

.ad-copy-meta-variants.is-collapsed {
  display: none;
}

.ad-copy-meta-variant {
  display: grid;
  gap: 12px;
  border: 1px solid #e5e7eb;
  border-radius: 14px;
  padding: 14px 16px;
  background: #fafafa;
}

.ad-copy-meta-variant-head {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}

.ad-copy-meta-variant-index {
  flex: 0 0 auto;
  display: inline-grid;
  place-items: center;
  width: 24px;
  height: 24px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--brand-primary) 12%, #fff);
  color: var(--brand-primary);
  font-size: 12px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

.ad-copy-meta-variant-angle {
  font-size: 14px;
  font-weight: 500;
  color: var(--brand-primary);
  line-height: 1.4;
  min-width: 0;
}

.ad-copy-meta-field {
  display: grid;
  gap: 4px;
  min-width: 0;
}

.ad-copy-meta-field + .ad-copy-meta-field {
  padding-top: 12px;
  border-top: 1px solid #eceef1;
}

.ad-copy-meta-field-head {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 2px;
  min-height: 24px;
}

.ad-copy-meta-label {
  display: block;
  font-size: 12px;
  font-weight: 500;
  color: #6b7280;
  line-height: 1.3;
}

.ad-copy-meta-value {
  display: block;
  font-size: 14px;
  font-weight: 400;
  color: #111827;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  line-height: 1.6;
}

.ad-copy-meta-field--headline .ad-copy-meta-value {
  font-size: 16px;
  font-weight: 700;
  line-height: 1.45;
}

.ad-copy-meta-field--cta .ad-copy-meta-value {
  color: #374151;
}

.copy-prompt-btn.ad-copy-meta-copy {
  flex: 0 0 auto;
  display: inline-grid;
  place-items: center;
  width: 32px;
  height: 32px;
  margin: -4px 0 !important;
  padding: 0 !important;
  border-radius: 8px;
  color: #6b7280;
  transition: background-color .15s ease, color .15s ease;
}

.copy-prompt-btn.ad-copy-meta-copy:hover {
  background: #eef0f3;
  color: #111827;
}

.copy-prompt-btn.ad-copy-meta-copy:focus-visible,
.ad-copy-collapse-toggle:focus-visible {
  outline: 2px solid var(--brand-primary);
  outline-offset: 2px;
}

.ad-copy-collapse-toggle .ad-copy-chevron {
  transition: transform .2s cubic-bezier(.2, .8, .2, 1);
}

.ad-copy-collapse-toggle.is-expanded .ad-copy-chevron {
  transform: rotate(180deg);
}

/* Tool in progress: spinner line, dimmed copy and skeleton options */
.ad-copy-tool-progress {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 12px 0 0;
  font-size: 14px;
  font-weight: 500;
  color: var(--brand-primary);
}

#meta-ad-copy-card .ad-copy-tool-progress {
  margin: 0 0 12px;
}

.ad-copy-spinner {
  flex: 0 0 auto;
  width: 16px;
  height: 16px;
  border-radius: 999px;
  border: 2px solid color-mix(in srgb, var(--brand-primary) 22%, transparent);
  border-top-color: var(--brand-primary);
  animation: ad-copy-spin .8s linear infinite;
}

@keyframes ad-copy-spin {
  to { transform: rotate(360deg); }
}

.ad-copy-display.is-rewriting {
  position: relative;
  opacity: .5;
  -webkit-mask-image: linear-gradient(100deg, #000 35%, rgba(0, 0, 0, .35) 50%, #000 65%);
  mask-image: linear-gradient(100deg, #000 35%, rgba(0, 0, 0, .35) 50%, #000 65%);
  -webkit-mask-size: 300% 100%;
  mask-size: 300% 100%;
  animation: ad-copy-sweep 1.6s ease-in-out infinite;
  pointer-events: none;
}

.ad-copy-meta-variant--skeleton {
  gap: 10px;
}

.ad-copy-skeleton-line {
  display: block;
  height: 10px;
  border-radius: 6px;
  background: linear-gradient(90deg, #eceef1 25%, #f6f7f9 50%, #eceef1 75%);
  background-size: 300% 100%;
  animation: ad-copy-sweep 1.6s ease-in-out infinite;
}

.ad-copy-skeleton-line--strong {
  height: 14px;
  margin-bottom: 4px;
}

/* Caption being written: card in the caption's place */
.ad-copy-writing-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 8px 12px;
  margin-bottom: 16px;
}

.ad-copy-writing-head .section-title {
  margin: 0;
}

.loading-pill.ad-copy-writing-chip {
  gap: 8px;
  padding: 6px 12px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 500;
  line-height: 1.4;
}

.ad-copy-writing-chip .ad-copy-spinner {
  width: 14px;
  height: 14px;
}

.ad-copy-writing-chip .elapsed-timer {
  font-size: 12px;
  opacity: .75;
}

.ad-copy-writing-lines {
  display: grid;
  gap: 10px;
}

.ad-copy-writing-lines .ad-copy-skeleton-line--strong {
  height: 16px;
  margin-bottom: 8px;
}

.ad-copy-writing-lines .ad-copy-writing-cta {
  margin-top: 8px;
}

.ad-copy-card .ad-copy-writing-note {
  margin: 20px 0 0;
  padding-top: 12px;
  border-top: 1px solid #eceef1;
  font-size: 12px;
  line-height: 1.5;
  color: #6b7280;
}

@keyframes ad-copy-sweep {
  from { -webkit-mask-position: 100% 0; mask-position: 100% 0; background-position: 100% 0; }
  to { -webkit-mask-position: 0 0; mask-position: 0 0; background-position: 0 0; }
}

@media (prefers-reduced-motion: reduce) {
  .ad-copy-spinner,
  .ad-copy-display.is-rewriting,
  .ad-copy-skeleton-line {
    animation: none;
  }
}

@media (max-width: 1023px) {
  .copy-prompt-btn.ad-copy-meta-copy {
    width: 40px;
    height: 40px;
    margin: -8px -4px !important;
  }
}

.ad-copy-meta-tabs {
  display: flex;
  gap: 6px;
  margin: 0 0 12px;
  overflow-x: auto;
  scrollbar-width: none;
}

.ad-copy-meta-tabs::-webkit-scrollbar {
  display: none;
}

.ad-copy-meta-tab {
  flex: 0 0 auto;
  min-height: 36px;
  padding: 0 14px;
  border: 1px solid #e5e7eb;
  border-radius: 999px;
  background: #fff;
  color: #374151;
  font: inherit;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  transition: background-color .15s ease, border-color .15s ease, color .15s ease;
}

.ad-copy-meta-tab:hover {
  border-color: #d1d5db;
  background: #f9fafb;
}

.ad-copy-meta-tab.is-active {
  border-color: var(--brand-primary);
  background: color-mix(in srgb, var(--brand-primary) 10%, #fff);
  color: var(--brand-primary);
}

.ad-copy-meta-tab:focus-visible {
  outline: 2px solid var(--brand-primary);
  outline-offset: 2px;
}

.ad-copy-meta-actions {
  display: flex;
  padding-top: 12px;
  border-top: 1px solid #eceef1;
}

.button.copy-prompt-btn.ad-copy-meta-copy-all {
  opacity: 1;
  color: #111827;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 36px;
  padding: 0 14px !important;
  margin: 0 !important;
}

@media (max-width: 1023px) {
  .ad-copy-meta-tab,
  .button.copy-prompt-btn.ad-copy-meta-copy-all {
    min-height: 44px;
  }
}

@keyframes copyPulse {
  0% {
    transform: translateY(6px);
    opacity: 0;
  }
  100% {
    transform: translateY(0);
    opacity: 1;
  }
}

.social-likes {
  padding: 0 16px;
  font-weight: 700;
  font-size: 13px;
}

.job-item:hover {
  transform: translateY(-2px);
  border-color: var(--brand-primary);
}

.muted {
  color: var(--brand-muted);
  font-size: 13px;
}

.job-item > .muted {
  font-size: 13.2px;
  line-height: 1.4;
}

.job-message {
  margin-bottom: 0;
}

.job-message-wrap {
  width: 100%;
}

.job-message-wrap .job-message {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 0;
}

.job-message-main {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  width: 100%;
  min-width: 0;
}

.job-message-text {
  flex: 1 1 auto;
  min-width: 0;
  margin: 0;
  white-space: pre-wrap;
  word-break: break-word;
  overflow-wrap: anywhere;
  line-height: 1.45;
  overflow: hidden;
  transition: max-height 0.32s cubic-bezier(0.4, 0, 0.2, 1);
}

.job-message-wrap.has-overflow:not(.is-expanded) .job-message-text {
  /* JS sets exact px; fallback = 6 lines (4 readable + 2 faded peek). */
  max-height: calc(1.45em * 6);
  /* Fade the last ~2 peek lines so truncation is obvious before the expand arrow. */
  -webkit-mask-image: linear-gradient(
    to bottom,
    #000 0%,
    #000 calc(100% - 2.3em),
    rgba(0, 0, 0, 0.45) calc(100% - 1.1em),
    transparent 100%
  );
  mask-image: linear-gradient(
    to bottom,
    #000 0%,
    #000 calc(100% - 2.3em),
    rgba(0, 0, 0, 0.45) calc(100% - 1.1em),
    transparent 100%
  );
}
.job-message-wrap.is-expanded .job-message-text,
.job-message-wrap:not(.has-overflow) .job-message-text {
  -webkit-mask-image: none;
  mask-image: none;
}

.job-message-wrap .job-message-main > .copy-prompt-btn {
  flex: 0 0 auto;
  align-self: flex-start;
  order: -1;
  margin: 0;
}

.job-message-expand {
  appearance: none;
  background: none;
  border: none;
  padding: 0;
  margin: -2px auto 0;
  cursor: pointer;
  color: var(--brand-muted);
  opacity: 0.8;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 16px;
  border-radius: 999px;
  line-height: 1;
  transition: opacity 0.15s ease, color 0.15s ease, background-color 0.15s ease;
}

.job-message-expand[hidden] {
  display: none !important;
}

.job-message-expand:hover,
.job-message-expand:focus-visible {
  opacity: 1;
  color: var(--brand-primary);
  background: rgba(124, 58, 237, 0.08);
  outline: none;
}

.job-message-expand-icon {
  display: inline-block;
  font-size: 13px;
  font-weight: 700;
  line-height: 1;
  transform: rotate(0deg);
  transition: transform 0.22s ease;
}

.job-message-wrap.is-expanded .job-message-expand-icon {
  transform: rotate(180deg);
}

@media (prefers-reduced-motion: reduce) {
  .job-message-text,
  .job-message-expand-icon {
    transition: none;
  }
}

.copy-prompt-btn {
  background: none;
  border: none;
  padding: 2px 4px;
  cursor: pointer;
  color: var(--brand-muted);
  opacity: 0.6;
  transition: opacity 0.2s, color 0.2s;
  display: inline;
  vertical-align: middle;
  margin-inline-start: 4px;
}

.copy-prompt-btn:hover {
  opacity: 1;
  color: var(--brand-primary);
}

.copy-prompt-btn.copied {
  color: #22c55e;
  opacity: 1;
}

.copy-prompt-btn .copy-icon {
  width: 14px;
  height: 14px;
}

.copy-prompt-btn.ad-copy-card-copy {
  margin-inline-start: 0 !important;
  margin-right: 0 !important;
  padding-right: 0 !important;
  padding-inline-end: 0 !important;
}

.action-row {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 10px;
}

/* Job panel actions: CSS-only layout (same behavior as mobile). */
.job-details-card .action-row,
.job-details-card .publish-actions,
.job-details-modal .action-row,
.job-details-modal .publish-actions {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  align-items: stretch;
}

.job-details-card .action-row .button,
.job-details-card .publish-actions .button,
.job-details-modal .action-row .button,
.job-details-modal .publish-actions .button {
  min-width: 0;
  width: 100%;
  justify-content: center;
}

@media (max-width: 768px) {
  .ad-copy-card-head {
    flex-direction: column;
  }

  .ad-copy-inline-actions {
    width: 100%;
  }
}

.job-details-card .action-row > *:last-child:nth-child(odd),
.job-details-card .publish-actions > *:last-child:nth-child(odd),
.job-details-modal .action-row > *:last-child:nth-child(odd),
.job-details-modal .publish-actions > *:last-child:nth-child(odd) {
  grid-column: 1 / -1;
  width: calc((100% - 8px) / 2);
  justify-self: center;
}

.action-pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  white-space: nowrap;
}

.meta-publish-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
  gap: 6px;
}

.meta-publish-pill .meta-publish-pill-lead-icon,
.meta-publish-pill .publish-approve-label-full {
  display: none;
}

.meta-publish-pill .publish-approve-label-compact,
.meta-publish-pill .meta-publish-platform-icons {
  display: inline-flex;
}

/* Platform logos as an overlapping stack so more networks fit in the same width. */
.meta-publish-pill .meta-publish-platform-icons {
  align-items: center;
  direction: ltr;
  flex-shrink: 0;
}

.meta-publish-pill .meta-publish-platform-icon {
  width: 22px;
  height: 22px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  box-sizing: border-box;
  border-radius: 50%;
  border: 2px solid #ffffff;
  background: color-mix(in srgb, var(--brand-primary, #7c3aed) 12%, #ffffff);
  color: var(--brand-primary, #7c3aed);
  margin-inline-start: -7px;
}

.meta-publish-pill .meta-publish-platform-icon:first-child {
  margin-inline-start: 0;
}

.meta-publish-pill .meta-publish-platform-icon .publishing-platform-glyph {
  display: block;
  width: 12px;
  height: 12px;
}

.meta-publish-pill .meta-publish-platform-more {
  font-size: 10px;
  font-weight: 500;
  line-height: 1;
}

.job-details-card .action-row,
.job-details-modal .action-row {
  container: job-actions / inline-size;
}

.meta-publish-pill .meta-publish-platform-more-narrow {
  display: none;
}

/* Narrow action rows (jobs page column, phones): two logos plus "+N", tighter padding. */
@container job-actions (max-width: 400px) {
  .meta-publish-pill {
    padding-inline: 10px;
  }

  .meta-publish-pill .meta-publish-platform-icons > .meta-publish-platform-icon:nth-child(n+3):not(.meta-publish-platform-more-narrow) {
    display: none;
  }

  .meta-publish-pill .meta-publish-platform-icons > .meta-publish-platform-more-narrow {
    display: inline-flex;
  }
}

.meta-publish-pill .publish-approve-label-compact {
  display: inline-flex;
  align-items: center;
  align-self: center;
  flex: 0 0 auto;
  line-height: 1;
}

.meta-publish-pill .meta-publish-platform-icons {
  align-self: center;
}

.meta-publish-pill .button-credit-badge {
  align-self: center;
  flex: 0 0 auto;
}

/* RTL: only nudge the label down — keep icons and badge layout unchanged. */
html[dir="rtl"] .meta-publish-pill .publish-approve-label-compact {
  transform: translateY(3px);
}

.action-pill.undo-button {
  color: var(--brand-muted);
  border-color: var(--brand-border);
}

.action-pill.undo-button:hover {
  color: var(--brand-text);
  border-color: var(--brand-primary);
}

/* Create video button disabled state */
#create-video-btn:disabled {
  opacity: 0.7;
  cursor: wait;
}

/* Video Size Modal */
.video-size-modal {
  max-width: 420px;
  padding: 24px;
  font-family: 'Cairo', 'Tajawal', system-ui, -apple-system, sans-serif;
}
.video-size-modal .modal-title {
  margin: 0 0 20px;
  font-size: 1.25rem;
  text-align: center;
  font-weight: 700;
}
.video-style-section {
  margin: 16px 0 18px;
}
#video-style-anchor-step3:not([hidden]) {
  margin-bottom: 14px;
}
.video-style-title {
  font-weight: 700;
  font-size: 0.95rem;
  margin-bottom: 10px;
}
.video-style-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}
.video-style-option {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 10px 16px;
  border: 1.5px solid rgba(0,0,0,0.08);
  border-radius: 10px;
  background: #fff;
  font-size: 13px;
  cursor: pointer;
  width: 100%;
  font-family: inherit;
  position: relative;
  transition: all 0.2s;
}
.video-style-option:hover {
  border-color: var(--brand-accent);
  background: rgba(147, 51, 234, 0.03);
}
.video-style-option.selected {
  border-color: var(--brand-accent);
  background: rgba(147, 51, 234, 0.05);
  box-shadow: 0 0 0 1px var(--brand-accent);
}
.video-style-hint {
  font-size: 12px;
  color: var(--brand-muted);
  cursor: help;
  position: relative;
}
.video-duration-section {
  margin: 16px 0 12px;
}
.video-duration-options {
  display: flex;
  gap: 10px;
}
.video-duration-option {
  padding: 8px 12px;
  border: 1px solid var(--brand-border);
  border-radius: 10px;
  background: #fff;
  cursor: pointer;
  font-size: 0.9rem;
}
.video-duration-option.selected {
  border-color: var(--brand-primary);
  background: rgba(147, 51, 234, 0.08);
  box-shadow: 0 0 0 1px rgba(147, 51, 234, 0.2);
}
@media (max-width: 520px) {
  .video-style-grid {
    grid-template-columns: 1fr;
  }
}
.video-size-options {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.video-size-option {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 16px;
  border: 2px solid var(--brand-border);
  border-radius: 12px;
  background: var(--brand-card);
  cursor: pointer;
  transition: all 0.2s;
  text-align: left;
  width: 100%;
  font-family: inherit;
}
.rtl .video-size-option {
  text-align: right;
  flex-direction: row-reverse;
}
.video-size-option:hover {
  border-color: var(--brand-primary);
  background: rgba(147, 51, 234, 0.04);
}
.video-size-preview {
  width: 48px;
  height: 48px;
  background: linear-gradient(135deg, #7c3aed 0%, #ec4899 100%);
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.video-size-preview.reel {
  aspect-ratio: 9/16;
  height: 48px;
  width: 27px;
}
.video-size-preview.square {
  aspect-ratio: 1/1;
  width: 40px;
  height: 40px;
}
.video-size-preview .video-icon {
  width: 20px;
  height: 20px;
  color: white;
}
.video-size-info {
  flex: 1;
}
.video-size-name {
  font-weight: 700;
  font-size: 15px;
  margin-bottom: 2px;
}
.video-size-desc {
  font-size: 12px;
  color: var(--brand-muted);
}
.modal-disclaimer {
  margin-bottom: 20px;
  padding: 12px 16px;
  background: rgba(147, 51, 234, 0.05);
  border: 1px solid rgba(147, 51, 234, 0.1);
  border-radius: 12px;
  font-size: 13px;
  color: var(--brand-muted);
  line-height: 1.5;
  text-align: center;
}
.video-size-option:hover {
  border-color: var(--brand-primary);
  background: var(--brand-surface);
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}
.video-size-preview {
  flex-shrink: 0;
  background: linear-gradient(135deg, #7c3aed 0%, #ec4899 100%);
  border-radius: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.video-size-preview.reel {
  width: 36px;
  height: 64px;
}
.video-size-preview.square {
  width: 50px;
  height: 50px;
}
.video-size-preview::after {
  content: '▶';
  color: white;
  font-size: 14px;
  opacity: 0.9;
}
.video-size-info {
  flex: 1;
}
.video-size-name {
  font-weight: 500;
  color: var(--brand-text);
  margin-bottom: 4px;
}
.video-size-desc {
  font-size: 0.85rem;
  color: var(--brand-muted);
}

.loading-pill.video-loading {
  background: linear-gradient(135deg, #7c3aed20 0%, #ec489920 100%);
  border: 1px solid #7c3aed40;
  color: #7c3aed;
  margin-top: 16px;
}

/* Video Preview Section */
.video-preview-section {
  margin-top: 16px;
  padding: 16px;
  background: linear-gradient(135deg, #7c3aed10 0%, #ec489910 100%);
  border: 1px solid #7c3aed30;
  border-radius: 12px;
}
.video-preview-label {
  display: flex;
  align-items: center;
  gap: 8px;
  font-weight: 500;
  color: #7c3aed;
  margin-bottom: 12px;
}
.video-preview {
  width: 100%;
  max-width: 300px;
  border-radius: 8px;
  background: #000;
}

/* Video job preview in job details */
.video-preview-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
}
.video-preview-wrap .lazy-video-preview {
  border: 1px solid var(--brand-border);
}

.video-preview-wrap .video-preview {
  width: 100%;
  max-width: 100%;
  max-height: 60vh;
  border-radius: 12px;
  border: 1px solid var(--brand-border);
}

.lazy-video-preview {
  position: relative;
  width: 100%;
  min-height: 180px;
  overflow: hidden;
  border-radius: 12px;
  background: #0f172a;
  cursor: pointer;
}

.lazy-video-preview .video-preview,
.lazy-video-preview .social-image {
  display: block;
  width: 100%;
  max-height: 60vh;
  min-height: 180px;
  border-radius: 12px;
  border: 0;
  background: #0f172a;
  pointer-events: none;
}

.lazy-video-preview.is-playing .video-preview,
.lazy-video-preview.is-playing .social-image {
  pointer-events: auto;
}

.lazy-video-preview-overlay {
  position: absolute;
  inset: 0;
  z-index: 5;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  margin: 0;
  padding: 16px;
  border: 0;
  background: rgba(15, 23, 42, 0.55);
  color: #fff;
  cursor: pointer;
  font-family: 'Cairo', 'IBM Plex Sans Arabic', 'Tajawal', system-ui, sans-serif;
  transition: opacity 0.2s ease, background 0.2s ease;
  -webkit-appearance: none;
  appearance: none;
}

.lazy-video-preview-overlay:hover,
.lazy-video-preview-overlay:focus-visible {
  background: rgba(15, 23, 42, 0.72);
}

.lazy-video-preview-play {
  width: 56px;
  height: 56px;
  border-radius: 999px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  background: var(--brand-primary, #9333ea);
  color: #fff;
  box-shadow: 0 8px 24px rgba(15, 23, 42, 0.35);
  transition: transform 0.2s ease, background 0.2s ease;
}

.lazy-video-preview-play svg {
  width: 24px;
  height: 24px;
  display: block;
}

.lazy-video-preview-overlay:hover .lazy-video-preview-play,
.lazy-video-preview-overlay:focus-visible .lazy-video-preview-play {
  transform: scale(1.06);
  background: var(--brand-primary-dark, #7e22ce);
}

.lazy-video-preview-label {
  font-family: inherit;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0;
  text-shadow: 0 1px 8px rgba(0, 0, 0, 0.35);
}

.lazy-video-preview.is-playing {
  cursor: default;
}

.lazy-video-preview.is-playing .lazy-video-preview-overlay {
  opacity: 0;
  pointer-events: none;
}
.video-preview-actions {
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: stretch;
}
.video-download-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.video-preview-actions .video-download-btn {
  margin-top: 0;
  flex: 1 1 0;
  justify-content: center;
}

.video-caption-progress {
  width: 100%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin-top: 2px;
  font-size: 13px;
  color: var(--brand-muted);
}

@media (max-width: 640px) {
  .video-preview-actions {
    flex-direction: column;
  }
}

.undo-row {
  margin-top: 12px;
  justify-content: flex-start;
}

.feedback-box {
  display: none;
}

.feedback-box.is-open {
  display: block;
}

/* AI edit mode in the job panel: one filled send button, the open mode marked, the rest below. */
.job-details-card .action-pill.is-active,
.job-details-modal .action-pill.is-active {
  background: color-mix(in srgb, var(--brand-primary, #7c3aed) 9%, #ffffff);
  border-color: var(--brand-primary, #7c3aed);
  color: color-mix(in srgb, var(--brand-primary, #7c3aed) 80%, #1f2937);
  box-shadow: inset 0 0 0 1px var(--brand-primary, #7c3aed);
}

.job-details-card .action-row.design-next-actions,
.job-details-modal .action-row.design-next-actions {
  margin-top: 16px;
  padding-top: 16px;
  border-top: 1px solid #eef0f4;
}

#design-feedback .design-feedback-submit {
  display: flex;
  width: 100%;
  margin-top: 10px;
}

#design-feedback .design-feedback-submit.is-empty {
  opacity: 0.55;
}

#design-feedback .image-edit-credit-note {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 4px 6px;
  margin: 8px 0 0;
  padding: 0;
  border: 0;
  background: none;
  color: #6b7280;
}

#design-feedback .image-edit-note-help {
  height: auto;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: none;
  color: var(--brand-primary, #7c3aed);
  font-size: 12px;
  font-weight: 500;
  text-decoration: underline;
  text-underline-offset: 2px;
}

.job-danger-row {
  display: flex;
  justify-content: flex-end;
  margin-top: 16px;
}

.job-danger-button {
  padding: 7px 12px;
  font-size: 13px;
  border-radius: 10px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.job-danger-icon {
  width: 14px;
  height: 14px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.job-danger-icon svg {
  width: 14px;
  height: 14px;
  stroke: currentColor;
  fill: none;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* Job Actions Row (report + cancel/delete) */
.job-actions-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 16px;
  padding-top: 16px;
  border-top: 1px solid var(--brand-border, #e2e8f0);
}

/* Keep report anchored right in RTL; keep clone centered between report and danger */
html[dir="rtl"] .job-actions-row #job-report,
[dir="rtl"] .job-actions-row #job-report,
.rtl .job-actions-row #job-report {
  order: 1;
}

html[dir="rtl"] .job-actions-row #clone-carousel-job,
[dir="rtl"] .job-actions-row #clone-carousel-job,
.rtl .job-actions-row #clone-carousel-job,
html[dir="rtl"] .job-actions-row #duplicate-multi-job,
[dir="rtl"] .job-actions-row #duplicate-multi-job,
.rtl .job-actions-row #duplicate-multi-job {
  order: 2;
}

html[dir="rtl"] .job-actions-row #job-danger,
[dir="rtl"] .job-actions-row #job-danger,
.rtl .job-actions-row #job-danger {
  order: 3;
}

.job-report-button {
  padding: 7px 12px;
  font-size: 13px;
  border-radius: 10px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.job-report-icon {
  width: 14px;
  height: 14px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.job-report-icon svg {
  width: 14px;
  height: 14px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* Job Report Modal */
#job-report-modal .modal-card.report-modal {
  width: min(520px, 92vw);
  max-width: 520px;
  max-height: calc(100vh - 32px);
  padding: 28px;
  border: 1px solid var(--brand-line, #e8edf3);
  border-radius: 16px;
  overflow: auto;
  box-shadow: 0 20px 40px rgba(15, 23, 42, 0.1), 0 4px 12px rgba(15, 23, 42, 0.05);
}

@media (max-width: 640px) {
  #job-report-modal .modal-card.report-modal {
    width: 92vw;
    padding: 20px;
    border-radius: 14px;
  }
}

.report-modal-topbar {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  margin-bottom: 14px;
}

.report-modal-head {
  order: 1;
  margin: 0;
  min-width: 0;
  flex: 1;
  text-align: start;
}

html[dir="rtl"] #job-report-modal .report-modal-head,
[dir="rtl"] #job-report-modal .report-modal-head,
.rtl #job-report-modal .report-modal-head,
html[lang="ar"] #job-report-modal .report-modal-head {
  text-align: right;
}

#job-report-modal .report-modal-close {
  order: 2;
  position: static;
  flex-shrink: 0;
  width: 32px;
  height: 32px;
  margin: 0;
  font-size: 18px;
  line-height: 1;
  background: rgba(15, 23, 42, 0.06);
}

#job-report-modal .report-modal-close:hover {
  background: rgba(15, 23, 42, 0.1);
}

.report-modal-title {
  margin: 0 0 4px;
  font-size: 1.1475rem;
  font-weight: 700;
  line-height: 1.35;
  color: var(--brand-ink, #1e293b);
  letter-spacing: -0.01em;
}

.report-modal-subtitle {
  color: var(--brand-muted, #64748b);
  font-size: 0.8125rem;
  margin: 0;
  line-height: 1.45;
  font-weight: 500;
}

.report-trust-bar {
  margin: 0 0 10px;
  padding: 8px 12px;
  border-radius: 10px;
  background: #f8fafc;
  border: 1px solid #eef2f6;
  color: #64748b;
  font-size: 0.72rem;
  line-height: 1.45;
  font-weight: 500;
  text-align: start;
}

.report-trust-bar.is-refunded {
  background: rgba(34, 197, 94, 0.06);
  border-color: rgba(34, 197, 94, 0.16);
  color: #166534;
}

.report-trust-bar.is-hidden {
  display: none;
}

.report-modal-body {
  min-height: 0;
}

.report-step {
  display: flex;
  flex-direction: column;
  align-items: stretch;
}

.report-step[hidden] {
  display: none !important;
}

.report-pick-hint {
  margin: 0 0 8px;
  font-size: 0.72rem;
  line-height: 1.45;
  color: var(--brand-muted, #94a3b8);
}

.report-reasons {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin: 0;
}

#job-report-modal .report-reason-option {
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 54px;
  padding: 10px 14px;
  border: 1px solid #e8edf3;
  border-radius: 12px;
  background: var(--brand-surface, #fff);
  cursor: pointer;
  transition: border-color 0.15s ease, background-color 0.15s ease, box-shadow 0.15s ease;
  width: 100%;
  box-sizing: border-box;
  font: inherit;
  color: inherit;
  text-align: start;
}

/* DOM: icon, label — RTL keeps icon on the right beside text */
html[dir="rtl"] #job-report-modal .report-reason-option,
[dir="rtl"] #job-report-modal .report-reason-option,
.rtl #job-report-modal .report-reason-option,
html[lang="ar"] #job-report-modal .report-reason-option {
  flex-direction: row;
  justify-content: flex-start;
}

/* LTR: label left, icon right */
html[dir="ltr"] #job-report-modal .report-reason-option,
[dir="ltr"] #job-report-modal .report-reason-option {
  flex-direction: row-reverse;
  justify-content: flex-start;
}

#job-report-modal .report-reason-option:hover {
  border-color: color-mix(in srgb, var(--brand-primary, #7c3aed) 24%, #e2e8f0);
  background: #fcfcff;
}

#job-report-modal .report-reason-option.is-selected,
#job-report-modal .report-reason-option.selected {
  border-color: color-mix(in srgb, var(--brand-primary, #7c3aed) 38%, #e2e8f0);
  background: color-mix(in srgb, var(--brand-primary, #7c3aed) 5%, #ffffff);
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--brand-primary, #7c3aed) 12%, transparent);
}

#job-report-modal .report-reason-label {
  flex: 0 1 auto;
  min-width: 0;
  font-size: 0.8125rem;
  font-weight: 700;
  color: var(--brand-ink, #1e293b);
  line-height: 1.35;
}

#job-report-modal .report-reason-icon {
  flex: 0 0 32px;
  width: 32px;
  height: 32px;
  border-radius: 8px;
  background: color-mix(in srgb, var(--brand-primary, #7c3aed) 9%, #f5f3ff);
  color: var(--brand-primary, #7c3aed);
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.report-reason-icon svg {
  width: 16px;
  height: 16px;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.report-topic-chip {
  display: inline-block;
  align-self: flex-start;
  max-width: 100%;
  margin: 0 0 10px;
  padding: 4px 10px;
  border-radius: 999px;
  background: #f1f5f9;
  border: 0;
  font-size: 0.7425rem;
  line-height: 1.35;
  color: #64748b;
  font-weight: 500;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.report-topic-chip[hidden] {
  display: none;
}

.report-solution-section-title {
  margin: 0 0 10px;
  font-size: 0.8775rem;
  font-weight: 500;
  line-height: 1.35;
  color: var(--brand-muted, #64748b);
  text-align: start;
}

.report-solution-card {
  margin: 0 0 12px;
  padding: 12px;
  border-radius: 12px;
  border: 1px solid #eef2f6;
  background: #fff;
}

.report-solution-intro {
  margin: 0 0 12px;
}

.report-advice-rows + .report-solution-intro {
  margin-top: 20px;
}

.report-solution-intro-title {
  margin: 0 0 4px;
  font-size: 0.8775rem;
  font-weight: 700;
  line-height: 1.35;
  color: var(--brand-ink, #1e293b);
  text-align: start;
}

.report-solution-intro-text {
  margin: 0;
  font-size: 0.81rem;
  line-height: 1.5;
  color: var(--brand-muted, #64748b);
  text-align: start;
}

.report-advice-rows {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.report-advice-row {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 8px;
  align-items: start;
}

.report-advice-rows--nested {
  margin-top: 10px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding-inline-start: 14px;
  border-inline-start: 2px solid #eef2f6;
}

.report-advice-row--nested {
  gap: 6px;
}

.report-advice-dot--nested {
  width: 5px;
  height: 5px;
  margin-top: 7px;
  background: color-mix(in srgb, var(--brand-primary, #7c3aed) 45%, #e2e8f0);
}

.report-advice-row--nested .report-advice-heading {
  font-size: 0.8325rem;
}

.report-advice-row--nested .report-advice-text {
  font-size: 0.7875rem;
}

html[dir="rtl"] .report-advice-row,
[dir="rtl"] .report-advice-row,
.rtl .report-advice-row {
  grid-template-columns: auto 1fr;
}

.report-advice-dot {
  width: 6px;
  height: 6px;
  margin-top: 8px;
  border-radius: 50%;
  background: color-mix(in srgb, var(--brand-primary, #7c3aed) 70%, #c4b5fd);
  flex-shrink: 0;
}

.report-advice-heading {
  font-size: 0.8775rem;
  font-weight: 700;
  line-height: 1.35;
  color: var(--brand-ink, #1e293b);
}

.report-advice-text {
  margin-top: 2px;
  font-size: 0.81rem;
  line-height: 1.5;
  color: var(--brand-muted, #64748b);
}

.report-advice-heading:empty + .report-advice-text {
  margin-top: 0;
}

.report-solution-link {
  color: var(--brand-primary, #7c3aed);
  font-weight: 500;
  text-decoration: underline;
  text-underline-offset: 2px;
}

.report-solution-link:hover {
  color: color-mix(in srgb, var(--brand-primary, #7c3aed) 80%, #1e293b);
}

.report-solution-edit-guide {
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px solid #eef2f6;
}

.report-solution-edit-guide-title {
  font-size: 0.81rem;
  font-weight: 700;
  color: var(--brand-ink, #1e293b);
  margin-bottom: 6px;
}

.report-solution-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin-top: 0;
}

html[dir="rtl"] .report-solution-actions,
[dir="rtl"] .report-solution-actions,
.rtl .report-solution-actions {
  direction: rtl;
}

.report-solution-actions .button.report-primary-action {
  min-height: 46px;
  border-radius: 11px;
  font-size: 0.945rem;
  font-weight: 500;
  width: 100%;
  background: color-mix(in srgb, var(--brand-primary, #7c3aed) 68%, #94a3b8);
  border: 1px solid color-mix(in srgb, var(--brand-primary, #7c3aed) 32%, #cbd5e1);
  color: #fff;
  box-shadow: none;
}

.report-solution-actions .button.report-primary-action:hover {
  background: color-mix(in srgb, var(--brand-primary, #7c3aed) 74%, #94a3b8);
  border-color: color-mix(in srgb, var(--brand-primary, #7c3aed) 38%, #cbd5e1);
  color: #fff;
  transform: none;
  box-shadow: none;
}

.report-solution-actions .button.report-primary-action:active {
  background: color-mix(in srgb, var(--brand-primary, #7c3aed) 62%, #94a3b8);
  transform: translateY(1px);
}

.report-send-report-btn.button.secondary {
  min-height: 46px;
  border-radius: 11px;
  font-size: 0.8775rem;
  font-weight: 500;
  width: 100%;
  background: #fff;
  border: 1px solid #e2e8f0;
  color: var(--brand-muted, #64748b);
  box-shadow: none;
}

.report-send-report-btn.button.secondary:hover {
  border-color: #cbd5e1;
  color: var(--brand-ink, #334155);
  background: #f8fafc;
}

.report-details-section {
  margin: 0 0 12px;
}

.report-details-label {
  display: block;
  font-size: 0.8125rem;
  font-weight: 500;
  color: var(--brand-ink, #1e293b);
  margin-bottom: 8px;
  line-height: 1.4;
}

.report-details-input {
  width: 100%;
  height: 132px;
  min-height: 132px;
  max-height: 180px;
  padding: 12px 14px;
  border: 1px solid #e2e8f0;
  border-radius: 12px;
  font-size: 0.875rem;
  resize: vertical;
  font-family: inherit;
  line-height: 1.6;
  text-align: start;
  color: var(--brand-ink, #1e293b);
  background: var(--brand-surface, #fff);
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
  box-sizing: border-box;
}

.report-details-input::placeholder {
  color: #94a3b8;
}

.report-details-input:focus {
  outline: none;
  border-color: color-mix(in srgb, var(--brand-primary, #7c3aed) 55%, #cbd5e1);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--brand-primary, #7c3aed) 12%, transparent);
}

.report-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin-top: 0;
}

.report-actions .button {
  min-height: 44px;
  border-radius: 11px;
  padding-inline: 14px;
  font-size: 0.875rem;
  width: 100%;
}

.report-actions .button.report-primary-action {
  font-weight: 500;
  background: color-mix(in srgb, var(--brand-primary, #7c3aed) 68%, #94a3b8);
  border: 1px solid color-mix(in srgb, var(--brand-primary, #7c3aed) 32%, #cbd5e1);
  color: #fff;
  box-shadow: none;
}

.report-actions .button.report-primary-action:hover {
  background: color-mix(in srgb, var(--brand-primary, #7c3aed) 74%, #94a3b8);
  border-color: color-mix(in srgb, var(--brand-primary, #7c3aed) 38%, #cbd5e1);
  color: #fff;
  transform: none;
  box-shadow: none;
}

.report-actions .button.report-primary-action:active {
  background: color-mix(in srgb, var(--brand-primary, #7c3aed) 62%, #94a3b8);
  transform: translateY(1px);
}

.report-actions .button.report-cancel-btn,
.report-actions .button.secondary {
  font-weight: 500;
  background: #fff;
  border: 1px solid #e2e8f0;
  color: var(--brand-muted, #64748b);
  box-shadow: none;
}

.report-actions .button.report-cancel-btn:hover,
.report-actions .button.secondary:hover {
  border-color: #cbd5e1;
  color: var(--brand-ink, #334155);
  background: #f8fafc;
}

html[dir="rtl"] .report-actions,
[dir="rtl"] .report-actions,
.rtl .report-actions {
  direction: rtl;
}

.report-step-footer {
  margin-top: 14px;
  padding-top: 0;
  border-top: 0;
  text-align: center;
}

.report-step-back {
  display: inline;
  margin: 0;
  padding: 2px 0;
  border: 0;
  background: none;
  color: #94a3b8;
  font-size: 0.72rem;
  font-weight: 500;
  cursor: pointer;
  font-family: inherit;
  text-decoration: none;
}

.report-step-back:hover {
  color: var(--brand-primary, #7c3aed);
  text-decoration: underline;
  text-underline-offset: 2px;
}

.report-auto-refund-banner {
  margin: 0 0 14px;
  padding: 12px 14px;
  border-radius: 12px;
  background: rgba(34, 197, 94, 0.12);
  border: 1px solid rgba(34, 197, 94, 0.28);
  color: #166534;
  font-size: 0.92rem;
  line-height: 1.45;
}

.job-failure-card {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin: 14px 0 12px;
  padding: 12px 14px;
  border-radius: 12px;
  background: #fef8f8;
  border: 1px solid rgba(239, 68, 68, 0.16);
  color: #1e293b;
  max-width: 100%;
}

.job-failure-card-main {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  min-width: 0;
}

.job-failure-card-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 999px;
  background: rgba(239, 68, 68, 0.1);
  color: #dc2626;
  flex: 0 0 auto;
}

.job-failure-card-icon-glyph {
  width: 14px;
  height: 14px;
}

.job-failure-card-body {
  flex: 1 1 auto;
  min-width: 0;
}

.job-failure-card-title {
  font-size: 14px;
  font-weight: 700;
  line-height: 1.35;
  color: #0f172a;
  margin: 0 0 4px;
}

.job-failure-card-message {
  font-size: 13px;
  line-height: 1.45;
  color: #475569;
}

.job-failure-card-refund-badge {
  display: inline-flex;
  align-items: center;
  margin-top: 8px;
  padding: 4px 10px;
  border-radius: 999px;
  background: rgba(34, 197, 94, 0.1);
  border: 1px solid rgba(34, 197, 94, 0.2);
  color: #166534;
  font-size: 11px;
  font-weight: 500;
  line-height: 1.3;
}

.job-failure-card-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
  justify-content: flex-end;
}

html[dir="rtl"] .job-failure-card-actions,
[dir="rtl"] .job-failure-card-actions {
  justify-content: flex-start;
}

.job-failure-card-actions .button.small,
.job-failure-card-actions .button.secondary.small {
  min-height: 34px;
  padding: 6px 14px;
  font-size: 13px;
  font-weight: 500;
  border-radius: 10px;
  background: #fff;
  border: 1px solid #e2e8f0;
  color: #334155;
  box-shadow: none;
}

.job-failure-card-actions .button.small:hover,
.job-failure-card-actions .button.secondary.small:hover {
  border-color: #cbd5e1;
  background: #f8fafc;
}

html[dir="rtl"] .report-modal-header,
[dir="rtl"] .report-modal-header,
.rtl .report-modal-header,
html[dir="rtl"] .report-modal-head,
[dir="rtl"] .report-modal-head,
.rtl .report-modal-head {
  margin: 2px 0 10px 32px;
  direction: rtl;
}

html[dir="rtl"] .report-modal .modal-title,
[dir="rtl"] .report-modal .modal-title,
.rtl .report-modal .modal-title,
html[dir="rtl"] .report-modal-subtitle,
[dir="rtl"] .report-modal-subtitle,
.rtl .report-modal-subtitle {
  text-align: right;
}

html[dir="rtl"] .report-modal .modal-title,
[dir="rtl"] .report-modal .modal-title,
.rtl .report-modal .modal-title {
  width: 100%;
}

html[dir="rtl"] .report-actions,
[dir="rtl"] .report-actions,
.rtl .report-actions {
  justify-content: flex-start;
}

html[lang="ar"] .report-modal .modal-title,
html[lang="ar"] .report-modal-subtitle,
html[lang="ar"] .report-trust-bar,
html[lang="ar"] .report-reason-label,
html[lang="ar"] .report-solution-title,
html[lang="ar"] .report-solution-text,
html[lang="ar"] .report-solution-list,
html[lang="ar"] .report-actions .button,
html[lang="ar"] .report-solution-actions .button {
  font-family: 'Tajawal', 'Cairo', system-ui, -apple-system, Segoe UI, sans-serif;
}

@media (max-width: 640px) {
  .report-modal .modal-title {
    font-size: 1.05rem;
  }
}

/* ============================================================
   Auth pages – Login / Register  (premium SaaS aesthetic)
   ============================================================ */

.auth-layout {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 0 20px 60px;
  background:
    radial-gradient(ellipse 90% 50% at 50% -6%, rgba(124, 58, 237, 0.44) 0%, transparent 56%),
    radial-gradient(ellipse 60% 55% at 50% 44%, rgba(109, 40, 217, 0.20) 0%, transparent 65%),
    radial-gradient(ellipse 30% 30% at 78% 62%, rgba(168, 85, 247, 0.10) 0%, transparent 55%),
    radial-gradient(ellipse 24% 24% at 16% 72%, rgba(79, 70, 229, 0.08) 0%, transparent 55%),
    linear-gradient(160deg, #0e0b24 0%, #130c38 45%, #09071a 100%);
  position: relative;
  overflow-x: hidden;
}

.auth-layout.auth-layout-complete {
  justify-content: center;
}

.auth-layout-complete .auth-brand-header {
  margin-top: 0;
  font-size: 33.6px;
}

@media (max-width: 640px) {
  .auth-layout.auth-layout-complete {
    justify-content: center;
  }

  .auth-layout-complete .auth-brand-header {
    font-size: 26.4px;
  }
}

/* Fixed showcase/preview strips use z-index: 0; lift real content so they never paint over the card */
.auth-brand-header,
.auth-context-line,
.auth-card {
  position: relative;
  z-index: 1;
}

.auth-card {
  width: min(456px, 100%);
  margin: clamp(32px, 8vh, 84px) auto 0;
  background: linear-gradient(180deg, #ffffff 0%, #f6f7fb 100%);
  border-radius: 28px;
  padding: 32px 30px 24px;
  /* Softer elevation: old deep blurs pooled as dark patches at the bottom corners */
  box-shadow:
    0 0 0 1px rgba(124, 58, 237, 0.13),
    0 2px 8px rgba(0, 0, 0, 0.06),
    0 12px 40px rgba(0, 0, 0, 0.10);
  border: 1px solid rgba(255, 255, 255, 0.14);
  flex-shrink: 0;
}

[dir="rtl"] .auth-card {
  direction: rtl;
  text-align: right;
}

[dir="ltr"] .auth-card {
  direction: ltr;
  text-align: left;
}

/* -- Logo (legacy, kept for google-complete compat) -- */
.auth-logo {
  display: block;
  margin: 0 auto 28px;
  height: 32px;
  width: auto;
  object-fit: contain;
}

/* -- Brand header above card (login page) -- */
.auth-brand-header {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 11px;
  width: 100%;
  padding-top: clamp(24px, 5vh, 52px);
  padding-bottom: 6px;
  text-decoration: none;
  /* Single size root so the icon height tracks the wordmark */
  font-size: 28px;
  line-height: 1;
}

/* When brand header is present, reduce card's top margin */
.auth-brand-header + .auth-card,
.auth-brand-header ~ .auth-card {
  margin-top: 0;
}

.auth-brand-logo {
  /* Slightly taller than 1em so the mark reads closer to the word’s weight; em keeps scale with header */
  height: 1.14em;
  width: auto;
  object-fit: contain;
  object-position: 50% 50%;
  display: block;
  flex-shrink: 0;
  align-self: center;
  /* Artwork sits low in the asset — lift a touch so it matches the word optically */
  transform: translateY(calc(-0.08em - 4px));
}

.auth-brand-wordmark {
  font-size: 1em;
  font-weight: 700;
  color: rgba(255, 255, 255, 0.96);
  letter-spacing: -0.03em;
  line-height: 1;
  align-self: center;
}

/* -- Product context line (between brand header and card) -- */
.auth-context-line {
  margin: 6px auto 14px;
  max-width: 380px;
  width: 100%;
  text-align: center;
  font-size: 13px;
  line-height: 1.5;
  color: rgba(255, 255, 255, 0.40);
  letter-spacing: 0.01em;
}

html[lang="ar"] .auth-context-line {
  font-family: 'Tajawal', 'Cairo', system-ui, sans-serif;
  font-size: 13.5px;
  line-height: 1.55;
}

/* Desktop: less empty space above logo */
@media (min-width: 1024px) {
  .auth-brand-header {
    padding-top: clamp(10px, 2.2vh, 28px);
    padding-bottom: 4px;
  }

  .auth-context-line {
    margin: 4px auto 12px;
  }
}

/* -- Trust / benefit tagline below card (hidden — content moved inside card) -- */
.auth-trust-line {
  display: none;
}

/* -- Desktop preview: vertical infinite scroll (same clone + translate trick as mobile) -- */
.auth-preview-strip {
  display: none;
  position: fixed;
  top: 0;
  right: 0;
  width: 320px;
  height: 100vh;
  pointer-events: none;
  z-index: 0;
  overflow: hidden;
}

/* LTR: column order stable on RTL pages */
.auth-preview-track {
  direction: ltr;
  --auth-preview-segments: 2;
  display: flex;
  flex-direction: column;
  flex-wrap: nowrap;
  align-items: center;
  width: 100%;
  height: max-content;
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  gap: 0;
  animation: auth-preview-marquee 48s linear infinite;
  will-change: transform;
}

.auth-preview-segment {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  flex: 0 0 auto;
  padding: 24px 18px 16px;
}

@keyframes auth-preview-marquee {
  from { transform: translateY(0); }
  to {
    transform: translateY(calc(-100% / var(--auth-preview-segments, 2)));
  }
}

@media (prefers-reduced-motion: reduce) {
  .auth-preview-track {
    animation: none;
  }
}

/* Inner edge starts transparent so page bg bleeds through — no seam */
.auth-preview-strip::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 2;
  background:
    linear-gradient(to right,
      transparent            0%,
      rgba(10, 7, 28, 0.10) 20%,
      rgba(10, 7, 28, 0.55) 60%,
      rgba(10, 7, 28, 0.30) 100%
    ),
    linear-gradient(to bottom,
      transparent            0%,
      rgba(10, 7, 28, 0.0)  12%,
      rgba(10, 7, 28, 0.0)  82%,
      rgba(10, 7, 28, 0.85) 100%
    );
}

.auth-preview-img {
  width: 180px;
  height: 200px;
  border-radius: 12px;
  object-fit: cover;
  pointer-events: none;
  flex-shrink: 0;
  opacity: 0.20;
  filter: saturate(0.70) blur(1px);
}

@media (min-width: 1024px) {
  .auth-preview-strip {
    display: block;
  }
}

[dir="rtl"] .auth-preview-strip {
  right: auto;
  left: 0;
}

[dir="rtl"] .auth-preview-strip::before {
  background:
    linear-gradient(to left,
      transparent            0%,
      rgba(10, 7, 28, 0.10) 20%,
      rgba(10, 7, 28, 0.55) 60%,
      rgba(10, 7, 28, 0.30) 100%
    ),
    linear-gradient(to bottom,
      transparent            0%,
      rgba(10, 7, 28, 0.0)  12%,
      rgba(10, 7, 28, 0.0)  82%,
      rgba(10, 7, 28, 0.85) 100%
    );
}

/* -- Mobile showcase strip — infinite horizontal scroll (bottom only) -- */
.auth-mobile-showcase {
  display: none;
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  height: 140px;
  pointer-events: none;
  z-index: 0;
  overflow: hidden;
}

/* LTR only: RTL pages were reversing flex order and breaking the 50% marquee loop */
.auth-mobile-showcase,
.auth-showcase-track {
  direction: ltr;
}

/* Top edge transparent so page bg bleeds through; left/right edges fade out */
.auth-mobile-showcase::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 2;
  background:
    linear-gradient(to bottom,
      transparent           0%,
      rgba(9, 7, 26, 0.08) 16%,
      rgba(9, 7, 26, 0.30) 48%,
      rgba(9, 7, 26, 0.18) 80%,
      rgba(9, 7, 26, 0.25) 100%
    ),
    linear-gradient(to right,
      rgba(9, 7, 26, 0.70) 0%,
      transparent           10%,
      transparent           90%,
      rgba(9, 7, 26, 0.70) 100%
    );
}

/* Scrolling track: one row of identical segments */
.auth-showcase-track {
  --showcase-segments: 2;
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  align-items: flex-end;
  width: max-content;
  animation: auth-showcase-scroll 40s linear infinite;
  will-change: transform;
  position: absolute;
  left: 0;
  bottom: 0;
}

.auth-showcase-segment {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  align-items: flex-end;
  gap: 10px;
  padding: 0 8px 14px;
  flex: 0 0 auto;
}

@keyframes auth-showcase-scroll {
  from { transform: translateX(0); }
  to {
    /* One segment width = full track / N identical segments (no extra network; cloneNode only) */
    transform: translateX(calc(-100% / var(--showcase-segments, 2)));
  }
}

@media (prefers-reduced-motion: reduce) {
  .auth-showcase-track {
    animation: none;
  }
}

.auth-showcase-img {
  height: 92px;
  width: 92px;
  border-radius: 10px;
  object-fit: cover;
  pointer-events: none;
  flex-shrink: 0;
  opacity: 0.22;
  filter: saturate(0.65) blur(0.8px);
}

@media (max-width: 640px) {
  .auth-mobile-showcase {
    display: block;
  }
}

/* -- Headings -- */
.auth-card h1 {
  margin: 0 0 6px;
  font-size: 22px;
  font-weight: 700;
  line-height: 1.2;
  color: #0f172a;
  text-wrap: balance;
}

.auth-card .muted {
  margin-bottom: 20px;
  font-size: 14px;
  line-height: 1.5;
  color: #4b5563;
}

/* -- Auth mode tabs -- */
.auth-tabs {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 6px;
  margin-bottom: 22px;
  padding: 4px;
  border: 1px solid #e3e7ee;
  border-radius: 12px;
  background: #eef1f5;
}

.auth-tab {
  appearance: none;
  border: 0;
  border-radius: 9px;
  min-height: 40px;
  margin: 0;
  padding: 0 10px;
  font-size: 15px;
  font-weight: 700;
  line-height: 1.2;
  color: #7a8393;
  background: #eef1f5;
  cursor: pointer;
  transition: background-color 0.2s ease, color 0.2s ease, box-shadow 0.2s ease;
}

.auth-tab.is-active {
  color: #111827;
  background: #ffffff;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.08), 0 0 0 1px #dde3ec, 0 4px 10px rgba(15, 23, 42, 0.06);
}

.auth-tab:focus-visible {
  outline: 2px solid var(--brand-primary, #7c3aed);
  outline-offset: 1px;
}

.auth-mode-content.mode-enter {
  animation: auth-mode-enter 170ms ease;
}

@keyframes auth-mode-enter {
  from {
    opacity: 0;
    transform: translateY(4px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* -- All buttons full-width & centered -- */
.auth-card .button,
.auth-card a.button {
  text-align: center;
  justify-content: center;
  display: flex;
  width: 100%;
}

/* -- Google button (primary action) -- */
.google-button {
  background: #1c1630;
  color: #f0ecff;
  border: 1px solid rgba(124, 58, 237, 0.22);
  box-shadow:
    0 1px 3px rgba(0, 0, 0, 0.20),
    0 4px 14px rgba(0, 0, 0, 0.16),
    inset 0 1px 0 rgba(255, 255, 255, 0.06);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 46px;
  border-radius: 12px;
  font-weight: 700;
  font-size: 14px;
  margin-bottom: 0;
  transition: background 0.15s ease, box-shadow 0.15s ease, border-color 0.15s ease;
}

.google-button:hover {
  background: #261d48;
  border-color: rgba(124, 58, 237, 0.36);
  box-shadow:
    0 2px 6px rgba(0, 0, 0, 0.22),
    0 6px 20px rgba(124, 58, 237, 0.20),
    inset 0 1px 0 rgba(255, 255, 255, 0.08);
  color: #f8f5ff;
}

.google-button:active {
  background: #1a1230;
  box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.25);
}

.google-button:focus-visible {
  outline: 2px solid var(--brand-primary, #7c3aed);
  outline-offset: 2px;
}

.social-logo {
  width: 18px;
  height: 18px;
  object-fit: contain;
  flex-shrink: 0;
}

/* -- Divider -- */
.auth-divider {
  text-align: center;
  color: #98a1b2;
  font-size: 13px;
  font-weight: 500;
  position: relative;
  margin: 20px 0 22px;
}

.auth-divider::before,
.auth-divider::after {
  content: '';
  position: absolute;
  top: 50%;
  width: 36%;
  height: 1px;
  background: #e4e7ed;
}

.auth-divider::before { left: 0; }
.auth-divider::after  { right: 0; }

/* -- Auth-scoped inputs & selects -- */
.auth-card .field {
  margin-bottom: 18px;
}

.auth-card .field:last-of-type {
  margin-bottom: 0;
}

/* Keep card height stable and avoid aggressive jumps between modes */
.auth-card .register-only {
  display: none;
  opacity: 0;
  transform: translateY(-2px);
  transition: opacity 0.15s ease, transform 0.15s ease;
}

.auth-card[data-mode="register"] .register-only {
  display: block;
  opacity: 1;
  transform: translateY(0);
}

.auth-card .complete-only {
  display: none;
  opacity: 0;
  transform: translateY(-2px);
  transition: opacity 0.15s ease, transform 0.15s ease;
}

.auth-card[data-mode="complete"] .complete-only {
  display: block;
  opacity: 1;
  transform: translateY(0);
}

.auth-card .field label {
  font-size: 13px;
  font-weight: 500;
  color: #374151;
  margin-bottom: 6px;
}

.auth-card .field input,
.auth-card .field select {
  height: 46px;
  padding: 0 14px;
  border: 1px solid #d1d5db;
  border-radius: 12px;
  font-size: 14px;
  font-family: inherit;
  color: #111827;
  background: #ffffff;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
  width: 100%;
  box-sizing: border-box;
}

.auth-card .field select {
  appearance: none;
  -webkit-appearance: none;
  background-image:
    linear-gradient(45deg, transparent 50%, #9ca3af 50%),
    linear-gradient(135deg, #9ca3af 50%, transparent 50%);
  background-position:
    calc(14px) calc(50% - 2px),
    calc(9px) calc(50% - 2px);
  background-size: 5px 5px, 5px 5px;
  background-repeat: no-repeat;
  padding-right: 14px;
  padding-left: 30px;
}

[dir="ltr"] .auth-card .field select {
  background-position:
    calc(100% - 14px) calc(50% - 2px),
    calc(100% - 9px) calc(50% - 2px);
  padding-left: 14px;
  padding-right: 30px;
}

.auth-card .field input::placeholder {
  color: #9ca3af;
}

.auth-card .field input:focus,
.auth-card .field select:focus {
  outline: none;
  border-color: var(--brand-primary, #7c3aed);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--brand-primary, #7c3aed) 15%, transparent);
  background: #ffffff;
}

.auth-card .field.checkbox {
  flex-direction: row;
  align-items: center;
  gap: 8px;
  margin-top: 4px;
}

.auth-card .field.checkbox label {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  font-weight: 500;
  color: #374151;
  cursor: pointer;
  margin-bottom: 0;
}

.auth-card .field.checkbox input[type="checkbox"] {
  width: 16px;
  height: 16px;
  accent-color: var(--brand-primary, #7c3aed);
  cursor: pointer;
}

/* -- Auth form stack -- */
.auth-card form.stack {
  gap: 0;
}

/* -- Primary submit button -- */
.auth-card .auth-submit {
  margin-top: 24px;
  min-height: 48px;
  border-radius: 12px;
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 0.01em;
  background: var(--brand-primary, #7c3aed);
  color: var(--brand-on-primary, #ffffff);
  border: 1px solid transparent;
  box-shadow:
    0 1px 3px rgba(124, 58, 237, 0.22),
    0 4px 18px rgba(124, 58, 237, 0.32),
    inset 0 1px 0 rgba(255, 255, 255, 0.12);
  transition: background 0.15s ease, box-shadow 0.15s ease, transform 0.12s ease;
}

.auth-card .auth-submit:hover {
  background: color-mix(in srgb, var(--brand-primary, #7c3aed) 90%, #1e0a56);
  box-shadow:
    0 2px 6px rgba(124, 58, 237, 0.26),
    0 8px 26px rgba(124, 58, 237, 0.38),
    inset 0 1px 0 rgba(255, 255, 255, 0.14);
  transform: translateY(-1px);
}

.auth-card .auth-submit:active {
  transform: translateY(0);
  box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.15);
}

.auth-card .auth-submit:focus-visible {
  outline: 2px solid var(--brand-primary, #7c3aed);
  outline-offset: 2px;
}

.auth-card .auth-submit:disabled {
  opacity: 0.5;
  cursor: not-allowed;
  transform: none !important;
  box-shadow: none;
  pointer-events: none;
}

.auth-inline-action {
  display: flex;
  justify-content: flex-end;
  margin-top: -4px;
  margin-bottom: 4px;
}

/* In RTL, flex-start = visual right */
[dir="rtl"] .auth-inline-action {
  justify-content: flex-start;
}

.auth-ghost-link {
  appearance: none;
  border: 0;
  background: transparent;
  padding: 0;
  font-size: 13px;
  font-weight: 500;
  color: #6b7280;
  cursor: pointer;
}

.auth-ghost-link:hover {
  color: var(--brand-primary, #7c3aed);
}

.auth-ghost-link:focus-visible {
  outline: 2px solid var(--brand-primary, #7c3aed);
  outline-offset: 2px;
  border-radius: 6px;
}

.auth-helper {
  margin-top: 16px;
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: 8px;
  font-size: 14px;
  color: #8a93a5;
}

.auth-switch-link {
  appearance: none;
  border: 0;
  background: transparent;
  padding: 0;
  margin: 0;
  font-size: 14px;
  font-weight: 700;
  color: color-mix(in srgb, var(--brand-primary, #7c3aed) 88%, #5b6473);
  line-height: 1.2;
  cursor: pointer;
}

.auth-switch-link:hover {
  color: color-mix(in srgb, var(--brand-primary, #7c3aed) 80%, #111827);
}

.auth-switch-link:focus-visible {
  outline: 2px solid var(--brand-primary, #7c3aed);
  outline-offset: 2px;
  border-radius: 6px;
}

/* -- Secondary switch link (login ↔ register) -- */
.auth-card .auth-switch {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  margin-top: 12px;
  min-height: 42px;
  padding: 0 16px;
  font-size: 14px;
  font-weight: 500;
  color: var(--brand-primary, #7c3aed);
  background: transparent;
  border: none;
  border-radius: 10px;
  text-decoration: none;
  cursor: pointer;
  transition: color 0.15s ease, background 0.15s ease;
}

.auth-card .auth-switch:hover {
  color: color-mix(in srgb, var(--brand-primary, #7c3aed) 80%, #111827);
  background: color-mix(in srgb, var(--brand-primary, #7c3aed) 6%, #ffffff);
}

.auth-card .auth-switch:active {
  background: color-mix(in srgb, var(--brand-primary, #7c3aed) 10%, #ffffff);
}

.auth-card .auth-switch:focus-visible {
  outline: 2px solid var(--brand-primary, #7c3aed);
  outline-offset: 2px;
}

/* -- Alert box -- */
.auth-card #alert:not(:empty) {
  margin-bottom: 16px;
}

/* -- Footer / language picker -- */
.auth-footer {
  margin-top: 22px;
  padding-top: 16px;
  border-top: 1px solid #e5e7eb;
  display: flex;
  justify-content: center;
}

.auth-footer .lang-picker {
  display: flex;
  align-items: center;
  gap: 8px;
  direction: rtl;
  background: #ffffff;
  border: 1px solid #e7ebf2;
  border-radius: 999px;
  padding: 7px 12px 8px 10px;
  min-height: 40px;
  box-sizing: border-box;
  overflow: visible;
  transition: border-color 0.15s ease, background-color 0.15s ease;
}

.auth-footer .lang-picker:hover {
  border-color: #d5dce7;
  background: #fcfcfd;
}

.auth-footer .lang-icon {
  color: #9ca3af;
  flex-shrink: 0;
  width: 16px;
  height: 16px;
  align-self: center;
}

.auth-footer .lang-select {
  font-size: 12px;
  font-weight: 500;
  line-height: 1.45;
  padding: 2px 0 3px;
  min-width: 76px;
  min-height: 1.45em;
  background: transparent;
  color: #6b7280;
  border: none;
  border-radius: 0;
  cursor: pointer;
  outline: none;
  font-family: inherit;
  box-shadow: none;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  overflow: visible;
  vertical-align: middle;
}

html[lang="ar"] .auth-footer .lang-select {
  font-family: 'Tajawal', 'Cairo', system-ui, -apple-system, Segoe UI, sans-serif;
  font-size: 13px;
  line-height: 1.5;
  padding: 1px 0 4px;
}

/* Arabic readability for auth card */
html[lang="ar"] .auth-card,
html[lang="ar"] .auth-card input,
html[lang="ar"] .auth-card select,
html[lang="ar"] .auth-card button,
html[lang="ar"] .auth-card label,
html[lang="ar"] .auth-card .muted {
  font-family: 'Tajawal', 'Cairo', system-ui, -apple-system, Segoe UI, sans-serif;
}

html[lang="ar"] .auth-card h1 {
  line-height: 1.35;
  letter-spacing: 0;
}

html[lang="ar"] .auth-card .muted {
  line-height: 1.6;
}

html[lang="ar"] .auth-tab {
  font-size: 15px;
  line-height: 1.35;
}

html[lang="ar"] .auth-card .field label {
  font-size: 13.5px;
}

html[lang="ar"] .auth-card .field input,
html[lang="ar"] .auth-card .field select {
  font-size: 15px;
}

.alert {
  padding: 12px 14px;
  border-radius: 12px;
  font-size: 13px;
}

.alert.error {
  background: rgba(239, 68, 68, 0.12);
  color: var(--brand-danger);
}

.job-status-notice {
  padding: 14px 16px;
  border-radius: 12px;
  background: rgba(59, 130, 246, 0.12);
  color: #1f2937;
  font-weight: 500;
  font-size: 16px;
  margin-top: 8px;
}

.job-status-inline {
  display: inline-flex;
  align-items: center;
  gap: 10px;
}

.job-status-spinner {
  width: 16px;
  height: 16px;
  border-radius: 50%;
  border: 2px solid rgba(124, 58, 237, 0.24);
  border-top-color: var(--brand-primary);
  animation: spin 0.9s linear infinite;
  flex: 0 0 auto;
}

html[dir="rtl"] .job-status-inline,
[dir="rtl"] .job-status-inline,
.rtl .job-status-inline {
  flex-direction: row-reverse;
}

.job-status-notice.success {
  background: rgba(22, 163, 74, 0.12);
  color: var(--brand-success);
}

.job-status-notice.error {
  background: rgba(239, 68, 68, 0.12);
  color: var(--brand-danger);
}

.alert.success {
  background: rgba(22, 163, 74, 0.12);
  color: var(--brand-success);
}

.alert.warning {
  background: rgba(245, 158, 11, 0.12);
  color: #92400e;
}

.alert.info {
  background: rgba(59, 130, 246, 0.12);
  color: #1f2937;
}

.multi-variants-confirm-actions{
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 10px;
  align-items: center;
}

#toast-stack {
  position: fixed;
  bottom: 24px;
  right: 96px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  z-index: var(--z-toast-stack);
  max-width: 360px;
}

@media (max-width: 960px) {
  #toast-stack {
    right: 86px;
    max-width: min(320px, calc(100vw - 102px));
  }
}

/* iPhone app: the keyboard covers the bottom of the screen, so messages (wrong password, sign-up refused) show at the top. */
html.adly-native #toast-stack {
  top: calc(env(safe-area-inset-top, 0px) + 12px);
  bottom: auto;
  left: 16px;
  right: 16px;
  max-width: none;
}

.toast {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 14px;
  border-radius: 14px;
  background: #111827;
  color: #f9fafb;
  box-shadow: 0 10px 30px rgba(17, 24, 39, 0.25);
  animation: toastIn 0.2s ease-out;
}

.toast.success {
  background: #065f46;
}

.toast.error {
  background: #7f1d1d;
}

.toast-message {
  font-size: 14px;
  font-weight: 500;
}

.toast-close {
  border: none;
  background: transparent;
  color: inherit;
  cursor: pointer;
  font-size: 14px;
}

.toast.hide {
  opacity: 0;
  transform: translateY(6px);
  transition: opacity 0.2s ease, transform 0.2s ease;
}

@keyframes toastIn {
  from { opacity: 0; transform: translateY(6px); }
  to { opacity: 1; transform: translateY(0); }
}

.landing-library-header {
  margin-top: 16px;
  margin-bottom: 24px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

.landing-library-header .section-title {
  font-size: 32px;
  font-weight: 700;
  line-height: 1.2;
}

.landing-library-header-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
}

.landing-library-header #landing-create-expand {
  font-size: 15px;
  font-weight: 500;
}

.landing-edit-forms-modal-card {
  width: min(920px, calc(100vw - 32px));
  max-height: calc(100vh - 32px);
  overflow: auto;
  padding: 24px;
  border-radius: 20px;
  border: 1px solid #e5e7eb;
  background: #ffffff;
  box-shadow: 0 18px 42px rgba(15, 23, 42, 0.14);
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.landing-edit-forms-modal-card > .modal-close {
  z-index: 28;
}

.landing-edit-forms-modal-card .modal-title {
  margin: 0;
  font-size: 20px;
  font-weight: 700;
  line-height: 1.3;
  color: #0f172a;
}

.landing-edit-forms-modal-card .landing-classic-edit-field-hint {
  margin: -2px 0 8px;
  font-size: 13px;
  line-height: 1.45;
}

.landing-edit-forms-modal-card .lp-setup-field label {
  font-size: 13px;
  font-weight: 500;
}

.landing-edit-forms-modal-card .landing-form-section-title {
  font-size: 16px;
}

.landing-edit-forms-modal-card .landing-form-builder-title {
  font-size: 15px;
}

.landing-edit-forms-modal-card .landing-form-builder-subtitle {
  font-size: 13px;
}

.landing-edit-forms-empty {
  margin: 12px 0 4px;
  font-size: 13px;
  line-height: 1.45;
}

.landing-edit-forms-builder {
  margin-top: 12px;
}

.landing-library-subtitle {
  margin-top: 8px;
  font-size: 14px;
  line-height: 1.45;
}

#landing-create-modal {
  padding: 0;
  align-items: stretch;
  justify-content: center;
  background: none;
}

#landing-create-modal .modal-backdrop {
  background: rgba(15, 23, 42, 0.45);
  backdrop-filter: blur(2px);
}

.landing-create-modal-card {
  width: min(1040px, calc(100vw - 24px));
  height: calc(100vh - 24px);
  max-height: none;
  margin: 12px;
  padding: 24px 24px 18px;
  border-radius: 16px;
  border: 1px solid rgba(15, 23, 42, 0.12);
  background: #ffffff;
  box-shadow: 0 20px 48px rgba(15, 23, 42, 0.18);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

/* Modal close overlaps card corner in RTL — stay above scrolled wizard/form */
.landing-create-modal-card > .modal-close {
  z-index: 28;
}

.landing-create-modal-subtitle {
  margin-top: 4px;
  font-size: 12.5px;
  line-height: 1.4;
}

#create-alert {
  margin-bottom: 24px;
}

#create-alert:empty {
  margin-bottom: 0;
}

/* ── Guided Landing Page Creation Flow ── */
/* Form fills modal body; wizard panels scroll; nav stays pinned to modal bottom */
#landing-create-form.landing-create-wizard-flex {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  min-height: 0;
  overflow: hidden;
}

.lp-guided-form {
  display: flex;
  flex-direction: column;
  gap: 18px;
  min-height: 0;
  flex: 1 1 auto;
  overflow-y: auto;
  overflow-x: hidden;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  padding-bottom: 28px;
}

.lp-step {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.landing-wizard-form .lp-step-header {
  text-align: start;
}

.landing-wizard-form .step-panel-title {
  font-size: 21.85px;
  line-height: 1.2;
}

.landing-wizard-form .step-panel-title .step-panel-subtitle {
  display: inline;
  font-size: 15.2px;
  font-weight: 400;
  color: var(--brand-muted);
  line-height: inherit;
}

.landing-wizard-form .wizard-panel {
  overflow: visible;
}

.landing-wizard-form .wizard-panel.active {
  padding: 24px 20px 20px;
  border-radius: 24px;
  border: 1px solid rgba(148, 163, 184, 0.18);
  background:
    radial-gradient(circle at top right, rgba(124, 58, 237, 0.045), transparent 32%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.985) 0%, rgba(249, 250, 252, 0.985) 100%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.75);
  min-height: 0;
}

.lp-market-card {
  gap: 14px;
}

.landing-wizard-form .lp-setup-card {
  background: transparent;
  border: 0;
  border-radius: 0;
  padding: 0;
  box-shadow: none;
}

.landing-create-modal-card,
.landing-edit-forms-modal-card,
.landing-create-modal-card input,
.landing-edit-forms-modal-card input,
.landing-create-modal-card textarea,
.landing-edit-forms-modal-card textarea,
.landing-create-modal-card select,
.landing-edit-forms-modal-card select,
.landing-create-modal-card button,
.landing-edit-forms-modal-card button {
  font-family: inherit;
}

html[lang="ar"] .landing-create-modal-card,
html[lang="ar"] .landing-edit-forms-modal-card,
html[dir="rtl"] .landing-create-modal-card,
html[dir="rtl"] .landing-edit-forms-modal-card {
  font-family: 'Tajawal', 'Cairo', system-ui, -apple-system, 'Segoe UI', sans-serif;
}

html[lang="he"] .landing-create-modal-card,
html[lang="he"] .landing-edit-forms-modal-card {
  font-family: 'Heebo', 'Assistant', system-ui, -apple-system, 'Segoe UI', sans-serif;
}

.landing-create-modal-card .input,
.landing-edit-forms-modal-card .input,
.landing-create-modal-card .select,
.landing-edit-forms-modal-card .select,
.landing-create-modal-card textarea.input,
.landing-edit-forms-modal-card textarea.input,
.landing-create-modal-card input.input,
.landing-edit-forms-modal-card input.input {
  width: 100%;
  min-height: 50px;
  padding: 0 16px;
  border: 1px solid #d8deea;
  border-radius: 16px;
  background: linear-gradient(180deg, #ffffff, #fbfcff);
  color: var(--brand-text, #0f172a);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.85), 0 1px 2px rgba(15,23,42,.03);
  transition: border-color 0.15s ease, box-shadow 0.15s ease, background 0.15s ease;
}

.landing-create-modal-card textarea.input,
.landing-edit-forms-modal-card textarea.input,
.landing-create-modal-card .lp-inline-textarea {
  min-height: 110px;
  padding: 14px 16px;
}

.landing-create-modal-card .input::placeholder,
.landing-edit-forms-modal-card .input::placeholder,
.landing-create-modal-card textarea::placeholder,
.landing-edit-forms-modal-card textarea::placeholder {
  color: #8a94a6;
}

.landing-create-modal-card .input:focus,
.landing-edit-forms-modal-card .input:focus,
.landing-create-modal-card .select:focus,
.landing-edit-forms-modal-card .select:focus,
.landing-create-modal-card textarea.input:focus,
.landing-edit-forms-modal-card textarea.input:focus,
.landing-create-modal-card input.input:focus,
.landing-edit-forms-modal-card input.input:focus {
  outline: none;
  border-color: color-mix(in srgb, var(--brand-primary) 48%, transparent);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--brand-primary) 12%, transparent);
  background: #ffffff;
}

.landing-create-modal-card .landing-form-builder-card input.input:not(textarea):not(.lp-inline-textarea),
.landing-edit-forms-modal-card .landing-form-builder-card input.input:not(textarea):not(.lp-inline-textarea),
.landing-create-modal-card .landing-form-templates-card input.input:not(textarea):not(.lp-inline-textarea),
.landing-edit-forms-modal-card .landing-form-templates-card input.input:not(textarea):not(.lp-inline-textarea),
.landing-create-modal-card .landing-form-field-group input.input:not(textarea):not(.lp-inline-textarea),
.landing-edit-forms-modal-card .landing-form-field-group input.input:not(textarea):not(.lp-inline-textarea),
.landing-create-modal-card .landing-form-live-preview-fields input.input,
.landing-edit-forms-modal-card .landing-form-live-preview-fields input.input,
.landing-create-modal-card .landing-form-preview-card input.input:not(textarea):not(.lp-inline-textarea),
.landing-edit-forms-modal-card .landing-form-preview-card input.input:not(textarea):not(.lp-inline-textarea) {
  min-height: 44px;
}

.landing-create-modal-card .landing-form-builder-card .select,
.landing-edit-forms-modal-card .landing-form-builder-card .select,
.landing-create-modal-card .landing-form-templates-card .select,
.landing-edit-forms-modal-card .landing-form-templates-card .select,
.landing-create-modal-card .landing-form-field-row .select,
.landing-edit-forms-modal-card .landing-form-field-row .select,
.landing-create-modal-card .landing-form-live-preview-fields .select,
.landing-edit-forms-modal-card .landing-form-live-preview-fields .select,
.landing-create-modal-card .landing-form-preview-card .select,
.landing-edit-forms-modal-card .landing-form-preview-card .select {
  min-height: 44px;
  height: 44px;
}

.landing-create-modal-card .landing-form-template-row .button:not(.landing-form-save-template-btn) {
  min-height: 44px;
}

/* Author `display:*` elsewhere can defeat the UA [hidden] rule; collapsed tab panels must stay gone. */
#landing-create-modal .landing-form-tab-panel[hidden] {
  display: none !important;
}

#landing-create-modal .landing-form-tab-panel:not([hidden]) {
  display: block;
}

.lp-stack-grid {
  display: grid;
  gap: 12px;
}

.lp-stack-grid-2 {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.lp-stack-grid-3 {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.lp-stack-style-cards {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}

.lp-layout-style-cards {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  margin-bottom: 14px;
}

.lp-layout-style-card {
  min-height: 116px;
}

.lp-stack-style-card {
  min-height: 132px;
}

.lp-inline-textarea {
  min-height: 88px;
  resize: vertical;
}

.lp-inline-toggle {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 8px;
}

.lp-toggle-option {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 40px;
  padding: 0 14px;
  border-radius: 999px;
  border: 1px solid var(--brand-border);
  background: #fff;
  color: var(--brand-text, #0f172a);
  cursor: pointer;
  font-size: 13px;
  font-weight: 500;
}

.lp-toggle-option input {
  display: none;
}

.lp-toggle-option:has(input:checked) {
  border-color: var(--brand-primary);
  background: color-mix(in srgb, var(--brand-primary) 10%, #fff);
  color: var(--brand-primary);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--brand-primary) 20%, transparent);
}

.lp-palette-mode-toggle {
  display: inline-flex;
  width: fit-content;
  padding: 0;
  border: 1.5px solid var(--brand-border);
  border-radius: 10px;
  background: var(--brand-bg);
  box-shadow: none;
  overflow: hidden;
  align-self: flex-start;
}

.lp-palette-mode-toggle .lp-toggle-option {
  min-height: 0;
  padding: 7px 24px;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: #6b7280;
  font-size: 13px;
  font-weight: 500;
  font-family: inherit;
  line-height: 1.4;
  box-shadow: none;
  transition: all 0.15s;
  white-space: nowrap;
}

.lp-palette-mode-toggle .lp-toggle-option:first-child {
  border-radius: 10px 0 0 10px;
}

.lp-palette-mode-toggle .lp-toggle-option:last-child {
  border-radius: 0 10px 10px 0;
}

.lp-palette-mode-toggle .lp-toggle-option:has(input:checked) {
  background: var(--brand-primary);
  color: #fff;
  box-shadow: none;
}

.lp-palette-mode-toggle .lp-toggle-option:not(:has(input:checked)):hover {
  color: var(--brand-ink);
  background: rgba(0,0,0,0.03);
}

.lp-palette-mode-toggle,
.lp-palette-mode-toggle .lp-toggle-option {
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

.lp-palette-mode-toggle .lp-toggle-option span {
  display: inline-block;
  line-height: 1.25;
}

html[lang="ar"] .lp-palette-mode-toggle .lp-toggle-option,
html[lang="ar"] .lp-palette-mode-toggle .lp-toggle-option span {
  font-family: 'Tajawal', 'Cairo', system-ui, -apple-system, 'Segoe UI', sans-serif;
  font-weight: 700;
  letter-spacing: 0;
}

html[lang="ar"] .lp-palette-mode-toggle .lp-toggle-option {
  line-height: 1.2;
}

.lp-has-product-toggle {
  display: inline-flex;
  gap: 6px;
  margin-top: 4px;
}

.lp-has-product-toggle .lp-toggle-option {
  display: flex;
  align-items: center;
  gap: 5px;
  min-height: 0;
  padding: 5px 14px;
  border: 1.5px solid var(--brand-border);
  border-radius: 8px;
  background: transparent;
  color: var(--brand-ink);
  box-shadow: none;
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.15s;
  white-space: nowrap;
}

.lp-has-product-toggle .lp-toggle-option:has(input:checked) {
  border-color: var(--brand-primary);
  background: rgba(147,51,234,0.06);
  color: var(--brand-primary);
  box-shadow: none;
}

.lp-has-product-toggle .lp-toggle-option:not(:has(input:checked)):hover {
  color: var(--brand-ink);
  background: rgba(0,0,0,0.03);
}

html[lang="ar"] .lp-has-product-toggle .lp-toggle-option,
html[lang="ar"] .lp-has-product-toggle .lp-toggle-option span {
  font-family: 'Tajawal', 'Cairo', system-ui, -apple-system, 'Segoe UI', sans-serif;
  font-weight: 700;
  letter-spacing: 0;
}

html[lang="ar"] .lp-has-product-toggle .lp-toggle-option {
  line-height: 1.2;
}

.lp-ai-toggle-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 14px 16px;
  border: 1px solid var(--brand-border);
  border-radius: 16px;
  background: #fff;
  cursor: pointer;
}

.lp-ai-toggle-card input {
  display: none;
}

.lp-ai-toggle-inline {
  display: inline-flex;
  justify-content: flex-start;
  padding: 10px 14px;
  min-width: 0;
  width: auto;
}

.lp-ai-toggle-switch {
  position: relative;
  flex: 0 0 auto;
  width: 52px;
  height: 30px;
  border-radius: 999px;
  background: #d1d5db;
  box-shadow: inset 0 0 0 1px rgba(15,23,42,.08);
}

.lp-ai-toggle-switch::after {
  content: "";
  position: absolute;
  top: 3px;
  left: 3px;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: #ffffff;
  box-shadow: 0 1px 3px rgba(15,23,42,.2);
  transition: transform 0.18s ease;
}

.lp-ai-toggle-copy {
  display: grid;
  gap: 4px;
}

.lp-ai-toggle-title {
  font-size: 15px;
  font-weight: 700;
  color: var(--brand-text, #0f172a);
}

.lp-ai-toggle-subtitle {
  font-size: 12px;
  line-height: 1.45;
  color: var(--brand-muted);
}

.lp-ai-toggle-card:has(input:checked) {
  border-color: color-mix(in srgb, var(--brand-primary) 32%, transparent);
  background: color-mix(in srgb, var(--brand-primary) 5%, #fff);
}

.lp-ai-toggle-card:has(input:checked) .lp-ai-toggle-switch {
  background: var(--brand-primary, #7c3aed);
  box-shadow: inset 0 0 0 1px rgba(124, 58, 237, 0.18);
}

.lp-ai-toggle-card:has(input:checked) .lp-ai-toggle-switch::after {
  transform: translateX(22px);
}

.lp-palette-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 12px;
}

.lp-palette-chip {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-height: 40px;
  padding: 0 12px;
  border-radius: 999px;
  background: transparent;
  border: 1px solid var(--brand-border);
}

.lp-palette-chip-dot {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  box-shadow: inset 0 0 0 2px rgba(255, 255, 255, 0.7);
}

.lp-palette-chip-code {
  font-size: 13px;
  font-weight: 700;
  color: var(--brand-text, #0f172a);
  direction: ltr;
  unicode-bidi: isolate;
}

.lp-palette-chip-role {
  font-size: 11px;
  font-weight: 700;
  color: var(--brand-primary);
  background: color-mix(in srgb, var(--brand-primary) 10%, #fff);
  padding: 4px 8px;
  border-radius: 999px;
}

.lp-palette-swatches {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 14px;
  align-items: center;
}

.lp-palette-swatch {
  position: relative;
  width: 34px;
  height: 34px;
  padding: 0;
  border-radius: 50%;
  border: 2px solid rgba(15, 23, 42, 0.12);
  background: var(--swatch);
  box-shadow: inset 0 0 0 2px rgba(255,255,255,.72);
  cursor: pointer;
  opacity: 0.45;
  filter: saturate(0.72) brightness(0.82);
  transition: transform 0.15s ease, box-shadow 0.15s ease, outline-color 0.15s ease, border-color 0.15s ease, opacity 0.15s ease, filter 0.15s ease;
}

.lp-palette-swatch.selected {
  transform: scale(1.06);
  border-color: #ffffff;
  outline: 3px solid rgba(255, 255, 255, 0.95);
  opacity: 1;
  filter: saturate(1.08) brightness(1.04);
  box-shadow:
    0 0 0 6px color-mix(in srgb, var(--swatch) 72%, #ffffff),
    0 10px 20px rgba(15, 23, 42, 0.16);
}

.lp-palette-swatch:hover:not(:disabled):not(.selected) {
  opacity: 0.72;
  filter: saturate(0.9) brightness(0.92);
}

.lp-palette-swatches:has(.lp-palette-swatch.selected) .lp-palette-swatch:not(.selected) {
  opacity: 0.34;
  filter: saturate(0.6) brightness(0.75);
}

.lp-palette-swatch:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

.lp-assets-panel {
  display: grid;
  gap: 14px;
}

.lp-product-fields {
  display: grid;
  gap: 16px;
}

.lp-products-panel {
  display: grid;
  gap: 14px;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

.lp-products-panel-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 14px;
}

.lp-products-title {
  font-size: 16px;
  font-weight: 750;
  line-height: 1.25;
  color: var(--brand-text, #0f172a);
}

.lp-products-subtitle {
  margin-top: 4px;
  max-width: 560px;
  font-size: 12.8px;
  line-height: 1.45;
  color: var(--brand-muted);
}

.lp-add-product-btn {
  justify-self: start;
  min-height: 42px;
  padding-inline: 18px;
  border-radius: 999px;
}

.lp-product-categories-panel {
  display: grid;
  gap: 10px;
  margin-bottom: 16px;
}

.lp-product-categories-list {
  display: grid;
  gap: 8px;
}

.lp-product-category-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 12px;
  border: 1px solid rgba(203, 213, 225, 0.86);
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.92);
}

.lp-product-category-name {
  font-weight: 500;
  font-size: 14px;
}

.lp-product-categories-add-row {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.lp-product-categories-add-row .input {
  flex: 1 1 220px;
}

.landing-manage-products-modal-card {
  width: min(760px, calc(100vw - 32px));
  max-height: calc(100vh - 32px);
  overflow: hidden;
  padding-bottom: 16px;
}

.landing-manage-products-modal-card > .modal-close {
  z-index: 28;
}

.landing-manage-products-modal-scroll {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  overflow-x: hidden;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  padding-bottom: 12px;
}

.landing-manage-products-modal-card .landing-classic-edit-actions {
  flex-shrink: 0;
  padding-top: 14px;
  margin-top: 4px;
  border-top: 1px solid rgba(15, 23, 42, 0.08);
}

.lp-products-panel-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
}

.lp-bulk-product-images-btn {
  min-height: 42px;
  padding-inline: 18px;
  border-radius: 999px;
}

.lp-products-list {
  display: grid;
  gap: 12px;
}

.lp-product-card {
  overflow: hidden;
  border: 1px solid rgba(203, 213, 225, 0.86);
  border-radius: 20px;
  background: linear-gradient(180deg, #ffffff 0%, color-mix(in srgb, var(--brand-primary) 2.5%, #ffffff) 100%);
  box-shadow: 0 12px 28px rgba(15, 23, 42, 0.045);
}

.lp-products-list .lp-product-card:nth-child(even) {
  background: linear-gradient(180deg, #ffffff 0%, color-mix(in srgb, var(--brand-secondary) 3%, #ffffff) 100%);
}

.lp-products-list .lp-product-card:nth-child(odd) {
  border-color: color-mix(in srgb, var(--brand-primary) 14%, rgba(203, 213, 225, 0.86));
}

.lp-products-list .lp-product-card:nth-child(even) {
  border-color: color-mix(in srgb, var(--brand-secondary) 14%, rgba(203, 213, 225, 0.86));
}

.lp-product-card-head {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  grid-template-areas: "actions title thumb";
  align-items: center;
  gap: 10px;
  padding: 16px 16px 10px;
  direction: ltr;
}

.lp-product-header-thumb {
  grid-area: thumb;
  width: 42px;
  height: 42px;
  border-radius: 13px;
  display: none;
  overflow: hidden;
  background: #f8fafc;
  border: 1px solid rgba(203, 213, 225, 0.88);
}

.lp-product-header-thumb.has-image {
  display: block;
}

.lp-product-header-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.lp-product-card:not(.collapsed) .lp-product-header-thumb {
  display: none;
}

.lp-product-title-block {
  grid-area: title;
  min-width: 0;
  text-align: start;
  display: grid;
  gap: 3px;
  color: inherit;
}

[dir="rtl"] .lp-product-title-block {
  direction: rtl;
  text-align: right;
}

[dir="rtl"] .lp-product-card-actions {
  direction: rtl;
}

.lp-product-title-row {
  min-width: 0;
  display: grid;
  grid-template-columns: auto minmax(0, max-content) auto;
  align-items: center;
  justify-content: start;
  gap: 8px;
}

.lp-product-index {
  font-size: 12px;
  font-weight: 750;
  letter-spacing: 0.02em;
  color: color-mix(in srgb, var(--brand-primary) 72%, #0f172a);
  text-transform: uppercase;
}

.lp-product-chevron {
  width: 22px;
  height: 22px;
  border-radius: 999px;
  display: inline-grid;
  place-items: center;
  background: #f8fafc;
  border: 1px solid rgba(203, 213, 225, 0.9);
  color: #64748b;
  font-size: 16px;
  line-height: 1;
  transition: transform 0.16s ease, background 0.16s ease, border-color 0.16s ease;
}

.lp-product-arrow-button {
  width: 32px;
  height: 32px;
  padding: 0;
  border: 1px solid rgba(203, 213, 225, 0.9);
  border-radius: 999px;
  display: inline-grid;
  place-items: center;
  background: #ffffff;
  color: #64748b;
  cursor: pointer;
}

.lp-product-arrow-button:hover,
.lp-product-arrow-button:focus-visible {
  outline: none;
  background: color-mix(in srgb, var(--brand-primary) 8%, #ffffff);
  border-color: color-mix(in srgb, var(--brand-primary) 24%, rgba(203, 213, 225, 0.9));
}

.lp-product-arrow-button .lp-product-chevron {
  border: 0;
  background: transparent;
}

.lp-product-card:not(.collapsed) .lp-product-chevron {
  transform: rotate(180deg);
}

.lp-product-summary {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 14.8px;
  font-weight: 700;
  line-height: 1.3;
  color: var(--brand-text, #0f172a);
}

.lp-product-summary:empty {
  display: none;
}

.lp-product-meta {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 12.2px;
  color: var(--brand-muted);
}

.lp-product-card-actions {
  grid-area: actions;
  display: flex;
  align-items: center;
  gap: 8px;
  justify-self: start;
}

.lp-product-remove {
  min-height: 36px;
  padding: 0 12px;
  border-radius: 999px;
  font-size: 12.5px;
}

.lp-product-card-body {
  display: grid;
  gap: 14px;
  padding: 0 16px 16px;
}

.lp-product-image-field {
  display: flex;
  justify-content: flex-end;
}

[dir="rtl"] .lp-product-image-field {
  justify-content: flex-start;
}

.lp-product-image-control {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  flex-wrap: wrap;
}

[dir="rtl"] .lp-product-image-control {
  justify-content: flex-start;
}

.lp-product-image-preview {
  width: 52px;
  height: 52px;
  padding: 0;
  border: 1px solid rgba(203, 213, 225, 0.95);
  border-radius: 14px;
  overflow: hidden;
  background: #ffffff;
  cursor: zoom-in;
}

.lp-product-image-preview img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.lp-product-image-remove {
  min-height: 38px;
  border-radius: 999px;
  padding: 0 13px;
  font-size: 12.5px;
  white-space: nowrap;
}

.lp-product-image-btn {
  width: 52px;
  height: 52px;
  border: 1px dashed rgba(148, 163, 184, 0.95);
  border-radius: 14px;
  display: inline-grid;
  place-items: center;
  padding: 0 10px;
  background: #ffffff;
  color: color-mix(in srgb, var(--brand-primary) 68%, #64748b);
  cursor: pointer;
  font-size: 12.5px;
  font-weight: 700;
  text-align: center;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.03);
}

.lp-product-image-preview + .lp-product-image-btn {
  width: auto;
  min-width: 92px;
  height: 38px;
  min-height: 38px;
  border-style: solid;
  border-radius: 999px;
  padding: 0 13px;
  font-size: 12.5px;
  white-space: nowrap;
}

.lp-product-card-body .lp-setup-field {
  margin-bottom: 0;
}

.lp-product-card.collapsed .lp-product-card-body {
  display: none;
}

.lp-product-card.collapsed .lp-product-card-head {
  padding-bottom: 16px;
  background: #ffffff;
}

.lp-shipping-global-field {
  margin-bottom: 0;
}

.lp-source-card {
  display: grid;
  gap: 14px;
  padding: 0;
  border-radius: 0;
  border: 0;
  background: transparent;
}

.lp-source-head {
  display: grid;
  gap: 4px;
  justify-items: start;
  text-align: left;
}

.lp-source-title {
  font-size: 15.4px;
  font-weight: 500;
  line-height: 1.35;
  color: var(--brand-text, #0f172a);
}

.lp-source-subtitle {
  font-size: 12.5px;
  color: var(--brand-muted);
  line-height: 1.45;
  max-width: 560px;
}

.lp-source-guidance {
  font-size: 13px;
  line-height: 1.55;
  color: var(--brand-muted);
  padding: 0;
  border-radius: 0;
  background: transparent;
  border: 0;
}

.lp-source-upload-wrap {
  display: grid;
  grid-template-columns: auto auto;
  align-items: start;
  justify-content: start;
  gap: 14px;
}

.lp-assets-guidance {
  padding: 12px 14px;
  border-radius: 14px;
  background: color-mix(in srgb, var(--brand-primary) 6%, #ffffff);
  border: 1px solid color-mix(in srgb, var(--brand-primary) 18%, transparent);
  color: var(--brand-text, #0f172a);
  font-size: 13px;
  line-height: 1.55;
}

.lp-hint {
  font-size: 12px;
  font-weight: 400;
  color: var(--brand-muted);
  margin-top: 12px;
  line-height: 1.4;
}

/* Step 1 — Offer (Primary) */
.lp-step-offer {
  gap: 12px;
}

.lp-offer-wrap {
  background: color-mix(in srgb, var(--brand-primary) 4%, #fff);
  border: 1px solid color-mix(in srgb, var(--brand-primary) 20%, transparent);
  border-radius: 12px;
  padding: 8px;
}

.lp-offer-textarea {
  width: 100%;
  min-height: 144px;
  padding: 16px;
  font-size: 14px;
  font-weight: 400;
  line-height: 1.5;
  border: none;
  border-radius: 12px;
  background: #fff;
  resize: vertical;
  color: var(--brand-text, #0f172a);
  margin: 0;
  box-sizing: border-box;
}

.lp-offer-textarea::placeholder {
  color: var(--brand-muted);
  font-size: 14px;
}

.lp-offer-textarea:focus {
  outline: none;
}

/* Step 2 — Page Setup Card */
.lp-setup-card {
  background: #fafbfc;
  border: 1px solid var(--brand-border);
  border-radius: 12px;
  padding: 16px;
}

.lp-setup-field {
  margin-bottom: 24px;
}

.lp-setup-field:last-child {
  margin-bottom: 0;
}

.lp-offer-notes-field {
  margin-top: 12px;
}

.lp-setup-field > label {
  display: block;
  font-size: 15.4px;
  font-weight: 500;
  color: var(--brand-text, #0f172a);
  margin-bottom: 10px;
}

.lp-setup-field .select {
  width: 100%;
  max-width: 100%;
}

.lp-checkbox-row {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: 15px;
  font-weight: 500;
  cursor: pointer;
}

.lp-checkbox-row input[type='checkbox'] {
  margin-top: 3px;
  flex-shrink: 0;
}

.lp-whatsapp-phone-wrap {
  margin-top: 12px;
  padding-top: 4px;
}

.lp-whatsapp-phone-wrap label {
  display: block;
  font-size: 14px;
  font-weight: 500;
  margin-bottom: 8px;
}

.lp-whatsapp-phone-wrap .lp-hint {
  margin-top: 6px;
  font-size: 12.5px;
}

/* Keep landing language select native-safe on mobile/webkit */
#landing-language {
  min-width: 0;
  width: 100%;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  background: linear-gradient(180deg, #ffffff, #fbfcff);
  border-radius: 16px;
  font-size: 16px;
  font-weight: 400;
  line-height: 1.4;
  min-height: 50px;
}

#landing-language option {
  color: #111827;
  background: #ffffff;
  font-size: 16px;
}

.lp-language-picker {
  display: none;
  position: relative;
  width: 100%;
}

.lp-language-trigger {
  width: 100%;
  min-height: 50px;
  border: 1px solid #d8deea;
  border-radius: 16px;
  background: linear-gradient(180deg, #ffffff, #fbfcff);
  color: #111827;
  padding: 12px 16px;
  font-size: 16px;
  font-weight: 400;
  line-height: 1.4;
  text-align: start;
}

.lp-language-menu {
  display: none;
  position: absolute;
  inset-inline-start: 0;
  inset-inline-end: 0;
  top: calc(100% + 8px);
  background: #ffffff;
  border: 1px solid #d1d5db;
  border-radius: 12px;
  box-shadow: 0 10px 24px rgba(15, 23, 42, 0.18);
  padding: 8px;
  z-index: 40;
}

.lp-language-menu.open {
  display: grid;
  gap: 8px;
}

.lp-language-option {
  border: none;
  background: transparent;
  color: #111827;
  font-size: 16px;
  font-weight: 400;
  line-height: 1.4;
  text-align: start;
  border-radius: 8px;
  padding: 8px 10px;
}

.lp-language-option.active {
  background: color-mix(in srgb, var(--brand-primary, #7c3aed) 10%, #fff);
}

/* Page type selectable cards */
.lp-mode-cards {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 16px;
}

.lp-mode-card {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
  padding: 12px;
  border: 1px solid var(--brand-border);
  border-radius: 12px;
  background: transparent;
  cursor: pointer;
  transition: border-color 0.15s ease, background 0.15s ease, color 0.15s ease;
}

.lp-mode-card:hover {
  border-color: color-mix(in srgb, var(--brand-primary) 40%, transparent);
  background: color-mix(in srgb, var(--brand-primary) 3%, transparent);
}

.lp-mode-card input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.lp-mode-card:has(input:checked) {
  border-color: var(--brand-primary);
  background: color-mix(in srgb, var(--brand-primary) 6%, transparent);
  box-shadow: none;
}

.lp-mode-card-title {
  font-size: 15.4px;
  font-weight: 500;
  color: var(--brand-text, #0f172a);
}

.lp-mode-card-desc {
  font-size: 14px;
  font-weight: 400;
  color: var(--brand-muted);
  line-height: 1.4;
}

.lp-mode-card-best {
  font-size: 12px;
  font-weight: 400;
  color: var(--brand-muted);
}

/* Step 3 — Visual Assets */
.lp-assets-header {
  display: flex;
  align-items: center;
  gap: 8px;
}

.lp-optional {
  font-size: 12px;
  font-weight: 400;
  color: var(--brand-muted);
}

.lp-assets-field {
  margin-bottom: 12px;
}

.lp-assets-field .checkbox-line {
  font-size: 14px;
  font-weight: 400;
}

/* Horizontal layout: button left, upload right */
.lp-assets-row {
  display: flex;
  align-items: center;
  gap: 16px;
}

.lp-pick-library {
  flex: 0 0 220px;
  min-height: 54px;
  font-size: 15px;
  font-weight: 700;
  border-radius: 16px;
}

.lp-pick-library-compact {
  flex: 0 0 auto;
  min-width: 180px;
}

.lp-upload-box {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 112px;
  padding: 16px 24px;
  border: 2px dashed color-mix(in srgb, var(--brand-primary) 22%, #cbd5e1);
  border-radius: 16px;
  background: linear-gradient(180deg, color-mix(in srgb, var(--brand-primary) 4%, #ffffff), #ffffff);
  cursor: pointer;
  transition: border-color 0.15s ease, background 0.15s ease, box-shadow 0.15s ease;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.75);
}

.lp-upload-box-compact {
  width: 140px;
  min-width: 140px;
  min-height: 140px;
  padding: 16px 12px;
  gap: 6px;
  text-align: center;
  background: #ffffff;
  box-shadow: none;
}

.lp-upload-box-compact .lp-upload-icon {
  width: 28px;
  height: 28px;
}

.lp-upload-plus {
  font-size: 46px;
  line-height: 1;
  color: #64748b;
  font-weight: 300;
}

.lp-upload-box-compact .lp-upload-text {
  font-size: 13px;
  font-weight: 700;
}

.lp-upload-box-compact .lp-upload-hint {
  font-size: 11px;
  line-height: 1.35;
}

.lp-upload-box:hover {
  border-color: color-mix(in srgb, var(--brand-primary) 45%, transparent);
  background: color-mix(in srgb, var(--brand-primary) 5%, #fafbfc);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--brand-primary) 8%, transparent);
}

.lp-upload-box.drag-over {
  border-color: var(--brand-primary);
  background: color-mix(in srgb, var(--brand-primary) 10%, #fafbfc);
}

.lp-upload-box.has-file {
  border-style: solid;
  border-color: color-mix(in srgb, var(--brand-primary) 30%, transparent);
}

.lp-upload-icon {
  width: 24px;
  height: 24px;
  color: var(--brand-muted);
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.lp-upload-text {
  font-size: 15.4px;
  font-weight: 400;
  color: var(--brand-text, #0f172a);
}

.lp-upload-hint {
  font-size: 12px;
  font-weight: 400;
  color: var(--brand-muted);
}

.lp-upload-preview {
  margin-top: 12px;
}

.landing-wizard-steps {
  justify-content: center;
  margin: 4px 0 12px;
  position: relative;
  z-index: 3;
  padding: 8px 2px 12px;
  background: linear-gradient(180deg, #ffffff 0%, rgba(255, 255, 255, 0.98) 100%);
  border-bottom: 1px solid rgba(229, 231, 235, 0.75);
}

.landing-wizard-steps .wizard-step {
  border-radius: 999px;
  border: 1px solid rgba(148, 163, 184, 0.18);
  background: #fff;
  min-height: 42px;
  padding: 8px 14px;
  box-shadow: 0 8px 20px rgba(15, 23, 42, 0.04);
}

.landing-wizard-steps .wizard-step-line {
  width: 22px;
}

.landing-wizard-form .wizard-panel.active {
  padding-bottom: 24px;
}

.landing-wizard-nav {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px;
  row-gap: 10px;
  width: 100%;
  padding-top: 16px;
  padding-bottom: 10px;
  margin-top: 0;
  position: relative;
  z-index: 4;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.94) 0%, #ffffff 55%);
  border-top: 1px solid rgba(229, 231, 235, 0.9);
}

.landing-wizard-nav-cluster {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
}

.landing-form-layout-card {
  padding: 24px;
}

.landing-capture-mode-card {
  margin-bottom: 22px;
}

.landing-capture-mode-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.landing-capture-mode-option {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 16px;
  border: 1px solid rgba(203, 213, 225, 0.9);
  border-radius: 18px;
  background: #fff;
  cursor: pointer;
  transition: border-color 0.18s ease, box-shadow 0.18s ease, transform 0.18s ease;
}

.landing-capture-mode-option:hover {
  transform: translateY(-1px);
  border-color: color-mix(in srgb, var(--brand-primary) 30%, rgba(203, 213, 225, 0.9));
  box-shadow: 0 12px 26px rgba(15, 23, 42, 0.06);
}

.landing-capture-mode-option:has(input:checked) {
  border-color: color-mix(in srgb, var(--brand-primary) 62%, rgba(203, 213, 225, 0.9));
  background: color-mix(in srgb, var(--brand-primary) 5%, #fff);
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--brand-primary) 18%, transparent);
}

.landing-capture-mode-option input {
  margin-top: 3px;
  accent-color: var(--brand-primary);
}

.landing-capture-mode-option strong {
  display: block;
  color: #0f172a;
  font-size: 14px;
  font-weight: 700;
  line-height: 1.3;
}

.landing-capture-mode-option small {
  display: block;
  margin-top: 4px;
  color: #64748b;
  font-size: 13px;
  line-height: 1.45;
}

.landing-whatsapp-only-panel {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 22px;
  border-radius: 22px;
  background: linear-gradient(135deg, color-mix(in srgb, #25d366 9%, #fff), #fff);
  border: 1px solid color-mix(in srgb, #25d366 24%, rgba(203, 213, 225, 0.86));
  box-shadow: 0 14px 32px rgba(15, 23, 42, 0.055);
}

.landing-whatsapp-only-panel[hidden],
.landing-form-layout[hidden] {
  display: none !important;
}

.landing-whatsapp-only-icon {
  width: 54px;
  height: 54px;
  border-radius: 18px;
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  background: #25d366;
  color: #052e16;
  font-size: 25px;
  font-weight: 700;
  box-shadow: 0 12px 24px rgba(37, 211, 102, 0.28);
}

.landing-whatsapp-only-title {
  color: #0f172a;
  font-size: 17px;
  font-weight: 700;
  line-height: 1.35;
}

.landing-whatsapp-only-desc {
  margin-top: 5px;
  color: #64748b;
  font-size: 14px;
  line-height: 1.55;
}

@media (max-width: 640px) {
  .landing-capture-mode-grid {
    grid-template-columns: 1fr;
  }

  .landing-whatsapp-only-panel {
    align-items: flex-start;
    padding: 18px;
  }
}

.landing-form-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 28px;
}

.landing-form-column-setup {
  display: flex;
  flex-direction: column;
  gap: 24px;
  min-width: 0;
}

.landing-form-column-preview {
  min-width: 0;
}

.landing-form-section-title {
  margin: 0 0 12px;
  font-size: 18px;
  font-weight: 700;
  color: #0f172a;
  text-align: start;
}

.landing-form-builder-card,
.landing-form-preview-card {
  border: 1px solid #e5e7eb;
  border-radius: 16px;
  background: #fff;
  padding: 24px;
  overflow: visible;
}

.landing-form-builder-card {
  display: flex;
  flex-direction: column;
}

.landing-form-builder-title {
  font-size: 18px;
  font-weight: 700;
  color: #0f172a;
}

.landing-form-builder-subtitle {
  margin-top: 6px;
  margin-bottom: 16px;
  color: #64748b;
  font-size: 14px;
  line-height: 1.5;
  text-align: start;
}

.landing-form-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 18px;
}

.landing-form-chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  border: 1px solid #e5e7eb;
  border-radius: 999px;
  padding: 8px 12px;
  background: #f8fafc;
  font-size: 13px;
  font-weight: 500;
  color: #334155;
}

.landing-form-chip input[type='checkbox'] {
  margin: 0;
}

.landing-form-chip-locked {
  opacity: 0.9;
}

.landing-form-builder-alert-slot:not(:empty) {
  margin-bottom: 12px;
}

.landing-form-step-tablist {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-start;
  gap: 8px;
  margin-bottom: 14px;
}

.landing-form-step-tab {
  flex: 0 0 auto;
  width: auto;
  min-height: 44px;
  padding: 8px 14px;
  border-radius: 12px;
  border: 1px solid rgba(148, 163, 184, 0.4);
  background: #f8fafc;
  color: #334155;
  font-family: inherit;
  font-weight: 500;
  font-size: 14px;
  cursor: pointer;
  text-align: center;
  white-space: nowrap;
}

.landing-form-step-tab-active {
  border-color: color-mix(in srgb, var(--brand-primary) 52%, transparent);
  background: #ffffff;
  color: var(--brand-primary, #7c3aed);
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--brand-primary) 20%, transparent);
}

.landing-form-save-as-inline {
  margin-top: 18px;
  padding-top: 16px;
  border-top: 1px solid rgba(226, 232, 240, 0.95);
  width: min(100%, 420px);
}

.landing-form-builder-card > .landing-form-save-as-inline {
  margin-top: auto;
  align-self: flex-start;
}

.landing-form-save-as-inline-helper {
  margin: 0 0 10px;
  font-size: 13px;
  line-height: 1.45;
}

.landing-form-save-as-inline .landing-form-template-row-save {
  margin-bottom: 8px;
}

.landing-form-save-as-inline-state {
  min-height: 1.25em;
  font-size: 12px;
  line-height: 1.35;
  margin-bottom: 0;
}

.landing-form-templates-manage-card {
  margin-bottom: 0;
}

.landing-form-custom-block {
  margin-bottom: 16px;
}

.landing-form-inline-label {
  display: block;
  margin-bottom: 10px;
  font-size: 14px;
  font-weight: 700;
  color: #0f172a;
  text-align: start;
}

.landing-form-fields-list {
  display: grid;
  gap: 0;
  margin-bottom: 12px;
  min-width: 0;
}

.landing-form-field-group {
  display: grid;
  gap: 10px;
  min-width: 0;
}

/* Clear separation between editable custom-field blocks */
.landing-form-field-group + .landing-form-field-group {
  margin-top: 16px;
  padding-top: 16px;
  border-top: 1px solid rgba(148, 163, 184, 0.4);
}

.landing-form-field-row {
  display: flex;
  flex-flow: row wrap;
  align-items: center;
  gap: 10px;
  row-gap: 10px;
  width: 100%;
  box-sizing: border-box;
  isolation: isolate;
}

.landing-form-field-row .input:first-of-type {
  flex: 3 1 180px;
  min-width: 180px;
  max-width: 100%;
  width: auto;
}

.landing-form-field-row .select[data-form-field-type] {
  flex: 0 1 auto;
  min-width: 150px;
  width: auto;
  max-width: 100%;
}

.landing-form-field-row .landing-form-required-wrap {
  flex: 0 0 auto;
  min-height: 44px;
  height: 44px;
  padding: 0 12px;
  gap: 6px;
  font-size: 13px;
  font-weight: 500;
}

.landing-form-field-row .landing-form-remove-btn {
  flex: 0 0 auto;
  min-width: 40px;
  width: 40px;
  padding: 0;
  order: 10;
  margin-inline-start: auto;
}

html[dir="rtl"] .landing-form-field-row .landing-form-remove-btn,
html[lang="ar"] .landing-form-field-row .landing-form-remove-btn,
html[lang="he"] .landing-form-field-row .landing-form-remove-btn {
  order: -1;
  margin-inline-start: 0;
  margin-inline-end: 0;
}

.landing-form-field-row .input,
.landing-form-field-row .select,
.landing-form-template-row .select,
.landing-form-template-row .input,
.landing-form-live-preview-fields .input,
.landing-form-live-preview-fields .select {
  min-height: 44px;
  height: 44px;
  border-radius: 12px;
  box-sizing: border-box;
}

.landing-form-required-wrap {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  margin: 0;
  border: 1px solid #e5e7eb;
  border-radius: 12px;
  font-size: 13px;
  font-weight: 500;
  color: #334155;
  cursor: pointer;
  background: #fff;
}

.landing-form-remove-btn {
  position: relative;
  z-index: 3;
  min-height: 44px;
  height: 44px;
  min-width: 40px;
  width: 40px;
  border: 1px solid #e5e7eb;
  border-radius: 12px;
  background: #fff;
  color: #64748b;
  cursor: pointer;
  padding: 0;
}

.landing-form-options-input {
  width: 100%;
  flex: 1 1 100%;
  min-height: 44px;
  padding: 0 16px;
  border: 1px solid #d8deea;
  border-radius: 12px;
  background: linear-gradient(180deg, #ffffff, #fbfcff);
  color: var(--brand-text, #0f172a);
  box-sizing: border-box;
  font-size: 14px;
  line-height: 1.4;
}

.landing-form-templates-card {
  border: 1px solid #e5e7eb;
  border-radius: 16px;
  padding: 24px;
  background: #fafbfc;
}

.landing-form-templates-empty-msg {
  margin-bottom: 12px;
  font-size: 13px;
  line-height: 1.4;
}

.landing-form-template-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 10px;
  align-items: center;
  margin-bottom: 12px;
}

.landing-form-template-row:last-child {
  margin-bottom: 0;
}

.landing-form-template-row-load {
  grid-template-columns: minmax(0, 1fr) auto auto;
}

.landing-form-template-row-load .landing-form-template-delete-clear {
  min-height: 44px;
}

.landing-form-templates-card .button.secondary:not(:disabled):not(.lp-cta-button) {
  min-height: 44px;
  background: #fff;
  color: #0f172a;
  border: 1px solid #e5e7eb;
  box-shadow: none;
}

.landing-form-template-row .button {
  min-height: 44px;
}

.landing-form-templates-card .button:disabled,
.landing-form-templates-card .button[disabled] {
  opacity: 0.45;
  cursor: not-allowed;
}

.landing-form-preview-title {
  font-size: 18px;
  font-weight: 700;
  color: #0f172a;
}

.landing-form-preview-subtitle {
  margin-top: 6px;
  margin-bottom: 14px;
  font-size: 14px;
  color: #64748b;
  line-height: 1.5;
  text-align: start;
}

.landing-form-live-preview-fields {
  display: grid;
  gap: 10px;
  min-width: 0;
  width: 100%;
}

.landing-form-preview-field {
  display: grid;
  gap: 6px;
  min-width: 0;
}

.landing-form-preview-label {
  display: block;
  font-size: 13px;
  font-weight: 500;
  color: #334155;
  text-align: start;
}

.landing-form-preview-select {
  width: 100%;
  max-width: 100%;
  cursor: pointer;
}

.landing-form-live-preview-fields .input,
.landing-form-live-preview-fields .select,
.landing-form-preview-card > .input,
.landing-form-preview-card > .select {
  width: 100%;
  max-width: 100%;
  text-align: start;
}

/* Browsers force LTR on type=tel; keep placeholder aligned in RTL previews */
html[dir="rtl"] .landing-form-live-preview-fields input[type="tel"],
html[lang="ar"] .landing-form-live-preview-fields input[type="tel"],
html[lang="he"] .landing-form-live-preview-fields input[type="tel"],
[dir="rtl"] .landing-form-live-preview-fields input[type="tel"] {
  direction: rtl;
  text-align: start;
}

.landing-form-preview-field .select,
.landing-form-preview-field .input {
  width: 100%;
  max-width: 100%;
}

.landing-form-preview-submit {
  margin-top: 12px;
  width: 100%;
  min-height: 44px;
  border-radius: 12px;
  pointer-events: none;
  opacity: 0.95;
  cursor: default;
}

@media (max-width: 980px) {
  .landing-form-template-row,
  .landing-form-template-row-load {
    grid-template-columns: minmax(0, 1fr);
  }

  .landing-form-template-row .button {
    justify-self: start;
  }

  .landing-form-template-delete-clear {
    justify-self: start;
  }
}

.landing-library-modal-card {
  width: min(1040px, calc(100vw - 32px));
  max-height: calc(100vh - 32px);
  padding: 24px;
  border-radius: 20px;
  border: 1px solid #e5e7eb;
  background: #ffffff;
  box-shadow: 0 18px 42px rgba(15, 23, 42, 0.14);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.landing-stack-edit-modal-card {
  width: min(1140px, calc(100vw - 32px));
  max-height: calc(100vh - 32px);
  padding: 24px;
  border-radius: 20px;
  border: 1px solid #e5e7eb;
  background: #ffffff;
  box-shadow: 0 18px 42px rgba(15, 23, 42, 0.14);
  display: flex;
  flex-direction: column;
  gap: 14px;
  overflow: hidden;
}

.landing-classic-edit-modal-card {
  width: min(680px, calc(100vw - 32px));
  max-height: calc(100vh - 32px);
  padding: 24px;
  border-radius: 20px;
  border: 1px solid #e5e7eb;
  background: #ffffff;
  box-shadow: 0 18px 42px rgba(15, 23, 42, 0.14);
  display: flex;
  flex-direction: column;
  gap: 14px;
  overflow: hidden;
}

.landing-classic-edit-header {
  padding-inline-end: 0;
}

.landing-classic-edit-eyebrow {
  margin-bottom: 8px;
  color: color-mix(in srgb, var(--brand-primary, #7c3aed) 82%, #334155);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.landing-classic-edit-modal-card .modal-title {
  margin: 0;
  color: #0f172a;
  font-size: 24px;
  line-height: 1.25;
  letter-spacing: -0.01em;
}

.landing-classic-edit-modal-card .modal-subtitle {
  max-width: 56ch;
  margin-top: 6px;
  color: #64748b;
  font-size: 14px;
  line-height: 1.5;
}

.landing-classic-edit-field-hint {
  margin: -2px 0 10px;
  color: #64748b;
  font-size: 13.5px;
  line-height: 1.5;
}

/* Meta Pixel modal — narrower card, short ID field, stepped guide panel */
.landing-meta-pixel-modal-card {
  width: min(438px, calc(100vw - 32px));
  gap: 18px;
  /* Parent .landing-classic-edit-modal-card uses overflow:hidden which clips OL markers outside the box */
  overflow: visible;
  padding: 26px 22px 24px !important;
  font-family:
    'Tajawal',
    'Cairo',
    'Heebo',
    'Assistant',
    ui-sans-serif,
    system-ui,
    -apple-system,
    'Segoe UI',
    sans-serif;
}

.landing-meta-pixel-modal-card .landing-classic-edit-eyebrow {
  text-transform: none;
  letter-spacing: 0.02em;
  font-weight: 750;
}

.landing-meta-pixel-modal-card .modal-title {
  font-size: 1.375rem;
  line-height: 1.3;
}

.landing-meta-pixel-intro {
  margin: -6px 0 4px !important;
  max-width: none;
}

.landing-meta-pixel-field-region {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
  margin-top: 2px;
  width: 100%;
}

.landing-meta-pixel-modal-card .landing-meta-pixel-field-wrap {
  width: 100%;
  max-width: 21rem;
  gap: 6px !important;
}

.landing-meta-pixel-modal-card .landing-meta-pixel-input {
  width: 100%;
  max-width: 21rem;
  box-sizing: border-box;
  min-height: 48px;
  padding-inline: 16px;
  padding-block: 11px;
  font-family:
    ui-monospace,
    'SF Mono',
    Menlo,
    Monaco,
    Consolas,
    'Liberation Mono',
    monospace;
  font-size: 15px;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.035em;
}

.landing-meta-pixel-char-hint {
  display: block;
  width: 100%;
  max-width: 21rem;
  font-size: 11.75px;
  line-height: 1.42;
  text-align: start;
}

.landing-meta-pixel-guide {
  width: 100%;
  padding: 20px 22px 22px;
  border-radius: 15px;
  border: 1px solid color-mix(in srgb, var(--brand-primary, #7c3aed) 12%, #e2e8f0);
  background: linear-gradient(
    148deg,
    color-mix(in srgb, var(--brand-primary, #7c3aed) 6%, #fafbfc) 0%,
    #eef2f6 100%
  );
  box-sizing: border-box;
}

.landing-meta-pixel-guide-title {
  margin: 0 0 14px;
  font-size: 13px;
  font-weight: 750;
  color: #334155;
  letter-spacing: 0;
}

.landing-meta-pixel-step-list {
  margin: 0;
  padding: 0 4px;
  color: #475569;
  font-size: 13px;
  line-height: 1.62;
  list-style-position: inside;
}

.landing-meta-pixel-step-list > li {
  padding-inline: 14px;
  margin-inline: 0;
  box-sizing: border-box;
}

.landing-meta-pixel-step-list > li + li {
  margin-top: 0.72em;
}

.landing-meta-pixel-actions {
  margin-top: 4px !important;
  padding-top: 14px !important;
  border-top: 1px solid #f1f5f9;
}

[dir='rtl'] .landing-meta-pixel-field-region,
.rtl .landing-meta-pixel-field-region {
  align-items: flex-end;
}

[dir='rtl'] .landing-meta-pixel-guide,
.rtl .landing-meta-pixel-guide {
  text-align: right;
}

[dir='rtl'] .landing-meta-pixel-step-list,
.rtl .landing-meta-pixel-step-list {
  direction: rtl;
}

.landing-classic-edit-credit-note {
  align-self: flex-start;
  display: inline-flex;
  align-items: center;
  min-height: 32px;
  padding: 7px 11px;
  border: 1px solid color-mix(in srgb, var(--brand-primary, #7c3aed) 16%, #e2e8f0);
  border-radius: 999px;
  background: color-mix(in srgb, var(--brand-primary, #7c3aed) 6%, #ffffff);
  color: #475569;
  font-size: 12.5px;
  font-weight: 650;
  line-height: 1.35;
}

.landing-stack-edit-modal-card,
.landing-classic-edit-modal-card,
.landing-stack-edit-modal-card input,
.landing-classic-edit-modal-card input,
.landing-stack-edit-modal-card textarea,
.landing-classic-edit-modal-card textarea,
.landing-stack-edit-modal-card select,
.landing-classic-edit-modal-card select,
.landing-stack-edit-modal-card button,
.landing-classic-edit-modal-card button {
  font-family: inherit;
}

.landing-stack-edit-modal-card .input,
.landing-classic-edit-modal-card .input,
.landing-stack-edit-modal-card textarea.input,
.landing-classic-edit-modal-card textarea.input,
.landing-stack-edit-modal-card input.input,
.landing-classic-edit-modal-card input.input {
  width: 100%;
  border-radius: 14px;
  border: 1px solid #dbe4f0;
  background: #ffffff;
  color: #0f172a;
  box-shadow: none;
}

.landing-stack-edit-modal-card textarea.input,
.landing-classic-edit-modal-card textarea.input,
.landing-stack-edit-modal-card .lp-inline-textarea,
.landing-classic-edit-modal-card .lp-inline-textarea {
  min-height: 128px;
  padding: 14px 16px;
  resize: vertical;
}

.landing-classic-edit-modal-card .lp-setup-field {
  margin-bottom: 0;
}

.landing-classic-edit-modal-card .lp-setup-field > label {
  margin-bottom: 8px;
  color: #0f172a;
  font-size: 14px;
  font-weight: 700;
}

.landing-classic-edit-scope-field {
  max-width: none;
}

.landing-classic-edit-modal-card .select {
  font-weight: 400;
}

.landing-stack-edit-modal-card .input:focus,
.landing-classic-edit-modal-card .input:focus,
.landing-stack-edit-modal-card textarea.input:focus,
.landing-classic-edit-modal-card textarea.input:focus,
.landing-stack-edit-modal-card input.input:focus,
.landing-classic-edit-modal-card input.input:focus {
  border-color: color-mix(in srgb, var(--brand-primary, #7c3aed) 55%, #cbd5e1);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--brand-primary, #7c3aed) 12%, transparent);
  outline: none;
}

.landing-stack-edit-layout {
  display: grid;
  grid-template-columns: minmax(260px, 1fr) minmax(280px, 360px);
  gap: 20px;
  min-height: 0;
  flex: 1 1 auto;
  overflow: hidden;
  align-items: stretch;
}

.landing-stack-edit-stack-column {
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-width: 0;
  min-height: 0;
}

.landing-stack-edit-stack-label {
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: #64748b;
  flex-shrink: 0;
}

.landing-stack-edit-stack-scroll {
  flex: 1 1 auto;
  min-height: 0;
  overflow: auto;
  border-radius: 16px;
  border: 1px solid #e2e8f0;
  background: #0b0d12;
  padding: 20px 16px 28px;
}

.landing-stack-edit-stack {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  max-width: min(320px, 100%);
  margin: 0 auto;
}

.landing-stack-edit-stack-slice {
  position: relative;
  display: block;
  width: 100%;
  padding: 0;
  margin: 0;
  border: none;
  background: transparent;
  cursor: pointer;
  font: inherit;
  color: inherit;
  border-radius: 14px;
  transition: transform 0.15s ease, filter 0.15s ease;
}

.landing-stack-edit-stack-slice + .landing-stack-edit-stack-slice {
  margin-top: -32px;
}

.landing-stack-edit-stack-slice:focus-visible {
  outline: 3px solid color-mix(in srgb, var(--brand-primary, #7c3aed) 65%, transparent);
  outline-offset: 4px;
}

.landing-stack-edit-stack-slice:hover {
  transform: translateY(-2px);
  filter: brightness(1.04);
  z-index: 85 !important;
}

.landing-stack-edit-stack-slice.active {
  z-index: 90 !important;
}

.landing-stack-edit-stack-slice.active .landing-stack-edit-slice-frame {
  box-shadow:
    0 0 0 3px var(--brand-primary, #7c3aed),
    0 18px 40px rgba(0, 0, 0, 0.35);
}

.landing-stack-edit-slice-badge {
  position: absolute;
  top: 14px;
  left: 14px;
  z-index: 2;
  min-width: 26px;
  height: 26px;
  padding: 0 7px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 700;
  color: #fff;
  background: color-mix(in srgb, var(--brand-primary, #7c3aed) 88%, #1e1b4b);
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.35);
  pointer-events: none;
}

.landing-stack-edit-slice-hint {
  position: absolute;
  left: 12px;
  right: 12px;
  bottom: 18px;
  z-index: 2;
  padding: 8px 10px;
  border-radius: 10px;
  font-size: 12px;
  font-weight: 500;
  text-align: center;
  color: #f8fafc;
  background: rgba(15, 23, 42, 0.72);
  backdrop-filter: blur(8px);
  opacity: 0;
  transform: translateY(6px);
  transition: opacity 0.18s ease, transform 0.18s ease;
  pointer-events: none;
}

.landing-stack-edit-stack-slice:hover .landing-stack-edit-slice-hint,
.landing-stack-edit-stack-slice:focus-visible .landing-stack-edit-slice-hint {
  opacity: 1;
  transform: translateY(0);
}

.landing-stack-edit-slice-frame {
  display: block;
  border-radius: 14px;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.12);
  box-shadow: 0 16px 36px rgba(0, 0, 0, 0.4);
  background: #10131d;
}

.landing-stack-edit-slice-frame img {
  display: block;
  width: 100%;
  height: auto;
  vertical-align: middle;
}

.landing-stack-edit-right {
  display: flex;
  flex-direction: column;
  gap: 12px;
  min-width: 0;
  min-height: 0;
}

.landing-stack-edit-detail {
  display: flex;
  flex-direction: column;
  gap: 12px;
  min-width: 0;
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  padding-right: 4px;
}

.landing-stack-edit-generate-bar {
  flex-shrink: 0;
  padding-top: 12px;
  margin-top: auto;
  border-top: 1px solid #e5e7eb;
}

.landing-stack-edit-generate-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
}

.landing-stack-edit-selected-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}

.landing-stack-edit-selected-label {
  font-size: 13px;
  font-weight: 500;
  color: #475569;
  padding-top: 4px;
}

.landing-stack-edit-thumb-mini {
  flex-shrink: 0;
  width: 112px;
  max-height: 200px;
  padding: 0;
  border-radius: 12px;
  border: 1px solid #e2e8f0;
  background: #fff;
  overflow: hidden;
  cursor: zoom-in;
  box-shadow: 0 4px 14px rgba(15, 23, 42, 0.08);
}

.landing-stack-edit-thumb-mini img {
  display: block;
  width: 100%;
  height: auto;
  max-height: 188px;
  object-fit: contain;
}

.landing-stack-edit-field-compact .lp-inline-textarea {
  min-height: 72px;
}

/* Legacy thumb classes (kept for safety if old DOM cached) */
.landing-stack-edit-thumb {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 10px;
  border-radius: 14px;
  border: 1px solid #dbe4f0;
  background: #fff;
  color: #334155;
  cursor: pointer;
  font: inherit;
  text-align: start;
  transition: border-color 0.15s ease, background 0.15s ease;
}

.landing-stack-edit-thumb:hover {
  border-color: color-mix(in srgb, var(--brand-primary, #7c3aed) 38%, #dbe4f0);
  background: #faf7ff;
}

.landing-stack-edit-thumb.active {
  border-color: var(--brand-primary, #7c3aed);
  background: color-mix(in srgb, var(--brand-primary, #7c3aed) 7%, #fff);
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--brand-primary, #7c3aed) 12%, transparent);
}

.landing-stack-edit-thumb img {
  width: 100%;
  aspect-ratio: 3 / 4;
  object-fit: cover;
  border-radius: 10px;
  background: #f8fafc;
  border: 1px solid #e5e7eb;
}

.landing-stack-edit-thumb-label {
  font-size: 12px;
  font-weight: 500;
  color: #475569;
}

.landing-stack-edit-preview-wrap {
  border-radius: 18px;
  border: 1px solid #e5e7eb;
  background: linear-gradient(180deg, #fafafa 0%, #f8fafc 100%);
  padding: 14px;
}

.landing-stack-edit-preview {
  width: 100%;
  min-height: 200px;
  max-height: 34vh;
  overflow: hidden;
  border-radius: 14px;
  background: #ffffff;
  border: 1px solid #e5e7eb;
  display: flex;
  align-items: center;
  justify-content: center;
}

.landing-stack-edit-preview-button {
  width: 100%;
  height: 100%;
  min-height: 200px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 8px;
  border: 0;
  background: transparent;
  cursor: zoom-in;
}

.landing-stack-edit-preview img {
  display: block;
  width: auto;
  max-width: 100%;
  max-height: min(30vh, 360px);
  height: auto;
  object-fit: contain;
}

.landing-image-lightbox-modal-card {
  width: min(1200px, calc(100vw - 24px));
  max-height: calc(100vh - 24px);
  padding: 18px;
  border-radius: 20px;
  border: 1px solid #e5e7eb;
  background: rgba(255, 255, 255, 0.98);
  box-shadow: 0 18px 42px rgba(15, 23, 42, 0.18);
  overflow: hidden;
}

.landing-image-lightbox-stage {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: min(70vh, 820px);
  max-height: calc(100vh - 84px);
  padding: 8px;
}

.landing-image-lightbox-stage img {
  display: block;
  max-width: 100%;
  max-height: calc(100vh - 120px);
  width: auto;
  height: auto;
  object-fit: contain;
}

.landing-stack-edit-field {
  margin: 0;
}

.landing-stack-edit-field .lp-inline-textarea {
  min-height: 88px;
}

.landing-stack-edit-inline-actions {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 10px;
  flex-wrap: wrap;
  margin-top: -2px;
}

.landing-stack-edit-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  flex-wrap: wrap;
  gap: 10px;
}

.landing-classic-edit-actions {
  padding-top: 2px;
}

@media (max-width: 860px) {
  .landing-stack-edit-layout {
    grid-template-columns: 1fr;
  }

  .landing-stack-edit-stack-scroll {
    max-height: min(52vh, 420px);
  }

  .landing-stack-edit-stack-slice + .landing-stack-edit-stack-slice {
    margin-top: -24px;
  }

  .landing-stack-edit-thumb {
    min-width: 140px;
    width: 140px;
    flex-shrink: 0;
  }

  .landing-stack-edit-preview {
    min-height: 160px;
    max-height: 24vh;
  }

  .landing-stack-edit-preview-button {
    min-height: 160px;
    padding: 6px;
  }

  .landing-stack-edit-preview img {
    max-height: 20vh;
  }

  .landing-stack-edit-field .lp-inline-textarea {
    min-height: 72px;
  }
}

.landing-library-modal-controls {
  margin-top: 14px;
  margin-bottom: 14px;
}

.landing-library-modal-card #landing-library-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 10px;
  flex: 1 1 auto;
  min-width: 0;
  min-height: 0;
  overflow-y: auto;
  overflow-x: hidden;
  align-content: start;
}

.landing-library-modal-card #landing-library-grid .caption-library-card {
  content-visibility: visible;
  contain: none;
}

.landing-library-modal-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px solid #e5e7eb;
}

.landing-library-pagination,
.landing-library-actions {
  display: flex;
  align-items: center;
  gap: 10px;
}

[dir="rtl"] .landing-library-pagination {
  flex-direction: row-reverse;
}

.lp-caption-library-thumb-contain {
  object-fit: contain;
  background: #f8fafc;
}

.lp-picked-thumb {
  align-items: flex-start;
  min-width: 220px;
}

.lp-picked-thumb-media {
  width: 96px;
  height: auto;
  min-height: 72px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 12px;
  border: 1px solid #e2e8f0;
  background: #ffffff;
  overflow: hidden;
  flex: 0 0 auto;
}

.lp-picked-thumb-media img,
.lp-picked-thumb-media video {
  display: block;
  width: auto;
  max-width: 96px;
  height: auto;
  max-height: 96px;
  object-fit: contain;
}

/* CTA Section */
.lp-step-cta {
  margin-top: 24px;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 12px;
}

.lp-cta-button {
  align-self: center;
  min-width: 280px;
  font-size: 15px;
  font-weight: 500;
}

.lp-cta-note {
  font-size: 12px;
  font-weight: 400;
  color: var(--brand-muted);
  margin: 0;
}

.lp-cta-button:disabled .lp-cta-text {
  opacity: 0.8;
}

/* RTL alignment */
[dir="rtl"] .lp-panel-header,
[dir="rtl"] .lp-panel-title {
  text-align: right;
}

[dir="rtl"] .lp-setup-field > label,
[dir="rtl"] .landing-wizard-form .lp-step-header,
[dir="rtl"] .landing-wizard-form .step-panel-title,
[dir="rtl"] .lp-assets-header,
[dir="rtl"] .landing-wizard-form .step-panel-subtitle,
[dir="rtl"] .lp-hint,
[dir="rtl"] .lp-upload-text,
[dir="rtl"] .lp-upload-hint {
  text-align: right;
}

[dir="rtl"] .landing-wizard-form .step-panel-title .step-panel-subtitle {
  display: inline;
}

[dir="rtl"] #landing-language {
  direction: rtl;
  text-align: right;
}

[dir="rtl"] .lp-language-trigger,
[dir="rtl"] .lp-language-option {
  text-align: right;
}

[dir="rtl"] .lp-mode-card {
  align-items: flex-end;
  text-align: right;
}

[dir="rtl"] .lp-mode-card-title,
[dir="rtl"] .lp-mode-card-desc,
[dir="rtl"] .lp-mode-card-best {
  width: 100%;
  text-align: right;
}

[dir="rtl"] .lp-palette-chips,
[dir="rtl"] .lp-palette-swatches {
  direction: rtl;
  justify-content: flex-start;
}

[dir="rtl"] .lp-palette-mode-toggle .lp-toggle-option:first-child {
  border-radius: 0 10px 10px 0;
}

[dir="rtl"] .lp-palette-mode-toggle .lp-toggle-option:last-child {
  border-radius: 10px 0 0 10px;
}

[dir="rtl"] .lp-palette-chip,
[dir="rtl"] .lp-ai-toggle-card,
[dir="rtl"] .lp-assets-row {
  flex-direction: row-reverse;
}

[dir="rtl"] .lp-ai-toggle-copy,
[dir="rtl"] .lp-assets-guidance,
[dir="rtl"] .lp-source-guidance,
[dir="rtl"] .lp-source-head {
  text-align: right;
}

[dir="rtl"] .lp-source-upload-wrap {
  justify-content: start;
}

[dir="rtl"] .landing-create-modal-card .modal-close {
  left: 16px;
  right: auto;
}

[dir="rtl"] .landing-library-modal-card .modal-close {
  left: 16px;
  right: auto;
}

[dir="rtl"] .landing-stack-edit-modal-card .modal-close,
[dir="rtl"] .landing-classic-edit-modal-card .modal-close,
[dir="rtl"] .landing-edit-forms-modal-card .modal-close,
html[dir="rtl"] .landing-edit-forms-modal-card .modal-close,
html[lang="ar"] .landing-edit-forms-modal-card .modal-close,
html[lang="he"] .landing-edit-forms-modal-card .modal-close {
  left: 16px;
  right: auto;
}

[dir="rtl"] .landing-classic-edit-modal-card,
.rtl .landing-classic-edit-modal-card,
[dir="rtl"] .landing-edit-forms-modal-card,
.rtl .landing-edit-forms-modal-card,
html[dir="rtl"] .landing-edit-forms-modal-card,
html[lang="ar"] .landing-edit-forms-modal-card,
html[lang="he"] .landing-edit-forms-modal-card {
  direction: rtl;
  text-align: right;
}

[dir="rtl"] .landing-classic-edit-header,
.rtl .landing-classic-edit-header {
  padding-inline-start: 0;
  padding-inline-end: 0;
}

[dir="rtl"] .landing-classic-edit-modal-card .modal-title,
[dir="rtl"] .landing-classic-edit-modal-card .modal-subtitle,
[dir="rtl"] .landing-classic-edit-field-hint,
[dir="rtl"] .landing-classic-edit-modal-card .lp-setup-field > label,
.rtl .landing-classic-edit-modal-card .modal-title,
.rtl .landing-classic-edit-modal-card .modal-subtitle,
.rtl .landing-classic-edit-field-hint,
.rtl .landing-classic-edit-modal-card .lp-setup-field > label {
  text-align: right;
}

[dir="rtl"] .landing-classic-edit-modal-card .modal-subtitle,
.rtl .landing-classic-edit-modal-card .modal-subtitle {
  margin-inline-start: auto;
  margin-inline-end: 0;
}

[dir="rtl"] .landing-classic-edit-modal-card .input,
[dir="rtl"] .landing-classic-edit-modal-card textarea,
[dir="rtl"] .landing-classic-edit-modal-card select,
.rtl .landing-classic-edit-modal-card .input,
.rtl .landing-classic-edit-modal-card textarea,
.rtl .landing-classic-edit-modal-card select {
  direction: rtl;
  text-align: right;
}

[dir="rtl"] .landing-classic-edit-modal-card textarea::placeholder,
[dir="rtl"] .landing-classic-edit-modal-card input::placeholder,
.rtl .landing-classic-edit-modal-card textarea::placeholder,
.rtl .landing-classic-edit-modal-card input::placeholder {
  direction: rtl;
  text-align: right;
}

[dir="rtl"] .landing-classic-edit-eyebrow,
.rtl .landing-classic-edit-eyebrow {
  letter-spacing: 0;
}

[dir="rtl"] .landing-classic-edit-credit-note,
.rtl .landing-classic-edit-credit-note {
  align-self: flex-start;
}

[dir="rtl"] .landing-classic-edit-actions,
.rtl .landing-classic-edit-actions {
  justify-content: flex-start;
}

@media (max-width: 960px) {
  #landing-language.lp-language-native-hidden {
    position: absolute;
    width: 0;
    height: 0;
    opacity: 0;
    pointer-events: none;
    min-width: 0;
    padding: 0;
    border: 0;
  }

  .lp-language-picker {
    display: block;
  }

  #landing-language {
    appearance: auto;
    -webkit-appearance: menulist;
    -moz-appearance: menulist;
    font-size: 16px;
  }
}

@media (max-width: 640px) {

  .lp-stack-grid-2,
  .lp-stack-grid-3,
  .lp-stack-style-cards {
    grid-template-columns: 1fr;
  }

  .lp-inline-toggle {
    display: grid;
  }

  .lp-palette-mode-toggle {
    display: inline-grid;
    width: fit-content;
  }

  .lp-mode-cards {
    grid-template-columns: 1fr;
  }

  .lp-assets-row {
    flex-direction: column;
    align-items: stretch;
  }

  .lp-pick-library {
    width: 100%;
    flex: 1 1 auto;
  }

  #landing-create-modal {
    padding: 0;
  }

  .landing-create-modal-card {
    width: 100vw;
    height: 100vh;
    height: 100dvh;
    max-height: none;
    margin: 0;
    padding: 20px 16px;
    border-radius: 0;
    border-inline: 0;
  }

  .landing-library-modal-card {
    width: min(100vw - 16px, 1040px);
    padding: 20px 16px;
    border-radius: 20px;
  }

  .landing-stack-edit-modal-card {
    width: min(100vw - 16px, 920px);
    padding: 20px 16px;
    border-radius: 20px;
  }

  .landing-wizard-steps {
    overflow-x: auto;
    justify-content: flex-start;
    padding-bottom: 4px;
  }

  .lp-source-title {
    font-size: 15.4px;
  }

  .lp-source-upload-wrap {
    grid-template-columns: 1fr;
  }

  .lp-products-panel-head {
    display: grid;
    grid-template-columns: 1fr;
  }

  .lp-product-image-field {
    justify-content: flex-end;
  }

  .lp-product-image-control {
    justify-content: stretch;
  }

  .lp-add-product-btn,
  .lp-product-card-actions,
  .lp-product-image-remove,
  .lp-product-remove {
    width: 100%;
  }

  .landing-library-modal-footer {
    flex-direction: column;
    align-items: stretch;
  }

  .landing-library-pagination,
  .landing-library-actions {
    justify-content: space-between;
  }
}

.lp-image-source-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
}

.lp-image-source-or {
  color: var(--brand-muted);
  font-size: 13px;
}

.lp-library-wrap {
  margin-top: 12px;
}

.lp-library-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  max-height: 260px;
  overflow-y: auto;
  border: 1px solid var(--brand-border);
  border-radius: 10px;
  padding: 8px;
  background: #fff;
}

.lp-library-item {
  border: 2px solid transparent;
  border-radius: 8px;
  overflow: hidden;
  cursor: pointer;
  position: relative;
  background: #f8fafc;
  min-height: 72px;
}

.lp-library-item.selected {
  border-color: var(--brand-primary);
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--brand-primary) 30%, transparent);
}

.lp-library-item img {
  width: 100%;
  height: 100%;
  min-height: 72px;
  object-fit: cover;
  display: block;
}

.lp-library-load-more {
  margin-top: 8px;
  width: 100%;
}

.landing-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
}

.landing-empty-state {
  min-height: 280px;
  border: 1px dashed #d1d5db;
  border-radius: 16px;
  background: #ffffff;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 24px;
  grid-column: 1 / -1;
}

.landing-empty-desc {
  max-width: 520px;
  margin: 8px 0 14px;
  line-height: 1.5;
}

/* Compact secondary control — primaries stay .landing-actions .button (34px / 13px). */
.landing-vis-seg {
  display: inline-flex;
  align-items: stretch;
  border-radius: 7px;
  border: 1px solid rgba(107, 114, 128, 0.4);
  background: #e5e7eb;
  overflow: hidden;
  flex-shrink: 0;
  max-width: 100%;
}

.landing-vis-seg-btn {
  margin: 0;
  min-height: 28px;
  max-height: 28px;
  padding: 0 7px;
  box-sizing: border-box;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font: inherit;
  font-size: 11px;
  font-weight: 500;
  line-height: 1;
  letter-spacing: 0.01em;
  border: none;
  background: transparent;
  color: #374151;
  cursor: pointer;
  transition: background 0.12s ease, color 0.12s ease, box-shadow 0.12s ease;
}

/* Match pill radius; hairline between options (LTR + RTL). */
.landing-vis-seg-btn:first-child {
  border-radius: 6px 0 0 6px;
  border-inline-end: 1px solid rgba(75, 85, 99, 0.35);
}

.landing-vis-seg-btn:last-child {
  border-radius: 0 6px 6px 0;
}

[dir='rtl'] .landing-vis-seg-btn:first-child {
  border-radius: 0 6px 6px 0;
}

[dir='rtl'] .landing-vis-seg-btn:last-child {
  border-radius: 6px 0 0 6px;
}

/* Inactive: stay visibly distinct from the page; hover uses gray, not white. */
.landing-vis-seg-btn:hover:not(:disabled):not(.active) {
  background: rgba(75, 85, 99, 0.18);
  color: #1f2937;
}

.landing-vis-seg-btn.active {
  background: var(--brand-primary, #7c3aed);
  color: #fff;
}

.landing-vis-seg-btn:disabled {
  opacity: 0.65;
  cursor: wait;
}

.landing-asset-card {
  border: 1px solid #e5e7eb;
  border-radius: 14px;
  background: #ffffff;
  overflow: hidden;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
  transition: border-color 140ms ease, box-shadow 140ms ease, transform 140ms ease;
  cursor: pointer;
}

.landing-asset-card:hover {
  border-color: #c7d2fe;
  box-shadow: 0 10px 24px rgba(15, 23, 42, 0.08);
  transform: translateY(-2px);
}

.landing-preview-shell {
  position: relative;
  background: #f8fafc;
  aspect-ratio: 16 / 9;
  border-bottom: 1px solid #f1f5f9;
  /* Allow ⋯ dropdown to extend below preview; card chrome still clips via .landing-asset-card */
  overflow: visible;
  z-index: 1;
}

/* Live/Draft + ⋯: always anchored physical left (rtl flex-start would pin to wrong side). */
.landing-preview-toolbar {
  position: absolute;
  top: 8px;
  left: 8px;
  right: auto;
  max-width: calc(100% - 16px);
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: flex-start;
  align-items: center;
  gap: 8px;
  z-index: 10;
  pointer-events: none;
  direction: ltr;
}

.landing-preview-toolbar-cluster {
  display: inline-flex;
  flex-direction: row;
  flex-wrap: nowrap;
  align-items: center;
  gap: 6px;
  pointer-events: auto;
}

/* RTL: ⋯ stays left; toggle sits next to it (DOM is toggle then menu). */
html[dir='rtl'] .landing-preview-toolbar-cluster,
[dir='rtl'] .landing-preview-toolbar-cluster,
.rtl .landing-preview-toolbar-cluster {
  flex-direction: row-reverse;
}

.landing-preview-toolbar .landing-card-menu {
  position: relative;
  top: auto;
  right: auto;
  left: auto;
  flex-shrink: 0;
  pointer-events: auto;
}

.landing-preview-toolbar .landing-status-badge {
  position: static;
  top: auto;
  left: auto;
  right: auto;
  margin: 0;
  pointer-events: auto;
}

.landing-preview-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.landing-preview-frame-wrap {
  position: absolute;
  inset: 0;
  overflow: hidden;
  background: #ffffff;
}

.landing-preview-frame {
  width: 100%;
  height: 760px;
  border: 0;
  display: block;
  background: #ffffff;
  pointer-events: none;
}

.landing-preview-frame-shade {
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom, rgba(15, 23, 42, 0.01) 0%, rgba(15, 23, 42, 0.10) 100%);
  pointer-events: none;
}

.landing-preview-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom, rgba(15, 23, 42, 0.02) 0%, rgba(15, 23, 42, 0.16) 100%);
  pointer-events: none;
}

.landing-preview-placeholder {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: flex-end;
  padding: 12px;
  background: linear-gradient(145deg, #f8fafc 0%, #eef2ff 100%);
}

.landing-preview-placeholder-generating {
  align-items: center;
  justify-content: center;
  background: linear-gradient(145deg, #f5f3ff 0%, #ede9fe 100%);
}

.landing-preview-placeholder-generating .landing-preview-placeholder-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 80px;
}

.landing-preview-spinner {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  border: 2px solid rgba(124, 58, 237, 0.24);
  border-top-color: var(--brand-primary, #7c3aed);
  animation: spin 0.9s linear infinite;
}

.landing-preview-generating-text {
  font-size: 12px;
  font-weight: 500;
  color: #6b7280;
}

.landing-preview-placeholder-inner {
  width: 100%;
  border-radius: 10px;
  padding: 10px;
  background: rgba(255, 255, 255, 0.85);
  border: 1px solid rgba(255, 255, 255, 0.8);
  backdrop-filter: blur(5px);
}

.landing-preview-kicker {
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: #6b7280;
}

.landing-preview-headline {
  margin-top: 6px;
  font-size: 14px;
  line-height: 1.3;
  font-weight: 700;
  color: #111827;
}

.landing-preview-copy {
  margin-top: 5px;
  font-size: 12px;
  line-height: 1.35;
  color: #6b7280;
}

.landing-preview-theme-1 {
  background: linear-gradient(145deg, #f5f3ff 0%, #e9d5ff 100%);
}

.landing-preview-theme-2 {
  background: linear-gradient(145deg, #ecfeff 0%, #cffafe 100%);
}

.landing-preview-theme-3 {
  background: linear-gradient(145deg, #fff7ed 0%, #ffedd5 100%);
}

.landing-preview-theme-4 {
  background: linear-gradient(145deg, #f0fdf4 0%, #dcfce7 100%);
}

.landing-status-badge {
  position: absolute;
  top: 10px;
  left: 10px;
  margin: 0;
  padding: 4px 10px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.01em;
  backdrop-filter: blur(4px);
}

.landing-status-badge.published {
  background: rgba(34, 197, 94, 0.16);
  color: #15803d;
}

.landing-status-badge.generating {
  background: rgba(139, 92, 246, 0.2);
  color: #7c3aed;
}

.landing-status-badge.failed {
  background: rgba(239, 68, 68, 0.17);
  color: #dc2626;
}

.landing-status-badge.draft {
  background: rgba(100, 116, 139, 0.18);
  color: #475569;
}

.landing-card-menu {
  position: absolute;
  top: 8px;
  right: 8px;
}

.landing-menu-trigger {
  width: 30px;
  height: 30px;
  border-radius: 8px;
  border: 1px solid rgba(226, 232, 240, 0.9);
  background: rgba(255, 255, 255, 0.92);
  color: #475569;
  font-size: 18px;
  line-height: 1;
}

.landing-more-menu {
  position: absolute;
  top: 34px;
  right: 0;
  min-width: 140px;
  background: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: 10px;
  box-shadow: 0 10px 24px rgba(15, 23, 42, 0.14);
  padding: 6px;
  z-index: 20;
}

/* ⋯ on physical left: open rightward inside the card (right:0 grows off-screen left). */
.landing-preview-toolbar .landing-more-menu {
  left: 0;
  right: auto;
}

.landing-menu-item {
  width: 100%;
  border: 0;
  background: transparent;
  text-align: start;
  padding: 7px 10px;
  border-radius: 8px;
  font-size: 13px;
  color: #334155;
  cursor: pointer;
  font-family: inherit;
}

.landing-menu-item:hover {
  background: #f8fafc;
}

.landing-menu-item.danger {
  color: #dc2626;
}

.landing-menu-item.danger:hover {
  background: rgba(239, 68, 68, 0.1);
}

.landing-card-content {
  padding: 12px 12px 10px;
}

.landing-title {
  font-size: 15px;
  line-height: 1.35;
  font-weight: 700;
  color: #111827;
  margin: 0;
}

.landing-palette-row {
  margin-top: 6px;
  display: flex;
  align-items: center;
  gap: 6px;
}

.landing-palette-dot {
  width: 10px;
  height: 10px;
  border-radius: 999px;
  border: 1px solid rgba(15, 23, 42, 0.18);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.24);
  flex: 0 0 auto;
}

.landing-description {
  margin-top: 6px;
  font-size: 13px;
  line-height: 1.45;
  color: #6b7280;
}

.landing-meta-row {
  margin-top: 8px;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.landing-meta {
  font-size: 11px;
  color: #9ca3af;
}

.landing-store-tag {
  display: inline-flex;
  align-items: center;
  padding: 2px 8px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--brand-primary, #7c3aed) 12%, #ffffff);
  border: 1px solid color-mix(in srgb, var(--brand-primary, #7c3aed) 22%, rgba(148, 163, 184, 0.2));
  color: color-mix(in srgb, var(--brand-primary, #7c3aed) 82%, #111827);
  font-weight: 500;
}

.landing-actions {
  margin-top: 10px;
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.landing-actions.landing-actions-generating {
  flex-direction: column;
  align-items: flex-start;
  gap: 6px;
}

.landing-actions .button {
  min-height: 34px;
  border-radius: 9px;
  padding: 0 12px;
  font-size: 13px;
}

.landing-edit {
  margin: 0 12px 12px;
  padding-top: 12px;
  border-top: 1px solid #f1f5f9;
}

@media (max-width: 1140px) {
  .landing-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 700px) {
  .landing-library-header {
    flex-direction: column;
    align-items: flex-start;
  }

  .landing-grid {
    grid-template-columns: 1fr;
  }
}

.landing-summary {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  border-radius: 14px;
  border: 1px solid var(--brand-border);
  background: var(--brand-card);
}

.landing-summary + .landing-summary {
  margin-top: 10px;
}

.leads-table {
  display: block;
}

.leads-header,
.leads-row {
  display: grid;
  grid-template-columns: 2fr 1fr 2fr 1fr;
  gap: 16px;
  align-items: center;
  padding: 12px 8px;
}

.leads-header {
  font-weight: 500;
  border-bottom: 1px solid var(--brand-border);
  color: var(--brand-ink);
}

.leads-row {
  border-bottom: 1px solid #e2e8f0;
  font-size: 14px;
}

.lead-name {
  font-weight: 500;
  color: var(--brand-ink);
}

.brand-summary-logo.small {
  width: 36px;
  height: 36px;
  border-radius: 10px;
  background: rgba(15, 23, 42, 0.06);
  display: grid;
  place-items: center;
  overflow: hidden;
  font-weight: 700;
  font-size: 13px;
  color: var(--brand-ink);
}

.brand-summary-logo.small img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.business-card-preview {
  padding: 6px;
}

.card-edit-header-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.card-edit-toggle-mobile {
  display: none;
  width: 32px;
  height: 32px;
  border: 1px solid #d1d5db;
  border-radius: 999px;
  background: #ffffff;
  color: #64748b;
  padding: 0;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background-color 120ms ease, border-color 120ms ease, color 120ms ease;
}

.card-edit-toggle-mobile svg {
  width: 16px;
  height: 16px;
  display: block;
  transition: transform 150ms ease;
}

.card-edit-toggle-mobile svg path {
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.card-edit-toggle-mobile:hover {
  background: #f8fafc;
  border-color: #cbd5e1;
  color: #334155;
}

.card-edit-toggle-mobile.is-collapsed svg {
  transform: rotate(0deg);
}

.card-edit-toggle-mobile:not(.is-collapsed) svg {
  transform: rotate(180deg);
}

.business-card-preview.preview-warning {
  padding: 0;
}

.phone-frame {
  background: #0f1222;
  border-radius: 36px;
  padding: 18px 16px 22px;
  box-shadow: 0 24px 60px rgba(15, 18, 34, 0.35);
  max-width: 380px;
  margin: 12px auto 0;
}

.phone-frame.preview-warning {
  background: transparent;
  box-shadow: none;
  padding: 0;
}

.phone-notch {
  width: 120px;
  height: 16px;
  background: #0f1222;
  border-radius: 0 0 14px 14px;
  margin: 0 auto 10px;
}

.phone-frame.preview-warning .phone-notch {
  display: none;
}

.phone-screen {
  background: #f5f6fb;
  border-radius: 28px;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.08);
}

.phone-frame.preview-warning .phone-screen {
  background: transparent;
  border: none;
}

.business-card {
  border: 1px solid #e5e7f2;
  border-radius: 18px;
  overflow: hidden;
  background: #fff;
  box-shadow: 0 18px 40px rgba(15, 18, 30, 0.08);
}

.business-card-header {
  background: var(--card-header-bg, linear-gradient(
    120deg,
    var(--card-brand-primary, var(--brand-primary)),
    var(--card-brand-secondary, var(--brand-secondary))
  ));
  color: var(--brand-on-primary);
  padding: 18px;
  position: relative;
  isolation: isolate;
  text-align: center;
}

.business-card-header > :not(.business-card-cover-bg) {
  position: relative;
  z-index: 1;
}

.business-card-cover-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.42;
  filter: saturate(1.08);
}

.business-card.banner-fade .business-card-header::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  background:
    linear-gradient(180deg, rgba(15, 23, 42, 0.16), rgba(15, 23, 42, 0.42)),
    radial-gradient(circle at 50% 0%, rgba(255, 255, 255, 0.28), transparent 58%);
}

.business-card-cover {
  width: 100%;
  max-height: 200px;
  object-fit: cover;
  border-radius: 14px;
  border: 1px solid rgba(255, 255, 255, 0.2);
  margin-bottom: 12px;
}

.business-card.cover-layout-full_bleed .business-card-cover {
  width: calc(100% + 36px);
  max-width: none;
  margin: -18px -18px 12px;
  border-radius: 18px 18px 0 0;
  border-inline: 0;
  border-top: 0;
}

.business-card-logo {
  width: 58px;
  height: 58px;
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.18);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  margin: 0 auto 10px;
  font-weight: 700;
  backdrop-filter: blur(8px);
}

.business-card-logo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.business-card-title {
  font-size: 22px;
  font-weight: 700;
}

.business-card-subtitle {
  margin-top: 6px;
  opacity: 0.9;
}

.business-card-body {
  padding: 16px 18px;
  display: grid;
  gap: 12px;
}

.business-card .action-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 16px 10px;
  justify-content: center;
}

.business-card .action-tile {
  box-sizing: border-box;
  flex: 0 1 calc((100% - 20px) / 3);
  padding: 10px;
  border-radius: 14px;
  border: 1px solid #e0e3ef;
  text-decoration: none;
  color: var(--card-button-text, #1e2430);
  background: var(--card-button-bg, #f7f8fd);
  font-weight: 500;
  font-size: 12px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  text-align: center;
  min-height: 82px;
  justify-content: center;
}

.business-card button.action-tile {
  cursor: pointer;
  font: inherit;
}

.business-card .action-tile.primary {
  background: var(--brand-primary);
  color: var(--brand-on-primary);
  border: none;
}

.business-card .action-tile.whatsapp {
  background: var(--card-button-bg, #f7f8fd);
  color: var(--card-button-text, #1e2430);
  border: 1px solid #e0e3ef;
}

.business-card .action-icon {
  width: 20px;
  height: 20px;
  display: block;
}

.business-card.button-display-icon-only .action-icon {
  width: 38px;
  height: 38px;
}

.business-card .action-icon svg {
  width: 20px;
  height: 20px;
  stroke: currentColor;
  fill: none;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.business-card.button-display-icon-only .action-icon svg {
  width: 38px;
  height: 38px;
}

.business-card .action-text {
  line-height: 1.2;
  word-break: break-word;
}

@media (max-width: 720px) {
  .business-card .action-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

.business-card .card-gallery {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(90px, 1fr));
  gap: 8px;
}

.business-card .card-gallery img {
  width: 100%;
  border-radius: 10px;
  object-fit: cover;
  border: 1px solid #e3e6f2;
  aspect-ratio: 1 / 1;
  cursor: pointer;
  transition: transform 140ms ease, box-shadow 140ms ease, border-color 140ms ease;
}

.business-card .card-gallery img:hover {
  transform: translateY(-2px);
  border-color: rgba(124, 58, 237, 0.38);
  box-shadow: 0 10px 22px rgba(15, 23, 42, 0.16);
}

.business-card .card-footer {
  padding: 10px 16px 14px;
  text-align: center;
  font-size: 11px;
  color: #8a90a5;
  border-top: 1px solid #edf0f7;
}

.business-card .card-footer a {
  color: inherit;
  text-decoration: none;
  font-weight: 500;
}

@media (max-width: 720px) {
  .leads-header:not(.crm-leads-header),
  .leads-row:not(.crm-leads-row) {
    grid-template-columns: 1fr;
    gap: 8px;
  }
  .leads-header:not(.crm-leads-header) {
    display: none;
  }
  .leads-row:not(.crm-leads-row) {
    padding: 14px;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    margin-bottom: 12px;
  }
}

@media (max-width: 960px) {
  .card-edit-header-row {
    cursor: pointer;
    user-select: none;
  }
  .grid {
    grid-template-columns: 1fr;
  }
  .card-edit-header-row .section-title {
    margin-bottom: 0;
  }
  .card-edit-toggle-mobile {
    display: inline-flex;
  }
  #card-edit-content {
    margin-top: 12px;
  }
  .topbar-inner {
    flex-direction: column;
    align-items: flex-start;
  }
  .topbar-center {
    width: 100%;
    justify-content: flex-start;
  }
  .brand-switcher {
    width: 100%;
    justify-content: space-between;
  }
  .topbar-actions {
    width: 100%;
    justify-content: flex-start;
  }
}

/* Knowledge Base Styles */
.knowledge-base-page .container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 24px;
  display: flex;
  gap: 32px;
  align-items: flex-start;
}

.kb-content-area {
  flex: 1;
  min-width: 0;
  max-width: 900px;
}

.knowledge-base-intro {
  margin-bottom: 24px;
  padding: 32px;
  text-align: center;
}

.knowledge-base-intro h1 {
  margin: 0 0 12px;
  font-size: 32px;
  font-weight: 700;
}

.knowledge-base-toc {
  position: sticky;
  top: 72px;
  width: 230px;
  min-width: 230px;
  max-height: calc(100vh - 90px);
  overflow-y: auto;
  padding: 16px;
  margin: 0;
  border-radius: 12px;
  scrollbar-width: thin;
  order: -1;
}

.knowledge-base-toc h2 {
  margin: 0 0 12px;
  font-size: 16px;
  font-weight: 700;
}

.kb-toc-mobile-trigger {
  display: none;
  font-family: inherit;
}

.toc-nav {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.toc-nav a {
  color: var(--brand-muted);
  text-decoration: none;
  padding: 6px 10px;
  border-radius: 6px;
  font-size: 13px;
  line-height: 1.4;
  transition: background 0.2s, color 0.2s;
  border-inline-start: 2px solid transparent;
}

.toc-nav a:hover {
  background: rgba(147, 51, 234, 0.08);
  color: var(--brand-primary);
}

.toc-nav a.active {
  color: var(--brand-primary);
  background: rgba(147, 51, 234, 0.1);
  border-inline-start-color: var(--brand-primary);
  font-weight: 500;
}

.toc-nav-group {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.toc-nav-sub {
  display: none;
  flex-direction: column;
  gap: 1px;
  padding-inline-start: 10px;
  margin-bottom: 4px;
}

.toc-nav-group.is-expanded .toc-nav-sub {
  display: flex;
}

.toc-nav-sub a {
  font-size: 12px;
  padding: 4px 10px;
  line-height: 1.35;
}

.toc-nav-subgroup {
  display: flex;
  flex-direction: column;
  gap: 1px;
}

.toc-nav-subgroup + .toc-nav-subgroup {
  margin-top: 8px;
  padding-top: 6px;
  border-top: 1px solid rgba(147, 51, 234, 0.12);
}

.toc-nav-sub-label {
  display: block;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.03em;
  color: var(--brand-muted);
  padding: 2px 10px 4px;
  margin: 0;
  line-height: 1.3;
}

.toc-nav-group.is-expanded > a,
.toc-nav-group:has(.toc-nav-sub a.active) > a {
  color: var(--brand-primary);
  font-weight: 500;
}

.kb-toc-mobile-toggle {
  display: none;
  align-items: center;
  justify-content: center;
  gap: 8px;
  position: fixed;
  bottom: 20px;
  inset-inline-end: 20px;
  z-index: 901;
  min-height: 48px;
  padding: 0 14px;
  border-radius: 999px;
  background: var(--brand-primary, #7c3aed);
  color: #fff;
  border: none;
  box-shadow: 0 4px 16px rgba(124,58,237,0.35);
  font-size: 14px;
  font-weight: 700;
  line-height: 1;
  cursor: pointer;
  transition: transform 0.2s;
}

.kb-toc-mobile-toggle-icon {
  font-size: 18px;
  font-weight: 700;
  line-height: 1;
}

.kb-toc-mobile-toggle:active {
  transform: scale(0.92);
}

.knowledge-base-section {
  margin-bottom: 32px;
}

.knowledge-base-section .card {
  padding: 32px;
}

.knowledge-base-section h2 {
  margin: 0 0 24px;
  font-size: 28px;
  font-weight: 700;
  color: var(--brand-ink);
  border-bottom: 2px solid var(--brand-border);
  padding-bottom: 12px;
}

.knowledge-base-section h3 {
  margin: 32px 0 16px;
  font-size: 22px;
  font-weight: 700;
  color: var(--brand-ink);
}

.knowledge-base-section h4 {
  margin: 24px 0 12px;
  font-size: 18px;
  font-weight: 500;
  color: var(--brand-ink);
}

.knowledge-base-section p {
  line-height: 1.7;
  margin-bottom: 16px;
}

.knowledge-base-section ul,
.knowledge-base-section ol {
  margin: 16px 0;
  padding-left: 24px;
  line-height: 1.8;
}

.knowledge-base-section li {
  margin-bottom: 8px;
}

.knowledge-base-section .job-type-card {
  display: flex;
  flex-direction: column;
  margin: 32px 0;
  padding: 24px;
  background: var(--brand-bg);
  border-radius: 12px;
  border: 1px solid var(--brand-border);
  cursor: default;
}

.knowledge-base-section[id] {
  scroll-margin-top: 88px;
}

.knowledge-base-section .job-type-card[id] {
  scroll-margin-top: 88px;
}

.knowledge-base-section .kb-job-group-label {
  margin: 28px 0 12px;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--brand-muted);
}

.knowledge-base-section .kb-job-group-label:first-of-type {
  margin-top: 8px;
}

.knowledge-base-section h3[id] {
  scroll-margin-top: 88px;
}

.knowledge-base-section .job-type-card:hover {
  transform: none;
  box-shadow: none;
  border-color: var(--brand-border);
}

.knowledge-base-section .job-type-card h3 {
  margin-top: 0;
  color: var(--brand-primary);
}

.kb-details {
  margin: 10px 0 0;
  padding: 8px 12px;
  background: var(--brand-card);
  border-radius: 10px;
  border-inline-start: 3px solid var(--brand-primary);
  width: 100%;
  box-sizing: border-box;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 12px;
  order: 3;
  font-size: 14px;
  line-height: 1.5;
}

.kb-details strong {
  display: inline;
  margin: 0;
  color: var(--brand-ink);
}

.kb-details ul {
  margin: 0;
  padding: 0;
  list-style: none;
  display: inline-flex;
  flex-wrap: wrap;
  gap: 6px 14px;
}

.kb-details li {
  margin: 0;
}

.kb-details li::before {
  content: "• ";
  color: var(--brand-primary);
  font-weight: 700;
}

.kb-image-placeholder {
  margin: 24px 0;
  padding: 40px;
  background: var(--brand-bg);
  border: 2px dashed var(--brand-border);
  border-radius: 12px;
  text-align: center;
  order: 2;
}

.kb-image-placeholder p {
  margin: 0;
  color: var(--brand-muted);
  font-style: italic;
}

.kb-tip {
  margin: 20px 0;
  padding: 16px;
  background: rgba(16, 163, 74, 0.1);
  border-left: 3px solid var(--brand-success);
  border-radius: 8px;
}

.kb-tip strong {
  color: var(--brand-success);
}

.kb-inline-image {
  order: 2;
}

.plan-comparison {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 20px;
  margin: 32px 0;
}

.plan-card {
  padding: 24px;
  background: var(--brand-card);
  border: 2px solid var(--brand-border);
  border-radius: 12px;
  position: relative;
  transition: transform 0.2s, box-shadow 0.2s;
}

.plan-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-card);
}

.plan-card.highlight {
  border-color: var(--brand-primary);
  box-shadow: var(--shadow-soft);
}

.plan-card h3 {
  margin: 0 0 12px;
  font-size: 24px;
  font-weight: 700;
}

.plan-price {
  font-size: 32px;
  font-weight: 700;
  color: var(--brand-primary);
  margin-bottom: 8px;
}

.plan-price span {
  font-size: 16px;
  color: var(--brand-muted);
  font-weight: 400;
}

.plan-card ul {
  margin: 16px 0;
  list-style: none;
  padding: 0;
}

.plan-card li {
  padding: 8px 0;
  border-bottom: 1px solid var(--brand-border);
}

.plan-card li:last-child {
  border-bottom: none;
}

.troubleshooting-item {
  margin: 24px 0;
  padding: 20px;
  background: var(--brand-bg);
  border-radius: 8px;
  border-inline-start: 3px solid var(--brand-primary, #7c3aed);
}

.troubleshooting-item h4 {
  margin-top: 0;
  color: var(--brand-primary, #7c3aed);
}

.knowledge-base-footer {
  margin-top: 48px;
  padding: 24px;
  text-align: center;
  background: var(--brand-bg);
}

@media (max-width: 1060px) {
  .knowledge-base-page .container {
    flex-direction: column;
    max-width: 900px;
    padding-top: 92px;
  }

  .knowledge-base-toc {
    position: fixed;
    top: 72px;
    inset-inline: 24px;
    width: auto;
    max-width: calc(100vw - 48px);
    box-sizing: border-box;
    min-width: 0;
    max-height: none;
    border-radius: 16px;
    z-index: 18;
    background: var(--brand-surface, #fff);
    box-shadow: 0 8px 24px rgba(15, 23, 42, 0.08);
    transform: none;
    transition: none;
    padding: 12px;
    overflow: visible;
    order: 0;
  }

  .knowledge-base-toc h2 {
    display: none;
  }

  .kb-toc-mobile-trigger {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    border: 1px solid rgba(124, 58, 237, 0.14);
    border-radius: 12px;
    background: linear-gradient(180deg, #ffffff 0%, #faf7ff 100%);
    padding: 12px 14px;
    color: #1f2937;
    cursor: pointer;
    font-family: 'Tajawal', 'Cairo', system-ui, -apple-system, Segoe UI, sans-serif;
  }

  .kb-toc-mobile-trigger-copy {
    min-width: 0;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 3px;
  }

  .kb-toc-mobile-trigger-label {
    font-size: 12px;
    line-height: 1.2;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--brand-primary, #7c3aed);
    font-family: inherit;
  }

  .kb-toc-mobile-trigger-current {
    font-size: 14px;
    line-height: 1.35;
    font-weight: 700;
    color: #111827;
    text-align: start;
    font-family: inherit;
  }

  .kb-toc-mobile-trigger-icon {
    flex-shrink: 0;
    font-size: 16px;
    line-height: 1;
    color: var(--brand-primary, #7c3aed);
    transition: transform 0.2s ease;
    font-family: inherit;
  }

  .knowledge-base-toc .toc-nav {
    display: none;
    margin-top: 10px;
    max-height: min(60vh, 420px);
    overflow-y: auto;
    padding-top: 6px;
    border-top: 1px solid rgba(124, 58, 237, 0.1);
  }

  .knowledge-base-toc.toc-open .toc-nav {
    display: flex;
  }

  .knowledge-base-toc.toc-open .kb-toc-mobile-trigger-icon {
    transform: rotate(180deg);
  }

  .knowledge-base-toc.toc-open {
    transform: none;
  }

  .kb-toc-mobile-toggle {
    display: none !important;
    font-size: 0;
  }
}

@media (max-width: 720px) {
  .knowledge-base-page .container {
    padding: 16px;
    padding-top: 84px;
  }

  .knowledge-base-toc {
    top: 64px;
    inset-inline: 16px;
    max-width: calc(100vw - 32px);
  }

  .knowledge-base-intro {
    padding: 24px 16px;
  }

  .knowledge-base-intro h1 {
    font-size: 24px;
  }

  .knowledge-base-section .card {
    padding: 20px;
  }

  .knowledge-base-section h2 {
    font-size: 22px;
  }

  .knowledge-base-section h3 {
    font-size: 18px;
  }

  .plan-comparison {
    grid-template-columns: 1fr;
  }

  .knowledge-base-section .job-type-card {
    padding: 16px;
  }
}

.nav-brand-add-btn {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  height: 38px !important;
  padding: 0 12px !important;
  border-radius: 10px !important;
  background: #fff !important;
  border: 1px solid #e5e7eb !important;
  color: #4b5563 !important;
  text-decoration: none !important;
  font-size: 12px !important;
  font-weight: 500 !important;
  line-height: 1 !important;
  white-space: nowrap !important;
  transition: border-color 0.12s ease, color 0.12s ease, background 0.12s ease;
  flex-shrink: 0;
}

.nav-brand-add-btn:hover {
  background: rgba(147, 51, 234, 0.06) !important;
  border-color: var(--brand-primary) !important;
  color: var(--brand-primary) !important;
}

[dir="rtl"] .nav-brand-add-btn {
  margin-right: 0;
  margin-left: 0;
}

/* ========================================
   Mobile Optimizations
   ======================================== */

@media (max-width: 640px) {
  .auth-layout {
    padding: 0 16px 88px; /* extra bottom for chat widget clearance */
  }

  .auth-brand-header {
    padding-top: clamp(18px, 4vh, 36px);
    padding-bottom: 2px;
    font-size: 22px;
  }

  .auth-context-line {
    font-size: 11.5px;
    margin: 6px auto 10px;
  }

  html[lang="ar"] .auth-context-line {
    font-size: 12px;
  }

  .auth-card {
    width: 100%;
    margin-top: 0;
    border-radius: 22px;
    padding: 26px 18px 20px;
    box-shadow:
      0 0 0 1px rgba(124, 58, 237, 0.10),
      0 2px 8px rgba(0, 0, 0, 0.06),
      0 10px 28px rgba(0, 0, 0, 0.12);
  }

  .auth-brand-header ~ .auth-card,
  .auth-brand-header + .auth-card {
    margin-top: 0;
  }

  .auth-logo {
    height: 26px;
    margin-bottom: 20px;
  }

  .auth-card h1 {
    font-size: 20px;
    margin-bottom: 4px;
  }

  .auth-card .muted {
    font-size: 14px;
    line-height: 1.5;
    margin-bottom: 16px;
  }

  .auth-tabs {
    gap: 4px;
    margin-bottom: 18px;
    padding: 4px;
  }

  .auth-tab {
    min-height: 38px;
    font-size: 15px;
  }

  .auth-helper {
    font-size: 13.5px;
  }

  /* Mobile header bar: keep it fixed (some mobile browsers can break sticky) */
  .app-header {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 30;
  }

  /* Offset content under the fixed header */
  .app-content {
    padding-top: 64px;
  }

  /* Modals on mobile: respect safe-areas (notch) so the close button is always visible */
  .modal {
    /* When the modal-card is taller than the viewport, flexbox centering can make the top unreachable.
       Always anchor to the top on mobile so users can scroll from the very top. */
    align-items: flex-start;
    -webkit-overflow-scrolling: touch;
    padding-top: max(12px, env(safe-area-inset-top));
    padding-right: max(12px, env(safe-area-inset-right));
    padding-bottom: max(12px, env(safe-area-inset-bottom));
    padding-left: max(12px, env(safe-area-inset-left));
  }

  .modal-close {
    /* Pin close button to the viewport so it's never hidden by scroll/centering */
    position: fixed;
    top: max(12px, env(safe-area-inset-top));
    right: max(12px, env(safe-area-inset-right));
    z-index: 90;
  }

  html[dir="rtl"] .modal-close,
  [dir="rtl"] .modal-close,
  .rtl .modal-close {
    left: max(12px, env(safe-area-inset-left));
    right: auto;
  }

  /* Pricing modal exception: keep close button inside the white modal card */
  #plan-modal.modal {
    align-items: center;
  }

  #plan-modal .modal-close {
    position: absolute;
    top: 16px;
    left: 16px;
    right: auto;
    z-index: 3;
  }

  html[dir="rtl"] #plan-modal .modal-close,
  [dir="rtl"] #plan-modal .modal-close,
  .rtl #plan-modal .modal-close {
    left: 16px;
    right: auto;
  }

  /* Job details modal has its own close positioning; ensure it also respects safe-areas */
  .job-details-modal .modal-close {
    top: max(12px, env(safe-area-inset-top));
    right: max(12px, env(safe-area-inset-right));
  }

  html[dir="rtl"] .job-details-modal .modal-close,
  [dir="rtl"] .job-details-modal .modal-close,
  .rtl .job-details-modal .modal-close {
    left: max(12px, env(safe-area-inset-left));
    right: auto;
  }

  /* Job details modal: remove nested height clamps on mobile; rely on outer modal scroll so top/bottom are always reachable */
  .job-details-modal .modal-card {
    /* Keep card fully inside viewport while still allowing internal scroll. */
    max-height: calc(100dvh - max(24px, env(safe-area-inset-top) + env(safe-area-inset-bottom)));
    overflow-y: auto;
    overflow-x: hidden;
    margin-top: 0;
  }

  .job-details-modal .job-details-modal-body {
    padding-top: 0;
    max-height: none;
    overflow: visible;
  }
  .job-details-modal {
    align-items: flex-start;
    padding-top: 0;
    padding-right: max(12px, env(safe-area-inset-right));
    padding-bottom: max(12px, env(safe-area-inset-bottom));
    padding-left: max(12px, env(safe-area-inset-left));
  }

  /* Mobile scroll safety: never lock global scrolling */
  html,
  body {
    overflow-y: auto !important;
    overflow-x: hidden !important;
    height: auto;
  }

  /* When overlays are open, never allow the page behind to scroll */
  body.modal-open,
  body.sidebar-open,
  body.create-takeover-open {
    overflow: hidden !important;
  }

  /* Posts page: 2 posts per row on mobile */
  .posts-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
  }

  /* Pricing page: trust icon pills should wrap and never overflow on mobile (esp RTL) */
  .pricing-trust-icons .trust-icons-row {
    flex-wrap: wrap;
    justify-content: center;
    gap: 10px;
    padding-inline: 12px;
  }

  .pricing-trust-icons .trust-icon-pill {
    min-width: 0;
    flex: 1 1 calc(50% - 10px);
    max-width: 100%;
    padding: 10px 10px;
    border-radius: 14px;
    background: rgba(255, 255, 255, 0.75);
    border: 1px solid var(--brand-border);
  }

  .pricing-trust-icons .trust-icon-text {
    white-space: normal;
    text-align: center;
    line-height: 1.25;
  }

  .leads-crm-shell .section-header .leads-actions {
    width: 100%;
    flex-wrap: nowrap;
    gap: 6px;
    overflow-x: auto;
  }

  .leads-crm-shell .section-header .leads-actions .button {
    flex: 0 0 auto;
    width: auto;
    padding: 0 10px;
    font-size: 12px;
  }

  /* Leads page: prevent header action buttons from overflowing on mobile */
  .leads-card-title {
    min-width: 0;
    white-space: normal;
  }

  .section-header .leads-actions:not(.leads-toolbar) {
    min-width: 0;
    width: 100%;
    flex-wrap: wrap;
    gap: 8px;
  }

  .section-header .leads-actions:not(.leads-toolbar) .button {
    min-width: 0;
    flex: 1 1 calc(50% - 8px);
    padding: 10px 10px;
    font-size: 13px;
    justify-content: center;
  }

  html[dir="rtl"] .section-header .leads-actions,
  [dir="rtl"] .section-header .leads-actions,
  .rtl .section-header .leads-actions {
    justify-content: flex-end;
  }

  /* Reduce container side margins for full-width feel on mobile */
  .container {
    padding: 0;
    margin: 20px 0 40px;
  }

  /* Titles outside cards: add natural side padding on mobile without affecting card layouts */
  .container > .section-header,
  .container > .section-title,
  .container > h1,
  .container > h2,
  .container > h3,
  .container > .stack > .section-header,
  .container > .stack > .section-title,
  .container > .stack > h1,
  .container > .stack > h2,
  .container > .stack > h3 {
    padding-inline: 12px;
  }

  /* Mobile RTL: ensure top-of-page headers stack (title above description) and align to the right */
  .container > .section-header,
  .container > .stack > .section-header {
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
    gap: 6px;
  }

  .container > .section-header > .muted,
  .container > .stack > .section-header > .muted {
    width: 100%;
  }

  html[dir="rtl"] .container > .section-header,
  [dir="rtl"] .container > .section-header,
  .rtl .container > .section-header,
  html[dir="rtl"] .container > .stack > .section-header,
  [dir="rtl"] .container > .stack > .section-header,
  .rtl .container > .stack > .section-header {
    align-items: flex-end;
    text-align: right;
    direction: rtl;
  }

  html[dir="rtl"] .container > .section-header > .muted,
  [dir="rtl"] .container > .section-header > .muted,
  .rtl .container > .section-header > .muted,
  html[dir="rtl"] .container > .stack > .section-header > .muted,
  [dir="rtl"] .container > .stack > .section-header > .muted,
  .rtl .container > .stack > .section-header > .muted {
    text-align: right;
  }

  /* Mobile RTL: explicitly right-align the title line inside top-of-page headers */
  html[dir="rtl"] .container > .section-header > .section-title,
  [dir="rtl"] .container > .section-header > .section-title,
  .rtl .container > .section-header > .section-title,
  html[dir="rtl"] .container > .stack > .section-header > .section-title,
  [dir="rtl"] .container > .stack > .section-header > .section-title,
  .rtl .container > .stack > .section-header > .section-title {
    width: 100%;
    text-align: right !important;
    direction: rtl;
  }

  /* Mobile RTL: standalone titles outside cards should align to the right too */
  html[dir="rtl"] .container > .section-title,
  [dir="rtl"] .container > .section-title,
  .rtl .container > .section-title,
  html[dir="rtl"] .container > h1,
  [dir="rtl"] .container > h1,
  .rtl .container > h1,
  html[dir="rtl"] .container > h2,
  [dir="rtl"] .container > h2,
  .rtl .container > h2,
  html[dir="rtl"] .container > h3,
  [dir="rtl"] .container > h3,
  .rtl .container > h3,
  html[dir="rtl"] .container > .stack > .section-title,
  [dir="rtl"] .container > .stack > .section-title,
  .rtl .container > .stack > .section-title,
  html[dir="rtl"] .container > .stack > h1,
  [dir="rtl"] .container > .stack > h1,
  .rtl .container > .stack > h1,
  html[dir="rtl"] .container > .stack > h2,
  [dir="rtl"] .container > .stack > h2,
  .rtl .container > .stack > h2,
  html[dir="rtl"] .container > .stack > h3,
  [dir="rtl"] .container > .stack > h3,
  .rtl .container > .stack > h3 {
    text-align: right;
  }
  
  /* Job items - reduce internal padding slightly but keep readable */
  .job-item {
    padding: 12px;
  }
  
  /* Card containers - reduce padding on mobile */
  .card {
    padding: 16px;
  }
  
  /* Modal cards - ensure they use full available width */
  .modal {
    padding: 12px;
  }
  
  .modal-card {
    max-width: 100%;
    margin: 0;
  }
  
  /* Brief cards and form sections */
  .brief-section {
    padding: 16px;
  }

  /* Create panel wizard: mobile */
  .create-inner {
    padding: 24px 16px 0;
  }
  .wizard-steps {
    margin-bottom: 24px;
  }
  .wizard-step {
    padding: 6px 8px;
    font-size: 12px;
    gap: 4px;
  }
  .wizard-step-num {
    width: 20px;
    height: 20px;
    font-size: 10px;
    padding-top: 1.2px;
  }
  .wizard-step-type-name {
    display: none;
  }
  .wizard-step-line {
    width: 16px;
  }
  .step-panel-header {
    margin-bottom: 20px;
  }
  .step-panel-title {
    font-size: 16px;
  }
  .step-panel-header--with-action {
    flex-direction: row;
    align-items: flex-start;
    justify-content: space-between;
    gap: 10px;
  }
  .step-panel-header--with-action > :first-child {
    min-width: 0;
  }
  .job-type-section {
    margin-bottom: 14px;
  }
  .job-type-grid {
    grid-template-columns: 1fr 1fr;
    gap: 8px;
  }
  .job-type-grid.grid-compact {
    grid-template-columns: 1fr 1fr;
    max-width: 100%;
  }
  .job-type-card {
    min-height: 96px;
    padding: 14px 12px;
    gap: 10px;
    align-items: center;
  }
  .jtc-icon {
    width: 30px;
    height: 30px;
  }
  .jtc-desc {
    display: none;
  }
  #create-panel .job-type-section .job-type-card {
    align-items: flex-start;
    min-height: 0;
  }
  #create-panel .job-type-section .jtc-desc {
    display: block;
    font-size: 12px;
    line-height: 1.4;
    margin-top: 4px;
  }
  label.job-type-card.video-wizard-choice-card {
    align-items: flex-start;
    min-height: 0;
  }
  #create-panel #video-wizard-goal-step .jtc-desc,
  #create-panel #video-wizard-create-mode-step .jtc-desc,
  #create-panel label.job-type-card.video-wizard-choice-card .jtc-desc {
    display: block !important;
    font-size: 12.5px;
    line-height: 1.4;
    margin-top: 4px;
  }
  #create-form {
    min-height: 0;
  }
  .wizard-nav {
    padding-top: 16px;
    padding-bottom: 24px;
  }

  /* Language selector pills: keep in ONE row on mobile */
  .language-options {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
  }

  .language-option {
    width: 100%;
    justify-content: center;
    gap: 6px;
    padding: 8px 8px;
    font-size: 13px;
    white-space: nowrap;
  }

  .language-option span {
    overflow: hidden;
    text-overflow: ellipsis;
  }

  /* Jobs / Automations: segmented switch (this or that), not search-style pills */
  body.app-page .jobs-source-tabs.language-options {
    display: grid;
    grid-template-columns: 1fr 1fr;
    width: 100%;
    max-width: none;
    flex: none;
    gap: 3px;
    padding: 3px;
    border: 1px solid var(--brand-border);
    border-radius: 12px;
    background: #f3f4f6;
  }

  body.app-page .jobs-source-tabs .language-option {
    width: 100%;
    min-height: 36px;
    margin: 0;
    padding: 6px 8px;
    justify-content: center;
    gap: 5px;
    border: 0;
    border-radius: 9px;
    background: transparent;
    box-shadow: none;
    color: var(--brand-muted);
    font-weight: 500;
  }

  body.app-page .jobs-source-tabs .language-option:has(input:checked) {
    border: 0;
    border-color: transparent;
    background: #fff;
    color: var(--brand-ink);
    font-weight: 700;
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.08);
  }

  /* Profile theme mode options: allow full labels (no truncation) */
  #profile-theme-mode-options {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  /* Brand Knowledge modes + Manage stay as wrapping pills (not 3-col grid) */
  #brand-assets-prefs-panel .brand-assets-mode-options {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
  }
  #brand-assets-prefs-panel .brand-assets-mode-options .language-option,
  #brand-assets-prefs-panel .brand-assets-mode-options .brand-assets-manage-pill {
    width: auto;
  }

  #profile-theme-mode-options .language-option {
    white-space: normal;
    text-align: center;
    min-height: 44px;
  }

  #profile-theme-mode-options .language-option span {
    white-space: normal;
    overflow: visible;
    text-overflow: clip;
    line-height: 1.25;
  }

  /* Jobs toolbar (search + 2 filters): 1 row on mobile, each gets 1/3 width (no overflow) */
  .jobs-toolbar {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
    align-items: center;
  }

  .jobs-toolbar .input,
  .jobs-toolbar .select {
    width: 100%;
    min-width: 0;
    font-size: 13px;
    padding: 10px 10px;
  }

  .jobs-toolbar .select {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  /* Prevent the first mobile job card from clipping at the top edge */
  .job-list {
    padding-top: 4px;
    overflow: visible;
  }

  .job-list .job-item:first-child {
    margin-top: 1px;
  }

  /* Jobs page: hide inline details panel on mobile (use modal only) */
  .job-details-col {
    display: none;
  }

  /* Job details (open job): keep same 2-col grid behavior on mobile */
  .job-details-modal .action-row,
  .job-details-modal .publish-actions {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
    align-items: stretch;
  }

  .job-details-modal .action-row .button,
  .job-details-modal .publish-actions .button {
    width: 100%;
    min-width: 0;
    justify-content: center;
  }

  /* Idea Swipe actions: keep 2-per-row on mobile (not single vertical stack). */
  .job-details-modal .swipe-completed-panel .action-row {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
    align-items: stretch;
  }

  .job-details-modal .swipe-completed-panel .action-row > * {
    min-width: 0;
    width: 100%;
  }

  .job-details-modal .swipe-completed-panel .action-row .button {
    width: 100%;
  }

  /* If only one item remains on the last row, center it. */
  .job-details-modal .swipe-completed-panel .action-row > *:last-child:nth-child(odd) {
    grid-column: 1 / -1;
    width: min(100%, 260px);
    justify-self: center;
  }

  /* Job details modal: make the stage title (e.g., "Creating design") 50% smaller on mobile */
  .job-details-modal .job-stage {
    font-size: 65%;
    line-height: 1.2;
  }

  /* Announcement personality grid: 3 per row on mobile */
  .brief-style-grid {
    grid-template-columns: repeat(3, 1fr);
  }
  
  /* Brand summary (collapsed) RTL: reserve space for BOTH left-side buttons so name doesn't wrap under them */
  #brand-summary-card.brand-collapsed .brand-summary-compact {
    min-width: 0;
  }

  #brand-summary-card.brand-collapsed .brand-summary-compact-name {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  html[dir="rtl"] #brand-summary-card.brand-collapsed .brand-summary-compact,
  [dir="rtl"] #brand-summary-card.brand-collapsed .brand-summary-compact,
  .rtl #brand-summary-card.brand-collapsed .brand-summary-compact {
    padding-left: 112px;
    padding-right: 12px;
  }

  /* Image previews should use full width */
  .image-preview {
    border-radius: 12px;
  }
  
  .design-preview-box {
    width: 100%;
  }
  
  /* Brand Library - Images/Videos: 3 per row on mobile */
  .library-items {
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
  }
  
  .library-item {
    max-width: 100%;
    padding: 8px;
  }
  
  /* Brand Library - Ad Copies: 2 per row on mobile (override) */
  #generated-copies.library-items,
  #generated-copies {
    grid-template-columns: repeat(2, 1fr) !important;
  }
  
  .library-item.copy-item {
    grid-column: span 1;
  }
  
  .library-copy {
    font-size: 13px;
  }

  /* Nav profile avatar: reduce size on mobile (does not affect desktop) */
  #user-chip .user-avatar {
    width: 16px;
    height: 16px;
  }

  /* Nav user pill (profile + name): compact, but always fits mobile header */
  #user-chip.user-chip {
    padding: 6px 10px;
    gap: 5px;
    min-width: 0;
    max-width: min(56vw, 220px);
  }

  #user-chip .user-chip-text {
    gap: 1px;
    min-width: 0;
  }

  #user-chip .user-chip-row {
    min-width: 0;
    gap: 4px;
  }

  #user-chip .user-name {
    font-size: 12px;
    line-height: 1.1;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  #user-chip .user-chip-caret {
    width: 8px;
    margin-inline-start: 2px;
  }

  #user-chip .user-chip-caret::before {
    font-size: 9px;
  }

  /* Credits modal: make it taller on mobile so bottom tooltips don't appear below the fold */
  #credits-modal .modal-card {
    max-height: calc(100vh - 24px);
    padding: 20px 16px;
    overflow-y: auto;
    overflow-x: visible;
  }

  /* Credits modal: keep it compact (inline info appears above the grid) */
  #credits-modal-body.credits-modal-body,
  #credits-modal .credits-modal-body {
    min-height: 0;
    padding-bottom: 0;
  }

  /* Profile credits: always show 4 cards per row on mobile */
  .plan-credits-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 8px;
  }

  /* Profile plan limits: show 3 cards per row on mobile */
  .plan-limits-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
  }

}

/* Profile impact — number-first metric tiles */
.profile-impact-card .section-title {
  margin-bottom: 4px;
}
#profile-stats.stats-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  margin: 14px 0 0;
}
#profile-stats .stat-card {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 6px;
  min-height: 112px;
  padding: 14px;
  background: #fff;
  border: 1px solid var(--brand-border, #e6e8f0);
  border-radius: 14px;
  box-shadow: none;
}
#profile-stats .stat-icon {
  width: 28px;
  height: 28px;
  border-radius: 8px;
  background: color-mix(in srgb, var(--brand-primary, #7c3aed) 10%, #ffffff);
  color: var(--brand-primary, #7c3aed);
  margin-bottom: 2px;
}
#profile-stats .stat-icon svg {
  width: 15px;
  height: 15px;
}
#profile-stats .stat-value {
  font-size: 26px;
  font-weight: 700;
  line-height: 1.1;
  color: var(--brand-ink, #1a202c);
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
}
#profile-stats .stat-label {
  font-size: 12px;
  font-weight: 500;
  line-height: 1.35;
  color: var(--brand-muted, #6b7280);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  margin-top: auto;
}
.profile-impact-note {
  margin: 12px 0 0;
  font-size: 12px;
  line-height: 1.45;
}

@media (max-width: 768px) {
  #profile-stats.stats-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
  }
  #profile-stats .stat-card {
    min-height: 108px;
    padding: 12px;
  }
  #profile-stats .stat-value {
    font-size: 22px;
  }
  #profile-stats .stat-label {
    font-size: 11px;
  }
}

/* ================================================================
   Voice Input — Hold-to-speak microphone button on text fields
   ================================================================ */
.voice-input-wrap {
  position: relative;
  width: 100%;
}

.voice-input-wrap textarea,
.voice-input-wrap input[type="text"] {
  padding-inline-end: 44px !important;
}

.voice-mic-btn {
  position: absolute;
  inset-inline-end: 8px;
  top: 8px;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  border: 1.5px solid var(--brand-border);
  background: var(--brand-surface, #f8f9fa);
  color: var(--brand-muted, #888);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s ease;
  padding: 0;
  z-index: 2;
  -webkit-user-select: none;
  user-select: none;
  touch-action: none;
  flex-shrink: 0;
}

.voice-mic-btn svg {
  width: 15px;
  height: 15px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
  pointer-events: none;
}

.voice-mic-btn:hover {
  border-color: var(--brand-primary, #7c3aed);
  color: var(--brand-primary, #7c3aed);
  background: rgba(124, 58, 237, 0.06);
}

.voice-mic-btn:active,
.voice-mic-btn.recording {
  border-color: #ef4444;
  background: #ef4444;
  color: #fff;
  box-shadow: 0 0 0 4px rgba(239, 68, 68, 0.2);
  animation: voice-pulse 1s ease-in-out infinite;
}

.voice-mic-btn.transcribing {
  border-color: var(--brand-primary, #7c3aed);
  background: var(--brand-primary, #7c3aed);
  color: #fff;
  animation: voice-spin 0.8s linear infinite;
  pointer-events: none;
}

.voice-mic-btn.transcribing svg {
  display: none;
}

.voice-mic-btn.transcribing::after {
  content: '';
  width: 14px;
  height: 14px;
  border: 2px solid rgba(255,255,255,0.3);
  border-top-color: #fff;
  border-radius: 50%;
  animation: voice-spin 0.6s linear infinite;
}

@keyframes voice-pulse {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.12); }
}

@keyframes voice-spin {
  to { transform: rotate(360deg); }
}

/* Tooltip on first hover */
.voice-mic-btn[data-tooltip]::before {
  content: attr(data-tooltip);
  position: absolute;
  bottom: calc(100% + 6px);
  right: 0;
  background: var(--brand-text, #1a1a2e);
  color: #fff;
  font-size: 11px;
  padding: 4px 8px;
  border-radius: 6px;
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.15s;
  z-index: 10;
}

.voice-mic-btn[data-tooltip]:hover::before,
.voice-mic-btn[data-tooltip]:focus::before {
  opacity: 1;
}

/* Prompt boxes: a labelled "Speak" pill in the bottom corner instead of a bare icon. */
.voice-input-wrap.is-area {
  margin-bottom: 10px; /* the space the old inline gap gave the hint text under the box */
}
.voice-input-wrap.is-area textarea {
  display: block; /* inline-block left a gap under the box, so the pill hung past its bottom edge */
  padding-inline-end: 14px !important;
  padding-bottom: 48px !important;
}
.voice-mic-btn.has-label {
  top: auto;
  bottom: 9px;
  inset-inline-end: auto;
  inset-inline-start: 9px;
  width: auto;
  height: 32px;
  gap: 6px;
  padding: 0 13px 0 11px;
  border: 1px solid #ddd3fb;
  border-radius: 999px;
  background: #fff;
  color: #6d28d9;
  font: inherit;
  font-size: 13px;
  font-weight: 500;
  line-height: 1;
  box-shadow: 0 1px 2px rgba(31, 27, 46, 0.06);
  transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease, box-shadow 0.15s ease;
}
.voice-mic-btn.has-label svg {
  width: 16px;
  height: 16px;
}
.voice-mic-btn.has-label:hover {
  background: #f5f0ff;
  border-color: #c4b5fd;
  color: #5b21b6;
}
.voice-mic-btn.has-label:focus-visible {
  outline: 2px solid var(--brand-primary, #7c3aed);
  outline-offset: 2px;
}
.voice-mic-btn.has-label:active {
  animation: none;
  box-shadow: none;
}
.voice-mic-btn.has-label.recording {
  background: #fef2f2;
  border-color: #fecaca;
  color: #b42318;
  box-shadow: none;
  animation: none;
  font-variant-numeric: tabular-nums;
}
.voice-mic-btn.has-label.recording svg {
  animation: voice-breathe 1.2s ease-in-out infinite;
}
.voice-mic-btn.has-label.transcribing {
  background: #f5f0ff;
  border-color: #ddd3fb;
  color: #5b21b6;
  animation: none;
}
.voice-mic-btn.has-label.transcribing svg {
  display: none;
}
.voice-mic-btn.has-label.transcribing::after {
  order: -1;
  width: 13px;
  height: 13px;
  border-color: rgba(91, 33, 182, 0.25);
  border-top-color: #5b21b6;
}
.voice-mic-label {
  white-space: nowrap;
  pointer-events: none;
}
@keyframes voice-breathe {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.5; transform: scale(0.86); }
}
@media (prefers-reduced-motion: reduce) {
  .voice-mic-btn.has-label.recording svg { animation: none; }
}
@media (max-width: 640px) {
  .voice-mic-btn.has-label { height: 36px; }
  .voice-input-wrap.is-area textarea { padding-bottom: 52px !important; }
}
.ugc-seg-dialogue-shell .voice-mic-btn.has-label {
  top: auto;
  bottom: 9px;
  inset-inline-end: auto;
  inset-inline-start: 9px;
  border-color: #ddd3fb;
  background: #fff;
}

/* Permission overlay when recording starts */
.voice-permission-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 99999;
  animation: fadeIn 0.2s ease;
}

.voice-permission-card {
  background: var(--brand-card, #fff);
  border-radius: 16px;
  padding: 32px;
  text-align: center;
  max-width: 340px;
  box-shadow: 0 20px 60px rgba(0,0,0,0.3);
}

.voice-permission-card svg {
  width: 48px;
  height: 48px;
  stroke: var(--brand-primary, #7c3aed);
  fill: none;
  stroke-width: 1.5;
  margin-bottom: 16px;
}

.voice-permission-card h3 {
  margin: 0 0 8px;
  font-size: 18px;
}

.voice-permission-card p {
  margin: 0;
  font-size: 14px;
  color: var(--brand-muted, #888);
}

/* Ensure voice-input-wrap inherits field width properly */
.field .voice-input-wrap,
.multi-field .voice-input-wrap,
.video-ref-slot .voice-input-wrap,
.music-custom-prompt-wrapper .voice-input-wrap,
.carousel-slide-item .voice-input-wrap,
.carousel-cta-field .voice-input-wrap {
  width: 100%;
}

/* Small adjustments for input (not textarea) mic buttons */
.voice-input-wrap > input[type="text"] + .voice-mic-btn {
  top: 50%;
  transform: translateY(-50%);
}
.voice-input-wrap > input[type="text"] + .voice-mic-btn.recording {
  transform: translateY(-50%) scale(1);
  animation: voice-pulse-input 1s ease-in-out infinite;
}
@keyframes voice-pulse-input {
  0%, 100% { transform: translateY(-50%) scale(1); }
  50% { transform: translateY(-50%) scale(1.12); }
}

/* New Job wizard typography bumped */
#create-panel .wizard-step {
  font-size: 16.5px;
}

#create-panel .wizard-step-num {
  font-size: 14px;
  width: 24px;
  height: 24px;
}

#create-panel .wizard-step-type-name {
  font-size: 14px;
}

#create-panel .step-panel-title {
  font-size: 21.85px;
  font-weight: 700;
  color: var(--brand-ink);
  letter-spacing: -0.015em;
}

#create-panel .step-panel-title .step-panel-title-label {
  font-weight: inherit;
  font-size: inherit;
  color: inherit;
  letter-spacing: inherit;
}

@media (max-width: 960px) {
  #create-panel .step-panel-title .step-panel-title-label,
  #create-panel .step-panel-title .step-panel-title-sep {
    display: none;
  }
  #create-panel .step-panel-title .step-panel-subtitle {
    display: block;
    font-size: 21.85px;
    font-weight: 700;
    color: var(--brand-ink);
    margin: 0;
    line-height: 1.2;
    letter-spacing: -0.015em;
  }
}

#create-panel .step-panel-subtitle {
  font-size: 15.2px;
}

#create-panel .job-type-section-label {
  font-size: 13.3px;
}

#create-panel .jtc-title {
  font-size: 15.675px;
}

#create-panel .jtc-desc {
  font-size: 13.87px;
}

#create-panel .jtc-popular-tag {
  font-size: 11.5px;
  padding: 3.5px 11px 3.5px 8px;
}

#create-panel .field label {
  font-size: 15.4px;
}

#create-panel .field input,
#create-panel .field textarea,
#create-panel .field select {
  font-size: 15.4px;
}

#create-panel #language-field .language-option,
#create-panel .image-size-option,
#create-panel #from-image-mode-field .language-option {
  font-size: 14px;
}

#create-panel .button {
  font-size: 15.4px;
}

#create-panel .hint,
#create-panel .muted {
  font-size: 12.1px;
}

.nav-item-button {
  width: 100%;
  border: 0;
  background: transparent;
  cursor: pointer;
  text-align: start;
  font: inherit;
  color: inherit;
}

#quick-edit-modal {
  z-index: 140;
}

#quick-edit-confirm-modal {
  z-index: 100120;
}

.quick-edit-card {
  width: min(1080px, calc(100vw - 24px));
  max-height: calc(100vh - 20px);
  padding: 0;
  border-radius: 14px;
  display: grid;
  grid-template-rows: auto auto minmax(0, 1fr) auto auto;
  overflow: hidden;
}

.quick-edit-card .modal-close {
  position: absolute;
  top: 10px;
  right: 12px;
  width: 34px;
  height: 34px;
  border-radius: 999px;
  border: 1px solid var(--brand-line, #e5e7eb);
  background: rgba(255,255,255,.9);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  z-index: 3;
}

.zone-header {
  padding: 14px 16px 10px;
  border-bottom: 1px solid var(--brand-line, #e5e7eb);
}

.quick-edit-header-top {
  display: flex;
  gap: 14px;
  align-items: flex-start;
  justify-content: space-between;
}

.quick-edit-heading .modal-title {
  margin-bottom: 4px;
}

.quick-edit-heading .modal-subtitle {
  font-size: 12px;
  color: var(--brand-muted, #6b7280);
}

#quick-edit-confirm-modal .quick-edit-confirm-body {
  margin: 0 0 1rem;
  font-size: 0.95rem;
  line-height: 1.5;
  color: var(--brand-muted, #64748b);
}

#quick-edit-confirm-modal .modal-title {
  padding-inline-end: 44px;
}

/* RTL: close is on the physical left (inline-end); keep title flush to the physical right */
html[dir="rtl"] #quick-edit-confirm-modal .modal-title,
[dir="rtl"] #quick-edit-confirm-modal .modal-title {
  padding-inline-start: 0;
  padding-inline-end: 44px;
}

html[dir="rtl"] #quick-edit-confirm-modal .modal-close,
[dir="rtl"] #quick-edit-confirm-modal .modal-close,
.rtl #quick-edit-confirm-modal .modal-close {
  left: 16px;
  right: auto;
}

/* DOM: proceed, then AI. Cluster on the right: LTR row-reverse + flex-end; RTL row + flex-start */
#quick-edit-confirm-modal .quick-edit-confirm-actions {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 0.5rem;
  flex-wrap: wrap;
  width: 100%;
  flex-direction: row-reverse;
}

html[dir="rtl"] #quick-edit-confirm-modal .quick-edit-confirm-actions,
[dir="rtl"] #quick-edit-confirm-modal .quick-edit-confirm-actions,
.rtl #quick-edit-confirm-modal .quick-edit-confirm-actions {
  flex-direction: row;
  justify-content: flex-start;
}

.quick-edit-mode-toggle {
  display: inline-grid;
  grid-template-columns: 1fr 1fr;
  gap: 3px;
  padding: 3px;
  background: #f8fafc;
  border: 1px solid var(--brand-line, #e5e7eb);
  border-radius: 11px;
}

.quick-edit-mode-btn {
  border: 0;
  background: transparent;
  color: var(--brand-muted, #6b7280);
  font: inherit;
  font-size: 12px;
  font-weight: 500;
  padding: 7px 11px;
  border-radius: 9px;
  cursor: pointer;
  transition: background-color .15s ease, color .15s ease, box-shadow .15s ease;
}

.quick-edit-mode-btn.active {
  background: #fff;
  color: #111827;
  box-shadow: 0 1px 2px rgba(0,0,0,.06);
}

.quick-edit-latency-note {
  margin-top: 4px;
  font-size: 11px;
  padding: 2px 0;
}

.zone-toolbar {
  padding: 10px 14px;
  border-bottom: 1px solid var(--brand-line, #e5e7eb);
  background: #fcfcfd;
  display: flex;
  flex-wrap: wrap;
  gap: 8px 10px;
  align-items: center;
}

.quick-edit-group {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
  padding-inline-end: 10px;
  margin-inline-end: 2px;
  border-inline-end: 1px solid #eceef1;
}

.quick-edit-group:last-child {
  border-inline-end: 0;
  padding-inline-end: 0;
}

.quick-edit-toolbar .button.small,
.quick-edit-toolbar .select.small {
  height: 32px;
  padding: 6px 10px;
  border-radius: 10px;
  font-size: 12px;
  transition: background-color .15s ease, color .15s ease, border-color .15s ease;
}

.quick-edit-toolbar .button.active,
.quick-edit-tool.active {
  background: rgba(124, 58, 237, .10);
  color: #5b21b6;
  border-color: rgba(124, 58, 237, .20);
}

.quick-edit-tool.is-hidden,
.tool-instant.is-hidden,
.tool-ai.is-hidden {
  display: none !important;
}

.quick-edit-size-wrap,
.quick-edit-preset-wrap,
.quick-edit-color-wrap {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  color: var(--brand-muted, #6b7280);
}

.quick-edit-text-options {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding-inline-start: 8px;
  margin-inline-start: 2px;
  border-inline-start: 1px solid #eceef1;
}

.quick-edit-text-options.is-hidden {
  display: none !important;
}

#quick-edit-size,
#quick-edit-softness {
  width: 110px;
}

#quick-edit-text-size {
  width: 100px;
}

#quick-edit-size-value,
#quick-edit-softness-value {
  min-width: 26px;
  text-align: center;
}

#quick-edit-text-size-value {
  min-width: 24px;
  text-align: center;
}

#quick-edit-preset {
  min-width: 154px;
}

#quick-edit-color {
  width: 32px;
  height: 28px;
  border: 1px solid var(--brand-line, #e5e7eb);
  border-radius: 8px;
  padding: 0;
  background: transparent;
}

.quick-edit-zoom-group {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.zone-canvas {
  padding: 12px 14px 10px;
  min-height: 0;
}

.quick-edit-canvas-wrap {
  position: relative;
  background: #30343b;
  border-radius: 12px;
  border: 1px solid #dfe3e8;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.04);
  overflow: hidden;
  min-height: 0;
  height: clamp(260px, 50vh, 620px);
}

#quick-edit-canvas {
  width: 100%;
  height: 100%;
  display: block;
  touch-action: none;
}

.quick-edit-status {
  min-height: 20px;
  padding: 0 16px 8px;
}

.zone-footer {
  padding: 10px 14px 12px;
  border-top: 1px solid var(--brand-line, #e5e7eb);
  margin-top: 0;
  display: flex;
  justify-content: space-between;
  position: sticky;
  bottom: 0;
  background: #fff;
  z-index: 2;
}

html[dir="rtl"] #quick-edit-modal .modal-close {
  right: auto;
  left: 12px;
}

html[dir="rtl"] .quick-edit-heading {
  text-align: right;
}

html[dir="rtl"] .quick-edit-mode-toggle {
  margin-left: 40px;
}

@media (max-width: 900px) {
  .quick-edit-group {
    border-inline-end: 0;
    padding-inline-end: 0;
  }
}

@media (max-width: 640px) {
  .quick-edit-card {
    width: calc(100vw - 8px);
    max-height: calc(100vh - 8px);
  }

  .zone-toolbar,
  .zone-header,
  .zone-canvas,
  .zone-footer {
    padding-inline: 10px;
  }

  .quick-edit-canvas-wrap {
    min-height: 220px;
    height: 42vh;
  }
}

/* Quick Edit visual refinement pass (no layout/logic changes) */
.quick-edit-card {
  border: 1px solid #e8ebf0;
}

.quick-edit-card .modal-close {
  width: 30px;
  height: 30px;
  border: 0;
  background: transparent;
  color: #6b7280;
  box-shadow: none;
  transition: background-color .15s ease, color .15s ease;
}

.quick-edit-card .modal-close:hover {
  background: #f3f4f6;
  color: #111827;
}

.quick-edit-heading .modal-title {
  font-size: 19px;
  font-weight: 500;
  line-height: 1.2;
  margin-bottom: 7px;
}

.quick-edit-heading .modal-subtitle {
  font-size: 12px;
  color: #8b93a1;
  line-height: 1.45;
}

.quick-edit-mode-toggle {
  min-width: 220px;
}

.quick-edit-mode-btn {
  background: #f3f4f6;
  font-weight: 500;
  transition: background-color .15s ease, color .15s ease, box-shadow .15s ease;
}

.quick-edit-mode-btn.active {
  background: rgba(124, 58, 237, .14);
  color: #4c1d95;
  box-shadow: none;
}

.zone-toolbar {
  padding: 8px 14px;
  gap: 8px 9px;
}

.quick-edit-group {
  border-inline-end: 0;
  margin-inline-end: 4px;
  padding-inline-end: 8px;
  gap: 5px;
}

.quick-edit-group + .quick-edit-group {
  margin-inline-start: 8px;
}

.quick-edit-toolbar .button.small,
.quick-edit-toolbar .select.small,
.quick-edit-toolbar .input.small {
  background: #f5f6f8;
  border-color: #e7e9ee;
  color: #4b5563;
  font-weight: 500;
  height: 30px;
}

.quick-edit-toolbar .input.small {
  min-width: 140px;
  padding: 6px 10px;
  border-radius: 10px;
  font-size: 12px;
}

.quick-edit-tool.active,
.quick-edit-toolbar .button.active {
  background: rgba(124, 58, 237, .12);
  border-color: rgba(124, 58, 237, .16);
  color: #5b21b6;
}

#quick-edit-size,
#quick-edit-softness,
#quick-edit-text-size {
  accent-color: #7c6bd9;
}

#quick-edit-size::-webkit-slider-runnable-track,
#quick-edit-softness::-webkit-slider-runnable-track,
#quick-edit-text-size::-webkit-slider-runnable-track {
  height: 4px;
  border-radius: 999px;
}

#quick-edit-size::-webkit-slider-thumb,
#quick-edit-softness::-webkit-slider-thumb,
#quick-edit-text-size::-webkit-slider-thumb {
  margin-top: -4px;
  width: 12px;
  height: 12px;
  border-radius: 50%;
}

#quick-edit-size-value,
#quick-edit-softness-value,
#quick-edit-text-size-value {
  font-size: 11px;
  color: #8b93a1;
}

#quick-edit-before-after {
  background: transparent;
  border-style: dashed;
  border-color: #d8dce3;
}

#quick-edit-before-after.active {
  background: rgba(124, 58, 237, .12);
  border-style: solid;
  border-color: rgba(124, 58, 237, .2);
  color: #5b21b6;
}

.zone-canvas {
  padding: 12px 14px 10px;
}

.quick-edit-canvas-wrap {
  background: #2f343c;
  padding: 8px;
  border-radius: 10px;
  border-color: #d9dee6;
}

#quick-edit-canvas {
  border-radius: 8px;
  box-shadow: 0 1px 6px rgba(17, 24, 39, .12);
}

.zone-footer .button {
  min-height: 34px;
}

#quick-edit-apply {
  min-width: 132px;
  box-shadow: 0 1px 2px rgba(124, 58, 237, .18);
  transition: background-color .15s ease, color .15s ease, box-shadow .15s ease;
}

html[dir="rtl"] #quick-edit-apply {
  margin-left: 10px;
}

#quick-edit-apply:disabled {
  position: relative;
}

#quick-edit-apply:disabled::before {
  content: '';
  display: inline-block;
  width: 12px;
  height: 12px;
  margin-inline-end: 6px;
  border-radius: 50%;
  border: 2px solid rgba(255,255,255,.45);
  border-top-color: rgba(255,255,255,.95);
  vertical-align: -2px;
  animation: quick-edit-spin .8s linear infinite;
}

@keyframes quick-edit-spin {
  to { transform: rotate(360deg); }
}

/* =========================================================
   Idea Swipe — popular card, amount picker, modals
   ========================================================= */
.job-type-card--popular {
  position: relative;
}
.job-type-card--popular:hover {
  box-shadow: 0 4px 16px rgba(0,0,0,0.06);
}

.jtc-popular-tag {
  position: absolute;
  top: -9px;
  right: -6px;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 10px 3px 7px;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.3px;
  color: #fff;
  background: linear-gradient(135deg, #ec4899, #a855f7);
  border-radius: 20px;
  box-shadow: 0 2px 8px rgba(168, 85, 247, 0.35);
  white-space: nowrap;
  pointer-events: none;
  z-index: 2;
  line-height: 1;
  transform: rotate(4deg);
}
html[dir="rtl"] .jtc-popular-tag {
  right: auto;
  left: -6px;
  transform: rotate(-4deg);
}
.jtc-popular-tag svg {
  flex-shrink: 0;
}

#create-panel .job-type-card[data-type="video"] .jtc-popular-tag,
#create-panel .job-type-card[data-type="video_scenes"] .jtc-popular-tag {
  color: #ffffff;
  background: var(--brand-primary, #7c3aed);
  border: 1px solid rgba(196, 181, 253, 0.45);
  box-shadow: 0 2px 8px rgba(124, 58, 237, 0.28);
}

#create-panel .job-type-card[data-type="video"] .jtc-new-badge,
#create-panel .job-type-card[data-type="video_scenes"] .jtc-new-badge {
  animation: jtc-new-badge-pulse 2.4s ease-in-out infinite;
  will-change: transform, box-shadow;
}

#create-panel .job-type-card[data-type="video"] .jtc-new-badge svg,
#create-panel .job-type-card[data-type="video_scenes"] .jtc-new-badge svg {
  animation: jtc-new-badge-spark 2.4s ease-in-out infinite;
  transform-origin: center;
}

#create-panel .job-type-card[data-type="video"]:hover .jtc-popular-tag,
#create-panel .job-type-card[data-type="video"].selected .jtc-popular-tag,
#create-panel .job-type-card[data-type="video_scenes"]:hover .jtc-popular-tag,
#create-panel .job-type-card[data-type="video_scenes"].selected .jtc-popular-tag {
  background: #6d28d9;
  box-shadow: 0 3px 10px rgba(109, 40, 217, 0.34);
}

/* Calm pulse: visible glow + tiny scale, no bounce/spin thrash. */
@keyframes jtc-new-badge-pulse {
  0%, 100% {
    transform: rotate(4deg) scale(1);
    box-shadow: 0 2px 8px rgba(124, 58, 237, 0.28), 0 0 0 0 rgba(167, 139, 250, 0);
  }
  50% {
    transform: rotate(4deg) scale(1.05);
    box-shadow: 0 4px 12px rgba(124, 58, 237, 0.4), 0 0 0 3px rgba(167, 139, 250, 0.16);
  }
}

@keyframes jtc-new-badge-spark {
  0%, 100% {
    transform: scale(1);
    opacity: 0.85;
  }
  50% {
    transform: scale(1.18);
    opacity: 1;
  }
}

html[dir="rtl"] #create-panel .job-type-card[data-type="video"] .jtc-new-badge,
html[dir="rtl"] #create-panel .job-type-card[data-type="video_scenes"] .jtc-new-badge {
  animation-name: jtc-new-badge-pulse-rtl;
}

@keyframes jtc-new-badge-pulse-rtl {
  0%, 100% {
    transform: rotate(-4deg) scale(1);
    box-shadow: 0 2px 8px rgba(124, 58, 237, 0.28), 0 0 0 0 rgba(167, 139, 250, 0);
  }
  50% {
    transform: rotate(-4deg) scale(1.05);
    box-shadow: 0 4px 12px rgba(124, 58, 237, 0.4), 0 0 0 3px rgba(167, 139, 250, 0.16);
  }
}

@media (prefers-reduced-motion: reduce) {
  #create-panel .job-type-card[data-type="video"] .jtc-new-badge,
  #create-panel .job-type-card[data-type="video"] .jtc-new-badge svg,
  #create-panel .job-type-card[data-type="video_scenes"] .jtc-new-badge,
  #create-panel .job-type-card[data-type="video_scenes"] .jtc-new-badge svg {
    animation: none !important;
  }
}

.video-from-video-source {
  display: grid;
  gap: 16px;
  font-family: 'Tajawal', system-ui, -apple-system, 'Segoe UI', sans-serif;
}

#create-panel #video-from-image-section .video-from-video-source .video-create-section-heading {
  display: grid;
  gap: 4px;
  margin-bottom: 2px;
}

#create-panel #video-from-image-section .video-from-video-source .video-create-section-heading h4 {
  margin: 0;
  font-size: var(--video-type-section, 15.5px);
  font-weight: 650;
  line-height: 1.4;
  color: var(--brand-ink, #1f2937);
}

#create-panel #video-from-image-section .video-from-video-source .video-create-section-heading p {
  margin: 0;
  font-size: var(--video-type-helper, 13.5px);
  line-height: 1.55;
  color: #526174;
}

.video-edit-source-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
}

.video-edit-source-divider {
  display: flex;
  align-items: center;
  gap: 12px;
  color: #64748b;
  font-size: 13px;
  font-weight: 500;
}

.video-edit-source-divider::before,
.video-edit-source-divider::after {
  content: '';
  flex: 1 1 auto;
  height: 1px;
  background: rgba(148, 163, 184, 0.32);
}

.video-edit-source-divider span {
  flex: 0 0 auto;
  padding: 0 2px;
}

#create-panel #video-from-image-section .video-edit-url-field {
  margin: 0;
  padding: 14px;
  border: 1px solid rgba(148, 163, 184, 0.22);
  border-radius: 14px;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.98) 0%, rgba(248, 250, 252, 0.96) 100%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.85);
  display: grid;
  gap: 10px;
}

#create-panel #video-from-image-section .video-edit-url-field > label {
  margin: 0;
  font-size: var(--video-type-label, 15.5px);
  font-weight: 650;
  line-height: 1.4;
  color: var(--brand-ink, #1f2937);
}

.video-edit-url-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: stretch;
  gap: 10px;
}

#create-panel #video-from-image-section .video-edit-url-row input[type="url"] {
  min-width: 0;
  width: 100%;
  min-height: 46px;
  height: 46px;
  box-sizing: border-box;
  margin: 0;
  padding: 0 14px;
  border: 1px solid var(--brand-border, #e5e7eb);
  border-radius: 12px;
  background: #fff;
  color: var(--brand-ink, #1f2937);
  font-family: inherit;
  font-size: var(--video-type-control, 14px);
  font-weight: 400;
  line-height: 1.4;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

#create-panel #video-from-image-section .video-edit-url-row input[type="url"]::placeholder {
  color: #94a3b8;
}

#create-panel #video-from-image-section .video-edit-url-row input[type="url"]:hover {
  border-color: rgba(124, 58, 237, 0.22);
}

#create-panel #video-from-image-section .video-edit-url-row input[type="url"]:focus {
  outline: none;
  border-color: rgba(124, 58, 237, 0.45);
  box-shadow: 0 0 0 3px rgba(124, 58, 237, 0.12);
}

#create-panel #video-from-image-section .video-edit-url-apply {
  min-height: 46px;
  padding-inline: 16px;
  white-space: nowrap;
  flex-shrink: 0;
  font-weight: 500;
}

#create-panel #video-from-image-section .video-edit-source-status {
  margin: 0;
  font-size: var(--video-type-helper, 13.5px);
  line-height: 1.5;
}

.video-edit-source-status.is-loading {
  color: var(--brand-primary, #7c3aed);
}

.video-edit-source-status.is-success {
  color: #047857;
}

.video-edit-source-status.is-error {
  color: #b91c1c;
}

.video-from-video-source:not(.is-source-ready) .video-edit-trim-grid,
.video-from-video-source:not(.is-source-ready) .video-edit-trim-hint,
.video-from-video-source:not(.is-source-ready) .video-veo-credit-hint,
.video-from-video-source:not(.is-source-ready) .video-edit-reference-block {
  display: none;
}

.video-edit-upload-button {
  min-height: 44px;
  cursor: pointer;
}

.video-edit-source-preview:not(:empty) {
  padding: 12px;
  border: 1px solid rgba(148, 163, 184, 0.18);
  border-radius: 14px;
  background: #0f172a;
}

.video-edit-source-preview:empty,
.video-edit-reference-preview:empty {
  display: none;
}

.video-edit-source-preview video {
  display: block;
  width: min(100%, 620px);
  max-height: 360px;
  margin-inline: auto;
  border-radius: 10px;
  background: #0f172a;
}

#create-panel #video-from-image-section .video-edit-trim-grid .field {
  margin: 0;
}

#create-panel #video-from-image-section .video-edit-trim-grid .field > label {
  font-size: var(--video-type-label, 15.5px);
  font-weight: 650;
}

#create-panel #video-from-image-section .video-edit-trim-grid .field input {
  min-height: 46px;
  font-size: var(--video-type-control, 14px);
}

#create-panel #video-from-image-section .video-edit-reference-block {
  margin: 0;
  display: grid;
  gap: 8px;
}

#create-panel #video-from-image-section .video-edit-reference-block > label {
  margin: 0;
  font-size: var(--video-type-label, 15.5px);
  font-weight: 650;
  color: var(--brand-ink, #1f2937);
}

#create-panel #video-from-image-section .video-edit-reference-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}

#create-panel #video-from-image-section .video-edit-reference-row .swipe-visual-previews {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

#create-panel #video-from-image-section .video-edit-reference-row .swipe-visual-thumb {
  width: 56px;
  height: 56px;
  flex: 0 0 56px;
}

#create-panel #video-from-image-section .video-edit-reference-row .swipe-visual-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.video-edit-trim-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.video-metadata-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-weight: 500;
  text-transform: none;
  letter-spacing: 0;
}

.video-metadata-badge .video-badge-icon {
  width: 12px !important;
  height: 12px !important;
  min-width: 12px;
  max-width: 12px;
  opacity: 0.9;
  flex-shrink: 0;
  color: inherit;
  stroke: currentColor;
  fill: none;
}

.video-ai-style-badge {
  background: rgba(14, 165, 233, 0.12);
  color: #0284c7;
  border-color: rgba(14, 165, 233, 0.22);
}

.video-narrator-badge {
  background: rgba(139, 92, 246, 0.12);
  color: #7c3aed;
}

.video-cc-badge {
  letter-spacing: 0.08em;
}

@media (max-width: 640px) {
  .video-edit-source-actions {
    flex-direction: column;
    align-items: stretch;
  }

  .video-edit-source-actions .button,
  .video-edit-source-actions .video-edit-upload-button {
    width: 100%;
    justify-content: center;
  }

  .video-edit-trim-grid,
  .video-edit-url-row {
    grid-template-columns: 1fr;
  }

  #create-panel #video-from-image-section .video-edit-url-apply {
    width: 100%;
  }

}

/* Advanced tag — dark, deliberate, no glitter */
.jtc-advanced-tag {  position: absolute;
  top: -9px;
  right: -6px;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 10px 3px 7px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #e2e8f0;
  background: linear-gradient(135deg, #1e293b 0%, #334155 100%);
  border: 1px solid rgba(148, 163, 184, 0.2);
  border-radius: 20px;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3), inset 0 1px 0 rgba(255,255,255,0.06);
  white-space: nowrap;
  pointer-events: none;
  z-index: 2;
  line-height: 1;
  transform: rotate(4deg);
}
html[dir="rtl"] .jtc-advanced-tag {
  right: auto;
  left: -6px;
  transform: rotate(-4deg);
}
.jtc-advanced-tag svg {
  flex-shrink: 0;
  opacity: 0.7;
  stroke: #94a3b8;
}

/* Viral tag — fire orange, high energy */
.jtc-viral-tag {
  position: absolute;
  top: -9px;
  right: -6px;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 10px 3px 7px;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.3px;
  color: #fff;
  background: linear-gradient(135deg, #f97316, #ef4444);
  border-radius: 20px;
  box-shadow: 0 2px 8px rgba(249, 115, 22, 0.4);
  white-space: nowrap;
  pointer-events: none;
  z-index: 2;
  line-height: 1;
  transform: rotate(4deg);
}
html[dir="rtl"] .jtc-viral-tag {
  right: auto;
  left: -6px;
  transform: rotate(-4deg);
}
.jtc-viral-tag svg {
  flex-shrink: 0;
}

/* Swipe amount picker */
.swipe-amount-picker {
  display: flex;
  gap: 0;
  border: 1px solid var(--brand-border, #e2e8f0);
  border-radius: 10px;
  overflow: hidden;
  width: fit-content;
}
.swipe-amount-option {
  padding: 8px 28px;
  font-size: 15px;
  font-weight: 400;
  background: var(--brand-card, #fff);
  border: none;
  cursor: pointer;
  color: var(--brand-text, #334155);
  transition: background .15s, color .15s;
  border-right: 1px solid var(--brand-border, #e2e8f0);
}
.swipe-amount-option:last-child {
  border-right: none;
}
html[dir="rtl"] .swipe-amount-option {
  border-right: none;
  border-left: 1px solid var(--brand-border, #e2e8f0);
}
html[dir="rtl"] .swipe-amount-option:last-child {
  border-left: none;
}
.swipe-amount-option.active {
  background: var(--brand-bg, #f8fafc);
  color: var(--brand-text, #0f172a);
  box-shadow: inset 0 -2px 0 var(--brand-primary, #7c3aed);
}

/* Swipe visual source upload */
.swipe-visual-row {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}
.swipe-visual-previews {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}
.swipe-visual-thumb {
  position: relative;
  width: 56px;
  height: 56px;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 1px 4px rgba(15, 23, 42, 0.10);
}
.swipe-visual-thumb img,
.swipe-visual-thumb video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.swipe-visual-thumb-remove {
  position: absolute;
  top: 2px;
  right: 2px;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: rgba(15, 23, 42, 0.55);
  color: #fff;
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 10px;
  line-height: 1;
  padding: 0;
  opacity: 0;
  transition: opacity .15s;
}
html[dir="rtl"] .swipe-visual-thumb-remove {
  right: auto;
  left: 2px;
}
.swipe-visual-thumb:hover .swipe-visual-thumb-remove {
  opacity: 1;
}
.swipe-add-btn {
  width: 56px;
  height: 56px;
  border-radius: 12px;
  border: 2px dashed var(--brand-border, #e2e8f0);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  color: var(--brand-muted, #94a3b8);
  background: transparent;
  transition: border-color .15s, color .15s, background .15s;
  flex-shrink: 0;
}
.swipe-add-btn:hover,
.swipe-add-btn:focus-visible {
  border-color: var(--brand-primary, #7c3aed);
  color: var(--brand-primary, #7c3aed);
  background: rgba(124, 58, 237, 0.04);
}

.create-base-source-row {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.create-base-image-preview {
  align-items: center;
}

.create-base-image-add.has-file {
  display: none;
}

.create-base-image-thumb {
  width: 68px;
  height: 68px;
  border-radius: 16px;
  box-shadow: 0 8px 20px rgba(15, 23, 42, 0.12);
}

.create-base-image-thumb .swipe-visual-thumb-remove {
  opacity: 1;
  background: rgba(15, 23, 42, 0.68);
}

.create-base-image-meta {
  display: grid;
  gap: 2px;
  min-width: 120px;
}

.create-base-image-meta strong {
  max-width: 220px;
  overflow: hidden;
  color: var(--brand-text);
  font-size: 13px;
  line-height: 1.25;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.create-base-image-meta span {
  color: var(--brand-muted);
  font-size: 12px;
}

.from-image-brief-top-wrap {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-top: 22px;
  margin-bottom: 4px;
}

/* When only one reference image we hide #from-image-brief-top-wrap; restore separation above Text or idea vs Super mode (~same as .from-image-brief-top-wrap margin-top, slightly eased). */
#creative-brief-section.from-image-single-ref-token-gap {
  padding-top: 28px;
}

.from-image-tag-helper {
  margin: 0;
}

.from-image-brief-top-wrap .from-image-tag-helper {
  margin-bottom: 0;
}

/* Step 3 @image tokens: row like step 2, not full-width grid columns */
#creative-brief-section #from-image-prompt-assets.from-image-prompt-assets--compact {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 10px;
}

#creative-brief-section #from-image-prompt-assets.from-image-prompt-assets--compact .director-prompt-asset {
  flex: 0 0 auto;
  width: auto;
  max-width: 240px;
  padding: 8px 10px;
}

#create-panel #from-image-mode-field {
  margin-top: 16px;
}

#create-panel #text_to_include.from-image-placeholder-compact::placeholder {
  font-size: 0.8125rem;
  line-height: 1.35;
  opacity: 0.72;
}

#create-panel #text_to_include.from-image-placeholder-compact::-webkit-input-placeholder {
  font-size: 0.8125rem;
  line-height: 1.35;
  opacity: 0.72;
}

.from-image-prompt-insert-wrap {
  margin-bottom: 0;
}

.create-base-image-multi {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: flex-start;
}

/* Compact tiles: match single base-image preview (68×68), not wide upload-thumb rows */
.create-from-image-upload-thumb.upload-thumb {
  min-width: 0;
  max-width: none;
  width: auto;
  flex: 0 0 auto;
  padding: 4px;
  gap: 0;
  align-items: center;
  justify-content: center;
}

.create-base-image-thumb.is-nested {
  width: 68px;
  height: 68px;
  border-radius: 16px;
  box-shadow: 0 8px 20px rgba(15, 23, 42, 0.12);
}

.create-from-image-upload-thumb.upload-thumb img,
.create-from-image-upload-thumb.upload-thumb video {
  width: 100%;
  height: 100%;
  border-radius: inherit;
  object-fit: cover;
}

.create-from-image-chip-row {
  margin-bottom: 8px;
}

#visual-direction-field textarea.is-token-drop-target,
#text-to-include-field textarea.is-token-drop-target {
  outline: 2px solid rgba(124, 58, 237, 0.45);
}

.create-library-pick {
  min-height: 42px;
  border-radius: 14px;
}

.base-image-library-modal {
  z-index: var(--z-create-nested-modal);
}

.base-image-library-card {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.base-library-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  padding-inline-end: 34px;
}

.base-library-header h3 {
  margin: 2px 0 4px;
}

.base-library-header p {
  margin: 0;
  color: var(--brand-muted);
}

.base-library-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: 12px;
  min-height: 320px;
  overflow: auto;
  padding: 2px;
}

.base-library-card {
  display: grid;
  gap: 9px;
  padding: 9px;
  border: 1.5px solid rgba(226, 232, 240, 0.95);
  border-radius: 18px;
  background: #fff;
  color: inherit;
  cursor: pointer;
  text-align: start;
  box-shadow: 0 8px 20px rgba(15, 23, 42, 0.05);
  transition: border-color 0.16s ease, box-shadow 0.16s ease, transform 0.16s ease, background 0.16s ease;
}

.base-library-card:hover:not(.is-selected),
.base-library-card:focus-visible:not(.is-selected) {
  border-color: color-mix(in srgb, var(--brand-primary) 28%, #e2e8f0);
  box-shadow: 0 12px 26px rgba(15, 23, 42, 0.08);
  transform: translateY(-1px);
}

.base-library-card.is-selected {
  border-color: var(--brand-primary, #7c3aed);
  border-width: 2px;
  padding: 8px;
  background: color-mix(in srgb, var(--brand-primary, #7c3aed) 7%, #ffffff);
  box-shadow:
    0 0 0 3px color-mix(in srgb, var(--brand-primary, #7c3aed) 16%, transparent),
    0 14px 28px rgba(124, 58, 237, 0.16);
}

.base-library-thumb-wrap {
  display: block;
  position: relative;
  aspect-ratio: 1;
  overflow: hidden;
  border-radius: 14px;
  background: #f1f5f9;
}

.base-library-card.is-selected .base-library-thumb-wrap::before {
  content: '';
  position: absolute;
  inset: 0;
  background: color-mix(in srgb, var(--brand-primary, #7c3aed) 14%, transparent);
  pointer-events: none;
  z-index: 1;
}

.base-library-card.is-selected .base-library-thumb-wrap::after {
  content: '✓';
  position: absolute;
  top: 8px;
  inset-inline-end: 8px;
  width: 26px;
  height: 26px;
  border-radius: 999px;
  background: var(--brand-primary, #7c3aed);
  color: #fff;
  font-size: 14px;
  font-weight: 700;
  line-height: 26px;
  text-align: center;
  box-shadow: 0 6px 16px rgba(124, 58, 237, 0.34);
  z-index: 2;
}

.base-library-thumb {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
}

.base-library-card-copy {
  display: grid;
  gap: 2px;
}

.base-library-card-copy strong,
.base-library-card-copy span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.base-library-card-copy strong {
  font-size: 13px;
}

.base-library-card-copy span {
  color: var(--brand-muted);
  font-size: 12px;
}

.base-library-empty {
  display: grid;
  place-items: center;
  min-height: 260px;
  border: 1px dashed rgba(148, 163, 184, 0.45);
  border-radius: 18px;
  color: var(--brand-muted);
}

.base-library-footer,
.base-library-pagination {
  display: flex;
  align-items: center;
  gap: 12px;
}

.base-library-pagination {
  justify-content: flex-end;
}

@media (max-width: 700px) {
  .base-image-library-modal {
    align-items: flex-start;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }

  .base-image-library-modal .base-image-library-card {
    max-height: none;
    overflow: visible;
  }

  .base-image-library-modal .base-library-grid {
    min-height: 0;
  }
}

@media (max-width: 640px) {
  #from-image-mode-field .from-image-mode-toggle {
    display: grid;
    grid-template-columns: 1fr;
    width: 100%;
    overflow: visible;
    gap: 4px;
    padding: 4px;
    border-radius: 22px;
  }

  #from-image-mode-field .language-option {
    width: 100%;
    min-height: 42px;
    padding: 9px 12px;
    border-radius: 18px;
    white-space: normal;
  }

  #from-image-mode-field .from-image-mode-option-title {
    white-space: normal;
    line-height: 1.3;
  }
}

/* Swipe modal */
#swipe-modal {
  z-index: 80;
}
.swipe-modal-card {
  width: min(900px, 94vw);
  max-height: 92vh;
  padding: 32px;
  display: flex;
  flex-direction: column;
}
.swipe-body {
  display: flex;
  gap: 40px;
  align-items: center;
}
.swipe-onboarding-mobile-headline {
  display: none;
  width: 100%;
  box-sizing: border-box;
}
.swipe-onboarding-reward-title--mobile-above-art {
  text-align: center;
}
.swipe-image-area {
  flex: 1 1 50%;
  display: flex;
  justify-content: center;
  min-width: 0;
}
.swipe-card-container {
  position: relative;
  width: 100%;
  max-width: 380px;
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 8px 30px rgba(15, 23, 42, 0.12);
  transition: transform .3s cubic-bezier(.4, 0, .2, 1), opacity .3s ease;
  cursor: zoom-in;
}
.swipe-card-container.swipe-left {
  transform: translateX(-120%) rotate(-12deg);
  opacity: 0;
}
.swipe-card-container.swipe-right {
  transform: translateX(120%) rotate(12deg);
  opacity: 0;
}
.swipe-card-image {
  width: 100%;
  height: auto;
  display: block;
}
.swipe-info-area {
  flex: 1 1 45%;
  display: flex;
  flex-direction: column;
  gap: 16px;
  min-width: 0;
}
#swipe-modal.swipe-modal--onboarding-seed .swipe-info-area {
  gap: 26px;
}
.swipe-standard-copy {
  display: flex;
  flex-direction: column;
  gap: 16px;
  min-width: 0;
}
.swipe-counter {
  font-size: 15px;
  color: var(--brand-muted, #64748b);
  margin: 0;
}
.swipe-seed-reward-panel {
  position: relative;
  width: 100%;
  padding: 22px 18px 20px;
  border-radius: 18px;
  overflow: visible;
  box-sizing: border-box;
}
.swipe-seed-reward-panel-glow {
  position: absolute;
  inset: -6px -4px;
  border-radius: 22px;
  background:
    radial-gradient(ellipse 95% 85% at 50% 8%, rgba(124, 58, 237, 0.22), transparent 58%),
    linear-gradient(165deg, rgba(124, 58, 237, 0.11), rgba(236, 72, 153, 0.05), transparent 65%);
  pointer-events: none;
  z-index: 0;
}
.swipe-seed-reward-inner {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 12px;
}
.swipe-onboarding-reward-title {
  margin: 0;
  font-size: 24px;
  font-weight: 700;
  line-height: 1.3;
  color: var(--brand-text, #0f172a);
}
#swipe-modal.swipe-modal--onboarding-seed .swipe-standard-copy {
  border-top: 1px solid rgba(148, 163, 184, 0.22);
  padding-top: 20px;
  margin-top: 2px;
  width: 100%;
  box-sizing: border-box;
  gap: 14px;
}
#swipe-modal.swipe-modal--onboarding-seed .swipe-actions {
  margin-top: 14px;
}
.swipe-standard-copy .swipe-personality-inline-tag:not(.hidden) {
  align-self: center;
  margin: 6px 0 4px;
}
.swipe-question {
  font-size: 24px;
  font-weight: 700;
  margin: 0;
  line-height: 1.3;
}
.swipe-actions {
  display: flex;
  gap: 16px;
  margin-top: auto;
}
.swipe-btn {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 14px 32px;
  border-radius: 12px;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.5px;
  cursor: pointer;
  border: 2px solid transparent;
  transition: transform .15s ease, box-shadow .15s ease;
}
.swipe-btn:active {
  transform: scale(0.97);
}
.swipe-btn--discard {
  background: #fff;
  border-color: #cbd5e1;
  color: #64748b;
}
.swipe-btn--discard:hover {
  background: #f8fafc;
  box-shadow: 0 2px 8px rgba(100, 116, 139, 0.15);
}
.swipe-btn--save {
  background: var(--brand-primary, #7c3aed);
  border-color: var(--brand-primary, #7c3aed);
  color: #fff;
}
.swipe-btn--save:hover {
  background: color-mix(in srgb, var(--brand-primary, #7c3aed) 90%, black);
  border-color: color-mix(in srgb, var(--brand-primary, #7c3aed) 90%, black);
  box-shadow: 0 2px 8px rgba(124, 58, 237, 0.25);
}
.swipe-hint {
  font-size: 12px;
  margin: 0;
  max-width: 320px;
}

/* Swipe summary modal */
#swipe-summary-modal {
  z-index: 80;
}
.swipe-summary-card {
  width: min(680px, 94vw);
  max-height: 92vh;
  padding: 32px;
  text-align: center;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.swipe-summary-header {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  margin-bottom: 24px;
}
.swipe-summary-title {
  font-size: 22px;
  font-weight: 700;
  margin: 0;
}
.swipe-summary-subtitle {
  font-size: 14px;
  color: var(--brand-muted, #64748b);
  margin: 0;
}
.swipe-personality-inline-tag {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 4px 10px;
  border-radius: 999px;
  font-size: 10.8px;
  font-weight: 700;
  color: #6d28d9;
  background: #f3e8ff;
  border: 1px solid #e9d5ff;
  margin: 8px 0 0;
  align-self: flex-start;
}
.swipe-summary-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
  margin-bottom: 12px;
  overflow-y: auto;
  overscroll-behavior: contain;
  min-height: 0;
  flex: 1 1 auto;
}
.swipe-summary-card .modal-actions {
  position: sticky;
  bottom: 0;
  margin-top: 0;
  padding-top: 12px;
  background: linear-gradient(to bottom, rgba(255, 255, 255, 0), var(--brand-card) 24%);
}
.swipe-summary-card #swipe-summary-done {
  min-width: 160px;
}
.swipe-summary-item {
  border-radius: 14px;
  overflow: hidden;
  box-shadow: 0 2px 12px rgba(15, 23, 42, 0.08);
  position: relative;
  opacity: 0;
  transform: translateY(20px) scale(0.95);
  animation: swipeFadeIn 0.5s cubic-bezier(0.22, 1, 0.36, 1) forwards;
  background: var(--brand-card, #fff);
}
@keyframes swipeFadeIn {
  to { opacity: 1; transform: translateY(0) scale(1); }
}
.swipe-item-image-wrap {
  position: relative;
  overflow: hidden;
}
.swipe-item-image-wrap img {
  width: 100%;
  height: auto;
  display: block;
}
.swipe-item-saved-badge {
  position: absolute;
  bottom: 8px;
  left: 50%;
  transform: translateX(-50%);
  background: rgba(22, 163, 74, 0.9);
  color: #fff;
  font-size: 11px;
  font-weight: 500;
  padding: 4px 12px;
  border-radius: 20px;
  white-space: nowrap;
  pointer-events: none;
  opacity: 0;
  animation: badgePop 0.4s 0.4s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}
@keyframes badgePop {
  0% { opacity: 0; transform: translateX(-50%) scale(0.7); }
  100% { opacity: 1; transform: translateX(-50%) scale(1); }
}
.swipe-item-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  padding: 10px;
}
.swipe-item-action {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 6px 12px;
  border-radius: 8px;
  border: 1px solid var(--brand-border, #e2e8f0);
  background: var(--brand-card, #fff);
  color: var(--brand-ink, #334155);
  font-size: 12px;
  font-weight: 500;
  cursor: pointer;
  transition: background .15s ease, border-color .15s ease, transform .1s ease;
  font-family: inherit;
}
.swipe-item-action:hover {
  background: rgba(124, 58, 237, 0.06);
  border-color: rgba(124, 58, 237, 0.3);
  color: #7c3aed;
}
.swipe-item-action:active {
  transform: scale(0.96);
}
.swipe-item-action.loading {
  opacity: 0.5;
  pointer-events: none;
}
.swipe-action-icon {
  width: 14px;
  height: 14px;
  flex-shrink: 0;
}

/* Idea Swipe job details panel */
.idea-swipe-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  padding: 16px;
}
.idea-swipe-grid-item {
  border-radius: 10px;
  overflow: hidden;
  cursor: pointer;
  position: relative;
  box-shadow: 0 1px 4px rgba(15, 23, 42, 0.08);
  transition: transform .15s ease, box-shadow .15s ease;
}
.idea-swipe-grid-item:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(15, 23, 42, 0.14);
}
.idea-swipe-grid-item img {
  width: 100%;
  height: auto;
  display: block;
}
.idea-swipe-grid-item .swipe-personality-tag {
  position: absolute;
  top: 6px;
  left: 6px;
  max-width: calc(100% - 36px);
  padding: 3px 9px;
  border-radius: 999px;
  font-size: 9.9px;
  font-weight: 700;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  color: #6d28d9;
  background: rgba(243, 232, 255, 0.95);
  border: 1px solid #e9d5ff;
  box-shadow: 0 1px 3px rgba(15, 23, 42, 0.12);
}
.idea-swipe-grid-item.rejected {
  opacity: 0.35;
  filter: grayscale(0.5);
}
.idea-swipe-grid-item .swipe-badge {
  position: absolute;
  top: 6px;
  right: 6px;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
}
html[dir="rtl"] .idea-swipe-grid-item .swipe-badge {
  right: auto;
  left: 6px;
}
html[dir="rtl"] .idea-swipe-grid-item .swipe-personality-tag {
  left: auto;
  right: 6px;
}
.swipe-badge.approved {
  background: #dcfce7;
  color: #16a34a;
}
.swipe-badge.discarded {
  background: #fee2e2;
  color: #ef4444;
}
.swipe-detail-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  padding: 6px;
}
.swipe-detail-action {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px 10px;
  border-radius: 6px;
  border: 1px solid var(--brand-border, #e2e8f0);
  background: var(--brand-card, #fff);
  color: var(--brand-ink, #334155);
  font-size: 11px;
  font-weight: 500;
  cursor: pointer;
  transition: background .12s ease, border-color .12s ease;
  font-family: inherit;
}
.swipe-detail-action:hover {
  background: rgba(124, 58, 237, 0.06);
  border-color: rgba(124, 58, 237, 0.3);
  color: #7c3aed;
}
.swipe-detail-action.loading {
  opacity: 0.5;
  pointer-events: none;
}
.swipe-completed-tabs {
  display: inline-flex;
  gap: 8px;
  margin: 0 0 12px;
  padding: 4px;
  border-radius: 12px;
  background: rgba(148, 163, 184, 0.12);
}
.swipe-completed-tab {
  border: 1px solid transparent;
  background: transparent;
  color: var(--brand-muted, #64748b);
  border-radius: 10px;
  padding: 8px 12px;
  font-weight: 700;
  font-size: 12px;
  cursor: pointer;
  font-family: inherit;
}
.swipe-completed-tab.active {
  background: #fff;
  color: var(--brand-primary, #7c3aed);
  border-color: color-mix(in srgb, var(--brand-primary, #7c3aed) 30%, #e2e8f0);
}
.swipe-completed-panel {
  display: none;
}
.swipe-completed-panel.active {
  display: block;
}
.swipe-completed-panel .action-row {
  width: 100%;
}
.swipe-completed-panel .feedback-box {
  width: 100%;
  align-self: stretch;
}
.swipe-completed-panel .feedback-box .voice-input-wrap {
  width: 100%;
}
.swipe-selected-image-label {
  margin-top: 12px;
  font-weight: 500;
}
.swipe-flow-tabs .tab-button:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}
.swipe-size-dropdown-wrap {
  position: relative;
  display: inline-flex;
}
.swipe-size-dropdown {
  position: absolute;
  top: 100%;
  left: 0;
  z-index: 20;
  margin-top: 4px;
  min-width: 90px;
  background: var(--brand-card, #fff);
  border: 1px solid var(--brand-border, #e2e8f0);
  border-radius: 10px;
  box-shadow: 0 6px 20px rgba(15, 23, 42, 0.12);
  padding: 4px;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.swipe-size-dropdown.hidden {
  display: none;
}
.swipe-size-option {
  padding: 6px 12px;
  border: none;
  background: none;
  border-radius: 6px;
  font-size: 12px;
  font-weight: 500;
  color: var(--brand-ink, #334155);
  cursor: pointer;
  text-align: start;
  font-family: inherit;
  transition: background .1s ease;
}
.swipe-size-option:hover {
  background: rgba(124, 58, 237, 0.08);
  color: #7c3aed;
}
html[dir="rtl"] .swipe-size-dropdown {
  left: auto;
  right: 0;
}

@media (max-width: 700px) {
  #swipe-modal .swipe-modal-card {
    width: min(900px, 98vw);
    /* 92vh ignores mobile browser chrome; dvh + safe-area keeps the card fully scrollable. */
    max-height: calc(100dvh - max(24px, env(safe-area-inset-top) + env(safe-area-inset-bottom)));
    overflow-y: auto;
    overflow-x: hidden;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
    min-height: 0;
    padding: 14px 12px max(16px, calc(12px + env(safe-area-inset-bottom)));
  }
  .swipe-body {
    flex-direction: column;
    gap: 14px;
  }
  .swipe-image-area {
    flex: none;
    width: 100%;
  }
  .swipe-card-container {
    max-width: min(430px, calc(100vw - 24px));
    margin: 0 auto;
  }
  .swipe-card-image {
    max-height: min(50dvh, 400px);
    width: auto;
    max-width: 100%;
    object-fit: contain;
    margin-inline: auto;
  }
  .swipe-info-area {
    flex: none;
    width: 100%;
    align-items: center;
    text-align: center;
  }
  #swipe-modal.swipe-modal--onboarding-seed .swipe-onboarding-mobile-headline {
    display: block;
    margin: 0 0 14px;
    padding: 14px 6px 0;
  }
  #swipe-modal.swipe-modal--onboarding-seed .swipe-onboarding-reward-title--mobile-above-art {
    font-size: 18px;
    line-height: 1.3;
    font-weight: 700;
  }
  #swipe-modal.swipe-modal--onboarding-seed .swipe-seed-reward-panel {
    display: none !important;
  }
  #swipe-modal.swipe-modal--onboarding-seed .swipe-info-area {
    gap: 14px;
  }
  #swipe-modal.swipe-modal--onboarding-seed .swipe-actions {
    margin-top: 6px;
  }
  #swipe-modal .swipe-standard-copy .swipe-hint {
    text-align: center;
    align-self: center;
    margin-inline: auto;
    max-width: min(340px, 100%);
  }
  #swipe-modal .swipe-standard-copy .swipe-question {
    font-size: 18px;
  }
  .swipe-actions {
    justify-content: center;
    padding-bottom: max(4px, env(safe-area-inset-bottom));
  }
  .swipe-btn {
    padding: 12px 24px;
  }
  #swipe-summary-modal .swipe-summary-card {
    max-height: calc(100dvh - max(24px, env(safe-area-inset-top) + env(safe-area-inset-bottom)));
    overflow-y: auto;
    overflow-x: hidden;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
    min-height: 0;
  }
  .swipe-summary-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  .swipe-summary-card {
    padding: 18px 12px max(14px, calc(12px + env(safe-area-inset-bottom)));
  }
  .swipe-summary-card .modal-actions {
    padding-top: 10px;
  }
  .swipe-item-actions {
    justify-content: center;
  }
  .idea-swipe-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
  }
}

html[lang="ar"] #swipe-modal,
html[lang="ar"] #swipe-summary-modal,
html[lang="he"] #swipe-modal,
html[lang="he"] #swipe-summary-modal {
  font-family: 'Tajawal', 'Cairo', system-ui, -apple-system, sans-serif;
}

/* Ensure Arabic/Hebrew typography is applied on swipe controls explicitly. */
html[lang="ar"] #swipe-modal .swipe-counter,
html[lang="ar"] #swipe-modal .swipe-question,
html[lang="ar"] #swipe-modal .swipe-btn,
html[lang="ar"] #swipe-modal .swipe-hint,
html[lang="ar"] #swipe-modal .swipe-onboarding-reward-title,
html[lang="ar"] #swipe-modal .swipe-personality-inline-tag,
html[lang="he"] #swipe-modal .swipe-counter,
html[lang="he"] #swipe-modal .swipe-question,
html[lang="he"] #swipe-modal .swipe-btn,
html[lang="he"] #swipe-modal .swipe-hint,
html[lang="he"] #swipe-modal .swipe-onboarding-reward-title,
html[lang="he"] #swipe-modal .swipe-personality-inline-tag {
  font-family: 'Tajawal', 'Cairo', system-ui, -apple-system, Segoe UI, sans-serif;
}

/* Embed mode: show only normal job details panel */
body.embed-job-panel .sidebar,
body.embed-job-panel .app-header,
body.embed-job-panel #report-notifications,
body.embed-job-panel #create-panel,
body.embed-job-panel .jobs-toolbar,
body.embed-job-panel .jobs-source-tabs,
body.embed-job-panel .jobs-list-col,
body.embed-job-panel .brand-switcher-slot {
  display: none !important;
}
body.embed-job-panel .app-shell {
  grid-template-columns: 1fr !important;
}
body.embed-job-panel .app-content {
  width: 100% !important;
  max-width: 100% !important;
}
body.embed-job-panel .container {
  max-width: 100% !important;
  padding: 0 !important;
}
body.embed-job-panel .jobs-split {
  margin-top: 0 !important;
  display: block !important;
}
body.embed-job-panel .job-details-col {
  width: 100% !important;
}
body.embed-job-panel #job-details-card {
  border: 0 !important;
  box-shadow: none !important;
  border-radius: 0 !important;
}

/* Brand Strength Score */
.brand-strength-indicator[data-variant="header"],
.brand-strength-indicator[data-variant="card-collapsed"] {
  display: inline-flex !important;
  visibility: visible !important;
  opacity: 1 !important;
  align-items: center;
  flex-direction: row;
  flex-shrink: 0;
  gap: 10px;
  border: 1px solid var(--brand-border);
  background: var(--brand-surface);
  border-radius: 999px;
  padding: 0 10px;
  height: 38px;
  min-width: 212px;
  max-width: 260px;
  box-shadow: 0 1px 0 rgba(16, 24, 40, 0.02);
  transition: transform .18s ease, box-shadow .2s ease, border-color .2s ease;
  cursor: pointer;
  position: relative;
  z-index: 12;
  white-space: nowrap;
}

body.app-page #brand-summary-card .brand-strength-indicator[data-variant="card-collapsed"] {
  gap: 8px;
  height: 32px;
  min-width: 196px;
  padding-inline: 8px;
}

body.app-page #brand-summary-card .brand-strength-indicator[data-variant="card-collapsed"] .bs-header-score strong {
  font-size: 20px;
}

body.app-page #brand-summary-card .brand-strength-indicator[data-variant="card-collapsed"] .bs-seg {
  height: 5px;
}
.brand-strength-indicator[data-variant="header"]:hover,
.brand-strength-indicator[data-variant="card-collapsed"]:hover {
  transform: translateY(-2px);
  border-color: color-mix(in srgb, var(--brand-accent) 30%, var(--brand-border));
  box-shadow: 0 10px 26px rgba(15, 23, 42, 0.08);
}
.bs-header-score {
  display: flex;
  align-items: baseline;
  gap: 2px;
  direction: ltr;
  unicode-bidi: isolate;
  flex-shrink: 0;
}
.bs-header-score strong {
  font-size: 24px;
  line-height: 1;
  letter-spacing: -0.02em;
  color: var(--text);
}
.bs-header-score small {
  font-size: 11px;
  color: var(--text-muted);
}
.bs-segments {
  display: grid;
  grid-template-columns: repeat(10, minmax(0, 1fr));
  gap: 4px;
}
html[dir="rtl"] .bs-segments,
[dir="rtl"] .bs-segments,
.rtl .bs-segments {
  direction: rtl;
}
.bs-segments-indicator {
  flex: 1;
  min-width: 84px;
}
.bs-seg {
  height: 6px;
  border-radius: 999px;
  overflow: hidden;
  background: #edf1f7;
}
.bs-seg-fill {
  display: block;
  width: 100%;
  height: 100%;
  transform: scaleX(0);
  transform-origin: left center;
  background: var(--brand-accent);
  transition: transform .34s ease;
}
html[dir="rtl"] .bs-seg-fill,
[dir="rtl"] .bs-seg-fill,
.rtl .bs-seg-fill {
  transform-origin: right center;
}
.bs-header-tier {
  font-size: 10px;
  color: var(--text-muted);
  border: 1px solid var(--brand-border);
  background: #fff;
  border-radius: 999px;
  padding: 2px 7px;
  line-height: 1.2;
  flex-shrink: 0;
}
.brand-strength-indicator[data-variant="card-expanded"] {
  display: inline-flex !important;
  visibility: visible !important;
  opacity: 1 !important;
  flex-direction: column;
  align-items: stretch;
  gap: 6px;
  border: 1px solid var(--brand-border);
  background: var(--brand-surface);
  border-radius: 14px;
  padding: 8px 10px;
  min-width: 196px;
  box-shadow: 0 1px 0 rgba(16, 24, 40, 0.02);
  transition: transform .18s ease, box-shadow .2s ease, border-color .2s ease;
  cursor: pointer;
  position: relative;
  z-index: 12;
}
.brand-strength-indicator[data-variant="card-expanded"]:hover {
  transform: translateY(-2px);
  border-color: color-mix(in srgb, var(--brand-accent) 30%, var(--brand-border));
  box-shadow: 0 10px 26px rgba(15, 23, 42, 0.08);
}
.bs-pill-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 8px;
}
.bs-pill-meta {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 3px;
  text-align: start;
}
.bs-pill-label {
  font-size: 11px;
  color: var(--text-muted);
  font-weight: 500;
}
.bs-pill-tier {
  font-size: 10px;
  color: var(--text-muted);
  border: 1px solid var(--brand-border);
  background: #fff;
  border-radius: 999px;
  padding: 2px 7px;
}
.bs-pill-score {
  display: flex;
  align-items: baseline;
  gap: 2px;
  direction: ltr;
  unicode-bidi: isolate;
}
html[dir="rtl"] .bs-pill-meta,
[dir="rtl"] .bs-pill-meta,
.rtl .bs-pill-meta {
  align-items: flex-end;
}
html[dir="rtl"] .brand-strength-indicator[data-variant="card-expanded"] .bs-pill-head,
[dir="rtl"] .brand-strength-indicator[data-variant="card-expanded"] .bs-pill-head,
.rtl .brand-strength-indicator[data-variant="card-expanded"] .bs-pill-head,
html[lang="ar"] .brand-strength-indicator[data-variant="card-expanded"] .bs-pill-head,
html[lang="he"] .brand-strength-indicator[data-variant="card-expanded"] .bs-pill-head {
  flex-direction: row-reverse;
}
html[lang="ar"] .bs-pill-meta,
html[lang="he"] .bs-pill-meta {
  align-items: flex-end;
}
.bs-pill-score strong {
  font-size: 28px;
  line-height: 1;
  letter-spacing: -0.02em;
  color: var(--text);
}
.bs-pill-score small {
  font-size: 12px;
  color: var(--text-muted);
}
.brand-strength-indicator[data-variant="card-expanded"] .bs-segments-indicator {
  flex: none;
  min-width: 0;
}
.brand-strength-anchor {
  display: inline-flex;
  align-items: center;
}
.brand-summary-row .brand-strength-anchor {
  margin: 0 2px;
}
.brand-summary-compact .brand-strength-anchor {
  margin: 0 4px 0 2px;
}
.brand-strength-inline {
  position: static !important;
  z-index: 2 !important;
}
#brand-summary-card.brand-collapsed .brand-strength-indicator {
  background: #ffffff !important;
  background-color: #ffffff !important;
  border-color: #e6e8f0 !important;
  box-shadow: 0 1px 0 rgba(16, 24, 40, 0.02) !important;
}
.brand-strength-indicator.brand-strength-compact-active {
  background: #ffffff !important;
  background-color: #ffffff !important;
  border-color: #e6e8f0 !important;
  --brand-surface: #ffffff;
}
.brand-strength-indicator[data-variant="header"].is-100,
.brand-strength-indicator[data-variant="card-collapsed"].is-100,
.brand-strength-indicator[data-variant="card-expanded"].is-100 {
  border-color: #d7e7dc;
  box-shadow: 0 10px 24px rgba(15, 23, 42, 0.07);
}
html[lang="ar"] .brand-strength-indicator,
html[lang="ar"] .brand-strength-modal,
html[lang="he"] .brand-strength-indicator,
html[lang="he"] .brand-strength-modal,
html[dir="rtl"] .brand-strength-indicator,
html[dir="rtl"] .brand-strength-modal {
  font-family: 'Tajawal', 'Cairo', system-ui, -apple-system, Segoe UI, sans-serif;
}
html[lang="ar"] .brand-strength-modal *,
html[lang="he"] .brand-strength-modal *,
html[dir="rtl"] .brand-strength-modal *,
html[lang="ar"] .brand-strength-indicator *,
html[lang="he"] .brand-strength-indicator *,
html[dir="rtl"] .brand-strength-indicator * {
  font-family: 'Tajawal', 'Cairo', system-ui, -apple-system, Segoe UI, sans-serif !important;
}
.brand-strength-floating {
  position: fixed !important;
  right: 16px;
  top: 78px;
  z-index: 1200 !important;
  box-shadow: 0 12px 30px rgba(15, 23, 42, 0.14);
}
html[dir="rtl"] .brand-strength-floating {
  right: auto;
  left: 16px;
}
.brand-strength-modal .modal-card {
  width: min(920px, calc(100vw - 32px));
  max-width: 920px;
  max-height: calc(100vh - 32px);
  padding: 0;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
html[dir="rtl"] .brand-strength-modal .modal-close,
[dir="rtl"] .brand-strength-modal .modal-close,
.rtl .brand-strength-modal .modal-close {
  right: auto;
  left: 14px;
}
.brand-strength-core {
  padding: 18px 20px 20px;
  background: #fff;
  overflow-y: auto;
  overscroll-behavior: contain;
}
.bs-modal-helper {
  display: grid;
  gap: 4px;
  width: 100%;
  padding: 0 0 10px;
  border: 0;
  border-bottom: 1px solid #e5e7eb;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  margin-bottom: 10px;
  text-align: start;
}
.bs-modal-helper strong {
  color: #111827;
  font-size: 18px;
  line-height: 1.2;
  font-weight: 700;
  letter-spacing: -0.01em;
}
.bs-modal-helper-title {
  margin: 0;
}
.bs-modal-helper-line {
  margin: 0;
  color: #4b5563;
  font-size: 13px;
  line-height: 1.5;
  font-weight: 400;
}
html[dir="rtl"] .bs-modal-helper strong,
[dir="rtl"] .bs-modal-helper strong,
.rtl .bs-modal-helper strong {
  text-align: right;
}
html[dir="rtl"] .bs-modal-helper-line,
[dir="rtl"] .bs-modal-helper-line,
.rtl .bs-modal-helper-line {
  text-align: right;
}
.bs-task-modal {
  position: absolute;
  inset: 0;
  z-index: 20;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
}
.brand-strength-modal:has(#bs-task-modal:not(.hidden)) > .modal-card > .modal-close {
  visibility: hidden;
  pointer-events: none;
}
.bs-task-modal.hidden {
  display: none;
}
.bs-task-modal-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(15, 23, 42, 0.35);
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
}
.bs-task-modal-card {
  position: relative;
  width: min(760px, calc(100% - 16px));
  max-height: calc(100% - 16px);
  overflow-y: auto;
  background: #fff;
  border: 1px solid var(--brand-border);
  border-radius: 16px;
  padding: 18px;
  box-shadow: 0 20px 44px rgba(15, 23, 42, 0.16);
}
.bs-task-modal-card.is-uploading {
  overflow: hidden;
}
.bs-task-modal.is-uploading [data-task-modal-close] {
  pointer-events: none;
}
.bs-task-modal-upload-overlay {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 4;
}
.bs-task-modal-upload-overlay.hidden {
  display: none;
}
.bs-task-modal-upload-scrim {
  position: absolute;
  inset: 0;
  background: rgba(255, 255, 255, 0.38);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}
.bs-task-modal-upload-status {
  position: relative;
  z-index: 1;
  min-width: min(260px, calc(100% - 40px));
  padding: 18px 20px;
  border-radius: 18px;
  border: 1px solid rgba(46, 96, 255, 0.16);
  background: rgba(255, 255, 255, 0.88);
  box-shadow: 0 18px 40px rgba(15, 23, 42, 0.16);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  text-align: center;
}
.bs-task-modal-card.is-uploading .brand-strength-editor,
.bs-task-modal-card.is-uploading .modal-close {
  filter: blur(5px);
  opacity: 0.55;
  pointer-events: none;
  user-select: none;
}
/* Keep Brand Strength task modal neutral (no dynamic brand tint) */
.bs-task-modal-card .brand-strength-editor.brand-strength-editor-completed {
  background: #ffffff;
  border: 1px solid #e5e7eb;
}
.bs-task-modal-card .brand-strength-logo-current {
  border-color: #e5e7eb;
}
.bs-task-modal-card .brand-strength-logo-current img {
  border-color: #e5e7eb;
  background: #f8fafc;
}
.bs-task-modal-card .brand-strength-editor.brand-strength-editor-completed #bs-logo-drop {
  border-color: color-mix(in srgb, var(--brand-accent) 58%, #cbd5e1);
  background: color-mix(in srgb, var(--brand-accent) 5%, #f8fafc);
}
.bs-task-modal-card .upload-box:hover,
.bs-task-modal-card .upload-box.drag-over,
.bs-task-modal-card .upload-box.has-file {
  border-color: color-mix(in srgb, var(--brand-accent) 62%, #cbd5e1);
  background: color-mix(in srgb, var(--brand-accent) 7%, #f8fafc);
}
.bs-task-modal-card .brand-strength-editor .input:focus,
.bs-task-modal-card .brand-strength-editor textarea:focus,
.bs-task-modal-card .brand-strength-editor .select:focus,
.bs-task-modal-card .brand-strength-control:focus {
  border-color: #cbd5e1 !important;
  box-shadow: 0 0 0 3px rgba(148, 163, 184, 0.16) !important;
}
.bs-task-modal-card .modal-close {
  top: 12px;
  right: 12px;
  z-index: 25;
}
html[dir="rtl"] .bs-task-modal-card .modal-close,
[dir="rtl"] .bs-task-modal-card .modal-close,
.rtl .bs-task-modal-card .modal-close {
  right: auto;
  left: 12px;
}
.bs-modal-top {
  background: color-mix(in srgb, var(--brand-accent) 3%, #ffffff);
  border: 1px solid color-mix(in srgb, var(--brand-accent) 14%, #e5e7eb);
  border-radius: 16px;
  padding: 12px 14px 10px;
  box-shadow: 0 3px 14px rgba(15, 23, 42, 0.05);
  margin-bottom: 14px;
}
.bs-modal-score-wrap {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}
.bs-modal-score strong {
  font-size: 52px;
  line-height: 1;
  letter-spacing: -0.03em;
}
.bs-modal-score span {
  color: var(--text-muted);
  font-size: 13px;
  font-weight: 500;
}
.bs-modal-tier {
  display: none;
}
.bs-modal-ready {
  display: none;
}
.bs-modal-left {
  text-align: center;
  font-size: 12px;
  color: var(--text-muted);
  margin-top: 3px;
  margin-bottom: 7px;
}
.bs-segments-modal {
  width: 100%;
  max-width: 62%;
  margin: 0 auto;
}
.bs-modal-quality-note {
  margin-top: 6px;
  text-align: center;
  font-size: 11px;
  color: #94a3b8;
}
.bs-modal-top.is-100 {
  border-color: color-mix(in srgb, var(--brand-accent) 18%, #d1fae5);
}
.bs-segments-modal .bs-seg {
  height: 6px;
}
.bs-fast {
  margin: 0 0 12px;
  padding: 8px 10px 4px;
  border: 1px solid color-mix(in srgb, var(--brand-accent) 12%, #e5e7eb);
  border-left: 2px solid color-mix(in srgb, var(--brand-accent) 48%, #cbd5e1);
  border-radius: 10px;
  background: color-mix(in srgb, var(--brand-accent) 4%, #f8fafc);
}
.bs-fast h3 {
  font-size: 12px;
  color: #334155;
  margin: 0 0 5px;
  letter-spacing: 0.01em;
}
.bs-fast-cards {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0;
}
.bs-fast-item {
  border: 0;
  border-bottom: 1px solid #eceff5;
  background: transparent;
  padding: 9px 0;
  display: flex;
  align-items: flex-start;
  gap: 8px;
  cursor: pointer;
  transition: background-color .2s ease;
  text-align: start;
}
.bs-fast-item:last-child {
  border-bottom: 0;
}
.bs-fast-item:hover {
  background: rgba(15, 23, 42, 0.025);
}
.bs-fast-item-main {
  flex: 1;
  display: grid;
  gap: 2px;
}
.bs-fast-item-title {
  font-size: 13px;
  font-weight: 500;
  color: #111827;
}
.bs-fast-item-desc {
  color: #64748b;
  font-size: 11px;
  line-height: 1.45;
}
.bs-impact {
  border-radius: 999px;
  border: 1px solid #e2e8f0;
  color: #64748b;
  font-size: 10px;
  font-weight: 700;
  padding: 2px 7px;
  width: fit-content;
}
.brand-strength-editor-panel {
  background: transparent;
  border: 0;
  border-top: 1px solid #e8ebf2;
  border-radius: 0;
  padding: 14px 0 0;
  margin-top: 10px;
}
.brand-strength-task-list {
  display: flex;
  flex-direction: column;
  gap: 0;
}
.brand-strength-task {
  border: 0;
  border-bottom: 1px solid #eceff5;
  background: transparent;
  border-radius: 0;
  padding: 10px 0;
  transition: background-color .2s ease, opacity .2s ease;
  width: 100%;
  text-align: start;
  cursor: pointer;
}
.brand-strength-task:hover {
  background: rgba(15, 23, 42, 0.02);
}
.brand-strength-task.active {
  background: rgba(15, 23, 42, 0.028);
}
.brand-strength-task.is-done {
  opacity: 0.58;
}
.brand-strength-task-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}
.brand-strength-task-head strong {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  font-weight: 500;
}
.brand-strength-task-badges {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.brand-strength-inline-check {
  font-size: 11px;
  color: color-mix(in srgb, var(--brand-accent) 62%, #64748b);
  line-height: 1;
}
.brand-strength-task-desc {
  font-size: 11px;
  color: var(--text-muted);
  margin-top: 3px;
  line-height: 1.45;
}
.brand-strength-task-preview {
  font-size: 11px;
  color: #475569;
  margin-top: 4px;
}
.brand-strength-state {
  font-size: 10px;
  border-radius: 999px;
  padding: 2px 7px;
  border: 1px solid #e4e8f1;
  color: #64748b;
  background: #fff;
}
.brand-strength-state.done {
  color: #64748b;
  border-color: #dbe2ee;
  background: #f8fafc;
}
.brand-strength-state.pending { color: #92400e; border-color: #fcd34d; background: #fffbeb; }
.bs-all-tasks h3 {
  margin: 0 0 6px;
  font-size: 12px;
  color: #334155;
  letter-spacing: 0.01em;
}
.bs-section-divider {
  height: 1px;
  background: #e5e7eb;
  margin: 0 0 10px;
}
.brand-strength-editor-title {
  font-size: 18px;
  font-weight: 500;
  margin-bottom: 4px;
}
.brand-strength-editor-sub {
  color: var(--text-muted);
  font-size: 13px;
  margin-bottom: 14px;
  line-height: 1.45;
  font-family: 'Tajawal', system-ui, -apple-system, 'Segoe UI', sans-serif;
}
.bs-brand-assets-examples {
  margin: 0 0 14px;
  padding: 10px 12px;
  border-radius: 12px;
  border: 1px solid #e8eaef;
  background: #fafbfc;
}
.bs-brand-assets-examples-title {
  margin: 0 0 8px;
  font-size: 12px;
  font-weight: 700;
  color: var(--brand-ink);
  font-family: 'Tajawal', system-ui, -apple-system, 'Segoe UI', sans-serif;
}
.bs-brand-assets-examples-list {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 8px;
}
.bs-brand-assets-examples-list li {
  display: grid;
  gap: 2px;
  font-family: 'Tajawal', system-ui, -apple-system, 'Segoe UI', sans-serif;
}
.bs-brand-assets-examples-list strong {
  font-size: 13px;
  font-weight: 700;
  color: var(--brand-ink);
}
.bs-brand-assets-examples-list span {
  font-size: 12px;
  font-weight: 400;
  color: var(--brand-muted);
  line-height: 1.35;
}
.brand-strength-editor-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}
.bs-editor-status-row {
  display: inline-flex;
  align-items: center;
  justify-content: flex-start;
  gap: 8px;
  margin-bottom: 0;
}
.brand-strength-editor.brand-strength-editor-completed {
  background: rgba(147, 51, 234, 0.06);
  border: 1px solid color-mix(in srgb, var(--brand-primary) 26%, var(--brand-border));
  border-radius: 14px;
  padding: 12px;
}
.brand-strength-editor.brand-strength-editor-completed .brand-strength-logo-current {
  border-color: color-mix(in srgb, var(--brand-primary) 26%, var(--brand-border));
  background: transparent;
}
.brand-strength-editor.brand-strength-editor-completed .brand-strength-logo-current img {
  background: rgba(147, 51, 234, 0.05);
  border-color: color-mix(in srgb, var(--brand-primary) 22%, var(--brand-border));
}
.brand-strength-editor.brand-strength-editor-completed #bs-logo-drop {
  border-color: color-mix(in srgb, var(--brand-primary) 26%, var(--brand-border));
  background: transparent;
}
.brand-strength-editor .input,
.brand-strength-editor textarea,
.brand-strength-editor .select {
  width: 100%;
  border: 1px solid var(--brand-border);
  border-radius: 12px;
  padding: 12px 14px;
  background: #fff;
  color: var(--brand-ink);
  font-size: 14px;
  line-height: 1.45;
  font-family: 'Cairo', 'Tajawal', system-ui, -apple-system, Segoe UI, sans-serif;
  text-align: start !important;
  direction: inherit;
  transition: border 0.2s ease, box-shadow 0.2s ease;
  box-sizing: border-box;
}
.brand-strength-control {
  width: 100%;
  border: 1px solid var(--brand-border) !important;
  border-radius: 12px;
  padding: 12px 14px;
  background: #fff;
  color: var(--brand-ink);
  font-size: 14px;
  line-height: 1.45;
  font-family: 'Cairo', 'Tajawal', system-ui, -apple-system, Segoe UI, sans-serif;
  text-align: start !important;
  direction: inherit;
  transition: border 0.2s ease, box-shadow 0.2s ease;
  box-sizing: border-box;
  appearance: none;
  -webkit-appearance: none;
}
.brand-strength-control:focus {
  outline: none;
  border-color: var(--brand-primary) !important;
  box-shadow: 0 0 0 3px rgba(147, 51, 234, 0.15);
}
textarea.brand-strength-control {
  min-height: 120px;
  resize: vertical;
}
.brand-strength-upload-row {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 8px 0 4px;
}
.brand-strength-upload-name {
  color: var(--brand-text-muted);
  font-size: 13px;
}
.brand-strength-logo-current {
  display: flex;
  align-items: center;
  gap: 10px;
  border: 1px solid var(--brand-border);
  border-radius: 12px;
  padding: 10px;
  margin: 6px 0 10px;
  background: #fff;
}
.brand-strength-logo-current img {
  width: 44px;
  height: 44px;
  object-fit: contain;
  border-radius: 10px;
  background: #f5f6fb;
  border: 1px solid #eceef5;
  flex-shrink: 0;
}
.brand-strength-logo-current-title {
  font-weight: 700;
  color: var(--brand-ink);
  font-size: 13px;
}
.brand-strength-logo-current-sub {
  color: var(--brand-text-muted);
  font-size: 12px;
}
.brand-strength-editor .input:focus,
.brand-strength-editor textarea:focus,
.brand-strength-editor .select:focus {
  outline: none;
  border-color: var(--brand-primary);
  box-shadow: 0 0 0 3px rgba(147, 51, 234, 0.15);
}
.brand-strength-editor textarea {
  min-height: 120px;
  resize: vertical;
}
.brand-strength-editor-title,
.brand-strength-editor-sub,
.brand-strength-save-hint {
  font-family: 'Cairo', 'Tajawal', system-ui, -apple-system, Segoe UI, sans-serif;
}
html[dir="rtl"] .brand-strength-editor .input,
html[dir="rtl"] .brand-strength-editor textarea,
html[dir="rtl"] .brand-strength-editor .select,
html[dir="rtl"] .brand-strength-control {
  text-align: right !important;
}
.brand-strength-save-hint {
  font-size: 11px;
  color: var(--text-muted);
  margin-top: 8px;
}
.brand-strength-examples-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
}
.brand-strength-example-card {
  border: 0;
  border-radius: 14px;
  min-height: 96px;
  padding: 8px 8px 10px;
  background: #fff;
  position: relative;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.06), 0 10px 24px rgba(15, 23, 42, 0.06);
}
.brand-strength-example-card img {
  width: 100%;
  height: 84px;
  object-fit: cover;
  border-radius: 10px;
}
.brand-strength-dropzone {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 74px;
  margin: 12px 0;
  border-radius: 12px;
  border: 1.5px solid color-mix(in srgb, var(--brand-accent) 58%, #cbd5e1);
  background: color-mix(in srgb, var(--brand-accent) 5%, #f8fafc);
  color: color-mix(in srgb, var(--brand-accent) 68%, #475569);
  font-size: 13px;
  cursor: pointer;
  transition: border-color 0.2s ease, background-color 0.2s ease, color 0.2s ease;
}
.brand-strength-dropzone:hover,
.brand-strength-dropzone:focus-visible {
  border-color: color-mix(in srgb, var(--brand-accent) 70%, #cbd5e1);
  background: color-mix(in srgb, var(--brand-accent) 8%, #f8fafc);
  color: color-mix(in srgb, var(--brand-accent) 78%, #334155);
}
.brand-strength-editor #bs-logo-drop {
  border-color: color-mix(in srgb, var(--brand-accent) 58%, #cbd5e1);
  background: color-mix(in srgb, var(--brand-accent) 5%, #f8fafc);
}
.brand-strength-editor #bs-logo-drop:hover,
.brand-strength-editor #bs-logo-drop.drag-over,
.brand-strength-editor #bs-logo-drop.has-file {
  border-color: color-mix(in srgb, var(--brand-accent) 70%, #cbd5e1);
  background: color-mix(in srgb, var(--brand-accent) 8%, #f8fafc);
}
.brand-strength-example-remove {
  position: absolute;
  top: 12px;
  inset-inline-end: 12px;
  width: 24px;
  height: 24px;
  border: 0;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: rgba(15, 23, 42, 0.55);
  color: #fff;
  cursor: pointer;
}
.brand-strength-example-remove .icon {
  width: 14px;
  height: 14px;
}
.brand-strength-example-reorder {
  margin-top: 8px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}
.brand-strength-ai-panel {
  margin-top: 16px;
  display: grid;
  gap: 14px;
  opacity: 0;
  transform: translateY(6px);
  transition: opacity 220ms ease, transform 220ms ease;
}
.brand-strength-ai-panel.is-visible {
  opacity: 1;
  transform: translateY(0);
}
.brand-strength-ai-panel.bs-system-layout {
  grid-template-columns: minmax(0, 1fr) 220px;
  align-items: start;
  gap: 12px;
}
.bs-system-left {
  display: grid;
  gap: 10px;
  min-width: 0;
}
.bs-system-right {
  display: grid;
  gap: 10px;
  align-content: start;
}
.bs-system-meta-card {
  border: 1px solid #e2e8f0;
  border-radius: 12px;
  padding: 12px;
  background: #ffffff;
}
.bs-system-meta-label {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #64748b;
}
.bs-system-meta-score {
  margin-top: 6px;
  font-size: 28px;
  font-weight: 700;
  line-height: 1;
  color: #0f172a;
}
.bs-system-meta-note {
  margin-top: 6px;
  font-size: 12px;
  line-height: 1.45;
  color: #334155;
}
.bs-system-card {
  border: 1px solid #e2e8f0;
  border-radius: 12px;
  background: #ffffff;
  padding: 12px;
}
.bs-system-card-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 8px;
}
.bs-system-card-head h4 {
  margin: 0;
  font-size: 13px;
  font-weight: 700;
  color: #0f172a;
}
.bs-system-edit-btn {
  border: 1px solid #e2e8f0;
  background: #ffffff;
  color: #475569;
  border-radius: 999px;
  min-height: 24px;
  padding: 0 8px;
  font-size: 11px;
  font-weight: 500;
  cursor: pointer;
}
.bs-system-edit-btn:hover {
  border-color: #cbd5e1;
  color: #0f172a;
}
.bs-system-card-list,
.bs-system-card-text {
  margin: 0;
  font-size: 12px;
  line-height: 1.55;
  color: #334155;
}
.bs-system-card-list {
  padding-inline-start: 17px;
  display: grid;
  gap: 5px;
}
.bs-system-card-text {
  display: -webkit-box;
  -webkit-line-clamp: 4;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.bs-system-card-editor {
  width: 100%;
  margin-top: 8px;
  border: 1px solid #cbd5e1;
  border-radius: 10px;
  background: #ffffff;
  color: #0f172a;
  padding: 8px 10px;
  font-size: 12px;
  line-height: 1.55;
  resize: vertical;
}
.bs-system-card-actions {
  margin-top: 8px;
  display: flex;
  justify-content: flex-end;
  gap: 8px;
}
.brand-strength-actions.brand-strength-actions--final {
  position: sticky;
  bottom: 0;
  z-index: 2;
  background: #ffffff;
  padding-top: 10px;
  border-top: 1px solid #e5e7eb;
}
.brand-strength-ai-section {
  padding: 4px 0;
}
.brand-strength-ai-section h4 {
  margin: 0 0 8px;
  font-size: 13px;
  letter-spacing: 0.01em;
  color: #111827;
}
.brand-strength-ai-dna {
  margin: 0;
  font-size: 14px;
  color: #1f2937;
  line-height: 1.6;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.brand-strength-ai-section ul {
  margin: 0;
  padding-inline-start: 18px;
  color: #334155;
  display: grid;
  gap: 6px;
}
.brand-strength-tone-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.brand-strength-tone-pill {
  display: inline-flex;
  align-items: center;
  min-height: 28px;
  padding: 0 10px;
  border-radius: 999px;
  background: #f1f5f9;
  color: #334155;
  font-size: 12px;
  font-weight: 500;
}
.brand-strength-ai-empty {
  margin: 0;
  color: #94a3b8;
  font-size: 13px;
}
.brand-strength-analysis {
  margin-top: 14px;
  border: 0;
  border-radius: 0;
  padding: 0;
  background: transparent;
}
.brand-strength-analysis pre {
  white-space: pre-wrap;
  margin: 0;
  font-size: 12px;
  color: var(--text);
}
.brand-strength-actions {
  display: flex;
  flex-wrap: nowrap;
  gap: 10px;
  margin-top: 18px;
}
.brand-strength-actions .button {
  flex: 1 1 0;
}
.brand-strength-ghost-btn {
  background: transparent !important;
  color: #475569 !important;
  border: 1px solid #e2e8f0 !important;
  font-weight: 500;
}
.brand-strength-ghost-btn:hover {
  background: #f8fafc !important;
  color: #0f172a !important;
  border-color: #cbd5e1 !important;
}
@media (max-width: 960px) {
  .brand-strength-indicator[data-variant="header"],
  .brand-strength-indicator[data-variant="card-collapsed"] {
    height: 36px;
    min-width: 176px;
    max-width: 210px;
    padding: 0 8px;
    gap: 8px;
  }
  .bs-header-score strong {
    font-size: 20px;
  }
  .bs-fast-cards {
    grid-template-columns: 1fr;
  }
  .bs-segments-modal {
    max-width: 88%;
  }
  .brand-strength-modal .modal-card {
    width: 100vw;
    max-width: 100vw;
    max-height: 100dvh;
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
  }
  .bs-task-modal {
    padding: 10px;
  }
  .bs-task-modal-card {
    width: min(100%, calc(100% - 8px));
    max-height: calc(100% - 8px);
    padding: 14px;
    border-radius: 14px;
  }
  .brand-strength-core {
    min-height: 0;
    padding: 16px;
  }
  .brand-strength-examples-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .brand-strength-actions {
    flex-wrap: wrap;
  }
  .brand-strength-actions .button {
    flex: 1 1 100%;
  }
  .brand-strength-ai-panel.bs-system-layout {
    grid-template-columns: 1fr;
  }
  .bs-system-right {
    grid-template-columns: 1fr 1fr;
  }
  .brand-strength-actions.brand-strength-actions--final {
    position: static;
    border-top: 0;
    padding-top: 0;
  }
  /* Keep task close on the card; global mobile .modal-close is viewport-fixed and blocks the nested overlay */
  .brand-strength-modal .bs-task-modal-card > .modal-close[data-task-modal-close] {
    position: absolute;
    top: 12px;
    right: 12px;
    left: auto;
    z-index: 25;
  }
  html[dir="rtl"] .brand-strength-modal .bs-task-modal-card > .modal-close[data-task-modal-close],
  [dir="rtl"] .brand-strength-modal .bs-task-modal-card > .modal-close[data-task-modal-close],
  .rtl .brand-strength-modal .bs-task-modal-card > .modal-close[data-task-modal-close] {
    right: auto;
    left: 12px;
  }
}

/* Brand Strength modal v2 rebuild */
.brand-strength-modal .bs-v2 {
  background: #ffffff;
}
.brand-strength-modal .bs-v2-header {
  padding-bottom: 12px;
  border-bottom: 1px solid #e5e7eb;
  margin-bottom: 24px;
}
.brand-strength-modal .bs-v2-title {
  margin: 0;
  font-size: 28px;
  line-height: 1.2;
  font-weight: 700;
  color: #111827;
}
.brand-strength-modal .bs-v2-sub {
  margin: 8px 0 0;
  font-size: 14px;
  line-height: 1.45;
  color: #4b5563;
}
.brand-strength-modal .bs-v2-score-card {
  width: min(560px, 100%);
  margin: 0 auto 24px;
  background: #ffffff;
  border: 1px solid #e5e7eb;
  border-radius: 16px;
  padding: 24px;
}
.brand-strength-modal .bs-v2-score-wrap {
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: 6px;
}
.brand-strength-modal .bs-v2-status {
  margin-top: 4px;
  display: flex;
  justify-content: center;
}
.brand-strength-modal .bs-v2-status-tag {
  display: inline-flex;
  align-items: center;
  min-height: 22px;
  padding: 0 9px;
  border-radius: 999px;
  border: 1px solid #dbe1ea;
  color: #475569;
  background: #ffffff;
  font-size: 11px;
  font-weight: 500;
}
.brand-strength-modal .bs-v2-score {
  font-size: 60px;
  line-height: 1;
  font-weight: 700;
  letter-spacing: -0.03em;
  color: #111827;
}
.brand-strength-modal .bs-v2-outof {
  font-size: 15px;
  color: #6b7280;
}
.brand-strength-modal .bs-v2-segments {
  margin: 12px auto 0;
  max-width: 420px;
  width: 100%;
}
.brand-strength-modal .bs-v2-segments .bs-seg {
  height: 6px;
  background: #d1d5db;
}
.brand-strength-modal .bs-v2-segments .bs-seg-fill {
  background: var(--brand-accent);
}
.brand-strength-modal .bs-v2-remaining {
  margin-top: 10px;
  text-align: center;
  font-size: 13px;
  color: #6b7280;
}
.brand-strength-modal .bs-v2-section {
  margin: 0 0 24px;
}
.brand-strength-modal .bs-v2-divider {
  height: 1px;
  background: #e5e7eb;
  margin: 24px 0;
}
.brand-strength-modal .bs-v2-section-title {
  margin: 0 0 8px;
  font-size: 16px;
  line-height: 1.3;
  font-weight: 500;
  color: #111827;
}
.brand-strength-modal .bs-v2-rows {
  display: flex;
  flex-direction: column;
}
.brand-strength-modal .bs-v2-quick-row,
.brand-strength-modal .bs-v2-task-row {
  border: 0;
  border-bottom: 1px solid #e5e7eb;
  background: transparent;
  border-radius: 0;
  padding: 12px 0;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  text-align: start;
  width: 100%;
  cursor: pointer;
}
.brand-strength-modal .bs-v2-quick-row {
  border-inline-start: 3px solid var(--brand-accent);
  padding-inline-start: 10px;
}
.brand-strength-modal .bs-v2-all-tasks .bs-v2-task-row:not(.is-done) {
  border-inline-start: 3px solid var(--brand-accent);
  padding-inline-start: 10px;
}
.brand-strength-modal .bs-v2-quick-row:hover,
.brand-strength-modal .bs-v2-task-row:hover {
  background: #f9fafb;
}
.brand-strength-modal .bs-v2-quick-main,
.brand-strength-modal .bs-v2-task-main {
  display: grid;
  gap: 8px;
  min-width: 0;
  flex: 1;
}
.brand-strength-modal .bs-v2-row-title {
  font-size: 16px;
  line-height: 1.25;
  font-weight: 500;
  color: #111827;
}
.brand-strength-modal .bs-v2-row-desc {
  font-size: 13px;
  line-height: 1.45;
  color: #4b5563;
}
.brand-strength-modal .bs-v2-quick-side,
.brand-strength-modal .bs-v2-task-side {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}
.brand-strength-modal .bs-v2-reward-stack {
  display: inline-flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 6px;
}
.brand-strength-modal .bs-v2-arrow {
  font-size: 15px;
  color: #9ca3af;
  line-height: 1;
}
.brand-strength-modal .bs-v2-points {
  display: inline-flex;
  align-items: center;
  min-height: 22px;
  padding: 0 8px;
  border-radius: 999px;
  border: 1px solid color-mix(in srgb, var(--brand-accent) 28%, #dbe1ea);
  color: color-mix(in srgb, var(--brand-accent) 64%, #334155);
  background: color-mix(in srgb, var(--brand-accent) 8%, #ffffff);
  font-size: 11px;
  font-weight: 700;
}
.brand-strength-modal .bs-v2-reward-summary {
  display: inline-flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 4px;
}
.brand-strength-modal .bs-v2-reward-label {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: #6b7280;
  font-size: 11px;
  font-weight: 700;
}
.brand-strength-modal .bs-v2-reward-trophy {
  font-size: 15px;
  transform: translateY(2px);
}
.brand-strength-modal .bs-v2-reward-credits {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
  justify-content: flex-end;
}
.brand-strength-modal .bs-v2-reward-credit {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  min-height: 22px;
  padding: 0 8px;
  border-radius: 999px;
  border: 1px solid rgba(16, 185, 129, 0.22);
  background: rgba(16, 185, 129, 0.08);
  color: #047857;
  font-size: 11px;
  font-weight: 700;
}
.brand-strength-modal .bs-v2-reward-credit-icon {
  width: 12px;
  height: 12px;
  display: inline-block;
}
.brand-strength-modal .bs-v2-reward-credit svg {
  width: 12px;
  height: 12px;
  stroke-width: 2;
}
.brand-strength-modal .bs-v2-reward-credit-value {
  line-height: 1;
}
.brand-strength-modal .bs-v2-done-tag {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  min-height: 22px;
  padding: 0 8px;
  border-radius: 999px;
  border: 1px solid color-mix(in srgb, var(--brand-accent) 28%, #dbe1ea);
  color: color-mix(in srgb, var(--brand-accent) 62%, #334155);
  background: color-mix(in srgb, var(--brand-accent) 8%, #ffffff);
  font-size: 11px;
  font-weight: 500;
}
.brand-strength-modal .bs-v2-task-row.is-done .bs-v2-reward-summary {
  margin-top: 2px;
}
.brand-strength-modal .brand-strength-inline-check {
  color: color-mix(in srgb, var(--brand-accent) 58%, #334155);
  font-size: 11px;
  line-height: 1;
}
.brand-strength-modal .bs-v2-task-row.is-done {
  opacity: 0.72;
}
.brand-strength-modal .bs-v2-task-row.is-done .bs-v2-row-desc,
.brand-strength-modal .bs-v2-task-row.is-done .brand-strength-task-preview {
  opacity: 0.7;
}
.brand-strength-modal .brand-strength-task-preview {
  margin: 0;
  font-size: 12px;
  line-height: 1.4;
  color: #6b7280;
}
.brand-strength-modal .brand-strength-editor-reward {
  margin: 2px 0 12px;
}
.brand-strength-modal .brand-strength-editor-reward .bs-v2-reward-summary {
  align-items: flex-start;
}
.brand-strength-modal .brand-strength-editor-reward .bs-v2-reward-credits {
  justify-content: flex-start;
}
html[dir="rtl"] .brand-strength-modal .bs-v2-reward-stack,
[dir="rtl"] .brand-strength-modal .bs-v2-reward-stack,
html[dir="rtl"] .brand-strength-modal .bs-v2-reward-summary,
[dir="rtl"] .brand-strength-modal .bs-v2-reward-summary,
html[dir="rtl"] .brand-strength-modal .bs-v2-reward-credits,
[dir="rtl"] .brand-strength-modal .bs-v2-reward-credits {
  align-items: flex-start;
  justify-content: flex-start;
}
.brand-strength-modal .bs-v2-empty {
  padding: 10px 0;
  font-size: 13px;
  color: #6b7280;
}

/* Knowledge base mobile hardening: avoid horizontal overflow from global mobile container rules */
@media (max-width: 900px) {
  .knowledge-base-page {
    overflow-x: hidden;
  }

  .knowledge-base-page .container {
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
    padding: 16px !important;
    margin: 0 auto 40px !important;
    gap: 16px;
  }

  .knowledge-base-page .kb-content-area,
  .knowledge-base-page .knowledge-base-section,
  .knowledge-base-page .knowledge-base-section .card,
  .knowledge-base-page .knowledge-base-intro,
  .knowledge-base-page .kb-support-notice {
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
  }
}

/* ═══ Ambassador tab (profile) ═══ */
#tab-ambassador .ambassador-calculator-card {
  padding: 28px 24px;
}
#tab-ambassador .ambassador-calc-title {
  font-size: 17px;
  font-weight: 700;
  color: var(--brand-ink);
  margin: 0 0 20px;
  text-align: center;
}
#tab-ambassador .ambassador-calc-result {
  text-align: center;
  padding: 20px 0 24px;
  border-bottom: 1px solid var(--brand-border);
  margin-bottom: 24px;
}
#tab-ambassador .ambassador-calc-label,
#tab-ambassador .ambassador-calc-sublabel {
  font-size: 14px;
  color: var(--brand-muted);
}
#tab-ambassador .ambassador-calc-value {
  font-size: 40px;
  font-weight: 700;
  letter-spacing: -0.03em;
  color: var(--brand-primary);
}
#tab-ambassador .ambassador-calc-inputs {
  display: flex;
  flex-direction: column;
  gap: 20px;
}
#tab-ambassador .ambassador-calc-row {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
#tab-ambassador .ambassador-calc-row label {
  font-size: 14px;
  font-weight: 500;
  color: var(--brand-ink);
}
#tab-ambassador .ambassador-calc-display {
  font-size: 13px;
  color: var(--brand-primary);
  font-weight: 500;
}
#tab-ambassador input[type="range"] {
  -webkit-appearance: none;
  width: 100%;
  height: 8px;
  border-radius: 4px;
  background: var(--brand-border);
  outline: none;
}
#tab-ambassador input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--brand-primary);
  cursor: pointer;
  box-shadow: 0 2px 8px rgba(124, 58, 237, 0.4);
}
#tab-ambassador .ambassador-calc-note {
  font-size: 12px;
  margin: 16px 0 0;
  text-align: center;
}
#tab-ambassador .ambassador-section-title {
  font-size: 18px;
  font-weight: 700;
  color: var(--brand-ink);
  margin: 32px 0 16px;
}
#tab-ambassador .ambassador-steps-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
}
@media (max-width: 900px) {
  #tab-ambassador .ambassador-steps-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (max-width: 500px) {
  #tab-ambassador .ambassador-steps-grid {
    grid-template-columns: 1fr;
  }
}
#tab-ambassador .ambassador-step-card {
  background: rgba(147, 51, 234, 0.06);
  border: 1px solid rgba(147, 51, 234, 0.15);
  border-radius: 14px;
  padding: 20px 18px;
  text-align: center;
  transition: box-shadow 0.2s, transform 0.2s;
}
#tab-ambassador .ambassador-step-card:hover {
  box-shadow: 0 6px 20px rgba(147, 51, 234, 0.12);
  transform: translateY(-2px);
}
#tab-ambassador .ambassador-step-num {
  width: 40px;
  height: 40px;
  border-radius: 10px;
  background: var(--brand-primary);
  color: white;
  font-size: 16px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 12px;
}
#tab-ambassador .ambassador-step-card h4 {
  font-size: 15px;
  font-weight: 700;
  color: var(--brand-ink);
  margin: 0 0 6px;
}
#tab-ambassador .ambassador-step-card p {
  font-size: 13px;
  color: var(--brand-muted);
  line-height: 1.5;
  margin: 0;
}
#tab-ambassador .ambassador-benefits-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 16px;
}
@media (max-width: 600px) {
  #tab-ambassador .ambassador-benefits-grid {
    grid-template-columns: 1fr;
  }
}
#tab-ambassador .ambassador-benefit-card {
  background: var(--brand-card);
  border: 1px solid var(--brand-border);
  border-radius: 14px;
  padding: 18px 20px;
  display: flex;
  gap: 14px;
  align-items: flex-start;
  transition: box-shadow 0.2s, border-color 0.2s;
}
#tab-ambassador .ambassador-benefit-card:hover {
  box-shadow: 0 4px 16px rgba(147, 51, 234, 0.08);
  border-color: rgba(147, 51, 234, 0.25);
}
#tab-ambassador .ambassador-benefit-icon {
  width: 40px;
  height: 40px;
  border-radius: 10px;
  background: rgba(147, 51, 234, 0.12);
  color: var(--brand-primary);
  font-size: 18px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
#tab-ambassador .ambassador-benefit-card h4 {
  font-size: 15px;
  font-weight: 700;
  color: var(--brand-ink);
  margin: 0 0 4px;
}
#tab-ambassador .ambassador-benefit-card p {
  font-size: 13px;
  color: var(--brand-muted);
  line-height: 1.5;
  margin: 0;
}
#tab-ambassador .ambassador-promote-list {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}
#tab-ambassador .ambassador-promote-pill {
  background: rgba(147, 51, 234, 0.08);
  color: var(--brand-ink);
  padding: 8px 14px;
  border-radius: 999px;
  font-size: 13px;
  font-weight: 500;
  border: 1px solid rgba(147, 51, 234, 0.15);
}
#tab-ambassador .ambassador-faq-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
#tab-ambassador .ambassador-faq-item {
  background: #f8f9fb;
  border-radius: 14px;
  overflow: hidden;
  transition: background 0.2s;
}
#tab-ambassador .ambassador-faq-question {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  width: 100%;
  padding: 18px 20px;
  background: none;
  border: none;
  cursor: pointer;
  font-family: inherit;
  font-size: 15px;
  font-weight: 700;
  color: var(--brand-ink);
  text-align: start;
  line-height: 1.5;
}
#tab-ambassador .ambassador-faq-icon {
  flex-shrink: 0;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--brand-ink);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform 0.3s ease;
}
#tab-ambassador .ambassador-faq-icon svg {
  width: 14px;
  height: 14px;
  stroke: #fff;
  fill: none;
  stroke-width: 2.5;
  stroke-linecap: round;
}
#tab-ambassador .ambassador-faq-item.is-open .ambassador-faq-icon {
  transform: rotate(45deg);
}
#tab-ambassador .ambassador-faq-answer {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.35s ease, padding 0.35s ease;
}
#tab-ambassador .ambassador-faq-answer-inner {
  padding: 0 20px 18px;
  font-size: 14px;
  font-weight: 500;
  color: var(--brand-muted);
  line-height: 1.7;
}
#tab-ambassador .ambassador-faq-item.is-open .ambassador-faq-answer {
  max-height: 500px;
}

/* ===== Talking Characters wizard (forked from UGC; separate tc-* classes) ===== */
#tc-wizard-step-2 .step-panel-title,
#tc-wizard-step-3 .step-panel-title,
#tc-wizard-step-4 .step-panel-title,
#tc-wizard-step-5 .step-panel-title {
  font-size: clamp(22px, 2.8vw, 28px);
  line-height: 1.15;
  letter-spacing: -0.02em;
}
#tc-wizard-step-2 .step-panel-desc,
#tc-wizard-step-4 .step-panel-desc {
  margin: 8px 0 0;
  font-size: 14px;
  line-height: 1.55;
  color: var(--brand-muted, #64748b);
}
.tc-panel {
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.tc-characters-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(128px, 1fr));
  gap: 10px;
}
.tc-character-card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 8px;
  border-radius: 14px;
  border: 2px solid rgba(148, 163, 184, 0.22);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.98) 0%, rgba(248, 250, 252, 0.98) 100%);
  box-shadow: 0 6px 18px rgba(15, 23, 42, 0.05);
  cursor: pointer;
  transition: border-color 0.15s ease, box-shadow 0.15s ease, transform 0.12s ease;
}
.tc-character-card.is-menu-open {
  z-index: 4;
}
.tc-character-card:hover {
  border-color: rgba(124, 58, 237, 0.35);
}
.tc-character-card:focus-visible {
  outline: none;
  border-color: var(--brand-primary, #7c3aed);
  box-shadow: 0 0 0 3px rgba(124, 58, 237, 0.15);
}
.tc-character-card.is-selected {
  border-color: var(--brand-primary, #7c3aed);
  background: linear-gradient(180deg, rgba(124, 58, 237, 0.06) 0%, rgba(255, 255, 255, 0.98) 100%);
  box-shadow: 0 0 0 3px rgba(124, 58, 237, 0.14), 0 8px 22px rgba(124, 58, 237, 0.1);
}
.tc-character-card-media {
  position: relative;
  aspect-ratio: 1 / 1;
  border-radius: 10px;
  overflow: hidden;
  background: rgba(15, 23, 42, 0.04);
}
.tc-character-card-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.tc-character-card-menu-wrap {
  position: absolute;
  top: 14px;
  left: 14px;
  z-index: 3;
}
html[dir="rtl"] .tc-character-card-menu-wrap,
[dir="rtl"] .tc-character-card-menu-wrap {
  left: 14px;
  right: auto;
}
.tc-character-menu-trigger {
  width: 26px;
  height: 26px;
  padding: 0;
  border-radius: 8px;
  border: 1px solid rgba(148, 163, 184, 0.4);
  background: rgba(255, 255, 255, 0.96);
  color: #64748b;
  font-size: 16px;
  line-height: 1;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 2px 8px rgba(15, 23, 42, 0.1);
}
.tc-character-menu-trigger:hover,
.tc-character-menu-trigger:focus-visible {
  color: #334155;
  border-color: rgba(100, 116, 139, 0.55);
  background: #fff;
  outline: none;
}
.tc-character-menu-trigger:disabled {
  opacity: 0.55;
  cursor: not-allowed;
}
.tc-character-menu {
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  min-width: 132px;
  background: #fff;
  border: 1px solid rgba(148, 163, 184, 0.28);
  border-radius: 10px;
  box-shadow: 0 10px 24px rgba(15, 23, 42, 0.14);
  padding: 4px;
  z-index: 5;
}
.tc-character-menu-item {
  width: 100%;
  border: 0;
  background: transparent;
  text-align: start;
  padding: 7px 10px;
  border-radius: 7px;
  font-size: 12px;
  font-weight: 500;
  color: #334155;
  cursor: pointer;
  font-family: inherit;
}
.tc-character-menu-item:hover {
  background: #f8fafc;
}
.tc-character-menu-item:disabled {
  opacity: 0.55;
  cursor: not-allowed;
}
.tc-character-menu-item-danger {
  color: #dc2626;
}
.tc-character-menu-item-danger:hover {
  background: rgba(239, 68, 68, 0.08);
}
.tc-character-card-body {
  display: flex;
  flex-direction: column;
  gap: 1px;
  min-width: 0;
  padding: 0 2px;
}
.tc-character-card-name {
  font-weight: 700;
  font-size: 13px;
  line-height: 1.25;
  word-break: break-word;
}
.tc-character-card-style {
  font-size: 11px;
}
.tc-character-card.is-regenerating {
  pointer-events: none;
}
.tc-character-card.is-regenerating .tc-character-menu-trigger {
  opacity: 0.55;
}
.tc-character-regenerating-overlay {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(15, 23, 42, 0.42);
  color: #fff;
  font-size: 20px;
  z-index: 2;
}
.tc-character-preview-overlay {
  position: fixed;
  inset: 0;
  z-index: calc(var(--z-create-nested-modal) + 120);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  background: rgba(15, 23, 42, 0.78);
  backdrop-filter: blur(4px);
}
.tc-character-preview-close {
  position: fixed;
  top: 18px;
  right: 18px;
  z-index: 1;
  width: 40px;
  height: 40px;
  padding: 0;
  border: 1px solid rgba(255, 255, 255, 0.28);
  border-radius: 999px;
  background: rgba(15, 23, 42, 0.55);
  color: #fff;
  font-size: 24px;
  line-height: 1;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
html[dir="rtl"] .tc-character-preview-close,
[dir="rtl"] .tc-character-preview-close,
.rtl .tc-character-preview-close {
  right: auto;
  left: 18px;
}
.tc-character-preview-close:hover,
.tc-character-preview-close:focus-visible {
  background: rgba(15, 23, 42, 0.78);
  outline: none;
  border-color: rgba(255, 255, 255, 0.45);
}
.tc-character-preview-panel {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  max-width: min(92vw, 420px);
  width: 100%;
}
.tc-character-preview-image {
  width: 100%;
  max-height: min(72vh, 640px);
  object-fit: contain;
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.04);
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.35);
}
.tc-character-preview-meta {
  text-align: center;
  color: #fff;
}
.tc-character-preview-name {
  font-size: 16px;
  font-weight: 700;
  line-height: 1.3;
}
.tc-character-preview-style {
  margin-top: 2px;
  font-size: 13px;
  color: rgba(255, 255, 255, 0.72);
}
body.tc-character-preview-open {
  overflow: hidden;
}
.tc-characters-list > .muted {
  font-size: 13px;
  line-height: 1.5;
  margin: 0;
  padding: 12px 14px;
  border-radius: 12px;
  background: rgba(248, 250, 252, 0.9);
  border: 1px solid rgba(148, 163, 184, 0.18);
}
.tc-character-form-heading {
  margin: 4px 0 0;
  font-size: 15px;
  font-weight: 700;
  line-height: 1.3;
  color: var(--color-text, #0f172a);
}
.tc-character-form-shell {
  padding: 18px;
  border-radius: 18px;
  border: 1px solid rgba(148, 163, 184, 0.22);
  background: #fff;
  box-shadow: 0 10px 28px rgba(15, 23, 42, 0.05);
}
.tc-character-form-layout {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 20px;
  align-items: start;
}
.tc-character-form-media {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 8px;
  width: 148px;
  flex-shrink: 0;
}
.tc-character-picker-wrap {
  position: relative;
  width: 112px;
  height: 112px;
  align-self: center;
}
.tc-character-picker {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border-radius: 20px;
  border: 2px dashed rgba(148, 163, 184, 0.45);
  background: linear-gradient(180deg, #fafafa 0%, #f4f6f8 100%);
  color: var(--brand-muted, #94a3b8);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  overflow: hidden;
  transition: border-color 0.15s, box-shadow 0.15s, transform 0.12s;
}
.tc-character-picker:hover,
.tc-character-picker:focus-visible {
  border-color: var(--brand-primary, #7c3aed);
  box-shadow: 0 0 0 3px rgba(124, 58, 237, 0.12);
}
.tc-character-picker.has-image {
  border-style: solid;
  border-color: rgba(124, 58, 237, 0.35);
}
.tc-character-picker-plus {
  font-size: 34px;
  line-height: 1;
  font-weight: 400;
}
.tc-character-picker-preview {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.tc-character-picker-preview[hidden] {
  display: none !important;
}
.tc-character-picker-remove {
  position: absolute;
  top: 6px;
  left: 6px;
  z-index: 2;
  width: 24px;
  height: 24px;
  border-radius: 999px;
  border: 1px solid rgba(148, 163, 184, 0.35);
  background: rgba(255, 255, 255, 0.96);
  color: var(--brand-muted, #64748b);
  font-size: 15px;
  line-height: 1;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 2px 8px rgba(15, 23, 42, 0.12);
}
.tc-character-picker-remove[hidden] {
  display: none !important;
}
.tc-character-picker-remove:hover {
  color: #ef4444;
  border-color: rgba(239, 68, 68, 0.35);
}
.tc-character-upload-hint {
  margin: 0;
  font-size: 11px;
  line-height: 1.4;
  text-align: center;
}
.tc-character-form-fields {
  display: flex;
  flex-direction: column;
  gap: 10px;
  min-width: 0;
  padding-top: 2px;
}
.tc-character-form-shell .voice-input-wrap .voice-mic-btn {
  display: none !important;
}
.tc-character-form-shell .voice-input-wrap input[type="text"] {
  padding-inline-end: 12px;
}
.tc-character-form-shell .field.tc-field > label {
  display: block;
  font-size: 12px;
  font-weight: 500;
  color: var(--brand-ink, #0f172a);
  margin-bottom: 6px;
}
#create-panel .tc-character-form-shell .field.tc-field > label {
  font-size: 12px;
  font-weight: 500;
}
.tc-input,
.tc-select,
.tc-character-form-shell .field.tc-field input,
.tc-character-form-shell .field.tc-field select {
  width: 100%;
  max-width: 320px;
  min-height: 42px;
  padding: 9px 12px;
  border: 1px solid var(--brand-border, #d1d5db);
  border-radius: 12px;
  background: #fff;
  font-size: 13px;
  line-height: 1.4;
  box-sizing: border-box;
}
#create-panel .tc-character-form-shell .field.tc-field input,
#create-panel .tc-character-form-shell .field.tc-field select,
#create-panel .tc-character-form-shell .tc-input,
#create-panel .tc-character-form-shell .tc-select {
  font-size: 13px;
}
#create-panel .tc-character-form-shell .field.tc-field input::placeholder,
#create-panel .tc-character-form-shell .field.tc-field textarea::placeholder {
  font-size: 13px;
}
.tc-field-style .tc-select,
.tc-field-style select {
  max-width: 240px;
}
.tc-input:focus,
.tc-select:focus,
.tc-character-form-shell .field.tc-field input:focus,
.tc-character-form-shell .field.tc-field select:focus {
  outline: none;
  border-color: var(--brand-primary, #7c3aed);
  box-shadow: 0 0 0 3px rgba(124, 58, 237, 0.12);
}
.tc-character-form-status {
  min-height: 0;
  font-size: 12px;
  color: var(--brand-muted, #64748b);
}
.tc-character-form-status .loading-pill {
  margin: 0;
  width: 100%;
  justify-content: center;
}
.tc-character-form-shell.is-busy .tc-character-form-fields {
  opacity: 0.78;
}
.tc-character-form-shell.is-busy .tc-character-form-media {
  opacity: 0.78;
}
.tc-character-picker.is-disabled {
  opacity: 0.65;
  cursor: wait;
  pointer-events: none;
}
.tc-add-character-btn {
  width: 100%;
  min-width: 0;
  min-height: 38px;
  margin-top: 2px;
  font-size: 13px;
  font-weight: 500;
}
#create-panel .tc-character-form-shell .tc-add-character-btn.button {
  font-size: 13px;
  min-height: 38px;
  padding: 0 14px;
}
.tc-add-character-btn.is-generating {
  pointer-events: none;
  cursor: wait;
  opacity: 0.94;
}
@media (max-width: 640px) {
  .tc-character-form-layout {
    grid-template-columns: 1fr;
    gap: 16px;
  }
  .tc-character-form-media {
    width: 100%;
    flex-direction: column;
    align-items: stretch;
    gap: 8px;
  }
  .tc-character-picker-wrap {
    align-self: center;
  }
  .tc-character-upload-hint {
    text-align: center;
  }
  .tc-input,
  .tc-select,
  .tc-character-form-shell .field.tc-field input,
  .tc-character-form-shell .field.tc-field select,
  .tc-field-style .tc-select,
  .tc-field-style select {
    max-width: none;
  }
  .tc-add-character-btn {
    width: 100%;
  }
}
.tc-settings-panel {
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.tc-settings-row {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}
.tc-settings-row .field {
  margin-bottom: 0;
}
.tc-settings-row .field > label {
  font-size: 13px;
  font-weight: 500;
}
.ugc-segment-scene-card .tc-segment-character-row {
  display: grid;
  grid-template-columns: 56px minmax(0, 1fr) auto;
  gap: 12px;
  align-items: end;
  margin-bottom: 14px;
}
.tc-segment-character-icon {
  width: 56px;
  height: 56px;
  border-radius: 12px;
  overflow: hidden;
  background: rgba(15, 23, 42, 0.05);
  flex-shrink: 0;
  border: 2px solid transparent;
  box-sizing: border-box;
}
.tc-segment-character-icon.is-empty {
  border-style: dashed;
  border-color: rgba(148, 163, 184, 0.45);
}
.tc-segment-character-icon.is-assigned {
  border-color: rgba(148, 163, 184, 0.28);
}
.tc-segment-character-icon.is-active-character {
  border-color: var(--brand-primary, #7c3aed);
  box-shadow: 0 0 0 3px rgba(124, 58, 237, 0.12);
}
.tc-segment-character-icon.is-clickable {
  padding: 0;
  margin: 0;
  font: inherit;
  appearance: none;
  -webkit-appearance: none;
  cursor: pointer;
  transition: border-color 0.15s ease, box-shadow 0.15s ease, transform 0.15s ease;
}
.tc-segment-character-icon.is-clickable:hover,
.tc-segment-character-icon.is-clickable:focus-visible {
  border-color: var(--brand-primary, #7c3aed);
  box-shadow: 0 0 0 3px rgba(124, 58, 237, 0.14);
  outline: none;
  transform: scale(1.03);
}
.tc-segment-character-icon img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.tc-segment-character-field.field {
  margin-bottom: 0;
}
.tc-segment-character-field.field > label {
  font-size: 12px;
  font-weight: 500;
}
.tc-auto-talk-toggle {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  font-weight: 500;
  white-space: nowrap;
  cursor: pointer;
  margin-bottom: 6px;
}
.tc-auto-talk-hint {
  margin-top: 8px;
  font-size: 12px;
  line-height: 1.45;
}
.tc-summary-list {
  display: block;
}
.tc-review-card.ugc-review-card {
  margin: 0;
}
.tc-review-stats {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  margin-bottom: 14px;
}
.tc-review-stat {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
  padding: 12px 14px;
  border-radius: 14px;
  border: 1px solid rgba(148, 163, 184, 0.18);
  background: rgba(255, 255, 255, 0.72);
}
.tc-review-stat--credits {
  background: color-mix(in srgb, var(--brand-primary, #7c3aed) 7%, #fff);
  border-color: rgba(124, 58, 237, 0.16);
}
.tc-review-stat-value {
  font-size: 22px;
  font-weight: 700;
  line-height: 1.1;
  color: var(--brand-ink, #1f2937);
}
.tc-review-stat--credits .tc-review-stat-value {
  color: var(--brand-primary, #7c3aed);
}
.tc-review-stat-label {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: var(--brand-muted, #94a3b8);
}
.tc-review-tags.ugc-review-tags {
  margin-bottom: 16px;
}
.tc-review-scenes.ugc-review-videos-section {
  padding-top: 4px;
  border-top: 1px solid rgba(148, 163, 184, 0.14);
}
.tc-review-scene-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.tc-review-scene-row {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 12px 14px;
  border-radius: 14px;
  border: 1px solid rgba(148, 163, 184, 0.18);
  background: rgba(248, 250, 252, 0.85);
}
.tc-review-scene-thumb {
  width: 44px;
  height: 44px;
  border-radius: 12px;
  overflow: hidden;
  flex: 0 0 auto;
  border: 1.5px solid rgba(124, 58, 237, 0.14);
  background: color-mix(in srgb, var(--brand-primary, #7c3aed) 8%, #f8fafc);
  display: flex;
  align-items: center;
  justify-content: center;
}
.tc-review-scene-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.tc-review-scene-initial {
  font-size: 16px;
  font-weight: 700;
  color: var(--brand-primary, #7c3aed);
}
.tc-review-scene-body {
  min-width: 0;
  flex: 1 1 auto;
}
.tc-review-scene-meta {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px 10px;
  margin-bottom: 6px;
}
.tc-review-scene-index {
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--brand-primary, #7c3aed);
}
.tc-review-scene-character {
  font-size: 13px;
  font-weight: 700;
  color: var(--brand-ink, #1f2937);
}
.tc-review-scene-sep {
  color: rgba(148, 163, 184, 0.8);
  font-size: 12px;
  line-height: 1;
}
.tc-review-scene-dialogue {
  font-size: 14px;
  line-height: 1.55;
  color: var(--brand-ink, #1f2937);
  white-space: pre-wrap;
}
.tc-review-empty {
  color: var(--brand-muted, #94a3b8);
}
@media (max-width: 900px) {
  .tc-segment-character-row {
    grid-template-columns: 48px minmax(0, 1fr);
  }
  .tc-auto-talk-toggle {
    grid-column: 1 / -1;
  }
}
@media (max-width: 560px) {
  .tc-settings-row {
    grid-template-columns: 1fr;
  }
  .tc-characters-list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .tc-review-stats {
    grid-template-columns: 1fr;
  }
}

.scene-edit-modal {
  z-index: calc(var(--modal-z-index, 1200) + 4);
}
.scene-edit-card {
  width: min(980px, calc(100vw - 24px));
  max-height: calc(100vh - 32px);
  overflow: auto;
}
.scene-edit-header {
  margin-bottom: 12px;
}
.scene-edit-strip-wrap {
  margin-bottom: 12px;
}
.scene-edit-strip-label {
  font-size: 12px;
  font-weight: 500;
  margin-bottom: 8px;
  opacity: 0.8;
}
.scene-edit-strip {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.scene-edit-chip {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-width: 56px;
  padding: 8px 10px;
  border-radius: 12px;
  border: 1px solid var(--border-color, rgba(255,255,255,0.12));
  background: var(--surface-2, rgba(255,255,255,0.04));
  color: inherit;
  cursor: pointer;
}
.scene-edit-chip.active {
  border-color: var(--accent, #6d5efc);
  box-shadow: 0 0 0 1px var(--accent, #6d5efc);
}
.scene-edit-chip-num {
  font-weight: 700;
  font-size: 15px;
}
.scene-edit-chip-status {
  font-size: 10px;
  opacity: 0.85;
  margin-top: 2px;
}
.scene-edit-chip--preview_ready,
.scene-edit-chip--generating {
  border-color: rgba(245, 158, 11, 0.7);
}
.scene-edit-chip--approved {
  border-color: rgba(34, 197, 94, 0.75);
}
.scene-edit-dialogue {
  margin-bottom: 12px;
  font-size: 13px;
  line-height: 1.45;
}
.scene-edit-previews {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin-bottom: 12px;
}
.scene-edit-preview-label {
  font-size: 12px;
  font-weight: 500;
  margin-bottom: 6px;
  opacity: 0.85;
}
.scene-edit-preview-media {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: 220px;
  max-height: min(360px, 52vh);
  border-radius: 12px;
  background: #000;
  overflow: hidden;
}
.scene-edit-preview-media video,
.scene-edit-preview-media .lazy-video-preview {
  width: auto;
  max-width: 100%;
  height: auto;
  max-height: min(360px, 52vh);
  margin: 0 auto;
  border-radius: 12px;
  background: #000;
  aspect-ratio: 9 / 16;
  object-fit: contain;
}
.scene-edit-preview-media .lazy-video-preview {
  position: relative;
  min-height: 0;
  overflow: hidden;
}
.scene-edit-preview-media .lazy-video-preview .video-preview {
  width: 100%;
  height: 100%;
  max-height: min(360px, 52vh);
  min-height: 0;
  object-fit: contain;
  border: 0;
  border-radius: 12px;
  background: #000;
}
.scene-edit-preview-empty {
  display: grid;
  place-items: center;
  width: 100%;
  min-height: 220px;
  border-radius: 12px;
  border: 1px dashed var(--border-color, rgba(255,255,255,0.12));
  padding: 16px;
  text-align: center;
}
.scene-edit-brand-hint {
  margin-top: 8px;
  font-size: 12px;
  line-height: 1.45;
}
.scene-edit-timing-note {
  margin-top: 8px;
  font-size: 12px;
  line-height: 1.45;
}
.scene-edit-status .scene-edit-loading-pill {
  width: 100%;
  justify-content: center;
}
.scene-edit-preview-generating {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: 100%;
  min-height: 220px;
  max-height: min(360px, 52vh);
  aspect-ratio: 9 / 16;
  margin: 0 auto;
  border-radius: 12px;
  border: 1px dashed color-mix(in srgb, var(--brand-primary, #9333ea) 35%, rgba(255,255,255,0.12));
  background: color-mix(in srgb, var(--brand-primary, #9333ea) 8%, rgba(0,0,0,0.35));
  padding: 20px 16px;
  text-align: center;
}
.scene-edit-preview-hourglass {
  font-size: 28px;
  line-height: 1;
}
.scene-edit-preview-generating-label {
  font-size: 14px;
  font-weight: 700;
  color: var(--brand-primary, #9333ea);
}
.scene-edit-preview-generating-timer {
  font-size: 13px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: color-mix(in srgb, var(--text-primary, #f4f4f5) 88%, var(--brand-primary, #9333ea));
  opacity: 1;
}
.scene-edit-chip-status .loading-hourglass {
  font-size: 11px;
}
.scene-edit-actions-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 8px;
}
.scene-edit-actions-row .button.hidden,
.scene-edit-actions-row .button[hidden] {
  display: none !important;
}
.scene-edit-footer {
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid var(--border-color, rgba(255,255,255,0.08));
}
.scene-edit-footer.hidden {
  display: none;
}
html[dir="rtl"] #scene-edit-modal .modal-close,
[dir="rtl"] #scene-edit-modal .modal-close,
.rtl #scene-edit-modal .modal-close,
html[lang="ar"] #scene-edit-modal .modal-close,
html[lang="he"] #scene-edit-modal .modal-close {
  right: auto;
  left: 16px;
}
@media (max-width: 760px) {
  .scene-edit-previews {
    grid-template-columns: 1fr;
  }
}

.user-chip-menu-item {
  position: relative;
}
.user-chip-menu-badge,
.nav-unread-badge.product-updates-nav-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  min-width: 20px;
  height: 20px;
  padding: 0 6px;
  border-radius: 999px;
  background: #ef4444;
  color: #fff;
  font-size: 0;
  font-weight: 700;
  flex-shrink: 0;
  align-self: center;
  text-align: center;
  margin-inline-start: auto;
}
.user-chip-menu-badge-count,
.nav-unread-badge-count {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  font-size: 11px;
  font-weight: 700;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}
.user-chip-unread-badge {
  display: grid;
  place-items: center;
  min-width: 18px;
  height: 18px;
  margin-inline-start: 6px;
  padding: 0 5px;
  border-radius: 999px;
  background: #ef4444;
  color: #fff;
  font-size: 0;
  font-weight: 700;
  flex: 0 0 auto;
  box-shadow: 0 0 0 2px #fff;
  position: relative;
  top: -3px;
}
.user-chip-unread-badge-count {
  display: block;
  font-size: 10px;
  font-weight: 700;
  line-height: 18px;
  height: 18px;
  font-variant-numeric: tabular-nums;
  text-align: center;
  transform: translate(0, 1px);
}
.user-chip-unread-badge.hidden,
.user-chip-menu-badge.hidden,
.nav-unread-badge.product-updates-nav-badge.hidden {
  display: none;
}
.user-chip-wrap.has-product-updates-unread #user-avatar,
.user-chip.has-product-updates-unread .user-avatar {
  position: relative;
}
.user-chip-wrap.has-product-updates-unread #user-avatar::after,
.user-chip.has-product-updates-unread .user-avatar::after {
  content: '';
  position: absolute;
  top: -2px;
  inset-inline-end: -2px;
  width: 9px;
  height: 9px;
  border-radius: 999px;
  background: #ef4444;
  border: 2px solid #fff;
}

.product-updates-page .product-updates-main {
  max-width: 860px;
  margin: 0 auto;
  padding-top: 8px;
}
.product-updates-hero {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  align-items: flex-start;
  margin-bottom: 20px;
}
@media (max-width: 760px) {
  .product-updates-page .product-updates-hero {
    margin-inline: 1px;
  }
}
.product-updates-title {
  margin: 0 0 6px;
  font-size: 20px;
  font-weight: 700;
  line-height: 1.3;
}
.product-updates-subtitle {
  margin: 0;
  color: var(--brand-muted, #6b7280);
  font-size: 13px;
  line-height: 1.45;
}
.product-updates-feed {
  display: grid;
  gap: 12px;
}
.product-updates-empty {
  border: 1px dashed #cbd5e1;
  border-radius: 14px;
  padding: 20px;
  text-align: center;
  color: #64748b;
  font-size: 13px;
}
.product-updates-card {
  border: 1px solid #e2e8f0;
  border-radius: 14px;
  background: #fff;
  padding: 14px 16px;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
}
.product-updates-card.is-unread {
  border-color: rgba(124, 58, 237, 0.35);
  box-shadow: 0 8px 24px rgba(124, 58, 237, 0.08);
}
.product-updates-card-head {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 8px;
  color: #64748b;
  font-size: 12px;
}
.product-updates-category {
  display: inline-flex;
  align-items: center;
  border-radius: 999px;
  padding: 2px 8px;
  background: #f1f5f9;
  color: #475569;
  font-weight: 700;
  font-size: 11px;
}
.product-updates-unread-dot {
  width: 8px;
  height: 8px;
  border-radius: 999px;
  background: #ef4444;
}
.product-updates-date {
  margin-inline-start: auto;
}
.product-updates-card-title {
  margin: 0 0 6px;
  font-size: 15px;
  font-weight: 700;
  line-height: 1.28;
}
.product-updates-card-summary {
  margin: 0 0 10px;
  color: #475569;
  font-size: 13px;
  line-height: 1.5;
}
.product-updates-card-body {
  display: flex;
  align-items: flex-start;
  gap: 12px;
}
.product-updates-card-body:not(.has-thumb) .product-updates-card-main {
  width: 100%;
}
.product-updates-card-thumb {
  flex: 0 0 72px;
  width: 72px;
  height: 72px;
  border-radius: 10px;
  overflow: hidden;
  background: #f1f5f9;
  border: 1px solid #e2e8f0;
}
.product-updates-card-hero {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.product-updates-card-main {
  flex: 1;
  min-width: 0;
}
.product-updates-card-main .product-updates-read-btn {
  margin-top: 2px;
  min-height: 36px;
  padding: 0 14px;
  font-size: 13px;
  font-weight: 500;
}
.product-updates-hero-actions .button,
.product-updates-pagination .button {
  min-height: 36px;
  padding: 0 14px;
  font-size: 13px;
  font-weight: 500;
}
.product-updates-pagination {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  margin-top: 20px;
  font-size: 13px;
}
.product-updates-detail {
  position: fixed;
  inset: 0;
  z-index: 1400;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
}
.product-updates-detail.hidden {
  display: none;
}
.product-updates-detail-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(15, 23, 42, 0.45);
}
.product-updates-detail-card {
  position: relative;
  z-index: 1;
  width: min(760px, 100%);
  max-height: min(86vh, 900px);
  overflow: auto;
  background: #fff;
  border-radius: 16px;
  padding: 18px 20px;
  box-shadow: 0 24px 60px rgba(15, 23, 42, 0.18);
}
.product-updates-detail-card #product-updates-detail-title {
  margin: 0 0 8px;
  font-size: 19.8px;
  font-weight: 700;
  line-height: 1.35;
}
.product-updates-detail-close {
  position: absolute;
  top: 12px;
  inset-inline-end: 12px;
}
.product-updates-detail-meta {
  display: flex;
  gap: 10px;
  align-items: center;
  margin-bottom: 10px;
  color: #64748b;
  font-size: 14.3px;
}
.product-updates-detail-meta .product-updates-category {
  font-size: 12.1px;
}
.product-updates-detail-summary {
  color: #475569;
  font-size: 15.015px;
  line-height: 1.55;
  margin: 0 0 12px;
}
.product-updates-detail-hero-wrap {
  margin: 0 0 12px;
}
.product-updates-detail-hero-wrap img {
  display: block;
  width: auto;
  max-width: min(100%, 280px);
  max-height: 220px;
  object-fit: contain;
  border-radius: 12px;
  margin: 0;
}
.product-updates-detail-content {
  font-size: 15.4px;
  line-height: 1.6;
  color: #334155;
}
/* Body copy only — keep h2/h3 at the previous scale. */
.product-updates-detail-content p,
.product-updates-detail-content li,
.product-updates-detail-content blockquote {
  font-size: 16.17px;
}
.product-updates-detail-content[dir="rtl"],
.product-updates-detail-summary[dir="rtl"],
#product-updates-detail-title[dir="rtl"] {
  direction: rtl;
  text-align: right;
}
.product-updates-detail-content .pu-content-image {
  margin: 12px 0;
}
.product-updates-detail-content .pu-content-image img {
  display: block;
  width: auto;
  max-width: min(100%, 280px);
  max-height: 220px;
  height: auto;
  object-fit: contain;
  border-radius: 12px;
  border: 0;
}
.product-updates-detail-content .pu-content-image-left {
  text-align: left;
}
.product-updates-detail-content .pu-content-image-center {
  text-align: center;
}
.product-updates-detail-content .pu-content-image-right {
  text-align: right;
}
.product-updates-detail-content .pu-content-image-center img {
  margin-left: auto;
  margin-right: auto;
}
.product-updates-detail-content .pu-content-image-right img {
  margin-left: auto;
  margin-right: 0;
}
.product-updates-detail-content .pu-content-image img[width] {
  max-width: min(100%, 280px);
  width: auto;
  height: auto;
}
.product-updates-detail-content .pu-content-image-wide img {
  max-width: min(100%, 320px);
  width: auto;
}
.product-updates-detail-content img {
  display: block;
  width: auto;
  max-width: min(100%, 280px);
  max-height: 220px;
  height: auto;
  object-fit: contain;
  border-radius: 12px;
}
.product-updates-detail-zoomable {
  cursor: zoom-in;
  transition: opacity 0.15s ease, box-shadow 0.15s ease;
}
.product-updates-detail-zoomable:hover {
  opacity: 0.92;
  box-shadow: 0 4px 16px rgba(15, 23, 42, 0.12);
}
.product-updates-detail-zoomable:focus-visible {
  outline: 2px solid rgba(124, 58, 237, 0.45);
  outline-offset: 2px;
}
.product-updates-image-preview {
  position: fixed;
  inset: 0;
  z-index: 1500;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
}
.product-updates-image-preview.hidden {
  display: none;
}
.product-updates-image-preview-backdrop {
  position: absolute;
  inset: 0;
  border: 0;
  background: rgba(15, 23, 42, 0.82);
  cursor: zoom-out;
}
.product-updates-image-preview-card {
  position: relative;
  z-index: 1;
  max-width: min(960px, 100%);
  max-height: min(90vh, 900px);
}
.product-updates-image-preview-card img {
  display: block;
  max-width: 100%;
  max-height: min(90vh, 900px);
  width: auto;
  height: auto;
  object-fit: contain;
  border-radius: 12px;
  box-shadow: 0 24px 60px rgba(15, 23, 42, 0.35);
}
.product-updates-image-preview-close {
  position: absolute;
  top: -10px;
  inset-inline-end: -10px;
  z-index: 2;
  background: #fff;
  box-shadow: 0 4px 14px rgba(15, 23, 42, 0.18);
}
html[dir="rtl"] .product-updates-detail-close,
[dir="rtl"] .product-updates-detail-close {
  right: auto;
  left: 12px;
}
html[dir="rtl"] .product-updates-image-preview-close,
[dir="rtl"] .product-updates-image-preview-close {
  right: auto;
  left: -10px;
}
.product-updates-detail-actions {
  margin-top: 14px;
}
.product-updates-detail-actions .button {
  min-height: 36px;
  padding: 0 14px;
  font-size: 14.3px;
  font-weight: 500;
}

/* Video creation typography scale: consistent across prompt, image and reference modes. */
#create-panel #video-from-image-section {
  --video-type-title: 21px;
  --video-type-section: 15.5px;
  --video-type-label: 15.5px;
  --video-type-control: 14px;
  --video-type-helper: 13.5px;
  font-family: 'Tajawal', system-ui, -apple-system, 'Segoe UI', sans-serif;
  font-size: 15px;
}
#create-panel #video-from-image-section .video-create-compact-header h3 {
  font-size: var(--video-type-title);
  font-weight: 700;
}
#create-panel #video-from-image-section .video-create-compact-header p,
#create-panel #video-from-image-section .video-create-section-heading p {
  font-size: var(--video-type-helper);
  font-weight: 400;
}
#create-panel #video-from-image-section .video-create-section-heading h4,
#create-panel #video-from-image-section .video-omni-options-title {
  font-size: var(--video-type-section);
  font-weight: 650;
}
#create-panel #video-from-image-section .video-wizard-settings-panel .field > label,
#create-panel #video-from-image-section .video-wizard-settings-panel .field > div > label,
#create-panel #video-from-image-section .video-ref-label,
#create-panel #video-from-image-section .video-duration-label-row label {
  font-size: var(--video-type-label) !important;
  font-weight: 650 !important;
  line-height: 1.4;
}
#create-panel #video-from-image-section .video-wizard-settings-panel select,
#create-panel #video-from-image-section .video-wizard-settings-panel select option,
#create-panel #video-from-image-section .video-veo-locked-value {
  font-family: inherit;
  font-size: var(--video-type-control) !important;
  font-weight: 400 !important;
  line-height: 1.4;
}
#create-panel #video-from-image-section .video-wizard-settings-panel textarea {
  font-family: inherit;
  font-size: 15px !important;
  font-weight: 400;
  line-height: 1.55;
}
#create-panel #video-from-image-section .video-wizard-settings-panel .hint,
#create-panel #video-from-image-section .video-omni-availability,
#create-panel #video-from-image-section .video-duration-label-row span {
  font-size: var(--video-type-helper) !important;
  font-weight: 400;
  line-height: 1.45;
}
#create-panel #video-from-image-section .video-omni-option .video-omni-option-title {
  font-size: var(--video-type-label) !important;
  font-weight: 650;
  line-height: 1.35;
}
#create-panel #video-from-image-section .video-omni-option .video-omni-option-desc {
  font-size: var(--video-type-helper) !important;
  font-weight: 400;
  line-height: 1.4;
}
#create-panel #video-from-image-section .video-create-basic-options .video-omni-options-title {
  font-size: 13px !important;
  font-weight: 500;
}
#create-panel #video-from-image-section .video-create-basic-options .video-omni-availability {
  font-size: 11.5px !important;
}
#create-panel #video-from-image-section .video-create-basic-options .video-omni-option .video-omni-option-title {
  font-size: 13px !important;
  line-height: 1.3;
}
#create-panel #video-from-image-section .video-create-basic-options .video-omni-option .video-omni-option-desc {
  font-size: 11.5px !important;
  line-height: 1.35;
}
#create-panel #video-from-image-section .video-create-basic-options .video-omni-customize-summary {
  font-size: 11.5px;
  font-weight: 400;
}
#create-panel #video-from-image-section .video-create-basic-options .video-omni-customize-action {
  font-size: 12px;
}
#create-panel #video-from-image-section .video-create-basic-options .video-omni-suboptions label,
#create-panel #video-from-image-section .video-create-basic-options .video-omni-suboptions > label {
  font-size: 11.5px !important;
  font-weight: 500 !important;
  line-height: 1.3;
}
#create-panel #video-from-image-section .video-create-basic-options .video-omni-suboptions select,
#create-panel #video-from-image-section .video-create-basic-options .video-omni-suboptions select option {
  font-size: 12.5px !important;
  font-weight: 400 !important;
  line-height: 1.35;
  min-height: 34px;
}
#create-panel #video-from-image-section .video-omni-customize-summary {
  font-size: 14px;
  font-weight: 500;
}
#create-panel #video-from-image-section .video-omni-customize-action {
  font-size: 13.5px;
  font-weight: 500;
}
#create-panel #video-from-image-section .video-veo-duration-slider-value,
#create-panel #video-from-image-section .video-veo-frame-source-row .create-library-pick {
  font-size: var(--video-type-control);
  font-weight: 500;
}

/* Video Scene Studio */
.video-scenes-recommend.is-hard-block {
  border-color: rgba(185, 28, 28, 0.28);
  background: rgba(254, 226, 226, 0.55);
}
.video-scenes-recommend {
  margin: 10px 0 14px;
  padding: 12px 14px;
  border: 1px solid var(--brand-border, #e5e7eb);
  border-radius: 12px;
  background: linear-gradient(180deg, rgba(15, 23, 42, 0.02), rgba(15, 23, 42, 0.04));
}
.video-scenes-recommend .hint { margin: 0 0 10px; }
.video-scenes-recommend-status {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin: 0 0 10px;
}
.video-scenes-recommend-status[hidden] {
  display: none !important;
}
.video-scenes-recommend-status-pill {
  display: inline-flex;
  align-items: center;
  padding: 4px 10px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 500;
  color: #334155;
  background: #e2e8f0;
}
.video-scenes-recommend-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.video-scenes-recommend-actions[hidden] {
  display: none !important;
}
.video-scenes-recommend [data-video-scenes-recommend="keep"][hidden] {
  display: none !important;
}

#video-scenes-section .video-scenes-product-upload {
  margin: 0 0 18px;
  padding: 0;
  border: none;
  background: transparent;
  box-shadow: none;
}
#video-scenes-section .video-scenes-product-upload .video-ref-label {
  display: flex;
  align-items: center;
  gap: 6px;
  margin: 0 0 8px;
  font-size: 13px;
  font-weight: 500;
}
#video-scenes-section .video-scenes-product-upload .hint {
  margin: 8px 0 0;
  font-size: 12px;
  color: var(--brand-muted, #64748b);
}
#video-scenes-section .video-scenes-settings-stack {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
  margin-top: 4px;
  align-items: start;
}
#video-scenes-section .video-scenes-settings-stack .field,
#video-scenes-section #video-scenes-target-field.field {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin: 0;
  padding: 0;
}
@media (max-width: 768px) {
  #video-scenes-section .video-scenes-settings-stack {
    grid-template-columns: 1fr;
    gap: 16px;
  }
}
#video-scenes-section .video-scenes-settings-stack .field > label,
#video-scenes-section #video-scenes-target-field.field > label {
  margin: 0;
  color: var(--brand-ink, #1f2937);
  font-size: 13px;
  font-weight: 500;
  line-height: 1.35;
}
#video-scenes-section .video-scenes-settings-stack select {
  min-height: 44px;
  margin: 0;
  border-color: var(--brand-border, #e5e7eb);
  border-radius: 10px;
  background: #fff;
  font-size: 14px;
  font-weight: 400;
}
#video-scenes-section .video-scenes-plan-mode-field {
  margin: 18px 0 0;
}
#video-scenes-section .video-scenes-plan-mode-label {
  display: block;
  margin: 0 0 8px;
  font-size: 13px;
  font-weight: 500;
  color: var(--brand-ink, #1f2937);
}
#video-scenes-section .video-scenes-plan-switch {
  display: inline-flex;
  align-items: stretch;
  align-self: flex-start;
  width: max-content;
  max-width: 100%;
  gap: 0;
  padding: 3px;
  border: 1px solid var(--brand-border, #e5e7eb);
  border-radius: 999px;
  background: #f8fafc;
}
#video-scenes-section .video-scenes-plan-switch-option {
  position: relative;
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  margin: 0;
  width: auto;
  cursor: pointer;
  user-select: none;
}
#video-scenes-section .video-scenes-plan-switch-option input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}
#video-scenes-section .video-scenes-plan-switch-option span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 36px;
  padding: 6px 14px;
  border-radius: 999px;
  font-size: 13px;
  font-weight: 500;
  color: var(--brand-muted, #64748b);
  line-height: 1.2;
  white-space: nowrap;
  transition: background 0.18s ease, color 0.18s ease, box-shadow 0.18s ease;
}
#video-scenes-section .video-scenes-plan-switch-option input:checked + span {
  background: var(--brand-primary, #7c3aed);
  color: #fff;
  box-shadow: 0 1px 2px rgba(124, 58, 237, 0.28);
  font-weight: 700;
}
#video-scenes-section .video-scenes-plan-switch-option input:focus-visible + span {
  outline: 2px solid rgba(124, 58, 237, 0.45);
  outline-offset: 2px;
}
#video-scenes-section .video-scenes-plan-mode-field > .hint {
  margin: 8px 0 0;
  font-size: 12px;
  color: var(--brand-muted, #64748b);
  line-height: 1.45;
}
#video-scenes-section .video-scenes-settings-stack .field.is-plan-manual-focus > label {
  color: var(--brand-accent, #7c3aed);
}
#video-scenes-section #video-scenes-target-field {
  margin-top: 22px;
}
#video-scenes-section #video-scenes-target-field .video-duration-label-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 8px;
}
#video-scenes-section #video-scenes-target-field .video-duration-label-row label {
  margin: 0;
  color: var(--brand-ink, #1f2937);
  font-size: 13px;
  font-weight: 500;
  line-height: 1.35;
}
#video-scenes-section #video-scenes-target-field .video-duration-label-row span {
  color: #526174;
  font-size: 12px;
  font-weight: 400;
}
#video-scenes-section #video-scenes-target-field .video-veo-duration-slider-wrap {
  gap: 18px;
}
#video-scenes-section #video-scenes-target-field .video-veo-duration-slider-value {
  min-width: 74px;
  padding: 7px 10px;
  border-radius: 9px;
  background: #f1f5f9;
  color: var(--brand-ink, #1f2937);
  font-size: 14px;
  font-weight: 500;
  line-height: 1.35;
  text-align: center;
  white-space: nowrap;
}
@media (max-width: 640px) {
  #video-scenes-section #video-scenes-target-field .video-duration-label-row {
    align-items: flex-start;
    flex-direction: column;
    gap: 3px;
  }
}
#video-scenes-section #video-omni-scenes-options {
  margin-top: 20px;
  margin-bottom: 0;
}
#video-scenes-section #video-scenes-prompt-slot {
  display: block;
  margin-top: 18px;
}
#video-scenes-section #video-scenes-prompt-slot #creative-direction-field {
  margin: 0;
  width: 100%;
  border: 0;
  background: transparent;
  box-shadow: none;
  padding: 0;
}
#video-scenes-section #video-scenes-prompt-slot .animate-video-prompt-head {
  margin-bottom: 10px;
}
#video-scenes-section #video-scenes-prompt-slot .animated-video-write-prompt-panel {
  margin: 0;
}
#video-scenes-section #video-scenes-prompt-slot textarea#user_message {
  margin-top: 0;
}
#video-scenes-section .video-scenes-credit-hint {
  margin: 16px 0 0;
  font-size: 12px;
  font-weight: 400;
  line-height: 1.45;
  color: var(--brand-muted, #6b7280);
}

.video-scenes-modal,
.vte-modal {
  z-index: calc(var(--modal-z-index, 1200) + 4);
}
.video-scenes-modal-card,
.vte-modal-card {
  width: min(1120px, calc(100vw - 16px));
  max-height: calc(100vh - 16px);
  overflow: hidden;
  padding: 18px 20px 20px;
  display: flex;
  flex-direction: column;
  position: relative;
}
.video-scenes-modal-header,
.vte-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 14px;
  padding-inline-end: 36px;
  flex-shrink: 0;
}
.video-scenes-modal-header .modal-title,
.vte-header .modal-title {
  font-weight: 700;
  font-size: 18px;
  margin: 0 0 4px;
  font-family: 'Tajawal', system-ui, -apple-system, 'Segoe UI', sans-serif;
}
.video-scenes-modal-header .modal-subtitle,
.vte-header .modal-subtitle {
  font-size: 13px;
  font-weight: 400;
  color: var(--brand-muted, #6b7280);
  margin: 0;
}
.vte-header-actions { flex-shrink: 0; }
.vte-footer {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 10px;
  margin-top: 14px;
  padding-top: 12px;
  border-top: 1px solid var(--brand-border, #e5e7eb);
  position: relative;
  z-index: 8;
  flex-shrink: 0;
  background: var(--brand-surface, #fff);
  padding-bottom: 2px;
  min-height: 54px;
}
html[dir="rtl"] .vte-footer,
html[lang="ar"] .vte-footer,
html[lang="he"] .vte-footer {
  justify-content: flex-start; /* visual bottom-right in RTL */
}
.vte-footer-tools {
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.vte-footer-tools[hidden] {
  display: none !important;
}
.vte-footer-actions {
  display: inline-flex;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
  flex-wrap: wrap;
}
.vte-footer-actions .button[hidden] {
  display: none !important;
}
.vte-history-btn {
  min-width: 40px !important;
  width: 40px;
  height: 40px;
  padding: 0 !important;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.vte-history-btn:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}
.vte-footer .button:not(.vte-history-btn) {
  min-width: 160px;
  font-weight: 700;
}
#video-scenes-modal.vte-reviewing .vte-header {
  margin-bottom: 8px;
}
/* Review footer: always physical [Back][Export] with Export on the right. */
#video-scenes-modal.vte-reviewing .vte-footer {
  justify-content: flex-end;
  direction: ltr;
}
html[dir="rtl"] #video-scenes-modal.vte-reviewing .vte-footer,
html[lang="ar"] #video-scenes-modal.vte-reviewing .vte-footer,
html[lang="he"] #video-scenes-modal.vte-reviewing .vte-footer {
  justify-content: flex-end;
  direction: ltr;
}
#video-scenes-modal.vte-reviewing .vte-footer-tools {
  display: none !important;
}
#video-scenes-modal.vte-reviewing .vte-footer-actions {
  direction: ltr;
  display: inline-flex;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
  width: auto;
  margin: 0;
}
#video-scenes-modal.vte-reviewing .vte-footer .button:not(.vte-history-btn) {
  width: auto;
  min-width: 140px;
  font-weight: 700;
}
#video-scenes-modal.vte-reviewing #vte-btn-review-back.vte-btn-review-back {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  direction: ltr;
}
#video-scenes-modal.vte-reviewing .vte-back-arrow {
  display: inline-flex;
  font-size: 1.05em;
  font-weight: 700;
  line-height: 1;
}
/* Review music editor reuses the same editor grid as the video edit step. */
.vte-editor-review {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) minmax(260px, 0.8fr);
  gap: 16px;
  align-items: stretch;
  width: 100%;
  flex: 1;
  min-height: 0;
}
.vte-editor-review.is-final-ready {
  display: block;
  grid-template-columns: none;
}
.vte-review {
  display: flex;
  flex-direction: column;
  gap: 18px;
  width: 100%;
  max-width: none;
  margin: 0;
  min-height: min(68vh, 620px);
  font-family: 'Tajawal', system-ui, -apple-system, 'Segoe UI', sans-serif;
}
.vte-review-layout {
  display: grid;
  grid-template-columns: 1fr;
  align-items: stretch;
  gap: 16px;
  width: 100%;
}
html[dir="rtl"] .vte-review-music,
html[dir="rtl"] .vte-review-stage {
  direction: rtl;
}
html[dir="ltr"] .vte-review-music,
html[dir="ltr"] .vte-review-stage {
  direction: ltr;
}
.vte-review:not(.has-music) .vte-review-layout {
  grid-template-columns: 1fr;
  justify-items: center;
}
.vte-review-music-workspace {
  width: 100%;
  max-width: 720px;
  margin: 0 auto;
  box-sizing: border-box;
}
.vte-export-music-library {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin: 0;
}
.vte-export-music-library-label {
  font-size: 12px;
  font-weight: 700;
  color: var(--brand-muted, #64748b);
  margin: 0;
}
.vte-music-track.vte-track {
  position: relative;
  min-height: 52px;
  background: rgba(37, 99, 235, 0.04);
}
.vte-music-track-empty {
  display: flex;
  align-items: center;
  height: 100%;
  min-height: 52px;
  padding: 0 12px;
  font-size: 12px;
}
.vte-music-chip {
  --vte-music-vol: 0.22;
  position: absolute;
  top: 8px;
  bottom: 8px;
  display: flex;
  align-items: center;
  border-radius: 8px;
  background: rgba(37, 99, 235, 0.14);
  border: 1px solid rgba(37, 99, 235, 0.45);
  color: #1d4ed8;
  font-size: 11px;
  font-weight: 700;
  cursor: grab;
  overflow: hidden;
  box-sizing: border-box;
  min-width: 28px;
  touch-action: none;
  user-select: none;
  z-index: 1;
}
.vte-music-chip::before {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(37, 99, 235, calc(0.16 + (var(--vte-music-vol) * 0.42)));
  pointer-events: none;
  z-index: 0;
}
.vte-music-chip.is-selected {
  box-shadow: 0 0 0 2px rgba(17, 17, 17, 0.85);
}
.vte-music-chip.is-dragging {
  cursor: grabbing;
  z-index: 2;
}
.vte-music-chip-wave {
  position: absolute;
  inset: 4px 10px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1px;
  pointer-events: none;
  z-index: 0;
  opacity: calc(0.35 + (var(--vte-music-vol) * 0.55));
}
.vte-music-chip-wave i {
  flex: 1 1 0;
  min-width: 2px;
  max-width: 4px;
  align-self: center;
  border-radius: 1px;
  background: rgba(29, 78, 216, 0.85);
}
.vte-music-chip-label {
  flex: 1 1 auto;
  min-width: 0;
  padding: 0 8px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  position: relative;
  z-index: 1;
  text-shadow: 0 0 6px rgba(255, 255, 255, 0.85);
}
.vte-music-chip-vol {
  flex: 0 0 auto;
  margin-inline-end: 8px;
  padding: 1px 5px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.72);
  color: #1d4ed8;
  font-size: 10px;
  font-weight: 700;
  line-height: 1.3;
  position: relative;
  z-index: 1;
}
.vte-music-fade {
  position: absolute;
  top: 0;
  bottom: 0;
  pointer-events: none;
  z-index: 0;
}
.vte-music-fade-in {
  inset-inline-start: 0;
  background: linear-gradient(to var(--vte-music-fade-dir, right), rgba(255,255,255,0.75), transparent);
}
.vte-music-fade-out {
  inset-inline-end: 0;
  background: linear-gradient(to var(--vte-music-fade-dir-rev, left), rgba(255,255,255,0.75), transparent);
}
html[dir="rtl"] .vte-music-fade-in {
  --vte-music-fade-dir: left;
}
html[dir="rtl"] .vte-music-fade-out {
  --vte-music-fade-dir-rev: right;
}
.vte-music-inspector-empty {
  margin: 8px 0 0;
  font-size: 13px;
}
.vte-editor-review .vte-inspector[data-mode="music"] {
  min-height: 0;
}
.vte-editor-review .vte-export-music-tracks {
  max-height: 220px;
  overflow: auto;
}
.vte-review-stage {
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 0;
  width: 100%;
}
.vte-review-player {
  display: block;
  width: 100%;
  max-width: 360px;
  max-height: min(58vh, 560px);
  margin: 0 auto;
  border-radius: 16px;
  background: #0b1020;
}
.vte-review-preview-final,
.vte-review-preview-live {
  width: 100%;
  max-width: 360px;
  margin: 0 auto;
}
.vte-review-preview-live .vte-review-stage-wrap,
.vte-review-preview-live .vte-stage-wrap {
  width: 100%;
  max-width: 360px;
  margin: 0 auto;
  border: 0;
  border-radius: 14px;
  overflow: hidden;
  background: #0b1020;
  box-shadow: 0 10px 30px rgba(15, 23, 42, 0.18);
  box-sizing: border-box;
}
.vte-review-preview-live .vte-stage {
  width: 100%;
  max-height: min(52vh, 520px);
}
.vte-review-player-bar {
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr) 12ch;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  background: #111827;
  color: #f8fafc;
  direction: ltr;
  box-sizing: border-box;
}
.vte-review-play-btn {
  width: 34px;
  height: 34px;
  border: 0;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.12);
  color: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  padding: 0;
}
.vte-review-play-btn:hover {
  background: rgba(255, 255, 255, 0.2);
}
.vte-review-play-btn svg {
  display: block;
}
.vte-review-scrub {
  width: 100%;
  min-width: 0;
  accent-color: #a78bfa;
  cursor: pointer;
}
.vte-review-time {
  width: 12ch;
  min-width: 12ch;
  max-width: 12ch;
  font-size: 11px;
  font-weight: 500;
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1;
  color: rgba(248, 250, 252, 0.88);
  white-space: nowrap;
  text-align: end;
  overflow: hidden;
}
.vte-review-music {
  width: 100%;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 18px;
  border-radius: 14px;
  border: 1px solid var(--brand-border, #e5e7eb);
  background: color-mix(in srgb, var(--brand-surface, #fff) 92%, #f8fafc);
  box-sizing: border-box;
  min-height: 0;
}
.vte-review-music-heading {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
  min-width: 0;
}
.vte-review-music-title {
  margin: 0;
  font-size: 16px;
  font-weight: 700;
  color: var(--brand-text, #0f172a);
}
.vte-review-music-optional {
  font-size: 12px;
  font-weight: 500;
}
.vte-review-music-hint {
  margin: 0;
  font-size: 13px;
  font-weight: 400;
  line-height: 1.45;
}
.vte-review-music-actions {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 8px;
}
.vte-review-music-actions .button {
  width: 100%;
  justify-content: center;
}
.vte-review-music-clear {
  border: 0;
  background: transparent;
  color: var(--brand-muted, #6b7280);
  font: 600 12px/1.4 'Tajawal', system-ui, -apple-system, 'Segoe UI', sans-serif;
  padding: 0;
  cursor: pointer;
  text-decoration: underline;
  text-align: center;
}
.vte-review-music-status {
  margin: 0;
  font-size: 12px;
  line-height: 1.4;
}
.vte-review-music-status[hidden] { display: none; }
.vte-review-music.is-generating {
  border-color: color-mix(in srgb, var(--brand-primary, #7c3aed) 35%, var(--brand-border, #e5e7eb));
  background: color-mix(in srgb, var(--brand-primary, #7c3aed) 6%, #fff);
}
.vte-review-music-actions .button.is-busy {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  opacity: 1;
  color: var(--brand-primary, #7c3aed) !important;
  border-color: color-mix(in srgb, var(--brand-primary, #7c3aed) 35%, var(--brand-border, #e5e7eb)) !important;
  background: color-mix(in srgb, var(--brand-primary, #7c3aed) 10%, #fff) !important;
  cursor: wait;
}
.vte-review-music-busy {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 8px;
  margin: 0;
}
.vte-review-music-busy .loading-pill {
  width: 100%;
  justify-content: flex-start;
  box-sizing: border-box;
}
.vte-review-music-busy-hint {
  margin: 0;
  font-size: 12px;
  line-height: 1.4;
}
.vte-export-progress {
  position: absolute;
  inset: 0;
  z-index: 40;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  box-sizing: border-box;
  background: color-mix(in srgb, #0f172a 42%, transparent);
  backdrop-filter: blur(2px);
  pointer-events: all;
}
.vte-export-progress-card {
  width: min(420px, 100%);
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 18px 18px 16px;
  border-radius: 16px;
  border: 1px solid var(--brand-border, #e5e7eb);
  background: #fff;
  box-shadow: 0 18px 48px rgba(15, 23, 42, 0.22);
  font-family: 'Tajawal', system-ui, -apple-system, 'Segoe UI', sans-serif;
}
.vte-export-progress-card .loading-pill {
  width: 100%;
  justify-content: flex-start;
  box-sizing: border-box;
  font-weight: 700;
}
.vte-export-progress-hint {
  margin: 0;
  font-size: 13px;
  line-height: 1.45;
  color: var(--brand-muted, #6b7280);
}
.vte-export-progress-elapsed {
  margin: 0;
  font-size: 12px;
  font-weight: 500;
  color: var(--brand-text, #0f172a);
}
#vte-btn-export.is-exporting {
  gap: 8px;
  min-width: 160px;
}
#vte-btn-export .vte-export-btn-elapsed {
  font-variant-numeric: tabular-nums;
  opacity: 0.85;
  font-size: 12px;
  font-weight: 500;
}
#video-scenes-modal.vte-exporting .vte-header .modal-close,
#video-scenes-modal.vte-exporting #vte-btn-review-back {
  pointer-events: none;
  opacity: 0.45;
}
.vte-review .vte-export-music-tracks {
  flex-direction: column;
}
.vte-review-ready {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 12px 14px;
  border-radius: 12px;
  border: 1px solid color-mix(in srgb, #16a34a 28%, var(--brand-border, #e5e7eb));
  background: color-mix(in srgb, #16a34a 8%, #fff);
  max-width: 420px;
  margin: 0 auto;
  width: 100%;
  box-sizing: border-box;
}
.vte-review-ready-text {
  margin: 0;
  font-size: 14px;
  font-weight: 500;
  line-height: 1.45;
  color: var(--brand-text, #0f172a);
}
.vte-review-ready-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px 16px;
}
.vte-review-ready-link {
  font-size: 13px;
  font-weight: 700;
  font-family: 'Tajawal', system-ui, -apple-system, 'Segoe UI', sans-serif;
  color: var(--brand-primary, #7c3aed);
  text-decoration: none;
  background: none;
  border: 0;
  padding: 0;
  margin: 0;
  cursor: pointer;
}
.vte-review-ready-link:hover { text-decoration: underline; }
@media (max-width: 720px) {
  .vte-review-layout {
    grid-template-columns: 1fr;
  }
  .vte-review-music {
    order: 2;
  }
  .vte-review-stage {
    order: 1;
  }
  .vte-review-preview-final,
  .vte-review-preview-live,
  .vte-review-preview-live .vte-review-stage-wrap,
  .vte-review-preview-live .vte-stage-wrap {
    max-width: 300px;
  }
}
.vte-close-reopen-notice {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  margin: 0 0 14px;
  flex-shrink: 0;
  padding: 10px 12px;
  border-radius: 10px;
  background: color-mix(in srgb, var(--brand-primary, #2563eb) 10%, #fff);
  border: 1px solid color-mix(in srgb, var(--brand-primary, #2563eb) 22%, transparent);
  font-family: 'Tajawal', system-ui, -apple-system, 'Segoe UI', sans-serif;
}
.vte-close-reopen-notice.hidden { display: none; }
.vte-close-reopen-notice-text {
  margin: 0;
  flex: 1;
  font-size: 13px;
  font-weight: 500;
  line-height: 1.45;
  color: var(--brand-text, #111827);
}
.vte-close-reopen-dismiss {
  flex-shrink: 0;
  width: 28px;
  height: 28px;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: var(--brand-muted, #6b7280);
  cursor: pointer;
  font-size: 14px;
  line-height: 1;
}
.vte-close-reopen-dismiss:hover {
  background: color-mix(in srgb, var(--brand-primary, #2563eb) 12%, transparent);
  color: var(--brand-text, #111827);
}
/* Mobile-only FYI — neutral slate info, not brand purple or warning amber. */
.vte-desktop-recommend-notice {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
  margin: 0 0 14px;
  flex-shrink: 0;
  padding: 11px 12px;
  border-radius: 10px;
  background: #f1f5f9;
  border: 1px solid #cbd5e1;
  border-inline-start: 3px solid #64748b;
  font-family: 'Tajawal', system-ui, -apple-system, 'Segoe UI', sans-serif;
}
.vte-desktop-recommend-notice.hidden { display: none; }
.vte-desktop-recommend-notice-text {
  margin: 0;
  flex: 1;
  min-width: 0;
  font-size: 14px;
  font-weight: 500;
  line-height: 1.5;
  color: #334155;
}
.vte-desktop-recommend-kicker {
  font-weight: 700;
  color: #1e293b;
  margin-inline-end: 6px;
}
.vte-desktop-recommend-kicker::after {
  content: '·';
  margin-inline-start: 6px;
  font-weight: 500;
  color: #64748b;
}
.vte-desktop-recommend-dismiss {
  flex-shrink: 0;
  width: 28px;
  height: 28px;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: #64748b;
  cursor: pointer;
  font-size: 15px;
  line-height: 1;
}
.vte-desktop-recommend-dismiss:hover {
  background: #e2e8f0;
  color: #1e293b;
}
@media (min-width: 901px) {
  #vte-desktop-recommend-notice {
    display: none !important;
  }
}
.video-scenes-modal-body,
.vte-body {
  min-height: 160px;
  flex: 1;
  min-width: 0;
  overflow: auto;
  display: flex;
  flex-direction: column;
}

/* Timeline editor
   Preview is a direct grid child so mobile can keep it sticky while editing.
   Do NOT use height:100% on columns — that resolves against the modal viewport. */
.vte-editor {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) minmax(260px, 0.8fr);
  grid-template-rows: auto auto;
  gap: 16px;
  align-items: stretch;
  flex: 0 0 auto;
  width: 100%;
  height: auto;
  min-height: 0;
  font-family: 'Tajawal', system-ui, -apple-system, 'Segoe UI', sans-serif;
}
.vte-editor > .vte-preview-row {
  grid-column: 1;
  grid-row: 1;
  min-width: 0;
}
.vte-editor > .vte-main {
  grid-column: 1;
  grid-row: 2;
  min-width: 0;
}
.vte-editor > .vte-inspector {
  grid-column: 2;
  grid-row: 1 / span 2;
}
.vte-editor > .vte-export-link {
  grid-column: 1 / -1;
}
.vte-main {
  min-width: 0;
  min-height: 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
  height: auto;
  align-self: stretch;
}
.vte-preview-row {
  display: flex;
  /* Never stretch the player shell to the versions rail height — that left a
     black void under the transport after regenerate added more takes. */
  align-items: flex-start;
  gap: 10px;
  min-width: 0;
}
.vte-preview-row .vte-stage-wrap {
  flex: 1 1 auto;
  min-width: 0;
  align-self: flex-start;
  height: fit-content;
  max-height: none;
}
.vte-takes-rail {
  flex: 0 0 72px;
  width: 72px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-height: 0;
  align-self: flex-start;
  /* Cap to the stage max so the rail scrolls instead of growing the row. */
  max-height: min(42vh, 480px);
  padding: 8px 6px;
  border: 1px solid var(--brand-border, #e5e7eb);
  border-radius: 14px;
  background: var(--brand-card, #fff);
  font-family: 'Tajawal', system-ui, -apple-system, 'Segoe UI', sans-serif;
}
.vte-takes-label {
  font-size: 11px;
  font-weight: 500;
  color: var(--brand-muted, #6b7280);
  text-align: center;
  line-height: 1.2;
}
.vte-takes-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  overflow: auto;
  min-height: 0;
  flex: 1 1 auto;
  padding-inline-end: 2px;
}
.vte-take-tile {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 4px;
  padding: 0;
  border: 2px solid transparent;
  border-radius: 10px;
  background: transparent;
  cursor: pointer;
  font: inherit;
  color: inherit;
}
.vte-take-tile:hover .vte-take-thumb {
  border-color: color-mix(in srgb, var(--brand-primary, #7c3aed) 45%, #d1d5db);
}
.vte-take-tile.is-active {
  border-color: var(--brand-primary, #7c3aed);
}
.vte-take-tile.is-main .vte-take-label {
  color: var(--brand-primary, #7c3aed);
  font-weight: 700;
}
.vte-takes-rail.is-locked .vte-take-tile,
.vte-take-tile.is-locked,
.vte-take-tile:disabled {
  cursor: not-allowed;
  opacity: 0.55;
  pointer-events: none;
}
.vte-takes-rail.is-locked .vte-take-tile.is-main {
  opacity: 0.85;
}
.vte-take-thumb {
  display: block;
  width: 100%;
  aspect-ratio: 1;
  border-radius: 8px;
  border: 1px solid var(--brand-border, #e5e7eb);
  background: #111827 center / cover no-repeat;
}
.vte-take-label {
  font-size: 10px;
  font-weight: 500;
  line-height: 1.2;
  text-align: center;
  color: var(--brand-muted, #6b7280);
}
.vte-take-promote {
  width: 100%;
  padding: 6px 4px;
  font-size: 11px;
  font-weight: 500;
  line-height: 1.2;
  white-space: normal;
}
html[dir="rtl"] .vte-preview-row,
html[lang="ar"] .vte-preview-row,
html[lang="he"] .vte-preview-row {
  flex-direction: row;
}
@media (max-width: 900px) {
  /* Player must stay first. Versions under it — never above (that hid the stage). */
  html[dir="rtl"] .vte-preview-row.has-takes,
  html[lang="ar"] .vte-preview-row.has-takes,
  html[lang="he"] .vte-preview-row.has-takes,
  .vte-preview-row.has-takes {
    flex-direction: column;
    align-items: stretch;
  }
  .vte-preview-row.has-takes .vte-stage-wrap {
    order: 0;
    width: 100%;
  }
  .vte-preview-row.has-takes .vte-takes-rail {
    order: 1;
    flex: 0 0 auto;
    width: 100%;
    max-height: 76px;
    flex-direction: row;
    align-items: center;
    padding: 6px 8px;
    gap: 8px;
  }
  .vte-takes-label {
    display: none;
  }
  .vte-takes-list {
    flex-direction: row;
    flex: 1 1 auto;
    overflow-x: auto;
    overflow-y: hidden;
    min-height: 0;
  }
  .vte-take-tile {
    flex: 0 0 52px;
    width: 52px;
  }
  .vte-take-thumb {
    aspect-ratio: 1;
  }
  .vte-take-promote {
    flex: 0 0 auto;
    width: auto;
    max-width: 110px;
    padding: 8px 10px;
  }
}
.vte-stage-wrap {
  border: 1px solid var(--brand-border, #e5e7eb);
  border-radius: 16px;
  background: #0b1020;
  overflow: hidden;
  flex: 0 0 auto;
  display: flex;
  flex-direction: column;
  min-height: 0;
  /* Hug stage + transport only — never absorb leftover stretch height. */
  height: fit-content;
}
.vte-stage {
  position: relative;
  width: 100%;
  aspect-ratio: 9 / 16;
  max-height: min(42vh, 480px);
  margin: 0 auto;
  background: #000;
  overflow: hidden;
  flex: 0 0 auto;
  touch-action: none;
}
.vte-stage.is-zoomed {
  cursor: grab;
}
.vte-stage.is-zoomed.is-panning {
  cursor: grabbing;
}
.vte-media-zoom {
  position: absolute;
  inset: 0;
  z-index: 1;
  transform-origin: center center;
  will-change: transform;
}
.vte-stage-wrap.aspect-16x9 .vte-stage { aspect-ratio: 16 / 9; }
.vte-stage-wrap.aspect-1x1 .vte-stage { aspect-ratio: 1 / 1; }
.vte-player {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
  background: #000;
  z-index: 1;
}
.vte-player-b {
  z-index: 2;
  pointer-events: none;
  opacity: 0;
  visibility: hidden;
}
.vte-player-b.is-active {
  visibility: visible;
}
.vte-player.vte-trans-outgoing {
  z-index: 1;
}
.vte-overlay-stage {
  position: absolute;
  inset: 0;
  pointer-events: none;
  overflow: visible;
  z-index: 3;
}
.vte-overlay-item {
  position: absolute;
  transform: translate(-50%, -50%);
  max-width: 90%;
  text-align: center;
  text-shadow: 0 2px 8px rgba(0,0,0,0.55);
  white-space: pre-wrap;
  word-break: break-word;
  pointer-events: auto;
  cursor: grab;
  touch-action: none;
  user-select: none;
}
.vte-overlay-item.is-selected {
  /* Editor chrome only — not a burned-in text border. */
  outline: 1.5px dashed rgba(167, 139, 250, 0.95);
  outline-offset: 6px;
  box-shadow: none;
}
.vte-overlay-item.is-dragging {
  cursor: grabbing;
  z-index: 3;
}
.vte-overlay-text {
  /* Outer shell hugs the black text plate — no invisible padding around it. */
  display: inline-block;
  box-sizing: border-box;
  width: max-content;
  max-width: min(90%, 100%);
  height: max-content;
  overflow: visible;
  line-height: 0;
  background: transparent;
  border: 0;
  padding: 0;
  margin: 0;
  text-align: center;
}
.vte-overlay-text.has-bg-fill {
  /* Fill is painted on the inner span so it hugs the glyphs. */
  box-decoration-break: clone;
}
/* Selection + handles wrap the bubble itself, not empty space around it. */
.vte-overlay-text.is-selected {
  outline: 1.5px dashed rgba(167, 139, 250, 0.95);
  outline-offset: 2px;
}
.vte-overlay-text-inner {
  display: inline-block;
  width: max-content;
  max-width: 100%;
  box-sizing: border-box;
  pointer-events: none;
  white-space: pre-wrap;
  word-break: break-word;
  line-height: 1.15;
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
}
.vte-overlay-text .vte-resize-handle {
  /* Sit on the bubble corners (outer = bubble size). */
  z-index: 6;
}
.vte-text-bg-fields {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin: 10px 0 4px;
}
.vte-text-bg-toggle {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  font-weight: 500;
  color: var(--brand-text, #111827);
  cursor: pointer;
  font-family: 'Tajawal', system-ui, -apple-system, 'Segoe UI', sans-serif;
}
.vte-text-bg-toggle input {
  width: 16px;
  height: 16px;
  margin: 0;
  accent-color: var(--brand-primary, #7c3aed);
}
.vte-text-bg-options[hidden] {
  display: none !important;
}
.vte-overlay-image-box {
  max-width: none;
  width: 28%;
  height: auto;
  box-sizing: border-box;
  /* Outline/handles must hug the image — never a taller empty box. */
  line-height: 0;
  overflow: visible;
}
.vte-overlay-image-frame {
  display: block;
  width: 100%;
  box-sizing: border-box;
  overflow: hidden;
  line-height: 0;
  background: transparent;
}
.vte-overlay-image-el {
  display: block;
  width: 100%;
  height: auto;
  object-fit: contain;
  pointer-events: none;
  user-select: none;
}
.vte-border-fields {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin: 0;
}
.vte-border-fields .vte-field-label {
  display: block;
  font-size: 13px;
  font-weight: 500;
  color: var(--brand-text, #111827);
}
.vte-border-fields .vte-inline-fields {
  margin: 0;
}
.vte-inspector-cat {
  margin: 8px 0;
  border: 1px solid var(--brand-border, #e5e7eb);
  border-radius: 12px;
  background: #fff;
  overflow: hidden;
}
.vte-inspector-cat-summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 10px 12px;
  cursor: pointer;
  list-style: none;
  font-family: 'Tajawal', system-ui, -apple-system, 'Segoe UI', sans-serif;
  font-size: 13px;
  font-weight: 700;
  color: var(--brand-text, #111827);
  user-select: none;
}
.vte-inspector-cat-summary::-webkit-details-marker {
  display: none;
}
.vte-inspector-cat-summary::marker {
  content: '';
}
.vte-inspector-cat-title {
  flex: 1 1 auto;
  min-width: 0;
}
.vte-inspector-cat-chevron {
  flex: 0 0 auto;
  color: var(--brand-muted, #64748b);
  font-size: 12px;
  line-height: 1;
  transition: transform 0.18s ease;
}
.vte-inspector-cat[open] .vte-inspector-cat-chevron {
  transform: rotate(180deg);
}
.vte-inspector-cat-body {
  padding: 0 12px 12px;
  border-top: 1px solid rgba(15, 23, 42, 0.06);
  padding-top: 10px;
}
.vte-inspector-cat-body .vte-font-field,
.vte-inspector-cat-body .vte-text-bg-fields,
.vte-inspector-cat-body .vte-text-resize-hint {
  margin-top: 8px;
}
.vte-inspector-cat-body .vte-text-resize-hint {
  margin-bottom: 0;
}
.vte-overlay-image {
  width: 28%;
  height: auto;
}
.vte-overlay-image.is-cover {
  width: 100%;
  height: 100%;
  max-width: none;
  object-fit: cover;
  transform: none;
  border-radius: 0;
  pointer-events: none;
  cursor: default;
}
.vte-resize-handle {
  position: absolute;
  width: 12px;
  height: 12px;
  background: #fff;
  border: 2px solid #7c3aed;
  border-radius: 2px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.35);
  z-index: 5;
  pointer-events: auto;
  touch-action: none;
}
/* Keep handles inside the box so stage overflow does not clip them. */
.vte-resize-nw { left: 0; top: 0; cursor: nwse-resize; }
.vte-resize-ne { right: 0; top: 0; left: auto; cursor: nesw-resize; }
.vte-resize-se { right: 0; bottom: 0; left: auto; top: auto; cursor: nwse-resize; }
.vte-resize-sw { left: 0; bottom: 0; top: auto; cursor: nesw-resize; }
.vte-resize-n { left: 50%; top: 0; transform: translateX(-50%); cursor: ns-resize; }
.vte-resize-s { left: 50%; bottom: 0; top: auto; transform: translateX(-50%); cursor: ns-resize; }
.vte-resize-e { right: 0; top: 50%; left: auto; transform: translateY(-50%); cursor: ew-resize; }
.vte-resize-w { left: 0; top: 50%; transform: translateY(-50%); cursor: ew-resize; }
.vte-source-picker {
  position: fixed;
  inset: 0;
  z-index: 12050;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
  background: rgba(15, 23, 42, 0.45);
}
.vte-source-picker-card {
  width: min(360px, 100%);
  border-radius: 16px;
  background: var(--brand-card, #fff);
  border: 1px solid var(--brand-border, #e5e7eb);
  padding: 18px 16px;
  font-family: 'Tajawal', system-ui, -apple-system, 'Segoe UI', sans-serif;
  box-shadow: 0 16px 40px rgba(15, 23, 42, 0.18);
}
.vte-source-picker-card h4 {
  margin: 0 0 6px;
  font-size: 16px;
  font-weight: 700;
}
.vte-source-picker-card p {
  margin: 0 0 14px;
  font-size: 13px;
  font-weight: 400;
  line-height: 1.4;
}
.vte-source-picker-actions {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.vte-source-picker-actions .button {
  width: 100%;
  justify-content: center;
}
.vte-font-field {
  margin-bottom: 10px;
}
.vte-font-field .vte-field-label {
  display: block;
  margin-bottom: 6px;
  font-size: 13px;
  font-weight: 500;
  color: var(--brand-text, #111827);
}
.vte-font-picker {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.vte-font-option {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  width: 100%;
  padding: 8px 10px;
  border-radius: 10px;
  border: 1px solid var(--brand-border, #e5e7eb);
  background: var(--brand-card, #fff);
  color: var(--brand-text, #111827);
  cursor: pointer;
  text-align: start;
  font-family: 'Tajawal', system-ui, -apple-system, 'Segoe UI', sans-serif;
  transition: border-color 0.15s ease, box-shadow 0.15s ease, background 0.15s ease;
}
.vte-font-option:hover {
  border-color: rgba(124, 58, 237, 0.45);
}
.vte-font-option.is-selected {
  border-color: #7c3aed;
  box-shadow: 0 0 0 2px rgba(124, 58, 237, 0.18);
  background: rgba(124, 58, 237, 0.04);
}
.vte-font-option-name {
  font-size: 12px;
  font-weight: 500;
  color: var(--brand-muted, #6b7280);
  flex: 0 0 auto;
}
.vte-font-option-sample {
  font-size: 16px;
  font-weight: 500;
  line-height: 1.2;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.vte-text-style-row {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 8px;
}
.vte-text-style-toggles {
  display: flex;
  gap: 6px;
}
.vte-style-toggle {
  width: 36px;
  height: 36px;
  border-radius: 10px;
  border: 1px solid var(--brand-border, #e5e7eb);
  background: var(--brand-card, #fff);
  color: var(--brand-text, #111827);
  font-size: 15px;
  font-weight: 700;
  font-family: 'Tajawal', system-ui, -apple-system, 'Segoe UI', sans-serif;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: border-color 0.15s ease, background 0.15s ease, color 0.15s ease;
}
.vte-style-toggle.is-italic {
  font-style: italic;
  font-weight: 500;
}
.vte-style-toggle:hover {
  border-color: rgba(124, 58, 237, 0.45);
}
.vte-style-toggle.is-active {
  border-color: #7c3aed;
  background: rgba(124, 58, 237, 0.1);
  color: #5b21b6;
}
.vte-text-size-color {
  margin: 0;
}
.vte-text-resize-hint {
  margin: 0 0 10px;
  font-size: 12px;
}
.vte-layer-preview-wrap {
  margin-bottom: 10px;
  border-radius: 12px;
  overflow: hidden;
  border: 1px solid var(--brand-border, #e5e7eb);
  background: rgba(15, 23, 42, 0.04);
}
.vte-layer-preview {
  display: block;
  width: 100%;
  max-height: 140px;
  object-fit: contain;
  background: #fff;
  object-fit: contain;
}
.vte-stage-play {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  z-index: 6;
  width: 64px;
  height: 64px;
  border: 0;
  border-radius: 999px;
  background: rgba(15, 23, 42, 0.62);
  color: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.35);
  backdrop-filter: blur(4px);
  transition: opacity 0.15s ease, transform 0.15s ease, background 0.15s ease;
}
.vte-stage-play:hover {
  background: rgba(15, 23, 42, 0.78);
  transform: translate(-50%, -50%) scale(1.04);
}
.vte-stage-play svg {
  display: block;
  margin-inline-start: 2px;
}
.vte-stage-play.is-playing svg,
.vte-stage-play.is-replay svg {
  margin-inline-start: 0;
}
.vte-stage.is-playing .vte-stage-play {
  opacity: 0;
  pointer-events: none;
}
.vte-stage.is-playing:hover .vte-stage-play,
.vte-stage.is-playing:focus-within .vte-stage-play {
  opacity: 1;
  pointer-events: auto;
}
.vte-stage.is-at-end .vte-stage-play {
  opacity: 1;
  pointer-events: auto;
}
.vte-stage:has(#vte-stage-empty:not([hidden])) .vte-stage-play {
  display: none;
}
.vte-music-panel-section .vte-review-mix-bar,
.vte-review-mix-bar {
  display: flex;
  flex-direction: column;
  gap: 14px;
  width: 100%;
  margin: 4px 0 0;
  padding: 14px;
  border: 1px solid var(--brand-border, #e5e7eb);
  border-radius: 12px;
  background: #fff;
  box-sizing: border-box;
}
.vte-music-panel-section > .vte-music-inspector-empty {
  margin: 0;
}
.vte-review-mix-control {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-areas:
    "label value"
    "slider slider";
  align-items: center;
  column-gap: 12px;
  row-gap: 8px;
  margin: 0;
  width: 100%;
  font-family: 'Tajawal', system-ui, -apple-system, 'Segoe UI', sans-serif;
}
.vte-review-mix-label {
  grid-area: label;
  font-size: 13px;
  font-weight: 500;
  color: var(--brand-text, #0f172a);
  min-width: 0;
}
.vte-review-mix-value {
  grid-area: value;
  font-size: 13px;
  font-weight: 700;
  color: var(--brand-muted, #64748b);
  font-variant-numeric: tabular-nums;
  text-align: end;
  white-space: nowrap;
}
.vte-review-mix-control input[type="range"] {
  grid-area: slider;
  display: block;
  width: 100%;
  min-width: 0;
  height: 28px;
  margin: 0;
  accent-color: var(--brand-primary, #7c3aed);
}
.vte-transport {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  padding: 10px 12px;
  background: #111827;
  border-top: 1px solid rgba(255, 255, 255, 0.12);
  flex: 0 0 auto;
  position: relative;
  z-index: 2;
}
.vte-preview-join-hint {
  flex: 1 1 100%;
  margin: 2px 0 0;
  font-family: 'Tajawal', system-ui, -apple-system, 'Segoe UI', sans-serif;
  font-size: 12px;
  font-weight: 400;
  line-height: 1.35;
  color: rgba(226, 232, 240, 0.72);
}
.vte-transport-play {
  min-width: 72px !important;
  background: var(--brand-primary, #7c3aed) !important;
  border-color: var(--brand-primary, #7c3aed) !important;
  font-weight: 700 !important;
}
.vte-transport-play.is-replay {
  min-width: 108px !important;
}
/* Only the button cluster is LTR so Start/Play/End icons stay correct in RTL. */
.vte-transport-controls {
  direction: ltr;
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.vte-zoom-controls {
  direction: ltr;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin-inline-start: 4px;
}
.vte-zoom-btn {
  min-width: 34px !important;
  padding-inline: 8px !important;
  font-size: 16px !important;
  font-weight: 700 !important;
  line-height: 1 !important;
}
.vte-zoom-label-btn {
  min-width: 54px !important;
  padding-inline: 8px !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  font-variant-numeric: tabular-nums;
}
.vte-transport .vte-transport-btn,
.vte-transport .vte-zoom-btn,
.vte-transport .vte-zoom-label-btn,
.vte-transport .button.secondary {
  color: #f8fafc !important;
  border-color: rgba(255, 255, 255, 0.45) !important;
  background: rgba(255, 255, 255, 0.1) !important;
  min-width: 40px;
  justify-content: center;
}
.vte-transport .vte-transport-btn:hover,
.vte-transport .vte-zoom-btn:hover,
.vte-transport .vte-zoom-label-btn:hover,
.vte-transport .button.secondary:hover {
  background: rgba(255, 255, 255, 0.18) !important;
  border-color: rgba(255, 255, 255, 0.65) !important;
  color: #fff !important;
}
.vte-transport .vte-zoom-btn:disabled,
.vte-transport .vte-zoom-label-btn:disabled {
  opacity: 0.45;
  cursor: default;
}
.vte-transport .button:not(.secondary) {
  color: #fff !important;
}
.vte-transport-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
  color: #f8fafc;
}
.vte-transport-icon svg {
  display: block;
  fill: currentColor;
  color: inherit;
  transform: none !important;
}
.vte-time {
  margin-inline-start: auto;
  color: #e5e7eb;
  font-size: 12px;
  font-weight: 500;
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1;
  min-width: 12ch;
  width: 12ch;
  text-align: end;
  white-space: nowrap;
}
.vte-timeline-panel {
  position: relative;
  border: 1px solid var(--brand-border, #e5e7eb);
  border-radius: 14px;
  background: var(--brand-card, #fff);
  padding: 10px 10px 14px;
  /* visible so tool/add menus are not clipped by the track area */
  overflow: visible;
}
.vte-timeline-tools {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 6px;
  margin: 0;
  margin-inline-start: auto; /* pin cut/clone/transition to the start edge (left in RTL) */
  padding: 0;
  position: relative;
  z-index: 12;
  flex-shrink: 0;
}
.vte-track-head-start {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
  min-width: 0;
}
.vte-tool-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  padding: 0;
  border: 1px solid var(--brand-border, #e5e7eb);
  border-radius: 10px;
  background: #fff;
  color: var(--brand-text, #111827);
  cursor: pointer;
  font-family: 'Tajawal', system-ui, -apple-system, 'Segoe UI', sans-serif;
}
.vte-tool-btn.is-active {
  color: #fff;
  background: var(--brand-primary, #7c3aed);
  border-color: color-mix(in srgb, var(--brand-primary, #7c3aed) 80%, #4c1d95);
  box-shadow: 0 0 0 2px rgba(124, 58, 237, 0.22);
}
.vte-tool-btn.is-active:hover:not(:disabled) {
  filter: brightness(1.05);
}
.vte-tool-active-dot {
  position: absolute;
  top: 4px;
  inset-inline-end: 4px;
  width: 7px;
  height: 7px;
  border-radius: 999px;
  background: #fbbf24;
  box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.85);
}
.vte-tool-transition-wrap .vte-tool-btn {
  position: relative;
}
.vte-tool-btn:hover:not(:disabled) {
  border-color: color-mix(in srgb, var(--brand-primary, #2563eb) 40%, var(--brand-border, #e5e7eb));
  background: color-mix(in srgb, var(--brand-primary, #2563eb) 6%, #fff);
  color: var(--brand-primary, #2563eb);
}
.vte-tool-btn:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}
.vte-tool-btn.vte-tool-danger:hover:not(:disabled) {
  border-color: color-mix(in srgb, #dc2626 45%, var(--brand-border, #e5e7eb));
  background: color-mix(in srgb, #dc2626 8%, #fff);
  color: #dc2626;
}
.vte-tool-btn[hidden] {
  display: none !important;
}
.vte-tool-icon {
  display: inline-flex;
  line-height: 1;
}
.vte-tool-icon svg {
  display: block;
}
.vte-tool-transition-wrap {
  position: relative;
  z-index: 13;
}
.vte-transition-menu {
  position: absolute;
  /* Open upward so the track/clips don't cover the list */
  top: auto;
  bottom: calc(100% + 6px);
  inset-inline-start: 0;
  z-index: 40;
  min-width: 180px;
  max-height: min(42vh, 280px);
  overflow-x: hidden;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
  padding: 6px;
  border: 1px solid var(--brand-border, #e5e7eb);
  border-radius: 12px;
  background: #fff;
  box-shadow: 0 10px 28px rgba(15, 23, 42, 0.18);
}
.vte-transition-menu[hidden] {
  display: none !important;
}
.vte-transition-menu-label {
  position: sticky;
  top: 0;
  z-index: 1;
  margin: -6px -6px 4px;
  padding: 8px 10px 6px;
  background: #fff;
  font-size: 11px;
  font-weight: 500;
  color: var(--brand-muted, #6b7280);
  font-family: 'Tajawal', system-ui, -apple-system, 'Segoe UI', sans-serif;
}
.vte-transition-option {
  display: block;
  width: 100%;
  text-align: start;
  margin: 0;
  padding: 8px 10px;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: var(--brand-text, #111827);
  font-size: 13px;
  font-weight: 500;
  font-family: 'Tajawal', system-ui, -apple-system, 'Segoe UI', sans-serif;
  cursor: pointer;
}
.vte-transition-option:hover,
.vte-transition-option.is-active {
  background: color-mix(in srgb, var(--brand-primary, #2563eb) 10%, #fff);
  color: var(--brand-primary, #2563eb);
}
.vte-timeline-panel.is-scrubbing,
.vte-timeline-panel.is-scrubbing * {
  cursor: grabbing !important;
  user-select: none;
}
/* While scrubbing, kill panel scroll so the red handle can drag on touch. */
.vte-timeline-panel.is-scrubbing {
  overflow: hidden !important;
  touch-action: none;
  overscroll-behavior: none;
}
.vte-track-head {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 8px;
  margin: 8px 2px 4px;
  position: relative;
  z-index: 12;
}
.vte-track-label {
  font-size: 11px;
  font-weight: 700;
  color: var(--brand-muted, #6b7280);
  margin: 0;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.vte-track-add-wrap {
  position: relative;
  flex-shrink: 0;
}
.vte-track-add-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  padding: 0;
  border: 1px solid var(--brand-border, #e5e7eb);
  border-radius: 8px;
  background: #fff;
  color: var(--brand-text, #111827);
  font: 700 18px/1 'Tajawal', system-ui, -apple-system, 'Segoe UI', sans-serif;
  cursor: pointer;
}
.vte-track-add-btn:hover:not(:disabled) {
  border-color: color-mix(in srgb, var(--brand-primary, #2563eb) 40%, var(--brand-border, #e5e7eb));
  color: var(--brand-primary, #2563eb);
  background: color-mix(in srgb, var(--brand-primary, #2563eb) 6%, #fff);
}
.vte-track-add-btn:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}
.vte-track-add-menu {
  /* Default absolute fallback; JS sets position:fixed + viewport coords on open
     so RTL / modal overflow:hidden cannot clip options off-screen. */
  position: absolute;
  top: auto;
  bottom: calc(100% + 6px);
  inset-inline-start: 0;
  inset-inline-end: auto;
  z-index: 60;
  min-width: 168px;
  max-width: min(240px, calc(100vw - 24px));
  max-height: min(42vh, 280px);
  overflow-x: hidden;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding: 6px;
  border: 1px solid var(--brand-border, #e5e7eb);
  border-radius: 12px;
  background: #fff;
  box-shadow: 0 10px 28px rgba(15, 23, 42, 0.18);
  box-sizing: border-box;
}
.vte-track-add-menu:not([hidden]) {
  /* Beat modal stacking while open (inline z-index also set by JS). */
  z-index: 10050;
}
.vte-track-add-menu[hidden] {
  display: none !important;
}
.vte-track-add-option {
  display: block;
  width: 100%;
  text-align: start;
  margin: 0;
  padding: 8px 10px;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: var(--brand-text, #111827);
  font: 500 13px/1.3 'Tajawal', system-ui, -apple-system, 'Segoe UI', sans-serif;
  cursor: pointer;
}
.vte-track-add-option:hover:not(:disabled) {
  background: color-mix(in srgb, var(--brand-primary, #2563eb) 10%, #fff);
  color: var(--brand-primary, #2563eb);
}
.vte-track-add-option:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}
.vte-export-confirm-section {
  margin-top: 4px;
}
.vte-track {
  position: relative;
  display: flex;
  gap: 3px;
  min-height: 64px;
  padding: 8px;
  border-radius: 10px;
  background: rgba(15, 23, 42, 0.04);
  overflow: hidden;
}
.vte-clip-track.is-reordering {
  gap: 0;
}
/* Empty transition markers sit in zero-width slots; set transitions get real px width inline. */
.vte-transition-slot {
  position: relative;
  flex: 0 0 0;
  width: 0;
  min-width: 0;
  align-self: stretch;
  z-index: 3;
  display: flex;
  align-items: center;
  justify-content: center;
}
.vte-transition-slot.is-empty::before {
  content: '';
  position: absolute;
  left: 50%;
  top: 4px;
  bottom: 4px;
  width: 18px;
  transform: translateX(-50%);
  z-index: 0;
}
.vte-transition-slot.has-transition {
  /* flex-grow set inline from seconds — same time scale as .vte-clip */
  margin: 0 2px;
  box-sizing: border-box;
}
.vte-transition-chip {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 16px;
  min-width: 16px;
  max-width: 16px;
  height: 16px;
  padding: 0;
  border-radius: 999px;
  border: 1px dashed color-mix(in srgb, var(--brand-primary, #7c3aed) 55%, var(--brand-border, #e5e7eb));
  background: #fff;
  color: var(--brand-primary, #7c3aed);
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0;
  cursor: pointer;
  font-family: 'Tajawal', system-ui, -apple-system, 'Segoe UI', sans-serif;
  z-index: 2;
  touch-action: manipulation;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.12);
  transition: opacity 0.12s ease, transform 0.12s ease, background 0.12s ease, border-color 0.12s ease;
}
/* Empty + only when hovering the gap or an adjacent/selected scene reveals it. */
.vte-transition-slot.is-empty .vte-transition-chip {
  opacity: 0;
  pointer-events: none;
  transform: translate(-50%, -50%) scale(0.82);
}
.vte-transition-slot.is-empty:hover .vte-transition-chip,
.vte-transition-slot.is-empty.is-revealed .vte-transition-chip,
.vte-transition-slot.is-empty.is-selected .vte-transition-chip {
  opacity: 1;
  pointer-events: auto;
  transform: translate(-50%, -50%) scale(1);
}
.vte-transition-chip.has-transition,
.vte-transition-slot.has-transition .vte-transition-chip {
  position: relative;
  left: auto;
  top: auto;
  transform: none;
  opacity: 1;
  pointer-events: auto;
  width: 100%;
  height: 100%;
  min-width: 0;
  max-width: none;
  min-height: 48px;
  padding: 6px 8px;
  border-radius: 10px;
  border-style: solid;
  border-width: 1.5px;
  border-color: #f59e0b;
  background: linear-gradient(
    180deg,
    color-mix(in srgb, var(--brand-primary, #7c3aed) 94%, #fff) 0%,
    color-mix(in srgb, var(--brand-primary, #7c3aed) 78%, #4c1d95) 100%
  );
  color: #fff;
  box-shadow:
    0 0 0 2px rgba(251, 191, 36, 0.45),
    0 2px 6px rgba(76, 29, 149, 0.35);
  gap: 3px;
}
.vte-transition-chip.is-selected,
.vte-transition-slot.is-selected .vte-transition-chip {
  outline: 2px solid #111;
  outline-offset: 1px;
  box-shadow:
    0 0 0 2px rgba(251, 191, 36, 0.55),
    0 0 0 4px rgba(124, 58, 237, 0.28);
}
.vte-transition-chip.is-empty:hover {
  background: color-mix(in srgb, var(--brand-primary, #7c3aed) 14%, #fff);
  border-color: var(--brand-primary, #7c3aed);
}
.vte-transition-chip.has-transition:hover {
  filter: brightness(1.06);
}
.vte-transition-chip-plus {
  font-size: 12px;
  font-weight: 700;
  line-height: 1;
}
.vte-transition-chip-icon {
  display: inline-flex;
  line-height: 0;
}
.vte-transition-chip-svg {
  display: block;
}
.vte-transition-chip-name {
  max-width: 100%;
  font-size: 9px;
  font-weight: 700;
  line-height: 1.15;
  text-align: center;
  overflow: hidden;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  word-break: break-word;
}
.vte-transition-chip-sec {
  font-size: 9px;
  font-weight: 700;
  line-height: 1;
  opacity: 0.95;
  font-variant-numeric: tabular-nums;
}
.vte-transition-chip.has-transition .vte-transition-chip-sec {
  letter-spacing: -0.02em;
  color: #fde68a;
}
.vte-drop-gap {
  flex: 0 0 10px;
  width: 10px;
  align-self: stretch;
  margin: 0 3px;
  border-radius: 999px;
  background: linear-gradient(180deg, #38bdf8 0%, #0284c7 100%);
  box-shadow: 0 0 0 2px rgba(14, 165, 233, 0.25), 0 0 12px rgba(14, 165, 233, 0.45);
  animation: vte-drop-gap-pulse 0.7s ease-in-out infinite;
  pointer-events: none;
  z-index: 4;
}
@keyframes vte-drop-gap-pulse {
  0%, 100% { transform: scaleY(0.92); opacity: 0.85; }
  50% { transform: scaleY(1); opacity: 1; }
}
.vte-timeline-panel.is-clip-dragging .vte-playhead {
  pointer-events: none;
}
.vte-layer-track {
  min-height: 44px;
  display: block;
}
.vte-track-empty {
  font-size: 12px;
  padding: 8px;
}
/* Compact strip below the timeline showing job-level reference assets. */
.vte-job-assets {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 10px;
  padding: 8px 10px;
  border: 1px solid var(--brand-border, #e5e7eb);
  border-radius: 12px;
  background: var(--brand-surface, #fff);
}
.vte-job-assets-title {
  font-size: 12px;
  font-weight: 500;
  color: var(--brand-muted, #6b7280);
  white-space: nowrap;
}
.vte-job-assets-list {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  min-width: 0;
}
.vte-job-assets-empty {
  font-size: 12px;
}
.vte-job-asset {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 3px 8px 3px 3px;
  border: 1px solid var(--brand-border, #e5e7eb);
  border-radius: 10px;
  text-decoration: none;
  color: inherit;
  background: var(--brand-bg, #f9fafb);
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
html[dir="rtl"] .vte-job-asset {
  padding: 3px 3px 3px 8px;
}
.vte-job-asset:hover,
.vte-job-asset:focus-visible {
  border-color: var(--brand-primary, #7c3aed);
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.08);
}
.vte-job-asset img {
  width: 36px;
  height: 36px;
  object-fit: cover;
  border-radius: 8px;
  display: block;
  background: #fff;
}
.vte-job-asset-label {
  font-size: 12px;
  font-weight: 500;
  white-space: nowrap;
}
.vte-job-asset-skipped {
  font-size: 11px;
  color: var(--brand-muted, #6b7280);
  white-space: nowrap;
}
.vte-job-asset-token {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 11px;
  color: var(--brand-primary, #7c3aed);
  background: rgba(124, 58, 237, 0.08);
  border-radius: 6px;
  padding: 1px 6px;
  white-space: nowrap;
  direction: ltr;
}
.vte-music-ref-group {
  margin: 10px 0 0;
  text-align: start;
}
.vte-music-ref-group-label {
  font-size: 12px;
  font-weight: 500;
  color: var(--brand-muted, #6b7280);
  margin-bottom: 6px;
}
.vte-music-ref-group .vte-source-picker-actions {
  flex-wrap: wrap;
}
.vte-job-asset-remove {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: var(--brand-muted, #9ca3af);
  font-size: 14px;
  line-height: 1;
  cursor: pointer;
  transition: color 0.15s ease, background 0.15s ease;
}
.vte-job-asset-remove:hover,
.vte-job-asset-remove:focus-visible {
  color: #dc2626;
  background: rgba(220, 38, 38, 0.1);
}
.vte-job-assets-add {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 8px 12px;
  border: 1px dashed var(--brand-border, #d1d5db);
  border-radius: 10px;
  background: transparent;
  color: var(--brand-muted, #6b7280);
  font-family: inherit;
  font-size: 12px;
  font-weight: 500;
  cursor: pointer;
  transition: border-color 0.15s ease, color 0.15s ease;
}
.vte-job-assets-add:hover,
.vte-job-assets-add:focus-visible {
  border-color: var(--brand-primary, #7c3aed);
  color: var(--brand-primary, #7c3aed);
}
.vte-ugc-partial-banner {
  margin: 0 0 10px;
  padding: 10px 12px;
  border-radius: 10px;
  border: 1px solid #fecaca;
  background: #fef2f2;
  color: #991b1b;
  font-family: 'Tajawal', system-ui, -apple-system, 'Segoe UI', sans-serif;
  font-size: 13px;
  font-weight: 500;
  line-height: 1.4;
}
.vte-ugc-place-field {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin: 0 0 12px;
}
.vte-ugc-place-label {
  font-size: 13px;
  font-weight: 500;
  color: var(--brand-text, #111827);
}
.vte-ugc-place-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(72px, 1fr));
  gap: 8px;
}
.vte-ugc-place-tile {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 4px;
  padding: 0;
  border: 2px solid var(--brand-border, #e5e7eb);
  border-radius: 12px;
  background: var(--brand-bg, #f9fafb);
  cursor: pointer;
  overflow: hidden;
  font-family: 'Tajawal', system-ui, -apple-system, 'Segoe UI', sans-serif;
  color: inherit;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.vte-ugc-place-tile:hover,
.vte-ugc-place-tile:focus-visible {
  border-color: var(--brand-primary, #7c3aed);
  outline: none;
}
.vte-ugc-place-tile.is-active {
  border-color: var(--brand-primary, #7c3aed);
  box-shadow: 0 0 0 2px rgba(124, 58, 237, 0.18);
}
.vte-ugc-place-thumb {
  width: 100%;
  aspect-ratio: 3 / 4;
  object-fit: cover;
  display: block;
  background: #e5e7eb;
}
.vte-ugc-place-tile-label {
  font-size: 11px;
  font-weight: 500;
  text-align: center;
  padding: 0 4px 6px;
  color: var(--brand-muted, #6b7280);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.vte-ugc-place-tile.is-active .vte-ugc-place-tile-label {
  color: var(--brand-primary, #7c3aed);
}
.vte-clip {
  position: relative;
  display: flex;
  align-items: stretch;
  min-width: 48px;
  border: 0;
  border-radius: 10px;
  background: var(--brand-primary, #7c3aed) center/cover no-repeat;
  color: #fff;
  cursor: grab;
  overflow: hidden;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.18);
  touch-action: none;
  user-select: none;
  -webkit-user-select: none;
  -webkit-user-drag: none;
  user-drag: none;
}
.vte-clip::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(15,23,42,0.15), rgba(15,23,42,0.72));
}
.vte-clip.is-selected {
  /* Strong selected state — thin dark outline was invisible on dark posters. */
  outline: 3px solid var(--brand-primary, #7c3aed);
  outline-offset: -3px;
  box-shadow:
    0 0 0 2px color-mix(in srgb, var(--brand-primary, #7c3aed) 35%, #fff),
    0 6px 16px rgba(15, 23, 42, 0.22);
  z-index: 3;
  filter: brightness(1.04) saturate(1.05);
}
.vte-clip.is-selected::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  box-shadow: inset 0 0 0 2px rgba(255, 255, 255, 0.55);
}
.vte-clip.has-outgoing-transition {
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.18),
    inset -4px 0 0 0 #f59e0b;
}
.vte-clip.is-selected.has-outgoing-transition {
  box-shadow:
    0 0 0 2px color-mix(in srgb, var(--brand-primary, #7c3aed) 35%, #fff),
    0 6px 16px rgba(15, 23, 42, 0.22),
    inset -4px 0 0 0 #f59e0b;
}
.vte-clip-transition-badge {
  position: absolute;
  right: 4px;
  bottom: 4px;
  z-index: 5;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  max-width: calc(100% - 10px);
  min-height: 22px;
  padding: 3px 7px;
  border: 0;
  border-radius: 999px;
  background: rgba(15, 23, 42, 0.88);
  color: #fde68a;
  box-shadow: 0 0 0 1.5px rgba(245, 158, 11, 0.85);
  cursor: pointer;
  font-family: 'Tajawal', system-ui, -apple-system, 'Segoe UI', sans-serif;
  touch-action: manipulation;
}
.vte-clip-transition-badge:hover {
  background: rgba(76, 29, 149, 0.95);
  color: #fff;
}
.vte-clip-transition-badge-icon {
  display: inline-flex;
  flex-shrink: 0;
  line-height: 0;
  color: currentColor;
}
.vte-clip-transition-badge-icon .vte-transition-chip-svg {
  width: 11px;
  height: 11px;
}
.vte-clip-transition-badge-text {
  font-size: 10px;
  font-weight: 700;
  line-height: 1.1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 7.5em;
}
.vte-clip-transition-badge-sec {
  flex-shrink: 0;
  font-size: 10px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  opacity: 0.95;
}
.vte-clip-trans-meta {
  color: #fde68a;
  font-weight: 700;
}
.vte-clip-delete {
  position: absolute;
  top: 4px;
  inset-inline-end: 4px;
  z-index: 5;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  padding: 0;
  border: 0;
  border-radius: 7px;
  background: rgba(15, 23, 42, 0.72);
  color: #fff;
  font: 700 11px/1 'Tajawal', system-ui, -apple-system, 'Segoe UI', sans-serif;
  cursor: pointer;
  opacity: 0.92;
  touch-action: manipulation;
}
.vte-clip-delete:hover:not(:disabled) {
  background: #dc2626;
}
.vte-clip-delete:disabled {
  opacity: 0.35;
  cursor: not-allowed;
}
.vte-clip:not(.is-selected) .vte-clip-delete {
  opacity: 0.75;
}
.vte-clip.is-dragging {
  opacity: 0.38;
  cursor: grabbing;
  transform: scale(0.97);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.28);
}
.vte-clip.status-pending { background-color: #64748b; }
.vte-clip.status-generating {
  background-color: #b45309;
  outline: 2px solid #f59e0b;
  outline-offset: -2px;
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.22),
    0 0 0 0 rgba(245, 158, 11, 0.35);
  animation: vte-clip-generating-glow 1.6s ease-in-out infinite;
}
/* Poster/last-frame images sit on background-image — tint must live on ::before. */
.vte-clip.status-generating::before {
  background:
    linear-gradient(180deg, rgba(245, 158, 11, 0.42), rgba(180, 83, 9, 0.78)),
    linear-gradient(180deg, rgba(15, 23, 42, 0.08), rgba(15, 23, 42, 0.45));
}
.vte-clip.status-generating.is-selected {
  outline: 2px solid #f59e0b;
  outline-offset: -2px;
}
.vte-clip.status-generating.has-outgoing-transition {
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.22),
    inset -4px 0 0 0 #fbbf24,
    0 0 0 0 rgba(245, 158, 11, 0.35);
}
.vte-clip.status-failed { background-color: #b91c1c; }
.vte-clip-shimmer {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background: linear-gradient(
    105deg,
    transparent 0%,
    transparent 38%,
    rgba(255, 255, 255, 0.28) 50%,
    transparent 62%,
    transparent 100%
  );
  background-size: 220% 100%;
  animation: vte-clip-shimmer 1.4s ease-in-out infinite;
}
.vte-clip-gen-badge {
  position: absolute;
  inset-inline-end: 10px;
  top: 8px;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 28px;
  height: 18px;
  padding: 0 6px;
  border-radius: 999px;
  background: rgba(15, 23, 42, 0.45);
  pointer-events: none;
}
.vte-gen-dots {
  display: inline-flex;
  align-items: center;
  gap: 3px;
}
.vte-gen-dots i {
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: #fff;
  opacity: 0.35;
  animation: vte-gen-dot 1s ease-in-out infinite;
}
.vte-gen-dots i:nth-child(2) { animation-delay: 0.15s; }
.vte-gen-dots i:nth-child(3) { animation-delay: 0.3s; }
.vte-gen-dots-inline {
  margin-inline-end: 5px;
  vertical-align: middle;
}
.vte-gen-dots-inline i {
  width: 3px;
  height: 3px;
}
.vte-clip-meta {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 2px;
  padding: 8px 12px;
  min-width: 0;
  pointer-events: none;
}
.vte-clip-title {
  font-size: 12px;
  font-weight: 700;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.vte-clip-status {
  font-size: 10px;
  opacity: 0.95;
  display: inline-flex;
  align-items: center;
  flex-wrap: wrap;
}
.vte-btn-generating {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 36px;
  background: linear-gradient(90deg, #7c3aed, #a78bfa, #7c3aed) !important;
  background-size: 200% 100% !important;
  animation: vte-btn-generating-bg 1.5s linear infinite;
  color: #fff !important;
  opacity: 1 !important;
  cursor: wait !important;
}
.vte-btn-spinner {
  width: 14px;
  height: 14px;
  border: 2px solid rgba(255, 255, 255, 0.35);
  border-top-color: #fff;
  border-radius: 50%;
  animation: vte-spin 0.75s linear infinite;
  flex-shrink: 0;
}
.vte-inspector-generating {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: #b45309;
  font-weight: 500;
}
.vte-inspector-generating .vte-btn-spinner {
  width: 12px;
  height: 12px;
  border-color: rgba(180, 83, 9, 0.3);
  border-top-color: #b45309;
}
.vte-stage.is-clip-generating .vte-player {
  opacity: 0.22;
  filter: saturate(0.7);
}
.vte-stage-empty {
  position: absolute;
  inset: 0;
  z-index: 4;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
  text-align: center;
  pointer-events: none;
}
.vte-stage-empty[hidden] {
  display: none !important;
}
.vte-stage-empty.is-generating {
  display: flex !important;
  color: #fff;
  font-weight: 500;
  font-size: 14px;
  background: rgba(15, 23, 42, 0.42);
  animation: vte-stage-pulse 1.8s ease-in-out infinite;
}
.vte-stage-empty-inner {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  border-radius: 999px;
  background: rgba(15, 23, 42, 0.55);
  backdrop-filter: blur(6px);
}
@keyframes vte-clip-shimmer {
  0% { background-position: 120% 0; }
  100% { background-position: -120% 0; }
}
@keyframes vte-clip-generating-glow {
  0%, 100% { box-shadow: inset 0 0 0 1px rgba(255,255,255,0.22), 0 0 0 0 rgba(245, 158, 11, 0.2); }
  50% { box-shadow: inset 0 0 0 1px rgba(255,255,255,0.35), 0 0 0 4px rgba(245, 158, 11, 0.18); }
}
@keyframes vte-gen-dot {
  0%, 80%, 100% { opacity: 0.3; transform: translateY(0); }
  40% { opacity: 1; transform: translateY(-2px); }
}
@keyframes vte-btn-generating-bg {
  0% { background-position: 0% 50%; }
  100% { background-position: 200% 50%; }
}
@keyframes vte-spin {
  to { transform: rotate(360deg); }
}
@keyframes vte-stage-pulse {
  0%, 100% { background: rgba(15, 23, 42, 0.38); }
  50% { background: rgba(15, 23, 42, 0.52); }
}
@media (prefers-reduced-motion: reduce) {
  .vte-clip.status-generating,
  .vte-clip-shimmer,
  .vte-gen-dots i,
  .vte-btn-generating,
  .vte-btn-spinner,
  .vte-stage-empty.is-generating {
    animation: none !important;
  }
}
.vte-trim-handle {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 10px;
  z-index: 2;
  cursor: ew-resize;
  background: rgba(255,255,255,0.35);
}
.vte-trim-in { inset-inline-start: 0; border-radius: 10px 0 0 10px; }
.vte-trim-out { inset-inline-end: 0; border-radius: 0 10px 10px 0; }
.vte-layer-chip {
  position: absolute;
  top: 8px;
  bottom: 8px;
  display: flex;
  align-items: center;
  border: 0;
  border-radius: 8px;
  background: rgba(124, 58, 237, 0.18);
  color: var(--brand-primary, #7c3aed);
  border: 1px solid rgba(124, 58, 237, 0.35);
  font-size: 11px;
  font-weight: 700;
  padding: 0;
  /* Visible so edge handles stay hittable on short chips (flex+hidden used to clip the end handle). */
  overflow: visible;
  cursor: grab;
  font-family: inherit;
  touch-action: none;
  user-select: none;
  box-sizing: border-box;
  min-width: 28px;
}
.vte-layer-chip.is-selected {
  outline: 2px solid var(--brand-primary, #7c3aed);
  outline-offset: -2px;
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--brand-primary, #7c3aed) 28%, #fff);
  z-index: 3;
}
.vte-layer-chip.is-dragging {
  cursor: grabbing;
  z-index: 3;
  opacity: 0.95;
}
.vte-layer-chip-label {
  flex: 1;
  min-width: 0;
  padding: 0 14px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  pointer-events: none;
}
/* Absolute edges — same pattern as clip trim handles so start/end stay grabbable in LTR + RTL. */
.vte-layer-handle {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 12px;
  cursor: ew-resize;
  background: rgba(124, 58, 237, 0.28);
  z-index: 2;
  pointer-events: auto;
  touch-action: none;
}
.vte-layer-handle-in {
  inset-inline-start: 0;
  border-start-start-radius: 7px;
  border-end-start-radius: 7px;
}
.vte-layer-handle-out {
  inset-inline-end: 0;
  border-start-end-radius: 7px;
  border-end-end-radius: 7px;
}
.vte-layer-chip.is-selected .vte-layer-handle {
  background: rgba(17, 17, 17, 0.22);
}
.vte-playhead {
  position: absolute;
  /* Align with ruler — cut/clone/transition live in the video track-head row */
  top: 8px;
  bottom: 10px;
  inset-inline-start: 0;
  width: 36px;
  margin-inline-start: -18px;
  background: transparent;
  pointer-events: none; /* clips/track stay clickable; only handle/line scrub */
  cursor: ew-resize;
  z-index: 20; /* above clips / track heads; below open menus (40) */
  touch-action: none;
  outline: none;
}
.vte-playhead-line {
  position: absolute;
  top: 14px;
  bottom: 0;
  left: 50%;
  width: 16px;
  margin-left: -8px;
  background: transparent;
  pointer-events: auto;
  cursor: ew-resize;
  touch-action: none;
  z-index: 1;
}
.vte-playhead-line::after {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  left: 50%;
  width: 2px;
  margin-left: -1px;
  background: #ef4444;
  pointer-events: none;
}
.vte-playhead-handle {
  position: absolute;
  top: -2px;
  left: 50%;
  width: 22px;
  height: 22px;
  margin-left: -11px;
  border-radius: 50%;
  background: #ef4444;
  box-shadow: 0 0 0 2px #fff, 0 1px 4px rgba(15, 23, 42, 0.25);
  pointer-events: auto;
  cursor: ew-resize;
  touch-action: none;
  z-index: 2;
}
.vte-playhead:focus-visible .vte-playhead-handle {
  box-shadow: 0 0 0 2px #fff, 0 0 0 4px rgba(239, 68, 68, 0.45);
}
.vte-inspector {
  border: 1px solid var(--brand-border, #e5e7eb);
  border-radius: 14px;
  padding: 12px;
  background: var(--brand-surface, #fff);
  /* Fill the grid row sized by .vte-main (preview + timeline). */
  align-self: stretch;
  justify-self: stretch;
  height: auto;
  min-height: 0;
  max-height: none;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  gap: 12px;
  box-sizing: border-box;
}
.vte-inspector-body {
  flex: 1;
  min-height: 0;
  overflow: auto;
}
.vte-inspector[data-mode="clip"] .vte-inspector-body {
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
.vte-clip-panel {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-height: 0;
  gap: 0;
}
.vte-clip-panel .vte-inspector-back {
  padding-bottom: 4px;
}
.vte-clip-panel-head {
  flex-shrink: 0;
}
.vte-clip-panel-meta {
  margin: 0 0 10px;
}
.vte-clip-meta-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 10px;
  align-items: end;
  margin-top: 4px;
}
.vte-clip-meta-row .field {
  margin: 0;
}
.vte-clip-slider-field {
  width: 100%;
  margin: 4px 0 12px;
}
.vte-clip-slider-label-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  font-weight: 500;
  font-size: 13px;
  color: var(--brand-ink, #1f2937);
}
.vte-clip-slider-value {
  min-width: 3.25rem;
  padding: 3px 8px;
  border-radius: 8px;
  background: #f1f5f9;
  color: var(--brand-ink, #1f2937);
  font-size: 12px;
  font-weight: 700;
  text-align: center;
  font-variant-numeric: tabular-nums;
}
.vte-clip-range {
  width: 100%;
  margin: 2px 0 0;
  accent-color: var(--brand-primary, #2563eb);
}
.vte-clip-delete-footer {
  align-self: flex-start;
  width: auto;
  min-width: 5.5rem;
  white-space: nowrap;
}
html[dir="rtl"] .vte-clip-delete-footer,
html[lang="ar"] .vte-clip-delete-footer,
html[lang="he"] .vte-clip-delete-footer {
  /* Physical bottom-left under Generate in RTL layouts */
  align-self: flex-end;
}
.vte-clip-delete-row {
  justify-content: flex-start;
  margin-top: 8px;
}
html[dir="rtl"] .vte-clip-delete-row,
html[lang="ar"] .vte-clip-delete-row,
html[lang="he"] .vte-clip-delete-row {
  justify-content: flex-end;
}
.vte-clip-fields .vte-inspector-cat[data-vte-cat="clip-prompt"],
.vte-clip-fields .vte-inspector-cat[data-vte-cat="clip-spoken"] {
  margin: 6px 0;
}
.vte-clip-prompt-field,
.vte-clip-spoken-field {
  margin: 0;
  display: block;
}
.vte-clip-prompt,
.vte-clip-spoken {
  min-height: 72px;
  max-height: 110px;
  resize: vertical;
  overflow-y: auto;
  line-height: 1.45;
}
.vte-options-drawer {
  margin-top: 12px;
  border: 1px solid var(--brand-border, #e5e7eb);
  border-radius: 12px;
  background: var(--brand-surface, #fff);
  overflow: hidden;
}
.vte-options-drawer > summary {
  list-style: none;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 10px 12px;
  font-family: 'Tajawal', system-ui, -apple-system, 'Segoe UI', sans-serif;
  user-select: none;
}
.vte-options-drawer > summary::-webkit-details-marker { display: none; }
.vte-options-drawer > summary::after {
  content: '⌄';
  position: absolute;
  inset-inline-end: 12px;
  top: 12px;
  color: var(--brand-muted, #6b7280);
  font-size: 14px;
  line-height: 1;
}
.vte-options-drawer > summary {
  position: relative;
  padding-inline-end: 28px;
}
.vte-options-drawer[open] > summary::after {
  transform: rotate(180deg);
}
.vte-options-drawer-title {
  font-size: 13px;
  font-weight: 700;
  color: var(--brand-text, #0f172a);
}
.vte-options-drawer-meta {
  font-size: 12px;
  font-weight: 500;
  line-height: 1.35;
}
.vte-options-drawer-body {
  padding: 0 12px 12px;
  border-top: 1px solid var(--brand-border, #e5e7eb);
}
.vte-options-drawer .vte-omni-options-embedded {
  margin-top: 10px;
  padding-top: 0;
  border-top: 0;
}
/* Match create-wizard Image-1 toggle rows (switch + Customize) inside Scene Editor. */
#video-scenes-modal .vte-omni-options.video-create-basic-options {
  margin: 0;
  padding: 0;
  border: 0;
}
#video-scenes-modal .vte-omni-options.video-create-basic-options .vte-omni-feature-grid,
#video-scenes-modal .vte-omni-options.video-create-basic-options .video-omni-feature-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0;
  overflow: visible;
  border: 0;
  border-radius: 0;
  background: transparent;
}
#video-scenes-modal .vte-omni-options.video-create-basic-options .vte-omni-option-group,
#video-scenes-modal .vte-omni-options.video-create-basic-options .video-omni-option-group {
  overflow: hidden;
  margin: 0;
  border: 0;
  border-bottom: 1px solid var(--brand-border, #e5e7eb);
  border-radius: 0;
  background: transparent;
}
#video-scenes-modal .vte-omni-options.video-create-basic-options .vte-omni-option-group:last-child,
#video-scenes-modal .vte-omni-options.video-create-basic-options .video-omni-option-group:last-child {
  border-bottom: 0;
}
#video-scenes-modal .vte-omni-options.video-create-basic-options .vte-omni-option,
#video-scenes-modal .vte-omni-options.video-create-basic-options .video-omni-option {
  width: 100%;
  min-height: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin: 0;
  padding: 9px 4px;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}
#video-scenes-modal .vte-omni-options.video-create-basic-options .vte-omni-option:has(+ .video-omni-customize:not([hidden])),
#video-scenes-modal .vte-omni-options.video-create-basic-options .video-omni-option:has(+ .video-omni-customize:not([hidden])) {
  padding-bottom: 2px;
}
#video-scenes-modal .vte-omni-options.video-create-basic-options .vte-omni-option:hover,
#video-scenes-modal .vte-omni-options.video-create-basic-options .vte-omni-option:has(input:checked),
#video-scenes-modal .vte-omni-options.video-create-basic-options .video-omni-option:hover,
#video-scenes-modal .vte-omni-options.video-create-basic-options .video-omni-option:has(input:checked) {
  border-color: transparent;
  background: transparent;
  box-shadow: none;
}
#video-scenes-modal .vte-omni-options.video-create-basic-options .video-omni-option-title {
  font-size: 13px !important;
  font-weight: 650;
  line-height: 1.3;
  color: var(--brand-ink, #1f2937);
}
#video-scenes-modal .vte-omni-options.video-create-basic-options .vte-omni-option:has(input:checked) .video-omni-option-title,
#video-scenes-modal .vte-omni-options.video-create-basic-options .video-omni-option:has(input:checked) .video-omni-option-title {
  color: var(--brand-accent, #7c3aed);
}
#video-scenes-modal .vte-omni-options.video-create-basic-options .video-omni-option-desc {
  font-size: 11.5px !important;
  font-weight: 400;
  line-height: 1.35;
  color: var(--brand-muted, #64748b);
}
#video-scenes-modal .vte-omni-options.video-create-basic-options .vte-omni-option:has(input:checked) .video-omni-option-desc,
#video-scenes-modal .vte-omni-options.video-create-basic-options .video-omni-option:has(input:checked) .video-omni-option-desc {
  display: none;
}
#video-scenes-modal .vte-omni-options.video-create-basic-options .vte-omni-option input[type="checkbox"],
#video-scenes-modal .vte-omni-options.video-create-basic-options .video-omni-option input[type="checkbox"] {
  position: relative;
  flex: 0 0 36px;
  width: 36px;
  height: 22px;
  margin: 0;
  appearance: none;
  -webkit-appearance: none;
  border: 0;
  border-radius: 999px;
  background: #cbd5e1;
  box-shadow: inset 0 0 0 1px rgba(15, 23, 42, 0.08);
  cursor: pointer;
  transform: none;
}
#video-scenes-modal .vte-omni-options.video-create-basic-options .vte-omni-option input[type="checkbox"]::after,
#video-scenes-modal .vte-omni-options.video-create-basic-options .video-omni-option input[type="checkbox"]::after {
  content: '';
  position: absolute;
  top: 3px;
  inset-inline-start: 3px;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 1px 3px rgba(15, 23, 42, 0.2);
  transition: inset-inline-start 0.16s ease;
}
#video-scenes-modal .vte-omni-options.video-create-basic-options .vte-omni-option input[type="checkbox"]:checked,
#video-scenes-modal .vte-omni-options.video-create-basic-options .video-omni-option input[type="checkbox"]:checked {
  background: var(--brand-accent, #7c3aed);
}
#video-scenes-modal .vte-omni-options.video-create-basic-options .vte-omni-option input[type="checkbox"]:checked::after,
#video-scenes-modal .vte-omni-options.video-create-basic-options .video-omni-option input[type="checkbox"]:checked::after {
  inset-inline-start: 17px;
}
#video-scenes-modal .vte-omni-options.video-create-basic-options .video-omni-customize {
  width: 100%;
  min-height: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  align-items: center;
  gap: 8px;
  margin: 0;
  padding: 0 4px 8px;
  border: 0;
  border-radius: 0;
  background: transparent;
  text-align: start;
}
#video-scenes-modal .vte-omni-options.video-create-basic-options .video-omni-customize-label {
  display: none;
}
#video-scenes-modal .vte-omni-options.video-create-basic-options .video-omni-customize:hover,
#video-scenes-modal .vte-omni-options.video-create-basic-options .video-omni-customize[aria-expanded="true"] {
  border-color: transparent;
  background: transparent;
  border-radius: 0;
}
#video-scenes-modal .vte-omni-options.video-create-basic-options .video-omni-customize[aria-expanded="true"] .video-omni-customize-summary {
  display: none;
}
#video-scenes-modal .vte-omni-options.video-create-basic-options .video-omni-customize-summary {
  overflow: hidden;
  font-size: 11.5px;
  font-weight: 400;
  line-height: 1.35;
  color: var(--brand-muted, #64748b);
  white-space: nowrap;
  text-overflow: ellipsis;
}
#video-scenes-modal .vte-omni-options.video-create-basic-options .video-omni-customize-action {
  font-size: 12px;
  font-weight: 500;
  color: var(--brand-accent, #7c3aed);
  white-space: nowrap;
}
#video-scenes-modal .vte-omni-options.video-create-basic-options .video-omni-customize-chevron {
  font-size: 14px;
  line-height: 1;
  color: var(--brand-accent, #7c3aed);
  transition: transform 0.22s ease;
}
#video-scenes-modal .vte-omni-options.video-create-basic-options .video-omni-customize[aria-expanded="true"] .video-omni-customize-chevron {
  transform: rotate(180deg);
}
#video-scenes-modal .vte-omni-options.video-create-basic-options .video-omni-suboptions {
  margin: 0;
  padding: 0 4px 10px;
  border: 0;
  border-radius: 0;
  background: transparent;
}
/* When open, force visible even if create-panel collapse rules race the toggle. */
#video-scenes-modal .vte-omni-options.video-create-basic-options .video-omni-suboptions.is-open {
  max-height: 520px;
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  padding: 2px 4px 10px;
}
#video-scenes-modal .vte-omni-options.video-create-basic-options .video-omni-suboptions[hidden] {
  display: none !important;
}
.vte-omni-music-field {
  margin: 4px 0 0;
}
.video-omni-music-from-last-hint {
  margin: 8px 0 0;
  font-size: 12px;
  line-height: 1.4;
  color: var(--brand-muted, #6b7280);
  font-family: 'Tajawal', system-ui, -apple-system, 'Segoe UI', sans-serif;
}
.video-omni-music-from-last-hint[hidden] {
  display: none !important;
}
.vte-clip-subtabs {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 4px;
  padding: 4px;
  margin: 0 0 12px;
  border-radius: 12px;
  background: rgba(15, 23, 42, 0.05);
  flex-shrink: 0;
}
.vte-clip-subtab {
  border: 0;
  border-radius: 9px;
  padding: 9px 8px;
  font: 700 12px/1.45 'Tajawal', system-ui, -apple-system, 'Segoe UI', sans-serif;
  color: var(--brand-muted, #6b7280);
  background: transparent;
  cursor: pointer;
}
.vte-clip-subtab.is-active {
  background: #fff;
  color: var(--brand-text, #0f172a);
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.08);
}
.vte-clip-panel-body {
  flex: 1;
  min-height: 0;
  overflow: auto;
  padding-bottom: 4px;
  display: flex;
  flex-direction: column;
  gap: 0;
}
.vte-clip-panel-body .vte-inspector-section {
  padding: 0;
}
.vte-clip-panel-footer {
  flex-shrink: 0;
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid var(--brand-border, #e5e7eb);
  background: var(--brand-surface, #fff);
}
.vte-clip-panel-footer .vte-inline-actions-stack {
  margin: 0;
}
.vte-omni-options-embedded {
  margin-top: 16px;
  padding-top: 14px;
  border-top: 1px solid var(--brand-border, #e5e7eb);
}
.vte-clip-panel-body .vte-omni-options-embedded > h4 {
  margin: 0 0 10px;
  font-size: 14px;
  font-weight: 700;
}
.vte-inspector-tabs {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 4px;
  padding: 4px;
  border-radius: 12px;
  background: rgba(15, 23, 42, 0.05);
  flex-shrink: 0;
}
.vte-inspector-tab {
  border: 0;
  border-radius: 9px;
  padding: 9px 8px;
  font: 700 12px/1.45 'Tajawal', system-ui, -apple-system, 'Segoe UI', sans-serif;
  color: var(--brand-muted, #6b7280);
  background: transparent;
  cursor: pointer;
}
.vte-inspector-tab.is-active {
  background: #fff;
  color: var(--brand-text, #0f172a);
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.08);
}
.vte-inspector-tab:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}
.vte-inspector-back {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border: 0;
  background: transparent;
  color: var(--brand-primary, #7c3aed);
  font: 700 13px/1.2 'Tajawal', system-ui, -apple-system, 'Segoe UI', sans-serif;
  padding: 0 0 8px;
  cursor: pointer;
}
.vte-inspector-back:hover { text-decoration: underline; }
html[dir="rtl"] .vte-inspector-back-icon,
html[lang="ar"] .vte-inspector-back-icon,
html[lang="he"] .vte-inspector-back-icon {
  display: inline-block;
  transform: scaleX(-1);
}
.vte-inspector-meta {
  margin: 0 0 12px;
  font-size: 12px;
  font-weight: 500;
  line-height: 1.45;
  overflow: visible;
}
.vte-inspector-hint {
  margin: 0;
  font-size: 13px;
  font-weight: 400;
  line-height: 1.45;
}
.vte-omni-options {
  margin-top: 24px;
  padding-top: 20px;
  border-top: 1px solid var(--brand-border, #e5e7eb);
}
.vte-omni-options > h4 {
  margin: 0 0 10px;
  font-size: 15px;
  font-weight: 700;
}
.vte-omni-advanced-shell {
  margin-top: 12px;
}
.vte-omni-advanced-shell .video-omni-advanced-heading {
  margin: 0 0 8px;
  font-size: 12px;
  font-weight: 500;
  color: var(--brand-muted, #6b7280);
}
.vte-omni-advanced-shell .video-omni-advanced-heading[hidden] {
  display: none !important;
}
/* Inspector is always narrow — keep voice fields stacked and fully styled. */
#video-scenes-modal .vte-omni-options .video-omni-narrator-grid {
  grid-template-columns: 1fr;
}
#video-scenes-modal .vte-omni-options .video-omni-suboptions {
  border: 0;
  border-radius: 0;
  background: transparent;
  padding: 0 12px 12px;
}
#video-scenes-modal .vte-omni-options .video-omni-suboptions select {
  margin-bottom: 12px;
}
#video-scenes-modal .vte-omni-options .video-omni-narrator-grid select {
  margin-bottom: 0;
}
.vte-omni-option-block,
.video-omni-option-block {
  margin: 0 0 10px;
  border: 1px solid var(--brand-border, #e5e7eb);
  border-radius: 10px;
  background: #fff;
  overflow: hidden;
}
.vte-omni-option-block.is-enabled,
.video-omni-option-block.is-enabled {
  border-color: color-mix(in srgb, var(--brand-primary, #2563eb) 45%, var(--brand-border, #e5e7eb));
  background: color-mix(in srgb, var(--brand-primary, #2563eb) 6%, #fff);
}
.vte-omni-option-head,
.video-omni-option-head {
  display: flex;
  align-items: flex-start;
  gap: 4px;
}
.vte-omni-option-head .vte-omni-option,
.video-omni-option-head .video-omni-option {
  flex: 1;
  min-width: 0;
  margin: 0;
  border: 0;
  background: transparent;
  box-shadow: none;
}
.vte-omni-expand,
.video-omni-option-expand {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  min-height: 44px;
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--brand-muted, #6b7280);
  cursor: pointer;
  font-family: 'Tajawal', system-ui, -apple-system, 'Segoe UI', sans-serif;
}
.vte-omni-expand .video-omni-customize-chevron,
.video-omni-option-expand .video-omni-customize-chevron {
  display: inline-block;
  transition: transform 0.18s ease;
}
.vte-omni-expand[aria-expanded="true"] .video-omni-customize-chevron,
.video-omni-option-expand[aria-expanded="true"] .video-omni-customize-chevron,
.vte-omni-option-block.is-expanded .vte-omni-expand .video-omni-customize-chevron,
.video-omni-option-block.is-expanded .video-omni-option-expand .video-omni-customize-chevron {
  transform: rotate(180deg);
}
.vte-omni-option-summary,
.video-omni-option-summary {
  display: block;
  margin-top: 4px;
  font-size: 12px;
  font-weight: 500;
  color: var(--brand-primary, #2563eb);
  line-height: 1.35;
}
.vte-omni-option-summary[hidden],
.video-omni-option-summary[hidden] {
  display: none !important;
}
.vte-omni-option-block .video-omni-suboptions,
.video-omni-option-block .video-omni-suboptions {
  margin: 0;
  padding: 0 12px 12px;
  border-top: 0;
}
.vte-omni-option {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin: 0 0 10px;
  padding: 10px 12px;
  border: 1px solid var(--brand-border, #e5e7eb);
  border-radius: 10px;
  cursor: pointer;
  font-family: 'Tajawal', system-ui, -apple-system, 'Segoe UI', sans-serif;
}
.vte-omni-option:has(input:checked) {
  border-color: color-mix(in srgb, var(--brand-primary, #2563eb) 45%, var(--brand-border, #e5e7eb));
  background: color-mix(in srgb, var(--brand-primary, #2563eb) 6%, #fff);
}
.vte-omni-option-block .vte-omni-option:has(input:checked),
.vte-omni-option-block .vte-omni-option {
  border: 0;
  background: transparent;
  margin: 0;
}
.vte-omni-option input {
  margin-top: 3px;
  flex-shrink: 0;
}
.vte-omni-option-copy {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
.vte-omni-option-copy strong {
  font-size: 13px;
  font-weight: 500;
  color: var(--brand-text, #111827);
}
.vte-omni-option-copy small {
  font-size: 12px;
  font-weight: 400;
  color: var(--brand-muted, #6b7280);
  line-height: 1.35;
}
.vte-omni-music-mode,
.video-omni-music-mode-group {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin: 0 0 12px;
}
.video-omni-music-mode-group > .video-omni-option-copy {
  margin-bottom: 2px;
}
.vte-export-music-tracks {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin: 0;
}
.vte-export-music-chip {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin: 0;
  padding: 10px 12px;
  border: 1px solid var(--brand-border, #e5e7eb);
  border-radius: 12px;
  background: var(--brand-surface, #fff);
  font-family: 'Tajawal', system-ui, -apple-system, 'Segoe UI', sans-serif;
  box-sizing: border-box;
  transition: border-color 0.15s ease, background 0.15s ease, box-shadow 0.15s ease;
}
.vte-export-music-chip.is-previewing {
  border-color: color-mix(in srgb, var(--brand-primary, #7c3aed) 45%, var(--brand-border, #e5e7eb));
  background: color-mix(in srgb, var(--brand-primary, #7c3aed) 6%, #fff);
  box-shadow: 0 1px 0 rgba(15, 23, 42, 0.04);
}
.vte-export-music-chip-main {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}
.vte-export-music-chip-play {
  width: 36px;
  height: 36px;
  border: 0;
  border-radius: 999px;
  background: #111827;
  color: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  flex-shrink: 0;
  transition: background 0.15s ease, transform 0.15s ease;
}
.vte-export-music-chip-play svg {
  display: block;
  margin-inline-start: 1px;
}
.vte-export-music-chip.is-playing .vte-export-music-chip-play svg {
  margin-inline-start: 0;
}
.vte-export-music-chip-play:hover {
  background: #0f172a;
  transform: scale(1.04);
}
.vte-export-music-chip-meta {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.vte-export-music-chip-label {
  font-size: 13px;
  font-weight: 700;
  color: var(--brand-text, #0f172a);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.vte-export-music-chip-dur {
  font-size: 12px;
  font-weight: 500;
  color: var(--brand-muted, #64748b);
}
.vte-export-music-chip-add {
  flex: 0 0 auto;
  border: 0;
  background: transparent;
  color: var(--brand-primary, #7c3aed);
  font: inherit;
  font-size: 13px;
  font-weight: 700;
  padding: 6px 4px;
  cursor: pointer;
  border-radius: 8px;
}
.vte-export-music-chip-add:hover {
  background: color-mix(in srgb, var(--brand-primary, #7c3aed) 10%, transparent);
}
.vte-export-music-chip-mini {
  display: flex;
  align-items: center;
  gap: 10px;
  padding-inline-start: 46px;
  min-width: 0;
}
.vte-export-music-chip-mini[hidden] {
  display: none !important;
}
.vte-export-music-chip-scrub {
  flex: 1 1 auto;
  min-width: 0;
  margin: 0;
  accent-color: var(--brand-primary, #7c3aed);
}
.vte-export-music-chip-time {
  flex: 0 0 auto;
  font-size: 11px;
  font-weight: 500;
  color: var(--brand-muted, #64748b);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.vte-music-panel-section {
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.vte-music-panel-section > h4,
.vte-music-panel-section > .vte-inspector-meta {
  margin: 0;
}
.vte-export-music-volume {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0;
  padding-top: 2px;
  font-size: 13px;
  font-weight: 500;
  font-family: 'Tajawal', system-ui, -apple-system, 'Segoe UI', sans-serif;
  color: var(--brand-text, #111827);
}
.vte-export-music-volume input[type="range"] {
  flex: 1;
  min-width: 0;
}
#create-panel .video-omni-music-mode-group .video-omni-music-mode-option {
  margin: 0;
}
#video-scenes-options-step .video-omni-options-header,
#video-frames-options-step .video-omni-options-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 10px;
}
.video-options-length-tag-wrap {
  position: relative;
  display: inline-flex;
  align-items: center;
  flex-shrink: 0;
}
button.video-options-length-tag,
#video-scenes-options-step #video_scenes_options_length_tag,
#video-frames-options-step #video_frames_options_length_tag {
  appearance: none;
  border: 0;
  cursor: pointer;
  min-width: 74px;
  padding: 7px 10px;
  border-radius: 9px;
  background: #f1f5f9;
  color: var(--brand-ink, #1f2937);
  font-family: 'Tajawal', system-ui, -apple-system, 'Segoe UI', sans-serif;
  font-size: 14px;
  font-weight: 500;
  line-height: 1.35;
  text-align: center;
  white-space: nowrap;
}
button.video-options-length-tag:hover,
#video-scenes-options-step #video_scenes_options_length_tag:hover,
#video-frames-options-step #video_frames_options_length_tag:hover {
  background: #e2e8f0;
}
button.video-options-length-tag:focus-visible,
#video-scenes-options-step #video_scenes_options_length_tag:focus-visible,
#video-frames-options-step #video_frames_options_length_tag:focus-visible {
  outline: 2px solid color-mix(in srgb, var(--brand-primary, #7c3aed) 55%, #fff);
  outline-offset: 2px;
}
.video-options-length-select {
  position: absolute;
  inset-inline-end: 0;
  top: calc(100% + 4px);
  z-index: 5;
  min-width: 100%;
  padding: 6px 8px;
  border: 1px solid var(--brand-border, #e5e7eb);
  border-radius: 10px;
  background: #fff;
  color: var(--brand-ink, #1f2937);
  font-family: 'Tajawal', system-ui, -apple-system, 'Segoe UI', sans-serif;
  font-size: 13px;
  box-shadow: 0 8px 20px rgba(15, 23, 42, 0.12);
}
#video-scenes-options-step #video-omni-scenes-options {
  margin-top: 0;
}
#video-scenes-options-step .video-omni-feature-grid {
  border-top: 1px solid var(--brand-border, #e5e7eb);
}
/* Prompt sits under options: keep textarea border, drop outer card chrome. */
#video-scenes-section #video-scenes-prompt-slot #creative-direction-field,
#video-scenes-section #video-scenes-prompt-slot .animated-video-write-prompt-panel {
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}
.vte-inspector-section + .vte-inspector-section {
  margin-top: 16px;
  padding-top: 14px;
  border-top: 1px solid var(--brand-border, #e5e7eb);
}
.vte-inspector h4 {
  margin: 0 0 10px;
  font-size: 15px;
  font-weight: 700;
}
.vte-inline-actions-stack {
  flex-direction: column;
  align-items: stretch;
}
.vte-inline-actions-stack .button { justify-content: center; }
.vte-danger-btn {
  color: #b91c1c !important;
  border-color: rgba(185, 28, 28, 0.28) !important;
}
.vte-inspector .field {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-bottom: 10px;
  font-size: 13px;
  font-weight: 500;
  color: var(--brand-text, #0f172a);
}
.vte-inspector .field input,
.vte-inspector .field textarea,
.vte-inspector .field select {
  width: 100%;
  box-sizing: border-box;
  border: 1px solid var(--brand-border, #e5e7eb);
  border-radius: 12px;
  padding: 10px 12px;
  font: 400 14px/1.4 'Tajawal', system-ui, -apple-system, 'Segoe UI', sans-serif;
  background: #fff;
  color: var(--brand-text, #0f172a);
}
.vte-inspector .field input[type="color"] {
  padding: 4px;
  min-height: 42px;
}
.vte-inspector .field input:focus,
.vte-inspector .field textarea:focus,
.vte-inspector .field select:focus {
  outline: none;
  border-color: var(--brand-primary, #7c3aed);
  box-shadow: 0 0 0 3px rgba(124, 58, 237, 0.15);
}
.vte-inline-fields {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}
.vte-inspector .field-hint {
  display: block;
  margin-top: 6px;
  font-size: 12px;
  line-height: 1.35;
  font-weight: 400;
}
.vte-inline-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 4px;
}
.vte-export-link { margin: 8px 0 0; grid-column: 1 / -1; }
.vte-loading { padding: 24px; text-align: center; }

html[dir="rtl"] #video-scenes-modal .modal-close,
[dir="rtl"] #video-scenes-modal .modal-close,
.rtl #video-scenes-modal .modal-close,
html[lang="ar"] #video-scenes-modal .modal-close,
html[lang="he"] #video-scenes-modal .modal-close {
  left: 16px;
  right: auto;
}

@media (max-width: 900px) {
  .video-scenes-modal-card,
  .vte-modal-card {
    width: calc(100vw - 8px);
    max-height: calc(100dvh - 8px);
    max-height: calc(100vh - 8px);
    padding: 12px 12px 10px;
    border-radius: 16px;
  }
  .video-scenes-modal-header,
  .vte-header {
    margin-bottom: 10px;
    padding-inline-end: 40px;
  }
  .video-scenes-modal-header .modal-title,
  .vte-header .modal-title {
    font-size: 16px;
  }
  .video-scenes-modal-header .modal-subtitle,
  .vte-header .modal-subtitle {
    font-size: 12px;
  }

  /* Stack: sticky preview, then timeline, then inspector.
     Sticky fails on flex children unless align-self is not stretch. */
  .vte-editor {
    display: flex;
    flex-direction: column;
    gap: 12px;
    min-height: 0;
  }
  .vte-editor > .vte-preview-row {
    position: sticky;
    top: 0;
    z-index: 14;
    order: 0;
    align-self: flex-start;
    width: 100%;
    box-sizing: border-box;
    background: var(--brand-card, #fff);
    padding: 0 0 8px;
    box-shadow: 0 10px 14px -12px rgba(15, 23, 42, 0.35);
  }
  .vte-editor > .vte-main {
    order: 1;
    min-width: 0;
    align-self: stretch;
  }
  .vte-editor > .vte-inspector {
    order: 2;
    position: relative;
    z-index: 2;
    align-self: stretch;
    height: auto;
    min-height: 0 !important;
    max-height: none;
    overflow: visible;
  }
  .vte-editor > .vte-export-link {
    order: 3;
  }
  .vte-editor-review {
    display: flex;
    flex-direction: column;
  }
  .vte-editor-review > .vte-main,
  .vte-editor-review > #vte-review {
    order: 1;
  }
  .vte-editor-review > .vte-inspector {
    order: 2;
  }

  .vte-stage {
    max-height: min(26vh, 200px);
  }
  .vte-preview-row.has-takes .vte-takes-rail {
    max-height: 76px;
  }
  .vte-timeline-panel {
    /* Clip vertical spill into the inspector; keep x on the tracks so the
       absolute playhead is not trapped inside a horizontal scrollport. */
    overflow-x: clip;
    overflow-y: hidden;
  }
  .vte-timeline-tools {
    z-index: 6;
    flex-wrap: wrap;
    justify-content: flex-start;
    gap: 6px;
  }
  .vte-playhead {
    /* Above track heads (12) and clips — mobile had dropped this to 8. */
    z-index: 24;
    /* Ruler first; tools sit in the video track-head row. */
    top: 8px;
    width: 44px;
    margin-inline-start: -22px;
    /* Whole column is grabbable on touch (handle alone is too small). */
    pointer-events: auto;
  }
  .vte-playhead-line {
    width: 28px;
    margin-left: -14px;
  }
  .vte-playhead-handle {
    width: 28px;
    height: 28px;
    margin-left: -14px;
    top: -4px;
  }
  .vte-clip-track,
  .vte-layer-track {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
  .vte-inspector-body {
    overflow: visible;
  }
  .vte-inspector[data-mode="clip"] .vte-inspector-body {
    overflow: visible;
  }
  .vte-footer {
    flex-wrap: wrap;
    gap: 8px;
    min-height: 0;
    padding-top: 10px;
  }
  .vte-footer-tools {
    position: static;
    transform: none;
    width: 100%;
    order: 2;
    justify-content: flex-start;
  }
  .vte-footer-actions {
    width: 100%;
    order: 1;
    justify-content: stretch;
  }
  .vte-footer-actions .button,
  .vte-footer .button:not(.vte-history-btn) {
    min-width: 0;
    flex: 1 1 auto;
    width: 100%;
  }
  html[dir="rtl"] .vte-footer,
  html[lang="ar"] .vte-footer,
  html[lang="he"] .vte-footer {
    justify-content: stretch;
  }
  #video-scenes-modal.vte-reviewing .vte-footer-tools,
  #video-scenes-modal.vte-reviewing .vte-footer-actions {
    width: 100%;
  }
}
.video-scenes-preview-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 14px;
}
.video-scenes-preview-actions .button {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.video-scenes-scene-count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 22px;
  height: 22px;
  padding: 0 7px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.28);
  color: #fff;
  font-size: 12px;
  font-weight: 700;
  line-height: 1;
}
.video-scenes-editor {
  margin-top: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
}
.video-scenes-editor:not(.video-scenes-editor--modal) {
  margin-top: 16px;
  padding: 14px;
  border: 1px solid var(--brand-border, #e5e7eb);
  border-radius: 14px;
  background: var(--brand-surface, #fff);
}
.video-scenes-editor-head h4 {
  margin: 0 0 4px;
  font-weight: 700;
  font-size: 16px;
}
.vs-timeline-track {
  display: flex;
  gap: 6px;
  min-height: 64px;
  margin: 0 0 12px;
  padding: 8px;
  border-radius: 10px;
  background: rgba(15, 23, 42, 0.04);
  overflow-x: auto;
}
.vs-timeline-scene {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  gap: 2px;
  padding: 8px 10px;
  border: 0;
  border-radius: 10px;
  background: var(--brand-primary, #7c3aed);
  color: #fff;
  cursor: pointer;
  text-align: start;
  font-family: 'Tajawal', system-ui, -apple-system, 'Segoe UI', sans-serif;
  min-width: 0;
}
.vs-timeline-scene.is-selected { outline: 2px solid #111; outline-offset: 2px; }
.vs-timeline-scene.is-stale { background: #b45309; }
.vs-timeline-scene-label {
  font-weight: 700;
  font-size: 13px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
}
.vs-timeline-scene-meta { font-size: 11px; opacity: 0.9; }
.vs-timeline-toolbar { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 12px; }
.vs-scene-detail label {
  display: flex;
  flex-direction: column;
  gap: 6px;
  font-weight: 500;
  font-size: 13px;
}
.vs-scene-detail-row {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: end;
}
.vs-scene-detail textarea,
.vs-scene-detail select,
.vs-scene-detail input { font-weight: 400; }
html[dir="rtl"] .vs-timeline-scene {
  align-items: flex-end;
  text-align: end;
}

/* Brand Knowledge assets prefs — collapsed by default; expand to configure */
#brand-assets-prefs-panel {
  margin-top: 14px;
  font-family: 'Tajawal', system-ui, -apple-system, 'Segoe UI', sans-serif;
}
#brand-assets-prefs-panel .brand-assets-prefs-details {
  margin-bottom: 0;
  border: 0;
  background: transparent;
  border-radius: 0;
}
#brand-assets-prefs-panel .brand-assets-prefs-summary {
  align-items: flex-start;
  gap: 10px;
  padding: 4px 0;
  color: var(--brand-ink);
  font-family: 'Tajawal', system-ui, -apple-system, 'Segoe UI', sans-serif;
}
#brand-assets-prefs-panel .brand-assets-prefs-body {
  padding: 4px 0 0;
}
#brand-assets-prefs-panel .brand-assets-prefs-summary-text {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
  flex: 1 1 auto;
}
#brand-assets-prefs-panel .brand-assets-prefs-summary-title {
  font-size: 14px;
  font-weight: 700;
  color: var(--brand-ink);
  line-height: 1.3;
}
#brand-assets-prefs-panel .brand-assets-prefs-summary-hint {
  font-size: 12px;
  font-weight: 400;
  color: var(--brand-muted);
  line-height: 1.4;
}
#brand-assets-prefs-panel > label {
  display: block;
  font-size: 14px;
  font-weight: 500;
  color: var(--brand-ink);
  margin: 0;
  font-family: inherit;
}
#brand-assets-prefs-panel .brand-assets-mode-options {
  margin-top: 0;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}
.brand-assets-manage-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  flex: 0 0 auto;
  padding: 8px 12px;
  border: 1px solid var(--brand-border);
  border-radius: 999px;
  background: #fff;
  color: var(--brand-ink);
  font: inherit;
  font-size: 13px;
  font-weight: 500;
  line-height: 1.2;
  cursor: pointer;
  font-family: 'Tajawal', system-ui, -apple-system, 'Segoe UI', sans-serif;
  white-space: nowrap;
}
.brand-assets-manage-pill:hover,
.brand-assets-manage-pill:focus-visible {
  border-color: color-mix(in srgb, var(--brand-primary) 45%, var(--brand-border));
  background: color-mix(in srgb, var(--brand-primary) 8%, #fff);
  color: var(--brand-ink);
  outline: none;
}
.brand-assets-manage-pill-icon {
  width: 14px;
  height: 14px;
  flex: 0 0 auto;
  color: var(--brand-primary);
}
#brand-assets-prefs-panel .brand-assets-mode-options .language-option {
  font-weight: 400;
}
#brand-assets-prefs-panel .brand-assets-mode-options .language-option:has(input:checked) {
  border-color: color-mix(in srgb, var(--brand-primary) 45%, var(--brand-border));
  background: color-mix(in srgb, var(--brand-primary) 8%, #fff);
  color: var(--brand-ink);
}
#brand-assets-prefs-panel .brand-assets-mode-options .language-option input[type="radio"] {
  flex: 0 0 16px;
  width: 16px;
  height: 16px;
  margin: 0;
  accent-color: var(--brand-primary);
}
#brand-assets-prefs-panel .brand-assets-prefs-custom {
  display: flex;
  flex-wrap: wrap;
  gap: 12px 16px;
  margin-top: 10px;
}
#brand-assets-prefs-panel .brand-assets-prefs-custom[hidden] {
  display: none !important;
}
#brand-assets-prefs-panel .brand-assets-prefs-custom .checkbox-line {
  margin-top: 0;
  font-weight: 400;
}
/* .checkbox-line uses display:inline-flex, which overrides UA [hidden]. */
#brand-assets-prefs-panel .brand-assets-prefs-custom .checkbox-line[hidden] {
  display: none !important;
}
#brand-assets-prefs-panel .brand-assets-prefs-custom input[type="checkbox"] {
  flex: 0 0 16px;
  width: 16px;
  height: 16px;
  margin: 0;
  accent-color: var(--brand-primary);
}
#brand-assets-prefs-panel .brand-assets-custom-empty {
  margin: 8px 0 0;
  font-size: 12px;
  line-height: 1.4;
  color: var(--brand-muted);
  font-family: 'Tajawal', system-ui, -apple-system, 'Segoe UI', sans-serif;
}
#brand-assets-prefs-panel .brand-assets-custom-empty[hidden] {
  display: none !important;
}
.brand-assets-preview-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 12px;
}
.brand-assets-preview-row[hidden],
#brand-assets-prefs-panel.is-mode-off .brand-assets-preview-row {
  display: none !important;
}
#brand-assets-prefs-panel.is-mode-off .brand-assets-prefs-custom {
  display: none !important;
}
.brand-assets-preview-thumb {
  position: relative;
  width: 72px;
  height: 72px;
  border-radius: 10px;
  border: 1px solid #e8eaef;
  overflow: hidden;
  padding: 0;
  background: #f3f4f6;
  cursor: zoom-in;
  flex: 0 0 auto;
}
.brand-assets-preview-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.brand-assets-preview-label {
  position: absolute;
  inset-inline: 0;
  bottom: 0;
  padding: 3px 4px;
  font-size: 10px;
  font-weight: 700;
  line-height: 1.2;
  color: #fff;
  text-align: center;
  background: linear-gradient(180deg, transparent 0%, rgba(15, 23, 42, 0.78) 40%);
  font-family: 'Tajawal', system-ui, -apple-system, 'Segoe UI', sans-serif;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.brand-assets-preview-thumb:hover,
.brand-assets-preview-thumb:focus-visible {
  border-color: color-mix(in srgb, var(--brand-primary) 40%, #e8eaef);
  outline: none;
}
#brand-assets-prefs-panel.is-overlay-blocked .brand-assets-mode-options {
  opacity: 0.55;
  pointer-events: none;
}
#brand-assets-empty-hint {
  margin-top: 6px;
  font-size: 13px;
  line-height: 1.45;
  color: var(--brand-ink);
  font-weight: 500;
  font-family: 'Tajawal', system-ui, -apple-system, 'Segoe UI', sans-serif;
}
#brand-assets-empty-hint[hidden] {
  display: none !important;
}
/* Empty brand: hide mode pills; keep Manage + invite */
#brand-assets-prefs-panel.is-empty .brand-assets-mode-options .language-option,
#brand-assets-prefs-panel.is-empty .brand-assets-prefs-custom,
#brand-assets-prefs-panel.is-empty .brand-assets-preview-row {
  display: none !important;
}
#brand-assets-prefs-panel.is-empty .brand-assets-mode-options {
  margin-bottom: 6px;
}

/* Nested manage modal over Create */
.brand-assets-manage-card {
  width: min(720px, 94vw);
  max-height: min(88vh, 860px);
  overflow: auto;
  display: grid;
  gap: 12px;
}
.brand-assets-manage-toolbar {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  min-width: 0;
}
.brand-assets-manage-upload {
  flex: 0 0 auto;
}
.brand-assets-manage-filters {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  min-width: 0;
  flex: 1 1 auto;
}
.brand-assets-manage-filters .bk-manage-chip {
  border: 1px solid #e5e7eb;
  background: #fff;
  border-radius: 999px;
  padding: 5px 10px;
  font-size: 12px;
  font-weight: 500;
  font-family: 'Tajawal', system-ui, -apple-system, 'Segoe UI', sans-serif;
  color: #6b7280;
  cursor: pointer;
  line-height: 1.2;
}
.brand-assets-manage-filters .bk-manage-chip.is-filled {
  color: var(--brand-ink);
  border-color: color-mix(in srgb, var(--brand-primary) 28%, #e5e7eb);
  background: color-mix(in srgb, var(--brand-primary) 6%, #fff);
}
.brand-assets-manage-filters .bk-manage-chip.is-active {
  border-color: color-mix(in srgb, var(--brand-primary) 45%, #e5e7eb);
  background: color-mix(in srgb, var(--brand-primary) 12%, #fff);
  color: var(--brand-ink);
}
.brand-assets-manage-filters .bk-manage-chip.is-needs {
  border-color: color-mix(in srgb, #f59e0b 40%, #e5e7eb);
  background: #fffbeb;
  color: #92400e;
}
.brand-assets-manage-filters .bk-manage-chip.is-needs.is-active {
  border-color: #f59e0b;
  background: #fef3c7;
  color: #78350f;
  box-shadow: 0 0 0 1px color-mix(in srgb, #f59e0b 25%, transparent);
}
.brand-assets-manage-filters .bk-manage-chip.is-needs span {
  color: #b45309;
  font-weight: 700;
}
.brand-assets-manage-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
  min-height: 120px;
}
.brand-assets-manage-item {
  position: relative;
  border: 1px solid #e8eaef;
  border-radius: 12px;
  overflow: hidden;
  background: #fff;
  display: grid;
  gap: 0;
  min-width: 0;
}
.brand-assets-manage-delete {
  position: absolute;
  top: 8px;
  inset-inline-end: 8px;
  z-index: 2;
  width: 28px;
  height: 28px;
  border: 0;
  border-radius: 999px;
  background: rgba(17, 24, 39, 0.72);
  color: #fff;
  font-size: 18px;
  line-height: 1;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
}
.brand-assets-manage-delete:hover,
.brand-assets-manage-delete:focus-visible {
  background: rgba(185, 28, 28, 0.92);
  outline: none;
}
html[dir="rtl"] .brand-assets-manage-delete,
html[lang="ar"] .brand-assets-manage-delete,
html[lang="he"] .brand-assets-manage-delete {
  left: 8px;
  right: auto;
}
.brand-assets-manage-item.is-needs-label {
  border-color: color-mix(in srgb, #f59e0b 35%, #e8eaef);
}
.brand-assets-manage-item-hit {
  border: 0;
  padding: 0;
  margin: 0;
  background: #f3f4f6;
  cursor: zoom-in;
  aspect-ratio: 1;
  display: block;
  width: 100%;
}
.brand-assets-manage-item-hit img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.brand-assets-manage-item-meta {
  padding: 8px;
  background: #fafbfc;
  border-top: 1px solid #eef0f3;
  min-width: 0;
  max-width: 100%;
  overflow: hidden;
}
.brand-assets-manage-item-meta.is-needs-label {
  background: #fffbeb;
  border-top-color: #fde68a;
}
.brand-assets-manage-category-wrap {
  display: block;
  width: 100%;
  max-width: 100%;
  min-width: 0;
  border-radius: 8px;
  overflow: hidden;
  border: 1px solid #d1d5db;
  background: #fff;
  box-sizing: border-box;
}
.brand-assets-manage-category-wrap.is-needs {
  border-color: #f59e0b;
  box-shadow: 0 0 0 1px color-mix(in srgb, #f59e0b 18%, transparent);
  background: #fff;
}
.brand-assets-manage-item .select,
.brand-assets-manage-category {
  display: block;
  width: 100%;
  max-width: 100%;
  min-width: 0 !important; /* override global .select min-width: 180px */
  box-sizing: border-box;
  border: 0;
  border-radius: 0;
  background-color: transparent;
  font-size: 11px;
  font-weight: 700;
  line-height: 1.25;
  padding-block: 8px;
  padding-inline: 8px 26px;
  min-height: 34px;
  color: var(--brand-ink);
  font-family: 'Tajawal', system-ui, -apple-system, 'Segoe UI', sans-serif;
  appearance: none;
  -webkit-appearance: none;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  box-shadow: none;
  backdrop-filter: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='%236b7280' d='M1.2 1.5L6 6.3l4.8-4.8'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 8px center;
  background-size: 10px 7px;
}
html[dir="rtl"] .brand-assets-manage-item .select,
html[dir="rtl"] .brand-assets-manage-category,
html[lang="ar"] .brand-assets-manage-item .select,
html[lang="ar"] .brand-assets-manage-category,
html[lang="he"] .brand-assets-manage-item .select,
html[lang="he"] .brand-assets-manage-category {
  background-position: left 8px center;
}
.brand-assets-manage-category.is-needs {
  border: 0;
  background-color: transparent;
  color: #92400e;
  box-shadow: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='%23b45309' d='M1.2 1.5L6 6.3l4.8-4.8'/%3E%3C/svg%3E");
}
.brand-assets-manage-empty {
  grid-column: 1 / -1;
  text-align: center;
  color: var(--brand-muted);
  font-size: 13px;
  padding: 28px 12px;
  font-family: 'Tajawal', system-ui, -apple-system, 'Segoe UI', sans-serif;
}
html[dir="rtl"] #brand-assets-manage-modal .modal-close,
html[lang="ar"] #brand-assets-manage-modal .modal-close,
html[lang="he"] #brand-assets-manage-modal .modal-close {
  left: 16px;
  right: auto;
}
@media (max-width: 640px) {
  .brand-assets-manage-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .brand-assets-preview-thumb {
    width: 64px;
    height: 64px;
  }
}


/* =========================================================
   Create modal, inner steps (2026-09 redo)
   Flat stepper, flat stage, calmer type cards, one nav style.
   Kept last so it wins over the older per-mode overrides.
   ========================================================= */
/* Desktop keeps the original framed stepper; the flat stepper is for tablets and phones. */
@media (max-width: 1023px) {
#create-panel .wizard-steps {
  gap: 6px;
  margin-bottom: 28px;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: none;
  box-shadow: none;
}
#create-panel .wizard-steps .wizard-step {
  min-height: 40px;
  padding: 6px 12px 6px 10px;
  border-radius: 999px;
  border: 1px solid transparent;
  background: none;
  color: #55606f;
  box-shadow: none;
}
html[dir="rtl"] #create-panel .wizard-steps .wizard-step { padding: 6px 10px 6px 12px; }
#create-panel .wizard-steps .wizard-step:hover {
  background: #f5f3fb;
  border-color: transparent;
  color: #111827;
}
#create-panel .wizard-steps .wizard-step.active {
  background: #f3eeff;
  border-color: transparent;
  color: #5b21b6;
  box-shadow: none;
}
#create-panel .wizard-steps .wizard-step.completed { color: #111827; }
#create-panel .wizard-steps .wizard-step-num {
  width: 24px;
  height: 24px;
  background: #e8ebf3;
  color: #475569;
  box-shadow: none;
}
#create-panel .wizard-steps .wizard-step.active .wizard-step-num,
#create-panel .wizard-steps .wizard-step.completed .wizard-step-num {
  background: #7c3aed;
  color: #ffffff;
  box-shadow: none;
}
#create-panel .wizard-steps .wizard-step-line {
  width: 28px;
  height: 2px;
  background: #e3e7f0;
}
#create-panel .wizard-steps .wizard-step.completed + .wizard-step-line { background: #7c3aed; }
#create-panel .wizard-steps .wizard-step-type-name { color: #55606f; }
}

/* Panel headers */
#create-panel .step-panel-title {
  font-size: 22px;
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.2;
  color: #111827;
}
#create-panel .step-panel-desc {
  margin: 6px 0 0;
  font-size: 14px;
  line-height: 1.5;
  color: #55606f;
}

/* Step 1: flat stage, calmer cards */
#create-panel .job-type-stage,
html[dir="rtl"] #create-panel .job-type-stage,
[dir="rtl"] #create-panel .job-type-stage {
  padding: 0;
  border: 0;
  border-radius: 0;
  background: none;
  box-shadow: none;
}
#create-panel .job-type-stage-head { margin-bottom: 18px; }
#create-panel .job-type-grid { gap: 12px; }
#create-panel .job-type-section .job-type-card {
  align-items: center;
  gap: 14px;
  min-height: 84px;
  padding: 16px 18px;
  border-radius: 16px;
  border: 1px solid #e6e8f0;
  background: #ffffff;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
  transition: border-color 0.2s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.25s cubic-bezier(0.16, 1, 0.3, 1), transform 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}
#create-panel .job-type-section .job-type-card:hover {
  transform: translateY(-2px);
  border-color: rgba(124, 58, 237, 0.4);
  box-shadow: 0 14px 26px -14px rgba(15, 23, 42, 0.28);
  background: #ffffff;
}
#create-panel .job-type-section .job-type-card:active { transform: scale(0.99); }
#create-panel .job-type-section .job-type-card:focus-visible {
  outline: 2px solid #7c3aed;
  outline-offset: 3px;
}
#create-panel .job-type-section .job-type-card.selected {
  border-color: #7c3aed;
  background: #faf7ff;
  box-shadow: 0 0 0 1px #7c3aed;
}
#create-panel .job-type-section .job-type-card.selected::after {
  top: auto;
  bottom: 12px;
  inset-inline-end: 12px;
  width: 20px;
  height: 20px;
  background-color: #7c3aed;
}
#create-panel .job-type-section .jtc-icon {
  width: 42px;
  height: 42px;
  border-radius: 12px;
  background: #f3eeff;
  color: #7c3aed;
}
#create-panel .job-type-section .jtc-icon svg { width: 20px; height: 20px; }
#create-panel .job-type-section .job-type-card:hover .jtc-icon { background: #ebe1ff; }
#create-panel .job-type-section .job-type-card.selected .jtc-icon {
  background: #7c3aed;
  color: #ffffff;
}
#create-panel .job-type-section .jtc-text { gap: 3px; padding-top: 0; }
#create-panel .job-type-section .jtc-title {
  font-size: 15.5px;
  font-weight: 500;
  line-height: 1.3;
  color: #111827;
}
#create-panel .job-type-section .jtc-desc {
  font-size: 13px;
  line-height: 1.45;
  color: #55606f;
}
/* Drawn external-link mark instead of a text arrow */
#create-panel .job-type-section .job-type-card[data-redirect] .jtc-title::after {
  content: "";
  width: 13px;
  height: 13px;
  opacity: 0.55;
  background-color: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7 17L17 7'/%3E%3Cpath d='M8 7h9v9'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7 17L17 7'/%3E%3Cpath d='M8 7h9v9'/%3E%3C/svg%3E") center / contain no-repeat;
}
html[dir="rtl"] #create-panel .job-type-section .job-type-card[data-redirect] .jtc-title::after { transform: scaleX(-1); }

/* Tags: quiet pills inside the card, not rotated stickers */
#create-panel .job-type-section .job-type-card[data-type] .jtc-popular-tag,
#create-panel .job-type-section .job-type-card[data-type] .jtc-viral-tag,
#create-panel .job-type-section .job-type-card[data-type] .jtc-advanced-tag,
#create-panel .job-type-section .job-type-card .jtc-popular-tag,
#create-panel .job-type-section .job-type-card .jtc-viral-tag,
#create-panel .job-type-section .job-type-card .jtc-advanced-tag {
  top: 10px;
  right: auto;
  left: auto;
  inset-inline-end: 12px;
  padding: 3px 9px 3px 7px;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0;
  transform: none;
  border: 0;
  box-shadow: none;
  background: #efe7ff;
  color: #5b21b6;
}
html[dir="rtl"] #create-panel .job-type-section .job-type-card .jtc-popular-tag,
html[dir="rtl"] #create-panel .job-type-section .job-type-card .jtc-viral-tag,
html[dir="rtl"] #create-panel .job-type-section .job-type-card .jtc-advanced-tag {
  right: auto;
  left: auto;
  transform: none;
}
#create-panel .job-type-section .job-type-card .jtc-viral-tag { background: #ffedd5; color: #b45309; }
#create-panel .job-type-section .job-type-card .jtc-advanced-tag { background: #e8ecf4; color: #334155; }
/* Keep title clear of a tag */
#create-panel .job-type-section .job-type-card:has(.jtc-popular-tag, .jtc-viral-tag, .jtc-advanced-tag) .jtc-text {
  padding-top: 14px;
}

/* Desktop keeps the frame so the form's edges stay visible. */
@media (max-width: 1023px) {
/* Steps 2 and 3: drop the frame around every mode's form */
#create-panel #wizard-step-2,
#create-panel #wizard-step-3,
#create-panel #ugc-wizard-step-3,
#create-panel #ugc-wizard-step-4,
#create-panel #ugc-wizard-step-5,
#create-panel #ugc-wizard-step-6,
#create-panel #ugc-wizard-step-7,
html[dir="rtl"] #create-panel #wizard-step-2,
html[dir="rtl"] #create-panel #wizard-step-3,
html[dir="rtl"] #create-panel #ugc-wizard-step-3,
html[dir="rtl"] #create-panel #ugc-wizard-step-4,
html[dir="rtl"] #create-panel #ugc-wizard-step-5,
html[dir="rtl"] #create-panel #ugc-wizard-step-6,
html[dir="rtl"] #create-panel #ugc-wizard-step-7,
[dir="rtl"] #create-panel #wizard-step-2,
[dir="rtl"] #create-panel #wizard-step-3,
.rtl #create-panel #wizard-step-2,
.rtl #create-panel #wizard-step-3 {
  padding: 4px 0 16px;
  border: 0;
  border-radius: 0;
  background: none;
  box-shadow: none;
}
}

/* Navigation: one quiet secondary, one solid primary */
#create-panel #wizard-nav {
  gap: 10px;
  padding: 14px 0 max(14px, env(safe-area-inset-bottom));
  border-top: 1px solid #edf0f5;
  background: #ffffff;
  box-shadow: none;
  backdrop-filter: none;
}
#create-panel #wizard-nav .button {
  min-height: 46px;
  padding: 0 22px;
  border-radius: 14px;
  font-size: 15px;
  font-weight: 500;
  transition: background-color 0.16s ease-out, border-color 0.16s ease-out, transform 0.16s ease-out, box-shadow 0.2s ease-out;
}
#create-panel #wizard-nav #wizard-back,
#create-panel #wizard-nav #wizard-cancel {
  background: #ffffff;
  border: 1px solid #dfe3ed;
  color: #374151;
  box-shadow: none;
}
#create-panel #wizard-nav #wizard-back:hover,
#create-panel #wizard-nav #wizard-cancel:hover {
  background: #f7f8fb;
  border-color: #cfd5e3;
}
#create-panel #wizard-nav #wizard-next,
#create-panel #wizard-nav #wizard-create {
  background: #7c3aed;
  border: 1px solid #7c3aed;
  color: #ffffff;
  box-shadow: 0 10px 20px -10px rgba(124, 58, 237, 0.7);
}
#create-panel #wizard-nav #wizard-next:hover:not(:disabled),
#create-panel #wizard-nav #wizard-create:hover:not(:disabled) {
  background: #6d28d9;
  border-color: #6d28d9;
}
#create-panel #wizard-nav .button:active:not(:disabled) { transform: scale(0.98); }
#create-panel #wizard-nav .button:focus-visible {
  outline: 2px solid #7c3aed;
  outline-offset: 2px;
}
@media (max-width: 640px) {
  #create-panel .job-type-section .job-type-card { padding: 14px; min-height: 72px; }
  #create-panel .job-type-section .jtc-icon { width: 38px; height: 38px; }
}


/* =========================================================
   Jobs page refinement (2026-09)
   Readable type on cards, one primary action, calmer filters.
   ========================================================= */
body.app-page .app-jobs-page-title {
  font-size: 24px;
  font-weight: 700;
  letter-spacing: -0.02em;
}
/* The create button keeps its own width everywhere; it never stretches to fill the row. */
@media (max-width: 1023px) {
body.app-page .app-jobs-cta-row { gap: 10px; margin-bottom: 18px; }
body.app-page .create-cta {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 48px;
  padding: 0 22px;
  border-radius: 14px;
  border: 1px solid #7c3aed;
  background: #7c3aed;
  color: #ffffff;
  font-size: 15px;
  font-weight: 700;
  box-shadow: 0 12px 22px -12px rgba(124, 58, 237, 0.75);
  transition: background-color 0.16s ease-out, transform 0.16s ease-out, box-shadow 0.2s ease-out;
}
body.app-page .create-cta::before {
  content: "";
  width: 16px;
  height: 16px;
  background-color: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.6' stroke-linecap='round'%3E%3Cpath d='M12 5v14M5 12h14'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.6' stroke-linecap='round'%3E%3Cpath d='M12 5v14M5 12h14'/%3E%3C/svg%3E") center / contain no-repeat;
}
body.app-page .create-cta:hover { background: #6d28d9; border-color: #6d28d9; transform: translateY(-1px); }
body.app-page .create-cta:active { transform: scale(0.98); }
}
body.app-page .create-cta:focus-visible,
body.app-page .adly-chat-open-btn:focus-visible {
  outline: 2px solid #7c3aed;
  outline-offset: 3px;
}
body.app-page .adly-chat-open-btn {
  min-height: 48px;
  border-radius: 14px;
  border-color: #dfe3ed;
  background: #ffffff;
}

/* Filters */
body.app-page .jobs-toolbar { gap: 10px; margin: 12px 0 14px; }
body.app-page .jobs-toolbar .input,
body.app-page .jobs-toolbar .select {
  min-height: 44px;
  padding-block: 0;
  border: 1px solid #dfe3ed;
  border-radius: 12px;
  background-color: #ffffff;
  font-size: 14px;
}
body.app-page .jobs-toolbar .input:focus-visible,
body.app-page .jobs-toolbar .select:focus-visible {
  outline: 2px solid #7c3aed;
  outline-offset: 1px;
  border-color: #7c3aed;
}
@media (max-width: 600px) {
  body.app-page .jobs-toolbar {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
  }
  body.app-page .jobs-toolbar .input,
  body.app-page .jobs-toolbar .select {
    min-width: 0;
    padding-inline: 10px;
    font-size: 13px;
  }
}

/* Job cards: desktop keeps the original compact cards; this refinement applies below 1024px. */
@media (max-width: 1023px) {
/* Job cards */
body.app-page .job-item {
  gap: 10px;
  padding: 14px 16px;
  border-color: #e6e8f0;
  border-radius: 16px;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
}
body.app-page .job-item:hover {
  border-color: rgba(124, 58, 237, 0.35);
  box-shadow: 0 14px 26px -16px rgba(15, 23, 42, 0.3);
  transform: translateY(-1px);
}
body.app-page .job-item:focus-visible { outline: 2px solid #7c3aed; outline-offset: 2px; }
body.app-page .job-item-date,
body.app-page .job-item-header .muted {
  font-size: 12px;
  font-weight: 500;
  color: #64748b;
}
body.app-page .job-item-title { font-size: 16px; line-height: 1.35; }
body.app-page .job-item-body { gap: 4px; }
body.app-page .job-item-summary {
  font-size: 13.5px;
  line-height: 1.5;
  color: #55606f;
  white-space: normal;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}
body.app-page .job-item .new-badge,
body.app-page .job-item .linked-badge,
body.app-page .job-item .style-badge,
body.app-page .job-item .lang-badge,
body.app-page .job-item .super-mode-job-badge,
body.app-page .job-item .brand-badge,
body.app-page .job-item .automation-job-badge,
body.app-page .job-item .free-job-badge {
  min-height: 22px;
  padding: 2px 8px;
  font-size: 11px;
  font-weight: 500;
  color: #475569;
}
body.app-page .job-item .new-badge { color: #15803d; }
body.app-page .job-item .automation-job-badge { color: #5b21b6; }
body.app-page .job-item .free-job-badge { color: #15803d; }
body.app-page .job-thumb { width: 40px; height: 40px; border-radius: 10px; }
body.app-page .job-list { gap: 12px; }
@media (prefers-reduced-motion: reduce) {
  body.app-page .job-item:hover,
  body.app-page .create-cta:hover { transform: none; }
}
body.app-page .job-item-footer .status-pill {
  min-height: 36px;
  padding: 6px 14px;
  font-size: 12.5px;
  font-weight: 500;
  box-shadow: none;
}
}


/* =========================================================
   Open job (job details modal + inline panel), 2026-09
   Readable status and badges, a full-width step rail,
   calmer media controls, one primary action.
   ========================================================= */
.job-details-modal .modal-card {
  border-radius: 24px;
  border-color: rgba(15, 23, 42, 0.1);
  box-shadow: 0 32px 72px -20px rgba(15, 23, 42, 0.4), 0 2px 6px rgba(15, 23, 42, 0.06);
}
.job-details-modal .job-details-card { padding: 28px 24px 26px; gap: 14px; }
.job-details-modal .modal-close {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: 1px solid #e0e4ee;
  background: #ffffff;
  color: #374151;
  font-size: 15px;
  box-shadow: none;
  transition: background-color 0.16s ease-out, border-color 0.16s ease-out, color 0.16s ease-out, transform 0.16s ease-out;
}
.job-details-modal .modal-close:hover { background: #f5f1ff; border-color: #cdbdf7; color: #6d28d9; }
.job-details-modal .modal-close:active { transform: scale(0.94); }
.job-details-modal .modal-close:focus-visible { outline: 2px solid #7c3aed; outline-offset: 2px; }
.job-details-modal .job-header { padding-inline-end: 0; }
html[dir="rtl"] .job-details-modal .job-header,
.rtl .job-details-modal .job-header { padding-left: 52px; padding-right: 0; }
html[dir="ltr"] .job-details-modal .job-header { padding-right: 52px; }

/* Status + badges */
:is(.job-details-modal, .job-details-card) .job-stage,
.job-details-modal .job-stage {
  font-size: 22px;
  font-weight: 700;
  line-height: 1.25;
  letter-spacing: -0.01em;
}
.job-details-modal .job-title-stack { gap: 8px; }
:is(.job-details-modal, .job-details-card) .job-meta { gap: 6px; }
:is(.job-details-modal, .job-details-card) .job-meta :is(.style-badge, .lang-badge, .status-pill, .new-badge, .linked-badge, .super-mode-job-badge, .brand-badge, .automation-job-badge, .free-job-badge) {
  min-height: 24px;
  padding: 3px 9px;
  font-size: 12px;
  font-weight: 500;
  color: #475569;
}
:is(.job-details-modal, .job-details-card) .job-meta .status-pill.published { color: #15803d; }
:is(.job-details-modal, .job-details-card) .job-meta .automation-job-badge { color: #5b21b6; }
:is(.job-details-modal, .job-details-card) .job-meta .free-job-badge,
:is(.job-details-modal, .job-details-card) .job-meta .new-badge { color: #15803d; }
:is(.job-details-modal, .job-details-card) .job-meta-lines {
  margin: 4px 0 0;
  font-size: 14px;
  line-height: 1.6;
  color: #55606f;
}

/* Step rail spans the width; completed steps read as done, the active one as current */
:is(.job-details-modal, .job-details-card) .tabs {
  gap: 0;
  margin: 8px 0 6px;
  overflow: visible;
  align-items: center;
}
:is(.job-details-modal, .job-details-card) .tab-step { flex: 1 1 auto; gap: 0; }
:is(.job-details-modal, .job-details-card) .tab-step:last-child { flex: 0 0 auto; }
:is(.job-details-modal, .job-details-card) .tab-connector {
  flex: 1 1 8px;
  min-width: 8px;
  width: auto;
  height: 2px;
  margin-inline: 6px;
  opacity: 1;
  background: #e3e7f0;
}
:is(.job-details-modal, .job-details-card) .tab-step.completed .tab-connector { background: #cdd2dc; }
/* Steps are quiet text: done steps carry a small green check, the open one sits on soft purple. */
:is(.job-details-modal, .job-details-card) .tab-button {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 34px;
  padding: 0 12px;
  border: 1px solid transparent;
  border-radius: 999px;
  background: transparent;
  color: #6b7280;
  font-size: 13px;
  font-weight: 500;
  box-shadow: none;
}
:is(.job-details-modal, .job-details-card) .tab-button:not(:disabled):hover {
  color: #5b21b6;
  background: #f6f1ff;
  border-color: transparent;
}
:is(.job-details-modal, .job-details-card) .tab-step.completed .tab-button:not(.active) {
  color: #374151;
  background: transparent;
  border-color: transparent;
}
:is(.job-details-modal, .job-details-card) .tab-step.completed .tab-button::before {
  content: '';
  flex: none;
  width: 14px;
  height: 14px;
  background: center / contain no-repeat url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2316a34a' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E");
}
:is(.job-details-modal, .job-details-card) .tab-button.active,
:is(.job-details-modal, .job-details-card) .tab-step.completed .tab-button.active {
  color: #5b21b6;
  background: #f3edff;
  border-color: #dccbff;
  box-shadow: none;
}
:is(.job-details-modal, .job-details-card) .tab-button:disabled {
  color: #9ca3af;
  background: transparent;
  border-color: transparent;
}
/* Top info chips: one shape for all. Only the status chip carries a colour. */
:is(.job-details-modal, .job-details-card) .job-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
}
:is(.job-details-modal, .job-details-card) .job-header .job-meta > * {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  height: 26px;
  margin: 0;
  padding: 0 10px;
  border: 1px solid #e6e8f0;
  border-radius: 999px;
  background: #f6f7f9;
  color: #374151;
  font-size: 13px;
  font-weight: 500;
  line-height: 1;
  letter-spacing: normal;
  text-transform: none;
  white-space: nowrap;
  box-shadow: none;
}
:is(.job-details-modal, .job-details-card) .job-header .job-meta > * svg {
  width: 13px;
  height: 13px;
  color: #6b7280;
}
:is(.job-details-modal, .job-details-card) .job-header .job-meta > .super-mode-job-badge .super-mode-job-badge-icon {
  width: auto;
  height: auto;
  background: transparent;
  color: #6b7280;
  font-size: 12px;
}
:is(.job-details-modal, .job-details-card) .job-header .job-meta > .status-pill.published {
  border-color: #bfe6cd;
  background: #eefaf2;
  color: #15803d;
}
:is(.job-details-modal, .job-details-card) .job-header .job-meta > .status-pill.published svg {
  color: currentColor;
}
:is(.job-details-modal, .job-details-card) .job-header .job-meta > .size-chip .size-indicator {
  margin: 0;
  border-width: 1.5px;
  border-color: #9ca3af;
  background: transparent;
}
:is(.job-details-modal, .job-details-card) .job-header .job-meta > .size-chip .size-indicator.rect-post { width: 9px; height: 12px; }
:is(.job-details-modal, .job-details-card) .job-header .job-meta > .size-chip .size-indicator.rect { width: 8px; height: 13px; }
:is(.job-details-modal, .job-details-card) .job-header .job-meta > .size-chip .size-indicator.square { width: 11px; height: 11px; }
:is(.job-details-modal, .job-details-card) .job-header .job-meta > .size-chip .size-indicator.landscape { width: 13px; height: 8px; }
:is(.job-details-modal, .job-details-card) .tab-button:focus-visible { outline: 2px solid #7c3aed; outline-offset: 2px; }
:is(.job-details-modal, .job-details-card) .tab-links-row { margin-top: 10px; gap: 10px; }

/* Published tab: where the post went out (with a clear Open post per network) and the real
   design that was posted. Side by side when the card is wide, stacked when narrow. */
/* Published posts: the brief is folded behind a small text button. */
.job-brief-fold {
  margin: 2px 0 4px;
}
.job-brief-toggle {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  min-height: 32px;
  padding: 0 8px;
  margin-inline-start: -8px;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: var(--brand-muted, #6b7280);
  font: inherit;
  font-size: 13px;
  cursor: pointer;
}
.job-brief-toggle:hover {
  color: #5b21b6;
  background: #f6f1ff;
}
.job-brief-toggle:focus-visible {
  outline: 2px solid #7c3aed;
  outline-offset: 1px;
}
.job-brief-toggle-icon {
  width: 14px;
  height: 14px;
  transition: transform 0.18s ease;
}
.job-brief-toggle[aria-expanded="true"] .job-brief-toggle-icon {
  transform: rotate(180deg);
}
.job-brief-fold-body {
  margin-top: 4px;
}
.tab-button.published-tab.is-open {
  cursor: pointer;
}
.tab-panel[data-panel="published"] {
  container-type: inline-size;
}
.job-live {
  display: grid;
  gap: 16px;
}
.job-live-head {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0 0 10px;
  font-size: 16px;
  line-height: 1.3;
}
.job-live-mark {
  flex: none;
  display: inline-grid;
  place-items: center;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: #16a34a;
  color: #fff;
}
.job-live-mark svg {
  width: 13px;
  height: 13px;
}
.job-live-title {
  color: #14532d;
  font-weight: 500;
}
.job-live-when {
  color: var(--brand-muted, #6b7280);
  font-size: 13px;
  font-variant-numeric: tabular-nums;
}
.job-live-when::before {
  content: '·';
  margin-inline-end: 8px;
}
.job-live-list {
  margin: 0;
  padding: 0;
  list-style: none;
  border: 1px solid #e6e8f0;
  border-radius: 14px;
  background: #fff;
  overflow: hidden;
}
.job-live-row {
  display: grid;
  grid-template-columns: 24px minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  min-height: 52px;
  padding: 8px 14px;
}
.job-live-row + .job-live-row {
  border-top: 1px solid #f0f1f5;
}
/* Platform marks: one app-icon shape for all, each in its own colours. */
.job-live-logo {
  display: inline-grid;
  place-items: center;
  width: 24px;
  height: 24px;
  border-radius: 6px;
  background: #e5e7eb;
  color: #fff;
}
.job-live-logo svg {
  width: 14px;
  height: 14px;
}
.job-live-logo.is-facebook { background: #1877f2; }
.job-live-logo.is-instagram { background: linear-gradient(45deg, #f9ce34 0%, #ee2a7b 55%, #6228d7 100%); }
.job-live-logo.is-tiktok { background: #000; }
.job-live-logo.is-x { background: #000; }
.job-live-logo.is-linkedin { background: #0a66c2; }
.job-live-logo.is-snapchat {
  background: #fffc00;
  --snap-ghost-fill: #fff;
  --snap-ghost-stroke: #16191c;
}
.job-live-logo.is-snapchat svg {
  width: 16px;
  height: 16px;
}
.job-live-text {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 2px 10px;
  min-width: 0;
}
.job-live-name {
  overflow: hidden;
  color: var(--brand-ink, #1a202c);
  font-size: 14px;
  font-weight: 500;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.job-live-state {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  color: #6b7280;
  font-size: 13px;
}
.job-live-dot {
  flex: none;
  width: 7px;
  height: 7px;
  border-radius: 50%;
}
.job-live-dot.is-live { background: #16a34a; }
.job-live-dot.is-processing { background: #f59e0b; }
.job-live-dot.is-pending { background: #9ca3af; }
/* Open post: a quiet text link, not a button competing with the page. */
.job-live-open {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  min-height: 32px;
  padding: 0 8px;
  margin-inline-end: -4px;
  border-radius: 8px;
  color: #6d28d9;
  font-size: 13px;
  font-weight: 500;
  text-decoration: none;
  white-space: nowrap;
}
.job-live-open:hover {
  background: #f6f1ff;
  text-decoration: underline;
  text-underline-offset: 3px;
}
.job-live-open:focus-visible {
  outline: 2px solid #7c3aed;
  outline-offset: 1px;
}
.job-live-open-icon {
  width: 14px;
  height: 14px;
}
[dir="rtl"] .job-live-open-icon {
  transform: scaleX(-1);
}
.job-live-wait {
  color: var(--brand-muted, #6b7280);
  font-size: 13px;
  white-space: nowrap;
}
.job-live-media {
  position: relative;
  margin: 0;
  border: 1px solid #e6e8f0;
  border-radius: 14px;
  background: #f7f7fa;
  overflow: hidden;
}
.job-live-zoom {
  display: block;
  width: 100%;
  padding: 0;
  border: 0;
  background: transparent;
  cursor: zoom-in;
}
.job-live-zoom:focus-visible {
  outline: 2px solid #7c3aed;
  outline-offset: -2px;
}
.job-live-asset {
  display: block;
  width: 100%;
  max-height: 420px;
  object-fit: contain;
}
.job-live-count {
  position: absolute;
  inset-block-start: 10px;
  inset-inline-end: 10px;
  padding: 4px 10px;
  border-radius: 999px;
  background: rgba(17, 24, 39, 0.72);
  color: #fff;
  font-size: 13px;
}
.job-live-post {
  display: grid;
  gap: 10px;
}
.job-live-caption {
  display: grid;
  gap: 4px;
  padding: 12px 14px;
  border: 1px solid #e6e8f0;
  border-radius: 14px;
  background: #fff;
}
.job-live-caption-label {
  color: var(--brand-muted, #6b7280);
  font-size: 13px;
}
.job-live-caption-text {
  margin: 0;
  color: var(--brand-ink, #1a202c);
  font-size: 14px;
  line-height: 1.6;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}
@container (min-width: 560px) {
  .job-live:has(.job-live-post) {
    grid-template-columns: minmax(0, 1fr) minmax(200px, 0.8fr);
    align-items: start;
  }
}

/* Media: controls that sit on the image, and the variation strip */
.job-details-modal .design-preview-box img,
.job-details-modal .image-preview {
  border-radius: 18px;
}
.job-details-modal .image-download-box {
  width: 40px;
  height: 40px;
  border-radius: 12px;
  border: 0;
  background: rgba(15, 23, 42, 0.82);
  box-shadow: 0 6px 16px -6px rgba(15, 23, 42, 0.55);
  backdrop-filter: none;
}
.job-details-modal .image-download-box:hover { background: rgba(15, 23, 42, 0.96); transform: none; box-shadow: 0 8px 18px -6px rgba(15, 23, 42, 0.6); }
.job-details-modal .image-share-box { inset-inline-end: 60px; }
.job-details-modal .image-download-box .icon { width: 18px; height: 18px; stroke-width: 2.2; }
.job-details-modal .design-thumbs { gap: 10px; margin-top: 4px; }
.job-details-modal .design-thumb {
  width: 60px;
  height: 60px;
  padding: 3px;
  border-radius: 14px;
  border-color: #e3e7f0;
  box-shadow: none;
}
.job-details-modal .design-thumb img { border-radius: 10px; }
.job-details-modal .design-thumb:hover { border-color: #b9a4f2; }
.job-details-modal .design-thumb.active { border-color: #7c3aed; box-shadow: 0 0 0 2px rgba(124, 58, 237, 0.22); }

/* Actions: one primary, calm secondaries */
:is(.job-details-modal, .job-details-card) .publish-section {
  margin-top: 18px;
  padding: 18px 0 0;
  border: 0;
  border-top: 1px solid #edf0f5;
  border-radius: 0;
  background: none;
}
:is(.job-details-modal, .job-details-card) .publish-row .button.publish,
:is(.job-details-modal, .job-details-card) #republish-now {
  width: 100%;
  min-height: 52px;
  justify-content: center;
  border-radius: 14px;
  border: 1px solid #7c3aed;
  background: #7c3aed;
  color: #ffffff;
  font-size: 16px;
  font-weight: 700;
  box-shadow: 0 12px 22px -12px rgba(124, 58, 237, 0.75);
  transition: background-color 0.16s ease-out, transform 0.16s ease-out;
}
:is(.job-details-modal, .job-details-card) .publish-row .button.publish:hover:not(:disabled),
:is(.job-details-modal, .job-details-card) #republish-now:hover:not(:disabled) { background: #6d28d9; border-color: #6d28d9; }
:is(.job-details-modal, .job-details-card) .publish-row .button.publish:active,
:is(.job-details-modal, .job-details-card) #republish-now:active { transform: scale(0.99); }
:is(.job-details-modal, .job-details-card) .publish-actions:has(#republish-now) { grid-template-columns: 1fr; }
:is(.job-details-modal, .job-details-card) .publish-actions:has(#republish-now) > #republish-now { width: 100%; }
/* Once published, Publish again is a quiet outlined action, not the page's main button. */
:is(.job-details-modal, .job-details-card) #republish-now.is-quiet {
  min-height: 44px;
  border-radius: 12px;
  border: 1px solid #dccbff;
  background: #fff;
  color: #5b21b6;
  font-size: 14px;
  font-weight: 500;
  box-shadow: none;
  gap: 8px;
}
:is(.job-details-modal, .job-details-card) #republish-now.is-quiet .action-icon,
:is(.job-details-modal, .job-details-card) #republish-now.is-quiet .action-icon svg {
  width: 16px;
  height: 16px;
}
:is(.job-details-modal, .job-details-card) #republish-now.is-quiet:hover:not(:disabled) {
  background: #f6f1ff;
  border-color: #c4a8ff;
}
:is(.job-details-modal, .job-details-card) .action-row .button.secondary,
:is(.job-details-modal, .job-details-card) .publish-actions .button.secondary {
  min-height: 48px;
  border-radius: 14px;
  border: 1px solid #dfe3ed;
  background: #ffffff;
  color: #1f2937;
  font-size: 14px;
  font-weight: 500;
}
:is(.job-details-modal, .job-details-card) .action-row .button.secondary:hover:not(:disabled),
:is(.job-details-modal, .job-details-card) .publish-actions .button.secondary:hover:not(:disabled) {
  background: #faf8ff;
  border-color: #b9a4f2;
  color: #5b21b6;
}
:is(.job-details-modal, .job-details-card) :is(.action-row, .publish-actions) .button:focus-visible { outline: 2px solid #7c3aed; outline-offset: 2px; }
@media (max-width: 640px) {
  .job-details-modal .job-details-card { padding: 22px 16px 22px; }
  .job-details-modal .job-stage { font-size: 20px; line-height: 1.25; }
  :is(.job-details-modal, .job-details-card) .tab-button { padding: 0 10px; font-size: 12.5px; }
}


/* Step 1 cards: icon on top, bold title, quiet description (scans faster than side-by-side rows).
   Each category carries the tone of its step-0 tile. */
#create-panel .job-type-section { --jt-tone: #7c3aed; --jt-soft: #f3eeff; }
#create-panel .job-type-section[data-create-category="video"] { --jt-tone: #db2777; --jt-soft: #fdedf5; }
#create-panel .job-type-section[data-create-category="content_publish"] { --jt-tone: #d97706; --jt-soft: #fef3e0; }
#create-panel .job-type-section[data-create-category="automations"] { --jt-tone: #0f8f83; --jt-soft: #e3f6f3; }
#create-panel .job-type-section .job-type-card {
  flex-direction: column;
  align-items: stretch;
  justify-content: flex-start;
  gap: 14px;
  min-height: 0;
  padding: 16px;
}
#create-panel .job-type-section .job-type-card:hover { border-color: color-mix(in srgb, var(--jt-tone) 45%, #e6e8f0); }
#create-panel .job-type-section .job-type-card.selected {
  border-color: var(--jt-tone);
  background: color-mix(in srgb, var(--jt-soft) 55%, #ffffff);
  box-shadow: 0 0 0 1px var(--jt-tone);
}
#create-panel .job-type-section .job-type-card.selected::after { background-color: var(--jt-tone); }
#create-panel .job-type-section .jtc-icon {
  width: 46px;
  height: 46px;
  border-radius: 14px;
  background: var(--jt-soft);
  color: var(--jt-tone);
}
#create-panel .job-type-section .jtc-icon svg { width: 22px; height: 22px; }
#create-panel .job-type-section .job-type-card:hover .jtc-icon { background: var(--jt-soft); }
#create-panel .job-type-section .job-type-card.selected .jtc-icon { background: var(--jt-tone); color: #ffffff; }
#create-panel .job-type-section .job-type-card:has(.jtc-popular-tag, .jtc-viral-tag, .jtc-advanced-tag) .jtc-text,
#create-panel .job-type-section .jtc-text { padding-top: 0; gap: 5px; }
#create-panel .job-type-section .jtc-title {
  font-size: 16.5px;
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: -0.005em;
}
#create-panel .job-type-section .jtc-desc {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
  margin-top: 0;
  font-size: 13px;
  line-height: 1.5;
  color: #5b6675;
}
@media (max-width: 640px) {
  #create-panel .job-type-grid,
  #create-panel .job-type-grid.grid-compact { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  #create-panel .job-type-section .job-type-card { padding: 14px; gap: 12px; border-radius: 16px; }
  #create-panel .job-type-section .jtc-icon { width: 42px; height: 42px; }
  #create-panel .job-type-section .jtc-title { font-size: 15.5px; }
  #create-panel .job-type-section .jtc-desc { font-size: 12.5px; }
}
/* Tag sits on the side opposite the icon */
#create-panel .job-type-section .job-type-card .jtc-popular-tag,
#create-panel .job-type-section .job-type-card .jtc-viral-tag,
#create-panel .job-type-section .job-type-card .jtc-advanced-tag,
#create-panel .job-type-section .job-type-card[data-type] .jtc-popular-tag,
#create-panel .job-type-section .job-type-card[data-type] .jtc-viral-tag,
#create-panel .job-type-section .job-type-card[data-type] .jtc-advanced-tag {
  top: 12px;
  inset-inline: auto;
  right: 12px;
  left: auto;
}
html[dir="rtl"] #create-panel .job-type-section .job-type-card .jtc-popular-tag,
html[dir="rtl"] #create-panel .job-type-section .job-type-card .jtc-viral-tag,
html[dir="rtl"] #create-panel .job-type-section .job-type-card .jtc-advanced-tag,
html[dir="rtl"] #create-panel .job-type-section .job-type-card[data-type] .jtc-popular-tag,
html[dir="rtl"] #create-panel .job-type-section .job-type-card[data-type] .jtc-viral-tag,
html[dir="rtl"] #create-panel .job-type-section .job-type-card[data-type] .jtc-advanced-tag {
  right: auto;
  left: 12px;
}
/* Step 1 descriptions: a size up for readability */
#create-panel .job-type-section .jtc-desc {
  font-size: 14.5px;
  line-height: 1.55;
  -webkit-line-clamp: 4;
}
@media (max-width: 640px) {
  #create-panel .job-type-section .jtc-desc { font-size: 13.5px; -webkit-line-clamp: 4; }
}

/* Brand Plan promo: last cell of the category grid, the sixth cell on desktop and a half-width
   card beside Voice below that. */
.create-plan-promo {
  position: relative;
  width: 100%;
  margin-top: 0;
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 12px 16px;
  border: 1px solid #e6dffb;
  border-radius: 16px;
  background: #faf8ff;
  color: #111827;
  text-align: start;
  cursor: pointer;
  font-family: 'Tajawal', 'Cairo', system-ui, -apple-system, 'Segoe UI', sans-serif;
  box-shadow: none;
  transition: border-color 0.2s ease-out, background-color 0.2s ease-out, transform 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}
.create-plan-promo:hover { transform: translateY(-1px); border-color: #b9a4f2; background: #f5f0ff; }
.create-plan-promo:active { transform: scale(0.995); }
.create-plan-promo:focus-visible { outline: 2px solid #7c3aed; outline-offset: 3px; }
.cpp-icon {
  flex: 0 0 auto;
  width: 40px;
  height: 40px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 12px;
  background: #efe7ff;
  color: #7c3aed;
}
.cpp-icon svg { width: 20px; height: 20px; }
.cpp-copy { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.cpp-title {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 15.5px;
  font-weight: 700;
  line-height: 1.3;
  color: #111827;
}
.cpp-chip {
  padding: 1px 8px;
  border-radius: 999px;
  background: #efe7ff;
  color: #5b21b6;
  font-size: 11.5px;
  font-weight: 700;
  line-height: 1.6;
}
.cpp-desc { font-size: 13.5px; line-height: 1.5; color: #55606f; text-wrap: pretty; }
.cpp-cta {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: #5b21b6;
  font-size: 14px;
  font-weight: 700;
  white-space: nowrap;
}
.cpp-cta svg { width: 16px; height: 16px; transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1); }
.create-plan-promo:hover .cpp-cta svg { transform: translateX(3px); }
html[dir="rtl"] .cpp-cta svg,
[dir="rtl"] .cpp-cta svg,
.rtl .cpp-cta svg { transform: scaleX(-1); }
html[dir="rtl"] .create-plan-promo:hover .cpp-cta svg,
[dir="rtl"] .create-plan-promo:hover .cpp-cta svg,
.rtl .create-plan-promo:hover .cpp-cta svg { transform: scaleX(-1) translateX(3px); }
#wizard-step-0.active .create-plan-promo { animation: cccRise 0.55s cubic-bezier(0.16, 1, 0.3, 1) 240ms both; }
@media (prefers-reduced-motion: reduce) {
  #wizard-step-0.active .create-plan-promo { animation: none; }
  .create-plan-promo:hover { transform: none; }
}
@media (max-width: 1023px) {
  .create-plan-promo { flex-direction: column; align-items: flex-start; gap: 10px; padding: 16px; border-radius: 20px; }
  .cpp-copy { flex: 1 1 auto; }
  .cpp-title { flex-wrap: wrap; gap: 6px; }
  .cpp-desc { display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden; }
  .cpp-cta { margin-top: auto; }
}
@media (max-width: 640px) {
  .create-plan-promo { padding: 12px; gap: 8px; border-radius: 16px; }
  .cpp-icon { width: 36px; height: 36px; border-radius: 10px; }
  .cpp-icon svg { width: 18px; height: 18px; }
  .cpp-title { font-size: 16px; }
  .cpp-desc { font-size: 12px; line-height: 1.4; }
  .cpp-cta { font-size: 13px; }
}

/* =========================================================
   Create wizard: shared form controls (steps 2 and 3)
   One label style, one input style, one choice style,
   one segmented style, one dropzone, one collapsible.
   ========================================================= */
#create-panel {
  --cx-ink: #111827;
  --cx-label: #1f2937;
  --cx-muted: #55606f;
  --cx-line: #dfe3ed;
  --cx-line-hover: #c9cfdd;
  --cx-accent: #7c3aed;
  --cx-accent-ink: #5b21b6;
  --cx-accent-soft: #f3eeff;
}

/* Desktop keeps the original, denser form controls; the roomier versions below are for tablets and phones. */
@media (max-width: 1023px) {
/* Labels */
#create-panel .field > label:not(.checkbox-line):not(.auto-toggle-inline):not(.language-option):not(.ugc-toggle-option):not(.swipe-add-btn),
#create-panel .field > .field-label {
  display: block;
  margin: 0 0 8px;
  font-size: 14.5px;
  font-weight: 500;
  line-height: 1.4;
  letter-spacing: 0;
  text-transform: none;
  color: var(--cx-label);
}
#create-panel .optional-label { font-size: 13px; font-weight: 500; color: var(--cx-muted); }
#create-panel .hint,
#create-panel .field .hint {
  margin-top: 8px;
  font-size: 13px;
  line-height: 1.5;
  color: var(--cx-muted);
}

/* Text inputs, textareas, selects */
#create-panel .field :is(input:not([type="checkbox"], [type="radio"], [type="range"], [type="color"], [type="file"], [type="hidden"]), select) {
  min-height: 48px;
}
/* Textareas keep their own heights (110px by default, taller for video, caption and script prompts). */
#create-panel .field :is(input:not([type="checkbox"], [type="radio"], [type="range"], [type="color"], [type="file"], [type="hidden"]), textarea, select) {
  padding: 12px 14px;
  border: 1px solid var(--cx-line);
  border-radius: 12px;
  background-color: #ffffff;
  color: var(--cx-ink);
  font-size: 15px;
  line-height: 1.45;
  box-shadow: none;
  transition: border-color 0.16s ease-out, box-shadow 0.16s ease-out;
}
#create-panel .field :is(input, textarea, select):not(:disabled):hover { border-color: var(--cx-line-hover); }
#create-panel .field :is(input:not([type="checkbox"], [type="radio"], [type="range"], [type="color"], [type="file"]), textarea, select):focus,
#create-panel .field :is(input:not([type="checkbox"], [type="radio"], [type="range"], [type="color"], [type="file"]), textarea, select):focus-visible {
  outline: none;
  border-color: var(--cx-accent);
  box-shadow: 0 0 0 3px rgba(124, 58, 237, 0.16);
}
#create-panel .field :is(input, textarea)::placeholder { color: #6b7280; opacity: 1; }
#create-panel .field textarea { line-height: 1.6; }
#create-panel .field select:not([multiple]):not(.sr-only) {
  appearance: none;
  -webkit-appearance: none;
  padding-inline-end: 42px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%2355606f' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 14px center;
  background-size: 16px;
}
html[dir="rtl"] #create-panel .field select:not([multiple]):not(.sr-only),
.rtl #create-panel .field select:not([multiple]):not(.sr-only) { background-position: left 14px center; }

/* Desktop keeps the original compact choice rows (language, image size, amount); the larger ones are for tablets and phones. */
@media (max-width: 1023px) {
/* Single-choice pills: language, yes/no, mode toggles */
#create-panel .language-options,
#create-panel .ugc-toggle-row { display: flex; flex-wrap: wrap; gap: 8px; }
#create-panel :is(.language-option, .ugc-toggle-option) {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 44px;
  padding: 0 18px;
  border: 1px solid var(--cx-line);
  border-radius: 12px;
  background: #ffffff;
  color: #374151;
  font-size: 14.5px;
  font-weight: 500;
  cursor: pointer;
  box-shadow: none;
  transition: border-color 0.16s ease-out, background-color 0.16s ease-out, color 0.16s ease-out;
}
#create-panel :is(.language-option, .ugc-toggle-option) > input[type="radio"] {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  opacity: 0;
  cursor: pointer;
}
#create-panel :is(.language-option, .ugc-toggle-option):hover { border-color: var(--cx-line-hover); background: #fafbfd; }
#create-panel :is(.language-option, .ugc-toggle-option):has(input:checked) {
  border-color: var(--cx-accent);
  background: var(--cx-accent-soft);
  color: var(--cx-accent-ink);
  font-weight: 700;
  box-shadow: 0 0 0 1px var(--cx-accent);
}
#create-panel :is(.language-option, .ugc-toggle-option):has(input:focus-visible) { outline: 2px solid var(--cx-accent); outline-offset: 2px; }
#create-panel .language-option:has(input:disabled),
#create-panel .ugc-toggle-option:has(input:disabled) { opacity: 0.5; cursor: not-allowed; }

/* Image size cards */
#create-panel .image-size-picker { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
#create-panel .image-size-option {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 12px;
  min-height: 56px;
  padding: 0 16px;
  border: 1px solid var(--cx-line);
  border-radius: 14px;
  background: #ffffff;
  color: #374151;
  font-size: 14.5px;
  font-weight: 500;
  box-shadow: none;
  cursor: pointer;
  transition: border-color 0.16s ease-out, background-color 0.16s ease-out, color 0.16s ease-out;
}
#create-panel .image-size-option:hover { border-color: var(--cx-line-hover); background: #fafbfd; }
#create-panel .image-size-option.active,
#create-panel .image-size-option[aria-checked="true"] {
  border-color: var(--cx-accent);
  background: var(--cx-accent-soft);
  color: var(--cx-accent-ink);
  font-weight: 700;
  box-shadow: 0 0 0 1px var(--cx-accent);
}
#create-panel .image-size-option:focus-visible { outline: 2px solid var(--cx-accent); outline-offset: 2px; }

/* Segmented controls: amount picker, automatic/manual */
#create-panel :is(.swipe-amount-picker, .ugc-mode-pill) {
  display: flex;
  gap: 4px;
  width: 100%;
  padding: 4px;
  border: 0;
  border-radius: 14px;
  background: #eef0f6;
  overflow: visible;
}
#create-panel :is(.swipe-amount-option, .ugc-pill-btn) {
  flex: 1 1 0;
  min-height: 42px;
  border: 0;
  border-radius: 10px;
  background: transparent;
  color: var(--cx-muted);
  font-size: 14.5px;
  font-weight: 500;
  box-shadow: none;
  cursor: pointer;
  transition: background-color 0.16s ease-out, color 0.16s ease-out, box-shadow 0.16s ease-out;
}
#create-panel :is(.swipe-amount-option, .ugc-pill-btn):hover:not(.active) { color: var(--cx-ink); background: rgba(255, 255, 255, 0.6); }
#create-panel :is(.swipe-amount-option, .ugc-pill-btn).active {
  background: #ffffff;
  color: var(--cx-accent-ink);
  font-weight: 700;
  box-shadow: 0 1px 3px rgba(15, 23, 42, 0.14), 0 0 0 1px rgba(15, 23, 42, 0.04);
}
#create-panel :is(.swipe-amount-option, .ugc-pill-btn):focus-visible { outline: 2px solid var(--cx-accent); outline-offset: 1px; }
}

/* Dropzones */
#create-panel .swipe-add-btn {
  width: 72px;
  height: 72px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1.5px dashed #c3cadb;
  border-radius: 16px;
  background: #fafbfd;
  color: var(--cx-muted);
  cursor: pointer;
  transition: border-color 0.16s ease-out, background-color 0.16s ease-out, color 0.16s ease-out;
}
#create-panel .swipe-add-btn:hover,
#create-panel .swipe-add-btn:focus-visible { border-color: var(--cx-accent); background: var(--cx-accent-soft); color: var(--cx-accent-ink); outline: none; }
#create-panel .upload-box {
  padding: 22px 16px;
  border: 1.5px dashed #c3cadb;
  border-radius: 16px;
  background: #fafbfd;
  transition: border-color 0.16s ease-out, background-color 0.16s ease-out;
}
#create-panel .upload-box:hover,
#create-panel .upload-box.dragover { border-color: var(--cx-accent); background: var(--cx-accent-soft); }
#create-panel .upload-box-title { font-size: 15px; font-weight: 500; color: var(--cx-label); }

/* Checkboxes */
#create-panel :is(.checkbox-line, .auto-toggle-inline) {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-height: 40px;
  font-size: 14.5px;
  font-weight: 500;
  color: var(--cx-label);
  cursor: pointer;
}
#create-panel :is(.checkbox-line, .auto-toggle-inline) input[type="checkbox"] {
  width: 20px;
  height: 20px;
  margin: 0;
  accent-color: var(--cx-accent);
  cursor: pointer;
}

/* Collapsible sections */
#create-panel .collapsible-field {
  border: 1px solid #e6e8f0;
  border-radius: 14px;
  background: #ffffff;
}
#create-panel .collapsible-field > .collapsible-toggle {
  min-height: 52px;
  padding: 12px 16px;
  font-size: 14.5px;
  font-weight: 500;
  color: var(--cx-label);
  cursor: pointer;
  border-radius: 14px;
}
#create-panel .collapsible-field > .collapsible-toggle:hover { background: #fafbfd; }
#create-panel .collapsible-field > .collapsible-toggle:focus-visible { outline: 2px solid var(--cx-accent); outline-offset: 2px; }
#create-panel .collapsible-field > .collapsible-body { padding: 4px 16px 16px; }
#create-panel .brand-assets-prefs-summary-title { font-size: 14.5px; font-weight: 700; color: var(--cx-label); }
#create-panel .brand-assets-prefs-summary-hint { display: block; margin-top: 2px; font-size: 13px; font-weight: 500; color: var(--cx-muted); }

/* Small pill buttons (Manage) */
#create-panel .brand-assets-manage-pill {
  min-height: 44px;
  padding: 0 16px;
  border: 1px solid var(--cx-line);
  border-radius: 12px;
  background: #ffffff;
  color: #374151;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
}
#create-panel .brand-assets-manage-pill:hover { border-color: var(--cx-accent); color: var(--cx-accent-ink); background: #faf8ff; }
#create-panel .brand-assets-manage-pill:focus-visible { outline: 2px solid var(--cx-accent); outline-offset: 2px; }
@media (max-width: 640px) {
  #create-panel .field :is(input:not([type="checkbox"], [type="radio"], [type="range"], [type="color"], [type="file"], [type="hidden"]), textarea, select) { font-size: 16px; }
}

/* Follow-ups: language pills share a row; UGC labels join the same label style */
/* Language pills share a row on tablets and phones. */
@media (max-width: 1023px) {
#create-panel .language-options:not(.brand-assets-mode-options) {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(104px, 1fr));
}
#create-panel .language-options .language-option { flex: none; width: auto; }
}
#create-panel .ugc-settings-row .field label,
#create-panel .ugc-settings-row .field > label,
#create-panel #ugc-product-field > label,
#create-panel #ugc-scene-place-field > label {
  font-size: 14.5px !important;
  font-weight: 500;
  text-transform: none;
  letter-spacing: 0;
  color: var(--cx-label);
  margin-bottom: 8px;
}
#create-panel .ugc-settings-row { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px 12px; align-items: start; }
#create-panel .ugc-settings-row select { font-size: 15px; padding: 12px 42px 12px 14px; }
html[dir="rtl"] #create-panel .ugc-settings-row select,
.rtl #create-panel .ugc-settings-row select { padding: 12px 14px 12px 42px; }
#create-panel .create-left { gap: 22px; }
}


/* =========================================================
   Brand knowledge assets modal (2026-09)
   Clear upload strip, calmer filters, readable tiles.
   ========================================================= */
#brand-assets-manage-modal .brand-assets-manage-card {
  width: min(760px, 94vw);
  gap: 16px;
  padding: 26px 24px 0;
  border-radius: 24px;
  border: 1px solid rgba(15, 23, 42, 0.1);
  background: #ffffff;
  box-shadow: 0 32px 72px -20px rgba(15, 23, 42, 0.4), 0 2px 6px rgba(15, 23, 42, 0.06);
}
#brand-assets-manage-modal .modal-title {
  margin: 0;
  padding-inline-end: 52px;
  font-size: 22px;
  font-weight: 700;
  line-height: 1.25;
  letter-spacing: -0.01em;
  color: #111827;
}
#brand-assets-manage-modal .modal-subtitle {
  margin: -8px 0 0;
  font-size: 14.5px;
  line-height: 1.5;
  color: #55606f;
}
#brand-assets-manage-modal .modal-close {
  top: 20px;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: 1px solid #e0e4ee;
  background: #ffffff;
  color: #374151;
  font-size: 15px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  transition: background-color 0.16s ease-out, border-color 0.16s ease-out, color 0.16s ease-out;
}
#brand-assets-manage-modal .modal-close:hover { background: #f5f1ff; border-color: #cdbdf7; color: #6d28d9; }
#brand-assets-manage-modal .modal-close:focus-visible { outline: 2px solid #7c3aed; outline-offset: 2px; }

/* Toolbar: full-width upload strip, filters below */
#brand-assets-manage-modal .brand-assets-manage-toolbar { flex-direction: column; align-items: stretch; gap: 14px; }
#brand-assets-manage-modal .brand-assets-manage-upload {
  width: 100%;
  height: 64px;
  gap: 10px;
  border-radius: 16px;
  font-size: 15px;
  font-weight: 500;
}
#brand-assets-manage-modal .brand-assets-manage-upload svg { width: 20px; height: 20px; }
#brand-assets-manage-modal .brand-assets-manage-filters { gap: 8px; }
#brand-assets-manage-modal .brand-assets-manage-filters .bk-manage-chip {
  min-height: 36px;
  padding: 0 14px;
  border: 1px solid #e6e8f0;
  border-radius: 999px;
  background: #fafbfd;
  color: #6b7280;
  font-size: 13.5px;
  font-weight: 500;
  line-height: 1;
  transition: border-color 0.16s ease-out, background-color 0.16s ease-out, color 0.16s ease-out;
}
#brand-assets-manage-modal .brand-assets-manage-filters .bk-manage-chip:hover { border-color: #b9a4f2; color: #5b21b6; }
#brand-assets-manage-modal .brand-assets-manage-filters .bk-manage-chip:focus-visible { outline: 2px solid #7c3aed; outline-offset: 2px; }
#brand-assets-manage-modal .brand-assets-manage-filters .bk-manage-chip.is-filled {
  background: #ffffff;
  border-color: #cfd5e3;
  color: #1f2937;
  font-weight: 500;
}
#brand-assets-manage-modal .brand-assets-manage-filters .bk-manage-chip.is-active {
  background: #f3eeff;
  border-color: #7c3aed;
  color: #5b21b6;
  box-shadow: 0 0 0 1px #7c3aed;
}
#brand-assets-manage-modal .brand-assets-manage-filters .bk-manage-chip.is-needs {
  background: #fff7e6;
  border-color: #f3c46b;
  color: #8a4b0a;
}
#brand-assets-manage-modal .brand-assets-manage-filters .bk-manage-chip.is-needs.is-active {
  background: #fdecc0;
  border-color: #d98a0b;
  color: #6b3a05;
  box-shadow: 0 0 0 1px #d98a0b;
}
#brand-assets-manage-modal .brand-assets-manage-filters .bk-manage-chip.is-needs span { color: #a1520b; }

/* Grid and tiles */
#brand-assets-manage-modal .brand-assets-manage-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; min-height: 160px; }
#brand-assets-manage-modal .brand-assets-manage-item { border-radius: 16px; border-color: #e6e8f0; }
#brand-assets-manage-modal .brand-assets-manage-item.is-needs-label { border-color: #f3c46b; }
#brand-assets-manage-modal .brand-assets-manage-delete { width: 32px; height: 32px; background: rgba(17, 24, 39, 0.78); }
#brand-assets-manage-modal .brand-assets-manage-item-meta { padding: 8px; background: #ffffff; }
#brand-assets-manage-modal .brand-assets-manage-category-wrap { border-radius: 10px; border-color: #dfe3ed; }
#brand-assets-manage-modal .brand-assets-manage-item .select,
#brand-assets-manage-modal .brand-assets-manage-category { font-size: 13px; min-height: 40px; }

/* Empty state */
#brand-assets-manage-modal .brand-assets-manage-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 14px;
  padding: 36px 16px;
  font-size: 14.5px;
  line-height: 1.5;
  color: #55606f;
}
#brand-assets-manage-modal .brand-assets-manage-empty::before {
  content: "";
  width: 56px;
  height: 56px;
  border-radius: 16px;
  background-color: #f3eeff;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='28' height='28' viewBox='0 0 24 24' fill='none' stroke='%237c3aed' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='4' width='18' height='16' rx='3'/%3E%3Ccircle cx='8.5' cy='9.5' r='1.6'/%3E%3Cpath d='M21 16l-5-5-9 9'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: center;
}

/* Done stays reachable */
#brand-assets-manage-modal .modal-actions {
  position: sticky;
  bottom: 0;
  margin: 0 -24px;
  padding: 14px 24px max(16px, env(safe-area-inset-bottom));
  border-top: 1px solid #edf0f5;
  background: #ffffff;
  display: flex;
  justify-content: flex-end;
}
#brand-assets-manage-modal .modal-actions .button {
  min-height: 48px;
  padding: 0 32px;
  border-radius: 14px;
  border: 1px solid #7c3aed;
  background: #7c3aed;
  color: #ffffff;
  font-size: 15px;
  font-weight: 700;
  box-shadow: 0 10px 20px -10px rgba(124, 58, 237, 0.7);
}
#brand-assets-manage-modal .modal-actions .button:hover { background: #6d28d9; border-color: #6d28d9; }
#brand-assets-manage-modal .modal-actions .button:focus-visible { outline: 2px solid #7c3aed; outline-offset: 2px; }
@media (max-width: 760px) {
  #brand-assets-manage-modal .brand-assets-manage-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 520px) {
  #brand-assets-manage-modal .brand-assets-manage-card { padding: 22px 16px 0; }
  #brand-assets-manage-modal .brand-assets-manage-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  #brand-assets-manage-modal .modal-actions { margin: 0 -16px; padding-inline: 16px; }
  #brand-assets-manage-modal .modal-actions .button { flex: 1 1 auto; }
}


/* =========================================================
   Navigation chrome (2026-09): top bar, sidebar, account menu
   ========================================================= */
/* Top bar */
.app-header {
  padding: 12px 20px;
  gap: 12px;
  background: #ffffff;
  border-bottom: 1px solid #edf0f5;
}
.app-header .icon-button,
.app-header #nav-toggle {
  width: 40px;
  height: 40px;
  border: 1px solid #e0e4ee;
  border-radius: 12px;
  background: #ffffff;
  color: #374151;
  box-shadow: none;
  transition: background-color 0.16s ease-out, border-color 0.16s ease-out, color 0.16s ease-out;
}
.app-header .icon-button:hover { transform: none; box-shadow: none; background: #f5f1ff; border-color: #cdbdf7; color: #6d28d9; }
.app-header .icon-button:focus-visible { outline: 2px solid #7c3aed; outline-offset: 2px; }
.app-header .header-title { font-size: 15px; font-weight: 700; color: #111827; }
.header-credits { gap: 8px; }
.header-credits .credit-pill {
  height: 36px;
  padding: 0 12px;
  border-radius: 12px;
  background: #f7f4ff;
  border: 1px solid #e6dffb;
  color: #1f2937;
  font-size: 13.5px;
  font-weight: 500;
  font-variant-numeric: tabular-nums;
}
.app-header .user-chip {
  border-radius: 12px;
  background: #ffffff;
  border: 1px solid #e0e4ee;
  box-shadow: none;
}
.app-header .user-chip:hover { border-color: #cdbdf7; background: #faf8ff; }
.app-header .user-chip:focus-visible { outline: 2px solid #7c3aed; outline-offset: 2px; }
@media (max-width: 640px) {
  .app-header { padding: 10px 12px; gap: 8px; }
  .header-credits { gap: 6px; }
  .header-credits .credit-pill { height: 34px; padding: 0 10px; font-size: 13px; }
}

/* Sidebar */
.sidebar { background: #fbfbfe; }
.sidebar-nav { padding: 0 4px; }
.nav-group-label,
.nav-group-toggle {
  padding: 0 12px 8px;
  font-size: 12.5px;
  font-weight: 500;
  letter-spacing: 0;
  text-transform: none;
  color: #6b7280;
  opacity: 1;
}
.nav-group-toggle:hover { color: #374151; }
.nav-group + .nav-group { margin-top: 18px; padding-top: 14px; border-top: 1px solid #edf0f5; }
.nav-item {
  min-height: 42px;
  padding-inline: 12px;
  gap: 12px;
  border-radius: 12px;
  color: #374151;
  font-size: 14.5px;
  font-weight: 500;
}
.nav-group .nav-item + .nav-item { margin-top: 2px; }
.nav-icon { width: 18px; height: 18px; min-width: 18px; color: #6b7280; }
.nav-item:hover:not(.active) { background: #f5f2fd; color: #111827; }
.nav-item:hover:not(.active) .nav-icon { color: #5b21b6; }
.nav-item.active { min-height: 42px; background: #f3eeff; color: #4c1d95; font-weight: 700; }
.nav-item.active .nav-icon { color: #7c3aed; }
.nav-item:focus-visible { outline: 2px solid #7c3aed; outline-offset: 2px; }
.sidebar-nav .nav-item .nav-new-chip { height: 18px; padding: 0 7px; font-size: 10.5px; }
.sidebar-header .brand-title { font-size: 16px; }
.brand-switcher .select,
#brand-switcher-slot-sidebar input {
  border: 1px solid #dfe3ed;
  border-radius: 12px;
  background-color: #ffffff;
  font-size: 14px;
}
.nav-brand-add-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 40px;
  padding: 0 14px;
  border-radius: 12px;
  background: #f3eeff;
  border: 1px solid #e6dffb;
  color: #5b21b6;
  font-size: 13.5px;
  font-weight: 700;
  text-decoration: none;
  transition: background-color 0.16s ease-out, border-color 0.16s ease-out;
}
.nav-brand-add-btn:hover { background: #ebe1ff; border-color: #cdbdf7; }
.nav-brand-add-btn:focus-visible { outline: 2px solid #7c3aed; outline-offset: 2px; }
.sidebar-close {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: 1px solid #e0e4ee;
  background: #ffffff;
  color: #374151;
}

/* Account dropdown */
.user-chip-menu {
  min-width: 268px;
  padding: 8px;
  border-radius: 18px;
  border: 1px solid rgba(15, 23, 42, 0.08);
  box-shadow: 0 24px 48px -16px rgba(15, 23, 42, 0.28), 0 2px 6px rgba(15, 23, 42, 0.05);
}
.user-chip-menu-section { padding: 10px 12px 6px; font-size: 12.5px; font-weight: 500; letter-spacing: 0; color: #6b7280; }
.user-chip-menu-section:not(:first-child) { margin-top: 6px; border-top: 1px solid #edf0f5; padding-top: 12px; }
.user-chip-menu-item,
.user-chip-menu-brand {
  min-height: 44px;
  gap: 12px;
  padding: 6px 10px;
  border-radius: 12px;
  font-size: 14.5px;
  font-weight: 500;
  color: #1f2937;
}
.user-chip-menu-item:hover,
.user-chip-menu-brand:hover { background: #f5f2fd; color: #111827; }
.user-chip-menu-item:focus-visible,
.user-chip-menu-brand:focus-visible { outline: 2px solid #7c3aed; outline-offset: -2px; }
.user-chip-menu-icon {
  width: 32px;
  height: 32px;
  border-radius: 10px;
  background: #f4f5f9;
  color: #55606f;
  font-size: 0;
  transition: background-color 0.14s ease-out, color 0.14s ease-out;
}
.user-chip-menu-item:hover .user-chip-menu-icon { background: #ebe1ff; color: #5b21b6; }
.user-chip-menu-brand-logo { width: 32px; height: 32px; font-size: 12px; }

/* Profile / settings */
.profile-sidebar { padding: 24px 14px; gap: 4px; }
.profile-nav-item {
  min-height: 44px;
  gap: 12px;
  padding: 0 14px;
  border-radius: 12px;
  font-size: 14.5px;
  font-weight: 500;
  color: #374151;
}
.profile-nav-item:hover { background: #f5f2fd; color: #111827; }
.profile-nav-item.active { background: #f3eeff; color: #4c1d95; font-weight: 700; }
.profile-nav-item:focus-visible { outline: 2px solid #7c3aed; outline-offset: 2px; }
.profile-nav-icon { width: 19px; height: 19px; opacity: 1; color: #6b7280; }
.profile-nav-item.active .profile-nav-icon { color: #7c3aed; }
.ws-brand-header { gap: 14px; margin-bottom: 6px; }
.ws-brand-logo { width: 56px; height: 56px; border: 1px solid #e6e8f0; background: #ffffff; }
.ws-brand-name-label { font-size: 13px; color: #55606f; }
.ws-brand-name { font-size: 20px; font-weight: 700; letter-spacing: -0.01em; }
.ws-stats-row { gap: 12px; margin: 20px 0 24px; }
.ws-stat-card {
  padding: 16px;
  border: 1px solid #e6e8f0;
  border-radius: 16px;
  background: #ffffff;
  text-align: start;
}
.ws-stat-label { justify-content: flex-start; margin-bottom: 8px; font-size: 13px; font-weight: 500; color: #55606f; }
.ws-stat-value { display: block; padding: 0; border-radius: 0; background: none; font-size: 28px; font-weight: 700; line-height: 1.1; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
.ws-stat-value.blue { background: none; color: #1d4ed8; }
.ws-stat-value.green { background: none; color: #047857; }
.ws-stat-value.pink { background: none; color: #be185d; }
.contrib-header { font-size: 14.5px; font-weight: 500; color: #1f2937; margin-bottom: 10px; }
#profile-stats .stat-card { border-radius: 16px; padding: 16px; min-height: 108px; }
#profile-stats .stat-icon { width: 32px; height: 32px; border-radius: 10px; background: #f3eeff; color: #7c3aed; }
#profile-stats .stat-icon svg { width: 17px; height: 17px; }
#profile-stats .stat-label { font-size: 13px; font-weight: 500; color: #55606f; }
@media (max-width: 768px) {
  .profile-sidebar { gap: 6px; padding: 10px 12px; }
  .profile-nav-item { min-height: 40px; padding: 0 12px; font-size: 13.5px; }
  .ws-stat-card { padding: 12px; }
  .ws-stat-value { font-size: 22px; }
  .ws-stat-label { font-size: 12px; }
  #profile-stats .stat-label { font-size: 12px; }
}
/* Tile: stack photo and category picker so the picker can never be squeezed out */
#brand-assets-manage-modal .brand-assets-manage-item { display: flex; flex-direction: column; }
#brand-assets-manage-modal .brand-assets-manage-item-hit,
#brand-assets-manage-modal .brand-assets-manage-item-meta { flex: 0 0 auto; }

/* Profile tabs on phones: no close X, hidden scrollbar, soft edge fades, snap */
@media (max-width: 768px) {
  .profile-sidebar .profile-close { display: none !important; }
  .profile-sidebar {
    overflow-x: auto;
    overflow-y: hidden;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
    scroll-snap-type: x proximity;
    border-bottom: 1px solid #edf0f5;
    -webkit-mask-image: linear-gradient(to right, transparent 0, #000 14px, #000 calc(100% - 14px), transparent 100%);
    mask-image: linear-gradient(to right, transparent 0, #000 14px, #000 calc(100% - 14px), transparent 100%);
  }
  .profile-sidebar::-webkit-scrollbar { display: none; }
  .profile-nav-item { flex: 0 0 auto; width: auto; scroll-snap-align: center; border-radius: 999px; padding: 0 16px; }
}

/* Profile: Brands and Integrations tabs, less scrolling */
#brand-dna-strip { display: none; }
#tab-brands .section-header { display: flex; flex-direction: column; align-items: stretch; gap: 12px; margin-bottom: 12px; }
#tab-brands .section-header .inline-actions {
  display: flex;
  flex-wrap: nowrap;
  gap: 8px;
  overflow-x: auto;
  scrollbar-width: none;
}
#tab-brands .section-header .inline-actions::-webkit-scrollbar { display: none; }
#tab-brands .section-header .inline-actions .button {
  flex: 0 0 auto;
  width: auto;
  min-height: 38px;
  padding: 0 14px;
  border-radius: 12px;
  font-size: 13.5px;
  font-weight: 500;
}
#profile-brands .button { min-height: 36px; padding: 0 12px; border-radius: 10px; font-size: 13.5px; font-weight: 500; }
#profile-brands { gap: 10px; }

.integration-brand { padding: 14px 16px; border-radius: 16px; }
.integration-brand + .integration-brand { margin-top: 8px; }
.integration-row,
.integration-row:first-child {
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 0;
}
.integration-row:first-child { padding-top: 6px; }
.integration-row-main { flex: 1 1 auto; min-width: 0; }
.integration-row-title { font-size: 14.5px; font-weight: 500; color: #111827; gap: 8px; }
.integration-row-value { margin-top: 2px; font-size: 13px; color: #55606f; line-height: 1.4; }
.integration-row-actions { flex: 0 0 auto; flex-wrap: nowrap; gap: 6px; }
.integration-row-actions .button { min-height: 36px; padding: 0 14px; border-radius: 10px; font-size: 13.5px; font-weight: 500; }
@media (max-width: 768px) {
  .integration-row,
  .integration-row:first-child { flex-direction: row; align-items: center; gap: 10px; padding: 10px 0; }
  .integration-row-actions { flex-wrap: wrap; justify-content: flex-end; }
}
#tab-brands .section-header .inline-actions { display: none; }

/* Integrations fix: keep the action button its natural size next to the label */
.integration-row .integration-row-actions,
.integration-row:first-child .integration-row-actions { width: auto; align-self: center; flex: 0 0 auto; }
.integration-row .integration-row-actions .button { width: auto; flex: 0 0 auto; white-space: nowrap; }
.integration-row .integration-row-main { flex: 1 1 0; min-width: 0; }
/* The Adly Telegram / WhatsApp promo rows stay as stacked cards */
.integration-row.integration-row-telegram,
.integration-row.integration-row-telegram:first-child,
.integration-row.integration-row-adly-whatsapp,
.integration-row.integration-row-adly-whatsapp:first-child {
  flex-direction: column;
  align-items: stretch;
  gap: 12px;
  padding: 16px;
}
.integration-row.integration-row-telegram .integration-row-actions,
.integration-row.integration-row-adly-whatsapp .integration-row-actions { width: 100%; align-self: stretch; }
.integration-row.integration-row-telegram .integration-row-actions .button,
.integration-row.integration-row-adly-whatsapp .integration-row-actions .button { width: 100%; justify-content: center; }
@media (max-width: 768px) {
  .integration-row,
  .integration-row:first-child { flex-direction: row; align-items: center; }
  .integration-row .integration-row-actions { width: auto; align-self: center; }
  .integration-row.integration-row-telegram,
  .integration-row.integration-row-telegram:first-child,
  .integration-row.integration-row-adly-whatsapp,
  .integration-row.integration-row-adly-whatsapp:first-child { flex-direction: column; align-items: stretch; }
}
/* When the row is too narrow for the label and its buttons, the buttons drop
   under the label instead of crushing it to one letter per line. */
.integration-row:not(.integration-row-telegram):not(.integration-row-adly-whatsapp) { flex-wrap: wrap; row-gap: 10px; }
.integration-row:not(.integration-row-telegram):not(.integration-row-adly-whatsapp) .integration-row-main { flex: 1 1 12rem; }
.integration-row .integration-row-value { word-break: normal; overflow-wrap: break-word; }


/* =========================================================
   Profile: Plan & Credits (2026-09)
   Balances as a quiet list, one primary action, the rest as links.
   ========================================================= */
#tab-credits .plan-panel { padding: 20px; border: 1px solid #e6e8f0; border-radius: 20px; box-shadow: none; background: #ffffff; }
#tab-credits .plan-panel-header { display: flex; flex-direction: column; align-items: stretch; gap: 14px; margin-bottom: 18px; }
#tab-credits .plan-panel-header .section-title { margin: 0 0 6px; font-size: 20px; font-weight: 700; letter-spacing: -0.01em; }
#tab-credits .plan-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; font-size: 13.5px; color: #55606f; }
#tab-credits .plan-tier { padding: 2px 10px; border-radius: 999px; background: #f3eeff; color: #5b21b6; font-size: 12px; font-weight: 500; letter-spacing: 0.02em; }
#tab-credits .plan-panel-header .inline-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; }
#tab-credits .plan-panel-header .inline-actions .button { width: auto; min-height: 44px; padding: 0 16px; border-radius: 12px; font-size: 14.5px; font-weight: 500; }
#tab-credits #profile-topup-button,
#tab-credits #pay-now {
  background: #7c3aed;
  border: 1px solid #7c3aed;
  color: #ffffff;
  font-weight: 500;
  box-shadow: 0 10px 20px -10px rgba(124, 58, 237, 0.7);
}
#tab-credits #profile-topup-button:hover,
#tab-credits #pay-now:hover { background: #6d28d9; border-color: #6d28d9; }
#tab-credits .plan-panel-header .inline-actions .button.secondary:not(#profile-topup-button) { background: #ffffff; border: 1px solid #dfe3ed; color: #1f2937; }
#tab-credits .plan-panel-header .inline-actions .button.secondary:not(#profile-topup-button):hover { background: #faf8ff; border-color: #b9a4f2; color: #5b21b6; }
#tab-credits #cancel-plan { min-height: 36px; padding: 0 8px; border: 0; background: none; color: #6b7280; font-size: 13.5px; text-decoration: underline; text-underline-offset: 3px; margin-inline-start: auto; }
#tab-credits #cancel-plan:hover { background: none; color: #b91c1c; }
#tab-credits .plan-panel .button:focus-visible { outline: 2px solid #7c3aed; outline-offset: 2px; }

/* Credit balances: one list */
#tab-credits .plan-credits-grid,
#tab-credits .plan-limits-grid {
  display: block;
  margin: 0 0 14px;
  border: 1px solid #e6e8f0;
  border-radius: 16px;
  overflow: hidden;
  background: #ffffff;
}
#tab-credits .plan-credit-card,
#tab-credits .plan-limit-card {
  display: grid;
  align-items: center;
  column-gap: 12px;
  min-height: 52px;
  padding: 10px 16px;
  border: 0;
  border-bottom: 1px solid #edf0f5;
  border-radius: 0;
  background: #ffffff;
  box-shadow: none;
  text-align: start;
}
#tab-credits .plan-credit-card { grid-template-columns: auto minmax(0, 1fr) auto; grid-template-areas: "icon label value"; }
#tab-credits .plan-limit-card { grid-template-columns: minmax(0, 1fr) auto; }
#tab-credits .plan-credit-card:last-child,
#tab-credits .plan-limit-card:last-child { border-bottom: 0; }
#tab-credits .plan-credit-icon {
  grid-area: icon;
  width: 32px;
  height: 32px;
  margin: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 10px;
  background: #f3eeff;
  color: #7c3aed;
}
#tab-credits .plan-credit-icon svg { width: 16px; height: 16px; }
#tab-credits .plan-credit-label,
#tab-credits .plan-limit-label { grid-area: label; margin: 0; font-size: 14.5px; font-weight: 400; color: #374151; text-align: start; }
#tab-credits .plan-limit-label { grid-area: auto; }
#tab-credits .plan-credit-value,
#tab-credits .plan-limit-value { grid-area: value; margin: 0; font-size: 17px; font-weight: 500; color: #111827; font-variant-numeric: tabular-nums; text-align: end; }
#tab-credits .plan-limit-value { grid-area: auto; font-size: 15px; }

/* Referral */
#tab-credits .plan-referral-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  margin: 18px 0 0;
  padding: 16px 0 0;
  border: 0;
  border-top: 1px solid #edf0f5;
  border-radius: 0;
  background: none;
}
#tab-credits .plan-referral-row .plan-limit-label { font-size: 13.5px; color: #55606f; }
#tab-credits .plan-referral-row .plan-limit-value { margin: 2px 0 6px; font-size: 18px; letter-spacing: 0.04em; text-align: start; }
#tab-credits .plan-referral-row .muted { font-size: 13px; line-height: 1.55; color: #55606f; }
#tab-credits .plan-referral-row .button { flex: 0 0 auto; min-height: 40px; border-radius: 12px; font-size: 14px; font-weight: 500; }
#tab-credits #referral-apply-section { margin-top: 16px; }
#tab-credits #referral-apply-section label { display: block; margin-bottom: 8px; font-size: 14px; font-weight: 500; color: #1f2937; }
#tab-credits #referral-apply-section input { min-height: 44px; padding: 0 14px; border: 1px solid #dfe3ed; border-radius: 12px; font-size: 15px; }
#tab-credits #referral-apply-section input:focus { outline: none; border-color: #7c3aed; box-shadow: 0 0 0 3px rgba(124, 58, 237, 0.16); }
#tab-credits #referral-apply-section .button { min-height: 44px; border-radius: 12px; font-size: 14px; font-weight: 500; }
#tab-credits #referral-apply-section .muted { margin-top: 8px; font-size: 13px; color: #55606f; }
#tab-credits .plan-panel-header .inline-actions { justify-content: flex-start; }
#tab-credits #profile-topup-button,
#tab-credits #pay-now { order: -1; }
#tab-credits .plan-panel-header .inline-actions #cancel-plan { border: 0; background: none; box-shadow: none; }
#tab-credits .plan-credit-label,
#tab-credits .plan-limit-label { display: block; justify-self: start; text-align: start; }
#tab-credits .plan-credit-value,
#tab-credits .plan-limit-value { justify-self: end; direction: ltr; unicode-bidi: isolate; text-align: end; }
#tab-credits #referral-apply-section .row { display: flex; flex-wrap: nowrap; align-items: stretch; gap: 8px; }
#tab-credits #referral-apply-section .row .button { flex: 0 0 auto; width: auto; padding: 0 18px; }
#tab-credits .plan-panel-header .inline-actions { flex-direction: row; align-items: center; }
#tab-credits .plan-panel-header .inline-actions #cancel-plan { border: 0 !important; background: none !important; box-shadow: none !important; min-height: 44px; }
#tab-credits .plan-referral-row .plan-limit-value { direction: inherit; unicode-bidi: isolate; justify-self: auto; text-align: start; }


/* =========================================================
   Profile: Account tab (2026-09)
   Compact avatar, two-up names, segmented theme choice.
   ========================================================= */
#tab-account .card { padding: 20px; border: 1px solid #e6e8f0; border-radius: 20px; box-shadow: none; background: #ffffff; }
#tab-account .card h2 { margin: 0 0 16px; font-size: 20px; font-weight: 700; letter-spacing: -0.01em; color: #111827; }
#tab-account .stack { gap: 18px; }
/* Delete account: its own card at the end of the tab, calm but easy to find (App Store 5.1.1(v)). */
#tab-account .profile-delete-card h2 { margin-bottom: 8px; }
#tab-account .profile-delete-help { margin: 0 0 16px; max-width: 60ch; font-size: 14.5px; line-height: 1.55; color: #4b5563; }
#tab-account .profile-delete-card .alert { margin: 0 0 16px; font-size: 14.5px; }
#tab-account .button.secondary.profile-delete-button { min-height: 46px; padding: 0 24px; color: #b42318; border-color: #f1c8c3; font-weight: 500; }
#tab-account .button.secondary.profile-delete-button:hover { background: #fef3f2; color: #912018; border-color: #e8a59d; }
#tab-account .button.secondary.profile-delete-button:focus-visible { outline: 2px solid #b42318; outline-offset: 2px; }
#tab-account .button.secondary.profile-delete-button[disabled] { display: none; }
#tab-account .field > label:not(.upload-box):not(.language-option) { display: block; margin: 0 0 8px; font-size: 14.5px; font-weight: 500; color: #1f2937; }
#tab-account .row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
#tab-account .row:has(#avatar) { grid-template-columns: 1fr; }
#tab-account #current-password-field,
#tab-account #confirm-password-field { grid-column: auto; }
@media (max-width: 520px) {
  #tab-account .row:has(#current_password) { grid-template-columns: 1fr; }
}
#tab-account .field input:not([type="file"]):not([type="radio"]) {
  width: 100%;
  min-height: 46px;
  padding: 0 14px;
  border: 1px solid #dfe3ed;
  border-radius: 12px;
  background: #ffffff;
  color: #111827;
  font-size: 15px;
  box-sizing: border-box;
}
#tab-account .field input:not([type="file"]):not([type="radio"]):focus { outline: none; border-color: #7c3aed; box-shadow: 0 0 0 3px rgba(124, 58, 237, 0.16); }
#tab-account .field input:disabled { background: #f6f7fa; color: #55606f; }

/* Avatar: preview beside a compact upload strip */
#tab-account .field:has(#avatar) { display: grid; grid-template-columns: 72px minmax(0, 1fr); column-gap: 14px; align-items: center; }
#tab-account .field:has(#avatar) > label:first-child { grid-column: 1 / -1; }
#tab-account #avatar-preview { grid-column: 1; margin: 0; width: 72px; height: 72px; display: flex; align-items: center; justify-content: center; border-radius: 20px; overflow: hidden; background: #f3eeff; font-size: 11px; line-height: 1.3; text-align: center; color: #55606f; }
#tab-account #avatar-preview img { width: 100%; height: 100%; object-fit: cover; border-radius: 0; }
#tab-account .upload-box { grid-column: 2; margin: 0; min-height: 72px; padding: 10px 14px; display: flex; flex-direction: column; justify-content: center; gap: 2px; border: 1.5px dashed #c3cadb; border-radius: 16px; background: #fafbfd; text-align: start; cursor: pointer; transition: border-color 0.16s ease-out, background-color 0.16s ease-out; }
#tab-account .upload-box:hover { border-color: #7c3aed; background: #f5f1ff; }
#tab-account .upload-box-title { font-size: 14px; font-weight: 500; color: #1f2937; }
#tab-account .upload-box-subtitle { font-size: 12.5px; color: #55606f; }

/* Theme mode: segmented choice */
#tab-account .language-options { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
#tab-account .language-option {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 46px;
  padding: 0 12px;
  border: 1px solid #dfe3ed;
  border-radius: 12px;
  background: #ffffff;
  color: #374151;
  font-size: 14px;
  font-weight: 500;
  text-align: center;
  cursor: pointer;
  transition: border-color 0.16s ease-out, background-color 0.16s ease-out, color 0.16s ease-out;
}
#tab-account .language-option > input[type="radio"] { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
#tab-account .language-option:hover { border-color: #c9cfdd; background: #fafbfd; }
#tab-account .language-option:has(input:checked) { border-color: #7c3aed; background: #f3eeff; color: #5b21b6; font-weight: 500; box-shadow: 0 0 0 1px #7c3aed; }
#tab-account .language-option:has(input:focus-visible) { outline: 2px solid #7c3aed; outline-offset: 2px; }

/* Actions */
#tab-account #save-profile,
#tab-account #change-password { align-self: flex-start; min-height: 46px; padding: 0 24px; border-radius: 12px; font-size: 15px; font-weight: 500; }
#tab-account #save-profile { background: #7c3aed; border: 1px solid #7c3aed; color: #ffffff; box-shadow: 0 10px 20px -10px rgba(124, 58, 237, 0.7); }
#tab-account #save-profile:hover { background: #6d28d9; border-color: #6d28d9; }
#tab-account #change-password { background: #ffffff; border: 1px solid #dfe3ed; color: #1f2937; }
#tab-account #change-password:hover { background: #faf8ff; border-color: #b9a4f2; color: #5b21b6; }
#tab-account .button:focus-visible { outline: 2px solid #7c3aed; outline-offset: 2px; }
#tab-account .card + .card { margin-top: 16px !important; }


/* =========================================================
   Profile: Workspace tab (2026-09)
   One summary strip, one impact list. Far less scrolling.
   ========================================================= */
#tab-workspace .ws-brand-logo { font-size: 0; }
#tab-workspace .ws-brand-header { margin-bottom: 14px; }

/* Summary: three figures in one bordered strip */
#tab-workspace .ws-stats-row {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0;
  margin: 0 0 22px;
  border: 1px solid #e6e8f0;
  border-radius: 16px;
  overflow: hidden;
  background: #ffffff;
}
#tab-workspace .ws-stat-card { padding: 14px 14px 16px; border: 0; border-radius: 0; background: none; text-align: start; }
#tab-workspace .ws-stat-card + .ws-stat-card { border-inline-start: 1px solid #edf0f5; }
#tab-workspace .ws-stat-label { justify-content: flex-start; margin-bottom: 6px; font-size: 12.5px; font-weight: 400; line-height: 1.35; color: #55606f; }
#tab-workspace .ws-stat-value { font-size: 24px; font-weight: 700; }
@media (max-width: 420px) {
  #tab-workspace .ws-stat-card { padding: 12px 10px 14px; }
  #tab-workspace .ws-stat-value { font-size: 20px; }
}

/* Impact: a single list instead of nine tiles */
#tab-workspace .profile-impact-card { margin-top: 24px !important; padding: 0; border: 0; background: none; box-shadow: none; }
#tab-workspace .profile-impact-card .section-title { margin: 0 0 10px; font-size: 17px; font-weight: 700; }
#tab-workspace #profile-stats.stats-grid {
  display: block;
  margin: 0;
  border: 1px solid #e6e8f0;
  border-radius: 16px;
  overflow: hidden;
  background: #ffffff;
}
#tab-workspace #profile-stats .stat-card {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  grid-template-areas: "icon label value";
  align-items: center;
  column-gap: 12px;
  min-height: 50px;
  padding: 8px 16px;
  border: 0;
  border-bottom: 1px solid #edf0f5;
  border-radius: 0;
  background: #ffffff;
  box-shadow: none;
}
#tab-workspace #profile-stats .stat-card:last-child { border-bottom: 0; }
#tab-workspace #profile-stats .stat-icon { grid-area: icon; width: 30px; height: 30px; margin: 0; border-radius: 10px; }
#tab-workspace #profile-stats .stat-icon svg { width: 16px; height: 16px; }
#tab-workspace #profile-stats .stat-label { grid-area: label; margin: 0; display: block; font-size: 14.5px; font-weight: 400; color: #374151; -webkit-line-clamp: unset; }
#tab-workspace #profile-stats .stat-value { grid-area: value; font-size: 17px; font-weight: 500; letter-spacing: 0; justify-self: end; }
#tab-workspace .contrib-section { margin-top: 26px; }

/* =========================================================
   Plan header (final): "خطتي", tier and end date on ONE row.
   Actions under it. No top-up button: we do not sell credits.
   ========================================================= */
#tab-credits #profile-topup-button { display: none !important; }
#tab-credits .plan-panel-header { position: static; display: block; margin-bottom: 16px; }
#tab-credits .plan-panel-header > div:first-child {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 12px;
  padding: 0;
}
#tab-credits .plan-panel-header .section-title { margin: 0; font-size: 20px; font-weight: 700; }
#tab-credits .plan-meta { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; margin: 0; font-size: 13.5px; color: #55606f; }
#tab-credits .plan-panel-header .inline-actions {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-start;
  gap: 8px;
  margin-top: 14px;
  width: auto;
}
#tab-credits .plan-panel-header .inline-actions .button {
  position: static;
  width: auto;
  min-height: 40px;
  padding: 0 16px;
  border-radius: 12px;
  font-size: 14px;
  font-weight: 500;
  white-space: nowrap;
}
#tab-credits #pay-now { background: #7c3aed; border: 1px solid #7c3aed; color: #ffffff; box-shadow: 0 10px 20px -10px rgba(124, 58, 237, 0.7); }
#tab-credits .plan-panel-header .inline-actions .button.secondary { background: #ffffff; border: 1px solid #dfe3ed; color: #1f2937; box-shadow: none; }
#tab-credits .plan-panel-header .inline-actions .button.secondary:hover { background: #faf8ff; border-color: #b9a4f2; color: #5b21b6; }
#tab-credits .plan-panel-header .inline-actions #cancel-plan { border: 0; background: none; color: #6b7280; padding: 0 6px; text-decoration: underline; text-underline-offset: 3px; margin-inline-start: auto; }
#tab-credits .plan-panel-header .inline-actions #cancel-plan:hover { background: none; color: #b91c1c; }
html[dir="rtl"] .contrib-legend,
[dir="rtl"] .contrib-legend,
.rtl .contrib-legend { justify-content: flex-start; }

/* ==========================================================================
   Create flows polish: Product Studio in two steps (template, then product and settings).
   Flat inside the step panel (no card in a card), the step title replaces the inner heading.
   ========================================================================== */
.product-studio-shell { margin-top: 4px; padding: 0; border: 0; border-radius: 0; background: transparent; box-shadow: none; overflow: visible; }
.product-studio-choose-head { display: none; }
#video-from-image-section:has(#product-studio-section[data-ps-step]:not([style*="none"])) .video-section-header { display: none !important; }
#product-studio-section[data-ps-step="1"] .product-studio-inputs { display: none; }
#product-studio-section[data-ps-step="2"] #product-studio-preset-grid { display: none; }

/* Step 1: templates */
.product-studio-preset-grid { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 12px; }
.product-studio-preset-card { gap: 0; padding: 0; border: 1px solid #e6e8f0; border-radius: 16px; box-shadow: none; transition: border-color .16s ease, box-shadow .16s ease; }
.product-studio-preset-card:hover { transform: none; border-color: color-mix(in srgb, #7c3aed 40%, #e6e8f0); box-shadow: 0 6px 18px rgba(15, 23, 42, .06); }
.product-studio-preset-card:focus-visible { outline: 2px solid rgba(124, 58, 237, .55); outline-offset: 2px; }
.product-studio-preset-card.is-selected { border-color: #7c3aed; box-shadow: 0 0 0 1px #7c3aed; }
.product-studio-preview-wrap { height: auto; aspect-ratio: 4 / 3; border: 0; border-radius: 15px 15px 0 0; }
.product-studio-check { top: 10px; inset-inline-end: 10px; width: 26px; height: 26px; box-shadow: 0 2px 8px rgba(76, 29, 149, .3); }
.product-studio-card-copy { display: grid; gap: 2px; padding: 10px 12px 12px; }
.product-studio-card-title { font-size: 14px; font-weight: 700; line-height: 1.35; }
.product-studio-card-subtitle { margin: 0; font-size: 12.5px; line-height: 1.45; white-space: normal; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }

/* Step 2: chosen template, assets, settings */
.product-studio-inputs { margin-top: 0; gap: 20px; }
.product-studio-chosen { display: flex; align-items: center; gap: 12px; padding: 8px 10px; border: 1px solid #e6e8f0; border-radius: 14px; background: #fafafc; }
.product-studio-chosen[hidden] { display: none; }
.product-studio-chosen-thumb { width: 52px; height: 40px; flex: none; border-radius: 9px; object-fit: cover; }
.product-studio-chosen-copy { display: grid; gap: 1px; flex: 1 1 auto; min-width: 0; }
.product-studio-chosen-label { font-size: 12px; color: var(--brand-muted); }
.product-studio-chosen-title { font-size: 14.5px; font-weight: 700; color: var(--brand-ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.product-studio-chosen-change { flex: none; padding: 6px 12px; border: 1px solid #e6e8f0; border-radius: 10px; background: #fff; color: var(--brand-ink); font: inherit; font-size: 13px; font-weight: 500; cursor: pointer; }
.product-studio-chosen-change:hover { border-color: color-mix(in srgb, #7c3aed 40%, #e6e8f0); color: #6d28d9; }
.product-studio-assets-title,
.product-studio-inputs .field > label { margin: 0 0 8px; font-size: 14px; font-weight: 700; color: var(--brand-ink); }
.product-studio-assets-title { margin-bottom: -8px; }
.product-studio-asset-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.product-studio-asset-card { flex-direction: column; gap: 8px; min-height: 108px; padding: 14px 10px; border: 1.5px dashed #d9dce6; border-radius: 14px; background: #fff; box-shadow: none; }
.product-studio-asset-card:hover { border-color: #7c3aed; background: #faf8ff; box-shadow: none; }
.product-studio-asset-card-required { border-color: color-mix(in srgb, #7c3aed 45%, #d9dce6); background: #faf8ff; }
.product-studio-asset-plus { display: none; }
.product-studio-asset-icon { width: 26px; height: 26px; color: #7c3aed; }
.product-studio-asset-label { display: grid; gap: 2px; font-size: 13px; font-weight: 500; line-height: 1.35; color: var(--brand-ink); }
.product-studio-asset-card .video-ref-required { font-size: 11.5px; font-weight: 500; color: #6d28d9; }
.product-studio-output-row { gap: 12px; }
.product-studio-duration-picker { gap: 2px; padding: 3px; border-radius: 12px; background: #f4f5f9; border-color: #e6e8f0; }
.product-studio-duration-dot { padding: 0; height: 36px; border-radius: 9px; font-size: 13.5px; font-weight: 500; color: var(--brand-muted); }
.product-studio-duration-dot.is-selected { font-weight: 700; color: var(--brand-ink); box-shadow: 0 1px 2px rgba(15, 23, 42, .08), 0 0 0 1px rgba(15, 23, 42, .05); }
#product_studio_notes, #product_studio_notes::placeholder { font-size: 14px; }
@media (max-width: 520px) {
  .product-studio-preset-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .product-studio-asset-card { min-height: 96px; padding: 12px 6px; }
}

/* ==========================================================================
   Create flows polish: UGC. Image-first format cards with a check on the photo, actor cards where the whole
   card selects (photo included) and a small zoom button previews, a calm empty hint on scripts, and the
   review facts as even cells instead of tiny uppercase chips.
   ========================================================================== */
#ugc-format-cards { gap: 12px; }
.ugc-format-card,
.ugc-format-card:hover,
.ugc-format-card.active { transform: none; }
.ugc-format-card { display: flex; flex-direction: column; gap: 0; padding: 0; border-radius: 16px; border: 1px solid #e6e8f0; background: #fff; box-shadow: none; }
.ugc-format-card::before { display: none; }
.ugc-format-card:hover { border-color: color-mix(in srgb, #7c3aed 40%, #e6e8f0); background: #fff; box-shadow: 0 6px 18px rgba(15, 23, 42, .06); }
.ugc-format-card:focus-visible { outline: 2px solid rgba(124, 58, 237, .55); outline-offset: 2px; }
.ugc-format-card.active { border-color: #7c3aed; background: #fff; box-shadow: 0 0 0 1px #7c3aed; }
.ugc-format-card.active .ugc-goal-title { color: var(--brand-ink); }
.ugc-format-card .ugc-format-preview { order: -1; aspect-ratio: 1 / 1; border: 0; border-radius: 15px 15px 0 0; box-shadow: none; }
.ugc-format-card .ugc-format-preview-image { object-position: center 30%; }
.ugc-format-card-top { padding: 12px 14px 0; }
.ugc-format-card .ugc-goal-title { font-size: 15px; font-weight: 700; letter-spacing: 0; }
.ugc-format-card .ugc-goal-desc { padding: 4px 14px 14px; font-size: 13px; line-height: 1.55; color: var(--brand-muted); }
.ugc-format-card-marker { position: absolute; top: 10px; inset-inline-end: 10px; z-index: 3; width: 26px; height: 26px; border: 2px solid #fff; opacity: 0; transition: opacity .15s ease; }
/* Six formats: one even grid (3 per row on wide desktop, 2 below), never a lone or oversized card. Titles at 500: Tajawal 700 is for page titles. */
#ugc-format-cards > .ugc-format-card,
#ugc-format-cards > .ugc-format-card:nth-child(4),
#ugc-format-cards > .ugc-format-card:nth-child(5) { grid-column: span 6; }
@media (min-width: 1201px) {
  #ugc-format-cards > .ugc-format-card,
  #ugc-format-cards > .ugc-format-card:nth-child(4),
  #ugc-format-cards > .ugc-format-card:nth-child(5) { grid-column: span 4; }
}
.ugc-format-card .ugc-goal-title { font-weight: 500; }
@media (min-width: 1024px) {
  /* Wider photos on desktop so both rows sit above the wizard buttons. */
  .ugc-format-card .ugc-format-preview { aspect-ratio: 4 / 3; }
  .ugc-format-card .ugc-format-preview-image { object-position: center 28%; }
}
.ugc-format-card.active .ugc-format-card-marker { opacity: 1; box-shadow: 0 2px 8px rgba(76, 29, 149, .3); }

/* Actors */
#ugc-actor-grid { grid-template-columns: repeat(auto-fill, minmax(116px, 1fr)); gap: 10px; }
#ugc-actor-grid .ugc-actor-card { position: relative; gap: 2px; padding: 6px 6px 10px; border-radius: 14px; border: 1px solid #e6e8f0; box-shadow: none; }
#ugc-actor-grid .ugc-actor-card:hover { border-color: color-mix(in srgb, #7c3aed 40%, #e6e8f0); box-shadow: 0 6px 18px rgba(15, 23, 42, .06); }
#ugc-actor-grid .ugc-actor-card:focus-visible { outline: 2px solid rgba(124, 58, 237, .55); outline-offset: 2px; }
#ugc-actor-grid .ugc-actor-card.selected { background: #fff; border-color: #7c3aed; box-shadow: 0 0 0 1px #7c3aed; }
#ugc-actor-grid .ugc-actor-card.selected::after { content: ''; position: absolute; top: 12px; inset-inline-end: 12px; width: 24px; height: 24px; border-radius: 50%; border: 2px solid #fff; background: #7c3aed url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'><path d='M5 12.5l4.5 4.5L19 7.5'/></svg>") center / 12px no-repeat; box-shadow: 0 2px 8px rgba(76, 29, 149, .3); }
#ugc-actor-grid .ugc-actor-photo { position: relative; display: block; width: 100%; margin-bottom: 6px; }
#ugc-actor-grid .ugc-actor-thumb,
#ugc-actor-grid .ugc-actor-thumb-placeholder { display: block; width: 100%; height: auto; aspect-ratio: 1 / 1; border: 0; border-radius: 10px; object-fit: cover; object-position: center 25%; cursor: pointer; }
#ugc-actor-grid .ugc-actor-thumb:hover { transform: none; }
#ugc-actor-grid .ugc-actor-zoom { position: absolute; bottom: 6px; inset-inline-start: 6px; display: grid; place-items: center; width: 28px; height: 28px; border-radius: 8px; background: rgba(255, 255, 255, .94); color: #1a202c; box-shadow: 0 1px 4px rgba(15, 23, 42, .18); opacity: 0; transition: opacity .15s ease; cursor: zoom-in; }
#ugc-actor-grid .ugc-actor-card:hover .ugc-actor-zoom,
#ugc-actor-grid .ugc-actor-zoom:focus-visible { opacity: 1; }
@media (hover: none) { #ugc-actor-grid .ugc-actor-zoom { opacity: 1; } }
#ugc-actor-grid .ugc-actor-name { font-size: 13px; font-weight: 700; }
#ugc-actor-grid .ugc-actor-meta { font-size: 11.5px; color: var(--brand-muted); }

/* Script hints */
.ugc-seg-hint { font-size: 12.5px; line-height: 1.5; }
.ugc-seg-hint.is-empty { color: var(--brand-muted); }
.ugc-seg-hint.is-short { color: #b91c1c; font-weight: 500; }
.ugc-seg-hint.is-partial { color: #b45309; }

/* Review before create */
.ugc-review-tags { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 8px; }
.ugc-review-tag { display: grid; gap: 2px; padding: 10px 12px; border: 0; border-radius: 10px; background: #f6f7fa; }
.ugc-review-tag-k { font-size: 12px; font-weight: 500; letter-spacing: 0; text-transform: none; color: var(--brand-muted); }
.ugc-review-tag-v { font-size: 14px; font-weight: 500; line-height: 1.4; }

/* ==========================================================================
   Create flows polish: carousel builder. Language and content method as segmented controls (same as the
   rest of the app), options as tidy rows with their help beside the label, slides as flat cards.
   ========================================================================== */
.carousel-mode-options,
#create-panel:has(#tips-section:not([style*="none"])) #language-field .language-options { display: flex; flex-wrap: nowrap; gap: 2px; width: 100%; max-width: 520px; padding: 3px; border: 1px solid #e6e8f0; border-radius: 12px; background: #f4f5f9; }
.carousel-mode-option,
#create-panel:has(#tips-section:not([style*="none"])) #language-field .language-option { position: relative; flex: 1 1 0; justify-content: center; min-width: 0; height: 36px; min-height: 36px; margin: 0; padding: 0 10px; border: 0; border-radius: 9px; background: transparent; color: var(--brand-muted); font-size: 13.5px; font-weight: 500; white-space: nowrap; box-shadow: none; cursor: pointer; transition: background-color .15s ease, color .15s ease; }
.carousel-mode-option input,
#create-panel:has(#tips-section:not([style*="none"])) #language-field .language-option input { position: absolute; width: 1px; height: 1px; margin: 0; opacity: 0; pointer-events: none; }
.carousel-mode-option:hover,
#create-panel:has(#tips-section:not([style*="none"])) #language-field .language-option:hover { color: var(--brand-ink); }
.carousel-mode-option:has(input:checked),
#create-panel:has(#tips-section:not([style*="none"])) #language-field .language-option:has(input:checked) { border: 0; background: #fff; color: var(--brand-ink); font-weight: 700; box-shadow: 0 1px 2px rgba(15, 23, 42, .08), 0 0 0 1px rgba(15, 23, 42, .05); }
.carousel-mode-option:has(input:focus-visible),
#create-panel:has(#tips-section:not([style*="none"])) #language-field .language-option:has(input:focus-visible) { outline: 2px solid rgba(124, 58, 237, .55); outline-offset: 1px; }
.tips-content-mode-field .section-title { margin: 0 0 8px; font-size: 14px; font-weight: 700; color: var(--brand-ink); }
.tips-content-mode-field .hint { margin-top: 8px; }
#tips-section > .field > .checkbox-line { display: inline-flex; align-items: center; gap: 8px; margin: 0; font-size: 14px; font-weight: 500; color: var(--brand-ink); }
#tips-section > .field > .checkbox-line .carousel-option-help { margin: 0; }
#tips-section > .field:has(> .checkbox-line) { margin: 0; }

/* Slides */
#carousel-preview-section > .section-subtitle { margin: 8px 0 0; font-size: 15px; font-weight: 700; color: var(--brand-ink); }
.carousel-slide-item,
.carousel-slide-item[data-slide="0"],
html[dir="rtl"] .carousel-slide-item,
html[dir="rtl"] .carousel-slide-item[data-slide="0"],
[dir="rtl"] .carousel-slide-item,
[dir="rtl"] .carousel-slide-item[data-slide="0"],
.rtl .carousel-slide-item,
.rtl .carousel-slide-item[data-slide="0"] { margin: 0 0 12px; padding: 14px 16px 16px; border: 1px solid #e6e8f0; border-radius: 16px; background: #fff; box-shadow: none; }
.carousel-slide-header { margin-bottom: 10px; }
.carousel-slide-label { font-size: 15px; font-weight: 700; letter-spacing: 0; }
.carousel-slide-remove { display: inline-grid; place-items: center; width: 30px; height: 30px; padding: 0; border-radius: 8px; font-size: 0; color: var(--brand-muted); }
.carousel-slide-remove::before { content: ''; width: 14px; height: 14px; background: currentColor; -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round'><path d='M6 6l12 12M18 6 6 18'/></svg>") center / contain no-repeat; mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round'><path d='M6 6l12 12M18 6 6 18'/></svg>") center / contain no-repeat; }
.carousel-slide-remove:hover { background: #fef2f2; color: #b91c1c; }
.carousel-slide-remove:focus-visible { outline: 2px solid rgba(124, 58, 237, .55); outline-offset: 1px; }
.carousel-slide-primary .carousel-slide-field-label,
.carousel-cta-label { margin-bottom: 6px; font-size: 12.5px; font-weight: 500; color: var(--brand-muted); }
.carousel-slide-input { background: #fff; border-color: #e6e8f0; }
.carousel-slide-input:focus { border-color: #7c3aed; box-shadow: 0 0 0 3px rgba(124, 58, 237, .14); }
/* Long labels ("AI generate") take the room they need and wrap on narrow screens instead of overflowing. */
.carousel-mode-option,
#create-panel:has(#tips-section:not([style*="none"])) #language-field .language-option { flex: 1 1 auto; height: auto; padding: 6px 10px; white-space: normal; line-height: 1.25; text-align: center; }
/* Disclosure chevron points to the inline end: left in Arabic, down when open. */
html[dir="rtl"] .carousel-slide-extras-chevron svg,
.rtl .carousel-slide-extras-chevron svg { transform: scaleX(-1); }
html[dir="rtl"] .carousel-slide-extras--open .carousel-slide-extras-chevron svg,
.rtl .carousel-slide-extras--open .carousel-slide-extras-chevron svg { transform: rotate(90deg); }
/* Job cards: a failed job says so. */
.status-pill.is-failed { display: inline-flex; align-items: center; gap: 5px; border-color: #fecaca; background: #fef2f2; color: #b91c1c; font-weight: 500; }
.status-pill.is-failed .status-pill-failed-icon { width: 14px; height: 14px; flex: none; }

/* ==========================================================================
   UGC typography. One role scale in Tajawal (the create panel face), only the weights that are loaded
   (400 body, 500 controls, 700 titles), no negative tracking on Arabic, readable metadata.
   Roles: step title 22/700, step intro 14/400, card title 15/700, card body 13.5/400,
   controls 14/500 (700 when selected), metadata 12.5/500.
   ========================================================================== */
#create-panel .ugc-format-stage .step-panel-title,
#create-panel [id^="ugc-wizard-step-"] .step-panel-title { font-size: 22px; font-weight: 700; line-height: 1.3; letter-spacing: 0; }
#create-panel .ugc-format-stage .step-panel-desc,
#create-panel [id^="ugc-wizard-step-"] .step-panel-desc { font-size: 14px; font-weight: 400; line-height: 1.7; color: var(--brand-muted); }

/* Format cards: the check sits on the photo corner, never on the title */
.ugc-format-card-top { position: static; z-index: auto; padding: 12px 14px 0; }
.ugc-format-card .ugc-goal-title { font-size: 15px; font-weight: 700; line-height: 1.35; letter-spacing: 0; }
.ugc-format-card .ugc-goal-desc { font-size: 13.5px; font-weight: 400; line-height: 1.65; }

/* Actor step controls */
.ugc-actor-auto-toggle,
.ugc-actor-auto-toggle span { font-size: 14px; font-weight: 500; color: var(--brand-muted); letter-spacing: 0; }
.ugc-actor-source-tabs .tab-button { height: 34px; padding: 0 14px; font-size: 14px; font-weight: 500; line-height: 1; letter-spacing: 0; }
.ugc-actor-source-tabs .tab-button.active,
.ugc-actor-source-tabs .tab-button[aria-selected="true"] { font-weight: 700; }
.ugc-actor-filter-select { height: 38px; font-size: 14px; font-weight: 500; }
#ugc-actor-grid .ugc-actor-name { font-size: 14px; font-weight: 700; line-height: 1.35; }
#ugc-actor-grid .ugc-actor-meta { font-size: 12.5px; font-weight: 500; line-height: 1.4; font-variant-numeric: tabular-nums; }
#ugc-actor-grid .ugc-actor-meta bdi { unicode-bidi: isolate; }

/* Scripts and review */
.ugc-segment-scene-index { font-size: 15px; font-weight: 700; letter-spacing: 0; }
.ugc-review-actor-name { font-size: 15px; font-weight: 700; }
.ugc-review-actor-meta-label, .ugc-review-videos-label { font-size: 12.5px; font-weight: 500; letter-spacing: 0; text-transform: none; color: var(--brand-muted); }
.ugc-review-video-script { font-size: 14px; line-height: 1.7; }

/* ==========================================================================
   UGC videos step: flat script cards, the AI tools as two clear buttons with drawn icons, a readable label,
   a taller script box, count and hint on one line, and a full-width add button.
   ========================================================================== */
.ugc-segment-scene-card,
html[dir="rtl"] .ugc-segment-scene-card,
[dir="rtl"] .ugc-segment-scene-card { padding: 16px; border-radius: 16px; border: 1px solid #e6e8f0; background: #fff; box-shadow: none; }
.ugc-segment-scene-card-top { margin-bottom: 12px; gap: 10px; flex-wrap: wrap; }
.ugc-segment-scene-index { font-size: 16px; font-weight: 700; color: var(--brand-ink); }
.ugc-segment-scene-card-actions { gap: 6px; }
.ugc-seg-ai-write-btn { gap: 6px; height: 34px; padding: 0 12px; border: 1px solid color-mix(in srgb, #7c3aed 30%, #fff); border-radius: 10px; background: color-mix(in srgb, #7c3aed 8%, #fff); color: #6d28d9; font-size: 13.5px; font-weight: 700; }
.ugc-seg-ai-write-btn:hover { background: color-mix(in srgb, #7c3aed 14%, #fff); border-color: color-mix(in srgb, #7c3aed 50%, #fff); }
.ugc-seg-ai-write-btn:before { content: ''; width: 14px; height: 14px; flex: none; opacity: 1; background: currentColor; -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='black'><path d='M12 2.5l1.9 5.6 5.6 1.9-5.6 1.9L12 17.5l-1.9-5.6L4.5 10l5.6-1.9zM19 15l.9 2.1 2.1.9-2.1.9L19 21l-.9-2.1-2.1-.9 2.1-.9z'/></svg>") center / contain no-repeat; mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='black'><path d='M12 2.5l1.9 5.6 5.6 1.9-5.6 1.9L12 17.5l-1.9-5.6L4.5 10l5.6-1.9zM19 15l.9 2.1 2.1.9-2.1.9L19 21l-.9-2.1-2.1-.9 2.1-.9z'/></svg>") center / contain no-repeat; }
.ugc-segment-scene-card .video-ai-write-personality-toggle { gap: 6px; height: 34px; min-height: 34px; padding: 0 10px 0 12px; border: 1px solid #e6e8f0; border-radius: 10px; font-size: 13.5px; font-weight: 500; color: var(--brand-ink); }
.ugc-segment-scene-card .video-ai-write-personality-chevron { display: inline-block; width: 14px; height: 14px; font-size: 0; background: var(--brand-muted); -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'><path d='M6 9l6 6 6-6'/></svg>") center / contain no-repeat; mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'><path d='M6 9l6 6 6-6'/></svg>") center / contain no-repeat; transition: transform .15s ease; }
.ugc-segment-scene-card .video-ai-write-personality-toggle[aria-expanded="true"] .video-ai-write-personality-chevron { transform: rotate(180deg); }
.ugc-segment-scene-words-block { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: baseline; column-gap: 12px; }
.ugc-segment-scene-words-block > .ugc-segment-scene-words-label,
.ugc-segment-scene-words-block > .ugc-seg-dialogue-shell { grid-column: 1 / -1; }
#create-panel .ugc-segment-scene-words-block > .ugc-segment-scene-words-label { margin-bottom: 8px; font-size: 13.5px; font-weight: 700; color: var(--brand-ink); opacity: 1; }
.ugc-seg-dialogue-shell textarea.ugc-seg-dialogue-input { min-height: 104px; max-height: 240px; font-size: 15px; line-height: 1.7; }
.ugc-segment-scene-words-block > .ugc-seg-fill-hint { grid-column: 1; grid-row: 3; margin: 8px 0 0; }
.ugc-segment-scene-words-block > .ugc-seg-dialogue-count { grid-column: 2; grid-row: 3; margin: 8px 0 0 !important; font-size: 12.5px; color: var(--brand-muted); }
#ugc-add-video-btn { display: flex; align-items: center; justify-content: center; gap: 6px; width: 100%; height: 44px; margin-top: 4px; border: 1.5px dashed color-mix(in srgb, #7c3aed 35%, #d9dce6); border-radius: 12px; background: #fff; color: #6d28d9; font-size: 14px; font-weight: 700; box-shadow: none; }
#ugc-add-video-btn::before { content: ''; width: 16px; height: 16px; background: currentColor; -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round'><path d='M12 5v14M5 12h14'/></svg>") center / contain no-repeat; mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round'><path d='M12 5v14M5 12h14'/></svg>") center / contain no-repeat; }
#ugc-add-video-btn:hover:not(:disabled) { border-style: solid; background: #faf8ff; }
#ugc-add-video-btn:disabled { border-color: #e2e4ea; background: #fafafc; color: #9aa0ad; cursor: not-allowed; opacity: 1; }

/* Navigation weights: Tajawal has no 600 (it snaps to 700) and its 500 already reads heavy, so the
   chrome uses regular for items, medium for labels and state, and keeps bold for the brand name only. */
.sidebar .nav-item { font-size: 14px; font-weight: 400; color: #4b5563; }
.sidebar .nav-item:hover:not(.active) { color: #111827; }
.sidebar .nav-item.active { font-weight: 500; color: #4c1d95; }
.sidebar .nav-group-label,
.sidebar .nav-group-toggle { font-weight: 500; }
.sidebar .nav-new-chip { font-weight: 500; }
.sidebar-header .brand-title { font-weight: 700; }
.app-header .header-credits .credit-pill,
.app-header .header-credits .credit-pill * { font-weight: 500; }
.app-header .header-credits a,
.app-header .header-credits button { font-weight: 500; }
.app-header .user-chip,
.app-header .user-chip #user-welcome { font-weight: 500; }
.app-header .header-title { font-weight: 700; }

/* Create popup, first screen, desktop: a compact header and the categories as two rows of three,
   the Brand Plan card filling the sixth cell, so "Most used" stays close. Phones keep two columns. */
@media (min-width: 1024px) {
  .create-takeover-topbar { padding: 12px 28px 10px; }
  .create-takeover-heading h2 { font-size: 22px; letter-spacing: 0; }
  .create-takeover-heading p { margin-top: 2px; font-size: 13.5px; }
  .create-takeover-close { width: 36px; height: 36px; }
  .create-entry-layout { gap: 22px; margin-top: 0; }
  .create-category-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); grid-auto-rows: 1fr; gap: 16px; }
  .create-category-card { border-radius: 16px; }
  .ccc-art { padding: 8px 10px 0; }
  .ccc-art svg { aspect-ratio: 320 / 100; }
  .ccc-copy,
  html[dir="rtl"] .ccc-copy,
  [dir="rtl"] .ccc-copy,
  .rtl .ccc-copy { padding-block: 14px 18px; padding-inline: 18px 64px; }
  .ccc-go { bottom: 18px; inset-inline-end: 16px; inset-inline-start: auto; }
  .create-category-title { font-size: 18px; }
  .create-category-desc { font-size: 14px; line-height: 1.45; }
  /* The sixth cell: same size and corners as the cards, its own purple ground, the call to action at the foot. */
  .create-plan-promo {
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
    padding: 18px;
    border-radius: 16px;
    background: linear-gradient(160deg, #f5f0ff 0%, #faf8ff 60%);
  }
  .create-plan-promo:hover { transform: translateY(-3px); background: #f3edff; }
  .cpp-title { font-size: 18px; flex-wrap: wrap; gap: 8px; }
  .cpp-chip { font-size: 12px; }
  .cpp-desc { font-size: 14px; line-height: 1.45; }
  .cpp-cta { margin-top: auto; min-height: 34px; padding: 0 14px; border-radius: 999px; background: #7c3aed; color: #ffffff; }
  .create-plan-promo:hover .cpp-cta { background: #6d28d9; }
}

/* ─── Brand Strength (bs3) ──────────────────────────────────────────────────
   One scroll column: score panel, the two fastest wins as tiles, then a checklist.
   Each task opens in a sheet (centered on desktop, bottom sheet on phones).
   Adly purple for chrome; the user's brand colour never tints this surface. */
.brand-strength-modal.bs3 {
  --bs3-accent: #7c3aed;
  --bs3-accent-ink: #6d28d9;
  --bs3-accent-soft: #f3eefe;
  --bs3-ink: #15121f;
  --bs3-ink-2: #4b4760;
  --bs3-muted: #6b6880;
  --bs3-line: #ecebf3;
}
.brand-strength-modal.bs3 .modal-card {
  position: relative;
  width: min(720px, calc(100vw - 32px));
  max-width: 720px;
  max-height: calc(100dvh - 48px);
  padding: 0;
  border-radius: 24px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  background: #fff;
  box-shadow: 0 24px 64px rgba(15, 23, 42, 0.22);
}
.brand-strength-modal.bs3 .bs3-core {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 28px 32px 32px;
  background: #fff;
}
.brand-strength-modal.bs3 .bs3-close {
  position: absolute;
  top: 16px;
  inset-inline-end: 16px;
  z-index: 6;
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  padding: 0;
  border: 0;
  border-radius: 10px;
  background: #f3f3f8;
  color: var(--bs3-ink-2);
  cursor: pointer;
  transition: background-color 0.15s ease, color 0.15s ease;
}
.brand-strength-modal.bs3 .bs3-close:hover { background: #e9e8f1; color: var(--bs3-ink); }
.brand-strength-modal.bs3 .bs3-close:focus-visible { outline: 2px solid var(--bs3-accent); outline-offset: 2px; }
.brand-strength-modal.bs3 .bs3-close .icon { width: 18px; height: 18px; }
.brand-strength-modal.bs3:has(#bs-task-modal:not(.hidden)) .bs3-close-main { visibility: hidden; }

.brand-strength-modal.bs3 .bs3-head { padding-inline-end: 48px; }
.brand-strength-modal.bs3 .bs3-title {
  margin: 0;
  font-size: 24px;
  line-height: 1.25;
  font-weight: 700;
  color: var(--bs3-ink);
}
.brand-strength-modal.bs3 .bs3-sub {
  margin: 6px 0 0;
  max-width: 58ch;
  font-size: 14px;
  line-height: 1.6;
  color: var(--bs3-ink-2);
}

/* Score */
.brand-strength-modal.bs3 .bs3-score {
  margin: 24px 0 0;
  padding: 20px 24px;
  border-radius: 18px;
  background: #f6f3fe;
}
.brand-strength-modal.bs3 .bs3-score-row {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 12px;
}
.brand-strength-modal.bs3 .bs3-score-num {
  display: flex;
  align-items: baseline;
  gap: 4px;
  direction: ltr;
}
.brand-strength-modal.bs3 .bs3-score-value {
  font-size: 48px;
  line-height: 1;
  font-weight: 700;
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
  color: #1c1336;
}
.brand-strength-modal.bs3 .bs3-score-max {
  font-size: 16px;
  font-weight: 500;
  color: #6f6491;
}
.brand-strength-modal.bs3 .bs3-tier {
  display: inline-flex;
  align-items: center;
  min-height: 28px;
  padding: 0 12px;
  border-radius: 999px;
  background: #fff;
  border: 1px solid #e3d9fc;
  color: var(--bs3-accent-ink);
  font-size: 13px;
  font-weight: 500;
}
.brand-strength-modal.bs3 .bs3-segments { margin-top: 16px; gap: 4px; }
.brand-strength-modal.bs3 .bs3-segments .bs-seg { height: 8px; background: rgba(124, 58, 237, 0.14); }
.brand-strength-modal.bs3 .bs3-segments .bs-seg-fill { background: var(--bs3-accent); }
html[dir="rtl"] .brand-strength-modal.bs3 .bs3-segments .bs-seg-fill { transform-origin: right center; }
.brand-strength-modal.bs3 .bs3-remaining {
  margin-top: 10px;
  font-size: 13.5px;
  color: #5b4f7a;
}

/* Sections */
.brand-strength-modal.bs3 .bs3-section { margin-top: 32px; }
.brand-strength-modal.bs3 .bs3-section-title {
  margin: 0 0 12px;
  font-size: 15px;
  line-height: 1.4;
  font-weight: 500;
  color: var(--bs3-ink);
}

/* Fastest wins */
.brand-strength-modal.bs3 .bs3-quick-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}
.brand-strength-modal.bs3 .bs3-quick-grid.is-single { grid-template-columns: minmax(0, 1fr); }
.brand-strength-modal.bs3 .bs3-quick {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 6px;
  width: 100%;
  padding: 18px 20px;
  padding-inline-end: 48px;
  border: 1px solid #e6e1f5;
  border-radius: 16px;
  background: #fff;
  text-align: start;
  cursor: pointer;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
  transition: border-color 0.18s ease, box-shadow 0.18s ease, transform 0.18s ease;
}
.brand-strength-modal.bs3 .bs3-quick:hover {
  border-color: #cbb9f8;
  box-shadow: 0 8px 22px rgba(76, 29, 149, 0.08);
}
.brand-strength-modal.bs3 .bs3-quick:active { transform: translateY(1px); }
.brand-strength-modal.bs3 .bs3-quick:focus-visible { outline: 2px solid var(--bs3-accent); outline-offset: 2px; }
.brand-strength-modal.bs3 .bs3-quick-points {
  display: inline-flex;
  align-items: baseline;
  gap: 4px;
  color: var(--bs3-accent-ink);
}
.brand-strength-modal.bs3 .bs3-quick-points strong {
  font-size: 22px;
  line-height: 1.1;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}
.brand-strength-modal.bs3 .bs3-quick-points span { font-size: 13px; font-weight: 500; }
.brand-strength-modal.bs3 .bs3-quick-title {
  font-size: 16px;
  line-height: 1.4;
  font-weight: 500;
  color: var(--bs3-ink);
}
.brand-strength-modal.bs3 .bs3-quick-desc {
  font-size: 13.5px;
  line-height: 1.55;
  color: var(--bs3-ink-2);
}
.brand-strength-modal.bs3 .bs3-quick-go {
  position: absolute;
  top: 20px;
  inset-inline-end: 16px;
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  border-radius: 8px;
  background: var(--bs3-accent-soft);
  color: var(--bs3-accent-ink);
  transition: background-color 0.18s ease, color 0.18s ease;
}
.brand-strength-modal.bs3 .bs3-quick:hover .bs3-quick-go { background: var(--bs3-accent); color: #fff; }
.brand-strength-modal.bs3 .bs3-quick-go .icon { width: 16px; height: 16px; }

/* Checklist */
.brand-strength-modal.bs3 .bs3-list {
  display: flex;
  flex-direction: column;
  border: 1px solid var(--bs3-line);
  border-radius: 16px;
  overflow: hidden;
  background: #fff;
}
.brand-strength-modal.bs3 .bs3-task {
  display: grid;
  grid-template-columns: 22px minmax(0, 1fr) auto;
  align-items: start;
  gap: 14px;
  width: 100%;
  padding: 16px 18px;
  border: 0;
  border-bottom: 1px solid #f1f0f6;
  border-radius: 0;
  background: #fff;
  text-align: start;
  cursor: pointer;
  transition: background-color 0.15s ease;
}
.brand-strength-modal.bs3 .bs3-task:last-child { border-bottom: 0; }
.brand-strength-modal.bs3 .bs3-task:hover { background: #faf9fe; }
.brand-strength-modal.bs3 .bs3-task:focus-visible { outline: 2px solid var(--bs3-accent); outline-offset: -2px; }
.brand-strength-modal.bs3 .bs3-task-status {
  display: grid;
  place-items: center;
  width: 22px;
  height: 22px;
  margin-top: 1px;
  border-radius: 50%;
  border: 2px solid #d5d1e4;
  box-sizing: border-box;
  color: #fff;
}
.brand-strength-modal.bs3 .bs3-task.is-done .bs3-task-status { background: #16a34a; border-color: #16a34a; }
.brand-strength-modal.bs3 .bs3-task-status .icon { width: 12px; height: 12px; stroke-width: 3; }
.brand-strength-modal.bs3 .bs3-task-main {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}
.brand-strength-modal.bs3 .bs3-task-title {
  font-size: 15px;
  line-height: 1.45;
  font-weight: 500;
  color: var(--bs3-ink);
}
.brand-strength-modal.bs3 .bs3-task-desc {
  font-size: 13.5px;
  line-height: 1.55;
  color: var(--bs3-muted);
}
.brand-strength-modal.bs3 .bs3-task-preview {
  max-width: 100%;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  font-size: 13px;
  color: var(--bs3-muted);
  unicode-bidi: isolate;
}
.brand-strength-modal.bs3 .bs3-task.is-done .bs3-task-title { color: var(--bs3-muted); }
.brand-strength-modal.bs3 .bs3-task.is-done .bs3-task-desc { display: none; }
.brand-strength-modal.bs3 .bs3-task-side {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  align-self: center;
  color: #b4afc8;
}
.brand-strength-modal.bs3 .bs3-task-side .bs3-chevron { width: 16px; height: 16px; }
.brand-strength-modal.bs3 .bs3-task-points {
  min-width: 40px;
  padding: 3px 10px;
  border-radius: 999px;
  background: var(--bs3-accent-soft);
  color: var(--bs3-accent-ink);
  font-size: 13.5px;
  font-weight: 500;
  text-align: center;
  font-variant-numeric: tabular-nums;
  direction: ltr;
}
.brand-strength-modal.bs3 .bs3-task-done { font-size: 13px; font-weight: 500; color: #15803d; }
.brand-strength-modal.bs3 .bs3-empty { padding: 16px 18px; font-size: 14px; color: var(--bs3-muted); }

/* Credit rewards (Meta tasks) */
.brand-strength-modal.bs3 .bs3-reward.bs-v2-reward-summary {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-start;
  gap: 6px 8px;
  margin-top: 6px;
}
.brand-strength-modal.bs3 .bs3-reward-label.bs-v2-reward-label {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 12.5px;
  font-weight: 500;
  color: #b45309;
}
.brand-strength-modal.bs3 .bs3-reward-icon { width: 14px; height: 14px; }
.brand-strength-modal.bs3 .bs3-reward-credits.bs-v2-reward-credits {
  display: inline-flex;
  flex-wrap: wrap;
  justify-content: flex-start;
  gap: 6px;
}
.brand-strength-modal.bs3 .bs3-reward .bs-v2-reward-credit {
  min-height: 22px;
  padding: 0 8px;
  border: 0;
  border-radius: 999px;
  background: #ecfdf3;
  color: #047857;
  font-size: 12px;
  font-weight: 500;
  direction: ltr;
}

/* Task sheet */
.brand-strength-modal.bs3 .bs3-sheet { padding: 24px; }
.brand-strength-modal.bs3 .bs3-sheet .bs-task-modal-backdrop {
  background: rgba(21, 18, 31, 0.42);
  backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px);
}
.brand-strength-modal.bs3 .bs3-sheet-card {
  width: min(520px, 100%);
  max-height: calc(100% - 16px);
  padding: 28px;
  border: 0;
  border-radius: 20px;
  background: #fff;
  box-shadow: 0 24px 60px rgba(15, 23, 42, 0.24);
  animation: bs3-sheet-in 0.32s cubic-bezier(0.16, 1, 0.3, 1);
}
@keyframes bs3-sheet-in {
  from { opacity: 0; transform: translateY(12px) scale(0.985); }
  to { opacity: 1; transform: none; }
}
.brand-strength-modal.bs3 .bs3-sheet-card .brand-strength-editor,
.brand-strength-modal.bs3 .bs3-sheet-card .brand-strength-editor.brand-strength-editor-completed {
  padding: 0;
  border: 0;
  border-radius: 0;
  background: none;
}
.brand-strength-modal.bs3 .bs3-sheet-card .brand-strength-editor-head {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 10px;
  padding-inline-end: 44px;
}
.brand-strength-modal.bs3 .bs3-sheet-card .brand-strength-editor-title {
  margin: 0;
  padding-inline-end: 44px;
  font-size: 20px;
  line-height: 1.35;
  font-weight: 500;
  color: var(--bs3-ink);
}
.brand-strength-modal.bs3 .bs3-sheet-card .brand-strength-editor-head .brand-strength-editor-title { padding-inline-end: 0; }
.brand-strength-modal.bs3 .bs3-sheet-points {
  padding: 3px 10px;
  border-radius: 999px;
  background: var(--bs3-accent-soft);
  color: var(--bs3-accent-ink);
  font-size: 13.5px;
  font-weight: 500;
  direction: ltr;
}
.brand-strength-modal.bs3 .bs3-sheet-card .brand-strength-editor-sub {
  margin: 6px 0 20px;
  font-size: 14px;
  line-height: 1.6;
  color: var(--bs3-ink-2);
}
.brand-strength-modal.bs3 .bs3-sheet-card .brand-strength-editor-reward { margin: 0 0 20px; }
.brand-strength-modal.bs3 .bs3-sheet-card .brand-strength-editor > .button {
  width: 100%;
  min-height: 48px;
  border-radius: 12px;
  font-size: 15px;
  font-weight: 500;
}
.brand-strength-modal.bs3 .bs3-sheet-card .brand-strength-control {
  min-height: 48px;
  padding: 12px 14px;
  border: 1px solid #dcdbe6 !important;
  border-radius: 12px;
  font-size: 15px;
  line-height: 1.55;
}
.brand-strength-modal.bs3 .bs3-sheet-card .brand-strength-control:focus {
  border-color: var(--bs3-accent) !important;
  box-shadow: 0 0 0 3px rgba(124, 58, 237, 0.16) !important;
}
.brand-strength-modal.bs3 .bs3-sheet-card .brand-strength-save-hint {
  margin-top: 12px;
  font-size: 12.5px;
  color: var(--bs3-muted);
}
.brand-strength-modal.bs3 .bs3-sheet-card .bs-brand-assets-examples {
  margin: 0 0 20px;
  padding: 14px 16px;
  border: 0;
  border-radius: 14px;
  background: #f7f6fb;
}

/* Logo upload */
.brand-strength-modal.bs3 .brand-strength-logo-current {
  display: flex;
  align-items: center;
  gap: 14px;
  margin: 0 0 16px;
  padding: 12px 14px;
  border: 1px solid var(--bs3-line);
  border-radius: 14px;
  background: #fff;
}
.brand-strength-modal.bs3 .brand-strength-logo-current img {
  width: 52px;
  height: 52px;
  padding: 4px;
  object-fit: contain;
  border-radius: 12px;
  border: 1px solid var(--bs3-line);
  background: #f7f7fb;
  box-sizing: border-box;
}
.brand-strength-modal.bs3 .bs3-logo-current-text { flex: 1 1 auto; min-width: 0; }
.brand-strength-modal.bs3 .brand-strength-logo-current-title { font-size: 14px; font-weight: 500; color: var(--bs3-ink); }
.brand-strength-modal.bs3 .brand-strength-logo-current-sub { font-size: 13px; line-height: 1.5; color: var(--bs3-muted); }
.brand-strength-modal.bs3 .bs3-text-danger {
  flex-shrink: 0;
  padding: 8px 10px;
  border: 0;
  border-radius: 8px;
  background: none;
  color: #b42318;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
}
.brand-strength-modal.bs3 .bs3-text-danger:hover { background: #fef3f2; }
.brand-strength-modal.bs3 .bs3-text-danger:focus-visible { outline: 2px solid #b42318; outline-offset: 1px; }
.brand-strength-modal.bs3 #bs-logo-drop.bs3-drop {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  min-height: 0;
  margin: 0;
  padding: 28px 20px;
  border: 1.5px dashed #cdbff5;
  border-radius: 16px;
  background: #faf8ff;
  text-align: center;
  cursor: pointer;
  transition: border-color 0.15s ease, background-color 0.15s ease;
}
.brand-strength-modal.bs3 #bs-logo-drop.bs3-drop:hover,
.brand-strength-modal.bs3 #bs-logo-drop.bs3-drop.drag-over,
.brand-strength-modal.bs3 #bs-logo-drop.bs3-drop:focus-within {
  border-color: var(--bs3-accent);
  background: #f4effe;
}
.brand-strength-modal.bs3 .bs3-drop-icon {
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  margin-bottom: 8px;
  border-radius: 14px;
  border: 1px solid #ebe4fd;
  background: #fff;
  color: var(--bs3-accent);
  box-shadow: 0 1px 2px rgba(76, 29, 149, 0.08);
}
.brand-strength-modal.bs3 .bs3-drop-icon .icon { width: 22px; height: 22px; }
.brand-strength-modal.bs3 .bs3-drop .upload-box-title {
  max-width: 100%;
  overflow-wrap: anywhere;
  font-size: 15px;
  line-height: 1.45;
  font-weight: 500;
  color: var(--bs3-ink);
}
.brand-strength-modal.bs3 .bs3-drop .upload-box-subtitle { font-size: 13px; color: var(--bs3-muted); }
.brand-strength-modal.bs3 .bs3-file-status {
  margin-top: 10px;
  text-align: center;
  font-size: 13px;
  color: var(--bs3-accent-ink);
}
.brand-strength-modal.bs3 .bs3-file-status:empty { display: none; }

@media (max-width: 640px) {
  .brand-strength-modal.bs3 { padding: 0; align-items: flex-end; }
  .brand-strength-modal.bs3 .modal-card {
    width: 100%;
    max-width: 100%;
    max-height: calc(100dvh - 24px);
    border-radius: 20px 20px 0 0;
  }
  .brand-strength-modal.bs3 .bs3-core { padding: 20px 16px calc(24px + env(safe-area-inset-bottom)); }
  .brand-strength-modal.bs3 .bs3-close { top: 12px; inset-inline-end: 12px; }
  .brand-strength-modal.bs3 .bs3-title { font-size: 22px; }
  .brand-strength-modal.bs3 .bs3-score { margin-top: 20px; padding: 16px 18px; }
  .brand-strength-modal.bs3 .bs3-score-value { font-size: 40px; }
  .brand-strength-modal.bs3 .bs3-section { margin-top: 28px; }
  .brand-strength-modal.bs3 .bs3-quick-grid { grid-template-columns: minmax(0, 1fr); }
  .brand-strength-modal.bs3 .bs3-quick { padding: 16px; padding-inline-end: 48px; }
  .brand-strength-modal.bs3 .bs3-task { gap: 12px; padding: 14px; }
  .brand-strength-modal.bs3 .bs3-sheet { padding: 0; align-items: flex-end; }
  .brand-strength-modal.bs3 .bs3-sheet-card {
    width: 100%;
    max-height: 88%;
    padding: 24px 20px calc(20px + env(safe-area-inset-bottom));
    border-radius: 20px 20px 0 0;
    animation-name: bs3-sheet-up;
  }
  @keyframes bs3-sheet-up {
    from { transform: translateY(24px); opacity: 0.6; }
    to { transform: none; opacity: 1; }
  }
  .brand-strength-modal.bs3 .bs3-close-sheet { top: 16px; inset-inline-end: 16px; }
}
@media (prefers-reduced-motion: reduce) {
  .brand-strength-modal.bs3 .bs3-sheet-card { animation: none; }
  .brand-strength-modal.bs3 .bs3-quick,
  .brand-strength-modal.bs3 .bs3-quick-go { transition: none; }
}

/* ─── Swipe review (deck) ───────────────────────────────────────────────────
   A physical deck you drag: fanned cards behind, a nudge that demonstrates the
   gesture until the first swipe, Yes stamps on the right and No on the left (in
   every language), and round deck buttons that mirror the gesture. */
#swipe-modal {
  --swipe-accent: #7c3aed;
  --swipe-ink: #15121f;
  --swipe-ink-2: #4b4760;
  --swipe-muted: #6b6880;
}
#swipe-modal .swipe-modal-card {
  position: relative;
  display: flex;
  flex-direction: column;
  width: min(480px, calc(100vw - 16px));
  max-width: 480px;
  max-height: calc(100dvh - 16px);
  padding: 16px 20px 20px;
  border-radius: 24px;
  background: #fff;
  overflow: hidden;
}
#swipe-modal .swipe-topbar {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: 14px;
}
#swipe-modal .swipe-topbar .modal-close.swipe-close {
  position: static !important;
  inset: auto !important;
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 10px;
  background: #f3f3f8;
  color: var(--swipe-ink-2);
  box-shadow: none;
  cursor: pointer;
  transform: none;
}
#swipe-modal .swipe-topbar .swipe-close:hover { background: #e9e8f1; color: var(--swipe-ink); }
#swipe-modal .swipe-topbar .swipe-close:focus-visible { outline: 2px solid var(--swipe-accent); outline-offset: 2px; }
#swipe-modal .swipe-progress-row { display: flex; align-items: center; gap: 10px; min-width: 0; }
#swipe-modal .swipe-progress { flex: 1 1 auto; display: flex; gap: 4px; min-width: 0; }
#swipe-modal .swipe-progress > span {
  flex: 1 1 0;
  height: 4px;
  border-radius: 999px;
  background: #ebe8f3;
  transition: background-color 0.25s ease;
}
#swipe-modal .swipe-progress > span.is-done { background: #c9b8f8; }
#swipe-modal .swipe-progress > span.is-current { background: var(--swipe-accent); }
#swipe-modal .swipe-counter {
  flex-shrink: 0;
  margin: 0;
  font-size: 13px;
  font-weight: 500;
  color: var(--swipe-muted);
  font-variant-numeric: tabular-nums;
}

#swipe-modal .swipe-body {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 0;
  min-height: 0;
}
#swipe-modal .swipe-info-area {
  flex: none;
  display: block;
  margin: 16px 0 6px;
  text-align: center;
}
#swipe-modal .swipe-seed-reward-panel { display: none !important; }
#swipe-modal .swipe-standard-copy {
  display: block;
  margin: 0;
  padding: 0;
  border: 0;
}
#swipe-modal .swipe-question {
  margin: 0;
  font-size: 21px;
  line-height: 1.35;
  font-weight: 700;
  color: var(--swipe-ink);
}
#swipe-modal .swipe-hint {
  max-width: none;
  margin: 4px 0 0;
  font-size: 13.5px;
  line-height: 1.5;
  color: var(--swipe-muted);
}
#swipe-modal.swipe-modal--onboarding-seed .swipe-hint { display: none; }
#swipe-modal .swipe-onboarding-mobile-headline { display: none; margin: 0; padding: 0; }
#swipe-modal.swipe-modal--onboarding-seed .swipe-onboarding-mobile-headline { display: block; }
#swipe-modal .swipe-onboarding-reward-title,
#swipe-modal.swipe-modal--onboarding-seed .swipe-onboarding-mobile-headline .swipe-onboarding-reward-title--mobile-above-art {
  margin: 4px auto 0;
  max-width: 36ch;
  font-size: 14px;
  line-height: 1.55;
  font-weight: 400;
  color: var(--swipe-muted);
  text-align: center;
}

/* Deck */
#swipe-modal .swipe-image-area {
  flex: none;
  display: block;
  width: 100%;
  min-width: 0;
}
#swipe-modal .swipe-deck {
  position: relative;
  display: grid;
  justify-items: center;
  align-items: start;
  padding: 18px 0 22px;
}
#swipe-modal .swipe-deck > * { grid-area: 1 / 1; }
#swipe-modal .swipe-card-next {
  position: relative;
  max-width: 100%;
  border-radius: 18px;
  transform: translate(-16px, 10px) rotate(-6deg) scale(0.95);
  pointer-events: none;
  transition: opacity 0.3s ease, transform 0.3s ease;
}
#swipe-modal .swipe-card-next::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: 18px;
  background: #ece8f7;
  box-shadow: 0 10px 24px rgba(15, 23, 42, 0.1);
  transform: translate(26px, 6px) rotate(10deg);
}
#swipe-modal .swipe-card-next img {
  display: block;
  width: auto;
  max-width: 100%;
  max-height: max(220px, min(calc(100dvh - 400px), 520px));
  height: auto;
  border-radius: 18px;
  filter: brightness(0.92) saturate(0.8);
  box-shadow: 0 10px 24px rgba(15, 23, 42, 0.14);
}
#swipe-modal .swipe-card-next.is-empty img { opacity: 0; }
#swipe-modal .swipe-card-next.is-empty::before { opacity: 0.6; }
#swipe-modal .swipe-card-container {
  position: relative;
  z-index: 1;
  width: fit-content;
  max-width: 100%;
  margin: 0;
  border-radius: 18px;
  overflow: hidden;
  background: #f4f3f8;
  box-shadow: 0 2px 4px rgba(15, 23, 42, 0.08), 0 20px 44px rgba(15, 23, 42, 0.2);
  touch-action: pan-y;
  user-select: none;
  -webkit-user-select: none;
  cursor: grab;
  transition: transform 0.34s cubic-bezier(0.2, 0.8, 0.2, 1), opacity 0.28s ease;
  will-change: transform;
}
#swipe-modal .swipe-card-container.is-dragging { cursor: grabbing; }
#swipe-modal .swipe-card-image {
  display: block;
  width: auto;
  max-width: 100%;
  max-height: max(220px, min(calc(100dvh - 400px), 520px));
  height: auto;
  margin: 0;
  object-fit: contain;
  pointer-events: none;
  -webkit-user-drag: none;
}
#swipe-modal .swipe-card-container::after {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(rgba(124, 58, 237, calc(var(--swipe-yes, 0) * 0.24)), rgba(124, 58, 237, calc(var(--swipe-yes, 0) * 0.24))),
    linear-gradient(rgba(21, 18, 31, calc(var(--swipe-no, 0) * 0.32)), rgba(21, 18, 31, calc(var(--swipe-no, 0) * 0.32)));
}
#swipe-modal .swipe-stamp {
  position: absolute;
  top: 16px;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 16px;
  border-radius: 999px;
  font-size: 18px;
  font-weight: 700;
  line-height: 1;
  pointer-events: none;
  box-shadow: 0 8px 20px rgba(15, 23, 42, 0.22);
}
/* Yes travels right, so its stamp rides the trailing left edge; No mirrors it. */
#swipe-modal .swipe-stamp--yes {
  left: 16px;
  right: auto;
  background: var(--swipe-accent);
  color: #fff;
  opacity: var(--swipe-yes, 0);
  transform: rotate(-10deg) scale(calc(0.8 + var(--swipe-yes, 0) * 0.2));
}
#swipe-modal .swipe-stamp--no {
  right: 16px;
  left: auto;
  background: #fff;
  color: var(--swipe-ink);
  opacity: var(--swipe-no, 0);
  transform: rotate(10deg) scale(calc(0.8 + var(--swipe-no, 0) * 0.2));
}
#swipe-modal .swipe-card-container .swipe-personality-inline-tag:not(.hidden) {
  position: absolute;
  bottom: 12px;
  inset-inline-start: 12px;
  z-index: 2;
  margin: 0;
  padding: 5px 11px;
  border: 0;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.94);
  color: var(--swipe-ink-2);
  font-size: 12.5px;
  font-weight: 500;
  line-height: 1.3;
  box-shadow: 0 2px 8px rgba(15, 23, 42, 0.14);
  pointer-events: none;
  cursor: default;
}

/* The nudge: until the first swipe, the top card demonstrates the gesture every few seconds. */
@keyframes swipe-deck-nudge {
  0%, 40%, 100% { transform: none; }
  10% { transform: translateX(38px) rotate(6deg); }
  20% { transform: none; }
  30% { transform: translateX(-38px) rotate(-6deg); }
}
@keyframes swipe-deck-nudge-yes {
  0%, 4%, 17%, 100% { opacity: 0; }
  10% { opacity: 0.95; }
}
@keyframes swipe-deck-nudge-no {
  0%, 24%, 37%, 100% { opacity: 0; }
  30% { opacity: 0.95; }
}
#swipe-modal:not(.has-swiped) .swipe-card-container:not(.is-dragging):not(.is-leaving) {
  animation: swipe-deck-nudge 4.6s cubic-bezier(0.45, 0, 0.2, 1) 0.8s infinite;
}
#swipe-modal:not(.has-swiped) .swipe-card-container:not(.is-dragging):not(.is-leaving) .swipe-stamp--yes {
  animation: swipe-deck-nudge-yes 4.6s ease 0.8s infinite;
}
#swipe-modal:not(.has-swiped) .swipe-card-container:not(.is-dragging):not(.is-leaving) .swipe-stamp--no {
  animation: swipe-deck-nudge-no 4.6s ease 0.8s infinite;
}

/* Gesture hint: No on the left, Yes on the right, matching the buttons below. */
#swipe-modal .swipe-gesture-hint {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  margin: 0 0 16px;
  direction: ltr;
  transition: opacity 0.3s ease, visibility 0.3s ease;
}
#swipe-modal.has-swiped .swipe-gesture-hint { opacity: 0; visibility: hidden; }
#swipe-modal .swipe-gesture-side {
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  border-radius: 50%;
}
#swipe-modal .swipe-gesture-side--no { background: #f1f0f6; color: var(--swipe-ink-2); }
#swipe-modal .swipe-gesture-side--yes { background: #f1eafe; color: var(--swipe-accent); }
#swipe-modal .swipe-gesture-core {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 7px 14px;
  border-radius: 999px;
  background: var(--swipe-ink);
  color: #fff;
  font-size: 13.5px;
  font-weight: 500;
  line-height: 1;
}
#swipe-modal .swipe-gesture-core > span { unicode-bidi: plaintext; }
#swipe-modal .swipe-gesture-arrows { animation: swipe-gesture-arrows 1.4s ease-in-out infinite; }
@keyframes swipe-gesture-arrows {
  0%, 100% { transform: translateX(-3px); }
  50% { transform: translateX(3px); }
}

/* Deck buttons: No left, Back centre, Yes right in every language. */
#swipe-modal .swipe-actions,
#swipe-modal.swipe-modal--onboarding-seed .swipe-actions {
  display: flex;
  justify-content: center;
  align-items: flex-start;
  gap: 28px;
  width: 100%;
  margin: 0;
  padding: 0;
  direction: ltr;
}
#swipe-modal .swipe-actions .swipe-btn,
#swipe-modal .swipe-actions .swipe-back {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  min-height: 0;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: none;
  box-shadow: none;
  color: inherit;
  cursor: pointer;
  transform: none;
}
#swipe-modal .swipe-actions .swipe-btn:hover,
#swipe-modal .swipe-actions .swipe-back:hover { background: none; box-shadow: none; border: 0; }
#swipe-modal .swipe-btn-disc {
  display: grid;
  place-items: center;
  width: 64px;
  height: 64px;
  border-radius: 50%;
  transition: transform 0.15s ease, box-shadow 0.15s ease, background-color 0.15s ease;
}
#swipe-modal .swipe-btn--discard .swipe-btn-disc {
  background: #fff;
  border: 1.5px solid #e2e0ea;
  color: var(--swipe-ink);
  box-shadow: 0 6px 16px rgba(15, 23, 42, 0.08);
}
#swipe-modal .swipe-btn--save .swipe-btn-disc {
  background: var(--swipe-accent);
  color: #fff;
  box-shadow: 0 10px 24px rgba(124, 58, 237, 0.35);
}
#swipe-modal .swipe-back .swipe-btn-disc {
  width: 46px;
  height: 46px;
  margin-top: 9px;
  background: #fff;
  border: 1.5px solid #e2e0ea;
  color: var(--swipe-ink-2);
}
html[dir="rtl"] #swipe-modal .swipe-back svg { transform: scaleX(-1); }
#swipe-modal .swipe-actions button:hover:not(:disabled) .swipe-btn-disc { transform: translateY(-2px); }
#swipe-modal .swipe-btn--save:hover .swipe-btn-disc { background: #6d28d9; }
#swipe-modal .swipe-actions button:active:not(:disabled) .swipe-btn-disc { transform: scale(0.93); }
#swipe-modal .swipe-actions button:focus-visible { outline: none; }
#swipe-modal .swipe-actions button:focus-visible .swipe-btn-disc { outline: 2px solid var(--swipe-accent); outline-offset: 3px; }
#swipe-modal .swipe-back:disabled { opacity: 0.35; cursor: default; }
#swipe-modal .swipe-btn-label {
  font-size: 13.5px;
  font-weight: 500;
  line-height: 1.2;
  color: var(--swipe-ink-2);
  unicode-bidi: plaintext;
}
#swipe-modal .swipe-btn--save .swipe-btn-label { color: #6d28d9; }

@media (max-width: 700px) {
  #swipe-modal.modal { align-items: center; padding: 8px; }
  #swipe-modal .swipe-modal-card {
    width: min(480px, calc(100vw - 16px));
    max-height: calc(100dvh - 16px);
    padding: 14px 16px max(16px, calc(12px + env(safe-area-inset-bottom)));
    border-radius: 22px;
    overflow: hidden;
  }
  #swipe-modal .swipe-info-area { margin: 14px 0 4px; }
  #swipe-modal .swipe-question { font-size: 19px; }
  #swipe-modal .swipe-deck { padding: 14px 0 20px; }
  #swipe-modal .swipe-card-image,
  #swipe-modal .swipe-card-next img { max-height: max(220px, min(calc(100dvh - 390px), 460px)); }
  #swipe-modal .swipe-stamp { top: 12px; font-size: 16px; padding: 7px 13px; }
  #swipe-modal .swipe-actions { gap: 24px; }
  #swipe-modal .swipe-btn-disc { width: 60px; height: 60px; }
  #swipe-modal .swipe-back .swipe-btn-disc { width: 44px; height: 44px; margin-top: 8px; }
}
@media (prefers-reduced-motion: reduce) {
  #swipe-modal .swipe-card-container { transition: opacity 0.2s ease; }
  #swipe-modal:not(.has-swiped) .swipe-card-container:not(.is-dragging):not(.is-leaving),
  #swipe-modal:not(.has-swiped) .swipe-card-container .swipe-stamp,
  #swipe-modal .swipe-gesture-arrows { animation: none !important; }
}

/* ─── Swipe summary (after the deck) ─────────────────────────────────────────
   Same family as the deck: one column, an even grid of what was kept, a single
   "saved to your library" line instead of a badge on every tile, one action. */
#swipe-summary-modal .swipe-summary-card {
  position: relative;
  display: flex;
  flex-direction: column;
  width: min(560px, calc(100vw - 16px));
  max-width: 560px;
  max-height: calc(100dvh - 16px);
  padding: 28px 24px 22px;
  border-radius: 24px;
  background: #fff;
  text-align: center;
  overflow: hidden;
}
#swipe-summary-modal .swipe-summary-x {
  position: absolute !important;
  top: 16px !important;
  bottom: auto !important;
  z-index: 3;
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 10px;
  background: #f3f3f8;
  color: #4b4760;
  box-shadow: none;
  cursor: pointer;
}
html[dir="rtl"] #swipe-summary-modal .swipe-summary-x { right: 16px !important; left: auto !important; }
html:not([dir="rtl"]) #swipe-summary-modal .swipe-summary-x { left: auto !important; right: 16px !important; }
#swipe-summary-modal .swipe-summary-x:hover { background: #e9e8f1; color: #15121f; }
#swipe-summary-modal .swipe-summary-x:focus-visible { outline: 2px solid #7c3aed; outline-offset: 2px; }
#swipe-summary-modal .swipe-summary-header { gap: 0; margin: 0 0 20px; padding: 0 40px; }
#swipe-summary-modal .swipe-summary-mark {
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  margin-bottom: 14px;
  border-radius: 50%;
  background: #dcfce7;
  color: #15803d;
  animation: swipe-summary-pop 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) both;
}
@keyframes swipe-summary-pop {
  from { transform: scale(0.6); opacity: 0; }
  to { transform: none; opacity: 1; }
}
#swipe-summary-modal .swipe-summary-title {
  margin: 0;
  font-size: 22px;
  line-height: 1.35;
  font-weight: 700;
  color: #15121f;
}
#swipe-summary-modal .swipe-summary-subtitle {
  margin: 6px 0 0;
  font-size: 15px;
  line-height: 1.55;
  color: #4b4760;
}
#swipe-summary-modal .swipe-summary-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  margin: 0;
  padding: 4px;
  overflow-y: auto;
  overscroll-behavior: contain;
  min-height: 0;
  flex: 0 1 auto;
}
#swipe-summary-modal .swipe-summary-grid[data-count="1"] { grid-template-columns: minmax(0, 220px); justify-content: center; }
#swipe-summary-modal .swipe-summary-grid[data-count="2"] { grid-template-columns: repeat(2, minmax(0, 200px)); justify-content: center; }
#swipe-summary-modal .swipe-summary-grid[data-count="4"] { grid-template-columns: repeat(2, minmax(0, 170px)); justify-content: center; }
#swipe-summary-modal .swipe-summary-grid:empty { display: none; }
#swipe-summary-modal .swipe-summary-item {
  display: block;
  width: 100%;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 14px;
  overflow: hidden;
  background: #f4f3f8;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.06), 0 6px 16px rgba(15, 23, 42, 0.1);
  cursor: zoom-in;
  transition: transform 0.18s ease, box-shadow 0.18s ease;
}
#swipe-summary-modal .swipe-summary-item:hover { transform: translateY(-2px); box-shadow: 0 2px 4px rgba(15, 23, 42, 0.08), 0 12px 24px rgba(15, 23, 42, 0.14); }
#swipe-summary-modal .swipe-summary-item:focus-visible { outline: 2px solid #7c3aed; outline-offset: 2px; }
#swipe-summary-modal .swipe-item-image-wrap { aspect-ratio: 4 / 5; }
#swipe-summary-modal .swipe-item-image-wrap img { width: 100%; height: 100%; object-fit: cover; }
#swipe-summary-modal .swipe-item-saved-badge { display: none; }
#swipe-summary-modal .swipe-summary-saved-note {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  margin: 16px 0 0;
  font-size: 13.5px;
  font-weight: 500;
  color: #15803d;
}
#swipe-summary-modal .swipe-summary-saved-note[hidden] { display: none; }
#swipe-summary-modal .swipe-summary-card .modal-actions {
  position: static;
  display: block;
  margin: 18px 0 0;
  padding: 0;
  background: none;
}
#swipe-summary-modal #swipe-summary-done {
  width: 100%;
  min-width: 0;
  min-height: 52px;
  border-radius: 14px;
  font-size: 16px;
  font-weight: 500;
}
@media (max-width: 700px) {
  #swipe-summary-modal.modal { align-items: center; padding: 8px; }
  #swipe-summary-modal .swipe-summary-card { padding: 22px 16px max(16px, calc(12px + env(safe-area-inset-bottom))); border-radius: 22px; }
  #swipe-summary-modal .swipe-summary-x { top: 12px !important; }
  html[dir="rtl"] #swipe-summary-modal .swipe-summary-x { right: 12px !important; }
  html:not([dir="rtl"]) #swipe-summary-modal .swipe-summary-x { right: 12px !important; }
  #swipe-summary-modal .swipe-summary-header { margin-bottom: 16px; }
  #swipe-summary-modal .swipe-summary-title { font-size: 20px; }
  #swipe-summary-modal .swipe-summary-grid { gap: 8px; }
}
@media (prefers-reduced-motion: reduce) {
  #swipe-summary-modal .swipe-summary-mark { animation: none; }
}

/* Phones, app home: the brand name, its edit pencil and the two main buttons never drop to a new row.
   The name takes the free space (two lines at most), the pencil stays beside it, and "Create" and "Autopilot"
   are two equal halves. */
@media (max-width: 600px) {
  body.app-page .app-jobs-page-title .jobs-title { display: flex; flex-wrap: nowrap; align-items: center; gap: 8px; width: 100%; min-width: 0; }
  body.app-page .app-jobs-page-title .jobs-title > span:nth-child(2) {
    flex: 0 1 auto; min-width: 0; font-size: 20px; line-height: 1.3;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
  }
  body.app-page .app-jobs-page-title .jobs-title-logo { flex: none; }
  body.app-page .app-jobs-page-title .brand-edit-inline { flex: none; width: 32px; height: 32px; min-height: 0; padding: 0; }
  body.app-page .app-jobs-cta-row { flex-wrap: nowrap; gap: 8px; }
  body.app-page .app-jobs-cta-row > .button {
    flex: 1 1 0; min-width: 0; min-height: 44px; padding: 0 10px; font-size: 14px; justify-content: center; gap: 6px;
  }
  body.app-page .app-jobs-cta-row .adly-chat-open-experimental { display: none; }
  body.app-page .app-jobs-cta-row .adly-chat-open-avatar { width: 22px; height: 22px; flex: none; }
}

/* The mobile menu has no extra close button: tap outside it or use the menu button. */
.sidebar-close,
.sidebar-header .sidebar-close {
  display: none !important;
}

/* Super mode: on by default and recommended. A status row with a quiet "Turn off" link; turning it off
   turns the row amber with what they lose and a clear way back. The row itself is not a switch. */
.super-mode-field .super-mode-power {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  opacity: 0;
  pointer-events: none;
}
.super-mode-field,
.super-mode-field .super-mode-toggle,
.super-mode-field.is-locked,
.super-mode-field.is-locked .super-mode-toggle { cursor: default; }
.super-mode-field .super-mode-toggle,
.super-mode-field.is-selected .super-mode-toggle {
  gap: 12px;
  padding: 10px 12px;
  border: 1px solid #ebe3ff;
  border-radius: 14px;
  background: #faf7ff;
  box-shadow: none;
  transition: background-color 0.2s ease, border-color 0.2s ease;
}
.super-mode-field .super-mode-toggle:hover,
.super-mode-field.is-selected .super-mode-toggle:hover {
  border-color: #ebe3ff;
  box-shadow: none;
  transform: none;
}
.super-mode-field .super-mode-copy { padding-inline-start: 36px; }
.super-mode-field .super-mode-copy::before,
.super-mode-field.is-selected .super-mode-copy::before {
  content: '';
  width: 26px;
  height: 26px;
  border-radius: 8px;
  background: #7c3aed url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23fff' d='M13.2 2.5 4.8 13.4h6l-1 8.1 8.4-10.9h-6z'/%3E%3C/svg%3E") center / 14px 14px no-repeat;
  box-shadow: none;
  filter: none;
  transition: background-color 0.2s ease;
}
.super-mode-field .super-mode-title-row { font-weight: 700; letter-spacing: 0; }
.super-mode-field .super-mode-title-row { gap: 6px; }
.super-mode-field .super-mode-help,
[dir="rtl"] .super-mode-field .super-mode-help { margin: 0; }
/* The font's "?" sits off-centre in its circle: draw it instead, dead centre (the button keeps its accessible name). */
.super-mode-field .super-mode-title-row .super-mode-help {
  color: transparent;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none'%3E%3Cpath d='M9 9.2a3.1 3.1 0 0 1 6 .9c0 2.1-3 2.6-3 4.6' stroke='%237c3aed' stroke-width='2.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3Ccircle cx='12' cy='18.6' r='1.6' fill='%237c3aed'/%3E%3C/svg%3E");
  background-position: center;
  background-size: 13px 13px;
  background-repeat: no-repeat;
}
.super-mode-field .super-mode-short { font-size: 12.5px; color: #5b6474; }
.super-mode-state {
  display: flex;
  flex: none;
  align-items: center;
  gap: 10px;
}
.super-mode-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 26px;
  padding: 0 10px;
  border: 1px solid #e4dcfb;
  border-radius: 999px;
  background: #fff;
  color: #5b21b6;
  font-size: 12px;
  font-weight: 500;
  line-height: 1;
  white-space: nowrap;
}
.super-mode-chip::before {
  content: '';
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #16a34a;
}
.super-mode-off-btn {
  padding: 6px 2px;
  border: 0;
  background: none;
  color: #8a8fa0;
  font: inherit;
  font-size: 12px;
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
  white-space: nowrap;
}
.super-mode-off-btn:hover { color: #4b5563; }
.super-mode-on-btn {
  display: none;
  align-items: center;
  height: 34px;
  padding: 0 14px;
  border: 0;
  border-radius: 999px;
  background: #7c3aed;
  color: #fff;
  font: inherit;
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  white-space: nowrap;
  box-shadow: 0 4px 12px rgba(124, 58, 237, 0.25);
}
.super-mode-on-btn:hover { background: #6d28d9; }
.super-mode-off-btn:focus-visible,
.super-mode-on-btn:focus-visible { outline: 2px solid #7c3aed; outline-offset: 2px; border-radius: 999px; }
.super-mode-field.is-locked .super-mode-off-btn,
.super-mode-field.is-disabled .super-mode-state { display: none; }
/* Off: amber row, grey icon, the warning in place of the description, and the way back. */
.super-mode-field.is-off .super-mode-toggle,
.super-mode-field.is-off .super-mode-toggle:hover {
  border-color: #f8d4a8;
  background: #fff8f0;
}
.super-mode-field.is-off .super-mode-copy::before { background-color: #b0aac0; }
.super-mode-field.is-off .super-mode-short { color: #9a3412; }
.super-mode-field.is-off .super-mode-chip,
.super-mode-field.is-off .super-mode-off-btn { display: none; }
.super-mode-field.is-off .super-mode-on-btn { display: inline-flex; }
@media (max-width: 520px) {
  .super-mode-field .super-mode-toggle { flex-wrap: wrap; row-gap: 8px; }
  .super-mode-field .super-mode-state { width: 100%; padding-inline-start: 36px; }
}

/* Scene Studio: the honest timeline.
   One purple decision band says how much of the ad exists; scenes that are not made yet
   are striped gaps on the timeline; the export button says what it will export. */
.vte-progress-band {
  --band-ink: #2e1065;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-areas: "copy cta" "meter meter" "note note";
  gap: 10px 20px;
  align-items: center;
  padding: 16px 18px;
  border-radius: 16px;
  background: #7c3aed;
  color: #fff;
  box-shadow: 0 10px 24px -14px rgba(46, 16, 101, 0.55);
}
.vte-band-copy { grid-area: copy; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.vte-band-title { margin: 0; font-size: 18px; font-weight: 700; line-height: 1.3; text-wrap: balance; }
.vte-band-sub { margin: 0; font-size: 14px; font-weight: 400; line-height: 1.5; color: #ede4ff; font-variant-numeric: tabular-nums; }
.vte-band-meter { grid-area: meter; list-style: none; margin: 0; padding: 0; display: flex; gap: 4px; height: 8px; }
.vte-band-meter li { border-radius: 999px; min-width: 10px; background: rgba(255, 255, 255, 0.24); }
.vte-band-meter li.is-made { background: #fff; }
.vte-band-meter li.is-failed { background: #fecaca; }
.vte-band-meter li.is-unmade {
  background: repeating-linear-gradient(-45deg, rgba(255, 255, 255, 0.45) 0 3px, rgba(255, 255, 255, 0.12) 3px 7px);
}
.vte-band-meter li.is-making { position: relative; overflow: hidden; background: rgba(255, 255, 255, 0.5); }
.vte-band-meter li.is-making::after {
  content: '';
  position: absolute;
  inset: 0;
  width: 40%;
  background: #fff;
  border-radius: inherit;
  animation: vte-band-sheen 1.6s cubic-bezier(0.16, 1, 0.3, 1) infinite;
}
@keyframes vte-band-sheen {
  from { transform: translateX(-110%); }
  to { transform: translateX(260%); }
}
[dir="rtl"] .vte-band-meter li.is-making::after { animation-name: vte-band-sheen-rtl; }
@keyframes vte-band-sheen-rtl {
  from { transform: translateX(110%); }
  to { transform: translateX(-260%); }
}
.vte-band-actions { grid-area: cta; display: flex; align-items: center; gap: 12px; }
.vte-band-btn {
  appearance: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 46px;
  padding: 10px 22px;
  border: 0;
  border-radius: 12px;
  background: #fff;
  color: var(--band-ink);
  font: inherit;
  font-size: 16px;
  font-weight: 700;
  cursor: pointer;
  box-shadow: 0 6px 16px -8px rgba(46, 16, 101, 0.6);
  transition: background-color 0.18s cubic-bezier(0.16, 1, 0.3, 1), color 0.18s cubic-bezier(0.16, 1, 0.3, 1), transform 0.18s cubic-bezier(0.16, 1, 0.3, 1);
}
.vte-band-btn:hover { background: var(--band-ink); color: #fff; }
.vte-band-btn:active { transform: translateY(1px); }
.vte-band-btn:focus-visible { outline: 3px solid #fff; outline-offset: 3px; }
.vte-band-btn[disabled] { opacity: 0.6; cursor: progress; }
.vte-band-btn .button-credit-badge { background: #f3edff; color: var(--band-ink); }
.vte-band-btn:hover .button-credit-badge { background: rgba(255, 255, 255, 0.18); color: #fff; }
.vte-band-btn.is-quiet {
  min-height: 38px;
  padding: 7px 14px;
  background: rgba(46, 16, 101, 0.35);
  color: #fff;
  box-shadow: none;
  font-size: 14px;
}
.vte-band-btn.is-quiet:hover { background: var(--band-ink); }
.vte-band-note { grid-area: note; margin: 0; font-size: 14px; line-height: 1.5; color: #ede4ff; max-width: 72ch; }
.vte-band-elapsed { margin: 0; display: inline-flex; align-items: center; gap: 8px; font-size: 14px; font-weight: 500; font-variant-numeric: tabular-nums; }
.vte-band-live { width: 8px; height: 8px; border-radius: 50%; background: #fff; animation: vte-band-live 1.3s ease-in-out infinite alternate; }
@keyframes vte-band-live { from { opacity: 1; } to { opacity: 0.25; } }
.vte-progress-band.is-failed { background: #fee9e8; color: #7a1a12; box-shadow: none; }
.vte-progress-band.is-failed .vte-band-sub { color: #7a1a12; }
.vte-progress-band.is-failed .vte-band-title { color: #b42318; }
.vte-progress-band.is-failed .vte-band-meter li { background: rgba(180, 35, 24, 0.16); }
.vte-progress-band.is-failed .vte-band-meter li.is-made { background: #7c3aed; }
.vte-progress-band.is-failed .vte-band-btn { background: #7c3aed; color: #fff; }
.vte-progress-band.is-failed .vte-band-btn:hover { background: #5b21b6; }
.vte-progress-band.is-complete { background: #f3edff; color: #2e1065; box-shadow: none; padding: 14px 20px; }
.vte-progress-band.is-complete .vte-band-sub { color: #4c3a75; }
.vte-progress-band.is-complete .vte-band-meter li.is-made { background: #7c3aed; }

/* Scenes that are not made yet: a striped gap holding the planned line. */
.vte-clip.is-unmade {
  min-width: max(60px, calc(var(--vte-dur, 10) * 15px)) !important;
  background-color: #f3edff;
  background-image: repeating-linear-gradient(-45deg, #e6dbff 0 6px, #f3edff 6px 13px) !important;
  color: #2e1065;
  box-shadow: inset 0 0 0 1.5px #c4b5fd;
  cursor: pointer;
}
.vte-clip.is-unmade::before { content: none; }
.vte-clip.is-unmade .vte-clip-meta { display: none; }
.vte-clip.is-unmade .vte-trim-handle { display: none; }
.vte-clip.is-unmade .vte-clip-delete { background: rgba(46, 16, 101, 0.12); color: #2e1065; }
.vte-clip-plan {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
  width: 100%;
  padding: 8px 10px;
  text-align: start;
}
.vte-clip-plan-num { font-size: 12px; font-weight: 700; }
.vte-clip-plan-line {
  font-size: 12px;
  font-weight: 400;
  line-height: 1.35;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.vte-clip-plan-state { margin-top: auto; font-size: 12px; font-weight: 500; color: #5b21b6; font-variant-numeric: tabular-nums; }
.vte-clip.is-unmade.status-generating {
  background-image: none !important;
  background-color: #7c3aed;
  color: #fff;
  outline: 0;
  box-shadow: inset 0 0 0 1.5px #5b21b6;
  animation: none;
}
.vte-clip.is-unmade.status-generating .vte-clip-plan-state { color: #ede4ff; }
.vte-clip.is-unmade.status-failed {
  background-image: repeating-linear-gradient(-45deg, #fdd8d4 0 6px, #fee9e8 6px 13px) !important;
  box-shadow: inset 0 0 0 1.5px #f3a59d;
  color: #7a1a12;
}
.vte-clip.is-unmade.status-failed .vte-clip-plan-state { color: #b42318; }
.vte-clip.is-unmade.is-selected { outline: 3px solid #7c3aed; outline-offset: -3px; }

/* The moment a gap fills in: the new frame wipes in from the reading-start edge. */
.vte-clip.just-made { animation: vte-fill-in 0.9s cubic-bezier(0.16, 1, 0.3, 1) both; }
@keyframes vte-fill-in { from { clip-path: inset(0 100% 0 0 round 10px); } to { clip-path: inset(0 0 0 0 round 10px); } }
[dir="rtl"] .vte-clip.just-made { animation-name: vte-fill-in-rtl; }
@keyframes vte-fill-in-rtl { from { clip-path: inset(0 0 0 100% round 10px); } to { clip-path: inset(0 0 0 0 round 10px); } }

/* Export while the ad is partial: still possible, never the loudest thing on screen. */
.vte-footer #vte-btn-export.is-partial {
  background: #fff;
  color: #2e1065;
  border: 1px solid #cfd3e0;
  box-shadow: none;
}
.vte-footer #vte-btn-export.is-partial:hover:not([disabled]) { border-color: #7c3aed; color: #5b21b6; }
.vte-footer #vte-btn-export.is-partial[disabled] { opacity: 0.6; cursor: not-allowed; }

@media (max-width: 760px) {
  .vte-progress-band { grid-template-columns: 1fr; grid-template-areas: "copy" "meter" "cta" "note"; padding: 16px; }
  .vte-band-actions { flex-direction: column; align-items: stretch; }
  .vte-band-btn { width: 100%; }
  .vte-clip.is-unmade .vte-clip-plan-state { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .vte-clip-plan { padding: 6px 7px; }
  .vte-clip-plan-line { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .vte-band-meter li.is-making::after, .vte-band-live, .vte-clip.just-made { animation: none; }
}

/* Job card: a Scene Studio job says how much of the ad exists. */
.video-scenes-card-status {
  margin: 0 0 10px;
  padding: 9px 12px;
  border-radius: 10px;
  background: #f3edff;
  border: 1px solid #dccbff;
  color: #2e1065;
  font-size: 14px;
  font-weight: 500;
  line-height: 1.45;
  font-variant-numeric: tabular-nums;
}
.video-scenes-card-status.is-making { background: #7c3aed; border-color: #7c3aed; color: #fff; }

/* Review fixes: one-row band on desktop, sheen on the making scene, phone keeps the timeline in view. */
.vte-sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.vte-clip.is-unmade .vte-clip-gen-badge { display: none; }
.vte-clip.is-unmade .vte-clip-shimmer {
  position: absolute;
  inset: 0 auto 0 0;
  width: 38%;
  background: rgba(255, 255, 255, 0.22);
  border-radius: inherit;
  animation: vte-band-sheen 1.8s cubic-bezier(0.16, 1, 0.3, 1) infinite;
}
[dir="rtl"] .vte-clip.is-unmade .vte-clip-shimmer { inset: 0 0 0 auto; animation-name: vte-band-sheen-rtl; }
.vte-progress-band.is-complete .vte-band-meter { display: none; }
.vte-progress-band.is-complete .vte-band-copy { flex-direction: row; flex-wrap: wrap; align-items: baseline; gap: 4px 12px; }
.vte-progress-band.is-complete { padding: 10px 16px; }
.vte-progress-band.is-complete .vte-band-title { font-size: 16px; }
@media (min-width: 1024px) {
  .vte-progress-band {
    grid-template-columns: auto minmax(80px, 1fr) auto;
    grid-template-areas: "copy meter cta" "note note note";
    gap: 6px 18px;
    padding: 12px 16px;
  }
  .vte-band-note { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: none; }
  .vte-band-btn { min-height: 42px; padding: 8px 18px; }
  .vte-progress-band.is-complete { grid-template-columns: 1fr; grid-template-areas: "copy"; }
  .vte-modal.vte-ad-unfinished .vte-stage { max-height: min(40vh, 340px); }
}
@media (max-width: 1023px) {
  .vte-editor.is-ad-unfinished > .vte-preview-row { position: static; box-shadow: none; padding-bottom: 0; }
  .vte-modal.vte-ad-unfinished .vte-stage { max-height: min(22vh, 170px); }
  .vte-modal.vte-ad-unfinished #vte-desktop-recommend-notice { display: none !important; }
}
/* The phone notice: no side stripe, no label; one plain sentence. */
.vte-desktop-recommend-notice { border-inline-start-width: 1px; border-inline-start-color: #cbd5e1; }
.vte-desktop-recommend-kicker { display: none; }

/* Job card: the same scene meter, and Finish my ad leads while the ad is unfinished. */
.video-scenes-card-progress { display: flex; flex-direction: column; gap: 8px; margin: 0 0 12px; }
.video-scenes-card-progress .video-scenes-card-status { margin: 0; padding: 0; background: none; border: 0; color: #2e1065; font-size: 14px; font-weight: 500; }
.video-scenes-card-progress.is-making .video-scenes-card-status { background: none; color: #5b21b6; }
.video-scenes-card-meter { list-style: none; margin: 0; padding: 0; display: flex; gap: 4px; height: 8px; }
.video-scenes-card-meter li { border-radius: 999px; min-width: 10px; background: #e6dbff; }
.video-scenes-card-meter li.is-made { background: #7c3aed; }
.video-scenes-card-meter li.is-unmade { background: repeating-linear-gradient(-45deg, #dccbff 0 3px, #f3edff 3px 7px); }
.video-scenes-card-meter li.is-making { background: #a78bfa; }
.video-scenes-preview-wrap[data-partial="1"] .video-scenes-preview-actions { display: flex; align-self: stretch; width: 100%; }
.video-scenes-preview-wrap[data-partial="1"] #open-video-scenes-modal { width: 100%; min-height: 46px; font-size: 16px; justify-content: center; }
body:has(.video-scenes-preview-wrap[data-partial="1"]) #approve-design,
body:has(.video-scenes-preview-wrap[data-partial="1"]) #republish-now {
  background: #fff;
  color: #2e1065;
  border: 1px solid #cfd3e0;
  box-shadow: none;
}
@media (max-width: 1023px) {
  .vte-editor.is-ad-unfinished .vte-preview-join-hint { display: none; }
  .vte-editor.is-ad-unfinished .vte-progress-band { padding: 14px 16px; gap: 10px; }
}
@media (min-width: 1024px) {
  .vte-progress-band .vte-band-title, .vte-band-btn, .vte-band-elapsed { white-space: nowrap; }
  .vte-progress-band.is-making, .vte-progress-band.is-failed {
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas: "copy cta" "meter meter" "note note";
    row-gap: 10px;
  }
  .vte-progress-band.is-making .vte-band-actions { flex-direction: column; align-items: flex-end; gap: 4px; }
  .vte-progress-band.is-making .vte-band-elapsed { order: 2; font-size: 12px; }
}

/* While the ad is unfinished, every scene gets the same width per second, made or not, so the made scene stays readable. */
.vte-editor.is-ad-unfinished .vte-clip { min-width: max(60px, calc(var(--vte-dur, 10) * 15px)) !important; }
@media (min-width: 1024px) {
  .vte-band-note { white-space: normal; overflow: visible; text-overflow: clip; }
}
@media (max-width: 760px) {
  .vte-editor.is-ad-unfinished .vte-clip { min-width: max(96px, calc(var(--vte-dur, 10) * 9.6px)) !important; }
  .vte-progress-band.is-complete { gap: 0; padding: 12px 16px; grid-template-areas: "copy"; }
}

/* Hide the band per video: a close button on the full band, and a one-line folded band that opens it again. */
.vte-progress-band { position: relative; padding-inline-end: 56px; }
.vte-band-close {
  position: absolute;
  inset-block-start: 10px;
  inset-inline-end: 10px;
  width: 36px;
  height: 36px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: 0;
  border-radius: 10px;
  background: transparent;
  color: #ede4ff;
  cursor: pointer;
  transition: background-color 0.15s ease, color 0.15s ease;
}
.vte-band-close::before { content: ""; position: absolute; inset: -4px; }
.vte-band-close:hover { background: rgba(255, 255, 255, 0.16); color: #fff; }
.vte-band-close:focus-visible { outline: 2px solid #fff; outline-offset: 1px; }
.vte-progress-band.is-complete .vte-band-close,
.vte-progress-band.is-failed .vte-band-close { color: #5b21b6; inset-block-start: 50%; transform: translateY(-50%); }
.vte-progress-band.is-failed .vte-band-close { color: #b42318; inset-block-start: 10px; transform: none; }
.vte-progress-band.is-complete .vte-band-close:hover,
.vte-progress-band.is-failed .vte-band-close:hover { background: rgba(124, 58, 237, 0.12); }
.vte-progress-band.is-complete .vte-band-close:focus-visible,
.vte-progress-band.is-failed .vte-band-close:focus-visible { outline-color: #7c3aed; }

.vte-progress-band.is-folded {
  display: block;
  padding: 0;
  background: #f3edff;
  color: #2e1065;
  border: 1px solid #e6dbff;
  box-shadow: none;
  border-radius: 12px;
}
.vte-progress-band.is-folded.is-failed { background: #fee9e8; border-color: #f9c9c4; }
.vte-band-unfold {
  width: 100%;
  min-height: 44px;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 8px 16px;
  border: 0;
  border-radius: inherit;
  background: transparent;
  color: inherit;
  font: inherit;
  text-align: start;
  cursor: pointer;
  transition: background-color 0.15s ease;
}
.vte-band-unfold:hover { background: #ede4ff; }
.vte-progress-band.is-folded.is-failed .vte-band-unfold:hover { background: #fddcd8; }
.vte-band-unfold:focus-visible { outline: 2px solid #7c3aed; outline-offset: -2px; }
.vte-band-unfold-title { font-size: 14px; font-weight: 500; white-space: nowrap; }
.vte-progress-band.is-folded.is-failed .vte-band-unfold-title { color: #b42318; }
.vte-band-unfold-sub { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 14px; color: #5b21b6; font-variant-numeric: tabular-nums; }
.vte-progress-band.is-folded .vte-band-meter { flex: 0 0 72px; height: 6px; margin-inline-start: auto; }
.vte-progress-band.is-folded .vte-band-meter li { background: #e6dbff; }
.vte-progress-band.is-folded .vte-band-meter li.is-made { background: #7c3aed; }
.vte-progress-band.is-folded .vte-band-meter li.is-making { background: #a78bfa; }
.vte-progress-band.is-folded .vte-band-live { background: #7c3aed; flex: none; }
.vte-band-unfold-cta { display: inline-flex; align-items: center; gap: 4px; margin-inline-start: auto; font-size: 14px; font-weight: 500; color: #6d28d9; white-space: nowrap; }
.vte-progress-band.is-folded .vte-band-meter + .vte-band-unfold-cta { margin-inline-start: 0; }
@media (max-width: 760px) {
  .vte-progress-band { padding-inline-end: 16px; }
  .vte-progress-band .vte-band-copy { padding-inline-end: 40px; }
  .vte-progress-band.is-folded .vte-band-meter { display: none; }
  .vte-band-unfold { gap: 8px; padding: 8px 12px; }
}
@media (prefers-reduced-motion: reduce) {
  .vte-band-close, .vte-band-unfold { transition: none; }
}
/* Wider than a phone: the close button takes its own grid column so the band keeps its rows. */
@media (min-width: 761px) {
  .vte-progress-band { padding-inline-end: 10px; grid-template-columns: minmax(0, 1fr) auto 36px; grid-template-areas: "copy cta close" "meter meter meter" "note note note"; }
  .vte-band-close { position: static; grid-area: close; align-self: start; transform: none; }
  .vte-progress-band.is-complete .vte-band-close, .vte-progress-band.is-failed .vte-band-close { transform: none; }
  .vte-progress-band.is-complete { grid-template-columns: minmax(0, 1fr) 36px; grid-template-areas: "copy close"; }
  .vte-progress-band.is-complete .vte-band-close { align-self: center; }
}
@media (min-width: 1024px) {
  .vte-progress-band { grid-template-columns: auto minmax(48px, 1fr) auto 36px; grid-template-areas: "copy meter cta close" "note note note note"; column-gap: 16px; }
  .vte-progress-band.is-partial .vte-band-close, .vte-progress-band.is-empty .vte-band-close { align-self: center; }
  .vte-progress-band .vte-band-sub { white-space: nowrap; }
  .vte-progress-band.is-making, .vte-progress-band.is-failed { grid-template-columns: minmax(0, 1fr) auto 36px; grid-template-areas: "copy cta close" "meter meter meter" "note note note"; }
  .vte-progress-band.is-failed .vte-band-sub { white-space: normal; }
  .vte-progress-band.is-complete { grid-template-columns: minmax(0, 1fr) 36px; grid-template-areas: "copy close"; }
}
.vte-editor .vte-progress-band.is-folded { padding: 0; gap: 0; }

/* No-logo warning shown before a creation (shared.js openLogoGateModal) */
body.logo-gate-open {
  overflow: hidden;
}
.logo-gate {
  position: fixed;
  inset: 0;
  /* Above the create panel (it opens from the creator's Create button), below toasts. */
  z-index: var(--z-create-nested-modal, 222000);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px 16px;
  font-family: 'Tajawal', system-ui, -apple-system, 'Segoe UI', sans-serif;
  color: #1a202c;
}
.logo-gate-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(24, 14, 52, 0.52);
  opacity: 0;
  transition: opacity 220ms cubic-bezier(0.16, 1, 0.3, 1);
}
.logo-gate-card {
  position: relative;
  width: min(440px, 100%);
  max-height: calc(100dvh - 48px);
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 24px;
  border-radius: 20px;
  background: #ffffff;
  box-shadow: 0 24px 60px -12px rgba(46, 16, 101, 0.3), 0 2px 6px rgba(46, 16, 101, 0.08);
  text-align: start;
  opacity: 0;
  transform: translateY(8px) scale(0.98);
  transition: opacity 260ms cubic-bezier(0.16, 1, 0.3, 1), transform 320ms cubic-bezier(0.16, 1, 0.3, 1);
}
.logo-gate.is-open .logo-gate-backdrop,
.logo-gate.is-open .logo-gate-card {
  opacity: 1;
}
.logo-gate.is-open .logo-gate-card {
  transform: none;
}
.logo-gate.is-leaving .logo-gate-backdrop,
.logo-gate.is-leaving .logo-gate-card {
  opacity: 0;
  transition-duration: 150ms;
}
.logo-gate ::selection {
  background: #dccbff;
  color: #2e1065;
}
.logo-gate-close {
  position: absolute;
  top: 12px;
  inset-inline-end: 12px;
  z-index: 1;
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  padding: 0;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: #5b6474;
  cursor: pointer;
  transition: background-color 150ms ease, color 150ms ease;
}
.logo-gate-close:hover {
  background: #f3edff;
  color: #2e1065;
}

/* A small post mock with an empty logo spot: what the design will look like. */
.logo-gate-preview {
  display: grid;
  place-items: center;
  height: 136px;
  border-radius: 14px;
  background: #f3edff;
}
.logo-gate-post {
  position: relative;
  display: grid;
  grid-template-rows: 28px 1fr auto auto auto;
  gap: 6px;
  width: 88px;
  height: 108px;
  padding: 10px;
  border-radius: 10px;
  background: color-mix(in srgb, var(--logo-gate-tint, #7c3aed) 8%, #ffffff);
  box-shadow: 0 10px 24px -8px rgba(46, 16, 101, 0.3), 0 1px 2px rgba(46, 16, 101, 0.08);
  transform: rotate(-3deg);
}
[dir="rtl"] .logo-gate-post {
  transform: rotate(3deg);
}
.logo-gate-slot {
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  overflow: hidden;
  border: 1.5px dashed var(--logo-gate-tint, #7c3aed);
  border-radius: 8px;
  color: var(--logo-gate-tint, #7c3aed);
  font-size: 13px;
  font-weight: 700;
  line-height: 1;
  animation: logo-gate-slot-breathe 2.4s cubic-bezier(0.16, 1, 0.3, 1) infinite;
}
.logo-gate-slot img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  background: #ffffff;
}
.logo-gate.is-done .logo-gate-slot {
  border-style: solid;
  border-color: transparent;
  animation: none;
}
.logo-gate-post-line {
  grid-row: 3;
  width: 70%;
  height: 6px;
  border-radius: 3px;
  background: #e4e1f0;
}
.logo-gate-post-line.is-wide {
  grid-row: 2;
  align-self: end;
  width: 100%;
}
.logo-gate-post-cta {
  grid-row: 5;
  width: 48%;
  height: 12px;
  border-radius: 999px;
  background: var(--logo-gate-tint, #7c3aed);
}
@keyframes logo-gate-slot-breathe {
  0%, 100% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--logo-gate-tint, #7c3aed) 0%, transparent); }
  50% { box-shadow: 0 0 0 5px color-mix(in srgb, var(--logo-gate-tint, #7c3aed) 16%, transparent); }
}

.logo-gate-title {
  margin: 20px 0 0;
  font-size: 20px;
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: 0;
  text-wrap: balance;
  color: #1a202c;
}
.logo-gate-lead {
  margin: 8px 0 0;
  font-size: 15px;
  font-weight: 400;
  line-height: 1.6;
  color: #5b6474;
}
.logo-gate-why {
  display: grid;
  gap: 12px;
  margin: 16px 0 0;
  padding: 16px 0 0;
  border-top: 1px solid #ecebf5;
  list-style: none;
}
.logo-gate-why li {
  display: grid;
  grid-template-columns: 32px minmax(0, 1fr);
  align-items: center;
  gap: 12px;
  margin: 0;
}
.logo-gate-why li > svg {
  box-sizing: content-box;
  width: 18px;
  height: 18px;
  padding: 7px;
  border-radius: 10px;
  background: #f3edff;
  color: #7c3aed;
}
.logo-gate-why li > span {
  font-size: 13px;
  font-weight: 400;
  line-height: 1.45;
  color: #5b6474;
}
.logo-gate-why strong {
  display: block;
  font-size: 15px;
  font-weight: 500;
  line-height: 1.4;
  color: #1a202c;
}
.logo-gate-status {
  margin: 0;
  font-size: 13px;
  font-weight: 500;
  line-height: 1.45;
}
.logo-gate-status:not(:empty) {
  margin-top: 16px;
}
.logo-gate-status.is-ok {
  color: #15803d;
}
.logo-gate-status.is-error {
  color: #b42318;
}
.logo-gate-actions {
  display: grid;
  gap: 8px;
  margin-top: 20px;
}
.logo-gate-primary,
.logo-gate-secondary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  margin: 0;
  border-radius: 12px;
  font-family: inherit;
  font-size: 15px;
  font-weight: 500;
  line-height: 1.2;
  cursor: pointer;
  transition: background-color 150ms ease, border-color 150ms ease, color 150ms ease, transform 120ms ease;
}
.logo-gate-primary {
  min-height: 48px;
  padding: 0 20px;
  border: 0;
  background: #7c3aed;
  color: #ffffff;
}
.logo-gate-primary:hover:not(:disabled) {
  background: #6d28d9;
}
.logo-gate-secondary {
  min-height: 44px;
  padding: 0 20px;
  border: 1px solid #cfd3e0;
  background: #ffffff;
  color: #1a202c;
}
.logo-gate-secondary:hover:not(:disabled) {
  border-color: #b7bccd;
  background: #f7f7fb;
}
.logo-gate-primary:active:not(:disabled),
.logo-gate-secondary:active:not(:disabled) {
  transform: translateY(1px);
}
.logo-gate-primary:disabled,
.logo-gate-secondary:disabled {
  cursor: progress;
}
.logo-gate-secondary:disabled {
  color: #8a91a1;
  background: #ffffff;
}
.logo-gate.is-done .logo-gate-primary:disabled {
  background: #15803d;
  cursor: default;
}
.logo-gate.is-busy .logo-gate-primary svg {
  display: none;
}
.logo-gate.is-busy .logo-gate-primary::before {
  content: '';
  width: 16px;
  height: 16px;
  border: 2px solid rgba(255, 255, 255, 0.4);
  border-top-color: #ffffff;
  border-radius: 999px;
  animation: logo-gate-spin 700ms linear infinite;
}
@keyframes logo-gate-spin {
  to { transform: rotate(360deg); }
}
.logo-gate-foot {
  margin: 12px 0 0;
  font-size: 13px;
  font-weight: 400;
  line-height: 1.5;
  text-align: center;
  color: #5b6474;
}
.logo-gate-foot a {
  display: inline-block;
  padding: 12px 4px;
  margin: -12px -4px;
  color: #5b21b6;
  font-weight: 500;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
  white-space: nowrap;
}
.logo-gate-foot a:hover {
  color: #2e1065;
}
.logo-gate-close:focus-visible,
.logo-gate-primary:focus-visible,
.logo-gate-secondary:focus-visible,
.logo-gate-foot a:focus-visible {
  outline: 2px solid #7c3aed;
  outline-offset: 2px;
}
@media (max-width: 600px) {
  .logo-gate {
    align-items: flex-end;
    padding: 0;
  }
  .logo-gate-card {
    width: 100%;
    max-height: 92dvh;
    padding: 20px 16px calc(16px + env(safe-area-inset-bottom));
    border-radius: 20px 20px 0 0;
    transform: translateY(24px);
  }
  .logo-gate-preview {
    height: 120px;
  }
}
@media (prefers-reduced-motion: reduce) {
  .logo-gate-card,
  .logo-gate.is-open .logo-gate-card {
    transform: none;
  }
  .logo-gate-slot {
    animation: none;
  }
}

/* ── Publish window: the destination board ─────────────────────────────────
   Left: the post as each network will show it. Right: one row per network that
   says what will happen there, then turns into its live state after Publish. */
/* No backdrop blur: Chrome greys the sheet itself while a blurred backdrop composites. */
#publishing-flow-modal.modal {
  background: rgba(15, 23, 42, 0.6);
  backdrop-filter: none;
}

.pb-card {
  --pb-purple: #7c3aed;
  --pb-deep: #5b21b6;
  --pb-ink: #2e1065;
  --pb-soft: #f3edff;
  --pb-soft-line: #dccbff;
  --pb-text: #1a202c;
  --pb-muted: #5b6474;
  --pb-line: #e6e8f0;
  --pb-line-strong: #cfd3e0;
  --pb-track: #ecebf5;
  --pb-ground: #f7f7fb;
  --pb-ok: #15803d;
  --pb-bad: #b42318;
  --pb-bad-soft: #fee9e8;
  --pb-ease: cubic-bezier(0.16, 1, 0.3, 1);
  width: min(1000px, calc(100vw - 32px));
  height: min(760px, calc(100dvh - 32px));
  max-height: none;
  padding: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: auto minmax(0, 1fr) auto;
  overflow: hidden;
  border-radius: 16px;
  background: #fff;
  color: var(--pb-text);
  font-family: 'Tajawal', system-ui, -apple-system, 'Segoe UI', sans-serif;
  box-shadow: 0 30px 70px rgba(46, 16, 101, 0.28);
  animation: pb-rise 0.28s var(--pb-ease);
}

@keyframes pb-rise {
  from { transform: translateY(12px); }
  to { transform: none; }
}

.pb-card .hidden,
.pb-card [hidden] {
  display: none !important;
}

.pb-card ::selection {
  background: var(--pb-soft-line);
  color: var(--pb-ink);
}

.pb-card :focus-visible {
  outline: 2px solid var(--pb-purple);
  outline-offset: 2px;
}

.pb-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 16px 16px 16px 24px;
  padding-inline: 24px 16px;
  border-bottom: 1px solid var(--pb-line);
}

.pb-title {
  margin: 0;
  font-size: 20px;
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: -0.01em;
}

.pb-close {
  display: inline-grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border: 0;
  border-radius: 10px;
  background: transparent;
  color: var(--pb-muted);
  cursor: pointer;
  transition: background-color 0.18s var(--pb-ease), color 0.18s var(--pb-ease);
}

.pb-close:hover {
  background: var(--pb-soft);
  color: var(--pb-deep);
}

.pb-close-icon {
  width: 18px;
  height: 18px;
}

.pb-body {
  display: grid;
  grid-template-columns: 380px minmax(0, 1fr);
  min-height: 0;
}

.pb-post,
.pb-board {
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-width: thin;
  scrollbar-color: var(--pb-line-strong) transparent;
}

.pb-post {
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 20px;
  background: var(--pb-ground);
  border-inline-end: 1px solid var(--pb-line);
}

/* The post, framed the way the focused network shows it. */
.pb-post > * {
  flex: none;
}

/* The preview is the post itself, in the job card's mock-post language
   (.social-preview), with sample engagement so it feels like the feed. */
.pb-preview {
  width: 100%;
  max-width: 340px;
  margin-inline: auto;
}

.pb-compact {
  display: none;
}

.pb-mock .social-preview {
  border-radius: 14px;
  box-shadow: 0 10px 28px rgba(46, 16, 101, 0.08);
}

.pb-mock .social-avatar {
  width: 32px;
  height: 32px;
  font-size: 13px;
}

.pb-mock .social-header {
  padding: 10px 12px;
}

.pb-mock .social-handle {
  font-size: 14px;
}

.pb-mock-media {
  display: block;
  cursor: zoom-in;
}

.pb-mock .social-image {
  max-height: 420px;
  background: #0f0b1a;
}

.pb-preview[data-platform="instagram"][data-frame="feed"] .pb-mock .social-image {
  aspect-ratio: 4 / 5;
  object-fit: cover;
}

.pb-mock .social-caption {
  padding: 0 12px 10px;
  font-size: 14px;
  line-height: 1.45;
  overflow-wrap: anywhere;
}

.pb-mock .social-preview.x .social-caption {
  padding: 0;
}

.pb-mock .social-actions {
  padding: 10px 12px;
}

.pb-mock-stats {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  padding: 8px 12px;
  color: var(--pb-muted);
  font-size: 12px;
  font-variant-numeric: tabular-nums;
}

.pb-mock-stats span {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.pb-mock-stats svg,
.pb-mock .social-actions.x svg {
  width: 14px;
  height: 14px;
}

.pb-mock .social-actions.x span {
  font-size: 12px;
  font-variant-numeric: tabular-nums;
}

.pb-mock .social-likes {
  padding: 0 12px;
  font-size: 13px;
  font-variant-numeric: tabular-nums;
}

.pb-mock-ig-caption {
  padding: 4px 12px 0;
  font-size: 14px;
}

.pb-mock-ig-caption > strong {
  margin-inline-end: 4px;
}

.pb-mock-ig-caption .social-caption {
  display: inline;
  padding: 0;
}

.pb-mock-comments {
  display: grid;
  gap: 2px;
  padding: 6px 12px 12px;
  font-size: 13px;
}

.pb-mock-more,
.pb-mock-time {
  color: var(--pb-muted);
}

.pb-mock-time {
  margin-top: 4px;
  font-size: 12px;
}

/* Stories and TikTok: a full-height frame with the network's chrome over the picture. */
.pb-mock-story,
.pb-mock-tiktok {
  position: relative;
  background: #0f0b1a;
  color: #fff;
}

.pb-mock-story .social-image,
.pb-mock-tiktok .social-image {
  aspect-ratio: 9 / 16;
  max-height: 520px;
  object-fit: cover;
}

.pb-mock-story-top {
  position: absolute;
  inset: 0 0 auto;
  display: grid;
  gap: 8px;
  padding: 10px 12px;
  background: linear-gradient(to bottom, rgba(0, 0, 0, 0.45), transparent);
}

.pb-mock-story-bars {
  display: block;
  height: 3px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.4);
}

.pb-mock-story-bars span {
  display: block;
  width: 35%;
  height: 100%;
  border-radius: inherit;
  background: #fff;
}

.pb-mock-story-who {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
}

.pb-mock-story-who span:last-child {
  opacity: 0.75;
}

.pb-mock-story-reply {
  position: absolute;
  inset: auto 12px 12px;
  display: flex;
  align-items: center;
  gap: 12px;
}

.pb-mock-story-reply span {
  flex: 1;
  padding: 8px 14px;
  border: 1px solid rgba(255, 255, 255, 0.7);
  border-radius: 999px;
  font-size: 13px;
}

.pb-mock-story-reply svg,
.pb-mock-tiktok-rail svg {
  width: 22px;
  height: 22px;
  color: #fff;
}

.pb-mock-tiktok::after {
  content: '';
  position: absolute;
  inset: auto 0 0;
  height: 40%;
  background: linear-gradient(to top, rgba(0, 0, 0, 0.55), transparent);
  pointer-events: none;
}

.pb-mock-tiktok-rail,
.pb-mock-tiktok-foot {
  z-index: 1;
  filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.6));
}

.pb-mock-tiktok-rail {
  position: absolute;
  inset-inline-end: 8px;
  bottom: 70px;
  display: grid;
  justify-items: center;
  gap: 14px;
  font-size: 12px;
}

.pb-mock-tiktok-rail span {
  display: grid;
  justify-items: center;
  gap: 2px;
}

.pb-mock-tiktok-rail b {
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

.pb-mock-tiktok-avatar .social-avatar {
  border: 2px solid #fff;
}

.pb-mock-tiktok-foot {
  position: absolute;
  inset: auto 64px 12px 12px;
  display: grid;
  gap: 4px;
  font-size: 13px;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
}

.pb-mock-tiktok-sound {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.pb-mock-tiktok-sound .pb-note-icon {
  width: 14px;
  height: 14px;
}

.pb-mock .pb-mock-caption-under {
  padding: 10px 2px 0;
  color: var(--pb-text);
}

.pb-mock .pb-mock-caption-hidden {
  display: none;
}

.pb-preview-empty {
  display: grid;
  place-items: center;
  min-height: 200px;
  padding: 16px;
  color: #ede4ff;
  font-size: 14px;
}

.pb-preview-count {
  position: absolute;
  inset-block-start: 8px;
  inset-inline-end: 8px;
  padding: 2px 8px;
  border-radius: 999px;
  background: rgba(15, 11, 26, 0.72);
  color: #fff;
  font-size: 12px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

.pb-post.is-editing-caption [data-mock-caption] {
  display: none;
}

.pb-mock .pb-caption-slot {
  margin: 0 8px 10px;
}

.pb-mock .social-preview.x .pb-caption-slot {
  margin: 0;
}

.pb-tag {
  color: var(--pb-deep);
  font-weight: 500;
}

.pb-preview-tabs {
  display: flex;
  justify-content: center;
  gap: 6px;
}

.pb-preview-tab {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-width: 36px;
  min-height: 36px;
  padding: 0 10px;
  border: 1px solid var(--pb-line-strong);
  border-radius: 999px;
  background: #fff;
  color: var(--pb-muted);
  font: inherit;
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
  transition: border-color 0.18s var(--pb-ease), color 0.18s var(--pb-ease), background-color 0.18s var(--pb-ease);
}

.pb-preview-tab .publishing-platform-glyph {
  width: 14px;
  height: 14px;
}

.pb-preview-tab:hover {
  border-color: var(--pb-purple);
  color: var(--pb-deep);
}

.pb-preview-tab.is-active {
  border-color: var(--pb-soft-line);
  background: var(--pb-soft);
  color: var(--pb-ink);
}

/* Only the network on screen spells its name; the others are glyphs with a label. */
.pb-preview-tab:not(.is-active) span {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.pb-strip {
  display: grid;
  gap: 8px;
}

.pb-strip-hint {
  color: var(--pb-muted);
  font-size: 12px;
}

.pb-strip-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.pb-strip-grid .publishing-asset-tile {
  width: 56px;
  height: 56px;
  border-radius: 10px;
}

.pb-caption-toggle {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 40px;
  padding: 0;
  border: 0;
  background: none;
  color: var(--pb-deep);
  font: inherit;
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
}

.pb-caption-toggle .pb-caption-toggle-icon {
  width: 16px;
  height: 16px;
}

/* The caption is edited where the network shows it: it reads as the post's text,
   framed only on hover and focus. */
.pb-caption-slot {
  display: grid;
  gap: 4px;
  margin: 8px 6px 10px;
}

.pb-caption-slot.is-above {
  margin-block: 0 8px;
}

.pb-caption-slot {
  display: none;
}

.pb-post.is-editing-caption .pb-caption-slot {
  display: grid;
}


.pb-caption-note {
  padding: 0 6px;
  color: var(--pb-muted);
  font-size: 12px;
}

.pb-caption-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 0 2px;
}

.pb-caption-hint {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  color: var(--pb-deep);
  font-size: 12px;
  font-weight: 500;
  cursor: text;
}

.pb-caption-hint-icon {
  width: 14px;
  height: 14px;
}

.pb-count {
  text-align: end;
  color: var(--pb-muted);
  font-size: 12px;
  font-variant-numeric: tabular-nums;
}

.pb-count.is-notice {
  color: var(--pb-text);
  font-weight: 700;
}

.pb-caption-input {
  display: block;
  width: 100%;
  min-height: 60px;
  padding: 8px 10px;
  overflow: hidden;
  resize: none;
  /* A real field at rest, so it is clear the text can be changed. */
  border: 1px solid var(--pb-line-strong);
  border-radius: 8px;
  background: #fff;
  color: var(--pb-text);
  font: inherit;
  font-size: 14px;
  line-height: 1.45;
  white-space: pre-wrap;
  caret-color: var(--pb-purple);
  cursor: text;
  transition: border-color 0.18s var(--pb-ease), box-shadow 0.18s var(--pb-ease), background-color 0.18s var(--pb-ease);
}

.pb-caption-input:hover {
  border-color: #b4bacb;
}

.pb-caption-input:focus {
  border-color: var(--pb-purple);
  outline: none;
  box-shadow: 0 0 0 3px rgba(124, 58, 237, 0.18);
}

/* The board: grouped lists. One switch per network, one quiet line of status,
   options of a group live inside that group. */
.pb-board {
  padding: 20px 24px;
}

.pb-board-title {
  margin: 0 0 12px;
  font-size: 16px;
  font-weight: 700;
}

.pb-rows {
  display: grid;
  gap: 12px;
}

.pb-group {
  overflow: hidden;
  border: 1px solid var(--pb-line);
  border-radius: 12px;
  background: #fff;
}

.pb-group > * + * {
  border-top: 1px solid var(--pb-line);
}

.pb-row-head {
  display: grid;
  grid-template-columns: 24px minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  width: 100%;
  min-height: 60px;
  padding: 10px 16px;
  border: 0;
  background: transparent;
  color: inherit;
  font: inherit;
  text-align: start;
  cursor: pointer;
  transition: background-color 0.18s var(--pb-ease);
}

button.pb-row-head:hover:not(:disabled) {
  background: var(--pb-ground);
}

.pb-row.is-connect .pb-row-head {
  cursor: default;
}

.pb-glyph {
  display: inline-grid;
  place-items: center;
  width: 24px;
  height: 24px;
  color: var(--pb-text);
}

.pb-glyph .publishing-platform-glyph {
  width: 20px;
  height: 20px;
}

.pb-row:not(.is-selected):not(.is-connect) .pb-glyph,
.pb-row.is-connect .pb-glyph {
  color: var(--pb-muted);
}

.pb-row-text {
  display: grid;
  gap: 2px;
  min-width: 0;
}

.pb-row-name {
  overflow: hidden;
  font-size: 16px;
  font-weight: 700;
  line-height: 1.3;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.pb-row-account {
  color: var(--pb-muted);
  font-size: 14px;
  font-weight: 400;
}

.pb-row-status {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 2px 10px;
  color: var(--pb-muted);
  font-size: 14px;
  line-height: 1.4;
}

.pb-row-status.is-notice {
  color: var(--pb-text);
  font-weight: 500;
}

.pb-row-link {
  white-space: nowrap;
}

/* Network errors arrive in English: their own line and direction inside Arabic rows,
   still aligned to the row's reading edge. */
.pb-row-reason {
  display: block;
  width: 100%;
  text-align: match-parent;
}

/* The trailing slot: a switch before Publish, the outcome after it. */
.pb-tail {
  display: inline-grid;
  place-items: center;
  min-width: 36px;
  min-height: 24px;
}

.pb-switch {
  position: relative;
  display: block;
  width: 36px;
  height: 22px;
  border-radius: 999px;
  background: var(--pb-line-strong);
  transition: background-color 0.18s var(--pb-ease);
}

.pb-switch::after {
  content: '';
  position: absolute;
  inset-block-start: 3px;
  inset-inline-start: 3px;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.24);
  transition: transform 0.18s var(--pb-ease);
}

.pb-row.is-selected .pb-switch {
  background: var(--pb-purple);
}

.pb-row.is-selected .pb-switch::after {
  transform: translateX(14px);
}

[dir="rtl"] .pb-row.is-selected .pb-switch::after {
  transform: translateX(-14px);
}

.pb-state-icon {
  width: 20px;
  height: 20px;
}

.pb-row.is-done .pb-tail {
  color: var(--pb-ok);
}

.pb-row.is-failed .pb-tail {
  color: var(--pb-bad);
}

.pb-row.is-blocked .pb-row-head {
  cursor: not-allowed;
  opacity: 0.5;
}

.pb-connect {
  padding: 8px 0;
  border: 0;
  background: none;
  color: var(--pb-deep);
  font: inherit;
  font-size: 14px;
  font-weight: 700;
  text-decoration: none;
  cursor: pointer;
}

.pb-connect:hover,
.pb-row-guide:hover,
.pb-link:hover {
  text-decoration: underline;
  text-underline-offset: 3px;
}

.pb-row-guide,
.pb-link {
  padding: 0;
  border: 0;
  background: none;
  color: var(--pb-deep);
  font: inherit;
  font-weight: 700;
  text-decoration: none;
  cursor: pointer;
}

/* A sub-setting of the group: indented to the name column, on a faint ground. */
.pb-option,
.pb-row-extra,
.pb-row-fix {
  padding: 10px 16px 12px;
  padding-inline-start: 52px;
}

.pb-option,
.pb-row-extra {
  background: #fbfbfd;
}

.pb-option {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 8px 12px;
}

.pb-option.is-muted {
  opacity: 0.5;
}

.pb-format-label,
.pb-extra-label {
  color: var(--pb-muted);
  font-size: 14px;
  font-weight: 500;
}

.pb-format-note {
  width: 100%;
  color: var(--pb-muted);
  font-size: 12px;
}

.pb-confirm {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  width: 100%;
  color: var(--pb-ink);
  font-size: 14px;
}

.pb-confirm input {
  margin-top: 3px;
  accent-color: var(--pb-purple);
}

/* Choices are quiet text tabs: the picked one sits on soft purple, nothing else is filled. */
.pb-seg {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 4px;
}

.pb-seg-btn {
  min-height: 34px;
  padding: 0 12px;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: var(--pb-muted);
  font: inherit;
  font-size: 14px;
  font-weight: 400;
  white-space: nowrap;
  cursor: pointer;
  transition: background-color 0.18s var(--pb-ease), color 0.18s var(--pb-ease);
}

.pb-seg-btn:hover:not(:disabled):not(.is-active) {
  color: var(--pb-text);
}

/* The picked option: soft fill and ink at medium weight, never heavier than the network names. */
.pb-seg-btn.is-active {
  background: var(--pb-soft);
  color: var(--pb-ink);
  font-weight: 500;
}

.pb-seg-btn:disabled {
  cursor: not-allowed;
  opacity: 0.45;
}

.pb-fix-btn {
  display: inline-flex;
  align-items: center;
  min-height: 36px;
  padding: 0 14px;
  border: 1px solid var(--pb-line-strong);
  border-radius: 10px;
  background: #fff;
  color: var(--pb-text);
  font: inherit;
  font-size: 14px;
  font-weight: 700;
  text-decoration: none;
  cursor: pointer;
}

.pb-fix-btn:hover {
  border-color: var(--pb-purple);
  color: var(--pb-deep);
}

/* Live states. */
.pb-row.is-sending .pb-row-status {
  color: var(--pb-ink);
}

.pb-row.is-done .pb-row-status {
  color: var(--pb-ok);
  font-weight: 500;
}

.pb-row.is-failed {
  background: var(--pb-bad-soft);
}

.pb-row.is-failed .pb-row-status {
  color: var(--pb-bad);
  font-weight: 500;
}

.pb-row.is-demo .pb-row-status {
  color: var(--pb-ink);
  font-weight: 500;
}

.pb-row.is-idle {
  opacity: 0.5;
}

.is-finished .pb-row-head {
  cursor: default;
}

.is-finished .pb-option,
.is-finished .pb-caption-toggle,
.is-finished .pb-caption {
  display: none;
}

.pb-spin {
  width: 18px;
  height: 18px;
  border: 2px solid var(--pb-soft-line);
  border-top-color: var(--pb-purple);
  border-radius: 50%;
  animation: pb-spin 0.8s linear infinite;
}

/* Snapchat: a full-screen Snap with the app's own chrome. Stories show no caption;
   Spotlight shows the short description at the bottom. */
.pb-mock-snap {
  position: relative;
  overflow: hidden;
  border-radius: 14px;
  background: #0f0b1a;
  color: #fff;
}

.pb-mock-snap .social-image {
  aspect-ratio: 9 / 16;
  max-height: 520px;
  object-fit: cover;
}

.pb-mock-snap-top {
  position: absolute;
  inset: 0 0 auto;
  padding: 12px;
  background: linear-gradient(to bottom, rgba(0, 0, 0, 0.5), transparent);
}

.pb-mock-snap-who {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  line-height: 1.25;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
}

.pb-mock-snap-who > span {
  display: grid;
}

.pb-mock-snap-who > span span {
  opacity: 0.8;
  font-size: 12px;
}

.pb-mock-snap-who .social-avatar {
  border: 2px solid #fffc00;
}

.pb-mock-snap-reply {
  position: absolute;
  inset: auto 12px 12px;
  display: flex;
  align-items: center;
  gap: 12px;
}

.pb-mock-snap-reply span {
  flex: 1;
  padding: 9px 14px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.18);
  font-size: 13px;
}

.pb-mock-snap-reply svg {
  width: 22px;
  height: 22px;
  color: #fff;
}

.pb-mock-snap.is-spotlight::after {
  content: '';
  position: absolute;
  inset: auto 0 0;
  height: 40%;
  background: linear-gradient(to top, rgba(0, 0, 0, 0.6), transparent);
  pointer-events: none;
}

.pb-mock-snap-rail {
  bottom: 72px;
}

.pb-mock-snap-foot {
  position: absolute;
  inset: auto 64px 14px 12px;
  z-index: 1;
  font-size: 13px;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.55);
}

.pb-mock-snap-foot .pb-mock-caption {
  padding: 0;
  color: #fff;
}

.pb-mock-snap-foot .pb-tag {
  color: #fff;
  font-weight: 700;
}

/* The Snapchat row's own lines under Story / Spotlight. */
.pb-snap-hint {
  width: 100%;
  margin: 8px 0 0;
  color: var(--pb-muted);
  font-size: 14px;
  line-height: 1.45;
}

.pb-snap-link {
  margin-top: 10px;
  cursor: pointer;
}

@keyframes pb-spin {
  to { transform: rotate(360deg); }
}

/* TikTok sound. */
.pb-sound {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 8px 12px;
}

.pb-post-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0 20px;
  padding: 0 12px 8px;
}

/* On desktop the preview is always open: only Edit caption is needed. */
.pb-preview-toggle {
  display: none;
}

.pb-tracks-wrap {
  margin-top: 12px;
}

.pb-tracks {
  display: grid;
  max-height: 248px;
  margin: 0;
  padding: 4px;
  overflow-y: auto;
  list-style: none;
  border: 1px solid var(--pb-line);
  border-radius: 12px;
  scrollbar-width: thin;
  scrollbar-color: var(--pb-line-strong) transparent;
}

.pb-track {
  display: grid;
  grid-template-columns: 36px minmax(0, 1fr);
  align-items: center;
  gap: 8px;
  padding-inline-start: 4px;
  border-radius: 10px;
  transition: background-color 0.15s var(--pb-ease);
}

.pb-track:hover {
  background: var(--pb-ground);
}

.pb-track.is-picked {
  background: var(--pb-soft);
}

.pb-track-play {
  display: inline-grid;
  place-items: center;
  width: 36px;
  height: 36px;
  border: 0;
  border-radius: 50%;
  background: var(--pb-soft);
  color: var(--pb-ink);
  cursor: pointer;
  transition: background-color 0.18s var(--pb-ease), color 0.18s var(--pb-ease);
}

.pb-track.is-picked .pb-track-play {
  background: #fff;
}

.pb-track-play:hover,
.pb-track.is-playing .pb-track-play {
  background: var(--pb-purple);
  color: #fff;
}

.pb-track.is-playing .pb-track-play {
  box-shadow: 0 0 0 4px rgba(124, 58, 237, 0.2);
}

.pb-track-play.is-empty {
  background: transparent;
}

.pb-play-icon {
  width: 16px;
  height: 16px;
}

.pb-track-pick {
  display: grid;
  grid-template-columns: 40px minmax(0, 1fr) auto 18px;
  align-items: center;
  gap: 10px;
  width: 100%;
  min-height: 52px;
  padding: 6px 10px 6px 0;
  padding-inline: 0 10px;
  border: 0;
  background: transparent;
  color: inherit;
  font: inherit;
  text-align: start;
  cursor: pointer;
}

.pb-track-cover {
  display: inline-grid;
  place-items: center;
  width: 40px;
  height: 40px;
  overflow: hidden;
  border-radius: 8px;
  background: var(--pb-soft);
  color: var(--pb-deep);
}

.pb-note-icon {
  width: 18px;
  height: 18px;
}

.pb-tracks-more {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: 40px;
  margin-top: 4px;
  border: 0;
  border-radius: 10px;
  background: transparent;
  color: var(--pb-deep);
  font: inherit;
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
}

.pb-tracks-more:hover {
  background: var(--pb-soft);
}

.pb-track-cover img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.pb-track-text {
  display: grid;
  min-width: 0;
}

.pb-track-name,
.pb-track-artist {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.pb-track-name {
  font-size: 14px;
  font-weight: 700;
}

.pb-track-artist,
.pb-track-meta {
  color: var(--pb-muted);
  font-size: 12px;
}

.pb-track-meta {
  display: grid;
  justify-items: end;
  font-variant-numeric: tabular-nums;
}

.pb-track-tick {
  display: inline-grid;
  place-items: center;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  color: #fff;
}

.pb-track.is-picked .pb-track-tick {
  background: var(--pb-purple);
}

.pb-track-tick .pb-check-icon {
  width: 12px;
  height: 12px;
  opacity: 0;
}

.pb-track.is-picked .pb-check-icon {
  width: 12px;
  height: 12px;
  opacity: 1;
}

.pb-tracks-note {
  margin: 0;
  color: var(--pb-muted);
  font-size: 14px;
}

.pb-tracks-note.is-error {
  color: var(--pb-bad);
}

/* In the publish window the cover sits first, above the tall post preview, so it is seen without scrolling. */
.pb-post > .publishing-ig-cover {
  margin: 0;
  padding: 0 0 16px;
  border-top: 0;
  border-bottom: 1px solid var(--pb-line);
}

.pb-row-extra .publishing-ig-cover {
  margin: 0;
  padding: 0;
  border: 0;
  background: none;
}

.pb-result {
  margin-top: 16px;
  padding: 12px 14px;
  border-radius: 10px;
  background: var(--pb-bad-soft);
  color: var(--pb-bad);
  font-size: 14px;
}

.pb-result p {
  margin: 0 0 6px;
}

/* Footer. */
.pb-foot {
  display: grid;
  gap: 10px;
  padding: 14px 24px;
  border-top: 1px solid var(--pb-line);
  background: #fff;
}

.pb-status {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0;
  padding: 10px 14px;
  border: 1px solid var(--pb-soft-line);
  border-radius: 10px;
  background: var(--pb-soft);
  color: var(--pb-ink);
  font-size: 14px;
  font-weight: 500;
  line-height: 1.45;
}

/* While posting: a small spinner so the "you can close this" line reads as live progress. */
.pb-status.is-progress::before {
  content: '';
  flex: none;
  width: 16px;
  height: 16px;
  border: 2px solid currentColor;
  border-inline-end-color: transparent;
  border-radius: 50%;
  animation: pb-spin 0.8s linear infinite;
}

@media (prefers-reduced-motion: reduce) {
  .pb-status.is-progress::before {
    animation: none;
  }
}

.pb-status:empty {
  display: none;
}

.pb-status.is-error {
  border-color: color-mix(in srgb, var(--pb-bad) 24%, #fff);
  background: color-mix(in srgb, var(--pb-bad) 7%, #fff);
  color: var(--pb-bad);
}

.pb-status.is-success {
  border-color: color-mix(in srgb, var(--pb-ok) 24%, #fff);
  background: color-mix(in srgb, var(--pb-ok) 7%, #fff);
  color: var(--pb-ok);
}

.pb-foot-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.pb-when {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}

.pb-datetime {
  display: flex;
  gap: 8px;
}

.pb-date {
  position: relative;
  display: inline-flex;
  align-items: center;
}

.pb-date-icon {
  position: absolute;
  inset-inline-start: 10px;
  width: 16px;
  height: 16px;
  color: var(--pb-muted);
  pointer-events: none;
}

.pb-date input,
.pb-date select {
  min-height: 40px;
  padding: 0 10px;
  padding-inline-start: 34px;
  border: 1px solid var(--pb-line-strong);
  border-radius: 10px;
  background: #fff;
  color: var(--pb-text);
  font: inherit;
  font-size: 14px;
  font-variant-numeric: tabular-nums;
}

.pb-date input:focus,
.pb-date select:focus {
  border-color: var(--pb-purple);
  outline: none;
  box-shadow: 0 0 0 3px rgba(124, 58, 237, 0.18);
}

.pb-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-inline-start: auto;
}

.pb-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: 0 18px;
  border: 1px solid transparent;
  border-radius: 10px;
  font: inherit;
  font-size: 16px;
  font-weight: 700;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  transition: background-color 0.18s var(--pb-ease), border-color 0.18s var(--pb-ease), color 0.18s var(--pb-ease), transform 0.18s var(--pb-ease);
}

.pb-btn:active:not(:disabled) {
  transform: translateY(1px);
}

.pb-btn-quiet {
  background: transparent;
  color: var(--pb-text);
}

.pb-btn-quiet:hover {
  background: var(--pb-soft);
  color: var(--pb-deep);
}

.pb-btn-primary {
  min-width: 220px;
  max-width: 440px;
  overflow: hidden;
  text-overflow: ellipsis;
  background: var(--pb-purple);
  color: #fff;
}

.pb-btn-primary:hover:not(:disabled) {
  background: var(--pb-deep);
}

.pb-btn-primary:disabled {
  border-color: var(--pb-soft-line);
  background: var(--pb-soft);
  color: var(--pb-ink);
  cursor: not-allowed;
}

.pb-btn-primary.loading {
  opacity: 0.8;
}

/* Network marks in their own colours; switched-off rows fade instead of turning grey. */
.pb-card [data-platform="instagram"] .pb-glyph,
.pb-preview-tab[data-preview-platform="instagram"] .publishing-platform-glyph { color: #e1306c; }
.pb-card [data-platform="facebook"] .pb-glyph,
.pb-preview-tab[data-preview-platform="facebook"] .publishing-platform-glyph { color: #1877f2; }
.pb-card [data-platform="tiktok"] .pb-glyph,
.pb-preview-tab[data-preview-platform="tiktok"] .publishing-platform-glyph { color: #010101; }
.pb-card [data-platform="x"] .pb-glyph,
.pb-preview-tab[data-preview-platform="x"] .publishing-platform-glyph { color: #0f1419; }
.pb-card [data-platform="linkedin"] .pb-glyph,
.pb-preview-tab[data-preview-platform="linkedin"] .publishing-platform-glyph { color: #0a66c2; }

.pb-row:not(.is-selected):not(.is-connect) .pb-glyph,
.pb-row.is-connect .pb-glyph {
  opacity: 0.5;
}

/* Snapchat in brand colours only where the other networks show theirs: a selected row
   and the preview tabs. Everywhere else the ghost is a solid mark in the text colour. */
.pb-row.is-selected[data-platform="snapchat"] .pb-glyph .is-snapchat,
.pb-preview-tab[data-preview-platform="snapchat"] .is-snapchat {
  --snap-ghost-fill: #fffc00;
  --snap-ghost-stroke: #16191c;
}

/* Cover thumbnail: a button that opens the large frame picker. */
.pb-card .publishing-ig-cover-preview {
  padding: 0;
  font: inherit;
  cursor: zoom-in;
  transition: box-shadow 0.18s var(--pb-ease), border-color 0.18s var(--pb-ease);
}

.pb-card .publishing-ig-cover-preview:hover {
  border-color: var(--pb-purple);
}

.pb-card .publishing-ig-cover-preview:focus-visible {
  outline: 2px solid var(--pb-purple);
  outline-offset: 2px;
}

.pb-cover-zoom-badge {
  position: absolute;
  inset-block-end: 4px;
  inset-inline-end: 4px;
  z-index: 2;
  display: grid;
  place-items: center;
  width: 22px;
  height: 22px;
  border-radius: 6px;
  background: rgba(15, 23, 42, 0.72);
  color: #fff;
}

.pb-cover-zoom-badge svg {
  width: 12px;
  height: 12px;
}

.pb-zoom {
  position: absolute;
  inset: 0;
  z-index: 5;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  background: #fff;
  animation: pb-zoom-in 0.24s var(--pb-ease);
}

.pb-zoom[hidden] {
  display: none;
}

.pb-card {
  position: relative;
}

.pb-zoom-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 12px 12px 24px;
  border-bottom: 1px solid var(--pb-line);
}

[dir="rtl"] .pb-zoom-head {
  padding: 12px 24px 12px 12px;
}

.pb-zoom-stage {
  position: relative;
  min-height: 0;
  overflow: hidden;
  background: #0f0f14;
}

/* Pinned to the stage so a tall Reel always fits, whatever the card height. */
.pb-zoom-stage video {
  position: absolute;
  inset: 16px;
  width: calc(100% - 32px);
  height: calc(100% - 32px);
  object-fit: contain;
  pointer-events: none;
}

.pb-zoom-controls {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  align-items: center;
  gap: 16px;
  padding: 16px 24px calc(16px + env(safe-area-inset-bottom, 0px));
  border-top: 1px solid var(--pb-line);
}

.pb-zoom-scrub .publishing-ig-cover-slider {
  display: block;
  accent-color: var(--pb-purple);
}

.pb-zoom-step {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.pb-zoom-step-btn {
  display: inline-grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border: 1px solid var(--pb-line-strong);
  border-radius: 10px;
  background: #fff;
  color: var(--pb-text);
  cursor: pointer;
  transition: border-color 0.18s var(--pb-ease), background-color 0.18s var(--pb-ease);
}

.pb-zoom-step-btn:hover {
  border-color: var(--pb-purple);
  background: var(--pb-soft);
}

.pb-zoom-step-btn:focus-visible,
.pb-zoom .publishing-ig-cover-slider:focus-visible {
  outline: 2px solid var(--pb-purple);
  outline-offset: 2px;
}

.pb-zoom-step-btn .icon {
  width: 18px;
  height: 18px;
}

[dir="rtl"] .pb-zoom-step-btn .icon {
  transform: scaleX(-1);
}

.pb-zoom-time {
  min-width: 56px;
  font-size: 14px;
  font-weight: 500;
  font-variant-numeric: tabular-nums;
  text-align: center;
  color: var(--pb-text);
}

.pb-zoom-done {
  min-width: 0;
}

@keyframes pb-zoom-in {
  from { opacity: 0; transform: scale(0.985); }
  to { opacity: 1; transform: none; }
}

@media (max-width: 860px) {

  .pb-zoom-controls {
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 12px;
    padding: 12px 16px calc(12px + env(safe-area-inset-bottom, 0px));
  }

  .pb-zoom-scrub {
    grid-column: 1 / -1;
  }

  .pb-zoom-step {
    justify-content: flex-start;
  }

  .pb-zoom-head,
  [dir="rtl"] .pb-zoom-head {
    padding: 8px 8px 8px 16px;
  }

  [dir="rtl"] .pb-zoom-head {
    padding: 8px 16px 8px 8px;
  }

  .pb-zoom-stage video {
    inset: 12px;
    width: calc(100% - 24px);
    height: calc(100% - 24px);
  }

  #publishing-flow-modal.modal {
    padding: 0;
    align-items: stretch;
  }

  .pb-card {
    width: 100vw;
    height: 100dvh;
    border-radius: 0;
    animation-name: pb-sheet;
  }

  @keyframes pb-sheet {
    from { transform: translateY(32px); }
    to { transform: none; }
  }

  .pb-head {
    padding-block: 8px;
    padding-inline: 16px 6px;
  }

  .pb-title {
    font-size: 18px;
  }

  .pb-close {
    width: 44px;
    height: 44px;
  }

  .pb-body {
    grid-template-columns: minmax(0, 1fr);
    align-content: start;
    overflow-y: auto;
    overscroll-behavior: contain;
  }

  .pb-post,
  .pb-board {
    min-height: auto;
    overflow: visible;
  }

  .pb-post {
    gap: 12px;
    padding: 12px 16px;
    border-inline-end: 0;
    border-bottom: 1px solid var(--pb-line);
  }

  /* Phones: the post is one compact card; Preview opens the full mock post. */
  .pb-preview {
    max-width: none;
  }

  .pb-post:not(.is-previewing) .pb-mock,
  .pb-post:not(.is-previewing) .pb-caption-slot {
    display: none;
  }

  .pb-post:not(.is-previewing) .pb-compact {
    display: grid;
    grid-template-columns: 72px minmax(0, 1fr);
    column-gap: 12px;
    padding: 10px;
    border-radius: 12px;
    background: #fff;
    box-shadow: 0 10px 28px rgba(46, 16, 101, 0.08);
  }

  .pb-compact-thumb {
    position: relative;
    grid-row: 1 / span 2;
    padding: 0;
    overflow: hidden;
    border: 0;
    border-radius: 8px;
    background: #0f0b1a;
    cursor: zoom-in;
  }

  .pb-compact-thumb img,
  .pb-compact-thumb video {
    display: block;
    width: 100%;
    aspect-ratio: 4 / 5;
    object-fit: cover;
  }

  .pb-compact-thumb .pb-preview-count {
    inset-block-start: 4px;
    inset-inline-end: 4px;
    padding: 0 6px;
  }

  .pb-compact-text {
    display: grid;
    align-content: start;
    gap: 2px;
    min-width: 0;
  }

  .pb-compact-account {
    font-size: 14px;
    font-weight: 700;
    unicode-bidi: plaintext;
    text-align: match-parent;
  }

  .pb-compact-caption {
    display: -webkit-box;
    margin: 0;
    overflow: hidden;
    font-size: 14px;
    line-height: 1.45;
    overflow-wrap: anywhere;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
  }

  .pb-post:not(.is-previewing) .pb-post-actions {
    display: flex;
    margin-top: 2px;
    padding: 0 0 0 84px;
    padding-inline: 84px 0;
  }

  .pb-post.is-previewing .pb-post-actions {
    justify-content: center;
    padding: 8px 0 0;
  }

  .pb-post:not(.is-previewing) .pb-preview-tabs {
    display: none;
  }

  .pb-preview-toggle {
    display: inline-flex;
  }

  .pb-caption-input {
    font-size: 16px;
  }

  .pb-board {
    padding: 12px 16px 24px;
  }

  .pb-board-title {
    margin-bottom: 8px;
  }

  .pb-row-head {
    min-height: 56px;
    padding-inline: 14px;
  }

  .pb-option,
  .pb-row-extra,
  .pb-row-fix {
    padding-inline: 14px;
  }

  .pb-option .pb-seg-btn,
  .pb-row-extra .pb-seg-btn {
    min-height: 40px;
  }

  .pb-sound {
    gap: 8px;
  }

  /* One scroll on a phone: the list grows with the sheet instead of scrolling inside it. */
  .pb-tracks {
    max-height: none;
    overflow: visible;
  }

  .pb-tracks-wrap {
    margin-top: 8px;
  }

  .pb-track-pick {
    min-height: 56px;
  }

  .pb-track-play {
    width: 40px;
    height: 40px;
  }

  .pb-track {
    grid-template-columns: 40px minmax(0, 1fr);
  }

  .pb-foot {
    gap: 8px;
    padding: 10px 16px max(12px, env(safe-area-inset-bottom));
    box-shadow: 0 -8px 20px rgba(15, 23, 42, 0.06);
  }

  .pb-foot-row {
    gap: 8px;
  }

  .pb-when,
  .pb-actions,
  .pb-datetime {
    width: 100%;
  }

  .pb-datetime .pb-date {
    flex: 1;
  }

  .pb-date input,
  .pb-date select {
    width: 100%;
    min-height: 44px;
    font-size: 16px;
  }

  .pb-actions {
    margin-inline-start: 0;
  }

  /* The header close does Cancel's job; the primary button gets the whole row. */
  #publishing-flow-cancel {
    display: none;
  }

  .is-finished #publishing-flow-cancel {
    display: inline-flex;
    flex: 1;
    border-color: var(--pb-line-strong);
  }

  .pb-btn {
    min-height: 52px;
  }

  .pb-btn-primary {
    flex: 1;
    min-width: 0;
    max-width: none;
    padding-block: 8px;
    white-space: normal;
    text-align: center;
    line-height: 1.25;
  }

  #publishing-scheduled-link:not(.hidden) {
    flex: 1;
  }
}

@media (prefers-reduced-motion: reduce) {
  .pb-card,
  .pb-spin,
  .pb-zoom {
    animation: none;
  }

  .pb-card * {
    transition: none !important;
  }
}

/* Approve copy is the copy step's one next step: full width, even when it is alone in the row. */
.job-details-card .copy-primary-actions > .button.copy-approve-btn,
.job-details-modal .copy-primary-actions > .button.copy-approve-btn {
  grid-column: 1 / -1;
  width: 100%;
  justify-self: stretch;
}

/* A scheduled job hides the publish button; its display rules would otherwise beat [hidden]. */
.publish-row .button.publish[hidden] {
  display: none !important;
}

/* Cancel schedule asks inside the strip: Keep it / Yes, cancel. */
.publish-scheduled {
  flex-wrap: wrap;
}

.publish-scheduled-confirm {
  display: none;
  flex: 0 0 auto;
  gap: 8px;
  margin-inline-start: auto;
}

.publish-scheduled.is-confirming .publish-scheduled-confirm {
  display: inline-flex;
}

.publish-scheduled.is-confirming .publish-scheduled-cancel {
  display: none;
}

.publish-scheduled-confirm .button {
  min-height: 36px;
  white-space: nowrap;
}

.publish-scheduled-confirm .button.publish-scheduled-confirm-yes {
  background: #b42318;
  border-color: #b42318;
  color: #ffffff;
}

.publish-scheduled-confirm .button.publish-scheduled-confirm-yes:hover:not(:disabled) {
  background: #912018;
  border-color: #912018;
}

/* Change cover sits beside Cancel schedule in the strip, the two wrap as one group, and both step aside
   while the cancel question shows. */
.publish-scheduled-actions {
  flex: 0 0 auto;
  display: inline-flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-inline-start: auto;
}

.publish-scheduled-actions .button {
  min-height: 40px;
  white-space: nowrap;
}

/* The date keeps a readable width; when the buttons do not fit beside it they drop to their own row. */
.publish-scheduled .publish-scheduled-text {
  flex: 1 1 140px;
}

.publish-scheduled-cover.button[hidden],
.publish-scheduled.is-confirming .publish-scheduled-actions {
  display: none;
}

.publish-scheduled-cover.button .action-icon {
  width: 14px;
  height: 14px;
}

/* Change the cover of a scheduled video: the publish window's large frame picker as its own small dialog. */
.scheduled-cover-modal {
  background: rgba(15, 23, 42, 0.52);
  backdrop-filter: blur(4px);
}

.sc-card {
  width: min(560px, calc(100vw - 32px));
  height: min(720px, calc(100dvh - 32px));
  grid-template-rows: auto minmax(0, 1fr) auto auto;
}

.sc-head-text {
  display: grid;
  gap: 4px;
  min-width: 0;
}

.sc-hint {
  margin: 0;
  font-size: 14px;
  line-height: 1.45;
  color: var(--pb-muted);
}

.sc-card .pb-zoom-controls {
  grid-template-columns: minmax(0, 1fr) auto;
}

.sc-card .pb-zoom-step-btn:disabled {
  opacity: 0.45;
  cursor: default;
}

.sc-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
}

.sc-card .pb-btn-primary {
  min-width: 160px;
}

@media (max-width: 640px) {
  .scheduled-cover-modal.modal {
    padding: max(8px, env(safe-area-inset-top)) 8px max(8px, env(safe-area-inset-bottom));
  }

  .sc-card {
    width: calc(100vw - 16px);
    height: calc(100dvh - max(16px, env(safe-area-inset-top)) - max(16px, env(safe-area-inset-bottom)));
  }

  .sc-card .pb-head,
  .sc-card .pb-foot {
    padding-inline: 16px;
  }

  .sc-card .pb-zoom-controls {
    padding-inline: 16px;
  }

  .sc-card .pb-btn-primary {
    flex: 1 1 auto;
    min-width: 0;
  }
}

/* New version asks right under the tools before it replaces the copy. */
.ad-copy-confirm {
  display: grid;
  gap: 10px;
  margin: 12px 0 0;
  padding: 12px;
  border: 1px solid #dccbff;
  border-radius: 12px;
  background: #faf7ff;
  text-align: start;
}

.ad-copy-confirm[hidden] {
  display: none;
}

.ad-copy-confirm-text {
  margin: 0;
  font-size: 13px;
  line-height: 1.5;
  color: #2e1065;
}

.publish-scheduled-text {
  flex: 1 1 0;
}

.publish-scheduled.is-confirming .publish-scheduled-confirm {
  flex-basis: 100%;
  justify-content: flex-end;
  padding-inline-end: 0;
}

/* After Cancel schedule: one quiet line under the publish button that fades out. */
.publish-cancelled-note {
  flex: 1 1 100%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-size: 13px;
  line-height: 1.4;
  color: #5b6474;
  animation: publishNoteIn 0.22s cubic-bezier(0.16, 1, 0.3, 1);
  transition: opacity 0.25s ease;
}

.publish-cancelled-note.is-leaving {
  opacity: 0;
}

.publish-cancelled-note-icon {
  display: inline-grid;
  place-items: center;
  width: 18px;
  height: 18px;
  border-radius: 999px;
  background: #dcfce7;
  color: #15803d;
}

.publish-cancelled-note-icon .action-icon {
  width: 11px;
  height: 11px;
}

@keyframes publishNoteIn {
  from { opacity: 0; transform: translateY(-3px); }
  to { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
  .publish-cancelled-note { animation: none; }
}

/* Adly on WhatsApp card: status pill, one primary action, quiet secondary link. */
.integration-wa-account.wa-card { display: flex; flex-direction: column; align-items: stretch; gap: 16px; }
.integration-row.integration-row-adly-whatsapp.integration-wa-account.wa-card { border-color: var(--brand-border, #e6e8f0); background: #fff; }
.wa-card-head { display: flex; align-items: center; gap: 8px; min-width: 0; }
.wa-card-icon { width: 28px; height: 28px; border-radius: 8px; background: #25d366; color: #fff; display: grid; place-items: center; flex: none; }
.wa-card-icon svg { width: 18px; height: 18px; fill: currentColor; }
.wa-card-title { font-size: 15px; font-weight: 700; color: var(--brand-ink, #1a202c); min-width: 0; }
.wa-card-pill { margin-inline-start: auto; display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 500; line-height: 1; padding: 6px 10px; border-radius: 999px; white-space: nowrap; background: #f1f2f6; color: var(--brand-ink, #1a202c); }
.wa-card-pill.is-on::before, .wa-card-pill.is-wait::before, .wa-card-pill.is-stop::before { content: ""; width: 7px; height: 7px; border-radius: 50%; flex: none; }
.wa-card-pill.is-on::before { background: #16a34a; }
.wa-card-pill.is-wait::before { background: #d97706; }
.wa-card-pill.is-off { color: #475467; }
.wa-card-pill.is-stop::before { background: #d92d20; }
.integration-wa-account.wa-card .wa-card-text { margin: 12px 0 0; font-size: 14px; line-height: 1.6; color: #374151; max-width: 62ch; }
.integration-wa-account.wa-card .wa-card-hint { margin: 8px 0 0; font-size: 13px; line-height: 1.5; color: #4b5563; }
.wa-card-number { margin-top: 12px; display: flex; align-items: baseline; justify-content: space-between; gap: 12px; padding: 12px 16px; border-radius: 12px; background: #fafafc; border: 1px solid var(--brand-border, #e6e8f0); }
.wa-card-number span { font-size: 13px; color: #4b5563; }
.wa-card-number strong { font-size: 15px; font-weight: 700; font-variant-numeric: tabular-nums; letter-spacing: 0.02em; }
.integration-wa-account.wa-card .wa-card-steps { margin: 12px 0 0; padding-inline-start: 20px; display: grid; gap: 4px; font-size: 14px; line-height: 1.55; color: #374151; }
.integration-row.integration-wa-account.wa-card .wa-card-actions { display: flex; align-items: center; justify-content: flex-start; flex-wrap: wrap; gap: 8px 16px; width: 100%; }
.integration-row.integration-wa-account.wa-card .wa-card-actions .button { flex: 0 1 auto; min-width: 160px; width: auto; }
.wa-card-link { appearance: none; border: 0; background: none; padding: 8px 4px; font: inherit; font-size: 14px; font-weight: 500; color: var(--brand-primary, #7c3aed); text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; cursor: pointer; }
.wa-card-link:hover { color: #5b21b6; }
.js-wa-disconnect.wa-card-link { color: #4b5563; }
.js-wa-disconnect.wa-card-link:hover { color: #b42318; }
@media (max-width: 640px) {
  .integration-row.integration-wa-account.wa-card .wa-card-actions .button { flex: 1 1 100%; }
  .wa-card-actions .wa-card-link { margin-inline: auto; }
}

/* Adly on WhatsApp: one account-level row above the brand cards. */
.integration-row.integration-row-adly-whatsapp.integration-wa-account { margin-top: 0; }
.integration-wa-account .integration-row-value { margin-top: 10px; }
.integration-wa-account .integration-telegram-connected { margin-top: 12px; }
.integration-wa-note {
  margin: 12px 0 0;
  color: var(--brand-ink, #1a202c);
  font-size: 13px;
  font-weight: 500;
  line-height: 1.5;
}
.integration-row.integration-wa-account .integration-row-actions { flex-wrap: nowrap; gap: 8px; }
.integration-row.integration-wa-account .integration-row-actions .button { flex: 1 1 0; width: auto; min-width: 0; font-size: 14px; }
.integration-wa-account .integration-telegram-steps,
.integration-wa-account.integration-row-messaging-locked .integration-row-value { color: #4b5563; }

/* Profile > Account: tips and offers emails switch */
.profile-emails-row { display: flex; align-items: flex-start; gap: 12px; padding: 4px 0; cursor: pointer; }
.profile-emails-row input[type="checkbox"] { flex: 0 0 18px; width: 18px; height: 18px; margin: 3px 0 0; accent-color: var(--brand-primary, #7c3aed); cursor: pointer; }
.profile-emails-row input[type="checkbox"]:focus-visible { outline: 2px solid var(--brand-primary, #7c3aed); outline-offset: 2px; }
.profile-emails-row input[type="checkbox"]:disabled { cursor: progress; }
.profile-emails-copy { display: grid; gap: 4px; }
.profile-emails-label { font-size: 15px; font-weight: 500; color: var(--brand-ink, #1a202c); }
.profile-emails-help { font-size: 14px; line-height: 1.55; color: #4b5563; }
.profile-emails-status { margin: 8px 0 0; min-height: 1.4em; font-size: 14px; color: #4b5563; }

/* Keyboard focus must always be visible (accessibility). The :where() default has no weight, so any control's own
   focus style still wins; the two named controls removed theirs. */
:where(a[href], button, [role="button"], input, select, textarea, summary, [tabindex]:not([tabindex="-1"])):focus-visible {
  outline: 2px solid var(--brand-primary, #7c3aed);
  outline-offset: 2px;
}
.nav-group-toggle:focus-visible,
.credit-topup-trigger:focus-visible {
  outline: 2px solid var(--brand-primary, #7c3aed);
  outline-offset: 2px;
}

/* Voice category: a quiet line when the Voice Studio cannot open. */
.voice-entry-msg { margin: 12px 0 0; font-size: 14px; color: #b42318; }

.animated-video-voice-picker { padding: 12px; border-radius: 14px; background: #fff; border: 1px solid rgba(124, 58, 237, 0.14); }

/* Voice jobs in Jobs: a sound-wave tile on the card, and a player with the files in the details. */
.job-thumb.voice-thumb {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 6px;
  background: #e8f0fe;
  border-color: #c9dafc;
  color: #2563eb;
}
.job-thumb.voice-thumb svg { width: 100%; height: 100%; }
.job-thumb.voice-thumb.is-running svg path { animation: voiceWaveBar 1s ease-in-out infinite; transform-origin: center; transform-box: fill-box; }
.job-thumb.voice-thumb.is-running svg path:nth-child(2) { animation-delay: 0.12s; }
.job-thumb.voice-thumb.is-running svg path:nth-child(3) { animation-delay: 0.24s; }
.job-thumb.voice-thumb.is-running svg path:nth-child(4) { animation-delay: 0.36s; }
.job-thumb.voice-thumb.is-running svg path:nth-child(5) { animation-delay: 0.48s; }
@keyframes voiceWaveBar { 50% { transform: scaleY(0.45); } }
.voice-job-meta { font-variant-numeric: tabular-nums; }

.voice-job-details { display: flex; flex-direction: column; gap: 18px; font-family: 'Tajawal', 'Cairo', system-ui, -apple-system, 'Segoe UI', sans-serif; }
.voice-job-head { display: flex; align-items: center; gap: 12px; }
.voice-job-icon {
  flex: 0 0 auto; display: inline-flex; width: 44px; height: 44px; padding: 11px;
  border-radius: 12px; background: #e8f0fe; color: #2563eb;
}
.voice-job-icon svg { width: 100%; height: 100%; }
.voice-job-head-text { min-width: 0; }
.voice-job-head h3 { margin: 0; font-size: 18px; font-weight: 700; line-height: 1.3; color: #111827; }
.voice-job-head .voice-job-meta { margin: 2px 0 0; font-size: 14px; }
.voice-job-video { display: block; width: auto; max-width: 100%; height: auto; max-height: min(60vh, 460px); margin-inline: auto; border-radius: 14px; background: #0f172a; }
.voice-job-track { display: flex; flex-direction: column; gap: 6px; }
.voice-job-track-label { font-size: 14px; font-weight: 700; color: #111827; }
.voice-job-track audio { width: 100%; height: 44px; }
.voice-job-downloads { display: flex; flex-wrap: wrap; gap: 8px; }
.voice-job-dl { display: inline-flex; align-items: center; gap: 8px; min-height: 40px; }
.voice-job-tip { margin: 0; font-size: 14px; }
.voice-job-state {
  display: flex; flex-direction: column; align-items: flex-start; gap: 12px;
  padding: 18px; border-radius: 14px; background: #f7f7fb; border: 1px solid #e6e8f0;
}
.voice-job-state p { margin: 0; font-size: 14px; line-height: 1.5; color: #374151; }
.voice-job-state.is-failed { background: #fef3f2; border-color: #fecdca; }
.voice-job-state.is-failed p { color: #b42318; }
.voice-job-wave { display: inline-flex; width: 40px; height: 40px; color: #2563eb; }
.voice-job-wave svg { width: 100%; height: 100%; }
.voice-job-wave svg path { animation: voiceWaveBar 1s ease-in-out infinite; transform-origin: center; transform-box: fill-box; }
.voice-job-wave svg path:nth-child(2) { animation-delay: 0.12s; }
.voice-job-wave svg path:nth-child(3) { animation-delay: 0.24s; }
.voice-job-wave svg path:nth-child(4) { animation-delay: 0.36s; }
.voice-job-wave svg path:nth-child(5) { animation-delay: 0.48s; }
.voice-job-script { border-top: 1px solid #edf0f5; padding-top: 14px; }
.voice-job-script summary { cursor: pointer; font-size: 14px; font-weight: 700; color: #111827; }
.voice-job-script p { margin: 10px 0 0; font-size: 14px; line-height: 1.7; color: #374151; white-space: pre-wrap; }
@media (prefers-reduced-motion: reduce) {
  .job-thumb.voice-thumb.is-running svg path,
  .voice-job-wave svg path { animation: none; }
}

/* Brand Library: a voice file is a card of the same size as a visual, the Voice blue, with its own play button. */
.library-visual-media.is-audio { background: #e8f0fe; }
.library-audio-tile {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 12px;
  aspect-ratio: 4 / 5;
  padding: 16px;
  color: #1e3a8a;
  background-color: #e8f0fe;
  background-image: radial-gradient(circle, rgba(37, 99, 235, 0.16) 1px, transparent 1.4px);
  background-size: 14px 14px;
}
.library-audio-wave { display: inline-flex; width: 56px; height: 56px; color: #2563eb; margin: auto; }
.library-audio-wave svg { width: 100%; height: 100%; }
.library-visual-card.is-playing .library-audio-wave svg path { animation: voiceWaveBar 1s ease-in-out infinite; transform-origin: center; transform-box: fill-box; }
.library-visual-card.is-playing .library-audio-wave svg path:nth-child(2) { animation-delay: 0.12s; }
.library-visual-card.is-playing .library-audio-wave svg path:nth-child(3) { animation-delay: 0.24s; }
.library-visual-card.is-playing .library-audio-wave svg path:nth-child(4) { animation-delay: 0.36s; }
.library-visual-card.is-playing .library-audio-wave svg path:nth-child(5) { animation-delay: 0.48s; }
.library-audio-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; padding-inline-end: 48px; }
.library-audio-text strong {
  font-size: 14px; font-weight: 700; line-height: 1.35; color: #111827;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.library-audio-text span { font-size: 12px; color: #3b4a6b; font-variant-numeric: tabular-nums; }
.library-audio-play {
  position: absolute; inset-inline-end: 14px; bottom: 14px;
  display: grid; place-items: center; width: 40px; height: 40px; padding: 11px;
  border-radius: 50%; background: #2563eb; color: #ffffff;
  box-shadow: 0 6px 14px -6px rgba(37, 99, 235, 0.6);
}
.library-audio-play svg { width: 100%; height: 100%; }
.library-visual-card.is-audio:hover .library-audio-play { background: #1d4ed8; }
@media (prefers-reduced-motion: reduce) {
  .library-visual-card.is-playing .library-audio-wave svg path { animation: none; }
}

/* Voice job: what to do with a finished voice, at the foot of its details. */
.voice-job-next { display: flex; flex-direction: column; gap: 10px; padding-top: 16px; border-top: 1px solid #edf0f5; }
.voice-job-next-title { font-size: 14px; font-weight: 700; color: #111827; }
.voice-job-next-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.voice-job-next-actions .button { min-height: 40px; }

/* Motion Video built on a voiceover from Voice: the narration sits at the top of the content step. */
.animated-video-narration {
  display: flex; flex-direction: column; gap: 10px; padding: 14px 16px;
  border: 1px solid #c9dafc; border-radius: 14px; background: #f3f7ff;
  margin-bottom: 20px;
}
.animated-video-narration .avn-head { display: flex; align-items: center; gap: 12px; }
.animated-video-narration .avn-icon { flex: 0 0 auto; display: inline-flex; width: 36px; height: 36px; padding: 8px; border-radius: 10px; background: #e8f0fe; color: #2563eb; }
.animated-video-narration .avn-icon svg { width: 100%; height: 100%; }
.animated-video-narration .avn-text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.animated-video-narration .avn-label { font-size: 12px; color: #3b4a6b; }
.animated-video-narration .avn-text b { font-size: 14px; font-weight: 700; color: #111827; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.animated-video-narration audio { width: 100%; height: 40px; }
.animated-video-narration .hint { margin: 0; }

/* ===== Tools: the free tools inside the Creator =====
   A sixth category card (graphite: utilities, not a creative format). Six categories fill two rows of three on
   desktop and three rows of two on phones, so the Brand Plan card takes the full row under them.
   Type scale here: 12 (meta), 14 (body, controls, group names), 16 (section titles), 18 (job title). */
.create-category-card[data-category="tools"] { --tone: #475569; --tone-soft: #eef1f6; }
.create-category-grid > .create-plan-promo { grid-column: 1 / -1; }
@media (min-width: 1024px) {
  .create-category-grid { grid-auto-rows: auto; }
  .create-category-grid > .create-plan-promo {
    flex-direction: row;
    align-items: center;
    gap: 16px;
    padding: 16px 18px;
  }
  .create-category-grid > .create-plan-promo .cpp-copy { flex: 1 1 auto; }
  .create-category-grid > .create-plan-promo .cpp-cta { margin-top: 0; }
}

.tools-find {
  display: flex;
  align-items: center;
  gap: 10px;
  max-width: 440px;
  min-height: 44px;
  margin: 0 0 22px;
  padding: 0 14px;
  border: 1px solid #e6e8f0;
  border-radius: 12px;
  background: #ffffff;
  color: #5b6474;
  cursor: text;
  transition: border-color 0.2s ease-out, box-shadow 0.2s ease-out;
}
.tools-find:focus-within { border-color: #7c3aed; box-shadow: 0 0 0 3px rgba(124, 58, 237, 0.14); }
.tools-find-icon { flex: 0 0 auto; }
.tools-find input {
  flex: 1 1 auto;
  min-width: 0;
  height: 42px;
  border: 0;
  outline: 0;
  background: transparent;
  color: #1a202c;
  font: inherit;
  font-size: 14px;
}
.tools-find input::placeholder { color: #6b7280; }
.tools-find input::-webkit-search-cancel-button { cursor: pointer; }
.tools-group + .tools-group { margin-top: 26px; }
.tools-group[hidden],
.tools-grid > .job-type-card[hidden] { display: none !important; }
.tools-group-title { margin: 0 0 12px; font-size: 14px; font-weight: 700; color: #374151; }
.tools-find-empty { margin: 4px 0 0; font-size: 14px; color: #5b6474; }

/* A tool on step 2: its own frame sits on the step card in place of the shared fields. */
#wizard-step-2.is-free-tool > :not(.step-panel-header):not(#free-tool-section) { display: none !important; }
.free-tool-frame-wrap { position: relative; }
.free-tool-frame-wrap.is-loading { min-height: 320px; }
.free-tool-frame { display: block; width: 100%; height: 560px; border: 0; background: transparent; }
.free-tool-loading {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  font-size: 14px;
  color: #5b6474;
  background: #ffffff;
}
.free-tool-loading[hidden] { display: none; }
.free-tool-spinner {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  border: 2px solid #dccbff;
  border-top-color: #7c3aed;
  animation: freeToolSpin 0.8s linear infinite;
}
@keyframes freeToolSpin { to { transform: rotate(360deg); } }
.free-tool-saved {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 16px 0 0;
  font-size: 14px;
  color: #5b21b6;
}
.free-tool-saved[hidden] { display: none; }
.free-tool-saved::before {
  content: '';
  flex: 0 0 auto;
  width: 16px;
  height: 16px;
  background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E") center / contain no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E") center / contain no-repeat;
}
.free-tool-saved-open {
  margin-inline-start: 4px;
  padding: 6px 2px;
  border: 0;
  background: none;
  color: #5b21b6;
  font: inherit;
  font-weight: 700;
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
}
.free-tool-saved-open:hover { color: #4c1d95; }
.free-tool-saved-open:focus-visible { outline: 2px solid #7c3aed; outline-offset: 2px; border-radius: 4px; }
.free-tool-saved.is-error { color: #b42318; }
.free-tool-saved.is-error::before { display: none; }
@media (prefers-reduced-motion: reduce) {
  .free-tool-spinner { animation-duration: 2.4s; }
}

/* Tool jobs in Jobs: the tool's icon (or its first images) on the card; the files and texts in the details. */
.job-thumb.tool-thumb {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 7px;
  background: #eef1f6;
  border-color: #d9dee8;
  color: #475569;
}
.job-thumb.tool-thumb svg { width: 100%; height: 100%; }
.tool-job-count { font-variant-numeric: tabular-nums; }
.tool-job-details { display: flex; flex-direction: column; gap: 22px; font-family: 'Tajawal', 'Cairo', system-ui, -apple-system, 'Segoe UI', sans-serif; }
.tool-job-icon {
  flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px;
  border-radius: 12px; background: #eef1f6; color: #475569;
}
.tool-job-section h4 { margin: 0 0 12px; font-size: 16px; font-weight: 700; color: #111827; }
.tool-job-media-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 12px; }
.tool-job-media { margin: 0; overflow: hidden; border: 1px solid #e6e8f0; border-radius: 14px; background: #ffffff; }
.tool-job-media img,
.tool-job-media video {
  display: block;
  width: 100%;
  aspect-ratio: 1;
  object-fit: contain;
  /* A checkerboard, so a cut-out PNG shows where it is transparent. */
  background: repeating-conic-gradient(#f1f3f7 0% 25%, #ffffff 0% 50%) 50% / 16px 16px;
}
.tool-job-media figcaption { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 8px 10px; }
.tool-job-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 12px; color: #5b6474; }
.tool-job-dl { display: inline-flex; align-items: center; gap: 6px; min-height: 36px; flex: 0 0 auto; }
.tool-job-files { margin: 12px 0 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 8px; }
.tool-job-media-grid + .tool-job-files { margin-top: 12px; }
.tool-job-files:first-child { margin-top: 0; }
.tool-job-file { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border: 1px solid #e6e8f0; border-radius: 12px; }
.tool-job-file .tool-job-name { flex: 1 1 auto; font-size: 14px; color: #1a202c; }
.tool-job-ext {
  flex: 0 0 auto; min-width: 42px; padding: 4px 6px; border-radius: 8px; background: #eef1f6; color: #475569;
  font-size: 12px; font-weight: 700; text-align: center;
}
.tool-job-text { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; padding: 14px; border: 1px solid #e6e8f0; border-radius: 14px; }
.tool-job-text + .tool-job-text { margin-top: 10px; }
.tool-job-text p { width: 100%; max-height: 320px; margin: 0; overflow: auto; font-size: 14px; line-height: 1.7; color: #1f2937; white-space: pre-wrap; overflow-wrap: anywhere; }

/* Tools list: 42 tools, so each is a compact row (icon beside the name) on the same card surface as the
   other modes, in three columns; groups are titled, and the search filters across all of them. */
#wizard-step-1 .tools-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; max-width: none; }
#wizard-step-1 .tools-grid > .job-type-card {
  flex-direction: row;
  align-items: center;
  gap: 12px;
  min-height: 64px;
  padding: 12px 14px;
  border-radius: 14px;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
}
#wizard-step-1 .tools-grid > .job-type-card:hover { transform: translateY(-2px); box-shadow: 0 10px 22px rgba(15, 23, 42, 0.08); }
#wizard-step-1 .tools-grid .jtc-icon { width: 36px; height: 36px; border-radius: 10px; }
#wizard-step-1 .tools-grid .jtc-icon svg { width: 20px; height: 20px; }
#wizard-step-1 .tools-grid .jtc-text { gap: 2px; padding-top: 0; }
#wizard-step-1 .tools-grid .jtc-title { font-size: 14px; font-weight: 700; line-height: 1.3; }
#wizard-step-1 .tools-grid .jtc-desc {
  font-size: 12px;
  line-height: 1.4;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
#wizard-step-1 .tools-grid > .job-type-card.selected::after { top: 8px; inset-inline-end: 8px; }
.tools-group-title { font-size: 16px; color: #111827; }
@media (max-width: 900px) {
  #wizard-step-1 .tools-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 560px) {
  #wizard-step-1 .tools-grid { grid-template-columns: 1fr; gap: 8px; }
  .tools-find { max-width: none; }
  .tools-find input { font-size: 16px; }
}
/* Searching shows and hides cards: no staggered entrance replaying on every key. */
#wizard-step-1.active .tools-grid > .job-type-card { animation: none; }
@media (max-width: 640px) {
  .free-tool-saved { flex-wrap: wrap; }
  .free-tool-saved-open { min-height: 44px; padding: 10px 4px; }
}

/* =========================================================
   UGC mobile pass (2026-11-08): custom actors + place photos
   ========================================================= */
/* Custom actor add card: a real button, and a clear "full" state instead of vanishing */
button.ugc-custom-actor-add-card {
  font: inherit;
  color: inherit;
  width: 100%;
  appearance: none;
}
.ugc-custom-actor-add-card .ugc-custom-actor-add-icon {
  color: var(--brand-primary, #7c3aed);
  border-color: color-mix(in srgb, var(--brand-primary, #7c3aed) 35%, #d1d5db);
  background: color-mix(in srgb, var(--brand-primary, #7c3aed) 5%, #fff);
}
button.ugc-custom-actor-add-card:focus-visible {
  outline: 2px solid var(--brand-primary, #7c3aed);
  outline-offset: 2px;
}
.ugc-custom-actor-add-card.is-full,
.ugc-custom-actor-add-card.is-full:hover {
  cursor: default;
  border-color: var(--brand-border, #e5e7eb);
  background: #f8fafc;
  box-shadow: none;
}
.ugc-custom-actor-add-card.is-full .ugc-custom-actor-add-icon {
  color: #64748b;
  border-color: #cbd5e1;
  border-style: solid;
  background: #fff;
}
.ugc-custom-actor-add-card.is-full .ugc-actor-meta { color: #475569; }
/* Naming form: labelled, roomy, and Cancel reads as the secondary action */
.ugc-custom-actor-form { gap: 10px; justify-items: start; }
.ugc-custom-actor-name-label {
  font-size: 14px;
  font-weight: 500;
  color: var(--brand-ink, #1f2937);
  margin: 4px 0 -4px;
}
.ugc-custom-actor-form-actions .button { min-height: 44px; padding-inline: 18px; }
#create-panel .ugc-custom-actor-form-actions .button.ghost,
.ugc-custom-actor-form-actions .button.ghost {
  background: #fff;
  color: var(--brand-ink, #1f2937);
  border: 1px solid var(--brand-border, #d1d5db);
  box-shadow: none;
}
.ugc-custom-actor-form-actions .button[aria-busy="true"] { opacity: 0.75; cursor: progress; }

/* Place photos: add right here, see the upload, it gets picked */
.ugc-scene-place-add {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  min-height: 132px;
  padding: 12px 8px;
  border: 1.5px dashed color-mix(in srgb, var(--brand-primary, #7c3aed) 35%, #d1d5db);
  border-radius: 12px;
  background: color-mix(in srgb, var(--brand-primary, #7c3aed) 4%, #fff);
  color: var(--brand-ink, #1f2937);
  font: inherit;
  text-align: center;
  cursor: pointer;
  transition: border-color 0.15s ease-out, background-color 0.15s ease-out;
}
.ugc-scene-place-add:hover { border-color: var(--brand-primary, #7c3aed); background: color-mix(in srgb, var(--brand-primary, #7c3aed) 8%, #fff); }
.ugc-scene-place-add:focus-visible { outline: 2px solid var(--brand-primary, #7c3aed); outline-offset: 2px; }
.ugc-scene-place-add-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: #fff;
  color: var(--brand-primary, #7c3aed);
  box-shadow: 0 1px 3px rgba(15, 23, 42, 0.08);
  margin-bottom: 2px;
}
.ugc-scene-place-add-icon { position: relative; }
.ugc-scene-place-add-icon::after {
  content: '+';
  position: absolute;
  inset-inline-end: -4px;
  bottom: -2px;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--brand-primary, #7c3aed);
  color: #fff;
  font-size: 14px;
  font-weight: 700;
  line-height: 18px;
  text-align: center;
  box-shadow: 0 0 0 2px #fff;
}
.ugc-scene-place-add-title { font-size: 14px; font-weight: 500; line-height: 1.3; }
.ugc-scene-place-add-hint { font-size: 12px; color: var(--brand-muted, #6b7280); }
.ugc-scene-place-card { position: relative; }
.ugc-scene-place-thumb { position: relative; display: block; }
.ugc-scene-place-card.is-uploading { cursor: default; }
.ugc-scene-place-card.is-uploading img { opacity: 0.55; filter: saturate(0.6); }
.ugc-scene-place-progress {
  position: absolute;
  inset-inline: 10px;
  bottom: 10px;
  height: 6px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.85);
  overflow: hidden;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.15);
}
.ugc-scene-place-progress > span {
  display: block;
  height: 100%;
  width: 100%;
  border-radius: inherit;
  background: var(--brand-primary, #7c3aed);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 0.2s ease-out;
}
[dir="rtl"] .ugc-scene-place-progress > span { transform-origin: right center; }
.ugc-scene-place-card-status { font-size: 12px; font-weight: 500; color: var(--brand-primary, #7c3aed); }
.ugc-scene-place-card.is-failed { border-color: #fca5a5; }
.ugc-scene-place-card.is-failed .ugc-scene-place-card-status { color: #b91c1c; }
.ugc-scene-place-upload-actions { display: flex; flex-wrap: wrap; gap: 4px 10px; margin-top: 2px; }
.ugc-scene-place-retry,
.ugc-scene-place-dismiss {
  padding: 6px 0;
  border: 0;
  background: none;
  font: inherit;
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
}
.ugc-scene-place-retry { color: var(--brand-primary, #7c3aed); }
.ugc-scene-place-dismiss { color: var(--brand-muted, #6b7280); }
.ugc-scene-place-card.is-selected::after {
  content: '';
  position: absolute;
  top: 8px;
  inset-inline-end: 8px;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: var(--brand-primary, #7c3aed) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E") center / 14px no-repeat;
  box-shadow: 0 1px 3px rgba(15, 23, 42, 0.25);
}
#ugc-scene-place-field .ugc-scene-place-empty { margin: 0 0 10px; font-size: 14px; color: var(--brand-muted, #6b7280); }

/* Photo library modal: upload shows its progress, new photos stand out */
#brand-assets-manage-modal .brand-assets-manage-upload { position: relative; overflow: hidden; }
#brand-assets-manage-modal .brand-assets-manage-upload.is-busy {
  pointer-events: none;
  border-style: solid;
  color: #5b21b6;
  background: linear-gradient(90deg, #efe7ff var(--upload-pct, 0%), #faf8ff var(--upload-pct, 0%));
}
#brand-assets-manage-modal .brand-assets-manage-item.is-just-added {
  border-color: #d98a0b;
  box-shadow: 0 0 0 3px rgba(217, 138, 11, 0.22);
}
@media (max-width: 720px) {
  #brand-assets-manage-modal .brand-assets-manage-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  /* 16px stops iPhone Safari zooming the page when the label menu opens */
  #brand-assets-manage-modal .brand-assets-manage-item .select,
  #brand-assets-manage-modal .brand-assets-manage-category { font-size: 16px; }
}

/* Phones: messages show at the top, never over the wizard's Cancel / Back / Next bar */
@media (max-width: 720px) {
  #toast-stack {
    top: calc(env(safe-area-inset-top, 0px) + 12px);
    bottom: auto;
    left: 16px;
    right: 16px;
    max-width: none;
  }
  #toast-stack .toast-close { min-width: 36px; min-height: 36px; }
}

/* A required field the person skipped: brief ring so the eye lands on it after the scroll */
.create-field-attention {
  border-radius: 14px;
  box-shadow: 0 0 0 3px rgba(220, 38, 38, 0.35);
  transition: box-shadow 0.3s ease-out;
}

/* Onboarding / Edit brand: the error sits under the field that needs it */
.onboarding-inline-error {
  margin: 6px 0 0;
  font-size: 14px;
  font-weight: 500;
  line-height: 1.4;
  color: #b91c1c;
}

/* UGC script part: grows with the words, clears the Speak button, says when it is full */
.ugc-seg-dialogue-shell textarea.ugc-seg-dialogue-input { resize: none; overflow-y: hidden; }
.ugc-seg-dialogue-shell:has(.voice-mic-btn.has-label) textarea.ugc-seg-dialogue-input { padding-bottom: 54px !important; }
.ugc-seg-dialogue-count.is-near > span { color: #b45309; font-weight: 500; }
.ugc-seg-dialogue-count.is-full { color: #b91c1c; }
.ugc-seg-dialogue-count.is-full > span { font-weight: 700; }
.ugc-seg-dialogue-full { font-style: normal; font-weight: 500; }
.ugc-segment-scene-words-block > .ugc-seg-dialogue-count.is-full { grid-column: 1 / -1; grid-row: 4; }
/* Phones: while an aspect-ratio menu is open, the page lifts above the bottom bar so the menu can show.
   Fade the bar out instead of letting chips paint over it and catch taps meant for Next. */
@media (max-width: 720px) {
  #create-panel #create-form.create-aspect-menu-open #wizard-nav {
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.15s ease-out;
  }
}
/* Multi Mode product card on phones: one column that fits the card (Price and Notes ran off-screen) */
@media (max-width: 720px) {
  .multi-product-row { min-width: 0; }
  .multi-fields { width: 100%; min-width: 0; grid-template-columns: minmax(0, 1fr); }
  .multi-field, .multi-field-control { min-width: 0; }
  .multi-field input, .multi-field textarea { width: 100%; min-width: 0; box-sizing: border-box; }
  .multi-apply-down-btn { width: 36px; height: 36px; opacity: 0.7; font-size: 14px; }
}

.ugc-segment-scene-words-block > .ugc-seg-dialogue-count.is-full { color: #b91c1c; }
.ugc-segment-scene-words-block > .ugc-seg-dialogue-count.is-near > span { color: #b45309; }
#onboarding-form .onboarding-inline-error { color: #b91c1c !important; }

/* =========================================================
   Mobile polish pass (2026-11-08)
   ========================================================= */
/* Brand Library: no hover on touch screens, so the tile buttons are always shown there */
@media (hover: none) {
  .library-visual-actions { opacity: 1; }
  .library-action-btn { width: 40px; height: 40px; }
}
.library-visual-card:focus-within .library-visual-actions { opacity: 1; }
/* Usage limits window: labels wrap instead of being cut ("Landing page l...") */
#credits-modal .credits-modal-body .credit-pill { height: auto; min-height: 68px; }
#credits-modal .credits-modal-body .credit-pill .credit-label {
  white-space: normal;
  overflow: visible;
  text-overflow: clip;
  line-height: 1.3;
}
/* Phones: these pages had no side padding at all, so their text touched the screen edge.
   (Every other page already has its own; a global gutter doubled it.) */
@media (max-width: 640px) {
  .app-content > main.brand-library-container,
  .app-content > main.tasks-page,
  .app-content > main.product-updates-main,
  .app-content > main.container:has(> .landing-library-header),
  .app-content > main.container:has(> .ms-page) { padding-inline: 12px; }
  .app-content > main.brand-library-container > .section-header,
  .app-content > main.tasks-page > .section-header,
  .app-content > main.product-updates-main > .section-header { padding-inline: 0; }
}
/* Touch screens: small "?" and remove buttons were 18-24px, too small for a finger */
@media (pointer: coarse) {
  .pricing-tooltip,
  .multi-brand-help-btn { min-width: 28px; min-height: 28px; }
  .upload-remove,
  .swipe-visual-thumb-remove,
  .design-thumb-remove,
  .carousel-slide-remove,
  .ugc-custom-actor-remove,
  .brand-strength-example-remove { min-width: 32px; min-height: 32px; }
  .credit-topup-trigger { min-width: 36px; min-height: 36px; }
}
/* "Create job" stays on one line (it wrapped next to its usage pill on phones) */
#create-panel #wizard-nav #wizard-create { white-space: nowrap; }
@media (max-width: 480px) {
  #create-panel #wizard-nav:has(#wizard-create:not([style*="none"])) #wizard-cancel { display: none; }
}

/* Scene Studio options on phones: one toggle per row instead of three squeezed columns */
@media (max-width: 560px) {
  #create-panel .video-omni-feature-grid { grid-template-columns: minmax(0, 1fr) !important; }
  #create-panel .video-omni-feature-grid select { min-height: 40px; }
}
.profile-history-empty { padding: 28px 12px; text-align: center; font-size: 14px; }
/* Sideways-scrolling tab bars on phones: fade the far edge so it is clear there are more tabs */
@media (max-width: 640px) {
  .wa-nav,
  .profile-sidebar {
    -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 36px), transparent);
    mask-image: linear-gradient(90deg, #000 calc(100% - 36px), transparent);
  }
  [dir="rtl"] .wa-nav,
  [dir="rtl"] .profile-sidebar {
    -webkit-mask-image: linear-gradient(270deg, #000 calc(100% - 36px), transparent);
    mask-image: linear-gradient(270deg, #000 calc(100% - 36px), transparent);
  }
}
/* "0/100" read backwards as "100/0" in Arabic: keep number pairs left to right */
#credits-modal .credits-modal-body .credit-pill .credit-value { direction: ltr; unicode-bidi: isolate; }
[dir="rtl"] #credits-modal .credits-modal-body .credit-pill .credit-value { text-align: right; }
[dir="rtl"] #credits-modal .credits-modal-body .credit-pill .credit-value { justify-content: flex-end; align-self: flex-start; width: 100%; }

/* =========================================================
   UGC create revamp (2026-11-09): one segmented control for every either/or choice,
   actor tiles that match the library, a compact new-actor card, one accent colour
   ========================================================= */
/* The wizard is Adly purple; brand colour no longer leaks into these parts */
#create-panel #ugc-wizard-step-5,
#create-panel #ugc-basic-setup,
#brand-assets-manage-modal { --brand-primary: var(--cx-accent, #7c3aed); }

/* ---------- Choice controls: Adly's own create-panel pills (no new style) ---------- */
/* Actor source uses the same pill as every other single choice in Create */
#create-panel .ugc-actor-source-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0 0 14px;
  padding: 0;
  border: 0;
  background: none;
}
#create-panel .ugc-actor-source-tabs .tab-button {
  height: auto;
  min-height: 36px;
  padding: 0 14px;
  border: 1px solid var(--cx-line);
  border-radius: 12px;
  background: #fff;
  box-shadow: none;
  color: #374151;
  font-size: 14px;
  font-weight: 500;
  transition: border-color 0.16s ease-out, background-color 0.16s ease-out, color 0.16s ease-out;
}
#create-panel .ugc-actor-source-tabs .tab-button:hover { border-color: var(--cx-line-hover); background: #fafbfd; }
#create-panel .ugc-actor-source-tabs .tab-button.active,
#create-panel .ugc-actor-source-tabs .tab-button[aria-selected="true"] {
  border-color: var(--cx-accent);
  background: var(--cx-accent-soft);
  color: var(--cx-accent-ink);
  font-weight: 700;
  box-shadow: 0 0 0 1px var(--cx-accent);
}
#create-panel .ugc-actor-source-tabs .tab-button:focus-visible { outline: 2px solid var(--cx-accent); outline-offset: 2px; }
@media (max-width: 1023px) {
  #create-panel .ugc-actor-source-tabs .tab-button { min-height: 44px; padding: 0 16px; }
}
/* Phones: a yes/no pair shares the row evenly instead of wrapping one pill onto its own line */
@media (max-width: 640px) {
  #create-panel #ugc-basic-setup .ugc-toggle-row { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); }
  #create-panel #ugc-basic-setup .ugc-toggle-row .ugc-toggle-option { padding: 0 8px; font-size: 14px; text-align: center; white-space: normal; line-height: 1.25; }
}
/* The full card's note wraps instead of being cut */
#create-panel #ugc-custom-actor-grid .ugc-custom-actor-add-card .ugc-actor-meta { white-space: normal; line-height: 1.3; text-align: center; }

/* ---------- Where is this filmed (phones and tablets): Manage sits beside the title ---------- */
@media (max-width: 1023px) {
#create-panel #ugc-scene-place-field {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  column-gap: 12px;
}
#create-panel #ugc-scene-place-field > label { grid-column: 1; grid-row: 1; margin-bottom: 8px; }
#create-panel #ugc-scene-place-field .ugc-scene-place-controls { display: contents; }
#create-panel #ugc-scene-place-field #ugc-scene-place-mode { grid-column: 1 / -1; grid-row: 2; }
#create-panel #ugc-scene-place-field #ugc-scene-place-manage-btn {
  grid-column: 2;
  grid-row: 1;
  align-self: start;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 32px;
  margin: -4px 0 4px;
  padding: 4px 2px;
  border: 0;
  border-radius: 8px;
  background: none;
  box-shadow: none;
  color: var(--cx-accent-ink);
  font-size: 14px;
  font-weight: 500;
}
#create-panel #ugc-scene-place-field #ugc-scene-place-manage-btn:hover { text-decoration: underline; text-underline-offset: 3px; }
#create-panel #ugc-scene-place-field .ugc-scene-place-picker { grid-column: 1 / -1; margin-top: 12px; }
}

/* ---------- Actor library filters: one row ---------- */
#create-panel #ugc-actor-filters {
  flex-wrap: nowrap;
  gap: 8px;
  margin: 14px 0 12px;
  overflow-x: auto;
  scrollbar-width: none;
}
#create-panel #ugc-actor-filters::-webkit-scrollbar { display: none; }
#create-panel #ugc-actor-filters .ugc-actor-filter-select {
  flex: 1 0 auto;
  min-width: 0;
  height: 40px;
  padding-block: 0;
  padding-inline: 14px 34px;
  border: 1px solid var(--cx-line);
  border-radius: 999px;
  background-color: #fff;
  color: var(--cx-label);
  font-weight: 500;
}
[dir="rtl"] #create-panel #ugc-actor-filters .ugc-actor-filter-select { padding-inline: 34px 14px; }

/* ---------- Custom and recent actors: the same photo tiles as the library ---------- */
#create-panel :is(#ugc-custom-actor-grid, #ugc-recent-actor-grid) {
  grid-template-columns: repeat(auto-fill, minmax(116px, 1fr));
  gap: 10px;
  margin-bottom: 0;
}
#create-panel :is(#ugc-custom-actor-grid, #ugc-recent-actor-grid) .ugc-actor-card {
  position: relative;
  gap: 2px;
  padding: 6px 6px 10px;
  border: 1px solid #e6e8f0;
  border-radius: 14px;
  background: #fff;
  box-shadow: none;
}
#create-panel :is(#ugc-custom-actor-grid, #ugc-recent-actor-grid) .ugc-actor-card:hover {
  border-color: color-mix(in srgb, var(--cx-accent) 40%, #e6e8f0);
  box-shadow: 0 6px 18px rgba(15, 23, 42, 0.06);
}
#create-panel :is(#ugc-custom-actor-grid, #ugc-recent-actor-grid) .ugc-actor-card.selected {
  border-color: var(--cx-accent);
  background: #fff;
  box-shadow: 0 0 0 1px var(--cx-accent);
}
#create-panel :is(#ugc-custom-actor-grid, #ugc-recent-actor-grid) .ugc-actor-card.selected::after {
  content: '';
  position: absolute;
  top: 12px;
  inset-inline-end: 12px;
  width: 24px;
  height: 24px;
  border: 2px solid #fff;
  border-radius: 50%;
  background: var(--cx-accent) url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'><path d='M5 12.5l4.5 4.5L19 7.5'/></svg>") center / 12px no-repeat;
  box-shadow: 0 2px 8px rgba(76, 29, 149, 0.3);
}
#create-panel :is(#ugc-custom-actor-grid, #ugc-recent-actor-grid) .ugc-actor-photo { position: relative; display: block; width: 100%; margin-bottom: 6px; }
#create-panel :is(#ugc-custom-actor-grid, #ugc-recent-actor-grid) .ugc-actor-thumb,
#create-panel :is(#ugc-custom-actor-grid, #ugc-recent-actor-grid) .ugc-actor-thumb-placeholder {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 1 / 1;
  margin-bottom: 6px;
  border: 0;
  border-radius: 10px;
  object-fit: cover;
  object-position: center 25%;
  cursor: pointer;
}
#create-panel :is(#ugc-custom-actor-grid, #ugc-recent-actor-grid) .ugc-actor-photo .ugc-actor-thumb { margin-bottom: 0; }
#create-panel :is(#ugc-custom-actor-grid, #ugc-recent-actor-grid) .ugc-actor-thumb:hover { transform: none; }
#create-panel :is(#ugc-custom-actor-grid, #ugc-recent-actor-grid) .ugc-actor-name { font-size: 14px; font-weight: 700; line-height: 1.35; }
#create-panel :is(#ugc-custom-actor-grid, #ugc-recent-actor-grid) .ugc-actor-meta { font-size: 12.5px; font-weight: 500; line-height: 1.4; color: var(--cx-muted); }
#create-panel #ugc-custom-actor-grid .ugc-custom-actor-card { padding-bottom: 10px; }
#create-panel #ugc-custom-actor-grid .ugc-custom-actor-remove {
  position: absolute;
  top: 6px;
  bottom: auto;
  inset-inline-start: 6px;
  inset-inline-end: auto;
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  padding: 0;
  border: 0;
  border-radius: 9px;
  background: rgba(255, 255, 255, 0.94);
  color: #b91c1c;
  box-shadow: 0 1px 4px rgba(15, 23, 42, 0.18);
  cursor: pointer;
}
#create-panel #ugc-custom-actor-grid .ugc-custom-actor-remove:hover { background: #fff; color: #991b1b; }
#create-panel #ugc-custom-actor-grid .ugc-custom-actor-add-card { border-style: solid; }
#create-panel #ugc-custom-actor-grid .ugc-custom-actor-add-icon {
  display: grid;
  place-items: center;
  width: 100%;
  height: auto;
  aspect-ratio: 1 / 1;
  margin-bottom: 6px;
  border: 1.5px dashed color-mix(in srgb, var(--cx-accent) 40%, #d1d5db);
  border-radius: 10px;
  background: var(--cx-accent-soft);
  color: var(--cx-accent);
}
#create-panel #ugc-custom-actor-grid button.ugc-custom-actor-add-card:hover .ugc-custom-actor-add-icon { border-style: solid; }
#create-panel #ugc-custom-actor-grid .ugc-custom-actor-add-card.is-full .ugc-custom-actor-add-icon {
  border: 1.5px solid #e2e5ec;
  background: #f6f7fa;
  color: #64748b;
}

/* ---------- New actor: photo beside the name, buttons in one row ---------- */
#create-panel #ugc-custom-actor-form {
  grid-template-columns: 76px minmax(0, 1fr);
  grid-template-areas: "photo label" "photo input" "actions actions";
  align-items: end;
  gap: 6px 14px;
  margin-top: 10px;
  padding: 14px;
  border: 1px solid var(--cx-line);
  border-radius: 16px;
  background: #fbfaff;
  justify-items: stretch;
}
#create-panel #ugc-custom-actor-form .ugc-custom-actor-picker {
  grid-area: photo;
  align-self: start;
  width: 76px;
  height: 76px;
  border: 0;
  border-radius: 14px;
  background: #eef0f5;
}
#create-panel #ugc-custom-actor-form .ugc-custom-actor-picker img { border-radius: 14px; }
#create-panel #ugc-custom-actor-form .ugc-custom-actor-name-label { grid-area: label; margin: 0; }
#create-panel #ugc-custom-actor-form .input { grid-area: input; width: 100%; min-height: 44px; }
#create-panel #ugc-custom-actor-form .ugc-custom-actor-form-actions {
  grid-area: actions;
  flex-direction: row-reverse;
  justify-content: flex-start;
  gap: 8px;
  margin-top: 8px;
}
#create-panel #ugc-custom-actor-form #ugc-custom-actor-save-btn {
  background: var(--cx-accent);
  border-color: var(--cx-accent);
  color: #fff;
}

/* ---------- Phones and tablets ---------- */
@media (max-width: 1023px) {
  #create-panel .ugc-settings-row { grid-template-columns: minmax(0, 1fr); gap: 18px; }
  #create-panel #ugc-basic-setup .ugc-field-compact + .ugc-field-compact { margin-top: 18px; }
}
@media (max-width: 640px) {
  #create-panel #ugc-actor-filters .ugc-actor-filter-select { font-size: 16px; }
  /* Image handling: two clear choices stacked, instead of two labels squeezed onto two lines each */
  #create-panel #from-image-mode-field .from-image-mode-toggle {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 8px;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: none;
  }
  #create-panel #from-image-mode-field .from-image-mode-toggle .language-option {
    justify-content: flex-start;
    min-height: 48px;
    padding: 10px 14px;
    padding-inline-start: 44px;
    border: 1px solid var(--cx-line);
    border-radius: 12px;
    background: #fff;
    color: #374151;
    text-align: start;
    white-space: normal;
  }
  #create-panel #from-image-mode-field .from-image-mode-toggle .language-option::before {
    content: '';
    position: absolute;
    top: 50%;
    inset-inline-start: 14px;
    width: 18px;
    height: 18px;
    margin-top: -9px;
    border: 2px solid #c3c8d4;
    border-radius: 50%;
    background: #fff;
    box-sizing: border-box;
  }
  #create-panel #from-image-mode-field .from-image-mode-toggle .language-option:has(input:checked) {
    border-color: var(--cx-accent);
    background: var(--cx-accent-soft);
    color: var(--cx-accent-ink);
    box-shadow: 0 0 0 1px var(--cx-accent);
  }
  #create-panel #from-image-mode-field .from-image-mode-toggle .language-option:has(input:checked)::before {
    border-color: var(--cx-accent);
    background: var(--cx-accent);
    box-shadow: inset 0 0 0 3px #fff;
  }
  /* Photo library window: categories in one scrolling row, not a wall of chips */
  #brand-assets-manage-modal .brand-assets-manage-filters {
    flex-wrap: nowrap;
    overflow-x: auto;
    scrollbar-width: none;
    margin-inline: -24px;
    padding-inline: 24px;
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 20px, #000 calc(100% - 32px), transparent);
    mask-image: linear-gradient(90deg, transparent, #000 20px, #000 calc(100% - 32px), transparent);
  }
  #brand-assets-manage-modal .brand-assets-manage-filters::-webkit-scrollbar { display: none; }
  #brand-assets-manage-modal .brand-assets-manage-filters .bk-manage-chip { flex: none; white-space: nowrap; }
  #brand-assets-manage-modal .brand-assets-manage-upload { height: 56px; }
}
@media (max-width: 640px) {
  #create-panel #ugc-actor-filters {
    -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 28px), transparent);
    mask-image: linear-gradient(90deg, #000 calc(100% - 28px), transparent);
    padding-inline-end: 24px;
  }
  [dir="rtl"] #create-panel #ugc-actor-filters {
    -webkit-mask-image: linear-gradient(270deg, #000 calc(100% - 28px), transparent);
    mask-image: linear-gradient(270deg, #000 calc(100% - 28px), transparent);
  }
}