/* ============================================================================
   Nusantika AI: pustaka komponen. Satu-satunya sumber komponen UI, dipakai di
   atas nusantika.css. Lihat web/gaya.html untuk pamer visual semua komponen
   di file ini. Kelas dimulai "n-" supaya tidak bentrok dengan CSS lama.
   Bentuk mengikuti vantis.sh (ACUAN-PROYEK.md bagian 2.1): tombol 48/40 px
   berlengkung 8 px, kartu bergaris tanpa bayangan, tab dan badge 6 px.
   ========================================================================== */

/* ---------- tombol ---------- */
.n-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  border: 1px solid transparent; border-radius: var(--n-r-md);
  font: 500 var(--n-t-15) var(--n-tampilan); cursor: pointer;
  transition: transform var(--n-durasi) var(--n-pegas), background var(--n-durasi), border-color var(--n-durasi), opacity var(--n-durasi);
  text-decoration: none; white-space: nowrap;
}
.n-btn:active { transform: scale(.97); }
.n-btn:disabled, .n-btn[aria-disabled="true"] { opacity: .5; cursor: not-allowed; pointer-events: none; }
.n-btn:focus-visible { outline: 2px solid var(--n-aksen-teks); outline-offset: 2px; }

.n-btn-m { height: 48px; padding: 0 22px; }
.n-btn-s { height: 40px; padding: 0 16px; font-size: var(--n-t-13); }
.n-btn-l { height: 52px; padding: 0 28px; font-size: var(--n-t-17); }

/* primer: bidang lime, teks tinta tetap (juga di mode gelap) */
.n-btn-primer { background: var(--n-aksen); color: var(--n-di-aksen); font-weight: 600; }
.n-btn-primer:hover { background: var(--n-daun); }

/* gelap: bidang tinta, teks putih */
.n-btn-gelap { background: var(--n-kontras); color: var(--n-putih); border-color: var(--n-garis); }
.n-btn-gelap:hover { background: var(--n-kontras-naik); }

/* garis: putih + hairline */
.n-btn-sekunder, .n-btn-garis { background: var(--n-kertas); color: var(--n-tinta); border-color: var(--n-garis); }
.n-btn-sekunder:hover, .n-btn-garis:hover { border-color: var(--n-tinta); }

.n-btn-hantu { background: transparent; color: var(--n-tinta); }
.n-btn-hantu:hover { background: var(--n-rail); }

.n-btn-bahaya { background: var(--n-kritis); color: var(--n-putih); }
.n-btn-bahaya:hover { filter: brightness(1.08); }

/* ---------- eyebrow: label kapital di atas judul ---------- */
.n-eyebrow {
  display: inline-flex; align-items: center; gap: 8px; height: 28px; padding: 0 10px;
  border: 1px solid var(--n-garis); border-radius: var(--n-r-sm);
  font: 600 var(--n-t-12)/1 var(--n-tampilan); letter-spacing: .08em; text-transform: uppercase;
  color: var(--n-tinta); background: var(--n-kertas);
}
.n-eyebrow-plate { background: var(--n-aksen); color: var(--n-di-aksen); border-color: var(--n-aksen); }

/* sorotan satu kata di judul: latar lime, teks tinta, lengkung 4 px */
.n-sorot-kata { background: var(--n-aksen); color: var(--n-di-aksen); border-radius: var(--n-r-xs);
  padding: 0 .12em; font-style: normal; -webkit-box-decoration-break: clone; box-decoration-break: clone; }

/* pita CTA: satu bidang lime penuh di akhir halaman */
.n-pita {
  background: var(--n-aksen); color: var(--n-di-aksen); border-radius: var(--n-r-lg);
  padding: clamp(28px, 5vw, 56px); display: grid; gap: 18px; justify-items: start;
}
.n-pita h2, .n-pita h3, .n-pita p { color: var(--n-di-aksen); margin: 0; }
.n-pita .n-btn-gelap { border-color: var(--n-kontras); }

/* ---------- badge status ---------- */
.n-badge {
  display: inline-flex; align-items: center; gap: 6px;
  height: 26px; padding: 0 10px; border-radius: var(--n-r-sm);
  font: 600 var(--n-t-12) var(--n-badan); letter-spacing: .02em;
  background: var(--n-embun); color: var(--n-tinta);
}
.n-badge i { width: 7px; height: 7px; border-radius: 50%; background: currentColor; flex: none; }
.n-badge-baik    { background: var(--n-baik-bg);    color: var(--n-baik-teks); }
.n-badge-waspada { background: var(--n-waspada-bg); color: var(--n-waspada-teks); }
.n-badge-serius  { background: var(--n-serius-bg);  color: var(--n-serius-teks); }
.n-badge-kritis  { background: var(--n-kritis-bg);  color: var(--n-kritis-teks); }
.n-badge-netral  { background: var(--n-rail); color: var(--n-abu); }

/* ---------- kartu: dipisah garis, bukan bayangan ---------- */
.n-kartu {
  background: var(--n-kertas); border-radius: var(--n-r-lg);
  border: 1px solid var(--n-garis);
  padding: var(--n-sp-6);
}
.n-kartu-kepala { display: flex; align-items: center; justify-content: space-between; gap: var(--n-sp-3); margin-bottom: var(--n-sp-4); }
.n-kartu-kepala h2, .n-kartu-kepala h3 { font-size: var(--n-t-20); }

/* ---------- tabel ---------- */
.n-tabel-bungkus { overflow-x: auto; border-radius: var(--n-r-lg); border: 1px solid var(--n-garis); }
.n-tabel { width: 100%; border-collapse: collapse; font-size: var(--n-t-13); background: var(--n-kertas); }
.n-tabel th { text-align: left; font: 600 var(--n-t-12) var(--n-tampilan); text-transform: uppercase; letter-spacing: .06em;
  color: var(--n-abu); padding: 12px 16px; border-bottom: 1px solid var(--n-garis); white-space: nowrap; }
.n-tabel td { padding: 12px 16px; border-bottom: 1px solid var(--n-garis-lembut); vertical-align: middle; }
.n-tabel tbody tr:last-child td { border-bottom: none; }
.n-tabel tbody tr:hover { background: var(--n-rail); }
.n-tabel-berkedip { animation: n-kedip 900ms ease-out; }
@keyframes n-kedip {
  0% { background: var(--n-embun); }
  100% { background: transparent; }
}

/* di bawah 900px, tabel lebar diganti kartu bertumpuk (fase 5 menerapkan per halaman) */
@media (max-width: 900px) {
  .n-tabel-jadi-kartu, .n-tabel-jadi-kartu thead { display: none; }
  .n-tabel-jadi-kartu tbody, .n-tabel-jadi-kartu tr { display: block; }
  .n-tabel-jadi-kartu tr {
    background: var(--n-kertas); border: 1px solid var(--n-garis); border-radius: var(--n-r-md);
    margin-bottom: var(--n-sp-3); padding: var(--n-sp-3);
  }
  .n-tabel-jadi-kartu td {
    display: flex; justify-content: space-between; gap: var(--n-sp-3);
    border-bottom: 1px dashed var(--n-garis-lembut); padding: 8px 0;
  }
  .n-tabel-jadi-kartu td:last-child { border-bottom: none; }
  .n-tabel-jadi-kartu td::before { content: attr(data-label); font-weight: 600; color: var(--n-abu); }
}

/* ---------- form field ---------- */
.n-field { display: flex; flex-direction: column; gap: 6px; margin-bottom: var(--n-sp-4); }
.n-field label { font: 500 var(--n-t-13) var(--n-tampilan); color: var(--n-tinta); }
.n-field input, .n-field select, .n-field textarea {
  height: 44px; padding: 0 14px; border-radius: var(--n-r-md); border: 1px solid var(--n-garis);
  background: var(--n-kertas); font: 400 var(--n-t-15) var(--n-badan); color: var(--n-tinta);
  transition: border-color var(--n-durasi);
}
.n-field textarea { height: auto; min-height: 96px; padding: 12px 14px; resize: vertical; }
.n-field input:focus, .n-field select:focus, .n-field textarea:focus {
  outline: none; border-color: var(--n-tinta); box-shadow: 0 0 0 3px var(--n-embun);
}
.n-hint { font-size: var(--n-t-12); color: var(--n-abu); }
.n-field-galat input, .n-field-galat select, .n-field-galat textarea { border-color: var(--n-kritis-teks); }
.n-galat { font-size: var(--n-t-12); color: var(--n-kritis-teks); }

/* ---------- tab ---------- */
.n-tab-bar { display: inline-flex; gap: 4px; padding: 4px; background: var(--n-rail); border-radius: var(--n-r-md); border: 1px solid var(--n-garis-lembut); }
.n-tab {
  border: 1px solid transparent; background: transparent; cursor: pointer; border-radius: var(--n-r-sm);
  height: 36px; padding: 0 16px; font: 500 var(--n-t-13) var(--n-tampilan); color: var(--n-abu);
  transition: background var(--n-durasi), color var(--n-durasi);
}
.n-tab[aria-selected="true"] { background: var(--n-kertas); color: var(--n-tinta); border-color: var(--n-garis); }

/* ---------- dialog ---------- */
.n-dialog-overlay {
  position: fixed; inset: 0; background: var(--n-tirai); display: flex;
  align-items: center; justify-content: center; padding: var(--n-sp-4); z-index: 200;
  opacity: 0; transition: opacity var(--n-durasi);
}
.n-dialog-overlay.n-tampil { opacity: 1; }
.n-dialog {
  background: var(--n-kertas); border-radius: var(--n-r-lg); box-shadow: var(--n-bayang-besar);
  border: 1px solid var(--n-garis);
  max-width: 440px; width: 100%; padding: var(--n-sp-6);
  transform: translateY(8px) scale(.98); transition: transform var(--n-durasi) var(--n-pegas);
}
.n-dialog-overlay.n-tampil .n-dialog { transform: none; }
.n-dialog h3 { font-size: var(--n-t-20); margin-bottom: var(--n-sp-2); }
.n-dialog p { color: var(--n-abu); font-size: var(--n-t-15); margin: 0 0 var(--n-sp-4); }
.n-dialog-aksi { display: flex; justify-content: flex-end; gap: var(--n-sp-2); margin-top: var(--n-sp-5); }
.n-dialog input.n-ketik-ulang { width: 100%; margin-top: var(--n-sp-2); }

/* ---------- toast ---------- */
.n-toast-tumpuk {
  position: fixed; right: var(--n-sp-4); bottom: calc(var(--n-sp-4) + env(safe-area-inset-bottom, 0px));
  display: flex; flex-direction: column; gap: 10px; z-index: 300; max-width: min(360px, calc(100vw - 32px));
}
.n-toast {
  background: var(--n-kontras); color: var(--n-putih); padding: 12px 16px; border-radius: var(--n-r-md);
  box-shadow: var(--n-bayang); font-size: var(--n-t-13); display: flex; align-items: center; gap: 10px;
  border: 1px solid var(--n-garis-kontras);
  opacity: 0; transform: translateY(6px); transition: opacity var(--n-durasi), transform var(--n-durasi);
}
.n-toast.n-tampil { opacity: 1; transform: none; }
.n-toast-galat { background: var(--n-kritis); }

/* ---------- skeleton ---------- */
.n-skeleton {
  background: linear-gradient(90deg, var(--n-garis-lembut) 25%, var(--n-rail) 37%, var(--n-garis-lembut) 63%);
  background-size: 400% 100%; border-radius: var(--n-r-xs); animation: n-shimmer 1.4s ease infinite;
}
@keyframes n-shimmer { 0% { background-position: 100% 0; } 100% { background-position: -100% 0; } }
@media (prefers-reduced-motion: reduce) { .n-skeleton { animation: none; background: var(--n-garis-lembut); } }

/* ---------- empty state ---------- */
.n-kosong { text-align: center; padding: var(--n-sp-10) var(--n-sp-4); color: var(--n-abu); }
.n-kosong h3 { color: var(--n-hutan); font-size: var(--n-t-17); margin-bottom: 6px; }
.n-kosong p { margin: 0 0 var(--n-sp-4); font-size: var(--n-t-13); }

/* ---------- progress bar ---------- */
.n-progress { height: 8px; border-radius: var(--n-r-xs); background: var(--n-garis-lembut); overflow: hidden; }
.n-progress > i { display: block; height: 100%; background: var(--n-aksen); border-radius: var(--n-r-xs);
  transition: width 400ms var(--n-pegas); }

/* ---------- stepper ---------- */
.n-stepper { display: flex; align-items: flex-start; gap: 0; }
.n-step { flex: 1; text-align: center; position: relative; }
.n-step::before {
  content: ""; position: absolute; top: 15px; left: -50%; width: 100%; height: 2px; background: var(--n-garis); z-index: 0;
}
.n-step:first-child::before { display: none; }
.n-step.n-selesai::before { background: var(--n-kontras); }
.n-step-titik {
  width: 32px; height: 32px; border-radius: var(--n-r-md); background: var(--n-kertas); border: 1px solid var(--n-garis);
  display: flex; align-items: center; justify-content: center; margin: 0 auto 8px; position: relative; z-index: 1;
  font: 600 var(--n-t-13) var(--n-tampilan); color: var(--n-abu);
}
.n-step.n-selesai .n-step-titik { background: var(--n-aksen); border-color: var(--n-aksen); color: var(--n-di-aksen); }
.n-step.n-aktif .n-step-titik { border-color: var(--n-tinta); color: var(--n-tinta); }
.n-step-label { font-size: var(--n-t-12); color: var(--n-abu); }
.n-step.n-aktif .n-step-label { color: var(--n-tinta); font-weight: 600; }

/* ---------- tooltip ---------- */
.n-tooltip { position: relative; }
.n-tooltip[data-tip]:hover::after, .n-tooltip[data-tip]:focus-visible::after {
  content: attr(data-tip); position: absolute; bottom: calc(100% + 8px); left: 50%; transform: translateX(-50%);
  background: var(--n-kontras); color: var(--n-putih); font-size: var(--n-t-12); padding: 6px 10px; border-radius: var(--n-r-sm);
  white-space: nowrap; box-shadow: var(--n-bayang-kecil); pointer-events: none; z-index: 100;
}

/* ---------- tur (spotlight) ---------- */
.n-tur-overlay { position: fixed; inset: 0; z-index: 400; pointer-events: none; }
.n-tur-gelap { position: absolute; inset: 0; background: var(--n-tirai-tur); transition: clip-path var(--n-durasi) var(--n-pegas); }
.n-tur-gelembung {
  position: absolute; max-width: 320px; background: var(--n-kertas); border-radius: var(--n-r-lg);
  border: 1px solid var(--n-garis);
  box-shadow: var(--n-bayang-besar); padding: var(--n-sp-4); pointer-events: auto;
  transition: top var(--n-durasi) var(--n-pegas), left var(--n-durasi) var(--n-pegas);
}
.n-tur-gelembung h4 { font-size: var(--n-t-17); margin-bottom: 6px; }
.n-tur-gelembung p { font-size: var(--n-t-13); color: var(--n-abu); margin: 0 0 var(--n-sp-3); }
.n-tur-nav { display: flex; align-items: center; justify-content: space-between; gap: var(--n-sp-2); }
.n-tur-hitung { font-size: var(--n-t-12); color: var(--n-abu); }

/* ---------- sheet (bottom sheet mobile) ---------- */
.n-sheet-overlay {
  position: fixed; inset: 0; background: var(--n-tirai); z-index: 250;
  display: flex; align-items: flex-end; opacity: 0; transition: opacity var(--n-durasi);
}
.n-sheet-overlay.n-tampil { opacity: 1; }
.n-sheet {
  background: var(--n-kertas); width: 100%; border-radius: var(--n-r-lg) var(--n-r-lg) 0 0;
  padding: var(--n-sp-5) var(--n-sp-5) calc(var(--n-sp-5) + env(safe-area-inset-bottom, 0px));
  transform: translateY(100%); transition: transform var(--n-durasi) var(--n-pegas);
  max-height: 85vh; overflow-y: auto;
}
.n-sheet-overlay.n-tampil .n-sheet { transform: none; }
.n-sheet-pegangan { width: 36px; height: 4px; border-radius: var(--n-r-pil); background: var(--n-garis); margin: 0 auto var(--n-sp-4); }

/* ============================================================================
   Sisa gaya studi kasus lama. Halaman /use-case sejak Fase 11 memakai
   depan.css dan peta.js; aturan di bawah dibiarkan karena kelasnya masih
   dipakai halaman lain (section.hero, .seg, .n-side).
   ========================================================================== */
section.hero { padding: 56px 0 0; }
section.hero h1 em { font-style: normal; background: var(--n-aksen); color: var(--n-di-aksen); border-radius: var(--n-r-xs); padding: 0 .12em; }
.seg button { appearance: none; border: 0; background: transparent; font: 600 14.5px var(--n-badan);
  color: var(--n-abu); padding: 9px 18px; border-radius: var(--n-r-md); cursor: pointer; }
.seg button.on { background: var(--n-kontras); color: var(--n-putih); }
.seg button:focus-visible { outline: 2px solid var(--n-hutan); outline-offset: 2px; }
.n-side h3 { font-size: 14px; margin: 2px 0 10px; color: var(--n-tinta); }

/* ============================================================================
   Khusus superadmin: dipindah verbatim dari <style> inline superadmin.html
   (Fase 1, migrasi CSS). Kelas generik di atas (n-btn, n-badge, n-kartu, dkk)
   TIDAK dipakai di sini karena detail visualnya (radius, padding, shadow)
   berbeda dari yang dibutuhkan superadmin - lihat log progres 2026-09-17.
   Dibungkus ".n-superadmin" (dipasang di <body> superadmin.html) supaya
   aturan elemen mentah (body, a, h1-h4, input) tidak bocor ke halaman lain
   yang memuat file ini.
   ========================================================================== */
[hidden] { display: none !important; }
.n-angka { font-variant-numeric: tabular-nums; }

.n-superadmin { margin: 0; font: 14px/1.55 var(--n-badan); color: var(--n-tinta); background: var(--n-rail); -webkit-font-smoothing: antialiased; }
.n-superadmin a { color: inherit; text-decoration: none; }
.n-superadmin h1, .n-superadmin h2, .n-superadmin h3, .n-superadmin h4 { font-family: var(--n-tampilan); letter-spacing: -.02em; margin: 0; font-weight: 600; }
.n-superadmin input, .n-superadmin select, .n-superadmin textarea { font: 13.5px var(--n-badan); color: var(--n-tinta); background: var(--n-kertas); border: 0; border-radius: 8px;
  box-shadow: inset 0 0 0 1px var(--n-garis); padding: 0 10px; height: 34px; outline: none; }
.n-superadmin textarea { height: auto; padding: 8px 10px; resize: vertical; }
.n-superadmin input:focus, .n-superadmin select:focus, .n-superadmin textarea:focus { box-shadow: inset 0 0 0 1.5px var(--n-tinta); }
.n-superadmin #isi { display: grid; gap: 16px; }

.n-merek { display: inline-flex; align-items: center; font-family: var(--n-tampilan); font-size: 16.5px; letter-spacing: -.02em; line-height: 1.2; }
.n-merek img { width: 28px; height: 28px; margin-right: 10px; }
.n-merek b { font-weight: 700; }
.n-label { font: 600 12px/1 var(--n-badan); letter-spacing: .12em; text-transform: uppercase; color: var(--n-abu); }
.n-kecil { font-size: 12px; color: var(--n-abu); }

