/* ============================================================================
   Text Image Editor — gaya statis
   Versi 1.0.8 · editor.mataanginproperti.com/v1/editor.css

   Sisa gaya editor (panel, laci, tema terang) disuntikkan sendiri oleh
   editor.js lewat injectTeCss(). Berkas ini hanya memuat gaya yang harus
   sudah ada sebelum editor dibuka.

   WAJIB dimuat bersama editor.js. Kalau hanya JS yang dipasang, teks
   tergambar dua kali dan saling menimpa — kanvas dan DOM sama-sama menulis.
   ============================================================================ */

/* ============================================================================
   PALET TUNGGAL
   ============================================================================
   Sebelum ini setiap layar memilih warnanya sendiri: halaman awal hitam,
   kolom kiri putih, pentas krem, layar galat hitam lagi. Satu aplikasi,
   lima selera. Itu bukan tema - itu kebetulan.

   Sekarang tidak ada satu pun warna yang ditulis langsung di aturan gaya.
   Semuanya menunjuk ke token di bawah. Ubah satu baris di sini, seluruh
   editor - halaman awal, panel, pentas, laci, dialog - ikut berubah.

   BAWAANNYA TERANG. Nada gelap tinggal menimpa nilai tokennya lewat kelas
   .tie-gelap; tidak ada aturan gaya kedua yang perlu ditulis ulang.

   Token dipasang pada :root DAN #teksOverlay. Yang pertama untuk halaman
   editor sendiri (index.html); yang kedua supaya overlay yang disemat di
   halaman induk tetap punya paletnya sendiri, apa pun warna induknya.
   Menaruh token di :root aman untuk induk: nilai kustom tidak mengecat
   apa-apa sampai ada aturan yang memakainya, dan tidak ada aturan kita yang
   menyentuh <html> atau <body> milik induk.

   --tie-aksen boleh ditimpa apps induk lewat setelan "warna". Semua nada
   turunannya (lembut/kuat/garis) dihitung dari aksen itu dengan color-mix,
   jadi mengganti satu warna aksen sudah cukup - tidak perlu mengirim lima.
   Baris rgba di atas tiap color-mix adalah cadangan untuk peramban lama.
   ============================================================================ */
