:root{
  --teal:#079b92;
  --teal-dark:#087d78;
  --aqua:#86e7e2;
  --aqua-soft:#c7f3f0;
  --lav:#fff8ff;
  --ink:#171717;
  --muted:#8f8f95;
  --line:#d9d6dd;
  --line-dark:#9d99a0;
  --danger:#ef4d48;
  --violet:#6e56b7;
  --white:#fff;
  --shadow:0 7px 18px rgba(0,0,0,.10);
  --safe-bottom:env(safe-area-inset-bottom,0px)
}
*{box-sizing:border-box}
html,body{margin:0;min-height:100%;font-family:Arial,Helvetica,sans-serif;background:#eef3f4;color:var(--ink)}
button,input,select,textarea{font:inherit}
button{cursor:pointer}
.hidden{display:none!important}
body{overscroll-behavior-y:none}
.app{min-height:100vh}
.phone-shell{width:min(100%,620px);min-height:100vh;margin:0 auto;background:var(--lav);position:relative;box-shadow:0 0 36px rgba(0,0,0,.10)}
.screen-content{min-height:100vh;padding-bottom:94px;background:var(--lav)}

/* login */
.login-screen{min-height:100vh;display:grid;place-items:center;padding:26px;background:linear-gradient(180deg,#c6f5f1 0,#fffaff 55%,#fff 100%)}
.login-shell{width:min(100%,420px);background:#fff;border-radius:30px;padding:34px 28px 30px;text-align:center;box-shadow:0 20px 55px rgba(9,122,117,.13);border:1px solid #dff3f2}
.login-logo{width:150px;height:150px;object-fit:contain}.login-shell h1{margin:10px 0 4px;font-size:30px;letter-spacing:.5px}.login-sub{margin:0 0 26px;color:#777;font-size:14px}.login-form{display:grid;gap:16px;text-align:left}.login-form label,.form-grid label,.stack label{font-size:13px;font-weight:700;color:#2d2d2d;display:grid;gap:7px}.login-form input,.form-grid input,.form-grid select,.form-grid textarea,.stack input,.stack select,.stack textarea,.app-select,.app-input{width:100%;border:1.5px solid #cfcbd2;border-radius:12px;background:#fff;padding:13px 14px;outline:none;color:#222}.login-form input:focus,.form-grid input:focus,.form-grid select:focus,.form-grid textarea:focus,.stack input:focus,.stack select:focus,.app-input:focus,.app-select:focus{border-color:var(--teal);box-shadow:0 0 0 3px rgba(7,155,146,.12)}.password-field{display:flex;align-items:center;border:1.5px solid #cfcbd2;border-radius:12px;overflow:hidden}.password-field input{border:0!important;box-shadow:none!important}.plain-icon{width:48px;border:0;background:transparent;color:#777}.primary-pill{border:0;border-radius:999px;background:var(--teal);color:#fff;font-weight:700;padding:15px 18px;box-shadow:0 7px 14px rgba(7,155,146,.25)}.primary-pill:disabled{opacity:.55}.login-note{margin:20px 0 0;color:#aaa;font-size:11px}

/* common screen parts */
.screen{min-height:calc(100vh - 94px);background:var(--lav)}
.top-aqua{background:var(--aqua);padding:28px 28px 24px;border-radius:0 0 28px 28px}
.home-top{display:flex;align-items:center;gap:16px}.profile-dot{width:62px;height:62px;border-radius:50%;background:#fff;display:grid;place-items:center;color:var(--teal);box-shadow:0 2px 4px rgba(0,0,0,.04)}.profile-dot svg{width:34px;height:34px}.home-top strong{font-size:26px;letter-spacing:.4px}.home-top span{display:block;color:#4c6766;font-size:12px;margin-top:3px}.page-title{margin:0;text-align:center;font-size:29px;font-weight:500}.section-pad{padding:24px 24px 8px}.section-title{font-size:20px;margin:0 0 16px;font-weight:700}.article-card{height:150px;background:#fff;border:1px solid #cfcfd1;border-radius:22px;display:grid;place-items:center;text-align:center;padding:26px;font-size:18px;line-height:1.45;box-shadow:0 2px 8px rgba(0,0,0,.02)}.dots{text-align:center;margin:10px 0 24px}.dots i{display:inline-block;width:12px;height:12px;border-radius:50%;background:#ddd;margin:0 4px}.dots i:first-child{background:var(--teal)}
.service-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}.service-card{min-height:150px;background:#fff;border:1px solid #d7d7d9;border-radius:20px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px;text-align:center;padding:12px;border-width:1.3px;color:#1d1d1d}.service-card:active,.detection-card:active{transform:scale(.985)}.service-icon{color:var(--teal);height:42px}.service-icon svg{width:42px;height:42px}.service-card span{font-size:14px;line-height:1.2}.detection-grid{display:grid;grid-template-columns:1fr 1fr;gap:34px;padding:0 24px 28px}.detection-card{background:#fff;border:1.3px solid #d7d7d9;border-radius:20px;min-height:155px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;color:#1b1b1b;text-align:center;padding:12px}.detection-card img{width:70px;height:70px;object-fit:contain}.detection-card b{font-size:16px;line-height:1.35}

/* Bottom nav */
.bottom-nav{position:fixed;left:50%;bottom:0;transform:translateX(-50%);width:min(100%,620px);height:84px;padding-bottom:var(--safe-bottom);background:rgba(255,250,255,.96);border-top:1px solid #eee9ef;display:grid;grid-template-columns:repeat(3,1fr);z-index:30;backdrop-filter:blur(14px)}.bottom-nav button{border:0;background:transparent;color:#aaa;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;font-size:13px;padding:8px 4px}.bottom-nav button svg{width:28px;height:28px}.bottom-nav button.active{color:var(--teal)}

/* internal headers */
.sub-header{height:86px;background:#fff;display:grid;grid-template-columns:62px 1fr 62px;align-items:center;padding:0 10px;border-bottom:1px solid #f2eff3;position:sticky;top:0;z-index:15}.sub-header h1{font-size:28px;font-weight:500;text-align:center;margin:0}.back-btn{border:0;background:transparent;font-size:38px;line-height:1;color:#171717;height:62px}.header-placeholder{width:62px}
.logo-center{display:flex;justify-content:center;padding:32px 0 4px}.logo-center img{width:154px;height:154px;object-fit:contain}.patient-hero-select{text-align:center;padding:0 24px 26px}.patient-hero-select select{appearance:none;border:0;background:transparent;font-weight:700;font-size:24px;text-align:center;text-align-last:center;max-width:340px;padding:8px 36px 8px 12px;background-image:linear-gradient(45deg,transparent 50%,#111 50%),linear-gradient(135deg,#111 50%,transparent 50%);background-position:calc(100% - 18px) 52%,calc(100% - 11px) 52%;background-size:8px 8px,8px 8px;background-repeat:no-repeat}

/* Deteksi stunting */
.detect-body{padding:0 34px 30px}.method-box{border:1.5px solid #d8d4da;border-radius:18px;padding:20px 18px;margin:0 0 28px;background:rgba(255,255,255,.24)}.method-box h3{margin:0 0 22px;font-size:18px}.method-row{display:grid;grid-template-columns:1fr 1fr;gap:18px}.radio-label{display:flex;align-items:center;gap:12px;font-size:21px;line-height:1.1}.radio-label input{appearance:none;width:24px;height:24px;border:3px solid #656269;border-radius:50%;display:grid;place-content:center}.radio-label input:checked{border-color:var(--violet)}.radio-label input:checked:after{content:"";width:12px;height:12px;border-radius:50%;background:var(--violet)}.iot-code{margin:-12px 0 24px}.measure-grid{display:grid;grid-template-columns:1fr 1.35fr 1.35fr;gap:16px;margin:8px 0 28px;align-items:end}.measure-field label{display:block;font-size:15px;margin-bottom:10px}.measure-entry{display:flex;align-items:end;gap:7px}.measure-entry input{width:100%;min-width:0;height:78px;background:transparent;border:1.5px solid #c7c3c9;border-radius:8px;padding:10px;text-align:center;font-size:22px}.measure-entry small{font-size:14px;margin-bottom:14px}.result-box{border:1.7px solid #181818;border-radius:12px;min-height:94px;margin:0 0 16px;padding:20px;display:flex;align-items:center;justify-content:center;text-align:center}.result-box b{font-size:20px;line-height:1.3}.result-box .result-detail{font-size:15px;font-weight:400;color:#555;margin-top:5px;display:block}.check-btn{width:100%;border:0;background:var(--teal);color:var(--violet);font-weight:700;font-size:21px;padding:20px;border-radius:999px;margin-top:38px;box-shadow:var(--shadow)}.check-btn.white-text{color:#fff}.secondary-btn{border:0;background:#e2f7f5;color:var(--teal-dark);font-weight:700;padding:11px 16px;border-radius:999px}.device-note{font-size:12px;color:#777;margin-top:8px;text-align:center}

/* Deteksi nutrisi */
.nutrition-detect{padding:0 26px 34px}.date-label{text-align:center;font-size:16px;margin:6px 0 10px}.date-box{position:relative;margin-bottom:22px}.date-box input{width:100%;height:66px;border:1.5px solid #8e8991;background:transparent;border-radius:7px;padding:0 56px 0 18px;font-size:19px}.date-box .calendar-icon{position:absolute;right:17px;top:50%;transform:translateY(-50%);color:#514d55}.nutrition-table{width:100%;border-collapse:collapse;table-layout:fixed}.nutrition-table thead th{font-size:15px;font-weight:400;text-align:left;padding-bottom:9px}.nutrition-table thead th:nth-child(1){width:11%}.nutrition-table thead th:nth-child(3){width:28%;text-align:center}.nutrition-table td{border:1.5px solid #151515;height:52px;padding:7px;font-size:13px}.nutrition-table td:nth-child(1),.nutrition-table td:nth-child(3){text-align:center}.add-row{display:flex;justify-content:flex-end;margin:20px 0}.add-btn{border:0;background:#fff9ff;border-radius:999px;padding:13px 30px;color:var(--violet);font-weight:700;font-size:17px;box-shadow:0 4px 10px rgba(0,0,0,.15)}.nutrition-result{border:1.7px solid #181818;min-height:132px;display:flex;align-items:center;justify-content:center;padding:18px;text-align:center;margin-top:8px}.nutrition-result strong{font-size:16px}.nutrition-result .nutrition-summary{font-size:13px;line-height:1.65;color:#4b4b4b}

/* Rekam medis */
.record-top{background:var(--aqua);padding:24px 26px 18px}.record-top h1{text-align:center;font-size:28px;font-weight:500;margin:0 0 28px}.record-patient-row{display:grid;grid-template-columns:auto 1fr auto auto;gap:14px;align-items:center}.record-person{width:40px;color:#111}.record-patient-label strong{display:block;font-size:17px}.record-patient-label select{appearance:none;border:0;background:transparent;padding:2px 26px 2px 0;font-size:18px;max-width:250px;background-image:linear-gradient(45deg,transparent 50%,#111 50%),linear-gradient(135deg,#111 50%,transparent 50%);background-position:calc(100% - 12px) 50%,calc(100% - 6px) 50%;background-size:6px 6px;background-repeat:no-repeat}.record-icon-btn{border:0;background:transparent;color:#4e4c52;padding:3px}.record-icon-btn svg{width:30px;height:30px}.record-tabs{display:grid;grid-template-columns:1fr 1fr;height:68px;border-bottom:1px solid #ccc;background:var(--lav)}.record-tab{border:0;background:transparent;font-size:18px;font-weight:700;color:#4e4b50;position:relative}.record-tab.active{color:var(--teal)}.record-tab.active:after{content:"";position:absolute;left:36%;right:36%;bottom:-1px;height:4px;border-radius:4px;background:var(--teal)}.filter-chips{display:flex;gap:10px;overflow:auto;padding:12px 24px 8px;scrollbar-width:none}.filter-chips::-webkit-scrollbar{display:none}.chip{white-space:nowrap;border:1px solid #ccc6cd;background:transparent;border-radius:12px;padding:12px 18px;font-size:14px}.chip.active{background:#a6deda;border-color:#a6deda}.records-main{padding:10px 24px 28px}.record-title-row{display:flex;justify-content:space-between;align-items:center;margin:10px 0}.record-title-row h3{font-size:18px}.refresh-btn{border:0;background:transparent;color:#444}.refresh-btn svg{width:31px;height:31px}.chart-area{min-height:360px;display:flex;align-items:center;justify-content:center;text-align:center;color:#222}.chart-wrap{width:100%;overflow:auto}.chart-svg{min-width:500px;width:100%;height:auto}.history-divider{height:1px;background:#ccc;margin:8px -24px 0}.history-empty{text-align:center;padding:38px 12px;font-size:17px}.history-list{display:grid;gap:10px;margin-top:18px}.history-card{background:#fff;border:1px solid #e0dce2;border-radius:14px;padding:14px}.history-card-top{display:flex;justify-content:space-between;gap:10px;margin-bottom:8px}.history-card small{color:#777}.history-values{display:grid;grid-template-columns:repeat(2,1fr);gap:8px;font-size:13px}.status-pill{display:inline-block;border-radius:999px;padding:5px 9px;font-size:11px;font-weight:700;background:#e9f7f6;color:var(--teal-dark)}.status-pill.warn{background:#fff0df;color:#9a6300}.status-pill.bad{background:#ffebeb;color:#b73232}

/* profile */
.profile-screen .profile-title{background:var(--aqua);padding:28px 24px 22px;font-size:28px}.profile-card{padding:28px 30px 10px}.profile-user{display:flex;align-items:center;gap:18px;padding-bottom:22px;border-bottom:1px solid #ccc}.profile-avatar{width:76px;height:76px;border-radius:50%;background:#b8e4e1;display:grid;place-items:center;color:var(--teal)}.profile-avatar svg{width:40px;height:40px}.profile-user h2{font-size:24px;margin:0 0 7px}.profile-user p{margin:0;color:#98969c;font-size:19px}.profile-menu{display:grid;margin-top:28px}.profile-menu button{height:78px;border:0;background:transparent;display:grid;grid-template-columns:44px 1fr 30px;align-items:center;text-align:left;font-size:20px;color:#242424}.profile-menu button svg{width:28px;height:28px;color:#7c797e}.profile-menu .logout{color:var(--danger);grid-template-columns:44px 1fr}.profile-menu .logout svg{color:var(--danger)}

/* tables/forms for admin/detail pages */
.admin-screen{padding:0 22px 28px}.admin-toolbar{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:16px}.admin-toolbar .app-input{flex:1;min-width:180px}.soft-btn,.danger-btn,.outline-btn{border:0;border-radius:12px;padding:11px 14px;font-weight:700}.soft-btn{background:#dff6f4;color:var(--teal-dark)}.outline-btn{background:#fff;border:1px solid #cfcbd1;color:#333}.danger-btn{background:#ffeded;color:#c23636}.card{background:#fff;border:1px solid #e2dee4;border-radius:18px;padding:17px}.table-wrap{overflow:auto;border:1px solid #ddd9df;border-radius:14px}.table{width:100%;border-collapse:collapse;min-width:650px}.table th,.table td{padding:11px 12px;border-bottom:1px solid #eeeaf0;text-align:left;font-size:12px;white-space:nowrap}.table th{font-size:10px;text-transform:uppercase;color:#777;background:#fbf9fc}.empty{text-align:center;padding:35px 16px;color:#666}.small{font-size:12px;color:#777}.mt{margin-top:18px}.mb{margin-bottom:18px}.split{display:flex;justify-content:space-between;gap:10px;align-items:center}.pill{display:inline-block;border-radius:999px;padding:5px 8px;font-size:10px;background:#eef6f6;color:#356b69}.callout{border-radius:13px;background:#eaf8f7;padding:13px;font-size:12px;line-height:1.5}.callout.warn{background:#fff2e8;color:#8a4e15}.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:13px}.form-grid .full{grid-column:1/-1}.stack{display:grid;gap:13px}.modal-body .primary-pill{width:auto;padding-inline:28px}.toolbar{display:flex;gap:8px;flex-wrap:wrap;align-items:center}.avatar{width:44px;height:44px;border-radius:50%;background:#c9efec;display:grid;place-items:center;color:var(--teal);font-weight:700}.profile-hero{display:flex;align-items:center;gap:12px;margin-bottom:16px}

/* modal */
.modal{position:fixed;inset:0;z-index:100}.modal-backdrop{position:absolute;inset:0;background:rgba(0,0,0,.35)}.modal-sheet{position:absolute;left:50%;bottom:0;transform:translateX(-50%);width:min(100%,620px);max-height:88vh;overflow:auto;background:#fff;border-radius:26px 26px 0 0;padding:12px 22px 30px}.modal-handle{width:54px;height:5px;border-radius:999px;background:#d7d3d9;margin:0 auto 10px}.modal-head{display:flex;justify-content:space-between;align-items:center;border-bottom:1px solid #eee;padding-bottom:12px}.modal-head small{color:var(--teal);font-weight:700}.modal-head h3{margin:2px 0 0}.modal-close{border:0;background:#f5f2f5;width:38px;height:38px;border-radius:50%;font-size:24px}.modal-body{padding-top:18px}

.toast{position:fixed;left:50%;top:20px;transform:translate(-50%,-20px);background:#222;color:#fff;border-radius:999px;padding:11px 18px;font-size:13px;opacity:0;pointer-events:none;transition:.2s;z-index:200;max-width:88%;text-align:center}.toast.show{opacity:1;transform:translate(-50%,0)}.toast.error{background:#b83c3c}

@media (max-width:420px){
  .section-pad{padding-left:18px;padding-right:18px}.service-grid{gap:10px}.service-card{min-height:135px;padding:9px}.service-card span{font-size:12px}.detection-grid{gap:18px;padding-left:18px;padding-right:18px}.measure-grid{gap:9px}.measure-entry input{height:68px;font-size:18px}.detect-body{padding-left:20px;padding-right:20px}.method-row{gap:8px}.radio-label{font-size:17px}.record-top{padding-left:18px;padding-right:18px}.record-patient-row{gap:9px}.record-patient-label select{max-width:185px}.profile-card{padding-left:22px;padding-right:22px}.form-grid{grid-template-columns:1fr}}
@media (min-width:760px){body{padding:24px 0}.phone-shell{min-height:calc(100vh - 48px);border-radius:28px;overflow:hidden}.bottom-nav{bottom:24px;border-radius:0 0 28px 28px}}
.date-trigger{position:relative;overflow:hidden}.date-trigger input{position:absolute;inset:0;opacity:0;width:100%;height:100%;cursor:pointer}