.n-tombol { display: inline-flex; align-items: center; justify-content: center; gap: 6px; height: 34px; padding: 0 13px; border-radius: var(--n-r-md);
  font: 600 13px var(--n-badan); border: 0; cursor: pointer; background: var(--n-kertas); color: var(--n-tinta); box-shadow: inset 0 0 0 1px var(--n-garis); white-space: nowrap; }
.n-tombol:hover { box-shadow: inset 0 0 0 1px var(--n-tinta); }
.n-tombol:disabled { opacity: .5; cursor: default; }
.n-tombol.n-hitam { background: var(--n-kontras); color: var(--n-putih); box-shadow: none; }
.n-tombol.n-hitam:hover { background: var(--n-kontras-naik); }
.n-tombol.n-hijau { background: var(--n-aksen); color: var(--n-di-aksen); box-shadow: none; }
.n-tombol.n-bahaya { color: var(--n-kritis-teks); box-shadow: inset 0 0 0 1px var(--n-kritis-garis); }
.n-tombol.n-kecil { height: 28px; padding: 0 10px; font-size: 12.5px; border-radius: 8px; }

.n-isian { display: grid; gap: 5px; font-size: 12px; color: var(--n-abu); }
.n-baris-isian { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 10px; align-items: end; }

.n-pil { display: inline-flex; align-items: center; gap: 6px; height: 22px; padding: 0 8px; border-radius: 6px; font: 600 12px var(--n-badan);
  white-space: nowrap; background: var(--n-rail); color: var(--n-abu); }
.n-pil::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.n-pil.n-ok { background: var(--n-embun); color: var(--n-hutan); }
.n-pil.n-waspada { background: var(--n-waspada-bg); color: var(--n-waspada-teks); }
.n-pil.n-bahaya { background: var(--n-kritis-bg); color: var(--n-kritis-teks); }
.n-pil.n-info { background: var(--n-info-bg); color: var(--n-info); }

/* -------------------------------------------------------- superadmin: masuk -- */
.n-masuk { min-height: 100vh; display: grid; grid-template-columns: 1fr 1fr; }
.n-masuk-kiri { background: var(--n-kontras); color: var(--n-putih); padding: 44px; display: grid; align-content: space-between; position: relative; overflow: hidden; }
.n-masuk-kiri::before { content: ""; position: absolute; inset: 0; background-image: var(--n-arsir-gelap); }
.n-masuk-kiri > * { position: relative; }
.n-masuk-kiri h1 { font-size: clamp(32px, 3.4vw, 46px); max-width: 500px; line-height: 1.08; }
.n-masuk-kiri p { color: var(--n-abu-kontras); max-width: 440px; margin: 14px 0 0; }
.n-masuk-kiri ul { list-style: none; margin: 26px 0 0; padding: 0; display: grid; gap: 10px; color: var(--n-abu-kontras); font-size: 14px; }
.n-masuk-kiri li::before { content: ""; display: inline-block; width: 7px; height: 7px; border-radius: 2px; background: var(--n-hijau); transform: rotate(45deg); margin: 0 12px 2px 2px; }
.n-masuk-kanan { display: grid; place-items: center; padding: 40px 24px; }
.n-kotak-masuk { width: 100%; max-width: 360px; display: grid; gap: 12px; }
.n-kotak-masuk input { height: 44px; font-size: 14.5px; border-radius: var(--n-r-md); }
.n-kotak-masuk .n-tombol { height: 44px; border-radius: var(--n-r-md); font-size: 14px; }
.n-masuk-galat { color: var(--n-kritis-teks); font-size: 13px; min-height: 18px; }
@media (max-width: 860px) { .n-masuk { grid-template-columns: 1fr; } .n-masuk-kiri { display: none; } }

/* ----------------------------------------------------- superadmin: kerangka -- */
.n-aplikasi { display: grid; grid-template-columns: var(--n-lebar-rail) minmax(0, 1fr); min-height: 100vh; }
.n-sisi { background: var(--n-rail); border-right: 1px solid var(--n-garis); padding: 20px 14px 16px; display: flex; flex-direction: column;
  gap: 2px; position: sticky; top: 0; height: 100vh; overflow-y: auto; }
.n-sisi > .n-merek { padding: 2px 8px 10px; }
.n-sisi .n-merek small { display: block; font: 500 12px var(--n-badan); letter-spacing: 0; color: var(--n-abu); }
.n-grup { font: 700 12px var(--n-badan); letter-spacing: .12em; text-transform: uppercase; color: var(--n-abu); padding: 14px 10px 6px; }
.n-sisi a[data-ke] { display: flex; align-items: center; gap: 10px; height: 36px; padding: 0 10px; border-radius: var(--n-r-md); font-size: 13.5px;
  color: var(--n-abu); cursor: pointer; }