:root,#teksOverlay{
  /* ── DUA PERAN YANG DULU DITUMPUK JADI SATU WARNA ───────────────────
     Sampai 27 Agu 2026 semuanya dicat --tie-aksen: tombol Simpan, tab
     yang sedang aktif, garis seleksi, pegangan ubah-ukuran, sampai
     lencana. Satu warna memikul dua pekerjaan yang tuntutannya justru
     berlawanan:

       UTAMA   tombol tindakan pokok. Ia harus terlihat MAHAL dan tenang,
               dan di tiap apps ia boleh jadi warna merek.
       AKSEN   penanda "yang ini sedang aktif / sedang terpilih". Ia harus
               MENJERIT sedikit, dan harus tetap terbaca di atas foto apa
               pun - termasuk foto yang kebetulan sewarna dengannya.

     Selama keduanya satu, tiap pilihan warna mengorbankan salah satunya.
     Emas Shamira Hadiya tenang sebagai tombol, tapi hilang di atas foto
     hampers berlatar krem - dan itu justru foto yang paling sering
     disunting di sini.

     Sekarang dipisah, dan bawaannya UNIVERSAL - tidak ada merek siapa pun
     di dalamnya:

       --tie-utama  tinta hampir-hitam. Di nada gelap ia BERBALIK jadi
                    hampir-putih. Tombol tinta di atas kertas netral itu
                    bahasa yang sama dipakai perkakas yang terlihat mahal,
                    dan ia tidak pernah bertengkar dengan gambar siapa pun
                    karena ia bukan warna, ia nilai terang-gelap.
       --tie-aksen  NAVY GELAP. Sampai 2.31.1 ia biru nila #3E63DD, dan
                    alasannya masih berlaku: warna alami pada foto (kulit,
                    kayu, daun, makanan) hampir seluruhnya hangat, jadi
                    nada biru jarang bertabrakan dengan isi gambarnya.

                    Yang berubah TERANGNYA, bukan coraknya. Biru nila itu
                    cukup terang untuk terbaca sebagai "biru", dan di layar
                    penuh kontrol - saklar, tab, radio, tombol utama - ia
                    jadi warna yang paling menarik mata di halaman. Sebuah
                    perkakas gambar tidak boleh punya benda paling mencolok
                    yang bukan gambarnya. Navy gelap tetap biru, tetap
                    jarang bertabrakan, tapi ia membaca sebagai TINTA dan
                    bukan sebagai warna.

                    Nada gelapnya tidak bisa ikut turun - navy di atas
                    hampir-hitam tidak terlihat sama sekali - jadi di sana
                    ia dinaikkan terangnya sambil menahan coraknya tetap
                    navy, bukan periwinkle.

     Apps induk tetap boleh menimpa keduanya lewat setelan "warna". Yang
     berubah: menimpa aksen tidak lagi diam-diam mematikan keterbacaan
     pegangan, karena tombolnya sudah punya warnanya sendiri. */
  --tie-utama:#1C1C21;
  --tie-utama-teks:#FFFFFF;
  --tie-aksen:#22314F;
  --tie-aksen-teks:#FFFFFF;
  --accent-gold:var(--tie-aksen);

  --tie-aksen-tipis:rgba(203,161,88,.10);
  --tie-aksen-tipis:color-mix(in srgb,var(--tie-aksen) 10%,transparent);
  --tie-aksen-lembut:rgba(203,161,88,.16);
  --tie-aksen-lembut:color-mix(in srgb,var(--tie-aksen) 16%,transparent);
  --tie-aksen-kuat:rgba(203,161,88,.26);
  --tie-aksen-kuat:color-mix(in srgb,var(--tie-aksen) 26%,transparent);
  --tie-aksen-garis:rgba(203,161,88,.55);
  --tie-aksen-garis:color-mix(in srgb,var(--tie-aksen) 60%,transparent);

  /* permukaan — abu netral, sedikit dingin.
     Nada terang lamanya semua bercorak cokelat: ikon #5A4A2A di atas #F7F2E8,
     garis #E2D6C0, pentas #E9E1D3. Di layar itu terbaca sebagai kertas tua,
     dan Tito menyebutnya persis begitu: "warna icon (skrang beige) ganti
     lebih modern dan aman."

     Krem itu warna MEREK, bukan warna PERKAKAS. Sebuah perkakas gambar harus
     jadi latar yang sunyi supaya gambarnya yang bicara - itu sebabnya semua
     penyunting gambar berkelir abu netral. Skala di bawah sengaja disamakan
     dengan palet Design Centre sendiri (ink #232227, ink-light #6B6A70,
     border #E4E3E6, canvas #F2F2F3), jadi editor yang disemat di dalamnya
     tidak terlihat seperti tamu dari aplikasi lain.

     Yang berwarna sekarang cuma satu hal: --tie-aksen, dan itu pun dikirim
     apps induk. */
  --tie-latar:#FBFBFC;      /* halaman & overlay */
  --tie-atas:#FFFFFF;       /* bilah atas */
  --tie-panel:#FFFFFF;      /* panel menu, lembar bawah */
  --tie-panel2:#FFFFFF;     /* blok lengket di dalam panel */
  --tie-dock:#FFFFFF;       /* dok ikon */
  --tie-nav:#FFFFFF;        /* baris tombol bawah */
  --tie-kartu:#FFFFFF;      /* dialog, panel melayang */
  --tie-pentas:#E7E7EA;     /* MEJA di sekeliling kertas - lihat .te-stage */
  --tie-kanvas:#FFFFFF;     /* alas gambar */
  /* Halo di belakang garis bingkai gambar. Ia duduk di atas GAMBAR PEMAKAI,
     bukan di atas permukaan aplikasi, jadi ia tidak ikut membalik waktu
     tema diganti - yang harus dilawannya isi gambarnya, dan gambar gelap
     sama mungkinnya di tema terang maupun gelap. Tetap token supaya apps
     induk yang temanya khas bisa menggantinya. */
  --tie-halo:rgba(255,255,255,.6);
  --tie-halo-kuat:rgba(255,255,255,.75);

  /* tulisan */
  --tie-teks:#1A1A1F;
  --tie-teks-lembut:#52525B;
  --tie-redup:#8B8B94;

  /* garis & isian kontrol */
  --tie-garis:#E3E3E7;
  --tie-garis-tipis:#EEEEF1;
  --tie-isian:#F4F4F6;
  --tie-isian-kuat:#E9E9ED;
  --tie-isian2:#FFFFFF;

  --tie-tirai:rgba(12,12,16,.45);
  /* Isolasi Magic Erase: kerudung yang menutupi SELAIN sasaran, dan garis
     putus-putus yang menandai batasnya. Keduanya token, bukan angka mati -
     kerudungnya selalu gelap, jadi garisnya selalu terang, tapi keduanya
     tetap harus bisa digeser bersama tema tanpa membongkar berkas lain. */
  --tie-isolasi:rgba(12,14,18,.55);
  --tie-isolasi-garis:rgba(255,255,255,.85);
  --tie-bayang:rgba(20,20,26,.14);

  /* Peringatan kontras. Satu-satunya warna selain aksen yang punya arti
     tetap - kuning "perhatikan ini" - jadi ia pun punya tokennya sendiri,
     bukan hex yang ditanam di aturan. */
  --tie-ingat-latar:#FFF8E8;
  --tie-ingat-garis:#EFDCAE;
  --tie-ingat-teks:#8A6414;
}
.tie-gelap,#teksOverlay.tie-gelap{
  /* Tinta BERBALIK. Tombol utama di nada gelap jadi hampir-putih dengan
     tulisan gelap - itu bukan sekadar membalik warna, itu menjaga
     PERANNYA: tombol pokok harus jadi benda paling terang di layar,
     entah layarnya terang atau gelap. Aksennya dinaikkan terangnya
     supaya biru nila tidak tenggelam di latar hampir-hitam. */
  --tie-utama:#F2F2F5;
  --tie-utama-teks:#17171B;
  --tie-aksen:#A9BCE2;
  --tie-aksen-teks:#10121A;

  --tie-latar:#0E0E11;
  --tie-atas:#131317;
  --tie-panel:#131317;
  --tie-panel2:#17171B;
  --tie-dock:#131317;
  --tie-nav:#0B0B0E;
  --tie-kartu:#1B1B20;
  --tie-pentas:#08080A;
  /* Alas gambar TIDAK ikut gelap. Yang dipratinjau itu karya cetak - alasnya
     mewakili kertas/kemasan, bukan permukaan aplikasi. Kalau ia ikut berubah
     mengikuti tema, warna yang dilihat pemakai bukan lagi warna yang akan
     dicetak. Putih di terang maupun gelap. */
  --tie-kanvas:#FFFFFF;
  --tie-halo:rgba(255,255,255,.6);
  --tie-halo-kuat:rgba(255,255,255,.75);

  --tie-teks:#F4F4F6;
  --tie-teks-lembut:rgba(255,255,255,.78);
  --tie-redup:rgba(255,255,255,.52);

  --tie-garis:rgba(255,255,255,.14);
  --tie-garis-tipis:rgba(255,255,255,.07);
  --tie-isian:rgba(255,255,255,.05);
  --tie-isian-kuat:rgba(255,255,255,.09);
  --tie-isian2:rgba(0,0,0,.24);

  --tie-tirai:rgba(0,0,0,.55);
  --tie-isolasi:rgba(0,0,0,.62);
  --tie-isolasi-garis:rgba(255,255,255,.9);
  --tie-bayang:rgba(0,0,0,.5);

  --tie-ingat-latar:rgba(214,160,70,.15);
  --tie-ingat-garis:rgba(214,160,70,.42);
  --tie-ingat-teks:#E7B96B;
}

