/* ============================================================
   LIVE EDIT SYSTEM — CSS generik geinvita.com
   ------------------------------------------------------------
   Dipakai bersama oleh SEMUA template tema (bukan cuma
   wedding/black_white) — styling untuk toolbar edit, badge mode
   edit, popover ganti foto, dan modal "Buat Link Undangan" +
   checkout. Jangan taruh styling spesifik satu tema di sini (mis.
   warna/layout section cover/hero/gallery) — itu tetap di <style>
   masing-masing file tema.

   ⚠️ TIDAK LAGI BERGANTUNG PADA VARIABEL TEMA (2026-08, diperbaiki):
   Dulu file ini memakai var(--line)/var(--muted)/var(--cream) milik
   tema (WAJIB didefinisikan tema pemanggil) supaya "ikut" warna tema
   — TAPI ini yang bikin toolbar/badge/modal tampil beda-beda & bahkan
   RUSAK di sebagian tema: modal ini selalu berlatar PUTIH (background:#fff
   hardcode di bawah), sementara --cream/--line/--muted tiap tema
   di-tuning untuk latar KHAS tema itu sendiri (mis. tema gelap seperti
   tech_summit & retro_arcade punya --cream & --muted versi terang/nyaris
   putih buat dipakai DI ATAS latar gelap tema — begitu dipakai di modal
   Live Edit yang latarnya putih, teks jadi putih-di-atas-putih alias
   nyaris tak kelihatan). Solusinya: sekarang Live Edit punya PALET
   WARNA SENDIRI (variabel --le-*, didefinisikan di bawah, NETRAL & TETAP
   di semua tema) — sama sekali tidak baca var(--line)/--muted/--cream
   milik tema lagi, jadi tampilannya konsisten di 25 tema mana pun & tema
   baru ke depannya TIDAK PERLU mendefinisikan variabel apa pun supaya
   Live Edit tampil benar (dulu itu jadi kontrak wajib, sekarang tidak).
   Font juga tidak lagi bergantung ke 'Plus Jakarta Sans' (cuma dimuat
   1 dari 25 tema) — dipakai system font stack yang selalu tersedia di
   browser mana pun, sama seperti dipakai `home.css`.

   Cara pakai: muat file ini di <head> tema — urutan terhadap :root tema
   TIDAK PENTING LAGI (karena sudah tidak baca variabel tema):
     <link rel="stylesheet" href="{% static 'css/live-edit.css' %}">
   ============================================================ */

  /* Palet warna KHUSUS Live Edit — SENGAJA terpisah total dari variabel
     warna tema (--line/--muted/--cream milik masing-masing tema TIDAK
     dipakai di file ini sama sekali). Nilai tetap sama di semua tema,
     supaya toolbar/badge/modal Live Edit selalu tampil identik terlepas
     dari tema yang sedang aktif. */
  :root{
    --le-ink:#111111;         /* teks utama & latar elemen gelap (badge, tombol) */
    --le-paper:#ffffff;       /* latar modal/kartu Live Edit */
    --le-text:#151515;        /* warna teks di atas --le-paper */
    --le-line:rgba(17,17,17,0.14);  /* border tipis, netral, kontras cukup di atas putih */
    --le-muted:#6b6b6b;       /* teks sekunder/abu-abu di atas --le-paper */
    --le-cream:#f2f0ec;       /* latar tombol "Batal" dsb — abu-abu netral hangat */
    --le-danger:#c0392b;      /* pesan error */
    --le-font:-apple-system, BlinkMacSystemFont, "Segoe UI", Inter, Roboto, Helvetica, Arial, sans-serif;
  }

  /* Font semua elemen UI Live Edit yang melayang DI LUAR .le-modal
     (badge, toolbar, tooltip, popover ganti media, overlay kunci layar)
     — dipaksa pakai --le-font, TIDAK ikut font tema (yang kadang
     dekoratif/script, kurang cocok dipakai di teks UI berukuran kecil). */
  /* Selector diperluas ke SEMUA descendant (", .xxx *") — BUKAN cuma
     elemen kontainernya sendiri (2026-08 fix). Sebelumnya cuma elemen
     kontainer (mis. .le-modal) yang di-set font-family, anak-anaknya
     (h3, p, span, dsb) mengandalkan INHERITANCE dari parent — tapi kalau
     tema punya aturan CSS sendiri yang menyasar tag itu langsung (mis.
     `h3{font-family:'Playfair Display'}`, sangat umum di tema dekoratif),
     deklarasi LANGSUNG pada elemen SELALU menang lawan nilai yang cuma
     "ikut" dari parent lewat inheritance — TIDAK PEDULI urutan <link>/
     <style> atau seberapa tinggi/rendah specificity aturan tema itu
     (bukan aturan cascade specificity, tapi direct-declaration-beats-
     inheritance). Ini penyebab bug "font di overlay/modal Live Edit
     ikut berubah-ubah tergantung tema" yang dilaporkan user — solusinya
     paksa font-family LANGSUNG di setiap elemen turunan pakai `*`,
     supaya tidak ada celah buat inheritance ke-override tema. */
  .live-edit-badge, .live-edit-badge *,
  .edit-toolbar, .edit-toolbar *,
  .et-tooltip, .et-tooltip *,
  .swap-popover, .swap-popover *,
  .inline-editor, .inline-editor *,
  .le-busy-lock-box, .le-busy-lock-box *,
  .le-modal, .le-modal *{
    font-family:var(--le-font);
  }
  .live-edit-mode [data-editable="text"]{
    outline:1.5px dashed rgba(17,17,17,0.35);
    outline-offset:3px;
    border-radius:4px;
    cursor:text;
    transition:outline-color .15s ease, background .15s ease;
  }
  .live-edit-mode [data-editable="text"]:hover{
    outline-color:rgba(17,17,17,0.6);
    background:rgba(17,17,17,0.04);
  }
  .live-edit-mode [data-editable="text"]:focus{
    outline:1.5px solid #111;
    background:rgba(17,17,17,0.06);
  }
  .live-edit-mode [data-editable="img"],
  .live-edit-mode [data-editable="bg"]{
    cursor:pointer;
    outline:2px dashed rgba(17,17,17,0.45);
    outline-offset:-2px;
    position:relative;
  }
  .live-edit-mode [data-editable="img"]:hover,
  .live-edit-mode [data-editable="bg"]:hover{
    outline-color:#111;
  }
  .edit-only{display:none;}
  .live-edit-mode .edit-only{display:inline-flex;}
  .live-edit-mode #cover{ /* allow inspecting cover even though app hidden by lock */ }

  .live-edit-badge{
    position:fixed;top:14px;left:50%;transform:translateX(-50%);
    /* z-index DINAIKKAN dari 600 ke 1050 (2026-08 fix) — SEMUA 25 tema
       punya #cover (layar sampul "buka undangan") dengan z-index:999,
       yang sengaja TETAP TAMPIL di atas konten walau sedang mode edit
       (lihat komentar ".live-edit-mode #cover" di atas — supaya cover
       juga bisa diedit) — akibatnya badge ini (dulu z-index:600) selalu
       KETUTUPAN cover, tidak pernah kelihatan sama sekali padahal
       elemennya ada & aktif. 1050 dipilih supaya di atas #cover (999)
       & floating-controls (1100 di sebagian besar tema, TAPI badge ini
       tidak perlu di atas floating-controls karena posisinya beda,
       tidak pernah tumpang tindih) — tetap di BAWAH swap-popover
       (1150)/modal (1200)/busy-lock (1900) yang memang harus selalu
       paling atas dari overlay apa pun. */
    z-index:1050;
    background:#111;color:#fff;
    font-size:11px;font-weight:700;letter-spacing:0.08em;text-transform:uppercase;
    padding:8px 16px;border-radius:999px;
    display:none;align-items:center;gap:8px;
    box-shadow:0 8px 20px rgba(0,0,0,0.25);
  }
  .live-edit-mode .live-edit-badge{display:inline-flex;}
  .live-edit-badge .dot{width:6px;height:6px;border-radius:50%;background:#7CFF6B;}

  /* --- pemilih musik latar, nempel di badge "Mode Edit Aktif" ---
     Markup-nya (#leBadgeMusic #leMusicToggle #leMusicMenu) ditaruh
     MANUAL di tiap tema tepat di dalam #liveEditBadge (sama seperti
     toggle+toolbar, lihat catatan di templates/live_edit/_controls.html)
     — daftar lagunya sendiri di-render oleh JS (renderMusicMenu() di
     live-edit-engine.js) dari MUSIC_LIBRARY, supaya nambah/ganti lagu
     ke depannya cukup ubah satu tempat itu, tidak perlu edit 25 file
     tema manual. */
  .le-badge-music{position:relative;display:inline-flex;margin-left:2px;}
  .le-badge-music-btn{
    background:rgba(255,255,255,0.16);color:#fff;border:0;border-radius:999px;
    width:22px;height:22px;display:inline-flex;align-items:center;justify-content:center;
    font-size:12px;line-height:1;cursor:pointer;flex:none;
    transition:background .15s ease;
  }
  .le-badge-music-btn:hover,
  .le-badge-music-btn.active{background:rgba(255,255,255,0.32);}
  .le-badge-music-menu{
    position:absolute;top:calc(100% + 8px);left:50%;transform:translateX(-50%);
    background:#111;border-radius:12px;padding:6px;
    display:none;flex-direction:column;gap:2px;min-width:172px;
    box-shadow:0 10px 30px rgba(0,0,0,0.35);
    text-transform:none;letter-spacing:0;font-weight:600;
    /* badge induk pakai text-align implicit center (posisinya fixed +
       translateX -50%) — menu dropdown-nya sendiri harus rata kiri
       biar nama lagu gampang dibaca, BUKAN ikut center */
    text-align:left;
  }
  .le-badge-music-menu.open{display:flex;}
  .le-badge-music-menu button{
    background:transparent;color:#fff;border:0;border-radius:8px;
    padding:8px 10px;font-size:11.5px;text-align:left;
    display:flex;align-items:center;gap:8px;white-space:nowrap;
    width:100%;
  }
  .le-badge-music-menu button:hover{background:rgba(255,255,255,0.12);}
  .le-badge-music-menu button.is-selected{background:rgba(255,255,255,0.18);font-weight:800;}
  .le-badge-music-menu button .dot-check{
    width:6px;height:6px;border-radius:50%;background:#7CFF6B;
    opacity:0;flex:none;
  }
  .le-badge-music-menu button.is-selected .dot-check{opacity:1;}

  /* --- toolbar toggle button + stacking menu --- */
  .edit-toolbar-wrap{position:relative;}
  .edit-toolbar{
    position:absolute;
    right:0;bottom:calc(100% + 10px);
    display:flex;flex-direction:column-reverse;
    gap:8px;
    align-items:flex-end;
    opacity:0;pointer-events:none;
    transform:translateY(8px);
    transition:opacity .2s ease, transform .2s ease;
  }
  .edit-toolbar.open{
    opacity:1;pointer-events:auto;
    transform:translateY(0);
  }
  .et-btn{
    width:44px;height:44px;border-radius:50%;
    background:#fff;color:#111;
    display:flex;align-items:center;justify-content:center;
    box-shadow:0 6px 16px rgba(0,0,0,0.22);
    border:1px solid var(--le-line);
    position:relative;
    transition:transform .15s ease, background .15s ease, color .15s ease;
  }
  .et-btn svg{width:17px;height:17px;}
  .et-btn:active{transform:scale(0.9);}
  .et-btn.active{background:#111;color:#fff;}
  .et-btn:disabled{opacity:0.35;pointer-events:none;}
  /* caption/tooltip bergaya sama, dipakai di semua tombol bulat
     (tombol toolbar .et-btn maupun tombol utama .fc-btn) */
  .et-tooltip{
    position:absolute;right:52px;top:50%;transform:translateY(-50%);
    background:#111;color:#fff;font-size:11px;font-weight:600;
    padding:6px 10px;border-radius:8px;white-space:nowrap;
    opacity:0;pointer-events:none;transition:opacity .15s ease;
    box-shadow:0 6px 14px rgba(0,0,0,0.25);
  }
  .et-btn:hover .et-tooltip,
  .fc-btn:hover .et-tooltip{opacity:1;}
  #btnEditToggle.active{background:#111;color:#fff;}

  /* --- media swap popover --- */
  .swap-popover{
    /* harus di atas #cover (999) & floating-controls (1100) supaya tombolnya
       tetap bisa diklik saat mengedit foto cover (yang overlay-nya sendiri
       z-index tinggi); tetap di bawah modal "Buat Link" (1200) */
    position:fixed;z-index:1150;
    background:#111;color:#fff;
    border-radius:14px;padding:8px;
    display:flex;gap:6px;
    box-shadow:0 10px 30px rgba(0,0,0,0.35);
  }
  .swap-popover button{
    background:rgba(255,255,255,0.1);color:#fff;
    padding:9px 12px;border-radius:9px;
    font-size:11.5px;font-weight:600;
    display:flex;align-items:center;gap:6px;white-space:nowrap;
  }
  .swap-popover button:hover{background:rgba(255,255,255,0.2);}
  /* .swap-busy (dulu dipakai render notifikasi progres DI DALAM popover
     kecil ini) SENGAJA DIHAPUS (2026-08-16) — sempat bikin 2 notifikasi
     progres nampil bersamaan (satu di sini, satu lagi di overlay
     .le-busy-lock di tengah layar). Sekarang cuma .le-busy-lock yang
     dipakai, lihat blok itu di bawah. .swap-spinner tetap dipakai
     (dipakai ulang di .le-busy-lock-box). */
  .swap-spinner{
    width:14px;height:14px;border-radius:50%;
    border:2px solid rgba(255,255,255,0.25);
    border-top-color:#fff;
    animation:swap-spin .7s linear infinite;
  }
  @keyframes swap-spin{ to{ transform:rotate(360deg); } }

  /* --- video sebagai cover/latar ATAU foto galeri (OPSIONAL, modular) --
     Dipakai elemen [data-editable="bg"] MAUPUN [data-editable="img"]
     yang mau bisa diisi video, bukan cuma foto. Cara pakai di tema mana
     pun, dua varian:

     VARIAN A — [data-editable="bg"] (video jadi cover/latar penuh,
     contoh nyata: elemen #coverBg di templates/themes/wedding/black_white/index.html):
       1) tambahkan atribut data-accept-video="1" di elemen [data-editable="bg"]
          itu (elemen itu WAJIB sudah position:relative/absolute/fixed
          supaya <video> anaknya, yang position:absolute;inset:0, bisa
          mengisi penuh — cek CSS elemen bg-mu, biasanya sudah begitu
          kalau dia dipakai sebagai cover/hero).
       2) taruh <video class="le-media-video" muted loop autoplay playsinline>
          </video> sebagai CHILD PERTAMA elemen [data-editable="bg"] itu
          sendiri — src-nya diisi otomatis oleh live-edit-engine.js,
          JANGAN diisi manual.

     VARIAN B — [data-editable="img"] (video jadi salah satu ITEM di
     galeri/daftar foto, contoh nyata: renderGallery() di tema
     wedding/black_white — setiap gallery-item bisa foto ATAU video):
       1) tambahkan atribut data-accept-video="1" di elemen <img
          data-editable="img"> itu sendiri.
       2) taruh <video class="le-media-video" muted loop autoplay playsinline>
          </video> sebagai SIBLING (anak lain dari parent yang sama),
          BUKAN child dari <img> (elemen <img> "void", tidak bisa punya
          child) — parent-nya (mis. div.gallery-item) WAJIB
          position:relative supaya video (position:absolute;inset:0)
          mengisi penuh area itu, menutupi <img> di baliknya saat aktif.

     Untuk KEDUA varian, langkah terakhir sama:
       3) muat <script src="{% static 'js/live-edit-engine.js' %}"></script>
          seperti biasa — modul video (window.LiveEditVideo, kompresi
          ffmpeg.wasm 100% di browser user) sudah ADA DI DALAM file ini
          sejak digabung (2026-08), tidak perlu <script> tambahan lagi.
          Tombol "🎬 Upload Video" otomatis tidak muncul kalau elemen
          tidak punya data-accept-video="1" (graceful degrade tetap
          jalan seperti sebelumnya).
     Kalau elemen TIDAK menambahkan atribut/markup di atas, sama sekali
     tidak ada perubahan perilaku — 100% backward compatible dengan tema
     yang cuma pakai foto.

     Class "has-video" ditoggle otomatis oleh live-edit-engine.js di
     HOST yang sesuai (elemen [data-editable="bg"] itu sendiri utk
     Varian A, atau parent-nya utk Varian B) — CSS di bawah generik,
     berlaku utk kedua varian sekaligus lewat host itu. */
  .le-media-video{
    display:none;
    position:absolute;inset:0;
    width:100%;height:100%;
    object-fit:cover;
    z-index:0;
    pointer-events:none;
  }
  [data-editable="bg"].has-video{background-image:none !important;}
  .has-video > .le-media-video{display:block;}
  /* Sengaja "> img" generik (BUKAN cuma "> img[data-editable=\"img\"]")
     supaya juga menutupi <img> MIRROR non-editable seperti di slide
     lightbox galeri (templates/themes/.../index.html, syncGalleryMedia())
     — mirror itu bukan elemen [data-editable] beneran (cuma nampilin
     ulang), tapi tetap harus disembunyikan pas host-nya video. */
  .has-video > img{display:none;}

  /* --- form inline saat Live Edit aktif (tanggal acara, cari lokasi,
     judul tab browser) — satu class dipakai ulang untuk ketiganya --- */
  .inline-editor{
    margin-top:14px;display:none;
    align-items:center;justify-content:center;gap:8px;flex-wrap:wrap;
  }
  .live-edit-mode .inline-editor{display:flex;}
  .inline-editor input{
    font-family:var(--le-font);
    border:1px solid var(--le-line);border-radius:10px;
    padding:9px 12px;font-size:13px;background:#fff;color:#111;
  }
  .inline-editor input[type="text"]{min-width:220px;flex:1;}
  .inline-editor label{
    font-size:11px;color:var(--le-muted);letter-spacing:0.05em;
    text-transform:uppercase;width:100%;text-align:center;
  }
  .inline-editor-btn{
    background:#111;color:#fff;border:0;border-radius:10px;
    padding:10px 16px;font-size:11.5px;font-weight:700;
    letter-spacing:0.03em;white-space:nowrap;
  }

  /* --- publish link modal --- */
  .le-modal-backdrop{
    position:fixed;inset:0;z-index:1200;
    background:rgba(10,10,10,0.6);
    display:none;align-items:center;justify-content:center;
    padding:22px;
  }
  .le-modal-backdrop.open{display:flex;}
  .le-modal{
    /* background & warna teks di-hardcode EKSPLISIT di sini (bukan
       inherit dari body tema) — supaya elemen di dalamnya yang lupa
       diberi warna sendiri (mis. h3 di bawah) tidak ikut memakai warna
       teks tema (yang di tema gelap bisa jadi putih/terang, nyaris tak
       kelihatan di atas modal putih ini). Ini bug yang sempat kejadian
       sebelum file ini dipisah dari variabel warna tema. */
    background:var(--le-paper); color:var(--le-text);
    font-family:var(--le-font);
    border-radius:20px;
    padding:26px 24px;max-width:380px;width:100%;
    text-align:center;
  }
  .le-modal h3{font-size:20px;margin-bottom:8px;color:var(--le-ink);}
  .le-modal p{font-size:13px;color:var(--le-muted);line-height:1.6;margin-bottom:18px;}
  .le-link-box{
    display:flex;align-items:center;gap:8px;
    border:1px solid var(--le-line);border-radius:12px;
    padding:10px 12px;margin-bottom:16px;
    transition:border-color .15s ease, background .15s ease;
  }
  /* Slug/link bentrok dengan punya orang lain (cek server, HTTP 409) —
     lihat generateLink() di live-edit-engine.js. */
  .le-link-box.is-error{
    border-color:var(--le-danger);
    background:rgba(192,57,43,0.06);
  }
  .le-link-box.is-error input{ color:var(--le-danger); }
  .le-link-box input{
    flex:1;border:0;background:transparent;font-size:12.5px;color:#111;
    font-family:var(--le-font);
  }
  .le-link-prefix{font-size:12.5px;color:var(--le-muted);white-space:nowrap;}
  /* Kotak "Link Undangan" di form #leSlugLinkBox (prefix "geinvita.com/"
     + input nama-undangan) SENGAJA tanpa gap — .le-link-box generik di
     atas punya gap:8px (dipakai juga di modal hasil #leModalBackdrop,
     yang butuh jarak antara <input readonly> & tombol "Salin"), tapi di
     sini gap itu bikin ada spasi kelihatan di antara "geinvita.com/" &
     nama slug yang diketik user (mis. "geinvita.com/ nama-undangan"),
     padahal keduanya harus terlihat NYAMBUNG jadi satu alamat URL utuh
     ("geinvita.com/nama-undangan") tanpa spasi. */
  #leSlugLinkBox{ gap:0; }
  .le-modal .le-slug-actions{display:flex;gap:8px;justify-content:center;margin-top:16px;}
  .le-modal .le-slug-actions .le-close{flex:1;}
  /* Selector 3-tingkat (.le-modal .le-slug-actions .le-slug-confirm) SENGAJA
     dipakai, bukan cuma ".le-modal .le-slug-confirm" — supaya spesifisitasnya
     lebih tinggi dari ".le-modal .le-close" di bawah (keduanya nempel di
     tombol yang sama: class="le-close le-slug-confirm"), jadi warna di
     sini PASTI menang urutan manapun aturannya ditulis. Gotcha CSS
     specificity yang sama seperti pernah kejadian di home.css/geinvita.css.
     Warna HITAM (--le-ink) — SENGAJA diganti dari merah (--le-danger)
     supaya serasi dengan tombol utama home page (.home-btn-primary di
     home.css, juga hitam-putih) — dipakai tombol "Lanjut Edit" (modal
     draft) & "Lanjut ke Pembayaran" (modal slug), KEDUANYA aksi
     lanjut/positif, bukan aksi destruktif, jadi warna merah "bahaya"
     memang tidak cocok dari awal. */
  .le-modal .le-slug-actions .le-slug-confirm{
    background:var(--le-ink);color:#fff;
  }
  .le-modal .le-slug-actions .le-slug-confirm:hover{ opacity:.85; }
  .le-modal .le-slug-actions .le-slug-confirm:disabled{ opacity:0.6; }

  /* --- modal "Buat Link Undangan" versi lengkap (judul tab + OG + slug) --- */
  .le-modal-wide{
    max-width:420px;max-height:86vh;overflow-y:auto;text-align:left;
  }
  .le-modal-wide h3,
  .le-modal-wide > p{text-align:center;}
  .le-form-group{margin-bottom:14px;}
  .le-form-group label{
    display:block;font-size:11px;color:var(--le-muted);
    letter-spacing:0.04em;text-transform:uppercase;margin-bottom:6px;
  }
  /* --- pilihan paket: kartu yang bisa diklik, pengganti <select> ---
     Dirender oleh renderPlanList() di live-edit-engine.js dari data
     PricingPlan yang dikirim server (lihat getPricingPlans()). */
  .le-plan-list{ display:flex; flex-direction:column; gap:8px; }
  .le-plan-card{
    display:flex; align-items:center; gap:12px;
    width:100%; text-align:left; cursor:pointer;
    font:inherit; font-family:var(--le-font);
    border:1.5px solid var(--le-line); border-radius:12px;
    padding:12px 14px; background:#fff;
    transition:border-color .15s ease, background .15s ease;
  }
  .le-plan-card:hover{ border-color:rgba(17,17,17,0.3); }
  .le-plan-card.is-selected{
    border-color:var(--le-ink);
    background:rgba(17,17,17,0.035);
  }
  .le-plan-card-radio{
    flex:0 0 auto; width:18px;height:18px;border-radius:50%;
    border:1.5px solid var(--le-line); position:relative;
    transition:border-color .15s ease;
  }
  .le-plan-card.is-selected .le-plan-card-radio{ border-color:var(--le-ink); }
  .le-plan-card.is-selected .le-plan-card-radio::after{
    content:''; position:absolute; inset:3px; border-radius:50%;
    background:var(--le-ink);
  }
  .le-plan-card-info{ flex:1; min-width:0; display:flex; flex-direction:column; gap:2px; }
  .le-plan-card-name{
    font-size:13.5px; font-weight:700; color:var(--le-ink);
    overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
  }
  .le-plan-card-meta{ font-size:11.5px; color:var(--le-muted); }
  .le-plan-card-price{
    flex:0 0 auto; font-size:13.5px; font-weight:800; color:var(--le-ink);
    white-space:nowrap;
  }
  .le-slug-error{
    color:var(--le-danger);font-size:12.5px;margin:-4px 0 14px;
  }
  /* Varian dipakai #leSlugAvailabilityError — di dalam .le-modal-wide,
     .le-link-box punya margin-bottom:0 (lihat aturan di bawah), jadi di
     sini butuh sedikit jarak POSITIF di atas (bukan negatif seperti
     .le-slug-error generik) supaya tidak nempel ke kotak link. */
  .le-slug-error--inline{ margin:8px 0 16px; }
  .le-form-group label em{
    font-style:normal;text-transform:none;letter-spacing:0;opacity:0.75;
  }
  .le-form-group input,
  .le-form-group textarea{
    width:100%;font-family:var(--le-font);
    border:1px solid var(--le-line);border-radius:10px;
    padding:10px 12px;font-size:13px;background:#fff;color:#111;
  }
  .le-form-group textarea{resize:vertical;min-height:54px;}
  /* Hilangkan outline biru bawaan browser saat form input di-fokus (klik/
     tab ke dalamnya) — semua input/textarea di modal Live Edit ini sudah
     punya border sendiri (var(--le-line)) yang cukup jadi penanda kotak
     input, jadi ring/outline fokus bawaan browser di atasnya cuma
     berlebihan & tidak konsisten dengan gaya home page (yang juga tanpa
     ring fokus, lihat home.css). Cakupan sengaja generik (semua <input>/
     <textarea> di dalam .le-modal manapun, plus input di .inline-editor
     yang letaknya DI LUAR .le-modal seperti tanggal acara/cari lokasi/
     judul tab) supaya konsisten di semua form Live Edit, bukan cuma
     modal slug. */
  .le-modal input:focus,
  .le-modal textarea:focus,
  .inline-editor input:focus{
    outline:none;
  }
  .le-form-divider{
    margin:20px 0 14px;padding-top:14px;border-top:1px dashed var(--le-line);
    font-size:11px;font-weight:700;letter-spacing:0.05em;text-transform:uppercase;color:#111;
  }
  .le-form-divider span{
    display:block;font-weight:400;text-transform:none;letter-spacing:0;
    color:var(--le-muted);font-size:11.5px;margin-top:3px;
  }
  .le-modal-wide .le-link-box{margin-bottom:0;}
  .le-link-box button{
    background:#111;color:#fff;border-radius:8px;padding:8px 12px;
    font-size:11.5px;font-weight:700;
  }
  .le-modal .le-close{
    background:var(--le-cream);border-radius:999px;padding:11px 20px;
    font-size:12.5px;font-weight:700;letter-spacing:0.04em;
  }

  /* --- overlay "kunci layar" selama proses kompresi/upload foto ATAU
     video (di elemen mana pun) — lihat showBusyLock()/hideBusyLock()
     di live-edit-engine.js. Markup-nya #leBusyLock ada di
     templates/live_edit/_controls.html, generik dipakai semua tema.
     z-index PALING TINGGI di antara semua elemen Live Edit lain (di
     atas modal 1200, popover 1150) — memang harus di atas segalanya
     supaya benar-benar mengunci interaksi user sampai proses selesai. */
  .le-busy-lock{
    position:fixed;inset:0;z-index:1900;
    background:rgba(10,10,10,0.55);
    display:none;align-items:center;justify-content:center;
    padding:22px;cursor:wait;
  }
  .le-busy-lock.open{display:flex;}
  .le-busy-lock-box{
    background:#111;color:#fff;border-radius:16px;
    padding:18px 24px;display:flex;align-items:center;gap:12px;
    font-size:13px;font-weight:600;line-height:1.4;
    box-shadow:0 16px 40px rgba(0,0,0,0.4);
    max-width:min(320px, 86vw);text-align:left;
  }
  .le-busy-lock-box .swap-spinner{width:18px;height:18px;flex:none;}
