:root {
  --bg:#f6f7f9; --card:#fff; --tepi:#dfe3e8; --teks:#1d2229; --redup:#6b7480;
  --biru:#1f5fd6; --hijau:#17794a; --merah:#c0392b;
  --kuning:#8a6100; --kuning-bg:#fdf5e2; --lembut:#f0f2f5;
}
@media (prefers-color-scheme: dark) {
  :root { --bg:#14171c; --card:#1c2027; --tepi:#2e343d; --teks:#e6e9ee;
          --redup:#98a1ad; --biru:#6fa2ff; --hijau:#4ecf90; --merah:#ff7b6b;
          --kuning:#e8bd5a; --kuning-bg:#2c2616; --lembut:#22272f; }
}
* { box-sizing:border-box; }
body { margin:0; background:var(--bg); color:var(--teks);
       font:15px/1.55 system-ui,"Segoe UI",sans-serif; }

/* ---------- sidebar ---------- */
#sidebar {
  position:fixed; inset:0 auto 0 0; width:236px; background:var(--card);
  border-right:1px solid var(--tepi); padding:20px 14px;
  display:flex; flex-direction:column; gap:22px; overflow-y:auto; z-index:10;
}
.sb-merek { display:flex; align-items:center; gap:10px; padding:0 8px;
            font-weight:700; font-size:15px; letter-spacing:-.01em; }
