/* ═══════════════════════════════════════════════════════════════════════════
 * NOVA — LAPISAN KULIT APLIKASI (B5 §5)
 * ───────────────────────────────────────────────────────────────────────────
 * Cakupan: §5.1 sidebar · §5.2 kepala halaman · §5.3 lapisan atas ·
 * §5.4 bilah bawah HP, ditambah latar aplikasi dan deret tab.
 * TIDAK ADA tombol umum, isian, chip, kartu, tabel, KPI, bar progres, atau
 * bagan di sini — semua itu milik nova-ui.css (§4).
 *
 * Dimuat paling akhir, jadi pada spesifisitas sama berkas ini menang. Sering
 * itu tidak cukup: styles.css memakai !important dan selector sepanjang
 * `html[data-theme="dark"] .a.b` (0,4,1). Polanya di sini adalah awalan
 * `:root .xcs-app`, yang menaikkan hitungan kelas tanpa menyentuh styles.css.
 *
 * Semua warna memakai token nova.css. Nilai mentah hanya dua: warna scrim
 * (ditulis apa adanya di B5-spec.md §5.3) dan lapisan putih transparan di
 * atas sidebar gelap, yang relatif terhadap permukaan, bukan warna merek.
 * ═══════════════════════════════════════════════════════════════════════════ */

/* ═══════════════════════════════════════════════════════════════════════════
 * 1. LATAR APLIKASI  —  .xcs-main / .xcs-main-inner
 * ═══════════════════════════════════════════════════════════════════════════ */

/* styles.css:13476 memaku `.xcs-main` ke `var(--bh-slate-50) !important`, dan
   `html[data-theme="dark"] .xcs-main` (0,2,1) menimpanya lagi di tema gelap.
   `:root .xcs-app .xcs-main` = (0,3,0) menang atas keduanya. */
:root .xcs-app .xcs-main { background: var(--xcs-bg-1) !important; background-image: none !important; }
:root .xcs-app .xcs-main-inner { color: var(--xcs-ink-1); }

/* ── RUANG AMAN A1 & A2 — JANGAN DIKECILKAN ─────────────────────────────────
   Lonceng dan tombol asisten sama-sama `position: fixed` di tepi kanan.
   ops-theme.css memperbaiki cacat B4 A1/A2 dengan rel kosong 70px (84px pada
   pita sempit) di kanan isi halaman — bukan dengan z-index. Rel itu DIULANG
   di sini supaya tetap ada kalau ops-theme.css diringkas. Konsekuensinya:
   tidak boleh ada `padding` (singkat) untuk .xcs-main-inner di berkas ini,
   karena itu menghapus padding-right rel dan cacatnya langsung kembali.
   Urutan penting: 70px dulu, baru 84px. Dibalik = pita 769–1200px menyusut
   jadi 70px, yaitu MENGECILKAN ruang aman. */
@media (min-width: 769px) {
  .xcs-main-inner { padding-right: 70px !important; }
  .xcs-footer { padding-right: 70px; }
}
@media (min-width: 769px) and (max-width: 1200px) {
  .xcs-main-inner { padding-right: 84px !important; }
  .xcs-footer { padding-right: 84px; }
}

/* ═══════════════════════════════════════════════════════════════════════════
 * 2. SIDEBAR — KERANGKA  (§5.1)
 * Sidebar SELALU gelap di kedua tema, persis seperti lembar referensi.
 * ═══════════════════════════════════════════════════════════════════════════ */

/* styles.css:14229/:14264 memaku latar ke var(--xcs-sidebar-bg) (#0A0A0A)
   dengan !important, dan :18095 menimpanya lagi dengan gradien + blur.
   Dua langkah: (1) variabelnya diarahkan ke --xcs-navy sehingga aturan lama
   yang membaca var() ikut benar; (2) background tetap ditulis ulang pada
   (0,3,0) untuk mengalahkan gradien keras di :18095. */
:root .xcs-app .xcs-sidebar {
  --xcs-sidebar-bg: var(--xcs-navy);
  --xcs-side-bg: var(--xcs-navy);       /* dibaca kontrol sticky di ops-theme.css:2321 */
  background: var(--xcs-navy) !important;
  background-image: none !important;
  border-right: 1px solid var(--xcs-line-1) !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  /* styles.css:12191/:12832 memaku warna ini dengan !important; tanpa
     !important di sini token nada sidebar tidak pernah dipakai. */
  color: var(--xcs-side-ink-2) !important;
  /* TIDAK ADA `padding` di sini, sengaja. styles.css:12193 memakunya ke
     `24px 16px 16px !important` dan @media(max-width:768px) styles.css:3431
     menambah `padding-bottom: 90px !important` supaya laci HP tidak tertutup
     kontrol sticky di dasarnya. Rantai (0,3,0) + !important di sini akan
     MENGALAHKAN aturan HP itu (media query tidak menambah spesifisitas) dan
     90px cadangannya hilang. Nilai 24/16/16 sudah pada kisi 8px §3. */
  gap: 12px;
}

/* Bilah atas HP = lanjutan sidebar. styles.css:14236 memaksanya ke
   var(--xcs-sidebar-bg), yang di :root masih #0A0A0A — variabel di atas
   hanya berlaku di dalam .xcs-sidebar. */
@media (max-width: 768px) {
  :root .xcs-app .xcs-mobile-bar {
    background: var(--xcs-navy) !important;
    border-bottom: 1px solid rgba(255, 255, 255, .08) !important;
    box-shadow: none !important;
  }
}

/* Blok merek tetap di tempatnya; hanya jaraknya dirapikan ke kisi 8px.
   Wordmark-nya milik brand.css / logo.jsx dan tidak disentuh. */
:root .xcs-app .xcs-sidebar .xcs-brand { padding: 2px 6px 10px !important; gap: 10px; }

/* Dihapus setelah ditelusuri ke JSX: `.xcs-brand-sub` dan `.xcs-search` tidak
   pernah dirender oleh satu pun berkas .jsx/.php (keduanya hanya ada di
   styles.css). Aturan untuk keduanya = baris mati. */

/* ═══════════════════════════════════════════════════════════════════════════
 * 3. SIDEBAR — ITEM NAVIGASI  (§5.1, bagian paling penting)
 * ───────────────────────────────────────────────────────────────────────────
 * Yang harus dikalahkan: styles.css:327 (#FFFFFF/#0A0A0A), :14241 (sama,
 * !important, 0,2,0), :18126 (html[data-theme="dark"] …is-meetus.is-active,
 * 0,4,1), plus DUA pseudo-elemen garis kiri — :5862 pada .is-active dan
 * :5879 pada :hover (0,5,1 karena rantai :not()-nya).
 * Referensi tidak punya garis kiri sama sekali, hanya PIL HIJAU.
 * ═══════════════════════════════════════════════════════════════════════════ */

:root .xcs-app .xcs-sidebar .xcs-nav-item {
  min-height: 38px;
  transition: background-color .14s ease, color .14s ease;
}

/* Tiga varian tombol (.is-primary, .is-ops-primary, .is-daily) sengaja
   dikecualikan di seluruh bagian ini: itu tombol primer §4.1, milik
   nova-ui.css. Tanpa :not(), rantai ini akan menimpa
   `.xcs-nav-item.is-primary { color: #0A0A0A }` dan tinta tombolnya berubah
   jadi abu terang di atas isian limau — kontras langsung gagal.

   SEMUA properti di bawah WAJIB !important: styles.css:12261–12266 memaku
   color/font-weight/font-size/letter-spacing/border-radius `.xcs-nav-item`
   dengan !important (dan :12887 sekali lagi untuk color). Tanpa !important
   seluruh blok ini tidak pernah berlaku — nilai lama (14px/600/abu) menang. */

/* 3a. Bentuk & ukuran — berlaku untuk item aktif JUGA, kalau tidak item
   aktif tetap 14px sementara tetangganya 13,5px dan barisnya bergoyang. */
:root .xcs-app .xcs-sidebar .xcs-nav-item:not(.is-primary):not(.is-ops-primary):not(.is-daily) {
  border-radius: var(--xcs-radius-sm) !important;
  font-size: 13.5px !important;
  letter-spacing: -.004em !important;
  box-shadow: none !important; border: 0 !important;
}

