CRM_Montzar/apps/web/src/views/LeadFormBuilderView.vue

<script setup lang="ts">
import { computed, nextTick, onMounted, ref, watch } from 'vue';
import { useRoute, useRouter } from 'vue-router';
import axios from 'axios';
import { api } from '@/lib/api';
import UiIcon from '@/components/UiIcon.vue';
import { UiButton, UiPageHeader } from '@/components/ui';
import type {
  LeadFormDto,
  LeadFormDuplicateMode,
  LeadFormFieldDto,
  LeadFormFieldInput,
  LeadFormFieldType,
  LeadFormMapTo,
  LeadFormSubmissionDto,
  PublicLeadFormDto,
  LeadStageDto,
  OrgUserDto,
  PipelineDto,
} from '@mento/shared';
import { toFaDigits } from '@/lib/jalali';
import { prepareFormCover } from '@/lib/form-cover';
import { useEscClose } from '@/lib/modal-stack';

type Tab = 'edit' | 'settings' | 'share' | 'responses';
type IconName =
  | 'user' | 'chat' | 'mail' | 'phone' | 'list' | 'layers' | 'calendar'
  | 'check' | 'chart' | 'document' | 'star' | 'megaphone' | 'building';

const route = useRoute();
const router = useRouter();
const id = computed(() => String(route.params.id || ''));

const loading = ref(true);
const saving = ref(false);
const error = ref('');
const ok = ref('');
const tab = ref<Tab>('edit');
const desktopPreviewOpen = ref(false);
const publishOpen = ref(false);
const advancedOpen = ref(false);
const readyOpen = ref<string | null>('lead');
const editFieldKey = ref<string | null>(null);
const dragKey = ref<string | null>(null);

const form = ref<LeadFormDto | null>(null);
const name = ref('');
const description = ref('');
const fields = ref<LeadFormFieldDto[]>([]);
const submitLabel = ref('ارسال درخواست');
const submitColor = ref('#14b8a6');
const isActive = ref(true);
const createLead = ref(true);
const createPerson = ref(false);
const createDeal = ref(false);
const pipelineId = ref('');
const leadStageId = ref('');
const duplicateMode = ref<LeadFormDuplicateMode>('update');
const source = ref('وب‌سایت');
const thankYouMessage = ref('');
const redirectUrl = ref('');
const assigneeIds = ref<string[]>([]);
const users = ref<OrgUserDto[]>([]);
const pipelines = ref<PipelineDto[]>([]);
const leadStages = ref<LeadStageDto[]>([]);
const submissions = ref<LeadFormSubmissionDto[]>([]);
const coverInput = ref<HTMLInputElement | null>(null);

const toolbox: Array<{ type: LeadFormFieldType; label: string; icon: IconName }> = [
  { type: 'text', label: 'متن کوتاه', icon: 'user' },
  { type: 'textarea', label: 'متن بلند', icon: 'chat' },
  { type: 'email', label: 'ایمیل', icon: 'mail' },
  { type: 'phone', label: 'شماره تماس', icon: 'phone' },
  { type: 'checkbox', label: 'چندانتخابی', icon: 'list' },
  { type: 'select', label: 'لیست کشویی', icon: 'layers' },
  { type: 'date', label: 'تاریخ', icon: 'calendar' },
  { type: 'radio', label: 'دکمه رادیویی', icon: 'check' },
  { type: 'number', label: 'عددی', icon: 'chart' },
  { type: 'file', label: 'آپلود فایل', icon: 'document' },
  { type: 'rating', label: 'امتیازدهی', icon: 'star' },
  { type: 'heading', label: 'متن توضیحی', icon: 'megaphone' },
];

const typeLabel: Record<string, string> = Object.fromEntries(
  toolbox.map((t) => [t.type, t.label]),
);

const readyGroups = [
  {
    key: 'lead', title: 'فیلدهای لید',
    items: [
      { label: 'نام فروشگاه / عنوان', fieldType: 'text' as const, mapTo: 'lead.title' as const },
      { label: 'نام مخاطب', fieldType: 'text' as const, mapTo: 'lead.contactName' as const },
      { label: 'موبایل', fieldType: 'phone' as const, mapTo: 'lead.mobile' as const },
      { label: 'تلفن', fieldType: 'phone' as const, mapTo: 'lead.phone' as const },
      { label: 'شهر', fieldType: 'text' as const, mapTo: 'lead.city' as const },
      { label: 'منطقه', fieldType: 'text' as const, mapTo: 'lead.region' as const },
      { label: 'صنف', fieldType: 'text' as const, mapTo: 'lead.trade' as const },
      { label: 'توضیحات', fieldType: 'textarea' as const, mapTo: 'lead.notes' as const },
    ],
  },
  {
    key: 'personal', title: 'اطلاعات فردی (شخص)',
    items: [
      { label: 'نام و نام خانوادگی', fieldType: 'text' as const, mapTo: 'person.fullName' as const },
      { label: 'ایمیل', fieldType: 'email' as const, mapTo: 'person.email' as const },
      { label: 'موبایل', fieldType: 'phone' as const, mapTo: 'person.mobile' as const },
    ],
  },
  {
    key: 'org', title: 'اطلاعات سازمانی',
    items: [
      { label: 'نام شرکت', fieldType: 'text' as const, mapTo: 'lead.title' as const },
      { label: 'سمت', fieldType: 'text' as const, mapTo: 'person.position' as const },
    ],
  },
  {
    key: 'market', title: 'سؤالات بازاریابی',
    items: [{
      label: 'از کجا آشنا شدید؟', fieldType: 'select' as const, mapTo: 'lead.source' as const,
      options: ['سایت', 'اینستاگرام', 'معرفی'],
    }],
  },
];

const publicBase = computed(() => {
  const env = String(import.meta.env.VITE_LEAD_FORM_PUBLIC_BASE || '').replace(/\/$/, '');
  return env || window.location.origin;
});
const publicUrl = computed(() => (form.value ? `${publicBase.value}${form.value.publicPath}` : ''));
const iframeSnippet = computed(
  () =>
    `<iframe src="${publicUrl.value}" style="width:100%;min-height:600px;border:0" title="${name.value || 'فرم'}" loading="lazy"></iframe>`,
);
const qrUrl = computed(() =>
  `https://api.qrserver.com/v1/create-qr-code/?size=160x160&data=${encodeURIComponent(publicUrl.value)}`,
);
const coverUploading = ref(false);
const coverVersion = ref(0);
const coverSrc = computed(() => {
  if (!form.value?.hasCover) return '';
  const v = coverVersion.value || Date.parse(form.value.updatedAt) || 0;
  return `/api/public/forms/${form.value.publicToken}/cover?v=${v}`;
});
const editingField = computed(() => fields.value.find((f) => f.key === editFieldKey.value) ?? null);
/** متن خام گزینه‌ها — جدا از options تا خط خالی هنگام تایپ حذف نشود */
const optionsDraft = ref('');
const sheetError = ref('');

function parseOptions(raw: string): string[] {
  return [...new Set(raw.split('\n').map((s) => s.trim()).filter(Boolean))];
}

function syncOptions() {
  if (editingField.value) editingField.value.options = parseOptions(optionsDraft.value);
}

const fieldSnapshot = ref<LeadFormFieldDto | null>(null);
const fieldIsNew = ref(false);

watch(editFieldKey, () => {
  const f = editingField.value;
  optionsDraft.value = f?.options.join('\n') ?? '';
  fieldSnapshot.value = f ? { ...f, options: [...f.options] } : null;
  sheetError.value = '';
});

function cancelFieldSheet() {
  const snap = fieldSnapshot.value;
  const key = editFieldKey.value;
  if (key && fieldIsNew.value) {
    fields.value = fields.value.filter((f) => f.key !== key);
  } else if (key && snap) {
    const i = fields.value.findIndex((f) => f.key === key);
    if (i >= 0) fields.value[i] = { ...snap, options: [...snap.options] };
  }
  fieldIsNew.value = false;
  editFieldKey.value = null;
}

