/* api-doc — tata letak ala Postman: bilah atas, rel ikon + panel samping, tab, editor request & panel respons, konsol. */
:root {
    --latar: #ffffff; --latar-2: #f6f7fa; --latar-3: #eceef4; --latar-sorot: #eef2fa;
    --garis: #e1e4ec; --garis-kuat: #cbd0dc;
    --teks: #212124; --teks-2: #5f5f66; --teks-3: #8c8c94;
    --aksen: #08265D; --aksen-2: #123B7A; --aksen-teks: #ffffff; --aksen-lembut: #dbe4f5;
    --emas: #CC9C49; --emas-terang: #E2C27F; --emas-gelap: #9B7435;
    --navy: #08265D; --navy-gelap: #051A42; --navy-terang: #123B7A;
    --merah: #c0392b; --hijau: #15803d; --kuning: #a16207; --biru: #1d4ed8; --ungu: #7e22ce;
    --get: #15803d; --post: #b45309; --put: #1d4ed8; --patch: #7e22ce; --delete: #b91c1c; --lain: #4b5563;
    --kode-latar: #fafafa; --kode-kunci: #a3264f; --kode-teks: #0b6b3a; --kode-angka: #1c4fc2; --kode-bool: #9a3412; --kode-null: #6b7280;
    --var-ok: #15803d; --var-ok-latar: #dcfce7; --var-tidak: #b91c1c; --var-tidak-latar: #fee2e2;
    --bayang: 0 8px 28px rgba(0,0,0,.14), 0 1px 3px rgba(0,0,0,.08);
    --mono: ui-monospace, "SF Mono", "Cascadia Code", Menlo, Consolas, monospace;
    --sans: Inter, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
    color-scheme: light;
}
@media (prefers-color-scheme: dark) {
    :root:not([data-tema="terang"]) {
        --latar: #0b1324; --latar-2: #0f1a30; --latar-3: #16243f; --latar-sorot: #1a2c50;
        --garis: #22324f; --garis-kuat: #2f4369;
        --teks: #e8e8ea; --teks-2: #a8a8b0; --teks-3: #7c7c85;
        --aksen: #CC9C49; --aksen-2: #E2C27F; --aksen-teks: #051A42; --aksen-lembut: #3a2f17;
        --merah: #f87171; --hijau: #4ade80; --kuning: #facc15; --biru: #60a5fa; --ungu: #c084fc;
        --get: #4ade80; --post: #fbbf24; --put: #60a5fa; --patch: #c084fc; --delete: #f87171; --lain: #9ca3af;
        --kode-latar: #091020; --kode-kunci: #f9a8d4; --kode-teks: #86efac; --kode-angka: #93c5fd; --kode-bool: #fdba74; --kode-null: #9ca3af;
        --var-ok: #4ade80; --var-ok-latar: #14532d; --var-tidak: #fca5a5; --var-tidak-latar: #7f1d1d;
        --bayang: 0 8px 28px rgba(0,0,0,.5), 0 1px 3px rgba(0,0,0,.4);
        color-scheme: dark;
    }
}
:root[data-tema="gelap"] {
    --latar: #0b1324; --latar-2: #0f1a30; --latar-3: #16243f; --latar-sorot: #1a2c50;
    --garis: #22324f; --garis-kuat: #2f4369;
    --teks: #e8e8ea; --teks-2: #a8a8b0; --teks-3: #7c7c85;
    --aksen: #CC9C49; --aksen-2: #E2C27F; --aksen-teks: #051A42; --aksen-lembut: #3a2f17;
    --merah: #f87171; --hijau: #4ade80; --kuning: #facc15; --biru: #60a5fa; --ungu: #c084fc;
    --get: #4ade80; --post: #fbbf24; --put: #60a5fa; --patch: #c084fc; --delete: #f87171; --lain: #9ca3af;
    --kode-latar: #091020; --kode-kunci: #f9a8d4; --kode-teks: #86efac; --kode-angka: #93c5fd; --kode-bool: #fdba74; --kode-null: #9ca3af;
    --var-ok: #4ade80; --var-ok-latar: #14532d; --var-tidak: #fca5a5; --var-tidak-latar: #7f1d1d;
    --bayang: 0 8px 28px rgba(0,0,0,.5), 0 1px 3px rgba(0,0,0,.4);
    color-scheme: dark;
}

* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; background: var(--latar); color: var(--teks); font: 13px/1.45 var(--sans); }
button, input, select, textarea { font: inherit; color: inherit; }
a { color: var(--aksen); }
code, pre, .mono { font-family: var(--mono); font-size: 12px; }
.redup { color: var(--teks-3); }
.kecil { font-size: 11.5px; }
[hidden] { display: none !important; }
#app.memuat { display: grid; place-items: center; height: 100%; color: var(--teks-3); }