/* 3b. Tinta & berat — HANYA item tidak aktif. `:not(.is-active)` wajib:
   dengan !important, rantai (0,7,0) ini akan mengalahkan pil hijau (0,5,0)
   dan tintanya jadi #C3CBD3 di atas limau = 1,4:1. */
:root .xcs-app .xcs-sidebar .xcs-nav-item:not(.is-active):not(.is-primary):not(.is-ops-primary):not(.is-daily) {
  color: var(--xcs-side-ink-2) !important; font-weight: 500 !important;
}

/* Hover: lapisan putih 6%. styles.css:12271/:12895 memakai !important. */
:root .xcs-app .xcs-sidebar .xcs-nav-item:not(.is-active):not(.is-primary):not(.is-ops-primary):not(.is-daily):hover {
  background: rgba(255, 255, 255, .06) !important; color: var(--xcs-ink-on-brand) !important;
}

/* Matikan KEDUA pseudo-elemen. :hover ditulis terpisah karena aturan lamanya
   (0,5,1) — tanpa baris itu garis abunya bertahan. */
:root .xcs-app .xcs-sidebar .xcs-nav-item:not(.is-primary):not(.is-daily)::before,
:root .xcs-app .xcs-sidebar .xcs-nav-item:not(.is-primary):not(.is-daily):hover::before,
:root .xcs-app .xcs-sidebar .xcs-nav-item.is-active::before {
  content: none !important; display: none !important; animation: none !important;
  background: none !important; box-shadow: none !important; width: 0 !important;
}

/* ── PIL HIJAU ────────────────────────────────────────────────────────────
   isian --fsw-accent-side, tinta --fsw-on-accent (16:1), radius 10, berat 650,
   tanpa garis kiri, tanpa bayangan. Varian is-meetus/is-contentbank/is-forum
   dan anak shop/wallet/shopadmin ditulis lengkap: masing-masing punya aturan
   sendiri di styles.css. */
:root .xcs-app .xcs-sidebar .xcs-nav-item.is-active,
:root .xcs-app .xcs-sidebar .xcs-nav-item.is-active:hover,
:root .xcs-app .xcs-sidebar .xcs-nav-item.is-meetus.is-active,
:root .xcs-app .xcs-sidebar .xcs-nav-item.is-contentbank.is-active,
:root .xcs-app .xcs-sidebar .xcs-nav-item.is-forum.is-active,
:root .xcs-app .xcs-sidebar .xcs-nav-child.is-shop.is-active,
:root .xcs-app .xcs-sidebar .xcs-nav-child.is-wallet.is-active,
:root .xcs-app .xcs-sidebar .xcs-nav-child.is-shopadmin.is-active {
  background: var(--fsw-accent-side) !important;
  background-image: none !important;
  color: var(--fsw-on-accent) !important;
  border: 0 !important;
  border-radius: var(--xcs-radius-sm) !important;
  box-shadow: none !important;
  font-weight: 650 !important;   /* styles.css:12278=700!, :12907=800! */
}

/* styles.css:14251 masih memaksa `stroke: var(--xcs-sidebar-fg) !important`
   pada ikon item aktif. */
:root .xcs-app .xcs-sidebar .xcs-nav-item.is-active > span,
:root .xcs-app .xcs-sidebar .xcs-nav-item.is-active > svg,
:root .xcs-app .xcs-sidebar .xcs-nav-item.is-active svg {
  color: var(--fsw-on-accent) !important; stroke: var(--fsw-on-accent) !important;
}

/* Lencana hitung di dalam pil hijau. Bentuk dasar .xcs-pill milik nova-ui
   (§4.4); yang diatur di sini hanya nadanya saat berada DI ATAS pil aktif. */
:root .xcs-app .xcs-sidebar .xcs-nav-item.is-active .xcs-pill,
:root .xcs-app .xcs-sidebar .xcs-nav-item.is-active .xcs-kbd {
  background: rgba(11, 15, 13, .16) !important;
  color: var(--fsw-on-accent) !important; border: 0 !important;
}

/* Fokus papan tik: cincin aksen yang terlihat di atas permukaan gelap. */
:root .xcs-app .xcs-sidebar .xcs-nav-item:focus-visible { outline: 2px solid var(--fsw-accent-side); outline-offset: 2px; }

/* ═══════════════════════════════════════════════════════════════════════════
 * 4. SIDEBAR — JUDUL GRUP & ANAK NAVIGASI  (§5.1)
 * Judul grup = SATU-SATUNYA label yang tetap kapital-semua di seluruh
 * aplikasi (referensi: "DASHBOARDS"/"SETTINGS"). 11px, letter-spacing .12em.
 * ═══════════════════════════════════════════════════════════════════════════ */

/* styles.css:13236 menyapu `.xcs-section-title` ke 22px/800 !important untuk
   judul bagian di dalam halaman, dan ikut mengenai label grup di sidebar. */
:root .xcs-app .xcs-sidebar .xcs-section-title,
:root .xcs-app .xcs-sidebar .xcs-nav-group-header {
  font-family: inherit !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  letter-spacing: .12em !important;
  line-height: 1.4 !important;
  text-transform: uppercase !important;
  color: var(--xcs-side-ink-3) !important;
  background: transparent;
  border-radius: var(--xcs-radius-xs);
  padding: 10px 10px 4px !important;   /* styles.css:11957 & :12386 memakai !important */
}

:root .xcs-app .xcs-sidebar .xcs-nav-group-header:hover {
  color: var(--xcs-ink-on-brand) !important; background: rgba(255, 255, 255, .04);
}

/* Grup yang memuat item aktif: tinta aksen saja, tanpa latar, supaya tidak
   bersaing dengan pil hijau di bawahnya. */
:root .xcs-app .xcs-sidebar .xcs-nav-group.has-active-child .xcs-nav-group-header {
  color: var(--fsw-accent-side) !important; background: transparent;
}

:root .xcs-app .xcs-sidebar .xcs-nav-group-chevron { opacity: .6; }

/* Garis penyangga anak grup: 1px (§3 "tidak ada garis tebal"), bukan 2px perak. */
:root .xcs-app .xcs-sidebar .xcs-nav-group-body {
  margin-left: 8px; padding-left: 12px; gap: 2px;
  border-left: 1px solid rgba(255, 255, 255, .10);
}

/* Anak nav: sedikit lebih kecil. Padding lamanya (styles.css:6558, dengan
   !important) sengaja TIDAK dilawan — nilainya sudah pas. */
/* sidebar.jsx:70 memberi anak nav KEDUA kelas sekaligus:
   `xcs-nav-item xcs-nav-child`. Artinya aturan 3b (0,7,0) di atas juga
   mengenainya dan menang atas `.xcs-nav-child` polos (0,4,0) — tinta yang
   lebih redup di bawah ini tidak akan pernah terlihat tanpa rantai yang
   lebih panjang. Di sini dipanjangkan ke (0,9,0), dengan :not(.is-active)
   yang sama supaya pil hijau anak aktif tidak ikut teredupkan. */
:root .xcs-app .xcs-sidebar .xcs-nav-child { min-height: 34px; }
:root .xcs-app .xcs-sidebar .xcs-nav-item.xcs-nav-child:not(.is-active):not(.is-primary):not(.is-ops-primary):not(.is-daily) {
  color: var(--xcs-side-ink-3) !important; font-weight: 500 !important;
}
/* Berat anak aktif sudah diatur blok pil hijau di atas (650 !important). */

/* ═══════════════════════════════════════════════════════════════════════════
 * 5. SIDEBAR — PEMILIH TEMA, KARTU AKUN  (§5.1)
 * Posisi keduanya (sticky di dasar sidebar, ops-theme.css:2317) tidak diubah
 * sama sekali — hanya warnanya. Latar sticky-nya ikut --xcs-side-bg, yang
 * sudah diarahkan ke --xcs-navy di bagian 2.
 * ═══════════════════════════════════════════════════════════════════════════ */