/* baris 11 index.html */
#tePrintLayer{display:none}

/* baris 1924-1975 index.html */
/* ══════════════════════════════════════════════════════════════════════
   HURUF SEMENTARA YANG BUKAN SEKADAR "sans-serif" (2.129.0)
   ══════════════════════════════════════════════════════════════════════
   Tito: "soal huruf, berikan font sementara. Toh yg tampil di layar awal
   hanya Nama2 tombol."

   Hurufnya memang sudah tidak menahan cat pertama sejak 2.84.0, jadi
   tulisan SELALU terlihat. Yang kurang cadangannya: "sans-serif"
   telanjang menyerahkan pilihan ke bawaan peramban, dan metriknya jauh
   dari Plus Jakarta Sans - jadi waktu hurufnya datang, seluruh tata
   letak melompat. Lompatan itu yang terbaca sebagai "belum siap".

   Tumpukan huruf sistem menutup dua-duanya: yang tampil di detik pertama
   huruf antarmuka bawaan perangkatnya sendiri - Roboto di Android, SF di
   iOS - yang metriknya dekat dan memang dirancang untuk nama tombol. */
#teksOverlay{position:fixed;inset:0;z-index:99999;background:var(--tie-latar);display:flex;flex-direction:column;font-family:'Plus Jakarta Sans',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;color:var(--tie-teks);overflow:hidden;-webkit-tap-highlight-color:transparent;}
#teksOverlay *{box-sizing:border-box;}
/* KEPALA TIDAK MENEMPEL DI BILAH SISTEM (2.203.0)
   Tito: "di mobile mode, disket dan icon lain menempel sangat dekat
   dengan bar android for battery, network signal." Dugaannya pita AI
   yang mendorongnya ke atas - TERUKUR DAN BUKAN: `.te-pita` itu
   position:absolute di top:100%, di BAWAH kepala, jadi ia tidak bisa
   menggeser apa pun; tanpa pita pun kepalanya tetap mulai di y=0 dengan
   jarak 9px saja ke ikonnya.

   `env(safe-area-inset-top)` sudah ada di sini sejak lama dan tetap
   dipakai - tapi WebView Android yang tidak edge-to-edge memulangkan
   NOL untuknya, jadi di sanalah 9px itu satu-satunya jarak yang ada.
   Yang ditambah jarak DASARNYA (9 -> 16), karena yang kurang memang
   bukan safe area melainkan napas. Tablet/desktop tidak tersentuh:
   aturan >=768px menimpa seluruh padding kepala dengan 6px 16px. */