.n-sisi a[data-ke]::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; opacity: .45; flex: none; }
.n-sisi a[data-ke]:hover { background: var(--n-rail); color: var(--n-tinta); }
.n-sisi a[data-ke].on { background: var(--n-kontras); color: var(--n-putih); }
.n-sisi a[data-ke].on::before { background: var(--n-hijau); opacity: 1; }
.n-lencana { margin-left: auto; font: 700 12px var(--n-badan); background: var(--n-kritis); color: var(--n-putih); border-radius: var(--n-r-lg); padding: 1px 7px; }
.n-sisi-bawah { margin-top: auto; border-top: 1px solid var(--n-garis); padding: 14px 8px 0; display: grid; gap: 3px; font-size: 12.5px; color: var(--n-abu); }
.n-sisi-bawah b { font-size: 13.5px; color: var(--n-tinta); }
.n-sisi-bawah button { margin-top: 10px; }
.n-utama { padding: 28px 36px 64px; display: grid; gap: 16px; align-content: start; min-width: 0; }
.n-kepala { display: flex; justify-content: space-between; align-items: end; gap: 14px; flex-wrap: wrap; }
.n-kepala h1 { font-size: 26px; }
.n-kepala p { color: var(--n-abu); margin: 3px 0 0; font-size: 13.5px; max-width: 720px; }
.n-stat-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.n-stat { background: var(--n-kertas); border-radius: var(--n-r-lg); padding: 16px; box-shadow: inset 0 0 0 1px var(--n-garis); display: grid; gap: 6px; min-width: 0; }
.n-stat b { font: 600 26px/1.05 var(--n-tampilan); letter-spacing: -.02em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.n-stat .n-ubah { font-size: 12px; color: var(--n-abu); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.n-stat.n-sorot { background: var(--n-kontras); color: var(--n-putih); box-shadow: none; }
.n-stat.n-sorot .n-kecil, .n-stat.n-sorot .n-ubah { color: var(--n-abu-kontras); }
.n-dua { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: 16px; align-items: start; }
.n-tumpuk { display: grid; gap: 16px; align-content: start; }
.n-panel { background: var(--n-kertas); border-radius: var(--n-r-lg); box-shadow: inset 0 0 0 1px var(--n-garis); overflow: hidden; min-width: 0; }
.n-panel-kepala { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 13px 18px;
  border-bottom: 1px solid var(--n-garis); flex-wrap: wrap; min-height: 52px; }
.n-panel-kepala h3 { font: 600 14.5px var(--n-badan); letter-spacing: 0; }
.n-panel-kepala > span { font-size: 12px; color: var(--n-abu); }
.n-panel-isi { padding: 16px 18px; display: grid; gap: 12px; }
.n-gulir { overflow-x: auto; }
.n-gulir table { width: 100%; border-collapse: collapse; font-size: 13px; }
.n-gulir th { text-align: left; font: 600 12px var(--n-badan); letter-spacing: .06em; text-transform: uppercase; color: var(--n-abu); padding: 9px 14px;
  background: var(--n-rail); border-bottom: 1px solid var(--n-garis); white-space: nowrap; }
.n-gulir td { padding: 11px 14px; border-bottom: 1px solid var(--n-garis); vertical-align: middle; }
.n-gulir tr:last-child td { border-bottom: 0; }
.n-gulir td.n-num, .n-gulir th.n-num { text-align: right; white-space: nowrap; }
.n-gulir td.n-mono { white-space: nowrap; }
.n-gulir td .n-sub { display: block; font-size: 12px; color: var(--n-abu); margin-top: 1px; }
.n-aksi { display: flex; gap: 6px; justify-content: flex-end; flex-wrap: wrap; }
.n-kosong-teks { padding: 26px; text-align: center; color: var(--n-abu); }
.n-item { display: grid; grid-template-columns: auto 1fr auto; gap: 12px; align-items: center; padding: 12px 18px; border-bottom: 1px solid var(--n-garis); }
.n-item[data-buka] { cursor: pointer; }
.n-item:last-child { border-bottom: 0; }
.n-item[data-buka]:hover { background: var(--n-rail); }
.n-item .n-titik { width: 8px; height: 8px; border-radius: 50%; background: var(--n-waspada); }
.n-item .n-titik.tinggi { background: var(--n-kritis); }
.n-item b { font-weight: 600; display: block; }
.n-item small { color: var(--n-abu); font-size: 12px; }
.n-grafik { position: relative; padding: 10px 16px 12px; }
.n-grafik svg { width: 100%; height: 220px; overflow: visible; display: block; }
.n-tip { position: absolute; pointer-events: none; background: var(--n-kontras); color: var(--n-putih); font-size: 12px; padding: 7px 10px; border-radius: 8px;
  white-space: nowrap; transform: translate(-50%, -115%); opacity: 0; transition: opacity .15s; }
.n-tip.on { opacity: 1; }
.n-periksa { display: grid; grid-template-columns: auto 1fr; gap: 4px 12px; align-items: center; padding: 12px 18px; border-bottom: 1px solid var(--n-garis); }
.n-periksa:last-child { border-bottom: 0; }
.n-periksa b { font-weight: 600; }
.n-periksa small { grid-column: 2; color: var(--n-abu); font-size: 12.5px; }
.n-grid-paket { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; padding: 16px; }
.n-edit-paket input:not([type=checkbox]), .n-edit-paket select { min-width: 0; width: 100%; }
.n-edit-paket { border-radius: var(--n-r-md); box-shadow: inset 0 0 0 1px var(--n-garis); padding: 16px; display: grid; gap: 10px; }
.n-edit-paket label { display: grid; gap: 5px; font-size: 12px; color: var(--n-abu); }
.n-baris-antara { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.n-jejak { display: grid; grid-template-columns: 150px 190px 1fr; gap: 12px; padding: 10px 18px; border-bottom: 1px solid var(--n-garis); font-size: 13px; }
.n-jejak:last-child { border-bottom: 0; }
.n-rahasia { font: 600 16px var(--n-mono); letter-spacing: .06em; background: var(--n-rail); border-radius: var(--n-r-md); padding: 12px 14px; word-break: break-all; }
.n-bilah-pakai { height: 6px; border-radius: var(--n-r-lg); background: var(--n-garis-lembut); overflow: hidden; min-width: 90px; margin-top: 6px; }
.n-bilah-pakai i { display: block; height: 100%; background: var(--n-aksen-teks); border-radius: var(--n-r-lg); }
.n-bilah-pakai i.n-lebih { background: var(--n-waspada); }
.n-chips { display: flex; gap: 6px; flex-wrap: wrap; }
.n-chip { display: inline-flex; gap: 6px; align-items: center; height: 24px; padding: 0 8px; border-radius: 6px; background: var(--n-rail); font-size: 12px; }
.n-tirai { position: fixed; inset: 0; background: rgba(10,10,10,.4); display: none; place-items: center; padding: 20px; z-index: 50; }
.n-tirai.buka { display: grid; }
.n-modal { background: var(--n-kertas); border-radius: var(--n-r-lg); width: 100%; max-width: 580px; max-height: 88vh; overflow: auto; padding: 24px; display: grid; gap: 14px;
  box-shadow: 0 30px 80px rgba(10,10,10,.28); }
.n-modal.n-lebar { max-width: 920px; }
.n-modal h3 { font-size: 20px; }
.n-modal textarea.n-pesan { width: 100%; min-height: 260px; font: 12.5px/1.6 var(--n-mono); }
.n-modal img { max-width: 100%; border-radius: var(--n-r-md); box-shadow: inset 0 0 0 1px var(--n-garis); }
.n-modal ol { margin: 0; padding-left: 18px; display: grid; gap: 6px; color: var(--n-abu); }
.n-periksa-bayar { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 20px; align-items: start; }
.n-periksa-bayar .n-bukti-panel { background: var(--n-rail); border-radius: var(--n-r-md); padding: 12px; box-shadow: inset 0 0 0 1px var(--n-garis); max-height: 60vh; overflow: auto; }
.n-periksa-bayar .n-bukti-panel embed { width: 100%; height: 52vh; border-radius: 8px; }
.n-rincian-panel { display: grid; gap: 14px; align-content: start; }
.n-rincian-kepala { display: grid; gap: 2px; }
.n-rincian-list { display: grid; grid-template-columns: auto 1fr; gap: 4px 12px; margin: 0; font-size: 13.5px; }
.n-rincian-list dt { color: var(--n-abu); }
.n-rincian-list dd { margin: 0; }
.n-riwayat-perusahaan h4 { font-size: 13px; margin: 0 0 6px; color: var(--n-abu); }
.n-riwayat-perusahaan ul { margin: 0; padding: 0; list-style: none; display: grid; gap: 4px; font-size: 13px; }
@media (max-width: 720px) { .n-periksa-bayar { grid-template-columns: 1fr; } }
.n-toast-tunggal { position: fixed; right: 24px; bottom: 24px; background: var(--n-kontras); color: var(--n-putih); padding: 12px 16px; border-radius: var(--n-r-md); box-shadow: var(--n-bayang-besar);
  z-index: 99; font-size: 13.5px; max-width: 420px; }
.n-toast-tunggal.n-toast-tunggal-galat { background: var(--n-kritis); }
.n-subtab { display: flex; gap: 6px; flex-wrap: wrap; }
.n-subtab .n-tombol.on { background: var(--n-kontras); color: var(--n-putih); box-shadow: none; }
.n-chip.n-durasi { cursor: pointer; user-select: none; }
.n-chip.n-durasi.on { background: var(--n-kontras); color: var(--n-putih); }
.n-badge-jenis { display: inline-flex; align-items: center; gap: 6px; height: 22px; padding: 0 8px; border-radius: 6px; font: 700 12px var(--n-badan); letter-spacing: .04em; white-space: nowrap; }
.n-badge-jenis.n-uji { background: var(--n-info-bg); color: var(--n-info); }
.n-badge-jenis.n-bayar { background: var(--n-embun); color: var(--n-hutan); }
.n-badge-jenis.n-internal { background: var(--n-rail); color: var(--n-abu); }
.n-galat-isian { color: var(--n-kritis-teks); font-size: 12px; min-height: 16px; }
.n-langkah { font: 700 12px var(--n-badan); letter-spacing: .1em; text-transform: uppercase; color: var(--n-abu); margin: 4px 0 -4px; }
@media (max-width: 1100px) { .n-stat-grid { grid-template-columns: 1fr 1fr; } .n-dua, .n-grid-paket { grid-template-columns: 1fr; } }
@media (max-width: 820px) { .n-utama { padding: 20px 16px 48px; } }

/* ============================================================================
   Portal (web/portal.html): komponen khas halaman portal langganan, dipindah
   dari <style> inline portal.html (migrasi CSS Fase 1, 2026-09-17). Kelas
   dasar generik (tombol, pil, field, galat, kartu, tab, toast) SENGAJA diberi
   akhiran "-portal" karena spesifikasinya (ukuran, radius, teknik bayangan)
   berbeda dari .n-btn/.n-badge/.n-field/.n-galat/.n-tab/.n-kartu/.n-toast di
   atas - jangan disatukan tanpa verifikasi visual. Kelas modifier turunan
   (hitam, hijau, garis, bahaya, kecil, live, aktif, berhenti, dst.) sengaja
   TIDAK diberi awalan n- karena hanya dipakai berpasangan dengan kelas dasar
   di atas dan tidak berisiko bentrok. Semua aturan tag global (body, a,
   h1-h3, form, [hidden]) DIBATASI di bawah kelas pembungkus .n-portal supaya
   tidak memengaruhi halaman lain yang memuat komponen.css ini.
   ========================================================================== */

.n-portal, .n-portal *, .n-portal *::before, .n-portal *::after { box-sizing: border-box; }
.n-portal { margin: 0; font-family: var(--n-badan); color: var(--n-tinta); background: var(--n-pasir); -webkit-font-smoothing: antialiased; }
.n-portal a { color: inherit; text-decoration: none; }
.n-portal h1, .n-portal h2, .n-portal h3 { font-family: var(--n-tampilan); letter-spacing: -.03em; margin: 0; font-weight: 600; line-height: 1.05; }
.n-portal form { display: grid; gap: 14px; }
.n-portal [hidden] { display: none !important; }

.n-merek { display: inline-flex; align-items: center; gap: 10px; font-family: var(--n-tampilan); font-size: 18px; letter-spacing: -.02em; }
.n-merek b { font-weight: 700; }
.n-merek img { width: 28px; height: 28px; margin-right: 10px; }
.n-merek { gap: 0 !important; }
.n-label { font: 600 12px/1 var(--n-badan); letter-spacing: .12em; text-transform: uppercase; color: var(--n-abu); }
.n-tombol { display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 46px; padding: 0 20px; border-radius: var(--n-r-lg);
  font: 600 14.5px var(--n-badan); border: 0; cursor: pointer; transition: transform .2s var(--n-pegas), opacity .2s; }
.n-tombol:hover { transform: translateY(-1px); }
.n-tombol:disabled { opacity: .5; cursor: default; transform: none; }
.n-tombol.hitam { background: var(--n-kontras); color: var(--n-putih); box-shadow: var(--n-sorot-dalam); }
.n-tombol.hijau { background: var(--n-hijau); color: var(--n-di-aksen); }
.n-tombol.garis { background: var(--n-kertas); box-shadow: inset 0 0 0 1px var(--n-garis); color: var(--n-tinta); }
.n-tombol.bahaya { background: var(--n-kertas); box-shadow: inset 0 0 0 1px var(--n-kritis-garis); color: var(--n-kritis-teks); }
.n-tombol.kecil { height: 36px; padding: 0 14px; font-size: 13.5px; }
.n-pil { display: inline-flex; align-items: center; gap: 6px; height: 24px; padding: 0 10px; border-radius: var(--n-r-lg); font: 600 12px var(--n-badan); }
.n-pil.live, .n-pil.aktif { background: var(--n-embun); color: var(--n-hutan); }
.n-pil.uji_coba { background: var(--n-info-bg); color: var(--n-info); }
.n-pil.tenggang, .n-pil.tertunggak { background: var(--n-waspada-bg); color: var(--n-waspada-teks); }
.n-pil.berhenti, .n-pil.kedaluwarsa { background: var(--n-kritis-bg); color: var(--n-kritis-teks); }
.n-pil.segera { background: var(--n-rail); color: var(--n-abu); }

.n-field-portal { display: grid; gap: 7px; }
.n-field-portal label { font-size: 13px; color: var(--n-abu); font-weight: 500; }
.n-field-portal input, .n-field-portal select { height: 46px; border-radius: var(--n-r-md); border: 0; box-shadow: inset 0 0 0 1px var(--n-garis); padding: 0 14px;
  font: 15px var(--n-badan); color: var(--n-tinta); background: var(--n-kertas); outline: none; transition: box-shadow .2s; }
.n-field-portal input:focus, .n-field-portal select:focus { box-shadow: inset 0 0 0 1.5px var(--n-tinta), 0 0 0 4px color-mix(in srgb, var(--n-aksen-teks) 18%, transparent); }
.n-field-portal small { font-size: 12.5px; color: var(--n-abu); }
.n-galat-portal { color: var(--n-kritis-teks); font-size: 13.5px; min-height: 18px; }

/* --------------------------------------------------------------- masuk -- */
.n-gerbang { min-height: 100vh; display: grid; grid-template-columns: 1fr 1fr; }
.n-gerbang-kiri { background: var(--n-kontras); color: var(--n-putih); padding: 40px 48px; display: grid; align-content: space-between; position: relative; overflow: hidden; }
.n-gerbang-kiri::before { content: ""; position: absolute; inset: 0; background-image: var(--n-arsir-gelap); }
.n-gerbang-kiri > * { position: relative; }
.n-gerbang-kiri .n-merek { color: var(--n-putih); }
.n-gerbang-kiri h1 { font-size: clamp(34px, 3.6vw, 52px); max-width: 520px; }
.n-gerbang-kiri p { color: var(--n-abu-kontras); max-width: 440px; line-height: 1.6; margin-top: 18px; }
.n-gerbang-kiri svg { width: 100%; max-width: 440px; height: 260px; }
.n-gerbang-kanan { display: grid; place-items: center; padding: 40px 24px; }
.n-kotak { width: 100%; max-width: 420px; display: grid; gap: 22px; }
.n-tab-portal { display: inline-flex; padding: 4px; border-radius: var(--n-r-lg); background: var(--n-kertas); box-shadow: inset 0 0 0 1px var(--n-garis); }
.n-tab-portal button { border: 0; background: transparent; height: 38px; padding: 0 20px; border-radius: var(--n-r-lg); font: 600 14px var(--n-badan); color: var(--n-abu); cursor: pointer; }
.n-tab-portal button.on { background: var(--n-kontras); color: var(--n-putih); }
.n-pratinjau-instance { font: 600 13.5px var(--n-mono); background: var(--n-embun); color: var(--n-hutan); padding: 10px 12px; border-radius: var(--n-r-md); }
@media (max-width: 900px) { .n-gerbang { grid-template-columns: 1fr; } .n-gerbang-kiri { display: none; } }

/* ----------------------------------------------------------------- dasbor -- */
.n-bilah-atas { height: 66px; background: var(--n-kertas); border-bottom: 1px solid var(--n-garis); }
.n-bilah-atas .n-wadah, .n-isi .n-wadah { max-width: 1120px; margin: 0 auto; padding: 0 24px; }
.n-bilah-atas .n-wadah { height: 100%; display: flex; align-items: center; gap: 16px; }
.n-bilah-atas .n-kanan { margin-left: auto; display: flex; align-items: center; gap: 14px; font-size: 14px; color: var(--n-abu); }
.n-isi { padding: 40px 0 80px; }
.n-salam { display: grid; gap: 10px; margin-bottom: 30px; }
.n-salam h2 { font-size: 36px; }
.n-salam p { color: var(--n-abu); }
.n-grid { display: grid; grid-template-columns: 1.4fr 1fr; gap: 16px; align-items: start; }
.n-kartu-portal { background: var(--n-kertas); border-radius: var(--n-r-lg); padding: 24px; box-shadow: inset 0 0 0 1px var(--n-garis); display: grid; gap: 18px; align-content: start; }
.n-kartu-portal.gelap { background: var(--n-kontras); color: var(--n-putih); box-shadow: var(--n-bayang-besar); position: relative; overflow: hidden; }
.n-kartu-portal.gelap::before { content: ""; position: absolute; inset: 0; background-image: var(--n-arsir-gelap); pointer-events: none; }
.n-kartu-portal.gelap > * { position: relative; }
.n-kartu-portal-kepala { display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.n-kartu-portal-kepala h3 { font-size: 22px; }
.n-kv { display: grid; grid-template-columns: auto 1fr; gap: 10px 18px; font-size: 14px; margin: 0; }
.n-kv dt { color: var(--n-abu); }
.n-kartu-portal.gelap .n-kv dt { color: var(--n-abu); }
.n-kv dd { margin: 0; font-weight: 500; }
.n-kunci { font: 12px/1.6 var(--n-mono); word-break: break-all; background: rgba(255,255,255,.05); color: var(--n-abu-kontras); padding: 12px 14px; border-radius: var(--n-r-md); max-height: 88px; overflow: auto; }
.n-kunci-bar { display: flex; gap: 8px; flex-wrap: wrap; }
.n-paket-pilih { display: grid; gap: 10px; }
.n-opsi { display: grid; grid-template-columns: auto 1fr auto; gap: 12px; align-items: center; padding: 14px 16px; border-radius: var(--n-r-lg); box-shadow: inset 0 0 0 1px var(--n-garis); cursor: pointer; transition: box-shadow .2s; }
.n-opsi:has(input:checked) { box-shadow: inset 0 0 0 1.5px var(--n-tinta); background: var(--n-rail); }
.n-opsi input { accent-color: var(--n-kontras); width: 16px; height: 16px; }
.n-opsi b { font-family: var(--n-tampilan); font-size: 16px; }
.n-opsi small { display: block; color: var(--n-abu); font-size: 12.5px; margin-top: 2px; }
.n-opsi .n-harga { font: 600 14px var(--n-tampilan); text-align: right; }
.n-perkiraan { background: var(--n-pasir); border-radius: var(--n-r-md); padding: 14px 16px; font-size: 13.5px; color: var(--n-abu); }
.n-perkiraan b { color: var(--n-tinta); font-family: var(--n-tampilan); font-size: 18px; }
.n-modul-lain { display: grid; gap: 10px; }
.n-modul-lain div { display: flex; justify-content: space-between; align-items: center; padding: 14px 16px; border-radius: var(--n-r-md); box-shadow: inset 0 0 0 1px var(--n-garis); }
.n-modul-lain b { font-family: var(--n-tampilan); }
.n-modul-lain small { display: block; color: var(--n-abu); font-size: 12.5px; }
.n-catatan { font-size: 13px; color: var(--n-abu); line-height: 1.55; }
.n-toast-portal { position: fixed; left: 50%; bottom: 26px; transform: translateX(-50%); background: var(--n-kontras); color: var(--n-putih); padding: 12px 18px; border-radius: var(--n-r-md); font-size: 14px; box-shadow: var(--n-bayang-besar); z-index: 99; }
.n-pil.terbit, .n-pil.menunggu_verifikasi { background: var(--n-waspada-bg); color: var(--n-waspada-teks); }
.n-pil.ditolak { background: var(--n-kritis-bg); color: var(--n-kritis-teks); }
.n-pil.lunas { background: var(--n-embun); color: var(--n-hutan); }
.n-pil.batal, .n-pil.pipeline { background: var(--n-rail); color: var(--n-abu); }
.n-rincian { width: 100%; border-collapse: collapse; font-size: 13.5px; }
.n-rincian td { padding: 9px 0; border-bottom: 1px solid var(--n-garis); vertical-align: top; }
.n-rincian td.num { text-align: right; white-space: nowrap; padding-left: 16px; font-variant-numeric: tabular-nums; }
.n-rincian small { color: var(--n-abu); }
.n-rincian tr.total td { border-bottom: 0; font: 600 18px var(--n-tampilan); padding-top: 12px; }
.n-rekening { display: grid; grid-template-columns: 1fr 1fr auto; gap: 14px; align-items: center; background: var(--n-pasir); border-radius: var(--n-r-md); padding: 14px 16px; }
.n-rekening div { display: grid; gap: 4px; }
.n-rekening b { font: 600 16px var(--n-tampilan); }
.n-rekening small { color: var(--n-abu); font-size: 12.5px; }
.n-catatan-tolak { background: var(--n-kritis-bg); color: var(--n-kritis-teks); border-radius: var(--n-r-md); padding: 12px 14px; font-size: 13.5px; }
.n-unggah { display: grid; gap: 12px; }
.n-unggah input[type=file] { height: auto; padding: 10px 12px; }
.n-riwayat summary { cursor: pointer; font-size: 13.5px; font-weight: 600; }
.n-baris-riwayat { display: grid; grid-template-columns: 1fr auto auto; gap: 12px; align-items: center; padding: 10px 0; border-top: 1px solid var(--n-garis); font-size: 13.5px; }
.n-langkah-langganan { list-style: none; margin: 0; padding: 0; display: grid; counter-reset: l; }
.n-langkah-langganan li { display: grid; grid-template-columns: 26px 1fr; gap: 10px; padding: 10px 0; border-top: 1px solid var(--n-garis); font-size: 13.5px; counter-increment: l; }
.n-langkah-langganan li::before { content: counter(l); width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; font: 600 12px var(--n-badan); background: var(--n-rail); color: var(--n-abu); }
.n-langkah-langganan li.selesai::before { content: "✓"; background: var(--n-hijau); color: var(--n-di-aksen); }
.n-langkah-langganan li.kini::before { background: var(--n-kontras); color: var(--n-putih); }
.n-langkah-langganan small { display: block; color: var(--n-abu); font-size: 12.5px; }
@media (max-width: 700px) { .n-rekening { grid-template-columns: 1fr; } }
.n-perintah { font: 12px/1.65 var(--n-mono); background: var(--n-kontras); color: var(--n-teks-kontras); padding: 14px 16px; border-radius: var(--n-r-md);
  white-space: pre-wrap; word-break: break-all; margin: 8px 0 12px; max-height: 190px; overflow: auto; }
.n-syarat { margin: 0; padding-left: 20px; display: grid; gap: 6px; font-size: 13.5px; color: var(--n-abu); }
.n-tautan-pindah { background: none; border: 0; padding: 0; margin-top: 18px; color: var(--n-abu); font: 500 13px var(--n-badan);
  text-decoration: underline; text-underline-offset: 3px; cursor: pointer; justify-self: start; }
.n-tautan-pindah:hover { color: var(--n-putih); }
@media (max-width: 900px) { .n-grid { grid-template-columns: 1fr; } }

/* ------------------------------------------------------- lupa sandi -- */
.n-lupa-sandi { background: none; border: 0; padding: 0; justify-self: end; font: 500 13px var(--n-badan);
  color: var(--n-abu); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.n-field-portal-galat { color: var(--n-kritis-teks); font-size: 12.5px; min-height: 16px; margin-top: -3px; }
.n-field-portal.ada-galat input, .n-field-portal.ada-galat select { box-shadow: inset 0 0 0 1.5px var(--n-kritis); }

/* ------------------------------------------------------- hitung mundur -- */
.n-hitung-mundur { display: grid; gap: 8px; }
.n-hitung-mundur .n-angka { font: 700 40px var(--n-tampilan); line-height: 1; }
.n-hitung-mundur .n-angka small { font: 600 13px var(--n-badan); margin-left: 6px; color: var(--n-abu); }
.n-progress-masa { height: 6px; border-radius: var(--n-r-lg); background: rgba(255,255,255,.12); overflow: hidden; }
.n-progress-masa > i { display: block; height: 100%; background: var(--n-hijau); border-radius: var(--n-r-lg); }

/* ------------------------------------------------------- metode bayar -- */
.n-metode-bayar { display: grid; gap: 10px; }
.n-metode-kartu { display: grid; grid-template-columns: auto 1fr auto; gap: 12px; align-items: center; padding: 14px 16px;
  border-radius: var(--n-r-lg); box-shadow: inset 0 0 0 1px var(--n-garis); cursor: pointer; }
.n-metode-kartu:has(input:checked) { box-shadow: inset 0 0 0 1.5px var(--n-tinta); background: var(--n-rail); }
.n-metode-kartu.nonaktif { cursor: default; opacity: .55; }
.n-metode-kartu b { font-family: var(--n-tampilan); font-size: 15px; }
.n-metode-kartu small { display: block; color: var(--n-abu); font-size: 12.5px; margin-top: 2px; }
.n-pil.segera-metode { background: var(--n-rail); color: var(--n-abu); }

/* ------------------------------------------------------- unggah bukti -- */
.n-dnd { border: 1.5px dashed var(--n-garis); border-radius: var(--n-r-lg); padding: 22px 16px; text-align: center;
  display: grid; gap: 8px; cursor: pointer; transition: box-shadow .2s, background .2s; }
.n-dnd.seret { box-shadow: inset 0 0 0 2px var(--n-tinta); background: var(--n-embun); }
.n-dnd small { color: var(--n-abu); font-size: 12.5px; }
.n-dnd img.pratinjau { max-width: 100%; max-height: 180px; border-radius: var(--n-r-md); margin: 0 auto; display: block; }
.n-dnd .nama-berkas { font-size: 13px; font-weight: 600; word-break: break-all; }

/* ------------------------------------------------------- linimasa -- */
.n-linimasa { display: flex; justify-content: space-between; gap: 4px; margin-top: 6px; }
.n-linimasa .titik { flex: 1; text-align: center; position: relative; font-size: 12px; color: var(--n-abu); }
.n-linimasa .titik::before { content: ""; display: block; width: 12px; height: 12px; border-radius: 50%; margin: 0 auto 6px;
  background: var(--n-rail); box-shadow: inset 0 0 0 2px var(--n-garis); }
.n-linimasa .titik.selesai::before { background: var(--n-hijau); box-shadow: none; }
.n-linimasa .titik.selesai { color: var(--n-tinta); font-weight: 600; }
.n-linimasa .titik:not(:last-child)::after { content: ""; position: absolute; top: 5px; left: 55%; width: 90%; height: 2px; background: var(--n-garis); z-index: -1; }
.n-linimasa .titik.selesai:not(:last-child)::after { background: var(--n-hijau); }

/* ============================================================================
   Khusus aplikasi mobile (web/index.html, web/login.html): dipindah verbatim
   dari web/assets/mobile.css (migrasi CSS Fase 1, tahap 4, 2026-09-17), lalu
   mobile.css dihapus.

   PERINGATAN PARADIGMA BREAKPOINT TERBALIK: seluruh bagian di bawah ini
   ditulis MOBILE-FIRST (aturan dasar untuk layar sempit/HP, lalu
   "@media (min-width: ...)" untuk memperluas ke tablet/desktop), sedangkan
   bagian lain komponen.css di atas ini DESKTOP-FIRST ("@media (max-width:
   ...)" untuk menyusut ke HP). Karena arahnya terbalik, SEMUA selector di
   bagian ini WAJIB diawali ".n-app-mobile" (kelas yang dipasang langsung di
   <body> index.html dan login.html) - termasuk di setiap level nesting di
   dalam "@media". Tanpa pembungkus ini, aturan dasar yang ditulis untuk HP
   (mis. body polos, .card, .btn) akan otomatis berlaku juga di tampilan
   desktop admin.html/superadmin.html/portal.html karena ketiganya sama-sama
   memuat komponen.css ini - risiko nyata, bukan teoretis (lihat log progres
   2026-09-17 tahap 4).

   Nama kelas SENGAJA TIDAK diberi awalan "n-" seperti bagian lain di file
   ini (beda dari pola use-case/superadmin/portal di atas): hampir seluruh
   kelas di sini dibuat dan/atau ditoggle langsung lewat nama literalnya oleh
   web/assets/mobile.js (dipakai index.html DAN login.html, di luar cakupan
   migrasi ini) dan oleh skrip inline index.html sendiri (puluhan pemanggilan
   `el.className = "..."` untuk kartu tugas, gelembung chat, menu, dsb, di
   file yang sama besarnya 1600+ baris). Mengganti nama-nama itu tanpa
   menyunting kedua sumber JS sekaligus, tanpa alat verifikasi visual di sesi
   ini, berisiko tinggi memutus tampilan secara diam-diam. Ini perluasan dari
   pola aman yang sama dipakai untuk kelas #map/#list di bagian studi kasus
   di atas: kelas yang dikontrol JS di luar cakupan cukup dilingkupi, tidak
   perlu diganti nama. Nilai piksel dan warna dijaga identik dengan aslinya.
   ========================================================================== */

.n-app-mobile, .n-app-mobile *, .n-app-mobile *::before, .n-app-mobile *::after {
  box-sizing: border-box; -webkit-tap-highlight-color: transparent;
}

.n-app-mobile {
  /* Variabel lokal aplikasi dipetakan ke token --n-* (Fase 9), jadi mode
     gelap dan palet tinta + lime berlaku tanpa menulis ulang aturan di bawah. */
  --bg:        var(--n-rail);
  --bg-2:      var(--n-rail);
  --card:      var(--n-kertas);
  --ink:       var(--n-tinta);
  --ink-2:     var(--n-abu);
  --ink-3:     var(--n-abu);
  --line:      var(--n-garis-lembut);
  --line-2:    var(--n-garis);

  --green:     var(--n-aksen);
  --green-2:   var(--n-daun);
  --green-ink: var(--n-aksen-teks);
  --green-bg:  var(--n-embun);
  --dark:      var(--n-kontras);
  --dark-2:    var(--n-kontras-naik);
  --amber:     var(--n-waspada-teks);
  --amber-bg:  var(--n-waspada-bg);
  --red:       var(--n-kritis-teks);
  --red-bg:    var(--n-kritis-bg);
  --ok:       var(--n-baik);
  --ok-ink:   var(--n-baik-teks);
  --ok-bg:    var(--n-baik-bg);
  --blue:      var(--n-tinta);
  --blue-bg:   var(--n-rail);

  --sans: 'Inter', -apple-system, 'Segoe UI', Roboto, sans-serif;
  --disp: 'Space Grotesk', 'Inter', sans-serif;
  --mono: 'JetBrains Mono', ui-monospace, Consolas, monospace;

  --r-xl: var(--n-r-lg);
  --r-lg: var(--n-r-lg);
  --r-md: var(--n-r-md);
  --r-sm: var(--n-r-sm);
  --nav-h: 64px;
  --safe-b: env(safe-area-inset-bottom, 0px);

  --shadow:       none;
  --shadow-tebal: var(--n-bayang-kecil);
  --pegas:  cubic-bezier(.16, 1, .3, 1);
  --pegas-lebih: cubic-bezier(.32, 1.4, .35, 1);

  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 15.5px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  overscroll-behavior-y: contain;
}
/* nusantika.css juga menata elemen global (body, h1-4, a) untuk halaman lain
   yang memakainya sebagai satu-satunya sumber gaya. Di aplikasi mobile ini
   cuma TOKEN-nya (--n-*) yang dipakai supaya UI.tur()/UI.dialog() dkk (dari
   komponen.js) tampil benar - definisi elemen globalnya (warna, huruf) di
   kembalikan ke tema mobile ini lewat "inherit" supaya tidak berubah dari
   sebelum migrasi. Dulu ini <style> kecil terpisah di index.html (Fase 6);
   sekarang otomatis menang lewat spesifisitas kelas ".n-app-mobile" (0,1,1)
   melawan selector polos nusantika.css "h1,h2,h3,h4"/"a" (0,0,1), tidak
   bergantung urutan file lagi seperti sebelumnya. Juga dipakai login.html
   yang baru memuat nusantika.css setelah migrasi ini. */
.n-app-mobile h1, .n-app-mobile h2, .n-app-mobile h3, .n-app-mobile h4 {
  font-family: inherit; font-weight: inherit; letter-spacing: normal; color: inherit; margin: 0;
}
.n-app-mobile a { color: inherit; }

.n-app-mobile button { font-family: var(--sans); cursor: pointer; }
.n-app-mobile button, .n-app-mobile .tekan, .n-app-mobile .chip, .n-app-mobile .quick, .n-app-mobile .opsi, .n-app-mobile .menu-item, .n-app-mobile .baris {
  transition: transform .18s var(--pegas), opacity .18s ease, box-shadow .18s ease;
}
.n-app-mobile button:active, .n-app-mobile .tekan:active { transform: scale(.965); }

/* ------------------------------------------------------------- kerangka -- */
.n-app-mobile .app {
  max-width: 480px;
  margin: 0 auto;
  min-height: 100dvh;
  position: relative;
  background:
    radial-gradient(90% 24% at 50% -4%, color-mix(in srgb, var(--n-aksen) 7.5%, transparent), transparent 70%),
    var(--bg);
  transition: transform .34s var(--pegas), border-radius .34s var(--pegas), filter .34s ease;
  transform-origin: 50% 0;
}
/* aplikasi menyusut halus di belakang bottom sheet (rasa iOS) */
.n-app-mobile.sheet-buka .app {
  transform: scale(.965) translateY(10px);
  border-radius: var(--r-xl);
  overflow: hidden;
  filter: brightness(.94);
}
@media (min-width: 560px) {
  .n-app-mobile { background: var(--n-rail); }
  .n-app-mobile .app { box-shadow: 0 0 80px rgba(10,10,10,.10); }
}

.n-app-mobile .view {
  display: none;
  padding: 0 18px calc(var(--nav-h) + var(--safe-b) + 28px);
}
.n-app-mobile .view.on { display: block; }
/* masuk berurutan: tiap anak langsung view muncul selang 45 ms */
.n-app-mobile .view.on > * { animation: n-mobile-naik .55s var(--pegas) both; }
.n-app-mobile .view.on > *:nth-child(1) { animation-delay: 0s; }
.n-app-mobile .view.on > *:nth-child(2) { animation-delay: .045s; }
.n-app-mobile .view.on > *:nth-child(3) { animation-delay: .09s; }
.n-app-mobile .view.on > *:nth-child(4) { animation-delay: .135s; }
.n-app-mobile .view.on > *:nth-child(5) { animation-delay: .18s; }
.n-app-mobile .view.on > *:nth-child(6) { animation-delay: .225s; }
.n-app-mobile .view.on > *:nth-child(n+7) { animation-delay: .27s; }
@keyframes n-mobile-naik {
  from { opacity: 0; transform: translateY(16px); }
  to   { opacity: 1; transform: none; }
}

/* ----------------------------------------------------------------- topbar - */
.n-app-mobile .topbar {
  display: flex; align-items: center; gap: 12px;
  padding: 20px 2px 14px;
}
.n-app-mobile .topbar .hi { flex: 1; min-width: 0; }
.n-app-mobile .hi-sapa { font-size: 13px; color: var(--ink-2); font-weight: 500; }
.n-app-mobile .hi-nama {
  font-family: var(--disp); font-weight: 700; font-size: 20px;
  letter-spacing: -.02em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.n-app-mobile .avatar {
  width: 42px; height: 42px; border-radius: var(--n-r-lg); flex: 0 0 auto;
  background: linear-gradient(145deg, var(--dark), var(--dark-2));
  color: var(--n-aksen-di-kontras);
  font-family: var(--disp); font-weight: 700; font-size: 15px;
  display: grid; place-items: center; border: none;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.08), 0 4px 14px -4px rgba(10,10,10,.4);
}
.n-app-mobile .icon-btn {
  width: 42px; height: 42px; border-radius: var(--n-r-lg); flex: 0 0 auto;
  background: var(--card); border: 1px solid var(--line);
  display: grid; place-items: center; position: relative; color: var(--ink);
  box-shadow: var(--shadow);
}
.n-app-mobile .icon-btn svg { width: 19px; height: 19px; }
.n-app-mobile .icon-btn .dot {
  position: absolute; top: 10px; right: 10px; width: 8px; height: 8px;
  border-radius: var(--n-r-lg); background: var(--red); border: 2px solid var(--card);
  animation: n-mobile-denyut 2.4s infinite;
}
@keyframes n-mobile-denyut {
  0%, 100% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--n-kritis) 35%, transparent); }
  50%      { box-shadow: 0 0 0 5px color-mix(in srgb, var(--n-kritis) 0%, transparent); }
}

.n-app-mobile .page-title {
  font-family: var(--disp); font-weight: 700; font-size: 24px;
  letter-spacing: -.02em; margin: 6px 2px 2px;
}
.n-app-mobile .page-sub { color: var(--ink-2); font-size: 13.5px; margin: 0 2px 18px; }

/* ---------------------------------------------------------------- hero ---- */
.n-app-mobile .hero {
  background:
    radial-gradient(130% 140% at 100% 0%, color-mix(in srgb, var(--n-aksen) 20%, transparent), transparent 52%),
    radial-gradient(90% 90% at -10% 110%, color-mix(in srgb, var(--n-aksen) 8%, transparent), transparent 55%),
    linear-gradient(150deg, var(--dark) 0%, var(--dark-2) 85%);
  color: var(--n-putih);
  border-radius: var(--r-xl);
  padding: 24px 22px 20px;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.07), var(--shadow-tebal);
  position: relative;
  overflow: hidden;
}
.n-app-mobile .hero::after {
  /* butir halus supaya gradasi tidak terlihat plastik */
  content: ''; position: absolute; inset: 0; pointer-events: none; opacity: .5;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .04 0'/%3E%3C/filter%3E%3Crect width='120' height='120' filter='url(%23n)'/%3E%3C/svg%3E");
}
.n-app-mobile .hero-label {
  font-size: 12px; font-weight: 700; letter-spacing: .16em;
  text-transform: uppercase; color: var(--n-abu-kontras);
}
.n-app-mobile .hero-nilai {
  font-family: var(--disp); font-weight: 700; font-size: 38px;
  letter-spacing: -.03em; margin: 5px 0 2px; color: var(--n-putih);
  font-variant-numeric: tabular-nums;
}
.n-app-mobile .hero-nilai small { font-size: 19px; font-weight: 600; color: var(--n-aksen-di-kontras); margin-right: 5px; }
.n-app-mobile .hero-sub { font-size: 13px; color: var(--n-abu-kontras); }
.n-app-mobile .hero-bar {
  margin-top: 18px; height: 7px; border-radius: var(--n-r-lg);
  background: rgba(255,255,255,.13); overflow: hidden;
}
.n-app-mobile .hero-bar i {
  display: block; height: 100%; border-radius: var(--n-r-lg);
  background: linear-gradient(90deg, var(--green-2), var(--n-aksen));
  box-shadow: 0 0 12px color-mix(in srgb, var(--n-aksen) 50%, transparent);
  transition: width .9s var(--pegas);
}
.n-app-mobile .hero-foot {
  display: flex; justify-content: space-between; margin-top: 9px;
  font-size: 12px; color: var(--n-abu-kontras); font-weight: 500;
}
.n-app-mobile .hero-badge {
  position: absolute; top: 20px; right: 20px; z-index: 1;
  background: color-mix(in srgb, var(--n-aksen) 14%, transparent); color: var(--n-aksen-di-kontras);
  border: 1px solid color-mix(in srgb, var(--n-aksen) 25%, transparent);
  font-size: 12px; font-weight: 700; letter-spacing: .07em;
  padding: 5px 11px; border-radius: var(--n-r-lg); text-transform: uppercase;
  backdrop-filter: blur(4px);
}
.n-app-mobile .hero-badge.telat {
  background: color-mix(in srgb, var(--n-kritis) 14%, transparent); color: var(--n-kritis-teks-gelap); border-color: color-mix(in srgb, var(--n-kritis) 30%, transparent);
}
.n-app-mobile .hero-kosong { text-align: center; padding: 10px 4px 6px; }
.n-app-mobile .hero-kosong .hero-nilai { font-size: 23px; letter-spacing: -.02em; }

/* ------------------------------------------------------------- aksi cepat - */
.n-app-mobile .quick-row { display: flex; gap: 10px; margin: 16px 0 4px; }
.n-app-mobile .quick {
  flex: 1; background: var(--card); border: 1px solid var(--line);
  border-radius: var(--r-md); padding: 14px 6px 12px;
  display: flex; flex-direction: column; align-items: center; gap: 8px;
  font-size: 12px; font-weight: 600; color: var(--ink);
  box-shadow: var(--shadow);
}
.n-app-mobile .quick .q-ic {
  width: 40px; height: 40px; border-radius: var(--n-r-lg);
  display: grid; place-items: center;
  background: var(--green-bg); color: var(--green-ink);
  transition: transform .25s var(--pegas-lebih);
}
.n-app-mobile .quick:active .q-ic { transform: scale(1.12); }
.n-app-mobile .quick .q-ic svg { width: 19px; height: 19px; }

/* ------------------------------------------------------------------ seksi - */
.n-app-mobile .sect { margin-top: 24px; }
.n-app-mobile .sect-head {
  display: flex; align-items: baseline; justify-content: space-between;
  margin: 0 2px 10px;
}
.n-app-mobile .sect-head h2 {
  font-family: var(--disp); font-size: 16.5px; font-weight: 700;
  letter-spacing: -.01em; margin: 0;
}
.n-app-mobile .sect-head .lihat {
  font-size: 12.5px; font-weight: 700; color: var(--green-ink);
  background: none; border: none; padding: 0;
}
.n-app-mobile .sect-head .n { font-size: 12.5px; color: var(--ink-3); font-weight: 600; }

/* ------------------------------------------------------------------ kartu - */
.n-app-mobile .card {
  background: var(--card); border-radius: var(--r-lg);
  border: 1px solid var(--line);
  box-shadow: var(--shadow); padding: 16px; margin-bottom: 10px;
}

.n-app-mobile .tugas-kartu { display: flex; gap: 13px; align-items: flex-start; }
.n-app-mobile .tugas-ic {
  width: 44px; height: 44px; border-radius: var(--n-r-lg); flex: 0 0 auto;
  display: grid; place-items: center;
}
.n-app-mobile .tugas-ic svg { width: 20px; height: 20px; }
.n-app-mobile .tugas-ic.hijau { background: var(--green-bg); color: var(--green-ink); }
.n-app-mobile .tugas-ic.biru  { background: var(--blue-bg); color: var(--blue); }
.n-app-mobile .tugas-ic.amber { background: var(--amber-bg); color: var(--amber); }
.n-app-mobile .tugas-ic.merah { background: var(--red-bg); color: var(--red); }
.n-app-mobile .tugas-isi { flex: 1; min-width: 0; }
.n-app-mobile .tugas-judul { font-weight: 650; font-size: 14.5px; line-height: 1.35; letter-spacing: -.005em; }
.n-app-mobile .tugas-sub { font-size: 12.5px; color: var(--ink-2); margin-top: 2px; }
.n-app-mobile .tugas-meta { font-size: 12px; color: var(--ink-3); margin-top: 5px; font-family: var(--mono); }
.n-app-mobile .tugas-aksi { display: flex; gap: 8px; margin-top: 12px; flex-wrap: wrap; }

/* ----------------------------------------------------------------- tombol - */
.n-app-mobile .btn {
  border: none; border-radius: var(--n-r-lg); padding: 11px 18px;
  font-size: 14px; font-weight: 700; color: var(--dark);
  background: var(--green);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.35), 0 6px 16px -6px rgba(10,10,10,.55);
  display: inline-flex; align-items: center; justify-content: center; gap: 7px;
  letter-spacing: -.005em;
}
.n-app-mobile .btn:disabled { opacity: .45; box-shadow: none; }
.n-app-mobile .btn.blok { width: 100%; padding: 15px; font-size: 15px; border-radius: var(--n-r-lg); }
.n-app-mobile .btn.dua { background: var(--dark); color: var(--n-putih); box-shadow: 0 6px 16px -6px rgba(10,10,10,.5); }
.n-app-mobile .btn.garis {
  background: var(--card); border: 1px solid var(--line-2); color: var(--ink);
  box-shadow: none;
}
.n-app-mobile .btn.bahaya { background: var(--red-bg); color: var(--red); box-shadow: none; }
.n-app-mobile .btn.kecil { padding: 8px 14px; font-size: 13px; border-radius: var(--n-r-md); }
.n-app-mobile .btn svg { width: 16px; height: 16px; }