/* Latarnya WAJIB pekat, bukan rgba putih. Kedua kotak ini dipasang
   `position: sticky` di dasar sidebar (ops-theme.css, styles.css:3433)
   dengan latar var(--xcs-side-bg); kalau rantai (0,4,0) di sini menggantinya
   dengan lapisan transparan, daftar nav yang tergulir terlihat menembusnya.
   var(--xcs-navy-2) = #1A1F24, satu tingkat di atas permukaan sidebar —
   sesuai tumpukan permukaan referensi, dan pekat. */
:root .xcs-app .xcs-sidebar .xcs-theme-switch {
  background: var(--xcs-navy-2); border: 1px solid rgba(255, 255, 255, .10);
  border-radius: var(--xcs-radius-sm);
}

:root .xcs-app .xcs-sidebar .xcs-theme-opt {
  border-radius: var(--xcs-radius-xs); color: var(--xcs-side-ink-3); font-weight: 600;
}
:root .xcs-app .xcs-sidebar .xcs-theme-opt:hover {
  color: var(--xcs-ink-on-brand); background: rgba(255, 255, 255, .06);
}

/* Pilihan aktif = pil hijau, sebahasa dengan item nav aktif. Rantai (0,5,0)
   dan (0,5,1) dipakai supaya <span> di dalam tombolnya ikut berubah. */
:root .xcs-app .xcs-sidebar .xcs-theme-opt.on {
  background: var(--fsw-accent-side) !important;
  color: var(--fsw-on-accent) !important; box-shadow: none !important;
}
:root .xcs-app .xcs-sidebar .xcs-theme-opt.on * {
  color: var(--fsw-on-accent) !important; stroke: var(--fsw-on-accent) !important;
}
:root .xcs-app .xcs-sidebar .xcs-theme-opt:focus-visible { outline: 2px solid var(--fsw-accent-side); outline-offset: 1px; }

/* Kartu akun di dasar sidebar — juga sticky, jadi juga pekat. */
:root .xcs-app .xcs-sidebar .xcs-userblock {
  background: var(--xcs-navy-2); border: 1px solid rgba(255, 255, 255, .08);
  border-radius: var(--fsw-radius-md); color: var(--xcs-side-ink-2);
}
/* Di laci HP kartu ini dipasang penuh-lebar dengan margin negatif
   (styles.css:3433). Sudut membulat dan garis keliling akan menyembul di
   luar laci, jadi di sana ia rata dengan hanya garis atas. */
@media (max-width: 768px) {
  :root .xcs-app .xcs-sidebar .xcs-userblock {
    border: 0; border-top: 1px solid rgba(255, 255, 255, .08); border-radius: 0;
  }
}
:root .xcs-app .xcs-sidebar .xcs-user-name { color: var(--xcs-ink-on-brand); }
:root .xcs-app .xcs-sidebar .xcs-user-role { color: var(--xcs-side-ink-3); }
:root .xcs-app .xcs-sidebar .xcs-icon-btn {
  background: rgba(255, 255, 255, .06); border-radius: var(--xcs-radius-xs); color: var(--xcs-side-ink-2);
}
:root .xcs-app .xcs-sidebar .xcs-icon-btn:hover { background: rgba(255, 255, 255, .12); color: var(--xcs-ink-on-brand); }
/* `.xcs-dot` dihapus: satu-satunya kelas serupa yang dirender adalah
   `.xcs-dot-sep` di detail.jsx:490 (pemisah titik di kepala halaman, bukan
   lencana sidebar). Selectornya tidak pernah cocok. */

/* ═══════════════════════════════════════════════════════════════════════════
 * 6. KEPALA HALAMAN  (§5.2)
 * H1 40/1.12/700 Inter. styles.css:13113 mengunci Jost 42px/500 !important
 * berikut -webkit-text-fill-color; ketiganya ditulis ulang.
 * RUANG AMAN A1: lonceng melayang di kanan atas, dan ruang amannya adalah rel
 * 70/84px pada .xcs-main-inner (bagian 1). Tidak ada aturan di bawah ini yang
 * memakai margin negatif, width:100vw, atau apa pun yang menarik kepala
 * halaman keluar dari rel itu.
 * ═══════════════════════════════════════════════════════════════════════════ */

:root .xcs-app .xcs-pagehead { align-items: flex-end; gap: 16px; padding: 4px 0 8px; margin-bottom: 0; }

/* Di bawah 1200px kepala halaman MENUMPUK — ops-theme.css:1401 mengubah
   arahnya menjadi kolom. `align-items: flex-end` di baris atas lalu berlaku
   pada sumbu MENDATAR dan mendorong blok judul ke kanan: di 768–1200px judul
   halaman melayang di sisi kanan sementara seluruh isi halaman rata kiri.
   Aturan `align-items: stretch` milik ops-theme kalah spesifisitas
   (0,2,1 lawan 0,3,1), jadi koreksinya ditulis di sini, di lapisan yang
   sama dengan penyebabnya. Dipersempit ke `.fsw-page >` supaya kepala
   halaman yang TETAP mendatar (Forum, Meet Us) tidak ikut merenggang. */
@media (max-width: 1200px) {
  :root .xcs-app .fsw-page > .xcs-pagehead { align-items: stretch; }
}

:root .xcs-app .xcs-pagehead h1 {
  font-family: inherit !important;
  font-size: var(--fsw-fs-h1) !important; font-weight: 700 !important;
  line-height: 1.12 !important; letter-spacing: -.022em !important;
  margin: 2px 0 6px !important;
  color: var(--xcs-ink-1) !important; background: none !important;
  -webkit-text-fill-color: var(--xcs-ink-1) !important;
  /* B4 §D.1 — judul panjang tidak boleh menembus tepi; dipatahkan hanya
     kalau memang tidak muat. */
  min-width: 0;
  overflow-wrap: break-word;
}
/* Emoji / ikon di dalam h1 tetap berwarna aslinya. */
:root .xcs-app .xcs-pagehead h1 > * { -webkit-text-fill-color: initial; }

/* HP: aturan lama punya empat ukuran (22/24/28/22px) di empat ambang, dan
   rantai di atas (0,3,1) mengalahkan semuanya. Jadi ukuran HP HARUS ditulis
   ulang di sini, kalau tidak judul 40px terbawa ke layar 360px dan melimpah.
   Nilainya --fsw-fs-h1-hp (26px), sama dengan ops-theme.css:1943. */
@media (max-width: 768px) {
  :root .xcs-app .xcs-pagehead h1 { font-size: var(--fsw-fs-h1-hp) !important; line-height: 1.15 !important; }
  /* `align-items` dan `gap` TIDAK ditulis di sini. styles.css:13227 memaku
     align-items ke flex-start !important dan :2619 gap ke 14px !important,
     jadi nilai tanpa !important hanya tampak benar di berkas ini dan tidak
     pernah berlaku. Memaksanya dengan !important berarti membalik tata
     letak HP yang sudah teruji demi selisih 2px — tidak sepadan. */
}

:root .xcs-app .xcs-pagehead-sub {
  color: var(--xcs-ink-3) !important; font-size: 14px !important;
  font-weight: 400 !important; line-height: 1.55 !important;
  max-width: 68ch; margin: 0;
}

/* Eyebrow: §2 melarang kapital-semua untuk label mikro (kecuali judul grup
   nav), dan pil putih bergaris di atas judul adalah kebalikan dari "not
   cluttered". Ia kembali jadi keterangan datar. */
:root .xcs-app .xcs-pagehead .xcs-eyebrow {
  display: inline-block; background: none !important; border: 0 !important;
  box-shadow: none !important; padding: 0 !important; margin-bottom: 6px !important;
  font-family: inherit !important; font-size: var(--fsw-fs-micro) !important;
  font-weight: var(--fsw-micro-fw) !important; letter-spacing: var(--fsw-micro-ls) !important;
  text-transform: var(--fsw-micro-tt) !important; color: var(--xcs-ink-3) !important;
}

/* Kelompok tombol di kanan judul. Lebar dan pelipatannya milik ops-theme.css
   (B4 §D.2) dan TIDAK diubah — di sini hanya jaraknya. */
:root .xcs-app .xcs-pagehead-cta { gap: 8px !important; align-items: center; }

