/* ============================================================
   Vinrray AI — stylesheet utama (gelap + terang)
   v3.12.0: SEMUA warna lewat variabel. Mode terang mengubah SEMUA,
   termasuk kartu login (dulu di-hardcode gelap → huruf "menghilang").
   ============================================================ */
:root {
  --bg: #070b16;
  --bg-2: #0b1020;
  --panel: #0d1322;
  --panel-2: #111a2e;
  --panel-3: #16203a;
  --text: #e8ecf8;
  --muted: #8b93b0;
  --line: #1e2a45;
  --accent: #7c5cff;
  --accent-2: #8b7cff;
  --accent-grad: linear-gradient(90deg, #7c5cff, #6d4dff);
  --ok: #22c55e;
  --bad: #ef4444;
  --warn: #f59e0b;
  --user: #5b4cf0;
  --kode-bg: #0a0f1e;
  --shadow: 0 18px 50px rgba(0,0,0,.35);
}
[data-tema="terang"] {
  --bg: #f2f5fc;
  --bg-2: #e9eef9;
  --panel: #ffffff;
  --panel-2: #eef2fb;
  --panel-3: #e3e9f7;
  --text: #16203a;
  --muted: #5b6787;
  --line: #d8e0f0;
  --accent: #6d4dff;
  --accent-2: #7c5cff;
  --user: #6d4dff;
  --kode-bg: #0d1526;
  --shadow: 0 18px 50px rgba(30,42,90,.14);
}
* { box-sizing: border-box; }
html, body {
  margin: 0; height: 100%; overflow: hidden;
  font-family: Inter, "Segoe UI", system-ui, sans-serif;
  background: var(--bg); color: var(--text);
}
a { color: inherit; text-decoration: none; }
button { font-family: inherit; }
::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-thumb { background: var(--line); border-radius: 8px; }
::-webkit-scrollbar-track { background: transparent; }

/* ================== KERANGKA ================== */
.layout { display: grid; grid-template-columns: 264px 1fr; height: 100%; overflow: hidden; }
.side {
  background: var(--panel); border-right: 1px solid var(--line);
  padding: 16px 12px; display: flex; flex-direction: column; min-height: 0;
}
.logo { display: flex; align-items: center; gap: 8px; font-weight: 800; font-size: 20px; margin: 4px 8px 14px; }
.logo i {
  width: 28px; height: 28px; border-radius: 8px;
  background: linear-gradient(135deg, #7c5cff, #4f46e5); display: inline-block;
}
.btn-new {
  width: 100%; border: 0; background: var(--accent-grad); color: #fff;
  padding: 12px; border-radius: 12px; font-weight: 800; cursor: pointer; margin-bottom: 14px;
}
.btn-new:hover { filter: brightness(1.08); }
.btn-new:disabled { opacity: .55; cursor: not-allowed; }
.nav { overflow: auto; flex: 1; min-height: 0; }
.nav .label { font-size: 11px; letter-spacing: .08em; color: var(--muted); margin: 12px 10px 6px; }
.nav a, .sesi-item {
  display: flex; align-items: center; gap: 10px; padding: 10px 12px;
  color: var(--muted); border-radius: 12px; margin-bottom: 4px; cursor: pointer;
}
.nav a.aktif, .nav a:hover, .sesi-item.aktif, .sesi-item:hover { background: var(--panel-3); color: var(--text); }
.sesi-item { justify-content: space-between; font-size: 13.5px; }
.sesi-item .hapus { visibility: hidden; }
.sesi-item:hover .hapus { visibility: visible; }
.side-status { margin-top: 10px; background: var(--panel-2); border-radius: 14px; padding: 12px; font-size: 13px; }
.side-user {
  margin-top: 10px; display: flex; gap: 10px; align-items: center;
  background: var(--panel-2); padding: 10px 12px; border-radius: 14px;
}
.side-user .ava-besar {
  width: 34px; height: 34px; border-radius: 50%; background: var(--accent);
  display: grid; place-items: center; color: #fff; font-weight: 800;
}
.side-user .muted { font-size: 11.5px; }

.isi { display: flex; flex-direction: column; min-width: 0; min-height: 0; height: 100%; overflow: hidden; }
.atas {
  display: flex; justify-content: space-between; align-items: center;
  padding: 14px 18px; border-bottom: 1px solid var(--line); flex-shrink: 0; gap: 10px;
}
.judul-wrap { display: flex; align-items: center; gap: 10px; min-width: 0; }
.judul-wrap h2 { margin: 0; font-size: 20px; }
.judul-wrap .sub { color: var(--muted); font-size: 12.5px; }
.badge { width: 36px; height: 36px; border-radius: 10px; background: var(--panel-2); display: grid; place-items: center; flex-shrink: 0; }
.atas-kanan { display: flex; gap: 8px; align-items: center; }
select, input[type="text"], input[type="password"], input[type="number"], textarea.full, textarea {
  background: var(--panel); color: var(--text); border: 1px solid var(--line);
  border-radius: 12px; padding: 10px; font-family: inherit; font-size: 14px;
}
select:focus, input:focus, textarea:focus { outline: 1px solid var(--accent); border-color: var(--accent); }
#pilih-model { max-width: 220px; }

/* ============ RONDE 3 poin 3: BAR ATAS HALAMAN CHAT DIKOSONGKAN ============
   Permintaan: di halaman chat semua isi bar atas dihapus (ikon, judul, sub,
   Auto Agent, waktu respons, status Online, badge Vision, daftar model, dan
   kontrol zoom). Yang tersisa hanya tombol mode gelap/terang, dipindah ke rel
   di sisi KANAN seperti sidebar kanan. Nama agent turun ke bawah, di samping
   kotak ketik. Halaman lain TIDAK diubah.
   CATATAN: tombol hamburger sengaja TIDAK disembunyikan, karena itu satu-satunya
   cara menutup/membuka sidebar kiri. */
body[data-hal-aktif="chat"] #ikon-hal,
body[data-hal-aktif="chat"] .judul-wrap > div:not(.badge),
body[data-hal-aktif="chat"] #auto-agent,
body[data-hal-aktif="chat"] #waktu-respons,
body[data-hal-aktif="chat"] #status-online,
body[data-hal-aktif="chat"] #badge-vision,
body[data-hal-aktif="chat"] #pilih-model,
body[data-hal-aktif="chat"] #zoom-ctrl,
body[data-hal-aktif="chat"] .atas-kanan > button.icon { display: none !important; }
body[data-hal-aktif="chat"] .atas {
  padding-top: 6px; padding-bottom: 6px; min-height: 0;
  border-bottom: 1px solid transparent; background: transparent; backdrop-filter: none;
}
body[data-hal-aktif="chat"] .atas-kanan { gap: 0; }
body[data-hal-aktif="chat"] .chat { padding-right: 56px; }

/* rel kanan: position fixed tetap akurat walau body memakai CSS zoom */
.rail-kanan {
  position: fixed; right: 0; top: 50%; transform: translateY(-50%);
  display: none; flex-direction: column; gap: 8px; padding: 8px 7px; z-index: 40;
  background: var(--glass, var(--panel)); border: 1px solid var(--glass-line, var(--line));
  border-right: 0; border-radius: 14px 0 0 14px; backdrop-filter: blur(12px);
  box-shadow: -6px 0 20px rgba(0, 0, 0, .18);
}
.rail-kanan .icon { width: 36px; height: 36px; display: grid; place-items: center; font-size: 16px; }

/* pemilih agent di composer bawah, meniru ukuran .pil-mode */
.pil-agen-bawah {
  border-radius: 999px; padding: 8px 12px; font-size: 12px; cursor: pointer;
  background: var(--panel-2); border: 1px solid var(--line); color: var(--text);
  max-width: 190px; flex: 0 0 auto; align-self: center;
}
.pil-agen-bawah:hover { border-color: var(--accent); }
.pil-agen-bawah.terkunci { border-color: var(--accent); color: var(--accent); cursor: not-allowed; }

@media (max-width: 900px) {
  body[data-hal-aktif="chat"] .chat { padding-right: 48px; }
  .rail-kanan { padding: 6px 5px; border-radius: 12px 0 0 12px; }
  .rail-kanan .icon { width: 32px; height: 32px; font-size: 15px; }
  .pil-agen-bawah { max-width: 116px; padding: 7px 9px; font-size: 11.5px; }
}

/* ================== CHAT ================== */
.chat {
  flex: 1; min-height: 0; overflow-y: auto; padding: 18px 22px;
  display: flex; flex-direction: column; gap: 14px;
}
.baris { display: flex; gap: 10px; align-items: flex-end; }
.baris.user { justify-content: flex-end; }
.ava {
  width: 34px; height: 34px; border-radius: 50%; background: var(--panel-3);
  display: grid; place-items: center; flex-shrink: 0; font-size: 13px; font-weight: 800;
}
.bubble {
  max-width: min(72%, 760px); padding: 12px 14px; border-radius: 16px;
  line-height: 1.55; white-space: pre-wrap; word-break: break-word;
}
.bubble.user { background: var(--user); color: #fff; }
.bubble.ai { background: var(--panel); border: 1px solid var(--line); }
.bubble.think { display: flex; align-items: center; gap: 8px; color: var(--muted); }
.otak { width: 12px; height: 12px; border-radius: 50%; background: var(--accent); animation: denyut 1s infinite ease-in-out; }
.titik i { display: inline-block; width: 6px; height: 6px; margin: 0 2px; border-radius: 50%; background: var(--muted); animation: loncat .9s infinite ease-in-out; }
.titik i:nth-child(2) { animation-delay: .15s; }
.titik i:nth-child(3) { animation-delay: .3s; }
@keyframes denyut { 50% { transform: scale(1.35); opacity: .5; } }
@keyframes loncat { 50% { transform: translateY(-4px); } }
.lampiran a { display: inline-block; margin-top: 8px; color: var(--accent-2); }
.lampiran img { max-width: 280px; border-radius: 12px; display: block; margin-top: 8px; }
.lampiran .grid-gbr { display: grid; grid-template-columns: repeat(2, minmax(0, 240px)); gap: 8px; margin-top: 8px; }
.lampiran .grid-gbr img { max-width: 100%; margin-top: 0; }

/* RONDE 6 poin 6: kolom ketik dibuat lega. Pemilih model TIDAK lagi berdesakan
   satu baris dengan kotak ketik, tapi turun ke barisnya sendiri di bawah. */
.composer {
  flex-shrink: 0; display: flex; flex-wrap: wrap; gap: 8px; align-items: center;
  padding: 12px 16px 10px; border-top: 1px solid var(--line); background: var(--bg);
}
.komp-bawah {
  flex: 1 0 100%; display: flex; align-items: center; gap: 8px;
  padding: 2px 0 0; order: 9;
}
.komp-bawah .pil-agen-bawah { max-width: 260px; align-self: auto; }
/* RONDE 6 poin 6b: tombol lampiran ikut ke baris bawah supaya kotak ketik
   memakai hampir seluruh lebar baris atas (diukur: 65% -> 84% di HP). */
.komp-bawah .icon { flex: 0 0 auto; }
.composer .kotak { flex: 1 1 auto; min-width: 0; }
.composer .kotak {
  flex: 1; display: flex; align-items: center; background: var(--panel);
  border: 1px solid var(--line); border-radius: 22px; padding: 4px 8px;
}
.composer input { flex: 1; border: 0; background: transparent; color: var(--text); padding: 10px; outline: none; }
.icon {
  width: 42px; height: 42px; border-radius: 12px; border: 1px solid var(--line);
  background: transparent; color: var(--text); cursor: pointer; font-size: 18px;
  display: inline-grid; place-items: center; flex-shrink: 0;
}
.icon:hover { background: var(--panel-2); }
.icon.kirim { background: var(--accent); color: #fff; border: 0; }
.icon.batal { background: var(--bad); color: #fff; border: 0; width: auto; padding: 0 14px; font-size: 14px; }
.menu-plus {
  position: absolute; bottom: 78px; left: 290px; background: var(--panel);
  border: 1px solid var(--line); border-radius: 12px; padding: 8px; display: none; z-index: 5;
  box-shadow: var(--shadow);
}
.menu-plus.buka { display: block; }
.tip { text-align: center; color: var(--muted); font-size: 12px; padding: 0 18px 12px; }

/* ================== KARTU & UTIL ================== */
.kartu { background: var(--panel-2); padding: 14px; border-radius: 14px; margin-bottom: 10px; border: 1px solid var(--line); }
.kartu-panel { background: var(--panel); border: 1px solid var(--line); border-radius: 16px; }
.muted { color: var(--muted); }
.status-ok { color: var(--ok); }
.status-bad { color: var(--bad); }
.status-warn { color: var(--warn); }
.pil { display: inline-block; padding: 2px 10px; border-radius: 999px; font-size: 11.5px; font-weight: 700; }
.pil.ok { background: rgba(34,197,94,.15); color: var(--ok); }
.pil.bad { background: rgba(239,68,68,.15); color: var(--bad); }
.pil.warn { background: rgba(245,158,11,.15); color: var(--warn); }
.pil.info { background: rgba(124,92,255,.16); color: var(--accent-2); }
.btn {
  border: 0; background: var(--accent-grad); color: #fff; font-weight: 700;
  padding: 10px 16px; border-radius: 12px; cursor: pointer; font-size: 14px;
}
.btn:hover { filter: brightness(1.08); }
.btn:disabled { opacity: .55; cursor: not-allowed; }
.btn.gelap, .btn-ghost {
  background: var(--panel); color: var(--text); border: 1px solid var(--line);
}
.btn-ghost:hover { background: var(--panel-2); }
.btn-marah { background: var(--bad); }
.bar { display: flex; justify-content: space-between; align-items: center; margin-bottom: 12px; }

/* ================== HOME ================== */
.beranda { overflow: auto; padding: 26px; height: 100%; }
.beranda h1 { margin: 0 0 4px; font-size: 26px; }
.grid-quick { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 12px; margin: 18px 0; }
.quick {
  background: var(--panel); border: 1px solid var(--line); border-radius: 16px;
  padding: 16px; cursor: pointer; transition: transform .12s ease, border-color .12s;
}
.quick:hover { transform: translateY(-2px); border-color: var(--accent); }
.quick .q-ikon {
  width: 38px; height: 38px; border-radius: 12px; display: grid; place-items: center;
  background: var(--panel-3); font-size: 18px; margin-bottom: 10px;
}
.quick b { display: block; margin-bottom: 4px; }
.quick .muted { font-size: 12.5px; }
.agen-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 12px; }
.agen { background: var(--panel); border: 1px solid var(--line); border-radius: 14px; padding: 12px 14px; }
.agen .dot { color: var(--ok); }
.histori-item { display: flex; justify-content: space-between; padding: 10px 12px; border-radius: 10px; cursor: pointer; }
.histori-item:hover { background: var(--panel-2); }

/* ================== HALAMAN CODING ================== */
.hal-coding { display: grid; grid-template-columns: minmax(380px, 1fr) minmax(420px, 1.15fr); height: 100%; overflow: hidden; }
.koding-kiri { display: flex; flex-direction: column; min-height: 0; border-right: 1px solid var(--line); }
.koding-kanan { display: flex; flex-direction: column; min-height: 0; min-width: 0; }
.langkah-kartu { margin: 12px 16px; }
.langkah-judul { font-weight: 800; font-size: 13px; letter-spacing: .06em; color: var(--muted); margin-bottom: 8px; }
.langkah { display: flex; align-items: center; gap: 10px; padding: 6px 4px; font-size: 13.5px; color: var(--muted); }
.langkah .ikon { width: 20px; text-align: center; }
.langkah.selesai { color: var(--text); }
.langkah.selesai .ikon { color: var(--ok); }
.langkah.berjalan { color: var(--text); font-weight: 700; }
.langkah.berjalan .ikon { color: var(--accent); animation: denyut 1s infinite; }
.langkah.gagal { color: var(--bad); }
.progressbar { height: 6px; background: var(--panel-3); border-radius: 6px; overflow: hidden; margin-top: 10px; }
.progressbar i { display: block; height: 100%; background: var(--accent-grad); border-radius: 6px; transition: width .4s ease; }
.tab-bar { display: flex; gap: 4px; padding: 10px 14px 0; border-bottom: 1px solid var(--line); flex-shrink: 0; }
.tab-bar button {
  border: 0; background: transparent; color: var(--muted); padding: 8px 14px;
  border-radius: 10px 10px 0 0; cursor: pointer; font-size: 13.5px; font-weight: 600;
}
.tab-bar button.aktif { background: var(--panel-2); color: var(--text); }
.kode-wrap { flex: 1; min-height: 0; display: grid; grid-template-columns: 190px 1fr; overflow: hidden; }
.pohon { overflow: auto; border-right: 1px solid var(--line); padding: 10px; font-size: 13px; }
.pohon .folder { color: var(--muted); font-weight: 700; margin: 4px 0; }
.pohon .file { padding: 3px 6px; border-radius: 8px; cursor: pointer; white-space: nowrap; }
.pohon .file:hover { background: var(--panel-2); }
.pohon .file.aktif { background: var(--panel-3); color: var(--accent-2); }
.kode { overflow: auto; background: var(--kode-bg); padding: 14px 16px; }
.kode pre { margin: 0; font-family: "JetBrains Mono", Consolas, monospace; font-size: 12.8px; line-height: 1.65; color: #dbe4ff; }
.kode .kw { color: #c792ea; }
.kode .str { color: #a5e8a1; }
.kode .kom { color: #5c6a8c; font-style: italic; }
.kode .num { color: #f5a97f; }
.terminal { overflow: auto; background: var(--kode-bg); padding: 14px 16px; font-family: Consolas, monospace; font-size: 12.8px; line-height: 1.7; color: #b7c4e8; flex: 1; }
.terminal .ok { color: #4ade80; }
.terminal .err { color: #f87171; }
.terminal .dim { color: #5c6a8c; }
.readme-view { overflow: auto; padding: 18px; flex: 1; white-space: pre-wrap; font-size: 14px; line-height: 1.7; }
.aksi-bawah { display: flex; gap: 10px; padding: 12px 16px; border-top: 1px solid var(--line); flex-shrink: 0; flex-wrap: wrap; }

/* ================== HALAMAN MAKALAH ================== */
.hal-makalah { display: flex; flex-direction: column; height: 100%; overflow: hidden; }
.stepper { display: flex; gap: 4px; padding: 14px 18px 10px; border-bottom: 1px solid var(--line); overflow-x: auto; flex-shrink: 0; }
.step { display: flex; flex-direction: column; align-items: center; gap: 6px; min-width: 96px; flex: 1; text-align: center; }
.step .bulat {
  width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center;
  background: var(--panel-2); border: 1px solid var(--line); color: var(--muted); font-size: 15px;
}
.step .nama { font-size: 11px; color: var(--muted); }
.step .st { font-size: 10.5px; }
.step.selesai .bulat { background: rgba(34,197,94,.15); border-color: var(--ok); color: var(--ok); }
.step.berjalan .bulat { background: var(--accent); border-color: var(--accent); color: #fff; animation: denyut 1.2s infinite; }
.step.selesai .nama, .step.berjalan .nama { color: var(--text); }
.makalah-body { flex: 1; min-height: 0; display: grid; grid-template-columns: minmax(340px, 1fr) minmax(400px, 1.2fr); overflow: hidden; }
.makalah-kiri { overflow-y: auto; padding: 16px; border-right: 1px solid var(--line); }
.makalah-kanan { display: flex; flex-direction: column; min-height: 0; min-width: 0; }
.lingkaran-wrap { display: flex; align-items: center; gap: 18px; }
.lingkaran { position: relative; width: 108px; height: 108px; flex-shrink: 0; }
.lingkaran svg { transform: rotate(-90deg); }
.lingkaran .bgc { stroke: var(--panel-3); }
.lingkaran .fgc { stroke: url(#gradA); stroke-linecap: round; transition: stroke-dashoffset .5s ease; }
.lingkaran .angka { position: absolute; inset: 0; display: grid; place-items: center; font-size: 20px; font-weight: 800; }
.bab-item { display: flex; justify-content: space-between; align-items: center; padding: 8px 10px; border-radius: 10px; font-size: 13.5px; margin-bottom: 4px; background: var(--panel); border: 1px solid var(--line); }
.log-aktivitas { font-size: 12.5px; }
.log-aktivitas div { display: flex; gap: 8px; padding: 4px 0; color: var(--muted); }
.log-aktivitas .t { color: var(--accent-2); flex-shrink: 0; }
.dok-judul { font-size: 17px; font-weight: 800; margin-bottom: 6px; }
.dok-meta { color: var(--muted); font-size: 12.5px; margin-bottom: 12px; }
.dok-isi { overflow-y: auto; flex: 1; padding: 16px 18px; white-space: pre-wrap; line-height: 1.75; font-size: 13.8px; }
.dok-isi h { display: block; font-weight: 800; margin: 12px 0 4px; }
.outline-item { display: flex; justify-content: space-between; padding: 8px 10px; border-radius: 8px; font-size: 13.5px; cursor: default; }
.outline-item:hover { background: var(--panel-2); }
.ref-item { font-size: 12.8px; padding: 8px 10px; border-bottom: 1px solid var(--line); line-height: 1.5; word-break: break-word; }
.ref-item a { color: var(--accent-2); }

/* ================== HALAMAN GAMBAR ================== */
.hal-gambar { display: grid; grid-template-columns: 320px 1fr; height: 100%; overflow: hidden; }
.gambar-kiri { overflow-y: auto; padding: 16px; border-right: 1px solid var(--line); }
.gambar-kiri label { display: block; font-size: 12.5px; color: var(--muted); margin: 12px 0 6px; }
.gambar-kiri textarea { width: 100%; min-height: 110px; resize: vertical; }
.gambar-kiri select { width: 100%; }
.pil-jumlah { display: flex; gap: 6px; }
.pil-jumlah button {
  flex: 1; padding: 8px 0; border-radius: 10px; border: 1px solid var(--line);
  background: var(--panel); color: var(--muted); cursor: pointer; font-weight: 700;
}
.pil-jumlah button.aktif { background: var(--accent); color: #fff; border-color: var(--accent); }
.gambar-kanan { overflow-y: auto; padding: 16px; }
.grid-hasil { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 12px; }
.hasil-gbr { position: relative; border-radius: 14px; overflow: hidden; border: 1px solid var(--line); background: var(--panel); }
.hasil-gbr img { width: 100%; display: block; }
.hasil-gbr a {
  position: absolute; top: 8px; right: 8px; background: rgba(0,0,0,.55); color: #fff;
  border-radius: 10px; padding: 6px 10px; font-size: 12px;
}
.hasil-gbr .muat { aspect-ratio: 1; display: grid; place-items: center; color: var(--muted); }
.riwayat-gbr { display: flex; gap: 8px; overflow-x: auto; padding-top: 12px; }
.riwayat-gbr img { height: 64px; width: 64px; object-fit: cover; border-radius: 10px; border: 1px solid var(--line); }

/* ================== DETECTOR ================== */
.hal-detektor { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; padding: 18px; overflow: auto; height: 100%; }
.detektor-kiri textarea { width: 100%; min-height: 300px; resize: vertical; }
.donut-wrap { display: grid; place-items: center; padding: 10px 0 16px; }
.donut { position: relative; width: 170px; height: 170px; }
.donut svg { transform: rotate(-90deg); }
.donut .angka { position: absolute; inset: 0; display: grid; place-items: center; text-align: center; }
.donut .angka b { font-size: 34px; display: block; }
.donut .angka span { font-size: 11.5px; color: var(--muted); }
.bar-det { margin: 8px 0; }
.bar-det .lbl { display: flex; justify-content: space-between; font-size: 12.5px; margin-bottom: 4px; }
.bar-det .track { height: 8px; background: var(--panel-3); border-radius: 6px; overflow: hidden; }
.bar-det .fill { height: 100%; background: var(--accent-grad); border-radius: 6px; }
.laporan-det { white-space: pre-wrap; font-size: 12.8px; line-height: 1.6; color: var(--muted); }

/* ================== STATUS ================== */
.hal-status { overflow: auto; padding: 18px; }
.tabel-model { width: 100%; border-collapse: collapse; font-size: 13px; }
.tabel-model th, .tabel-model td { text-align: left; padding: 8px 10px; border-bottom: 1px solid var(--line); }
.tabel-model th { color: var(--muted); font-size: 11.5px; letter-spacing: .05em; }

/* ================== OWNER DASHBOARD ================== */
.dash { overflow: auto; padding: 18px; height: 100%; }
.dash-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 12px; margin-bottom: 14px; }
.stat { background: var(--panel); border: 1px solid var(--line); border-radius: 16px; padding: 14px; }
.stat b { display: block; font-size: 22px; margin-top: 6px; }
.stat .naik { color: var(--ok); font-size: 11.5px; }
.dash-2 { display: grid; grid-template-columns: 1.6fr 1fr; gap: 12px; }
.chart { height: 160px; display: flex; align-items: flex-end; gap: 8px; padding-top: 20px; }
.chart i { flex: 1; background: linear-gradient(180deg, #8b7cff, #4f46e5); border-radius: 8px 8px 0 0; min-height: 8px; }
.user-row { display: flex; justify-content: space-between; align-items: center; gap: 8px; padding: 8px 10px; border-bottom: 1px solid var(--line); font-size: 13px; }
.user-row .aksi { display: flex; gap: 6px; }
.user-row .icon { width: auto; height: 30px; font-size: 12px; padding: 0 10px; }

/* ================== LOGIN ================== */
.login-body {
  min-height: 100%; overflow: auto; display: grid; place-items: center;
  background: radial-gradient(1200px 600px at 20% 10%, #2a1f6e 0%, var(--bg) 55%);
}
[data-tema="terang"] .login-body {
  background: radial-gradient(1200px 600px at 20% 10%, #dcd4ff 0%, var(--bg) 60%);
}
.login-card {
  width: min(440px, 92vw); background: var(--panel); border: 1px solid var(--line);
  border-radius: 24px; padding: 28px 26px 20px; box-shadow: var(--shadow); color: var(--text);
}
.login-top { display: flex; justify-content: space-between; align-items: center; }
.tema-switch { display: flex; gap: 6px; background: var(--panel-2); border-radius: 20px; padding: 4px; }
.tema-switch button { border: 0; background: transparent; color: var(--muted); padding: 6px 10px; border-radius: 16px; cursor: pointer; }
.tema-switch .on { background: var(--panel-3); color: var(--text); }
.login-hero { text-align: center; margin: 18px 0 16px; }
.login-hero h1 { margin: 8px 0 6px; font-size: 26px; color: var(--text); }
.login-hero span { color: var(--accent-2); }
.login-hero p { color: var(--muted); font-size: 13.5px; }
.wa-icon { width: 56px; height: 56px; border-radius: 50%; margin: 0 auto; display: grid; place-items: center; background: var(--panel-3); font-size: 26px; }
.login-card label { display: block; font-size: 13px; color: var(--muted); margin: 10px 0 4px; }
.nomor-row, .pass-row { display: flex; gap: 8px; margin: 6px 0 12px; }
.nomor-row select { width: 88px; }
.nomor-row input, .pass-row input { flex: 1; }
.pass-row { position: relative; }
.pass-row .eye { position: absolute; right: 8px; top: 8px; border: 0; background: transparent; color: var(--muted); cursor: pointer; }
.btn-masuk {
  width: 100%; border: 0; color: #fff; font-weight: 800; padding: 12px;
  border-radius: 14px; cursor: pointer; background: linear-gradient(90deg, #8b5cf6, #4f7cff);
}
.login-aksi { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 8px; margin-top: 10px; }
.login-aksi button {
  border: 1px solid var(--line); background: transparent; color: var(--text);
  border-radius: 12px; padding: 10px 6px; cursor: pointer; font-size: 13px;
}
.login-aksi button:hover { background: var(--panel-2); }
.login-aksi button:disabled { opacity: .5; cursor: not-allowed; }
.login-aman { text-align: center; color: var(--muted); font-size: 12px; margin-top: 16px; }
#status { text-align: center; min-height: 18px; }

/* ================== RESPONSIF ================== */
.hapus { background: transparent; border: 0; color: var(--muted); cursor: pointer; }
.hamburger { display: none; }
.overlay { display: none; }
@media (max-width: 1100px) {
  .hal-coding, .makalah-body, .hal-gambar, .hal-detektor { grid-template-columns: 1fr; overflow-y: auto; }
  .koding-kiri, .makalah-kiri, .gambar-kiri { border-right: 0; border-bottom: 1px solid var(--line); }
  .kode-wrap { min-height: 420px; }
}
@media (max-width: 900px) {
  .hamburger { display: grid; place-items: center; }
  .side {
    display: flex; position: fixed; left: 0; top: 0; bottom: 0;
    width: 82vw; max-width: 320px; z-index: 30;
    transform: translateX(-105%); transition: transform .2s ease;
  }
  .side.buka { transform: translateX(0); }
  .overlay.buka { display: block; position: fixed; inset: 0; background: rgba(0,0,0,.45); z-index: 20; }
  .layout { grid-template-columns: 1fr; }
  .dash-grid, .dash-2 { grid-template-columns: 1fr; }
  .menu-plus { left: 16px; }
  #pilih-model { max-width: 140px; }
}

/* ===== v3.12.1 ===== */
/* poin 2: area teks detector diperbesar */
#teks-det { min-height: 320px !important; width: 100%; resize: vertical; font-size: 14px; line-height: 1.55; }
.detektor-kiri textarea, .hal-detektor textarea { min-height: 320px; }
/* poin 4: composer pakai textarea — Enter menurunkan baris, bukan mengirim */
.composer .kotak textarea { width: 100%; min-height: 52px; max-height: 190px; resize: none; font: inherit; font-size: 14px; color: var(--text); background: transparent; border: 0; outline: 0; padding: 6px 2px; line-height: 1.45; display: block; }
/* poin 5: tombol mini (hapus key dll) di kartu owner */
.btn-mini { border: 1px solid var(--line); background: var(--panel-3); color: var(--text); border-radius: 8px; padding: 4px 10px; font-size: 11.5px; cursor: pointer; }
.btn-mini.bad { color: #ff7a8a; border-color: #ff7a8a55; }
.btn-mini:hover { filter: brightness(1.15); }
.input-key { flex: 1; background: var(--bg); border: 1px solid var(--line); border-radius: 10px; color: var(--text); padding: 9px 12px; font-size: 13px; }

/* ===== v3.12.2 — layout 3 kolom, panel kanan, agent live, responsif HP ===== */
.layout.dengan-panel { grid-template-columns: 264px 1fr 320px; }
.panel-kanan { display: none; flex-direction: column; gap: 10px; background: var(--panel); border-left: 1px solid var(--line); padding: 14px; overflow-y: auto; min-height: 0; }
.panel-kanan.buka { display: flex; }
.pk-head { display: flex; justify-content: space-between; align-items: center; }
.pk-judul { font-weight: 700; font-size: 13px; margin-bottom: 8px; display: flex; justify-content: space-between; align-items: center; }
.pk-row { display: flex; align-items: center; gap: 8px; font-size: 12.5px; margin: 4px 0; }
.pk-link { color: var(--accent-2); font-size: 12px; text-decoration: none; display: inline-block; margin-top: 6px; }
.pk-item { display: block; color: var(--text); text-decoration: none; font-size: 12.5px; padding: 7px 8px; border-radius: 8px; }
.pk-item:hover { background: var(--panel-2); }
.dot-mini { width: 8px; height: 8px; border-radius: 50%; display: inline-block; }
.dot-mini.ok { background: #4ade80; } .dot-mini.bad { background: #ff7a8a; }
.quick-mini-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.quick-mini-grid button { background: var(--panel-2); border: 1px solid var(--line); color: var(--text); border-radius: 10px; padding: 10px 6px; font-size: 12px; cursor: pointer; text-align: center; }
.quick-mini-grid button:hover { border-color: var(--accent); }
.pakai-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.pakai-grid > div { background: var(--panel-2); border-radius: 10px; padding: 10px; font-size: 11.5px; color: var(--muted); }
.pakai-grid b { display: block; font-size: 17px; color: var(--text); margin-top: 2px; }
/* pills top bar */
.pil-agen, .pil-respons, .pil-online { display: inline-flex; align-items: center; gap: 6px; background: var(--panel-2); border: 1px solid var(--line); color: var(--text); border-radius: 999px; padding: 7px 12px; font-size: 12px; white-space: nowrap; }
.pil-agen { cursor: pointer; } .pil-agen b { color: #4ade80; }
.pil-respons b { color: var(--accent-2); }
/* pill di composer */
.pil-mode { display: inline-flex; align-items: center; gap: 6px; background: var(--panel-2); border: 1px solid var(--line); color: var(--text); border-radius: 999px; padding: 8px 12px; font-size: 12px; cursor: pointer; white-space: nowrap; }
.pil-mode b { color: #4ade80; }
/* kolom chat + kartu agent live */
.chat-col { flex-direction: column; flex: 1; min-height: 0; overflow: hidden; }
.chat-col .chat { flex: 1; }
.agen-live { padding: 0 18px 10px; }
.agen-live-kartu { background: var(--panel); border: 1px solid var(--line); border-radius: 14px; padding: 12px 14px; }
.agen-live-row { display: flex; align-items: center; gap: 6px; overflow-x: auto; padding-bottom: 2px; }
.al-step { display: flex; align-items: center; gap: 6px; font-size: 12px; white-space: nowrap; color: var(--muted); }
.al-step i { font-style: normal; width: 20px; height: 20px; border-radius: 50%; display: grid; place-items: center; font-size: 11px; background: var(--panel-2); border: 1px solid var(--line); }
.al-step.selesai { color: var(--text); } .al-step.selesai i { background: #14532d; color: #4ade80; border-color: #14532d; }
.al-step.berjalan { color: var(--text); } .al-step.berjalan i { background: var(--accent); color: #fff; border-color: var(--accent); animation: denyut 1s infinite; }
.al-step.gagal i { background: #5b1d26; color: #ff7a8a; border-color: #5b1d26; }
.al-garis { flex: 0 0 22px; height: 2px; background: var(--line); border-radius: 2px; }
@keyframes denyut { 50% { opacity: 0.55; } }
/* meta + aksi pesan AI */
.msg-meta { display: flex; gap: 6px; font-size: 11px; color: var(--muted); margin-top: 8px; flex-wrap: wrap; }
.msg-aksi { display: flex; gap: 4px; margin-top: 6px; }
.msg-aksi button { background: transparent; border: 1px solid var(--line); color: var(--muted); border-radius: 8px; padding: 3px 8px; font-size: 12px; cursor: pointer; }
.msg-aksi button:hover, .msg-aksi button.on { color: var(--text); border-color: var(--accent); }
/* footer */
.footer { text-align: center; font-size: 11.5px; color: var(--muted); padding: 8px; border-top: 1px solid var(--line); background: var(--panel); }
.overlay-kanan { display: none; }
/* ===== responsif HP (poin 4) — potrait & landscape ===== */
@media (max-width: 1100px) {
  .layout.dengan-panel { grid-template-columns: 264px 1fr; }
  .panel-kanan { position: fixed; top: 0; right: 0; bottom: 0; width: min(330px, 88vw); z-index: 46; transform: translateX(105%); transition: transform 0.25s ease; box-shadow: -16px 0 44px #0009; display: flex; }
  .panel-kanan.buka { transform: translateX(0); }
  .overlay-kanan.tampil { display: block; position: fixed; inset: 0; background: #0007; z-index: 45; }
}
@media (max-width: 900px) {
  .pil-respons { display: none; }
  .pil-online span:last-child { display: none; }
  .pil-agen { padding: 7px 10px; }
  .atas h2 { font-size: 17px; }
  .chat, .chat-col .chat { padding: 10px 12px; }
  .bubble { max-width: 92%; font-size: 14px; }
  .composer { padding: 8px 10px; gap: 6px; flex-wrap: wrap; }
  .pil-mode { order: 5; width: 100%; justify-content: center; }
}
@media (max-width: 900px) and (orientation: landscape) {
  .atas { padding: 6px 12px; }
  .atas h2 { font-size: 15px; }
  .sub-hal { display: none; }
  .chat { padding: 6px 12px; }
  .composer .kotak textarea { min-height: 36px; }
}

/* ===== v3.12.4 — markdown chat (poin 4) + mobile lega semua halaman (poin 2,3,5) ===== */
.bubble .md-p { margin: 2px 0; }
.bubble .md-h { font-weight: 700; margin: 8px 0 4px; }
.bubble .md-h1 { font-size: 16px; } .bubble .md-h2 { font-size: 15px; } .bubble .md-h3 { font-size: 14px; }
.bubble ul, .bubble ol { margin: 6px 0; padding-left: 22px; display: block; }
.bubble li { margin: 3px 0; display: list-item; }
.bubble blockquote { border-left: 3px solid var(--accent); padding: 4px 10px; margin: 6px 0; color: var(--muted); border-radius: 0 8px 8px 0; background: var(--panel-2); }
.bubble pre { background: var(--panel-2); border: 1px solid var(--line); border-radius: 10px; padding: 10px; overflow-x: auto; font-size: 12.5px; margin: 6px 0; white-space: pre-wrap; }
.bubble code { background: var(--panel-2); border-radius: 6px; padding: 1px 6px; font-size: 12.5px; }
.bubble b { color: var(--text); }

/* ---- mobile (≤900px): lega, tidak dempet, semua halaman ---- */
@media (max-width: 900px) {
  .atas { flex-wrap: wrap; row-gap: 8px; padding: 10px 14px; }
  .atas-kanan { flex-wrap: wrap; gap: 6px; width: 100%; justify-content: flex-start; }
  #pilih-model { flex: 1; min-width: 130px; max-width: none; }
  .pil-agen, .pil-respons, .pil-online { padding: 6px 10px; font-size: 11.5px; }
  .beranda, .hal-status, .hal-detektor { padding: 14px; }
  .grid-quick { grid-template-columns: 1fr 1fr; gap: 10px; }
  .kartu { padding: 16px; }
  .bubble { max-width: 94%; padding: 12px 14px; font-size: 14.5px; line-height: 1.55; }
  .msg-aksi button { padding: 5px 10px; font-size: 13px; }
  .agen-live-row { flex-wrap: wrap; }
  /* composer: satu baris rapi [+] [textarea] [↑]; pill agen turun full-width */
  .composer { display: flex; flex-wrap: wrap; gap: 8px; padding: 10px 12px; align-items: flex-end; }
  .composer .kotak { flex: 1; min-width: 0; }
  .pil-mode { order: 6; width: 100%; justify-content: center; padding: 8px; }
  .tip { padding: 0 14px 10px !important; }
  /* makalah mobile (poin 5): stepper scroll horizontal, kartu lega, composer grid */
  .stepper { overflow-x: auto; display: flex; gap: 8px; padding: 10px 12px; -webkit-overflow-scrolling: touch; }
  .makalah-body { display: flex; flex-direction: column; gap: 12px; padding: 12px; overflow-y: auto; }
  .lingkaran-wrap { gap: 14px; align-items: center; }
  .hal-makalah .composer { display: grid; grid-template-columns: 1fr 1fr; align-items: stretch; }
  .hal-makalah .composer .kotak { grid-column: 1 / -1; }
  .hal-makalah .composer select { max-width: none; width: 100%; }
  .hal-makalah .composer .icon.kirim, .hal-makalah .composer .icon.batal { grid-column: 1 / -1; width: 100%; height: 40px; }
  /* gambar + detector + coding lega */
  .hal-gambar, .hal-detektor, .hal-coding { gap: 14px; padding: 14px; }
  .gambar-kiri .kartu, .hal-detektor .kartu { padding: 16px; }
  .hal-gambar { grid-template-columns: 1fr; overflow-y: auto; } /* poin 1 */
  .tab-bar { flex-wrap: wrap; gap: 6px; }
}
/* landscape HP: padatkan vertikal */
@media (max-width: 900px) and (orientation: landscape) {
  .stepper { padding: 6px 12px; }
  .bubble { max-width: 88%; }
}

/* ===== v3.13.0 — logo, chip lampiran, riwayat, badge vision ===== */
.logo-img { width: 30px; height: 30px; border-radius: 8px; object-fit: cover; }
.ava-img { width: 100%; height: 100%; object-fit: cover; border-radius: 50%; }
.chip-file { display: inline-flex; align-items: center; gap: 6px; background: var(--panel-2); border: 1px solid var(--line); border-radius: 999px; padding: 5px 8px 5px 12px; font-size: 12px; margin: 2px 4px 2px 0; }
.chip-x { background: transparent; border: 0; color: var(--muted); cursor: pointer; font-size: 12px; padding: 2px 5px; border-radius: 50%; }
.chip-x:hover { color: #ff7a8a; background: #5b1d26; }
.badge-vision { display: inline-flex; align-items: center; background: var(--panel-2); border: 1px solid var(--accent); color: var(--accent-2); border-radius: 999px; padding: 6px 10px; font-size: 11.5px; white-space: nowrap; }
.riwayat-kartu { margin: 0 14px 12px; }
.riwayat-full { grid-column: 1 / -1; margin: 12px 14px 0; }
.makalah-body { overflow-y: auto; align-content: start; }
.riwayat-item { display: flex; justify-content: space-between; gap: 12px; padding: 12px 4px; border-bottom: 1px solid var(--line); }
.riwayat-item:last-child { border-bottom: 0; }
.riwayat-isi b { font-size: 13.5px; }
.riwayat-isi .muted { font-size: 11.5px; margin-top: 2px; }
.riwayat-gambar { display: flex; gap: 6px; margin-top: 8px; flex-wrap: wrap; }
.riwayat-gambar img { width: 84px; height: 84px; object-fit: cover; border-radius: 10px; border: 1px solid var(--line); }
.riwayat-files code { background: var(--panel-2); border-radius: 6px; padding: 2px 7px; font-size: 11.5px; }
.riwayat-jelas { font-size: 12.5px; color: var(--muted); margin-top: 6px; line-height: 1.5; }
.riwayat-aksi { display: flex; gap: 6px; align-items: flex-start; }
.btn-mini { width: auto; padding: 6px 12px; font-size: 12px; text-decoration: none; display: inline-block; }
.badge-status { font-size: 10.5px; border-radius: 999px; padding: 2px 8px; background: var(--panel-2); border: 1px solid var(--line); margin-left: 6px; }
.badge-status.ok { color: #4ade80; border-color: #14532d; }
@media (max-width: 900px) {
  .riwayat-item { flex-direction: column; }
  .riwayat-gambar img { width: 72px; height: 72px; }
  .riwayat-full { margin: 10px 0 0; }
}

/* ===== v3.13.1 — sidebar PC buka-tutup, mode device, makalah HP lega ===== */
.hamburger { display: grid !important; place-items: center; } /* poin 6: tampil juga di PC */
.side { transition: transform 0.25s ease; }
.side-ctrl { margin-left: auto; width: 28px; height: 28px; font-size: 12px; flex-shrink: 0; }
@media (min-width: 901px) {
  body.side-tutup .side { position: fixed; left: 0; top: 0; bottom: 0; width: 264px; transform: translateX(-110%); z-index: 30; } /* poin 3 */
  body.side-tutup .layout { grid-template-columns: 1fr !important; }
}
/* poin 4: mode perangkat dari switch login — hp = paksa layout HP + zoom out; pc = paksa desktop */
html[data-device="hp"] body { zoom: 0.94; }
html[data-device="hp"] .layout { grid-template-columns: 1fr !important; }
html[data-device="hp"] .side { position: fixed; left: 0; top: 0; bottom: 0; width: 82vw; max-width: 320px; z-index: 30; transform: translateX(-105%); background: var(--panel); }
html[data-device="hp"] .side.buka { transform: translateX(0); box-shadow: 16px 0 44px #0009; }
html[data-device="hp"] .atas { flex-wrap: wrap; row-gap: 8px; }
html[data-device="hp"] .atas-kanan { flex-wrap: wrap; width: 100%; }
html[data-device="hp"] .hal-coding, html[data-device="hp"] .hal-gambar, html[data-device="hp"] .hal-detektor, html[data-device="hp"] .makalah-body { grid-template-columns: 1fr !important; } /* poin 1: JANGAN sentuh display */
html[data-device="hp"] .bubble { max-width: 94%; }
/* v3.15.0 poin 1: JANGAN paksa static kalau sidebar sedang ditutup — dulu bikin
   grid jadi 1 kolom sementara .side tetap ikut aliran, hasilnya halaman menumpuk ke bawah. */
html[data-device="pc"] body:not(.side-tutup) .side { position: static !important; transform: none !important; }
html[data-device="pc"] body:not(.side-tutup) .overlay { display: none !important; }
/* poin 3: makalah HP dilegakan — stepper kompak, donut lebih kecil, kartu bernapas */
@media (max-width: 900px) {
  .stepper { gap: 4px; padding: 8px 10px; }
  .stepper .langkah-item { min-width: 56px; font-size: 10px; }
  .stepper .langkah-item i { width: 26px; height: 26px; font-size: 11px; }
  .lingkaran svg { width: 84px; height: 84px; }
  .lingkaran .angka { font-size: 18px; }
  .hal-makalah .kartu { padding: 14px; }
  .hal-makalah .langkah-judul { font-size: 11px; letter-spacing: 0.6px; }
}

/* ===== v3.14.0 — halaman donasi ===== */
.donasi-btn { margin-left: auto; width: 34px; height: 34px; font-size: 16px; flex-shrink: 0; }
.donasi-wrap { max-width: 640px; margin: 0 auto; padding: 18px; display: flex; flex-direction: column; gap: 16px; overflow-y: auto; height: 100%; }
.donasi-hero { text-align: center; padding: 22px !important; }
.qris-logo { display: inline-block; font-weight: 900; font-size: 15px; letter-spacing: 2px; padding: 7px 16px; border-radius: 10px; background: linear-gradient(135deg, #e11d48, #b91c1c); color: #fff; margin-bottom: 10px; box-shadow: 0 6px 18px #e11d4844; }
.donasi-hero h2 { margin: 4px 0 8px; font-size: 21px; }
.donasi-poin { display: flex; flex-direction: column; gap: 6px; margin: 12px 0 4px; font-size: 13.5px; text-align: left; }
.donasi-hero label { display: block; text-align: left; font-size: 12.5px; color: var(--muted); margin: 12px 0 5px; }
.donasi-hero input { width: 100%; height: 42px; border-radius: 11px; border: 1px solid var(--line); background: var(--panel-2); color: var(--text); padding: 0 12px; font-size: 14px; }
.pil-jumlah { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin-bottom: 8px; }
.pil-jumlah button { height: 36px; border-radius: 10px; border: 1px solid var(--line); background: var(--panel-2); color: var(--text); cursor: pointer; font-size: 13px; transition: border-color 0.2s, box-shadow 0.2s; }
.pil-jumlah button.aktif { border-color: var(--accent); box-shadow: 0 0 0 3px rgba(124, 108, 255, 0.2); }
.donasi-link { text-align: left; background: var(--panel-2); border: 1px solid var(--line); border-radius: 12px; padding: 12px 14px; margin-top: 12px; font-size: 13.5px; word-break: break-all; }
.donasi-link a { color: var(--accent); }
.wal-donasi { padding: 16px !important; }
.dinding-item { display: flex; align-items: center; gap: 10px; padding: 9px 2px; border-bottom: 1px dashed var(--line); font-size: 13.5px; }
.dinding-item:last-child { border-bottom: 0; }
.dinding-item span { color: var(--accent); font-weight: 700; }
.dinding-item i { margin-left: auto; font-size: 11.5px; font-style: normal; }
@media (max-width: 900px) { .donasi-wrap { padding: 12px; } }

/* ============================================================
   v3.15.0 — LAPISAN UI MODERN + ZOOM PERANGKAT
   poin 1  : sidebar PC benar-benar tertutup (tidak menumpuk ke bawah)
   poin 3  : PC/laptop default zoom 0.90 (lega, tidak sempit)
   poin 8  : HP default zoom 0.94
   poin 2  : modal QRIS + animasi modern
   poin 5  : tombol X hapus riwayat
   poin 10 : radius lembut, gradasi, glass, micro-interaction, tidak kaku
   ============================================================ */

/* ---------- 1. token tambahan ---------- */
:root {
  --zoom-pc: 0.90;   /* poin 3 */
  --zoom-hp: 0.94;   /* poin 8 */
  --r-sm: 10px;
  --r-md: 14px;
  --r-lg: 20px;
  --r-xl: 26px;
  --ease: cubic-bezier(.22, .61, .36, 1);
  --ease-out: cubic-bezier(.16, 1, .3, 1);
  --glass: rgba(255, 255, 255, .04);
  --glass-line: rgba(255, 255, 255, .07);
  --glow: 0 0 0 1px rgba(124, 92, 255, .35), 0 10px 30px rgba(124, 92, 255, .18);
  --lift: 0 10px 30px rgba(0, 0, 0, .28);
}
[data-tema="terang"] {
  --glass: rgba(20, 28, 60, .03);
  --glass-line: rgba(20, 28, 60, .07);
  --lift: 0 10px 28px rgba(30, 42, 90, .12);
}

/* ---------- 2. ZOOM PERANGKAT (v3.16.0 poin 1 & 6) ----------
   JANGAN pernah pakai 100% di sini.
   Nilai 100% diukur dari induk yang SUDAH terpengaruh zoom, jadi kalau dibagi
   zoom lagi hasilnya terbagi DUA KALI: 415 / 0.94 = 441px di viewport 390px.
   Akibatnya halaman meleber ke kanan (header terpotong) dan komposer jatuh di
   bawah layar sehingga kolom ketik tidak bisa dipakai.
   Satuan viewport (dvw/dvh) selalu diukur dari viewport asli, jadi pembagian
   hanya terjadi sekali dan hasilnya PAS.
   Bonus: dvh otomatis menyusut mengikuti bilah URL browser HP. */
html { height: 100%; }
html[data-device="pc"] body {
  zoom: var(--zoom-pc);
  width: calc(100vw / var(--zoom-pc));
  height: calc(100vh / var(--zoom-pc));
  width: calc(100dvw / var(--zoom-pc));
  height: calc(100dvh / var(--zoom-pc));
}
html[data-device="hp"] body {
  zoom: var(--zoom-hp);
  width: calc(100vw / var(--zoom-hp));
  height: calc(100vh / var(--zoom-hp));
  width: calc(100dvw / var(--zoom-hp));
  height: calc(100dvh / var(--zoom-hp));
}
/* saat mode perangkat belum dipilih, PC tetap dapat kelegaan yang sama */
html:not([data-device]) body {
  zoom: var(--zoom-pc);
  width: calc(100vw / var(--zoom-pc));
  height: calc(100vh / var(--zoom-pc));
  width: calc(100dvw / var(--zoom-pc));
  height: calc(100dvh / var(--zoom-pc));
}
@media (max-width: 900px) {
  html:not([data-device]) body {
    zoom: var(--zoom-hp);
    width: calc(100vw / var(--zoom-hp));
    height: calc(100vh / var(--zoom-hp));
    width: calc(100dvw / var(--zoom-hp));
    height: calc(100dvh / var(--zoom-hp));
  }
}

/* ---------- 2b. HP TIDAK BOLEH ZOOM SENDIRI SAAT MENGETIK (poin 6) ----------
   Safari/Chrome HP memaksa zoom masuk kalau font kolom isian < 16px.
   16.5px dibagi zoom -> nilai hitung (17.5px) DAN nilai tampil (16.5px)
   dua-duanya di atas 16px, jadi browser tidak punya alasan menzoom.
   Cubit-untuk-zoom manual tetap dibiarkan hidup sesuai permintaan. */
/* !important memang perlu di sini: aturan berlapis seperti
   ".composer .kotak textarea { font-size: 14px }" (spesifisitas 0-2-1)
   mengalahkan selektor perangkat (0-1-2), dan auto-zoom HP kambuh lagi. */
html[data-device="hp"] textarea,
html[data-device="hp"] input:not([type="checkbox"]):not([type="radio"]):not([type="range"]),
html[data-device="hp"] select {
  font-size: calc(16.5px / var(--zoom-hp)) !important;
}
@media (max-width: 900px) {
  html:not([data-device]) textarea,
  html:not([data-device]) input:not([type="checkbox"]):not([type="radio"]):not([type="range"]),
  html:not([data-device]) select {
    font-size: calc(16.5px / var(--zoom-hp)) !important;
  }
}
/* matikan zoom dua-ketuk (bukan cubit) supaya tidak melonjak sendiri */
html, body { touch-action: manipulation; }
/* iOS: jangan besarkan teks sendiri saat orientasi berubah */
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }

/* kontrol zoom di top bar (seperti gambar 2) */
.zoom-ctrl {
  display: inline-flex; align-items: center; gap: 2px;
  background: var(--panel-2); border: 1px solid var(--line);
  border-radius: 999px; padding: 3px 4px 3px 10px; font-size: 12px; white-space: nowrap;
}
.zoom-ctrl b { font-variant-numeric: tabular-nums; min-width: 34px; text-align: center; font-weight: 700; }
.zoom-ctrl button {
  width: 24px; height: 24px; border-radius: 50%; border: 0; cursor: pointer;
  background: transparent; color: var(--text); font-size: 15px; line-height: 1;
  display: grid; place-items: center; transition: background .18s var(--ease), transform .18s var(--ease);
}
.zoom-ctrl button:hover { background: var(--panel-3); transform: scale(1.12); }
.zoom-ctrl button:active { transform: scale(.92); }
.zoom-ctrl .reset {
  width: auto; padding: 0 10px; border-radius: 999px; font-size: 11.5px; font-weight: 700;
  color: #4ade80; border: 1px solid rgba(74, 222, 128, .35);
}

/* ---------- 3. SIDEBAR TUTUP DI PC (poin 1) ----------
   Kuncinya: .side dilepas dari aliran grid TOTAL (display:none) supaya grid
   1-kolom tidak pernah menumpuk sidebar di atas konten. */
@media (min-width: 901px) {
  .layout { transition: grid-template-columns .28s var(--ease-out); }
  body.side-tutup .layout { grid-template-columns: 1fr !important; }
  body.side-tutup .side {
    display: none !important;
    position: fixed !important;
    transform: translateX(-110%) !important;
  }
  /* tombol hamburger jadi jelas статус-nya */
  body.side-tutup .hamburger { background: var(--accent); color: #fff; border-color: transparent; }
}
html[data-device="pc"] body.side-tutup .layout { grid-template-columns: 1fr !important; }
html[data-device="pc"] body.side-tutup .side { display: none !important; }
/* mode HP: hamburger = drawer, bukan collapse */
html[data-device="hp"] body.side-tutup .side { display: flex !important; }
html[data-device="hp"] body.side-tutup .layout { grid-template-columns: 1fr !important; }
@media (max-width: 900px) {
  body.side-tutup .side { display: flex !important; }
}
.hamburger { transition: background .2s var(--ease), color .2s var(--ease), transform .2s var(--ease); }
.hamburger:active { transform: scale(.9); }

/* ---------- 4. LATAR & KERANGKA LEBIH MODERN (poin 10) ---------- */
body {
  background:
    radial-gradient(1200px 600px at 12% -10%, rgba(124, 92, 255, .16), transparent 60%),
    radial-gradient(900px 500px at 105% 8%, rgba(56, 189, 248, .10), transparent 60%),
    var(--bg);
  -webkit-font-smoothing: antialiased;
}
[data-tema="terang"] body {
  background:
    radial-gradient(1100px 560px at 10% -12%, rgba(109, 77, 255, .12), transparent 60%),
    radial-gradient(900px 500px at 105% 6%, rgba(56, 189, 248, .10), transparent 60%),
    var(--bg);
}
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-thumb { background: linear-gradient(var(--line), var(--panel-3)); border-radius: 99px; border: 2px solid transparent; background-clip: padding-box; }
::-webkit-scrollbar-thumb:hover { background: linear-gradient(var(--accent), var(--accent-2)); background-clip: padding-box; }

.side {
  background: linear-gradient(180deg, var(--panel), color-mix(in srgb, var(--panel) 88%, var(--bg)));
  border-right: 1px solid var(--glass-line);
  backdrop-filter: blur(10px);
  padding: 14px 10px;
}
.logo { letter-spacing: -.4px; }
.logo-img { box-shadow: 0 6px 18px rgba(124, 92, 255, .35); }
.btn-new {
  border-radius: var(--r-md);
  background: linear-gradient(135deg, #8b7cff, #6d4dff 55%, #5b3df5);
  box-shadow: 0 8px 22px rgba(109, 77, 255, .35);
  transition: transform .18s var(--ease), box-shadow .18s var(--ease), filter .18s var(--ease);
  letter-spacing: .1px;
}
.btn-new:hover { transform: translateY(-2px); box-shadow: 0 14px 30px rgba(109, 77, 255, .45); }
.btn-new:active { transform: translateY(0) scale(.985); }

.nav a, .sesi-item {
  position: relative; border-radius: var(--r-sm);
  transition: background .18s var(--ease), color .18s var(--ease), padding-left .18s var(--ease);
}
.nav a::before, .sesi-item::before {
  content: ""; position: absolute; left: 4px; top: 50%; width: 3px; height: 0;
  border-radius: 9px; background: linear-gradient(#8b7cff, #6d4dff);
  transform: translateY(-50%); transition: height .22s var(--ease-out);
}
.nav a.aktif::before, .sesi-item.aktif::before { height: 56%; }
.nav a.aktif, .sesi-item.aktif {
  background: linear-gradient(90deg, rgba(124, 92, 255, .18), transparent 85%);
  color: var(--text); padding-left: 16px;
}
.nav a:hover, .sesi-item:hover { padding-left: 15px; }
.nav .label { text-transform: uppercase; opacity: .75; font-weight: 700; }

.side-status, .side-user {
  border-radius: var(--r-md); border: 1px solid var(--glass-line);
  background: var(--glass); backdrop-filter: blur(6px);
}
.side-user .ava-besar { box-shadow: 0 6px 16px rgba(124, 92, 255, .38); }

.atas {
  border-bottom: 1px solid var(--glass-line);
  background: color-mix(in srgb, var(--bg) 72%, transparent);
  backdrop-filter: blur(14px);
  padding: 12px 20px;
}
.judul-wrap h2 { letter-spacing: -.3px; }
.badge { border-radius: 12px; background: linear-gradient(135deg, var(--panel-2), var(--panel-3)); border: 1px solid var(--glass-line); }
.atas-kanan { gap: 7px; flex-wrap: wrap; justify-content: flex-end; }

/* ---------- 5. KOMPONEN: tombol, kartu, input ---------- */
.btn, .btn-new, .icon, .pil-agen, .pil-mode, .btn-mini, .tab-bar button, .pil-jumlah button {
  transition: transform .16s var(--ease), box-shadow .18s var(--ease), background .18s var(--ease), border-color .18s var(--ease), color .18s var(--ease);
}
.btn { border-radius: var(--r-md); box-shadow: 0 6px 18px rgba(109, 77, 255, .25); }
.btn:hover { transform: translateY(-2px); box-shadow: 0 12px 26px rgba(109, 77, 255, .34); }
.btn:active { transform: translateY(0) scale(.985); }
.btn-ghost, .btn.gelap { box-shadow: none; }
.btn-ghost:hover { border-color: var(--accent); }
.icon { border-radius: 12px; }
.icon:hover { transform: translateY(-1px); }
.icon.kirim { background: linear-gradient(135deg, #8b7cff, #6d4dff); box-shadow: 0 8px 20px rgba(109, 77, 255, .38); }
.icon.kirim:hover { filter: brightness(1.06); }
.kartu {
  border-radius: var(--r-lg); border: 1px solid var(--glass-line);
  background: linear-gradient(180deg, var(--panel-2), color-mix(in srgb, var(--panel-2) 86%, var(--bg)));
  transition: border-color .2s var(--ease), box-shadow .2s var(--ease), transform .2s var(--ease);
}
.kartu:hover { border-color: color-mix(in srgb, var(--accent) 40%, var(--glass-line)); }
.quick { border-radius: var(--r-lg); background: linear-gradient(180deg, var(--panel), color-mix(in srgb, var(--panel) 88%, var(--bg))); }
.quick:hover { transform: translateY(-4px); box-shadow: var(--lift); border-color: var(--accent); }
.quick .q-ikon { border-radius: 14px; background: linear-gradient(135deg, rgba(124, 92, 255, .22), rgba(56, 189, 248, .16)); }
.agen { border-radius: var(--r-md); transition: transform .18s var(--ease), border-color .18s var(--ease); }
.agen:hover { transform: translateY(-2px); border-color: var(--accent); }
select, input[type="text"], input[type="password"], input[type="number"], textarea {
  border-radius: 12px; transition: border-color .18s var(--ease), box-shadow .18s var(--ease), background .18s var(--ease);
}
select:focus, input:focus, textarea:focus { outline: 0; border-color: var(--accent); box-shadow: 0 0 0 3px rgba(124, 92, 255, .18); }
.composer { background: color-mix(in srgb, var(--bg) 84%, transparent); backdrop-filter: blur(12px); border-top: 1px solid var(--glass-line); }
.composer .kotak {
  border-radius: var(--r-xl); border: 1px solid var(--glass-line);
  background: color-mix(in srgb, var(--panel) 88%, transparent);
  transition: border-color .18s var(--ease), box-shadow .18s var(--ease);
}
.composer .kotak:focus-within { border-color: var(--accent); box-shadow: 0 0 0 3px rgba(124, 92, 255, .16); }
.bubble { border-radius: 18px; box-shadow: 0 4px 14px rgba(0, 0, 0, .12); animation: masuk-bubble .28s var(--ease-out) both; }
.bubble.user { background: linear-gradient(135deg, #6d5cff, #5b4cf0); }
@keyframes masuk-bubble { from { opacity: 0; transform: translateY(8px) scale(.985); } to { opacity: 1; transform: none; } }
.tab-bar button { border-radius: 999px; }
.tab-bar button.aktif { background: linear-gradient(135deg, rgba(124, 92, 255, .2), rgba(124, 92, 255, .08)); color: var(--text); box-shadow: inset 0 0 0 1px rgba(124, 92, 255, .35); }

/* transisi halus antar halaman */
[data-hal], .chat-col { animation: masuk-hal .3s var(--ease-out) both; }
@keyframes masuk-hal { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }

/* ---------- 6. RIWAYAT + TOMBOL X (poin 5) ---------- */
.riwayat-item {
  border-radius: var(--r-md); padding: 12px; margin-bottom: 8px;
  border: 1px solid var(--glass-line); border-bottom: 1px solid var(--glass-line);
  background: var(--glass); position: relative;
  transition: border-color .18s var(--ease), transform .18s var(--ease), background .18s var(--ease);
}
.riwayat-item:hover { border-color: color-mix(in srgb, var(--accent) 45%, var(--glass-line)); transform: translateX(2px); }
.riwayat-item.menghapus { opacity: 0; transform: translateX(28px) scale(.97); transition: all .25s var(--ease); }
.riwayat-aksi { flex-direction: column; align-items: flex-end; gap: 6px; }
.riwayat-x {
  width: 26px; height: 26px; flex: 0 0 26px; border-radius: 50%; cursor: pointer;
  border: 1px solid var(--line); background: var(--panel-2); color: var(--muted);
  font-size: 13px; line-height: 1; display: grid; place-items: center;
  transition: all .18s var(--ease);
}
.riwayat-x:hover { color: #fff; background: #e11d48; border-color: #e11d48; transform: rotate(90deg) scale(1.08); }
.riwayat-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 8px; }

/* ---------- 7. HALAMAN DONASI + MODAL QRIS (poin 2) ---------- */
.donasi-wrap { max-width: 1040px; display: grid; grid-template-columns: 1.15fr .85fr; gap: 18px; align-items: start; padding: 22px; }
@media (max-width: 900px) { .donasi-wrap { grid-template-columns: 1fr; padding: 14px; } }
.donasi-hero {
  position: relative; overflow: hidden; border-radius: var(--r-xl);
  background:
    radial-gradient(600px 200px at 50% -20%, rgba(124, 92, 255, .28), transparent 65%),
    linear-gradient(180deg, var(--panel-2), color-mix(in srgb, var(--panel-2) 84%, var(--bg)));
}
.donasi-hero::after {
  content: ""; position: absolute; inset: -40% -10% auto -10%; height: 180px;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .09), transparent);
  transform: rotate(-8deg); animation: kilau 5.5s var(--ease) infinite;
  pointer-events: none;
}
@keyframes kilau { 0% { transform: translateX(-120%) rotate(-8deg); } 55%, 100% { transform: translateX(120%) rotate(-8deg); } }
.qris-logo { animation: denyut-lembut 3s var(--ease) infinite; }
@keyframes denyut-lembut { 50% { transform: translateY(-3px) scale(1.03); box-shadow: 0 12px 26px #e11d4855; } }
.pil-jumlah button:hover { transform: translateY(-2px); border-color: var(--accent); }
.pil-jumlah button.aktif { background: linear-gradient(135deg, rgba(124, 92, 255, .28), rgba(124, 92, 255, .12)); }
.btn-penuh { width: 100%; height: 48px; font-size: 15px; border-radius: var(--r-md); }
.donasi-poin div { display: flex; gap: 8px; align-items: center; padding: 7px 10px; border-radius: 10px; background: var(--glass); border: 1px solid var(--glass-line); }
.dinding-item {
  display: grid; grid-template-columns: 1fr auto; gap: 2px 10px; align-items: center;
  padding: 10px 12px; border-radius: 12px; margin-bottom: 6px;
  background: var(--glass); border: 1px solid var(--glass-line);
  animation: masuk-hal .3s var(--ease-out) both;
}
.dinding-item i { grid-column: 1 / -1; font-size: 11px; font-style: normal; }
.dinding-item span { font-weight: 800; color: #4ade80; }

/* modal QRIS */
.modal-tirai {
  position: fixed; inset: 0; z-index: 90; display: none;
  align-items: center; justify-content: center; padding: 18px;
  background: rgba(4, 7, 18, .62); backdrop-filter: blur(10px) saturate(120%);
}
.modal-tirai.buka { display: flex; animation: tirai-masuk .26s var(--ease-out) both; }
@keyframes tirai-masuk { from { opacity: 0; } to { opacity: 1; } }
.modal-qris {
  width: min(430px, 96vw); max-height: 92vh; overflow-y: auto; text-align: center;
  border-radius: var(--r-xl); padding: 22px; position: relative;
  border: 1px solid var(--glass-line);
  background: linear-gradient(180deg, var(--panel), color-mix(in srgb, var(--panel) 86%, var(--bg)));
  box-shadow: 0 34px 90px rgba(0, 0, 0, .55);
  animation: modal-masuk .38s var(--ease-out) both;
}
@keyframes modal-masuk { from { opacity: 0; transform: translateY(26px) scale(.94); } to { opacity: 1; transform: none; } }
.modal-qris .tutup-x {
  position: absolute; right: 12px; top: 12px; width: 32px; height: 32px; border-radius: 50%;
  border: 1px solid var(--line); background: var(--panel-2); color: var(--muted); cursor: pointer; font-size: 15px;
  transition: all .18s var(--ease);
}
.modal-qris .tutup-x:hover { color: #fff; background: #e11d48; border-color: #e11d48; transform: rotate(90deg); }
.qris-kotak {
  position: relative; display: inline-block; margin: 14px auto 6px; padding: 14px;
  border-radius: 18px; background: #fff; box-shadow: 0 18px 44px rgba(0, 0, 0, .35);
  animation: qris-pop .5s var(--ease-out) both .08s;
}
@keyframes qris-pop { from { opacity: 0; transform: scale(.86) rotate(-2deg); } to { opacity: 1; transform: none; } }
.qris-kotak img, .qris-kotak svg { display: block; width: 232px; height: 232px; image-rendering: pixelated; }
.qris-kotak::after {
  content: ""; position: absolute; left: 14px; right: 14px; top: 14px; height: 3px; border-radius: 3px;
  background: linear-gradient(90deg, transparent, #22c55e, transparent);
  box-shadow: 0 0 16px 4px rgba(34, 197, 94, .55);
  animation: pindai 2.4s var(--ease) infinite;
}
@keyframes pindai { 0% { transform: translateY(0); opacity: 0; } 12% { opacity: 1; } 88% { opacity: 1; } 100% { transform: translateY(216px); opacity: 0; } }
.qris-nominal { font-size: 27px; font-weight: 900; letter-spacing: -.6px; margin: 6px 0 2px; }
.qris-nominal span { background: linear-gradient(135deg, #8b7cff, #38bdf8); -webkit-background-clip: text; background-clip: text; color: transparent; }
.qris-meta { font-size: 12px; color: var(--muted); }
.qris-langkah { text-align: left; font-size: 12.8px; line-height: 1.6; margin: 14px 0 4px; display: grid; gap: 6px; }
.qris-langkah div { display: flex; gap: 9px; align-items: flex-start; padding: 8px 10px; border-radius: 11px; background: var(--glass); border: 1px solid var(--glass-line); }
.qris-langkah b { flex: 0 0 20px; height: 20px; border-radius: 50%; display: grid; place-items: center; font-size: 11px; background: var(--accent); color: #fff; }
.qris-aksi { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 14px; }
.qris-aksi .btn, .qris-aksi .btn-ghost { width: 100%; }
.qris-tunggu { display: inline-flex; align-items: center; gap: 8px; font-size: 12.5px; color: var(--muted); margin-top: 10px; }
.qris-tunggu i { width: 9px; height: 9px; border-radius: 50%; background: var(--warn); animation: denyut 1.1s infinite; }
.spinner-donasi { width: 18px; height: 18px; border-radius: 50%; border: 2px solid var(--line); border-top-color: var(--accent); display: inline-block; animation: putar .8s linear infinite; vertical-align: -4px; }
@keyframes putar { to { transform: rotate(360deg); } }

/* ---------- 8. STATUS / OWNER / GAMBAR lebih lega (poin 10) ---------- */
.hal-status, .dash { overflow-y: auto; padding: 20px; height: 100%; }
.grid-hasil { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 12px; }
.grid-hasil img { border-radius: var(--r-md); transition: transform .22s var(--ease), box-shadow .22s var(--ease); }
.grid-hasil img:hover { transform: scale(1.02); box-shadow: var(--lift); }
.gambar-kanan { overflow-y: auto; padding: 18px; }
.gambar-kiri { padding: 18px; }
.dok-isi { font-size: 14.4px; line-height: 1.85; }
.dok-isi .md-h1 { font-size: 19px; font-weight: 800; margin: 18px 0 8px; }
.dok-isi .md-h2 { font-size: 16.5px; font-weight: 800; margin: 16px 0 6px; }
.dok-isi .md-h3 { font-size: 15px; font-weight: 700; margin: 13px 0 5px; }
.footer { background: color-mix(in srgb, var(--panel) 72%, transparent); backdrop-filter: blur(8px); border-top: 1px solid var(--glass-line); }

/* ---------- 9. lebar konten tidak sempit di layar besar ---------- */
@media (min-width: 1500px) {
  .chat { padding: 22px clamp(22px, 6vw, 90px); }
  .beranda { padding: 30px clamp(26px, 5vw, 70px); }
}

/* ---------- 10. hormati preferensi minim animasi ---------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; }
}

/* ===== v3.15.0 poin 7 — item riwayat lintas halaman di sidebar ===== */
.sesi-item {
  display: flex;
  align-items: center;
  gap: 8px;
}
.sesi-item .sesi-ikon {
  flex: 0 0 auto;
  font-size: 13px;
  line-height: 1;
  opacity: 0.85;
}
.sesi-item .judul {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.sesi-item .hapus {
  flex: 0 0 auto;
  opacity: 0;
  border: 0;
  background: transparent;
  color: inherit;
  cursor: pointer;
  font-size: 15px;
  line-height: 1;
  padding: 2px 4px;
  border-radius: 6px;
  transition: opacity 0.18s ease, color 0.18s ease, background 0.18s ease;
}
.sesi-item:hover .hapus,
.sesi-item.aktif .hapus {
  opacity: 0.7;
}
.sesi-item .hapus:hover {
  opacity: 1;
  color: #fff;
  background: rgba(255, 90, 90, 0.85);
}

/* ================= RONDE 4 poin 1 + RONDE 5 poin 2: PERPUSTAKAAN ================= */
/* RONDE 6 poin 1: halaman perpustakaan wajib bisa digulir. Induknya (.isi)
   memakai overflow:hidden, jadi halaman ini harus punya gulirannya sendiri. */
[data-hal="perpustakaan"] {
  height: 100%; min-height: 0; overflow-y: auto; overflow-x: hidden;
  -webkit-overflow-scrolling: touch; overscroll-behavior: contain;
}
.hal-perpus {
  padding: 2px 0 40px; height: 100%; min-height: 0;
  overflow-y: auto; overflow-x: hidden;
  -webkit-overflow-scrolling: touch; overscroll-behavior: contain;
}
.pk-atas { margin-bottom: 14px; }
.pk-h2 { font-size: 20px; font-weight: 700; margin: 0 0 4px; }
.pk-sub { font-size: 13px; opacity: 0.7; margin-bottom: 12px; }
.pk-cari-baris { display: flex; gap: 8px; align-items: center; }
.pk-cari {
  flex: 1 1 auto; min-width: 0; padding: 11px 14px; border-radius: 12px;
  border: 1px solid var(--garis, rgba(128, 128, 128, 0.3)); background: var(--kartu, rgba(255, 255, 255, 0.04));
  color: inherit; font-size: 14px;
}
.pk-tombol {
  padding: 10px 14px; border-radius: 12px; cursor: pointer; font-size: 13px; white-space: nowrap;
  border: 1px solid var(--garis, rgba(128, 128, 128, 0.3)); background: var(--kartu, rgba(255, 255, 255, 0.05)); color: inherit;
  transition: transform 0.15s ease, background 0.15s ease;
}
.pk-tombol:hover { transform: translateY(-1px); }
.pk-tombol.utama { background: linear-gradient(135deg, #4f7cff, #8b5cf6); color: #fff; border-color: transparent; }
.pk-filter { display: none; gap: 10px; flex-wrap: wrap; margin-top: 10px; }
.pk-filter.buka { display: flex; }
.pk-filter label { display: flex; flex-direction: column; gap: 4px; font-size: 12px; opacity: 0.85; }
.pk-filter select {
  padding: 9px 10px; border-radius: 10px; font-size: 13px; color: inherit;
  border: 1px solid var(--garis, rgba(128, 128, 128, 0.3)); background: var(--kartu, rgba(255, 255, 255, 0.04));
}
.pk-tab { display: flex; gap: 6px; margin-top: 12px; overflow-x: auto; -webkit-overflow-scrolling: touch; }
.pk-tab-b {
  padding: 7px 14px; border-radius: 999px; font-size: 13px; cursor: pointer; white-space: nowrap;
  border: 1px solid var(--garis, rgba(128, 128, 128, 0.3)); background: transparent; color: inherit;
}
.pk-tab-b.aktif { background: linear-gradient(135deg, #4f7cff, #8b5cf6); color: #fff; border-color: transparent; }
.pk-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 14px; }
.pk-kartu {
  border-radius: 16px; overflow: hidden; display: flex; flex-direction: column;
  border: 1px solid var(--garis, rgba(128, 128, 128, 0.22)); background: var(--kartu, rgba(255, 255, 255, 0.04));
  transition: transform 0.18s ease, box-shadow 0.18s ease;
}
.pk-kartu:hover { transform: translateY(-3px); box-shadow: 0 14px 30px rgba(0, 0, 0, 0.18); }
.pk-sampul { position: relative; height: 116px; background: linear-gradient(135deg, rgba(79, 124, 255, 0.35), rgba(139, 92, 246, 0.35)); }
.pk-img { width: 100%; height: 100%; object-fit: cover; display: block; }
.pk-tanpa-img { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; font-size: 30px; font-weight: 800; opacity: 0.55; }
.pk-badge {
  position: absolute; left: 10px; bottom: 10px; padding: 3px 9px; border-radius: 999px;
  font-size: 11px; font-weight: 700; text-transform: capitalize; color: #fff; background: rgba(0, 0, 0, 0.55);
}
.pk-badge.pk-jurnal { background: #2563eb; }
.pk-badge.pk-makalah { background: #059669; }
.pk-badge.pk-artikel { background: #d97706; }
.pk-bookmark {
  position: absolute; right: 8px; top: 8px; width: 30px; height: 30px; border-radius: 50%;
  border: none; cursor: pointer; font-size: 15px; color: #fff; background: rgba(0, 0, 0, 0.45);
}
.pk-bookmark.aktif { color: #ffd05a; }
.pk-isi { padding: 12px 13px 14px; display: flex; flex-direction: column; gap: 5px; }
.pk-judul { font-size: 14px; font-weight: 700; line-height: 1.35; }
.pk-wadah { font-size: 12px; opacity: 0.75; font-style: italic; }
.pk-meta { font-size: 12px; opacity: 0.7; }
.pk-prodi { font-size: 11px; font-weight: 600; color: #4f7cff; }
.pk-ringkas { font-size: 12.5px; opacity: 0.82; line-height: 1.5; }
.pk-penulis { font-size: 11.5px; opacity: 0.65; }
.pk-aksi { display: flex; align-items: center; gap: 10px; margin-top: 6px; flex-wrap: wrap; }
.pk-doi { font-size: 12.5px; font-weight: 600; color: #4f7cff; text-decoration: none; }
.pk-sudah { font-size: 11px; opacity: 0.6; }
.pk-kosong { grid-column: 1 / -1; padding: 30px 16px; text-align: center; font-size: 13px; opacity: 0.7; }
/* panel owner */
.pk-own { display: flex; flex-direction: column; gap: 10px; }
.pk-own-baris { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 10px; }
.pk-own-baris label { display: flex; flex-direction: column; gap: 4px; font-size: 12px; opacity: 0.9; }
.pk-own-baris input, .pk-own-baris select {
  padding: 9px 10px; border-radius: 10px; font-size: 13px; color: inherit;
  border: 1px solid var(--garis, rgba(128, 128, 128, 0.3)); background: var(--kartu, rgba(255, 255, 255, 0.04));
}
.pk-own-prodi { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 4px 10px; }
.pk-cek { display: flex; align-items: center; gap: 6px; font-size: 12px; }
.pk-own-aksi { display: flex; gap: 8px; flex-wrap: wrap; }
.pk-own-status { font-size: 12px; line-height: 1.7; opacity: 0.9; }
.pk-own-hasil { margin-top: 6px; padding: 7px 10px; border-radius: 10px; font-size: 12px; }
.pk-own-hasil.ok { background: rgba(16, 185, 129, 0.14); }
.pk-own-hasil.bad { background: rgba(239, 68, 68, 0.14); }
.pk-own-log { max-height: 190px; overflow: auto; font-size: 11.5px; line-height: 1.6; }
.pk-log-judul { font-weight: 700; font-size: 12px; margin-bottom: 4px; opacity: 0.85; }
.pk-log-baris { padding: 3px 7px; border-radius: 7px; margin-bottom: 3px; }
.pk-log-baris.ok { background: rgba(16, 185, 129, 0.1); }
.pk-log-baris.bad { background: rgba(239, 68, 68, 0.1); }
.pk-own-pesan { font-size: 12px; min-height: 16px; }
.pk-own-pesan.ok { color: #10b981; }
.pk-own-pesan.bad { color: #ef4444; }
@media (max-width: 640px) {
  .pk-grid { grid-template-columns: 1fr 1fr; gap: 10px; }
  .pk-sampul { height: 92px; }
  .pk-judul { font-size: 13px; }
  .pk-ringkas { font-size: 12px; max-height: 74px; overflow: hidden; }
  .pk-filter.buka { flex-direction: column; }
  .pk-filter label, .pk-filter select { width: 100%; }
  .pk-own-baris { grid-template-columns: 1fr; }
  .pk-own-prodi { grid-template-columns: 1fr; }
}
@media (max-width: 400px) {
  .pk-grid { grid-template-columns: 1fr; }
}

.pk-own-kunci{font-size:12px;padding:7px 10px;border-radius:9px;margin:0 0 8px;font-weight:600}
.pk-own-kunci.ok{background:rgba(34,197,94,.13);color:#15803d}
.pk-own-kunci.bad{background:rgba(239,68,68,.13);color:#dc2626}


/* RONDE 6 poin 6 (HP): kotak ketik lebih tinggi & huruf lebih besar, pemilih
   model memakai barisnya sendiri sehingga kotak ketik memakai lebar penuh. */
@media (max-width: 640px) {
  .composer { padding: 10px 12px 8px; gap: 7px; }
  .composer .kotak { border-radius: 20px; padding: 6px 10px; }
  .composer .kotak textarea { min-height: 60px; max-height: 200px; font-size: 15px; line-height: 1.5; }
  .komp-bawah { padding-top: 4px; }
  .komp-bawah .pil-agen-bawah { max-width: 68%; padding: 8px 11px; font-size: 12.5px; }
}


/* RONDE 6 poin 2: penanda online/offline & asal akun di daftar user owner */
.titik-status { display: inline-block; width: 9px; height: 9px; border-radius: 50%; margin-right: 7px; vertical-align: middle; }
.titik-status.on { background: #22c55e; box-shadow: 0 0 0 3px rgba(34,197,94,.18); }
.titik-status.off { background: #94a3b8; box-shadow: 0 0 0 3px rgba(148,163,184,.15); }
.pil-asal { display: inline-block; padding: 1px 7px; border-radius: 999px; font-size: 10.5px; font-weight: 700; margin-left: 4px; border: 1px solid var(--line); }
.pil-asal.web { color: #38bdf8; border-color: rgba(56,189,248,.4); }
.pil-asal.wa { color: #22c55e; border-color: rgba(34,197,94,.4); }
/* RONDE 6 poin 5: status model "Lambat" */
.pil.warn { background: rgba(234,179,8,.16); color: #eab308; }

/* ================= RONDE 7 poin 4: pemilih upaya penalaran =================
   Bentuknya mengikuti pemilih model supaya tidak terlihat seperti tempelan.
   Model tanpa mode berpikir tetap menampilkan pilihan, tapi mati dan terkunci
   di "Default" sehingga pengguna paham kenapa tidak bisa diubah. */
.pil-upaya {
  background: var(--panel-2);
  color: var(--text);
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 8px 10px;
  font-size: 12.5px;
  font-weight: 600;
  max-width: 168px;
  cursor: pointer;
}
.pil-upaya:hover { border-color: var(--accent); }
.pil-upaya:disabled,
.pil-upaya.mati {
  opacity: 0.62;
  cursor: not-allowed;
  border-style: dashed;
}
.komp-bawah .pil-upaya { max-width: 190px; }

/* ================= RONDE 7 poin 5: halaman makalah di HP dilebarkan =========
   Sebelumnya isi terjepit di tengah karena padding ganda (halaman + kartu),
   sehingga daftar BAB / BAGIAN dan progres penulisan terpotong. */
@media (max-width: 640px) {
  .hal-makalah .makalah-body { padding: 8px 6px 16px; gap: 10px; }
  .hal-makalah .kartu { padding: 12px 10px; border-radius: 12px; }
  .hal-makalah .stepper { padding: 8px 6px; gap: 6px; }
  .hal-makalah .langkah-judul { font-size: 11.5px; margin-bottom: 6px; }
  .hal-makalah .langkah { padding: 5px 2px; font-size: 13px; gap: 8px; }
  .hal-makalah #bab-list { max-height: none; overflow: visible; }
  .hal-makalah .lingkaran-wrap { gap: 12px; }
  .hal-makalah .dok-isi { padding: 12px 10px; }
  .hal-makalah .composer { padding: 10px 8px; gap: 6px; }
  .hal-makalah .composer select { font-size: 12.5px; padding: 8px 9px; }
  .pil-upaya { max-width: none; width: 100%; }
}

/* RONDE 6 poin 1 + RONDE 7: halaman perpustakaan wajib bisa digulir di HP maupun PC */
#hal-perpustakaan, .hal-perpus {
  padding: 4px 2px 28px;
  height: 100%;
  min-height: 0;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
}
@media (max-width: 640px) {
  #hal-perpustakaan, .hal-perpus { padding: 4px 2px 96px; }
}


/* ============================================================
   RONDE 8 poin 2 - HALAMAN MAKALAH & CODING DI HP = 50%
   Angka zoom-nya diatur app.js (variabel --zoom-hp, lihat ZOOM_50).
   Bagian ini mengurus AKIBAT dari zoom 50%: lebar CSS efektif jadi ~2x
   (HP 390px -> ~780px). Kalau tata letak tetap dipaksa 1 kolom, hasilnya
   ruang kosong lebar di kanan dan tulisan jadi kecil tanpa guna. Karena itu
   saat data-padat="1" dua panel dihidupkan kembali.
   ============================================================ */
html[data-device="hp"][data-padat="1"] .hal-coding {
  grid-template-columns: minmax(300px, 1fr) minmax(320px, 1.1fr) !important;
  gap: 12px;
}
html[data-device="hp"][data-padat="1"] .hal-makalah .makalah-body,
html[data-device="hp"][data-padat="1"] .makalah-body {
  grid-template-columns: minmax(290px, 1fr) minmax(300px, 1fr) !important;
  gap: 12px;
}
/* teks jangan ikut mengecil dua kali: dikompensasi balik terhadap zoom */
html[data-device="hp"][data-padat="1"] body[data-hal-aktif="makalah"],
html[data-device="hp"][data-padat="1"] body[data-hal-aktif="coding"] {
  font-size: calc(14px / var(--zoom-hp) * 0.62);
}
/* kolom isian tetap tampil >= 16px supaya HP tidak auto-zoom saat mengetik */
html[data-device="hp"][data-padat="1"] textarea,
html[data-device="hp"][data-padat="1"] input:not([type="checkbox"]):not([type="radio"]):not([type="range"]),
html[data-device="hp"][data-padat="1"] select {
  font-size: calc(16.5px / var(--zoom-hp)) !important;
}
/* panel tinggi dibatasi supaya progres/log tetap terlihat tanpa scroll jauh */
html[data-device="hp"][data-padat="1"] .hal-coding .tab-isi,
html[data-device="hp"][data-padat="1"] .makalah-body .kotak-log {
  max-height: 46vh;
  overflow: auto;
}
/* sidebar melayang tidak boleh melebar mengikuti zoom kecil */
html[data-device="hp"][data-padat="1"] .side {
  width: calc(82vw / var(--zoom-hp));
  max-width: calc(320px / var(--zoom-hp));
}
html[data-padat="1"] .zoom-ctrl { font-size: calc(12px / var(--zoom-hp) * 0.62); }