/* ═══════════════════════════════════════════════════════════════
   Ngelostools Web — Antarmuka Modern (Cyan Tech · Putih · Hitam)
   -----------------------------------------------------------------
   Berkas ini adalah overhaul total tampilan. SEMUA nama kelas dipertahankan
   persis sama supaya seluruh logika di js/studio.js tetap bekerja tanpa
   perubahan. Yang berubah: warna, aksen, latar, radius, dan suasana modern.

   Tema:
     <html data-tema="gelap">   (bawaan)  — dasar navy-hitam, aksen cyan
     <html data-tema="terang">            — dasar putih bersih, aksen teal
   ═══════════════════════════════════════════════════════════════ */

/* ─────────── Token warna: TEMA GELAP (bawaan) ─────────── */
:root{
  /* Aksen cyan tech — dipakai konsisten di kedua tema */
  --merah:#22d3ee;
  --merah-terang:#67e8f9;
  --merah-tua:#0891b2;
  --merah-lembut:rgba(34,211,238,.14);

  --hijau:#34d399;
  --kuning:#fbbf24;
  --merah-galat:#f87171;

  /* Permukaan — cooler navy */
  --bg:#090c14;
  --bg-2:#0f141f;
  --panel:rgba(18,24,38,.78);
  --panel-2:rgba(22,30,46,.96);
  --panel-padat:#121824;

  --garis:rgba(255,255,255,.08);
  --garis-kuat:rgba(255,255,255,.15);
  --garis-terang:rgba(255,255,255,.18);

  --teks:#e8f4ff;
  --teks-2:#a8b8d0;
  --teks-3:#6b7a94;

  --aksen:var(--merah);
  --aksen-2:#67e8f9;
  --aksen-3:#22d3ee;
  --grad:linear-gradient(135deg,#06b6d4 0%,#22d3ee 100%);
  --grad-2:linear-gradient(135deg,#06b6d4 0%,#34d399 100%);

  --r:14px;
  --r-kecil:8px;
  --bayang:0 18px 50px -24px rgba(0,0,0,.85);
  --bayang-kuat:0 30px 74px -28px rgba(0,0,0,.92);
  --transisi:.2s cubic-bezier(.4,0,.2,1);

  /* Warna di atas bidang gelap */
  --teks-di-grad:#042f3a;
  --lapis-gelap:rgba(4,8,16,.78);
  --log-latar:rgba(0,0,0,.38);

  --sidebar-latar:linear-gradient(180deg,rgba(15,22,36,.98),rgba(8,12,20,.99));
  --kepala-latar:rgba(9,12,20,.65);
  --kaca:blur(18px);

  color-scheme:dark;
}

/* ─────────── Token warna: TEMA TERANG ─────────── */
html[data-tema="terang"]{
  --bg:#f4f7fb;
  --bg-2:#ffffff;
  --panel:rgba(255,255,255,.88);
  --panel-2:rgba(255,255,255,.98);
  --panel-padat:#ffffff;

  --garis:rgba(15,23,42,.08);
  --garis-kuat:rgba(15,23,42,.14);
  --garis-terang:rgba(15,23,42,.20);

  --teks:#0f172a;
  --teks-2:#475569;
  --teks-3:#64748b;

  --aksen:#0891b2;
  --aksen-2:#06b6d4;
  --aksen-3:#0e7490;
  --grad:linear-gradient(135deg,#0891b2 0%,#06b6d4 100%);
  --grad-2:linear-gradient(135deg,#0891b2 0%,#10b981 100%);

  --bayang:0 14px 40px -22px rgba(15,23,42,.22);
  --bayang-kuat:0 28px 64px -26px rgba(15,23,42,.28);

  --hijau:#059669;
  --kuning:#d97706;
  --merah-galat:#dc2626;

  --teks-di-grad:#ffffff;
  --lapis-gelap:rgba(15,23,42,.40);
  --log-latar:rgba(15,23,42,.04);

  --sidebar-latar:linear-gradient(180deg,rgba(255,255,255,.98),rgba(248,250,252,.99));
  --kepala-latar:rgba(255,255,255,.75);
  --kaca:blur(16px);

  color-scheme:light;
}

/* ─────────── Dasar ─────────── */
*{margin:0;padding:0;box-sizing:border-box}
html,body{height:100%}
body{
  font-family:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;
  background:var(--bg);
  color:var(--teks);
  font-size:14px;
  line-height:1.55;
  -webkit-font-smoothing:antialiased;
  -webkit-text-size-adjust:100%;
  overflow:hidden;
  transition:background .25s ease,color .25s ease;
}
/* Cahaya latar lembut (cyan soft) */
body::before{
  content:'';position:fixed;inset:0;pointer-events:none;z-index:0;
  background:
    radial-gradient(900px 520px at 10% -10%,rgba(34,211,238,.12),transparent 62%),
    radial-gradient(760px 480px at 92% 6%,rgba(34,211,238,.06),transparent 64%),
    radial-gradient(700px 560px at 50% 110%,rgba(34,211,238,.05),transparent 62%);
}
html[data-tema="terang"] body::before{
  background:
    radial-gradient(900px 520px at 10% -10%,rgba(6,182,212,.08),transparent 62%),
    radial-gradient(760px 480px at 92% 6%,rgba(6,182,212,.04),transparent 64%),
    radial-gradient(700px 560px at 50% 110%,rgba(6,182,212,.035),transparent 62%);
}
.sembunyi{display:none !important}
::-webkit-scrollbar{width:9px;height:9px}
::-webkit-scrollbar-track{background:transparent}
::-webkit-scrollbar-thumb{background:var(--garis-kuat);border-radius:9px}
::-webkit-scrollbar-thumb:hover{background:var(--merah);opacity:.7}

/* ═══════════ SHELL ═══════════ */
.shell{position:relative;z-index:1;display:flex;height:100vh;height:100dvh;overflow:hidden}

/* ═══════════ SIDEBAR ═══════════ */
.sidebar{
  width:256px;flex-shrink:0;display:flex;flex-direction:column;
  background:var(--sidebar-latar);
  border-right:1px solid var(--garis);
  -webkit-backdrop-filter:var(--kaca);backdrop-filter:var(--kaca);
  transition:transform .28s cubic-bezier(.4,0,.2,1);
}
.merek{
  display:flex;align-items:center;gap:11px;padding:20px 18px 16px;
  border-bottom:1px solid var(--garis);
}
.merek-ikon{
  width:40px;height:40px;border-radius:12px;flex-shrink:0;
  background:var(--grad);color:var(--teks-di-grad);font-weight:800;font-size:18px;
  display:flex;align-items:center;justify-content:center;
  box-shadow:0 10px 26px -10px rgba(34,211,238,.75);
}
.merek-teks{min-width:0}
.merek-nama{font-weight:750;font-size:14.5px;letter-spacing:-.2px;white-space:nowrap}
.merek-versi{font-size:11px;color:var(--teks-3);font-weight:500}

.nav{flex:0 0 auto;overflow:visible;padding:14px 11px}
.nav-label{
  font-size:10px;font-weight:700;letter-spacing:.13em;text-transform:uppercase;
  color:var(--teks-3);padding:14px 10px 7px;
}
.nav-label:first-child{padding-top:4px}
.nav-item{
  display:flex;align-items:center;gap:11px;padding:11px 12px;margin-bottom:3px;
  border-radius:var(--r-kecil);cursor:pointer;color:var(--teks-2);
  font-weight:500;font-size:13.5px;position:relative;
  transition:var(--transisi);user-select:none;
  -webkit-tap-highlight-color:transparent;
}
.nav-item:hover{background:var(--merah-lembut);color:var(--teks)}
.nav-item.aktif{
  background:linear-gradient(90deg,rgba(34,211,238,.20),rgba(34,211,238,.05));
  color:var(--teks);font-weight:650;
}
html[data-tema="terang"] .nav-item.aktif{
  background:linear-gradient(90deg,rgba(6,182,212,.14),rgba(6,182,212,.03));
}
.nav-item.aktif::before{
  content:'';position:absolute;left:0;top:50%;transform:translateY(-50%);
  width:3px;height:21px;border-radius:0 3px 3px 0;background:var(--grad);
}
.nav-ikon{width:20px;text-align:center;font-size:15px;opacity:.95}
.nav-teks{flex:1}
.badge{
  font-size:10.5px;font-weight:700;padding:2px 7px;border-radius:20px;
  background:var(--merah-lembut);color:var(--merah);min-width:20px;text-align:center;
}
.badge:empty{display:none}
.badge-hidup{background:rgba(63,191,143,.18);color:var(--hijau)}
.badge-galat{background:rgba(239,107,107,.18);color:var(--merah-galat)}

.sidebar-bawah{
  padding:13px;border-top:1px solid var(--garis);
  display:flex;flex-direction:column;gap:7px;
}
.status-pil{
  display:flex;align-items:center;gap:8px;padding:8px 11px;border-radius:var(--r-kecil);
  background:var(--merah-lembut);font-size:12px;color:var(--teks-2);
}
.status-teks{font-weight:500}
.titik{width:7px;height:7px;border-radius:50%;flex-shrink:0}
.titik-abu{background:var(--teks-3)}
.titik-hijau{background:var(--hijau);box-shadow:0 0 9px var(--hijau)}
.titik-merah{background:var(--merah-galat);box-shadow:0 0 9px var(--merah-galat)}
.titik-kuning{background:var(--kuning);box-shadow:0 0 9px var(--kuning)}
.versi-kecil{
  font-size:10.5px;color:var(--teks-3);text-align:center;padding-top:3px;word-break:break-all;
}

/* ═══════════ AREA UTAMA ═══════════ */
.utama{flex:1;display:flex;flex-direction:column;overflow:hidden;min-width:0}
.kepala{
  display:flex;align-items:center;justify-content:space-between;gap:14px;
  padding:18px 26px 15px;border-bottom:1px solid var(--garis);
  background:var(--kepala-latar);
  -webkit-backdrop-filter:var(--kaca);backdrop-filter:var(--kaca);
  flex-shrink:0;
}
.kepala-kiri{min-width:0;display:flex;align-items:center;gap:12px}
.kepala h2{
  font-size:20px;font-weight:750;letter-spacing:-.4px;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.kepala-sub{font-size:12.5px;color:var(--teks-3);margin-top:2px}
.kepala-kanan{display:flex;align-items:center;gap:10px;flex-shrink:0}
.jam{
  font-size:12.5px;color:var(--teks-2);font-variant-numeric:tabular-nums;
  padding:7px 13px;border-radius:20px;background:var(--merah-lembut);
  border:1px solid var(--garis);white-space:nowrap;
}
.isi{flex:1;overflow-y:auto;padding:22px 26px 60px;-webkit-overflow-scrolling:touch}
.hal{display:flex;flex-direction:column;gap:18px;animation:masuk .3s ease}
@keyframes masuk{from{opacity:0;transform:translateY(9px)}to{opacity:1;transform:none}}

/* Tombol buka/tutup menu di layar kecil */
.nav-buka{
  display:none;width:38px;height:38px;flex-shrink:0;
  border-radius:11px;border:1px solid var(--garis-kuat);
  background:var(--merah-lembut);color:var(--teks);
  font-size:17px;line-height:1;cursor:pointer;
  align-items:center;justify-content:center;transition:var(--transisi);
}
.nav-buka:hover{background:var(--merah);color:var(--teks-di-grad)}
.nav-lapis{
  display:none;position:fixed;inset:0;z-index:44;
  background:var(--lapis-gelap);
  -webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px);
}

/* Tombol ganti tema */
.tema-btn{
  display:inline-flex;align-items:center;gap:7px;
  padding:7px 13px;border-radius:20px;cursor:pointer;
  border:1px solid var(--garis-kuat);background:var(--merah-lembut);
  color:var(--teks-2);font-family:inherit;font-size:12.5px;font-weight:600;
  transition:var(--transisi);white-space:nowrap;
}
.tema-btn:hover{background:var(--merah);color:var(--teks-di-grad);border-color:transparent}
.tema-btn .tema-ikon{font-size:14px;line-height:1}

/* ═══════════ KARTU ═══════════ */
.kartu{
  background:var(--panel);border:1px solid var(--garis);border-radius:var(--r);
  -webkit-backdrop-filter:var(--kaca);backdrop-filter:var(--kaca);
  box-shadow:var(--bayang);overflow:hidden;
}
.kartu-kepala{
  display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding:15px 19px;border-bottom:1px solid var(--garis);flex-wrap:wrap;
}
.kartu-kepala h3{font-size:14.5px;font-weight:700;letter-spacing:-.15px}
.kartu-aksi{
  font-size:11.5px;color:var(--teks-3);
  display:flex;align-items:center;gap:7px;flex-wrap:wrap;
}
.kartu-isi{padding:19px}
.kartu-log .kartu-isi{padding:0}
.log-isi{
  padding:0;max-height:calc(100vh - 268px);overflow-y:auto;
  font-family:'JetBrains Mono',ui-monospace,Menlo,Consolas,monospace;
}

.kolom-2{display:grid;grid-template-columns:1fr 1fr;gap:18px}
@media(max-width:1150px){.kolom-2{grid-template-columns:1fr}}

/* ═══════════ KARTU STATISTIK ═══════════ */
.stat-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(196px,1fr));gap:15px}
.stat-kartu{
  background:var(--panel);border:1px solid var(--garis);border-radius:var(--r);
  padding:17px 19px;position:relative;overflow:hidden;transition:var(--transisi);
  -webkit-backdrop-filter:var(--kaca);backdrop-filter:var(--kaca);
}
.stat-kartu::after{
  content:'';position:absolute;top:0;left:0;right:0;height:2px;background:var(--grad);opacity:.8;
}
.stat-kartu:hover{transform:translateY(-2px);border-color:var(--garis-kuat)}
.stat-atas{display:flex;align-items:center;justify-content:space-between;margin-bottom:9px}
.stat-label{
  font-size:11.5px;color:var(--teks-3);font-weight:700;
  letter-spacing:.04em;text-transform:uppercase;
}
.stat-ikon{font-size:16px;opacity:.85}
.stat-nilai{
  font-size:26px;font-weight:800;letter-spacing:-.9px;line-height:1.1;
  font-variant-numeric:tabular-nums;
}
.stat-bawah{font-size:11.5px;color:var(--teks-3);margin-top:5px}
.stat-hijau .stat-nilai{color:var(--hijau)}
.stat-biru .stat-nilai{color:var(--merah)}
.stat-ungu .stat-nilai{color:var(--merah-terang)}
.stat-kuning .stat-nilai{color:var(--kuning)}
html[data-tema="terang"] .stat-ungu .stat-nilai{color:var(--merah-tua)}

/* ═══════════ TOMBOL ═══════════ */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:7px;
  padding:10px 17px;border-radius:var(--r-kecil);border:1px solid transparent;
  font-family:inherit;font-size:13.5px;font-weight:650;cursor:pointer;
  transition:var(--transisi);white-space:nowrap;
  -webkit-tap-highlight-color:transparent;
}
.btn:disabled{opacity:.45;cursor:not-allowed}
.btn-utama{background:var(--grad);color:var(--teks-di-grad);box-shadow:0 10px 26px -12px rgba(34,211,238,.9)}
.btn-utama:hover:not(:disabled){transform:translateY(-1px);box-shadow:0 14px 32px -12px rgba(34,211,238,1)}
.btn-hantu{background:var(--merah-lembut);border-color:var(--garis-kuat);color:var(--teks)}
.btn-hantu:hover:not(:disabled){background:var(--merah);color:var(--teks-di-grad);border-color:transparent}
.btn-sukses{background:rgba(63,191,143,.16);border-color:rgba(63,191,143,.4);color:var(--hijau)}
.btn-sukses:hover:not(:disabled){background:rgba(63,191,143,.26)}
.btn-bahaya{background:rgba(239,107,107,.14);border-color:rgba(239,107,107,.38);color:var(--merah-galat)}
.btn-bahaya:hover:not(:disabled){background:rgba(239,107,107,.24)}
.btn-kecil{padding:7px 12px;font-size:12.5px;border-radius:8px}
.btn-lebar{width:100%}

/* ═══════════ FORMULIR ═══════════ */
.input{
  width:100%;padding:10.5px 13px;border-radius:var(--r-kecil);
  background:var(--merah-lembut);border:1px solid var(--garis-kuat);
  color:var(--teks);font-family:inherit;font-size:13.5px;
  transition:var(--transisi);min-width:0;
}
.input:focus{
  outline:none;border-color:var(--merah);
  background:rgba(34,211,238,.08);
  box-shadow:0 0 0 3px rgba(34,211,238,.14);
}
.input::placeholder{color:var(--teks-3)}
.input[readonly]{cursor:pointer;color:var(--teks-2)}
select.input{cursor:pointer;appearance:none;
  background-image:linear-gradient(45deg,transparent 50%,var(--teks-3) 50%),
                   linear-gradient(135deg,var(--teks-3) 50%,transparent 50%);
  background-position:calc(100% - 17px) 50%,calc(100% - 12px) 50%;
  background-size:5px 5px,5px 5px;background-repeat:no-repeat;
  padding-right:34px;
}
/* Dropdown bawaan browser: tanpa ini opsinya putih-di-atas-putih */
select.input option{background:var(--panel-padat);color:var(--teks)}
textarea.input{resize:vertical;font-family:inherit}
input[type="date"].input,input[type="time"].input,input[type="number"].input{color-scheme:inherit}
.input-kecil{padding:7px 11px;font-size:12.5px;width:auto;border-radius:8px}
.input-baris{display:flex;gap:9px;align-items:center}
.input-baris .input{flex:1;min-width:0}
.grup{margin-bottom:13px}
.grup label{
  display:block;font-size:12px;font-weight:650;color:var(--teks-2);margin-bottom:6px;
}
.grup-2{display:grid;grid-template-columns:1fr 1fr;gap:12px;align-items:start}
.petunjuk{font-size:11.5px;color:var(--teks-3);margin-top:6px;line-height:1.55}
.centang{
  display:flex;align-items:center;gap:9px;font-size:13px;color:var(--teks-2);
  cursor:pointer;padding:6px 0;user-select:none;
}
.centang input{width:16px;height:16px;accent-color:var(--merah);cursor:pointer;flex-shrink:0}
.atas-1{margin-top:15px}

.tab-mini{
  display:inline-flex;flex-wrap:wrap;gap:3px;padding:3px;border-radius:10px;
  background:var(--merah-lembut);border:1px solid var(--garis);
}
.tab-mini-btn{
  padding:7px 14px;border-radius:8px;border:none;background:transparent;
  color:var(--teks-2);font-family:inherit;font-size:12.5px;font-weight:650;
  cursor:pointer;transition:var(--transisi);
}
.tab-mini-btn:hover{color:var(--teks)}
.tab-mini-btn.aktif{background:var(--grad);color:var(--teks-di-grad)}

/* ═══════════ BARIS AKSI ═══════════ */
.baris-aksi{
  display:flex;align-items:center;justify-content:space-between;
  gap:12px;flex-wrap:wrap;
}
.baris-kiri,.baris-kanan{display:flex;align-items:center;gap:9px;flex-wrap:wrap}

/* ═══════════ KOTAK INFO ═══════════ */
.info-kotak{
  margin-top:13px;padding:13px 15px;border-radius:var(--r-kecil);font-size:12.5px;
  background:var(--merah-lembut);border:1px solid rgba(34,211,238,.30);color:var(--teks-2);
}
.info-kotak.info-ok{background:rgba(63,191,143,.10);border-color:rgba(63,191,143,.34);color:var(--hijau)}
.info-kotak.info-galat{background:rgba(239,107,107,.10);border-color:rgba(239,107,107,.34);color:var(--merah-galat)}
.info-kotak b{color:var(--teks)}
.info-baris{display:flex;justify-content:space-between;gap:10px;padding:2.5px 0}

/* ═══════════ TABEL ═══════════ */
.tabel{width:100%;border-collapse:collapse;font-size:13px}
.tabel th{
  text-align:left;padding:10px 13px;font-size:11px;font-weight:750;
  letter-spacing:.07em;text-transform:uppercase;color:var(--teks-3);
  border-bottom:1px solid var(--garis-kuat);white-space:nowrap;
}
.tabel td{padding:11px 13px;border-bottom:1px solid var(--garis);vertical-align:middle}
.tabel tr:last-child td{border-bottom:none}
.tabel tr:hover td{background:var(--merah-lembut)}
.tabel .angka{font-variant-numeric:tabular-nums;font-weight:650}
.tabel-bungkus{width:100%;overflow-x:auto;-webkit-overflow-scrolling:touch}

/* ═══════════ KEADAAN KOSONG ═══════════ */
.kosong{text-align:center;padding:36px 20px;color:var(--teks-3)}
.kosong-ikon{font-size:32px;opacity:.4;margin-bottom:9px}
.kosong-judul{font-size:14px;font-weight:650;color:var(--teks-2);margin-bottom:4px}
.kosong-teks{font-size:12.5px}

/* ═══════════ LABEL PILL ═══════════ */
.pill{
  display:inline-flex;align-items:center;gap:5px;padding:3.5px 10px;
  border-radius:20px;font-size:11px;font-weight:700;white-space:nowrap;
}
.pill-ok{background:rgba(63,191,143,.16);color:var(--hijau)}
.pill-warn{background:rgba(224,169,74,.18);color:var(--kuning)}
.pill-galat{background:rgba(239,107,107,.16);color:var(--merah-galat)}
.pill-abu{background:var(--merah-lembut);color:var(--teks-2)}
.pill-biru{background:rgba(34,211,238,.16);color:var(--merah)}
.pill-ungu{background:rgba(34,211,238,.20);color:var(--merah)}
html[data-tema="terang"] .pill-biru,html[data-tema="terang"] .pill-ungu{color:var(--merah-tua)}

/* ═══════════ KARTU CHANNEL ═══════════ */
.ch-kartu{
  display:flex;align-items:center;gap:14px;padding:15px;border-radius:12px;
  background:var(--merah-lembut);border:1px solid var(--garis);margin-bottom:11px;
  transition:var(--transisi);
}
.ch-kartu:last-child{margin-bottom:0}
.ch-kartu:hover{border-color:var(--merah);background:rgba(34,211,238,.09)}
.ch-avatar{
  width:46px;height:46px;border-radius:13px;flex-shrink:0;object-fit:cover;
  background:var(--grad);display:flex;align-items:center;justify-content:center;
  font-weight:800;font-size:17px;color:var(--teks-di-grad);overflow:hidden;
}
.ch-avatar img{width:100%;height:100%;object-fit:cover}
.ch-info{flex:1;min-width:0}
.ch-nama{
  font-weight:700;font-size:14px;display:flex;align-items:center;
  gap:8px;flex-wrap:wrap;word-break:break-word;
}
.ch-meta{
  font-size:11.5px;color:var(--teks-3);margin-top:3px;
  display:flex;gap:11px;flex-wrap:wrap;
}
.ch-aksi{display:flex;gap:7px;flex-wrap:wrap;justify-content:flex-end}
@media(max-width:820px){
  .ch-kartu{flex-wrap:wrap}
  .ch-aksi{width:100%;justify-content:flex-start}
}

/* ═══════════ KARTU SIARAN ═══════════ */
.siaran-kartu{
  padding:15px;border-radius:12px;background:var(--merah-lembut);
  border:1px solid var(--garis);margin-bottom:11px;
}
.siaran-kartu:last-child{margin-bottom:0}
.siaran-atas{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-bottom:9px}
.siaran-judul{font-weight:700;font-size:13.5px;flex:1;min-width:120px;word-break:break-word}
.siaran-meta{
  display:flex;gap:14px;flex-wrap:wrap;font-size:11.5px;
  color:var(--teks-3);margin-bottom:9px;
}
.siaran-meta b{color:var(--teks-2);font-weight:650}
.siaran-log{
  background:var(--log-latar);border-radius:8px;padding:9px 11px;
  max-height:132px;overflow-y:auto;
  font-family:'JetBrains Mono',ui-monospace,Menlo,Consolas,monospace;
  font-size:11px;color:var(--teks-2);line-height:1.65;
  white-space:pre-wrap;word-break:break-word;
}
.denyut{
  width:7px;height:7px;border-radius:50%;background:var(--hijau);flex-shrink:0;
  animation:denyut 1.6s infinite;
}
@keyframes denyut{
  0%,100%{opacity:1;box-shadow:0 0 0 0 rgba(63,191,143,.55)}
  50%{opacity:.55;box-shadow:0 0 0 7px rgba(63,191,143,0)}
}

/* ═══════════ LOG ═══════════ */
.log-baris{
  display:flex;gap:12px;padding:8px 19px;border-bottom:1px solid var(--garis);
  font-size:11.8px;line-height:1.6;align-items:flex-start;
}
.log-baris:hover{background:var(--merah-lembut)}
.log-waktu{color:var(--teks-3);flex-shrink:0;font-variant-numeric:tabular-nums}
.log-lv{
  flex-shrink:0;font-weight:750;width:56px;text-transform:uppercase;
  font-size:10px;padding-top:1px;
}
.lv-info{color:var(--merah)}
.lv-sukses{color:var(--hijau)}
.lv-ingat{color:var(--kuning)}
.lv-galat{color:var(--merah-galat)}
.log-sumber{color:var(--merah-terang);flex-shrink:0;min-width:66px}
html[data-tema="terang"] .log-sumber{color:var(--merah-tua)}
.log-pesan{color:var(--teks-2);flex:1;word-break:break-word}

/* ═══════════ AKSI CEPAT ═══════════ */
.aksi-cepat{display:grid;grid-template-columns:repeat(auto-fit,minmax(158px,1fr));gap:11px}
.aksi-cepat-btn{
  display:flex;flex-direction:column;align-items:flex-start;gap:5px;
  padding:15px;border-radius:12px;cursor:pointer;text-align:left;
  background:var(--merah-lembut);border:1px solid var(--garis);
  color:var(--teks);font-family:inherit;transition:var(--transisi);
}
.aksi-cepat-btn:hover{
  background:rgba(34,211,238,.14);border-color:var(--merah);transform:translateY(-2px);
}
.aksi-cepat-ikon{font-size:19px}
.aksi-cepat-nama{font-size:13px;font-weight:700}
.aksi-cepat-sub{font-size:11px;color:var(--teks-3)}

/* ═══════════ LAYAR LISENSI ═══════════ */
.lisensi-layar{
  position:fixed;inset:0;z-index:60;display:flex;align-items:center;justify-content:center;
  background:
    radial-gradient(1000px 700px at 50% 0%,rgba(34,211,238,.16),transparent 62%),var(--bg);
  padding:22px;overflow-y:auto;
}
.lisensi-kotak{
  width:100%;max-width:412px;background:var(--panel-2);
  border:1px solid var(--garis-kuat);border-radius:22px;padding:34px 30px;
  text-align:center;box-shadow:var(--bayang-kuat);
  -webkit-backdrop-filter:blur(22px);backdrop-filter:blur(22px);
}
.lisensi-ikon{
  width:58px;height:58px;border-radius:17px;margin:0 auto 15px;background:var(--grad);
  display:flex;align-items:center;justify-content:center;
  font-size:26px;font-weight:800;color:var(--teks-di-grad);
  box-shadow:0 15px 38px -14px rgba(34,211,238,.9);
}
.lisensi-kotak h1{font-size:23px;font-weight:800;letter-spacing:-.6px;margin-bottom:5px}
.lisensi-sub{font-size:12.5px;color:var(--teks-3);margin-bottom:22px}
.lisensi-kotak .input{margin-bottom:11px;text-align:center}
.lisensi-status{font-size:12.5px;margin-bottom:14px;min-height:18px;color:var(--teks-2)}
.lisensi-pesan{font-size:12px;margin-top:12px;min-height:17px;color:var(--merah-galat)}
.lisensi-pesan.ok{color:var(--hijau)}
.lisensi-kaki{
  font-size:11px;color:var(--teks-3);margin-top:19px;
  padding-top:15px;border-top:1px solid var(--garis);word-break:break-all;
}

/* ═══════════ MODAL ═══════════ */
.modal-lapis{
  position:fixed;inset:0;z-index:70;background:var(--lapis-gelap);
  -webkit-backdrop-filter:blur(7px);backdrop-filter:blur(7px);
  display:flex;align-items:center;justify-content:center;padding:22px;
}
.modal{
  width:100%;max-width:530px;max-height:88vh;max-height:88dvh;
  display:flex;flex-direction:column;
  background:var(--panel-2);border:1px solid var(--garis-kuat);border-radius:20px;
  box-shadow:var(--bayang-kuat);animation:modalMasuk .24s ease;
}
@keyframes modalMasuk{from{opacity:0;transform:scale(.965) translateY(12px)}to{opacity:1;transform:none}}
.modal-kepala{
  display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding:17px 21px;border-bottom:1px solid var(--garis);
}
.modal-kepala h3{font-size:15.5px;font-weight:700}
.modal-tutup{
  width:32px;height:32px;border-radius:9px;border:1px solid var(--garis-kuat);
  background:var(--merah-lembut);color:var(--teks-2);font-size:19px;line-height:1;
  cursor:pointer;transition:var(--transisi);flex-shrink:0;
}
.modal-tutup:hover{background:var(--merah);color:var(--teks-di-grad);border-color:transparent}
.modal-isi{padding:21px;overflow-y:auto;flex:1;-webkit-overflow-scrolling:touch}
.modal-kaki{
  padding:15px 21px;border-top:1px solid var(--garis);
  display:flex;gap:9px;justify-content:flex-end;flex-wrap:wrap;
}

/* ═══════════ PEMBERITAHUAN (TOAST) ═══════════ */
.toast-wadah{
  position:fixed;right:22px;bottom:22px;z-index:90;
  display:flex;flex-direction:column;gap:9px;max-width:378px;
}
.toast{
  padding:13px 17px;border-radius:12px;font-size:13px;font-weight:550;
  background:var(--panel-2);border:1px solid var(--garis-kuat);color:var(--teks);
  box-shadow:var(--bayang-kuat);animation:toastMasuk .26s ease;
  -webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);
  word-break:break-word;
}
@keyframes toastMasuk{from{opacity:0;transform:translateX(28px)}to{opacity:1;transform:none}}
.toast-ok{border-color:rgba(63,191,143,.44);background:linear-gradient(90deg,rgba(63,191,143,.14),var(--panel-2))}
.toast-galat{border-color:rgba(239,107,107,.44);background:linear-gradient(90deg,rgba(239,107,107,.14),var(--panel-2))}
.toast-info{border-color:rgba(34,211,238,.44);background:linear-gradient(90deg,rgba(34,211,238,.14),var(--panel-2))}