/* ------------------------------------------------------------------ status - */
.n-app-mobile .pil {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: 12px; font-weight: 700; letter-spacing: .05em;
  padding: 4px 10px; border-radius: var(--n-r-lg); text-transform: uppercase;
  background: var(--bg-2); color: var(--ink-2); white-space: nowrap;
}
.n-app-mobile .pil::before { content: ''; width: 6px; height: 6px; border-radius: var(--n-r-lg); background: currentColor; }
.n-app-mobile .pil.ok    { background: var(--ok-bg); color: var(--ok-ink); }
.n-app-mobile .pil.tunggu{ background: var(--amber-bg); color: var(--amber); }
.n-app-mobile .pil.jalan { background: var(--blue-bg); color: var(--blue); }
.n-app-mobile .pil.gagal { background: var(--red-bg); color: var(--red); }

/* -------------------------------------------------------------------- rel -- */
.n-app-mobile .rel { display: flex; margin: 6px 0 2px; }
.n-app-mobile .rel-step { flex: 1; text-align: center; position: relative; }
.n-app-mobile .rel-step::before {
  content: ''; position: absolute; top: 7px; left: -50%; right: 50%;
  height: 3px; background: var(--line-2); border-radius: 2px;
}
.n-app-mobile .rel-step:first-child::before { display: none; }
.n-app-mobile .rel-step.done::before, .n-app-mobile .rel-step.now::before { background: var(--green-2); }
.n-app-mobile .rel-dot {
  width: 16px; height: 16px; border-radius: var(--n-r-lg); margin: 0 auto;
  background: var(--card); border: 3px solid var(--line-2);
  position: relative; z-index: 1; transition: all .3s var(--pegas);
}
.n-app-mobile .rel-step.done .rel-dot { background: var(--green-2); border-color: var(--green-2); }
.n-app-mobile .rel-step.now .rel-dot {
  border-color: var(--green-2); background: var(--card);
  box-shadow: 0 0 0 5px color-mix(in srgb, var(--n-aksen) 18%, transparent);
  animation: n-mobile-rel-now 2.2s infinite;
}
@keyframes n-mobile-rel-now {
  0%, 100% { box-shadow: 0 0 0 4px color-mix(in srgb, var(--n-aksen) 20%, transparent); }
  50%      { box-shadow: 0 0 0 7px color-mix(in srgb, var(--n-aksen) 8%, transparent); }
}
.n-app-mobile .rel-label { font-size: 12px; margin-top: 7px; color: var(--ink-3); font-weight: 600; }
.n-app-mobile .rel-step.now .rel-label { color: var(--ink); }

/* ----------------------------------------------------------------- daftar - */
.n-app-mobile .baris {
  display: flex; align-items: center; gap: 12px;
  padding: 13px 2px; border-bottom: 1px solid var(--line);
}
.n-app-mobile .baris:last-child { border-bottom: none; }
.n-app-mobile .baris-isi { flex: 1; min-width: 0; }
.n-app-mobile .baris-judul { font-weight: 600; font-size: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.n-app-mobile .baris-sub { font-size: 12.5px; color: var(--ink-2); margin-top: 1px; }
.n-app-mobile .baris-kanan { text-align: right; flex: 0 0 auto; }
.n-app-mobile .baris-nilai {
  font-family: var(--disp); font-weight: 700; font-size: 14.5px;
  font-variant-numeric: tabular-nums;
}
.n-app-mobile .baris-waktu { font-size: 12px; color: var(--ink-3); margin-top: 2px; }

.n-app-mobile .kosong {
  text-align: center; color: var(--ink-3); font-size: 13.5px;
  padding: 38px 20px;
}
.n-app-mobile .kosong .ilus {
  width: 68px; height: 68px; margin: 0 auto 14px; border-radius: var(--n-r-lg);
  background: var(--card); display: grid; place-items: center;
  color: var(--ink-3); box-shadow: var(--shadow); border: 1px solid var(--line);
}
.n-app-mobile .kosong .ilus svg { width: 28px; height: 28px; }

/* ------------------------------------------------------------------- chat -- */
.n-app-mobile .chat-wrap {
  display: flex; flex-direction: column;
  height: calc(100dvh - var(--nav-h) - var(--safe-b));
}
.n-app-mobile .chat-head {
  display: flex; align-items: center; gap: 12px;
  padding: 16px 18px 12px;
  position: sticky; top: 0; z-index: 5;
  background: linear-gradient(to bottom, var(--bg) 78%, transparent);
}
.n-app-mobile .chat-ava {
  width: 48px; height: 48px; display: block;
  filter: drop-shadow(0 4px 10px color-mix(in srgb, var(--n-aksen) 25%, transparent));
}
.n-app-mobile .chat-siapa { font-weight: 700; font-size: 15px; font-family: var(--disp); }
.n-app-mobile .chat-status { font-size: 12px; color: var(--ok-ink); display: flex; align-items: center; gap: 5px; font-weight: 600; }
.n-app-mobile .chat-status::before {
  content: ''; width: 7px; height: 7px; border-radius: var(--n-r-lg); background: var(--ok);
  animation: n-mobile-denyut-hijau 2.6s infinite;
}
@keyframes n-mobile-denyut-hijau {
  0%, 100% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--n-baik) 40%, transparent); }
  55%      { box-shadow: 0 0 0 5px color-mix(in srgb, var(--n-baik) 0%, transparent); }
}

.n-app-mobile .chat-scroll { flex: 1; overflow-y: auto; padding: 4px 18px 12px; }
.n-app-mobile .gel {
  max-width: 82%; padding: 11px 15px; margin-bottom: 8px;
  border-radius: var(--n-r-lg); font-size: 14.5px; line-height: 1.5;
  animation: n-mobile-gel-masuk .35s var(--pegas) both;
  position: relative; width: fit-content;
  white-space: pre-wrap; word-break: break-word;
}
@keyframes n-mobile-gel-masuk {
  from { opacity: 0; transform: translateY(10px) scale(.96); }
}
.n-app-mobile .gel.bot {
  background: var(--card); border-bottom-left-radius: 7px;
  box-shadow: var(--shadow); border: 1px solid var(--line);
}
.n-app-mobile .gel.me {
  background: linear-gradient(150deg, var(--dark), var(--dark-2));
  color: var(--n-putih); margin-left: auto;
  border-bottom-right-radius: 7px;
  box-shadow: 0 6px 18px -8px rgba(10,10,10,.5);
}
.n-app-mobile .gel.me.file { background: var(--green-bg); color: var(--green-ink); font-weight: 600; box-shadow: none; }
.n-app-mobile .gel .jam { display: block; font-size: 12px; opacity: .5; margin-top: 4px; text-align: right; }