/* Baris keterangan di bawah judul (tanggal, pod, jumlah). */
:root .xcs-app .fsw-head-meta {
  gap: 8px 14px; font-size: var(--fsw-fs-micro-lg);
  color: var(--xcs-ink-3); font-variant-numeric: tabular-nums;
}

/* ═══════════════════════════════════════════════════════════════════════════
 * 7. DERET TAB  —  .fsw-tabs / .fsw-tab
 * Tinggi & padding HANYA diatur di ≥769px. Di ≤768px ops-theme.css menaikkan
 * keduanya ke 38–44px demi target sentuh, dan aturan di sini berspesifisitas
 * sama — tanpa batas lebar ia akan menimpanya. Sapuan B4 §C bersih dari
 * "target sentuh kecil"; jangan dirusak.
 * ═══════════════════════════════════════════════════════════════════════════ */

.fsw-tabs { gap: 6px; }

.fsw-tab {
  border-radius: var(--fsw-radius-chip); font-weight: 600; font-size: 13px;
  color: var(--xcs-ink-3); transition: background-color .14s ease, color .14s ease;
}
.fsw-tab:hover:not(.on) { background: var(--xcs-bg-3); color: var(--xcs-ink-1); }
.fsw-tab.on { background: var(--fsw-accent); color: var(--fsw-on-accent); font-weight: 650; }
.fsw-tab:focus-visible { outline: 2px solid var(--fsw-accent-line); outline-offset: 2px; }
/* Angka di dalam tab aktif: isian gelap 16% di atas hijau, bukan hitam pekat. */
.fsw-tab.on .fsw-tab-n { background: rgba(11, 15, 13, .16); color: var(--fsw-on-accent); border: 0; }

@media (min-width: 769px) {
  .fsw-tab { min-height: 32px; padding: 6px 12px; }
}

/* ═══════════════════════════════════════════════════════════════════════════
 * 8. LAPISAN ATAS — SCRIM  (§5.3)
 * rgba(6,9,7,.62) ditulis apa adanya di B5-spec.md §5.3: turunan --nv-bg
 * yang tidak punya token sendiri.
 * ═══════════════════════════════════════════════════════════════════════════ */

/* Scrim milik modul ops — tidak ada aturan lama yang memakai !important,
   jadi urutan muat sudah cukup. */
.fsw-modal-scrim,
.fsw-drawer-scrim,
.fsw-assist-scrim {
  background: rgba(6, 9, 7, .62);
}

/* `.xcs-modal-scrim` DIHAPUS: tidak ada di satu pun .jsx. Scrim modal yang
   betul-betul dirender bernama `.xcs-modal-backdrop` (13 pemakaian di
   .jsx) dan `.xcs-modal-overlay` (9 pemakaian) — keduanya dulu terlewat
   sama sekali, sehingga §5.3 tidak pernah sampai ke satu pun modal.
   !important WAJIB: meetus-theme.css:103 & :109 memaku kedua kelas ini ke
   rgba(0,0,0,.78) !important, jadi aturan tanpa !important — berapa pun
   spesifisitasnya — tidak akan pernah berlaku. `:root` menyamakan
   spesifisitas dengan blok `[data-theme="dark"]` lama (0,2,0); berkas ini
   dimuat terakhir sehingga ia yang menang, di KEDUA tema sekaligus.
   Scrim lelang (`body .xcs-modal-overlay.xcs-auction-modal-overlay`,
   0,3,1 + !important) lebih spesifik dan sengaja tetap menang — latar
   kertasnya memang bagian dari modul itu.
   Hanya `background` yang ditulis; position/inset/z-index milik berkas lain. */
:root .xcs-modal-backdrop,
:root .xcs-modal-overlay {
  background: rgba(6, 9, 7, .62) !important;
}

/* Laci nav HP. Selector ditiru persis dari styles.css:2388 supaya menang
   lewat urutan muat, bukan spesifisitas tambahan. */
@media (max-width: 768px) {
  .xcs-app.nav-open .xcs-nav-scrim {
    background: rgba(6, 9, 7, .62); backdrop-filter: none; -webkit-backdrop-filter: none;
  }
}

/* Penangkap klik panel notifikasi sengaja LEBIH tipis: 62% untuk dropdown
   kecil membuat seluruh halaman gelap hanya karena lonceng ditekan. */
.xcs-notif-scrim { background: rgba(6, 9, 7, .32); }

/* .fsw-menu-scrim memang transparan (hanya penangkap klik) — dibiarkan. */

/* ═══════════════════════════════════════════════════════════════════════════
 * 9. LAPISAN ATAS — MODAL, LACI, MENU  (§5.3)
 * Permukaan --xcs-bg-2, garis --xcs-line-1, radius 18 (modal) / 12 (menu),
 * bayangan --xcs-shadow-pop.
 * ═══════════════════════════════════════════════════════════════════════════ */

/* `.xcs-modal-lg` dihapus — tidak dirender di mana pun. */
.xcs-modal, .fsw-modal {
  background: var(--xcs-bg-2); border: 1px solid var(--xcs-line-1);
  border-radius: var(--xcs-radius-lg); box-shadow: var(--xcs-shadow-pop);
  color: var(--xcs-ink-1);
}
/* styles.css:22767 `[data-theme="dark"] .xcs-modal { background: linear-…
   !important }` (0,2,1) — dikalahkan oleh (0,3,0) di bawah. */
:root[data-theme="dark"] .xcs-modal,
:root[data-theme="dark"] .fsw-modal {
  background: var(--xcs-bg-2) !important; background-image: none !important;
  border: 1px solid var(--xcs-line-1) !important;
  /* styles.css:14057 memaku color ke rgba(255,255,255,.95) !important. */
  color: var(--xcs-ink-1) !important;
}

.fsw-drawer {
  background: var(--xcs-bg-1); border-left: 1px solid var(--xcs-line-1);
  box-shadow: var(--xcs-shadow-pop); color: var(--xcs-ink-1);
}
.fsw-drawer-h, .fsw-modal-h { background: var(--xcs-bg-2); border-bottom: 1px solid var(--xcs-line-1); }
.fsw-modal-f { background: var(--xcs-bg-tint); border-top: 1px solid var(--xcs-line-1); }
.fsw-drawer-title, .fsw-modal-h h3 {
  font-family: inherit; font-size: var(--fsw-fs-cardh);
  font-weight: 650; letter-spacing: -.018em; color: var(--xcs-ink-1);
}

/* Menu ⋮ — radius 12, garis token, bayangan pop. */
.fsw-menu {
  background: var(--xcs-bg-2); border: 1px solid var(--xcs-line-1);
  border-radius: var(--fsw-radius-md); box-shadow: var(--xcs-shadow-pop);
}
.fsw-menu-item { border-radius: var(--xcs-radius-xs); color: var(--xcs-ink-1); }
.fsw-menu-item:hover:not(.is-off) { background: var(--xcs-bg-3); }
.fsw-menu-item:focus-visible { outline: 2px solid var(--fsw-accent-line); outline-offset: -2px; }
.fsw-menu-sep { background: var(--xcs-line-1); }
/* Judul kelompok di dalam menu ikut sentence case: §2 mencabut kapital-semua
   di luar judul grup navigasi. */
.fsw-menu-h {
  font-size: var(--fsw-fs-micro); font-weight: var(--fsw-micro-fw);
  letter-spacing: var(--fsw-micro-ls); text-transform: var(--fsw-micro-tt);
  color: var(--xcs-ink-3);
}

/* ═══════════════════════════════════════════════════════════════════════════
 * 10. LAPISAN ATAS — TOAST  (§5.3)
 * styles.css memberi toast isian #0A0A0A, dan `[data-theme="dark"] .xcs-toast`
 * sebuah gradien kaca. Kedua selector ditiru persis supaya menang lewat
 * urutan muat. Varian error ditulis SESUDAHNYA: aturan .xcs-toast di berkas
 * ini berspesifisitas sama dengan .xcs-toast-error yang letaknya lebih awal,
 * jadi tanpa itu latar merahnya ikut terhapus.
 * ═══════════════════════════════════════════════════════════════════════════ */

