/* app.css - diekstrak dari <style> inline index.html (Fase 4 utang teknis). Isi TIDAK diubah. Cache-bust: samakan ?v= di <link> index.html dgn ASSET_V. */
:root {
  /* Palet dasar InOne Estatika "Verdant Ledger" (ink hutan + emerald, ganti dari
     coklat espresso + emas lama) -- var non-brand (--white/--text/--red/dst)
     didefinisikan di sini; --bg/--gold/--sb-* final di-override oleh blok :root kedua di bawah */
  --bg:        #F3F5F1;
  --bg2:       #EAEEE7;
  --bg3:       #DEE6DC;
  --white:     #FFFFFF;
  --border:    #DCE3DA;
  --border2:   #BFCCBC;
  --gold:      #2F9E6E;
  --gold2:     #3FB47D;
  --gold3:     #1B6E4C;
  --gold-bg:   #E7F3EC;
  --text:      #14211C;
  --text2:     #4B5750;
  --text3:     #8A9690;
  --red:       #A8392B;
  --red-bg:    #FCEFEC;
  --orange:    #A8632B;
  --orange-bg: #FCF1E7;
  --green:     #28694A;
  --green-bg:  #EAF4ED;
  --blue:      #2A4F7C;
  --blue-bg:   #EBF0F6;
  --teal:      #246B5C;
  --teal-bg:   #EAF4F1;
  --purple:    #5B3FA6;
  --purple-bg: #F0EBF9;
  /* --r/--r-lg sengaja 0 (2026-09-13, permintaan user: kartu jadi kotak,
     tanpa sudut melengkung) -- --r-sm TETAP dibulatkan krn dipakai tombol/
     input/pill, bukan "kartu". Nilai final tetap dari blok :root kedua di
     bawah (lihat catatan di atas), disamakan di sini biar konsisten. */
  --r:         0;
  --r-sm:      7px;
  --r-lg:      0;
  --sidebar-w: 248px;
  --shadow:    0 1px 3px rgba(0,20,15,0.06), 0 6px 24px rgba(0,20,15,0.05);
  --shadow-md: 0 4px 12px rgba(0,20,15,0.08), 0 16px 48px rgba(0,20,15,0.08);
  /* Token sidebar (dulu di-set 2x oleh 2 blok CSS berbeda yang saling override — sekarang 1 sumber) */
  --sb-bg:          #FEFEFA;
  --sb-border:      #E4E8DE;
  --sb-text:        #5D695F;
  --sb-text-dim:    #A2ABA0;
  --sb-text-strong: #16241F;
  --sb-hover-bg:    #EEECC9;
  --sb-accent:      #2F9E6E;
  --sb-accent2:     #1B6E4C;
}

/* ── RESET ── */
*{box-sizing:border-box;margin:0;padding:0;}
html{overflow-x:hidden;max-width:100vw;}
@media (prefers-reduced-motion:no-preference){ html{scroll-behavior:smooth;} }
body{font-family:'Montserrat',sans-serif;background:var(--bg);color:var(--text);font-size:13px;line-height:1.5;overflow-x:hidden;max-width:100vw;}
a{text-decoration:none;}
button,input,select,textarea{font-family:inherit;}

/* ── LOGIN SCREEN ── */
#login-screen {
  position:fixed;inset:0;overflow-y:auto;
  background:var(--bg);
  z-index:9999;
}
.login-hero {
  min-height:100vh;
  background:linear-gradient(135deg,rgba(28,24,18,.55),rgba(28,24,18,.38)),url('/bg-hero.jpg?v=20260901z') center/cover no-repeat;
  display:flex;align-items:center;justify-content:center;position:relative;
}
/* Konten marketing (perkenalan/modul/harga) HANYA tampil di web biasa --
   TWA (app terpasang di HP) langsung ke kartu login apa adanya, karena user-nya
   sudah pasti calon/pengguna existing, bukan pengunjung yang perlu diperkenalkan. */
#login-screen.twa-mode{ overflow-y:hidden; }
#login-screen.twa-mode .landing-marketing{ display:none!important; }
.landing-marketing{ max-width:1180px;margin:0 auto;padding:0 24px; }

/* ── "SATU LAYAR PENUH" PER PILIHAN NAVBAR ──
   Tiap bagian yg jadi tujuan klik navbar (Platform/Solusi/Cocok Untuk/Kontak)
   dibungkus .landing-screen: tinggi minimal = tinggi viewport dikurangi tinggi
   navbar sticky (~55px), konten di-tengah vertikal -- supaya begitu navbar
   diklik & discroll ke sana, yg kelihatan cuma bagian itu sendiri, penuh
   1 layar, tanpa potongan bagian lain ikut nongol. `scroll-margin-top` bikin
   anchor scroll berhenti pas di bawah navbar (bukan ketutup navbar). Di layar
   sempit/pendek (HP/tablet potret) target "muat 1 layar" jadi tidak realistis
   kalau tak mau teks mengecil sampai tak terbaca -- jadi DIRELAKSASI ke alur
   normal (boleh scroll dalam bagian itu) lewat media query di bawah; ini
   trade-off yang sama dipakai situs "1 layar per bagian" pada umumnya. */
.landing-screen{
  min-height:calc(100vh - 55px);scroll-margin-top:55px;
  display:flex;flex-direction:column;justify-content:center;
  padding:56px 0;
  position:relative;overflow:hidden;
}
/* Foto latar per bagian -- Unsplash lisensi gratis (cek manual satu-satu via
   filter License:Free, BUKAN Unsplash+ berbayar), diproses lokal (resize max
   1600px + kompres) sebelum disimpan sbg aset situs sendiri -- bukan hotlink
   ke Unsplash. Kredit: Platform=Jw. (unsplash photo OFDrwleTtdE), Solusi=Aalo
   Lens (QVVHV24DA_o), Cocok Untuk=Victor (0NJ9urGXrIg), Kontak=JIRAN FAMILY
   (gK9t2kYr-g8).
   Fix "tidak elegan": foto tajam apa adanya (walau sudah diberi overlay 90%)
   masih terasa seperti detail sungguhan yg mengintip -- kesannya berisik,
   bukan mewah. Sekarang foto dipisah ke pseudo-element ::before TERSENDIRI
   yg diberi blur+desaturate berat (jadi cuma sapuan cahaya/warna kabur, detail
   bangunan/furnitur sama sekali tak lagi terbaca) + di-scale 1.15 & inset
   negatif supaya tepi blur tak pernah kelihatan terpotong tegas di pinggir
   section (overflow:hidden di .landing-screen membungkusnya rapi). Overlay
   warna (::after) awalnya 88% tapi itu ternyata menutup HAMPIR SEMUA sapuan
   warna foto (efeknya jadi nyaris tak kelihatan bedanya dgn background polos)
   -- diturunkan ke 60% supaya sapuan warna lembut dari foto tetap terasa. */
.landing-screen::before{
  content:'';position:absolute;inset:-30px;z-index:0;
  background-image:var(--bg-photo);background-size:cover;background-position:center;
  filter:blur(22px) saturate(55%) brightness(1.08);
  transform:scale(1.15);
}
.landing-screen::after{
  content:'';position:absolute;inset:0;z-index:0;
  background:rgba(243,245,241,.6);
}
.landing-screen-inner,.landing-screen-split{ position:relative;z-index:1; }
#landing-highlights{ --bg-photo:url('/bg-platform.jpg?v=20260906k'); }
#landing-modules{ --bg-photo:url('/bg-solusi.jpg?v=20260906k'); }
#landing-audience{ --bg-photo:url('/bg-audience.jpg?v=20260906k'); }
#landing-pricing{ --bg-photo:url('/bg-pricing.jpg?v=20260906k'); }
.landing-screen-inner{ max-width:980px;margin:0 auto;width:100%; }
.landing-screen-split{ display:grid;grid-template-columns:1.15fr .85fr;gap:52px;align-items:center;max-width:1080px;margin:0 auto;width:100%; }
.landing-screen-art{ display:flex;align-items:center;justify-content:center; }
.landing-screen-art svg{ width:100%;max-width:300px;height:auto; }
.landing-screen-art img{ width:100%;max-width:300px;height:auto;filter:drop-shadow(0 14px 28px rgba(14,31,27,.25)); }
/* Badge "Segera Hadir di Google Play" -- bukan logo/aset resmi Google Play
   (belum rilis, belum boleh pakai badge resmi mereka), cuma pill bergaya
   serupa supaya tetap terasa seperti tombol store. */