useEscClose(() => editFieldKey.value, cancelFieldSheet);
useEscClose(() => desktopPreviewOpen.value, () => { desktopPreviewOpen.value = false; });
useEscClose(() => publishOpen.value, () => { publishOpen.value = false; });

function needsOptions(type: string) {
  return type === 'select' || type === 'radio' || type === 'checkbox';
}

function closeFieldSheet() {
  const f = editingField.value;
  if (f) {
    if (!f.label.trim()) {
      sheetError.value = 'عنوان فیلد را بنویسید.';
      return;
    }
    if (needsOptions(f.fieldType) && !f.options.length) {
      sheetError.value = 'حداقل یک گزینه بنویسید.';
      return;
    }
    f.label = f.label.trim();
    optionsDraft.value = f.options.join('\n');
  }
  fieldIsNew.value = false;
  editFieldKey.value = null;
}

/* ---------- رنگ دکمه ---------- */
const COLOR_PRESETS = [
  '#14b8a6', '#0d9488', '#10b981', '#22c55e', '#3b82f6', '#2563eb',
  '#6366f1', '#8b5cf6', '#a855f7', '#ec4899', '#f43f5e', '#ef4444',
  '#f97316', '#f59e0b', '#eab308', '#64748b', '#334155', '#0f172a',
];
const colorOpen = ref(false);
const hexDraft = ref('');
useEscClose(() => colorOpen.value, () => { colorOpen.value = false; });

function toggleColor() {
  colorOpen.value = !colorOpen.value;
  hexDraft.value = submitColor.value;
}

function pickColor(c: string) {
  submitColor.value = c;
  hexDraft.value = c;
}