/* ---------- kontrol dasar */
input[type=text], input[type=email], input[type=password], input[type=number], input[type=search], input:not([type]), select, textarea {
    background: var(--latar); border: 1px solid var(--garis); border-radius: 4px; padding: 5px 8px; min-width: 0; outline: none;
}
input:focus, select:focus, textarea:focus { border-color: var(--aksen); box-shadow: 0 0 0 2px color-mix(in srgb, var(--aksen) 18%, transparent); }
textarea { resize: vertical; }
.tombol { display: inline-flex; align-items: center; gap: 6px; height: 30px; padding: 0 12px; border-radius: 4px; border: 1px solid var(--garis);
    background: var(--latar-2); cursor: pointer; white-space: nowrap; }
.tombol:hover { background: var(--latar-3); }
.tombol.utama { background: var(--aksen); color: var(--aksen-teks); border-color: var(--aksen); font-weight: 600; }
.tombol.utama:hover { background: var(--aksen-2); }
.tombol.bahaya { color: var(--merah); }
.tombol.tipis { border-color: transparent; background: transparent; }
.tombol.tipis:hover { background: var(--latar-3); }
.tombol.ikon { width: 28px; height: 28px; padding: 0; justify-content: center; }
.tombol:disabled { opacity: .5; cursor: default; }
.kelompok-tombol { display: inline-flex; }
.kelompok-tombol > .tombol:first-child { border-radius: 4px 0 0 4px; }
.kelompok-tombol > .tombol:last-child { border-radius: 0 4px 4px 0; border-left-color: color-mix(in srgb, var(--aksen-teks) 30%, transparent); padding: 0 8px; }
.ikon-svg { width: 16px; height: 16px; flex: none; }