.landing-playstore-badge{ display:inline-flex;align-items:center;gap:12px;background:#0E1F1B;color:#fff;border-radius:12px;padding:11px 20px;margin:18px 0 12px; }
.lps-badge-icon{ font-size:22px;color:#2F9E6E; }
.lps-badge-top{ display:block;font-size:9.5px;letter-spacing:.06em;color:#B7CEC3;font-weight:600; }
.lps-badge-bottom{ display:block;font-size:17px;font-weight:700;line-height:1.25; }
.landing-playstore-note{ font-size:12.5px;color:var(--text3,#8A9690); }
/* Susun ulang jadi 1 kolom di layar sempit -- ini soal LEBAR, independen dari
   soal tinggi di bawah (jangan digabung jadi 1 media query, supaya desktop
   pendek-tapi-lebar tidak ikut ke-stack tanpa perlu & jadi lebih tinggi dari
   yang seharusnya). */
@media (max-width:899px){
  .landing-screen-split{ grid-template-columns:1fr;gap:28px; }
  .landing-screen-art{ order:-1; }
  .landing-screen-art svg{ max-width:180px; }
  .landing-screen-art img{ max-width:200px; }
}
/* Relaksasi HANYA utk layar benar-benar pendek (HP/tablet potret landscape) --
   ambang jauh di bawah tinggi viewport laptop biasa (~650-900px) supaya
   desktop normal tetap dapat 1 layar penuh yg dituju. */
@media (max-height:560px){
  .landing-screen{ min-height:auto;padding:40px 0; }
}

.landing-screen h2{ font-size:26px;font-weight:800;color:var(--gold3);margin:0 0 8px;text-align:center; }
.landing-screen .landing-eyebrow{ display:block;font-size:11px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--gold);text-align:center;margin-bottom:10px; }
.landing-screen .landing-lead{ font-size:13.5px;color:var(--text2);text-align:center;max-width:640px;margin:0 auto 28px;line-height:1.7; }
.landing-screen-split h2, .landing-screen-split .landing-lead, .landing-screen-split .landing-eyebrow{ text-align:left;margin-left:0;margin-right:0; }
.landing-intro-text{ font-size:13.5px;color:var(--text2);line-height:1.8;text-align:center;max-width:720px;margin:0 auto 32px; }
.landing-modules-grid{ display:grid;grid-template-columns:repeat(4,1fr);gap:14px; }
@media (max-width:899px){ .landing-modules-grid{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:480px){ .landing-modules-grid{ grid-template-columns:1fr; } }
.landing-module-card{ background:#fff;border:1px solid var(--border);border-radius:0;padding:16px;box-shadow:0 7px 24px rgba(19,69,47,.05); }
.landing-module-card .lm-name{ font-size:12.5px;font-weight:700;color:var(--gold3);margin-bottom:5px; }
.landing-module-card .lm-desc{ font-size:11px;color:var(--text3);line-height:1.55; }
.landing-audience{ display:grid;grid-template-columns:repeat(2,1fr);gap:14px; }
@media (max-width:899px){ .landing-audience{ grid-template-columns:1fr; } }
.landing-audience-item{ display:flex;gap:10px;align-items:flex-start;background:#fff;border:1px solid var(--border);border-radius:14px;padding:16px 18px;font-size:12.5px;color:var(--text2);line-height:1.6; }
.landing-audience-item .la-mark{ flex:0 0 auto;width:22px;height:22px;border-radius:50%;background:var(--gold-bg);color:var(--gold3);font-size:12px;font-weight:800;display:flex;align-items:center;justify-content:center; }
/* ── Cara Mulai (Fase 1 "Rencana Onboarding Mandiri"): 4 langkah + FAQ ── */
.landing-start-steps{ display:flex;flex-direction:column;gap:18px; }
.landing-start-step{ display:flex;gap:14px;align-items:flex-start; }
.landing-start-step .lss-num{
  flex:0 0 auto;width:28px;height:28px;border-radius:50%;background:var(--gold3);color:#fff;
  font-size:13px;font-weight:800;display:flex;align-items:center;justify-content:center;
}
.landing-start-step .lss-title{ font-size:13.5px;font-weight:700;color:var(--text);margin-bottom:3px; }
.landing-start-step .lss-desc{ font-size:12px;color:var(--text2);line-height:1.55; }
.landing-faq{ display:flex;flex-direction:column;gap:10px; }
.faq-item{ background:#fff;border:1px solid var(--border);border-radius:12px;overflow:hidden; }
.faq-q{
  width:100%;display:flex;align-items:center;justify-content:space-between;gap:10px;
  background:none;border:none;padding:14px 16px;text-align:left;cursor:pointer;font-family:inherit;
  font-size:12.5px;font-weight:700;color:var(--text);
}
.faq-caret{ flex:0 0 auto;color:var(--gold3);transition:transform .15s;font-size:11px; }
.faq-item.open .faq-caret{ transform:rotate(180deg); }
.faq-a{
  max-height:0;overflow:hidden;transition:max-height .2s ease,padding .2s ease;
  padding:0 16px;font-size:12px;color:var(--text2);line-height:1.6;
}
.faq-item.open .faq-a{ max-height:220px;padding:0 16px 16px; }
@media (max-width:899px){ .landing-start-split{ gap:28px; } }
/* ── Harga & Kontak: 2 kartu terpisah berdampingan (bukan digabung 1 kartu lagi) ── */
.landing-pricing-contact-grid{ display:grid;grid-template-columns:1fr 1fr;gap:24px;max-width:820px;margin:0 auto;align-items:stretch; }
@media (max-width:899px){ .landing-pricing-contact-grid{ grid-template-columns:1fr;max-width:420px; } }
.landing-pricing-card{ max-width:420px;margin:0 auto;background:linear-gradient(135deg,#0E1F1B,#2F9E6E);color:#fff;border-radius:0;padding:32px 30px;text-align:center;box-shadow:0 20px 48px rgba(14,31,27,.28);display:flex;flex-direction:column;justify-content:center; }
.landing-pricing-card .lp-label{ font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:#C3DED0;margin-bottom:10px; }
.landing-pricing-card .lp-price{ font-size:32px;font-weight:800;margin-bottom:4px; }
.landing-pricing-card .lp-price small{ font-size:14px;font-weight:600;color:#C3DED0; }
.landing-pricing-card .lp-note{ font-size:11.5px;color:#C3DED0;line-height:1.6;margin-top:14px; }
.landing-pricing-card .landing-cta-btn{ margin-top:20px; }
.landing-contact-card{ max-width:420px;margin:0 auto;width:100%;background:#fff;border:1px solid var(--border);border-radius:0;padding:32px 30px;text-align:center;box-shadow:0 16px 40px rgba(19,69,47,.1);display:flex;flex-direction:column;align-items:center; }
.landing-contact-card .lc-icon{ width:44px;height:44px;border-radius:12px;background:var(--gold-bg);color:var(--gold3);display:flex;align-items:center;justify-content:center;margin-bottom:14px; }
.landing-contact-card h3{ font-size:15px;font-weight:800;color:var(--text);margin:0 0 8px; }
.landing-contact-card p{ font-size:12px;color:var(--text2);line-height:1.6;margin:0 0 18px; }
.landing-contact-card .lc-contact-link{ display:block;width:100%;padding:11px 14px;margin-bottom:8px;border-radius:12px;background:var(--bg2);color:var(--text);font-size:12.5px;font-weight:700;text-decoration:none;transition:background .15s; }
.landing-contact-card .lc-contact-link:last-child{ margin-bottom:0; }
.landing-contact-card .lc-contact-link:hover{ background:var(--gold-bg);color:var(--gold3); }
.landing-cta-btn{ display:inline-block;margin-top:20px;padding:11px 28px;background:#fff;color:var(--gold3);border-radius:var(--r-sm);font-size:12.5px;font-weight:700;text-decoration:none;cursor:pointer;border:none; }
@media(max-width:640px){ .landing-marketing{padding:0 16px} .landing-screen h2{font-size:21px} }

/* ── LANDING NAVBAR (menu atas halaman login/marketing) ── */
.landing-navbar{ position:sticky;top:0;z-index:20;background:rgba(14,31,27,.86);backdrop-filter:blur(14px) saturate(160%);-webkit-backdrop-filter:blur(14px) saturate(160%);border-bottom:1px solid rgba(255,255,255,.08); }
#login-screen.twa-mode .landing-navbar{ display:none!important; }
.landing-navbar-inner{ max-width:1180px;margin:0 auto;padding:10px 20px;display:flex;align-items:center;gap:20px; }
.landing-navbar-brand{ display:flex;align-items:center;gap:8px;text-decoration:none;flex:0 0 auto; }
.landing-navbar-logo{ height:34px;width:auto;display:block; }
.landing-navbar-brand span{ font-size:13.5px;font-weight:800;color:#fff;letter-spacing:.02em; }
.landing-navbar-brand span b{ color:var(--gold2);font-weight:800; }
.landing-navbar-links{ display:flex;align-items:center;gap:22px;flex:1;justify-content:center;transition:opacity .15s; }
.landing-navbar-links.hidden-for-login{ opacity:0;pointer-events:none; }
.landing-navbar-links a{ font-size:11.5px;font-weight:700;color:rgba(255,255,255,.82);text-decoration:none;letter-spacing:.02em;white-space:nowrap;transition:color .15s; }
.landing-navbar-links a:hover{ color:#fff; }
.landing-navbar-actions{ display:flex;align-items:center;gap:10px;flex:0 0 auto; }
.landing-navbar-login-btn{ background:linear-gradient(135deg,var(--gold3),var(--gold2));border:none;border-radius:20px;padding:8px 18px;font-size:11.5px;font-weight:700;letter-spacing:.02em;color:#fff;cursor:pointer;font-family:'Montserrat',sans-serif;white-space:nowrap; }
.landing-navbar-burger{ display:none;background:none;border:none;color:#fff;font-size:20px;cursor:pointer;padding:4px 6px;line-height:1; }
@media(max-width:860px){
  .landing-navbar-inner{ flex-wrap:wrap;position:relative; }
  .landing-navbar-links{ display:none;position:absolute;top:100%;left:0;right:0;background:#0E1F1B;flex-direction:column;align-items:stretch;padding:14px 20px;gap:4px;border-bottom:1px solid rgba(255,255,255,.08); }
  .landing-navbar-links.open{ display:flex; }
  .landing-navbar-links a{ padding:10px 4px;border-bottom:1px solid rgba(255,255,255,.06); }
  .landing-navbar-burger{ display:block; }
}

/* ── HERO HEADLINE (kartu judul di atas foto login-hero, sebelum kartu login dibuka) ── */
.landing-hero-headline{ max-width:640px;margin:0 auto;text-align:center;padding:0 20px;position:relative;z-index:2; }
.landing-hero-eyebrow{ display:inline-block;background:rgba(255,255,255,.14);border:1px solid rgba(255,255,255,.28);color:#fff;font-size:10.5px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;padding:6px 16px;border-radius:20px;margin-bottom:18px; }
.landing-hero-headline h1{ font-size:clamp(26px,4.4vw,44px);font-weight:800;color:#fff;line-height:1.18;margin:0 0 14px;text-shadow:0 2px 12px rgba(0,0,0,.35); }
.landing-hero-headline p{ font-size:14.5px;color:rgba(255,255,255,.88);line-height:1.7;margin:0 0 26px;text-shadow:0 1px 6px rgba(0,0,0,.3); }
.landing-hero-cta-row{ display:flex;align-items:center;justify-content:center;gap:14px;flex-wrap:wrap; }
.landing-hero-cta{ display:inline-block;background:linear-gradient(135deg,var(--gold3),var(--gold2));color:#fff;font-size:13px;font-weight:700;letter-spacing:.02em;padding:13px 30px;border-radius:26px;text-decoration:none;box-shadow:0 10px 28px rgba(20,90,60,.35);border:none;cursor:pointer;font-family:inherit; }
.landing-hero-cta-ghost{ background:rgba(255,255,255,.1);border:1.5px solid rgba(255,255,255,.5);box-shadow:none; }
.landing-hero-cta-ghost:hover{ background:rgba(255,255,255,.18); }

/* ── 3 KARTU UNGGULAN (layar penuh "Platform", isi utama #landing-highlights) ── */
.landing-highlights-grid{ max-width:1080px;margin:0 auto;display:grid;grid-template-columns:repeat(3,1fr);gap:18px; }
@media (max-width:899px){ .landing-highlights-grid{ grid-template-columns:1fr;max-width:480px; } }
.landing-highlight-card{ background:#fff;border-radius:0;padding:24px 20px;box-shadow:0 16px 40px rgba(19,69,47,.14);text-align:left; }
.landing-highlight-card .lh-icon{ width:40px;height:40px;border-radius:11px;background:var(--gold-bg);color:var(--gold3);display:flex;align-items:center;justify-content:center;margin-bottom:12px; }
.landing-highlight-card h3{ font-size:14px;font-weight:800;color:var(--text);margin:0 0 7px; }
.landing-highlight-card p{ font-size:11.5px;color:var(--text2);line-height:1.6;margin:0 0 10px; }
.landing-highlight-card a{ font-size:11px;font-weight:700;color:var(--gold3);text-decoration:none; }
.landing-highlight-card a:hover{ text-decoration:underline; }

/* ── FOOTER ── */
.landing-footer{ background:#0E1F1B;color:rgba(255,255,255,.78);padding:52px 24px 20px; }
#login-screen.twa-mode .landing-footer{ display:none!important; }
.landing-footer-inner{ max-width:1080px;margin:0 auto;display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:32px; }
.landing-footer-brand{ display:flex;align-items:center;gap:10px;margin-bottom:12px; }
.landing-footer-brand img{ height:36px;width:auto; }
.landing-footer-brand span{ font-size:14px;font-weight:800;color:#fff; }
.landing-footer p{ font-size:11.5px;line-height:1.7;color:rgba(255,255,255,.6);max-width:280px; }
.landing-footer h4{ font-size:11px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:rgba(255,255,255,.5);margin:0 0 14px; }
.landing-footer-links{ display:flex;flex-direction:column;gap:10px; }
.landing-footer-links a{ font-size:12.5px;color:rgba(255,255,255,.78);text-decoration:none; }
.landing-footer-links a:hover{ color:#fff;text-decoration:underline; }
.landing-footer-bottom{ max-width:1080px;margin:36px auto 0;padding-top:18px;border-top:1px solid rgba(255,255,255,.1);display:flex;justify-content:space-between;flex-wrap:wrap;gap:8px;font-size:11px;color:rgba(255,255,255,.45); }
@media(max-width:760px){ .landing-footer-inner{ grid-template-columns:1fr;gap:28px; } }
.login-box {
  background:rgba(255,255,255,0.62);
  backdrop-filter:blur(30px) saturate(170%);
  -webkit-backdrop-filter:blur(30px) saturate(170%);
  border:1px solid rgba(255,255,255,0.55);
  border-radius:var(--r-lg);
  box-shadow:0 12px 40px rgba(20,14,4,0.35),0 1px 0 rgba(255,255,255,0.55) inset;
  padding:26px 28px;
  width:300px;max-width:90vw;
  position:relative;
}
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
  .login-box { background:rgba(255,255,255,0.97); }
}
.login-logo-wrap { text-align:center;margin-bottom:12px; }
.login-logo-img { width:140px;max-width:60%;height:auto;display:block;margin:0 auto;filter:drop-shadow(0 1px 3px rgba(0,0,0,0.25)); }
.login-brand-sub { font-size:19px;font-weight:800;letter-spacing:0.02em;color:#0E1F1B;margin-top:2px;text-shadow:0 0 3px rgba(255,255,255,0.9),0 0 8px rgba(255,255,255,0.8); }
.login-tagline { font-size:9.5px;font-weight:700;color:var(--text2);letter-spacing:0.1em;text-transform:uppercase;margin-top:4px; }
.login-title { font-size:12.5px;font-weight:800;color:var(--text);margin-bottom:12px;text-align:center;text-shadow:0 0 3px rgba(255,255,255,0.9),0 0 8px rgba(255,255,255,0.8); }
.login-field { margin-bottom:10px; }
.login-field input {
  width:100%;padding:9px 12px;border:1.5px solid var(--border2);border-radius:var(--r-sm);
  font-size:12.5px;font-weight:600;color:var(--text);background:rgba(255,255,255,0.88);transition:border-color 0.15s,background 0.15s;
}
.login-field input:focus{outline:none;border-color:var(--gold);background:rgba(255,255,255,0.97);}
.login-btn {
  width:100%;padding:10px;background:linear-gradient(135deg,var(--gold3),var(--gold2));
  color:#fff;border:none;border-radius:var(--r-sm);font-size:12.5px;font-weight:700;
  cursor:pointer;letter-spacing:0.03em;margin-top:4px;transition:opacity 0.15s;
}
.login-btn:hover{opacity:0.9;}
.login-error{color:var(--red);font-size:11px;text-align:center;margin-top:8px;min-height:14px;}
@media (max-width:480px){
  .login-box{ padding:20px 18px;width:280px;max-width:86vw;border-radius:16px; }
  .login-logo-wrap{ margin-bottom:10px; }
  .login-logo-img{ width:110px; }
  .login-brand-sub{ font-size:15px; }
  .login-tagline{ font-size:8.5px;margin-top:3px; }
  .login-title{ font-size:11.5px;margin-bottom:10px; }
  .login-field{ margin-bottom:9px; }
}
.login-hint{font-size:10.5px;font-weight:700;color:var(--text);text-align:center;margin-top:16px;line-height:1.6;text-shadow:0 0 3px rgba(255,255,255,0.9),0 0 8px rgba(255,255,255,0.8);}
/* Kartu login lebih kecil khusus saat dibuka dari APK terpasang (TWA) -- lihat script deteksi twa-mode setelah #login-screen */
#login-screen.twa-mode .login-box{ padding:20px 18px;width:300px;max-width:82vw;border-radius:14px; }
#login-screen.twa-mode .login-logo-wrap{ margin-bottom:14px; }
#login-screen.twa-mode .login-logo-img{ width:130px; }
#login-screen.twa-mode .login-brand-sub{ font-size:13px; }
#login-screen.twa-mode .login-tagline{ font-size:9px;margin-top:6px; }
#login-screen.twa-mode .login-title{ font-size:11.5px;margin-bottom:12px; }
#login-screen.twa-mode .login-field{ margin-bottom:9px; }
#login-screen.twa-mode .login-field input{ padding:8px 12px;font-size:12px; }
#login-screen.twa-mode .login-btn{ padding:9px;font-size:12px; }

/* ── LOGIN INLINE DI NAVBAR ("tombol Masuk berubah jadi form") ──
   Dipicu showLandingLoginForm() (klik "Masuk" di navbar, kunjungan web biasa
   -- BUKAN TWA/lupa-password/reset, yg tetap pakai kartu klasik di tengah,
   lihat komentar JS di index.html). #login-box.nav-mode dipindah visual lewat
   position:fixed supaya nongol pas di baris navbar menggantikan tombol
   "Masuk" -- headline & foto hero di baliknya tetap 100% terlihat. Pill-nya
   sengaja pakai warna & blur SAMA seperti .landing-navbar supaya terasa
   menyatu jadi satu baris, bukan kartu/modal baru -- tanpa logo. */
.login-box.nav-mode{
  /* padding SAMA PERSIS dgn .landing-navbar-inner (10px 20px) supaya baris
     konten pill ini duduk di slot vertikal yg sama dgn logo (tinggi 34px) --
     bukan angka top: tebakan terpisah yg gampang meleset & bikin field
     melebihi garis border navbar. */
  position:fixed;top:0;left:0;right:0;width:auto;
  background:none;border:none;box-shadow:none;backdrop-filter:none;-webkit-backdrop-filter:none;
  border-radius:0;padding:10px 20px;
  display:flex!important;align-items:center;justify-content:flex-end;pointer-events:none;z-index:30;
}
.login-box.nav-mode #login-form-fields{
  pointer-events:auto;position:relative;
  display:flex!important;flex-wrap:wrap;align-items:center;justify-content:flex-end;gap:6px;
  max-width:min(560px,100%);max-height:34px;overflow:visible;
  background:rgba(14,31,27,.92);backdrop-filter:blur(14px) saturate(160%);-webkit-backdrop-filter:blur(14px) saturate(160%);
  border:1px solid rgba(255,255,255,.14);border-radius:18px;padding:3px 6px 3px 12px;
}
.login-box.nav-mode .login-logo-wrap,
.login-box.nav-mode .login-title{ display:none; }
.login-box.nav-mode .login-field{ margin:0; }
.login-box.nav-mode .login-field input{
  /* min-height:48px dari .login-field input global (kartu klasik) TIDAK
     ikut di-reset spesifik ke .nav-mode -- min-height SELALU menang atas
     height yg lebih kecil (used height = max(height,min-height)), jadi
     tanpa override ini field akan tetap 48px & melebihi garis navbar
     berapa pun height/padding di sini diubah. Lebar boleh menyesuaikan
     (flex:1, bukan angka tetap); tinggi WAJIB tetap 28px. */
  width:auto;flex:1 1 84px;min-width:64px;max-width:126px;
  padding:5px 10px;border-radius:14px;height:28px;min-height:28px;box-sizing:border-box;
  border:1px solid rgba(255,255,255,.22);background:rgba(255,255,255,.1);
  color:#fff;font-size:11.5px;font-weight:600;line-height:1;
}
.login-box.nav-mode .login-field input::placeholder{ color:rgba(255,255,255,.55); }
.login-box.nav-mode .login-field input:focus{ outline:none;border-color:var(--gold2);background:rgba(255,255,255,.17); }
.login-box.nav-mode .pw-eye{ color:rgba(255,255,255,.6);transform:translateY(-50%) scale(.85); }
.login-box.nav-mode .pw-eye:hover{ color:#fff;opacity:1; }
.login-box.nav-mode .login-btn{
  /* sama alasannya dgn input di atas: .login-btn global juga punya
     min-height:48px, wajib direset di sini atau tombol ikut melebihi navbar. */
  width:auto;height:28px;min-height:28px;padding:0 14px;margin:0;border-radius:14px;font-size:11px;flex:0 0 auto;white-space:nowrap;
  display:flex;align-items:center;justify-content:center;box-sizing:border-box;
}
/* Dropdown terpisah di bawah pill (bukan bagian dari baris utama) -- tenant-
   picker/error/aux-links semua anak NORMAL-FLOW di dalam 1 wrapper yg
   posisinya di-set SEKALI di sini, jadi otomatis tersusun rapi ke bawah
   tanpa saling tindih walau tenant-picker (nyaris mustahil) & error kebetulan
   tampil bersamaan dgn aux-links yg SELALU tampil. Ini jugalah kenapa
   tenant-picker/error TIDAK ikut menambah tinggi baris utama pill -- baris
   utama (username+password+Log In) selalu tetap 1 baris pendek yg pasti
   muat di dalam tinggi navbar asli, brp pun banyak dropdown di bawahnya. */
.login-box.nav-mode .login-dropdown-stack{
  flex-basis:100%;order:10;position:absolute;top:100%;right:0;margin-top:6px;
  display:flex;flex-direction:column;align-items:flex-end;gap:6px;
}
.login-box.nav-mode #login-tenant-picker{
  background:rgba(14,31,27,.92);backdrop-filter:blur(14px) saturate(160%);-webkit-backdrop-filter:blur(14px) saturate(160%);
  border:1px solid rgba(255,255,255,.14);border-radius:12px;padding:6px;
}
.login-box.nav-mode #login-tenant-picker select{
  width:200px;max-width:60vw;padding:6px 10px;border-radius:10px;border:1px solid rgba(255,255,255,.22);
  background:rgba(255,255,255,.1);color:#fff;font-size:11.5px;
}
.login-box.nav-mode .login-error{
  background:rgba(14,31,27,.92);backdrop-filter:blur(14px) saturate(160%);-webkit-backdrop-filter:blur(14px) saturate(160%);
  border:1px solid rgba(255,255,255,.14);border-radius:10px;padding:5px 12px;
  text-align:right;font-size:10.5px;color:#FFC7BE;min-height:0;white-space:nowrap;margin:0;
}
.login-box.nav-mode .login-error:empty{ display:none; }
.login-box.nav-mode .login-aux-links{
  display:flex;align-items:center;gap:10px;
  background:rgba(14,31,27,.92);backdrop-filter:blur(14px) saturate(160%);-webkit-backdrop-filter:blur(14px) saturate(160%);
  border:1px solid rgba(255,255,255,.14);border-radius:10px;padding:5px 12px;
}
.login-box.nav-mode #forgot-password-trigger,
.login-box.nav-mode #landing-login-back{
  flex:0 0 auto;margin:0!important;font-size:10.5px;color:rgba(255,255,255,.55);white-space:nowrap;
}
.login-box.nav-mode #forgot-password-trigger:hover,
.login-box.nav-mode #landing-login-back:hover{ color:#fff; }
@media(max-width:640px){
  .login-box.nav-mode{ padding:8px 12px; }
  .login-box.nav-mode #login-form-fields{ padding:3px 5px 3px 10px;gap:5px; }
  /* lebar mengecil via flex-basis (bukan width tetap) -- tinggi tetap 28px, tak disentuh di sini.
     max-width diperketat (dari 126px versi desktop) krn kalau 2 field + tombol
     Log In semua mentok 126px, totalnya (326px+) lebih lebar dari yg muat di
     pill pada viewport HP -- baris utama kepaksa wrap 2 baris & baris ke-2
     melebihi tinggi navbar (bug sama, sumber beda: max-width bukan min-height). */
  .login-box.nav-mode .login-field input{ flex-basis:64px;min-width:52px;max-width:96px;padding:5px 8px;font-size:11px; }
  .login-box.nav-mode .login-btn{ padding:0 10px;font-size:11px; }
  .login-box.nav-mode #forgot-password-trigger,
  .login-box.nav-mode #landing-login-back{ font-size:10px; }
}

/* ── LAYOUT ── */
#app { display:flex;height:100vh;overflow:hidden; }
nav#sidebar {
  width:var(--sidebar-w);min-width:var(--sidebar-w);
  background:var(--sb-bg);border-right:1px solid var(--sb-border);color:var(--sb-text);
  display:flex;flex-direction:column;overflow-y:auto;overflow-x:hidden;
  position:relative;z-index:100;
  transition:width 0.25s ease,min-width 0.25s ease;
}
nav#sidebar.collapsed {
  width:0;min-width:0;border-right:none;overflow:hidden;
}
nav#sidebar.collapsed .sidebar-brand,
nav#sidebar.collapsed #nav-container,
nav#sidebar.collapsed .sidebar-footer {
  opacity:0;pointer-events:none;transition:opacity 0.1s;
}
.sidebar-toggle-btn {
  width:34px;height:34px;border-radius:8px;
  background:transparent;color:var(--text);border:none;cursor:pointer;
  display:flex;align-items:center;justify-content:center;
  flex-shrink:0;
}
.sidebar-toggle-btn:hover{background:var(--bg2);}
.sidebar-toggle-btn .hbar-wrap{width:18px;height:14px;position:relative;flex-shrink:0;}
.sidebar-toggle-btn .hbar{
  position:absolute;left:0;width:100%;height:2px;border-radius:2px;background:currentColor;
  transition:transform .25s ease,opacity .2s ease,top .25s ease;
}
.sidebar-toggle-btn .hbar:nth-child(1){top:0;}
.sidebar-toggle-btn .hbar:nth-child(2){top:6px;}
.sidebar-toggle-btn .hbar:nth-child(3){top:12px;}
.sidebar-toggle-btn.is-open .hbar:nth-child(1){top:6px;transform:rotate(45deg);}
.sidebar-toggle-btn.is-open .hbar:nth-child(2){opacity:0;}
.sidebar-toggle-btn.is-open .hbar:nth-child(3){top:6px;transform:rotate(-45deg);}
@media (max-width:768px){
  .sidebar-toggle-btn{width:44px;height:44px;}
}

.hk-filter-bar {
  display:flex;flex-wrap:wrap;gap:8px;padding:12px 16px;
  background:var(--bg2);border-bottom:1px solid var(--border);
}
.hk-filter-bar select, .hk-filter-bar button {
  padding:5px 10px;border-radius:var(--r-sm);border:1px solid var(--border);
  font-size:12px;background:var(--white);color:var(--text);cursor:pointer;
}
.hk-filter-bar button.active {
  background:var(--teal);color:#fff;border-color:var(--teal);
}
@media (max-width:768px){
  nav#sidebar{ width:0!important;min-width:0!important;overflow:hidden!important;border-right:none!important; }
  nav#sidebar .sidebar-brand,
  nav#sidebar #nav-container,nav#sidebar .sidebar-footer{opacity:0;pointer-events:none;}
  nav#sidebar.mobile-open{ width:min(var(--sidebar-w),86vw)!important;min-width:min(var(--sidebar-w),86vw)!important;overflow-y:auto!important; }
  nav#sidebar.mobile-open .sidebar-brand,
  nav#sidebar.mobile-open #nav-container,nav#sidebar.mobile-open .sidebar-footer{opacity:1;pointer-events:auto;}
  /* Tombol hamburger sekarang menyatu di topbar (bukan floating lagi) —
     cukup pastikan ukurannya proporsional di layar kecil. */
  .content{ padding:12px;max-width:100vw;overflow-x:hidden; }
  .kpi-grid{ grid-template-columns:1fr 1fr!important; }
  .grid-3,.grid-3-responsive{ grid-template-columns:1fr!important; }
  .apk-home-grid{ grid-template-columns:repeat(3,1fr)!important; }
  .tbl-wrap{ overflow-x:auto; }
  .page-header,.dept-header{ padding:12px 12px; margin:-12px -12px 14px; }
  .page-header__actions{ position:static;justify-content:flex-start;margin-top:10px; }
  .page-title,.dept-title-big{ font-size:15px!important; }
  .page-subtitle,.dept-sub-big{ font-size:11px!important; }
  /* Pengaman tambahan: paksa semua card/grid yang mungkin masih ada lebar tetap
     supaya tidak membuat halaman meluber ke samping di layar sempit. */
  .card,.kpi-card,.grid-2-1,[class*="grid-"]{ max-width:100%!important; }
  .grid-2-1{ grid-template-columns:1fr!important; }
  /* Pengaman universal: SEMUA grid multi-kolom inline (apapun rasionya) dipaksa
     jadi 1 kolom di mobile — supaya tidak ada lagi kartu/form yang kepotong ke samping.
     :not(.twa-grid-fixed) -- kecualikan grid TWA yang MEMANG didesain multi-kolom
     utk layar HP (mis. KPI/Modul Overview Engineering) -- tanpa pengecualian ini,
     pengaman ini otomatis melumpuhkan SEMUA grid TWA jadi 1 kolom permanen krn TWA
     cuma pernah jalan di layar <=768px (bug ditemukan 2026-09-16 lewat device asli,
     verifikasi lokal sebelumnya lolos keliru krn resize window tak mengubah viewport
     sungguhan, cuma div pembungkusnya). */
  [style*="grid-template-columns:1fr 1fr"]:not(.twa-grid-fixed),
  [style*="grid-template-columns:2fr 1fr"]:not(.twa-grid-fixed),
  [style*="grid-template-columns:1.4fr 1fr"]:not(.twa-grid-fixed),
  [style*="grid-template-columns:1.6fr 1fr"]:not(.twa-grid-fixed),
  [style*="grid-template-columns:repeat(3,1fr)"]:not(.twa-grid-fixed),
  [style*="grid-template-columns:repeat(4,1fr)"]:not(.twa-grid-fixed),
  [style*="grid-template-columns:repeat(5,1fr)"]:not(.twa-grid-fixed),
  [style*="grid-template-columns:repeat(6,1fr)"]:not(.twa-grid-fixed),
  [style*="grid-template-columns:repeat(auto-fill"]:not(.twa-grid-fixed){
    grid-template-columns:1fr!important;
  }
  /* Layout 2-kolom pakai flex (sidebar-list + konten, seperti di AI Report) —
     dipaksa numpuk vertikal juga di mobile. */
  .ai-report-layout{ flex-direction:column!important; }
  .ai-report-sidebar{ width:100%!important;flex-shrink:1!important;border-right:none!important;border-bottom:1px solid var(--border); }
  [style*="display:flex"][style*="flex:1"]{ min-width:0!important; }
  table{ min-width:520px; }
  /* Sidebar overlay penuh di mobile, supaya konten di belakangnya tidak keliatan kepotong */
  nav#sidebar.mobile-open{
    position:fixed; inset:0 auto 0 0; z-index:500;
    box-shadow:6px 0 24px rgba(0,0,0,.25);
  }
  #mobile-sidebar-backdrop{
    display:none; position:fixed; inset:0; background:rgba(0,0,0,.4); z-index:400;
  }
  #mobile-sidebar-backdrop.show{ display:block; }
  nav#sidebar.mobile-open .nav-item.lvl3{ padding-left:36px; }
  nav#sidebar.mobile-open .nav-item{ min-height:40px; } /* target sentuh lebih besar di HP */
  .topbar{ padding:0 14px; }
  .topbar-page{ font-size:13.5px; }
  /* Form JKB/WO (Buat Jadwal Baru dkk, pola panelCard/jkbCard): padding
     desktop-nya (card luar 24px 28px, section abu-abu 20px 22px) numpuk jadi
     ~90px "termakan" di kedua sisi pada layar sempit -- kurangi biar field di
     dalamnya kebagian lebar lebih lega. */
  .jkb-form-wrap{ padding:16px 14px!important; }
  .jkb-step-panel{ padding:14px 12px!important; }
}
@media (max-width:420px){
  nav#sidebar.mobile-open .nav-item.lvl2{ padding-left:22px; }
  nav#sidebar.mobile-open .nav-item.lvl3{ padding-left:32px; font-size:11.5px; }
  .kpi-grid{ grid-template-columns:1fr!important; }
}
/* Canvas (Chart.js) punya lebar intrinsik default 300px. Di dalam grid/flex,
   item tanpa min-width:0 memakai ukuran konten sebagai batas bawah kolom —
   jadi kolom grafik dipaksa melebar ke 300px lalu overflow/kepotong di layar
   sempit walau containernya lebih kecil. Berlaku di semua ukuran layar, bukan
   hanya mobile, karena masalahnya soal lebar kolom vs lebar intrinsik canvas. */
[style*="display:grid"]>div:has(canvas),.grid-2-1>div:has(canvas){ min-width:0; }
.main-area { flex:1;display:flex;flex-direction:column;overflow:hidden; }
.topbar {
  height:60px;background:var(--white);border-bottom:1px solid var(--border);
  display:flex;align-items:center;padding:0 26px;gap:14px;flex-shrink:0;
}
.topbar-page{font-size:15.5px;font-weight:700;color:var(--text);flex:1;letter-spacing:-0.01em;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.topbar-page .crumb-parent{color:var(--text3);font-weight:600;cursor:pointer;}
.topbar-page .crumb-parent:hover{color:var(--gold3,#1B6E4C);text-decoration:underline;}
.topbar-page .crumb-sep{color:var(--text3);font-weight:400;margin:0 8px;}
.topbar-right{display:flex;align-items:center;gap:10px;}
.content{flex:1;overflow-y:auto;padding:24px;}
.page{display:none;}.page.active{display:block;}

/* ── SIDEBAR BRAND ── */
.sidebar-brand {
  padding:18px 18px 14px;border-bottom:1px solid var(--sb-border);
}
.brand-name { font-size:14px;font-weight:800;letter-spacing:-0.01em;color:var(--sb-text-strong); }
.brand-name span { color:var(--sb-accent); }
.brand-tagline { font-size:8.5px;letter-spacing:0.08em;color:var(--sb-text-dim);text-transform:uppercase;margin-top:2px; }

/* ── SIDEBAR NAV (menu label, grup, halaman, submenu — semua level ikon lengkap) ── */
.menu-toplabel{
  font-size:11px;text-transform:uppercase;letter-spacing:.1em;color:var(--sb-text-dim);
  padding:16px 16px 8px;font-weight:700;
}
.nav-section { padding:10px 10px 4px; }
.nav-label {
  font-size:9.5px;font-weight:700;letter-spacing:.1em;color:var(--text3);
  text-transform:uppercase;padding:4px 8px 6px;
}
.nav-item {
  display:flex;align-items:center;gap:9px;
  border-radius:var(--r-sm);cursor:pointer;font-size:12.5px;
  color:var(--sb-text);transition:background .15s ease,color .15s ease;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
  position:relative;padding:8px 16px;
}
.nav-item.lvl1{font-weight:700;font-size:14px;padding:12px 16px;color:var(--sb-text-strong);}
.nav-item.lvl2{font-weight:600;font-size:13px;padding:11px 16px 11px 28px;}
.nav-item.lvl3{font-size:12.5px;padding:9px 16px 9px 44px;}
.nav-item.lvl3sub{font-size:12.5px;font-weight:600;padding:9px 16px 9px 44px;}
.nav-item.lvl4{font-size:12px;padding:8px 16px 8px 60px;color:var(--sb-text-dim);}
.chevron{margin-left:auto;font-size:16px;opacity:.8;flex-shrink:0;font-weight:700;}
.sub-badge{font-size:9px;padding:2px 7px;border-radius:8px;margin-left:6px;font-weight:700;flex-shrink:0;}
.sub-badge.badge-live{background:#5FA37D30;color:#3E7C4A;}
.sub-badge.badge-demo{background:#B4A49240;color:#8C7C68;}
.nav-item:hover{background:var(--sb-hover-bg);color:var(--sb-text-strong);}
.nav-item.active{background:linear-gradient(135deg,var(--sb-accent),var(--sb-accent2));color:#fff;font-weight:700;box-shadow:0 2px 8px rgba(193,122,74,.28);}
.nav-item.active::before{
  content:'';position:absolute;left:0;top:6px;bottom:6px;width:3px;
  background:rgba(255,255,255,.75);border-radius:2px;
}
.nav-item.locked{opacity:0.4;cursor:not-allowed;}
.nav-icon{display:none;}
/* Semua icon Menu (DEPT_CONFIG) & Submenu (DEPT_PAGES/SUBICO) pakai SVG
   stroke="currentColor" -- disamakan 1 warna aksen sidebar di sini, TERPISAH
   dari warna teks label, supaya konsisten & gampang dibedakan dari tulisan. */
.nav-icon svg{color:var(--sb-accent);}
.nav-item.active .nav-icon svg{color:#fff;}
.nav-badge{
  margin-left:auto;font-size:9px;font-weight:700;
  padding:1px 6px;border-radius:10px;background:var(--red);color:#fff;flex-shrink:0;
}

.sidebar-footer{padding:14px 16px;border-top:1px solid var(--sb-border);margin-top:auto;}
.user-card{
  display:flex;align-items:center;gap:10px;padding:10px 12px;
  background:var(--sb-hover-bg);border-radius:0;margin-bottom:10px;
}
.user-avatar{
  width:34px;height:34px;border-radius:50%;
  background:linear-gradient(135deg,var(--gold3),var(--gold2));
  display:flex;align-items:center;justify-content:center;
  color:#fff;font-weight:700;font-size:13px;flex-shrink:0;
  box-shadow:0 2px 6px rgba(122,90,40,.25);
}
.user-name{font-size:12px;font-weight:600;color:var(--sb-text-strong);}
.user-role{font-size:10px;color:var(--sb-text-dim);}
.refresh-btn{
  display:block;width:100%;padding:8px 12px;margin-top:6px;
  background:var(--sb-hover-bg);border:1px solid var(--sb-border);border-radius:var(--r-sm);
  font-size:11.5px;font-weight:600;color:var(--sb-text);
  cursor:pointer;text-align:center;transition:background .15s ease;
}
.refresh-btn:first-of-type{margin-top:0;}
.refresh-btn:hover{background:#F5DFC8;}
.logout-btn{
  display:block;width:100%;padding:8px 12px;margin-top:6px;
  background:var(--red-bg);border:1px solid transparent;border-radius:var(--r-sm);
  font-size:11.5px;font-weight:600;color:var(--red);
  cursor:pointer;text-align:center;transition:background .15s ease;
}
.logout-btn:hover{background:#FBDAD5;}
.last-refresh{font-size:10px;color:var(--sb-text-dim);text-align:center;margin-top:8px;}

/* Halaman Profil APK (renderApkProfilePage, app-core.js) -- tombolnya di atas
   kartu PUTIH, jadi TIDAK boleh reuse .refresh-btn/.logout-btn (itu didesain
   utk background gelap sidebar-footer, var(--sb-*) -- kalau dipakai di kartu
   putih teksnya nyaris tak kebaca, lihat laporan screenshot). */
.apk-profile-btn{display:block;width:100%;padding:10px 12px;margin-top:2px;background:transparent;border:none;border-radius:var(--r-sm);font-size:12.5px;font-weight:600;color:var(--text);cursor:pointer;text-align:left;transition:background .15s ease;}
.apk-profile-btn:hover{background:var(--bg2);}
.apk-profile-logout-btn{display:block;width:100%;padding:10px 12px;background:var(--red-bg);border:1px solid transparent;border-radius:var(--r-sm);font-size:12.5px;font-weight:600;color:var(--red);cursor:pointer;text-align:center;transition:background .15s ease;}
.apk-profile-logout-btn:hover{background:#FBDAD5;}
/* Kartu di tab Profil APK bleed penuh ke tepi layar HP (2026-09-13,
   permintaan user) -- class TAMBAHAN di samping .card (bukan ganti .card
   itu sendiri, krn .card dipakai di SELURUH app termasuk desktop/halaman
   lain, tidak boleh ikut ke-bleed). -12px menyamakan nilai padding
   .content di breakpoint mobile (lihat @media(max-width:768px) di bawah)
   -- pola sama persis dgn .apk-hero yg sudah lebih dulu full-bleed. */
/* Selector digabung ".card.apk-profile-card" (bukan ".apk-profile-card"
   saja) supaya border-left/right:none PASTI menang -- .card sendiri
   didefinisikan BELAKANGAN di file ini dgn shorthand "border:1px solid..."
   yg kalau menang di urutan cascade akan reset border-left/right balik lagi. */
.card.apk-profile-card{margin-left:-12px;margin-right:-12px;border-left:none;border-right:none;}

/* ── LOADING ── */
#loading{
  position:fixed;inset:0;background:var(--bg);
  display:flex;flex-direction:column;align-items:center;justify-content:center;z-index:999;
}
.loading-spinner-wrap{position:relative;width:84px;height:84px;display:flex;align-items:center;justify-content:center;margin-bottom:18px;}
.loading-spinner-ring{position:absolute;inset:0;border-radius:50%;border:3px solid var(--border);border-top-color:var(--gold3,var(--gold));animation:loadingRingSpin .9s linear infinite;}
.loading-logo-mark{width:46px;height:auto;}
@keyframes loadingRingSpin{from{transform:rotate(0)}to{transform:rotate(360deg)}}
.loading-brand{font-size:24px;font-weight:800;letter-spacing:-0.01em;color:var(--text);margin-bottom:6px;}
.loading-brand span{color:var(--gold);}
.loading-sub{font-size:11px;letter-spacing:.15em;color:var(--text3);text-transform:uppercase;}

/* ── QR SCANNER: full-screen mode ala scan QRIS, dengan garis scan animasi ── */
@keyframes qrscanline{0%{top:4%}50%{top:94%}100%{top:4%}}
@keyframes qrpulse{0%,100%{opacity:1}50%{opacity:.45}}
.qr-active-fullscreen{position:fixed!important;inset:0!important;z-index:99999;border-radius:0!important;aspect-ratio:unset!important;max-width:none!important;width:100vw!important;height:100vh!important;margin:0!important}
.qr-scan-frame{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:min(78vw,340px);height:min(78vw,340px);pointer-events:none;overflow:hidden}
.qr-corner{position:absolute;width:34px;height:34px;border:4px solid var(--gold);animation:qrpulse 1.8s ease-in-out infinite}
.qr-corner.tl{top:0;left:0;border-right:none;border-bottom:none;border-radius:10px 0 0 0}
.qr-corner.tr{top:0;right:0;border-left:none;border-bottom:none;border-radius:0 10px 0 0}
.qr-corner.bl{bottom:0;left:0;border-right:none;border-top:none;border-radius:0 0 0 10px}
.qr-corner.br{bottom:0;right:0;border-left:none;border-top:none;border-radius:0 0 10px 0}
.qr-scan-line{position:absolute;left:3%;right:3%;height:3px;background:linear-gradient(90deg,transparent,var(--gold2),var(--gold3),var(--gold2),transparent);box-shadow:0 0 10px 2px rgba(201,162,75,.7);animation:qrscanline 2.4s ease-in-out infinite}
.qr-fs-topbar{position:absolute;top:0;left:0;right:0;padding:16px 16px calc(16px + env(safe-area-inset-top,0px));display:flex;justify-content:space-between;align-items:center;background:linear-gradient(180deg,rgba(0,0,0,.55),transparent);z-index:2}
.qr-fs-hint{position:absolute;bottom:0;left:0;right:0;padding:26px 16px calc(26px + env(safe-area-inset-bottom,0px));text-align:center;background:linear-gradient(0deg,rgba(0,0,0,.6),transparent);z-index:2}

/* ── TOPBAR ELEMENTS ── */
.lang-switch{display:flex;background:var(--bg2);border:1px solid var(--border2);border-radius:20px;padding:3px;gap:2px;}
.lang-btn{border:none;background:transparent;color:var(--text3);font-family:'Montserrat',sans-serif;font-size:11px;font-weight:700;letter-spacing:0.04em;padding:5px 13px;border-radius:16px;cursor:pointer;transition:all 0.2s ease;}
.lang-btn.active{background:linear-gradient(135deg,var(--gold3),var(--gold2));color:#fff;box-shadow:0 2px 6px rgba(166,124,61,0.3);}

.alert-bell{position:relative;cursor:pointer;font-size:18px;padding:6px 8px;border-radius:var(--r-sm);transition:background .15s ease;}
.alert-bell:hover{background:var(--bg2);}
.alert-dot{position:absolute;top:2px;right:2px;width:9px;height:9px;background:var(--red);border-radius:50%;border:2px solid var(--white);}

/* ── PAGE HEADER BANNER (satu gaya utk semua halaman) ──
   .page-header = pola baku (title + subtitle sebagai <div> berurutan);
   .dept-header = alias lama (overview departemen, title/sub dibungkus 1 <div>).
   Aksi/tombol opsional: <div class="page-header__actions">…</div> di dalam
   .page-header -> otomatis nempel kanan-atas. */
.page-header,.dept-header{
  position:relative;
  padding:16px 28px;margin:-24px -28px 20px;
  border-bottom:1px solid var(--border);background:var(--white);
}
.dept-header{display:flex;align-items:flex-start;gap:14px;}
.dept-header>div:first-child{flex:1 1 auto;min-width:0;}
.page-title,.dept-title-big{display:block;font-size:20px;font-weight:700;line-height:1.25;color:var(--text);}
.page-subtitle,.dept-sub-big{display:block;font-size:12px;color:var(--text3);margin-top:3px;line-height:1.4;}
/* judul tanpa wrapper .page-header (halaman lama) tetap dapat jarak sendiri */
.page-title{padding:14px 0 10px;}
.page-header .page-title,.dept-header .page-title,
.page-header .dept-title-big,.dept-header .dept-title-big{padding:0;}
/* tombol/aksi opsional di header -> pojok kanan-atas */
.page-header__actions{
  position:absolute;top:14px;right:28px;
  display:flex;gap:8px;align-items:center;flex-wrap:wrap;justify-content:flex-end;
}
.page-header__badge,.dept-badge-big{
  margin-left:auto;align-self:center;padding:5px 14px;border-radius:20px;
  font-size:10.5px;font-weight:700;letter-spacing:0.04em;text-transform:uppercase;
  background:var(--green-bg,#E7F3EC);color:var(--green,#1B6E4C);white-space:nowrap;
}

/* ── DUMMY DEPT CONTENT ── */
.dummy-dept{
  text-align:center;padding:80px 40px;
}
.dummy-icon{font-size:52px;margin-bottom:16px;}
.dummy-title{font-size:18px;font-weight:700;margin-bottom:8px;}
.dummy-sub{font-size:13px;color:var(--text3);max-width:400px;margin:0 auto 28px;line-height:1.6;}
.dummy-modules{
  display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));
  gap:12px;max-width:700px;margin:0 auto;text-align:left;
}
.dummy-module{
  background:var(--white);border:1px solid var(--border);border-radius:var(--r-sm);
  padding:14px;
}
.dummy-module-name{font-size:12px;font-weight:600;color:var(--text);margin-bottom:4px;}
.dummy-module-sub{font-size:10.5px;color:var(--text3);}
.dummy-tag{
  display:inline-block;margin-top:8px;padding:2px 8px;
  background:var(--gold-bg);color:var(--gold3);border-radius:10px;font-size:9.5px;font-weight:700;
}

/* ── CARDS, TABLES, KPI (same as before) ── */
.card{background:var(--white);border:1px solid var(--border);border-radius:var(--r);box-shadow:var(--shadow);overflow:hidden;}

/* ── OVERVIEW DASHBOARD CARDS (halaman Dashboard Operasional / "overview") ── */
.ovw-card{
  background:var(--white);border-radius:var(--r);border:1px solid var(--border);
  overflow:hidden;cursor:pointer;transition:transform .18s ease,box-shadow .18s ease;
}
.ovw-card:hover{transform:translateY(-2px);box-shadow:var(--shadow-md);}
.ovw-card-loading{padding:60px 18px;text-align:center;color:var(--text3);font-size:12.5px;cursor:default;}
.ovw-card-loading:hover{transform:none;box-shadow:none;}
.ovw-card-error{padding:30px;text-align:center;color:var(--red);font-size:12px;cursor:default;}
.ovw-card-error:hover{transform:none;box-shadow:none;}
.ovw-card-head{padding:16px 20px;display:flex;justify-content:space-between;align-items:center;}
.ovw-conclusion{margin:0 20px 18px;padding:13px 15px;background:var(--bg2);border-radius:10px;font-size:11.5px;color:var(--text);line-height:1.6;}
@media (max-width:768px){
  .ovw-card-body{display:none!important}
}
.apk-home-section-label{font-size:11px;font-weight:800;color:var(--text3);text-transform:uppercase;letter-spacing:.05em;margin:0 0 10px 2px;}
.apk-home-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px 8px;}
.apk-home-card{display:flex;flex-direction:column;align-items:center;gap:6px;cursor:pointer;text-align:center;opacity:0;animation:apkCardIn .35s ease forwards;}
@keyframes apkCardIn{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:translateY(0)}}
.apk-home-icon{width:52px;height:52px;border-radius:16px;display:flex;align-items:center;justify-content:center;font-size:22px;box-shadow:0 3px 8px rgba(0,0,0,.12);transition:transform .15s ease;}
.apk-home-card:active .apk-home-icon{transform:scale(0.92);}
.apk-home-label{font-size:10.5px;font-weight:600;color:var(--text2);line-height:1.25;}
.apk-bottom-nav{position:fixed;left:0;right:0;bottom:0;z-index:300;background:var(--white);border-top:1px solid var(--border);display:flex;padding:6px 4px calc(6px + env(safe-area-inset-bottom,0px));box-shadow:0 -2px 10px rgba(0,0,0,.06);}
.apk-bottom-nav-item{position:relative;flex:1;display:flex;flex-direction:column;align-items:center;gap:2px;padding:6px 2px;border-radius:10px;cursor:pointer;color:var(--text3);font-size:9.5px;font-weight:600;user-select:none;}
.apk-bottom-nav-item .bn-icon{font-size:19px;line-height:1;}
.apk-bottom-nav-item.active{color:var(--gold3,var(--gold));}
.apk-bottom-nav-item.active::before{content:'';position:absolute;top:0;left:50%;transform:translateX(-50%);width:16px;height:3px;border-radius:0 0 3px 3px;background:var(--gold3,var(--gold));}
#toast-host{position:fixed;left:0;right:0;bottom:24px;z-index:9999;display:flex;flex-direction:column;align-items:center;gap:8px;pointer-events:none;padding:0 16px;}
body.has-apk-bottom-nav #toast-host{bottom:92px;}
.toast-item{max-width:420px;width:100%;background:#2c2c2c;color:#fff;padding:12px 16px;border-radius:12px;font-size:12.5px;line-height:1.5;box-shadow:0 4px 16px rgba(0,0,0,.25);opacity:0;transform:translateY(12px);transition:opacity .25s ease,transform .25s ease;pointer-events:auto;}
.toast-item.show{opacity:1;transform:translateY(0);}
.toast-item.toast-success{background:#1e8e3e;}
.toast-item.toast-error{background:#c0392b;}
.page-fade-in{animation:pageFadeIn .28s ease;}
@keyframes pageFadeIn{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:translateY(0)}}
#ptr-indicator{position:fixed;left:50%;top:10px;transform:translateX(-50%);width:34px;height:34px;border-radius:50%;background:var(--white);box-shadow:0 2px 10px rgba(0,0,0,.18);display:flex;align-items:center;justify-content:center;font-size:15px;z-index:9998;opacity:0;pointer-events:none;transition:opacity .2s ease;}
#ptr-indicator.show{opacity:1;}
#ptr-indicator::before{content:"";width:16px;height:16px;border-radius:50%;border:2px solid var(--border);border-top-color:var(--gold);}
#ptr-indicator.spin{animation:ptrSpin .7s linear infinite;}
@keyframes ptrSpin{from{transform:translateX(-50%) rotate(0)}to{transform:translateX(-50%) rotate(360deg)}}

/* ── GLOBAL SEARCH: hasil fade-in bertahap + spinner loading ── */
.gs-anim-in{opacity:0;animation:gsResultIn .42s cubic-bezier(.16,.84,.44,1) forwards;}
@keyframes gsResultIn{from{opacity:0;transform:translateY(14px) scale(.98)}to{opacity:1;transform:translateY(0) scale(1)}}
.gs-search-loading{display:flex;flex-direction:column;align-items:center;gap:12px;padding:48px 20px;color:var(--text3);font-size:12.5px;}
.gs-spinner{width:26px;height:26px;border:3px solid var(--border);border-top-color:var(--gold3,var(--gold));border-radius:50%;animation:gsSpin .7s linear infinite;}
@keyframes gsSpin{from{transform:rotate(0)}to{transform:rotate(360deg)}}
.apk-bottom-nav-item:active,.apk-home-card:active{background:var(--bg2);}
body.has-apk-bottom-nav .content{padding-bottom:76px;}
/* Hamburger TETAP ditampilkan di mode APK (dulu display:none) -- alasannya:
   kartu departemen di grid Beranda hanya bisa mengarah ke 1 halaman (yang
   pertama cocok di restrictedPages user itu). Kalau seorang user diberi
   akses ke LEBIH DARI 1 halaman dalam satu departemen (mis. leader/head
   yang dikasih akses granular ke 2-3 halaman spesifik), halaman selain yang
   "pertama" itu jadi TIDAK BISA DIJANGKAU SAMA SEKALI tanpa hamburger --
   sidebar (nav#sidebar) sendiri sudah benar & lengkap (buildNavItems sudah
   hormati restrictedPages), hanya tombol buat membukanya yang sempat
   disembunyikan di sini. Bottom nav "Beranda" tetap jadi jalan pulang
   utama; hamburger jadi fallback kalau perlu halaman spesifik di luar
   kartu departemen yang tampil di grid Beranda. */
.bn-dot{position:absolute;top:-6px;right:-8px;min-width:15px;height:15px;padding:0 3px;border-radius:8px;background:var(--red);color:#fff;font-size:9px;font-weight:800;display:flex;align-items:center;justify-content:center;box-shadow:0 0 0 2px var(--white);}
.apk-home-icon{position:relative;}
.card-head{display:flex;align-items:center;justify-content:space-between;padding:16px 20px;border-bottom:1px solid var(--border);}
.card-title{font-size:13.5px;font-weight:700;color:var(--text);}
.card-accent{font-size:11px;color:var(--text3);}
.card-link{font-size:11.5px;color:var(--gold);cursor:pointer;font-weight:600;}
.card-body{padding:18px 20px;}
.kpi-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(175px,1fr));gap:14px;margin-bottom:20px;}
.kpi-card{background:var(--white);border:1px solid var(--border);border-radius:var(--r);padding:20px;transition:border-color .15s;}
.kpi-card:hover{border-color:var(--border2);}
/* Aksen warna: penanda titik di label saja (strip kiri kartu dihapus 2026-09-19) */
.kpi-card.gold .kpi-label::before{background:var(--gold);}
.kpi-card.red .kpi-label::before{background:var(--red);}
.kpi-card.green .kpi-label::before{background:var(--green);}
.kpi-card.orange .kpi-label::before{background:var(--orange);}
.kpi-card.teal .kpi-label::before{background:var(--teal);}
.kpi-card.blue .kpi-label::before{background:var(--blue);}
.kpi-label{font-size:11px;text-transform:uppercase;letter-spacing:.07em;color:var(--text3);margin-bottom:10px;font-weight:600;display:flex;align-items:center;gap:8px;}
.kpi-label::before{content:'';width:9px;height:9px;border-radius:3px;background:var(--border2);flex:0 0 9px;}
.kpi-val{font-size:34px;font-weight:800;letter-spacing:-0.02em;font-family:'Montserrat',sans-serif;color:var(--text);font-variant-numeric:tabular-nums;line-height:1.1;}
.kpi-val.red{color:var(--red);} .kpi-val.green{color:var(--green);}
.kpi-sub{font-size:12px;color:var(--text3);margin-top:7px;}
/* Kartu KPI TWA (mis. Overview Engineering, engKpiCardsTWA/engAiKpiCardsTWA)
   -- feedback tekan pengganti :hover, yang tak pernah terpicu di layar
   sentuh. */
.eng-touch-card,.eng-touch-row{transition:background-color .1s}
.eng-touch-card:active,.eng-touch-row:active{background:var(--bg2)}
.grid-2{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-bottom:20px;}
.grid-3{display:grid;grid-template-columns:1fr 1fr 1fr;gap:16px;margin-bottom:20px;}
.grid-2-1{display:grid;grid-template-columns:2fr 1fr;gap:16px;margin-bottom:20px;}
.tbl-wrap{overflow-x:auto;max-height:420px;overflow-y:auto;}
#opex-print-export{display:none;}
#gs-export-print{display:none;}
table{width:100%;border-collapse:collapse;}

/* ── TABEL DATA BAKU (dulu .gl-table / .fin-table tanpa CSS) ── */
.data-table,.gl-table,.fin-table{width:100%;border-collapse:collapse;font-size:12px;}
.data-table th,.gl-table th,.fin-table th{
  padding:9px 12px;text-align:left;font-weight:700;font-size:10.5px;
  letter-spacing:.03em;text-transform:uppercase;color:var(--text3);
  background:var(--bg2,#F6F4F0);border-bottom:1px solid var(--border);
  white-space:nowrap;position:sticky;top:0;z-index:1;
}
.data-table td,.gl-table td,.fin-table td{
  padding:9px 12px;border-bottom:1px solid var(--border);color:var(--text2);vertical-align:middle;
}
.data-table tbody tr:hover,.gl-table tbody tr:hover,.fin-table tbody tr:hover{background:var(--bg2,#FAFAF8);}
.data-table tbody tr:last-child td,.gl-table tbody tr:last-child td,.fin-table tbody tr:last-child td{border-bottom:none;}
/* baris ringkasan/total */
.data-table tfoot td,.gl-table tfoot td,.fin-table tfoot td{font-weight:700;background:var(--bg2,#F6F4F0);border-top:2px solid var(--border);}

/* ── LIST TOOLBAR (search + info) utk tabel yang di-enhance dtable() ── */
.dt-toolbar{display:flex;gap:10px;align-items:center;flex-wrap:wrap;margin-bottom:10px;}
.dt-search{
  flex:1 1 220px;max-width:320px;padding:7px 12px;border:1px solid var(--border);
  border-radius:8px;font-size:12px;background:var(--white);color:var(--text);
}
.dt-search:focus{outline:none;border-color:var(--gold3,#1B6E4C);}
.dt-count{font-size:11px;color:var(--text3);white-space:nowrap;}
.dt-pager{display:flex;gap:6px;align-items:center;justify-content:flex-end;margin-top:10px;font-size:11.5px;color:var(--text3);}
.dt-pager button{
  padding:5px 11px;border:1px solid var(--border);border-radius:7px;background:var(--white);
  color:var(--text2);font-size:11.5px;font-weight:600;cursor:pointer;
}
.dt-pager button:disabled{opacity:.4;cursor:default;}
.dt-sortable th[data-dt-sort]{cursor:pointer;user-select:none;}
.dt-sortable th[data-dt-sort]:hover{color:var(--text);}
.dt-sortable th[data-dt-sort]::after{content:"\2195";opacity:.35;margin-left:5px;font-size:10px;}
.dt-sortable th[data-dt-sort].dt-asc::after{content:"\2191";opacity:.9;}
.dt-sortable th[data-dt-sort].dt-desc::after{content:"\2193";opacity:.9;}
.dt-empty{padding:28px 16px;text-align:center;color:var(--text3);font-size:12px;}
th{text-align:left;font-size:10.5px;font-weight:700;text-transform:uppercase;letter-spacing:.05em;color:var(--text3);padding:10px 12px;border-bottom:2px solid var(--border);white-space:nowrap;position:sticky;top:0;background:var(--white);z-index:2;}
td{padding:10px 12px;border-bottom:1px solid var(--border);font-size:12px;color:var(--text2);vertical-align:top;}
tr:last-child td{border-bottom:none;}
tfoot td{font-weight:700;color:var(--text);background:var(--bg2);border-top:2px solid var(--border);position:sticky;bottom:0;z-index:1;}
.mono{font-family:'JetBrains Mono',monospace;white-space:nowrap;}
.badge{display:inline-flex;align-items:center;padding:2px 8px;border-radius:12px;font-size:10px;font-weight:700;white-space:nowrap;}
.badge-critical{background:var(--red-bg);color:var(--red);}
.badge-high{background:var(--orange-bg);color:var(--orange);}
.badge-medium{background:#FEF9E7;color:#9B7D0A;}
.badge-low{background:var(--green-bg);color:var(--green);}
.sec-head{margin-bottom:22px;}
.sec-eyebrow{font-size:10px;text-transform:uppercase;letter-spacing:.15em;color:var(--gold3);font-weight:700;margin-bottom:4px;}
.sec-title{font-size:24px;font-weight:800;letter-spacing:-0.01em;margin-bottom:4px;}
.sec-sub{font-size:12px;color:var(--text3);}
.filter-bar{display:flex;gap:10px;margin-bottom:16px;flex-wrap:wrap;}
.filter-input{padding:8px 12px;border:1px solid var(--border);border-radius:var(--r-sm);font-size:12.5px;background:var(--white);color:var(--text);flex:1;min-width:180px;}
.filter-input:focus{outline:none;border-color:var(--gold);}
.filter-select{padding:8px 12px;border:1px solid var(--border);border-radius:var(--r-sm);font-size:12.5px;background:var(--white);color:var(--text);cursor:pointer;flex:1;min-width:180px;}
/* Modul Paket Tenant (Input Paket Baru/Konfirmasi Ambil HK/Konfirmasi Terima
   TR/Serah ke Tenant/Tracking Riwayat, semua di dalam #pkg-tab-body) --
   input/select/date pakai .filter-input yang sama, tapi tanpa height eksplisit
   tinggi kotaknya ikut chrome native tiap jenis field (mis. <select>/<input
   type=date> di WebView Android/TWA bisa dirender lebih tinggi drpd <input>
   teks biasa walau padding CSS-nya identik) -- kartu jadi kelihatan field-nya
   beda ukuran. box-sizing:border-box + height tetap menyamakan tinggi kotak
   SEMUA jenis field, terlepas dari chrome native platformnya. Textarea (Catatan)
   dikecualikan -- itu memang sengaja lebih tinggi utk teks multi-baris. Scoped
   ke #pkg-tab-body supaya TIDAK ikut mengubah 200+ pemakaian .filter-input lain
   di seluruh app. */
#pkg-tab-body .filter-input{box-sizing:border-box;height:38px;}
#pkg-tab-body textarea.filter-input{height:auto;}
.period-bar{position:sticky;top:0;z-index:60;display:flex;align-items:center;gap:10px;flex-wrap:wrap;background:var(--bg,#F3F5F1);border-bottom:1px solid var(--border);padding:10px 0;margin-bottom:20px;}
.period-bar select{padding:8px 14px;border:1px solid var(--border);border-radius:8px;font-size:12.5px;font-family:inherit;background:var(--white);color:var(--text);cursor:pointer;}
.period-bar select:focus{outline:none;border-color:var(--gold);}
.period-bar .period-hint{font-size:11px;color:var(--text3);}
.period-seg{display:inline-flex;border:1px solid var(--border);border-radius:8px;overflow:hidden;background:var(--white);}
.period-seg button{padding:6px 14px;border:none;border-left:1px solid var(--border);background:transparent;color:var(--text2);font-size:12px;font-family:inherit;cursor:pointer;white-space:nowrap;}
.period-seg button:first-child{border-left:none;}
.period-seg button:hover{background:var(--bg2);}
.period-seg button.active{background:var(--teal);color:#fff;font-weight:600;}
/* TWA: segmen jadi grid 2 kolom lebar sama + jarak antar tombol, supaya tidak
   nempel/beda lebar spt di web biasa (label "Mingguan"/"Tahunan" beda panjang
   bikin tombol inline-flex jadi tidak rata). Dipakai di period-seg Housekeeping
   Overview (2026-09-19). */
.period-seg.twa-grid-fixed{display:grid;grid-template-columns:repeat(2,1fr);gap:8px;border:none;background:transparent;overflow:visible;}
.period-seg.twa-grid-fixed button{border:1px solid var(--border)!important;border-radius:8px;text-align:center;padding:9px 6px;}
/* ── SEGMENTED CONTROL utk grup radio (WO Status/Metode, dll) -- pengganti radio kecil.
   Markup: <div class="seg-radio [seg-wrap]"><label class="seg-opt"><input type=radio><span>..</span></label>..</div>
   Pakai selector input:checked+span (didukung semua browser) -- bukan :has(). ── */
.seg-radio{display:inline-flex;border:1px solid var(--border);border-radius:8px;overflow:hidden;background:var(--white);}
.seg-radio .seg-opt{margin:0;cursor:pointer;display:block;}
.seg-radio .seg-opt input{position:absolute;opacity:0;width:0;height:0;}
.seg-radio .seg-opt span{display:block;padding:7px 14px;font-size:11.5px;color:var(--text2);border-left:1px solid var(--border);white-space:nowrap;user-select:none;transition:background .12s;}
.seg-radio .seg-opt:first-child span{border-left:none;}
.seg-radio .seg-opt:hover span{background:var(--bg2);}
.seg-radio .seg-opt input:checked+span{background:var(--teal);color:#fff;font-weight:600;}
.seg-radio .seg-opt input:disabled+span{opacity:.4;cursor:not-allowed;background:transparent;}
.seg-radio .seg-opt input:focus-visible+span{outline:2px solid var(--teal);outline-offset:-2px;}
/* Varian membungkus (opsi banyak): tiap opsi jadi pil berdiri sendiri */
.seg-radio.seg-wrap{border:none;overflow:visible;background:transparent;flex-wrap:wrap;gap:6px;}
.seg-radio.seg-wrap .seg-opt span{border:1px solid var(--border);border-radius:7px;}
.ai-box{display:flex;gap:14px;background:linear-gradient(135deg,var(--gold-bg),var(--white));border:1px solid var(--gold);border-radius:var(--r);padding:18px 20px;margin-bottom:20px;}
.ai-box-icon{font-size:22px;flex-shrink:0;}
.ai-box-label{font-size:10px;text-transform:uppercase;letter-spacing:.1em;color:var(--gold3);font-weight:700;margin-bottom:6px;}
.ai-box-text{font-size:12.5px;line-height:1.65;color:var(--text2);}
.pagination{display:flex;justify-content:center;gap:6px;padding:16px 0;}
.pg-btn{padding:6px 12px;border:1px solid var(--border);border-radius:var(--r-sm);font-size:12px;cursor:pointer;background:var(--white);color:var(--text2);}
.pg-btn.active{background:var(--gold-bg);border-color:var(--gold);color:var(--gold3);font-weight:700;}
.pg-btn:disabled{opacity:0.35;cursor:default;}
.alert-item{display:flex;align-items:flex-start;gap:12px;padding:10px 0;border-bottom:1px solid var(--border);}
.alert-item:last-child{border-bottom:none;}
.alert-icon{width:28px;height:28px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:13px;flex-shrink:0;}
.alert-icon.critical{background:var(--red-bg);}
.alert-icon.high{background:var(--orange-bg);}
.alert-icon.medium{background:#FEF9E7;}
.alert-body{flex:1;}
.alert-title{font-size:12.5px;font-weight:600;color:var(--text);}
.alert-meta{font-size:11px;color:var(--text3);margin-top:2px;}
.capex-timeline{display:flex;flex-direction:column;gap:10px;}
.capex-year-row{display:flex;align-items:center;gap:12px;padding:6px 8px;border-radius:var(--r-sm);}
.capex-year-row.capex-year-peak{background:var(--red-bg);}
.capex-year-lbl{font-size:11.5px;font-weight:600;color:var(--text2);width:36px;flex-shrink:0;}
.capex-year-bar{flex:1;height:8px;background:var(--bg2);border-radius:4px;overflow:hidden;}
.capex-year-fill{height:100%;background:var(--gold);border-radius:4px;}
.capex-year-val{font-size:11px;color:var(--gold3);font-weight:600;width:60px;text-align:right;flex-shrink:0;}
.bar-chart{display:flex;flex-direction:column;gap:10px;}
.bar-row{display:flex;align-items:center;gap:10px;}
.bar-label{font-size:11.5px;color:var(--text2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.bar-track{flex:1;height:8px;background:var(--bg2);border-radius:4px;overflow:hidden;}
.bar-fill{height:100%;background:var(--gold);border-radius:4px;transition:width .4s ease;}
.bar-val{font-size:11px;font-weight:600;color:var(--text2);width:60px;text-align:right;flex-shrink:0;}
.donut-svg-sm{width:160px;height:160px;}

/* ── HERO / OVERVIEW ── */
.hero-banner{
  background:linear-gradient(135deg,var(--text) 0%,#2A2310 60%,#3A3218 100%);
  border-radius:var(--r);padding:28px 32px;margin-bottom:20px;color:var(--white);
  position:relative;overflow:hidden;
}
.hero-banner::after{
  content:'◈';position:absolute;right:24px;top:50%;transform:translateY(-50%);
  font-size:96px;opacity:0.04;
}
.hero-greeting{font-size:13px;color:rgba(255,255,255,0.55);margin-bottom:4px;}
.hero-title{font-size:26px;font-weight:800;letter-spacing:-0.01em;}
.hero-sub{font-size:12px;color:rgba(255,255,255,0.5);margin-top:4px;}
.hero-meta{margin-top:18px;display:flex;justify-content:space-between;align-items:flex-end;}
.hero-date{font-size:11px;color:rgba(255,255,255,0.4);}
.hero-powered{font-size:10px;letter-spacing:.1em;color:var(--gold2);text-transform:uppercase;}

/* ── PRINT STYLES ── */
@media print {
  #login-screen, .topbar .lang-switch,
  .topbar .alert-bell, nav#sidebar { display:none!important; }
  .main-area { width:100%!important; }
  .content { padding:0!important; overflow:visible!important; }
  .hero-banner { background:#1C1812!important;-webkit-print-color-adjust:exact; }
  .page-header,.dept-header { border-bottom:2px solid #E5DFD0; }
  .card { box-shadow:none!important; border:1px solid #E5DFD0!important; break-inside:avoid; }
  .tbl-wrap { max-height:none!important; overflow:visible!important; }
  th { position:static!important; }
  #opex-print-export { display:none; }
  body.opex-print-mode > *:not(#opex-print-export) { display:none!important; }
  body.opex-print-mode #opex-print-export { display:block!important; padding:20px; }
  #gs-export-print { display:none; }
  body.gs-export-print-mode > *:not(#gs-export-print) { display:none!important; }
  body.gs-export-print-mode #gs-export-print { display:block!important; padding:20px; }
  #jkb-chk-print-export { display:none; }
  body.jkb-chk-print-mode > *:not(#jkb-chk-print-export) { display:none!important; }
  body.jkb-chk-print-mode #jkb-chk-print-export { display:block!important; padding:20px; }
  @page { margin:20mm; }
  body.qr-print-mode > *:not(#qr-print-export) { display:none!important; }
  body.qr-print-mode #qr-print-export { display:block!important; }
}
#qr-print-export { display:none; }
#qr-print-export.spr-preview-open { display:block;position:fixed;inset:0;z-index:100000;background:#eef2f5;overflow:auto;padding:18px; }
.spr-print-sheet { max-width:900px;margin:0 auto;background:#fff;padding:18px;border-radius:14px;box-shadow:0 12px 40px #0002; }
.spr-print-actions { max-width:900px;margin:0 auto 12px;display:flex;gap:8px;justify-content:flex-end;flex-wrap:wrap; }
@media print { .spr-print-actions { display:none!important; } .spr-print-sheet { box-shadow:none!important;border-radius:0!important;max-width:none!important; } }
.qr-label-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:10mm; padding:8mm; }
.qr-label-card { border:1px dashed #999; border-radius:4px; padding:6mm; text-align:center; page-break-inside:avoid; }
.qr-label-card canvas { width:100%; height:auto; max-width:140px; }
.qr-label-name { font-size:10pt; font-weight:700; margin-top:3mm; word-break:break-word; }
.qr-label-code { font-size:8.5pt; color:#555; font-family:monospace; margin-top:1mm; }

/* ── CHAT WIDGET (same as before) ── */

.pw-wrap{position:relative;display:block}
.pw-wrap input[type="password"],.pw-wrap input.pw-as-text{padding-right:34px !important;box-sizing:border-box}
.pw-eye{position:absolute;right:8px;top:50%;transform:translateY(-50%);cursor:pointer;user-select:none;font-size:15px;opacity:.55;line-height:1;background:none;border:none;padding:2px}
.pw-eye:hover{opacity:1}

/* === INONE ESTATIKA APP SHELL — "Verdant Ledger" (ink hutan + emerald) === */
:root{
  --bg:#F3F5F1;--bg2:#EAEEE7;--bg3:#DEE6DC;--border:#DCE3DA;--border2:#BFCCBC;
  --gold:#2F9E6E;--gold2:#3FB47D;--gold3:#1B6E4C;--gold-bg:#E7F3EC;
  --r:0;--r-sm:9px;--r-lg:0;--sidebar-w:276px;
  --sb-bg:#0E1F1B;--sb-border:rgba(255,255,255,.12);--sb-text:#D8E7DF;
  --sb-text-dim:#86A092;--sb-text-strong:#FFFFFF;--sb-hover-bg:rgba(255,255,255,.10);
  --sb-accent:#2F9E6E;--sb-accent2:#1B6E4C;
}
body{font-family:'Montserrat','Segoe UI',sans-serif;background:var(--bg)}
.login-hero{background:linear-gradient(135deg,rgba(10,22,18,.72),rgba(20,45,36,.45)),url('/bg-hero.jpg?v=20260901z') center/cover no-repeat}
.login-box{width:410px;padding:38px 42px;background:rgba(255,255,255,.94);border:1px solid rgba(255,255,255,.78);border-radius:26px;box-shadow:0 28px 80px rgba(8,18,15,.35)}
.login-brand-sub{color:#1B6E4C}.login-field input{min-height:48px;border-radius:12px;background:#FBFDFC}.login-btn{min-height:48px;border-radius:12px;background:linear-gradient(135deg,#0E1F1B,#2F9E6E);box-shadow:0 8px 20px rgba(14,31,27,.22)}
.pw-eye{right:9px;width:34px;height:34px;display:flex;align-items:center;justify-content:center;border-radius:9px;opacity:.7}
nav#sidebar{background:linear-gradient(165deg,#0E1F1B 0%,#142E27 58%,#08120F 100%);box-shadow:8px 0 30px rgba(8,18,15,.12)}
.sidebar-brand{padding:24px 20px 18px;background:rgba(255,255,255,.035)}
.brand-name{font-size:19px!important;color:#fff!important}.brand-name span{color:#2F9E6E}.brand-tagline{color:#B7CEC3}
.menu-toplabel,.nav-label{color:#88AA9A}.nav-section{padding:8px 12px}.nav-item{margin:2px 10px;padding:10px 12px;border-radius:11px;color:#D5E6DD}
.nav-item.lvl1{font-size:13.5px;padding:12px}.nav-item.lvl2{font-size:12.5px;padding:10px 12px 10px 28px}.nav-item.lvl3,.nav-item.lvl3sub{padding-left:42px}
.nav-icon{display:flex!important;width:28px;height:28px;flex:0 0 28px;align-items:center;justify-content:center;border-radius:9px;background:rgba(255,255,255,.10);font-size:15px}
.nav-icon svg{width:17px;height:17px;color:#2F9E6E}.nav-item.active{background:rgba(47,158,110,.18);color:#fff;font-weight:700;box-shadow:inset 3px 0 0 #2F9E6E}
.nav-item.active .nav-icon{background:rgba(255,255,255,.10)}.nav-item.active .nav-icon svg{color:#6FCDA0}.nav-item.active::before{display:none}
.sidebar-footer{border-top-color:rgba(255,255,255,.12);padding:14px}.user-card{background:rgba(255,255,255,.10);border:1px solid rgba(255,255,255,.10);border-radius:14px}.user-name{color:#fff}.user-role,.last-refresh{color:#A9C4B8}
/* Khusus di dalam sidebar-footer (background gelap) -- refresh-btn/logout-btn
   dipakai ULANG apa adanya di renderApkProfilePage (app-core.js) di atas kartu
   PUTIH, jadi override gelap ini TIDAK BOLEH global (dulu global -> teks pucat
   nyaris tak kebaca di kartu putih halaman Profil APK). */
.sidebar-footer .refresh-btn{background:rgba(255,255,255,.08);border-color:rgba(255,255,255,.10);color:#DDEBE4;border-radius:10px}.sidebar-footer .refresh-btn:hover{background:rgba(255,255,255,.15)}
.sidebar-footer .logout-btn{border-radius:10px;background:rgba(201,72,60,.18);color:#FFDAD5}
.topbar{height:68px;padding:0 24px;background:rgba(255,255,255,.94);box-shadow:0 1px 0 var(--border)}.topbar-page{font-size:17px;color:var(--text)}.content{padding:24px 28px}
.card,.ovw-card,.kpi-card{border-color:var(--border);box-shadow:none!important}
.apk-home-shell{max-width:720px;margin:0 auto}
/* Full-bleed ke tepi layar HP, pola sama dgn .apk-hero (2026-09-13,
   permintaan user) -- border kiri/kanan dihapus spy tidak ada garis mepet
   tepi layar. Strip warna atas (::before) + box-shadow dihapus 2026-09-19
   (permintaan user: kartu polos, tanpa aksen warna/shadow di semua modul). */
.apk-module-section{position:relative;background:#fff;border:1px solid var(--border);border-left:none;border-right:none;border-radius:0;padding:16px;margin:0 -12px 14px;box-shadow:none;overflow:hidden}
.apk-home-section-label{font-size:12px;color:#315846;margin:0 0 14px}.apk-home-grid{grid-template-columns:repeat(3,1fr);gap:14px 10px}
.apk-home-card{gap:8px;min-width:0}.apk-home-icon{width:72px;height:72px;border-radius:22px;font-size:29px;box-shadow:0 7px 16px rgba(18,68,47,.15)}.apk-home-label{font-size:11.5px;font-weight:700;color:#31483D}
.apk-bottom-nav{padding:7px 6px calc(7px + env(safe-area-inset-bottom,0px));border-radius:20px 20px 0 0;box-shadow:0 -8px 28px rgba(13,59,42,.10)}.apk-bottom-nav-item{padding:8px 3px;font-size:10.5px}.apk-bottom-nav-item .bn-icon{font-size:22px}
@media(max-width:768px){.content{padding:12px}.topbar{height:58px;padding:0 12px}.apk-home-grid{grid-template-columns:repeat(3,1fr)!important}.apk-home-icon{width:70px;height:70px;font-size:28px}nav#sidebar.mobile-open{box-shadow:12px 0 40px rgba(4,34,23,.38)}}
@media(max-width:380px){.apk-home-grid{grid-template-columns:repeat(3,1fr)!important;gap:12px 5px}.apk-home-icon{width:62px;height:62px;border-radius:19px}.apk-home-label{font-size:10.5px}}

/* ── Beranda APK v2 (gaya mobile banking): kartu skor, info berjalan, aksi cepat, aktivitas ── */
/* Foto bg-hero.jpg (network/blueprint hijau, sudah dipakai di login-hero &
   kartu hero Overview -- lihat pages-overview.js) ditambahkan di sini juga
   supaya kartu carousel lebih menarik, TANPA ganti skema warna: gradient
   hijau tua->muda yang sudah ada (#0E1F1B->#2F9E6E) dipertahankan PERSIS,
   cuma dibuat semi-transparan (.88/.82) supaya fotonya terlihat menembus,
   bukan sekadar solid gradient polos spt sebelumnya. */
.apk-hero{margin:-12px -12px 14px;padding:20px 20px 22px;border-radius:0;color:#fff;position:relative;overflow:hidden;cursor:pointer;
  background:radial-gradient(120% 140% at 100% 0%, rgba(255,255,255,.14), transparent 55%), linear-gradient(145deg,rgba(14,31,27,.88),rgba(47,158,110,.82)), url('/bg-hero.jpg?v=20260901z') center/cover no-repeat;
  box-shadow:0 12px 28px rgba(14,31,27,.18)}
.apk-hero-top{display:flex;align-items:center;justify-content:space-between;margin-bottom:14px}
.apk-hero-who{display:flex;align-items:center;gap:10px}
.apk-hero-avatar{width:32px;height:32px;border-radius:50%;background:rgba(255,255,255,.18);display:flex;align-items:center;justify-content:center;font-size:12px;font-weight:800;flex:0 0 auto}
.apk-hero-who small{display:block;font-size:10.5px;color:#BCD3C8;font-weight:500}
.apk-hero-who b{display:block;font-size:13.5px;font-weight:800}
.apk-hero-label{display:flex;align-items:center;gap:8px;font-size:10.5px;color:#BCD3C8;font-weight:700;text-transform:uppercase;letter-spacing:.06em;margin-bottom:6px}
.apk-hero-eye{cursor:pointer;display:flex;opacity:.85}
.apk-hero-eye svg{width:15px;height:15px}
.apk-hero-score{font-size:32px;font-weight:800;letter-spacing:-.01em;display:flex;align-items:baseline;gap:10px;flex-wrap:wrap;font-variant-numeric:tabular-nums}
.apk-hero-pill{font-size:11px;font-weight:700;background:rgba(255,255,255,.18);padding:4px 11px;border-radius:20px}
/* Carousel "Info Berjalan" -- skor gedung + alert (WO aktif/approval/telat)
   SATU area yg bergilir otomatis (apkInitHeroCarousel), bukan lagi header
   skor statis + kartu flash terpisah spt sebelumnya (2026-09-13). Tinggi
   disamakan (min-height) biar pergantian slide skor<->alert tidak "meloncat". */
.apk-hero-viewport{position:relative;min-height:58px;overflow:hidden}
.apk-hero-track{display:flex;transition:transform .5s cubic-bezier(.65,0,.35,1)}
.apk-hero-slide{flex:0 0 100%;min-width:0}
.apk-hero-slide-alert{display:flex;align-items:center;gap:12px;height:58px;cursor:pointer}
.apk-hero-alert-ic{width:40px;height:40px;border-radius:13px;background:rgba(255,255,255,.22);display:flex;align-items:center;justify-content:center;flex:0 0 auto}
.apk-hero-alert-ic svg{width:19px;height:19px}
.apk-hero-alert-txt{min-width:0}
.apk-hero-alert-txt b{display:block;font-size:14px;font-weight:800;color:#fff;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.apk-hero-alert-txt span{display:block;font-size:11px;color:#BCD3C8;font-weight:500;margin-top:2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.apk-hero-dots{display:flex;gap:5px;margin-top:10px}
.apk-hero-dots span{width:5px;height:5px;border-radius:50%;background:rgba(255,255,255,.3);transition:all .3s ease}
.apk-hero-dots span.on{width:14px;border-radius:3px;background:#fff}
/* Statistik ini TIDAK ikut berputar -- selalu tampil apa adanya di bawah
   area carousel, berapa pun slide yg sedang aktif di atas, dan READ-ONLY
   (lihat stopPropagation di renderApkHeroHTML()). Sekarang 4 kolom (JKB
   Saya ditambah 2026-09-17, permintaan user, di samping WO Saya) -- gap
   dikecilkan dari 18px & flex-wrap ditambah supaya tetap muat rapi di
   layar HP sempit tanpa kepotong. */
.apk-hero-foot{display:flex;flex-wrap:wrap;gap:12px 14px;margin-top:14px;padding-top:12px;border-top:1px solid rgba(255,255,255,.16)}
.apk-hero-foot .f{font-size:10px;color:#BCD3C8;min-width:64px}
.apk-hero-foot .f b{display:block;font-size:14px;color:#fff;font-weight:700;margin-top:2px;font-variant-numeric:tabular-nums}

/* Kombobox saran custom (acAttachSuggest, app-core.js) -- pengganti <input
   list=...> datalist yg tidak reliable di Android WebView/TWA. */
.ac-suggest-box{position:absolute;left:0;right:0;top:calc(100% + 2px);z-index:40;max-height:180px;overflow-y:auto;background:var(--white);border:1px solid var(--border);border-radius:8px;box-shadow:0 6px 16px rgba(0,0,0,.12)}
.ac-suggest-item{padding:8px 12px;font-size:12.5px;color:var(--text);cursor:pointer}
.ac-suggest-item:hover{background:var(--bg2)}

.apk-activity-wrap{margin-bottom:14px}
.apk-activity-head{display:flex;align-items:center;justify-content:space-between;margin:0 2px 8px}
.apk-activity-head .t{font-size:12px;color:#315846;font-weight:700}
/* Full-bleed ke tepi layar HP, pola sama dgn .apk-hero/.apk-profile-card
   (2026-09-13, permintaan user) -- border kiri/kanan dihapus krn kalau
   dibiarkan akan terlihat garis mepet persis di tepi layar. */
.apk-activity{background:#fff;border:1px solid var(--border);border-left:none;border-right:none;border-radius:0;overflow:hidden;margin:0 -12px}
.apk-a-row{display:flex;align-items:center;gap:11px;padding:11px 13px;border-bottom:1px solid var(--bg2)}
.apk-a-row:last-child{border-bottom:none}
.apk-a-ic{width:34px;height:34px;border-radius:11px;display:flex;align-items:center;justify-content:center;color:#fff;flex:0 0 auto}
.apk-a-ic svg{width:16px;height:16px}
.apk-a-mid{flex:1;min-width:0}
.apk-a-mid b{display:block;font-size:11.5px;font-weight:700;color:var(--text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.apk-a-mid span{display:block;font-size:9.5px;color:var(--text3);margin-top:1px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.apk-a-right{text-align:right;flex:0 0 auto}
.apk-a-right b{display:inline-block;font-size:9.5px;font-weight:700;padding:2px 7px;border-radius:20px;margin-bottom:3px}
.apk-a-right b.st-neutral{background:var(--bg2);color:var(--text2)}
.apk-a-right b.st-ok{background:var(--gold-bg);color:var(--gold3)}
.apk-a-right b.st-warn{background:#FBEEE0;color:#8a5a24}
.apk-a-right span{display:block;font-size:8.5px;color:var(--border2)}
.apk-activity-empty{padding:26px 16px;text-align:center;font-size:11.5px;color:var(--text3)}

/* Scan QR sekarang tab biasa ke-4 (flex:1, lihat renderApkBottomNav di
   app-core.js) -- tidak lagi lingkaran mengambang position:absolute, supaya
   otomatis sama lebar & simetris dgn Absen/WO/Profil apapun jumlah tabnya. */
/* Web desktop memakai menu teks yang bersih; ikon tetap ada pada TWA/mobile. */
@media(min-width:769px){nav#sidebar .nav-icon{display:none!important}.nav-item{gap:0}.nav-item.lvl2{padding-left:22px}.nav-item.lvl3,.nav-item.lvl3sub{padding-left:34px}.nav-item.lvl4{padding-left:48px}}
/* Badge status di header disembunyikan di web desktop (declutter) -- muncul di
   TWA/mobile. Konsisten utk .dept-badge-big (lama) & .page-header__badge (baru). */
.sub-badge,.dept-badge-big,.page-header__badge{display:none!important}
/* Sidebar tab Pengaturan Umum (wrRenderSettingsTab) -- area konten putih,
   jadi tidak bisa reuse .nav-item (dark sidebar theme). Ukuran & transisi
   disamakan dgn .nav-item.lvl2 (13px) supaya konsisten dgn nav utama. */
.wr-settings-navitem{padding:9px 14px;border-radius:8px;cursor:pointer;font-size:13px;font-weight:600;margin-bottom:2px;color:var(--text2);transition:background .15s ease,color .15s ease}
.wr-settings-navitem:hover{background:var(--bg2)}
.wr-settings-navitem.active{background:var(--blue);color:#fff}