:root{
  --blue-deep:#1d3d87;
  --blue:#2456b3;
  --blue-bright:#3f7fd6;
  --sky-soft:#eef5fd;
  --ink:#152744;
  --mute:#5f7290;
  --line:#dbe6f4;
  --bg:#f4f7fc;
  --danger:#c0392b;
  --ok:#1e8e5a;
  --radius:8px;
}
*{margin:0;padding:0;box-sizing:border-box;}
body{font-family:'Work Sans',sans-serif;background:var(--bg);color:var(--ink);-webkit-font-smoothing:antialiased;}
h1,h2,h3,.logo-word{font-family:'Oswald',sans-serif;letter-spacing:-.01em;}
a{color:inherit;}
button{font-family:inherit;}
input{font-family:inherit;}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;}

/* ===== Login screen ===== */
.login-wrap{display:none;flex-direction:column;min-height:100vh;align-items:center;justify-content:center;background:linear-gradient(160deg,#102456,#1d3d87 55%,#2456b3);padding:24px;}
.login-wrap.show{display:flex;}

.boot-loading{display:none;min-height:100vh;align-items:center;justify-content:center;background:linear-gradient(160deg,#102456,#1d3d87 55%,#2456b3);}
.boot-loading.show{display:flex;}
.boot-loading .logo-icon{width:48px;height:48px;animation:bootPulse 1.1s ease-in-out infinite;}
@keyframes bootPulse{0%,100%{opacity:.45;transform:scale(.94);}50%{opacity:1;transform:scale(1.04);}}
.login-card{background:#fff;border-radius:14px;padding:40px 36px;max-width:380px;width:100%;box-shadow:0 30px 80px rgba(0,0,0,.35);
  animation:loginCardSettle .5s cubic-bezier(.16,1,.3,1) both;
}
@keyframes loginCardSettle{
  from{opacity:0;transform:translateY(14px);}
  to{opacity:1;transform:translateY(0);}
}
.login-logo{display:flex;align-items:center;gap:11px;margin-bottom:32px;position:relative;}
.login-logo::after{
  content:'';position:absolute;left:0;bottom:-14px;height:2px;width:0;max-width:100%;
  background:linear-gradient(90deg, var(--blue-deep), transparent);
  animation:loginRouteLine .6s ease-out .5s both;
}
@keyframes loginRouteLine{
  from{width:0;}
  to{width:min(140px, 100%);}
}
.login-logo .logo-icon{width:40px;height:40px;}
.login-logo .logo-word{font-weight:700;letter-spacing:.01em;transform:skewX(-7deg);color:var(--blue-deep);line-height:.95;}
.login-logo .logo-word span{display:block;font-size:1rem;}
.field{margin-bottom:16px;}
.field label{display:block;font-size:.85rem;color:var(--ink);margin-bottom:7px;font-weight:600;}
.field input{width:100%;padding:13px 14px;border:1.5px solid var(--line);border-radius:var(--radius);font-size:1rem;background:var(--bg);color:var(--ink);transition:border-color .2s;}
.field input:focus{outline:none;border-color:var(--blue);background:#fff;}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:13px 22px;border-radius:var(--radius);border:none;font-size:.95rem;font-weight:600;cursor:pointer;transition:transform .15s, box-shadow .2s, background .2s;}
.btn:active{transform:scale(.97);}
.btn-primary{background:var(--blue);color:#fff;width:100%;}
.btn-primary:hover{background:var(--blue-deep);}
.btn-primary:disabled{opacity:.6;cursor:default;}
.login-error{background:#fdeceb;color:var(--danger);font-size:.88rem;padding:12px 14px;border-radius:var(--radius);margin-bottom:16px;display:none;line-height:1.5;}

/* ===== Akses cepat PIN (Gunex Fleet) ===== */
.pin-quick-link{
  display:flex;align-items:center;justify-content:center;gap:7px;
  width:100%;margin-top:18px;padding:10px 0;background:none;border:none;
  color:var(--mute);font-size:.83rem;font-weight:600;cursor:pointer;
  transition:color .2s;
}
.pin-quick-link svg{width:15px;height:15px;flex-shrink:0;}
.pin-quick-link:hover{color:var(--blue);}

/* ===== Kartu akses cepat di bawah box login ===== */
.quick-cards{
  display:grid;grid-template-columns:repeat(2,1fr);gap:12px;
  width:100%;max-width:380px;margin-top:18px;
}
.qcard{
  display:flex;flex-direction:column;align-items:flex-start;gap:11px;
  background:#fff;border:1px solid var(--line);border-radius:14px;
  padding:16px 15px;text-align:left;text-decoration:none;cursor:pointer;
  box-shadow:0 12px 34px rgba(0,0,0,.16);
  transition:transform .18s, box-shadow .2s, border-color .2s;
}
.qcard:hover{transform:translateY(-4px);box-shadow:0 18px 40px rgba(0,0,0,.24);border-color:var(--blue-bright);}
.qcard:active{transform:translateY(-1px);}
.qcard:focus-visible{outline:2px solid var(--blue-bright);outline-offset:2px;}
.qcard-ic{width:42px;height:42px;border-radius:11px;display:flex;align-items:center;justify-content:center;flex-shrink:0;}
.qcard-ic svg{width:22px;height:22px;}
.qcard-txt{display:flex;flex-direction:column;gap:2px;min-width:0;}
.qcard-title{font-family:'Oswald',sans-serif;font-weight:600;font-size:1rem;color:var(--blue-deep);line-height:1.1;}
.qcard-sub{font-size:.72rem;color:var(--mute);font-weight:600;letter-spacing:.02em;}
.qcard-fleet .qcard-ic{background:#eafff3;color:#1e8e5a;}
.qcard-pay .qcard-ic{background:#e3f0ff;color:#0a84ff;}
.qcard-po .qcard-ic{background:#fff3e6;color:#c97f00;}
.qcard-ig .qcard-ic{background:#f0e9ff;color:#7c3aed;}
.qcard-gaji .qcard-ic{background:#fef3c7;color:#b45309;}
.qcard-tabungan .qcard-ic{background:#d1fae5;color:#0f766e;}
.qcard-invoice .qcard-ic{background:#e0e7ff;color:#4338ca;}
.qcard-notes .qcard-ic{background:#eef2f7;color:#475569;}
.qcard-inventory .qcard-ic{background:#fff1e6;color:#c2410c;}
@media (max-width:360px){ .quick-cards{grid-template-columns:1fr;} }
.pin-card{display:none;}
.pin-card.show{display:block;}
.pin-title{font-size:1.1rem;font-weight:700;color:var(--blue-deep);margin-bottom:4px;text-align:center;}
.pin-sub{font-size:.83rem;color:var(--mute);text-align:center;margin-bottom:22px;line-height:1.5;}
.pin-input-row{display:flex;gap:9px;justify-content:center;margin-bottom:22px;}
.pin-digit{
  width:44px;height:54px;text-align:center;font-size:1.5rem;font-weight:700;
  border:1.5px solid var(--line);border-radius:var(--radius);background:var(--bg);
  color:var(--ink);transition:border-color .2s,background .2s;
  -webkit-appearance:none;appearance:none;
}
.pin-digit:focus{outline:none;border-color:var(--blue);background:#fff;}

/* Notice di portal saat sesi terbatas PIN klik 'kembali' dari Gunex Fleet */
.fleet-only-notice{
  display:flex;gap:14px;align-items:flex-start;max-width:620px;margin:0 auto 32px;
  background:#fff8e6;border:1px solid #f3dca0;border-radius:12px;padding:16px 18px;
  text-align:left;
}
.fleet-only-notice svg{width:22px;height:22px;flex-shrink:0;color:#a9790a;margin-top:1px;}
.fleet-only-notice-title{font-weight:700;color:#8a6404;font-size:.92rem;margin-bottom:4px;}
.fleet-only-notice-desc{font-size:.85rem;color:#7a5c1f;line-height:1.55;}

/* ===== Portal menu shell ===== */
.portal-shell{display:none;min-height:100vh;flex-direction:column;}
.portal-shell.active{display:flex;}

.portal-topbar{background:var(--blue-deep);color:#fff;padding:14px 28px;display:flex;align-items:center;justify-content:space-between;
  padding-top:calc(14px + env(safe-area-inset-top));
  padding-left:calc(28px + env(safe-area-inset-left));
  padding-right:calc(28px + env(safe-area-inset-right));
}
body{padding-bottom:env(safe-area-inset-bottom);}
.portal-brand{display:flex;align-items:center;gap:12px;}
.portal-brand .logo-icon{width:34px;height:34px;}
.portal-brand .logo-word{font-weight:700;font-size:.95rem;color:#fff;transform:skewX(-7deg);line-height:1.05;}
.portal-brand .logo-word span{display:block;}
.btn-top{background:rgba(255,255,255,.12);color:#fff;border:1px solid rgba(255,255,255,.25);padding:9px 18px;font-size:.85rem;font-weight:600;border-radius:7px;cursor:pointer;transition:background .15s;}
.btn-top:hover{background:rgba(255,255,255,.22);}

.portal-main{flex:1;padding:54px 28px;display:flex;flex-direction:column;align-items:center;
  animation:pageEnter .4s ease-out both;
}
@keyframes pageEnter{
  from{opacity:0;transform:translateY(10px);}
  to{opacity:1;transform:translateY(0);}
}
.portal-heading{text-align:center;margin-bottom:44px;max-width:560px;}
.portal-heading h1{font-size:2rem;color:var(--blue-deep);font-weight:700;margin-bottom:10px;letter-spacing:-.015em;}
.portal-heading p{font-size:.95rem;color:var(--mute);line-height:1.6;}

.menu-grid{display:grid;gap:24px;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));max-width:1000px;width:100%;}
.menu-card{
  background:#fff;border:1.5px solid var(--line);border-radius:16px;padding:30px 26px;
  text-decoration:none;color:var(--ink);display:flex;flex-direction:column;gap:14px;
  transition:transform .2s, box-shadow .2s, border-color .2s;position:relative;overflow:hidden;
}
.menu-card:hover{transform:translateY(-5px);box-shadow:0 18px 40px rgba(29,61,135,.16);border-color:var(--blue-bright);}
.menu-card .icon-wrap{width:54px;height:54px;border-radius:12px;display:flex;align-items:center;justify-content:center;}
.menu-card .icon-wrap svg{width:28px;height:28px;}
.menu-card h2{font-size:1.28rem;font-weight:700;color:var(--blue-deep);}
.menu-card p{font-size:.86rem;color:var(--mute);line-height:1.55;flex:1;}
.menu-card .go{font-size:.82rem;font-weight:700;color:var(--blue);display:flex;align-items:center;gap:6px;}
.menu-card .go svg{width:15px;height:15px;transition:transform .2s;}
.menu-card:hover .go svg{transform:translateX(3px);}

/* Garis warna di tepi atas kartu. Aturan POSISI dipasang di sini supaya
   BERLAKU UNTUK SEMUA kartu — sebelumnya posisi hanya ada di tiga kartu
   (fleet/company/po) sehingga kartu lain punya warna tapi garisnya tak muncul.
   Warnanya berasal dari style inline tiap kartu atau aturan per-kartu di bawah. */
.menu-card .accent{position:absolute;top:0;left:0;right:0;height:4px;background:var(--blue);}

.menu-card.card-company .icon-wrap{background:var(--sky-soft);color:var(--blue);}
.menu-card.card-fleet .icon-wrap{background:#eafff3;color:#1e8e5a;}
.menu-card.card-fleet .accent{background:#1e8e5a;}
.menu-card.card-company .accent{background:var(--blue);}
.menu-card.card-po .icon-wrap{background:#fff3e6;color:#c97f00;}
.menu-card.card-po .accent{background:#c97f00;}

.menu-card .badge{position:absolute;top:14px;right:14px;font-size:.65rem;font-weight:700;letter-spacing:.04em;padding:3px 9px;border-radius:20px;background:var(--sky-soft);color:var(--blue);}

.portal-footer{padding:20px 28px;text-align:center;font-size:.78rem;color:var(--mute);}

/* ---- Atur urutan menu portal (drag & drop) ----
   Kartu menu bisa diseret untuk diatur urutannya. Urutan disimpan di
   localStorage per-browser (bukan server) karena ini murni preferensi tata
   letak masing-masing pengguna perangkat, bukan data perusahaan. */
.menu-arrange-bar{display:flex;align-items:center;gap:10px;flex-wrap:wrap;max-width:1000px;width:100%;margin:0 0 14px;}
.arrange-btn,.arrange-reset{
  display:inline-flex;align-items:center;gap:7px;padding:8px 14px;border-radius:999px;
  border:1.5px solid var(--line);background:#fff;color:var(--mute);
  font:inherit;font-size:.8rem;font-weight:600;cursor:pointer;
}
.arrange-btn:hover,.arrange-reset:hover{border-color:var(--blue);color:var(--blue);}
.arrange-btn svg{width:15px;height:15px;}
.arrange-btn.active{background:var(--blue);border-color:var(--blue);color:#fff;}
.arrange-hint{font-size:.76rem;color:var(--mute);font-style:italic;}

/* ---- Banner Dashboard (pintu masuk ringkasan) ---- */
.dash-banner{
  display:flex;align-items:center;gap:16px;max-width:1000px;width:100%;margin:0 0 18px;
  padding:16px 20px;border-radius:16px;text-decoration:none;
  background:linear-gradient(120deg,var(--blue-deep),var(--blue) 60%,var(--blue-bright));
  color:#fff;box-shadow:0 12px 30px rgba(29,61,135,.22);
  transition:transform .15s,box-shadow .15s;
}
.dash-banner:hover{transform:translateY(-2px);box-shadow:0 18px 40px rgba(29,61,135,.3);}
.dash-banner-ic{width:46px;height:46px;min-width:46px;border-radius:12px;background:rgba(255,255,255,.16);display:flex;align-items:center;justify-content:center;}
.dash-banner-ic svg{width:24px;height:24px;}
.dash-banner-title{font-family:'Oswald',sans-serif;font-size:1.15rem;font-weight:600;}
.dash-banner-sub{font-size:.8rem;opacity:.85;margin-top:2px;}
.dash-banner-arrow{width:22px;height:22px;margin-left:auto;opacity:.9;flex-shrink:0;}
@media (max-width:540px){
  .dash-banner-sub{display:none;}
  .dash-banner{padding:14px 16px;}
}

/* ---- Tablet & perangkat sentuh (mis. iPad portrait 768px) ----
   Aturan ponsel (<=720px) tidak berlaku di sini, padahal layarnya tetap
   disentuh jari — jadi target sentuh tetap dilegakan ke 44px. */
@media (max-width:1024px), (hover:none) and (pointer:coarse){
  .arrange-btn,.arrange-reset{min-height:44px;padding:10px 16px;}
  .bk-btn{min-height:44px;}
  .dash-banner{padding:16px 18px;}
}

/* ---- Tombol aksi di topbar (ikon Setting + Backup, lalu Keluar) ---- */
.topbar-actions{display:flex;align-items:center;gap:8px;flex-shrink:0;}
/* Tinggi dikunci sama dengan .btn-top supaya sejajar rapi dengan tombol Keluar. */
.btn-top,.btn-top-icon{height:36px;display:inline-flex;align-items:center;justify-content:center;box-sizing:border-box;flex-shrink:0;}
/* Tombol ikon: persegi, tanpa teks — maksudnya dijelaskan lewat title/aria-label. */
.btn-top-icon{width:36px;padding:0;background:rgba(255,255,255,.12);}
.btn-top-icon svg{width:17px;height:17px;flex-shrink:0;}
.btn-top-icon:hover{background:rgba(255,255,255,.24);}
.btn-top-icon.active{background:rgba(255,255,255,.3);}
@media (max-width:540px){
  .portal-topbar{padding:12px 14px;gap:10px;
    padding-top:calc(12px + env(safe-area-inset-top));
    padding-left:calc(14px + env(safe-area-inset-left));
    padding-right:calc(14px + env(safe-area-inset-right));
  }
  .portal-brand{min-width:0;overflow:hidden;}
  /* Bertambahnya tombol (Pengaturan, Kustomisasi Menu, Backup, Keluar) membuat
     baris ini melebihi lebar layar HP. Dirampingkan & boleh menyusut agar
     halaman tidak bisa digeser ke samping. */
  .topbar-actions{gap:5px;min-width:0;flex-shrink:1;}
  .btn-top-icon{width:32px;height:32px;}
  .btn-top-icon svg{width:15px;height:15px;}
  .btn-top{height:32px;padding:0 10px;font-size:.78rem;}
}
@media (max-width:380px){
  .topbar-actions{gap:4px;}
  .btn-top-icon{width:30px;height:30px;}
  .btn-top{padding:0 8px;font-size:.74rem;}
}
@media (max-width:360px){
  .portal-brand .logo-word{display:none;}     /* layar sangat sempit: sisakan ikon truk */
  .btn-top{padding:0 12px;font-size:.8rem;}
  .topbar-actions{gap:5px;}
}
@media (max-width:1024px), (hover:none) and (pointer:coarse){
  .btn-top,.btn-top-icon{height:44px;}        /* target sentuh di ponsel & tablet */
  .btn-top-icon{width:44px;}
  .btn-top-icon svg{width:19px;height:19px;}
}

/* ---- Zona berbahaya (wipe data) ---- */
.danger-zone{margin-top:18px;padding:15px 16px;border:1.5px solid #f3cfc9;border-radius:12px;background:#fffafa;}
.danger-zone-head{display:flex;align-items:center;gap:8px;font-weight:700;color:var(--danger);font-size:.86rem;margin-bottom:6px;}
.danger-zone-head svg{width:17px;height:17px;}
.danger-zone-desc{font-size:.78rem;color:var(--mute);line-height:1.55;margin:0 0 12px;}
.bk-wipe{background:var(--danger);border-color:var(--danger);color:#fff;}
.bk-wipe:hover{background:#a5311f;border-color:#a5311f;color:#fff;}

/* ---- Modal konfirmasi (kata sandi + captcha) ---- */
.confirm-overlay{position:fixed;inset:0;z-index:99998;display:flex;align-items:center;justify-content:center;
  background:rgba(8,15,32,.55);-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px);padding:20px;}
.confirm-box{background:#fff;max-width:400px;width:100%;border-radius:16px;padding:24px 22px;
  box-shadow:0 24px 60px rgba(8,15,32,.35);max-height:90vh;overflow-y:auto;}
.confirm-ic{width:48px;height:48px;margin:0 auto 14px;border-radius:50%;background:#fdecea;color:var(--danger);
  display:flex;align-items:center;justify-content:center;}
.confirm-ic svg{width:24px;height:24px;}
.confirm-ic.warn{background:#fff4e5;color:#c97f00;}
.confirm-title{font-size:1.05rem;font-weight:700;color:var(--ink);text-align:center;margin-bottom:6px;}
.confirm-desc{font-size:.84rem;color:var(--mute);line-height:1.55;text-align:center;margin-bottom:16px;}
.confirm-field{margin-bottom:12px;}
.confirm-field label{display:block;font-size:.76rem;font-weight:700;color:var(--mute);margin-bottom:5px;}
.confirm-field input{width:100%;font:inherit;font-size:16px;padding:11px 13px;border:1.5px solid var(--line);
  border-radius:10px;background:#fff;color:var(--ink);height:46px;box-sizing:border-box;}
.confirm-field input:focus{outline:none;border-color:var(--blue);box-shadow:0 0 0 3px rgba(29,61,135,.12);}
.captcha-box{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:8px;
  background:linear-gradient(105deg,#eef2f8,#e3ebf7);border:1.5px dashed var(--line);border-radius:10px;padding:11px 13px;}
.captcha-box span{font-family:'Courier New',monospace;font-size:1.25rem;font-weight:700;letter-spacing:.32em;
  color:var(--blue-deep);user-select:none;-webkit-user-select:none;}
.captcha-refresh{width:34px;height:34px;min-width:34px;border-radius:8px;border:1.5px solid var(--line);
  background:#fff;color:var(--mute);cursor:pointer;display:flex;align-items:center;justify-content:center;}
.captcha-refresh svg{width:15px;height:15px;}
.confirm-err{font-size:.8rem;color:var(--danger);font-weight:600;margin-bottom:10px;text-align:center;}
.confirm-actions{display:flex;gap:10px;}
.confirm-actions .bk-btn{flex:1;justify-content:center;}

/* ---- Panel Pengaturan Akun Login ---- */
.setting-panel{
  max-width:1000px;width:100%;margin:0 0 18px;padding:16px 18px;
  border:1.5px solid var(--line);border-radius:14px;background:#fff;
}
.setting-head{display:flex;align-items:center;gap:8px;font-weight:700;color:var(--blue-deep);font-size:.95rem;margin-bottom:5px;}
.setting-head svg{width:18px;height:18px;}
.setting-desc{font-size:.78rem;color:var(--mute);line-height:1.55;margin:0 0 14px;}
.setting-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:14px;}
.setting-card{border:1.5px solid var(--line);border-radius:12px;padding:14px;background:#fbfdff;}
.setting-card-title{font-weight:700;color:var(--ink);font-size:.86rem;margin-bottom:12px;}
.setting-field{margin-bottom:11px;}
.setting-field label{display:block;font-size:.74rem;font-weight:700;color:var(--mute);margin-bottom:5px;}
.setting-field input{
  width:100%;font:inherit;font-size:16px;padding:10px 12px;border:1.5px solid var(--line);
  border-radius:10px;background:#fff;color:var(--ink);height:44px;box-sizing:border-box;
}
.setting-field input:focus{outline:none;border-color:var(--blue);box-shadow:0 0 0 3px rgba(29,61,135,.12);}
.setting-card .bk-btn{width:100%;justify-content:center;}
.setting-msg{font-size:.8rem;line-height:1.5;margin-top:10px;min-height:1px;}
.setting-msg.ok{color:var(--ok);font-weight:600;}
.setting-msg.err{color:var(--danger);font-weight:600;}
@media (max-width:540px){
  .setting-grid{grid-template-columns:1fr;}
  .setting-panel{padding:15px 13px;}
}

/* ---- Panel Backup & Restore ---- */
.backup-panel{
  max-width:1000px;width:100%;margin:0 0 18px;padding:16px 18px;
  border:1.5px solid var(--line);border-radius:14px;background:#fff;
}
.backup-row{display:flex;flex-wrap:wrap;gap:10px;margin-bottom:12px;}
.bk-btn{
  display:inline-flex;align-items:center;gap:8px;padding:10px 16px;border-radius:10px;
  border:1.5px solid var(--line);background:#fff;color:var(--ink);
  font:inherit;font-size:.84rem;font-weight:600;cursor:pointer;min-height:44px;
}
.bk-btn svg{width:16px;height:16px;}
.bk-btn:hover{border-color:var(--blue);color:var(--blue);}
.bk-primary{background:var(--blue);border-color:var(--blue);color:#fff;}
.bk-primary:hover{background:var(--blue-deep);border-color:var(--blue-deep);color:#fff;}
.bk-danger{color:var(--danger);border-color:#f0c9c4;}
.bk-danger:hover{background:#fdecea;border-color:var(--danger);color:var(--danger);}
.backup-status{font-size:.82rem;color:var(--ink);font-weight:600;margin-bottom:6px;}
.backup-status .muted{color:var(--mute);font-weight:400;}
.backup-note{font-size:.76rem;color:var(--mute);line-height:1.5;margin:0;}

@media (max-width:540px){
  .backup-row .bk-btn{flex:1 1 100%;justify-content:center;}
}

/* Mode atur: kartu bergoyang halus + kursor pindah, tautan dinonaktifkan */
.menu-grid.arranging .menu-card{cursor:grab;animation:cardWiggle 1.1s ease-in-out infinite;}
.menu-grid.arranging .menu-card:hover{transform:none;box-shadow:0 18px 40px rgba(29,61,135,.16);}
.menu-grid.arranging .menu-card .go{opacity:.45;}
@keyframes cardWiggle{
  0%,100%{transform:rotate(-.5deg);}
  50%{transform:rotate(.5deg);}
}
/* Kartu yang sedang diseret mengikuti jari/kursor */
.menu-card.dragging{
  animation:none;cursor:grabbing;z-index:20;position:relative;
  box-shadow:0 22px 48px rgba(29,61,135,.28);opacity:.96;
  transform:scale(1.03);transition:none;
}
/* Celah tujuan saat kartu digeser ke posisi baru */

@media (max-width:720px){
  .menu-arrange-bar{gap:8px;}
  .arrange-btn,.arrange-reset{padding:10px 14px;font-size:.8rem;min-height:44px;}
  .arrange-hint{flex-basis:100%;}
}

/* PIN Akses Cepat terpusat (panel Pengaturan) */
.setting-card-wide{ grid-column:1 / -1; }
.pin-central-badge{ font-size:.62rem; font-weight:700; text-transform:uppercase; letter-spacing:.03em; background:#e0e7ff; color:#4338ca; padding:1px 7px; border-radius:20px; vertical-align:middle; }
.pin-add-row{ display:grid; grid-template-columns:1fr 1fr auto; gap:10px; align-items:end; }
.pin-add-row .bk-btn{ height:42px; white-space:nowrap; }
@media (max-width:560px){ .pin-add-row{ grid-template-columns:1fr; } .pin-add-row .bk-btn{ width:100%; } }
.pin-list-head{ margin-top:14px; font-weight:700; font-size:.86rem; color:var(--ink,#0f172a); display:flex; align-items:center; gap:8px; }
.pin-count{ font-size:.72rem; font-weight:700; background:#e0e7ff; color:#4338ca; padding:1px 8px; border-radius:20px; }
.pin-list{ margin-top:8px; display:flex; flex-direction:column; gap:6px; }
.pin-empty{ color:var(--mute); font-size:.86rem; padding:10px 2px; }
.pin-item{ display:flex; align-items:center; justify-content:space-between; gap:10px; padding:10px 12px; border:1px solid #e2e8f0; border-radius:10px; background:#f8fafc; }
.pin-item b{ font-size:.92rem; }
.pin-item .pin-date{ display:block; font-size:.74rem; color:var(--mute); margin-top:1px; }
.pin-del{ width:32px; height:32px; flex:0 0 auto; border:1px solid #fecaca; background:#fff; color:var(--danger); border-radius:8px; cursor:pointer; display:inline-flex; align-items:center; justify-content:center; }
.pin-del:hover{ background:#fef2f2; }
.pin-del svg{ width:15px; height:15px; }

/* ============================================================
   PERBAIKAN INPUT TANGGAL / BULAN — khususnya iOS Safari.
   Masalah bawaan: <input type="date|month"> di iOS punya lebar & tinggi
   intrinsik sendiri sehingga kotaknya MELUBER keluar kolom, teksnya
   ter-align tengah, dan tingginya beda dari input lain. CSS di bawah
   menyamakannya dengan input teks biasa.
   ============================================================ */
input[type="date"], input[type="month"], input[type="time"], input[type="datetime-local"]{
  -webkit-appearance:none; appearance:none;
  display:block;
  width:100%; max-width:100%; min-width:0;
  box-sizing:border-box;
  font-family:inherit; line-height:1.25;
  text-align:left;
}
/* Teks nilai rata KIRI (bawaan iOS: tengah) & tanpa margin tersembunyi */
input[type="date"]::-webkit-date-and-time-value,
input[type="month"]::-webkit-date-and-time-value,
input[type="time"]::-webkit-date-and-time-value{
  text-align:left; margin:0; min-height:1.25em;
}
input[type="date"]::-webkit-datetime-edit,
input[type="month"]::-webkit-datetime-edit{ padding:0; }
/* Ikon kalender didorong ke kanan, tidak menggeser teks */
input[type="date"]::-webkit-calendar-picker-indicator,
input[type="month"]::-webkit-calendar-picker-indicator{ margin:0 0 0 auto; opacity:.55; }
/* Perangkat sentuh (iOS/Android): 16px mencegah layar auto-zoom saat diketuk,
   dan tinggi minimum 44px agar nyaman disentuh & sejajar input lain. */
@media (hover:none) and (pointer:coarse){
  input[type="date"], input[type="month"], input[type="time"], input[type="datetime-local"]{
    font-size:16px; min-height:44px;
  }
}

/* Wadah kartu akses cepat yang dirender dinamis — mewarisi tata letak grid
   .quick-cards agar tampilannya sama seperti sebelumnya. */
.qcard-slot{ display:contents; }

/* ---- Kustomisasi Akses Cepat ---- */
.qa-list{ display:flex; flex-direction:column; gap:10px; margin-bottom:16px; }
.qa-empty{ font-size:.86rem; color:var(--mute); padding:14px; text-align:center; }
.qa-item{
  display:flex; align-items:center; gap:14px; flex-wrap:wrap;
  padding:13px 15px; border:1px solid var(--line,#e2e8f0); border-radius:12px; background:#fff;
}
.qa-item.mati{ opacity:.55; background:#f8fafc; }
.qa-main{ flex:1 1 200px; min-width:0; }
.qa-nama{ font-weight:700; font-size:.95rem; color:var(--ink); }
.qa-sub{ font-size:.76rem; color:var(--mute); margin-top:2px; }
.qa-sw{ display:inline-flex; align-items:center; gap:7px; font-size:.82rem; font-weight:600; color:var(--mute); cursor:pointer; white-space:nowrap; }
.qa-sw input{ width:18px; height:18px; accent-color:#1d3d87; cursor:pointer; }
.qa-sw input:disabled{ cursor:default; }
.qa-actions{ display:flex; align-items:center; gap:14px; flex-wrap:wrap; }
@media (max-width:640px){
  .qa-item{ gap:10px; padding:12px; }
  .qa-main{ flex:1 1 100%; }
  .qa-sw{ flex:1 1 calc(50% - 5px); }
}
.qa-na{ font-size:.74rem; color:#cbd5e1; font-style:italic; white-space:nowrap; }


/* ============================================================
   DROPDOWN (select) DI PERANGKAT SENTUH
   - font 16px mencegah iOS auto-zoom saat dropdown disentuh
   - tinggi minimal 44px = ukuran ketuk nyaman (standar Apple/Google)
   - appearance:none + panah sendiri supaya tampil seragam di semua HP
   ============================================================ */
select{ max-width:100%; box-sizing:border-box; }
@media (hover:none) and (pointer:coarse){
  select{ font-size:16px !important; min-height:44px; }
}

/* Hormati preferensi "reduce motion" pengguna (mis. gangguan vestibular) —
   animasi hias (kartu login, garis rute, denyut logo saat memuat) langsung
   ditampilkan di posisi akhir tanpa gerakan, transisi lain tetap berfungsi
   normal karena itu bukan animasi otomatis (hanya respons ke aksi user). */
@media (prefers-reduced-motion:reduce){
  *{ animation-duration:0.01ms !important; animation-iteration-count:1 !important; }
  .login-logo::after{ width:min(140px, 100%); }
}

/* Notifikasi toast (dashboard) */
.gnx-toast{
  position:fixed; left:50%; bottom:24px; transform:translateX(-50%) translateY(20px);
  background:#0f172a; color:#fff; padding:11px 18px; border-radius:11px; font-size:.88rem; font-weight:500;
  opacity:0; pointer-events:none; transition:opacity .2s, transform .2s; z-index:9999; max-width:90vw;
  white-space:pre-line; text-align:center; line-height:1.5;
}
.gnx-toast.show{ opacity:1; transform:translateX(-50%) translateY(0); }
.gnx-toast.error{ background:var(--danger); }

/* Modal konfirmasi / info umum (dashboard) — terpisah dari .confirm-* yang
   dipakai khusus alur hapus-semua-data (kata sandi + captcha). */
.gnx-overlay{ position:fixed; inset:0; background:rgba(15,23,42,.55); display:flex; align-items:center; justify-content:center; padding:20px; z-index:9998; }
.gnx-dialog-box{ background:#fff; border-radius:16px; padding:28px 26px; max-width:400px; width:100%; text-align:center; box-shadow:0 30px 70px rgba(0,0,0,.35); white-space:pre-line; }
.gnx-dialog-ic{ width:52px; height:52px; margin:0 auto 14px; border-radius:50%; display:flex; align-items:center; justify-content:center; }
.gnx-dialog-ic svg{ width:25px; height:25px; }
.gnx-dialog-ic.warn{ background:#fdeceb; color:var(--danger); }
.gnx-dialog-ic.info{ background:var(--sky-soft); color:var(--blue-deep); }
.gnx-dialog-title{ font-family:'Oswald',sans-serif; font-weight:600; font-size:1.15rem; color:var(--ink); margin-bottom:8px; }
.gnx-dialog-desc{ font-size:.88rem; color:var(--mute); line-height:1.55; margin-bottom:20px; text-align:left; }
.gnx-dialog-actions{ display:flex; gap:10px; }
.gnx-dialog-actions button{ flex:1; display:inline-flex; align-items:center; justify-content:center; padding:12px 16px; border-radius:8px; border:none; font-family:inherit; font-size:.92rem; font-weight:600; cursor:pointer; }
.gnx-dialog-cancel{ background:#fff; border:1px solid var(--line); color:var(--ink); }
.gnx-dialog-danger{ background:var(--danger); color:#fff; }
.gnx-dialog-ok{ background:var(--blue); color:#fff; }