.te-topbar{flex:0 0 auto;display:flex;align-items:center;gap:10px;padding:calc(16px + env(safe-area-inset-top)) 14px 9px;background:var(--tie-atas);z-index:5;}
.te-title{flex:1 1 auto;min-width:0;font-family:'Cinzel',serif;font-size:15.5px;font-weight:600;letter-spacing:.05em;color:var(--tie-teks);text-align:center;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.te-iconbtn{display:inline-flex;align-items:center;justify-content:center;min-width:40px;height:40px;border:none;background:var(--tie-isian-kuat);color:var(--tie-teks);cursor:pointer;border-radius:11px;padding:0;flex-shrink:0;}
.te-iconbtn:active{background:var(--tie-isian-kuat);}
.te-done-pill{display:inline-flex;align-items:center;gap:6px;height:40px;padding:0 15px;border:none;border-radius:999px;background:var(--tie-utama);color:var(--tie-utama-teks);font-family:'Plus Jakarta Sans',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;font-size:12.5px;font-weight:800;cursor:pointer;white-space:nowrap;flex-shrink:0;}
.te-done-pill:active{opacity:.88;}
.te-stagewrap{flex:1 1 auto;display:flex;align-items:center;justify-content:center;overflow:hidden;padding:0;margin:0;min-height:0;position:relative;background:var(--tie-pentas);}
/* ═══════════════════════════════════════════════════════════════════════
   KERTAS DI ATAS MEJA
   ═══════════════════════════════════════════════════════════════════════
   Bayangan dan garis rambut ini yang membuat tepi kanvas TERLIHAT. Tanpa
   keduanya, kanvas putih di atas meja abu-abu muda masih terbaca sebagai
   bidang yang tak jelas ujungnya - dan batas kanvas adalah batas berkas,
   hal paling penting yang harus bisa dilihat orang di layar ini.

   Garisnya rgba hitam, bukan token warna: ia harus tetap terlihat di atas
   kertas putih DAN di tema gelap, dan token garis biasa terlalu redup di
   salah satunya. Bayangannya sengaja lembut dan rendah - meninggikan
   kertas, bukan melayangkannya. */
.te-stage{position:relative;border-radius:2px;overflow:hidden;background:var(--tie-kanvas);touch-action:none;user-select:none;
  box-shadow:0 0 0 1px rgba(0,0,0,.14), 0 2px 10px rgba(0,0,0,.13), 0 10px 28px rgba(0,0,0,.07);}
/* Layar penuh: kertasnya memenuhi layar, jadi tidak ada meja untuk
   dibedakan - bayangannya cuma menggelapkan tepi gambar. */
#teksOverlay.sh-te.te-fullprev .te-stage{box-shadow:none;border-radius:0;}
.te-stage-img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;display:block;pointer-events:none;}
/* ===== KANVAS KOSONG =====
   Bingkai putus memperlihatkan RASIO yang barusan dipilih pemakai, jadi
   pilihannya terasa berlaku; kalimatnya menjawab "sekarang apa". Tanpa
   keduanya, kanvas 4:3 yang kosong cuma bidang putih di tengah halaman
   putih - dan itu terbaca sebagai aplikasi yang rusak, bukan sebagai
   kanvas yang siap. */
.te-placeholder{position:absolute;inset:10px;display:flex;align-items:center;
  justify-content:center;border:2px dashed var(--tie-garis);border-radius:12px;
  color:var(--tie-redup);pointer-events:none;}
.te-kosongkotak{display:flex;flex-direction:column;align-items:center;gap:7px;
  padding:18px 22px;text-align:center;max-width:88%;}
.te-kosongkotak svg{opacity:.5;}
.te-kosongjudul{font-size:14px;font-weight:700;color:var(--tie-teks-lembut);}
.te-kosongket{font-size:12px;line-height:1.5;color:var(--tie-redup);}
/* ═══════════════════════════════════════════════════════════════════════
   TIGA LAPIS, DAN KETIGANYA PUNYA ALASAN
   ═══════════════════════════════════════════════════════════════════════
     3  .te-imgbox           bingkai gambar
     4  .te-box              kotak teks - DI ATAS bingkai gambar
     6  .te-box.te-selected  yang sedang dipilih, di atas saudaranya

   Lapis 4 yang membuat teks dan gambar hidup berdampingan tanpa saklar:
   ketukan di atas teks mengenai teks, ketukan di tempat lain di dalam
   bingkai mengenai gambar.

   Lapis 6 tidak boleh ikut turun jadi 4. Pegangan ukuran (.te-wh)
   menggantung DI LUAR kotaknya - beberapa piksel di atas dan di bawah
   tepinya - dan kotak teks berdiri berdekatan (42%, 50%, 58%). Waktu
   semua kotak sederajat, kotak yang belakangan di DOM menutupi pegangan
   kotak sebelumnya: yang tersentuh jari bukan pegangannya melainkan
   tetangganya, dan yang terjadi bukan mengubah ukuran melainkan berpindah
   pilihan. Terjaring bagian 28 - "tarik 20px, kotak tumbuh" - waktu 2.38.0
   sempat menyamakan semuanya di 6. */
