/* ARG Maintenance — token, layout, dan komponen mengikuti ARGS Portal (Pratinjau 20):
   Montserrat, tinta #111111, ungu #8338EC, kuning #FFB703, pink #FF4D6D + putih dengan transparansi. */

:root {
  --skala: .8;            /* ukuran tampilan di laptop/desktop (pilihan di halaman Akun) */
  color-scheme: light;
  --navy: #111111;
  --pink: #FF4D6D;
  --yellow: #FFB703;
  --blue: #8338EC;
  --blue-soft: #8338EC0D;
  --page: #FFFFFF;
  --card: #FFFFFF;
  --card-2: #8338EC05;
  --sunk: #1111110A;
  --line: #11111112;
  --line-2: #11111124;
  --line-in: #11111166;
  --ink: #111111;
  --ink-2: #514858;
  --ink-3: #706977;
  --ok: #8338EC; --ok-bg: #8338EC12; --ok-line: #8338EC40;
  --warn: #111111; --warn-bg: #FFB70326; --warn-line: #FFB70380;
  --bad: #111111; --bad-bg: #FF4D6D1A; --bad-line: #FF4D6D66;
  --info: #8338EC; --info-bg: #8338EC0D; --info-line: #8338EC40;
  --r: 14px;
  --r-sm: 10px;
  --fd: "Montserrat", "Segoe UI", system-ui, sans-serif;
  --fb: "Montserrat", "Segoe UI", system-ui, sans-serif;
  --fm: "Montserrat", "Segoe UI", system-ui, sans-serif;
}

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { margin: 0; }
body {
  background: #11111105;
  color: var(--ink);
  font-family: var(--fb);
  font-size: 14px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}