/* ═══════════ KINERJA SISTEM (CPU / RAM / DISK) ═══════════ */
.beban-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:16px}
.beban{
  padding:14px 15px;border:1px solid var(--garis);border-radius:var(--r-kecil);
  background:var(--merah-lembut);transition:var(--transisi);
}
.beban:hover{border-color:var(--garis-kuat)}
.beban-atas{display:flex;align-items:center;justify-content:space-between;margin-bottom:9px}
.beban-label{
  display:flex;align-items:center;gap:7px;font-size:12.5px;font-weight:650;
  color:var(--teks-2);letter-spacing:.03em;text-transform:uppercase;
}
.beban-ikon{font-size:13px;opacity:.85}
.beban-nilai{
  font-size:17px;font-weight:750;font-variant-numeric:tabular-nums;letter-spacing:-.01em;
}
.beban-nilai.beban-ok{color:var(--hijau)}
.beban-nilai.beban-warn{color:var(--kuning)}
.beban-nilai.beban-galat{color:var(--merah-galat)}
.beban-latar{height:7px;border-radius:99px;background:var(--garis-kuat);overflow:hidden}
.beban-isi{
  height:100%;border-radius:99px;
  transition:width .6s cubic-bezier(.4,0,.2,1),background .3s;
}
.beban-isi.beban-ok{background:linear-gradient(90deg,#22d3ee,#3fbf8f)}
.beban-isi.beban-warn{background:linear-gradient(90deg,#e0a94a,#d98a2b)}
.beban-isi.beban-galat{background:linear-gradient(90deg,#ef6b6b,#d33f3f)}
.beban-bawah{margin-top:8px;font-size:11.5px;color:var(--teks-3);line-height:1.45}
.beban-meta{
  display:flex;flex-wrap:wrap;gap:8px 18px;margin-top:15px;padding-top:13px;
  border-top:1px solid var(--garis);font-size:11.5px;color:var(--teks-3);
}
.beban-meta span{display:flex;align-items:center;gap:6px}

/* ═══════════ PENJELAJAH BERKAS ═══════════ */
.pb-item{border-radius:8px;transition:background .15s}
.pb-item:hover{background:var(--merah-lembut)}
.pb-item[data-masuk]:hover{background:rgba(34,211,238,.16)}
.pb-item[data-berkas].pb-dipilih{background:rgba(63,191,143,.16)}

/* ═══════════ SPINTAX (judul / deskripsi / tags) ═══════════ */
.petunjuk-inline{
  font-size:10.5px;font-weight:400;color:var(--teks-3);
  text-transform:none;letter-spacing:0;margin-left:6px;
}
.spin-info{
  margin-top:6px;font-size:11.5px;line-height:1.5;color:var(--teks-3);
  padding:0 2px;transition:color .2s;
}
.spin-info:empty{display:none}
.spin-info.spin-ok{color:var(--hijau)}
.spin-info.spin-warn{color:var(--kuning)}
.spin-info.spin-galat{color:var(--merah-galat)}
.spin-contoh{color:var(--teks-3);font-style:italic;word-break:break-word}

/* ═══════════ JADWAL START/STOP OTOMATIS ═══════════ */
.satuan{font-size:11.5px;color:var(--teks-3);white-space:nowrap;align-self:center}
.jadwal-item{
  border:1px solid var(--garis);border-radius:12px;padding:12px 14px;margin-bottom:10px;
  background:var(--merah-lembut);transition:border-color .2s,opacity .2s;
}
.jadwal-item:hover{border-color:var(--garis-terang)}
.jadwal-mati{opacity:.5}
.jadwal-atas{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-bottom:8px}
.jadwal-judul{font-size:13.5px;font-weight:650;color:var(--teks)}
.jadwal-meta{
  display:flex;gap:14px;flex-wrap:wrap;font-size:11.5px;color:var(--teks-3);
  line-height:1.6;margin-bottom:10px;
}
.jadwal-meta b{color:var(--teks-2);font-weight:650}
.jadwal-hasil{color:var(--teks-3);font-style:italic;max-width:100%;word-break:break-word}
.jadwal-aksi{display:flex;gap:8px;flex-wrap:wrap}
.jadwal-ringkas{font-size:11.5px;color:var(--teks-3)}
.jadwal-ringkas:empty{display:none}

/* ═══════════ UNGGAH BERKAS (khas versi web) ═══════════ */
.unggah-kotak{
  border:1.5px dashed var(--garis-terang);border-radius:12px;padding:22px 18px;
  text-align:center;background:var(--merah-lembut);transition:var(--transisi);
}
.unggah-kotak.sorot{border-color:var(--merah);background:rgba(34,211,238,.12)}
.unggah-ikon{font-size:28px;margin-bottom:8px;opacity:.85}
.unggah-judul{font-size:13.5px;font-weight:700;margin-bottom:4px}
.unggah-sub{font-size:11.5px;color:var(--teks-3);margin-bottom:14px}
.unggah-baris{display:flex;gap:9px;justify-content:center;flex-wrap:wrap}
.unggah-progres{
  height:8px;border-radius:99px;background:var(--garis-kuat);
  overflow:hidden;margin-top:14px;
}
.unggah-progres-isi{
  height:100%;width:0%;border-radius:99px;background:var(--grad);
  transition:width .25s ease;
}
.unggah-daftar{margin-top:14px;display:flex;flex-direction:column;gap:7px}
.unggah-baris-berkas{
  display:flex;align-items:center;gap:9px;font-size:12px;
  padding:8px 11px;border-radius:8px;background:var(--merah-lembut);
  border:1px solid var(--garis);
}
.unggah-baris-berkas .nama{flex:1;min-width:0;word-break:break-all}
.unggah-baris-berkas .ukuran{color:var(--teks-3);white-space:nowrap}

/* ═══════════ LAYAR MASUK (kata sandi) ═══════════ */
.masuk-layar{
  position:fixed;inset:0;z-index:80;display:flex;align-items:center;justify-content:center;
  background:
    radial-gradient(1000px 700px at 50% 0%,rgba(34,211,238,.18),transparent 62%),var(--bg);
  padding:22px;overflow-y:auto;
}
.masuk-kotak{
  width:100%;max-width:392px;background:var(--panel-2);
  border:1px solid var(--garis-kuat);border-radius:22px;padding:34px 30px;
  text-align:center;box-shadow:var(--bayang-kuat);
  -webkit-backdrop-filter:blur(22px);backdrop-filter:blur(22px);
}
.masuk-ikon{
  width:58px;height:58px;border-radius:17px;margin:0 auto 15px;background:var(--grad);
  display:flex;align-items:center;justify-content:center;
  font-size:26px;font-weight:800;color:var(--teks-di-grad);
  box-shadow:0 15px 38px -14px rgba(34,211,238,.9);
}
.masuk-kotak h1{font-size:22px;font-weight:800;letter-spacing:-.5px;margin-bottom:5px}
.masuk-sub{font-size:12.5px;color:var(--teks-3);margin-bottom:22px}
.masuk-pesan{font-size:12px;margin-top:12px;min-height:17px;color:var(--merah-galat)}
.masuk-kaki{
  font-size:11px;color:var(--teks-3);margin-top:19px;
  padding-top:15px;border-top:1px solid var(--garis);
}

/* ═══════════ RESPONSIF ═══════════ */

/* Tablet & ponsel: sidebar jadi laci yang bisa dibuka */
@media(max-width:980px){
  .nav-buka{display:inline-flex}
  .sidebar{
    position:fixed;top:0;bottom:0;left:0;z-index:45;
    width:264px;transform:translateX(-100%);
    box-shadow:var(--bayang-kuat);
  }
  body.nav-terbuka .sidebar{transform:translateX(0)}
  body.nav-terbuka .nav-lapis{display:block}
  .kepala{padding:14px 16px}
  .kepala h2{font-size:17.5px}
  .kepala-sub{font-size:11.5px}
  .isi{padding:16px 16px 52px}
  .kartu-isi{padding:15px}
  .kartu-kepala{padding:13px 15px}
  .stat-grid{grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:11px}
  .stat-nilai{font-size:22px}
  .kolom-2{gap:14px}
  .toast-wadah{right:12px;left:12px;bottom:12px;max-width:none}
  .jam{display:none}
}

@media(max-width:620px){
  .grup-2{grid-template-columns:1fr}
  .kepala{flex-wrap:wrap;gap:10px}
  .kepala-kanan{width:100%;justify-content:space-between}
  .baris-aksi{align-items:stretch}
  .baris-kiri,.baris-kanan{width:100%}
  .baris-kiri .btn,.baris-kanan .btn{flex:1}
  .input-kecil{flex:1;min-width:0}
  .aksi-cepat{grid-template-columns:1fr 1fr}
  .lisensi-kotak,.masuk-kotak{padding:26px 20px;border-radius:18px}
  .modal{padding:0;border-radius:16px}
  .modal-lapis{padding:12px}
  .modal-isi{padding:16px}
  .modal-kaki{padding:13px 16px}
  .modal-kaki .btn{flex:1}
  .tabel th,.tabel td{padding:9px 11px;font-size:12px}
  .stat-grid{grid-template-columns:1fr 1fr}
  .beban-grid{grid-template-columns:1fr}
  .tab-mini{width:100%;justify-content:center}
  .tab-mini-btn{flex:1;text-align:center}
}

@media(max-width:400px){
  .stat-grid{grid-template-columns:1fr}
  .aksi-cepat{grid-template-columns:1fr}
  .btn{padding:9px 14px;font-size:13px}
}

/* Layar sentuh: hilangkan efek hover yang menempel */
@media(hover:none){
  .stat-kartu:hover,.aksi-cepat-btn:hover,.btn-utama:hover:not(:disabled){transform:none}
}

/* Hormati preferensi "kurangi gerakan" */
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms !important;transition-duration:.01ms !important}
}

/* ═══════════════════════════════════════════════════════════════
   TAMBAHAN VERSI WEB
   Kelas yang dipakai index.html / web-tambahan.js tetapi belum ada
   di bagian atas: daftar unggahan, kartu setelan, laci menu, dan
   efek pendukung. Dipisah di bawah supaya bagian utama tetap bersih.
   ═══════════════════════════════════════════════════════════════ */

/* ── Batang beban (dipakai studio.js untuk persentase) ── */
.batang-beban{height:6px;background:var(--garis);border-radius:99px;overflow:hidden;margin-top:6px}
.batang-isi{height:100%;background:var(--merah);border-radius:99px;transition:width .3s ease}

/* ── Daftar berkas yang sudah diunggah ── */
.unggah-daftar{margin-top:12px;display:flex;flex-direction:column;gap:6px;max-height:220px;overflow-y:auto}
.unggah-item{display:flex;align-items:center;gap:10px;padding:9px 11px;
  background:var(--bg-2);border:1px solid var(--garis);border-radius:10px;font-size:13px}
.unggah-nama{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
  color:var(--teks);font-weight:500}
.unggah-ukuran{color:var(--teks-3);font-size:12px;font-variant-numeric:tabular-nums;white-space:nowrap}
.unggah-item .btn{padding:5px 10px;font-size:12px}

/* Kotak unggah saat berkas ditarik ke atasnya */
.unggah-kotak.tarik{border-color:var(--merah);background:var(--merah-lembut);
  box-shadow:0 0 0 3px var(--merah-lembut)}

/* ── Kartu setelan (kartu "Tampilan" & "Keamanan Panel") ── */
.setelan-baris{display:flex;align-items:center;justify-content:space-between;gap:14px;
  padding:12px 0;border-bottom:1px solid var(--garis)}
.setelan-baris:last-child{border-bottom:none}
.setelan-judul{font-size:14px;font-weight:600;color:var(--teks);margin-bottom:3px}
.setelan-baris .petunjuk{margin:0}

/* ── Keadaan kosong ── */
.kosong-kecil{padding:14px;text-align:center;color:var(--teks-3);font-size:13px;
  border:1px dashed var(--garis);border-radius:10px}

/* ── Laci menu (layar kecil) ── */
.nav-lapis.tampak{opacity:1;visibility:visible}
.sidebar.terbuka{transform:translateX(0)}

/* ── Toast saat menghilang ── */
.toast.hilang{opacity:0;transform:translateY(-6px)}

/* ── Mode rapat (kepadatan tampilan dari Setelan) ── */
html[data-padat="rapat"] .kartu-isi{padding:12px 14px}
html[data-padat="rapat"] .stat-kartu{padding:12px 14px}
html[data-padat="rapat"] .nav-item{padding:8px 12px}
html[data-padat="rapat"] .isi{gap:12px}

/* ═══════════════════════════════════════════════════════════════
   PUSTAKA ASET — video & thumbnail (dari Google Drive)
   Berkas tampil dikelompokkan per nama channel.
   ═══════════════════════════════════════════════════════════════ */
.aset-kanal{
  border:1px solid var(--garis);border-radius:var(--r-kecil);overflow:hidden;
  margin-bottom:12px;background:var(--bg-2);
}
.aset-kanal:last-child{margin-bottom:0}
.aset-kanal-kepala{
  display:flex;align-items:center;justify-content:space-between;gap:10px;
  flex-wrap:wrap;padding:11px 14px;border-bottom:1px solid var(--garis);
  background:var(--merah-lembut);
}
.aset-kanal-nama{
  font-weight:700;font-size:13.5px;color:var(--teks);
  display:flex;align-items:center;gap:9px;min-width:0;
}
.aset-kanal-nama>span{
  font-weight:500;font-size:11.5px;color:var(--teks-3);
  white-space:nowrap;flex-shrink:0;
}
.aset-kanal-aksi{display:flex;align-items:center;gap:7px;flex-wrap:wrap}
.aset-berkas{padding:6px}
.aset-baris{
  display:flex;align-items:center;gap:10px;padding:8px 10px;
  border-radius:8px;font-size:12.5px;transition:var(--transisi);
}
.aset-baris:hover{background:var(--merah-lembut)}
.aset-ikon{flex-shrink:0;font-size:14px;width:18px;text-align:center}
.aset-nama{
  flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
  color:var(--teks);font-weight:500;
}
.aset-ukuran{
  color:var(--teks-3);font-size:11.5px;white-space:nowrap;
  font-variant-numeric:tabular-nums;flex-shrink:0;
}
.aset-baris .btn{flex-shrink:0;padding:5px 10px;font-size:12px}
.aset-baris .btn-hapus{padding:5px 9px}

/* Batang progres unduhan aset */
.progres-batang{
  height:8px;border-radius:99px;background:var(--merah-lembut);
  overflow:hidden;border:1px solid var(--garis);
}
.progres-isi{
  height:100%;width:0;border-radius:99px;background:var(--grad);
  transition:width .35s ease;
}

/* ═══════════════════════════════════════════════════════════════
   PERBAIKAN RESPONSIF
   Keluhan: saat jendela tidak dimaksimalkan (tab dipulihkan), menu
   terasa terpotong. Perbaikan: daftar menu dijamin bisa digulir,
   dirapatkan saat jendela pendek, sidebar dirampingkan saat lebar
   sedang, dan tabel lebar digeser mendatar (tidak terpotong).
   ═══════════════════════════════════════════════════════════════ */

/* 1. Menu selalu bisa digulir sampai item terakhir */
.sidebar{min-height:0}
.nav{overflow:visible}

/* 2. Jendela PENDEK → rapatkan supaya seluruh menu kelihatan tanpa gulir */
@media(max-height:800px){
  .merek{padding:13px 15px 11px}
  .merek-ikon{width:34px;height:34px;font-size:16px;border-radius:10px}
  .nav{padding:9px 9px}
  .nav-label{padding:10px 9px 5px}
  .nav-item{padding:8px 11px;margin-bottom:2px;font-size:13px}
}
@media(max-height:640px){
  .sidebar-bawah{padding:9px;gap:5px}
  .status-pil{padding:5px 9px;font-size:11px}
  .versi-kecil{display:none}
}

/* 3. Jendela SANGAT pendek (mis. jendela dipulihkan kecil): rapatkan lagi
      supaya ketujuh menu tetap muat tanpa perlu menggulir. */
@media(max-height:560px){
  .merek{padding-bottom:6px}
  .merek-teks h1{font-size:15px}
  .nav{padding:6px 8px}
  .nav-item{padding:5px 10px;margin-bottom:1px;font-size:12.4px}
  .nav-label{margin-top:6px;margin-bottom:2px;font-size:9.5px}
  .sidebar-bawah{padding-top:6px;gap:4px}
  .status-pil{padding:4px 8px;font-size:10.5px}
  .versi-kecil{display:none}
}
@media(max-height:420px){
  .nav-label{display:none}
  .nav-item{padding:4px 9px;font-size:12px}
  .status-pil{padding:3px 7px;font-size:10px}
}

/* 4. Lebar sedang (jendela dipulihkan) → sidebar lebih ramping, isi lega */
@media(min-width:981px) and (max-width:1280px){
  .sidebar{width:220px}
  .nav-item{font-size:13px;gap:9px;padding:10px 11px}
  .kepala{padding:14px 18px 12px}
  .isi{padding:16px 18px 48px}
  .kepala h2{font-size:18px}
}

/* 4. Header membungkus lebih awal → tombol tidak terpotong */
@media(max-width:980px){
  .kepala{flex-wrap:wrap;gap:10px}
  .kepala-kanan{width:100%;justify-content:flex-start;flex-wrap:wrap}
  .jam{display:none}
}

/* 5. Tabel lebar: digeser mendatar, bukan terpotong */
.tabel-gulir{width:100%;overflow-x:auto;-webkit-overflow-scrolling:touch}
.tabel-gulir .tabel{min-width:520px}

/* 6. Layar sangat kecil: jangan ada yang meluber keluar kartu */
@media(max-width:400px){
  .kartu-kepala{flex-wrap:wrap;gap:7px}
  .baris-aksi{flex-wrap:wrap;gap:9px}
  .baris-kanan{flex-wrap:wrap;gap:8px}
  .aset-ukuran{display:none}
}

/* 7. Daftar aset di HP: nama berkas boleh membungkus */
@media(max-width:620px){
  .aset-kanal-kepala{flex-direction:column;align-items:stretch}
  .aset-kanal-aksi{justify-content:flex-start}
  .aset-baris{flex-wrap:wrap}
  .aset-nama{white-space:normal;word-break:break-word;flex-basis:100%}
}

/* ═══════════════════════════════════════════════════════════════
   8. PENYESUAIAN TERAKHIR — sengaja ditaruh di AKHIR berkas supaya
      menang atas aturan berbasis LEBAR di atasnya (CSS: yang terakhir
      menang bila kekhususan sama). Ini yang membuat seluruh menu tetap
      kelihatan saat jendela dipulihkan kecil (pendek), mis. 1280×480.
      ═══════════════════════════════════════════════════════════════ */
@media(max-height:760px){
  .nav{padding:8px 9px}
  .nav-item{padding:7px 10px;margin-bottom:1px;font-size:12.8px}
  .nav-label{margin-top:7px;margin-bottom:2px}
  .merek{padding-bottom:7px}
}
@media(max-height:600px){
  .merek{padding-bottom:5px}
  .nav{padding:6px 8px}
  .nav-item{padding:5px 9px;margin-bottom:1px;font-size:12.4px}
  .nav-label{margin-top:5px;margin-bottom:1px;font-size:9.5px}
  .sidebar-bawah{padding-top:5px;gap:4px}
  .status-pil{padding:4px 8px;font-size:10.5px}
  .versi-kecil{display:none}
}
@media(max-height:500px){
  .nav{padding:5px 7px}
  .nav-item{padding:3px 8px;margin-bottom:0;font-size:12px}
  .nav-label{margin-top:4px;margin-bottom:0;font-size:9px}
  .merek{padding-bottom:3px}
  .sidebar-bawah{padding-top:4px;gap:3px}
  .status-pil{padding:3px 7px;font-size:10px}
}
@media(max-height:420px){
  .nav-label{display:none}
  .nav-item{padding:2px 8px}
  .merek-teks .merek-sub{display:none}
}


/* Pratinjau thumbnail dari server */
.thumb-preview-wrap {
  margin: 10px 0 12px;
  width: min(100%, 520px);
  aspect-ratio: 16 / 9;
  overflow: hidden;
  border-radius: 10px;
  border: 1px solid rgba(148,163,184,.25);
  background: #0b1020;
}
.thumb-preview {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

/* V17 — Live Streaming benar-benar dipisah per channel. */
.live-channel-tabs{display:flex;gap:8px;flex-wrap:wrap;padding:4px 0 2px}
.live-channel-tab{appearance:none;border:1px solid var(--garis);background:rgba(255,255,255,.025);color:var(--teks-2);border-radius:10px;padding:9px 14px;cursor:pointer;font-weight:650;transition:.15s}
.live-channel-tab:hover{border-color:var(--garis-terang);color:var(--teks)}
.live-channel-tab.aktif{background:var(--aksen);border-color:var(--aksen);color:#fff}
.live-channel-kosong{padding:8px 0}

/* V18: channel tabs are the only visible channel selector for Live Streaming. */
.live-channel-tabs{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:10px;margin-top:6px}
.live-channel-tab{min-height:44px;font-size:14px;text-align:left}
.live-channel-tab.aktif{box-shadow:0 0 0 2px rgba(255,255,255,.12) inset}


/* Scheduler multi-channel: channel dipilih dengan centang, lalu START
   hanya mengaktifkan auto live harian untuk channel yang dicentang. */
.scheduler-channel-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:8px;margin-top:7px}
.scheduler-channel-check{display:flex;align-items:center;gap:9px;min-height:42px;padding:8px 11px;border:1px solid var(--garis);border-radius:10px;background:rgba(255,255,255,.025);color:var(--teks-2);cursor:pointer;transition:.15s}
.scheduler-channel-check:hover{border-color:var(--garis-terang);color:var(--teks)}
.scheduler-channel-check input{width:17px;height:17px;accent-color:var(--merah);cursor:pointer;flex-shrink:0}
.scheduler-channel-check:has(input:checked){border-color:var(--aksen);background:rgba(34,211,238,.09);color:var(--teks)}
.scheduler-channel-aksi{display:flex;gap:9px;align-items:center;flex-wrap:wrap;margin-top:10px}
@media(max-width:700px){.scheduler-channel-grid{grid-template-columns:1fr 1fr}.scheduler-channel-aksi{gap:7px}}

/* Scheduler multi-channel ditampilkan langsung di bagian Live Streaming,
   tepat di bawah tab channel agar mudah ditemukan tanpa scroll panjang. */
.siaran-aktif-kartu{margin-top:12px;border:1px solid var(--garis-kuat);border-radius:12px;overflow:hidden;background:rgba(255,255,255,.025);box-shadow:0 4px 16px rgba(0,0,0,.10)}
.siaran-aktif-kartu .kartu-kepala{border-bottom:1px solid var(--garis);background:rgba(255,255,255,.018)}
.siaran-aktif-kartu .kartu-kepala h3{display:flex;align-items:center;gap:7px}
.siaran-aktif-kartu .kartu-isi{min-height:52px}
.auto-live-scheduler-inline{margin-top:12px;padding:13px 14px;border:1px solid var(--garis);border-radius:12px;background:rgba(255,255,255,.018)}
.auto-live-scheduler-head{gap:12px;align-items:center}
.auto-live-scheduler-help{margin-top:5px}
.auto-live-scheduler-inline .scheduler-channel-grid{margin-top:9px}
.auto-live-scheduler-inline #autoLiveDaftarPanel{margin-top:10px;padding-top:10px;border-top:1px solid var(--garis)}
@media(max-width:700px){.auto-live-scheduler-head{align-items:flex-start;flex-direction:column;gap:5px}}


/* ── Cadangan di panel Monitor (kanan) ── */
.pk-cadangan {
  border: 1px solid rgba(251, 191, 36, 0.35) !important;
  background: linear-gradient(180deg, rgba(251,191,36,.08), transparent) !important;
  box-shadow: 0 0 0 1px rgba(251,191,36,.15), 0 8px 24px rgba(0,0,0,.25);
}
.pk-cadangan .kartu-kepala h3 {
  color: #fbbf24;
}
.pk-cadangan-aksi {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.btn-cadangan-simpan,
.btn-cadangan-impor {
  width: 100%;
  font-weight: 700;
  border-radius: 10px;
  padding: 10px 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  transition: all .2s ease;
}
.btn-cadangan-simpan {
  background: linear-gradient(135deg, #f59e0b, #d97706);
  color: #0a0c10;
  border: none;
  box-shadow: 0 0 0 1px rgba(245,158,11,.4), 0 4px 16px rgba(245,158,11,.35);
  animation: cadangan-glow 2.4s ease-in-out infinite;
}
.btn-cadangan-simpan:hover {
  filter: brightness(1.08);
  transform: translateY(-1px);
}
.btn-cadangan-impor {
  background: transparent;
  color: #fbbf24;
  border: 1px solid rgba(251,191,36,.45);
}
.btn-cadangan-impor:hover {
  background: rgba(251,191,36,.1);
}
.pk-cadangan-status {
  margin-top: 8px;
  font-size: 11.5px;
  color: var(--teks-3);
  text-align: center;
  line-height: 1.4;
}
@keyframes cadangan-glow {
  0%, 100% { box-shadow: 0 0 0 1px rgba(245,158,11,.35), 0 4px 14px rgba(245,158,11,.25); }
  50% { box-shadow: 0 0 0 1px rgba(245,158,11,.7), 0 6px 22px rgba(245,158,11,.55); }
}


/* Kartu Siaran & Token di sidebar kiri (bawah Settings) */
.sidebar-bawah {
  padding: 12px 10px 16px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  border-top: 1px solid var(--garis);
  margin-top: 8px;
}
.sidebar-bawah .kartu {
  margin: 0;
  font-size: 12.5px;
}
.sidebar-bawah .kartu-kepala {
  padding: 10px 12px;
}
.sidebar-bawah .kartu-kepala h3 {
  font-size: 13px;
}
.sidebar-bawah .kartu-isi {
  padding: 10px 12px;
  max-height: 180px;
  overflow: auto;
}

/* Daftar video dari folder Google Drive */
.gdrive-list {
  margin-top: 10px;
  max-height: 280px;
  overflow-y: auto;
  border: 1px solid #555;
  border-radius: 8px;
  background: rgba(30,30,30,.85);
  padding: 8px 10px;
  display: block;
  visibility: visible;
  color: #eee;
}
.gdrive-list.sembunyi { display: none !important; }
.gdrive-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 4px;
  font-size: 13px;
  border-bottom: 1px solid rgba(255,255,255,.06);
}
.gdrive-item:last-child { border-bottom: none; }
.gdrive-item .nama { flex: 1; word-break: break-all; }
.gdrive-list .status {
  font-size: 12px;
  color: var(--teks-redup, #aaa);
  padding: 8px 4px;
  text-align: center;
}

/* ── Jam Mulai / sampai (AM/PM) ── */
.jam-rentang{
  display:flex;align-items:center;gap:10px;flex-wrap:wrap;
}
.jam-kotak{display:flex;align-items:center;gap:6px}
.jam-label{font-size:12.5px;font-weight:600;color:var(--teks-2);white-space:nowrap}
.jam-sampai{font-size:12.5px;color:var(--teks-3);margin:0 2px}
.jam-input-wrap{
  display:flex;align-items:center;gap:6px;
  background:rgba(15,18,28,.9);border:1px solid rgba(255,255,255,.12);
  border-radius:10px;padding:6px 10px;min-width:120px;
}
.jam-ikon{font-size:14px;opacity:.7}
.jam-field{
  background:transparent;border:none;color:var(--teks);font-family:inherit;
  font-size:13.5px;font-weight:500;width:70px;outline:none;padding:0;
}
.jam-field::placeholder{color:var(--teks-3)}
.jam-ap{
  background:transparent;border:none;color:var(--teks);font-family:inherit;
  font-size:13px;font-weight:650;outline:none;cursor:pointer;padding:0 2px;
  appearance:none;-webkit-appearance:none;
}
.jam-ap option{background:#1a1d28;color:#eee}