/* ============================================================
   NurseKit — Main Stylesheet
   Digenerate dari index.html saat refactoring Fase 1
   Terdiri dari 2 blok CSS murni:
     1. CSS Utama (baris 119-1604 dari index.html asli)
     2. CSS Predictive Text Engine (baris 20640-20663)
============================================================ */

/* ========== RESET & BASE ========== */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
:root{
  --teal:#0D9488;--teal2:#14B8A6;--teal-light:#CCFBF1;--teal-dark:#0F766E;
  --slate:#1E293B;--slate2:#334155;--slate3:#475569;--slate4:#64748B;
  --muted:#94A3B8;--border:#E2E8F0;--border2:#CBD5E1;
  --bg:#F8FAFC;--bg2:#F1F5F9;--bg3:#E2E8F0;--white:#FFFFFF;
  --red:#EF4444;--red-light:#FEF2F2;--amber:#F59E0B;--amber-light:#FFFBEB;
  --blue:#3B82F6;--blue-light:#EFF6FF;--purple:#8B5CF6;--purple-light:#F5F3FF;
  --green:#10B981;--green-light:#ECFDF5;--coral:#F97316;--coral-light:#FFF7ED;
  --pink:#EC4899;--pink-light:#FDF2F8;--pink-dark:#9D174D;
  --r:10px;--r2:14px;--r3:20px;
  --card-bg:#FFFFFF;--text:#1E293B;
  --shadow:0 1px 3px rgba(0,0,0,.08),0 1px 2px rgba(0,0,0,.06);
  --shadow2:0 4px 16px rgba(0,0,0,.1),0 1px 3px rgba(0,0,0,.08);
  --font:'Inter',system-ui,-apple-system,sans-serif;--mono:'JetBrains Mono','Fira Mono',monospace;
}
/* ── Dark Mode ───────────────────────────────────────────────── */
/* ── Dark Mode — Soft navy, eye-friendly ───────────────────────── */
/* Filosofi: tidak terlalu gelap (#1a tidak #0d), kontras teks lembut,
   aksen teal bawaan tetap dipakai agar konsisten dengan brand NurseKit  */
[data-theme="dark"]{
  /* Aksen: teal bawaan NurseKit sedikit lebih cerah di dark bg */
  --teal:#2DD4BF;--teal2:#5EEAD4;--teal-light:#1A3A36;--teal-dark:#99F6E4;

  /* Teks — warm off-white, bukan pure white yang menyakitkan */
  --slate:#D4DCE8;--slate2:#B0BECE;--slate3:#7A8FA6;--slate4:#546579;
  --muted:#546579;

  /* Struktur — bertingkat tapi tidak ekstrem */
  --border:#2E3E52;--border2:#243244;
  --bg:#1C2436;--bg2:#243244;--bg3:#2D3D52;--white:#243244;

  /* Status — pastel, tidak menyilaukan */
  --red:#F28B82;--red-light:#2A1A1A;
  --amber:#F5C842;--amber-light:#2A2210;
  --blue:#72AEFF;--blue-light:#1A2640;
  --purple:#BB9BF5;--purple-light:#221540;
  --green:#6ECFA0;--green-light:#152A22;
  --coral:#F0A070;--coral-light:#2A1C10;
  --pink:#F48FB1;--pink-light:#2A1020;--pink-dark:#F8C8D8;

  --shadow:0 1px 4px rgba(0,0,0,.35),0 1px 2px rgba(0,0,0,.25);
  --shadow2:0 6px 20px rgba(0,0,0,.45),0 2px 6px rgba(0,0,0,.3);
  --card-bg:#1E2D3F;--text:#E2E8F0;
}

/* ── Base ─────────────────────────────────────────────────────── */
[data-theme="dark"] body{background:var(--bg);color:var(--slate)}