/* Kartu unduhan di dalam gelembung bot: formulir pengajuan & draf LPJ. */
.n-app-mobile .berkas-kartu {
  display: flex; align-items: center; gap: 9px; width: 100%;
  margin-top: 10px; padding: 11px 13px;
  background: var(--green-bg); color: var(--green-ink);
  border: 1px solid var(--line); border-radius: var(--n-r-lg);
  font: inherit; font-size: 13.5px; font-weight: 600; text-align: left;
  cursor: pointer; transition: transform .12s ease, box-shadow .12s ease;
}
.n-app-mobile .berkas-kartu:hover { transform: translateY(-1px); box-shadow: var(--shadow); }
.n-app-mobile .berkas-kartu:disabled { opacity: .55; cursor: default; transform: none; }
.n-app-mobile .berkas-kartu span { flex: 1; word-break: break-all; }

.n-app-mobile .ketik { display: inline-flex; gap: 4px; padding: 4px 2px; }
.n-app-mobile .ketik i {
  width: 7px; height: 7px; border-radius: var(--n-r-lg); background: var(--ink-3);
  animation: n-mobile-ketik 1s infinite;
}
.n-app-mobile .ketik i:nth-child(2) { animation-delay: .15s; }
.n-app-mobile .ketik i:nth-child(3) { animation-delay: .3s; }
@keyframes n-mobile-ketik { 0%, 60%, 100% { transform: none; opacity: .4; } 30% { transform: translateY(-4px); opacity: 1; } }

.n-app-mobile .chip-row { display: flex; gap: 8px; padding: 2px 18px 10px; overflow-x: auto; scrollbar-width: none; }
.n-app-mobile .chip-row::-webkit-scrollbar { display: none; }
.n-app-mobile .chip {
  flex: 0 0 auto; background: var(--card); border: 1px solid var(--line-2);
  color: var(--ink); font-size: 13px; font-weight: 600;
  padding: 8px 14px; border-radius: var(--n-r-lg);
  display: inline-flex; align-items: center; gap: 6px;
  box-shadow: var(--shadow);
}
.n-app-mobile .chip svg { width: 14px; height: 14px; color: var(--green-ink); }

.n-app-mobile .chat-input {
  display: flex; align-items: flex-end; gap: 9px;
  padding: 10px 16px calc(12px + var(--safe-b));
  background: var(--bg);
}
.n-app-mobile .chat-input .lampir {
  width: 46px; height: 46px; border-radius: var(--n-r-lg); flex: 0 0 auto;
  background: var(--card); border: 1px solid var(--line-2);
  display: grid; place-items: center; color: var(--ink-2); position: relative;
  box-shadow: var(--shadow); cursor: pointer;
  transition: transform .18s var(--pegas);
}
.n-app-mobile .chat-input .lampir:active { transform: scale(.92); }
.n-app-mobile .chat-input .lampir input { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
.n-app-mobile .chat-input .lampir svg { width: 20px; height: 20px; }
.n-app-mobile .chat-input input[type=text] {
  flex: 1; border: 1px solid var(--line-2); background: var(--card);
  border-radius: var(--n-r-lg); padding: 13px 16px; font-size: 15px;
  font-family: var(--sans); outline: none; min-width: 0;
  transition: border-color .2s ease, box-shadow .2s ease;
}
.n-app-mobile .chat-input input[type=text]:focus {
  border-color: var(--green-2);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--n-aksen) 14%, transparent);
}
.n-app-mobile .chat-input .kirim {
  width: 46px; height: 46px; border-radius: var(--n-r-lg); flex: 0 0 auto;
  background: var(--green); border: none; display: grid; place-items: center;
  color: var(--dark);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.35), 0 6px 16px -6px rgba(10,10,10,.6);
}
.n-app-mobile .chat-input .kirim:active { transform: scale(.88); }
.n-app-mobile .chat-input .kirim svg { width: 19px; height: 19px; }
.n-app-mobile .file-note {
  margin: 0 18px 8px; padding: 10px 14px; border-radius: var(--n-r-lg);
  background: var(--green-bg); color: var(--green-ink);
  font-size: 12.5px; font-weight: 600;
  display: flex; align-items: center; gap: 8px;
  animation: n-mobile-naik .3s var(--pegas);
}
.n-app-mobile .file-note button { margin-left: auto; background: none; border: none; color: inherit; display: grid; place-items: center; }
.n-app-mobile .file-note button svg { width: 15px; height: 15px; }

/* -------------------------------------------------------------- bottom nav - */
.n-app-mobile .navbar {
  position: fixed; bottom: 0; left: 50%; transform: translateX(-50%);
  width: 100%; max-width: 480px; z-index: 40;
  background: color-mix(in srgb, var(--n-kertas) 88%, transparent);
  backdrop-filter: blur(18px) saturate(1.6);
  -webkit-backdrop-filter: blur(18px) saturate(1.6);
  border-top: 1px solid var(--line);
  display: flex; padding: 6px 6px calc(6px + var(--safe-b));
}
.n-app-mobile .navbar button {
  flex: 1; background: none; border: none; padding: 5px 0 4px;
  display: flex; flex-direction: column; align-items: center; gap: 3px;
  font-size: 12px; font-weight: 600; color: var(--ink-3); position: relative;
}
.n-app-mobile .navbar button .nv-ic {
  width: 44px; height: 28px; border-radius: var(--n-r-lg);
  display: grid; place-items: center;
  transition: background .25s ease, color .25s ease, transform .3s var(--pegas-lebih);
}
.n-app-mobile .navbar button svg { width: 21px; height: 21px; }
.n-app-mobile .navbar button.on { color: var(--ink); }
.n-app-mobile .navbar button.on .nv-ic {
  background: var(--green-bg); color: var(--green-ink);
  transform: translateY(-1px);
}
.n-app-mobile .navbar button:active .nv-ic { transform: scale(.85); }
.n-app-mobile .navbar .nav-dot {
  position: absolute; top: 3px; right: calc(50% - 17px);
  width: 8px; height: 8px; border-radius: var(--n-r-lg); background: var(--red);
  border: 2px solid var(--n-kertas);
}

/* ----------------------------------------------------------- bottom sheet -- */
.n-app-mobile .tirai {
  position: fixed; inset: 0; z-index: 60;
  background: rgba(10,10,10,.44);
  backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px);
  opacity: 0; pointer-events: none; transition: opacity .3s ease;
}
.n-app-mobile .tirai.on { opacity: 1; pointer-events: auto; }
.n-app-mobile .sheet {
  position: fixed; bottom: 0; left: 50%; transform: translate(-50%, 106%);
  width: 100%; max-width: 480px; z-index: 61;
  background: var(--card); border-radius: 28px 28px 0 0;
  padding: 10px 22px calc(24px + var(--safe-b));
  transition: transform .42s var(--pegas);
  max-height: 88dvh; overflow-y: auto;
  box-shadow: 0 -18px 60px rgba(10,10,10,.25);
}
.n-app-mobile .sheet.on { transform: translate(-50%, 0); }
.n-app-mobile .sheet-pegangan {
  width: 40px; height: 5px; border-radius: var(--n-r-lg); background: var(--line-2);
  margin: 6px auto 18px;
}
.n-app-mobile .sheet h3 {
  font-family: var(--disp); font-size: 19px; font-weight: 700;
  letter-spacing: -.015em; margin: 0 0 4px;
}
.n-app-mobile .sheet .sheet-sub { color: var(--ink-2); font-size: 13.5px; margin: 0 0 16px; }

.n-app-mobile .field { margin-bottom: 14px; }
.n-app-mobile .field label {
  display: block; font-size: 12px; font-weight: 700; letter-spacing: .06em;
  text-transform: uppercase; color: var(--ink-2); margin-bottom: 7px;
}
.n-app-mobile .field input, .n-app-mobile .field select, .n-app-mobile .field textarea {
  width: 100%; border: 1.5px solid var(--line-2); border-radius: var(--n-r-lg);
  background: var(--bg); padding: 13px 15px; font-size: 16px;
  font-family: var(--sans); outline: none; color: var(--ink);
  transition: border-color .2s ease, box-shadow .2s ease, background .2s ease;
}
.n-app-mobile .field input:focus, .n-app-mobile .field select:focus, .n-app-mobile .field textarea:focus {
  border-color: var(--green-2); background: var(--card);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--n-aksen) 14%, transparent);
}
.n-app-mobile .field .bantuan { font-size: 12px; color: var(--ink-3); margin-top: 6px; }

.n-app-mobile .opsi-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 9px; margin-bottom: 14px; }
.n-app-mobile .opsi {
  border: 1.5px solid var(--line-2); border-radius: var(--n-r-lg); background: var(--bg);
  padding: 12px 10px; font-size: 13px; font-weight: 600; text-align: center;
  color: var(--ink); transition: all .2s var(--pegas);
}
.n-app-mobile .opsi.on {
  border-color: var(--green-2); background: var(--green-bg); color: var(--green-ink);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--n-aksen) 12%, transparent);
}

/* ------------------------------------------------------------------- toast - */
.n-app-mobile .toast-wrap {
  position: fixed; left: 50%; transform: translateX(-50%);
  bottom: calc(var(--nav-h) + var(--safe-b) + 14px);
  z-index: 80; width: calc(100% - 40px); max-width: 440px;
  display: flex; flex-direction: column; gap: 8px; pointer-events: none;
}
.n-app-mobile .toast {
  background: rgba(10,10,10,.96); color: var(--n-putih);
  backdrop-filter: blur(8px);
  border: 1px solid rgba(255,255,255,.07);
  border-radius: var(--n-r-lg); padding: 13px 16px; font-size: 13.5px; font-weight: 500;
  box-shadow: var(--shadow-tebal);
  display: flex; gap: 10px; align-items: flex-start;
  animation: n-mobile-toast-masuk .45s var(--pegas-lebih);
}
.n-app-mobile .toast.pergi { animation: n-mobile-toast-pergi .3s ease forwards; }
.n-app-mobile .toast .t-ic { flex: 0 0 auto; margin-top: 1px; }
.n-app-mobile .toast .t-ic svg { width: 17px; height: 17px; }
.n-app-mobile .toast.ok .t-ic { color: var(--n-aksen-di-kontras); }
.n-app-mobile .toast.err .t-ic { color: var(--n-kritis-teks-gelap); }
@keyframes n-mobile-toast-masuk { from { opacity: 0; transform: translateY(18px) scale(.94); } }
@keyframes n-mobile-toast-pergi { to { opacity: 0; transform: translateY(10px) scale(.97); } }

/* ---------------------------------------------------------------- skeleton - */
.n-app-mobile .skel {
  border-radius: var(--r-lg);
  background: linear-gradient(100deg, var(--n-rail) 40%, var(--n-rail) 50%, var(--n-rail) 60%);
  background-size: 200% 100%;
  animation: n-mobile-skel 1.3s infinite linear;
}
@keyframes n-mobile-skel { to { background-position: -200% 0; } }

/* ------------------------------------------------------------------ login -- */
.n-app-mobile .login-hero {
  min-height: 100dvh; display: flex; flex-direction: column;
  max-width: 480px; margin: 0 auto; padding: 0 24px;
  position: relative; overflow: hidden;
  background:
    radial-gradient(130% 55% at 90% -12%, color-mix(in srgb, var(--n-aksen) 17%, transparent), transparent 62%),
    radial-gradient(90% 40% at -20% 30%, color-mix(in srgb, var(--n-aksen) 6%, transparent), transparent 60%),
    var(--bg);
}
.n-app-mobile .login-atas { padding-top: 11dvh; flex: 1; position: relative; z-index: 1; }
.n-app-mobile .login-atas > * { animation: n-mobile-naik .6s var(--pegas) both; }
.n-app-mobile .login-atas > *:nth-child(2) { animation-delay: .07s; }
.n-app-mobile .login-atas > *:nth-child(3) { animation-delay: .14s; }
.n-app-mobile .login-atas > *:nth-child(4) { animation-delay: .21s; }
/* logo AMANAH bertumpuk dari paket (versi latar gelap); tulisannya baru
   terbaca di atas tinggi 64 px, jadi dipasang lebar 168 px (tinggi 118 px). */
.n-app-mobile .login-logo {
  width: 168px; height: auto; display: block;
  margin: 0 0 20px -12px;
}
.n-app-mobile .login-hero h1 {
  font-family: var(--disp); font-weight: 700; font-size: 31px;
  letter-spacing: -.03em; line-height: 1.12; margin: 0 0 10px;
}
.n-app-mobile .login-hero h1 em { font-style: normal; color: var(--green-ink); }
.n-app-mobile .login-hero .tag { color: var(--ink-2); font-size: 14.5px; margin: 0 0 24px; max-width: 320px; }
.n-app-mobile .login-fitur { display: flex; flex-direction: column; gap: 11px; margin-bottom: 26px; }
.n-app-mobile .login-fitur .f {
  display: flex; align-items: center; gap: 12px;
  font-size: 13.5px; color: var(--ink-2); font-weight: 500;
}
.n-app-mobile .login-fitur .f-ic {
  width: 34px; height: 34px; border-radius: var(--n-r-md); flex: 0 0 auto;
  background: var(--card); border: 1px solid var(--line);
  display: grid; place-items: center; color: var(--green-ink);
  box-shadow: var(--shadow);
}
.n-app-mobile .login-fitur .f-ic svg { width: 16px; height: 16px; }
.n-app-mobile .login-form .field input { background: var(--card); }
.n-app-mobile .login-bawah { padding: 18px 0 calc(28px + var(--safe-b)); position: relative; z-index: 1; }
.n-app-mobile .login-bawah > * { animation: n-mobile-naik .6s var(--pegas) both; animation-delay: .28s; }
.n-app-mobile .lupa-sandi {
  display: block; margin: 12px auto 0; background: none; border: none; padding: 4px;
  font-size: 13px; color: var(--green-ink); text-decoration: underline; cursor: pointer;
}
.n-app-mobile .login-hint {
  margin-top: 16px; font-size: 12px; color: var(--ink-3);
  text-align: center; line-height: 1.7;
}
.n-app-mobile .login-hint b { color: var(--ink-2); }
.n-app-mobile .login-hint summary {
  cursor: pointer; font-weight: 600; color: var(--ink-2); list-style: none;
}
.n-app-mobile .login-hint summary::-webkit-details-marker { display: none; }

/* -------------------------------------------------------------- lain-lain -- */
.n-app-mobile .mono { font-family: var(--mono); }
.n-app-mobile .detail-kv { display: grid; grid-template-columns: auto 1fr; gap: 7px 16px; font-size: 13.5px; margin: 0; }
.n-app-mobile .detail-kv dt { color: var(--ink-2); }
.n-app-mobile .detail-kv dd { margin: 0; font-weight: 600; text-align: right; font-variant-numeric: tabular-nums; }

.n-app-mobile .notif-item { display: flex; gap: 12px; padding: 13px 2px; border-bottom: 1px solid var(--line); }
.n-app-mobile .notif-item:last-child { border: none; }
.n-app-mobile .notif-item .titik {
  width: 8px; height: 8px; border-radius: var(--n-r-lg); background: var(--green-2);
  margin-top: 7px; flex: 0 0 auto; transition: background .3s ease;
}
.n-app-mobile .notif-item.dibaca .titik { background: var(--line-2); }
.n-app-mobile .notif-judul { font-weight: 600; font-size: 13.5px; }
.n-app-mobile .notif-isi { font-size: 12.5px; color: var(--ink-2); margin-top: 1px; }
.n-app-mobile .notif-waktu { font-size: 12px; color: var(--ink-3); margin-top: 3px; }

.n-app-mobile .profil-kartu { display: flex; align-items: center; gap: 14px; }
.n-app-mobile .profil-ava {
  width: 60px; height: 60px; border-radius: var(--n-r-lg);
  background: linear-gradient(145deg, var(--dark), var(--dark-2));
  color: var(--n-aksen-di-kontras); display: grid; place-items: center;
  font-family: var(--disp); font-weight: 700; font-size: 22px;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.08), 0 8px 20px -6px rgba(10,10,10,.4);
}
.n-app-mobile .profil-nama { font-family: var(--disp); font-weight: 700; font-size: 18px; letter-spacing: -.01em; }
.n-app-mobile .profil-peran { font-size: 13px; color: var(--ink-2); }

.n-app-mobile .menu-item {
  display: flex; align-items: center; gap: 13px; width: 100%;
  background: none; border: none; padding: 14px 2px;
  border-bottom: 1px solid var(--line); font-size: 14.5px; font-weight: 600;
  color: var(--ink); text-align: left;
}
.n-app-mobile .menu-item:last-child { border: none; }
.n-app-mobile .menu-item .m-ic {
  width: 40px; height: 40px; border-radius: var(--n-r-lg); flex: 0 0 auto;
  background: var(--bg); display: grid; place-items: center; color: var(--ink-2);
}
.n-app-mobile .menu-item .m-ic svg { width: 18px; height: 18px; }
.n-app-mobile .menu-item .panah { margin-left: auto; color: var(--ink-3); display: grid; place-items: center; }
.n-app-mobile .menu-item.bahaya { color: var(--red); }
.n-app-mobile .menu-item.bahaya .m-ic { background: var(--red-bg); color: var(--red); }

.n-app-mobile .kode-taut {
  font-family: var(--disp); font-size: 42px; font-weight: 700;
  letter-spacing: .18em; text-align: center; padding: 18px 0 6px;
  color: var(--green-ink); font-variant-numeric: tabular-nums;
}

.n-app-mobile .segmen {
  display: flex; background: var(--bg-2); border-radius: var(--n-r-lg); padding: 4px; margin-bottom: 14px;
}
.n-app-mobile .segmen button {
  flex: 1; border: none; background: none; border-radius: var(--n-r-md);
  padding: 9px 6px; font-size: 13px; font-weight: 600; color: var(--ink-2);
  transition: all .25s var(--pegas);
}
.n-app-mobile .segmen button.on { background: var(--card); color: var(--ink); box-shadow: var(--shadow); }

.n-app-mobile .alert {
  border-radius: var(--r-sm); padding: 12px 14px; font-size: 13px;
  margin-bottom: 12px; font-weight: 500; line-height: 1.5;
}
.n-app-mobile .alert.info { background: var(--blue-bg); color: var(--blue); }
.n-app-mobile .alert.amber { background: var(--amber-bg); color: var(--amber); }

/* Catatan: aturan "prefers-reduced-motion: reduce" TIDAK diport ke sini
   karena padanannya sudah ada secara global di nusantika.css (berlaku untuk
   seluruh halaman termasuk aplikasi mobile ini). */

/* ------------------------------------------------------- spanduk lisensi -- */
.n-app-mobile .spanduk { display: flex; gap: 10px; align-items: flex-start; margin: 0 0 14px; padding: 12px 14px;
  border-radius: var(--r-md); background: var(--amber-bg); color: var(--amber);
  font-size: 13.5px; line-height: 1.45; }
.n-app-mobile .spanduk svg { width: 18px; height: 18px; flex: none; margin-top: 1px; }

/* ============================================================================
   Lapisan konsol Nusantika AI

   Aplikasi AMANAH memakai bahasa yang sama dengan konsol di halaman depan:
   kartu putih bergaris rambut tanpa bayangan tebal, satu permukaan sorotan
   hitam, tombol hitam, status kecil bersudut 6px. Hijau hanya titik keadaan.

   Satu halaman, dua susunan. Di HP (< 1024px) aplikasi tetap satu kolom
   dengan bilah navigasi bawah. Di laptop (>= 1024px) bilah bawah menjadi
   bilah sisi, beranda menjadi dasbor ubin + panel, dan bottom sheet menjadi
   dialog di tengah layar.
   ========================================================================== */