.te-box{position:absolute;z-index:4;left:12%;top:42%;max-width:92%;padding:4px 8px;font-family:'Plus Jakarta Sans',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;font-size:28px;font-weight:700;line-height:1.15;color:var(--tie-teks);text-align:center;cursor:move;white-space:pre-wrap;word-break:break-word;outline:none;min-width:32px;min-height:28px;touch-action:none;transition:box-shadow .12s;}
.te-box.te-empty{opacity:.6;font-weight:600;}
.te-box.te-hidden{display:none;}
.te-box.te-selected{z-index:6;}
.te-box.te-selected::after{content:'';position:absolute;inset:-6px;border:1.6px dashed var(--tie-aksen);border-radius:9px;pointer-events:none;}
.te-handle{position:absolute;right:-11px;bottom:-11px;width:26px;height:26px;border-radius:50%;background:var(--tie-aksen);border:2px solid #fff;box-shadow:0 2px 8px rgba(0,0,0,.4);display:none;align-items:center;justify-content:center;cursor:nwse-resize;touch-action:none;z-index:7;color:var(--tie-aksen-teks);}
.te-box.te-selected .te-handle{display:flex;}
.exporting .te-box.te-empty{display:none !important;}
.exporting .te-box.te-selected::after{display:none;}
.exporting .te-handle{display:none !important;}

/* ---- Bottom sheet toolbar (compact) ---- */
.te-sheet{flex:0 0 auto;background:var(--tie-panel);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);border-top:1px solid var(--tie-garis-tipis);border-radius:18px 18px 0 0;padding:10px 12px calc(9px + env(safe-area-inset-bottom));display:flex;flex-direction:column;gap:9px;z-index:3;}
.te-edithint{font-size:11.5px;color:var(--tie-redup);text-align:center;margin:-2px 0 -1px;}
.te-slots{display:flex;gap:7px;overflow-x:auto;-webkit-overflow-scrolling:touch;padding-bottom:1px;}
.te-slotchip{flex:0 0 auto;display:inline-flex;align-items:center;gap:6px;height:34px;padding:0 13px;border-radius:999px;border:1px solid var(--tie-garis);background:var(--tie-isian);color:var(--tie-teks-lembut);font-size:12.5px;font-weight:600;cursor:pointer;white-space:nowrap;}
.te-slotchip .dot{width:7px;height:7px;border-radius:50%;background:var(--tie-redup);}
.te-slotchip.filled .dot{background:var(--tie-aksen);}
.te-slotchip.on{background:#fff;color:#16181b;border-color:#fff;}
.te-slotchip.on .dot{background:var(--tie-aksen);}
.te-toolrow{display:flex;align-items:center;gap:7px;overflow-x:auto;-webkit-overflow-scrolling:touch;}
.te-toolrow.wrap{flex-wrap:nowrap;}
.te-fontchip{flex:0 0 auto;height:36px;padding:0 12px;border-radius:10px;border:1px solid var(--tie-garis);background:var(--tie-isian);color:var(--tie-teks);font-size:15px;cursor:pointer;line-height:34px;}
.te-fontchip.on{border-color:var(--tie-aksen);background:var(--tie-aksen-kuat);}
.te-fontchip.f-heading{font-family:'Cinzel',serif;}
.te-fontchip.f-body{font-family:'Cormorant Garamond',serif;font-size:18px;}
.te-fontchip.f-body2{font-family:'Montserrat',sans-serif;font-size:14px;}
.te-tgl{flex:0 0 auto;min-width:38px;height:36px;padding:0 10px;border-radius:10px;border:1px solid var(--tie-garis);background:var(--tie-isian);color:var(--tie-teks);font-size:14px;font-weight:700;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;gap:5px;}
.te-tgl.on{border-color:var(--tie-aksen);background:var(--tie-aksen-kuat);color:var(--tie-teks);}
.te-tgl.i-ital{font-style:italic;font-family:'Cormorant Garamond',serif;font-size:16px;}
.te-sizewrap{flex:1 1 120px;display:flex;align-items:center;gap:9px;min-width:120px;padding:0 4px;}
.te-size{flex:1 1 auto;-webkit-appearance:none;appearance:none;height:4px;border-radius:4px;background:var(--tie-isian-kuat);outline:none;}
.te-size::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:20px;height:20px;border-radius:50%;background:var(--tie-aksen);border:2px solid #fff;cursor:pointer;}
.te-size::-moz-range-thumb{width:20px;height:20px;border-radius:50%;background:var(--tie-aksen);border:2px solid #fff;cursor:pointer;}
.te-sizeval{width:30px;text-align:right;font-size:12px;font-weight:700;color:var(--tie-teks-lembut);flex-shrink:0;}
.te-sizeic{font-size:11px;color:var(--tie-redup);flex-shrink:0;}
.te-swatches{display:flex;gap:8px;overflow-x:auto;-webkit-overflow-scrolling:touch;align-items:center;}
.te-sw{width:28px;height:28px;min-width:28px;border-radius:50%;border:2px solid var(--tie-garis);cursor:pointer;padding:0;flex:0 0 auto;}
.te-sw.te-active{border-color:#fff;box-shadow:0 0 0 2px var(--tie-aksen);}
.te-mini{display:none;}

/* baris 2012-2019 index.html */
.te-actions{flex:0 0 auto;display:flex;gap:8px;padding:9px 12px calc(11px + env(safe-area-inset-bottom));background:var(--tie-nav);border-top:1px solid var(--tie-garis-tipis);z-index:3;}
.te-act{flex:1 1 0;min-height:46px;border-radius:12px;font-family:'Plus Jakarta Sans',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;font-size:13px;font-weight:700;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;gap:6px;padding:0 6px;border:1px solid var(--tie-garis);background:var(--tie-isian);color:var(--tie-teks);}
.te-act svg{flex:0 0 auto;}
.te-act.te-gold{background:var(--tie-utama);border-color:var(--tie-utama);color:var(--tie-utama-teks);}
.te-act:active{opacity:.85;}
.exporting .te-ui{opacity:0 !important;}
/* Pemberitahuan melayang.

   DULU: background:var(--primary-green,#1F2A3D) - variabel milik APPS INDUK
   (Shamira), bukan milik pustaka. Di luar Shamira ia jatuh ke navy gelap,
   sementara warna tulisannya tetap ikut --tie-teks yang di tema terang justru
   GELAP juga. Gelap di atas gelap: pesannya ada, tapi tidak terbaca.

   Dua kesalahan dalam satu baris: menumpang variabel yang bukan miliknya, dan
   mengambil latar & tulisan dari dua sistem berbeda sehingga bisa bertabrakan.
   Sekarang keduanya dari satu sistem dan sengaja DIBALIK - tinta jadi latar,
   permukaan jadi tulisan - jadi kontrasnya terjamin di terang maupun gelap. */
.te-toast{position:fixed;left:50%;bottom:96px;transform:translateX(-50%) translateY(12px);background:var(--tie-teks);color:var(--tie-panel);font-size:13px;font-weight:500;padding:11px 18px;border-radius:999px;box-shadow:0 8px 24px rgba(0,0,0,.28);opacity:0;pointer-events:none;transition:opacity .25s,transform .25s;z-index:100001;max-width:88%;text-align:center;}
.te-toast.te-show{opacity:1;transform:translateX(-50%) translateY(0);}
/* Aturan cetak — di apps asal ada di <head> index.html baris 10-12. */
html.tie-terang,html.tie-terang body{background:var(--tie-latar)!important;overflow:hidden!important}
html.tie-terang body>*:not(#teksOverlay):not(#tePrintLayer):not(script):not(style):not(.te-toast){display:none!important}
@media print{ html.te-printing,html.te-printing body{background:#fff!important} html.te-printing body>*{display:none!important} html.te-printing #tePrintLayer{display:flex!important;align-items:center;justify-content:center;position:fixed;inset:0;margin:0;padding:0} html.te-printing #tePrintLayer img{max-width:100%;max-height:100%} }


/* ============================================================================
   PERENDER TUNGGAL (v1.1)
   Teks tidak lagi digambar CSS. Kanvas .te-stage-cv yang menggambar latar dan
   teks sekaligus — komposit yang sama persis dengan yang diekspor.
   Elemen <img> tetap ada sebagai pemuat gambar (naturalWidth/naturalHeight &
   sumber gambar untuk kanvas), tapi tidak lagi ditampilkan.
   ============================================================================ */
/* DILINGKUPI .sh-te dengan sengaja. Selama masa peralihan, satu halaman bisa
   memuat pustaka ini BERSAMA editor lamanya yang masih menggambar teks lewat
   DOM. Tanpa lingkup ini, aturan di bawah akan mematikan editor lama juga. */
#teksOverlay.sh-te .te-stage-cv{position:absolute;inset:0;width:100%;height:100%;display:block;pointer-events:none;}

/* ============================================================================
   LAPIS TOPENG — layar Erase (hapus objek dengan AI)
   ============================================================================
   Kanvas KETIGA di atas panggung, di atas .te-stage-cv. Ia cuma hidup selama
   layar Erase terbuka, dan ia satu-satunya lapis yang menerima sentuhan di
   layar itu - kotak teks sengaja dimatikan supaya sapuan tidak menyeret
   judul orang.

   `inset:0` + `object-fit:contain` pada gambarnya berarti gambar TIDAK
   selalu memenuhi panggung: pada rasio yang tidak sama ada pita kosong di
   sisi. Topengnya diberi ukuran mengikuti KOTAK GAMBAR, bukan panggung -
   lihat teKotakGambar() - jadi sapuan di pita kosong tidak pernah jadi
   koordinat yang tidak punya arti di gambar aslinya. */
#teksOverlay.sh-te .te-mask-cv{position:absolute;display:block;pointer-events:auto;
  cursor:crosshair;touch-action:none;z-index:7;}
#teksOverlay.sh-te.te-hapus .te-box{pointer-events:none!important;}
#teksOverlay.sh-te.te-hapus .te-box.te-selected::after{display:none;}
/* Kuas: lingkaran pengintai yang mengikuti jari, supaya orang tahu seberapa
   besar sapuannya SEBELUM menyapu. Tanpa ini ukuran kuas cuma angka. */
.te-kuas-intai{position:absolute;border:1.5px solid var(--tie-aksen);
  border-radius:50%;pointer-events:none;z-index:8;opacity:.9;
  box-shadow:0 0 0 1px rgba(255,255,255,.75) inset;display:none;}
.te-hapusket{font-size:11.5px;color:var(--tie-redup);line-height:1.5;margin:2px 0 10px;}
/* Kepala seksi di dalam layar Erase. Dua langkah yang berbeda sifatnya -
   memilih AREA, lalu menyatakan MAUNYA APA - dan tanpa penanda ini keduanya
   terbaca sebagai satu daftar pengaturan yang panjang. */
.te-hapusseksi{font-family:var(--tie-mono);font-size:10px;font-weight:500;
  letter-spacing:.1em;text-transform:uppercase;color:var(--tie-redup);
  margin:16px 0 8px;padding-top:12px;border-top:1px solid var(--tie-garis-tipis);}
.te-hapusseksi:first-of-type{border-top:0;padding-top:0;margin-top:12px;}
/* Alasnya sengaja BERBEDA dari panelnya, dan garisnya sedikit lebih tegas:
   sejak bayangan tulisannya dikosongkan (2.38.2), warna inilah satu-satunya
   yang mengatakan "di sini tempat menulis". Medan kosong yang sewarna
   panelnya tidak terbaca sebagai medan sama sekali. */
.te-hapusprompt{width:100%;box-sizing:border-box;padding:10px 11px;border-radius:10px;
  border:1px solid var(--tie-garis);background:var(--tie-isian-kuat);color:inherit;
  box-shadow:inset 0 1px 2px rgba(0,0,0,.06);
  font:inherit;font-size:13px;line-height:1.45;resize:vertical;min-height:60px;}
.te-hapusprompt:focus{outline:2px solid var(--tie-aksen);outline-offset:-1px;border-color:var(--tie-aksen);}
.te-hapuscek{display:flex;align-items:center;gap:9px;margin-top:11px;
  font-size:13px;font-weight:600;cursor:pointer;}
.te-hapuscek input{width:17px;height:17px;accent-color:var(--tie-aksen);cursor:pointer;flex:0 0 auto;}
.te-hapusket2{font-size:11.5px;color:var(--tie-redup);line-height:1.5;margin:5px 0 0 26px;}
/* NOTA JALUR TANPA SAPUAN (2.253.0). Ia bukan keterangan biasa dan tidak
   boleh tampil seperti keterangan biasa: isinya ONGKOS yang tidak kelihatan
   di layar - seluruh gambar digambar ulang, terukur 44% piksel berubah pada
   dua tangkapan layar yang dari jauh terlihat identik. Karena itu ia bergaris
   di sisi kiri dan beralas, bukan abu-abu samar seperti .te-hapusket2 yang
   memang cuma menerangkan sebuah saklar. Warnanya memakai kutub INGAT yang
   sudah dipakai .te-hapusstat.gagal - satu perbendaharaan untuk satu arti,
   bukan warna baru yang harus dijaga sendiri. */
.te-hapusnota{font-size:11.5px;line-height:1.55;margin:11px 0 0;padding:9px 11px;
  border-radius:9px;border-left:3px solid var(--tie-ingat-garis);
  background:var(--tie-ingat-latar);color:var(--tie-ingat-teks);}
/* Bilah tindakan MELEKAT di dasar panel. Medan instruksi bisa tumbuh, dan
   tombol yang terdorong keluar layar oleh isian sendiri adalah tombol yang
   dicari orang sambil menggulir. */
.te-hapusbar.te-lekat{position:sticky;bottom:0;z-index:3;margin-top:16px;
  padding:10px 0 2px;background:var(--tie-panel);
  box-shadow:0 -10px 12px -8px var(--tie-bayang);}
/* KAKI YANG MELEKAT MEMBAWA BARIS KEADAANNYA (2.198.0)
   Laporan Tito: "AI replace masih sunyi. senyap. tombolnya working dan
   replace. tp tidak ada notif, processing dan status apapun. just simply:
   nothing changed."

   Kalimatnya TIDAK PERNAH hilang - `te-hapusstat` memang digambar tiap
   kali, dengan sebabnya. Yang salah TEMPATNYA: ia anak biasa di dalam
   `wrap` yang bisa digulir, tepat di atas bilah yang MELEKAT. Jadi
   begitu medan instruksi terisi dan panelnya tergulir, satu-satunya
   baris yang menerangkan apa yang sedang terjadi tergulir keluar layar
   sementara tombolnya tetap terlihat - dan yang terlihat dari luar
   persis "tombolnya bekerja, tidak ada keterangan apa pun".

   Sekarang keadaan dan tombolnya satu blok yang sama-sama melekat.
   Golongan yang sama dengan toast yang dipilih di dalam overlay: pesan
   yang ada tapi tidak terlihat sama saja dengan pesan yang tidak ada. */
.te-hapuskaki.te-lekat{position:sticky;bottom:0;z-index:3;margin-top:16px;
  padding:10px 0 2px;background:var(--tie-panel);
  box-shadow:0 -10px 12px -8px var(--tie-bayang);}
.te-hapuskaki .te-hapusstat{margin-top:0;margin-bottom:10px;}
.te-hapuskaki .te-hapusbar{margin-top:0;}
.te-hapusbar{display:flex;gap:8px;margin-top:10px;}
.te-hapusbar button{flex:1;padding:11px 8px;border-radius:10px;font:inherit;
  font-size:13px;font-weight:700;cursor:pointer;border:1px solid var(--tie-garis);
  background:transparent;color:inherit;}
.te-hapusbar button.utama{border:0;background:var(--tie-utama);color:var(--tie-utama-teks);}
.te-hapusbar button:disabled{opacity:.45;cursor:default;}
.te-hapusstat{font-size:12px;margin-top:10px;padding:9px 11px;border-radius:9px;
  background:var(--tie-isian);color:var(--tie-teks-lembut);line-height:1.45;}
.te-hapusstat.gagal{background:var(--tie-ingat-latar);border:1px solid var(--tie-ingat-garis);
  color:var(--tie-ingat-teks);}
#teksOverlay.sh-te .te-stage-img{display:none !important;}

/* .te-box kini murni area sentuh + pegangan + garis seleksi. Ukurannya diatur
   JS dari hasil pengukuran kanvas, jadi properti teks di bawah ini sengaja
   dinetralkan — kalau tidak, teks tergambar dua kali dan saling menimpa. */
/* JANGAN pasang overflow:hidden di sini — garis seleksi (::after, inset:-6px)
   dan pegangan ubah-ukuran duduk DI LUAR kotak, jadi keduanya ikut terpotong. */
#teksOverlay.sh-te .te-box{color:transparent !important;background:transparent !important;padding:0 !important;text-shadow:none !important;}


/* ============================================================================
   TOMBOL PEMBESAR DAN KENDALI ZOOM
   ============================================================================
   Pembesarnya menumpang di POJOK KANAN BAWAH kanvas, bukan di rel. Ia berada
   tepat di tempat akibatnya terjadi, jadi akibatnya bisa ditebak sebelum
   ditekan - beda dengan waktu ia duduk di antara menu yang mengurus hal lain
   dan layar tiba-tiba berubah dari tempat yang tidak sedang dilihat orang.

   Kendali zoom cuma muncul di layar penuh: di layar biasa panggung harus
   tetap sepadan dengan yang diekspor, dan zoom di sana akan memutus janji
   "apa yang kulihat = apa yang kudapat". */
/* ═══════════════════════════════════════════════════════════════════════
   DUA TINDAKAN KANVAS DI POJOK KANAN BAWAH — GARIS SAJA
   ═══════════════════════════════════════════════════════════════════════
   Simpan dan Layar Penuh menumpang di ATAS karya orang. Karena itu tidak
   ada kotak, tidak ada latar, tidak ada warna aksen: satu bidang berlatar
   di sudut gambar terbaca sebagai bagian dari gambarnya.

   Yang menggantikan latar itu bayangan pada GORESANNYA. drop-shadow
   mengikuti bentuk garisnya, bukan kotak pembungkusnya, jadi ikon tetap
   terbaca di atas bidang terang maupun gelap tanpa menambah apa pun ke
   gambar. Itu sebabnya di sini drop-shadow, bukan box-shadow. */
#teksOverlay.sh-te .te-kanvasaksi{position:absolute;right:8px;bottom:8px;
  z-index:9;display:flex;align-items:center;gap:2px;}
#teksOverlay.sh-te .te-kanvasaksi > .te-zoombtn{position:static;
  width:34px;height:34px;display:inline-flex;align-items:center;
  justify-content:center;border-radius:9px;cursor:pointer;
  border:0;background:transparent;color:var(--tie-teks);box-shadow:none;
  opacity:.82;filter:drop-shadow(0 0 2px var(--tie-halo-kuat))
                     drop-shadow(0 1px 2px rgba(0,0,0,.35));}
#teksOverlay.sh-te .te-kanvasaksi > .te-zoombtn:hover{opacity:1;}
#teksOverlay.sh-te.te-fullprev .te-kanvasaksi{display:none;}
.exporting .te-kanvasaksi{display:none!important;}

.te-zoombar{display:none;}
#teksOverlay.sh-te.te-fullprev .te-zoombar{position:fixed;
  left:50%;transform:translateX(-50%);
  bottom:calc(16px + env(safe-area-inset-bottom));z-index:30;
  display:flex;align-items:center;gap:4px;padding:5px 7px;border-radius:13px;
  border:1px solid var(--tie-garis);background:var(--tie-panel);
  box-shadow:0 4px 18px var(--tie-bayang);}
.te-zoombar .te-zoombtn{width:34px;height:34px;display:inline-flex;
  align-items:center;justify-content:center;border-radius:9px;cursor:pointer;
  border:0;background:transparent;color:var(--tie-teks);}
.te-zoombar .te-zoombtn:disabled{opacity:.35;cursor:default;}
.te-zoomlabel{font-family:var(--tie-mono);font-size:12px;font-weight:600;
  min-width:46px;text-align:center;color:var(--tie-teks-lembut);
  font-variant-numeric:tabular-nums;}
/* Panggung yang sedang diperbesar dijepit wadahnya, dan diseret bukan
   dipilih - kalau tidak, menyeret malah menandai teks halaman. */
#teksOverlay.sh-te.te-fullprev .te-stagewrap{overflow:hidden;}
#teksOverlay.sh-te.te-fullprev .te-stage{transform-origin:center center;
  transition:transform .12s ease-out;will-change:transform;}