/* ── Sidebar ─────────────────────────────────────────────────── */
[data-theme="dark"] .sidebar{background:#16202E;border-right:1px solid #243244}
[data-theme="dark"] .sidebar-logo{border-bottom-color:#243244}
[data-theme="dark"] .sidebar-footer{border-top-color:#243244}
[data-theme="dark"] .nav-label{color:#546579}
[data-theme="dark"] .nav-item{color:#7A8FA6}
[data-theme="dark"] .nav-item:hover{background:#243244;color:#D4DCE8}
[data-theme="dark"] .nav-item.active{background:#1A3A36;color:#2DD4BF;font-weight:600}
[data-theme="dark"] .nav-badge{background:#243244}

/* ── Cards ───────────────────────────────────────────────────── */
[data-theme="dark"] .card{background:#243244;border-color:#2E3E52}
[data-theme="dark"] .card-header{background:#243244}
[data-theme="dark"] .card-body{background:#243244}
[data-theme="dark"] .b16-card{background:#243244;border-color:#2E3E52}
[data-theme="dark"] .section-title-block .section-title-text{background:#243244;color:#7A8FA6}
[data-theme="dark"] .section-title-line{border-color:#2E3E52}

/* ── Topbar ──────────────────────────────────────────────────── */
[data-theme="dark"] .topbar{background:#16202E;border-bottom:1px solid #243244}
[data-theme="dark"] .page-title{color:#D4DCE8}
[data-theme="dark"] #global-search{background:#243244;border-color:#2E3E52;color:#D4DCE8}
[data-theme="dark"] #global-search::placeholder{color:#546579}

/* ── Forms ───────────────────────────────────────────────────── */
[data-theme="dark"] .form-control{background:#2D3D52;color:#D4DCE8;border-color:#2E3E52}
[data-theme="dark"] .form-control:focus{background:#2D3D52;border-color:#2DD4BF;box-shadow:0 0 0 3px rgba(45,212,191,.15)}
[data-theme="dark"] .form-control::placeholder{color:#546579}
[data-theme="dark"] .form-label{color:#7A8FA6}
[data-theme="dark"] input:not(.form-control),
[data-theme="dark"] textarea:not(.form-control),
[data-theme="dark"] select:not(.form-control){background:#2D3D52;color:#D4DCE8;border-color:#2E3E52}

/* ── Buttons ─────────────────────────────────────────────────── */
[data-theme="dark"] .btn-outline{background:transparent;border-color:#2E3E52;color:#B0BECE}
[data-theme="dark"] .btn-outline:hover{background:#2D3D52;border-color:#2DD4BF;color:#2DD4BF}
[data-theme="dark"] .btn-ghost{color:#7A8FA6}
[data-theme="dark"] .btn-ghost:hover{background:#243244}

/* ── Wizard ──────────────────────────────────────────────────── */
[data-theme="dark"] .wizard-wrap{background:#1C2436}
[data-theme="dark"] .wizard-steps{background:#16202E;border-bottom-color:#243244}
[data-theme="dark"] .wstep{color:#546579}
[data-theme="dark"] .wstep.active .wstep-dot{background:#2DD4BF;color:#16202E}
[data-theme="dark"] .wstep.active .wstep-label{color:#2DD4BF}
[data-theme="dark"] .wstep.done .wstep-dot{background:#1A3A36;color:#2DD4BF}
[data-theme="dark"] .wstep-line{background:#2E3E52}
[data-theme="dark"] .wstep-line.done{background:#2DD4BF}
[data-theme="dark"] .wform{background:#1C2436}
[data-theme="dark"] .wresult{background:#16202E}
[data-theme="dark"] .wfooter{background:#16202E;border-top:1px solid #243244}
[data-theme="dark"] .wfooter-info{color:#7A8FA6}
[data-theme="dark"] .result-preview{background:#243244;border-color:#2E3E52}
[data-theme="dark"] .wresult-empty{color:#546579}
[data-theme="dark"] .anak-header-bar{background:linear-gradient(135deg,#1A3A36,#1A3040)!important;border-bottom-color:#243244!important}

/* ── Modals ──────────────────────────────────────────────────── */
[data-theme="dark"] .modal{background:#243244}
[data-theme="dark"] .modal-header{background:#1C2436;border-bottom-color:#2E3E52}
[data-theme="dark"] .modal-title{color:#D4DCE8}
[data-theme="dark"] .modal-body{color:#B0BECE}
[data-theme="dark"] .modal-footer{background:#1C2436;border-top-color:#2E3E52}
[data-theme="dark"] .modal-close{color:#546579}
[data-theme="dark"] .modal-overlay{background:rgba(0,0,0,.75)}

/* ── Tabs & Filters ──────────────────────────────────────────── */
[data-theme="dark"] .tab-bar{background:#243244;border-bottom-color:#2E3E52}
[data-theme="dark"] .tab{color:#546579}
[data-theme="dark"] .tab:hover{color:#7A8FA6}
[data-theme="dark"] .tab.active{color:#2DD4BF;border-bottom-color:#2DD4BF}
[data-theme="dark"] .tab-content{background:#1C2436}
[data-theme="dark"] .filter-chip{background:#243244;border-color:#2E3E52;color:#7A8FA6}
[data-theme="dark"] .filter-chip.active{background:#1A3A36;border-color:#2DD4BF;color:#2DD4BF}

/* ── Tables ──────────────────────────────────────────────────── */
[data-theme="dark"] table{color:#B0BECE}
[data-theme="dark"] th{background:#2D3D52;color:#7A8FA6;border-color:#2E3E52}
[data-theme="dark"] td{border-color:#2E3E52}
[data-theme="dark"] .rp-section{border-color:#2E3E52}
[data-theme="dark"] .rp-section-head{background:#2D3D52;border-color:#2E3E52;color:#B0BECE}
[data-theme="dark"] .rp-section-body{background:#243244}
[data-theme="dark"] .rp-info-table td{border-color:#2E3E52}

/* ── Predictive dropdown ─────────────────────────────────────── */
[data-theme="dark"] .predict-dropdown{background:#243244;border-color:#2E3E52;box-shadow:0 8px 32px rgba(0,0,0,.6)}
[data-theme="dark"] .predict-item{color:#B0BECE;border-bottom-color:#2D3D52}
[data-theme="dark"] .predict-item:hover,.predict-item.active{background:#1A3A36;color:#2DD4BF}

/* ── Plan cards ──────────────────────────────────────────────── */
[data-theme="dark"] .plan-card{background:linear-gradient(135deg,#1A3A36,#0d3344)}
[data-theme="dark"] #plan-card-pro{background:linear-gradient(135deg,#3B0764,#4C1D95)!important}
[data-theme="dark"] #plan-body-free>div{background:linear-gradient(135deg,#1A3A36,#0d3344)!important}
[data-theme="dark"] #plan-body-pro>div{background:linear-gradient(135deg,#2D1B69,#1E1154)!important}

/* ── Kalkulator ──────────────────────────────────────────────── */
[data-theme="dark"] .calc-card{background:#243244;border-color:#2E3E52}
[data-theme="dark"] .calc-header{background:#2D3D52;border-bottom-color:#2E3E52}
[data-theme="dark"] .calc-title{color:#D4DCE8}
[data-theme="dark"] .calc-subtitle{color:#546579}
[data-theme="dark"] .calc-select,[data-theme="dark"] .calc-input{background:#2D3D52;color:#D4DCE8;border-color:#2E3E52}
[data-theme="dark"] .calc-result{background:#2D3D52}

/* ── Pathway ─────────────────────────────────────────────────── */
[data-theme="dark"] #pathway-svg{background:#16202E!important}
[data-theme="dark"] .pw-palette{background:#16202E;border-right-color:#243244}
[data-theme="dark"] .pw-canvas-wrap{background:#1C2436;border-color:#243244}
[data-theme="dark"] .pw-toolbar{background:#16202E;border-bottom-color:#243244}
[data-theme="dark"] .pw-item{color:#7A8FA6}
[data-theme="dark"] .pw-item:hover{background:#243244;color:#D4DCE8}
[data-theme="dark"] .mode-btn{background:#243244;border-color:#2E3E52;color:#7A8FA6}
[data-theme="dark"] .mode-btn.active{background:#1A3A36;border-color:#2DD4BF;color:#2DD4BF}

/* ── Misc ────────────────────────────────────────────────────── */
[data-theme="dark"] .section-title-text{color:#546579}
[data-theme="dark"] .impl-entry{background:#243244;border-color:#2E3E52}
[data-theme="dark"] .impl-entry-header{background:#2D3D52}
[data-theme="dark"] .prioritas-item{background:#243244;border-color:#2E3E52}
[data-theme="dark"] .eval-soapier td{border-color:#2E3E52;color:#7A8FA6}
[data-theme="dark"] .badge-kode{background:#1A3A36;color:#2DD4BF}
[data-theme="dark"] .bottom-nav{background:#16202E;border-top-color:#243244}
[data-theme="dark"] .bnav-item{color:#546579}
[data-theme="dark"] .bnav-item.active{color:#2DD4BF}
[data-theme="dark"] .bnav-more-menu{background:#1E2D3F;border-color:#2E3E52}
[data-theme="dark"] .bnav-more-handle{background:#3E5068}
[data-theme="dark"] .bnav-more-item{background:#243244;border-color:#2E3E52;color:#B0BECE}
[data-theme="dark"] .bnav-more-item:active{background:#2D4A6B;border-color:#2DD4BF}
[data-theme="dark"] .bnav-more-backdrop{background:rgba(0,0,0,.55)}
[data-theme="dark"] #dark-toggle{background:#243244;border-color:#2E3E52;color:#2DD4BF}

/* ── Dashboard ──────────────────────────────────────────────────── */
[data-theme="dark"] .stat-card{background:#243244;border-color:#2E3E52}
[data-theme="dark"] .stat-label{color:#7A8FA6}
[data-theme="dark"] .stat-sub{color:#546579}
[data-theme="dark"] .qa-card{background:#243244;border-color:#2E3E52}
[data-theme="dark"] .qa-card:hover{background:#2D3D52;border-color:#2DD4BF}
[data-theme="dark"] .qa-text-title{color:#D4DCE8}
[data-theme="dark"] .qa-text-sub{color:#7A8FA6}
[data-theme="dark"] .qa-icon{filter:brightness(.85)}
[data-theme="dark"] .recent-list{background:#243244;border-color:#2E3E52}
[data-theme="dark"] .recent-header{color:#B0BECE;border-bottom-color:#2E3E52}
[data-theme="dark"] .recent-item{border-bottom-color:#2E3E52}
[data-theme="dark"] .recent-item:hover{background:#2D3D52}
[data-theme="dark"] .diag-title{color:#D4DCE8}
[data-theme="dark"] .criteria-item{color:#B0BECE;border-bottom-color:#2E3E52}
[data-theme="dark"] .criteria-box{background:#2D3D52;border-color:#2E3E52}
[data-theme="dark"] .criteria-box-title{color:#7A8FA6;border-bottom-color:#2E3E52}
[data-theme="dark"] .section-header{color:#7A8FA6;border-bottom-color:#2E3E52}
[data-theme="dark"] .tag{background:#2D3D52;color:#B0BECE;border-color:#2E3E52}
[data-theme="dark"] .action-bar{background:#1C2436;border-top-color:#2E3E52}

/* ── SDKI / SIKI / SLKI cards ──────────────────────────────────── */
[data-theme="dark"] .sdki-card,.siki-card,.slki-card{background:#243244}
[data-theme="dark"] .card-header{background:#243244;border-bottom-color:#2E3E52}
[data-theme="dark"] .card-header:hover{background:#2D3D52}
[data-theme="dark"] .card-body{background:#243244}
[data-theme="dark"] .diag-meta .badge{opacity:.9}

/* ── Referensi cepat ──────────────────────────────────────────── */
[data-theme="dark"] .tab-content{background:#1C2436}
[data-theme="dark"] .rp-section{border-color:#2E3E52}
[data-theme="dark"] .rp-section-head{background:#2D3D52;color:#B0BECE;border-color:#2E3E52}
[data-theme="dark"] .rp-section-body{background:#243244}

/* ── Kontras teks — pastikan semua teks terbaca jelas ─────────── */
[data-theme="dark"] .stat-label{color:#B0BECE!important}
[data-theme="dark"] .stat-val{color:inherit}
[data-theme="dark"] .qa-text-title{color:#D4DCE8!important}
[data-theme="dark"] .qa-text-sub{color:#7A8FA6!important}
[data-theme="dark"] .diag-title{color:#D4DCE8!important}
[data-theme="dark"] .badge-category,
[data-theme="dark"] .badge{opacity:.9}
[data-theme="dark"] .criteria-item{color:#B0BECE!important}
[data-theme="dark"] .recent-header{color:#B0BECE!important}
[data-theme="dark"] .section-header{color:#7A8FA6!important}
/* form label dan text dalam card */
[data-theme="dark"] .form-label{color:#B0BECE!important}
[data-theme="dark"] .wfooter-info{color:#7A8FA6!important}
/* input placeholder */
[data-theme="dark"] input::placeholder,
[data-theme="dark"] textarea::placeholder{color:#546579!important;opacity:1}
/* wstep label */
[data-theme="dark"] .wstep-label{color:#7A8FA6}
[data-theme="dark"] .wstep.active .wstep-label{color:#2DD4BF!important}
[data-theme="dark"] .wstep.done .wstep-label{color:#546579}
/* section title */
[data-theme="dark"] .section-title-text{color:#7A8FA6!important}
/* badge dalam dark */
[data-theme="dark"] .badge-kode{background:#1A3A36!important;color:#2DD4BF!important}
/* prioritas & eval */
[data-theme="dark"] .prioritas-num{color:#0D1B24}
[data-theme="dark"] .eval-soapier td:first-child{color:#2DD4BF}
[data-theme="dark"] .eval-soapier td:nth-child(2){color:#7A8FA6}

/* ── Inline white backgrounds yang umum ───────────────────────── */
[data-theme="dark"] [style*="background:white"],[data-theme="dark"] [style*="background: white"],
[data-theme="dark"] [style*="background:#fff"],[data-theme="dark"] [style*="background: #fff"],
[data-theme="dark"] [style*="background:#FFF"],[data-theme="dark"] [style*="background:#FFFFFF"],
[data-theme="dark"] [style*="background:#ffffff"]{background:#243244!important}

/* ── Inline light bg yang perlu disesuaikan ────────────────────── */
[data-theme="dark"] [style*="background:var(--bg)"]  {background:#1C2436!important}
[data-theme="dark"] [style*="background:var(--bg2)"] {background:#243244!important}
[data-theme="dark"] [style*="background:var(--white)"]{background:#243244!important}
[data-theme="dark"] [style*="background:#F8FAFC"],[data-theme="dark"] [style*="background:#f8fafc"]{background:#1C2436!important}
[data-theme="dark"] [style*="background:#F1F5F9"],[data-theme="dark"] [style*="background:#f1f5f9"]{background:#2D3D52!important}
[data-theme="dark"] [style*="background:#E2E8F0"],[data-theme="dark"] [style*="background:#e2e8f0"]{background:#2E3E52!important}

/* ── Teks hitam / gelap yang perlu dibalik ─────────────────────── */
[data-theme="dark"] [style*="color:#1E293B"],[data-theme="dark"] [style*="color:#1e293b"],
[data-theme="dark"] [style*="color:#334155"],[data-theme="dark"] [style*="color:#334155"],
[data-theme="dark"] [style*="color:#0F172A"]{color:#D4DCE8!important}
[data-theme="dark"] [style*="color:#475569"],[data-theme="dark"] [style*="color:#64748B"]{color:#7A8FA6!important}
[data-theme="dark"] [style*="color:#94A3B8"]{color:#546579!important}
html{font-size:15px;-webkit-font-smoothing:antialiased}
body{font-family:var(--font);background:var(--bg);color:var(--slate);min-height:100vh;overflow-x:hidden}
button{font-family:var(--font);cursor:pointer}
input,select,textarea{font-family:var(--font)}
a{text-decoration:none;color:inherit}
::-webkit-scrollbar{width:5px;height:5px}
::-webkit-scrollbar-track{background:transparent}
::-webkit-scrollbar-thumb{background:var(--border2);border-radius:10px}

/* ========== LAYOUT ========== */
.app{display:flex;height:100vh;height:100dvh;overflow:hidden}
.sidebar{width:220px;background:var(--white);border-right:1px solid var(--border);display:flex;flex-direction:column;flex-shrink:0;z-index:10}
.main{flex:1;display:flex;flex-direction:column;overflow:hidden}

/* ========== SIDEBAR ========== */
.sidebar-logo{padding:0 18px;min-height:54px;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid var(--border);flex-shrink:0}
.logo-mark{display:inline-flex;align-items:center;gap:8px}
.logo-icon{width:32px;height:32px;background:var(--teal);border-radius:8px;display:flex;align-items:center;justify-content:center;flex-shrink:0}
.logo-icon svg{color:white}
.logo-text{font-size:15px;font-weight:600;color:var(--slate);letter-spacing:-.02em}
.logo-badge{font-size:9px;background:var(--teal-light);color:var(--teal-dark);padding:2px 6px;border-radius:20px;font-weight:500;letter-spacing:.02em}

.nav{flex:1;padding:10px 10px;overflow-y:auto}
.nav-group{margin-bottom:4px}
.nav-label{font-size:10px;font-weight:600;color:var(--muted);letter-spacing:.08em;text-transform:uppercase;padding:8px 8px 4px}
.nav-item{display:flex;align-items:center;gap:10px;padding:8px 10px;border-radius:8px;cursor:pointer;font-size:13px;font-weight:400;color:var(--slate3);transition:all .15s;margin-bottom:1px}
.nav-item:hover{background:var(--bg);color:var(--slate)}
.nav-item.active{background:var(--teal-light);color:var(--teal-dark);font-weight:500}
.nav-item .icon{width:18px;height:18px;display:flex;align-items:center;justify-content:center;flex-shrink:0;opacity:.7}
.nav-item.active .icon{opacity:1}
.nav-badge{margin-left:auto;background:var(--teal);color:white;font-size:9px;font-weight:600;padding:2px 6px;border-radius:20px}

/* ── Update nav item (sidebar) ── */
#update-nav-item{display:none;background:linear-gradient(135deg,#FEF3C7,#FDE68A);border:1px solid #F59E0B;color:#92400E;font-weight:600;animation:upd-nav-pulse 2s ease-in-out infinite}
#update-nav-item:hover{background:linear-gradient(135deg,#FDE68A,#FCD34D);color:#78350F}
#update-nav-item .upd-dot{width:8px;height:8px;border-radius:50%;background:#EF4444;flex-shrink:0;animation:upd-dot-blink 1s ease-in-out infinite}
@keyframes upd-dot-blink{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.4;transform:scale(.7)}}
@keyframes upd-nav-pulse{0%,100%{box-shadow:0 0 0 0 rgba(245,158,11,.4)}70%{box-shadow:0 0 0 4px rgba(245,158,11,0)}}
/* ── Update item di more menu mobile ── */
#bnav-update-item{display:none;background:linear-gradient(135deg,#FEF3C7,#FDE68A);border:1px solid #F59E0B;border-radius:10px;animation:upd-nav-pulse 2s ease-in-out infinite}
#bnav-update-item .upd-dot{width:7px;height:7px;border-radius:50%;background:#EF4444;display:inline-block;animation:upd-dot-blink 1s ease-in-out infinite;margin-right:3px;vertical-align:middle}

.sidebar-footer{padding:12px;border-top:1px solid var(--border)}
.plan-body-collapse{overflow:hidden;transition:max-height .3s cubic-bezier(.4,0,.2,1),opacity .25s ease;max-height:300px;opacity:1}
.plan-body-collapse:not(.plan-body-open){max-height:0;opacity:0;pointer-events:none}
.dev-note-box{margin-top:8px;padding:8px 10px;background:#F8FAFC;border:1px solid #E2E8F0;border-radius:8px;font-size:10.5px;color:#475569;line-height:1.5}
.dev-note-link{color:#2563EB;font-weight:600;word-break:break-all}
[data-theme="dark"] .dev-note-box{background:#1E293B;border-color:#334155;color:#94A3B8}
[data-theme="dark"] .dev-note-link{color:#60A5FA}
.plan-card{background:linear-gradient(135deg,var(--teal),var(--teal-dark));border-radius:var(--r);padding:12px;color:white}
.plan-name{font-size:11px;font-weight:600;opacity:.8;margin-bottom:2px}
.plan-title{font-size:13px;font-weight:600;margin-bottom:8px}
.plan-btn{display:block;text-align:center;background:rgba(255,255,255,.2);border:1px solid rgba(255,255,255,.3);color:white;border-radius:6px;padding:5px;font-size:11px;font-weight:500;cursor:pointer;transition:.15s}
.plan-btn:hover{background:rgba(255,255,255,.3)}

/* ========== TOPBAR ========== */
.topbar{padding:0 20px;background:var(--white);border-bottom:1px solid var(--border);display:flex;align-items:center;gap:10px;flex-shrink:0;min-height:54px;overflow:visible}
/* mobile search overlay */
.topbar.search-open .search-wrap{display:flex!important;position:absolute;top:0;left:0;right:0;height:54px;padding:8px 12px;background:var(--white);z-index:50;border-bottom:1px solid var(--teal)}
.topbar.search-open .page-title,.topbar.search-open .topbar-askep-label,.topbar.search-open .btn:not(#topbar-search-toggle){display:none}
.topbar.search-open #topbar-search-toggle{color:var(--teal)}
.topbar-search-btn{color:var(--muted)}
.page-title{font-size:17px;font-weight:600;color:var(--slate);letter-spacing:-.02em;flex:1}
.search-wrap{position:relative;flex:1;max-width:360px}
.topbar-right{display:flex;align-items:center;gap:8px;justify-content:flex-end}
.search-wrap svg{position:absolute;left:10px;top:50%;transform:translateY(-50%);color:var(--muted)}
.search-input{width:100%;padding:8px 12px 8px 34px;border:1px solid var(--border2);border-radius:8px;font-size:13px;background:var(--bg);color:var(--slate);outline:none;transition:.15s}
.search-input:focus{border-color:var(--teal);background:white;box-shadow:0 0 0 3px rgba(13,148,136,.1)}
.btn{display:inline-flex;align-items:center;gap:6px;padding:8px 16px;border-radius:8px;font-size:13px;font-weight:500;border:none;transition:all .15s;cursor:pointer;white-space:nowrap}
.btn-primary{background:var(--teal);color:white}
.btn-primary:hover{background:var(--teal-dark)}
.btn-outline{background:white;color:var(--slate2);border:1px solid var(--border2)}
.btn-outline:hover{background:var(--bg);border-color:var(--border2)}
.btn-sm{padding:5px 12px;font-size:12px}
.btn-ghost{background:transparent;color:var(--slate3);padding:6px 10px}
.btn-ghost:hover{background:var(--bg2);color:var(--slate)}
.btn-danger{background:var(--red-light);color:var(--red);border:1px solid #FECACA}
.btn-danger:hover{background:#FECACA}

/* ========== PAGES ========== */
.page{display:none;flex:1;overflow-y:auto;padding:20px 24px;-webkit-overflow-scrolling:touch;overscroll-behavior:contain}
.page.active{display:block}#page-edukasi.active{display:flex;flex-direction:column;height:calc(100vh - 56px);overflow:hidden}#page-edukasi #edukasi-root{flex:1;overflow-y:auto;}#page-statistik.active{display:flex;flex-direction:column;overflow-y:auto;}#page-sop.active{display:flex;flex-direction:column;height:calc(100vh - 56px);overflow:hidden}#page-sop .sop-header{flex-shrink:0;padding:12px 16px;border-bottom:1px solid var(--border);background:var(--bg)}#page-sop .sop-body{display:flex;flex:1;overflow:hidden;min-height:0}#page-sop .sop-col-kat{width:148px;flex-shrink:0;border-right:1px solid var(--border);overflow-y:auto;padding:8px 6px;background:var(--bg2)}#page-sop .sop-col-list{width:260px;flex-shrink:0;border-right:1px solid var(--border);overflow-y:auto;background:var(--bg)}#page-sop .sop-col-detail{flex:1;overflow-y:auto;padding:16px 20px;background:var(--bg)}#page-sop .sop-list-item{display:flex;align-items:center;gap:10px;padding:9px 12px;border-bottom:1px solid var(--border);cursor:pointer;transition:.12s}#page-sop .sop-list-item:hover{background:var(--bg2)}#page-sop .sop-list-item.active{background:var(--teal-light,#CCFBF1);border-left:3px solid var(--teal)}#page-sop .sop-list-item.active .sop-item-name{color:var(--teal-dark);font-weight:600}#page-sop .sop-kat-btn{display:block;width:100%;text-align:left;padding:7px 8px;border-radius:7px;cursor:pointer;font-size:12px;color:var(--slate2);background:transparent;border:none;transition:.12s;line-height:1.4;font-family:inherit}#page-sop .sop-kat-btn:hover{background:var(--bg)}#page-sop .sop-kat-btn.active{background:var(--teal-light,#CCFBF1);color:var(--teal-dark);font-weight:600}

/* ========== CARDS ========== */
.card{background:var(--white);border:1px solid var(--border);border-radius:var(--r2);overflow:hidden;margin-bottom:10px;transition:box-shadow .15s}
.card:hover{box-shadow:var(--shadow)}
.card-header{padding:12px 16px;display:flex;align-items:center;gap:10px;cursor:pointer;user-select:none}
.card-header:hover{background:var(--bg)}
.card-body{padding:0 16px 14px;display:none}
.card-body.open{display:block}
.card-arrow{transition:transform .2s;color:var(--muted);flex-shrink:0}
.card-arrow.open{transform:rotate(180deg)}

/* ========== BADGES ========== */
.badge{display:inline-flex;align-items:center;gap:4px;font-size:10px;font-weight:600;padding:3px 8px;border-radius:20px;letter-spacing:.02em;white-space:nowrap}
.badge-sdki{background:var(--coral-light);color:var(--coral)}
.badge-siki{background:var(--blue-light);color:var(--blue)}
.badge-slki{background:var(--amber-light);color:var(--amber)}
.badge-kode{background:var(--bg2);color:var(--slate3);font-family:var(--mono)}
.badge-green{background:var(--green-light);color:var(--green)}
.badge-purple{background:var(--purple-light);color:var(--purple)}
.badge-teal{background:var(--teal-light);color:var(--teal-dark)}

/* ========== DIAGNOSIS GRID ========== */
.diag-meta{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.diag-title{font-size:14px;font-weight:500;color:var(--slate);flex:1;min-width:0}
.diag-category{font-size:10px;font-weight:500;padding:2px 7px;border-radius:20px}
.cat-fisiologis{background:#EFF6FF;color:#1D4ED8}
.cat-psikologis{background:#FDF4FF;color:#7E22CE}
.cat-lingkungan{background:#F0FDF4;color:#15803D}
.cat-relasional{background:#FFF7ED;color:#C2410C}
.cat-perilaku{background:#FEF9C3;color:#854D0E}

.section-header{font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.08em;color:var(--muted);margin:12px 0 6px;padding-left:2px}
.tag-grid{display:flex;flex-wrap:wrap;gap:5px;margin-bottom:8px}
.tag{font-size:11px;padding:3px 9px;background:var(--bg2);color:var(--slate3);border-radius:20px;border:1px solid var(--border)}

.criteria-row{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-bottom:8px}
.criteria-box{background:var(--bg);border:1px solid var(--border);border-radius:var(--r);padding:10px 12px}
.criteria-box-title{font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.05em;margin-bottom:6px}
.ci-s .criteria-box-title{color:var(--blue)}
.ci-o .criteria-box-title{color:var(--coral)}
.criteria-item{font-size:12px;color:var(--slate2);margin-bottom:4px;padding-left:14px;position:relative;line-height:1.5}
.criteria-item::before{content:"·";position:absolute;left:4px;color:var(--muted);font-weight:700}

.action-bar{display:flex;gap:6px;margin-top:10px;padding-top:10px;border-top:1px solid var(--border)}

/* ========== FILTER BAR ========== */
.filter-bar{display:flex;gap:6px;flex-wrap:nowrap;overflow-x:auto;-webkit-overflow-scrolling:touch;scrollbar-width:none;margin-bottom:14px;align-items:center;padding-bottom:2px}.filter-bar::-webkit-scrollbar{display:none}
.filter-chip{padding:7px 14px;border-radius:20px;font-size:12px;font-weight:500;border:1px solid var(--border2);background:white;color:var(--slate3);cursor:pointer;transition:.15s;white-space:nowrap;flex-shrink:0;user-select:none;-webkit-tap-highlight-color:transparent}
.filter-chip:hover{border-color:var(--teal);color:var(--teal)}
.filter-chip.active{background:var(--teal);color:white;border-color:var(--teal)}

/* ========== STAT CARDS ========== */
.stat-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin-bottom:20px}
.stat-card{background:white;border:1px solid var(--border);border-radius:var(--r2);padding:16px}
.stat-val{font-size:28px;font-weight:700;color:var(--slate);letter-spacing:-.04em;line-height:1}
.stat-label{font-size:12px;color:var(--muted);margin-top:4px}
.stat-sub{font-size:11px;margin-top:6px}
.stat-up{color:var(--green)}

/* ========== ASKEP BUILDER ========== */
.askep-layout{display:grid;grid-template-columns:380px 1fr;gap:16px;height:calc(100vh - 120px)}
.form-panel{background:white;border:1px solid var(--border);border-radius:var(--r2);padding:18px;overflow-y:auto}
.result-panel{background:white;border:1px solid var(--border);border-radius:var(--r2);overflow:hidden;display:flex;flex-direction:column}
.result-header{padding:14px 18px;border-bottom:1px solid var(--border);display:flex;align-items:center;gap:10px}
.result-body{padding:18px;overflow-y:auto;flex:1}

.form-group{margin-bottom:14px}
.form-label{font-size:12px;font-weight:600;color:var(--slate2);margin-bottom:5px;display:block}
.form-control{width:100%;padding:9px 12px;border:1px solid var(--border2);border-radius:8px;font-size:13px;background:white;color:var(--slate);outline:none;transition:.15s}
.form-control:focus{border-color:var(--teal);box-shadow:0 0 0 3px rgba(13,148,136,.1)}
select.form-control{cursor:pointer}
textarea.form-control{resize:vertical;min-height:70px;line-height:1.6}
.form-row{display:grid;grid-template-columns:1fr 1fr;gap:10px}

.section-title-block{display:flex;align-items:center;gap:8px;margin-bottom:14px}
.section-title-line{flex:1;height:1px;background:var(--border)}
.section-title-text{font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.08em;color:var(--muted);white-space:nowrap}

/* ========== ASKEP RESULT ========== */
.askep-result{font-size:13px;line-height:1.7}
.askep-block{margin-bottom:16px;border-radius:var(--r);overflow:hidden;border:1px solid var(--border)}
.askep-block-header{padding:8px 14px;font-size:11px;font-weight:700;letter-spacing:.06em;display:flex;align-items:center;gap:8px}
.askep-block-body{padding:12px 14px}
.ab-pengkajian .askep-block-header{background:#FFF1F2;color:#BE123C}
.ab-diagnosis .askep-block-header{background:var(--purple-light);color:#5B21B6}
.ab-slki .askep-block-header{background:var(--amber-light);color:#92400E}
.ab-siki .askep-block-header{background:var(--teal-light);color:var(--teal-dark)}
.ab-evaluasi .askep-block-header{background:var(--blue-light);color:#1D4ED8}
.askep-sub{font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.06em;color:var(--muted);margin:10px 0 5px}
.askep-item{padding:4px 0 4px 16px;position:relative;color:var(--slate2);border-bottom:1px solid var(--bg2)}
.askep-item:last-child{border-bottom:none}
.askep-item::before{content:"";position:absolute;left:6px;top:11px;width:5px;height:5px;border-radius:50%;background:var(--teal)}
.askep-bold{font-weight:600;color:var(--slate)}
.askep-tag{display:inline-block;padding:1px 7px;border-radius:4px;font-size:11px;font-weight:500}

/* ========== PATHWAY ========== */
.pathway-layout{display:grid;grid-template-columns:240px 1fr;gap:12px;height:calc(100vh - 120px)}
.pw-palette{background:white;border:1px solid var(--border);border-radius:var(--r2);overflow-y:auto;display:flex;flex-direction:column}
.pw-palette-header{padding:14px 14px 10px;border-bottom:1px solid var(--border)}
.pw-palette-title{font-size:13px;font-weight:600;color:var(--slate)}
.pw-palette-body{padding:10px;flex:1;overflow-y:auto}
.pw-palette-section{margin-bottom:12px}
.pw-palette-label{font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.07em;color:var(--muted);margin-bottom:6px;padding-left:4px}

.pw-item{display:flex;align-items:center;gap:8px;padding:8px 10px;border-radius:8px;cursor:pointer;margin-bottom:3px;font-size:12px;font-weight:500;border:1px solid transparent;transition:.15s;user-select:none}
.pw-item:hover{background:var(--bg2)}
.pw-item:active{transform:scale(.98)}
.pw-dot{width:10px;height:10px;border-radius:3px;flex-shrink:0}

.pw-mode-btns{padding:10px;border-top:1px solid var(--border)}
.pw-mode-label{font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.07em;color:var(--muted);margin-bottom:8px}
.mode-btn{display:flex;align-items:center;gap:8px;width:100%;padding:7px 10px;border-radius:7px;border:1px solid var(--border2);background:white;font-size:12px;font-weight:400;color:var(--slate3);cursor:pointer;margin-bottom:4px;transition:.15s}
.mode-btn:hover{border-color:var(--teal);color:var(--teal)}
.mode-btn.active{background:var(--teal-light);border-color:var(--teal);color:var(--teal-dark);font-weight:500}

.pw-canvas-wrap{background:white;border:1px solid var(--border);border-radius:var(--r2);overflow:hidden;display:flex;flex-direction:column}
.pw-toolbar{padding:10px 14px;border-bottom:1px solid var(--border);display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.pw-status{font-size:11px;color:var(--muted);margin-left:4px}

#pathway-svg{flex:1;width:100%;cursor:default;background:var(--bg);touch-action:none}
.pw-node{cursor:pointer;transition:filter .1s}
.pw-node:hover rect{filter:brightness(.95)}

/* ========== MODAL ========== */
.modal-overlay{position:fixed;inset:0;background:rgba(15,23,42,.5);display:none;align-items:center;justify-content:center;z-index:300;backdrop-filter:blur(2px)}
.modal-overlay.open{display:flex}
.modal{background:white;border-radius:var(--r2);width:min(400px,94vw);max-height:88vh;overflow:hidden;display:flex;flex-direction:column;box-shadow:var(--shadow2);animation:modalIn .18s ease}
@keyframes modalIn{from{transform:scale(.95) translateY(10px);opacity:0}to{transform:scale(1) translateY(0);opacity:1}}
@keyframes slideUpBanner{from{transform:translateY(100%)}to{transform:translateY(0)}}
.modal-header{padding:16px 20px;border-bottom:1px solid var(--border);display:flex;align-items:center;justify-content:space-between;flex-shrink:0}
.modal-title{font-size:15px;font-weight:600;color:var(--slate)}
.modal-close{background:none;border:none;color:var(--muted);cursor:pointer;padding:4px;border-radius:6px;font-size:18px;line-height:1}
.modal-close:hover{background:var(--bg2);color:var(--slate)}
.modal-body{padding:16px 20px;overflow-y:auto;flex:1;min-height:0;-webkit-overflow-scrolling:touch}
.modal-footer{padding:12px 20px;border-top:1px solid var(--border);display:flex;gap:8px;justify-content:flex-end;flex-shrink:0;flex-wrap:wrap}
@media(max-width:480px){
  .modal-overlay{align-items:flex-end}
  .modal{border-bottom-left-radius:0;border-bottom-right-radius:0;width:100%;max-height:80vh}
  .modal-footer{flex-direction:column}
  .modal-footer .btn{width:100%;justify-content:center}
}

/* ========== TABS ========== */
.tab-bar{display:flex;gap:0;border-bottom:1px solid var(--border);margin-bottom:16px;flex-wrap:wrap}
.tab{padding:10px 16px;font-size:13px;font-weight:500;color:var(--muted);cursor:pointer;border-bottom:2px solid transparent;transition:.15s;margin-bottom:-1px;white-space:nowrap}
.tab:hover{color:var(--slate)}
.tab.active{color:var(--teal);border-bottom-color:var(--teal)}
.tab-content{display:none}
.farmako-filter-btn{padding:6px 12px;font-size:12px;font-weight:600;border:1px solid var(--border);border-radius:20px;background:var(--card-bg);color:var(--slate2);cursor:pointer;transition:.15s;white-space:nowrap}
.farmako-filter-btn:hover{border-color:var(--teal);color:var(--teal)}
.farmako-filter-btn.active{background:var(--teal);border-color:var(--teal);color:#fff}
.farmako-filter-btn.emergency.active{background:#DC2626;border-color:#DC2626;color:#fff}
.farmako-filter-btn.emergency:hover{border-color:#DC2626;color:#DC2626}
.gs-item{display:flex;align-items:center;gap:8px;padding:8px 12px;cursor:pointer;transition:.12s;border-radius:0}
#global-search-dropdown{background:#ffffff!important;color:#1E293B!important}
[data-theme="dark"] #global-search-dropdown{background:#1C2436!important;color:#E2E8F0!important}
[data-theme="dark"] .gs-item:hover{background:#243244!important}
[data-theme="dark"] #global-search-dropdown .gs-item span[style*="color:var(--text)"]{color:#E2E8F0!important}
[data-theme="dark"] #global-search-dropdown .gs-item span[style*="color:var(--muted)"]{color:#94A3B8!important}
[data-theme="dark"] #global-search-dropdown div[style*="color:var(--muted)"]{color:#94A3B8!important}
.gs-item:hover{background:var(--bg2)}
.gs-item:last-child{border-radius:0 0 10px 10px}

/* ========== KALKULATOR KLINIS ========== */
.calc-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(320px,1fr));gap:16px}
.calc-card{background:white;border:1px solid var(--border);border-radius:var(--r2);overflow:hidden}
.calc-header{padding:12px 16px;background:var(--bg2);border-bottom:1px solid var(--border);display:flex;align-items:center;gap:10px}
.calc-icon{font-size:22px;flex-shrink:0}
.calc-title{font-size:14px;font-weight:700;color:var(--slate)}
.calc-subtitle{font-size:11px;color:var(--muted);margin-top:1px}
.calc-body{padding:14px 16px}
.calc-field{margin-bottom:10px}
.calc-label{font-size:11px;font-weight:600;color:var(--slate2);margin-bottom:4px;text-transform:uppercase;letter-spacing:.04em}
.calc-select,.calc-input{width:100%;padding:7px 10px;border:1px solid var(--border2);border-radius:8px;font-size:12px;background:white;color:var(--slate);outline:none;transition:.15s}
.calc-select:focus,.calc-input:focus{border-color:var(--teal);box-shadow:0 0 0 3px rgba(13,148,136,.1)}
.calc-row{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.calc-result{margin-top:12px;padding:12px 14px;border-radius:10px;text-align:center;background:var(--bg2)}
.calc-score{font-size:28px;font-weight:700;margin-bottom:4px}
.calc-interp{font-size:12px;font-weight:600}
.calc-detail{font-size:11px;color:var(--muted);margin-top:4px;line-height:1.5}
.calc-result.green{background:#F0FDF4;border:1px solid #BBF7D0}
.calc-result.green .calc-score{color:#15803D}
.calc-result.yellow{background:#FEFCE8;border:1px solid #FDE047}
.calc-result.yellow .calc-score{color:#CA8A04}
.calc-result.orange{background:#FFF7ED;border:1px solid #FED7AA}
.calc-result.orange .calc-score{color:#C2410C}
.calc-result.red{background:#FEF2F2;border:1px solid #FECACA}
.calc-result.red .calc-score{color:#B91C1C}
.calc-result.blue{background:#EFF6FF;border:1px solid #BFDBFE}
.calc-result.blue .calc-score{color:#1D4ED8}
.calc-divider{border:none;border-top:1px solid var(--border);margin:10px 0}
.tab-content.active{display:block}
/* ── Kalkulator Page (halaman tersendiri) ── */
.kalk-page-header{background:linear-gradient(135deg,#0D9488,#0891b2);color:white;padding:28px 24px 24px}
.kalk-page-header h1{font-size:20px;font-weight:800;margin:0 0 4px}
.kalk-page-header p{font-size:13px;opacity:.85;margin:0 0 16px}
.kalk-search-box{display:flex;align-items:center;background:rgba(255,255,255,.18);border:1px solid rgba(255,255,255,.35);border-radius:10px;padding:8px 14px;gap:8px;max-width:420px}
.kalk-search-box input{background:none;border:none;outline:none;color:white;font-size:13px;width:100%}
.kalk-search-box input::placeholder{color:rgba(255,255,255,.65)}
.kalk-search-icon{font-size:15px;opacity:.8}
.kalk-cat-bar{display:flex;flex-wrap:wrap;gap:8px;padding:16px 24px 12px;background:white;border-bottom:1px solid var(--border)}
.kalk-cat-bar::-webkit-scrollbar{display:none}
.kalk-cat-btn{padding:8px 16px;border-radius:20px;border:1.5px solid var(--border);background:white;color:var(--slate2);font-size:12px;font-weight:600;cursor:pointer;white-space:nowrap;transition:.15s;flex-shrink:0}
.kalk-cat-btn:hover{border-color:var(--teal);color:var(--teal)}
.kalk-cat-btn.active{background:var(--teal);color:white;border-color:var(--teal)}
.kalk-body{padding:16px 20px;display:flex;flex-direction:column;gap:0}
.kalk-card{background:var(--card-bg,white);border:1px solid var(--border);border-radius:0;overflow:hidden;transition:background .15s;display:flex;flex-direction:column;border-bottom:none}.kalk-card:first-child{border-radius:12px 12px 0 0}.kalk-card:last-child{border-radius:0 0 12px 12px;border-bottom:1px solid var(--border)}.kalk-card.kalk-only{border-radius:12px;border-bottom:1px solid var(--border)}
.kalk-card:hover .kalk-card-head{background:var(--bg3,#f1f5f9)}
.kalk-card-head{padding:13px 16px;display:flex;align-items:center;gap:12px;background:var(--bg2);border-bottom:1px solid var(--border);cursor:pointer;user-select:none;transition:background .15s}
.kalk-card-icon{width:40px;height:40px;border-radius:10px;display:flex;align-items:center;justify-content:center;font-size:20px;flex-shrink:0}
.kalk-card-title{font-size:14px;font-weight:700;color:var(--slate);line-height:1.3}
.kalk-card-sub{font-size:11px;color:var(--muted);margin-top:2px;line-height:1.4}
.kalk-card-badge{font-size:9px;font-weight:700;padding:2px 7px;border-radius:10px;margin-top:4px;display:inline-block}.kalk-card-chevron{margin-left:auto;font-size:11px;color:var(--muted);transition:transform .25s;flex-shrink:0}.kalk-card.open .kalk-card-chevron{transform:rotate(180deg)}.kalk-card-score-preview{font-size:11px;font-weight:700;padding:2px 8px;border-radius:99px;background:var(--bg3,#e2e8f0);color:var(--slate2);margin-left:auto;margin-right:6px;flex-shrink:0;transition:opacity .2s}.kalk-card.open .kalk-card-score-preview{opacity:0}
.kalk-fav-btn{display:flex;align-items:center;justify-content:center;width:32px;height:32px;border-radius:50%;border:none;background:transparent;cursor:pointer;color:var(--muted);transition:transform .2s,color .15s,background .15s;flex-shrink:0;margin-right:2px;padding:0}
.kalk-fav-btn:hover{background:var(--bg3,#f1f5f9);color:#f59e0b}
.kalk-fav-btn.active{color:#f59e0b}
.kalk-fav-btn svg{transition:fill .2s,stroke .2s,transform .2s}
.kalk-fav-btn:active svg{transform:scale(1.35)}
.fav-count-badge{display:inline-flex;align-items:center;justify-content:center;min-width:17px;height:17px;padding:0 5px;border-radius:99px;background:#f59e0b;color:white;font-size:10px;font-weight:700;line-height:1;margin-left:4px;vertical-align:middle}
.kalk-cat-btn.active .fav-count-badge{background:rgba(255,255,255,.35);color:white}
.kalk-card-body{padding:0 16px;max-height:0;overflow:hidden;transition:max-height .3s ease,padding .2s ease}.kalk-card-body.open{padding:14px 16px;max-height:2000px}
.kalk-field{margin-bottom:11px}
.kalk-lbl{font-size:10.5px;font-weight:700;color:var(--slate2);margin-bottom:4px;text-transform:uppercase;letter-spacing:.04em;display:flex;align-items:center;gap:5px}
.kalk-lbl .unit{font-size:10px;color:var(--muted);font-weight:400;text-transform:none;letter-spacing:0}
.kalk-inp{width:100%;padding:8px 11px;border:1.5px solid var(--border2);border-radius:8px;font-size:13px;background:white;color:var(--slate);outline:none;transition:.15s;-webkit-appearance:none}
.kalk-inp:focus{border-color:var(--teal);box-shadow:0 0 0 3px rgba(13,148,136,.1)}
.kalk-sel{width:100%;padding:8px 11px;border:1.5px solid var(--border2);border-radius:8px;font-size:13px;background:white;color:var(--slate);outline:none;transition:.15s;cursor:pointer;-webkit-appearance:none;appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%2394a3b8' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 10px center;padding-right:30px}
.kalk-sel:focus{border-color:var(--teal);box-shadow:0 0 0 3px rgba(13,148,136,.1)}
.kalk-row2{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.kalk-row3{display:grid;grid-template-columns:1fr 1fr 1fr;gap:8px}
.kalk-result{margin-top:10px;padding:13px 15px;border-radius:10px;background:var(--bg2);border:1.5px solid var(--border);text-align:center}
.kalk-result-score{font-size:26px;font-weight:800;line-height:1.2}
.kalk-result-interp{font-size:12px;font-weight:700;margin-top:3px}
.kalk-result-detail{font-size:11px;color:var(--muted);margin-top:5px;line-height:1.5}
.kalk-result.kr-green{background:#F0FDF4;border-color:#86efac}
.kalk-result.kr-green .kalk-result-score,.kalk-result.kr-green .kalk-result-interp{color:#15803D}
.kalk-result.kr-yellow{background:#FEFCE8;border-color:#fde047}
.kalk-result.kr-yellow .kalk-result-score,.kalk-result.kr-yellow .kalk-result-interp{color:#854d0e}
.kalk-result.kr-orange{background:#FFF7ED;border-color:#fed7aa}
.kalk-result.kr-orange .kalk-result-score,.kalk-result.kr-orange .kalk-result-interp{color:#c2410c}
.kalk-result.kr-red{background:#FEF2F2;border-color:#fecaca}
.kalk-result.kr-red .kalk-result-score,.kalk-result.kr-red .kalk-result-interp{color:#b91c1c}
.kalk-result.kr-blue{background:#EFF6FF;border-color:#bfdbfe}
.kalk-result.kr-blue .kalk-result-score,.kalk-result.kr-blue .kalk-result-interp{color:#1d4ed8}
.kalk-result.kr-purple{background:#F5F3FF;border-color:#c4b5fd}
.kalk-result.kr-purple .kalk-result-score,.kalk-result.kr-purple .kalk-result-interp{color:#5b21b6}
.kalk-result.kr-teal{background:#F0FDFA;border-color:#99f6e4}
.kalk-result.kr-teal .kalk-result-score,.kalk-result.kr-teal .kalk-result-interp{color:#0F766E}
/* ── Bare-class aliases (kompat fungsi calc lama yg set 'green'/'red'/dll tanpa prefix kr-) ── */
.kalk-result.green{background:#F0FDF4;border-color:#86efac}
.kalk-result.green .kalk-result-score,.kalk-result.green .kalk-result-interp{color:#15803D}
.kalk-result.yellow{background:#FEFCE8;border-color:#fde047}
.kalk-result.yellow .kalk-result-score,.kalk-result.yellow .kalk-result-interp{color:#854d0e}
.kalk-result.orange{background:#FFF7ED;border-color:#fed7aa}
.kalk-result.orange .kalk-result-score,.kalk-result.orange .kalk-result-interp{color:#c2410c}
.kalk-result.red{background:#FEF2F2;border-color:#fecaca}
.kalk-result.red .kalk-result-score,.kalk-result.red .kalk-result-interp{color:#b91c1c}
.kalk-result.blue{background:#EFF6FF;border-color:#bfdbfe}
.kalk-result.blue .kalk-result-score,.kalk-result.blue .kalk-result-interp{color:#1d4ed8}
.kalk-result.purple{background:#F5F3FF;border-color:#c4b5fd}
.kalk-result.purple .kalk-result-score,.kalk-result.purple .kalk-result-interp{color:#5b21b6}
.kalk-result.teal{background:#F0FDFA;border-color:#99f6e4}
.kalk-result.teal .kalk-result-score,.kalk-result.teal .kalk-result-interp{color:#0F766E}
/* ── Saran tindakan keperawatan (protokol + SIKI) ── */
.kalk-result-action{font-size:11px;margin-top:8px;padding:8px 10px;border-radius:8px;background:rgba(13,148,136,.07);border:1px dashed rgba(13,148,136,.35);color:var(--slate2);text-align:left;line-height:1.55}
.kalk-result-action:empty{display:none}
.kalk-result-action b{color:var(--teal)}
.kalk-result-action .siki-tag{display:inline-block;font-size:10px;font-weight:700;color:#0F766E;background:rgba(13,148,136,.12);border-radius:5px;padding:1px 6px;margin:2px 3px 0 0}
[data-theme="dark"] .kalk-result-action{background:rgba(45,212,191,.08);border-color:rgba(45,212,191,.3);color:#B0BECE}
/* ── Checkbox kriteria (Wells dll) ── */
.kalk-check{margin-bottom:7px}
.kalk-chk-lbl{display:flex;align-items:center;gap:8px;font-size:12px;color:var(--slate2);cursor:pointer;line-height:1.4}
.kalk-chk-lbl input{width:16px;height:16px;accent-color:var(--teal);flex-shrink:0;cursor:pointer}
.kalk-chk-pt{margin-left:auto;font-size:10px;font-weight:700;color:#b45309;background:rgba(180,83,9,.1);border-radius:5px;padding:1px 6px;flex-shrink:0}
[data-theme="dark"] .kalk-chk-lbl{color:#B0BECE}
/* ── Toggle Maju/Balik (drip) ── */
.kalk-toggle{display:flex;gap:6px;margin-bottom:11px;background:var(--bg2);border-radius:10px;padding:4px}
.kalk-toggle-btn{flex:1;border:none;background:transparent;border-radius:8px;padding:7px 6px;font-size:12px;font-weight:700;color:var(--slate3);cursor:pointer;transition:.15s;line-height:1.3;text-align:center}
.kalk-toggle-btn span{display:block;font-size:9.5px;font-weight:500;color:var(--muted);margin-top:1px}
.kalk-toggle-btn.active{background:white;color:var(--teal);box-shadow:0 1px 3px rgba(0,0,0,.08)}
.kalk-toggle-btn.active span{color:var(--teal)}
.kalk-hint{font-size:11px;color:var(--muted);background:rgba(13,148,136,.06);border-radius:8px;padding:7px 10px;margin-bottom:10px;line-height:1.5}
.kalk-hint b{color:var(--teal)}
[data-theme="dark"] .kalk-toggle-btn.active{background:#2D3D52}
[data-theme="dark"] .kalk-hint{background:rgba(45,212,191,.08);color:#B0BECE}
/* ── Sliding scale table + hipoglikemia (insulin) ── */
.kalk-subtitle{font-size:12px;font-weight:700;color:var(--slate2);margin:14px 0 4px}
.kalk-ss-table{width:100%;border-collapse:collapse;font-size:11px;margin-top:4px;border:1px solid var(--border);border-radius:8px;overflow:hidden}
.kalk-ss-table th{background:var(--bg2);padding:5px 4px;font-size:10px;font-weight:700;color:var(--slate3);text-align:center;border-bottom:1px solid var(--border)}
.kalk-ss-table th span{font-weight:500;font-size:9px;color:var(--muted)}
.kalk-ss-table td{padding:5px 6px;text-align:center;border-bottom:1px solid var(--border);color:var(--slate2)}
.kalk-ss-table td:first-child{font-weight:600;color:var(--slate);text-align:left;background:var(--bg2)}
.kalk-ss-table tr:last-child td{border-bottom:none}
.kalk-ss-table tr.ss-active td{background:rgba(13,148,136,.14);color:var(--teal);font-weight:700}
.kalk-ss-table tr.ss-active td:first-child{background:rgba(13,148,136,.2)}
.kalk-hypo-box{display:grid;gap:6px;margin-top:4px}
.kalk-hypo-step{font-size:11px;line-height:1.5;color:var(--slate2);background:rgba(220,38,38,.06);border:1px solid rgba(220,38,38,.25);border-radius:8px;padding:8px 10px}
.kalk-hypo-step b{color:#b91c1c}
[data-theme="dark"] .kalk-ss-table th,[data-theme="dark"] .kalk-ss-table td:first-child{background:#2D3D52}
[data-theme="dark"] .kalk-hypo-step{color:#B0BECE}
.kalk-result-table{width:100%;border-collapse:collapse;font-size:11px;margin-top:8px}
.kalk-result-table td{padding:4px 8px;border-bottom:1px solid var(--border)}
.kalk-result-table td:first-child{color:var(--muted);width:45%}
.kalk-result-table td:last-child{font-weight:700;color:var(--slate)}
.kalk-bga-row{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-bottom:8px}
.kalk-empty{grid-column:1/-1;text-align:center;padding:60px 20px;color:var(--muted)}
.kalk-empty-icon{font-size:48px;margin-bottom:12px}
[data-theme="dark"] .kalk-card{background:#243244;border-color:#2E3E52}
[data-theme="dark"] .kalk-card-head{background:#2D3D52;border-color:#2E3E52}
[data-theme="dark"] .kalk-cat-bar{background:#1a2535;border-color:#2E3E52}
[data-theme="dark"] .kalk-cat-btn{background:#243244;border-color:#2E3E52;color:#B0BECE}
[data-theme="dark"] .kalk-fav-btn:hover{background:#2D3D52}
[data-theme="dark"] .kalk-cat-btn.active .fav-count-badge{background:rgba(255,255,255,.25)}
[data-theme="dark"] .kalk-inp,[data-theme="dark"] .kalk-sel{background:#2D3D52;border-color:#3E5068;color:#E2EBF5}
[data-theme="dark"] .kalk-result{background:#2D3D52;border-color:#3E5068}

/* ========== FAVORIT ========== */
.fav-btn{background:none;border:none;cursor:pointer;font-size:16px;padding:3px 6px;border-radius:6px;transition:.15s;flex-shrink:0;line-height:1;opacity:.55}
.fav-btn:hover{opacity:1;transform:scale(1.2)}
.fav-btn.faved{opacity:1;filter:drop-shadow(0 0 3px #f59e0b)}
.fav-page-header{background:linear-gradient(135deg,#f59e0b,#d97706);color:white;padding:24px 24px 20px;border-radius:0}
.fav-page-header h1{font-size:19px;font-weight:800;margin:0 0 4px}
.fav-page-header p{font-size:12.5px;opacity:.85;margin:0}
.fav-tabs{display:flex;gap:0;border-bottom:1px solid var(--border);background:white;padding:0 24px}
.fav-tab{padding:10px 18px;font-size:13px;font-weight:600;color:var(--muted);cursor:pointer;border-bottom:2.5px solid transparent;transition:.15s;white-space:nowrap}
.fav-tab:hover{color:var(--slate)}
.fav-tab.active{color:#d97706;border-bottom-color:#d97706}
.fav-body{padding:16px 24px}
.fav-empty{text-align:center;padding:60px 20px;color:var(--muted)}
.fav-empty-icon{font-size:44px;margin-bottom:12px}
.fav-empty-title{font-size:15px;font-weight:600;color:var(--slate2);margin-bottom:6px}
.fav-empty-sub{font-size:12.5px;line-height:1.5}
.fav-item{background:white;border:1.5px solid var(--border);border-radius:12px;padding:14px 16px;margin-bottom:10px;display:flex;align-items:flex-start;gap:12px;transition:.15s}
.fav-item:hover{box-shadow:0 3px 12px rgba(0,0,0,.08);border-color:var(--teal-light)}
.fav-item-icon{width:38px;height:38px;border-radius:9px;display:flex;align-items:center;justify-content:center;font-size:18px;flex-shrink:0}
.fav-item-body{flex:1;min-width:0}
.fav-item-kode{font-size:10px;font-weight:700;color:var(--muted);margin-bottom:2px}
.fav-item-nama{font-size:13.5px;font-weight:700;color:var(--slate);margin-bottom:3px;line-height:1.3}
.fav-item-sub{font-size:11.5px;color:var(--slate3);line-height:1.4}
.fav-item-actions{display:flex;gap:6px;flex-shrink:0}
[data-theme="dark"] .fav-item{background:#243244;border-color:#2E3E52}
[data-theme="dark"] .fav-tabs{background:#1a2535;border-color:#2E3E52}
/* ========== TEMPLATE ASKEP ========== */
.tmpl-bar{display:flex;align-items:center;justify-content:space-between;padding:12px 16px;background:var(--bg2);border-bottom:1px solid var(--border)}
.tmpl-bar-title{font-size:13px;font-weight:700;color:var(--slate)}
.tmpl-list{padding:16px}
.tmpl-card{background:white;border:1.5px solid var(--border);border-radius:12px;padding:14px 16px;margin-bottom:10px;display:flex;align-items:center;gap:12px;cursor:pointer;transition:.15s}
.tmpl-card:hover{box-shadow:0 3px 12px rgba(0,0,0,.08);border-color:var(--teal)}
.tmpl-card-icon{width:40px;height:40px;border-radius:10px;display:flex;align-items:center;justify-content:center;font-size:20px;flex-shrink:0}
.tmpl-card-name{font-size:13.5px;font-weight:700;color:var(--slate)}
.tmpl-card-sub{font-size:11.5px;color:var(--muted);margin-top:2px}
.tmpl-card-actions{display:flex;gap:6px;margin-left:auto}
[data-theme="dark"] .tmpl-card{background:#243244;border-color:#2E3E52}
/* ========== LP BUILDER ========== */
.lp-page-header{background:linear-gradient(135deg,#7c3aed,#4f46e5);color:white;padding:24px 24px 20px}
.lp-page-header h1{font-size:19px;font-weight:800;margin:0 0 4px}
.lp-page-header p{font-size:12.5px;opacity:.85;margin:0}
.lp-body{display:grid;grid-template-columns:300px 1fr;gap:0;height:calc(100vh - 140px);min-height:500px}
.lp-form-panel{border-right:1px solid var(--border);overflow:hidden;background:var(--bg2);display:flex;flex-direction:column}
.lp-form-panel-scroll{flex:1;overflow-y:auto;min-height:0}
.lp-preview-panel{overflow:hidden;background:white}
.lp-form-section{padding:14px 16px;border-bottom:1px solid var(--border)}
.lp-form-section-title{font-size:10.5px;font-weight:700;text-transform:uppercase;letter-spacing:.07em;color:var(--muted);margin-bottom:10px;display:flex;align-items:center;gap:6px}
.lp-field{margin-bottom:10px}
.lp-label{font-size:11px;font-weight:600;color:var(--slate2);margin-bottom:4px;display:block}
.lp-inp{width:100%;padding:7px 10px;border:1.5px solid var(--border2);border-radius:8px;font-size:12.5px;background:white;color:var(--slate);outline:none;transition:.15s;resize:vertical}
.lp-inp:focus{border-color:var(--purple);box-shadow:0 0 0 3px rgba(124,58,237,.1)}
.lp-inp-sm{padding:6px 9px;font-size:12px}
.lp-sel{width:100%;padding:7px 10px;border:1.5px solid var(--border2);border-radius:8px;font-size:12.5px;background:white;color:var(--slate);outline:none;cursor:pointer}
.lp-sel:focus{border-color:var(--purple);box-shadow:0 0 0 3px rgba(124,58,237,.1)}
.lp-preview-empty{text-align:center;padding:60px 20px;color:var(--muted)}
.lp-ref-tabs{display:flex;gap:4px;padding:8px 12px 0;background:var(--bg2);border-bottom:1px solid var(--border);flex-wrap:wrap;flex-shrink:0}
.lp-ref-tab{padding:5px 12px;border-radius:6px 6px 0 0;font-size:12px;font-weight:500;cursor:pointer;color:var(--muted);background:none;border:none;transition:.15s;white-space:nowrap}
.lp-ref-tab:hover{color:var(--slate);background:var(--bg)}
.lp-ref-tab.active{color:var(--purple,#7c3aed);background:white;font-weight:600;box-shadow:0 -2px 0 var(--purple,#7c3aed) inset}
[data-theme="dark"] .lp-ref-tab.active{background:#1a2332}
.lp-ref-content{flex:1;overflow-y:auto}
.lp-sdki-card{background:var(--bg2);border-radius:9px;padding:12px 14px;margin-bottom:8px;border:1px solid var(--border)}
.lp-sdki-card-title{font-size:12.5px;font-weight:700;color:var(--slate);margin-bottom:6px}
.lp-sdki-chip{display:inline-block;font-size:10.5px;background:#e0f2fe;color:#0369a1;border-radius:4px;padding:1px 6px;margin:2px 2px 0 0;font-weight:500}
.lp-siki-card{background:var(--bg2);border-radius:9px;padding:12px 14px;margin-bottom:8px;border:1px solid var(--border)}
.lp-siki-badge{font-size:10px;font-weight:600;padding:1px 6px;border-radius:4px;margin-bottom:4px;display:inline-block}
.lp-preview-doc{max-width:720px;margin:0 auto;font-family:'Segoe UI',Arial,sans-serif;font-size:13px;line-height:1.7;color:#1e293b}
.lp-doc-title{text-align:center;font-size:17px;font-weight:800;text-transform:uppercase;letter-spacing:.5px;margin-bottom:4px;color:#1e293b}
.lp-doc-sub{text-align:center;font-size:11.5px;color:#64748b;margin-bottom:20px;padding-bottom:14px;border-bottom:2.5px solid #7c3aed}
.lp-doc-section{margin-bottom:18px}
.lp-doc-section-title{font-size:13px;font-weight:700;text-transform:uppercase;letter-spacing:.04em;color:#7c3aed;border-left:3.5px solid #7c3aed;padding-left:10px;margin-bottom:8px}
.lp-doc-subsection{font-size:12px;font-weight:700;color:#334155;margin:10px 0 4px}
.lp-doc-text{font-size:12.5px;color:#475569;margin:0 0 6px;line-height:1.7}
.lp-doc-table{width:100%;border-collapse:collapse;margin:8px 0;font-size:12px}
.lp-doc-table th{background:#f5f3ff;padding:6px 10px;border:1px solid #c4b5fd;font-weight:700;color:#4c1d95;text-align:left}
.lp-doc-table td{padding:6px 10px;border:1px solid #ddd6fe;color:#334155;vertical-align:top}
.lp-doc-tag{display:inline-block;background:#f5f3ff;color:#5b21b6;border:1px solid #ddd6fe;border-radius:12px;padding:2px 10px;font-size:11px;margin:2px 2px 2px 0}
.lp-action-bar{padding:12px 16px;border-top:1px solid var(--border);background:white;display:flex;gap:8px;flex-wrap:wrap;position:sticky;bottom:0;z-index:10;flex-shrink:0}
@keyframes lpProgress{0%{transform:translateX(-100%)}50%{transform:translateX(0%)}100%{transform:translateX(100%)}}
@media(max-width:768px){.lp-body{grid-template-columns:1fr}.lp-preview-panel{display:none}.lp-body.show-preview .lp-form-panel{display:none}.lp-body.show-preview .lp-preview-panel{display:block}}
[data-theme="dark"] .lp-form-panel{background:#1a2535}
[data-theme="dark"] .lp-inp,[data-theme="dark"] .lp-sel{background:#243244;border-color:#3E5068;color:#E2EBF5}
[data-theme="dark"] .lp-preview-panel{background:#243244}
[data-theme="dark"] .lp-ref-tabs{background:#1a2332;border-bottom-color:#2d3f55}
[data-theme="dark"] .lp-ref-tab.active{background:#243244;color:#2DD4BF;box-shadow:0 -2px 0 #2DD4BF inset}
[data-theme="dark"] .lp-preview-doc{color:#E2EBF5}
/* ========== DASHBOARD ========== */
.quick-actions{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-bottom:20px;overflow:visible}
.qa-card{background:white;border:1px solid var(--border);border-radius:var(--r2);padding:16px;cursor:pointer;display:flex;align-items:center;gap:12px}
.qa-icon{width:40px;height:40px;border-radius:10px;display:flex;align-items:center;justify-content:center;font-size:20px;flex-shrink:0}
.qa-text-title{font-size:13px;font-weight:600;color:var(--slate)}
.qa-text-sub{font-size:11px;color:var(--muted);margin-top:2px}

.recent-list{background:white;border:1px solid var(--border);border-radius:var(--r2);overflow:hidden}
.recent-header{padding:12px 16px;border-bottom:1px solid var(--border);font-size:13px;font-weight:600;color:var(--slate);display:flex;align-items:center;justify-content:space-between}
.recent-item{padding:11px 16px;border-bottom:1px solid var(--border);display:flex;align-items:center;gap:10px;cursor:pointer;transition:.1s}
.recent-item:last-child{border-bottom:none}
.recent-item:hover{background:var(--bg)}
.recent-item-title{font-size:13px;font-weight:500;color:var(--slate)}
.recent-item-sub{font-size:11px;color:var(--muted);margin-top:1px}
.recent-item-date{font-size:11px;color:var(--muted);margin-left:auto;white-space:nowrap}

/* ========== RESPONSIVE ========== */
/* =========================================================
   RESPONSIVE — NurseKit Mobile-First Overhaul
   Breakpoints: 900px tablet | 768px phablet | 480px phone
   ========================================================= */

/* ── 900px: tablet landscape ─────────────────────────────── */
@media(max-width:900px){
  .sidebar{width:200px}
  .askep-layout{grid-template-columns:1fr;height:auto}
  .pathway-layout{grid-template-columns:1fr;height:auto}
  .stat-grid{grid-template-columns:1fr 1fr}
  /* Kalkulator: 2 kolom di tablet */
  .kalk-body{grid-template-columns:repeat(2,1fr);padding:16px}
}

/* ── 768px: tablet portrait / phablet ───────────────────── */
@media(max-width:768px){
  /* Layout */
  .sidebar{width:180px}
  .topbar{padding:10px 16px}
  .page{padding:16px}
  .page-title{font-size:15px}
  .search-wrap{max-width:100%}

  /* LP Builder */
  .lp-body{grid-template-columns:1fr}
  .lp-preview-panel{display:none}
  .lp-body.show-preview .lp-form-panel{display:none}
  .lp-body.show-preview .lp-preview-panel{display:block}
  .lp-action-bar{flex-wrap:wrap;gap:6px}
  .lp-action-bar .btn{flex:1;min-width:120px;justify-content:center}

  /* Wizard */
  .wform{flex:0 0 100%;border-right:none}
  .wresult{display:none}
  .wizard-steps{padding:8px 14px;gap:0;overflow-x:auto}
  .wstep-label{font-size:9px;padding:0 4px}
  .wstep-dot{width:26px;height:26px;font-size:10px}
  .wstep-line{width:14px}
  .wfooter{padding:10px 16px;flex-wrap:wrap;gap:8px}
  .wfooter-info{width:100%;text-align:center;order:-1;font-size:12px}

  /* Forms */
  .form-row{grid-template-columns:1fr}
  .ttv-anak-grid{grid-template-columns:1fr 1fr}
  .persalinan-grid{grid-template-columns:1fr 1fr}
  .b16-grid{grid-template-columns:1fr 1fr}

  /* Touch-friendly buttons */
  .btn{padding:10px 16px;min-height:44px;font-size:13px}
  .btn-sm{padding:9px 14px;min-height:40px;font-size:12px}

  /* Dashboard */
  .stat-grid{grid-template-columns:1fr 1fr}
  .quick-actions{grid-template-columns:1fr 1fr!important} /* override inline repeat(4,1fr) */
  .qa-card{padding:12px;gap:10px}

  /* SDKI/SIKI/SLKI */
  .criteria-row{grid-template-columns:1fr}

  /* Kalkulator page */
  .kalk-page-header{padding:20px 16px 18px}
  .kalk-page-header h1{font-size:18px}
  .kalk-page-header p{font-size:12px;margin-bottom:12px}
  .kalk-search-box{max-width:100%}
  .kalk-cat-bar{padding:12px 16px 0;gap:6px}
  .kalk-cat-btn{padding:7px 13px;font-size:11.5px}
  .kalk-body{grid-template-columns:repeat(2,1fr);padding:14px 16px;gap:12px}
  .kalk-card-head{padding:12px 14px}
  .kalk-card-icon{width:36px;height:36px;font-size:18px}
  .kalk-card-title{font-size:13px}
  .kalk-card-body{padding:12px 14px}
  .kalk-inp,.kalk-sel{padding:9px 11px;font-size:14px} /* bigger tap targets */
  .kalk-result{padding:12px 12px}
  .kalk-result-score{font-size:24px}
  .kalk-result-detail{font-size:10.5px}
}

/* ── 480px: phone ─────────────────────────────────────────── */
@media(max-width:480px){
  /* iOS Safari: prevent auto-zoom on input focus (font-size < 16px triggers zoom) */
  input,select,textarea{font-size:16px!important}
  /* App shell */
  .sidebar{display:none}
  .app{flex-direction:column}
  .main{padding-bottom:68px} /* space for bottom nav */
  /* Pages with padding:0 need inner scroll padding for bottom nav */
  #page-kalkulator,#page-favorit,#page-lp{padding-bottom:80px!important}
  #page-askep .askep-wizard,#page-askep-anak .askep-wizard,#page-askep-maternitas .askep-wizard,#page-askep-jiwa .askep-wizard{padding-bottom:80px}
  #page-kalkulator #kalk-page-inner{padding-bottom:80px}
  #page-lp .lp-form-panel{padding-bottom:80px}
  #page-lp .lp-preview-panel{padding-bottom:80px}
  #page-favorit{padding-bottom:80px!important}

  /* Topbar */
  .topbar{padding:10px 12px;gap:8px}
  .page-title{font-size:14px;font-weight:600}
  .search-wrap{display:none}

  /* Page padding */
  .page{padding:12px}

  /* Wizard — kurangi topbar(54) + bottom-nav(58) + sedikit buffer(4) */
  .wizard-wrap{height:calc(100dvh - 54px - 62px);min-height:0}
  .wform{padding:14px 12px}
  .wstep-label{display:none}
  .wstep-line{width:8px}
  .wstep-dot{width:24px;height:24px;font-size:10px}
  .wfooter{padding:8px 12px;gap:6px}
  .wfooter div{gap:6px}

  /* ASKEP Jiwa — footer 7 tombol, susun 2 baris kompak di HP portrait */
  #page-askep-jiwa .wfooter{flex-direction:row;flex-wrap:wrap;align-items:center;padding:6px 10px;gap:4px}
  #page-askep-jiwa .wfooter .wfooter-info{width:100%;text-align:center;order:-1;font-size:11px;padding:0;margin-bottom:2px}
  #page-askep-jiwa .wfooter > div{display:grid;grid-template-columns:repeat(4,1fr);gap:4px;flex:1;min-width:0}
  #page-askep-jiwa .wfooter > button{flex-shrink:0}
  #page-askep-jiwa .wfooter .btn-sm{padding:6px 4px;font-size:10px;min-height:32px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  #page-askep-jiwa .wfooter > #wj-prev,
  #page-askep-jiwa .wfooter > #wj-next,
  #page-askep-jiwa .wfooter > #wj-finish{padding:8px 10px;font-size:11px;min-height:34px}

  /* Forms */
  .form-row{grid-template-columns:1fr}
  .ttv-anak-grid{grid-template-columns:1fr 1fr}
  .b16-grid{grid-template-columns:1fr 1fr}
  .persalinan-grid{grid-template-columns:1fr 1fr}

  /* Buttons — fat thumbs */
  .btn{padding:11px 14px;min-height:46px;font-size:13px}
  .btn-sm{padding:9px 12px;min-height:40px;font-size:12px}
  .btn-xs{padding:7px 10px;min-height:34px;font-size:11px}

  /* Dashboard */
  .stat-grid{grid-template-columns:1fr 1fr}
  .quick-actions{grid-template-columns:1fr 1fr!important} /* override inline repeat(4,1fr) */
  .qa-card{padding:10px;gap:8px}
  .qa-icon{width:34px;height:34px;font-size:17px}
  .qa-text-title{font-size:12px}
  .qa-text-sub{font-size:10px}
  .recent-item{padding:10px 12px}

  /* Modals — bottom sheet style */
  .modal-overlay{align-items:flex-end}
  .modal,.modal-box{width:100%!important;max-width:100%!important;border-bottom-left-radius:0;border-bottom-right-radius:0;border-radius:20px 20px 0 0;max-height:88vh}
  .modal-footer{flex-direction:column;gap:8px}
  .modal-footer .btn{width:100%;justify-content:center}

  /* SDKI/SIKI/SLKI */
  .card-grid,.diag-list{grid-template-columns:1fr}
  .sdki-card,.siki-card,.slki-card{padding:12px 14px}
  .criteria-row{grid-template-columns:1fr}
  .tag-grid{gap:4px}
  .tag{font-size:10px;padding:3px 8px}

  /* Header bar anak & maternitas */
  .anak-header-bar{padding:10px 12px;gap:8px;flex-wrap:wrap}
  .anak-header-title{font-size:14px}
  .anak-header-sub{font-size:11px}
  .anak-badge{font-size:9px;padding:2px 6px}

  /* Tables */
  .eval-soapier,.rp-info-table{font-size:11px}
  table{max-width:100%;overflow-x:auto;display:block;-webkit-overflow-scrolling:touch}

  /* LP Builder */
  .lp-action-bar{padding:8px 12px;gap:6px}
  .lp-action-bar .btn{flex:1;min-width:0;padding:9px 8px;font-size:12px;justify-content:center}
  .lp-action-bar .btn span{display:none} /* teks hilang, icon saja */

  /* KALKULATOR — full single column on phone */
  .kalk-page-header{padding:16px 12px 14px}
  .kalk-page-header h1{font-size:16px;margin-bottom:2px}
  .kalk-page-header p{font-size:11.5px;margin-bottom:10px}
  .kalk-search-box{padding:7px 12px}
  .kalk-search-box input{font-size:13px}
  .kalk-cat-bar{padding:10px 12px 0;gap:5px;flex-wrap:nowrap;overflow-x:auto;-webkit-overflow-scrolling:touch}
  .kalk-cat-btn{padding:6px 12px;font-size:11px;border-radius:16px}
  .kalk-body{grid-template-columns:1fr;padding:12px;gap:10px}
  .kalk-card{border-radius:12px}
  .kalk-card-head{padding:12px 14px 10px}
  .kalk-card-icon{width:34px;height:34px;font-size:17px}
  .kalk-card-title{font-size:13px}
  .kalk-card-sub{font-size:10.5px}
  .kalk-card-body{padding:12px 14px}
  .kalk-field{margin-bottom:10px}
  .kalk-lbl{font-size:10px;letter-spacing:.03em}
  .kalk-inp,.kalk-sel{padding:11px 12px;font-size:15px;border-radius:9px} /* large tap target, legible */
  .kalk-row2{gap:6px}
  .kalk-bga-row{grid-template-columns:1fr 1fr;gap:6px}
  .kalk-result{padding:13px 12px;margin-top:8px}
  .kalk-result-score{font-size:28px;font-weight:800}
  .kalk-result-interp{font-size:12px}
  .kalk-result-detail{font-size:11px;white-space:pre-line}

  /* Prioritas */
  .prioritas-item .form-control[style*="width:120px"]{width:90px!important}
  .wm-pr-tipe{width:90px}

  /* Pathway — full width */
  .pw-canvas-wrap{touch-action:none}
}

/* ========== BOTTOM NAVIGATION (mobile) ========== */
.bottom-nav{
  display:none;
  position:fixed;bottom:0;left:0;right:0;
  background:var(--white);border-top:1px solid var(--border);
  z-index:150;padding:0;
  box-shadow:0 -4px 20px rgba(0,0,0,.1);
  /* safe area for iPhone home indicator */
  padding-bottom:env(safe-area-inset-bottom,0px);
}
.bottom-nav-items{
  display:flex;align-items:stretch;justify-content:space-around;
  height:58px;
}
.bnav-item{
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  flex:1;gap:2px;cursor:pointer;padding:6px 2px;
  border:none;background:transparent;
  color:var(--muted);font-size:9.5px;font-weight:500;
  transition:color .15s,transform .1s;
  -webkit-tap-highlight-color:transparent;
  user-select:none;
}
.bnav-item:active{transform:scale(.93)}
.bnav-item .bnav-icon{font-size:21px;line-height:1;transition:transform .15s}
.bnav-item.active{color:var(--teal)}
.bnav-item.active .bnav-icon{transform:scale(1.1)}
.bnav-label{font-size:9px;font-weight:600;line-height:1;margin-top:1px}
/* More menu — bottom sheet */
.bnav-more-menu{
  display:none;position:fixed;bottom:0;left:0;right:0;
  background:var(--white);border-radius:20px 20px 0 0;
  padding:0 16px calc(env(safe-area-inset-bottom,0px) + 68px);z-index:149;
  box-shadow:0 -8px 40px rgba(0,0,0,.18);
  animation:bnav-sheet-in .25s cubic-bezier(.32,.72,0,1);
}
@keyframes bnav-sheet-in{from{transform:translateY(100%)}to{transform:translateY(0)}}
.bnav-more-handle{width:36px;height:4px;border-radius:2px;background:var(--border2);margin:10px auto 14px;flex-shrink:0}
.bnav-more-title{font-size:12px;font-weight:700;color:var(--muted);text-transform:uppercase;letter-spacing:.06em;margin-bottom:12px}
.bnav-more-grid{
  display:grid;grid-template-columns:1fr 1fr 1fr;gap:8px;
}
.bnav-more-item{
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:5px;
  padding:14px 8px;border-radius:12px;background:var(--bg);
  cursor:pointer;font-size:11.5px;font-weight:600;color:var(--slate);
  border:1.5px solid var(--border);text-align:center;
  -webkit-tap-highlight-color:transparent;
  transition:background .12s,border-color .12s;
  user-select:none;
}
.bnav-more-item span:first-child{font-size:22px;line-height:1}
.bnav-more-item:active{background:var(--teal-light);border-color:var(--teal)}
/* overlay backdrop */
.bnav-more-backdrop{
  display:none;position:fixed;inset:0;background:rgba(0,0,0,.35);z-index:148;
}
@media(max-width:768px){
  .bottom-nav{display:block}
  .sidebar{display:none}
  /* Semua .page dapat padding-bottom agar konten tidak tertutup bottom nav */
  .page{padding-bottom:84px!important}
  #page-kalkulator,#page-favorit{padding-bottom:84px!important}
  #page-lp .lp-form-panel,#page-lp .lp-preview-panel{padding-bottom:84px}
  #page-wizard,#page-anak,#page-maternitas,#page-askep-jiwa{padding-bottom:84px!important}
  #page-wizard .form-section:last-child,#page-anak .form-section:last-child,#page-maternitas .form-section:last-child{margin-bottom:84px}
}


/* ╔══════════════════════════════════════════════════════════════╗
   ║          MOBILE UX IMPROVEMENTS                              ║
   ╚══════════════════════════════════════════════════════════════╝ */

/* ── 1. Bottom nav more-menu: scrollable, indicator ── */
.bnav-more-menu{
  max-height:70vh;
  overflow-y:auto;
  -webkit-overflow-scrolling:touch;
  padding-bottom:calc(env(safe-area-inset-bottom,0px) + 80px);
}
.bnav-more-scroll-hint{
  text-align:center;font-size:10px;color:var(--muted);
  padding:4px 0 8px;letter-spacing:.04em;
}
.bnav-more-grid{
  display:grid;grid-template-columns:1fr 1fr 1fr;gap:8px;
  padding-bottom:8px;
}
.bnav-more-item{
  min-height:72px;
}

/* ── 2. Topbar landscape toggle ── */
#ls-sidebar-toggle{
  position:relative;top:auto;left:auto;transform:none;
  background:transparent;color:var(--slate);
  border:1px solid var(--border);border-radius:8px;
  padding:6px 8px;font-size:18px;
  display:none;align-items:center;justify-content:center;
  box-shadow:none;flex-direction:row;
}
#ls-sidebar-toggle.ls-open{left:auto}
/* Global default: backdrop always hidden unless explicitly opened */
#ls-sidebar-backdrop{display:none}
@media(orientation:landscape) and (max-width:900px){
  #ls-sidebar-toggle{display:flex!important}
  .sidebar{
    position:fixed;top:0;left:0;height:100%;
    transform:translateX(-100%);
    transition:transform .25s cubic-bezier(.32,.72,0,1);
    z-index:200;width:200px!important;display:block!important;
  }
  .sidebar.ls-open{transform:translateX(0)!important}
  #ls-sidebar-backdrop{position:fixed;inset:0;background:rgba(0,0,0,.4);z-index:199;display:none}
  #ls-sidebar-backdrop.ls-open{display:block}
}

/* ── 3. Wizard: progress bar + step counter ── */
@media(max-width:480px){
  .wstep-progress-bar{
    display:flex!important;
    align-items:center;gap:8px;
    padding:8px 16px;
    background:white;border-bottom:1px solid var(--border);
    font-size:12px;color:var(--muted);flex-shrink:0;
  }
  .wstep-progress-track{
    flex:1;height:4px;background:var(--border);border-radius:2px;overflow:hidden;
  }
  .wstep-progress-fill{
    height:100%;background:var(--teal);border-radius:2px;
    transition:width .3s ease;
  }
  .wstep-counter{font-size:11px;font-weight:700;color:var(--teal);white-space:nowrap}
}
.wstep-progress-bar{display:none}

/* ── 4. LP page: panel switch button visible ── */
@media(max-width:768px){
  .lp-mobile-switcher{
    display:flex!important;
    position:sticky;bottom:68px;left:0;right:0;
    background:white;border-top:1px solid var(--border);
    padding:8px 12px;gap:8px;z-index:10;
    box-shadow:0 -4px 12px rgba(0,0,0,.08);
  }
  .lp-mobile-switcher .btn{flex:1;justify-content:center;font-size:12px}
}
.lp-mobile-switcher{display:none}

/* ── 5. Pathway mobile warning banner ── */
.pw-mobile-banner{
  display:none;
  background:linear-gradient(135deg,#fffbeb,#fef3c7);
  border:1.5px solid #f59e0b;border-radius:10px;
  padding:12px 14px;margin:10px 12px 0;
  font-size:12px;color:#92400e;line-height:1.6;
}
@media(max-width:768px){
  .pw-mobile-banner{display:block}
}

/* ── 6. Mobile search: full overlay ── */
#mobile-search-overlay{
  display:none;position:fixed;inset:0;
  background:var(--white);z-index:300;
  flex-direction:column;padding:12px;
  gap:10px;
}
#mobile-search-overlay.active{display:flex}
.mobile-search-bar{
  display:flex;align-items:center;gap:8px;
}
.mobile-search-bar input{
  flex:1;height:44px;border:1.5px solid var(--border);border-radius:10px;
  padding:0 14px;font-size:14px;outline:none;
  background:var(--bg2);
}
.mobile-search-bar input:focus{border-color:var(--teal)}
.mobile-search-results-wrap{
  flex:1;overflow-y:auto;-webkit-overflow-scrolling:touch;
}
@media(max-width:480px){
  #topbar-search-toggle{display:flex!important}
  .search-wrap{display:none!important}
}

/* ── 7. SDKI/SIKI/SLKI cards: readable on mobile ── */
@media(max-width:480px){
  .diag-title{
    font-size:13px!important;line-height:1.5;
    display:-webkit-box;-webkit-line-clamp:3;
    -webkit-box-orient:vertical;overflow:hidden;
  }
  .criteria-item{padding:8px 10px!important;font-size:12px!important}
  .tag{font-size:10px!important;padding:2px 7px!important}
  .action-bar{flex-wrap:wrap;gap:6px}
  .action-bar .btn{flex:1;min-width:100px;justify-content:center;font-size:12px}
}

/* ── 8. Dark mode toggle: in bottom nav more-menu + topbar ── */
.bnav-dark-toggle{
  display:flex;align-items:center;justify-content:space-between;
  padding:12px 16px;border-top:1px solid var(--border);
  font-size:12px;font-weight:600;color:var(--slate);
  cursor:pointer;-webkit-tap-highlight-color:transparent;
}
.bnav-dark-toggle .toggle-pill{
  width:42px;height:24px;background:var(--border2);border-radius:12px;
  position:relative;transition:background .2s;flex-shrink:0;
}
.bnav-dark-toggle .toggle-pill::after{
  content:'';position:absolute;top:3px;left:3px;
  width:18px;height:18px;border-radius:50%;background:white;
  transition:transform .2s;box-shadow:0 1px 4px rgba(0,0,0,.2);
}
[data-theme="dark"] .bnav-dark-toggle .toggle-pill{background:var(--teal)}
[data-theme="dark"] .bnav-dark-toggle .toggle-pill::after{transform:translateX(18px)}

/* ── 9. Kalkulator: collapsible cards ── */
.calc-card.collapsed .calc-body{display:none}
.calc-card-toggle{
  cursor:pointer;user-select:none;
  display:flex;align-items:center;justify-content:space-between;
  width:100%;
}
.calc-card-toggle .calc-chevron{
  font-size:12px;color:var(--muted);transition:transform .2s;margin-left:auto;
}
.calc-card.collapsed .calc-chevron{transform:rotate(-90deg)}
@media(max-width:768px){
  .calc-grid{grid-template-columns:1fr!important}
  .calc-card{border-radius:10px}
  .calc-card .calc-header{border-radius:10px}
  .calc-card.collapsed .calc-header{border-radius:10px}
}

/* ── 10. Tap feedback & loading states ── */
.btn{-webkit-tap-highlight-color:transparent;position:relative;overflow:hidden}
.btn:active::after{
  content:'';position:absolute;inset:0;
  background:rgba(255,255,255,.25);border-radius:inherit;
}
.btn-loading{pointer-events:none;opacity:.75}
.btn-loading::before{
  content:'';display:inline-block;
  width:12px;height:12px;margin-right:6px;
  border:2px solid currentColor;border-top-color:transparent;
  border-radius:50%;animation:btn-spin .6s linear infinite;
  vertical-align:middle;
}
@keyframes btn-spin{to{transform:rotate(360deg)}}

/* Safe area bottom for newer iPhones */
@supports(padding-bottom:env(safe-area-inset-bottom)){
  .bottom-nav{padding-bottom:env(safe-area-inset-bottom)}
  .bnav-more-menu{padding-bottom:calc(env(safe-area-inset-bottom) + 80px)}
}

/* ════════════════════════════════════════════════════════════════ */

/* ========== EMPTY STATE ========== */
.empty{text-align:center;padding:48px 20px;color:var(--muted)}
.empty-icon{font-size:40px;margin-bottom:12px;opacity:.5}
.empty-title{font-size:15px;font-weight:500;color:var(--slate3);margin-bottom:6px}
.empty-sub{font-size:13px}

/* ========== UPDATE NOTIFICATION BANNER ========== */
/* ── Update Banner: floating card top-right, mudah dinotice ── */
#update-banner{
  position:fixed;top:16px;right:16px;z-index:9999;
  background:#fff;
  border:2px solid #F59E0B;
  border-radius:14px;
  padding:14px 16px;
  display:none;flex-direction:column;gap:10px;
  box-shadow:0 8px 32px rgba(0,0,0,.18),0 0 0 4px rgba(245,158,11,.15);
  width:300px;max-width:calc(100vw - 32px);
  animation:upd-drop .35s cubic-bezier(.34,1.56,.64,1);
}
#update-banner.visible{display:flex}
@keyframes upd-drop{from{transform:translateY(-20px) scale(.95);opacity:0}to{transform:translateY(0) scale(1);opacity:1}}
/* Pulsa border agar mata tertarik */
@keyframes upd-pulse{0%,100%{box-shadow:0 8px 32px rgba(0,0,0,.18),0 0 0 4px rgba(245,158,11,.15)}50%{box-shadow:0 8px 32px rgba(0,0,0,.18),0 0 0 8px rgba(245,158,11,.25)}}
#update-banner.visible{animation:upd-drop .35s cubic-bezier(.34,1.56,.64,1),upd-pulse 2s ease-in-out 1s infinite}
/* Badge "BARU" di pojok kiri atas */
#update-banner::before{
  content:'🆕 UPDATE';
  position:absolute;top:-12px;left:12px;
  background:#F59E0B;color:white;
  font-size:9px;font-weight:800;letter-spacing:.08em;
  padding:2px 8px;border-radius:20px;
}
#update-banner .upd-top{display:flex;align-items:flex-start;gap:10px}
#update-banner .upd-icon{font-size:24px;flex-shrink:0;margin-top:1px}
#update-banner .upd-text{flex:1}
#update-banner .upd-text strong{font-size:13px;font-weight:700;color:#1E293B;display:block;margin-bottom:3px}
#update-banner .upd-text span{font-size:11.5px;color:#64748B;line-height:1.5}
#update-banner .upd-close{background:none;border:none;color:#94A3B8;cursor:pointer;font-size:16px;padding:0 2px;flex-shrink:0;line-height:1}
#update-banner .upd-close:hover{color:#475569}
#update-banner .upd-actions{display:flex;gap:8px}
#update-banner .upd-btn{flex:1;padding:8px 0;border-radius:8px;border:none;font-size:12px;font-weight:600;cursor:pointer;transition:opacity .15s}
#update-banner .upd-btn-primary{background:#F59E0B;color:white}
#update-banner .upd-btn-primary:hover{background:#D97706}
#update-banner .upd-btn-dismiss{background:#F1F5F9;color:#64748B}
#update-banner .upd-btn-dismiss:hover{background:#E2E8F0}
@media(max-width:480px){
  #update-banner{top:auto;bottom:16px;right:16px;left:16px;width:auto}
}

/* ========== PRINT ========== */
@media print{
  .sidebar,.topbar,.action-bar,.pw-palette,.pw-toolbar{display:none!important}
  .page{display:block!important;padding:0;overflow:visible}
  .askep-layout{grid-template-columns:1fr;height:auto}
  .card{break-inside:avoid}
}
/* ── Print frame: saat body.printing, sembunyikan semua kecuali frame ── */
#nursekit-print-frame{display:none}
@media print{
  body.printing>*:not(#nursekit-print-frame){display:none!important}
  body.printing #nursekit-print-frame{display:block!important;position:static;width:100%}
}

/* ========== ASKEP WIZARD ========== */
.wizard-wrap{display:flex;flex-direction:column;height:calc(100vh - 62px);overflow:hidden}
.wizard-steps{display:flex;align-items:center;padding:12px 24px;background:white;border-bottom:1px solid var(--border);gap:0;overflow-x:auto;flex-shrink:0}
.wstep{display:flex;align-items:center;gap:0;cursor:pointer;flex-shrink:0}
.wstep-dot{width:28px;height:28px;border-radius:50%;border:2px solid var(--border2);background:white;display:flex;align-items:center;justify-content:center;font-size:11px;font-weight:700;color:var(--muted);transition:.2s;flex-shrink:0}
.wstep-label{font-size:11px;font-weight:500;color:var(--muted);white-space:nowrap;padding:0 6px;transition:.2s}
.wstep-line{width:28px;height:2px;background:var(--border);flex-shrink:0;transition:.2s}
.wstep.done .wstep-dot{background:var(--teal);border-color:var(--teal);color:white}
.wstep.done .wstep-label{color:var(--teal-dark)}
.wstep.done .wstep-line{background:var(--teal)}
.wstep.active .wstep-dot{background:var(--teal);border-color:var(--teal);color:white;box-shadow:0 0 0 4px rgba(13,148,136,.15)}
.wstep.active .wstep-label{color:var(--teal-dark);font-weight:700}
.wstep-line.done{background:var(--teal)}

.wizard-body{display:flex;flex:1;overflow:hidden}
.wform{flex:0 0 420px;background:white;border-right:1px solid var(--border);overflow-y:auto;padding:20px}
.wresult{flex:1;overflow-y:auto;padding:20px;background:var(--bg)}

.wstep-panel{display:none}
.wstep-panel.active{display:block}

.wfooter{padding:12px 20px;border-top:1px solid var(--border);display:flex;align-items:center;justify-content:space-between;background:white;flex-shrink:0}
.wfooter-info{font-size:12px;color:var(--muted)}

/* B1-B6 grid */
.b16-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.b16-card{background:var(--bg);border:1px solid var(--border);border-radius:var(--r);padding:12px}
.b16-title{font-size:11px;font-weight:700;color:var(--teal-dark);text-transform:uppercase;letter-spacing:.05em;margin-bottom:8px;display:flex;align-items:center;gap:5px}

/* Analisa tabel */
.analisa-table{width:100%;border-collapse:collapse;font-size:12px}
.analisa-table th{background:var(--bg2);padding:8px 10px;text-align:left;font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.06em;color:var(--muted);border-bottom:2px solid var(--border)}
.analisa-table td{padding:8px 10px;border-bottom:1px solid var(--border);vertical-align:top}
.analisa-table tr:hover td{background:var(--bg)}
.analisa-row-actions{display:flex;gap:4px;margin-top:6px}

/* Diagnosis list (bisa lebih dari satu) */
.diag-list{display:flex;flex-direction:column;gap:8px}
.diag-entry{background:white;border:1px solid var(--border);border-radius:var(--r);padding:12px;position:relative}
.diag-entry-num{position:absolute;top:-10px;left:12px;background:var(--teal);color:white;font-size:10px;font-weight:700;padding:2px 8px;border-radius:20px}
.diag-remove{position:absolute;top:8px;right:8px;background:none;border:none;color:var(--muted);cursor:pointer;font-size:16px;line-height:1;padding:2px 5px;border-radius:4px}
.diag-remove:hover{background:var(--red-light);color:var(--red)}
.add-diag-btn{display:flex;align-items:center;justify-content:center;gap:6px;width:100%;padding:10px;border:2px dashed var(--border2);border-radius:var(--r);background:transparent;color:var(--teal);font-size:13px;font-weight:500;cursor:pointer;transition:.15s;margin-top:6px}
.add-diag-btn:hover{border-color:var(--teal);background:var(--teal-light)}

/* Implementasi entries */
.impl-list{display:flex;flex-direction:column;gap:10px}
.impl-entry{background:white;border:1px solid var(--border);border-radius:var(--r);overflow:hidden}
.impl-entry-header{padding:8px 14px;background:var(--bg2);display:flex;align-items:center;gap:8px;font-size:12px;font-weight:600;color:var(--slate2)}
.impl-entry-body{padding:12px 14px}
.impl-remove{margin-left:auto;background:none;border:none;color:var(--muted);cursor:pointer;font-size:14px;padding:2px 5px;border-radius:4px}
.impl-remove:hover{background:var(--red-light);color:var(--red)}

/* Evaluasi SOAPIER */
.eval-soapier{width:100%;border-collapse:collapse;font-size:13px;margin-top:8px}
.eval-soapier td{padding:7px 10px;border-bottom:1px solid var(--border);vertical-align:top}
.eval-soapier td:first-child{font-weight:700;font-size:15px;color:var(--teal-dark);width:28px;text-align:center}
.eval-soapier td:nth-child(2){color:var(--muted);width:120px;font-size:12px}
.eval-soapier td:nth-child(3) textarea{width:100%;border:none;background:transparent;font-size:12px;font-family:var(--font);color:var(--slate2);outline:none;resize:vertical;min-height:36px}

/* Result preview */
.wresult-empty{display:flex;flex-direction:column;align-items:center;justify-content:center;height:100%;color:var(--muted);text-align:center;padding:40px}
.result-preview{background:white;border-radius:var(--r2);border:1px solid var(--border);padding:24px;font-size:13px;line-height:1.7}
.rp-header{text-align:center;padding-bottom:16px;border-bottom:2px solid var(--slate);margin-bottom:16px}
.rp-title{font-size:18px;font-weight:700;letter-spacing:.03em}
.rp-subtitle{font-size:12px;color:var(--muted);margin-top:2px}
.rp-info-table{width:100%;font-size:12px;border-collapse:collapse;margin-bottom:16px}
.rp-info-table td{padding:4px 6px}
.rp-info-table td:nth-child(odd){color:var(--muted);width:130px}
.rp-info-table td:nth-child(even){font-weight:500}
.rp-section{margin-bottom:14px;border-radius:var(--r);overflow:hidden;border:1px solid var(--border)}
.rp-section-head{padding:8px 14px;font-size:11px;font-weight:700;letter-spacing:.06em;display:flex;align-items:center;gap:8px}
.rp-section-body{padding:12px 14px}
.rp-s-pengkajian .rp-section-head{background:#FFF1F2;color:#BE123C}
.rp-s-analisa .rp-section-head{background:#F0FDF4;color:#15803D}
.rp-s-prioritas .rp-section-head{background:#FFF7ED;color:#C2410C}
.rp-s-diagnosis .rp-section-head{background:var(--purple-light);color:#5B21B6}
.rp-s-slki .rp-section-head{background:var(--amber-light);color:#92400E}
.rp-s-siki .rp-section-head{background:var(--teal-light);color:var(--teal-dark)}
.rp-s-impl .rp-section-head{background:var(--bg2);color:var(--slate2)}
.rp-s-eval .rp-section-head{background:var(--blue-light);color:#1D4ED8}
.rp-sub{font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.06em;color:var(--muted);margin:8px 0 4px}
.rp-item{padding:3px 0 3px 14px;position:relative;color:var(--slate2);border-bottom:1px solid var(--bg2)}
.rp-item:last-child{border-bottom:none}
.rp-item::before{content:"";position:absolute;left:4px;top:10px;width:5px;height:5px;border-radius:50%;background:var(--teal)}
.rp-impl-table{width:100%;font-size:12px;border-collapse:collapse}
.rp-impl-table th{background:var(--bg2);padding:5px 8px;text-align:left;font-size:10px;font-weight:700;text-transform:uppercase;color:var(--muted);border-bottom:1px solid var(--border)}
.rp-impl-table td{padding:7px 8px;border-bottom:1px solid var(--border);color:var(--slate2)}

/* Prioritas drag */
.prioritas-list{display:flex;flex-direction:column;gap:6px}
.prioritas-item{display:flex;align-items:center;gap:10px;background:white;border:1px solid var(--border);border-radius:var(--r);padding:10px 12px;cursor:grab}
.prioritas-item:active{cursor:grabbing;box-shadow:var(--shadow2)}
.prioritas-num{width:26px;height:26px;border-radius:50%;background:var(--teal);color:white;font-size:12px;font-weight:700;display:flex;align-items:center;justify-content:center;flex-shrink:0}
.prioritas-label{flex:1;font-size:13px;font-weight:500;color:var(--slate)}
.prioritas-badge{font-size:10px;padding:2px 8px;border-radius:20px}
.drag-handle{color:var(--muted);cursor:grab;font-size:18px}
.prioritas-type-sel{font-size:11px;border:1px solid var(--border2);border-radius:5px;padding:2px 6px;background:white;color:var(--slate3);cursor:pointer}

/* ========== ASKEP ANAK & BAYI ========== */
:root{
  --pink:#EC4899;--pink-light:#FDF2F8;--pink-dark:#BE185D;
  --indigo:#6366F1;--indigo-light:#EEF2FF;
}
.anak-badge{background:var(--pink-light);color:var(--pink-dark);font-size:10px;font-weight:600;padding:2px 8px;border-radius:20px}
.anak-header-bar{background:linear-gradient(135deg,#FDF2F8,#EEF2FF);border-bottom:1px solid #FBCFE8;padding:10px 20px;display:flex;align-items:center;gap:10px;flex-shrink:0}
.anak-header-title{font-size:14px;font-weight:700;color:var(--pink-dark)}
.anak-header-sub{font-size:11px;color:#9D174D;opacity:.8}

/* TTV Anak */
.ttv-anak-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-bottom:12px}
.ttv-anak-card{background:white;border:1px solid var(--border);border-radius:var(--r);padding:10px 12px}
.ttv-anak-label{font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.05em;color:var(--pink-dark);margin-bottom:4px}
.ttv-anak-norm{font-size:9px;color:var(--muted);margin-top:3px;font-style:italic}

/* Tumbuh Kembang */
.ddst-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.ddst-card{background:var(--bg);border:1px solid var(--border);border-radius:var(--r);padding:10px 12px}
.ddst-title{font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.05em;color:var(--indigo);margin-bottom:6px;display:flex;align-items:center;gap:5px}
.imunisasi-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:6px;margin-bottom:8px}
.imun-item{background:white;border:1px solid var(--border);border-radius:8px;padding:8px 10px;text-align:center}
.imun-name{font-size:10px;font-weight:600;color:var(--slate2);margin-bottom:4px}
.imun-check{display:flex;align-items:center;justify-content:center;gap:4px;font-size:10px}
.imun-check input{width:12px;height:12px;cursor:pointer}

/* Status Gizi Anak */
.gizi-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-bottom:10px}
.gizi-card{background:white;border:1px solid var(--border);border-radius:var(--r);padding:10px 12px;text-align:center}
.gizi-val{font-size:20px;font-weight:700;color:var(--pink-dark)}
.gizi-label{font-size:10px;color:var(--muted);margin-top:2px}
.gizi-status{font-size:9px;font-weight:600;padding:2px 6px;border-radius:20px;margin-top:4px;display:inline-block}
.gz-baik{background:var(--green-light);color:var(--green)}
.gz-kurang{background:var(--amber-light);color:var(--amber)}
.gz-buruk{background:var(--red-light);color:var(--red)}

/* Askep Anak wizard steps */
.wstep-anak.active .wstep-dot{background:var(--pink);border-color:var(--pink);box-shadow:0 0 0 4px rgba(236,72,153,.15)}
.wstep-anak.done .wstep-dot{background:var(--pink);border-color:var(--pink)}
.wstep-anak.active .wstep-label{color:var(--pink-dark)}
.wstep-anak.done .wstep-label{color:var(--pink-dark)}
.wstep-anak.done .wstep-line{background:var(--pink)}

/* Riwayat persalinan */
.persalinan-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px}

/* Diagnosis Anak chip selector */
.diag-anak-chip{display:inline-flex;align-items:center;gap:6px;padding:6px 12px;border-radius:8px;font-size:12px;font-weight:500;border:1px solid var(--border2);background:white;color:var(--slate3);cursor:pointer;margin:3px;transition:.15s}
.diag-anak-chip:hover{border-color:var(--pink);color:var(--pink-dark)}
.diag-anak-chip.selected{background:var(--pink-light);border-color:var(--pink);color:var(--pink-dark);font-weight:600}

/* Print overrides for anak */
@media print{
  .anak-header-bar{display:none!important}
}

/* ========== LANDSCAPE HINT BANNER ========== */
#landscape-hint{
  display:none;
  position:fixed;inset:0;z-index:9999;
  background:rgba(15,118,110,.97);
  flex-direction:column;align-items:center;justify-content:center;
  gap:12px;padding:24px;text-align:center;
  backdrop-filter:blur(4px);
}
#landscape-hint .lh-icon{
  font-size:56px;
  animation:lh-spin 1.4s ease-in-out infinite alternate;
}
@keyframes lh-spin{
  from{transform:rotate(0deg)}
  to{transform:rotate(90deg)}
}
#landscape-hint .lh-title{
  font-size:17px;font-weight:700;color:white;letter-spacing:-.01em;
}
#landscape-hint .lh-sub{
  font-size:13px;color:rgba(255,255,255,.8);line-height:1.6;max-width:280px;
}
#landscape-hint .lh-skip{
  margin-top:8px;font-size:12px;color:rgba(255,255,255,.6);
  background:rgba(255,255,255,.15);border:1px solid rgba(255,255,255,.25);
  border-radius:20px;padding:6px 18px;cursor:pointer;
  font-family:var(--font);transition:.15s;
}
#landscape-hint .lh-skip:hover{background:rgba(255,255,255,.25)}
/* ── Landscape mode: sidebar overlay + toggle ── */
@media(orientation:landscape) and (max-width:900px){
  #landscape-hint{display:none!important}

  /* Sidebar: hidden by default, slide in as overlay */
  .sidebar{
    display:block!important;
    position:fixed;top:0;left:0;height:100%;
    transform:translateX(-100%);
    transition:transform .25s cubic-bezier(.32,.72,0,1);
    z-index:200;
    box-shadow:4px 0 24px rgba(0,0,0,.18);
    width:200px!important;
    overflow-y:auto!important;
    -webkit-overflow-scrolling:touch;
  }
  .sidebar.ls-open{transform:translateX(0)!important}

  /* Main area: full width, no left offset */
  .app{flex-direction:row}
  .main{padding-bottom:68px;margin-left:0!important}

  /* Bottom nav stays visible in landscape */
  .bottom-nav{display:block!important}

  /* Sidebar toggle button (landscape) */
  #ls-sidebar-toggle{
    display:flex!important;
    position:fixed;top:50%;left:0;
    transform:translateY(-50%);
    z-index:201;
    background:var(--teal);
    color:white;
    border:none;
    border-radius:0 10px 10px 0;
    padding:12px 6px;
    cursor:pointer;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    box-shadow:2px 0 8px rgba(0,0,0,.2);
    font-size:16px;
    transition:left .25s cubic-bezier(.32,.72,0,1);
  }
  #ls-sidebar-toggle.ls-open{left:200px}

  /* Backdrop */
  #ls-sidebar-backdrop{
    display:none;
    position:fixed;inset:0;background:rgba(0,0,0,.35);z-index:199;
  }
  #ls-sidebar-backdrop.ls-open{display:block}

  /* Topbar compact */
  .topbar{padding:6px 12px}
  .page{padding:10px 12px;padding-bottom:80px}
  .page-title{font-size:13px}

  /* ASKEP Jiwa landscape: wizard harus beri ruang bottom nav */
  #page-askep-jiwa .askep-wizard{padding-bottom:80px}
  /* ASKEP Jiwa footer 7 tombol: compact di landscape */
  #page-askep-jiwa .wfooter{flex-direction:row;flex-wrap:wrap;align-items:center;padding:5px 10px;gap:4px}
  #page-askep-jiwa .wfooter .wfooter-info{width:100%;text-align:center;order:-1;font-size:11px;padding:0;margin-bottom:2px}
  #page-askep-jiwa .wfooter > div{display:grid;grid-template-columns:repeat(4,1fr);gap:4px;flex:1;min-width:0}
  #page-askep-jiwa .wfooter .btn-sm{padding:5px 4px;font-size:10px;min-height:30px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
}

@media(orientation:landscape) and (min-width:901px){
  #landscape-hint{display:none!important}
  #ls-sidebar-toggle{display:none!important}
}

@media(orientation:portrait){
  #ls-sidebar-toggle{display:none!important}
  #ls-sidebar-backdrop{display:none!important}
}


/* ============================================================
   Predictive Text Engine Styles
============================================================ */

.predict-dropdown{
  position:fixed;z-index:9999;background:white;border:1px solid var(--border);
  border-radius:10px;box-shadow:0 8px 24px rgba(0,0,0,.13);
  max-height:220px;overflow-y:auto;min-width:260px;max-width:380px;
  animation:fadeInPD .12s ease;
}
@keyframes fadeInPD{from{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:translateY(0)}}
.predict-item{
  padding:9px 14px;font-size:13px;color:var(--slate);cursor:pointer;
  border-bottom:1px solid var(--bg2);display:flex;align-items:center;gap:8px;
}
.predict-item:last-child{border-bottom:none}
.predict-item:hover,.predict-item.active{background:var(--teal-light);color:var(--teal-dark)}
.predict-item em{font-style:normal;font-weight:700;color:var(--teal)}
.predict-hint{
  position:absolute;pointer-events:none;color:#aaa;font-size:inherit;
  font-family:inherit;white-space:nowrap;overflow:hidden;
}
.unit-pill{
  display:inline-block;background:var(--teal-light);color:var(--teal-dark);
  font-size:11px;font-weight:600;padding:1px 6px;border-radius:20px;margin-left:6px;
}
</style>


/* ============================================================
   MODERN REDESIGN — Animasi & Visual Upgrade
   Ditambahkan di atas CSS existing, tidak menimpa fungsi
   ============================================================ */

/* ── Smooth scrolling & font rendering ── */
html { scroll-behavior: smooth; }
* { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }

/* ── CSS Transitions global ── */
.btn, .card, .nav-item, .qa-card, .filter-chip,
.tab, .recent-item, .fav-item, .kalk-card, .tmpl-card {
  transition: all .2s cubic-bezier(.4,0,.2,1);
}

/* ══════════════════════════════════════════
   SIDEBAR — Modern glass-morphism feel
   ══════════════════════════════════════════ */
.sidebar {
  background: var(--white);
  border-right: 1px solid var(--border);
  box-shadow: 2px 0 12px rgba(0,0,0,.04);
}
.nav-item {
  border-radius: 10px;
  font-size: 13px;
  font-weight: 500;
  letter-spacing: -.01em;
  padding: 9px 10px;
  gap: 9px;
  position: relative;
  overflow: hidden;
}
.nav-item::before {
  content: '';
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 3px;
  background: var(--teal);
  border-radius: 0 3px 3px 0;
  opacity: 0;
  transform: scaleY(0);
  transition: opacity .2s, transform .2s cubic-bezier(.4,0,.2,1);
}
.nav-item.active::before {
  opacity: 1;
  transform: scaleY(1);
}
.nav-item:hover {
  background: var(--bg2);
  transform: translateX(2px);
}
.nav-item.active {
  background: linear-gradient(135deg, var(--teal-light), color-mix(in srgb, var(--teal-light) 60%, var(--white)));
  color: var(--teal-dark);
  font-weight: 600;
}

/* ══════════════════════════════════════════
   TOPBAR — Frosted glass + subtle shadow
   ══════════════════════════════════════════ */
.topbar {
  background: rgba(255,255,255,.92);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid rgba(226,232,240,.8);
  box-shadow: 0 1px 8px rgba(0,0,0,.05);
}
[data-theme="dark"] .topbar {
  background: rgba(22,32,46,.92) !important;
  border-bottom-color: rgba(46,62,82,.8) !important;
}
#dark-toggle {
  width: 36px; height: 36px;
  border-radius: 10px;
  display: flex; align-items: center; justify-content: center;
  background: var(--bg2);
  border: 1px solid var(--border);
  font-size: 16px;
  transition: all .2s;
}
#dark-toggle:hover {
  background: var(--teal-light);
  border-color: var(--teal);
  transform: rotate(15deg) scale(1.1);
}

/* ══════════════════════════════════════════
   SEARCH INPUT — Modern focus ring
   ══════════════════════════════════════════ */
.search-input, #global-search {
  border-radius: 10px;
  transition: all .2s;
}
.search-input:focus, #global-search:focus {
  border-color: var(--teal);
  box-shadow: 0 0 0 4px rgba(13,148,136,.12);
  background: var(--white);
}

/* ══════════════════════════════════════════
   BUTTONS — Elevated feel + ripple-like hover
   ══════════════════════════════════════════ */
.btn {
  border-radius: 10px;
  font-weight: 600;
  letter-spacing: -.01em;
  position: relative;
  overflow: hidden;
}
.btn-primary {
  background: linear-gradient(135deg, var(--teal), var(--teal-dark));
  box-shadow: 0 2px 8px rgba(13,148,136,.3);
}
.btn-primary:hover {
  background: linear-gradient(135deg, #0fb8ab, var(--teal-dark));
  box-shadow: 0 4px 16px rgba(13,148,136,.4);
  transform: translateY(-1px);
}
.btn-primary:active { transform: translateY(0); box-shadow: none; }
.btn-outline {
  border-radius: 10px;
  border: 1.5px solid var(--border2);
}
.btn-outline:hover {
  border-color: var(--teal);
  color: var(--teal);
  background: var(--teal-light);
}

/* ══════════════════════════════════════════
   CARDS — Lifted feel on hover
   ══════════════════════════════════════════ */
.card {
  border-radius: 14px;
  border: 1px solid var(--border);
  box-shadow: 0 1px 4px rgba(0,0,0,.05);
  transition: box-shadow .2s, transform .2s, border-color .2s;
}
.card:hover {
  box-shadow: 0 6px 20px rgba(0,0,0,.08);
  border-color: color-mix(in srgb, var(--teal) 40%, var(--border));
  transform: translateY(-1px);
}

/* ══════════════════════════════════════════
   STAT CARDS — Gradient accent on top
   ══════════════════════════════════════════ */
.stat-card {
  border-radius: 14px;
  border: 1px solid var(--border);
  position: relative;
  overflow: hidden;
  transition: box-shadow .2s, transform .2s;
}
.stat-card::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  background: linear-gradient(90deg, var(--teal), var(--teal2));
  opacity: 0;
  transition: opacity .2s;
}
.stat-card:hover { transform: translateY(-2px); box-shadow: 0 8px 24px rgba(0,0,0,.1); }
.stat-card:hover::before { opacity: 1; }
.stat-val { letter-spacing: -.03em; }

/* ══════════════════════════════════════════
   QUICK ACTION CARDS — Dashboard
   ══════════════════════════════════════════ */
.qa-card {
  border-radius: 14px;
  border: 1.5px solid var(--border);
  box-shadow: 0 1px 4px rgba(0,0,0,.05);
  transition: all .2s cubic-bezier(.34,1.56,.64,1);
}
.qa-card:hover {
  transform: translateY(-3px) scale(1.01);
  box-shadow: 0 10px 30px rgba(13,148,136,.15);
  border-color: var(--teal);
}
.qa-card:active { transform: scale(.98); }
.qa-icon {
  border-radius: 12px;
  transition: transform .2s cubic-bezier(.34,1.56,.64,1);
}
.qa-card:hover .qa-icon { transform: scale(1.15) rotate(-5deg); }

/* ══════════════════════════════════════════
   FILTER CHIPS — Pill style with animation
   ══════════════════════════════════════════ */
.filter-chip {
  border-radius: 20px;
  font-weight: 500;
  transition: all .18s cubic-bezier(.34,1.56,.64,1);
}
.filter-chip:hover {
  transform: translateY(-1px);
  box-shadow: 0 3px 10px rgba(13,148,136,.2);
}
.filter-chip.active {
  background: linear-gradient(135deg, var(--teal), var(--teal-dark));
  box-shadow: 0 3px 12px rgba(13,148,136,.35);
  border-color: transparent;
}

/* ══════════════════════════════════════════
   TABS — Smooth underline animation
   ══════════════════════════════════════════ */
.tab {
  position: relative;
  transition: color .18s;
}
.tab::after {
  content: '';
  position: absolute;
  bottom: -1px; left: 50%; right: 50%;
  height: 2px;
  background: var(--teal);
  border-radius: 2px 2px 0 0;
  transition: left .2s cubic-bezier(.4,0,.2,1), right .2s cubic-bezier(.4,0,.2,1);
}
.tab.active::after { left: 0; right: 0; }
.tab.active { color: var(--teal); }

/* ══════════════════════════════════════════
   FORM CONTROLS — Modern & tactile
   ══════════════════════════════════════════ */
.form-control {
  border-radius: 10px;
  border: 1.5px solid var(--border2);
  transition: border-color .18s, box-shadow .18s, background .18s;
}
.form-control:focus {
  border-color: var(--teal);
  box-shadow: 0 0 0 4px rgba(13,148,136,.12);
}
.form-label {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .01em;
}

/* ══════════════════════════════════════════
   WIZARD STEPS — Animated connectors
   ══════════════════════════════════════════ */
.wstep-dot {
  transition: background .25s, transform .25s cubic-bezier(.34,1.56,.64,1), color .25s;
}
.wstep.active .wstep-dot {
  transform: scale(1.15);
  box-shadow: 0 0 0 4px rgba(13,148,136,.2);
}
.wstep-line {
  transition: background .3s;
}

/* ══════════════════════════════════════════
   BOTTOM NAV (mobile) — Frosted + indicator
   ══════════════════════════════════════════ */
.bottom-nav {
  background: rgba(255,255,255,.95) !important;
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border-top: 1px solid rgba(226,232,240,.6) !important;
  box-shadow: 0 -4px 20px rgba(0,0,0,.08) !important;
}
[data-theme="dark"] .bottom-nav {
  background: rgba(22,32,46,.95) !important;
  border-top-color: rgba(46,62,82,.6) !important;
}
.bnav-item {
  transition: all .18s cubic-bezier(.34,1.56,.64,1);
}
.bnav-item.active {
  color: var(--teal) !important;
}
.bnav-item-icon {
  transition: transform .2s cubic-bezier(.34,1.56,.64,1);
}
.bnav-item.active .bnav-item-icon {
  transform: translateY(-3px) scale(1.15);
}
.bnav-item:not(.active):active .bnav-item-icon {
  transform: scale(.88);
}

/* ══════════════════════════════════════════
   MODAL — Smooth entrance
   ══════════════════════════════════════════ */
.modal {
  border-radius: 18px;
  box-shadow: 0 25px 60px rgba(0,0,0,.18), 0 4px 16px rgba(0,0,0,.1);
}
@keyframes modalIn {
  from { transform: scale(.92) translateY(16px); opacity: 0; }
  to   { transform: scale(1) translateY(0);    opacity: 1; }
}

/* ══════════════════════════════════════════
   BADGES — Subtle glow on colored
   ══════════════════════════════════════════ */
.badge {
  border-radius: 20px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .02em;
}

/* ══════════════════════════════════════════
   RECENT LIST — Hover effect
   ══════════════════════════════════════════ */
.recent-list { border-radius: 14px; overflow: hidden; }
.recent-item { transition: background .15s, padding-left .15s; }
.recent-item:hover { background: var(--teal-light); padding-left: 20px; }

/* ══════════════════════════════════════════
   PAGE ENTRY ANIMATIONS
   ══════════════════════════════════════════ */
@keyframes pageSlideIn {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: translateY(0); }
}
.page.active {
  animation: pageSlideIn .25s cubic-bezier(.4,0,.2,1) both;
}

/* Staggered card animations on dashboard */
@keyframes cardFadeUp {
  from { opacity: 0; transform: translateY(16px); }
  to   { opacity: 1; transform: translateY(0); }
}
.stat-card:nth-child(1) { animation: cardFadeUp .3s .04s both; }
.stat-card:nth-child(2) { animation: cardFadeUp .3s .08s both; }
.stat-card:nth-child(3) { animation: cardFadeUp .3s .12s both; }
.stat-card:nth-child(4) { animation: cardFadeUp .3s .16s both; }

.qa-card:nth-child(1)  { animation: cardFadeUp .3s .06s both; }
.qa-card:nth-child(2)  { animation: cardFadeUp .3s .10s both; }
.qa-card:nth-child(3)  { animation: cardFadeUp .3s .14s both; }
.qa-card:nth-child(4)  { animation: cardFadeUp .3s .18s both; }
.qa-card:nth-child(5)  { animation: cardFadeUp .3s .22s both; }
.qa-card:nth-child(6)  { animation: cardFadeUp .3s .26s both; }
.qa-card:nth-child(7)  { animation: cardFadeUp .3s .30s both; }
.qa-card:nth-child(8)  { animation: cardFadeUp .3s .34s both; }
.qa-card:nth-child(9)  { animation: cardFadeUp .3s .38s both; }
.qa-card:nth-child(10) { animation: cardFadeUp .3s .42s both; }

/* ══════════════════════════════════════════
   SDKI/SIKI/SLKI CARDS — Lift & accent
   ══════════════════════════════════════════ */
.sdki-card, .siki-card, .slki-card {
  border-radius: 12px;
  transition: box-shadow .2s, transform .2s, border-color .2s;
}
.card-header {
  transition: background .15s;
}
.card-header:hover { background: var(--bg2); }

/* ══════════════════════════════════════════
   PLAN CARD (sidebar) — Shine animation
   ══════════════════════════════════════════ */
.plan-card {
  border-radius: 12px;
  position: relative;
  overflow: hidden;
}
.plan-card::after {
  content: '';
  position: absolute;
  top: -50%; left: -60%;
  width: 40%; height: 200%;
  background: linear-gradient(to right, rgba(255,255,255,0), rgba(255,255,255,.15), rgba(255,255,255,0));
  transform: skewX(-20deg);
  animation: planShine 4s ease infinite;
}
@keyframes planShine {
  0%   { left: -60%; }
  30%  { left: 120%; }
  100% { left: 120%; }
}

/* ══════════════════════════════════════════
   KALKULATOR CARDS — Hover elevation
   ══════════════════════════════════════════ */
.kalk-card {
  border-radius: 14px;
  transition: box-shadow .2s, transform .2s, border-color .2s;
}
.kalk-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 12px 32px rgba(0,0,0,.1);
  border-color: var(--teal-light);
}

/* ══════════════════════════════════════════
   SCROLLBAR — Elegant thin
   ══════════════════════════════════════════ */
::-webkit-scrollbar { width: 4px; height: 4px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb {
  background: color-mix(in srgb, var(--teal) 30%, transparent);
  border-radius: 10px;
}
::-webkit-scrollbar-thumb:hover {
  background: color-mix(in srgb, var(--teal) 60%, transparent);
}

/* ══════════════════════════════════════════
   DARK MODE POLISH — Extra refinements
   ══════════════════════════════════════════ */
[data-theme="dark"] .sidebar {
  box-shadow: 2px 0 16px rgba(0,0,0,.3);
}
[data-theme="dark"] .card:hover {
  border-color: color-mix(in srgb, var(--teal) 50%, var(--border));
  box-shadow: 0 6px 24px rgba(0,0,0,.3);
}
[data-theme="dark"] .btn-primary {
  box-shadow: 0 2px 12px rgba(45,212,191,.25);
}
[data-theme="dark"] .btn-primary:hover {
  box-shadow: 0 4px 20px rgba(45,212,191,.35);
}
[data-theme="dark"] .qa-card:hover {
  box-shadow: 0 10px 30px rgba(45,212,191,.12);
}
[data-theme="dark"] .recent-item:hover {
  background: var(--teal-light);
}
[data-theme="dark"] .filter-chip.active {
  box-shadow: 0 3px 12px rgba(45,212,191,.3);
}

/* ══════════════════════════════════════════
   LOGO ICON — Pulse on hover
   ══════════════════════════════════════════ */
.logo-icon {
  transition: transform .2s cubic-bezier(.34,1.56,.64,1), box-shadow .2s;
}
.sidebar-logo:hover .logo-icon {
  transform: scale(1.12) rotate(-8deg);
  box-shadow: 0 4px 12px rgba(13,148,136,.4);
}

/* ══════════════════════════════════════════
   FAV BUTTON
   ══════════════════════════════════════════ */
.fav-btn { transition: transform .18s cubic-bezier(.34,1.56,.64,1), opacity .18s; }
.fav-btn:hover { transform: scale(1.3); opacity: 1; }
.fav-btn.faved { animation: favPop .35s cubic-bezier(.34,1.56,.64,1); }
@keyframes favPop {
  0%   { transform: scale(1); }
  50%  { transform: scale(1.5); }
  100% { transform: scale(1); }
}

/* ── Skeleton loader untuk edukasi iframe ── */
@keyframes skPulse {
  0%,100% {

/* ============================================================
   DAILY QUIZ — NurseKit
   ============================================================ */
.dq-card{background:linear-gradient(135deg,#0D9488 0%,#0F766E 100%);border-radius:16px;padding:18px;margin:16px 0;color:#fff;position:relative;overflow:hidden}
.dq-card-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:12px}
.dq-badge{background:rgba(255,255,255,.2);border-radius:20px;padding:3px 10px;font-size:11px;font-weight:700;letter-spacing:.04em}
.dq-streak{font-size:12px;opacity:.85}
.dq-title{font-size:17px;font-weight:800;margin-bottom:3px}
.dq-sub{font-size:12px;opacity:.8;margin-bottom:14px}
.dq-progress-bar{background:rgba(255,255,255,.2);border-radius:99px;height:6px;margin-bottom:4px}
.dq-progress-fill{background:#fff;border-radius:99px;height:6px;transition:width .4s ease}
.dq-progress-label{font-size:11px;opacity:.75;text-align:right}
.dq-btn{width:100%;padding:11px;border:2px solid rgba(255,255,255,.7);border-radius:10px;background:rgba(255,255,255,.15);color:#fff;font-size:14px;font-weight:700;cursor:pointer;transition:.2s;margin-top:12px}
.dq-btn:hover{background:rgba(255,255,255,.25)}
.dq-score-mini{display:flex;gap:10px;margin-top:10px}
.dq-score-mini-item{flex:1;background:rgba(255,255,255,.12);border-radius:10px;padding:8px;text-align:center}
.dq-score-mini-val{font-size:20px;font-weight:900}
.dq-score-mini-lbl{font-size:10px;opacity:.75;margin-top:1px}
.dq-modal{position:fixed;inset:0;z-index:9000;display:flex;align-items:flex-end;justify-content:center;background:rgba(0,0,0,.5);opacity:0;pointer-events:none;transition:opacity .25s}
.dq-modal.open{opacity:1;pointer-events:all}
.dq-modal-box{background:var(--bg);border-radius:20px 20px 0 0;width:100%;max-width:520px;max-height:92vh;overflow-y:auto;padding:0 0 24px;transform:translateY(40px);transition:transform .3s cubic-bezier(.34,1.56,.64,1)}
.dq-modal.open .dq-modal-box{transform:translateY(0)}
.dq-modal-handle{width:36px;height:4px;background:var(--border);border-radius:99px;margin:12px auto 16px}
.dq-modal-pad{padding:0 20px}
.dq-q-num{font-size:11px;font-weight:700;color:var(--muted);text-transform:uppercase;letter-spacing:.06em;margin-bottom:8px}
.dq-q-text{font-size:15px;font-weight:700;color:var(--slate);line-height:1.55;margin-bottom:16px}
.dq-opts{display:flex;flex-direction:column;gap:10px;margin-bottom:16px}
.dq-opt{padding:12px 16px;border-radius:10px;border:2px solid var(--border);cursor:pointer;font-size:13px;font-weight:500;color:var(--slate2);transition:.15s;text-align:left;background:var(--bg);position:relative}
.dq-opt:hover:not(.dq-answered){border-color:var(--teal);background:var(--teal-light)}
.dq-opt.dq-correct{border-color:#059669;background:#ECFDF5;color:#065F46;font-weight:700}
.dq-opt.dq-wrong{border-color:#DC2626;background:#FEF2F2;color:#991B1B}
.dq-opt.dq-answered{cursor:default}
.dq-exp{background:#FFF7ED;border:1px solid #FED7AA;border-radius:10px;padding:12px 14px;font-size:12px;color:#92400E;line-height:1.7;margin-bottom:12px}
.dq-next-btn{width:100%;padding:12px;border:none;border-radius:10px;font-size:14px;font-weight:700;cursor:pointer;color:white;background:var(--teal);transition:.15s}
.dq-next-btn:hover{opacity:.9}
.dq-score-modal{position:fixed;inset:0;z-index:9100;display:flex;align-items:center;justify-content:center;background:rgba(0,0,0,.55);opacity:0;pointer-events:none;transition:opacity .25s;padding:20px}
.dq-score-modal.open{opacity:1;pointer-events:all}
.dq-score-box{background:var(--bg);border-radius:20px;width:100%;max-width:380px;padding:28px 24px;text-align:center;transform:scale(.92);transition:transform .3s cubic-bezier(.34,1.56,.64,1)}
.dq-score-modal.open .dq-score-box{transform:scale(1)}
.dq-grade-badge{width:80px;height:80px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:28px;font-weight:900;margin:0 auto 12px;border:3px solid}
.dq-grade-title{font-size:20px;font-weight:800;margin-bottom:2px}
.dq-grade-sub{font-size:13px;color:var(--muted);margin-bottom:16px}
.dq-score-row{display:flex;gap:10px;margin-bottom:18px}
.dq-score-cell{flex:1;border-radius:12px;padding:12px 8px;border:1.5px solid var(--border)}
.dq-score-cell-val{font-size:22px;font-weight:900}
.dq-score-cell-lbl{font-size:10px;color:var(--muted);margin-top:2px}
.dq-review-list{text-align:left;margin-bottom:16px;max-height:200px;overflow-y:auto}
.dq-review-item{padding:8px 10px;border-radius:8px;margin-bottom:6px;font-size:12px;line-height:1.5}
.dq-review-correct{background:#ECFDF5;border-left:3px solid #059669;color:#065F46}
.dq-review-wrong{background:#FEF2F2;border-left:3px solid #DC2626;color:#7F1D1D}
.dq-score-close{width:100%;padding:12px;border:none;border-radius:10px;font-size:14px;font-weight:700;cursor:pointer;color:white;margin-top:4px}
[data-theme="dark"] .dq-card{background:linear-gradient(135deg,#0F766E 0%,#0D5C56 100%)}
[data-theme="dark"] .dq-opt{background:#1C2A3A;border-color:#2E3E52;color:#B0BECE}
[data-theme="dark"] .dq-opt.dq-correct{background:#022C22;color:#6EE7B7}
[data-theme="dark"] .dq-opt.dq-wrong{background:#3B0A0A;color:#FCA5A5}
[data-theme="dark"] .dq-exp{background:#2D1B00;border-color:#78350F;color:#FDE68A}
[data-theme="dark"] .dq-score-box{background:#1C2A3A}
[data-theme="dark"] .dq-review-correct{background:#022C22;color:#6EE7B7}
[data-theme="dark"] .dq-review-wrong{background:#3B0A0A;color:#FCA5A5}

/* MOBILE UPGRADE STYLES — lihat blok baru di bawah */



/* ── Upgrade Gate Modal — z-index override ─────────────────────── */
/* Harus di atas iframe (z-index tidak terbatas pada iframe) */
#upgrade-gate-modal {
  z-index: 99999 !important;
}



/* ╔══════════════════════════════════════════════════════════════╗
   ║           MOBILE UPGRADE CARD PRO — More Menu               ║
   ╚══════════════════════════════════════════════════════════════╝ */

.bnav-pro-card {
  display: none; /* dikontrol JS */
  position: relative;
  margin: 0 0 14px;
  border-radius: 18px;
  overflow: hidden;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  user-select: none;
  background: linear-gradient(135deg, #0C1A2E 0%, #0F2744 40%, #0D3B55 100%);
  border: 1.5px solid rgba(45,212,191,.25);
  box-shadow: 0 4px 20px rgba(0,0,0,.25), 0 0 0 1px rgba(45,212,191,.08);
  transition: transform .13s, box-shadow .13s;
}
.bnav-pro-card:active {
  transform: scale(.97);
  box-shadow: 0 2px 10px rgba(0,0,0,.2);
}

/* Glow blob dekorasi */
.bnav-pro-card-glow {
  position: absolute;
  top: -30px; right: -30px;
  width: 140px; height: 140px;
  background: radial-gradient(circle, rgba(45,212,191,.22) 0%, transparent 65%);
  pointer-events: none;
  border-radius: 50%;
}

.bnav-pro-card-content {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 16px 14px 16px 16px;
  position: relative;
  z-index: 1;
}

/* Icon ⚡ dalam lingkaran */
.bnav-pro-card-icon {
  flex-shrink: 0;
  width: 48px;
  height: 48px;
  border-radius: 14px;
  background: linear-gradient(135deg, #0D9488, #0F766E);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 24px;
  box-shadow: 0 4px 12px rgba(13,148,136,.45);
}

.bnav-pro-card-text { flex: 1; min-width: 0; }

.bnav-pro-card-tag {
  font-size: 9px;
  font-weight: 800;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: #2DD4BF;
  margin-bottom: 2px;
}

.bnav-pro-card-title {
  font-size: 15px;
  font-weight: 800;
  color: #fff;
  margin-bottom: 7px;
  line-height: 1.2;
}

.bnav-pro-card-perks {
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.bnav-pro-perk {
  font-size: 11px;
  font-weight: 500;
  color: #94A3B8;
  line-height: 1.3;
}

/* Chevron */
.bnav-pro-card-arrow {
  flex-shrink: 0;
  color: rgba(45,212,191,.6);
}

/* Dark mode — sudah dark by default, tweak minor */
[data-theme="dark"] .bnav-pro-card {
  background: linear-gradient(135deg, #060D18 0%, #0A1E35 40%, #082A40 100%);
  border-color: rgba(45,212,191,.18);
}
[data-theme="dark"] .bnav-pro-perk { color: #475569; }

/* Hanya tampil di mobile */
@media(min-width: 769px) {
  .bnav-pro-card { display: none !important; }
}

/* ═══════════════════════════════════════════════════════
   STATISTIK & METODOLOGI PENELITIAN — Module Styles
   ═══════════════════════════════════════════════════════ */

/* Step panels */
.stat-step-panel { animation: statFadeIn .25s ease; }
@keyframes statFadeIn { from { opacity:0; transform:translateY(8px); } to { opacity:1; transform:none; } }

/* Step indicator */
.stat-step-ind { transition: background .2s, color .2s; }
.stat-step-ind.active { background:#EFF6FF !important; color:#1D4ED8 !important; font-weight:700 !important; }
.stat-step-ind.done  { background:#F0FDF4 !important; color:#15803D !important; }

/* Radio card (tujuan penelitian) */
.stat-radio-card {
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  border:1.5px solid #E2E8F0; border-radius:10px; padding:12px 8px;
  cursor:pointer; text-align:center; transition:all .18s; background:white;
  -webkit-tap-highlight-color:transparent; user-select:none;
}
.stat-radio-card:hover { border-color:#93C5FD; background:#EFF6FF; }
.stat-radio-card.selected { border-color:#3B82F6; background:#EFF6FF; box-shadow:0 0 0 3px rgba(59,130,246,.12); }
.stat-radio-card.selected div:last-child { color:#1D4ED8 !important; }

/* Small radio pill */
.stat-radio-sm {
  display:inline-flex; align-items:center; gap:6px;
  border:1.5px solid #E2E8F0; border-radius:20px; padding:6px 12px;
  cursor:pointer; font-size:12px; font-weight:600; color:#475569;
  transition:all .18s; background:white;
  -webkit-tap-highlight-color:transparent; user-select:none;
}
.stat-radio-sm:hover { border-color:#93C5FD; background:#EFF6FF; color:#1D4ED8; }
.stat-radio-sm.selected { border-color:#3B82F6; background:#EFF6FF; color:#1D4ED8; box-shadow:0 0 0 3px rgba(59,130,246,.12); }

/* Skala badge pills */
.stat-skala-pill {
  display:inline-flex; align-items:center; gap:5px;
  border:1.5px solid #E2E8F0; border-radius:20px; padding:5px 12px;
  cursor:pointer; font-size:12px; font-weight:600; color:#64748B;
  transition:all .18s; background:white;
  -webkit-tap-highlight-color:transparent; user-select:none;
}
.stat-skala-pill:hover { border-color:#A78BFA; background:#F5F3FF; color:#6D28D9; }
.stat-skala-pill.selected { border-color:#7C3AED; background:#F5F3FF; color:#6D28D9; box-shadow:0 0 0 3px rgba(124,58,237,.12); }

/* Wizard question card */
.stat-q-card {
  background:#F8FAFC; border:1.5px solid #E2E8F0; border-radius:10px; padding:14px;
}
.stat-q-card .stat-q-label { font-size:13px; font-weight:700; color:#1E293B; margin-bottom:10px; }
.stat-q-btn {
  display:block; width:100%; text-align:left; border:1.5px solid #E2E8F0;
  background:white; border-radius:8px; padding:9px 12px; margin-bottom:6px;
  font-size:12px; font-weight:600; color:#374151; cursor:pointer;
  transition:all .15s; -webkit-tap-highlight-color:transparent;
}
.stat-q-btn:hover { border-color:#93C5FD; background:#EFF6FF; color:#1D4ED8; }
.stat-q-btn.selected { border-color:#3B82F6; background:#EFF6FF; color:#1D4ED8; }

/* Result cards */
.stat-result-section {
  background:white; border:1px solid #E2E8F0; border-radius:14px;
  padding:16px 18px; margin-bottom:10px;
}
.stat-result-badge {
  display:inline-block; padding:3px 10px; border-radius:20px;
  font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:.06em;
  margin-bottom:8px;
}
.stat-badge-blue { background:#EFF6FF; color:#1D4ED8; }
.stat-badge-purple { background:#F5F3FF; color:#6D28D9; }
.stat-badge-green { background:#F0FDF4; color:#15803D; }
.stat-badge-amber { background:#FFFBEB; color:#92400E; }
.stat-badge-red { background:#FEF2F2; color:#991B1B; }

/* Detected chip */
.stat-detect-chip {
  display:inline-flex; align-items:center; gap:4px;
  background:#EFF6FF; color:#1D4ED8; border:1px solid #BFDBFE;
  border-radius:20px; padding:4px 10px; font-size:11px; font-weight:700;
}

/* Dark mode */
[data-theme="dark"] .stat-radio-card { background:#1E293B; border-color:#334155; color:#E2E8F0; }
[data-theme="dark"] .stat-radio-card:hover { background:#1E40AF20; border-color:#3B82F6; }
[data-theme="dark"] .stat-radio-card.selected { background:#1E40AF30; border-color:#3B82F6; }
[data-theme="dark"] .stat-radio-sm { background:#1E293B; border-color:#334155; color:#94A3B8; }
[data-theme="dark"] .stat-radio-sm.selected { background:#1E40AF30; border-color:#3B82F6; color:#93C5FD; }
[data-theme="dark"] .stat-skala-pill { background:#1E293B; border-color:#334155; color:#94A3B8; }
[data-theme="dark"] .stat-skala-pill.selected { background:#2E1065; border-color:#7C3AED; color:#C4B5FD; }
[data-theme="dark"] .stat-q-card { background:#0F172A; border-color:#334155; }
[data-theme="dark"] .stat-q-btn { background:#1E293B; border-color:#334155; color:#E2E8F0; }
[data-theme="dark"] .stat-q-btn.selected { background:#1E40AF30; border-color:#3B82F6; color:#93C5FD; }
[data-theme="dark"] .stat-result-section { background:#1E293B; border-color:#334155; }
[data-theme="dark"] #statistik-app > div:first-child { /* header sudah gradient, oke */ }
[data-theme="dark"] #stat-pro-gate { background:#2E1065; border-color:#7C3AED; }
[data-theme="dark"] #stat-sampel-result { background:#1E3A5F; border-color:#3B82F6; }

/* ══════════════════════════════════════════
   STATISTIK WIZARD MODULE
   ══════════════════════════════════════════ */
#page-statistik { padding: 0; }
#stat-root { padding: 20px 24px; }