.n-app-mobile {
  --rambut: var(--n-garis-lembut);
  --garis-kartu: inset 0 0 0 1px var(--n-garis);
}

.n-app-mobile .app { background: var(--bg); }
@media (min-width: 560px) and (max-width: 1023px) {
  .n-app-mobile { background: var(--n-rail); }
}

.n-app-mobile .avatar { background: var(--dark); color: var(--n-putih); border-radius: var(--n-r-md); box-shadow: none; }
.n-app-mobile .icon-btn { border: 0; box-shadow: var(--garis-kartu); border-radius: var(--n-r-md); }

.n-app-mobile .hero { background: var(--dark); border-radius: var(--n-r-lg); box-shadow: none; }
.n-app-mobile .hero::after { background-image: linear-gradient(105deg, rgba(255,255,255,.05) 0 1px, transparent 1px 5px); opacity: 1; }
.n-app-mobile .hero-label { font-size: 12px; font-weight: 500; letter-spacing: 0; text-transform: none; color: var(--n-abu-kontras); }
.n-app-mobile .hero-nilai { font-weight: 600; }
.n-app-mobile .hero-nilai small { color: var(--n-abu-kontras); }
.n-app-mobile .hero-sub, .n-app-mobile .hero-foot { color: var(--n-abu-kontras); }
.n-app-mobile .hero-bar { background: rgba(255,255,255,.12); height: 6px; }
.n-app-mobile .hero-bar i { background: var(--green); box-shadow: none; }
.n-app-mobile .hero-badge { background: rgba(255,255,255,.08); color: var(--n-abu-kontras); border: 0; border-radius: 6px; letter-spacing: 0;
  text-transform: none; font-size: 12px; font-weight: 600; padding: 4px 9px; backdrop-filter: none; }
.n-app-mobile .hero-badge.telat { background: color-mix(in srgb, var(--n-kritis) 20%, transparent); color: var(--n-kritis-teks-gelap); }
.n-app-mobile .hero .btn { background: var(--green); color: var(--n-di-aksen); box-shadow: none; }

.n-app-mobile .quick { border: 0; box-shadow: var(--garis-kartu); border-radius: var(--n-r-lg); }
.n-app-mobile .quick .q-ic { background: var(--bg-2); color: var(--ink); border-radius: var(--n-r-md); }

.n-app-mobile .card { border: 0; box-shadow: var(--garis-kartu); border-radius: var(--n-r-lg); }
.n-app-mobile .sect-head h2 { font: 600 15px var(--sans); letter-spacing: -.005em; }
.n-app-mobile .sect-head .lihat { color: var(--ink); font-weight: 600; }

.n-app-mobile .tugas-ic { border-radius: var(--n-r-md); width: 40px; height: 40px; }
.n-app-mobile .tugas-ic.biru { background: var(--bg-2); color: var(--ink); }

.n-app-mobile .btn { background: var(--dark); color: var(--n-putih); border-radius: var(--n-r-md); box-shadow: 0 6px 16px -10px rgba(10,10,10,.6); }
.n-app-mobile .btn.hijau { background: var(--green); color: var(--n-di-aksen); box-shadow: none; }
.n-app-mobile .btn.garis { background: var(--card); color: var(--ink); border: 0; box-shadow: inset 0 0 0 1px var(--line-2); }
.n-app-mobile .btn.bahaya { background: var(--red-bg); color: var(--red); box-shadow: none; }
.n-app-mobile .btn.blok { border-radius: var(--n-r-lg); }

.n-app-mobile .pil { font-size: 12px; font-weight: 600; letter-spacing: 0; text-transform: none; padding: 3px 8px; border-radius: 6px; }
.n-app-mobile .pil.jalan { background: var(--bg-2); color: var(--ink-2); }

.n-app-mobile .navbar button.on .nv-ic { background: var(--dark); color: var(--n-putih); }

.n-app-mobile .gel.me { background: var(--dark); box-shadow: none; }
.n-app-mobile .gel.me.file, .n-app-mobile .berkas-kartu, .n-app-mobile .file-note { background: var(--bg-2); color: var(--ink); border: 0; }
.n-app-mobile .chat-ava { filter: none; width: 40px; height: 40px; border-radius: var(--n-r-md); }
.n-app-mobile .chat-head { background: var(--bg); }
.n-app-mobile .chip { border: 0; box-shadow: var(--garis-kartu); }
.n-app-mobile .chip svg { color: var(--ink); }
.n-app-mobile .chat-input .kirim { background: var(--dark); color: var(--n-putih); box-shadow: none; }
.n-app-mobile .chat-input .lampir { border: 0; box-shadow: var(--garis-kartu); }
.n-app-mobile .chat-input input[type=text]:focus { border-color: var(--ink); box-shadow: none; }

.n-app-mobile .tirai { background: rgba(10,10,10,.4); }
.n-app-mobile .skel { background: linear-gradient(100deg, var(--n-rail) 40%, var(--n-rail) 50%, var(--n-rail) 60%); background-size: 200% 100%; }
.n-app-mobile .menu-item .m-ic { border-radius: var(--n-r-md); }
.n-app-mobile .profil-ava { background: var(--dark); color: var(--n-putih); box-shadow: none; border-radius: var(--n-r-lg); }
.n-app-mobile .segmen button.on { box-shadow: var(--garis-kartu); }
.n-app-mobile .opsi.on { border-color: var(--ink); background: var(--card); color: var(--ink); box-shadow: none; }
.n-app-mobile .field input:focus, .n-app-mobile .field select:focus, .n-app-mobile .field textarea:focus { border-color: var(--ink); box-shadow: none; }
.n-app-mobile .kode-taut { color: var(--ink); }
.n-app-mobile .alert.info { background: var(--bg-2); color: var(--ink-2); }

.n-app-mobile .login-hero { background: var(--bg); }
.n-app-mobile .login-logo { width: 168px; height: auto; filter: none; border-radius: 0; margin-left: -12px; }
.n-app-mobile .login-fitur .f-ic { border: 0; box-shadow: var(--garis-kartu); color: var(--ink); }
.n-app-mobile .login-judul { display: none; }

/* ------------------------------------------------- komponen konsol -- */
.n-app-mobile .stat { background: var(--card); border-radius: var(--n-r-lg); padding: 16px; box-shadow: var(--garis-kartu);
  display: grid; gap: 6px; align-content: start; min-width: 0; }
