:root{
  --bg:#f5f8f6; --surface:#ffffff; --surface2:#f9fbfa; --soft:#eef6f2;
  --primary:#2e6f5e; --primary2:#3d8b73; --dark:#173b31;
  --text:#1e2925; --muted:#6e7d77; --line:#dbe6e2;
  --good:#2d8c61; --goodbg:#edf8f2; --warn:#b67c16; --warnbg:#fff8e8;
  --bad:#b65353; --badbg:#fff0f0; --blue:#5577bb; --bluebg:#eef3ff;
  --purple:#7856b8; --purplebg:#f3effd;
  --shadow:0 12px 30px rgba(34,70,59,.10);
}
*{box-sizing:border-box}
html,body{margin:0;min-height:100%;font-family:Inter,ui-sans-serif,system-ui,-apple-system,"Segoe UI",sans-serif;background:var(--bg);color:var(--text)}
button,select,input,textarea{font:inherit}
button{cursor:pointer}
.app-shell{display:grid;grid-template-columns:255px 1fr;min-height:100vh}
.sidebar{background:var(--dark);color:#d8e7e1;padding:18px 14px;position:sticky;top:0;height:100vh;overflow:auto;z-index:30}
.brand{display:flex;gap:10px;align-items:center;color:#fff;margin-bottom:20px}
.brand-mark{width:42px;height:42px;border-radius:14px;display:grid;place-items:center;background:linear-gradient(135deg,var(--primary2),#76b39e);font-weight:900;font-size:18px}
.brand strong{display:block;font-size:14px}.brand small{display:block;margin-top:2px;font-size:9px;opacity:.65}
.role-card{padding:12px;border-radius:14px;background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.08);margin-bottom:18px}
.role-card span{display:block;font-size:9px;opacity:.65;margin-bottom:6px;font-weight:800;letter-spacing:.6px}
.role-card select{width:100%;background:#244d42;color:#fff;border:1px solid rgba(255,255,255,.13);padding:9px;border-radius:10px}
.menu{display:grid;gap:5px}
.menu button{border:0;background:transparent;color:#bdd1c8;text-align:left;padding:10px 11px;border-radius:10px;font-size:12px;font-weight:800}
.menu button span{display:inline-block;width:23px}.menu button:hover,.menu button.active{background:rgba(255,255,255,.09);color:#fff}
.sidebar-note{margin-top:20px;padding:12px;border-radius:12px;background:rgba(255,255,255,.06);font-size:10px;line-height:1.45}.sidebar-note p{margin:5px 0 0;opacity:.72}
.main{min-width:0}
.topbar{height:78px;background:#fff;border-bottom:1px solid var(--line);display:flex;align-items:center;justify-content:space-between;padding:0 22px;position:sticky;top:0;z-index:20}
.topbar h1{margin:0;font-size:20px}.topbar p{font-size:11px;color:var(--muted);margin:3px 0 0}.top-actions{display:flex;gap:10px;align-items:center}
.avatar{width:38px;height:38px;border-radius:50%;display:grid;place-items:center;background:var(--soft);color:var(--primary);font-weight:900}
.btn,.icon-btn{border:1px solid var(--line);background:#fff;padding:9px 11px;border-radius:11px;font-weight:800;color:var(--text)}.btn.primary{background:var(--primary);border-color:var(--primary);color:#fff}.btn.secondary{background:var(--soft);color:var(--primary)}.btn.warn{background:var(--warnbg);color:var(--warn)}.btn.small{padding:7px 9px;font-size:10px}
.mobile-only{display:none}
.content{padding:20px;max-width:1500px;margin:auto}
.kpis{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}.kpi{background:#fff;border:1px solid var(--line);border-radius:17px;padding:15px;box-shadow:var(--shadow)}.kpi small{font-size:10px;color:var(--muted)}.kpi b{display:block;font-size:25px;margin-top:4px}.kpi .trend{font-size:9px;font-weight:900;color:var(--good);margin-top:6px}
.grid-2{display:grid;grid-template-columns:1.25fr .75fr;gap:12px;margin-top:12px}.grid-equal{display:grid;grid-template-columns:1fr 1fr;gap:12px}.grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
.panel{background:#fff;border:1px solid var(--line);border-radius:17px;padding:15px;box-shadow:var(--shadow)}.panel h3{margin:0 0 10px;font-size:14px}.panel h4{margin:0 0 7px;font-size:12px}
.muted{color:var(--muted)}.small{font-size:10px;line-height:1.55}
.badge{display:inline-flex;padding:6px 8px;border-radius:999px;font-size:9px;font-weight:900}.badge.good{background:var(--goodbg);color:var(--good)}.badge.warn{background:var(--warnbg);color:var(--warn)}.badge.bad{background:var(--badbg);color:var(--bad)}.badge.blue{background:var(--bluebg);color:var(--blue)}.badge.purple{background:var(--purplebg);color:var(--purple)}
.table-wrap{overflow:auto}.table{width:100%;border-collapse:collapse;min-width:720px;font-size:11px}.table th{text-align:left;color:var(--muted);padding:9px;border-bottom:1px solid var(--line)}.table td{padding:10px 9px;border-bottom:1px solid #edf2f0}
.chart{height:220px}.chart svg{width:100%;height:100%}
.section-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:10px}
.info-card{border:1px solid var(--line);border-radius:14px;padding:12px;margin-bottom:9px}.info-card b{font-size:12px}.info-card p{font-size:10px;color:var(--muted);line-height:1.5;margin:5px 0 0}
.toast{position:fixed;right:18px;bottom:18px;background:var(--dark);color:#fff;padding:12px 14px;border-radius:12px;font-size:11px;box-shadow:var(--shadow);z-index:60}

/* Measurement */
.measure-layout{display:grid;grid-template-columns:1fr 380px;gap:12px}
.measure-stepper{display:grid;grid-template-columns:repeat(4,1fr);gap:7px;margin-bottom:12px}.step{padding:10px;border-radius:12px;border:1px solid var(--line);background:#fff;font-size:10px;font-weight:900;color:var(--muted)}.step.active{background:var(--soft);color:var(--primary);border-color:#a9cfc0}.step.done{background:var(--goodbg);color:var(--good)}
.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:9px}.form-group{margin-bottom:10px}.form-group label{display:block;font-size:10px;font-weight:900;margin-bottom:6px}.form-group input,.form-group select,.form-group textarea{width:100%;border:1px solid var(--line);background:#fbfcfc;border-radius:11px;padding:10px;outline:none}.form-group input:focus,.form-group select:focus{border-color:#9bc8b9;box-shadow:0 0 0 3px rgba(61,139,115,.08)}
.device-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}.device{padding:12px;border-radius:14px;border:1px solid var(--line);background:#fff;text-align:center}.device .led{width:9px;height:9px;border-radius:50%;background:var(--good);margin:0 auto 6px;box-shadow:0 0 0 4px rgba(45,140,97,.12)}.device b{display:block;font-size:11px}.device small{font-size:9px;color:var(--muted)}
.sensor-readout{display:grid;grid-template-columns:1fr 1fr;gap:9px}.sensor-card{padding:16px;border-radius:16px;background:linear-gradient(135deg,var(--primary),var(--dark));color:#fff}.sensor-card small{opacity:.72}.sensor-card b{display:block;font-size:29px;margin-top:4px}
.camera-box{height:340px;border-radius:20px;background:linear-gradient(180deg,#dbe7e2,#c3d6cf);position:relative;overflow:hidden;display:grid;place-items:center}.pose-box{position:absolute;width:160px;height:280px;border:2px solid rgba(255,255,255,.92);border-radius:30px}.person{width:110px;height:260px;position:relative;transition:.25s}.person-head{position:absolute;width:60px;height:60px;border-radius:50%;background:#e4b48f;left:25px}.person-body{position:absolute;width:74px;height:118px;border-radius:28px;background:#68a4a3;left:18px;top:53px}.person-leg{position:absolute;width:24px;height:98px;border-radius:12px;background:#df8e5c;top:160px}.person-leg.left{left:27px}.person-leg.right{right:27px}.camera-status{position:absolute;left:10px;right:10px;bottom:10px;border-radius:12px;padding:10px;background:rgba(17,36,30,.86);display:flex;justify-content:space-between;color:#fff;font-size:10px}.quality-list{margin-top:10px;border:1px solid var(--line);border-radius:14px;overflow:hidden}.quality-row{display:flex;justify-content:space-between;padding:9px 11px;font-size:10px}.quality-row+.quality-row{border-top:1px solid #edf2f0}
.result-box{padding:14px;border-radius:16px;background:var(--goodbg);border:1px solid #bfe0d2}.result-box h3{color:var(--good);margin:0 0 6px}.result-box p{font-size:10px;margin:0;color:#50695e;line-height:1.5}

/* Google Map */
.map-layout{display:grid;grid-template-columns:1fr 340px;gap:12px}.map-panel{padding:0;overflow:hidden}.google-map{height:620px;width:100%;background:#e8f0ed}.map-fallback{height:620px;display:grid;place-items:center;text-align:center;padding:30px;background:linear-gradient(135deg,#e8f2ee,#f7f5ee)}.map-fallback code{display:block;padding:8px 10px;border-radius:9px;background:#fff;border:1px solid var(--line);margin:8px 0;font-size:10px}
.legend{display:grid;gap:6px}.legend-item{display:flex;align-items:center;gap:8px;font-size:10px}.legend-dot{width:10px;height:10px;border-radius:50%}
.program-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}.program{background:#fff;border:1px solid var(--line);border-radius:17px;padding:15px;box-shadow:var(--shadow)}.program .icon{width:42px;height:42px;border-radius:14px;display:grid;place-items:center;background:var(--soft);font-size:19px}.program h4{margin:10px 0 5px}.program p{font-size:10px;color:var(--muted);line-height:1.5}.program .meta{font-size:9px;color:var(--primary);font-weight:900;margin-top:10px}
.timeline{position:relative;padding-left:18px}.timeline:before{content:"";position:absolute;left:5px;top:5px;bottom:5px;width:2px;background:#dde7e3}.timeline-item{position:relative;padding:0 0 14px 10px}.timeline-item:before{content:"";position:absolute;left:-17px;top:4px;width:9px;height:9px;border-radius:50%;background:var(--primary2);border:2px solid #fff;box-shadow:0 0 0 1px #b7d3c8}.timeline-item b{font-size:11px}.timeline-item small{display:block;font-size:9px;color:var(--muted);margin-top:3px}
@media(max-width:1120px){.app-shell{grid-template-columns:1fr}.sidebar{position:fixed;left:-270px;width:255px;transition:.25s}.sidebar.open{left:0}.mobile-only{display:inline-flex}.measure-layout,.map-layout,.grid-2,.grid-equal{grid-template-columns:1fr}.program-grid{grid-template-columns:repeat(2,1fr)}.kpis{grid-template-columns:repeat(2,1fr)}}
@media(max-width:650px){.content{padding:12px}.topbar{padding:0 12px}.top-actions .btn{display:none}.kpis{grid-template-columns:1fr 1fr;gap:8px}.kpi{padding:12px}.kpi b{font-size:21px}.program-grid,.grid-3,.form-grid,.device-grid{grid-template-columns:1fr}.measure-stepper{grid-template-columns:1fr 1fr}.google-map,.map-fallback{height:480px}.map-layout{gap:8px}}


/* Simulated local stunting-risk map */
.sim-map{min-height:620px;background:linear-gradient(135deg,#edf4f0,#f7f4eb);padding:14px;position:relative}
.sim-map-title{display:flex;justify-content:space-between;gap:10px;align-items:center;margin-bottom:8px}
.sim-map-title b{font-size:13px}.sim-map-title span{font-size:9px;color:var(--muted);font-weight:800}
.village-map{width:100%;height:auto;display:block;border-radius:14px;background:#eaf1ee;border:1px solid rgba(255,255,255,.8)}
.region{stroke:#fff;stroke-width:7;cursor:pointer;transition:opacity .18s,stroke-width .18s}.region:hover,.region.selected{opacity:.8;stroke-width:12}
.zone-low,.zone-low2{fill:#b9ddcd}.zone-mid{fill:#efd89c}.zone-high{fill:#e6b3b3}
.region-label{cursor:pointer}.region-label text{font-size:27px;font-weight:900;text-anchor:middle;fill:#26342f}.region-label .sub-label{font-size:15px;font-weight:800;fill:#52645d}
.road{fill:none;stroke:#d0d6d2;stroke-width:20;stroke-linecap:round}.road.minor{stroke-width:12}.river{fill:none;stroke:#b9dceb;stroke-width:15;opacity:.75}
.posyandu-dot{fill:#2e6f5e}.school-dot{fill:#5577bb}.health-dot{fill:#7856b8}.poi-label{font-size:13px;font-weight:800;fill:#314139}
.map-legend{display:flex;flex-wrap:wrap;gap:12px;margin-top:10px;font-size:10px;font-weight:800}.map-legend span{display:flex;align-items:center;gap:6px}.lg{width:11px;height:11px;border-radius:3px;display:inline-block}.lg.low{background:#b9ddcd}.lg.mid{background:#efd89c}.lg.high{background:#e6b3b3}
@media(max-width:650px){.sim-map{min-height:auto;padding:8px}.sim-map-title{align-items:flex-start;flex-direction:column}.region-label text{font-size:23px}.region-label .sub-label{font-size:13px}.poi-label{font-size:11px}}


/* Advanced analytics */
.analytics-intro{display:flex;align-items:flex-start;justify-content:space-between;gap:14px;background:linear-gradient(135deg,#ffffff,#f0f7f3);border:1px solid var(--line);border-radius:17px;padding:15px;box-shadow:var(--shadow)}
.analytics-intro h3{margin:0 0 5px;font-size:16px}.analytics-intro p{margin:0}.analytics-filter{display:flex;gap:8px;flex-wrap:wrap}.analytics-filter select{border:1px solid var(--line);background:#fff;border-radius:10px;padding:9px;font-size:10px;color:var(--text)}
.analytics-grid{display:grid;gap:12px;margin-top:12px}.analytics-grid.top{grid-template-columns:1.25fr .75fr}.analytics-grid.middle{grid-template-columns:1.35fr .65fr}.analytics-grid.lower{grid-template-columns:1fr 1fr}
.analytics-card{min-width:0}.chart-heading{display:flex;justify-content:space-between;align-items:flex-start;gap:10px;margin-bottom:8px}.chart-heading h3{margin:0 0 3px}.chart-heading p{font-size:9px;color:var(--muted);margin:0}
.radar-wrap{max-width:470px;margin:auto}.radar-wrap svg{width:100%;height:auto}.radar-ring{fill:none;stroke:#dfe9e5;stroke-width:1}.radar-axis{stroke:#d7e2de;stroke-width:1}.radar-area{fill:rgba(120,86,184,.18);stroke:#7856b8;stroke-width:3}.radar-dot{fill:#7856b8;stroke:#fff;stroke-width:2}.radar-label{font-size:10px;font-weight:800;fill:#51615b;text-anchor:middle}.radar-legend{display:flex;flex-wrap:wrap;gap:6px;justify-content:center}.radar-legend span{font-size:8px;padding:5px 7px;border-radius:999px;background:#f6f4fb;color:#65548b}
.donut-layout{display:grid;grid-template-columns:190px 1fr;gap:16px;align-items:center}.donut{width:180px;height:180px;border-radius:50%;position:relative;background:conic-gradient(var(--good) 0 calc(var(--p1)*1%),var(--warn) calc(var(--p1)*1%) calc((var(--p1) + var(--p2))*1%),var(--blue) calc((var(--p1) + var(--p2))*1%) calc((var(--p1) + var(--p2) + var(--p3))*1%),var(--bad) calc((var(--p1) + var(--p2) + var(--p3))*1%) 100%);display:grid;place-items:center}.donut:after{content:"";position:absolute;width:108px;height:108px;border-radius:50%;background:#fff}.donut-center{position:relative;z-index:1;text-align:center}.donut-center b{display:block;font-size:28px}.donut-center span{font-size:9px;color:var(--muted)}.donut-legend{display:grid;gap:9px}.donut-legend div{display:grid;grid-template-columns:12px 1fr auto;gap:7px;align-items:center;font-size:10px}.donut-legend .dot{width:9px;height:9px;border-radius:50%}.good-dot{background:var(--good)}.warn-dot{background:var(--warn)}.blue-dot{background:var(--blue)}.bad-dot{background:var(--bad)}
.line-chart svg{width:100%;height:auto;max-height:270px}.axis-line{stroke:#cad8d2;stroke-width:1.5}.grid-line{stroke:#edf2f0;stroke-width:1}.area-fill{fill:rgba(46,111,94,.10)}.trend-line{fill:none;stroke:var(--primary);stroke-width:4;stroke-linecap:round;stroke-linejoin:round}.trend-point{fill:var(--primary);stroke:#fff;stroke-width:2}.line-chart text{font-size:10px;fill:#78857f}
.gauge-box{text-align:center}.gauge-track{fill:none;stroke:#e8efec;stroke-width:24;stroke-linecap:round}.gauge-value{fill:none;stroke:var(--good);stroke-width:24;stroke-linecap:round;stroke-dasharray:78 100}.gauge-number{font-size:44px;font-weight:900;fill:var(--text)}.gauge-label{font-size:11px;font-weight:900;fill:var(--good)}.gauge-items{display:grid;grid-template-columns:1fr 1fr;gap:6px}.gauge-items span{background:var(--soft);border-radius:9px;padding:7px;font-size:9px;font-weight:800;color:var(--primary)}
.heatmap{display:grid;grid-template-columns:80px repeat(4,1fr);gap:5px;align-items:stretch}.hm-head{font-size:8px;font-weight:900;color:var(--muted);display:flex;align-items:end;justify-content:center;text-align:center;padding-bottom:3px}.hm-label{font-size:10px;font-weight:900;display:flex;align-items:center}.hm-cell{min-height:52px;border-radius:9px;display:grid;place-items:center;font-size:11px;font-weight:900;color:#fff}.hm-1{background:#83bda7}.hm-2{background:#b4b967}.hm-3{background:#d9a04d}.hm-4{background:#c96565}
.program-performance{display:grid;gap:12px}.perf-row{display:grid;grid-template-columns:130px 1fr 30px;gap:8px;align-items:center;font-size:9px}.perf-row span{font-weight:800}.perf-bar{height:12px;background:#edf2f0;border-radius:99px;overflow:hidden}.perf-bar i{height:100%;display:block;background:linear-gradient(90deg,var(--primary2),#77ad9b);border-radius:99px}.perf-row b{text-align:right}
.risk-matrix{max-width:780px;margin:auto}.matrix-y{font-size:9px;color:var(--muted);margin-bottom:5px}.matrix-grid{display:grid;grid-template-columns:1fr 1fr;grid-template-rows:1fr 1fr;min-height:280px;border:1px solid var(--line);border-radius:14px;overflow:hidden}.quadrant{padding:18px;display:flex;flex-direction:column;justify-content:center;align-items:center;text-align:center;border:1px solid rgba(255,255,255,.8)}.quadrant b{font-size:13px}.quadrant span{font-size:10px;margin-top:4px}.q1{background:#eef7f3}.q2{background:#fff6df}.q3{background:#f3f6fb}.q4{background:#fae8e8}.matrix-x{text-align:right;font-size:9px;color:var(--muted);margin-top:5px}
@media(max-width:1100px){.analytics-grid.top,.analytics-grid.middle,.analytics-grid.lower{grid-template-columns:1fr}.donut-layout{grid-template-columns:180px 1fr}.analytics-intro{flex-direction:column}}
@media(max-width:650px){.donut-layout{grid-template-columns:1fr}.donut{margin:auto}.heatmap{grid-template-columns:65px repeat(4,minmax(48px,1fr));overflow-x:auto}.perf-row{grid-template-columns:105px 1fr 28px}.matrix-grid{min-height:230px}.analytics-filter{width:100%}.analytics-filter select{flex:1;min-width:0}}


/* Detailed child management */
.children-toolbar{display:flex;justify-content:space-between;align-items:flex-start;gap:12px;background:#fff;border:1px solid var(--line);border-radius:17px;padding:15px;box-shadow:var(--shadow)}
.child-form-wrap{margin-top:12px}
.form-section{padding:13px 0;border-top:1px solid #edf2f0}.form-section:first-of-type{border-top:0}.form-section h4{font-size:12px;margin:0 0 10px;color:var(--primary)}
.form-grid-3{grid-template-columns:repeat(3,1fr)}.span-2{grid-column:span 2}
.privacy-note{margin-top:8px;padding:11px;border-radius:11px;background:#f6f4fb;border:1px solid #e4ddf4;font-size:9px;color:#61567a;line-height:1.55}
.form-actions{display:flex;justify-content:flex-end;gap:8px;padding-top:10px;border-top:1px solid #edf2f0}
.child-detail-panel{margin-top:12px}
.child-profile-head{display:flex;align-items:center;gap:12px;padding-bottom:13px;border-bottom:1px solid #edf2f0}.child-avatar-large{width:58px;height:58px;border-radius:18px;display:grid;place-items:center;background:linear-gradient(135deg,var(--primary),var(--primary2));color:#fff;font-size:22px;font-weight:900}.child-profile-head h3{margin:0 0 3px}.child-profile-head p{font-size:10px;color:var(--muted);margin:0 0 6px}
.profile-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:12px}.profile-block{border:1px solid var(--line);border-radius:14px;padding:12px;background:#fbfcfc}.profile-block h4{margin:0 0 8px;font-size:11px;color:var(--primary)}.profile-item{display:grid;grid-template-columns:120px 1fr;gap:8px;padding:7px 0;border-bottom:1px dashed #e6ece9;font-size:10px}.profile-item:last-child{border-bottom:0}.profile-item span{color:var(--muted)}.profile-item b{font-weight:800;word-break:break-word}
@media(max-width:900px){.form-grid-3{grid-template-columns:1fr 1fr}.profile-grid{grid-template-columns:1fr}.profile-block.span-2{grid-column:auto}}
@media(max-width:650px){.children-toolbar{flex-direction:column}.children-toolbar .btn{width:100%}.form-grid-3{grid-template-columns:1fr}.span-2{grid-column:auto}.profile-item{grid-template-columns:1fr;gap:3px}.form-actions{flex-direction:column-reverse}.form-actions .btn{width:100%}}