/* backdrop-filter DICABUT dari sini (bukan dipindah) -- warisan prototipe
   asli, tidak pernah membutakan apa pun (tidak ada yang tampak di belakang
   <body> di tab peramban biasa untuk diburamkan), tapi diam-diam membuat
   SETIAP position:fixed di halaman ini berlaku terhadap kotak <body>,
   bukan viewport (backdrop-filter membuat elemen menjadi containing block
   bagi keturunan fixed-nya, persis seperti transform/filter/perspective).
   Akibatnya: dialog konfirmasi (satu-satunya position:fixed di seluruh
   template) ikut bergeser sejauh gulir halaman -- tombolnya bisa berakhir
   di luar layar pada halaman panjang (mis. daftar akun admin). */
html, body { margin: 0; padding: 0; background: rgba(20,22,26,0.86); }
  * { box-sizing: border-box; }
  a { color: #007aff; text-decoration: none; }
  a:hover { color: #55b6e4; }
  input, select, button { outline: none; font-family: inherit; }
  input:focus { border-color: #007aff; box-shadow: 0 0 0 3px rgba(30,154,214,0.14); }
  ::-webkit-scrollbar { width: 10px; height: 10px; }
  ::-webkit-scrollbar-track { background: transparent; }
  ::-webkit-scrollbar-thumb { background: #c2cad6; border-radius: 6px; border: 2px solid transparent; background-clip: content-box; }
  ::-webkit-scrollbar-thumb:hover { background: #a7b2c1; background-clip: content-box; }
  @property --asm-ang { syntax: '<angle>'; initial-value: 0deg; inherits: false; }
  @keyframes asm-sweep { to { --asm-ang: 360deg; } }
  .asm-card { position: relative; isolation: isolate; }
  .asm-card::before {
    content: ''; position: absolute; inset: -1.5px; border-radius: 17px; padding: 1.5px; z-index: -1;
    background: conic-gradient(from var(--asm-ang), transparent 0deg, transparent 250deg, var(--asm-glow, #5ac8fa) 300deg, #ffffff 330deg, var(--asm-glow, #5ac8fa) 350deg, transparent 360deg);
    -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    -webkit-mask-composite: xor; mask-composite: exclude;
    opacity: 0; transition: opacity 200ms ease;
  }
  .asm-card:hover::before { opacity: 1; animation: asm-sweep 2.4s linear infinite; }
  .asm-card[data-locked="1"]:hover::before { opacity: 0; animation: none; }
  .asm-card:hover { transform: translateY(-2px); }
  .asm-card[data-locked="1"]:hover { transform: none; }
  .asm-card { transition: transform 200ms ease, box-shadow 200ms ease; }
  .asm-rail::-webkit-scrollbar-thumb { background: #2b3d4f; background-clip: content-box; }
  .asm-rail::-webkit-scrollbar-thumb:hover { background: #3a5169; background-clip: content-box; }

/* ═══════════════════════════════════════════════════════════════════════════
   TIGA TINGKAT TOMBOL — ditetapkan sekali, dipakai di seluruh tab.

   Sebelumnya tiap tombol menulis warnanya sendiri secara sebaris, dan yang
   sekunder memakai garis tepi #e5e5ea di atas latar putih: abu yang nyaris
   putih, tidak terbaca sebagai tombol. Menambal satu layar tidak menolong
   layar berikutnya yang dibuat.

   utama    tindakan pokok      terisi penuh, kontras tinggi
   sekunder tindakan pendamping garis tepi JELAS, latar sedikit berbeda
   tersier  navigasi, sakelar   paling ringan, tapi tetap terbaca bisa diklik
   ═══════════════════════════════════════════════════════════════════════ */
/* Nilai tepi di bawah DIHITUNG terhadap latar putih, bukan dipilih karena
   terlihat enak: #7e8a99 = 3,5:1, di atas ambang WCAG 3:1 untuk komponen
   antarmuka. Yang sebelumnya dipakai (#e5e5ea) hanya 1,2:1 — dan pilihan
   pertama saya (#a8b3c2) 2,12:1, yang tampak "lebih tegas" tapi tetap gagal.
   Kalau ada yang hendak melembutkannya, ukur dulu. */
:root {
  --tb-1-bg: #1c1c1e;   --tb-1-fg: #ffffff;   --tb-1-bg-h: #000000;
  --tb-2-bg: #f6f8fb;   --tb-2-fg: #1c1c1e;   --tb-2-bd: #7e8a99;
  --tb-2-bg-h: #e9eef5; --tb-2-bd-h: #4c5a6b;
  --tb-3-fg: #3c3c43;   --tb-3-bg-h: #eef1f5; --tb-3-bd-h: #7e8a99;
  --tb-bahaya-fg: #c0392b; --tb-bahaya-bd: #dfa79f; --tb-bahaya-bg-h: #fdf0ed;
  --isian-bd: #7e8a99;  --isian-bd-f: #007aff;
  /* konteks gelap: panel kiri dan layar masuk */
  --tbg-2-bg: #1c2a37;  --tbg-2-fg: #cfdae4;  --tbg-2-bd: #46617c;
  --tbg-2-bg-h: #24384a; --tbg-2-bd-h: #6f92b4;
  --isian-g-bd: #46617c;
}

.tb1, .tb2, .tb3, .tbg2, .tbg3, .tbdyn { transition: background .14s ease, border-color .14s ease, color .14s ease; }

.tb1 { background: var(--tb-1-bg); color: var(--tb-1-fg); border: 1px solid var(--tb-1-bg); }
.tb1:hover { background: var(--tb-1-bg-h); border-color: var(--tb-1-bg-h); }

.tb2 { background: var(--tb-2-bg); color: var(--tb-2-fg); border: 1.5px solid var(--tb-2-bd); }
.tb2:hover { background: var(--tb-2-bg-h); border-color: var(--tb-2-bd-h); }

.tb2.bahaya { color: var(--tb-bahaya-fg); border-color: var(--tb-bahaya-bd); }
.tb2.bahaya:hover { background: var(--tb-bahaya-bg-h); border-color: var(--tb-bahaya-fg); }

.tb3 { background: transparent; color: var(--tb-3-fg); border: 1px solid transparent; }
.tb3:hover { background: var(--tb-3-bg-h); border-color: var(--tb-3-bd-h); }

/* konteks gelap */
.tbg2 { background: var(--tbg-2-bg); color: var(--tbg-2-fg); border: 1.5px solid var(--tbg-2-bd); }
.tbg2:hover { background: var(--tbg-2-bg-h); border-color: var(--tbg-2-bd-h); }
.tbg3 { background: transparent; color: var(--tbg-2-fg); border: 1px solid transparent; }
.tbg3:hover { background: var(--tbg-2-bg-h); border-color: var(--tbg-2-bd); }

/* Keadaan focus untuk SEMUA tingkat, termasuk yang warnanya binding.
   Pemakai keyboard harus tahu ia sedang di mana — dan outline dipakai, bukan
   border, supaya tata letak tidak bergeser sedikit pun saat berpindah. */
.tb1:focus-visible, .tb2:focus-visible, .tb3:focus-visible,
.tbg2:focus-visible, .tbg3:focus-visible, .tbdyn:focus-visible,
.isian:focus-visible, .isian-g:focus-visible {
  outline: 3px solid rgba(0,122,255,0.5); outline-offset: 2px;
}

/* Kotak isian: garis tepi setegas tombol sekunder. Kotak pencarian sebelumnya
   nyaris tidak terlihat sebagai tempat mengetik. */
.isian { border: 1.5px solid var(--isian-bd); }
.isian:focus { border-color: var(--isian-bd-f); box-shadow: 0 0 0 3px rgba(0,122,255,0.16); }
.isian-g { border: 1.5px solid var(--isian-g-bd); }
.isian-g:focus { border-color: #5aa9e6; box-shadow: 0 0 0 3px rgba(90,169,230,0.20); }

/* Tombol mati harus terlihat mati, bukan sekadar tidak menjawab. */
.tb1:disabled, .tb2:disabled, .tb3:disabled, .tbg2:disabled, .tbg3:disabled {
  opacity: .45; cursor: not-allowed;
}

/* ═══════════════════════════════════════════════════════════════════════════
   TIGA TINGKAT PERMUKAAN

   0  latar halaman     abu lembut, JELAS bukan putih
   1  panel pendukung   di antara 0 dan 2
   2  kartu isi         putih murni

   Latar halaman sebelumnya #f2f2f7 — 1,12:1 terhadap kartu putih, beda yang
   praktis tidak ada. Nilai baru dihitung terhadap #ffffff:

     --s0  #e3e8ef   1,25:1     latar halaman
     --s1  #f1f4f8   1,09:1     panel pendukung (terhadap kartu)
     --s2  #ffffff   —          kartu

   s0 terhadap s1 = 1,15:1; ketiganya membentuk tangga yang terlihat tanpa
   perlu disandingkan.
   ═══════════════════════════════════════════════════════════════════════ */
:root {
  --s0: #e3e8ef;
  --s1: #f1f4f8;
  --s2: #ffffff;
  /* Garis: yang biasa untuk tepi kartu, yang KUAT untuk pemisah baris daftar.
     #e5e5ea lama = 1,08:1 terhadap putih — hairline yang membuat empat baris
     terbaca sebagai satu blok teks. */
  --garis: #ccd4de;
  --garis-kuat: #b6c1cf;
  /* Aksen tahapan. Ketiga keadaan slot harus tetap terbedakan (D-051):
     terisi · terisi-mendahului · kosong. */
  --tahap-isi: #0a6fd8;
  --tahap-dahulu: #b8770c;
  --tahap-kosong: #aeb7c2;
  --chip-bg: #e7eefb;
  --chip-fg: #1256a8;
  --chip-bd: #b9d0f0;
}

.s0 { background: var(--s0); }
.s1 { background: var(--s1); }
.s2 { background: var(--s2); border: 1px solid var(--garis); }

/* Pemisah baris daftar arsip: setingkat lebih kuat dari hairline. */
.baris-arsip { border-bottom: 1px solid var(--garis-kuat); }

/* Aksen kiri: membantu mata menyusuri daftar panjang. Sisi tunggal, jadi
   TIDAK berujung membulat — sudut membulat pada satu sisi saja akan terlihat
   seperti kesalahan render. */
.aksen-kiri { border-left: 3px solid var(--tahap-isi); }
.aksen-kiri-sepi { border-left: 3px solid var(--tahap-kosong); }

/* Titik tahapan */
.titik { font-family: ui-monospace, 'SF Mono', Menlo, monospace; letter-spacing: .14em; }

/* Nama tahap jadi label, bukan teks polos — supaya terpindai tanpa dibaca. */
.chip-tahap {
  display: inline-block; padding: 1px 7px; border-radius: 999px;
  background: var(--chip-bg); color: var(--chip-fg);
  border: 1px solid var(--chip-bd);
  font-weight: 600; letter-spacing: .04em;
}