.n-app-mobile .stat .kecil { font-size: 12px; color: var(--ink-3); }
.n-app-mobile .stat b { font: 600 26px/1.05 var(--disp); letter-spacing: -.02em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.n-app-mobile .stat .ubah { font-size: 12px; color: var(--ink-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.n-app-mobile .stat.sorot { background: var(--dark); color: var(--n-putih); box-shadow: none; }
.n-app-mobile .stat.sorot .kecil, .n-app-mobile .stat.sorot .ubah { color: var(--n-abu-kontras); }

.n-app-mobile .panel { background: var(--card); border-radius: var(--n-r-lg); box-shadow: var(--garis-kartu); padding: 18px;
  display: grid; gap: 10px; align-content: start; margin-bottom: 16px; min-width: 0; }
.n-app-mobile .panel-kepala { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; }
.n-app-mobile .panel-kepala h5 { margin: 0; font: 600 14.5px var(--sans); }
.n-app-mobile .panel-kepala span { font-size: 12px; color: var(--ink-3); text-align: right; }
.n-app-mobile .grafik { position: relative; }
.n-app-mobile .grafik svg { width: 100%; height: 220px; overflow: visible; display: block; }
.n-app-mobile .tip { position: absolute; pointer-events: none; background: var(--dark); color: var(--n-putih); font-size: 12px; padding: 7px 10px;
  border-radius: 8px; white-space: nowrap; transform: translate(-50%, -115%); opacity: 0; transition: opacity .15s; z-index: 2; }
.n-app-mobile .tip.on { opacity: 1; }
.n-app-mobile .sinyal-item { display: grid; grid-template-columns: auto 1fr auto; gap: 10px; align-items: center; padding: 10px 0;
  border-top: 1px solid var(--rambut); font-size: 13.5px; cursor: pointer; }
.n-app-mobile .panel-kepala + .sinyal-item { border-top: 0; }
.n-app-mobile .sinyal-item .sub { color: var(--ink-3); font-size: 12px; }
.n-app-mobile .kode-sinyal { font: 600 12px/1 var(--mono); background: var(--dark); color: var(--n-putih); padding: 5px 6px; border-radius: 5px; }
.n-app-mobile .status-kecil { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 600; height: 22px;
  padding: 0 8px; border-radius: 6px; background: var(--bg-2); color: var(--ink-2); white-space: nowrap; }
.n-app-mobile .status-kecil::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.n-app-mobile .status-kecil.tinggi { color: var(--n-kritis-teks); background: var(--n-kritis-bg); }
.n-app-mobile .status-kecil.sedang { color: var(--n-waspada-teks); background: var(--n-waspada-bg); }
.n-app-mobile .gate-baris { display: grid; grid-template-columns: 24px 1fr auto; gap: 10px; align-items: center; padding: 10px 0;
  border-top: 1px solid var(--rambut); font-size: 13.5px; }
.n-app-mobile .panel-kepala + .gate-baris { border-top: 0; }
.n-app-mobile .gate-baris .no { font: 500 12px var(--mono); color: var(--ink-3); }
.n-app-mobile .gate-baris .sub { font-size: 12px; color: var(--ink-3); }
.n-app-mobile .gate-baris .kanan { display: grid; justify-items: end; gap: 4px; font-weight: 600; font-variant-numeric: tabular-nums; }
.n-app-mobile .gate-jumlah { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 8px; background: var(--bg);
  border-radius: var(--n-r-md); padding: 12px 14px; }
.n-app-mobile .gate-jumlah span { display: block; font-size: 12px; color: var(--ink-3); }
.n-app-mobile .gate-jumlah b { font: 600 15px var(--disp); }
.n-app-mobile .lihat-semua { font-size: 13px; font-weight: 600; color: var(--ink); text-decoration: none; }

/* bagian khusus desktop - tidak dirender di HP */
.n-app-mobile .sisi, .n-app-mobile .hi-desk, .n-app-mobile .desk-only { display: none; }
.n-app-mobile .beranda-grid, .n-app-mobile .kolom { display: block; }

/* ============================================================== DESKTOP === */
@media (min-width: 1024px) {
  .n-app-mobile { background: var(--bg); }
  .n-app-mobile .app { max-width: none; margin: 0; min-height: 100vh; display: grid; grid-template-columns: 248px minmax(0, 1fr);
    align-items: start; box-shadow: none; }
  .n-app-mobile.sheet-buka .app { transform: none; border-radius: 0; filter: none; overflow: visible; }
  .n-app-mobile .navbar { display: none; }

  .n-app-mobile .sisi { display: flex; flex-direction: column; gap: 2px; grid-column: 1; grid-row: 1; position: sticky; top: 0;
    height: 100vh; padding: 20px 14px 16px; background: var(--n-rail); border-right: 1px solid var(--rambut); overflow-y: auto; }
  .n-app-mobile .sisi-merek { display: flex; align-items: center; gap: 10px; padding: 2px 8px 20px;
    font: 600 17px/1.15 var(--disp); letter-spacing: -.02em; }
  .n-app-mobile .sisi-merek img { width: 30px; height: 30px; border-radius: 8px; }
  .n-app-mobile .sisi-merek small { display: block; font: 500 12px var(--sans); letter-spacing: 0; color: var(--ink-3); margin-top: 2px; }
  .n-app-mobile .sisi-grup { font-size: 12px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-3);
    padding: 16px 10px 6px; }
  .n-app-mobile .sisi-tautan { display: flex; align-items: center; gap: 10px; width: 100%; height: 38px; padding: 0 10px; border: 0;
    border-radius: var(--n-r-md); background: none; font: 500 13.5px var(--sans); color: var(--ink-2); text-align: left;
    text-decoration: none; cursor: pointer; }
  .n-app-mobile .sisi-tautan:active { transform: none; }
  .n-app-mobile .sisi-tautan .bulat { width: 6px; height: 6px; border-radius: 50%; background: currentColor; opacity: .45; flex: none; }
  .n-app-mobile .sisi-tautan:hover { background: var(--bg-2); color: var(--ink); }
  .n-app-mobile .sisi-tautan.on { background: var(--dark); color: var(--n-putih); }
  .n-app-mobile .sisi-tautan.on .bulat { background: var(--green); opacity: 1; }
  .n-app-mobile .sisi-tautan .jumlah { margin-left: auto; font-size: 12px; font-weight: 700; background: var(--n-kritis); color: var(--n-putih);
    border-radius: var(--n-r-lg); padding: 1px 7px; }
  .n-app-mobile .sisi-bawah { margin-top: auto; border-top: 1px solid var(--rambut); padding: 14px 4px 0; display: grid; gap: 8px; }
  .n-app-mobile .sisi-orang { display: flex; gap: 10px; align-items: center; padding: 0 6px 4px; }
  .n-app-mobile .sisi-orang .avatar { width: 36px; height: 36px; font-size: 13px; border-radius: var(--n-r-md); }
  .n-app-mobile .sisi-orang b { display: block; font-size: 13.5px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 160px; }
  .n-app-mobile .sisi-orang small { font-size: 12px; color: var(--ink-3); }

  .n-app-mobile .view { grid-column: 2; grid-row: 1; width: 100%; max-width: 1320px; padding: 28px 36px 56px; }
  .n-app-mobile .view.on > * { animation-duration: .4s; }

  .n-app-mobile .topbar { padding: 0 0 20px; align-items: flex-end; }
  .n-app-mobile .hi-sapa, .n-app-mobile .hi-nama { display: none; }
  .n-app-mobile .hi-desk { display: block; }
  .n-app-mobile .hi-desk h1 { margin: 0; font: 600 28px/1.1 var(--disp); letter-spacing: -.02em; }
  .n-app-mobile .hi-desk p { margin: 4px 0 0; font-size: 13.5px; color: var(--ink-3); }
  .n-app-mobile .avatar, .n-app-mobile .icon-btn { width: 40px; height: 40px; }

  .n-app-mobile .page-title { font-size: 28px; font-weight: 600; margin: 0 0 4px; padding-top: 0 !important; }
  .n-app-mobile .page-sub { color: var(--ink-3); margin-bottom: 20px; }

  .n-app-mobile #b-hero { display: none; }
  .n-app-mobile .desk-only { display: block; }
  .n-app-mobile .stat-grid.desk-only { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin-bottom: 14px; }

  .n-app-mobile .quick-row { margin: 0 0 20px; gap: 8px; flex-wrap: wrap; }
  .n-app-mobile .quick { flex: 0 0 auto; flex-direction: row; height: 40px; padding: 0 14px 0 5px; border-radius: var(--n-r-md); font-size: 13.5px; gap: 8px; }
  .n-app-mobile .quick .q-ic { width: 30px; height: 30px; border-radius: 7px; }
  .n-app-mobile .quick .q-ic svg { width: 16px; height: 16px; }

  .n-app-mobile .beranda-grid { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: 16px; align-items: start; }
  .n-app-mobile .kolom { display: block; min-width: 0; }
  .n-app-mobile .beranda-grid .sect { margin: 0 0 16px; }
  .n-app-mobile .beranda-grid .card { margin-bottom: 10px; }

  .n-app-mobile #t-isi { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; align-items: start; }
  .n-app-mobile #t-isi > .sect-head, .n-app-mobile #t-isi > .kosong, .n-app-mobile #t-isi > .skel { grid-column: 1 / -1; }
  .n-app-mobile #t-isi .card { margin: 0; }
  .n-app-mobile #v-notif > *, .n-app-mobile #v-profil > * { max-width: 780px; }

  .n-app-mobile #v-chat { padding: 24px 36px; }
  .n-app-mobile .chat-wrap { height: calc(100vh - 48px); max-width: 960px; background: var(--card); border-radius: var(--n-r-lg);
    box-shadow: var(--garis-kartu); overflow: hidden; }
  .n-app-mobile .chat-head { background: var(--card); border-bottom: 1px solid var(--rambut); padding: 14px 20px; }
  .n-app-mobile .chat-scroll { padding: 18px 22px; }
  .n-app-mobile .chat-input { background: var(--card); border-top: 1px solid var(--rambut); padding: 12px 16px; }
  .n-app-mobile .chip-row { padding: 10px 22px; }

  .n-app-mobile .sheet { top: 50%; bottom: auto; left: 50%; width: calc(100% - 48px); max-width: 560px; border-radius: var(--n-r-lg);
    padding: 26px 28px; max-height: 86vh; opacity: 0; transform: translate(-50%, -46%) scale(.98);
    transition: transform .35s var(--pegas), opacity .22s ease; box-shadow: 0 30px 80px rgba(10,10,10,.28); }
  .n-app-mobile .sheet.on { transform: translate(-50%, -50%); opacity: 1; }
  .n-app-mobile .sheet-pegangan { display: none; }
  .n-app-mobile .toast-wrap { left: auto; right: 24px; bottom: 24px; transform: none; width: 380px; }

  /* ------------------------------------------------------------ login -- */
  .n-app-mobile .login-hero { max-width: none; padding: 0; display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(440px, .95fr); }
  .n-app-mobile .login-atas { background: var(--dark); color: var(--n-putih); padding: 12vh 7vw 8vh; position: relative; overflow: hidden;
    display: grid; align-content: center; }
  .n-app-mobile .login-atas::before { content: ""; position: absolute; inset: 0;
    background-image: linear-gradient(105deg, rgba(255,255,255,.05) 0 1px, transparent 1px 5px); pointer-events: none; }
  .n-app-mobile .login-hero h1 { font-size: 46px; color: var(--n-putih); max-width: 540px; }
  .n-app-mobile .login-hero h1 em { color: var(--n-aksen-di-kontras); }
  .n-app-mobile .login-hero .tag { color: var(--n-abu-kontras); font-size: 16px; max-width: 470px; }
  .n-app-mobile .login-fitur .f { color: var(--n-abu-kontras); }
  .n-app-mobile .login-fitur .f-ic { background: rgba(255,255,255,.06); box-shadow: inset 0 0 0 1px rgba(255,255,255,.1); color: var(--n-aksen-di-kontras); }
  .n-app-mobile .login-bawah { display: grid; place-items: center; padding: 40px; }
  .n-app-mobile .login-form { width: 100%; max-width: 380px; }
  .n-app-mobile .login-judul { display: grid; gap: 4px; margin-bottom: 22px; }
  .n-app-mobile .login-judul b { font: 600 26px/1.15 var(--disp); letter-spacing: -.02em; }
  .n-app-mobile .login-judul span { color: var(--ink-3); font-size: 14px; }
}

/* ============================================================================
   Khusus admin (web/admin.html): dipindah verbatim dari web/assets/style.css
   (dihapus fisik) dan dari <style> inline admin.html (juga dihapus total),
   migrasi CSS Fase 1, 2026-09-17 - lihat log progres tanggal sama. Kelas
   generik di atas (n-field, n-badge, n-kartu, n-modal, n-tabel, n-subtab,
   dst) TIDAK dipakai di sini karena detail visualnya (radius, padding,
   teknik shadow, mekanisme dot status) berbeda nyata dari yang dipakai
   admin.html, diverifikasi satu per satu sebelum diputuskan. Aturan elemen
   mentah (body, a, input, ::selection) DIBUNGKUS ".n-admin" (kelas baru
   dipasang di <body> admin.html) supaya tidak bocor ke halaman lain yang
   memuat komponen.css yang sama, persis pola ".n-superadmin"/".n-portal" di
   atas. Dua custom property privat (bukan token bersama --n-*, cuma dipakai
   admin.html) menampung dua nilai lokal: --admin-r (radius ubin/kartu 16px,
   beda dari --n-r-lg 20px) dan --admin-rambut (garis rambut 1px inset,
   teknik beda dari token bayangan --n-bayang-kecil).
   ========================================================================== */

.n-admin { --admin-r: 12px; --admin-sidebar-w: var(--n-lebar-rail); --admin-rambut: inset 0 0 0 1px var(--n-garis); }

.n-admin {
  margin: 0;
  background: var(--n-pasir);
  color: var(--n-tinta);
  font-family: var(--n-badan);
  font-size: 14.5px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}
.n-admin a { color: var(--n-hutan); text-decoration: none; font-weight: 600; }
.n-admin a:hover { text-decoration: underline; }
.n-admin input[type=checkbox] { accent-color: var(--n-tinta); }
.n-admin ::selection { background: color-mix(in srgb, var(--n-aksen) 25%, transparent); }

/* ---------------------------------------------------------------- kerangka --- */
.n-shell { display: flex; min-height: 100vh; }

.n-sidebar {
  width: var(--admin-sidebar-w);
  flex: 0 0 var(--admin-sidebar-w);
  background: var(--n-rail);
  border-right: 1px solid var(--n-garis);
  color: var(--n-abu);
  display: flex;
  flex-direction: column;
  position: sticky;
  top: 0;
  height: 100vh;
  overflow-y: auto;
}

.n-brand { padding: 22px 22px 12px; display: flex; align-items: center; gap: 10px; }
.n-brand-logo { width: 28px; height: 28px; flex: 0 0 auto; border-radius: 7px; }
.n-brand-mark {
  font-family: var(--n-tampilan); font-size: 16.5px; font-weight: 600;
  letter-spacing: -.02em; color: var(--n-tinta); display: block; line-height: 1.2;
}
.n-brand-sub { font-size: 12px; color: var(--n-abu); margin-top: 1px; }

.n-sidenav { flex: 1; padding: 0 12px; }
.n-nav-group {
  font-size: 12px; font-weight: 700; letter-spacing: .12em;
  text-transform: uppercase; color: var(--n-abu);
  padding: 16px 10px 6px;
}
.n-sidenav a {
  display: flex; align-items: center; gap: 10px;
  height: 36px; padding: 0 10px; margin-bottom: 2px;
  border-radius: var(--n-r-md);
  color: var(--n-abu);
  font-size: 13.5px; font-weight: 500;
  transition: background .15s ease, color .15s ease;
}
.n-sidenav a svg { display: none; }
.n-sidenav a::before {
  content: ""; width: 6px; height: 6px; border-radius: 50%;
  background: currentColor; opacity: .45; flex: 0 0 auto;
}
.n-sidenav a:hover { background: var(--n-embun); color: var(--n-tinta); text-decoration: none; }
.n-sidenav a.active { background: var(--n-kontras); color: var(--n-putih); }
.n-sidenav a.active::before { background: var(--n-hijau); opacity: 1; }

.n-sidebar-foot { padding: 14px 18px 18px; border-top: 1px solid var(--n-garis); }
.n-userbox-name { font-weight: 600; font-size: 13.5px; color: var(--n-tinta); }
.n-userbox-meta { font-size: 12px; color: var(--n-abu); margin: 1px 0 10px; }
.n-sidebar-foot .ghost { width: 100%; }

.n-main { flex: 1; min-width: 0; }
.n-pagehead {
  padding: 28px 36px 0;
  display: flex; align-items: flex-end; justify-content: space-between; gap: 20px;
}
.n-pagehead h1 {
  font-family: var(--n-tampilan); font-weight: 600; font-size: 26px;
  letter-spacing: -.02em; margin: 0 0 2px;
}
.n-lede { color: var(--n-abu); font-size: 13.5px; margin: 0; max-width: 680px; }

.n-content { padding: 20px 36px 60px; }
.n-content > * { animation: n-seksi-masuk .45s var(--n-pegas) both; }
.n-content > *:nth-child(2) { animation-delay: .04s; }
.n-content > *:nth-child(3) { animation-delay: .08s; }
.n-content > *:nth-child(4) { animation-delay: .12s; }
.n-content > *:nth-child(n+5) { animation-delay: .16s; }
@keyframes n-seksi-masuk {
  from { opacity: 0; transform: translateY(12px); }
  to   { opacity: 1; transform: none; }
}

/* --------------------------------------------------------------- figures -- */
.n-figures {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 12px;
}
.n-figure {
  background: var(--n-kertas);
  border-radius: var(--admin-r);
  box-shadow: var(--admin-rambut);
  padding: 16px;
  display: grid; gap: 4px; align-content: start;
  min-width: 0;
}
.n-figure-label { font-size: 12px; color: var(--n-abu); }
.n-figure-value {
  font-family: var(--n-tampilan); font-weight: 600; font-size: 26px; line-height: 1.1;
  letter-spacing: -.02em; font-variant-numeric: tabular-nums;
}
.n-figure-value.sm { font-size: 18px; }
.n-figure-value.accent { color: var(--n-waspada-teks); }
.n-figure-foot { font-size: 12px; color: var(--n-abu); }
.n-figure.sorot { background: var(--n-kontras); color: var(--n-putih); box-shadow: none; }
.n-figure.sorot .n-figure-label, .n-figure.sorot .n-figure-foot { color: var(--n-abu-kontras); }

/* ----------------------------------------------------------------- block -- */
.n-block {
  background: var(--n-kertas);
  border-radius: var(--admin-r);
  box-shadow: var(--admin-rambut);
  padding: 18px 20px;
  margin-bottom: 14px;
}
.n-block + .n-block, .n-figures + .n-block { margin-top: 14px; }
.n-block-head {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 14px; margin-bottom: 12px;
}
.n-block-head h2 {
  font-family: var(--n-badan); font-size: 14.5px; font-weight: 600;
  letter-spacing: -.005em; margin: 0;
}
.n-count { font-size: 12px; color: var(--n-abu); font-weight: 500; }
.n-block-note { font-size: 13px; color: var(--n-abu); }

/* ----------------------------------------------------------------- tabel -- */
.n-table-wrap { overflow-x: auto; margin: 0 -6px; }
.n-ledger { width: 100%; border-collapse: collapse; font-size: 13.5px; }
.n-ledger th {
  text-align: left; padding: 8px 10px;
  font-size: 12px; font-weight: 600; letter-spacing: .06em;
  text-transform: uppercase; color: var(--n-abu);
  border-bottom: 1px solid var(--n-garis);
  white-space: nowrap;
}
.n-ledger td {
  padding: 11px 10px;
  border-bottom: 1px solid var(--n-garis);
  vertical-align: top;
}
.n-ledger tbody tr { transition: background .15s ease; }
.n-ledger tbody tr:hover { background: var(--n-rail); }
.n-ledger tbody tr:last-child td { border-bottom: none; }
.n-ledger .num { text-align: right; font-variant-numeric: tabular-nums; }
.n-small { font-size: 12px; color: var(--n-abu); }
.n-empty { text-align: center; color: var(--n-abu); padding: 26px 10px; font-size: 13.5px; }

/* ---------------------------------------------------------------- status -- */
.n-status {
  display: inline-flex; align-items: center; gap: 6px;
  height: 22px; padding: 0 8px; border-radius: 6px;
  font-size: 12px; font-weight: 600;
  background: var(--n-embun); color: var(--n-abu); white-space: nowrap;
}
.n-status::before { content: ''; width: 6px; height: 6px; border-radius: var(--n-r-lg); background: currentColor; }
.n-status.is-ok   { background: var(--n-baik-bg); color: var(--n-baik-teks); }
.n-status.is-bad  { background: var(--n-kritis-bg); color: var(--n-kritis-teks); }
.n-status.is-wait { background: var(--n-waspada-bg); color: var(--n-waspada-teks); }
.n-status.is-live { background: var(--n-embun); color: var(--n-tinta); }

/* ---------------------------------------------------------------- tombol -- */
.n-admin button {
  font-family: var(--n-badan);
  border: none;
  border-radius: var(--n-r-md);
  background: var(--n-kontras);
  color: var(--n-putih);
  font-size: 13.5px; font-weight: 600;
  padding: 9px 16px;
  cursor: pointer;
  box-shadow: none;
  transition: transform .18s var(--n-pegas), background .15s ease, box-shadow .15s ease, opacity .15s ease;
}
.n-admin button:hover { background: var(--n-kontras-naik); }
.n-admin button:active { transform: scale(.97); }
.n-admin button:disabled { opacity: .45; cursor: default; }
.n-admin button.ghost {
  background: var(--n-kertas); color: var(--n-tinta);
  box-shadow: inset 0 0 0 1px var(--n-garis);
}
.n-admin button.ghost:hover { background: var(--n-kertas); box-shadow: inset 0 0 0 1px var(--n-tinta); }
.n-admin button.danger, .n-admin button.ghost.danger { color: var(--n-kritis-teks); }
.n-admin button.danger { background: var(--n-kritis-bg); box-shadow: none; }
.n-actions { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }

/* ------------------------------------------------------------------ form -- */
.n-field-admin { margin-bottom: 12px; }
.n-lbl {
  display: block; font-size: 12px; font-weight: 600;
  color: var(--n-abu); margin-bottom: 6px;
}
.n-field-admin input, .n-field-admin select, .n-field-admin textarea, .n-admin input[type=date] {
  width: 100%;
  border: 0;
  box-shadow: inset 0 0 0 1px var(--n-garis);
  border-radius: var(--n-r-md);
  background: var(--n-kertas);
  padding: 9px 12px;
  font-size: 14px;
  font-family: var(--n-badan);
  color: var(--n-tinta);
  outline: none;
  transition: box-shadow .15s ease;
}
.n-field-admin input:focus, .n-field-admin select:focus, .n-field-admin textarea:focus {
  box-shadow: inset 0 0 0 1.5px var(--n-tinta);
}

.n-fold { margin-top: 14px; }
.n-fold summary {
  cursor: pointer; font-size: 13px; font-weight: 600; color: var(--n-tinta);
  list-style: none; display: inline-flex; align-items: center; gap: 8px;
}
.n-fold summary::-webkit-details-marker { display: none; }
.n-fold summary::before {
  content: '+'; display: inline-grid; place-items: center;
  width: 20px; height: 20px; border-radius: 6px;
  background: var(--n-embun); font-weight: 600;
  transition: transform .25s var(--n-pegas);
}
.n-fold[open] summary::before { transform: rotate(45deg); }
.n-fold-body {
  margin-top: 12px; padding: 16px;
  background: var(--n-pasir); border-radius: var(--n-r-md); box-shadow: var(--admin-rambut);
  animation: n-seksi-masuk .35s var(--n-pegas);
}

/* ---------------------------------------------------------------- notice --- */
.n-notice {
  border-radius: var(--n-r-md); padding: 12px 15px;
  font-size: 13.5px; font-weight: 500; line-height: 1.55;
}
.n-notice.ok  { background: var(--n-baik-bg); color: var(--n-baik-teks); }
.n-notice.err { background: var(--n-kritis-bg); color: var(--n-kritis-teks); }

/* --------------------------------------------------------------- finding -- */
.n-finding {
  box-shadow: var(--admin-rambut); border-radius: var(--n-r-md);
  padding: 14px 16px; margin-bottom: 10px; background: var(--n-kertas);
}
.n-finding-head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.n-finding-title { font-weight: 600; font-size: 14px; }
.n-finding-meta { font-size: 12px; color: var(--n-abu); margin-left: auto; }
.n-finding-rows {
  margin-top: 9px; font-size: 12.5px; color: var(--n-abu);
  font-family: var(--n-mono); line-height: 1.8;
}

/* ------------------------------------------------------------- lain-lain -- */
.n-mono-admin { font-family: var(--n-mono); font-size: max(12px, .92em); }
.n-muted { color: var(--n-abu); }
.n-toolbar { display: flex; gap: 12px; align-items: flex-end; flex-wrap: wrap; }
.n-toolbar .n-field-admin { margin: 0; min-width: 260px; }

/* --------------------------------------------------------- layar sempit --- */
@media (max-width: 860px) {
  .n-pagehead, .n-content { padding-left: 18px; padding-right: 18px; }
}

/* ============================================================================
   Khusus admin: komponen tambahan dari <style> inline admin.html (spanduk
   lisensi, kartu kanal/AI, sakelar, matriks RBAC/rute, modal wizard, toast,
   kanvas workflow drag-drop). Sama-sama port verbatim, alasan sama seperti di
   atas.
   ========================================================================== */
.n-spanduk-lisensi { display:flex; align-items:center; gap:10px; margin-top:12px; padding:10px 14px;
  border-radius:var(--n-r-md); font-size:13.5px; line-height:1.45; }
.n-spanduk-lisensi svg { width:17px; height:17px; flex:none; }
.n-spanduk-lisensi span { flex:1; }
.n-spanduk-lisensi a { white-space:nowrap; }
.n-spanduk-lisensi.demo { background:var(--n-embun); color:var(--n-abu); }
.n-spanduk-lisensi.waspada { background:var(--n-waspada-bg); color: var(--n-waspada-teks); }
.n-spanduk-lisensi.serius { background:var(--n-kritis-bg); color:var(--n-kritis-teks); }
.n-tag-lisensi { display:block; margin-top:4px; font-size:12px; color: var(--n-waspada-teks); }
.n-fitur-lisensi { display:grid; grid-template-columns:repeat(auto-fill,minmax(280px,1fr)); gap:10px 18px; }
.n-fitur-lisensi div { display:flex; align-items:center; gap:8px; font-size:13.5px; }
.n-fitur-lisensi svg { width:15px; height:15px; flex:none; }
.n-fitur-lisensi .ada svg { color: var(--n-baik-teks); }
.n-fitur-lisensi .tidak { color:var(--n-abu); }
.n-kartu-admin-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(330px,1fr)); gap:14px; }
.n-kartu-admin {
  border:1px solid var(--n-garis); border-radius:var(--n-r-lg); background:var(--n-kertas);
  padding:18px 20px; display:flex; flex-direction:column; gap:8px;
  box-shadow:var(--n-bayang-kecil);
  transition:transform .25s var(--n-pegas), box-shadow .25s ease, border-color .25s ease;
}
.n-kartu-admin:hover { transform:translateY(-2px); box-shadow:var(--n-bayang); }
.n-kartu-admin.nyala { border-color:color-mix(in srgb, var(--n-aksen-teks) 50%, transparent); box-shadow:0 0 0 3px color-mix(in srgb, var(--n-aksen-teks) 12%, transparent), var(--n-bayang-kecil); }
.n-kartu-admin-head { display:flex; align-items:center; gap:10px; }
.n-kartu-admin-head h3 { margin:0; font-size:15.5px; font-family:var(--n-tampilan); letter-spacing:-.01em; }
.n-kartu-admin-ket { font-size:13px; color:var(--n-abu); line-height:1.55; }
.n-kartu-admin-status { font-size:12px; color:var(--n-abu); }
.n-kartu-admin-aksi { display:flex; gap:8px; margin-top:6px; flex-wrap:wrap; }

.n-saklar { position:relative; width:42px; height:24px; flex:0 0 auto; margin-left:auto; cursor:pointer; }
.n-saklar input { opacity:0; width:0; height:0; }
.n-saklar i { position:absolute; inset:0; border-radius:var(--n-r-lg); background:var(--n-garis);
  transition:background .25s ease; }
.n-saklar i::before { content:''; position:absolute; width:18px; height:18px; border-radius:var(--n-r-lg);
  background: var(--n-kertas); top:3px; left:3px; transition:transform .3s var(--n-pegas);
  box-shadow:0 1px 4px rgba(0,0,0,.28); }
.n-saklar input:checked + i { background:var(--n-hijau); }
.n-saklar input:checked + i::before { transform:translateX(18px); }

.n-form-kanal { display:none; border-top:1px dashed var(--n-garis); margin-top:8px; padding-top:14px; }
.n-form-kanal.buka { display:block; animation:n-seksi-masuk .3s var(--n-pegas); }
.n-form-kanal .n-field-admin { margin-bottom:10px; }

.n-matriks { border-collapse:separate; border-spacing:0; font-size:12.5px; width:100%; }
.n-matriks th, .n-matriks td { border-bottom:1px solid var(--n-garis); padding:8px 9px; text-align:center; }
.n-matriks thead th { position:sticky; top:0; background:var(--n-kertas); z-index:2;
  font-size:12px; font-weight:700; letter-spacing:.06em; text-transform:uppercase;
  color:var(--n-abu); border-bottom:1px solid var(--n-garis); }
.n-matriks td:first-child, .n-matriks th:first-child { text-align:left; min-width:230px; }
.n-matriks td:first-child small { display:block; color:var(--n-abu); font-weight:400; }
.n-matriks tbody tr:hover td { background:rgba(10,10,10,.02); }
.n-matriks input[type=checkbox] { width:15px; height:15px; accent-color:var(--n-hijau); cursor:pointer; }
.n-matriks tr.beda td:first-child { box-shadow:inset 3px 0 0 var(--n-hijau); }

.n-badge-mini { font-size:12px; font-weight:700; letter-spacing:.06em; text-transform:uppercase;
  padding:3px 9px; border-radius:var(--n-r-lg); background:var(--n-embun); color:var(--n-abu); }
.n-badge-mini.ok { background:var(--n-baik-bg); color: var(--n-baik-teks); }

/* Dua tombol keputusan harus muat berdampingan di dalam satu sel tabel. */
.n-admin button.ghost.sinyal-aksi { padding:5px 10px; font-size:12px; margin:2px 4px 2px 0; }
.n-badge-mini.err { background:var(--n-kritis-bg); color:var(--n-kritis-teks); }

.n-baris-form { display:grid; grid-template-columns:repeat(auto-fit,minmax(170px,1fr)); gap:10px; }
.n-kv-edit { display:flex; align-items:center; justify-content:space-between; gap:14px;
  padding:13px 2px; border-bottom:1px solid var(--n-garis); }
.n-kv-edit:last-child { border:none; }
.n-kv-edit .ket { flex:1; }
.n-kv-edit .ket b { font-size:14px; }
.n-kv-edit .ket small { display:block; color:var(--n-abu); margin-top:1px; }
.n-kv-edit input[type=text], .n-kv-edit input[type=number] { border:1.5px solid var(--n-garis);
  border-radius:var(--n-r-md); padding:8px 11px; font-size:13.5px; width:160px; text-align:right;
  font-family:var(--n-mono); background:var(--n-pasir); outline:none;
  transition:border-color .2s ease, box-shadow .2s ease; }
