/* ── KALKULATOR (index.html) — app shell + komponen, brand Tanya Ners ── */

/* ── APP SHELL (kolom lebar HP, kerasa kayak aplikasi) ── */
.app{position:relative;z-index:1;max-width:440px;margin:0 auto;min-height:100dvh}

/* ── HERO (header ungu melengkung) ── */
.hero{
  position:relative;overflow:hidden;color:#fff;
  background:var(--grad);
  border-radius:0 0 32px 32px;
  padding:52px 24px 26px;
  box-shadow:0 14px 34px rgba(155,79,174,.28);
}
.hero::after{content:'';position:absolute;top:-40px;right:-30px;width:150px;height:150px;border-radius:50%;background:rgba(255,255,255,.1)}
.hero::before{content:'';position:absolute;bottom:-50px;left:-20px;width:120px;height:120px;border-radius:50%;background:rgba(255,255,255,.08)}
.hero-title{position:relative;font-family:'Nunito',sans-serif;font-weight:900;font-size:26px;letter-spacing:.3px;line-height:1.1}
.hero-sub{position:relative;font-family:'Mulish',sans-serif;font-weight:600;font-size:12.5px;color:rgba(255,255,255,.9);margin-top:5px}
.hero .spark{position:absolute;color:#fff;opacity:.7}

/* ── SCREEN (isi konten, sisain ruang buat bottom nav + home indicator iOS) ── */
.screen{padding:20px 18px calc(104px + env(safe-area-inset-bottom));display:flex;flex-direction:column;align-items:center}

/* ── BOTTOM NAV (naik di atas home indicator iPhone via safe-area) ── */
.tabbar{
  position:fixed;bottom:max(14px,env(safe-area-inset-bottom));left:50%;transform:translateX(-50%);
  width:calc(100% - 28px);max-width:412px;z-index:30;
  display:flex;gap:2px;
  background:rgba(255,255,255,.96);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);
  border:1.5px solid #fff;border-radius:24px;padding:9px 8px;
  box-shadow:0 14px 34px rgba(155,79,174,.18),0 2px 8px rgba(155,79,174,.08);
}
.tab-btn{
  flex:1;display:flex;flex-direction:column;align-items:center;gap:4px;cursor:pointer;
  background:none;border:none;padding:6px 4px;border-radius:16px;
  font-family:'Mulish',sans-serif;font-size:11px;font-weight:700;color:#BFA4CB;
  transition:color .2s,background .2s;
}
.tab-btn svg{width:22px;height:22px;display:block}
.tab-btn.active{background:var(--grad);color:#fff;box-shadow:0 5px 14px rgba(155,79,174,.32)}
.tab-btn.active span{font-weight:800}
.tab-panel{display:none;width:100%}
.tab-panel.active{display:block}

/* ── HEADER kecil di dalam tab (badge) ── */
.header{text-align:center;width:100%;margin-bottom:14px}
.date-badge{display:inline-flex;align-items:center;gap:6px;background:var(--ghost);color:var(--purpleD);font-family:'Nunito',sans-serif;font-weight:800;font-size:12.5px;padding:7px 16px;border-radius:999px;border:1.5px solid var(--purpleXL)}
.header h1{font-family:'Nunito',sans-serif;font-size:26px;font-weight:900;line-height:1.15;color:var(--ink)}
.header p{font-size:14px;font-weight:600;color:var(--sub);margin-top:8px;line-height:1.55}

/* ── CARD ── */
.card{width:100%;background:#fff;border-radius:24px;padding:20px;margin-bottom:16px;border:1px solid var(--border);box-shadow:var(--shadow)}
.section-label{
  display:inline-flex;align-items:center;
  background:var(--grad);color:#fff;
  font-family:'Nunito',sans-serif;font-weight:900;font-size:12.5px;letter-spacing:.3px;
  padding:7px 15px;border-radius:999px 999px 999px 6px;margin-bottom:16px;
  box-shadow:0 6px 14px rgba(155,79,174,.22);
}

/* ── PERTANYAAN ── */
.q{margin-bottom:20px}
.q:last-of-type{margin-bottom:0}
.q .ask{display:flex;align-items:center;gap:9px;font-family:'Nunito',sans-serif;font-size:16.5px;font-weight:800;color:var(--ink);margin-bottom:3px}
.q .num{display:inline-flex;align-items:center;justify-content:center;width:26px;height:26px;border-radius:50%;background:var(--grad);color:#fff;font-family:'Nunito',sans-serif;font-size:14px;font-weight:800;flex:none;box-shadow:0 4px 12px rgba(155,79,174,.3)}
.q .why{font-size:12.5px;font-weight:600;color:var(--sub);margin:0 0 10px 35px;line-height:1.5}
.q .in{margin-left:35px}
.q .cap{font-size:12px;font-weight:600;color:var(--sub);margin-top:7px}
.q .cap.hit{color:var(--purple)}
@media(max-width:420px){.q .why,.q .in{margin-left:0}}

/* input number & select */
input[type=number]{-moz-appearance:textfield}
input[type=number]::-webkit-outer-spin-button,input[type=number]::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
/* input jam: di iOS native-nya ketengah & nggak fit -> ratakan kiri + konsisten */
input[type=time],input[type=date]{-webkit-appearance:none;appearance:none;text-align:left;min-height:52px;box-sizing:border-box}
input[type=time]::-webkit-date-and-time-value,input[type=date]::-webkit-date-and-time-value{text-align:left;margin:0}
select{-webkit-appearance:none;appearance:none;cursor:pointer;background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='14' height='9' viewBox='0 0 14 9'><path d='M1 1l6 6 6-6' fill='none' stroke='%23B964C8' stroke-width='2.2' stroke-linecap='round'/></svg>");background-repeat:no-repeat;background-position:right 16px center;padding-right:42px}
.row{display:grid;gap:10px;grid-template-columns:1.35fr 1fr}

/* pemilih tanggal lahir (3 dropdown) — min-width:0 biar nggak overflow di HP mungil */
.datesel{display:grid;grid-template-columns:1fr 1.4fr 1.1fr;gap:8px}
.datesel select{min-width:0;padding:14px 8px;padding-right:24px;font-size:15px;background-position:right 8px center;text-align:left;text-overflow:ellipsis}
.fld{margin-bottom:.9rem}
label{display:block;font-family:'Nunito',sans-serif;font-size:12.5px;font-weight:800;color:var(--sub);margin-bottom:6px}

/* segmented control (pilih 2 opsi, mis. Sekarang/Pilih jam, Sebelum/Sesudah DBF) */
/* target pumping harian (X/8 + dots) */
.target-head{display:flex;align-items:baseline;gap:7px;margin-bottom:12px}
.target-head b{font-family:'Nunito',sans-serif;font-size:32px;font-weight:900;color:var(--purpleD);line-height:1;letter-spacing:-1px}
.target-head span{font-family:'Nunito',sans-serif;font-weight:800;color:var(--sub);font-size:14px}
.dots{display:flex;gap:7px;flex-wrap:wrap}
.dots .dot{width:24px;height:24px;border-radius:50%;background:var(--ghost);border:1.5px solid var(--purpleXL);transition:all .2s}
.dots .dot.on{background:var(--grad);border-color:transparent;box-shadow:0 3px 8px rgba(155,79,174,.3)}
.prog-delta{margin-top:12px;padding:11px 14px;border-radius:14px;font-family:'Nunito',sans-serif;font-weight:800;font-size:13.5px;text-align:center;line-height:1.45}
.prog-delta.naik{background:#EFFBF3;color:#1F8A4C;border:1.5px solid #9FE3B6}
.prog-delta.turun{background:#FEF2F2;color:#C0392B;border:1.5px solid #FBB4B4}
.prog-delta.stagnan{background:var(--ghost);color:var(--purpleD);border:1.5px solid var(--purpleXL)}
.fld-hint{font-size:12px;font-weight:600;color:var(--sub);margin:-2px 0 8px;line-height:1.45}
.fld-hint b{font-weight:800;color:var(--purpleD)}
.puas-guide{margin:-2px 0 10px;display:flex;flex-direction:column;gap:6px}
.pg-row{font-size:12px;font-weight:600;line-height:1.45;padding:8px 11px;border-radius:12px}
.pg-row b{font-weight:800}
.pg-ya{background:#EFFBF3;color:#1F8A4C;border:1.5px solid #9FE3B6}
.pg-no{background:#FEF2F2;color:#C0392B;border:1.5px solid #FBB4B4}

/* kartu bayi gabungan (Tracking): info + lambung keisi ASI + target */
.hero-bayi{position:relative;overflow:hidden;text-align:center;background:#fff;border:1px solid var(--purpleXL);display:flex;flex-direction:column}
/* apresiasi frekuensi + hujan emoji perayaan pas ibu "hit" */
.hb-appr{margin-top:10px;font-family:'Nunito',sans-serif;font-size:12px;font-weight:800;color:var(--purpleD);line-height:1.4}
.konfeti{position:absolute;bottom:34%;pointer-events:none;z-index:6;will-change:transform,opacity;animation:konfeti 1.8s cubic-bezier(.3,.7,.4,1) forwards}
@keyframes konfeti{0%{transform:translateY(10px) scale(.5) rotate(0);opacity:0}15%{opacity:1}100%{transform:translateY(-180px) scale(1.15) rotate(25deg);opacity:0}}
@media (prefers-reduced-motion:reduce){.konfeti{display:none}}
.hb-top{display:flex;flex-direction:column;align-items:center;gap:3px;text-align:center}
.hb-top>b{font-family:'Nunito',sans-serif;font-size:20px;font-weight:900;color:var(--ink);line-height:1.1}
.hb-meta{font-family:'Mulish',sans-serif;font-size:13px;color:var(--sub);font-weight:700}
.hb-meta b{color:var(--ink);font-weight:800}
.hb-berat{padding-top:12px;text-align:left}
/* buka/tutup halus tanpa tau tinggi konten (grid-rows 0fr -> 1fr) */
.collapse{display:grid;grid-template-rows:0fr;transition:grid-template-rows .32s ease}
.collapse.open{grid-template-rows:1fr}
.collapse>.collapse-in{overflow:hidden;min-height:0}
.hb-stage{display:flex;flex-direction:column;align-items:center;gap:8px;margin:8px 0 2px}
.baby-svg{width:168px;height:auto;max-width:56%;overflow:visible;cursor:pointer;-webkit-tap-highlight-color:transparent;outline:none;user-select:none}
.baby-svg:focus-visible{filter:drop-shadow(0 0 6px var(--purpleXL))}
.baby-svg:active{transform:scale(.98)}
#tr-baby{transform-box:fill-box;transform-origin:50% 100%;transition:transform .5s ease}
#tr-milk{transition:transform .8s ease-out}
/* animasi hidup: napas + kedip + riak ASI + gelembung */
#tr-breath{transform-box:fill-box;transform-origin:50% 100%;animation:tr-breath 3.6s ease-in-out infinite;will-change:transform}
#tr-wave{will-change:transform;animation:tr-wave 3.2s ease-in-out infinite alternate}
.eye{transform-box:fill-box;transform-origin:center;animation:tr-blink 4.8s infinite}
.bub{transform-box:fill-box;animation:tr-bub 3.4s ease-in infinite}
.bub.b2{animation-duration:4.2s;animation-delay:1.1s}
.bub.b3{animation-duration:3.8s;animation-delay:.6s}
/* ekspresi ikut kondisi */
.mouth{display:none}
.m-smile{display:block}
#tr-svg.is-empty .m-smile{display:none}
#tr-svg.is-empty .m-neutral{display:block}
#tr-svg.is-happy .m-smile{display:none}
#tr-svg.is-happy .m-happy{display:block}
.eyes-happy{display:none}
#tr-svg.is-happy .eyes-open{display:none}
#tr-svg.is-happy .eyes-happy{display:block}
.cheek{opacity:.6;transition:opacity .4s}
#tr-svg.is-happy .cheek{opacity:.95}
.zzz{opacity:0;transition:opacity .5s}
#tr-svg.is-happy .zzz{opacity:1}
#tr-svg.is-happy .zzz text{animation:tr-zzz 2.6s ease-in-out infinite}
#tr-svg.is-happy .zzz text:last-child{animation-delay:.5s}
.spark{opacity:0;transition:opacity .5s}
#tr-svg.is-happy .spark{opacity:1}
#tr-svg.is-happy .s{transform-box:fill-box;transform-origin:center;animation:tr-twinkle 1.9s ease-in-out infinite}
#tr-svg.is-happy .s2{animation-delay:.6s}
#tr-svg.is-happy .s3{animation-delay:1.1s}
/* interaksi: hati saat disentuh, goyang, mantul saat catat sesi */
.heart{transform-box:fill-box;transform-origin:center;opacity:0}
#tr-svg.tap .heart{animation:tr-heart .8s ease}
#tr-svg.tap #tr-breath{animation:tr-wiggle .7s ease}
#tr-svg.bounce #tr-breath{animation:tr-bounce .78s cubic-bezier(.3,1.4,.5,1)}
@keyframes tr-breath{0%,100%{transform:translateY(0) scale(1)}50%{transform:translateY(-1.5px) scale(1.018)}}
@keyframes tr-wave{from{transform:translateX(6px)}to{transform:translateX(-14px)}}
@keyframes tr-blink{0%,92%,100%{transform:scaleY(1)}96%{transform:scaleY(.08)}}
@keyframes tr-bub{0%{transform:translateY(6px);opacity:0}20%{opacity:.55}80%{opacity:.4}100%{transform:translateY(-30px);opacity:0}}
@keyframes tr-zzz{0%,100%{transform:translateY(0);opacity:.4}50%{transform:translateY(-6px);opacity:1}}
@keyframes tr-twinkle{0%,100%{transform:scale(.5) rotate(0);opacity:.2}50%{transform:scale(1.1) rotate(20deg);opacity:1}}
@keyframes tr-heart{0%{opacity:0;transform:translateY(6px) scale(.4)}30%{opacity:1}70%{opacity:1;transform:translateY(-18px) scale(1)}100%{opacity:0;transform:translateY(-34px) scale(.9)}}
@keyframes tr-wiggle{0%,100%{transform:rotate(0)}20%{transform:rotate(-5deg)}45%{transform:rotate(5deg)}70%{transform:rotate(-3deg)}}
@keyframes tr-bounce{0%{transform:translateY(0) scale(1)}35%{transform:translateY(-11px) scale(1.04,.96)}70%{transform:translateY(0) scale(.98,1.02)}100%{transform:translateY(0) scale(1)}}
@media (prefers-reduced-motion:reduce){
  #tr-breath,#tr-wave,.eye,.bub,.zzz text,.s,.heart{animation:none!important}
}
/* carousel geser: Perkembangan / Tren / Saran */
.swipe{margin-bottom:16px}
.swipe-track{display:flex;overflow-x:auto;overflow-y:hidden;scroll-snap-type:x mandatory;scrollbar-width:none;-webkit-overflow-scrolling:touch;align-items:flex-start}
.swipe-track::-webkit-scrollbar{display:none}
.swipe-slide{flex:0 0 100%;min-width:0;scroll-snap-align:center;display:flex}
.swipe-slide .card{margin-bottom:0;width:100%}
/* nav carousel di BAWAH (panah + titik sebaris) -> nggak nabrak konten kartu */
.swipe-nav{display:flex;align-items:center;justify-content:center;gap:14px;margin-top:12px}
.swipe-arrow{flex:none;width:34px;height:34px;border-radius:50%;border:1.5px solid var(--purpleXL);background:#fff;box-shadow:0 2px 8px rgba(155,79,174,.15);color:var(--purpleD);font-family:'Nunito',sans-serif;font-size:20px;font-weight:800;line-height:1;cursor:pointer;display:flex;align-items:center;justify-content:center;padding:0 0 2px;transition:transform .15s,opacity .2s}
.swipe-arrow:active{transform:scale(.9)}
.swipe-arrow:disabled{opacity:.3;pointer-events:none}
.swipe-dots{display:flex;gap:7px}
.swipe-dots .sd{width:8px;height:8px;border-radius:50%;background:var(--purpleXL);transition:width .25s,background .25s}
.swipe-dots .sd.on{background:var(--grad);width:22px;border-radius:4px}
.hb-body{flex:1;display:flex;flex-direction:column;justify-content:center;gap:14px;margin-top:6px}
.hb-num{line-height:1.1;background:var(--ghost);border-radius:18px;padding:15px 14px}
.hb-lbl{font-family:'Nunito',sans-serif;font-size:11.5px;font-weight:800;color:var(--purpleD);text-transform:uppercase;letter-spacing:.08em}
.hb-val{font-family:'Nunito',sans-serif;line-height:1;margin:3px 0}
.hb-val b{font-size:42px;font-weight:900;color:var(--purpleD);letter-spacing:-1.5px}
.hb-val span{font-size:15px;font-weight:800;color:var(--sub)}
.hb-pill{display:inline-block;padding:4px 13px;border-radius:999px;font-family:'Nunito',sans-serif;font-size:12px;font-weight:800}
.hb-pill.kurang{background:#FEE2E2;color:#C0392B}
.hb-pill.cukup{background:#DCF7E5;color:#1F8A4C}
.hb-pill.lebih{background:#FDEFCF;color:#B4700A}
.hb-pill.mulai{background:#fff;color:var(--purpleD);border:1.5px solid var(--purpleXL)}
.hb-target{display:flex;align-items:center;justify-content:center;gap:12px;flex-wrap:wrap;background:var(--ghost);border-radius:16px;padding:13px 14px}
.hb-target .dots{justify-content:center}
.hb-target-n{font-family:'Nunito',sans-serif;font-size:14px;font-weight:800;color:var(--sub)}
.hb-target-n b{color:var(--purpleD);font-size:20px}
.hb-fact{margin:0;font-family:'Mulish',sans-serif;font-size:12px;font-weight:600;color:var(--sub);line-height:1.5;background:var(--ghost);border-radius:14px;padding:11px 13px}
.hb-fact b{color:var(--purpleD);font-weight:800}
.hero-bayi .say{font-family:'Mulish',sans-serif;font-size:12.5px;font-weight:600;color:var(--sub);line-height:1.55;max-width:320px;margin:12px auto 0}
/* form catat sesi inline di dalam kartu bayi (bukan kartu terpisah) */
.tr-form-inline{padding-top:16px;border-top:1.5px dashed var(--purpleXL);text-align:left}
.seg{display:flex;gap:6px;background:var(--ghost);border:1.5px solid var(--purpleXL);border-radius:14px;padding:5px}
.seg-btn{flex:1;padding:11px 8px;border:none;border-radius:10px;background:transparent;cursor:pointer;font-family:'Nunito',sans-serif;font-weight:800;font-size:13px;color:var(--purpleD);transition:background .2s,color .2s,box-shadow .2s}
.seg-btn.active{background:var(--grad);color:#fff;box-shadow:0 4px 12px rgba(155,79,174,.28)}

/* ── BUTTON (pill gradient) ── */
.btn{
  width:100%;padding:15px 20px;border:none;border-radius:16px;
  font-family:'Nunito',sans-serif;font-size:15px;font-weight:800;letter-spacing:.2px;cursor:pointer;
  transition:transform .2s,box-shadow .2s,opacity .2s;
  display:flex;align-items:center;justify-content:center;gap:8px;margin-top:16px;
  background:var(--grad);color:#fff;box-shadow:0 10px 24px rgba(155,79,174,.32);
}
@media(hover:hover){.btn:hover:not(:disabled){transform:translateY(-2px);box-shadow:0 14px 30px rgba(155,79,174,.42)}}
.btn:active{transform:scale(.97)}
.btn:disabled{opacity:.5;cursor:not-allowed}
.btn.accent{background:var(--gradOrange);box-shadow:0 10px 24px rgba(244,135,90,.34)}
@media(hover:hover){.btn.accent:hover:not(:disabled){box-shadow:0 14px 30px rgba(244,135,90,.44)}}
.btn.keluar{background:#fff;color:#E86030;border:1.5px solid #F6C3AD;box-shadow:none}
@media(hover:hover){.btn.keluar:hover{background:#FFF4EF;transform:translateY(-2px);box-shadow:0 6px 16px rgba(232,96,48,.16)}}

/* ── PROFIL / baris data ── */
.pf-row{display:flex;justify-content:space-between;align-items:center;gap:14px;padding:12px 0;border-bottom:1px solid var(--border);font-size:14px}
.pf-row:last-child{border-bottom:none}
.pf-row span{color:var(--sub);font-weight:700;flex:none}
.pf-row b{font-family:'Nunito',sans-serif;color:var(--ink);font-weight:800;text-align:right;word-break:break-word}
.mini-lnk{background:none;border:none;color:var(--purpleD);font-family:'Nunito',sans-serif;font-weight:800;font-size:13px;cursor:pointer;padding:0;text-decoration:underline}
.locked-val{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:8px 12px;padding:14px 18px;border:1.5px solid var(--purpleXL);border-radius:16px;background:var(--ghost)}
.locked-val b{font-family:'Nunito',sans-serif;font-weight:800;color:var(--purpleD);font-size:15px;flex:1 1 auto;min-width:0}
.locked-val .mini-lnk{flex:none}
#pw-alert:empty,#bayi-alert:empty{display:none}

/* ── TRACKING ── */
#tr-list .sesi{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:11px 0;border-bottom:1px solid var(--border);font-size:13.5px}
#tr-list .sesi:last-child{border-bottom:none}
#tr-list .sesi-ki{display:flex;flex-direction:column;gap:3px;min-width:0}
#tr-list .sesi .jam{font-family:'Nunito',sans-serif;font-weight:800;color:var(--ink);font-size:14px}
#tr-list .sesi .sub{font-size:11px;color:var(--mute);font-weight:700}
#tr-list .sesi-ka{display:flex;align-items:center;gap:10px;flex:none}
#tr-list .sesi .v{font-family:'Nunito',sans-serif;font-weight:800;color:var(--ink);white-space:nowrap}
#tr-list .sesi .rinci{color:var(--sub);font-weight:600;font-size:12px}
#tr-list .sesi .tag{display:inline-block;padding:0 6px;border-radius:6px;font-size:10.5px;font-weight:800;line-height:1.5}
#tr-list .sesi .tag-belum{background:#FDECC8;color:#B7791F}
#tr-list .sesi .tag-puas{background:#DCFAE6;color:#2E9E5B}
#tr-list .sesi button{font-family:'Nunito',sans-serif;font-size:11px;font-weight:800;color:#E86030;background:#fff;border:1.5px solid #F6C3AD;border-radius:999px;padding:3px 10px;cursor:pointer;flex:none}
#tr-list .kosong{color:var(--mute);font-size:13px;font-weight:600;text-align:center;padding:10px}
/* grafik garis (tren produksi) */
.line-chart{width:100%;height:auto;display:block;overflow:visible}
.line-chart .grid{stroke:#EDE3F3;stroke-width:1}
.line-chart .yl{fill:var(--sub);font-family:'Nunito',sans-serif;font-size:8px;font-weight:700;text-anchor:end}
.line-chart .xl{fill:var(--sub);font-family:'Nunito',sans-serif;font-size:9px;font-weight:700;text-anchor:middle}
.line-chart .tgt{stroke:#C77AD6;stroke-width:1.4;stroke-dasharray:4 3}
.line-chart .tl{fill:#B155C4;font-family:'Nunito',sans-serif;font-size:8px;font-weight:800;text-anchor:end}
.line-chart .ln{fill:none;stroke:#B964C8;stroke-width:2.4;stroke-linejoin:round;stroke-linecap:round}
.line-chart .dot{fill:#B964C8;stroke:#fff;stroke-width:1.5}
.line-chart .dot.cukup{fill:#3FB574}
.line-chart .dot.kurang{fill:#B983C9}
.line-chart .vl{fill:var(--purpleD);font-family:'Nunito',sans-serif;font-size:8px;font-weight:800;text-anchor:middle;paint-order:stroke;stroke:#fff;stroke-width:2.5px;stroke-linejoin:round}
.line-chart .yr{fill:#3F9E96;font-family:'Nunito',sans-serif;font-size:8px;font-weight:700;text-anchor:start}
.line-chart .fbar{fill:#BFE9E4}
.line-chart .fv{fill:#2E8A82;font-family:'Nunito',sans-serif;font-size:8.5px;font-weight:800;text-anchor:middle;paint-order:stroke;stroke:#fff;stroke-width:2.5px;stroke-linejoin:round}
.saran-kosong{background:var(--ghost);border:1.5px dashed var(--purpleXL);border-radius:16px;padding:16px;text-align:center;font-family:'Mulish',sans-serif;font-size:13px;font-weight:600;color:var(--sub);line-height:1.5}
.saran-kosong b{color:var(--purpleD);font-weight:800}
.analisa-disc{margin:14px 0 0;padding-top:12px;border-top:1.5px dashed var(--purpleXL);font-family:'Mulish',sans-serif;font-size:11px;font-weight:600;color:var(--mute);line-height:1.5;text-align:center;font-style:italic}
.pisah{border-top:1.5px dashed var(--purpleXL);margin:22px 0 0}
.saran-info{margin:8px 2px 0;font-family:'Mulish',sans-serif;font-size:11.5px;font-weight:600;color:var(--sub);line-height:1.45;text-align:center}
.saran-cara{margin-top:10px;background:var(--ghost);border:1.5px solid var(--purpleXL);border-radius:14px;padding:11px 13px;font-family:'Mulish',sans-serif;font-size:11.5px;font-weight:600;color:var(--sub);line-height:1.55;text-align:left}
.saran-cara b{color:var(--purpleD);font-weight:800}
.saran-periode{font-family:'Nunito',sans-serif;font-size:11.5px;font-weight:800;color:var(--purpleD);text-transform:uppercase;letter-spacing:.03em;margin-bottom:8px}
/* riwayat analisa: dropdown per periode (biar nggak kepanjangan) */
.riwayat{display:flex;flex-direction:column;gap:10px}
.riw-item{border:1.5px solid var(--purpleXL);border-radius:16px;overflow:hidden;background:var(--ghost)}
.riw-head{width:100%;display:flex;align-items:center;justify-content:space-between;gap:8px;background:none;border:none;cursor:pointer;padding:13px 15px;font-family:'Nunito',sans-serif;font-size:13px;font-weight:800;color:var(--purpleD);text-align:left}
.riw-chev{transition:transform .3s;font-size:12px;flex:none}
.riw-item.open .riw-chev{transform:rotate(180deg)}
.riw-body{display:grid;grid-template-rows:0fr;transition:grid-template-rows .3s ease}
.riw-item.open .riw-body{grid-template-rows:1fr}
.riw-body>.riw-in{overflow:hidden;min-height:0}
.riw-in .saran-kartu{margin:0;border:none;border-top:1.5px solid var(--purpleXL);border-radius:0;background:transparent;padding:12px 15px 15px}
.btn.accent:disabled{background:#EAD9EE;color:#B39CBD;box-shadow:none;cursor:default}
.chart-leg{display:flex;justify-content:center;gap:16px;margin-top:8px;font-family:'Nunito',sans-serif;font-size:11px;font-weight:700;color:var(--sub)}
.chart-leg .lg{display:inline-flex;align-items:center;gap:6px}
.chart-leg .lg::before{content:"";width:14px;height:3px;border-radius:2px;background:#B964C8}
.chart-leg .lg-bar::before{width:11px;height:11px;border-radius:3px;background:#BFE9E4}
/* loading saran (AI) */
.saran-load{background:var(--ghost);border:1.5px solid var(--purpleXL);border-radius:16px;padding:14px 16px;margin-top:12px;font-family:'Nunito',sans-serif;font-size:13px;font-weight:700;color:var(--purpleD)}
.saran-load-row{display:flex;align-items:center;gap:10px}
.saran-load .spin{width:18px;height:18px;border-radius:50%;border:2.5px solid var(--purpleXL);border-top-color:var(--purpleD);animation:spin .7s linear infinite;flex:none}
.saran-bar{height:8px;background:#E6D6EE;border-radius:999px;overflow:hidden;margin:11px 0 6px}
.saran-bar>i{display:block;height:100%;width:0;background:var(--grad);border-radius:999px;transition:width .45s ease}
.saran-load-pct{text-align:right;font-size:12px;font-weight:800;color:var(--purpleD)}
@keyframes spin{to{transform:rotate(360deg)}}
.saran-kartu{background:var(--ghost);border:1.5px solid var(--purpleXL);border-radius:18px;padding:14px 16px;margin-top:12px;font-size:13.5px;line-height:1.6;color:var(--sub)}
.saran-kartu h4{font-family:'Nunito',sans-serif;font-size:14.5px;font-weight:900;color:var(--purpleD);margin:0 0 6px}
.saran-kartu ul{margin:6px 0 0 18px}.saran-kartu li{margin-bottom:4px}
.saran-materi{border-top:1.5px dashed var(--purpleXL);margin-top:10px;padding-top:10px}
.saran-materi .m{font-family:'Nunito',sans-serif;font-weight:800;color:var(--ink)}.saran-materi .s{font-size:12px;color:var(--sub)}
/* section jadi dropdown di dalam hasil analisa (penyebab / langkah / materi) */
.saran-sec{margin-top:9px;border:1.5px solid var(--purpleXL);border-radius:12px;overflow:hidden}
.sec-head{width:100%;display:flex;align-items:center;gap:8px;background:none;border:none;cursor:pointer;padding:11px 13px;font-family:'Nunito',sans-serif;font-size:13px;font-weight:800;color:var(--purpleD);text-align:left}
.sec-n{background:var(--purpleXL);color:var(--purpleD);font-size:11px;font-weight:800;border-radius:10px;padding:1px 8px}
.sec-chev{margin-left:auto;transition:transform .3s;font-size:12px;flex:none}
.saran-sec.open .sec-chev{transform:rotate(180deg)}
.sec-body{display:grid;grid-template-rows:0fr;transition:grid-template-rows .3s ease}
.saran-sec.open .sec-body{grid-template-rows:1fr}
.sec-body>.sec-in{overflow:hidden;min-height:0}
.sec-in{padding:2px 14px 12px}
.sec-in ul{margin:2px 0 0 18px}
.sec-in .saran-materi{border-top:none;margin-top:0;padding-top:2px}
#tr-setup-alert:empty,#tr-form-alert:empty,#tr-berat-alert:empty{display:none}
/* modal konfirmasi kunci tanggal lahir */
.kunci-ov{position:fixed;inset:0;background:rgba(40,20,70,.45);display:flex;align-items:center;justify-content:center;padding:20px;z-index:9999}
.kunci-modal{background:#fff;border-radius:20px;max-width:340px;width:100%;padding:22px 20px;box-shadow:0 20px 50px rgba(0,0,0,.25)}
.kunci-judul{font-family:'Nunito',sans-serif;font-size:16px;font-weight:900;color:var(--purpleD);margin-bottom:8px}
.kunci-teks{font-size:13.5px;line-height:1.6;color:var(--sub)}
.kunci-aksi{display:flex;gap:10px;margin-top:18px}
.kunci-aksi button{flex:1;font-family:'Nunito',sans-serif;font-size:14px;font-weight:800;padding:11px;border-radius:12px;cursor:pointer;border:0}
.kunci-batal{background:#f1eef8;color:var(--purpleD)}
.kunci-ya{background:#7c4dff;color:#fff}

/* ── HASIL ── */
#hasil[hidden]{display:none}
#hasil{width:100%}
.res-head{font-family:'Nunito',sans-serif;font-size:20px;font-weight:900;color:var(--ink);margin-bottom:2px;line-height:1.25}
.res-head .c{color:var(--purple)}
.res-sub{font-size:12.5px;font-weight:600;color:var(--sub);margin-bottom:1rem}

/* ── KPI ── */
.kpi{border-radius:22px;padding:20px 16px;text-align:center;margin-bottom:16px;background:linear-gradient(135deg,#F7ECFA,#F4E1F0);border:1px solid var(--purpleXL)}
.kpi .lbl{font-family:'Nunito',sans-serif;font-size:11.5px;font-weight:800;color:var(--purpleD);text-transform:uppercase;letter-spacing:.08em}
.kpi .val{font-family:'Nunito',sans-serif;font-size:42px;font-weight:900;color:var(--purpleD);line-height:1.1;letter-spacing:-1.5px;margin:2px 0}
.kpi .val small{font-size:18px;font-weight:800;letter-spacing:0}
.kpi .say{font-size:12.5px;font-weight:600;color:var(--sub);line-height:1.55;max-width:320px;margin:0 auto}
.kpi.alt{background:linear-gradient(135deg,#FFF6E9,#FDEFCF);border-color:#FBE0A6}
.kpi.alt .lbl,.kpi.alt .val{color:#B45309}
.kpi.kurang{background:linear-gradient(135deg,#FEF2F2,#FEE2E2);border-color:#FBB4B4}
.kpi.kurang .val,.kpi.kurang .lbl{color:#C0392B}
.kpi.cukup{background:linear-gradient(135deg,#EFFBF3,#DCF7E5);border-color:#9FE3B6}
.kpi.cukup .val,.kpi.cukup .lbl{color:#1F8A4C}
.kpi.lebih{background:linear-gradient(135deg,#FFF8EC,#FDEFCF);border-color:#FBE0A6}
.kpi.lebih .val,.kpi.lebih .lbl{color:#B4700A}

/* botol */
.botol{display:flex;align-items:center;justify-content:center;gap:14px;margin:10px 0 8px}
.botol svg{flex:none}
.botol .cap{font-size:12.5px;font-weight:600;color:var(--sub);text-align:left;max-width:150px;line-height:1.5}

/* langkah */
.step{margin-top:1rem;padding-top:1rem;border-top:1px solid var(--border)}
.step h3{font-family:'Nunito',sans-serif;font-size:14.5px;font-weight:800;color:var(--ink);margin-bottom:10px}
.step ol{list-style:none;counter-reset:s}
.step li{counter-increment:s;position:relative;padding-left:34px;margin-bottom:9px;font-size:13.5px;font-weight:600;color:var(--sub);line-height:1.55}
.step li:last-child{margin-bottom:0}
.step li:before{content:counter(s);position:absolute;left:0;top:1px;width:23px;height:23px;border-radius:50%;background:var(--ghost);color:var(--purpleD);font-family:'Nunito',sans-serif;font-weight:800;font-size:12px;display:flex;align-items:center;justify-content:center}
.step li b{font-weight:800;color:var(--ink)}
.step p{font-size:13.5px;font-weight:600;color:var(--sub);line-height:1.55}
.step p b{font-weight:800;color:var(--ink)}

/* grafik minggu */
.bars{display:grid;gap:6px;margin-top:10px}
.bar{display:grid;grid-template-columns:72px 1fr 52px;align-items:center;gap:9px;font-size:12px;font-weight:600}
.bar .t{color:var(--sub)}
.bar .track{background:#F2E9F6;border-radius:999px;height:15px;overflow:hidden}
.bar .fill{background:linear-gradient(90deg,#D194DD,#B964C8);height:100%;border-radius:999px}
.bar .n{text-align:right;color:var(--sub);font-family:'Nunito',sans-serif;font-weight:700}
.bar.now .t,.bar.now .n{color:var(--purpleD);font-weight:800}
.bar.now .fill{background:linear-gradient(90deg,#B964C8,#9F4FAE)}

/* notif MPASI di hero Tracking (bayi > 6 bulan) */
.hb-mpasi{background:#FFF7ED;color:#9A3412;border:1.5px solid #FCD9B6;border-radius:14px;padding:12px 16px;font-size:12.5px;line-height:1.55;font-weight:600;margin-top:4px}
.hb-mpasi b{font-weight:800;color:#7C2D12}
.hb-mpasi[hidden]{display:none}

/* alert */
.alert{border-radius:16px;padding:14px 18px;font-size:13px;font-weight:600;line-height:1.6;margin-top:12px}
.alert .ttl{font-family:'Nunito',sans-serif;font-size:14.5px;font-weight:800;display:block;margin-bottom:3px}
.alert b{font-weight:800}
.alert.ok{background:#FFFBEB;color:#A16207;border:1.5px solid #FBE0A6}
.alert.bad{background:#FEF2F2;color:#C0392B;border:1.5px solid #FBB4B4}
.alert.bad b{color:#991B1B}

/* disclaimer */
.disc{width:100%;background:var(--ghost);border:1px solid var(--purpleXL);border-radius:22px;padding:20px;font-size:13px;font-weight:600;color:var(--sub);line-height:1.65}
.disc .ttl{font-family:'Nunito',sans-serif;font-size:14.5px;font-weight:800;color:var(--ink);display:block;margin-bottom:6px}
.disc ul{margin:8px 0 0;list-style:none}
.disc li{position:relative;padding-left:17px;margin-bottom:7px}
.disc li:before{content:'';position:absolute;left:0;top:8px;width:6px;height:6px;border-radius:50%;background:var(--purpleL)}
.disc b{font-weight:800;color:var(--ink)}
.disc .end{margin-top:10px}
.disc-more[hidden]{display:none}
.disc-toggle{display:inline-block;margin-top:10px;background:none;border:none;padding:0;cursor:pointer;font-family:'Nunito',sans-serif;font-weight:800;font-size:13px;color:var(--purpleD);text-decoration:underline}

/* ── GERBANG LOGIN (splash) ── */
body.ngecek .app{visibility:hidden}
.loading{position:fixed;inset:0;display:none;align-items:center;justify-content:center;flex-direction:column;gap:14px;background:var(--bg);z-index:50}
body.ngecek .loading{display:flex}
.loading img{height:90px;width:auto;animation:logoBounce 1.4s ease-in-out infinite}
.loading span{font-family:'Nunito',sans-serif;font-size:13px;font-weight:700;color:var(--mute)}

.akun{display:flex;align-items:center;justify-content:center;gap:8px;flex-wrap:wrap;margin-top:1rem;font-size:12px;font-weight:600;color:var(--sub)}
.akun .who{background:var(--ghost);border:1.5px solid var(--purpleXL);color:var(--purpleD);border-radius:999px;padding:4px 13px;max-width:230px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.akun button{font-family:'Nunito',sans-serif;font-size:12px;font-weight:800;color:var(--sub);background:#fff;border:1.5px solid var(--border);border-radius:999px;padding:4px 14px;cursor:pointer}
@media(hover:hover){.akun button:hover{border-color:#F6C3AD;color:#E86030;background:#FFF4EF}}

/* ── LAYAR KECIL ── */
@media(max-width:380px){
  .screen{padding:18px 14px calc(100px + env(safe-area-inset-bottom))}
  .datesel{gap:6px}
  .datesel select{padding:13px 6px;padding-right:20px;font-size:14px;background-position:right 6px center}
  .card{padding:16px;border-radius:22px}
  .hero{padding:48px 20px 24px}
  .hero-title{font-size:23px}
  .kpi{padding:16px 12px}
  .kpi .val{font-size:34px;letter-spacing:-1px}
  .kpi .val small{font-size:16px}
  .botol{gap:10px}
  .botol .cap{max-width:130px}
  .bar{grid-template-columns:58px 1fr 46px;gap:7px}
  .disc{padding:16px}
}