.xcs-toast {
  background: var(--xcs-bg-2); color: var(--xcs-ink-1);
  border: 1px solid var(--xcs-line-1); border-radius: var(--fsw-radius-md);
  box-shadow: var(--xcs-shadow-pop); font-size: 13.5px; font-weight: 500;
}
[data-theme="dark"] .xcs-toast {
  background: var(--xcs-bg-2); background-image: none;
  backdrop-filter: none; -webkit-backdrop-filter: none;
  border: 1px solid var(--xcs-line-1); color: var(--xcs-ink-1);
  box-shadow: var(--xcs-shadow-pop);
}
.xcs-toast .xcs-toast-ico { background: var(--fsw-accent); background-image: none; color: var(--fsw-on-accent); }
/* Varian gagal (detail.jsx:778 menyusunnya sebagai `xcs-toast-${kind}`,
   jadi kelasnya memang dirender meski tidak pernah tertulis utuh di JSX). */
.xcs-toast.xcs-toast-error,
[data-theme="dark"] .xcs-toast.xcs-toast-error {
  background: var(--xcs-red); background-image: none;
  border-color: var(--xcs-red);
}
/* KONTRAS — dihitung ulang, klaim lama ("4,5:1 gelap") keliru.
   Tema terang: --xcs-red = #C7302F, putih di atasnya 5,40:1 ✓
   Tema gelap:  --xcs-red = #F4635F, putih di atasnya hanya 3,09:1 ✗.
   Di tema gelap tintanya dibalik ke --fsw-on-accent (#0B0F0D) = 6,24:1 ✓ —
   logika yang sama dengan pil limau. */
.xcs-toast.xcs-toast-error { color: var(--xcs-ink-on-brand); }
[data-theme="dark"] .xcs-toast.xcs-toast-error { color: var(--fsw-on-accent); }
/* `.xcs-toast.xcs-toast-error .xcs-toast-ico` dihapus: toast bertanda error
   hanya dirender detail.jsx:779, dan ikonnya di sana bernama
   `.xcs-toast-icon` — selectornya tidak pernah cocok. Glyph-nya mewarisi
   `color` dari kedua baris di atas, jadi ia ikut benar di kedua tema. */

/* ═══════════════════════════════════════════════════════════════════════════
 * 11. LONCENG NOTIFIKASI + PANELNYA  (§5.3)
 * ───────────────────────────────────────────────────────────────────────────
 * RUANG AMAN A1 — TIDAK ADA `position`, `top`, `right`, `bottom`, `width`,
 * `height`, atau `z-index` untuk .xcs-notif-bell di berkas ini. Penempatannya
 * (rel kanan 70/84px di desktop; ditarik ke bilah atas pada ≤768px lewat
 * ops-theme.css:1893) ADALAH perbaikan cacat A1 dan dibiarkan utuh. Yang
 * diubah hanya warna, dan hanya di ≥769px: di HP lonceng duduk di bilah
 * gelap dengan latar transparan, dan pil putih akan merusaknya.
 * ═══════════════════════════════════════════════════════════════════════════ */

@media (min-width: 769px) {
  /* styles.css:12684 memakai !important untuk keempat properti ini. */
  .xcs-notif-bell {
    background: var(--xcs-bg-2) !important; color: var(--xcs-ink-2) !important;
    border: 1px solid var(--xcs-line-1) !important;
    box-shadow: var(--xcs-shadow-md) !important; border-radius: var(--xcs-radius-pill);
  }
  /* styles.css:13985 `[data-theme="dark"] .xcs-notif-bell` (0,2,1) — dilawan
     dengan (0,3,0), bukan dengan !important saja. */
  :root[data-theme="dark"] .xcs-notif-bell {
    background: var(--xcs-bg-2) !important; color: var(--xcs-ink-2) !important;
    border-color: var(--xcs-line-1) !important;
  }
  .xcs-notif-bell:hover,
  :root[data-theme="dark"] .xcs-notif-bell:hover {
    background: var(--xcs-bg-3) !important; color: var(--xcs-ink-1) !important;
    border-color: var(--fsw-accent-line) !important;
  }
}

/* KONTRAS — sama seperti toast gagal: putih di atas #F4635F (tema gelap)
   hanya 3,09:1. Tinta dibalik di tema gelap → 6,24:1. */
.xcs-notif-badge { background: var(--xcs-red); color: var(--xcs-ink-on-brand); }
[data-theme="dark"] .xcs-notif-badge { color: var(--fsw-on-accent); }

/* Panel. Posisi dan max-height tidak disentuh — keduanya !important di
   ≤768px dan sudah dihitung terhadap notch.
   `.xcs-notif-dropdown` dihapus dari daftar: tidak ada di satu pun .jsx
   (notifications.jsx:333 merender `.xcs-notif-panel`). */
.xcs-notif-panel {
  background: var(--xcs-bg-2); border: 1px solid var(--xcs-line-1);
  border-radius: var(--xcs-radius-lg); box-shadow: var(--xcs-shadow-pop);
  color: var(--xcs-ink-1);
}
/* styles.css:14169/:14170 memaku background DAN border-color panel ini
   dengan !important pada spesifisitas yang sama (0,2,0). Tanpa !important
   di sini hanya background yang tertolong (lewat nova.css:348) sementara
   garisnya tetap rgba(255,255,255,.10) — separuh timpaan diam-diam gagal. */
[data-theme="dark"] .xcs-notif-panel {
  background: var(--xcs-bg-2) !important; background-image: none !important;
  backdrop-filter: none; -webkit-backdrop-filter: none;
  border: 1px solid var(--xcs-line-1) !important;
  border-radius: var(--xcs-radius-lg);
  box-shadow: var(--xcs-shadow-pop);
}

/* styles.css:14193 & :14198 memaku warna judul/subjudul panel dengan
   !important di (0,2,0). `:root` menyamakan spesifisitas, !important + urutan
   muat menyelesaikannya. */
.xcs-notif-head { border-bottom: 1px solid var(--xcs-line-1); }
:root .xcs-notif-title { font-size: 15px; font-weight: 650; color: var(--xcs-ink-1) !important; }
:root .xcs-notif-sub { color: var(--xcs-ink-3) !important; font-size: var(--fsw-fs-micro); }
.xcs-notif-clear { color: var(--fsw-accent-ink); border-radius: var(--xcs-radius-xs); }
/* KONTRAS — latar hover semula --xcs-bg-3: #2E7D12 di atas #E6EAE6 hanya
   4,26:1 di tema terang. --xcs-bg-tint memberi 4,89:1 (terang) dan
   14,71:1 (gelap). */
.xcs-notif-clear:hover:not(:disabled) { background: var(--xcs-bg-tint); }

/* Kartu notifikasi. Empat ragam "unread" lama memakai hex terang (#DCFCE7,
   #86EFAC, #D6D6D6, #CACACA) yang hilang di tema gelap; diganti token status.
   SEMUANYA butuh !important: styles.css:14174/:14175/:14180/:14181/:14185/
   :14189/:14198 memaku background, border-color dan ketiga warna teks kartu
   ini dengan !important pada spesifisitas yang sama (0,2,0 / 0,3,0). Tanpa
   !important seluruh blok ini tidak berlaku sama sekali di tema gelap —
   kartunya tetap rgba(255,255,255,.03) seperti sebelum B5. */
:root .xcs-notif-card { background: var(--xcs-bg-tint) !important; border: 1px solid var(--xcs-line-1) !important; border-radius: var(--xcs-radius-sm); }
:root .xcs-notif-card.unread            { background: var(--xcs-bg-tint) !important;    border-color: var(--xcs-line-2) !important; }
:root .xcs-notif-card.kind-new.unread   { background: var(--fsw-accent-soft) !important; border-color: var(--fsw-accent-line) !important; }
:root .xcs-notif-card.kind-assign.unread{ background: var(--xcs-info-soft) !important;   border-color: var(--xcs-info) !important; }
:root .xcs-notif-card.kind-done.unread  { background: var(--xcs-green-soft) !important;  border-color: var(--xcs-green) !important; }
:root .xcs-notif-card.kind-status.unread{ background: var(--xcs-bg-3) !important;        border-color: var(--xcs-line-2) !important; }
:root .xcs-notif-card-title { color: var(--xcs-ink-1) !important; font-weight: 650; }
:root .xcs-notif-card-body  { color: var(--xcs-ink-2) !important; }
:root .xcs-notif-card-foot  { color: var(--xcs-ink-3) !important; }
/* KONTRAS — dua latar bertinta menghabiskan margin --xcs-ink-3:
   kaki di atas kind-new  (gelap, #2F412A) = 4,35:1  ✗
   kaki di atas kind-status (terang, #E6EAE6) = 4,48:1 ✗
   Keduanya naik ke --xcs-ink-2: 7,10:1 dan 8,56:1. Ragam lain sudah lolos
   (kind-assign 4,53 terang / 5,18 gelap; kind-done 4,75 / 4,92). */