/* ---------- login */
.hal-masuk { display: grid; place-items: center; min-height: 100%; padding: 16px;
    background: radial-gradient(ellipse at 70% 20%, rgba(204,156,73,.22), transparent 55%), linear-gradient(160deg, #123B7A 0%, #08265D 45%, #040a18 100%); }
.kartu-masuk .logo-masuk { display: block; height: 72px; width: auto; margin: 0 auto 4px; }
.kartu-masuk .judul-masuk { text-align: center; }
.kartu-masuk .judul-masuk b { display: block; font-size: 17px; color: var(--teks); }
.kartu-masuk .judul-masuk small { color: var(--teks-3); }
.kartu-masuk { border-top: 4px solid var(--emas); }
.kartu-masuk { width: min(380px, 100%); background: var(--latar); border: 1px solid var(--garis); border-radius: 10px; padding: 28px; display: grid; gap: 14px; box-shadow: var(--bayang); }
.kartu-masuk label { display: grid; gap: 5px; font-weight: 500; }
.kartu-masuk input { height: 36px; }
.kartu-masuk .tombol { height: 38px; justify-content: center; }
.merek { display: flex; gap: 10px; align-items: center; }
.merek b { display: block; font-size: 16px; }
.merek small { color: var(--teks-3); }
.peringatan { background: var(--var-tidak-latar); color: var(--var-tidak); border-radius: 6px; padding: 8px 10px; }

/* ---------- kerangka */
.kerangka { display: grid; grid-template-rows: 44px 1fr auto 26px; height: 100vh; }
.bilah-atas { display: flex; align-items: center; gap: 10px; padding: 0 12px; background: linear-gradient(90deg, #051A42, #08265D 60%, #123B7A); color: #fff;
    border-bottom: 2px solid var(--emas); min-width: 0; }
.bilah-atas .merek { gap: 8px; }
.bilah-atas .merek img { height: 30px; width: auto; }
.bilah-atas .merek b { font-size: 14px; color: #fff; letter-spacing: .2px; }
.bilah-atas .merek b span { color: var(--emas-terang); }
.bilah-atas .tombol.tipis { color: #e6ebf5; }
.bilah-atas .tombol.tipis:hover { background: rgba(255,255,255,.1); }
.bilah-atas .pilih-env { background: rgba(255,255,255,.08); color: #fff; border-color: rgba(255,255,255,.22); }
.bilah-atas .pilih-env option { color: #111; }
.bilah-atas .pilih-env:focus { border-color: var(--emas); box-shadow: 0 0 0 2px rgba(204,156,73,.3); }
.bilah-atas .isi-kanan { margin-left: auto; display: flex; gap: 6px; align-items: center; }
.pilih-env { height: 30px; max-width: 260px; }
.avatar { width: 28px; height: 28px; border-radius: 50%; background: var(--emas); color: #051A42; display: grid; place-items: center; font-weight: 700; cursor: pointer; border: 0; }
.tengah { display: grid; grid-template-columns: 52px var(--lebar-sisi, 300px) 4px 1fr; min-height: 0; }
.tengah.sisi-tutup { grid-template-columns: 52px 0 0 1fr; }
.rel { border-right: 1px solid var(--garis); background: var(--latar-2); display: flex; flex-direction: column; align-items: center; padding: 8px 0; gap: 4px; }
.rel button { width: 44px; border: 0; background: transparent; border-radius: 6px; padding: 6px 0 4px; display: grid; justify-items: center; gap: 2px; cursor: pointer; color: var(--teks-2); font-size: 10px; }
.rel button:hover { background: var(--latar-3); }
.rel button.aktif { background: var(--latar-sorot); color: var(--aksen); box-shadow: inset 3px 0 0 var(--emas); }
.panel-sisi { display: flex; flex-direction: column; min-width: 0; min-height: 0; border-right: 1px solid var(--garis); overflow: hidden; }
.pengubah-lebar { cursor: col-resize; background: transparent; }
.pengubah-lebar:hover, .pengubah-lebar.geser { background: var(--aksen); }
.kepala-sisi { display: flex; align-items: center; gap: 6px; padding: 8px 8px 6px; }
.kepala-sisi b { font-size: 13px; margin-right: auto; padding-left: 4px; }
.cari-sisi { margin: 0 8px 6px; }
.cari-sisi input { width: 100%; height: 28px; }
.daftar-sisi { overflow: auto; flex: 1; padding-bottom: 20px; }

/* pohon koleksi */
.simpul { display: flex; align-items: center; gap: 4px; height: 28px; padding-right: 4px; cursor: pointer; user-select: none; position: relative; white-space: nowrap; }
.simpul:hover { background: var(--latar-3); }
.simpul.terpilih { background: var(--latar-sorot); }
.simpul .caret { width: 16px; flex: none; text-align: center; color: var(--teks-3); font-size: 10px; transition: transform .12s; }
.simpul .caret.buka { transform: rotate(90deg); }
.simpul .nama { overflow: hidden; text-overflow: ellipsis; flex: 1; }
.simpul .aksi { visibility: hidden; }
.simpul:hover .aksi, .simpul .aksi.terbuka { visibility: visible; }
.simpul.seret-atas { box-shadow: inset 0 2px 0 var(--aksen); }
.simpul.seret-dalam { outline: 2px solid var(--aksen); outline-offset: -2px; }
.ikon-folder { color: var(--teks-3); }
.metode { font: 700 10px/1 var(--mono); width: 44px; flex: none; text-align: right; padding-right: 4px; letter-spacing: -.2px; }
.m-GET { color: var(--get); } .m-POST { color: var(--post); } .m-PUT { color: var(--put); } .m-PATCH { color: var(--patch); } .m-DELETE { color: var(--delete); }
.m-HEAD, .m-OPTIONS, .m-lain { color: var(--lain); }
.kosong { padding: 24px 16px; color: var(--teks-3); text-align: center; }

/* ---------- tab */
.area-kerja { display: flex; flex-direction: column; min-width: 0; min-height: 0; }
.bilah-tab { display: flex; align-items: stretch; height: 38px; border-bottom: 1px solid var(--garis); background: var(--latar-2); overflow-x: auto; scrollbar-width: thin; flex: none; }
.tab { display: flex; align-items: center; gap: 6px; padding: 0 8px 0 12px; max-width: 220px; min-width: 120px; border-right: 1px solid var(--garis); cursor: pointer; position: relative; color: var(--teks-2); }
.tab:hover { background: var(--latar-3); }
.tab.aktif { background: var(--latar); color: var(--teks); }
.tab.aktif::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 2px; background: var(--emas); }
.tab .nama { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; flex: 1; }
.tab .metode { width: auto; padding: 0; }
.tab .tutup { width: 18px; height: 18px; border: 0; border-radius: 3px; background: none; cursor: pointer; color: var(--teks-3); display: grid; place-items: center; padding: 0; }
.tab .tutup:hover { background: var(--garis); color: var(--teks); }
.tab.kotor .tutup::before { content: "●"; font-size: 10px; color: var(--emas); }
.tab.kotor .tutup svg { display: none; }
.tab.kotor .tutup:hover::before { content: none; }
.tab.kotor .tutup:hover svg { display: block; }
.tab-baru { border: 0; background: none; width: 36px; cursor: pointer; color: var(--teks-2); flex: none; }
.tab-baru:hover { background: var(--latar-3); }
.isi-tab { flex: 1; min-height: 0; display: flex; flex-direction: column; overflow: hidden; }
.sambutan { margin: auto; text-align: center; color: var(--teks-2); max-width: 460px; padding: 24px; }
.sambutan h2 { color: var(--teks); margin: 12px 0 6px; }
.sambutan .logo-sambutan { height: 84px; width: auto; }
:root[data-tema="gelap"] :is(.logo-sambutan, .logo-masuk) { content: url(/assets/logo-putih.webp); }
@media (prefers-color-scheme: dark) { :root:not([data-tema="terang"]) :is(.logo-sambutan, .logo-masuk) { content: url(/assets/logo-putih.webp); } }
.sambutan .tombol { margin: 4px; }
.sambutan .tombol.besar { height: 42px; padding: 0 22px; font-size: 14px; }
.sambutan .baris-tombol { display: flex; justify-content: center; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.sambutan .baris-tombol .tombol { margin: 0; }

/* ---------- editor request */
.kepala-request { display: flex; align-items: center; gap: 8px; padding: 10px 16px 0; min-width: 0; }
.jejak { display: flex; align-items: center; gap: 4px; color: var(--teks-3); min-width: 0; overflow: hidden; white-space: nowrap; flex: 1; }
.jejak .ujung { color: var(--teks); font-weight: 600; border: 1px solid transparent; border-radius: 4px; padding: 2px 4px; min-width: 60px; max-width: 420px; background: transparent; }
.jejak .ujung:hover { border-color: var(--garis); }
.jejak .ujung:focus { border-color: var(--aksen); background: var(--latar); }
.baris-url { display: flex; gap: 8px; padding: 10px 16px; }
.kotak-url { display: flex; flex: 1; border: 1px solid var(--garis-kuat); border-radius: 5px; min-width: 0; background: var(--latar); }
.kotak-url:focus-within { border-color: var(--aksen); }
.kotak-url select { border: 0; border-right: 1px solid var(--garis); border-radius: 5px 0 0 5px; font: 700 12px var(--mono); width: 104px; padding: 0 8px; background: var(--latar-2); }
.kotak-url select:focus { box-shadow: none; }
.baris-url .tombol { height: 36px; }
.baris-url .tombol.utama { padding: 0 20px; }

/* input dengan sorotan {{variabel}} */
.isian-var { position: relative; flex: 1; min-width: 0; }
.isian-var .cermin, .isian-var input { font: 13px/20px var(--mono); padding: 7px 10px; white-space: pre; letter-spacing: 0; }
.isian-var .cermin { position: absolute; inset: 0; pointer-events: none; overflow: hidden; color: var(--teks); border: 1px solid transparent; }
.isian-var input { width: 100%; height: 100%; color: transparent; caret-color: var(--teks); background: transparent; border: 0; position: relative; }
.isian-var input:focus { box-shadow: none; }
.isian-var input::selection { background: color-mix(in srgb, var(--aksen) 35%, transparent); color: transparent; }
.isian-var.kv .cermin, .isian-var.kv input { font: 12.5px/18px var(--sans); padding: 4px 6px; }
.v-ada { color: var(--var-ok); background: var(--var-ok-latar); border-radius: 3px; }
.v-tidak { color: var(--var-tidak); background: var(--var-tidak-latar); border-radius: 3px; }
.v-param { color: var(--ungu); }

.sub-tab { display: flex; gap: 2px; padding: 0 16px; border-bottom: 1px solid var(--garis); flex: none; overflow-x: auto; }
.sub-tab button { border: 0; background: none; padding: 8px 10px; cursor: pointer; color: var(--teks-2); position: relative; white-space: nowrap; }
.sub-tab button:hover { color: var(--teks); }
.sub-tab button.aktif { color: var(--teks); font-weight: 600; }
.sub-tab button.aktif::after { content: ""; position: absolute; left: 8px; right: 8px; bottom: -1px; height: 2px; background: var(--emas); }
.sub-tab .jml { color: var(--hijau); font-size: 11px; margin-left: 3px; }
.sub-tab .titik::after { content: "●"; color: var(--hijau); font-size: 8px; margin-left: 4px; vertical-align: 2px; }
.sub-tab .kanan { margin-left: auto; display: flex; align-items: center; gap: 4px; }

.belah { flex: 1; min-height: 0; display: grid; grid-template-rows: minmax(120px, var(--tinggi-atas, 45%)) 5px 1fr; }
.belah.samping { grid-template-rows: none; grid-template-columns: minmax(280px, var(--lebar-kiri, 50%)) 5px 1fr; }
.pembatas { background: var(--garis); cursor: row-resize; }
.belah.samping .pembatas { cursor: col-resize; }
.pembatas:hover { background: var(--aksen); }
.panel-permintaan, .panel-respons { min-height: 0; min-width: 0; display: flex; flex-direction: column; overflow: hidden; }
.isi-sub { flex: 1; overflow: auto; padding: 10px 16px 16px; min-height: 0; }
.judul-bagian { font-weight: 600; color: var(--teks-2); margin: 6px 0 6px; display: flex; align-items: center; gap: 8px; }
.judul-bagian .kanan { margin-left: auto; }

/* tabel kunci-nilai */
.kv { width: 100%; border-collapse: collapse; table-layout: fixed; }
.kv th { text-align: left; font-weight: 600; color: var(--teks-2); font-size: 12px; padding: 5px 6px; border: 1px solid var(--garis); background: var(--latar-2); }
.kv td { border: 1px solid var(--garis); padding: 0; height: 30px; vertical-align: middle; }
.kv td.cek { width: 32px; text-align: center; }
.kv td.hapus { width: 32px; text-align: center; }
.kv tr:not(:hover) td.hapus button { visibility: hidden; }
.kv input:not([type=checkbox]), .kv select, .kv .isian-var input { border: 0; width: 100%; background: transparent; border-radius: 0; height: 29px; }
.kv input:not([type=checkbox]):focus, .kv select:focus { box-shadow: inset 0 0 0 1px var(--aksen); }
.kv tr.mati td:not(.cek) { opacity: .5; }
.kv td.tipe { width: 74px; }
.kv .baca { padding: 4px 6px; color: var(--teks-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.kv .berkas { display: flex; gap: 4px; align-items: center; padding: 0 4px; overflow: hidden; }
.kv .berkas .tombol { height: 22px; padding: 0 6px; font-size: 11.5px; }
.bulk { width: 100%; min-height: 160px; font-family: var(--mono); }

.pilih-radio { display: flex; flex-wrap: wrap; gap: 14px; align-items: center; margin-bottom: 10px; }
.pilih-radio label { display: inline-flex; gap: 5px; align-items: center; cursor: pointer; }
.editor-kode { width: 100%; min-height: 220px; height: calc(100% - 40px); font: 12.5px/1.55 var(--mono); tab-size: 4; white-space: pre; background: var(--kode-latar); padding: 10px; }
.dua-kolom { display: grid; grid-template-columns: 1fr 230px; gap: 12px; height: 100%; min-height: 260px; }
.potongan { border-left: 1px solid var(--garis); padding-left: 12px; overflow: auto; }
.potongan button { display: block; width: 100%; text-align: left; border: 0; background: none; color: var(--aksen); padding: 4px 0; cursor: pointer; }
.potongan button:hover { text-decoration: underline; }
.form-auth { display: grid; grid-template-columns: 260px 1fr; gap: 20px; }
.form-auth .kiri p { color: var(--teks-3); }
.form-auth .kanan { display: grid; gap: 10px; align-content: start; max-width: 520px; }
.form-auth label { display: grid; gap: 4px; color: var(--teks-2); }
.info-warisan { background: var(--latar-2); border: 1px solid var(--garis); border-radius: 6px; padding: 12px; color: var(--teks-2); }
.pengaturan-baris { display: flex; justify-content: space-between; align-items: center; gap: 20px; padding: 12px 0; border-bottom: 1px solid var(--garis); max-width: 720px; }
.pengaturan-baris p { margin: 2px 0 0; color: var(--teks-3); }
.saklar { appearance: none; width: 34px; height: 20px; border-radius: 10px; background: var(--garis-kuat); position: relative; cursor: pointer; flex: none; }
.saklar::after { content: ""; position: absolute; width: 16px; height: 16px; border-radius: 50%; background: #fff; top: 2px; left: 2px; transition: left .12s; }
.saklar:checked { background: var(--aksen); }
.saklar:checked::after { left: 16px; }

/* ---------- respons */
.kepala-respons { display: flex; align-items: center; gap: 4px; padding: 0 12px 0 16px; border-bottom: 1px solid var(--garis); min-height: 38px; flex-wrap: wrap; }
.kepala-respons .sub-tab { border: 0; padding: 0; }
.status-respons { margin-left: auto; display: flex; gap: 14px; align-items: center; font-size: 12px; color: var(--teks-2); }
.status-respons b { font-weight: 600; }
.st-2 { color: var(--hijau); } .st-3 { color: var(--biru); } .st-4, .st-5, .st-0 { color: var(--merah); }
.pemicu-info { cursor: help; border-bottom: 1px dotted var(--teks-3); }
.alat-respons { display: flex; align-items: center; gap: 6px; padding: 6px 16px; border-bottom: 1px solid var(--garis); }
.alat-respons .segmen { display: inline-flex; border: 1px solid var(--garis); border-radius: 4px; overflow: hidden; }
.alat-respons .segmen button { border: 0; background: var(--latar); padding: 3px 10px; cursor: pointer; color: var(--teks-2); }
.alat-respons .segmen button.aktif { background: var(--latar-3); color: var(--teks); font-weight: 600; }
.alat-respons .kanan { margin-left: auto; display: flex; gap: 4px; align-items: center; }
.badan-respons { flex: 1; overflow: auto; min-height: 0; }
.kode { margin: 0; padding: 8px 0; font: 12.5px/1.6 var(--mono); background: var(--kode-latar); min-height: 100%; counter-reset: baris; }
.kode .bar { display: block; padding: 0 16px 0 56px; position: relative; white-space: pre; }
.kode.bungkus .bar { white-space: pre-wrap; word-break: break-all; }
.kode .bar::before { counter-increment: baris; content: counter(baris); position: absolute; left: 0; width: 40px; text-align: right; color: var(--teks-3); user-select: none; }
.kode .lipat { position: absolute; left: 42px; cursor: pointer; color: var(--teks-3); user-select: none; width: 12px; text-align: center; }
.kode .lipat:hover { color: var(--teks); }
.kode .ringkas { color: var(--teks-3); background: var(--latar-3); border-radius: 3px; padding: 0 4px; cursor: pointer; }
.j-k { color: var(--kode-kunci); } .j-s { color: var(--kode-teks); } .j-n { color: var(--kode-angka); } .j-b { color: var(--kode-bool); } .j-z { color: var(--kode-null); }
.x-tag { color: var(--kode-kunci); } .x-attr { color: var(--kode-angka); }
.cari-hit { background: #fde047; color: #111; }
.pratinjau { width: 100%; height: 100%; border: 0; background: #fff; }
.gambar-respons { padding: 16px; } .gambar-respons img { max-width: 100%; }
.tabel-info { width: 100%; border-collapse: collapse; }
.tabel-info td, .tabel-info th { border-bottom: 1px solid var(--garis); padding: 6px 16px; text-align: left; vertical-align: top; word-break: break-all; }
.tabel-info th { color: var(--teks-2); font-weight: 600; background: var(--latar-2); }
.tabel-info td:first-child { font-weight: 600; width: 30%; word-break: normal; }
.hasil-tes { padding: 8px 16px; }
.tes { display: flex; gap: 10px; padding: 6px 0; border-bottom: 1px solid var(--garis); align-items: baseline; }
.lencana { font: 700 10.5px/1 var(--sans); padding: 3px 6px; border-radius: 3px; text-transform: uppercase; flex: none; }
.lencana.lulus { background: var(--var-ok-latar); color: var(--var-ok); }
.lencana.gagal { background: var(--var-tidak-latar); color: var(--var-tidak); }
.lencana.lewat { background: var(--latar-3); color: var(--teks-2); }
.respons-kosong { display: grid; place-items: center; height: 100%; color: var(--teks-3); text-align: center; padding: 20px; }
.respons-kosong .besar { font-size: 15px; color: var(--teks-2); }
.galat-respons { padding: 20px; color: var(--merah); }
.memutar { width: 22px; height: 22px; border: 3px solid var(--garis); border-top-color: var(--aksen); border-radius: 50%; animation: putar .8s linear infinite; margin: 0 auto 10px; }
@keyframes putar { to { transform: rotate(360deg); } }

/* ---------- konsol & status bawah */
.konsol { border-top: 1px solid var(--garis); height: var(--tinggi-konsol, 220px); display: flex; flex-direction: column; background: var(--latar); }
.konsol .kepala-sisi { border-bottom: 1px solid var(--garis); }
.isi-konsol { flex: 1; overflow: auto; font: 12px/1.5 var(--mono); }
.log { padding: 3px 12px; border-bottom: 1px solid var(--garis); display: flex; gap: 8px; cursor: default; }
.log.warn { color: var(--kuning); } .log.error { color: var(--merah); }
.log details { flex: 1; min-width: 0; }
.log summary { cursor: pointer; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.log pre { white-space: pre-wrap; word-break: break-all; margin: 4px 0; }
.bilah-bawah { display: flex; align-items: center; gap: 4px; padding: 0 8px; border-top: 1px solid var(--garis); background: var(--latar-2); font-size: 12px; color: var(--teks-2); }
.bilah-bawah button { border: 0; background: none; height: 22px; padding: 0 8px; border-radius: 3px; cursor: pointer; color: var(--teks-2); display: inline-flex; gap: 5px; align-items: center; }
.bilah-bawah button:hover { background: var(--latar-3); }
.bilah-bawah .kanan { margin-left: auto; display: flex; align-items: center; gap: 4px; }

/* ---------- menu, dialog, toast, popover */
.menu { position: fixed; z-index: 50; background: var(--latar); border: 1px solid var(--garis); border-radius: 6px; box-shadow: var(--bayang); padding: 4px; min-width: 190px; max-height: 70vh; overflow: auto; }
.menu button { display: flex; width: 100%; align-items: center; gap: 8px; text-align: left; border: 0; background: none; padding: 6px 10px; border-radius: 4px; cursor: pointer; }
.menu button:hover, .menu button.sorot { background: var(--latar-3); }
.menu button.bahaya { color: var(--merah); }
.menu button .pintas { margin-left: auto; color: var(--teks-3); font-size: 11px; }
.menu hr { border: 0; border-top: 1px solid var(--garis); margin: 4px 0; }
.lapisan { position: fixed; inset: 0; background: rgba(0,0,0,.4); z-index: 40; display: grid; place-items: center; padding: 16px; }
.dialog { background: var(--latar); border-radius: 8px; box-shadow: var(--bayang); width: min(560px, 100%); max-height: 90vh; display: flex; flex-direction: column; border: 1px solid var(--garis); }
.dialog.lebar { width: min(860px, 100%); }
.dialog > header { padding: 14px 18px; border-bottom: 1px solid var(--garis); display: flex; align-items: center; }
.dialog > header b { font-size: 15px; }
.dialog > header .tombol { margin-left: auto; }
.dialog > .badan { padding: 16px 18px; overflow: auto; display: grid; gap: 12px; }
.dialog > footer { padding: 12px 18px; border-top: 1px solid var(--garis); display: flex; justify-content: flex-end; gap: 8px; }
.dialog label { display: grid; gap: 5px; }
.zona-jatuh { border: 2px dashed var(--garis-kuat); border-radius: 8px; padding: 30px; text-align: center; color: var(--teks-2); cursor: pointer; }
.zona-jatuh.di-atas { border-color: var(--aksen); background: var(--latar-sorot); }
.pohon-pilih { border: 1px solid var(--garis); border-radius: 6px; max-height: 300px; overflow: auto; }
.toast-wadah { position: fixed; bottom: 36px; left: 50%; transform: translateX(-50%); z-index: 60; display: grid; gap: 6px; }
.toast { background: var(--teks); color: var(--latar); padding: 8px 14px; border-radius: 6px; box-shadow: var(--bayang); max-width: 520px; }
.toast.galat { background: var(--merah); color: #fff; }
.popover { position: fixed; z-index: 45; background: var(--latar); border: 1px solid var(--garis); border-radius: 8px; box-shadow: var(--bayang); width: 480px; max-height: 70vh; overflow: auto; padding: 12px; }
.popover h4 { margin: 4px 0 8px; display: flex; align-items: center; }
.popover h4 a { margin-left: auto; font-weight: 400; font-size: 12px; cursor: pointer; }
.saran-var { position: fixed; z-index: 55; background: var(--latar); border: 1px solid var(--garis); border-radius: 6px; box-shadow: var(--bayang); max-height: 260px; overflow: auto; min-width: 260px; padding: 4px; }
.saran-var div { padding: 5px 8px; border-radius: 4px; cursor: pointer; display: flex; gap: 10px; justify-content: space-between; }
.saran-var div.sorot, .saran-var div:hover { background: var(--latar-3); }
.saran-var small { color: var(--teks-3); overflow: hidden; text-overflow: ellipsis; max-width: 160px; white-space: nowrap; }

/* ---------- halaman koleksi/folder/env/runner/docs */
.halaman { padding: 16px 24px; overflow: auto; flex: 1; }
.halaman h1 { font-size: 20px; margin: 0 0 4px; }
.markdown { line-height: 1.6; max-width: 900px; overflow-wrap: anywhere; }
.markdown table { border-collapse: collapse; margin: 8px 0; }
.markdown th, .markdown td { border: 1px solid var(--garis); padding: 4px 10px; text-align: left; }
.markdown code { background: var(--latar-3); padding: 1px 4px; border-radius: 3px; }
.markdown pre { background: var(--kode-latar); border: 1px solid var(--garis); padding: 10px; border-radius: 6px; overflow: auto; }
.markdown pre code { background: none; padding: 0; }
.markdown h1, .markdown h2, .markdown h3 { margin: 16px 0 6px; }
.edit-md { display: grid; gap: 6px; }
.edit-md textarea { min-height: 200px; font-family: var(--mono); }
.angka-ringkas { display: flex; gap: 24px; margin: 14px 0; color: var(--teks-2); }
.angka-ringkas b { display: block; font-size: 18px; color: var(--teks); }
.tabel-env td.tipe { width: 110px; }
.runner { display: grid; grid-template-columns: 340px 1fr; gap: 0; flex: 1; min-height: 0; }
.runner .kiri { border-right: 1px solid var(--garis); padding: 16px; overflow: auto; display: grid; gap: 12px; align-content: start; }
.runner .kanan { overflow: auto; padding: 16px; }
.runner .urutan { border: 1px solid var(--garis); border-radius: 6px; max-height: 320px; overflow: auto; }
.runner .urutan label { display: flex; gap: 6px; align-items: center; padding: 4px 8px; border-bottom: 1px solid var(--garis); }
.hasil-run { border: 1px solid var(--garis); border-radius: 6px; margin-bottom: 8px; }
.hasil-run summary { padding: 8px 12px; cursor: pointer; display: flex; gap: 10px; align-items: center; }
.hasil-run .rinci { padding: 0 12px 10px 24px; }
.ringkas-run { display: flex; gap: 12px; align-items: center; margin-bottom: 12px; flex-wrap: wrap; }
.docs { display: grid; grid-template-columns: 260px 1fr; flex: 1; min-height: 0; }
.docs nav { border-right: 1px solid var(--garis); overflow: auto; padding: 12px 0; }
.docs nav a { display: flex; gap: 6px; padding: 3px 12px; color: var(--teks); text-decoration: none; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.docs nav a:hover { background: var(--latar-3); }
.docs nav .folder { font-weight: 600; margin-top: 6px; }
.docs main { overflow: auto; padding: 20px 32px 80px; }
.docs .ep { border-top: 1px solid var(--garis); padding: 24px 0; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 420px); gap: 24px; }
.docs .ep h3 { margin: 0 0 6px; display: flex; gap: 8px; align-items: baseline; }
.docs .ep .url { font-family: var(--mono); background: var(--latar-2); border: 1px solid var(--garis); border-radius: 4px; padding: 6px 8px; overflow-wrap: anywhere; }
.docs .contoh pre { background: #1f1f23; color: #e5e7eb; padding: 12px; border-radius: 6px; overflow: auto; font-size: 12px; margin: 0 0 12px; max-height: 420px; }
.docs .contoh select { margin-bottom: 6px; }
.docs h2.folder { margin: 28px 0 0; padding-top: 12px; }
.panel-kode { width: 420px; border-left: 1px solid var(--garis); display: flex; flex-direction: column; min-height: 0; }
.panel-kode pre { margin: 0; flex: 1; overflow: auto; padding: 12px; background: var(--kode-latar); font-size: 12px; white-space: pre-wrap; word-break: break-all; }
.dengan-kode { display: flex; flex: 1; min-height: 0; }
.dengan-kode > .utama-kode { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.riwayat-hari { padding: 8px 12px 4px; font-weight: 600; color: var(--teks-2); font-size: 12px; }

@media (max-width: 800px) {
    .tengah { grid-template-columns: 52px 1fr; }
    .tengah:not(.sisi-tutup) .area-kerja, .tengah .pengubah-lebar { display: none; }
    .tengah.sisi-tutup .panel-sisi { display: none; }
    .belah.samping { grid-template-columns: none; grid-template-rows: minmax(120px, 45%) 5px 1fr; }
    .runner, .docs, .form-auth, .dua-kolom { grid-template-columns: 1fr; }
    .docs .ep { grid-template-columns: 1fr; }
    .panel-kode { width: 100%; }
    .bilah-atas .merek b { display: none; }
    .bilah-atas .merek img { height: 24px; }
    .bilah-atas { gap: 4px; padding: 0 8px; }
    .bilah-atas > .tombol.tipis { padding: 0 6px; font-size: 0; gap: 0; }
    .pilih-env { max-width: 150px; }
    .bilah-bawah button { padding: 0 5px; }
}

/* ---------- workspace, tamu, undangan */
.pilih-ruang { max-width: 300px; }
.pilih-ruang .nama-ruang { overflow: hidden; text-overflow: ellipsis; font-weight: 600; color: #fff; }
.lencana-peran { font-size: 10.5px; padding: 1px 6px; border-radius: 9px; background: rgba(226,194,127,.18); color: var(--emas-terang); }
.mode-coba { font-size: 11px; font-weight: 600; padding: 3px 8px; border-radius: 10px; background: var(--emas); color: #051A42; white-space: nowrap; }
.tombol.emas { background: var(--emas); border-color: var(--emas); color: #051A42; font-weight: 600; }
.tombol.emas:hover { background: var(--emas-terang); }
.pilih-mode { display: grid; grid-template-columns: 1fr 1fr; border: 1px solid var(--garis); border-radius: 6px; overflow: hidden; }
.pilih-mode a { text-align: center; padding: 7px; text-decoration: none; color: var(--teks-2); font-weight: 600; }
.pilih-mode a.aktif { background: var(--navy); color: #fff; }
.kartu-masuk a.tombol { justify-content: center; height: 38px; text-decoration: none; }
.tautan-tamu { text-align: center; color: var(--emas-gelap); font-weight: 600; text-decoration: none; }
.tautan-tamu:hover { text-decoration: underline; }
.kotak-undangan { border: 1px solid var(--garis); border-left: 4px solid var(--emas); border-radius: 6px; padding: 12px 14px; display: grid; gap: 2px; }
.kotak-undangan b { font-size: 16px; }
.kotak-undangan span { color: var(--teks-2); }
.kotak-tautan { margin-top: 12px; padding: 12px; border: 1px dashed var(--emas); border-radius: 8px; background: var(--latar-2); max-width: 760px; }
@media (max-width: 800px) {
    .pilih-ruang .lencana-peran, .mode-coba { display: none; }
    .pilih-ruang { max-width: 130px; }
}