function applyHex() {
  const v = hexDraft.value.trim();
  const hex = v.startsWith('#') ? v : `#${v}`;
  if (/^#([0-9a-f]{3}|[0-9a-f]{6})$/i.test(hex)) submitColor.value = hex.toLowerCase();
  else hexDraft.value = submitColor.value;
}

const titleInput = ref<HTMLInputElement | null>(null);
const conversionRate = computed(() => {
  const submits = form.value?.submitCount ?? 0;
  const leads = form.value?.leadCreateCount ?? 0;
  if (!submits) return '۰٪';
  return `${toFaDigits(Math.round((leads / submits) * 100))}٪`;
});
const crmSummary = computed(() => {
  const parts: string[] = [];
  if (createLead.value) parts.push('ثبت لید');
  if (createPerson.value) parts.push('شخص');
  if (createDeal.value) parts.push('معامله');
  const stage = leadStages.value.find((s) => s.id === leadStageId.value);
  if (stage) parts.push(`مرحله: ${stage.name}`);
  if (source.value) parts.push(`منبع: ${source.value}`);
  return parts.join(' · ') || 'اتصال CRM تنظیم نشده';
});

function newKey(label: string) {
  const base = label.replace(/\s+/g, '_').slice(0, 24) || 'field';
  let key = `${base}_${Math.random().toString(36).slice(2, 6)}`;
  while (fields.value.some((f) => f.key === key)) key += 'x';
  return key;
}

function defaultMap(type: LeadFormFieldType): LeadFormMapTo {
  let target: LeadFormMapTo = 'custom';
  if (type === 'phone') target = 'lead.mobile';
  else if (type === 'text') target = 'lead.contactName';
  else if (type === 'textarea') target = 'lead.notes';
  return fields.value.some((f) => f.mapTo === target) ? 'custom' : target;
}

const mapConflict = computed(() => {
  const f = editingField.value;
  if (!f || f.mapTo === 'custom' || f.mapTo === 'notes') return null;
  return fields.value.find((o) => o.key !== f.key && o.mapTo === f.mapTo) ?? null;
});

const fieldLabels = computed(() => Object.fromEntries(fields.value.map((f) => [f.key, f.label])));

function formatValue(val: unknown): string {
  if (Array.isArray(val)) return val.join('، ');
  if (val === true) return 'بله';
  if (val === false) return 'خیر';
  if (val == null) return '';
  const s = String(val);
  try {
    const parsed = JSON.parse(s) as { name?: string; dataUrl?: string };
    if (parsed?.name && parsed?.dataUrl) return `📎 ${parsed.name}`;
  } catch {
    /* not a file payload */
  }
  if (s.startsWith('data:')) return '📎 فایل پیوست';
  return s;
}

function readyIcon(type: LeadFormFieldType | string): IconName {
  return toolbox.find((t) => t.type === type)?.icon ?? 'layers';
}

function addField(type: LeadFormFieldType, preset?: Partial<LeadFormFieldInput>) {
  const meta = toolbox.find((t) => t.type === type);
  const label = preset?.label || meta?.label || 'فیلد جدید';
  const key = newKey(label);
  fields.value.push({
    id: key,
    key,
    label,
    fieldType: type,
    required: preset?.required ?? type !== 'heading',
    mapTo: (preset?.mapTo as LeadFormMapTo) || defaultMap(type),
    position: fields.value.length,
    placeholder: preset?.placeholder ?? '',
    options: preset?.options ?? (needsOptions(type) ? ['گزینه ۱', 'گزینه ۲'] : []),
  });
  return key;
}

function addAndEdit(type: LeadFormFieldType) {
  const key = addField(type);
  fieldIsNew.value = true;
  editFieldKey.value = key;
}

function duplicateField(field: LeadFormFieldDto) {
  addField(field.fieldType as LeadFormFieldType, {
    label: `${field.label} (کپی)`,
    mapTo: field.mapTo as LeadFormMapTo,
    options: [...field.options],
    placeholder: field.placeholder,
    required: field.required,
  });
}

function removeField(key: string) {
  fields.value = fields.value.filter((f) => f.key !== key);
  if (editFieldKey.value === key) editFieldKey.value = null;
}

function onDragStart(key: string) { dragKey.value = key; }
function onDrop(targetKey: string) {
  if (!dragKey.value || dragKey.value === targetKey) return;
  const list = [...fields.value];
  const from = list.findIndex((f) => f.key === dragKey.value);
  const to = list.findIndex((f) => f.key === targetKey);
  if (from < 0 || to < 0) return;
  const [item] = list.splice(from, 1);
  list.splice(to, 0, item!);
  fields.value = list.map((f, i) => ({ ...f, position: i }));
  dragKey.value = null;
}

function applyForm(row: LeadFormDto) {
  form.value = row;
  name.value = row.name;
  description.value = row.description ?? '';
  fields.value = row.fields;
  submitLabel.value = row.submitLabel;
  submitColor.value = row.submitColor;
  isActive.value = row.isActive;
  createLead.value = row.createLead;
  createPerson.value = row.createPerson;
  createDeal.value = row.createDeal;
  pipelineId.value = row.pipelineId ?? '';
  leadStageId.value = row.leadStageId ?? '';
  duplicateMode.value = (row.duplicateMode as LeadFormDuplicateMode) || 'update';
  source.value = row.source ?? 'وب‌سایت';
  thankYouMessage.value = row.thankYouMessage ?? '';
  redirectUrl.value = row.redirectUrl ?? '';
  assigneeIds.value = row.assigneeIds;
}

async function load() {
  loading.value = true;
  error.value = '';
  try {
    const [fRes, uRes, pRes, sRes] = await Promise.all([
      api.get<LeadFormDto>(`/lead-forms/${id.value}`),
      api.get<OrgUserDto[]>('/users'),
      api.get<PipelineDto[]>('/pipelines'),
      api.get<LeadStageDto[]>('/leads/stages'),
    ]);
    applyForm(fRes.data);
    users.value = uRes.data;
    pipelines.value = pRes.data;
    leadStages.value = sRes.data;
  } catch {
    error.value = 'بارگذاری فرم ناموفق بود.';
  } finally {
    loading.value = false;
  }
  if (route.query.new && !error.value) {
    tab.value = 'edit';
    await nextTick();
    titleInput.value?.focus();
    titleInput.value?.select();
    void router.replace({ query: {} });
  }
}

function validate(): string {
  if (!name.value.trim()) return 'عنوان فرم را بنویسید.';
  const noLabel = fields.value.find((f) => !f.label.trim());
  if (noLabel) return 'یکی از فیلدها عنوان ندارد.';
  const noOptions = fields.value.find((f) => needsOptions(f.fieldType) && !f.options.length);
  if (noOptions) return `فیلد «${noOptions.label}» هیچ گزینه‌ای ندارد.`;
  return '';
}

async function save() {
  const invalid = validate();
  if (invalid) {
    error.value = invalid;
    ok.value = '';
    if (!name.value.trim()) {
      tab.value = 'edit';
      await nextTick();
      titleInput.value?.focus();
    }
    return;
  }
  saving.value = true;
  error.value = '';
  ok.value = '';
  try {
    const { data } = await api.patch<LeadFormDto>(`/lead-forms/${id.value}`, {
      name: name.value.trim(),
      description: description.value.trim() || null,
      isActive: isActive.value,
      createLead: createLead.value,
      createPerson: createPerson.value,
      createDeal: createDeal.value,
      pipelineId: pipelineId.value || null,
      leadStageId: leadStageId.value || null,
      duplicateMode: duplicateMode.value,
      source: source.value.trim() || null,
      thankYouMessage: thankYouMessage.value.trim() || null,
      redirectUrl: redirectUrl.value.trim() || null,
      assigneeIds: assigneeIds.value,
      submitLabel: submitLabel.value.trim() || 'ارسال درخواست',
      submitColor: submitColor.value,
      fields: fields.value.map((f, i) => ({
        key: f.key, label: f.label, fieldType: f.fieldType, required: f.required,
        mapTo: f.mapTo, position: i, placeholder: f.placeholder, options: f.options,
      })),
    });
    applyForm(data);
    ok.value = 'تغییرات ذخیره شد.';
  } catch (e) {
    if (axios.isAxiosError(e)) {
      const msg = (e.response?.data as { message?: string | string[] })?.message;
      error.value = Array.isArray(msg) ? msg.join('، ') : (msg ?? 'ذخیره ناموفق بود');
    } else error.value = 'ذخیره ناموفق بود';
  } finally {
    saving.value = false;
  }
}

async function uploadCover(ev: Event) {
  const input = ev.target as HTMLInputElement;
  const file = input.files?.[0];
  input.value = '';
  if (!file) return;
  error.value = '';
  coverUploading.value = true;
  try {
    const prepared = await prepareFormCover(file);
    const body = new FormData();
    body.append('file', prepared);
    const { data } = await api.post<LeadFormDto>(`/lead-forms/${id.value}/cover`, body);
    form.value = data;
    coverVersion.value = Date.now();
  } catch (e) {
    error.value = e instanceof Error && !axios.isAxiosError(e) ? e.message : 'آپلود کاور ناموفق بود.';
  } finally {
    coverUploading.value = false;
  }
}

async function clearCover() {
  try {
    const { data } = await api.delete<LeadFormDto>(`/lead-forms/${id.value}/cover`);
    form.value = data;
  } catch {
    error.value = 'حذف کاور ناموفق بود.';
  }
}

async function loadResponses() {
  tab.value = 'responses';
  const { data } = await api.get<LeadFormSubmissionDto[]>(`/lead-forms/${id.value}/submissions`);
  submissions.value = data;
}

async function copyText(text: string) {
  await navigator.clipboard.writeText(text);
  ok.value = 'کپی شد.';
}

const previewDraft = computed<PublicLeadFormDto | null>(() => {
  if (!form.value) return null;
  return {
    name: name.value.trim() || 'عنوان فرم',
    description: description.value.trim() || null,
    thankYouMessage: thankYouMessage.value.trim() || null,
    redirectUrl: null,
    submitLabel: submitLabel.value.trim() || 'ارسال درخواست',
    submitColor: submitColor.value,
    hasCover: form.value.hasCover,
    coverPath: coverSrc.value || null,
    fields: fields.value.map((f) => ({
      key: f.key,
      label: f.label,
      fieldType: f.fieldType,
      required: f.required,
      placeholder: f.placeholder || null,
      options: f.options,
    })),
  };
});

function previewKey() {
  return `lead-form-preview:${form.value?.publicToken ?? ''}`;
}

function writePreviewDraft() {
  if (!previewDraft.value) return;
  try {
    localStorage.setItem(previewKey(), JSON.stringify(previewDraft.value));
  } catch {
    /* storage full / disabled — preview falls back to saved version */
  }
}

watch(previewDraft, writePreviewDraft, { deep: true });

function openPreview() {
  if (!form.value?.publicPath) return;
  writePreviewDraft();
  window.open(`${form.value.publicPath}?preview=1`, '_blank', 'noopener');
}

function toggleAssignee(uid: string) {
  assigneeIds.value = assigneeIds.value.includes(uid)
    ? assigneeIds.value.filter((x) => x !== uid)
    : [...assigneeIds.value, uid];
}

onMounted(load);
</script>

<template>
  <section class="crm-page page" dir="rtl">
    <UiPageHeader
      title="فرم‌ساز"
      description="فرم را بچینید، پیش‌نمایش بگیرید و پاسخ‌ها را ببینید."
      :back-to="{ name: 'lead-forms' }"
    >
      <template #actions>
        <div class="top-ghosts">
          <UiButton
            variant="secondary"
            type="button"
            :disabled="!form?.publicPath"
            @click="openPreview"
          >
            <template #icon>
              <UiIcon name="eye" :size="15" />
            </template>
            پیش‌نمایش
          </UiButton>
          <UiButton variant="secondary" type="button" @click="publishOpen = true">
            <template #icon>
              <UiIcon name="megaphone" :size="15" />
            </template>
            انتشار فرم
          </UiButton>
        </div>
        <UiButton variant="primary" type="button" :loading="saving" :disabled="saving" @click="save">
          <template #icon>
            <UiIcon name="check" :size="15" />
          </template>
          ذخیره تغییرات
        </UiButton>
      </template>
    </UiPageHeader>
    <p v-if="error" class="banner err">{{ error }}</p>
    <p v-if="ok" class="banner ok">{{ ok }}</p>

    <nav class="tabs">
      <button type="button" :class="{ on: tab === 'edit' }" @click="tab = 'edit'">
        <UiIcon name="pencil" :size="14" /> ویرایش فرم
      </button>
      <button type="button" :class="{ on: tab === 'settings' }" @click="tab = 'settings'">تنظیمات</button>
      <button type="button" :class="{ on: tab === 'share' }" @click="tab = 'share'">اشتراک‌گذاری</button>
      <button type="button" :class="{ on: tab === 'responses' }" @click="loadResponses">پاسخ‌ها</button>
    </nav>

    <div v-if="tab === 'edit'" class="workspace">
      <aside class="preview-col">
        <div class="device-toggle">
          <button type="button" @click="desktopPreviewOpen = true">دسکتاپ</button>
          <button type="button" class="on">موبایل</button>
        </div>
        <div class="phone">
          <div class="cover" :style="{ background: submitColor }">
            <img v-if="coverSrc" :src="coverSrc" alt="" />
            <UiIcon v-else name="layers" :size="28" />
          </div>
          <div class="preview-body">
            <h3>{{ name || 'عنوان فرم' }}</h3>
            <p>{{ description || 'توضیح کوتاه فرم اینجاست.' }}</p>
            <template v-for="f in fields" :key="f.key">
              <p v-if="f.fieldType === 'heading'" class="heading">{{ f.label }}</p>
              <label v-else>
                <span>{{ f.label }}<span v-if="f.required" class="req">*</span></span>
                <textarea v-if="f.fieldType === 'textarea'" rows="3" :placeholder="f.placeholder || ''" disabled />
                <select v-else-if="f.fieldType === 'select'" disabled>
                  <option>{{ f.placeholder || 'انتخاب کنید' }}</option>
                  <option v-for="o in f.options" :key="o">{{ o }}</option>
                </select>
                <div v-else-if="f.fieldType === 'radio' || f.fieldType === 'checkbox'" class="opts">
                  <span v-for="o in f.options" :key="o">{{ f.fieldType === 'checkbox' ? '☐' : '○' }} {{ o }}</span>
                </div>
                <div v-else-if="f.fieldType === 'rating'" class="stars">★★★★★</div>
                <input v-else disabled :placeholder="f.placeholder || ''" />
              </label>
            </template>
            <button type="button" class="send" :style="{ background: submitColor }">
              <UiIcon name="send" :size="14" /> {{ submitLabel }}
            </button>
            <small>اطلاعات شما محرمانه می‌ماند.</small>
          </div>
        </div>
      </aside>

      <section class="canvas">
        <button
          class="cover-box"
          :class="{ has: coverSrc }"
          type="button"
          :disabled="coverUploading"
          :style="coverSrc ? { background: submitColor } : undefined"
          @click="coverInput?.click()"
        >
          <img v-if="coverSrc" :src="coverSrc" alt="" />
          <span v-else-if="coverUploading">در حال پردازش تصویر…</span>
          <span v-else class="cover-empty">
            + افزودن لوگو یا تصویر کاور
            <small>اندازهٔ استاندارد ۱۲۰۰×۴۰۰ پیکسل (۳:۱) — تصاویر دیگر خودکار تنظیم می‌شوند</small>
          </span>
          <span v-if="coverSrc" class="cover-change">{{ coverUploading ? 'در حال آپلود…' : 'تغییر تصویر' }}</span>
        </button>
        <input ref="coverInput" type="file" accept="image/png,image/jpeg,image/webp,image/svg+xml" hidden @change="uploadCover" />
        <button v-if="coverSrc" class="link" type="button" @click="clearCover">حذف کاور</button>

        <div class="title-card">
          <label class="title-label" for="form-title">
            عنوان فرم
            <UiIcon name="pencil" :size="13" />
          </label>
          <input
            id="form-title"
            ref="titleInput"
            v-model="name"
            class="title"
            maxlength="120"
            placeholder="مثلاً: فرم ثبت‌نام وبینار"
          />
          <label class="title-label" for="form-desc">توضیح فرم</label>
          <textarea id="form-desc" v-model="description" rows="2" placeholder="توضیح کوتاه برای بازدیدکننده (اختیاری)" />
        </div>

        <article
          v-for="f in fields"
          :key="f.key"
          class="field-card"
          draggable="true"
          @dragstart="onDragStart(f.key)"
          @dragover.prevent
          @drop="onDrop(f.key)"
        >
          <span class="grip"><UiIcon name="grip" :size="16" /></span>
          <div class="fbody" @click="editFieldKey = f.key">
            <strong>{{ f.label }}<span v-if="f.required" class="req">*</span></strong>
            <small>
              {{ typeLabel[f.fieldType] || f.fieldType }}
              <template v-if="needsOptions(f.fieldType)"> · {{ toFaDigits(f.options.length) }} گزینه</template>
            </small>
          </div>
          <div class="fops">
            <button type="button" title="کپی" @click="duplicateField(f)"><UiIcon name="layers" :size="14" /></button>
            <button type="button" class="danger" title="حذف" @click="removeField(f.key)"><UiIcon name="trash" :size="14" /></button>
            <button type="button" title="ویرایش" @click="editFieldKey = f.key"><UiIcon name="pencil" :size="14" /></button>
          </div>
        </article>

        <button class="add-field" type="button" @click="addAndEdit('text')">+ افزودن فیلد جدید</button>

        <div class="submit-card">
          <label>متن دکمه ارسال
            <input v-model="submitLabel" />
          </label>
          <div class="color-row">
            <span class="color-label">رنگ دکمه</span>
            <div class="color-pick">
              <button
                type="button"
                class="swatch-btn"
                :aria-expanded="colorOpen"
                aria-label="انتخاب رنگ دکمه"
                @click="toggleColor"
              >
                <span class="swatch" :style="{ background: submitColor }" />
                <span class="hex" dir="ltr">{{ submitColor }}</span>
                <UiIcon name="chevron" :size="14" />
              </button>
              <div v-if="colorOpen" class="palette-backdrop" @click="colorOpen = false" />
              <div v-if="colorOpen" class="palette" @click.stop>
                <div class="presets">
                  <button
                    v-for="c in COLOR_PRESETS"
                    :key="c"
                    type="button"
                    class="preset"
                    :class="{ on: submitColor.toLowerCase() === c }"
                    :style="{ background: c }"
                    :aria-label="c"
                    @click="pickColor(c)"
                  >
                    <UiIcon v-if="submitColor.toLowerCase() === c" name="check-plain" :size="12" />
                  </button>
                </div>
                <div class="custom">
                  <label class="native">
                    <input v-model="submitColor" type="color" @input="hexDraft = submitColor" />
                    رنگ دلخواه
                  </label>
                  <input
                    v-model="hexDraft"
                    class="hex-input"
                    dir="ltr"
                    maxlength="7"
                    placeholder="#14b8a6"
                    @keydown.enter.prevent="applyHex"
                    @blur="applyHex"
                  />
                </div>
                <button type="button" class="palette-done" @click="colorOpen = false">تأیید</button>
              </div>
            </div>
          </div>
        </div>

        <button class="adv" type="button" @click="advancedOpen = !advancedOpen">تنظیمات پیشرفته</button>
        <div v-if="advancedOpen" class="adv-box">
          <label class="chk"><input v-model="createLead" type="checkbox" /> ثبت به‌عنوان لید</label>
          <label class="chk"><input v-model="createPerson" type="checkbox" /> ساخت شخص (اختیاری)</label>
          <label class="chk"><input v-model="createDeal" type="checkbox" /> ساخت معامله (اختیاری)</label>
        </div>
      </section>

      <aside class="toolbox">
        <h3>افزودن فیلد</h3>
        <div class="tools">
          <button v-for="t in toolbox" :key="t.type" type="button" @click="addField(t.type)">
            <UiIcon :name="t.icon" :size="16" />
            {{ t.label }}
          </button>
        </div>
        <h3>فیلدهای آماده</h3>
        <div v-for="g in readyGroups" :key="g.key" class="ready">
          <button type="button" class="ready-toggle" @click="readyOpen = readyOpen === g.key ? null : g.key">
            <span>{{ g.title }}</span>
            <span class="ready-caret">{{ readyOpen === g.key ? '▾' : '◂' }}</span>
          </button>
          <div v-if="readyOpen === g.key" class="tools ready-tools">
            <button
              v-for="item in g.items"
              :key="item.label"
              type="button"
              @click="addField(item.fieldType, item)"
            >
              <UiIcon :name="readyIcon(item.fieldType)" :size="16" />
              {{ item.label }}
            </button>
          </div>
        </div>
      </aside>
    </div>

    <section v-else-if="tab === 'settings'" class="panel settings-panel">
      <article class="settings-card">
        <header class="settings-card-head">
          <h3>وضعیت فرم</h3>
          <p>فعال بودن فرم و ثبت مستقیم در لیدها</p>
        </header>
        <div class="toggle-list">
          <label class="toggle-row">
            <span>
              <strong>فرم فعال باشد</strong>
              <small>اگر خاموش باشد لینک عمومی کار نمی‌کند</small>
            </span>
            <input v-model="isActive" type="checkbox" />
          </label>
          <label class="toggle-row">
            <span>
              <strong>ثبت پاسخ به‌عنوان لید</strong>
              <small>هر ارسال در لیست لیدهای CRM ذخیره می‌شود</small>
            </span>
            <input v-model="createLead" type="checkbox" />
          </label>
        </div>
      </article>

      <article class="settings-card">
        <header class="settings-card-head">
          <h3>اتصال به CRM</h3>
          <p>مرحله، منبع، تکراری و پیام بعد از ارسال</p>
        </header>
        <div class="settings-grid">
          <label class="field">مرحله اولیه لید
            <select v-model="leadStageId">
              <option value="">اولین مرحله فعال</option>
              <option v-for="s in leadStages" :key="s.id" :value="s.id">{{ s.name }}</option>
            </select>
          </label>
          <label class="field">منبع بازاریابی
            <input v-model="source" placeholder="مثلاً وب‌سایت" />
          </label>
          <label class="field span-2">سیاست شماره تکراری
            <select v-model="duplicateMode">
              <option value="update">به‌روزرسانی لید موجود</option>
              <option value="skip">رد کردن (ثبت نشود)</option>
              <option value="activity">فقط ثبت رویداد روی لید موجود</option>
            </select>
          </label>
          <label class="field span-2">پیام تشکر
            <input v-model="thankYouMessage" placeholder="پیام بعد از ارسال موفق" />
          </label>
          <label class="field span-2">آدرس بعد از ارسال
            <input v-model="redirectUrl" placeholder="https://..." dir="ltr" />
          </label>
        </div>
      </article>

      <article class="settings-card">
        <header class="settings-card-head">
          <h3>توزیع نوبتی مسئولان</h3>
          <p>لیدهای جدید به‌نوبت به این افراد اختصاص داده می‌شوند</p>
        </header>
        <div class="chips">
          <button
            v-for="u in users"
            :key="u.id"
            type="button"
            class="chip"
            :class="{ on: assigneeIds.includes(u.id) }"
            @click="toggleAssignee(u.id)"
          >
            {{ u.fullName }}
          </button>
        </div>
        <p v-if="!assigneeIds.length" class="settings-empty">مسئولی انتخاب نشده. سرنخ جدید مسئولش همان مسئول اولین تماس اتوماسیون می‌شود؛ اگر تماسی ساخته نشود، مالک سازمان مسئول می‌ماند.</p>
      </article>

      <article class="settings-card optional">
        <header class="settings-card-head">
          <h3>مسیر اختیاری</h3>
          <p>فقط در صورت نیاز؛ پیش‌فرض خاموش است</p>
        </header>
        <div class="toggle-list compact">
          <label class="toggle-row">
            <span><strong>ساخت شخص</strong></span>
            <input v-model="createPerson" type="checkbox" />
          </label>
          <label class="toggle-row">
            <span><strong>ساخت معامله</strong></span>
            <input v-model="createDeal" type="checkbox" />
          </label>
        </div>
        <label v-if="createDeal" class="field pipeline-field">مسیر فروش مقصد
          <select v-model="pipelineId">
            <option value="">پیش‌فرض سازمان</option>
            <option v-for="p in pipelines" :key="p.id" :value="p.id">{{ p.name }}</option>
          </select>
        </label>
      </article>

      <div class="settings-actions">
        <button class="btn primary" type="button" :disabled="saving" @click="save">
          ذخیره تنظیمات
        </button>
      </div>
    </section>

    <section v-else-if="tab === 'share'" class="panel">
      <div class="share-actions">
        <button class="btn primary" type="button" @click="publishOpen = true">
          <UiIcon name="megaphone" :size="15" /> باز کردن مودال انتشار
        </button>
      </div>
      <label>لینک عمومی
        <div class="row">
          <input :value="publicUrl" readonly />
          <button class="btn ghost" type="button" @click="copyText(publicUrl)">کپی</button>
        </div>
      </label>
      <label>کد iframe
        <div class="row">
          <textarea class="iframe-code" :value="iframeSnippet" readonly rows="3" />
          <button class="btn ghost" type="button" @click="copyText(iframeSnippet)">کپی</button>
        </div>
      </label>
      <img v-if="publicUrl" :src="qrUrl" alt="QR" width="140" height="140" />
      <p class="crm-hint">{{ crmSummary }}</p>
      <button class="link" type="button" @click="tab = 'settings'">ویرایش اتصال CRM</button>
    </section>

    <section v-else class="panel">
      <div v-if="form" class="stats-grid">
        <div class="stat"><b>{{ toFaDigits(form.viewCount) }}</b><span>بازدید</span></div>
        <div class="stat"><b>{{ toFaDigits(form.startCount) }}</b><span>شروع پر کردن</span></div>
        <div class="stat"><b>{{ toFaDigits(form.submitCount) }}</b><span>ارسال</span></div>
        <div class="stat"><b>{{ toFaDigits(form.leadCreateCount) }}</b><span>لید جدید</span></div>
        <div class="stat"><b>{{ toFaDigits(form.duplicateCount) }}</b><span>تکراری</span></div>
        <div class="stat"><b>{{ conversionRate }}</b><span>نرخ submit→lead</span></div>
      </div>
      <p v-if="!submissions.length">هنوز پاسخی ثبت نشده.</p>
      <article v-for="s in submissions" :key="s.id" class="sub">
        <small>
          {{ new Date(s.createdAt).toLocaleString('fa-IR') }}
          <span v-if="s.status"> · {{ s.status }}</span>
          <span v-if="s.leadId"> · لید</span>
        </small>
        <p v-for="(val, key) in s.values" :key="key"><b>{{ fieldLabels[key] || key }}:</b> {{ formatValue(val) }}</p>
      </article>
    </section>

    <div v-if="desktopPreviewOpen" class="overlay desk-overlay">
      <div class="desk-sheet" role="dialog" aria-modal="true" aria-label="پیش‌نمایش دسکتاپ">
        <header>
          <strong>پیش‌نمایش دسکتاپ</strong>
          <button class="x-btn" type="button" aria-label="بستن (Esc)" title="بستن (Esc)" @click="desktopPreviewOpen = false">
            <UiIcon name="x" :size="18" />
          </button>
        </header>
        <div class="desk-form">
          <div class="cover" :style="{ background: submitColor }">
            <img v-if="coverSrc" :src="coverSrc" alt="" />
            <UiIcon v-else name="layers" :size="36" />
          </div>
          <div class="preview-body desk-body">
            <h3>{{ name || 'عنوان فرم' }}</h3>
            <p>{{ description || 'توضیح کوتاه فرم اینجاست.' }}</p>
            <div class="desk-fields">
              <template v-for="f in fields" :key="'d-' + f.key">
                <p v-if="f.fieldType === 'heading'" class="heading wide">{{ f.label }}</p>
                <label v-else :class="{ wide: f.fieldType === 'textarea' || f.fieldType === 'checkbox' }">
                  <span>{{ f.label }}<span v-if="f.required" class="req">*</span></span>
                  <textarea v-if="f.fieldType === 'textarea'" rows="3" :placeholder="f.placeholder || ''" disabled />
                  <select v-else-if="f.fieldType === 'select'" disabled>
                    <option>{{ f.placeholder || 'انتخاب کنید' }}</option>
                    <option v-for="o in f.options" :key="o">{{ o }}</option>
                  </select>
                  <div v-else-if="f.fieldType === 'radio' || f.fieldType === 'checkbox'" class="opts">
                    <span v-for="o in f.options" :key="o">{{ f.fieldType === 'checkbox' ? '☐' : '○' }} {{ o }}</span>
                  </div>
                  <div v-else-if="f.fieldType === 'rating'" class="stars">★★★★★</div>
                  <input v-else disabled :placeholder="f.placeholder || ''" />
                </label>
              </template>
            </div>
            <button type="button" class="send" :style="{ background: submitColor }">
              <UiIcon name="send" :size="14" /> {{ submitLabel }}
            </button>
            <small>اطلاعات شما محرمانه می‌ماند.</small>
          </div>
        </div>
      </div>
    </div>

    <div v-if="editingField" class="overlay">
      <div class="sheet" role="dialog" aria-modal="true" aria-label="ویرایش فیلد">
        <header class="sheet-head">
          <h3>{{ fieldIsNew ? 'فیلد جدید' : 'ویرایش فیلد' }}</h3>
          <button class="x-btn" type="button" aria-label="بستن (Esc)" title="بستن (Esc)" @click="cancelFieldSheet">
            <UiIcon name="x" :size="18" />
          </button>
        </header>
        <label>عنوان <input v-model="editingField.label" maxlength="120" /></label>
        <label>متن راهنما <input v-model="editingField.placeholder" /></label>
        <label class="chk"><input v-model="editingField.required" type="checkbox" /> الزامی</label>
        <label>اتصال به
          <select v-model="editingField.mapTo">
            <optgroup label="لید">
              <option value="lead.title">عنوان / نام فروشگاه</option>
              <option value="lead.contactName">نام مخاطب</option>
              <option value="lead.mobile">موبایل لید</option>
              <option value="lead.phone">تلفن لید</option>
              <option value="lead.city">شهر</option>
              <option value="lead.region">منطقه</option>
              <option value="lead.trade">صنف</option>
              <option value="lead.notes">یادداشت لید</option>
              <option value="lead.source">منبع لید</option>
              <option value="lead.gender">جنسیت</option>
            </optgroup>
            <optgroup label="شخص">
              <option value="person.fullName">نام کامل</option>
              <option value="person.firstName">نام</option>
              <option value="person.lastName">نام خانوادگی</option>
              <option value="person.mobile">موبایل</option>
              <option value="person.email">ایمیل</option>
              <option value="person.phone">تلفن</option>
              <option value="person.position">سمت</option>
              <option value="person.gender">جنسیت شخص</option>
            </optgroup>
            <optgroup label="معامله">
              <option value="deal.title">عنوان معامله</option>
              <option value="deal.notes">یادداشت معامله</option>
            </optgroup>
            <option value="notes">یادداشت</option>
            <option value="custom">فقط در پاسخ فرم</option>
          </select>
          <small v-if="mapConflict" class="sheet-warn">
            فیلد «{{ mapConflict.label }}» هم به همین مقصد وصل است؛ مقدار یکی روی دیگری نوشته می‌شود.
          </small>
        </label>
        <label v-if="['select','radio','checkbox'].includes(editingField.fieldType)">
          گزینه‌ها (هر خط یکی)
          <textarea
            v-model="optionsDraft"
            rows="5"
            placeholder="گزینه ۱&#10;گزینه ۲"
            @input="syncOptions"
          />
          <small class="sheet-hint">
            {{ toFaDigits(editingField.options.length) }} گزینه — با Enter به خط بعد بروید؛ خطوط خالی و تکراری نادیده گرفته می‌شوند.
          </small>
        </label>
        <p v-if="sheetError" class="sheet-error">{{ sheetError }}</p>
        <div class="sheet-actions">
          <button class="btn primary" type="button" @click="closeFieldSheet">تأیید</button>
          <button class="btn ghost" type="button" @click="cancelFieldSheet">انصراف</button>
        </div>
      </div>
    </div>

    <div v-if="publishOpen" class="overlay">
      <div class="sheet publish-sheet" role="dialog" aria-modal="true" aria-label="انتشار فرم">
        <header class="publish-head">
          <strong>انتشار فرم</strong>
          <button class="x-btn" type="button" aria-label="بستن (Esc)" title="بستن (Esc)" @click="publishOpen = false">
            <UiIcon name="x" :size="18" />
          </button>
        </header>
        <div class="publish-preview">
          <div class="mini-cover" :style="{ background: submitColor }">
            <img v-if="coverSrc" :src="coverSrc" alt="" />
          </div>
          <div>
            <h4>{{ name || 'فرم' }}</h4>
            <p>{{ crmSummary }}</p>
            <a :href="form?.publicPath" target="_blank" rel="noopener">باز کردن پیش‌نمایش</a>
          </div>
        </div>
        <label>لینک مستقیم
          <div class="row">
            <input :value="publicUrl" readonly />
            <button class="btn ghost" type="button" @click="copyText(publicUrl)">کپی</button>
          </div>
        </label>
        <label>کد iframe ریسپانسیو
          <div class="row col">
            <textarea class="iframe-code" :value="iframeSnippet" readonly rows="3" />
            <button class="btn ghost" type="button" @click="copyText(iframeSnippet)">کپی iframe</button>
          </div>
        </label>
        <img v-if="publicUrl" class="publish-qr" :src="qrUrl" alt="QR" width="120" height="120" />
        <button class="link" type="button" @click="publishOpen = false; tab = 'settings'">
          تنظیم اتصال CRM
        </button>
      </div>
    </div>
  </section>
</template>

<style scoped>
.page { --teal: #14b8a6; display: grid; gap: 0.85rem; }
.top-ghosts { display: flex; gap: 0.45rem; flex-wrap: nowrap; }
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 0.3rem; min-height: var(--control-h); height: var(--control-h); padding: 0 0.9rem; border-radius: var(--radius); font: inherit; font-weight: 700; border: 1px solid transparent; cursor: pointer; text-decoration: none; box-sizing: border-box; white-space: nowrap; }
.btn.primary { background: var(--teal); color: #fff; }
.btn.ghost { background: #fff; color: #0f766e; border-color: #99f6e4; }
.banner { margin: 0; padding: 0.6rem 0.8rem; border-radius: var(--radius); }
.banner.err { background: #fef2f2; color: #b91c1c; }
.banner.ok { background: #ecfdf5; color: #047857; }
.tabs { display: flex; gap: 0.35rem; flex-wrap: wrap; background: #fff; padding: 0.35rem; border-radius: var(--radius); }
.tabs button { border: 0; background: transparent; min-height: 38px; padding: 0 0.85rem; border-radius: var(--radius); font: inherit; font-weight: 700; color: #0f766e; cursor: pointer; display: inline-flex; align-items: center; gap: 0.3rem; }
.tabs button.on { background: var(--teal); color: #fff; }
.workspace { display: grid; grid-template-columns: 280px minmax(0,1fr) 240px; gap: 0.85rem; align-items: start; }
.preview-col, .canvas, .toolbox, .panel { background: #fff; border-radius: var(--radius); padding: 0.9rem; box-shadow: 0 8px 22px rgba(15,23,42,.04); }
.device-toggle { display: flex; gap: 0.3rem; margin-bottom: 0.7rem; }
.device-toggle button { flex: 1; border: 0; min-height: 34px; border-radius: var(--radius); font: inherit; font-weight: 700; background: #f1f5f9; cursor: pointer; }
.device-toggle button.on { background: var(--teal); color: #fff; }
.phone { border: 8px solid #0f172a; border-radius: var(--radius); overflow: hidden; background: #fff; max-width: 260px; margin: 0 auto; }
.desk-overlay { padding: 1.2rem; }
.desk-sheet {
  width: min(920px, 100%);
  max-height: calc(100vh - 2.4rem);
  overflow: auto;
  background: #eef2f6;
  border-radius: var(--radius);
  padding: 1rem 1.1rem 1.2rem;
  display: grid;
  gap: 0.75rem;
}
.desk-sheet header { display: flex; justify-content: space-between; align-items: center; }
.desk-form { background: #fff; border-radius: var(--radius); overflow: hidden; box-shadow: 0 16px 40px rgba(15,23,42,.08); }
.desk-form .cover { height: auto; aspect-ratio: 3 / 1; max-height: 260px; }
.desk-body { padding: 1.2rem 1.4rem 1.4rem; }
.desk-body h3 { font-size: 1.35rem; }
.desk-fields { display: grid; grid-template-columns: 1fr 1fr; gap: 0.75rem 1rem; }
.desk-fields .wide { grid-column: 1 / -1; }
.desk-form .send { justify-self: start; min-width: 200px; }
.cover { aspect-ratio: 3 / 1; display: grid; place-items: center; color: #fff; overflow: hidden; }
.cover img { width: 100%; height: 100%; object-fit: cover; }
.preview-body { padding: 0.8rem; display: grid; gap: 0.5rem; }
.preview-body h3 { margin: 0; font-size: 1rem; }
.preview-body p, .preview-body small { margin: 0; color: #64748b; font-size: 0.78rem; }
.preview-body label { display: grid; gap: 0.25rem; font-size: 0.78rem; color: #475569; }
.preview-body input, .preview-body textarea, .preview-body select { border: 1px solid #e2e8f0; border-radius: var(--radius); padding: 0.45rem 0.6rem; font: inherit; background: #f8fafc; }
.send { border: 0; color: #fff; border-radius: var(--radius); min-height: var(--control-h); height: var(--control-h); font: inherit; font-weight: 700; display: inline-flex; align-items: center; justify-content: center; gap: 0.3rem; box-sizing: border-box; }
.opts, .stars { color: #64748b; font-size: 0.75rem; display: grid; gap: 0.2rem; }
.cover-box { position: relative; width: 100%; aspect-ratio: 3 / 1; max-height: 200px; border: 1.5px dashed #99f6e4; border-radius: var(--radius); background: #f0fdfa; color: #0f766e; font: inherit; font-weight: 700; cursor: pointer; overflow: hidden; display: grid; place-items: center; padding: 0; }
.cover-box.has { border-style: solid; border-color: transparent; }
.cover-box:disabled { cursor: progress; opacity: 0.75; }
.cover-box img { width: 100%; height: 100%; object-fit: cover; display: block; }
.cover-empty { display: grid; gap: 0.25rem; justify-items: center; padding: 0.5rem; }
.cover-empty small { font-weight: 500; font-size: 0.74rem; color: #64748b; }
.cover-change { position: absolute; inset-inline-start: 0.5rem; bottom: 0.5rem; background: rgba(15,23,42,.65); color: #fff; font-size: 0.74rem; padding: 0.2rem 0.55rem; border-radius: 999px; opacity: 0; transition: opacity .15s; }
.cover-box:hover .cover-change, .cover-box:disabled .cover-change { opacity: 1; }
.title-card, .field-card, .submit-card, .adv-box { border: 1px solid #eef2f7; border-radius: var(--radius); padding: 0.8rem; display: grid; gap: 0.45rem; }
.title { font: inherit; font-size: 1.1rem; font-weight: 700; color: #0f172a; border: 1px solid #e2e8f0; border-radius: var(--radius); padding: 0.55rem 0.7rem; background: #fff; width: 100%; box-sizing: border-box; }
.title:hover { border-color: #99f6e4; }
.title:focus { outline: none; border-color: var(--teal); box-shadow: 0 0 0 3px rgba(20,184,166,.15); }
.title-label { display: inline-flex; align-items: center; gap: 0.3rem; font-size: 0.78rem; font-weight: 700; color: #64748b; }
.color-row { display: flex; align-items: center; justify-content: space-between; gap: 0.6rem; font-size: 0.88rem; font-weight: 700; color: #334155; }
.color-pick { position: relative; }
.swatch-btn { display: inline-flex; align-items: center; gap: 0.45rem; border: 1px solid #e2e8f0; background: #fff; border-radius: var(--radius); padding: 0.3rem 0.5rem; font: inherit; cursor: pointer; }
.swatch-btn:hover { border-color: #99f6e4; }
.swatch { width: 26px; height: 26px; border-radius: 8px; box-shadow: inset 0 0 0 1px rgba(15,23,42,.12); }
.hex { font-size: 0.8rem; color: #475569; font-family: ui-monospace, monospace; }
.palette { position: absolute; inset-inline-end: 0; top: calc(100% + 6px); z-index: 30; width: 236px; background: #fff; border: 1px solid #e2e8f0; border-radius: var(--radius); box-shadow: 0 16px 40px rgba(15,23,42,.16); padding: 0.65rem; display: grid; gap: 0.6rem; }
.presets { display: grid; grid-template-columns: repeat(6, 1fr); gap: 0.35rem; }
.preset { width: 100%; aspect-ratio: 1; border: 0; border-radius: 8px; cursor: pointer; display: grid; place-items: center; color: #fff; box-shadow: inset 0 0 0 1px rgba(15,23,42,.1); }
.preset.on { outline: 2px solid #0f172a; outline-offset: 2px; }
.custom { display: flex; align-items: center; gap: 0.4rem; }
.native { display: inline-flex; align-items: center; gap: 0.3rem; font-size: 0.78rem; font-weight: 600; color: #475569; cursor: pointer; white-space: nowrap; }
.palette-backdrop { position: fixed; inset: 0; z-index: 29; }
.sheet-warn { font-size: 0.76rem; font-weight: 600; color: #b45309; }
.fbody { cursor: pointer; min-width: 0; }
.req { color: #ef4444; margin-inline-start: 0.15rem; }
.submit-card .native input { width: 28px; height: 28px; padding: 0; border: 0; background: none; cursor: pointer; }
.submit-card .hex-input { flex: 1; min-width: 0; padding: 0.35rem 0.5rem; font-family: ui-monospace, monospace; font-size: 0.82rem; }
.palette-done { border: 0; background: var(--teal); color: #fff; border-radius: var(--radius); min-height: 32px; font: inherit; font-weight: 700; cursor: pointer; }
.sheet-hint { font-size: 0.74rem; font-weight: 500; color: #94a3b8; }
.sheet-error { margin: 0; color: #b91c1c; font-size: 0.84rem; }
.title-card textarea, .submit-card input, .panel input, .panel select, .sheet input, .sheet select, .sheet textarea {
  border: 1px solid #e2e8f0; border-radius: var(--radius); padding: 0.55rem 0.7rem; font: inherit; width: 100%;
}
.field-card { grid-template-columns: auto 1fr auto; align-items: center; cursor: grab; }
.field-card small { color: #94a3b8; display: block; }
.fops { display: flex; gap: 0.2rem; }
.fops button { width: 30px; height: 30px; border: 0; border-radius: var(--radius); background: #f8fafc; cursor: pointer; color: #64748b; }
.fops .danger { color: #dc2626; }
.add-field { width: 100%; min-height: var(--control-h); height: var(--control-h); border: 1.5px dashed #14b8a6; background: #f0fdfa; color: #0f766e; border-radius: var(--radius); font: inherit; font-weight: 700; cursor: pointer; box-sizing: border-box; }
.adv { background: none; border: 0; font: inherit; font-weight: 700; color: #0f766e; cursor: pointer; text-align: right; }
.toolbox h3 { margin: 0 0 0.5rem; font-size: 0.95rem; }
.tools { display: grid; grid-template-columns: 1fr 1fr; gap: 0.4rem; margin-bottom: 1rem; }
.tools button {
  border: 1px solid #eef2f7;
  background: #f8fafc;
  border-radius: var(--radius);
  min-height: 52px;
  padding: 0.35rem 0.4rem;
  font: inherit;
  font-size: 0.75rem;
  cursor: pointer;
  display: grid;
  place-items: center;
  gap: 0.15rem;
  color: #334155;
  text-align: center;
}
.ready { margin-bottom: 0.35rem; }
.ready-toggle {
  width: 100%;
  background: none;
  border: 0;
  text-align: right;
  font: inherit;
  font-weight: 700;
  padding: 0.45rem 0;
  cursor: pointer;
  color: #0f172a;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 0.5rem;
}
.ready-caret { color: #94a3b8; font-size: 0.85rem; }
.ready-tools { margin: 0 0 0.65rem; }
.panel { display: grid; gap: 0.7rem; }
.panel label, .sheet label { display: grid; gap: 0.3rem; font-size: 0.88rem; font-weight: 700; color: #334155; }
.chk { display: flex !important; align-items: center; gap: 0.4rem; font-weight: 600 !important; }
.chips { display: flex; flex-wrap: wrap; gap: 0.35rem; }
.chip { border: 1px solid #e2e8f0; background: #fff; border-radius: 999px; padding: 0.3rem 0.7rem; font: inherit; cursor: pointer; }
.chip.on { background: #ccfbf1; border-color: #99f6e4; color: #0f766e; font-weight: 700; }
.row { display: flex; gap: 0.4rem; align-items: stretch; }
.row input { flex: 1; min-width: 0; }
.sub { border-bottom: 1px solid #f1f5f9; padding: 0.5rem 0; }
.overlay { position: fixed; inset: 0; background: rgba(15,23,42,.35); display: grid; place-items: center; z-index: 40; padding: 1rem; }
.sheet { width: min(420px,100%); max-height: calc(100dvh - 2rem); overflow-y: auto; background: #fff; border-radius: var(--radius); padding: 1rem; display: grid; gap: 0.65rem; box-sizing: border-box; }
.sheet-head { display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; }
.sheet-head h3 { margin: 0; }
.sheet-actions { display: flex; gap: 0.5rem; }
.sheet-actions .btn { flex: 1; }
.x-btn { width: 36px; height: 36px; flex-shrink: 0; border: 1px solid #e2e8f0; border-radius: var(--radius); background: #fff; color: #64748b; display: grid; place-items: center; cursor: pointer; }
.x-btn:hover { background: #f8fafc; color: #0f172a; border-color: #cbd5e1; }
.link { background: none; border: 0; color: #0f766e; font: inherit; font-weight: 700; cursor: pointer; text-align: right; padding: 0; }
.panel-title {
  margin: 0.2rem 0 0;
  padding-top: 0.55rem;
  border-top: 1px solid #f1f5f9;
  font-size: 0.95rem;
  color: #0f766e;
}
.panel > .panel-title:first-child {
  border-top: 0;
  padding-top: 0;
}
.settings-panel {
  gap: 0.85rem;
  background: transparent;
  box-shadow: none;
  padding: 0;
}
.settings-card {
  background: #fff;
  border: 1px solid #eef2f7;
  border-radius: var(--radius);
  padding: 1rem 1.05rem;
  display: grid;
  gap: 0.85rem;
  box-shadow: 0 8px 22px rgba(15,23,42,.04);
}
.settings-card.optional {
  background: #f8fafc;
  border-style: dashed;
}
.settings-card-head h3 {
  margin: 0;
  font-size: 0.98rem;
  font-weight: 700;
  color: #0f172a;
}
.settings-card-head p {
  margin: 0.2rem 0 0;
  font-size: 0.8rem;
  color: #64748b;
  font-weight: 500;
}
.toggle-list { display: grid; gap: 0.45rem; }
.toggle-row {
  display: flex !important;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.7rem 0.8rem;
  border: 1px solid #eef2f7;
  border-radius: var(--radius);
  background: #fff;
  font-weight: 600 !important;
}
.toggle-list.compact .toggle-row { padding: 0.55rem 0.7rem; }
.toggle-row span {
  display: grid;
  gap: 0.15rem;
  min-width: 0;
}
.toggle-row strong {
  font-size: 0.9rem;
  color: #0f172a;
  font-weight: 700;
}
.toggle-row small {
  font-size: 0.75rem;
  color: #64748b;
  font-weight: 500;
  line-height: 1.35;
}
.toggle-row input[type='checkbox'] {
  width: 1.15rem;
  height: 1.15rem;
  flex: 0 0 auto;
  accent-color: #14b8a6;
  cursor: pointer;
}
.settings-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.75rem 0.85rem;
}
.settings-grid .field,
.settings-card .field {
  display: grid;
  gap: 0.3rem;
  font-size: 0.84rem;
  font-weight: 700;
  color: #334155;
}
.settings-grid .span-2 { grid-column: 1 / -1; }
.settings-card .field input,
.settings-card .field select,
.settings-grid .field input,
.settings-grid .field select {
  border: 1px solid #e2e8f0;
  border-radius: var(--radius);
  padding: 0.55rem 0.7rem;
  font: inherit;
  width: 100%;
  background: #fff;
  font-weight: 500;
  color: #0f172a;
}
.settings-empty {
  margin: 0;
  font-size: 0.8rem;
  color: #94a3b8;
}
.pipeline-field { margin-top: 0.15rem; }
.settings-actions {
  display: flex;
  justify-content: flex-end;
  position: sticky;
  bottom: 0.5rem;
  padding-top: 0.25rem;
}
.settings-actions .btn { min-width: 160px; }
.share-actions { display: flex; gap: 0.4rem; }
.iframe-code { flex: 1; border: 1px solid #e2e8f0; border-radius: var(--radius); padding: 0.55rem 0.7rem; font: inherit; width: 100%; resize: vertical; min-width: 0; }
.row.col { flex-direction: column; align-items: stretch; }
.crm-hint {
  margin: 0;
  color: #64748b;
  font-size: 0.85rem;
  background: #f8fafc;
  border: 1px solid #eef2f7;
  border-radius: var(--radius);
  padding: 0.65rem 0.75rem;
}
.stats-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.5rem;
  margin-bottom: 0.85rem;
}
.stat {
  background: #f0fdfa;
  border: 1px solid #ccfbf1;
  border-radius: var(--radius);
  padding: 0.6rem 0.55rem;
  display: grid;
  gap: 0.15rem;
  text-align: center;
}
.stat b { font-size: 1.05rem; color: #0f766e; }
.stat span { font-size: 0.72rem; color: #64748b; line-height: 1.3; }
.publish-sheet { width: min(520px, 100%); gap: 0.75rem; max-height: calc(100vh - 2rem); overflow: auto; }
.publish-head { display: flex; justify-content: space-between; align-items: center; }
.publish-preview {
  display: grid;
  grid-template-columns: 72px 1fr;
  gap: 0.75rem;
  align-items: center;
  padding: 0.65rem;
  background: #f8fafc;
  border: 1px solid #eef2f7;
  border-radius: var(--radius);
}
.publish-preview h4 { margin: 0 0 0.25rem; }
.publish-preview p { margin: 0 0 0.35rem; color: #64748b; font-size: 0.82rem; }
.publish-preview a { color: #0f766e; font-weight: 700; font-size: 0.85rem; }
.mini-cover {
  width: 108px;
  aspect-ratio: 3 / 1;
  border-radius: var(--radius);
  overflow: hidden;
}
.mini-cover img { width: 100%; height: 100%; object-fit: cover; }
.publish-qr { justify-self: start; border-radius: 8px; border: 1px solid #eef2f7; }
@media (max-width: 1100px) {
  .workspace { grid-template-columns: 1fr; }
  .preview-col { order: 3; }
  .toolbox { order: 1; }
  .canvas { order: 2; }
  .tools { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 700px) {
  .top-ghosts {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.45rem;
    width: 100%;
  }
  .top-ghosts :deep(.ui-btn) { width: 100%; }
  .tabs { display: grid; grid-template-columns: 1fr 1fr; }
  .stats-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .publish-preview { grid-template-columns: 56px 1fr; }
  .mini-cover { width: 84px; }
  .settings-grid { grid-template-columns: 1fr; }
  .settings-grid .span-2 { grid-column: auto; }
  .settings-card { padding: 0.85rem; }
  .toggle-row { align-items: flex-start; }
  .settings-actions { justify-content: stretch; }
  .settings-actions .btn { width: 100%; min-width: 0; }
}
</style>