.sb-logo { display:inline-flex; align-items:center; justify-content:center;
  width:28px; height:28px; border-radius:8px; background:var(--biru);
  color:#fff; font-size:12px; font-weight:700; flex:none; }
/* logo asli (gambar) -- sama dgn web marketing cethak.com */
.sb-logo-img { width:28px; height:28px; object-fit:contain; flex:none; }
.sb-nav { display:flex; flex-direction:column; gap:2px; }
.sb-grup { font-size:10.5px; text-transform:uppercase; letter-spacing:.07em;
  color:var(--redup); font-weight:700; padding:14px 8px 5px; }
.sb-item { display:flex; align-items:center; gap:10px; text-decoration:none;
  color:var(--redup); font-size:13.5px; font-weight:600; padding:9px 10px;
  border-radius:8px; }
.sb-item:hover { background:var(--lembut); color:var(--teks); }
.sb-item.aktif { background:var(--biru); color:#fff; }
.sb-ikon { width:16px; text-align:center; opacity:.85; flex:none; }

/* banner masa coba gratis (lihat bannerTrial di nav.js) */
.sb-trial { display:block; text-decoration:none; margin:4px 2px 10px;
  padding:9px 11px; border-radius:8px; background:var(--kuning-bg);
  border:1px solid color-mix(in srgb, var(--kuning) 35%, transparent);
  color:var(--kuning); line-height:1.35; }
.sb-trial b { display:block; font-size:12.5px; font-weight:700; }
.sb-trial span { display:block; font-size:11.5px; font-weight:600; opacity:.85;
  margin-top:1px; }
.sb-trial:hover { border-color:var(--kuning); }
.sb-trial.habis { background:color-mix(in srgb, var(--merah) 12%, transparent);
  border-color:color-mix(in srgb, var(--merah) 45%, transparent);
  color:var(--merah); }

main { max-width:880px; margin:0 auto; padding:32px 28px 80px;
       margin-left:236px; }

@media (max-width:820px) {
  #sidebar { position:static; width:auto; inset:auto; flex-direction:row;
             align-items:center; gap:14px; padding:12px 16px;
             border-right:none; border-bottom:1px solid var(--tepi);
             overflow-x:auto; }
  .sb-nav { flex-direction:row; align-items:center; gap:4px; }
  .sb-grup { display:none; }
  main { margin-left:0; padding:24px 18px 60px; }
}
h1 { font-size:22px; margin:0 0 6px; letter-spacing:-.02em; }
h1 + p { margin:0 0 28px; color:var(--redup); font-size:14px; }

.langkah { background:var(--card); border:1px solid var(--tepi);
           border-radius:11px; padding:20px 22px; margin-bottom:16px; }
.langkah > h2 { margin:0 0 3px; font-size:14px; display:flex;
                align-items:center; gap:10px; }
.langkah > h2 .no { display:inline-flex; align-items:center;
  justify-content:center; width:22px; height:22px; border-radius:50%;
  background:var(--biru); color:#fff; font-size:12px; flex:none; }
.langkah > p.ket { margin:0 0 14px; padding-left:32px;
                   color:var(--redup); font-size:13px; }
.langkah .isi { padding-left:32px; }

label { display:block; font-size:12px; color:var(--redup); margin-bottom:5px; }
label.inline { display:inline-flex; align-items:center; gap:7px;
               font-size:14px; color:var(--teks); margin:0; }
input, select, button { font:inherit; padding:9px 11px; border:1px solid var(--tepi);
  border-radius:8px; background:var(--card); color:var(--teks); }
input[type=file] { padding:7px; width:100%; }
input[type=checkbox] { width:16px; height:16px; accent-color:var(--biru); }
button { cursor:pointer; background:var(--biru); color:#fff;
         border-color:transparent; font-weight:600; }
button.sekunder { background:transparent; color:var(--teks);
                  border-color:var(--tepi); font-weight:500; }
button.besar { padding:13px 30px; font-size:15px; border-radius:9px; }
button:disabled { opacity:.5; cursor:not-allowed; }

.baris { display:flex; gap:12px; flex-wrap:wrap; align-items:flex-end; }
.baris > div { flex:1 1 150px; }
.pilihan { display:flex; gap:18px; flex-wrap:wrap; }

.brs-file { display:flex; flex-wrap:wrap; gap:10px; align-items:flex-end;
            padding:13px; border:1px solid var(--tepi); border-radius:9px;
            margin-bottom:10px; background:var(--lembut); }
.brs-file .f-file { flex:1 1 250px; min-width:0; }
.brs-file .f-size { flex:0 0 96px; }
.brs-file .f-qty  { flex:0 0 108px; }
.brs-file .f-harga { flex:0 0 150px; }
.brs-file .f-x    { flex:0 0 42px; }
.brs-file .f-size select, .brs-file .f-qty input { width:100%; }
.brs-file .f-x button { width:100%; padding:9px 0; }
.brs-file .kabar { flex:1 1 100%; font-size:12px; color:var(--redup); }
.brs-file .f-terpasang { display:flex; align-items:center; gap:8px;
  padding:9px 11px; border:1px solid var(--hijau); border-radius:8px;
  background:var(--card); font-size:13px; font-weight:600; }
.brs-file .f-terpasang .ikon { color:var(--hijau); font-weight:700; flex:none; }
.brs-file .f-terpasang .nm { flex:1; min-width:0; overflow:hidden;
  text-overflow:ellipsis; white-space:nowrap; }
.brs-file .f-terpasang .src { flex:none; font-size:10.5px; font-weight:600;
  color:var(--biru); border:1px solid var(--biru); border-radius:4px;
  padding:1px 6px; text-transform:uppercase; letter-spacing:.03em; }
.brs-file .f-terpasang .ganti { background:none; border:none; color:var(--biru);
  font-size:12px; font-weight:600; cursor:pointer; padding:0; flex:none; }
.brs-file .f-terpasang .ganti:hover { text-decoration:underline; }

table { width:100%; border-collapse:collapse; font-size:13px; margin-top:12px;
        display:block; overflow-x:auto; }
th, td { text-align:left; padding:7px 10px; border-bottom:1px solid var(--tepi);
         white-space:nowrap; }
th { color:var(--redup); font-weight:600; font-size:11px;
     text-transform:uppercase; letter-spacing:.04em; }
td.num, th.num { text-align:right; font-variant-numeric:tabular-nums; }
tr.pilih { font-weight:700; }
tr.pudar { opacity:.55; }

.tag { font-size:11px; padding:2px 8px; border-radius:20px; font-weight:600; }
.ok { background:rgba(23,121,74,.14); color:var(--hijau); }
.kurang { background:rgba(192,57,43,.14); color:var(--merah); }
.ekstra { background:var(--kuning-bg); color:var(--kuning); }

.vonis { padding:13px 15px; border-radius:9px; font-weight:600; margin-top:14px; }
.vonis.lolos { background:rgba(23,121,74,.13); color:var(--hijau); }
.vonis.waspada { background:var(--kuning-bg); color:var(--kuning); }
.vonis.gagal { background:rgba(192,57,43,.13); color:var(--merah); }

.catatan { font-size:12px; color:var(--redup); margin-top:9px; }
.pesan { margin-top:12px; font-size:13px; }
.pesan.err { color:var(--merah); }
.kosong { color:var(--redup); font-size:13px; padding:12px 0; }

/* daftar template dikelompokkan per folder (klien/proyek) lalu per model */
.grup-folder { border:1px solid var(--tepi); border-radius:10px;
               margin-bottom:12px; overflow:hidden; background:var(--lembut); }
.grup-folder-header { display:flex; align-items:center; gap:12px;
  padding:13px 14px; cursor:pointer; user-select:none; }
.grup-folder-header:hover { background:rgba(127,127,127,.08); }
.grup-folder-header .panah { font-size:11px; color:var(--redup);
  transition:transform .15s; flex:none; width:12px; }
.grup-folder-header.terbuka .panah { transform:rotate(90deg); }
.grup-folder-header .nama-folder { font-weight:700; font-size:14px; flex:1; }
.grup-folder-header .jml { color:var(--redup); font-size:12px; flex:none; }
.grup-folder-isi { display:none; padding:0 10px 10px; }
.grup-folder-isi.terbuka { display:block; }
.grup-folder-isi .grup-model { background:var(--card); margin-bottom:8px; }
.grup-folder-isi .grup-model:last-child { margin-bottom:0; }

/* daftar template dikelompokkan per model */
.grup-model { border:1px solid var(--tepi); border-radius:9px;
              margin-bottom:8px; overflow:hidden; }
.grup-model + .grup-model { margin-top:8px; }
.grup-header { display:flex; align-items:center; gap:12px; padding:12px 14px;
               cursor:pointer; background:var(--card); user-select:none; }
.grup-header:hover { background:var(--lembut); }
.grup-header .panah { font-size:11px; color:var(--redup); transition:transform .15s;
                       flex:none; width:12px; }
.grup-header.terbuka .panah { transform:rotate(90deg); }
.grup-header .nama { font-weight:700; font-size:14px; flex:none; min-width:140px; }
.grup-chip { display:flex; gap:6px; flex-wrap:wrap; flex:1; }
.chip-size { font-size:12px; font-weight:600; padding:3px 10px;
             border-radius:20px; background:var(--lembut); color:var(--teks);
             border:1px solid var(--tepi); }
.grup-header .jml { color:var(--redup); font-size:12px; flex:none; }
.grup-isi { display:none; border-top:1px solid var(--tepi); }
.grup-isi.terbuka { display:block; }
.grup-isi table { margin-top:0; }
.grup-isi td, .grup-isi th { padding:8px 14px; }

.chip-komponen { display:inline-block; padding:3px 9px; margin:2px 3px 2px 0;
  border-radius:6px; font-size:12.5px; color:var(--redup);
  border:1px solid transparent; cursor:pointer; }
.chip-komponen:hover { background:var(--lembut); border-color:var(--tepi);
  color:var(--teks); }
.chip-komponen.ada-zona { color:var(--hijau); font-weight:600; }

/* editor zona -- overlay penuh layar */
.overlay-zona { position:fixed; inset:0; background:rgba(0,0,0,.5);
  display:flex; align-items:center; justify-content:center; z-index:50; }
.panel-zona { background:var(--card); border-radius:12px; padding:22px;
  max-width:640px; width:92vw; max-height:90vh; overflow:auto;
  box-shadow:0 20px 60px rgba(0,0,0,.3); }
.panel-zona h3 { margin:0 0 4px; font-size:16px; }
.panel-zona .sub { color:var(--redup); font-size:13px; margin:0 0 16px; }
.kanvas-zona { background:var(--lembut); border:1px solid var(--tepi);
  border-radius:8px; margin:0 auto 14px; display:block; cursor:crosshair; }
.legenda-zona { display:flex; gap:16px; font-size:12.5px; margin-bottom:10px;
  flex-wrap:wrap; }
.legenda-zona label { display:flex; align-items:center; gap:6px; cursor:pointer;
  color:var(--teks); margin:0; font-size:13px; }
.kotak-warna { width:14px; height:14px; border-radius:3px; display:inline-block; }

.tag-graded { font-size:12px; cursor:help; }

/* riwayat order -- kartu ringkasan angka di atas tabel */
.baris-ringkas { display:flex; gap:12px; flex-wrap:wrap; margin-bottom:18px; }
.kartu-ringkas { flex:1 1 150px; max-width:220px; background:var(--lembut);
  border:1px solid var(--tepi); border-radius:9px; padding:14px 16px; }
.kartu-ringkas .angka { font-size:22px; font-weight:700; letter-spacing:-.02em; }
.kartu-ringkas .label { font-size:12px; color:var(--redup); margin-top:2px; }

.grid-pratinjau-grade { display:flex; flex-wrap:wrap; gap:10px; margin-top:8px; }
.kartu-pratinjau-grade { border:1px solid var(--tepi); border-radius:8px;
  padding:8px; background:var(--lembut); text-align:center; }
.kartu-pratinjau-grade .label { font-size:11.5px; color:var(--redup);
  margin-bottom:4px; }
.kartu-pratinjau-grade svg { display:block; background:var(--card);
  border-radius:5px; }

.pratinjau { margin-top:14px; text-align:center; background:#fff;
             border:1px solid var(--tepi); border-radius:9px; padding:10px; }
.pratinjau img { max-width:100%; height:auto; }
.unduh { display:flex; gap:10px; flex-wrap:wrap; margin-top:14px; }
.unduh a { text-decoration:none; font-size:13px; font-weight:600;
           color:var(--biru); border:1px solid var(--tepi);
           padding:9px 15px; border-radius:8px; }

.spinner { display:inline-block; width:13px; height:13px;
  border:2px solid var(--tepi); border-top-color:var(--biru);
  border-radius:50%; animation:putar .7s linear infinite; vertical-align:-2px; }
@keyframes putar { to { transform:rotate(360deg); } }