.n-kv-edit input:focus { border-color:var(--n-hijau); box-shadow:0 0 0 3px color-mix(in srgb, var(--n-aksen-teks) 13%, transparent); }
.n-tag-override { font-size:12px; color:var(--n-hutan); font-weight:700; }

.n-modal-tirai { position:fixed; inset:0; background:rgba(10,10,10,.45); z-index:50;
  display:none; align-items:center; justify-content:center; padding:20px;
  backdrop-filter:blur(3px); -webkit-backdrop-filter:blur(3px); }
.n-modal-tirai.buka { display:flex; animation:n-tirai-masuk-admin .25s ease; }
@keyframes n-tirai-masuk-admin { from { opacity:0; } }
.n-modal-admin { background:var(--n-kertas); border-radius:var(--n-r-lg); max-width:520px; width:100%;
  padding:24px 26px; max-height:88vh; overflow-y:auto;
  box-shadow:0 24px 80px rgba(0,0,0,.3);
  animation:n-modal-masuk-admin .4s var(--n-pegas); }
@keyframes n-modal-masuk-admin { from { opacity:0; transform:translateY(18px) scale(.97); } }
.n-modal-admin h3 { margin:0 0 4px; font-family:var(--n-tampilan); font-size:18px; letter-spacing:-.01em; }
.n-modal-admin .sub { color:var(--n-abu); font-size:13.5px; margin:0 0 16px; }

/* toast konsol */
.n-toast-adm { position:fixed; bottom:24px; right:24px; z-index:99;
  background:rgba(10,10,10,.96); color: var(--n-putih);
  border:1px solid rgba(255,255,255,.08); border-radius:var(--n-r-lg);
  padding:13px 17px; font-size:13.5px; font-weight:500; max-width:420px;
  box-shadow:var(--n-bayang); display:flex; gap:10px; align-items:flex-start;
  animation:n-toast-masuk-admin .45s var(--n-pegas); }
.n-toast-adm.pergi { animation:n-toast-pergi-admin .3s ease forwards; }
.n-toast-adm svg { width:17px; height:17px; flex:0 0 auto; margin-top:1px; }
.n-toast-adm.ok svg { color:var(--n-aksen-di-kontras); }
.n-toast-adm.err svg { color: var(--n-kritis-teks-gelap); }
@keyframes n-toast-masuk-admin { from { opacity:0; transform:translateY(16px) scale(.95); } }
@keyframes n-toast-pergi-admin { to { opacity:0; transform:translateY(10px); } }

/* kanvas workflow */
.n-flow-wrap { border:1px solid var(--n-garis); border-radius:var(--n-r-lg); overflow:hidden;
  background:var(--n-kertas); position:relative; box-shadow:var(--n-bayang-kecil); }
.n-flow-bar { display:flex; gap:8px; align-items:center; padding:10px 14px;
  border-bottom:1px solid var(--n-garis); background:var(--n-kertas); flex-wrap:wrap; }
.n-flow-bar .sela { flex:1; }
.n-flow-bar button { padding:7px 13px; font-size:13px; border-radius:var(--n-r-md); }
.n-flow-zoom { font-size:12px; color:var(--n-abu); min-width:44px; text-align:center;
  font-family:var(--n-mono); }
.n-flow-canvas { position:relative; height:600px; overflow:hidden; cursor:grab;
  background-image:radial-gradient(circle, var(--n-garis) 1.1px, transparent 1.1px);
  background-size:22px 22px; background-color:var(--n-rail); }
.n-flow-canvas.geser { cursor:grabbing; }
.n-flow-world { position:absolute; top:0; left:0; transform-origin:0 0; width:0; height:0; }
.n-flow-svg { position:absolute; top:0; left:0; overflow:visible; pointer-events:none; }
.n-flow-svg path { fill:none; stroke:var(--n-abu); stroke-width:2; }
.n-flow-svg path.mati { stroke-dasharray:6 5; stroke:var(--n-garis); }
.n-edge-label { position:absolute; transform:translate(-50%,-50%); background:var(--n-kertas);
  border:1px solid var(--n-garis); border-radius:var(--n-r-lg); font-size:12px; font-weight:600;
  color:var(--n-abu); padding:2px 9px; white-space:nowrap; pointer-events:none;
  box-shadow:0 2px 8px rgba(10,10,10,.06); }

.n-fnode { position:absolute; width:200px; background:var(--n-kertas); border:1.5px solid var(--n-garis);
  border-radius:var(--n-r-lg); box-shadow:0 3px 14px rgba(10,10,10,.09); cursor:grab; user-select:none;
  transition:box-shadow .2s ease, border-color .2s ease; }
.n-fnode:hover { box-shadow:0 6px 22px rgba(10,10,10,.14); }
.n-fnode:active { cursor:grabbing; }
.n-fnode.pilih { border-color:var(--n-hijau); box-shadow:0 0 0 3px color-mix(in srgb, var(--n-aksen-teks) 20%, transparent), 0 6px 22px rgba(10,10,10,.12); }
.n-fnode.mati { opacity:.55; border-style:dashed; }
.n-fnode-head { display:flex; gap:10px; padding:11px 13px; align-items:center; }
.n-fnode-ic { width:30px; height:30px; border-radius:var(--n-r-md); display:grid; place-items:center;
  flex:0 0 auto; }
.n-fnode-ic svg { width:15px; height:15px; }
.n-fnode-ic.hijau { background:var(--n-embun); color:var(--n-hutan); }
.n-fnode-ic.biru  { background:var(--n-embun); color:var(--n-abu); }
.n-fnode-ic.amber { background:var(--n-waspada-bg); color: var(--n-waspada-teks); }
.n-fnode-ic.abu   { background:var(--n-embun); color:var(--n-abu); }
.n-fnode-title { font-weight:650; font-size:13px; line-height:1.25; letter-spacing:-.005em; }
.n-fnode-sub { font-size:12px; color:var(--n-abu); margin-top:1px; }
.n-fnode-body { border-top:1px solid var(--n-garis); padding:9px 13px 11px; font-size:12px;
  color:var(--n-abu); line-height:1.5; }
.n-fnode-body .rantai { display:flex; flex-wrap:wrap; gap:4px; }
.n-fnode-body .rantai span { background:var(--n-pasir); border:1px solid var(--n-garis);
  border-radius:var(--n-r-lg); padding:2px 9px; font-size:12px; font-weight:600; }
.n-fnode .port { position:absolute; width:11px; height:11px; border-radius:var(--n-r-lg);
  background:var(--n-kertas); border:2.5px solid var(--n-abu); top:50%; transition:border-color .2s ease; }
.n-fnode .port.masuk { left:-7px; transform:translateY(-50%); }
.n-fnode .port.keluar { right:-7px; transform:translateY(-50%); }
.n-fnode.pilih .port { border-color:var(--n-hijau); }
.n-fnode-toggle { position:absolute; top:-9px; right:10px; font-size:12px; font-weight:700;
  letter-spacing:.05em; text-transform:uppercase; padding:2px 9px; border-radius:var(--n-r-lg);
  background:var(--n-hijau); color: var(--n-di-aksen); box-shadow:0 2px 8px color-mix(in srgb, var(--n-aksen-teks) 40%, transparent); }
.n-fnode.mati .n-fnode-toggle { background:var(--n-abu); box-shadow:none; }

.n-flow-prop { position:absolute; top:0; right:0; bottom:0; width:330px; background:var(--n-kertas);
  border-left:1px solid var(--n-garis); padding:20px 20px 24px; overflow-y:auto; z-index:6;
  box-shadow:-14px 0 40px rgba(10,10,10,.08); animation:n-prop-masuk-admin .35s var(--n-pegas); }
@keyframes n-prop-masuk-admin { from { transform:translateX(30px); opacity:0; } }
.n-flow-prop h3 { margin:0 0 2px; font-family:var(--n-tampilan); font-size:16px; letter-spacing:-.01em; }
.n-flow-prop .sub { font-size:12.5px; color:var(--n-abu); margin:0 0 14px; }
.n-flow-prop .tutup { position:absolute; top:14px; right:14px; border:none; background:var(--n-embun);
  width:30px; height:30px; border-radius:var(--n-r-md); display:grid; place-items:center;
  color:var(--n-abu); box-shadow:none; }
.n-flow-prop .tutup svg { width:14px; height:14px; }
.n-prop-rantai { display:flex; flex-direction:column; gap:6px; margin-bottom:10px; }
.n-prop-rantai .langkah { display:flex; align-items:center; gap:8px; border:1px solid var(--n-garis);
  border-radius:var(--n-r-md); padding:8px 11px; background:var(--n-pasir); font-size:13px; }
.n-prop-rantai .langkah b { font-family:var(--n-mono); font-size:12px; color:var(--n-abu); }
.n-prop-rantai .langkah .nm { flex:1; font-weight:600; }
.n-prop-rantai .langkah button { border:none; background:none; color:var(--n-abu); padding:2px 4px;
  box-shadow:none; display:grid; place-items:center; }
.n-prop-rantai .langkah button svg { width:13px; height:13px; }
.n-prop-rantai .langkah button:hover { color:var(--n-tinta); }
.n-flow-dirty { background:var(--n-waspada-bg); color: var(--n-waspada-teks); font-size:12px; font-weight:600;
  border-radius:var(--n-r-lg); padding:5px 13px; animation:n-seksi-masuk .3s var(--n-pegas); }

code.n-blok-kode { display:block; background:var(--n-pasir); border:1px solid var(--n-garis);
  border-radius:var(--n-r-md); padding:9px 12px; font-family:var(--n-mono); font-size:12px;
  word-break:break-all; margin-top:6px; }

/* Fase 5: sub-tab di dalam satu kelompok sidebar (Aturan/Kanal & AI/Keamanan) */
.n-subtab-admin { display:flex; gap:6px; flex-wrap:wrap; margin:0; padding:16px 36px 0; }
@media (max-width: 860px) { .n-subtab-admin { padding:14px 18px 0; } }
.n-subtab-admin button.on { background: var(--n-kontras); color: var(--n-putih); box-shadow:none; }

/* ============================================================================
   Logo (Fase 9, bagian 2.4): lockup horizontal dari paket SVG. Tinggi 20 px
   (minimum 16 px), lebar mengikuti rasio berkas. Teks "Nusantika AI" sudah
   ada di dalam lockup, jadi tidak ditulis ulang di HTML.
   ========================================================================== */
.merek-logo, .merek .merek-logo, .n-merek .merek-logo { display: block; height: 20px; width: auto; margin: 0; border-radius: 0; }
.merek picture, .n-merek picture { display: block; line-height: 0; }

/* ============================================================================
   Rail kiri gaya vantis.sh (Fase 9): satu tampilan untuk admin.html,
   superadmin.html, dan portal.html. Markup tiap halaman tetap memakai kelas
   lamanya (JS masih mencarinya); kelas .n-rail-* di bawah menyeragamkan
   rupanya. Di bawah 720 px rail menjadi bar atas + menu hamburger
   (komponen.js memasang tombolnya).
   ========================================================================== */
.n-rail {
  width: var(--n-lebar-rail); flex: 0 0 var(--n-lebar-rail);
  background: var(--n-rail); border-right: 1px solid var(--n-garis); color: var(--n-tinta);
  position: sticky; top: 0; height: 100vh; overflow-y: auto;
  display: flex; flex-direction: column; padding: 20px 14px 16px; gap: 0;
}
.n-rail .n-rail-kepala { display: flex; align-items: center; gap: 10px; padding: 4px 8px 18px; min-height: 44px; }
.n-rail .n-rail-kepala .n-merek { display: grid; gap: 8px; text-decoration: none; }
.n-rail .n-rail-kepala .merek-logo { height: 20px; }
.n-rail .n-rail-sub { display: block; font: 500 var(--n-t-12)/1 var(--n-tampilan); letter-spacing: .08em;
  text-transform: uppercase; color: var(--n-abu); margin: 0; }
.n-rail .n-brand-logo { width: 32px; height: 32px; border-radius: var(--n-r-md); }
.n-rail .n-brand-mark { font: 500 var(--n-t-17)/1.15 var(--n-tampilan); letter-spacing: -.01em; color: var(--n-tinta); }
.n-rail .n-brand-sub { font: 500 var(--n-t-12) var(--n-tampilan); color: var(--n-abu); text-transform: uppercase; letter-spacing: .08em; margin-top: 3px; }
.n-rail-burger {
  display: none; margin-left: auto; width: 40px; height: 40px; flex: none; cursor: pointer;
  align-items: center; justify-content: center; color: var(--n-tinta);
  background: var(--n-kertas); border: 1px solid var(--n-garis); border-radius: var(--n-r-md);
}
.n-rail .n-rail-menu { display: flex; flex-direction: column; gap: 2px; flex: 1; padding: 0; }
.n-rail .n-rail-grup, .n-rail .n-grup, .n-rail .n-nav-group {
  display: block; font: 600 var(--n-t-12)/1 var(--n-tampilan); letter-spacing: .08em; text-transform: uppercase;
  color: var(--n-abu); padding: 18px 10px 8px;
}
.n-rail .n-rail-menu a {
  display: flex; align-items: center; gap: 10px; height: 36px; padding: 0 10px; margin: 0;
  border: 1px solid transparent; border-radius: var(--n-r-sm);
  font: 500 var(--n-t-15)/1 var(--n-tampilan); color: var(--n-abu); text-decoration: none; cursor: pointer;
  transition: background var(--n-durasi), color var(--n-durasi), border-color var(--n-durasi);
}
.n-rail .n-rail-menu a::before {
  content: ""; width: 8px; height: 8px; border-radius: 2px; flex: none; opacity: 1;
  background: transparent; box-shadow: inset 0 0 0 1px var(--n-garis);
}
.n-rail .n-rail-menu a:hover { background: var(--n-kertas); color: var(--n-tinta); text-decoration: none; }
.n-rail .n-rail-menu a.on, .n-rail .n-rail-menu a.active, .n-rail .n-rail-menu a[aria-current="page"] {
  background: var(--n-kertas); border-color: var(--n-garis); color: var(--n-tinta);
}
/* indikator menu aktif: satu balok lime, seperti balok di logo */
.n-rail .n-rail-menu a.on::before, .n-rail .n-rail-menu a.active::before, .n-rail .n-rail-menu a[aria-current="page"]::before {
  background: var(--n-aksen); box-shadow: none;
}
.n-rail .n-rail-kaki {
  border-top: 1px solid var(--n-garis); margin-top: 12px; padding: 14px 8px 0;
  display: grid; gap: 4px; font-size: var(--n-t-13); color: var(--n-abu);
}
.n-rail .n-rail-kaki b { color: var(--n-tinta); font-weight: 600; }

/* portal: rangka rail + isi */
.n-portal-rangka { display: grid; grid-template-columns: var(--n-lebar-rail) minmax(0, 1fr); min-height: 100vh; align-items: start; }
.n-portal-rangka .n-rail .n-merek { color: var(--n-tinta); }

@media (max-width: 720px) {
  .n-rail {
    width: 100%; flex: none; height: auto; max-height: none; position: sticky; top: 0; z-index: 60;
    padding: 10px 16px; border-right: 0; border-bottom: 1px solid var(--n-garis); overflow: visible;
  }
  .n-rail .n-rail-kepala { padding: 0; min-height: 44px; }
  .n-rail-burger { display: inline-flex; }
  .n-rail .n-rail-menu, .n-rail .n-rail-kaki { display: none; }
  .n-rail.n-rail-buka { max-height: 100vh; overflow-y: auto; }
  .n-rail.n-rail-buka .n-rail-menu { display: flex; padding-top: 6px; }
  .n-rail.n-rail-buka .n-rail-kaki { display: grid; padding-bottom: 8px; }
  .n-shell { flex-direction: column; }
  .n-aplikasi, .n-portal-rangka { grid-template-columns: minmax(0, 1fr); }
}

/* ============================================================================
   Permukaan gelap tetap (--n-kontras): token teks dipetakan ulang di dalamnya
   supaya isi otomatis terang, di mode terang maupun gelap. Dengan begitu
   judul dan teks sekunder di pita gelap tidak perlu aturan warna sendiri.
   ========================================================================== */
.n-permukaan-gelap, .gelap, .kartu-live, .kartu-modul.utama, .sel-agen, .paket.unggul, .kaki-situs,
.stat.sorot, .n-band, .n-gerbang-kiri, .n-masuk-kiri, .n-stat.n-sorot, .n-kartu-portal.gelap, .n-figure.sorot {
  --n-hutan: var(--n-putih);
  --n-tinta: var(--n-putih);
  --n-abu: var(--n-abu-kontras);
  --n-aksen-teks: var(--n-aksen-di-kontras);
  --n-garis: var(--n-garis-kontras);
  --n-garis-lembut: rgba(255, 255, 255, .08);
  --n-rail: rgba(255, 255, 255, .06);
  --n-embun: color-mix(in srgb, var(--n-aksen) 14%, transparent);
  color: var(--n-putih);
}
.n-rail .n-rail-burger { background: var(--n-kertas); color: var(--n-tinta); border: 1px solid var(--n-garis);
  padding: 0; min-width: 40px; height: 40px; box-shadow: none; border-radius: var(--n-r-md); }
.n-rail .n-rail-burger svg { width: 20px; height: 20px; display: block; }

/* ============================================================================
   Fase 10: beranda karyawan menampilkan sampai 3 kartu UM aktif, plus baris
   kuota ("2 dari 3 uang muka aktif") dengan jalan ke Reimburse saat penuh.
   ========================================================================== */
.n-app-mobile .hero-tumpuk { display: grid; gap: 10px; }
.n-app-mobile .hero.ringkas { padding: 16px 18px 14px; }
.n-app-mobile .hero.ringkas .hero-nilai { font-size: 26px; }
.n-app-mobile .hero-kuota { display: flex; align-items: center; justify-content: space-between; gap: 10px;
  margin-top: 10px; font-size: 13px; color: var(--ink-2); }
.n-app-mobile .tautan-asal { background: none; border: 0; padding: 0; font: 600 13px var(--mono);
  color: var(--green-ink); text-decoration: underline; cursor: pointer; }
@media (min-width: 1024px) {
  .n-app-mobile .hero-tumpuk.banyak { grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
}

/* ============================================================================
   Logo mark di permukaan gelap (Fase 9): modul.js merender dua varian, di
   sini dipilih. Permukaan gelap tetap memakai -mark-terang (tinta #EDEFEA);
   bidang lime di dalamnya (tab aktif) kembali ke mark biasa.
   ========================================================================== */
.logo-trg, .logo-tnt { display: none !important; }
:is(.gelap, .kartu-live, .kartu-modul.utama, .sel-agen, .paket.unggul, .n-band, .n-permukaan-gelap) .logo-std { display: none !important; }
:is(.gelap, .kartu-live, .kartu-modul.utama, .sel-agen, .paket.unggul, .n-band, .n-permukaan-gelap) .logo-trg { display: block !important; }
/* tab aktif berlatar tinta di konteks terang: pakai versi terang */
:is(.tab-modul, .alur-tab) button.on .logo-std { display: none !important; }
:is(.tab-modul, .alur-tab) button.on .logo-trg { display: block !important; }
/* tab aktif berlatar lime di seksi gelap: tinta tetap, juga di mode gelap */
.gelap .tab-modul button.on :is(.logo-std, .logo-trg) { display: none !important; }
.gelap .tab-modul button.on .logo-tnt { display: block !important; }