h1, h2, h3 { font-family: var(--fd); margin: 0; letter-spacing: -.015em; }
p { margin: 0; }
a { color: var(--blue); }
button { font: inherit; color: inherit; cursor: pointer; border: 0; background: none; }
button:disabled { cursor: not-allowed; opacity: .55; }
input, select, textarea { font-family: var(--fb); }
:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; border-radius: 8px; }
[hidden] { display: none !important; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ---------- Kerangka aplikasi ----------
   HP (<768px): kop atas, isi bergulir, tab bawah — sama dengan ARGS Portal.
   Tablet & desktop (≥768px): menu samping kiri, isi memenuhi lebar layar (maks --lebar-isi).
   Kolom tambahan mengikuti lebar isi yang sebenarnya lewat container query "isi", sehingga tetap
   pas untuk zoom aplikasi 80/90/100% maupun zoom browser (lihat bagian paling bawah). */
.app {
  position: relative;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  width: 100%;
  background: #FFFFFF;
  height: 100dvh;
  min-height: 520px;
}
.app.fokus .tabbar { display: none; }

.kop {
  flex: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: calc(env(safe-area-inset-top) + 18px) 20px 16px;
  background: #FFFFFFF7;
  border-bottom: 1px solid var(--line);
  -webkit-backdrop-filter: blur(10px) saturate(110%);
  backdrop-filter: blur(10px) saturate(110%);
}
.kop h1 { font-size: 19px; font-weight: 800; display: flex; align-items: center; gap: 7px; flex-wrap: wrap; }
.kop .sub { font-size: 12px; color: var(--ink-3); margin-top: 2px; }
.kop .back { display: inline-grid; place-items: center; width: 34px; height: 34px; margin-right: 2px; border-radius: 11px; background: #8338EC0B; color: var(--ink); text-decoration: none; }
.kop-kiri { display: flex; align-items: center; gap: 8px; min-width: 0; }
.badge-kop { display: inline-block; font-size: 9px; line-height: 1.5; font-weight: 600; padding: 3px 6px; border-radius: 6px; background: #8338EC12; color: #58259E; letter-spacing: 0; }
.badge-kop.demo { background: #FFB70333; color: #111111; }

.avatar-btn { padding: 0; border-radius: 13px; flex: none; text-decoration: none; }
.avatar {
  width: 42px; height: 42px; border-radius: 13px; flex: none;
  background: #FF4D6D26; color: #111111;
  font-family: var(--fd); font-weight: 800; font-size: 15px;
  display: grid; place-items: center; transition: transform .12s ease;
}
.avatar-btn:active .avatar { transform: scale(.94); }

.isi { flex: 1; overflow-y: auto; padding: 16px 16px 12px; display: flex; flex-direction: column; gap: 13px; }
.isi::-webkit-scrollbar { width: 0; }

.aksi {
  flex: none;
  display: flex;
  gap: 8px;
  padding: 10px 16px calc(env(safe-area-inset-bottom) + 12px);
  background: var(--card);
  border-top: 1px solid var(--line);
  box-shadow: 0 -8px 22px rgba(17,17,17,.06);
}

/* ---------- Tab bawah ---------- */
.tabbar {
  flex: none;
  display: grid;
  grid-template-columns: 1fr 1fr 1.35fr 1fr 1fr;
  gap: 3px;
  padding: 7px 7px calc(env(safe-area-inset-bottom) + 7px);
  background: rgba(255,255,255,.97);
  border-top: 1px solid #8338EC21;
  box-shadow: 0 -3px 14px #11111105;
}
.tabbar a {
  position: relative;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px;
  min-height: 52px; padding: 6px 1px; border-radius: 12px;
  font-family: var(--fd); font-size: 11px; font-weight: 600; color: #11111196; text-decoration: none;
  transition: background .18s, transform .18s;
}
.tabbar a.aktif { background: #8338EC20; color: #8338EC; box-shadow: inset 0 1px 0 white; }
.tabbar a.utama {
  margin-top: -9px; min-height: 62px; border-radius: 17px;
  background: var(--blue); color: #FFFFFF; border: 2px solid white;
  box-shadow: 0 4px 12px #8338EC24, inset 0 1px 1px #FFFFFF30; font-size: 10px;
}
.tabbar a:active { transform: scale(.96); }
.tabbar .bintik { position: absolute; top: 6px; right: calc(50% - 16px); min-width: 16px; height: 16px; padding: 0 4px; border-radius: 99px; background: var(--pink); color: #111111; font-size: 9px; font-weight: 700; display: grid; place-items: center; }
.tabbar .nama-lebar, .tabbar .brand, .tabbar .nav-kaki, .tabbar a.hanya-samping, .tabbar .grup-nav { display: none; }
.tabbar.tanpa-input { grid-template-columns: repeat(4, 1fr); }

/* Pita "Melihat sebagai" (dev) */
.kop { flex-wrap: wrap; }
.pita-lihat { flex-basis: 100%; display: flex; align-items: center; gap: 8px; margin-top: 2px; padding: 7px 8px 7px 11px; border-radius: 12px; background: #FFB70326; border: 1px solid #FFB70366; font-size: 12px; line-height: 1.35; color: var(--ink); }
.pita-lihat > span { flex: 1; min-width: 0; }
.pita-lihat .tb { min-height: 32px; padding: 5px 11px; font-size: 12px; }
@media (max-width: 767px) { .pita-ket { display: none; } }
.ikon { display: inline-flex; }
.ikon svg { display: block; }

/* ---------- Tipografi kecil ---------- */
.section-title { font-size: 15px; font-weight: 800; line-height: 1.4; font-family: var(--fd); }
.tgl-baris { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; }
.tgl-baris .t { font-family: var(--fd); font-weight: 800; font-size: 16px; }
.tgl-baris .l { font-size: 12px; color: var(--ink-3); text-align: right; }
.eyebrow { font-family: var(--fm); letter-spacing: .1em; font-size: 10px; color: #8338EC; text-transform: uppercase; font-weight: 600; }
.label-kecil { font-size: 12px; color: var(--ink-2); font-weight: 600; margin-left: 2px; }
.fineprint { font-size: 11.5px; color: var(--ink-3); line-height: 1.6; }
.angka { font-variant-numeric: tabular-nums; }

/* ---------- Kartu ---------- */
.kartu {
  background: #FFFFFF;
  border: 1px solid var(--line);
  border-radius: var(--r);
  padding: 15px;
  box-shadow: 0 4px 14px #11111105, inset 1px 1px 0 #FFFFFF;
}
.kartu-2 { background: var(--card-2); }
.kartu > .section-title + * { margin-top: 10px; }
.kartu-kop { display: flex; justify-content: space-between; align-items: center; gap: 10px; margin-bottom: 10px; }
.kartu-kop .section-title { margin: 0; }

.hero {
  position: relative;
  padding: 18px;
  border-radius: 18px;
  background: linear-gradient(120deg, #FFFFFF 60%, #8338EC10);
  border: 1px solid #8338EC24;
  box-shadow: 0 5px 15px #8338EC06;
}
.hero .hero-status { font-family: var(--fd); font-size: 22px; font-weight: 800; line-height: 1.2; margin-top: 6px; }
.hero .hero-detail { font-size: 12.5px; color: var(--ink-3); margin-top: 5px; }
.hero .hero-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 14px; flex-wrap: wrap; }
.hero .hero-angka { font-family: var(--fm); font-weight: 700; font-size: 25px; color: #8338EC; font-variant-numeric: tabular-nums; }

.gradasi { background: linear-gradient(120deg, #8338EC18, #FFB70318); border: 1px solid #8338EC24; }

.grid-ringkas { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.ringkas-mini {
  display: block; text-decoration: none; color: inherit; text-align: left;
  padding: 12px 10px; border-radius: 12px;
  background: linear-gradient(130deg, var(--card-start, #8338EC30), var(--card-end, #8338EC0A));
  background-color: #FFFFFF;
  border: 1px solid var(--card-edge, #8338EC38);
  box-shadow: 0 4px 12px #11111106, inset 1px 1px 0 #FFFFFF99;
  transition: transform .15s;
}
.ringkas-mini:active { transform: scale(.98); }
.ringkas-mini .angka { display: block; font-family: var(--fm); font-size: 18px; font-weight: 700; line-height: 1.2; overflow-wrap: anywhere; }
.ringkas-mini .judul { display: block; font-size: 11.5px; color: var(--ink-2); margin-top: 4px; line-height: 1.25; }
.ringkas-mini.kuning { --card-start: #FFB70340; --card-end: #FFB7030D; --card-edge: #FFB70350; }
.ringkas-mini.pink { --card-start: #FF4D6D29; --card-end: #FFB70312; --card-edge: #FF4D6D30; }
button.ringkas-mini { width: 100%; border-style: solid; }
.ringkas-mini[aria-pressed="true"] { outline: 2px solid #111111; outline-offset: -1px; }
.grid-ringkas.empat { grid-template-columns: repeat(2, 1fr); }

.stat-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.stat { background: var(--card); border: 1px solid var(--line); border-radius: var(--r); padding: 13px 14px; box-shadow: 0 4px 14px #11111105; }
.stat .l { font-size: 12px; color: var(--ink-3); line-height: 1.35; }
.stat .v { font-family: var(--fm); font-weight: 700; font-size: 20px; margin-top: 5px; font-variant-numeric: tabular-nums; }
.stat .v small { font-size: 12px; color: var(--ink-3); font-weight: 500; }
.stat .d { font-size: 11.5px; margin-top: 2px; color: var(--ink-2); font-weight: 600; }
.stat.lebar { grid-column: 1 / -1; }

/* ---------- Baris daftar ---------- */
.daftar { display: flex; flex-direction: column; }
.baris { display: flex; align-items: center; gap: 12px; padding: 11px 0; color: inherit; text-decoration: none; }
.baris + .baris { border-top: 1px solid var(--line); }
a.baris, button.baris { width: 100%; text-align: left; border-radius: 10px; transition: transform .14s ease, background .14s ease; }
a.baris:active, button.baris:active { background: var(--card-2); transform: scale(.985); }
.baris .kotak {
  width: 34px; height: 34px; border-radius: 10px; flex: none; display: grid; place-items: center;
  font-family: var(--fm); font-size: 11px; font-weight: 700;
  background: #8338EC1C; color: #8338EC; border: 1px solid #8338EC41;
}
.baris .kotak.kuning { background: #FFB70355; color: #111111; border-color: #FFB703; }
.baris .kotak.pink { background: #FF4D6D26; color: #111111; border-color: #FF4D6D66; }
.baris .teks { flex: 1; min-width: 0; }
.baris .utama { font-weight: 650; font-size: 14px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.baris .kecil { font-size: 12px; color: var(--ink-3); margin-top: 1px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.baris .kanan { text-align: right; flex: none; display: flex; flex-direction: column; align-items: flex-end; gap: 4px; }
.baris .nilai { font-family: var(--fm); font-weight: 700; font-size: 13.5px; font-variant-numeric: tabular-nums; }
.kosong { text-align: center; padding: 26px 10px; color: var(--ink-3); font-size: 13.5px; line-height: 1.6; }

/* ---------- Pil / status ---------- */
.status-badge {
  display: inline-flex; align-items: center; gap: 5px;
  background: var(--status-bg); color: var(--status-ink); border: 1px solid var(--status-line);
  font-size: 11px; font-weight: 650; line-height: 1.4; padding: 3px 8px; border-radius: 999px;
  max-width: 100%; white-space: nowrap;
}
.status-badge::before { content: ''; width: 5px; height: 5px; border-radius: 50%; background: var(--status-color); flex: none; }
.tone-good { --status-bg: #8338EC12; --status-ink: #58259E; --status-line: #8338EC40; --status-color: #8338EC; }
.tone-warn { --status-bg: #FFB70326; --status-ink: #111111; --status-line: #FFB70380; --status-color: #FFB703; }
.tone-bad { --status-bg: #FF4D6D1A; --status-ink: #111111; --status-line: #FF4D6D66; --status-color: #FF4D6D; }
.tone-neutral { --status-bg: #1111110A; --status-ink: #514858; --status-line: #11111124; --status-color: #706977; }
.tone-muted { --status-bg: #FFFFFF; --status-ink: #706977; --status-line: #11111124; --status-color: #11111133; }

.chip-wrap { display: flex; gap: 8px; overflow-x: auto; padding-bottom: 2px; scrollbar-width: none; }
.chip-wrap::-webkit-scrollbar { display: none; }
.chip {
  flex: none; display: inline-flex; align-items: center; gap: 6px;
  min-height: 40px; padding: 8px 14px; border-radius: 99px;
  border: 1px solid #8338EC39; background: #FFFFFF; color: var(--ink);
  font-size: 12.5px; font-weight: 600; white-space: nowrap;
}
.chip[aria-pressed="true"] { background: #111111; color: #FFFFFF; border-color: #111111; }

.segmented { display: flex; padding: 4px; gap: 4px; border-radius: 13px; background: #11111105; border: 1px solid var(--line); }
.segmented button { flex: 1; min-width: 0; border-radius: 10px; min-height: 40px; padding: 7px 8px; font-size: 12px; color: var(--ink-2); line-height: 1.3; font-weight: 600; }
.segmented button[aria-pressed="true"] { background: #FFFFFF; color: #8338EC; box-shadow: 0 2px 6px #1111110A; font-weight: 700; }

/* ---------- Tombol ---------- */
.tb {
  flex: 1;
  display: inline-flex; align-items: center; justify-content: center; gap: 7px;
  min-height: 50px; padding: 12px 14px; border-radius: 13px;
  border: 1px solid var(--line-2); background: var(--card); color: var(--ink);
  font-family: var(--fd); font-weight: 700; font-size: 14px; line-height: 1.15;
  text-decoration: none; text-align: center;
  transition: transform .12s ease;
}
.tb:active { transform: scale(.97); }
.tb-biru { background: var(--blue); color: #FFFFFF; border-color: var(--blue); box-shadow: 0 7px 15px #8338EC2B; }
.tb-pink { background: var(--pink); color: #111111; border-color: var(--pink); }
.tb-kecil { flex: none; min-height: 40px; padding: 8px 13px; font-size: 12.5px; border-radius: 11px; }
.baris-tombol { display: flex; gap: 10px; flex-wrap: wrap; }
.icon-btn {
  width: 40px; height: 40px; flex: none; border-radius: 12px;
  background: #8338EC0B; border: 1px solid var(--line); color: var(--ink);
  display: grid; place-items: center; text-decoration: none;
}

/* ---------- Form ---------- */
.field { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.field > span { font-size: 12px; font-weight: 600; color: var(--ink-2); }
.field > span small { font-weight: 500; color: var(--ink-3); }
.form-input {
  min-width: 0; width: 100%;
  border: 1px solid var(--line-2); border-radius: 11px;
  background: var(--card-2); color: var(--ink);
  font-size: 15px; padding: 12px 11px;
}
.form-input:focus { outline: none; border-color: #8338EC80; background: #FFFFFF; box-shadow: 0 0 0 3px #8338EC1A; }
textarea.form-input { resize: vertical; min-height: 84px; line-height: 1.5; }
select.form-input { appearance: none; background-image: linear-gradient(45deg, transparent 50%, #706977 50%), linear-gradient(135deg, #706977 50%, transparent 50%); background-position: calc(100% - 17px) 52%, calc(100% - 12px) 52%; background-size: 5px 5px; background-repeat: no-repeat; padding-right: 30px; }
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.form-grid .penuh { grid-column: 1 / -1; }
.pesan-form { padding: 10px 12px; border-radius: 10px; font-size: 13px; }
.pesan-form.error { background: var(--bad-bg); border: 1px solid var(--bad-line); color: var(--bad); }
.pesan-form.sukses { background: var(--ok-bg); border: 1px solid var(--ok-line); color: #58259E; }
.pesan-form.info { background: #FFB7031A; border: 1px solid #FFB70366; color: #111111; }

/* ---------- Bottom sheet ---------- */
.tirai { position: absolute; inset: 0; z-index: 22; display: flex; align-items: flex-end; background: rgba(17,17,17,.5); animation: fade .18s ease-out; }
.lembar {
  width: 100%; max-height: 91%; overflow-y: auto; overscroll-behavior: contain;
  padding: 0 16px calc(env(safe-area-inset-bottom) + 18px);
  background: rgba(255,255,255,.97); border-radius: 24px 24px 0 0;
  box-shadow: 0 -8px 28px #11111112; animation: naik .26s cubic-bezier(.2,.85,.3,1);
}
.modal-kop { position: sticky; top: 0; z-index: 2; display: flex; justify-content: space-between; align-items: center; gap: 10px; margin: 0 -16px 12px; padding: 12px 16px; background: #FFFFFF; border-bottom: 1px solid var(--line); }
.modal-kop h2 { font-size: 17px; }
@keyframes naik { from { transform: translateY(30px); } to { transform: translateY(0); } }
@keyframes fade { from { opacity: 0; } to { opacity: 1; } }

.toast {
  position: fixed; left: 50%; bottom: calc(env(safe-area-inset-bottom) + 96px); z-index: 50;
  transform: translateX(-50%); max-width: min(420px, calc(100% - 32px));
  padding: 11px 16px; border-radius: 12px; background: #111111; color: #FFFFFF;
  font-size: 13px; font-weight: 600; box-shadow: 0 10px 24px #11111133; animation: naik .2s ease-out;
}
.toast.error { background: #FF4D6D; color: #111111; }

/* ---------- Input bertahap ---------- */
.stepper { display: flex; gap: 4px; }
.stepper span { flex: 1; height: 5px; border-radius: 99px; background: #1111110F; }
.stepper span.lewat { background: #8338EC66; }
.stepper span.kini { background: var(--blue); }
.step-kop { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; }
.step-kop .t { font-family: var(--fd); font-weight: 800; font-size: 17px; }
.step-kop .l { font-size: 12px; color: var(--ink-3); white-space: nowrap; }
.simpan-status { font-size: 11.5px; color: var(--ink-3); display: inline-flex; align-items: center; gap: 5px; }
.simpan-status::before { content: ''; width: 7px; height: 7px; border-radius: 50%; background: var(--dot, #11111133); }
.simpan-status.lokal { --dot: #FFB703; }
.simpan-status.server { --dot: #8338EC; }
.simpan-status.gagal { --dot: #FF4D6D; }

.pilih-dua { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.opsi {
  min-height: 46px; border-radius: 12px; border: 1px solid var(--line-2); background: #FFFFFF;
  font-weight: 650; font-size: 13.5px; color: var(--ink-2);
}
.opsi[aria-pressed="true"] { background: #8338EC12; border-color: #8338EC; color: #58259E; }

.item-cek { padding: 13px 13px 12px; }
.item-cek .judul { display: flex; gap: 10px; font-weight: 650; font-size: 13.5px; line-height: 1.4; }
.item-cek .no { flex: none; width: 24px; height: 24px; border-radius: 8px; display: grid; place-items: center; background: #8338EC12; color: #8338EC; font-size: 11px; font-weight: 700; }
/* Kolom Before | After (checklist, pengukuran, komponen) */
.ba-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 8px 10px; }
.ba-head { display: flex; align-items: center; gap: 6px; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--ink-3); }
.ba-head::before { content: ''; width: 8px; height: 8px; border-radius: 50%; background: var(--dot, #B690F4); flex: none; }
.ba-head.after { --dot: #8338EC; }
.item-cek .ba-grid { margin-top: 10px; }

/* Dropdown kondisi 1–4, warnanya mengikuti kode (selalu disertai teks) */
select.kondisi-pilih { font-weight: 650; font-size: 14px; padding: 11px 28px 11px 10px; }
select.kondisi-pilih[data-v="1"] { background-color: #8338EC14; border-color: #8338EC80; color: #58259E; }
select.kondisi-pilih[data-v="2"] { background-color: #FFB70333; border-color: #FFB703; color: #111111; }
select.kondisi-pilih[data-v="3"] { background-color: #FF4D6D26; border-color: #FF4D6D; color: #111111; }
select.kondisi-pilih[data-v="4"] { background-color: #1111110F; border-color: #11111166; color: #111111; }
.item-cek .ket { margin-top: 9px; font-size: 13.5px; padding: 10px 11px; }

.ukur-tabel { display: grid; grid-template-columns: minmax(0, 1fr) 84px 84px; gap: 7px 8px; align-items: center; }
.ukur-tabel .h { font-size: 11px; font-weight: 700; color: var(--ink-3); text-align: center; text-transform: uppercase; letter-spacing: .06em; }
.ukur-tabel .h:first-child { text-align: left; }
.ukur-tabel .lbl { font-size: 13px; font-weight: 600; line-height: 1.3; }
.ukur-tabel .lbl small { display: block; font-size: 11px; color: var(--ink-3); font-weight: 500; }
.ukur-tabel input { text-align: center; padding: 11px 6px; font-family: var(--fm); font-weight: 600; font-variant-numeric: tabular-nums; }
.hitung { display: grid; grid-template-columns: minmax(0, 1fr) 84px 84px; gap: 4px 8px; padding: 10px 12px; margin-top: 12px; border-radius: 12px; background: #8338EC0B; border: 1px solid #8338EC24; font-size: 12.5px; }
.hitung b { text-align: center; font-family: var(--fm); font-variant-numeric: tabular-nums; }
.hitung span { color: var(--ink-2); font-weight: 600; }

.foto-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(76px, 1fr)); gap: 8px; margin-top: 8px; }
.foto-grid .foto { position: relative; aspect-ratio: 1; border-radius: 11px; overflow: hidden; border: 1px solid var(--line-2); background: var(--sunk); }
.foto-grid .foto img { width: 100%; height: 100%; object-fit: cover; display: block; }
.foto-grid .foto button { position: absolute; top: 4px; right: 4px; width: 26px; height: 26px; border-radius: 50%; background: #111111B3; color: #FFFFFF; font-size: 15px; line-height: 1; display: grid; place-items: center; }
.foto-grid .foto button.foto-coret { right: auto; left: 4px; }
/* Editor coretan foto */
.editor-foto { display: flex; flex-direction: column; gap: 10px; }
.ef-alat { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.ef-alat .segmented { flex: 1 1 220px; }
.ef-warna { display: flex; gap: 8px; }
.ef-warna button { width: 36px; height: 36px; border-radius: 50%; background: var(--w); border: 3px solid #FFFFFF; box-shadow: 0 0 0 1px var(--line-2); }
.ef-warna button[aria-pressed="true"] { box-shadow: 0 0 0 2px #111111; }
.ef-kanvas { display: flex; justify-content: center; background: #111111; border-radius: 12px; overflow: hidden; }
.ef-kanvas canvas { display: block; touch-action: none; cursor: crosshair; max-width: 100%; }
.foto-tambah {
  aspect-ratio: 1; border-radius: 11px; border: 1.5px dashed #8338EC66; background: #8338EC08; color: #8338EC;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; font-size: 10.5px; font-weight: 700; cursor: pointer;
}
.foto-tambah input { position: absolute; width: 1px; height: 1px; opacity: 0; }

/* ---------- Tabel laporan ---------- */
.tabel-wrap { overflow-x: auto; margin: 0 -15px; padding: 0 15px; }
.tabel { width: 100%; border-collapse: collapse; font-size: 12.5px; }
.tabel th { text-align: left; font-size: 10.5px; font-weight: 700; color: var(--ink-3); text-transform: uppercase; letter-spacing: .06em; padding: 8px 8px; border-bottom: 1px solid var(--line-2); white-space: nowrap; }
.tabel td { padding: 10px 8px; border-bottom: 1px solid var(--line); vertical-align: top; }
.tabel td.num, .tabel th.num { text-align: right; font-family: var(--fm); font-variant-numeric: tabular-nums; white-space: nowrap; }
.tabel tr:last-child td { border-bottom: 0; }
.tabel-laporan tbody tr { cursor: pointer; }
.tabel-laporan tbody tr:hover td { background: #8338EC08; }
.tabel-laporan a { color: var(--ink); text-decoration: none; }
.tabel-laporan td { vertical-align: middle; }

.perf { display: flex; flex-direction: column; }
.perf-item { padding: 12px 0; }
.perf-item + .perf-item { border-top: 1px solid var(--line); }
.perf-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 10px; }
.perf-head .nama { font-weight: 700; font-size: 13.5px; }
.perf-head .nama small { font-weight: 500; color: var(--ink-3); }
.perf-nilai { display: flex; align-items: baseline; gap: 8px; margin-top: 4px; font-family: var(--fm); font-variant-numeric: tabular-nums; font-size: 13px; color: var(--ink-2); flex-wrap: wrap; }
.perf-nilai b { color: var(--ink); font-size: 15px; }
.perf-nilai .delta { font-weight: 700; color: #58259E; }
.perf-teks { font-size: 12.5px; color: var(--ink-2); margin-top: 6px; line-height: 1.6; }
.edit-area { width: 100%; margin-top: 6px; font-size: 13px; min-height: 70px; }

.narasi-list { margin: 0; padding-left: 20px; display: flex; flex-direction: column; gap: 8px; font-size: 13px; line-height: 1.65; color: var(--ink-2); }

.chart-box { position: relative; height: 240px; }
.legend { display: flex; gap: 14px; flex-wrap: wrap; font-size: 12px; color: var(--ink-2); margin-bottom: 8px; }
.legend i { display: inline-block; width: 10px; height: 10px; border-radius: 3px; margin-right: 6px; vertical-align: -1px; }

/* ---------- Navigasi langkah input ---------- */
.step-nav { display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none; margin: 0 -16px; padding: 0 16px 2px; }
.step-nav::-webkit-scrollbar { display: none; }
.step-nav button {
  flex: none; display: flex; align-items: center; gap: 8px; min-height: 42px; padding: 5px 12px 5px 5px;
  border-radius: 99px; border: 1px solid var(--line-2); background: #FFFFFF; text-align: left;
  font-size: 12.5px; font-weight: 650; color: var(--ink-2); white-space: nowrap;
}
.step-nav .n { width: 30px; height: 30px; border-radius: 50%; flex: none; display: grid; place-items: center; background: #1111110D; font-size: 12px; font-weight: 700; color: var(--ink-2); }
.step-nav .st { display: block; font-size: 10.5px; font-weight: 600; color: var(--ink-3); }
.step-nav .lengkap .n { background: #8338EC26; color: #8338EC; }
.step-nav .lengkap .st { color: #58259E; }
.step-nav [aria-current="step"] { border-color: #8338EC; background: #8338EC12; color: #58259E; }
.step-nav [aria-current="step"] .n { background: #8338EC; color: #FFFFFF; }
.input-body { display: flex; flex-direction: column; gap: 13px; min-width: 0; }
.aksi .tb .sub-tb { display: block; font-size: 10.5px; font-weight: 600; opacity: .8; margin-top: 2px; }
.aksi .tb { flex-direction: column; gap: 0; }
.aksi .tb.baris-ikon { flex-direction: row; gap: 7px; }

/* Peringatan angka tidak wajar (tidak memblokir) */
.form-input.di-luar { border-color: #FFB703; background-color: #FFB7031F; }
.cek-angka { margin-top: 10px; }
.cek-angka ul { margin: 4px 0 0; padding-left: 18px; }
.pilihan-lain { margin-top: 6px; }
.ringkas-lengkap .baris .kotak { width: 30px; height: 30px; }

/* ---------- Lompat antar bagian (detail laporan) ---------- */
.lompat {
  position: sticky; top: -16px; z-index: 4; flex: none; display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none;
  margin: 0 -16px; padding: 8px 16px; background: #FFFFFFF2; border-bottom: 1px solid var(--line);
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
}
.lompat::-webkit-scrollbar { display: none; }
.lompat .chip { min-height: 34px; padding: 6px 12px; font-size: 12px; }
[id^="sec-"] { scroll-margin-top: 64px; }

/* ---------- QR code unit & stiker ---------- */
.qr-kartu { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 16px; align-items: center; }
.qr-gambar svg { display: block; border: 1px solid var(--line); border-radius: 12px; }
@media (max-width: 480px) { .qr-kartu { grid-template-columns: 1fr; justify-items: center; } }
.stiker-cetak { display: none; }
@media print {
  @page { size: A4; margin: 10mm; }
  .ada-stiker .app, .ada-stiker .toast { display: none !important; }
  .ada-stiker .stiker-cetak { display: block !important; }
  .stiker-halaman { display: grid; grid-template-columns: repeat(2, 90mm); gap: 4mm; break-after: page; }
  .stiker-halaman:last-child { break-after: auto; }
  .stiker {
    width: 90mm; height: 55mm; padding: 3mm; box-sizing: border-box; border: 0.3mm dashed #999999; break-inside: avoid;
    display: grid; grid-template-columns: 45mm 1fr; gap: 3mm; align-items: center; font-family: Arial, Helvetica, sans-serif; color: #111111;
  }
  .stiker-qr svg { width: 45mm; height: 45mm; }
  .stiker-teks { display: flex; flex-direction: column; gap: 1mm; min-width: 0; }
  .stiker-merk { display: flex; align-items: center; gap: 1.5mm; font-size: 5.5pt; font-weight: 700; color: #1A3A5C; }
  .stiker-merk img { width: 6mm; height: 6mm; }
  .stiker-teks b { font-size: 14pt; line-height: 1.1; word-break: break-word; }
  .stiker-teks span { font-size: 7.5pt; }
  .stiker-teks small { font-size: 6pt; color: #555555; margin-top: 1mm; }
}

/* ---------- Tanda tangan ---------- */
.ttd { display: flex; flex-direction: column; gap: 6px; }
.ttd-pad { position: relative; height: 150px; border: 1.5px dashed #8338EC66; border-radius: 12px; background: #FFFFFF; overflow: hidden; }
.ttd-pad canvas { display: block; touch-action: none; cursor: crosshair; }
.ttd-hint { position: absolute; inset: 0; display: grid; place-items: center; color: #11111159; font-size: 13px; font-weight: 600; pointer-events: none; }
.ttd-garis { position: absolute; left: 14px; right: 14px; bottom: 30px; border-bottom: 1px solid #11111124; pointer-events: none; }
.ttd-hapus { align-self: flex-end; font-size: 12px; font-weight: 600; color: var(--blue); padding: 4px 2px; }
.ttd-lihat { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 10px; border: 1px solid var(--line); border-radius: 12px; text-align: center; min-height: 120px; justify-content: flex-end; }
.ttd-lihat img { max-width: 100%; height: 64px; object-fit: contain; }
.ttd-lihat b { font-size: 12.5px; }
.ttd-lihat span { font-size: 11px; color: var(--ink-3); }
.ttd-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }

/* ---------- Filter dilipat di HP ---------- */
.filter-lipat > summary {
  list-style: none; display: flex; align-items: center; gap: 8px; min-height: 44px; padding: 8px 14px;
  border: 1px solid #8338EC39; border-radius: 12px; background: #FFFFFF; cursor: pointer; font-weight: 650; font-size: 13px;
}
.filter-lipat > summary::-webkit-details-marker { display: none; }
.filter-lipat > summary .filter-ringkas { flex: 1; min-width: 0; color: var(--ink-3); font-weight: 500; font-size: 12px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.filter-lipat > summary::after { content: '▾'; color: var(--ink-3); }
.filter-lipat[open] > summary::after { content: '▴'; }
.filter-lipat[open] > .filter-baris { margin-top: 10px; }
.alat-baris { display: flex; gap: 10px; align-items: center; justify-content: space-between; flex-wrap: wrap; }

/* ---------- Master unit & jadwal ---------- */
.cek-baris { display: flex; align-items: flex-start; gap: 10px; font-weight: 650; font-size: 13.5px; cursor: pointer; }
.cek-baris input { width: 20px; height: 20px; margin: 1px 0 0; accent-color: #8338EC; flex: none; }
.cek-baris small { display: block; font-weight: 500; font-size: 12px; color: var(--ink-3); }
.baris .kanan .tgl { font-size: 11.5px; color: var(--ink-3); font-variant-numeric: tabular-nums; }
.grup-kop { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; margin: 0 0 6px; }
.grup-kop .label-kecil { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.belum-daftar > summary { list-style: none; cursor: pointer; display: flex; gap: 10px; align-items: center; }
.belum-daftar > summary::-webkit-details-marker { display: none; }
.belum-daftar > summary::after { content: '▾'; margin-left: auto; color: var(--ink-3); }
.belum-daftar[open] > summary::after { content: '▴'; }
.belum-daftar .baris { flex-wrap: wrap; row-gap: 8px; }
.belum-daftar .baris .teks { flex: 1 1 190px; }
.belum-daftar .baris .utama, .belum-daftar .baris .kecil { white-space: normal; }
.belum-daftar .baris .kanan { flex-direction: row; margin-left: auto; }
.unit-pilih { display: flex; align-items: center; gap: 12px; padding: 12px; border-radius: 12px; border: 1px solid #8338EC40; background: #8338EC08; }
.unit-pilih .teks { flex: 1; min-width: 0; }
.unit-pilih b { display: block; font-size: 15px; }
.unit-pilih span { display: block; font-size: 12px; color: var(--ink-3); }
.tabel .aksi-sel { text-align: right; white-space: nowrap; }
.tabel .tb-kecil { min-height: 32px; padding: 5px 10px; font-size: 12px; }
.pratinjau { max-height: 260px; overflow: auto; border: 1px solid var(--line); border-radius: 12px; }

/* ---------- Revisi ---------- */
.revisi-banner p { margin-top: 4px; white-space: pre-line; color: var(--ink); }
.kartu-revisi { border-color: #FF4D6D66; background: linear-gradient(120deg, #FFFFFF 55%, #FF4D6D0F); }
.linimasa { list-style: none; margin: 10px 0 0; padding: 0 0 0 16px; border-left: 2px solid var(--line); display: flex; flex-direction: column; gap: 12px; }
.linimasa li { position: relative; }
.linimasa li::before { content: ''; position: absolute; left: -22px; top: 5px; width: 10px; height: 10px; border-radius: 50%; background: #8338EC; border: 2px solid #FFFFFF; }
.linimasa li.minta::before { background: #FF4D6D; }
.linimasa li.ajukan::before { background: #FFB703; }
.linimasa li.tolak::before { background: #8A8A99; }
.revisi-banner:not(.error):not(.info) { background: #F4F4F8; border: 1px solid var(--line); }
.linimasa .lm-judul { display: block; font-size: 13px; }
.linimasa .lm-waktu { display: block; font-size: 11.5px; color: var(--ink-3); }
.linimasa p { margin-top: 3px; font-size: 13px; white-space: pre-line; }

/* ---------- Kelola akun ---------- */
.kredensial { margin: 10px 0; padding: 12px; border-radius: 12px; background: var(--card-2); border: 1px solid var(--line); font-size: 12.5px; line-height: 1.6; white-space: pre-wrap; word-break: break-word; font-family: ui-monospace, Menlo, Consolas, monospace; }

/* ---------- Utilitas tampilan HP vs layar lebar ---------- */
.hanya-lebar { display: none; }
.filter-baris { display: flex; flex-direction: column; gap: 10px; }
.beranda-atas, .grid-2, .grid-3 { display: flex; flex-direction: column; gap: 13px; }
.kpi-desktop { display: none; }
a.stat-link { display: block; color: inherit; text-decoration: none; transition: border-color .15s, box-shadow .15s; }
a.stat-link:hover { border-color: #8338EC55; box-shadow: 0 6px 18px #8338EC14; }
.stat.kuning { background: linear-gradient(130deg, #FFB70326, #FFFFFF); border-color: #FFB70366; }
.stat.pink { background: linear-gradient(130deg, #FF4D6D1F, #FFFFFF); border-color: #FF4D6D55; }
/* Wadah yang di desktop menjadi grid; di HP tetap tumpukan biasa dengan urutan seperti sebelumnya */
.beranda, .laporan-layout, .akun-layout, .akun-kiri, .akun-kanan, .toolbar { display: flex; flex-direction: column; gap: 13px; }
@media (max-width: 767px) {
  .beranda-utama, .beranda-samping, .panel-aksi { display: contents; }
  .b-revisi { order: 1; } .b-hero { order: 2; } .b-jadwal { order: 3; } .b-draft { order: 4; } .b-terbaru { order: 5; }
}

/* ---------- Laptop/desktop: seluruh tampilan diperkecil (bawaan 80%) ----------
   Hanya di layar (bukan cetak) supaya stiker QR tetap 90 × 55 mm. Tinggi .app dikompensasi
   agar tetap memenuhi layar. HP tidak diperkecil supaya tombol tetap mudah ditekan. */
@media screen and (min-width: 768px) {
  body { zoom: var(--skala); }
  .app { height: calc(100dvh / var(--skala)); }
}

/* ---------- Tablet & desktop (≥768px): menu samping, TANPA menu bawah ----------
   768–1099px: menu samping ringkas (ikon + label kecil). ≥1100px: menu samping penuh.
   Latar abu muda + kartu putih seperti dashboard; lembar (bottom sheet) menjadi modal di tengah. */
@media (min-width: 768px) {
  body { background: #F4F4F8; }
  .app {
    display: grid;
    grid-template-columns: 88px minmax(0, 1fr);
    grid-template-rows: auto minmax(0, 1fr) auto;
    grid-template-areas: "nav kop" "nav isi" "nav aksi";
    background: #F4F4F8;
  }
  .app { --lebar-isi: 1920px; --celah: 32px; }
  .kop { grid-area: kop; padding: 16px max(var(--celah), calc((100% - var(--lebar-isi)) / 2)); background: #F4F4F8F2; }
  .kop h1 { font-size: 21px; }
  .kop .avatar-btn { display: none; }
  .isi { grid-area: isi; padding: 20px max(var(--celah), calc((100% - var(--lebar-isi)) / 2)) 32px; gap: 16px; container: isi / inline-size; }
  .isi::-webkit-scrollbar { width: 10px; }
  .isi::-webkit-scrollbar-thumb { background: #11111122; border-radius: 10px; border: 3px solid #F4F4F8; }
  .aksi { grid-area: aksi; padding: 12px max(var(--celah), calc((100% - var(--lebar-isi)) / 2)); justify-content: flex-end; box-shadow: none; background: #FFFFFFF2; }
  .aksi .tb { flex: 0 1 240px; min-height: 44px; }
  .tb { min-height: 44px; }
  .hero { background: linear-gradient(120deg, #FFFFFF 60%, #8338EC0D); }

  /* Menu samping ringkas */
  .app.fokus .tabbar { display: flex; }
  .tabbar {
    grid-area: nav; display: flex; flex-direction: column; gap: 4px;
    padding: 14px 8px; overflow-y: auto; background: #FFFFFF;
    border-top: 0; border-right: 1px solid var(--line); box-shadow: none;
  }
  .tabbar .brand { order: -2; display: flex; justify-content: center; padding: 2px 0 12px; }
  .tabbar .brand img { width: 40px; height: 40px; border-radius: 12px; border: 1px solid var(--line); background: #FFFFFF; }
  .tabbar .brand > span { display: none; }
  .tabbar a { min-height: 58px; padding: 8px 2px; font-size: 10.5px; gap: 4px; border-radius: 12px; }
  .tabbar a:hover { background: #8338EC0D; }
  .tabbar a.aktif { box-shadow: none; }
  .tabbar a.utama { order: -1; margin: 0 8px 12px; min-height: 52px; border: 0; border-radius: 16px; }
  .tabbar a.utama .nama-tab { display: none; }
  .tabbar a.hanya-samping { display: flex; }
  .tabbar .bintik { top: 5px; right: 12px; }

  /* Lembar → modal di tengah */
  .tirai { align-items: center; justify-content: center; padding: 24px; }
  .lembar { width: 100%; max-width: 640px; max-height: calc(100% - 48px); padding: 0 22px 22px; border-radius: 20px; box-shadow: 0 24px 64px #11111133; animation: muncul .18s ease-out; }
  .modal-kop { margin: 0 -22px 14px; padding: 14px 22px; border-radius: 20px 20px 0 0; }
  .toast { left: auto; right: 24px; bottom: 24px; transform: none; }

  .grid-2 { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 16px; align-items: start; }
  .grid-3 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; align-items: start; }
  .stat-grid.empat { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .stat-grid.lima { grid-template-columns: repeat(5, minmax(0, 1fr)); }
  .kpi-desktop { display: grid; }
  .beranda-atas { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); gap: 16px; align-items: stretch; }
  .beranda-atas .grid-ringkas { grid-template-columns: 1fr; }
  .grid-ringkas.empat { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .toolbar { display: flex; flex-direction: row; flex-wrap: wrap; gap: 12px; align-items: flex-start; }
  .toolbar > .form-input[type="search"] { flex: 1 1 260px; max-width: 380px; }
  .toolbar > .filter-lipat { flex: 3 1 420px; }
  .filter-baris { flex-direction: row; flex-wrap: wrap; align-items: center; }
  .filter-baris .chip-wrap { flex: 0 1 auto; }
  .filter-baris > select.form-input, .filter-baris > input.form-input { width: auto; min-width: 180px; flex: 1 1 180px; max-width: 300px; }
  .form-grid.tiga { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .ukur-tabel, .hitung { grid-template-columns: minmax(0, 1fr) 150px 150px; }
  .hanya-hp { display: none !important; }
  .hanya-lebar { display: block; }
  .filter-lipat > summary { display: none; }
  .filter-lipat[open] > .filter-baris { margin-top: 0; }
  .lompat { top: -20px; margin: 0; border-radius: 14px; border: 1px solid var(--line); }
  .tabel tbody tr[data-href] { cursor: pointer; }
  .tabel tbody tr[data-href]:hover td { background: #8338EC08; }

  /* Tablet / laptop sempit: wadah bertumpuk; kolom samping beranda jadi 2 kolom */
  .beranda, .laporan-layout, .akun-layout, .akun-kiri, .akun-kanan, .beranda-utama { gap: 16px; }
  .beranda-samping { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 16px; align-items: start; }
  .panel-aksi { display: flex; flex-direction: column; gap: 12px; }
  .akun-layout:not(.admin) { max-width: 760px; }

  /* Halaman login (tanpa menu) */
  .app.tanpa-nav { grid-template-columns: minmax(0, 1fr); grid-template-areas: "kop" "isi" "aksi"; }
  .app.tanpa-nav .kop, .app.tanpa-nav .isi { padding-inline: max(24px, calc((100% - 460px) / 2)); }
}
@keyframes muncul { from { opacity: 0; transform: translateY(8px) scale(.98); } to { opacity: 1; transform: none; } }

/* ---------- Laptop (≥960px): menu samping penuh ---------- */
@media (min-width: 960px) {
  .app { grid-template-columns: 256px minmax(0, 1fr); }
  .tabbar { padding: 20px 14px 16px; gap: 2px; background: #FCFBFF; }
  .tabbar .brand { justify-content: flex-start; align-items: center; gap: 10px; padding: 2px 8px 16px; }
  .tabbar .brand > span { display: block; }
  .tabbar .brand b { display: block; font-family: var(--fd); font-size: 14.5px; font-weight: 800; color: var(--ink); line-height: 1.2; }
  .tabbar .brand small { display: block; font-size: 10.5px; color: var(--ink-3); line-height: 1.3; }
  .tabbar a { flex-direction: row; justify-content: flex-start; gap: 12px; min-height: 44px; padding: 10px 14px; font-size: 13.5px; }
  .tabbar a.utama { margin: 0 0 8px; min-height: 46px; justify-content: center; font-size: 14px; border-radius: 13px; }
  .tabbar a.utama .nama-lebar { display: inline; }
  .tabbar .grup-nav { display: block; margin: 14px 14px 4px; font-size: 10.5px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-3); }
  .tabbar .bintik { position: static; margin-left: auto; }
  .tabbar .nav-kaki { display: block; margin-top: auto; padding-top: 14px; border-top: 1px solid var(--line); }
}

/* ---------- Desktop lebar (≥1100px): tata letak 2 kolom ---------- */
@media (min-width: 1100px) {
  .grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .input-layout { display: grid; grid-template-columns: 240px minmax(0, 1fr); gap: 28px; align-items: start; }
  .input-layout .step-nav { position: sticky; top: 0; flex-direction: column; margin: 0; padding: 0; overflow: visible; }
  .input-layout .step-nav button { border-radius: 14px; padding: 7px 12px 7px 7px; white-space: normal; }
  .form-grid.empat { grid-template-columns: repeat(4, minmax(0, 1fr)); }

  /* Beranda: KPI, kolom utama (jadwal, laporan terbaru), kolom samping (revisi, draft) */
  .beranda { display: grid; grid-template-columns: minmax(0, 1fr) minmax(280px, 340px); align-items: start; }
  .beranda > .penuh { grid-column: 1 / -1; }
  .beranda-utama, .beranda-samping { display: flex; flex-direction: column; gap: 16px; min-width: 0; }

  /* Detail laporan: isi di kiri, panel aksi lengket di kanan */
  .laporan-layout { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 16px 20px; align-items: start; }
  .laporan-layout > * { grid-column: 1; min-width: 0; }
  .laporan-layout > .panel-aksi { grid-column: 2; grid-row: 1 / span 40; position: sticky; top: 0; }
  .panel-aksi .baris-tombol { flex-direction: column; gap: 8px; }
  .panel-aksi .baris-tombol .tb { width: 100%; justify-content: flex-start; flex: none; }
  .panel-aksi .lompat { position: static; flex-direction: column; gap: 2px; padding: 10px; background: #FFFFFF; overflow: visible; }
  .panel-aksi .lompat .chip { justify-content: flex-start; border: 0; background: none; min-height: 34px; border-radius: 9px; font-weight: 600; color: var(--ink-2); }
  .panel-aksi .lompat .chip:hover { background: #8338EC0D; color: #58259E; }
  .panel-aksi .lompat-judul { display: block; font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-3); padding: 2px 10px 6px; }

  /* Akun: profil & sinkron di kiri, kelola akun (admin) di kanan */
  .akun-layout.admin { display: grid; grid-template-columns: minmax(280px, 1fr) minmax(0, 1.7fr); align-items: start; }
}
.lompat-judul { display: none; }
/* Kartu pengguna di bawah menu samping (≥1100px) */
.tabbar .nav-pengguna { display: flex; flex-direction: row; justify-content: flex-start; align-items: center; gap: 10px; min-height: 0; padding: 6px; text-decoration: none; color: var(--ink); border-radius: 12px; font-family: var(--fb); }
.tabbar .nav-pengguna:hover { background: #8338EC0D; }
.tabbar .nav-pengguna .avatar { width: 36px; height: 36px; font-size: 13px; border-radius: 11px; }
.tabbar .nav-pengguna b { display: block; font-size: 13px; line-height: 1.25; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tabbar .nav-pengguna small { display: block; font-size: 11px; color: var(--ink-3); font-weight: 500; }
.nav-status { font-size: 11px; color: var(--ink-3); line-height: 1.5; padding: 8px 8px 0; }
.nav-keluar { margin: 8px 6px 0; font-size: 12.5px; font-weight: 600; color: #B3123A; padding: 6px 0; text-align: left; }
@media (max-width: 350px) {
  .ukur-tabel, .hitung { grid-template-columns: minmax(0, 1fr) 72px 72px; }
  .grid-ringkas .angka { font-size: 16px; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}

/* ---------- Grafik SVG (js/charts.js) ---------- */
.chart-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 10px; margin-bottom: 6px; }
.chart-head .legend { margin: 0; gap: 4px 14px; padding-top: 7px; }
.chart-toggle { flex: none; white-space: nowrap; font-size: 11.5px; font-weight: 600; color: var(--blue); padding: 6px 2px; min-height: 32px; }
.chart-plot { position: relative; }
.chart-plot svg { display: block; width: 100%; height: auto; overflow: visible; }
.chart-plot svg text { font-family: var(--fb); }
.chart-plot .axis { font-size: 10.5px; fill: #706977; font-variant-numeric: tabular-nums; }
.chart-plot .row-label { font-size: 11.5px; fill: #514858; font-weight: 600; }
.chart-plot .value { font-size: 10.5px; fill: #111111; font-weight: 700; }
.chart-plot .hit { cursor: default; outline: none; }
.chart-plot .hit:focus-visible { stroke: #8338EC; stroke-width: 1.5; }
.chart-tip {
  position: absolute; z-index: 3; pointer-events: none; min-width: 110px;
  padding: 8px 10px; border-radius: 10px; background: #FFFFFF; border: 1px solid var(--line-2);
  box-shadow: 0 8px 20px #11111118; font-size: 12px; line-height: 1.45; white-space: nowrap;
}
.chart-tip div { display: flex; align-items: center; gap: 6px; }
.chart-tip b { font-size: 13px; }
.chart-tip span { color: var(--ink-3); }
.chart-tip i { width: 10px; height: 2px; border-radius: 2px; flex: none; }
.chart-table { margin-top: 8px; overflow-x: auto; }

/* ---------- Menu Dev & kelola akun ---------- */
.dev-layout { display: flex; flex-direction: column; gap: 13px; }
.kartu-link { display: flex; align-items: center; gap: 12px; text-decoration: none; color: var(--ink); }
.kartu-link > span:nth-child(2) { flex: 1; min-width: 0; }
.kartu-link b { display: block; font-family: var(--fd); font-size: 14.5px; }
.kartu-link small { display: block; font-size: 12px; color: var(--ink-3); }
.kartu-link .ikon { width: 40px; height: 40px; border-radius: 12px; display: grid; place-items: center; background: #8338EC12; color: #8338EC; flex: none; }
.sel-kecil { width: auto; min-width: 110px; min-height: 36px; padding: 6px 28px 6px 9px; font-size: 12.5px; }
.sakelar { position: relative; display: inline-block; width: 42px; height: 24px; flex: none; cursor: pointer; }
.sakelar input { position: absolute; inset: 0; opacity: 0; margin: 0; cursor: pointer; }
.sakelar span { position: absolute; inset: 0; border-radius: 99px; background: #11111126; transition: background .15s; pointer-events: none; }
.sakelar span::after { content: ''; position: absolute; top: 3px; left: 3px; width: 18px; height: 18px; border-radius: 50%; background: #FFFFFF; box-shadow: 0 1px 3px #11111133; transition: transform .15s; }
.sakelar input:checked + span { background: #8338EC; }
.sakelar input:checked + span::after { transform: translateX(18px); }
.sakelar input:focus-visible + span { outline: 2px solid var(--blue); outline-offset: 2px; }
.sakelar input:disabled + span { opacity: .45; }
.pilih-customer { margin: 0; padding: 10px 12px 12px; border: 1px solid var(--line); border-radius: 12px; display: flex; flex-direction: column; gap: 8px; max-height: 280px; overflow-y: auto; }
.pilih-customer legend { padding: 0 4px; font-size: 12.5px; font-weight: 700; }
.kv { display: grid; grid-template-columns: minmax(110px, 34%) minmax(0, 1fr); gap: 7px 12px; margin: 10px 0 0; font-size: 13px; }
.kv dt { color: var(--ink-3); }
.kv dd { margin: 0; min-width: 0; overflow-wrap: anywhere; }
.log-daftar { display: flex; flex-direction: column; border: 1px solid var(--line); border-radius: 12px; overflow: hidden; margin-top: 6px; }
.log-item + .log-item { border-top: 1px solid var(--line); }
.log-item summary { display: flex; align-items: center; gap: 8px; padding: 9px 12px; cursor: pointer; font-size: 12.5px; list-style: none; }
.log-item summary::-webkit-details-marker { display: none; }
.log-item[open] summary { background: #8338EC0B; }
.log-waktu { flex: none; color: var(--ink-3); font-variant-numeric: tabular-nums; min-width: 118px; }
.log-pesan { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 600; }
.log-item[open] .log-pesan { white-space: normal; }
.log-detail { padding: 8px 12px 12px; font-size: 12px; color: var(--ink-2); display: flex; flex-direction: column; gap: 4px; overflow-wrap: anywhere; }
.log-detail pre { margin: 4px 0 0; padding: 8px 10px; border-radius: 8px; background: #F4F4F8; font-size: 11px; white-space: pre-wrap; max-height: 240px; overflow: auto; }
@media (max-width: 767px) {
  .log-item summary { flex-wrap: wrap; }
  .log-pesan { flex-basis: 100%; }
}
@media (min-width: 1100px) {
  .dev-layout { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; align-items: start; }
  .dev-layout > .penuh { grid-column: 1 / -1; }
}

/* ---------- Layar lebar: kolom tambahan menurut lebar isi (container query "isi") ----------
   Lebar diukur di dalam isi (sudah memperhitungkan zoom), bukan lebar jendela. */
@container isi (min-width: 1000px) {
  /* Akun tanpa kelola akun: kartu 2 kolom */
  .akun-layout:not(.admin) { max-width: none; }
  .akun-layout:not(.admin) .akun-kiri { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; }
  .akun-layout:not(.admin) .akun-kiri > .hero { grid-column: 1 / -1; }
}
@container isi (min-width: 1400px) {
  /* Beranda: Jadwal | Laporan terbaru | kolom samping */
  .beranda { grid-template-columns: minmax(0, 1fr) 380px; }
  .beranda-utama { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; }
  .beranda-utama > :only-child { grid-column: 1 / -1; }
  /* Detail laporan: panel aksi lebih lega */
  .laporan-layout { grid-template-columns: minmax(0, 1fr) 360px; }
}
@container isi (min-width: 1600px) {
  /* Menu Dev: Lihat sebagai | Diagnostik | Data & backup */
  .dev-layout { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}