/* Palette and density layer. No controls or content are hidden by these modes. */
:root[data-nuansa] {
  --v-bg:#f3f5f3;--v-paper:#fff;--v-muted:#edf1ee;--v-line:#dce3dd;
  --v-ink:#22332e;--v-secondary:#52625a;--v-subtle:#68766d;
  --side:#20332e;--side-text:#d9e2dc;--side-muted:#a2b5a8;--side-active:#ffffff12;--side-line:#ffffff16;
  --latar:var(--v-bg);--permukaan:var(--v-paper);--permukaan-2:var(--v-muted);--garis:var(--v-line);
  --teks:var(--v-ink);--teks-2:var(--v-secondary);--teks-3:var(--v-subtle);
  --garis-kuat:color-mix(in srgb,var(--v-line),var(--v-ink) 20%);
  --aksen-lembut:color-mix(in srgb,var(--aksen) 9%,transparent);
  --bulat:9px;--bulat-kecil:6px;
}
:root[data-nuansa="kertas"] {
  --v-bg:#f5f2eb;--v-paper:#fffefb;--v-muted:#eee9df;--v-line:#e1ddd2;
  --v-ink:#363a30;--v-secondary:#5e6357;--v-subtle:#74786c;
  --side:#eae6da;--side-text:#394034;--side-muted:#65705e;--side-active:#fffdf9;--side-line:#38433119;
}
:root[data-nuansa="kabut"] {
  --v-bg:#edf2f6;--v-paper:#fcfdff;--v-muted:#e7eef4;--v-line:#d9e3ec;
  --v-ink:#253648;--v-secondary:#52667a;--v-subtle:#64798e;
  --side:#e2eaf2;--side-text:#354b60;--side-muted:#5f7488;--side-active:#fcfdff;--side-line:#29445d1c;
}
:root[data-tema="gelap"][data-nuansa] {
  --v-bg:#151d1b;--v-paper:#1e2824;--v-muted:#27352e;--v-line:#35453b;
  --v-ink:#e6eee8;--v-secondary:#b9c8be;--v-subtle:#a0b4a6;
  --side:#101a16;--side-text:#d5e2d9;--side-muted:#99afa0;--side-active:#ffffff0d;--side-line:#ffffff14;
}
:root[data-tema="gelap"][data-nuansa="kertas"] {
  --v-bg:#211f1b;--v-paper:#2b2924;--v-muted:#353229;--v-line:#494437;
  --v-ink:#efece2;--v-secondary:#cac5b8;--v-subtle:#b1aa99;--side:#191814;
}
:root[data-tema="gelap"][data-nuansa="kabut"] {
  --v-bg:#161e28;--v-paper:#202b38;--v-muted:#2b3949;--v-line:#3b4b5e;
  --v-ink:#e4edf8;--v-secondary:#bacadd;--v-subtle:#9cafc7;--side:#101722;
}
@media(prefers-color-scheme:dark) {
  :root:not([data-tema="terang"])[data-nuansa] {
    --v-bg:#151d1b;--v-paper:#1e2824;--v-muted:#27352e;--v-line:#35453b;
    --v-ink:#e6eee8;--v-secondary:#b9c8be;--v-subtle:#a0b4a6;
    --side:#101a16;--side-text:#d5e2d9;--side-muted:#99afa0;--side-active:#ffffff0d;--side-line:#ffffff14;
  }
  :root:not([data-tema="terang"])[data-nuansa="kertas"] {
    --v-bg:#211f1b;--v-paper:#2b2924;--v-muted:#353229;--v-line:#494437;
    --v-ink:#efece2;--v-secondary:#cac5b8;--v-subtle:#b1aa99;--side:#191814;
  }
  :root:not([data-tema="terang"])[data-nuansa="kabut"] {
    --v-bg:#161e28;--v-paper:#202b38;--v-muted:#2b3949;--v-line:#3b4b5e;
    --v-ink:#e4edf8;--v-secondary:#bacadd;--v-subtle:#9cafc7;--side:#101722;
  }
}
body {font-family:Inter,ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;font-size:14px;line-height:1.6}
h1,h2,h3 {font-weight:600;letter-spacing:-.035em}
.aplikasi {grid-template-columns:240px minmax(0,1fr)}
.samping {background:var(--side);border-right:0;padding:30px 16px 18px;color:var(--side-text)}
.samping .merek {font-size:24px;letter-spacing:-.045em;padding:0 10px 25px;color:var(--side-text)}
.samping .merek-sub {color:var(--side-muted);font-size:9px;letter-spacing:.18em;margin-top:3px}
.samping .merek .lambang {background:#fff;outline:1px solid #ffffff20;width:32px;height:32px}
.samping .navi button {font-size:13px;min-height:41px;color:var(--side-text);font-weight:450;border-radius:6px}
.samping .navi button:hover {background:var(--side-active);color:var(--side-text)}
.samping .navi button.aktif {background:var(--side-active);box-shadow:none;color:var(--side-text);font-weight:650;position:relative}
.samping .navi button.aktif::after {content:"";width:4px;height:4px;border-radius:50%;background:currentColor;margin-left:auto}
.samping .grup-navi {color:var(--side-muted);font-size:9px;font-weight:500;letter-spacing:.14em;padding-top:19px}
.samping .grup-navi.pemisah,.samping .bawah {border-color:var(--side-line)}
.samping .sakelar-mode {background:transparent;border-color:var(--side-line);padding:5px}
.samping .sakelar-mode span,.samping .sakelar-mode button,.samping .kartu-pengguna .pr {color:var(--side-muted)}
.samping .sakelar-mode button.aktif {background:var(--side-active);color:var(--side-text);box-shadow:none}
.samping .avatar {background:var(--side-active);border:1px solid var(--side-line);color:var(--side-text)}
.samping .kartu-pengguna .nm {font-size:13px;color:var(--side-text)}
.samping .kartu-pengguna .pr {font-size:11px}
.atas {min-height:80px;padding:18px 38px;background:var(--permukaan);border-bottom:1px solid var(--garis)}
.sapaan h1 {font-weight:550;font-size:15px;letter-spacing:-.015em}
.sapaan p {font-size:11px}
.tombol-ikon {border-color:var(--garis);border-radius:6px}
.tombol-cari {background:transparent;min-width:180px}
main {padding:32px 38px 110px;max-width:1640px}
.judul-hal {margin-bottom:27px}
.judul-hal h2 {font-size:32px;font-weight:550;letter-spacing:-.055em}
.judul-hal p {font-size:13px;max-width:800px;color:var(--teks-3)}
.kartu {border-radius:8px;box-shadow:none}
.kartu h4 {font-size:14px;font-weight:600;letter-spacing:-.02em}
.tombol {border-radius:6px;font-size:13px;font-weight:550}
.tombol.hantu {font-weight:500}
.tombol.kedua {border-color:var(--garis-kuat)}
.tombol.bahaya {background:var(--merah-bg);color:var(--merah-tx);border-color:color-mix(in srgb,var(--merah) 28%,transparent)}
.pil,.status-bot,.chip-peran {border-radius:4px}
.kotak-perintah.besar {background:transparent;border:0;border-bottom:1px solid var(--garis);border-radius:0;padding:0 0 26px;margin-bottom:26px;gap:11px}
.kotak-perintah.besar .judul-kotak {font-size:16px;font-weight:550;letter-spacing:-.02em;display:flex;align-items:center;gap:8px}
.kotak-perintah.besar .judul-kotak>.ikon {color:var(--teks-3);width:17px;height:17px}
.kotak-perintah textarea {min-height:90px;background:var(--permukaan);border:1px solid var(--garis-kuat);border-radius:8px;padding:16px;font-size:14px}
.kotak-perintah .baris-kotak {gap:14px}
.kotak-perintah .chip {font-size:12px;border:1px solid var(--garis);border-radius:5px;color:var(--teks-2);background:var(--permukaan);line-height:1.5;padding:6px 10px}
.kotak-perintah .chip:hover {background:var(--permukaan-2);border-color:var(--garis-kuat)}
.grid-beranda {grid-template-columns:minmax(0,1.4fr) minmax(0,1fr);gap:18px;align-items:start}
.grid-beranda>.kartu {min-height:0;align-self:start}
.grid-beranda>.kolom-nusa {grid-column:auto;grid-row:auto}
.baris-kartu {font-size:13px;line-height:1.6}
.baris-harian {margin-top:20px;background:transparent;border-radius:5px}
.angka-4 {grid-template-columns:repeat(2,minmax(0,1fr));padding:4px 0 16px;gap:20px}
.angka-4 b {font-size:32px;font-weight:450;font-variant-numeric:tabular-nums;letter-spacing:-.055em;line-height:1.2}
.angka-4 small {display:block;margin-top:5px;font-size:11px;color:var(--teks-3)}
.kolom-nusa {gap:14px}
.kolom-nusa .kartu-lampu {border-radius:5px;font-size:12px;line-height:1.6;margin-top:0}
.kolom-nusa .riwayat-batas {border-top:1px solid var(--garis);padding-top:13px;font-size:11px}
.riwayat-batas>b {color:var(--teks-2)}
.riwayat-batas .ikon {color:var(--teks-3);width:14px;height:14px}
.pandangan-pimpinan.kartu,.ringkasan-pagi.kartu {background:transparent;border-width:0 0 1px;border-radius:0;padding:18px 0;margin:6px 0}
.pandangan-pimpinan>summary,.ringkasan-pagi>summary {font-size:12px;line-height:1.7}
.tombol-tanya {background:var(--permukaan);color:var(--teks);border:1px solid var(--garis-kuat);border-radius:7px;box-shadow:0 3px 12px #16271c0e;font-weight:550}
.tombol-tanya .ikon {color:var(--aksen-teks)}
.merek .lambang,.avatar {background:var(--aksen)}
.masuk-kiri,:root[data-tema="gelap"] .masuk-kiri {background:#20332e}
@media(prefers-color-scheme:dark) {:root:not([data-tema="terang"]) .masuk-kiri{background:#20332e}}
@media(min-width:1250px) {
  .grid-beranda:has(.beranda-tujuan) {grid-template-columns:minmax(0,1fr) minmax(0,1fr) minmax(250px,.9fr);grid-template-rows:auto 1fr;align-items:stretch}
  .grid-beranda:has(.beranda-tujuan)>.beranda-prioritas,.grid-beranda:has(.beranda-tujuan)>.beranda-tujuan {align-self:stretch}
  .grid-beranda:has(.beranda-tujuan)>.kolom-nusa {grid-column:3;grid-row:1 / span 2;align-self:stretch}
  .grid-beranda:has(.beranda-tujuan)>.beranda-persetujuan {grid-column:1 / span 2;align-self:start}
}
:root[data-jarak="ringkas"] .atas {min-height:64px;padding-top:12px;padding-bottom:12px}
:root[data-jarak="ringkas"] main {padding-top:22px}
:root[data-jarak="ringkas"] .judul-hal {margin-bottom:19px}
:root[data-jarak="ringkas"] .kartu {padding:16px}
:root[data-jarak="ringkas"] .kartu h4 {margin-bottom:12px}
:root[data-jarak="ringkas"] .baris-kartu {padding:9px 0}
:root[data-jarak="ringkas"] .kotak-perintah.besar {padding:0 0 20px;gap:8px}
:root[data-jarak="ringkas"] .kotak-perintah textarea {min-height:72px;padding:12px}
:root[data-jarak="ringkas"] .samping .navi button {min-height:35px;padding-top:7px;padding-bottom:7px}
:root[data-jarak="ringkas"] .samping .grup-navi {padding-top:13px}
:root[data-jarak="ringkas"] td,:root[data-jarak="ringkas"] th {padding-top:9px;padding-bottom:9px}

/* Appearance panel: native radios, keyboard access, live preview. */
#dialog:has(.visual-panel) {max-width:560px;width:calc(100% - 32px)}
.visual-panel {color:var(--teks)}
.visual-kepala {display:flex;justify-content:space-between;align-items:start;gap:16px}
.visual-kepala .label-editorial {font-size:9px;letter-spacing:.16em;margin-bottom:8px}
.visual-kepala h3 {font-size:23px;font-weight:550;letter-spacing:-.035em;margin:0}
.visual-intro {font-size:12px;color:var(--teks-3);margin:9px 0 25px}
.visual-panel fieldset {border:0;padding:0;margin:0 0 23px;min-width:0}
.visual-panel legend {font-size:12px;font-weight:600;margin-bottom:11px;padding:0}
.visual-segmen,.visual-nuansa,.visual-warna {display:grid;gap:8px;grid-template-columns:repeat(3,minmax(0,1fr))}
.visual-segmen:has([name="visual-jarak"]) {grid-template-columns:1fr 1fr}
.opsi-visual {position:relative;display:flex;flex-direction:column;gap:9px;border:1px solid var(--garis);border-radius:7px;padding:10px;cursor:pointer;font-size:12px;background:var(--permukaan)}
.opsi-visual input {position:absolute;width:1px;height:1px;opacity:0;padding:0;margin:0}
.opsi-visual:has(input:checked) {border-color:var(--aksen);box-shadow:0 0 0 1px var(--aksen)}
.opsi-visual:has(input:focus-visible) {outline:3px solid var(--aksen-lembut);outline-offset:4px}
.opsi-label {font-weight:550;line-height:1.5}
.opsi-label small {display:block;font-size:10px;color:var(--teks-3);font-weight:400;margin-top:2px}
.opsi-centang {display:none;position:absolute;bottom:10px;right:8px;color:var(--aksen-teks)}
.opsi-centang .ikon {width:13px;height:13px}
.opsi-visual:has(input:checked) .opsi-centang {display:block}
.segmen {justify-content:center;min-height:43px;padding:10px 13px}
.segmen .opsi-gambar {display:none}
.opsi-visual.segmen .opsi-centang {display:none!important}
.segmen:has(input:checked) {background:var(--aksen-lembut)}
.visual-nuansa .opsi-gambar {height:57px;border:1px solid #213d3017;border-radius:4px;background:#f3f5f3;position:relative;overflow:hidden}
.visual-nuansa .opsi-gambar::before {content:"";position:absolute;inset:0 auto 0 0;width:25%;background:#20332e}
.visual-nuansa .opsi-gambar::after {content:"";position:absolute;top:13px;left:34%;right:10%;height:9px;background:#fff;box-shadow:0 16px #fff}
.preview-kertas .opsi-gambar {background:#f5f2eb}.preview-kertas .opsi-gambar::before {background:#dedacc}
.preview-kabut .opsi-gambar {background:#edf2f6}.preview-kabut .opsi-gambar::before {background:#c6d5e3}
.visual-warna {grid-template-columns:repeat(6,minmax(0,1fr));gap:7px}
.swatch {padding:9px 4px;text-align:center;align-items:center;font-size:10px;gap:7px}
.swatch .opsi-gambar {width:21px;height:21px;border-radius:50%;background:var(--swatch);border:1px solid #ffffff30}
.swatch-mineral {--swatch:#276557}.swatch-grafit {--swatch:#3e4c59}.swatch-samudra {--swatch:#375d8d}
.swatch-tanah {--swatch:#99513f}.swatch-prem {--swatch:#77516c}.swatch-identitas {--swatch:var(--aksen-identitas)}
.swatch .opsi-centang {display:none!important}
.visual-catatan {font-size:11px;color:var(--teks-3);margin:9px 0 0}
.visual-footer {display:flex;justify-content:space-between;gap:12px;border-top:1px solid var(--garis);padding-top:18px}
@media(max-width:1100px) and (min-width:901px) {.aplikasi{grid-template-columns:210px minmax(0,1fr)}.atas,main{padding-left:24px;padding-right:24px}.tombol-cari{min-width:135px}}
@media(max-width:900px) {
  .aplikasi {grid-template-columns:minmax(0,1fr)}
  .atas {padding:18px 20px;min-height:80px;gap:9px}
  main {padding:26px 20px 150px}
  .judul-hal h2 {font-size:29px}
  .tombol-cari {min-width:0}
  .grid-beranda {grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media(max-width:600px) {
  .atas {padding:15px 16px;flex-wrap:wrap;gap:10px}
  .atas .kanan {gap:5px}
  .atas .tombol-ikon,.atas .tombol-cari {width:32px;height:36px;border:0}
  .sapaan h1 {font-size:14px}.sapaan p {font-size:10px}
  main {padding:24px 16px 150px}
  .judul-hal h2 {font-size:28px}.judul-hal p {font-size:12px}
  .grid-beranda {grid-template-columns:minmax(0,1fr);gap:14px}
  .kotak-perintah.besar {padding:0 0 23px}
  .kotak-perintah textarea {font-size:16px}
  .kotak-perintah .chip {font-size:12px;padding:7px 10px}
  :root[data-jarak="ringkas"] .tombol {min-height:44px}
  .visual-nuansa {gap:6px}.opsi-visual{padding:9px 7px}
  .visual-warna {grid-template-columns:repeat(3,minmax(0,1fr))}
  .visual-footer {gap:8px}.visual-footer .tombol {font-size:12px}
  #dialog:has(.visual-panel) {max-height:calc(100dvh - 24px)}
  #dialog:has(.visual-panel) .dialog-isi {padding:20px}
  .visual-kepala h3 {font-size:22px}
  .visual-panel fieldset {margin-bottom:18px}
  .visual-intro {margin-bottom:20px}
  .visual-footer {position:sticky;bottom:-20px;background:var(--permukaan);padding:14px 0 16px;margin-bottom:-20px}
}