:root .xcs-notif-card.kind-new .xcs-notif-card-foot,
:root .xcs-notif-card.kind-status .xcs-notif-card-foot { color: var(--xcs-ink-2) !important; }
:root .xcs-notif-dot        { background: var(--fsw-accent-ink); }
/* KONTRAS — --xcs-red di atas --xcs-red-soft hanya 4,49:1 di tema terang.
   --fsw-red-soft lebih tipis (12% vs 14%) → 4,61:1 terang, 4,68:1 gelap. */
.xcs-notif-x:hover { background: var(--fsw-red-soft); color: var(--xcs-red); }

/* ═══════════════════════════════════════════════════════════════════════════
 * 12. ASISTEN MENGAMBANG  (§5.3)
 * ───────────────────────────────────────────────────────────────────────────
 * RUANG AMAN A2 — TIDAK ADA `position`, `right`, `left`, `bottom`, `top`,
 * `width`, `height`, atau `z-index` untuk .fsw-assist-fab di berkas ini.
 * Ruang amannya = rel kanan 70/84px (bagian 1) + pemindahan FAB ke sisi kiri
 * dan ke bilah atas pada ≤768px (ops-theme.css:1425 & :1904). Semuanya
 * dibiarkan persis seperti adanya; yang diubah hanya warna.
 * ═══════════════════════════════════════════════════════════════════════════ */

.fsw-assist-fab { background: var(--fsw-accent); color: var(--fsw-on-accent); box-shadow: var(--xcs-shadow-lg); }
.fsw-assist-fab:hover { box-shadow: var(--xcs-shadow-pop); }
.fsw-assist-fab:focus-visible { outline: 3px solid var(--fsw-accent-soft); outline-offset: 3px; }
/* Cincin ganda di sekelilingnya sisa gaya lama (tinta hitam + garis aksen).
   Di atas isian hijau ia cuma jadi derau. */
.fsw-assist-fab::after { display: none; }

/* Di ≤768px FAB bukan tombol mengambang lagi: ia duduk di bilah atas gelap
   bersama lonceng. Lingkaran hijau 44px di sana terbaca sebagai tombol utama
   padahal bukan, jadi ia kembali jadi ikon polos beraksen. Blok ini WAJIB
   berada sesudah aturan dasar di atas. */
@media (max-width: 768px) {
  .fsw-assist-fab { background: transparent; color: var(--fsw-accent-side); box-shadow: none; }
}

/* Panel asisten = permukaan lapisan atas yang sama dengan modal.
   `.fsw-assist-panel` dihapus — ops-assistant.jsx:81 merender `.fsw-assist`
   saja, kelas itu tidak ada di mana pun. */
.fsw-assist {
  background: var(--xcs-bg-2); border: 1px solid var(--xcs-line-1);
  border-radius: var(--xcs-radius-lg); box-shadow: var(--xcs-shadow-pop);
  color: var(--xcs-ink-1);
}
.fsw-assist-h { border-bottom: 1px solid var(--xcs-line-1); }
.fsw-assist-dot { background: var(--fsw-accent); }
/* Gelembung pertanyaan memakai `background: var(--fsw-ink); color:#FFFFFF` —
   di tema gelap itu putih-di-atas-putih. Diganti isian aksen: tinta
   --fsw-on-accent di atasnya 16:1 di KEDUA tema. */
.fsw-assist-msg.is-q { background: var(--fsw-accent); color: var(--fsw-on-accent); }
.fsw-assist-msg.is-a { background: var(--xcs-bg-tint); border: 1px solid var(--xcs-line-1); color: var(--xcs-ink-1); }
@media (max-width: 768px) {
  /* Lembar penuh dari bawah: sudut bawahnya menempel ke tepi layar. */
  .fsw-assist { border-radius: var(--xcs-radius-lg) var(--xcs-radius-lg) 0 0; }
}

/* ═══════════════════════════════════════════════════════════════════════════
 * 13. BILAH BAWAH HP  (§5.4)
 * Isian --xcs-navy (gelap di kedua tema, sekeluarga dengan sidebar), item
 * aktif tinta aksen, ikon 20px. Tinggi, jumlah kolom, z-index, dan aturan
 * sembunyi (.fsw-overlay-open / .nav-open) TIDAK diubah — semuanya masuk
 * perhitungan ruang di ops-theme.css (--fsw-bbar-h = 78px).
 * ═══════════════════════════════════════════════════════════════════════════ */

@media (max-width: 768px) {
  .fsw-bbar-in {
    background: var(--xcs-navy); border: 1px solid rgba(255, 255, 255, .10);
    box-shadow: 0 8px 28px rgba(0, 0, 0, .38);
  }
  .fsw-bbar-it { color: var(--xcs-side-ink-3); }
  .fsw-bbar-ico svg { width: 20px; height: 20px; }

  /* Bilahnya gelap di KEDUA tema, jadi tinta aktifnya harus --fsw-accent-side
     (limau penuh). --fsw-accent-ink bernilai hijau tua #2E7D12 di tema
     terang dan praktis hilang di atas #11161A. */
  .fsw-bbar-it.is-on { color: var(--fsw-accent-side); }
  .fsw-bbar-it.is-on .fsw-bbar-ico { background: var(--fsw-accent); color: var(--fsw-on-accent); }
  .fsw-bbar-it:focus-visible { outline: 2px solid var(--fsw-accent-side); outline-offset: 2px; }
  .fsw-bbar-l { font-weight: 600; }
  .fsw-bbar-it.is-on .fsw-bbar-l { font-weight: 700; }

  /* Angka kecil di pojok ikon: aksen di atas bilah gelap; di atas ikon yang
     sedang aktif (sudah hijau) ia dibalik jadi gelap bertinta limau. */
  .fsw-bbar-n { background: var(--fsw-accent); color: var(--fsw-on-accent); border-color: var(--xcs-navy); font-weight: 700; }
  .fsw-bbar-n.is-red { background: var(--xcs-red); color: var(--xcs-ink-on-brand); border-color: var(--xcs-navy); }
  /* KONTRAS — putih di atas #F4635F (tema gelap) 3,09:1; tinta gelap 6,24:1. */
  [data-theme="dark"] .fsw-bbar-n.is-red { color: var(--fsw-on-accent); }
  .fsw-bbar-it.is-on .fsw-bbar-n { background: var(--fsw-on-accent); color: var(--fsw-accent-side); border-color: var(--fsw-accent); }
}

/* ═══════════════════════════════════════════════════════════════════════════
 * 14. GERAK
 * Referensi tenang: tidak ada yang berdenyut sendiri. Animasi "breathe" pada
 * chip saldo dimatikan — ia satu-satunya benda yang bergerak terus-menerus
 * di kulit aplikasi, dan itu termasuk "cluttered".
 * ═══════════════════════════════════════════════════════════════════════════ */

:root .xcs-app .xcs-sidebar .xcs-balance-chip::before { animation: none !important; background: none !important; }

@media (prefers-reduced-motion: reduce) {
  :root .xcs-app .xcs-sidebar .xcs-nav-item,
  .fsw-tab,
  .fsw-assist-fab { transition: none !important; }
}

/* ═══ DUA PERBAIKAN KONTRAS TERUKUR ═══════════════════════════════════════ */

/* 1. Tombol "Tambah Klien" di sidebar. styles.css:18112 mengecat SELURUH
   turunan sidebar di tema gelap dengan rgba(255,255,255,.85) pada
   spesifisitas ±(0,14,1) — jauh di atas aturan (0,1,0) di blok <style>
   sidebar.jsx. Akibatnya tintanya putih di atas gradien limau: 1,4:1.
   Tombol ini tidak ada di daftar :not() aturan itu, jadi satu-satunya cara
   menang tanpa mengedit styles.css adalah !important. */
html .xcs-sidebar .fsw-newbatch,
html .xcs-sidebar .fsw-newbatch * { color: #0B0F0D !important; }

/* 2. Footer. styles.css:3567 memakai --xcs-ink-4, token "disabled": di tema
   terang #767F79 di atas halaman #F1F4F1 hanya 3,73:1 untuk teks 11,5px.
   --xcs-ink-3 memberi 4,91:1 di terang dan 7,60:1 di gelap. */
.xcs-footer { color: var(--xcs-ink-3); }

/* ═══ PANEL TUGAS: BAGIAN TIDAK BOLEH MENYUSUT ════════════════════════════
   ops-theme.css:331 membuat `.fsw-drawer-b` sebuah kolom flex yang menggulir.
   Anak flex punya `flex-shrink: 1` secara bawaan, jadi begitu isi panel lebih
   tinggi daripada laci, SEMUA bagiannya diperkecil sekaligus — dan bagian yang
   ber-`overflow: hidden` memotong isinya tanpa jejak.

   Terukur pada TSK-2068: `.fsw-up` tingginya 60px padahal `scrollHeight`-nya
   83px, jadi 23px teratas isi "Dari tahap sebelumnya" terpangkas. Makin panjang
   naskah di bawahnya, makin habis panel itu — sampai bisa lenyap sama sekali.
   Itulah sebabnya penulis script melaporkan tidak bisa melihat brief premisnya.

   Satu aturan menutup seluruh kelasnya: tiap bagian memakai tinggi alaminya,
   dan yang menggulir tetap wadahnya (ia sudah `overflow-y: auto`). */
.fsw-drawer-b > * { flex: 0 0 auto; }

/* ═══════════════════════════════════════════════════════════════════════════
 * 15. PONSEL — MERAPATKAN KULIT HALAMAN
 * ───────────────────────────────────────────────────────────────────────────
 * Permintaan pemilik: "refine ui versi mobile, cari semua kasus yang memakan
 * space sia sia atau clutter". Cakupan blok ini HANYA kulit di luar kartu:
 * kaki halaman, celah halaman, bantalan isi, kepala halaman, bilah bawah,
 * dan laci tugas. Kartu/KV/KPI/tabel milik agen UI dan tidak disentuh.
 *
 * Semua angka di bawah TERUKUR di 390×844 lewat pratinjau.js (berkas lokal di
 * atas situs live), bukan tebakan. Tidak ada satu pun ukuran huruf yang
 * diubah di blok ini — jadi tidak ada rasio kontras yang bisa bergeser.
 * Desktop tidak tersentuh: seluruhnya di dalam @media (max-width: …).
 * ═══════════════════════════════════════════════════════════════════════════ */

@media (max-width: 768px) {

  /* ── (a) KAKI HALAMAN ────────────────────────────────────────────────────
     TERUKUR dulu, baru dipotong. Di 390px, jarak dari dasar isi terakhir
     (.fsw-page) ke garis atas kaki halaman = 128px pada KETIGA layar uji
     (opstoday, mywork, opsclients:client). Rinciannya:
       96px  = padding-bottom .xcs-main-inner  (ops-theme.css:842)
       32px  = margin-top .xcs-footer          (styles.css:3568)
     96px itu TIDAK BOLEH dikurangi (aturan ruang aman), jadi yang diambil di
     sini adalah 32px margin — kaki halaman sudah punya garis atas sendiri
     sebagai pemisah, ia tidak perlu sejengkal lagi di atas 96px kosong.
     32px → 8px.

     Bantalan atas: 18px → 12px. Isinya satu baris kredit 10,5px; 18px di
     atas garis dan 96px di bawahnya membuat baris itu duduk jauh dari
     tengah kotaknya sendiri.

     Bantalan bawah = REL AMAN bilah bawah, bukan hiasan. Kaki halaman adalah
     elemen TERAKHIR di dokumen, jadi ia — bukan .xcs-main-inner — yang
     benar-benar menahan baris kredit supaya tidak masuk ke balik bilah.
     TERUKUR pada gulir paling bawah, sebelum: dasar teks kaki 746px,
     atas bilah (.fsw-bbar-in) 768px → celah 22px. Bilahnya sendiri kini
     72,5px (lihat (e)), jadi +18px bisa jadi +10px: 96px → 88px.
     TERUKUR sesudah: dasar teks kaki 754px, atas bilah 772px → celah 18px
     (layar klien 19px). Tetap bersih, dan tetap bersih (14px) seandainya
     perubahan bilah di (e) dibatalkan — karena rel ini masih dihitung dari
     var(--fsw-bbar-h) 78px, bukan dari tinggi bilah yang sebenarnya.
     !important + `body.has-fsw-bottombar` WAJIB: ops-theme.css:1414 memakai
     keduanya; berkas ini dimuat sesudahnya sehingga spesifisitas yang sama
     sudah cukup untuk menang. */
  .xcs-footer { margin-top: 8px; padding-top: 12px; }
  body.has-fsw-bottombar .xcs-footer {
    padding-bottom: calc(var(--fsw-bbar-h) + 10px + env(safe-area-inset-bottom, 0px)) !important;
  }
  /* Layar TANPA bilah bawah sengaja DIBIARKAN pada 70px (styles.css:3573):
     di sana tombol asisten duduk di calc(20px + aman) dengan tinggi 50px,
     jadi 70px persis rel amannya. Memotongnya = baris kredit tertimpa FAB. */

  /* ── (b) CELAH HALAMAN ───────────────────────────────────────────────────
     .fsw-page gap 20px (ops-theme.css:151). TERUKUR jumlah anak di 390px:
     opsclients:client 10 · mywork 9 · opstoday 6 — jadi 180px / 160px /
     100px yang murni jarak. 20px juga tidak ada di kisi 8px §3.
     20px → 16px di ponsel, → 12px di layar sempit (lihat blok 430px).
     Kartu punya bantalan 18px sendiri, jadi 16px antar kartu tetap terbaca
     sebagai dua blok terpisah. */
  .fsw-page { gap: 16px; }

  /* ── (c) BANTALAN ISI ────────────────────────────────────────────────────
     styles.css:13487 mengunci `padding: 18px 14px !important` di ≤720px.
     Atas 18px → 14px: di atasnya sudah ada bilah atas HP setinggi 61px,
     lalu kepala halaman 4px lagi (lihat (d)); 24px sebelum judul terbaca
     sebagai celah kosong, bukan sebagai jarak.
     Sisi 14px DIPERTAHANKAN — ia sudah yang paling sempit yang masih aman
     dari cacat "keluar dari kontainer" (B4 §D); memotongnya ke 12px hanya
     menambah 4px lebar isi dan mendekatkan tepi kartu ke tepi layar.
     padding-bottom TIDAK ditulis sama sekali di sini, sengaja: 96px rel aman
     dari ops-theme.css:842 harus tetap utuh. */
  .xcs-main-inner { padding-top: 14px !important; }

  /* ── (d) KEPALA HALAMAN ──────────────────────────────────────────────────
     TERUKUR 390px: opstoday 122px · mywork 149px · opsclients:client 201px.
     Yang benar-benar ruang mati hanya bantalan atasnya: 4px di bawah
     bantalan .xcs-main-inner yang baru saja disebut. 4px → 0.
     Sisanya BUKAN ruang terbuang dan sengaja dibiarkan:
       · baris tombol 44px (client: 2 baris = 96px) dikunci ops-theme.css:1703
         demi target sentuh 44px — merapatkannya melanggar aturan 5;
       · gap 14px antara blok judul dan baris tombol dipaku styles.css:2619
         dengan !important. Melawannya berarti memaksa !important untuk
         selisih 4px, dan itu membalik tata letak HP yang sudah teruji.
     RUANG AMAN LONCENG: di ≤768px lonceng berada DI DALAM .xcs-mobile-bar
     (styles.css:3388), bukan melayang di kepala halaman. Tidak ada satu pun
     position/top/right/bottom/width/height/z-index untuk .xcs-notif-bell
     maupun .fsw-assist-fab di blok ini. Rel 70/84px di bagian 1 juga tidak
     disentuh — ia hanya hidup di ≥769px. */
  :root .xcs-app .xcs-pagehead { padding-top: 0; }

  /* ── (e) BILAH BAWAH ─────────────────────────────────────────────────────
     TERUKUR: bilah 76,5px · .fsw-bbar-in 66,5px · tiap tombol 69,6×52,5px.
     Target sentuh minimalnya 44px, jadi ada 8,5px kelonggaran per tombol.
     Diambil 2px dari kantong ikon (30 → 28px, ikonnya sendiri tetap 20px),
     1px dari bantalan atas tombol, 1px dari celah ikon→label:
       tombol   52,5px → 48,5px   (masih 4,5px DI ATAS ambang 44px)
       .fsw-bbar-in 66,5px → 62,5px
       bilah    76,5px → 72,5px
     4px itu ruang layar yang selama ini tertutup permanen di setiap layar
     kerja. Bantalan luar 10px dan lebar tombol 69,6px TIDAK diubah, jadi
     target sentuh mendatar tetap jauh di atas 44px. Lencana angka
     (.fsw-bbar-n, top:-2px, tinggi 15px) tetap di dalam kotak tombol. */
  .fsw-bbar-ico { height: 28px; }
  .fsw-bbar-it { padding-top: 4px; gap: 2px; }

  /* ── (f) LACI TUGAS ──────────────────────────────────────────────────────
     TERUKUR di 390px: laci memenuhi layar (390×844); kepala 73px
     (bantalan 14/18); badan bantalan 16/18/40 dengan gap 14px dan 12 bagian
     (isi 1.166px di jendela 771px).
     Tiga hal yang terbuang:
       1. Bantalan sisi 18px × 2 = 36px dari 390px layar (9%), padahal
          gutter halaman di luar laci cuma 14px. 18px → 14px: +8px lebar
          untuk isi yang memang sempit (panel brief, naskah, nilai panjang).
       2. Bantalan bawah 40px. Selama laci terbuka bilah bawah DAN tombol
          asisten dua-duanya display:none (body.fsw-overlay-open,
          ops-theme.css:845 & :1263), jadi tidak ada yang perlu dihindari di
          sana. 40px → 24px.
       3. gap 14px × 11 celah = 154px. 14px → 12px menghemat 22px gulir
          tanpa membuat bagian-bagiannya menyatu.
     Kepala laci 14px → 12px (73px → 69px), 4px itu langsung jadi milik
     badan laci yang menggulir.
     JANGAN DIBATALKAN: `.fsw-drawer-b > * { flex: 0 0 auto }` di bagian
     sebelumnya. Tidak ada satu pun aturan di sini yang menyentuh `flex`,
     `overflow`, atau tinggi anak laci — hanya bantalan dan celah wadahnya. */
  .fsw-drawer-h { padding: 12px 14px; }
  .fsw-drawer-b { padding: 14px 14px 24px; gap: 12px; }
}

@media (max-width: 430px) {
  /* Layar 390px dan di bawahnya: celah halaman 16px → 12px. Di layar klien
     (10 anak) itu 180px → 108px, di mywork (9) 160px → 96px, di opstoday
     (6) 100px → 60px. 12px masih dua kali garis kartu dan tetap pada kisi 4.
     Bantalan atas isi 14px → 12px. */
  .fsw-page { gap: 12px; }
  .xcs-main-inner { padding-top: 12px !important; }
}

/* ═══════════════════════════════════════════════════════════════════════════
 * 16. PONSEL — BILAH ATAS: TARGET SENTUH 44px TANPA MENAMBAH TINGGI
 * ───────────────────────────────────────────────────────────────────────────
 * Ditemukan saat uji ulang bagian 15, TIDAK dilaporkan putaran sebelumnya.
 * TERUKUR di 360px dan 390px (elementFromPoint + getBoundingClientRect):
 *   .xcs-mobile-bar          61px, position: sticky  → memakan 61px layar
 *                            di SETIAP layar kerja, selamanya
 *   .xcs-icon-btn-lg (Menu)  40×40   ← di bawah ambang 44px (aturan 5)
 *   .xcs-mobile-brand        147,2×40 ← di bawah ambang, dan ia BISA diklik
 *   .xcs-acct-btn (avatar)   40×40   ← di bawah ambang
 * Tiga-tiganya tombol sungguhan (hit-test: masing-masing mengenai dirinya
 * sendiri, tidak tertimpa lonceng atau FAB), jadi ini pelanggaran aturan 5
 * yang nyata — bukan positif palsu.
 *
 * Bilahnya sendiri: padding 10px atas/bawah + isi 40px + garis 1px = 61px.
 * Jadi 21px dari 61px itu bantalan untuk tombol yang JUSTRU terlalu kecil.
 * Bantalan 10px → 6px, tombol 40px → 44px:
 *   6 + 44 + 6 + 1 = 57px   (sebelum 61px)
 * Hasilnya DUA-DUANYA membaik: target sentuh naik 40 → 44px DAN bilah turun
 * 61 → 57px (−4px di tiap layar, permanen karena bilahnya sticky).
 * `min-height: 56px` (styles.css:2590 & :5245) tidak mengikat di 57px.
 *
 * `env(safe-area-inset-top)` WAJIB dipertahankan: styles.css:2721 memakainya
 * supaya bilah tidak masuk ke bawah poni. Di emulator nilainya 0 sehingga
 * angka terukur di atas tidak terpengaruh; di perangkat nyata tetap aman.
 * !important + spesifisitas (0,1,0) sama dengan styles.css:5245; berkas ini
 * dimuat paling akhir sehingga menang lewat urutan muat.
 *
 * min-width/min-height dipakai, BUKAN width/height, supaya tidak melawan
 * `width: 36px !important` di styles.css:2609 — min-* menjepit hasil akhir
 * tanpa perlu ikut perang !important di properti yang sama.
 *
 * ATURAN 3 DIHORMATI: .xcs-notif-bell dan .fsw-assist-fab TIDAK disentuh.
 * TERUKUR: keduanya position:fixed, anak dari .xcs-app — BUKAN keturunan
 * .xcs-mobile-bar — jadi pemilih di bawah tidak mungkin mengenai mereka.
 *
 * `padding-right: 10px` BUKAN hiasan — ia mencegah cacat yang HAMPIR saya
 * buat sendiri. Tombol akun rata-kanan (justify-self: end). Melebarkannya
 * 40 → 44px menggeser tepi KIRInya 4px ke kiri:
 *   bantalan kanan 12px → tombol akun 333–377, lonceng berakhir di 334
 *                          = TUMPANG-TINDIH 1px, dan lonceng menang
 *                            (z-index 61 > bilah 60) — persis kelas cacat
 *                            B4 §A2 "FAB/lonceng menutupi kontrol".
 *   bantalan kanan 10px → tombol akun 335–379, lonceng 334 = celah 1px,
 *                          tepi kanan 11px dari layar. TIDAK bertumpuk.
 * Diuji ulang dengan elementFromPoint di 9 titik (tepi kiri/kanan & pusat
 * tombol akun, tepi & pusat lonceng, pusat FAB, pusat menu, pusat logo) di
 * 360px DAN 390px: setiap titik mengenai kontrolnya SENDIRI, tidak satu pun
 * dicuri lonceng atau FAB. Lonceng/FAB tetap 44×44 di 8,334 dan 8,286 —
 * tidak bergeser satu piksel pun.
 * ═══════════════════════════════════════════════════════════════════════════ */

@media (max-width: 768px) {
  .xcs-mobile-bar {
    padding-top: calc(6px + env(safe-area-inset-top, 0px)) !important;
    padding-bottom: 6px !important;
    padding-right: 10px !important;
  }
  .xcs-mobile-bar .xcs-icon-btn-lg,
  .xcs-mobile-bar .xcs-acct-btn,
  .xcs-mobile-bar .xcs-mobile-brand {
    min-width: 44px;
    min-height: 44px;
  }
}