/* =========================================================
   Menocare Global Styles
   Single stylesheet: assets/css/style.css
   Catatan Bootstrap Icons offline:
   Jika file Bootstrap Icons sudah ditaruh di:
   assets/lib/bootstrap-icons/font/
   maka import di bawah akan aktif otomatis.
   ========================================================= */
@import url("../lib/bootstrap-icons/font/bootstrap-icons.css");

:root{
  --mc-primary:#ff5c8a;
  --mc-primary-dark:#e14b76;
  --mc-secondary:#b56ad8;
  --mc-secondary-dark:#8f58d6;
  --mc-bg:#fff7fb;
  --mc-bg-soft:#f8f2fb;
  --mc-card:#ffffff;
  --mc-text:#2f2433;
  --mc-muted:#7a6f80;
  --mc-border:#f1dbe7;
  --mc-shadow:0 10px 28px rgba(113,61,91,.10);
  --mc-radius-lg:28px;
  --mc-radius-md:18px;
  --mc-radius-sm:12px;
}

*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{margin:0; color:var(--mc-text);}
a{color:inherit;}
img{max-width:100%;}
button,input,select,textarea{font:inherit;}

/* Shared application shell */
.app-shell,
.phone,
.container,
.register-container{
  border:1px solid rgba(255,255,255,.72);
}

/* Reusable top bar/back button. Bisa dipakai di halaman baru. */
.app-topbar,.top-bar{
  display:flex;
  align-items:center;
  gap:12px;
}
.app-back,.back-btn,.back{
  border:0;
  width:38px;
  height:38px;
  border-radius:14px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  background:#fff0f5;
  color:var(--mc-primary);
  text-decoration:none;
  font-weight:800;
  cursor:pointer;
}
.app-back:hover,.back-btn:hover,.back:hover{
  background:#ffe2ed;
  color:var(--mc-primary-dark);
}

/* Shared bottom navigation */
.bottom-nav{
  width:100%;
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:6px;
  border-top:1px solid #f2e6ef;
  background:rgba(255,255,255,.96);
}
.nav-item{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:4px;
  text-decoration:none;
  font-size:12px;
  color:#9b8fa0;
  transition:.2s ease;
}
.nav-item:hover{color:var(--mc-secondary); transform:translateY(-2px);}
.nav-item.active{color:var(--mc-secondary); font-weight:700;}
.nav-icon{font-size:22px; line-height:1;}

.btn,.save-btn{
  box-shadow:0 10px 18px rgba(255,92,138,.18);
}
.btn:focus-visible,.save-btn:focus-visible,.app-back:focus-visible,
input:focus-visible,select:focus-visible,textarea:focus-visible{
  outline:3px solid rgba(255,92,138,.25);
  outline-offset:2px;
}

/* Utility kecil untuk mengganti inline style lama */
.no-border-bottom{border-bottom:none !important;}
.text-center{text-align:center !important;}
.mt-0{margin-top:0 !important;}

/* ===== allmenopouse.html :: inline style 1 ===== */
.page-allmenopouse * {
      margin:0;
      padding:0;
      box-sizing:border-box;
      font-family:Arial, sans-serif;
    }

body.page-allmenopouse {
      background:#f4f4f4;
      color:#333;
    }

/* HEADER */

.page-allmenopouse .header {
      width:100%;
      padding:20px;
      background:#ffb58c;
      text-align:center;
      color:white;
      font-size:32px;
      font-weight:bold;
      box-shadow:0 3px 10px rgba(0,0,0,0.1);
    }

/* CONTAINER */

.page-allmenopouse .container {
      width:100%;
      min-height:100vh;
      display:flex;
      justify-content:center;
      align-items:center;
      padding:40px;
    }

/* FLOWCHART */

.page-allmenopouse .flowchart {
      width:100%;
      max-width:1200px;
      display:flex;
      flex-direction:column;
      align-items:center;
      position:relative;
    }

/* BOX */

.page-allmenopouse .box {
      background:#efb082;
      color:white;
      padding:18px 30px;
      border-radius:12px;
      border:2px solid #4a6da7;
      text-align:center;
      font-weight:bold;
      margin:15px;
      min-width:280px;
      transition:0.3s;
      cursor:pointer;
    }

.page-allmenopouse .box:hover {
      transform:scale(1.03);
      background:#e89d67;
    }

/* ROW */

.page-allmenopouse .row {
      display:flex;
      justify-content:center;
      align-items:flex-start;
      flex-wrap:wrap;
      width:100%;
    }

/* ARROW */

.page-allmenopouse .arrow {
      width:3px;
      height:40px;
      background:#ff7b22;
    }

.page-allmenopouse .horizontal-line {
      width:100px;
      height:3px;
      background:#ff7b22;
      margin-top:45px;
    }

/* INFO CARD */

.page-allmenopouse .info-card {
      background:#9e9e9e;
      color:white;
      padding:20px;
      border-radius:20px;
      width:300px;
      margin:15px;
      box-shadow:0 4px 10px rgba(0,0,0,0.1);
    }

.page-allmenopouse .info-card h3 {
      margin-bottom:15px;
      font-size:18px;
    }

.page-allmenopouse .info-card ul {
      margin-left:20px;
      line-height:1.8;
    }

/* ANALISIS */

.page-allmenopouse .analysis {
      background:#9e9e9e;
      color:white;
      padding:20px;
      border-radius:20px;
      width:360px;
      margin-top:20px;
    }

.page-allmenopouse .analysis h3 {
      margin-bottom:15px;
    }

.page-allmenopouse .analysis ul {
      margin-left:20px;
      line-height:1.8;
    }

/* BUTTON */

.page-allmenopouse .btn {
      margin-top:15px;
      padding:12px 20px;
      border:none;
      border-radius:10px;
      background:#ff7b22;
      color:white;
      font-size:15px;
      cursor:pointer;
      transition:0.3s;
    }

.page-allmenopouse .btn:hover {
      background:#e7660f;
    }

/* MODAL */

.page-allmenopouse .modal {
      display:none;
      position:fixed;
      top:0;
      left:0;
      width:100%;
      height:100%;
      background:rgba(0,0,0,0.5);
      justify-content:center;
      align-items:center;
      z-index:999;
    }

.page-allmenopouse .modal-content {
      background:white;
      width:90%;
      max-width:500px;
      padding:30px;
      border-radius:20px;
      position:relative;
    }

.page-allmenopouse .modal-content h2 {
      color:#ff7b22;
      margin-bottom:20px;
      text-align:center;
    }

.page-allmenopouse .input-group {
      margin-bottom:15px;
    }

.page-allmenopouse .input-group label {
      display:block;
      margin-bottom:8px;
      font-weight:bold;
    }

.page-allmenopouse .input-group input,
.page-allmenopouse .input-group select {
      width:100%;
      padding:12px;
      border:1px solid #ccc;
      border-radius:10px;
    }

.page-allmenopouse .close {
      position:absolute;
      right:20px;
      top:15px;
      font-size:28px;
      cursor:pointer;
      color:#999;
    }

.page-allmenopouse .result {
      margin-top:20px;
      background:#fff0e5;
      padding:15px;
      border-radius:10px;
      text-align:center;
      font-weight:bold;
      color:#e7660f;
      display:none;
    }

/* RESPONSIVE */

@media(max-width:768px) {
.page-allmenopouse .row {
        flex-direction:column;
        align-items:center;
      }

.page-allmenopouse .horizontal-line {
        display:none;
      }
}

/* ===== daftar.html :: inline style 1 ===== */
.page-daftar * {
      margin:0;
      padding:0;
      box-sizing:border-box;
      font-family:Arial, sans-serif;
    }

body.page-daftar {
      min-height:100vh;
      display:flex;
      justify-content:center;
      align-items:center;
      background:linear-gradient(135deg,#ff9eb5,#ffd6df);
      padding:20px;
    }

.page-daftar .register-container {
      background:white;
      width:400px;
      padding:40px;
      border-radius:20px;
      box-shadow:0 10px 25px rgba(0,0,0,0.1);
    }

.page-daftar .logo {
      text-align:center;
      margin-bottom:15px;
    }

.page-daftar .logo img {
      width:90px;
      height:90px;
      object-fit:cover;
      border-radius:50%;
      border:4px solid #ffb6c8;
    }

.page-daftar h1 {
      text-align:center;
      color:#ff5c8a;
      margin-bottom:30px;
    }

.page-daftar .input-group {
      margin-bottom:18px;
    }

.page-daftar .input-group label {
      display:block;
      margin-bottom:8px;
      font-weight:bold;
      color:#555;
    }

.page-daftar .input-group input {
      width:100%;
      padding:12px;
      border:1px solid #ddd;
      border-radius:10px;
      font-size:15px;
    }

.page-daftar .input-group input:focus {
      outline:none;
      border-color:#ff5c8a;
    }

.page-daftar .btn {
      width:100%;
      padding:14px;
      background:#ff5c8a;
      border:none;
      border-radius:10px;
      color:white;
      font-size:16px;
      font-weight:bold;
      cursor:pointer;
      transition:0.3s;
      margin-top:10px;
    }

.page-daftar .btn:hover {
      background:#e14b76;
    }

.page-daftar .login-link {
      text-align:center;
      margin-top:20px;
      font-size:14px;
    }

.page-daftar .login-link a {
      color:#ff5c8a;
      text-decoration:none;
      font-weight:bold;
    }

/* ===== daftar1(lama).html :: inline style 1 ===== */
.page-daftar1-lama * {
      margin:0;
      padding:0;
      box-sizing:border-box;
      font-family:Arial, sans-serif;
    }

body.page-daftar1-lama {
      min-height:100vh;
      display:flex;
      justify-content:center;
      align-items:center;
      background:linear-gradient(135deg,#ff9eb5,#ffd6df);
      padding:20px;
    }

.page-daftar1-lama .container {
      width:100%;
      max-width:420px;
      background:#fff;
      padding:25px;
      border-radius:25px;
      box-shadow:0 4px 15px rgba(0,0,0,0.08);
    }

.page-daftar1-lama h2 {
      text-align:center;
      margin-bottom:20px;
      color:#333;
    }

.page-daftar1-lama .step-indicator {
      display:flex;
      justify-content:center;
      margin-bottom:25px;
      gap:10px;
    }

.page-daftar1-lama .step {
      width:35px;
      height:35px;
      border-radius:50%;
      background:#ddd;
      color:#fff;
      display:flex;
      align-items:center;
      justify-content:center;
      font-weight:bold;
    }

.page-daftar1-lama .step.active {
      background:#b56ad8;
    }

.page-daftar1-lama .form-step {
      display:none;
    }

.page-daftar1-lama .form-step.active {
      display:block;
    }

.page-daftar1-lama label {
      display:block;
      margin-bottom:8px;
      margin-top:15px;
      font-weight:600;
      color:#444;
    }

.page-daftar1-lama input,
.page-daftar1-lama select,
.page-daftar1-lama textarea {
      width:100%;
      padding:12px;
      border:1px solid #ddd;
      border-radius:12px;
      outline:none;
      font-size:14px;
    }

.page-daftar1-lama .checkbox-group {
  display:flex;
  flex-direction:column;
  gap:12px;
  margin-top:12px;
}

.page-daftar1-lama .checkbox-group label {
  display:flex;
  align-items:center;
  gap:12px;
  padding:12px 14px;
  border:1px solid #e5d7ef;
  border-radius:14px;
  background:#faf7fd;
  cursor:pointer;
  transition:0.3s;
  font-size:14px;
  color:#444;
  font-weight:500;
}

.page-daftar1-lama .checkbox-group label:hover {
  background:#f3e6fb;
  border-color:#b56ad8;
}

.page-daftar1-lama .checkbox-group input[type="checkbox"] {
  width:18px;
  height:18px;
  accent-color:#b56ad8;
  cursor:pointer;
}

.page-daftar1-lama .button-group {
      display:flex;
      gap:10px;
      margin-top:25px;
    }

.page-daftar1-lama button {
      flex:1;
      padding:14px;
      border:none;
      border-radius:12px;
      cursor:pointer;
      font-size:15px;
      font-weight:bold;
    }

.page-daftar1-lama .btn-prev {
      background:#eee;
    }

.page-daftar1-lama .btn-next {
      background:#b56ad8;
      color:white;
    }

.page-daftar1-lama .btn-submit {
      background:#b56ad8;
      color:white;
    }

.page-daftar1-lama .success {
      text-align:center;
      color:green;
      margin-top:20px;
      display:none;
    }

/* ===== daftar1.html :: inline style 1 ===== */
.page-daftar1 * {
      margin:0;
      padding:0;
      box-sizing:border-box;
      font-family:Arial, sans-serif;
    }

body.page-daftar1 {
      min-height:100vh;
      display:flex;
      justify-content:center;
      align-items:center;
      background:linear-gradient(135deg,#ff9eb5,#ffd6df);
      padding:20px;
    }

.page-daftar1 .register-container {
      background:white;
      width:400px;
      padding:40px;
      border-radius:20px;
      box-shadow:0 10px 25px rgba(0,0,0,0.1);
    }

.page-daftar1 .logo {
      text-align:center;
      margin-bottom:15px;
    }

.page-daftar1 .logo img {
      width:90px;
      height:90px;
      object-fit:cover;
      border-radius:50%;
      border:4px solid #ffb6c8;
    }

.page-daftar1 h1 {
      text-align:center;
      color:#ff5c8a;
      margin-bottom:30px;
    }

.page-daftar1 .input-group {
      margin-bottom:18px;
    }

.page-daftar1 .input-group label {
      display:block;
      margin-bottom:8px;
      font-weight:bold;
      color:#555;
    }

.page-daftar1 .input-group input {
      width:100%;
      padding:12px;
      border:1px solid #ddd;
      border-radius:10px;
      font-size:15px;
    }

.page-daftar1 .input-group input:focus {
      outline:none;
      border-color:#ff5c8a;
    }

.page-daftar1 .btn {
      width:100%;
      padding:14px;
      background:#ff5c8a;
      border:none;
      border-radius:10px;
      color:white;
      font-size:16px;
      font-weight:bold;
      cursor:pointer;
      transition:0.3s;
      margin-top:10px;
    }

.page-daftar1 .btn:hover {
  background:#e14b76;
}

.page-daftar1 .login-link {
      text-align:center;
      margin-top:20px;
      font-size:14px;
    }

.page-daftar1 .login-link a {
      color:#ff5c8a;
      text-decoration:none;
      font-weight:bold;
    }

.page-daftar1 .input-group select {
  width:100%;
  padding:12px;
  border:1px solid #ddd;
  border-radius:10px;
  font-size:15px;
}

.page-daftar1 .input-group select:focus {
  outline:none;
  border-color:#ff5c8a;
}

/* ===== dashboard.html :: inline style 1 ===== */
.page-dashboard * {
      margin:0;
      padding:0;
      box-sizing:border-box;
      font-family:Arial, sans-serif;
    }

body.page-dashboard {
      background:#fff7f8;
      color:#444;
      padding:20px;
    }

.page-dashboard .container {
      max-width:1200px;
      margin:auto;
    }

.page-dashboard .header {
      text-align:center;
      margin-bottom:30px;
    }

.page-dashboard .header h1 {
      color:#ff5c8a;
      margin-bottom:10px;
    }

.page-dashboard .header p {
      color:#777;
    }

/* DASHBOARD GRID */

.page-dashboard .dashboard {
      display:grid;
      grid-template-columns:repeat(auto-fit,minmax(280px,1fr));
      gap:20px;
    }

/* CARD */

.page-dashboard .card {
      background:white;
      border-radius:20px;
      padding:25px;
      box-shadow:0 4px 12px rgba(0,0,0,0.08);
      transition:0.3s;
    }

.page-dashboard .card:hover {
      transform:translateY(-5px);
    }

.page-dashboard .card h2 {
      font-size:20px;
      color:#ff5c8a;
      margin-bottom:20px;
    }

/* SCORE */

.page-dashboard .score {
      font-size:50px;
      font-weight:bold;
      color:#ff5c8a;
      text-align:center;
      margin-bottom:10px;
    }

.page-dashboard .text-center {
      text-align:center;
    }

/* PROGRESS BAR */

.page-dashboard .progress-bar {
      width:100%;
      height:22px;
      background:#ffdce7;
      border-radius:20px;
      overflow:hidden;
      margin-top:15px;
    }

.page-dashboard .progress {
      height:100%;
      background:#ff5c8a;
      width:70%;
    }

/* GRAFIK AKTIVITAS */

.page-dashboard .graph {
      display:flex;
      justify-content:space-between;
      align-items:flex-end;
      height:180px;
      margin-top:20px;
    }

.page-dashboard .graph-item {
      text-align:center;
    }

.page-dashboard .bar {
      width:35px;
      background:#ff9eb5;
      border-radius:10px 10px 0 0;
      margin-bottom:8px;
    }

/* PENGINGAT */

.page-dashboard .reminder p {
      margin-bottom:10px;
      font-size:16px;
    }

/* RESPONSIVE */

@media(max-width:768px) {
.page-dashboard .score {
        font-size:40px;
      }

.page-dashboard .card h2 {
        font-size:18px;
      }
}

/* ===== edukasi/memahami-menopause.php :: inline style 1 ===== */
body.page-edukasi-memahami-menopause {
  font-family:Arial;
  background:#f6f2f8;
  padding:20px;
}

.page-edukasi-memahami-menopause .container {
  max-width:420px;
  margin:auto;
  background:white;
  padding:24px;
  border-radius:24px;
}

.page-edukasi-memahami-menopause h1 {
  color:#b56ad8;
  margin-bottom:15px;
}

.page-edukasi-memahami-menopause img {
  width:100%;
  border-radius:18px;
  margin-bottom:20px;
}

.page-edukasi-memahami-menopause p {
  line-height:1.8;
  color:#555;
}

.page-edukasi-memahami-menopause .section {
  margin-top:25px;
}

.page-edukasi-memahami-menopause .section h2 {
  color:#333;
  margin-bottom:10px;
}

.page-edukasi-memahami-menopause * {
      margin:0;
      padding:0;
      box-sizing:border-box;
      font-family: Arial, Helvetica, sans-serif;
    }

body.page-edukasi-memahami-menopause {
      background:#f6f2f8;
      display:flex;
      justify-content:center;
      padding:20px;
      min-height:100vh;
    }

.page-edukasi-memahami-menopause .phone {
      width:100%;
      max-width:420px;
      background:white;
      border-radius:30px;
      padding:22px;
      box-shadow:0 4px 15px rgba(0,0,0,0.08);
      position:relative;
      overflow:hidden;
    }

.page-edukasi-memahami-menopause .title {
      font-size:32px;
      font-weight:bold;
      color:#222;
      margin-bottom:20px;
    }

.page-edukasi-memahami-menopause .search-box {
      width:100%;
      background:#f5f5f5;
      border-radius:16px;
      padding:14px 16px;
      display:flex;
      align-items:center;
      gap:10px;
      margin-bottom:22px;
    }

.page-edukasi-memahami-menopause .search-box input {
      border:none;
      background:transparent;
      width:100%;
      outline:none;
      font-size:14px;
      color:#555;
    }

.page-edukasi-memahami-menopause .search-icon {
      font-size:18px;
      color:#999;
    }

.page-edukasi-memahami-menopause .edu-card {
      background:#fff;
      border-radius:20px;
      padding:18px;
      margin-bottom:15px;
      display:flex;
      justify-content:space-between;
      align-items:center;
      border:1px solid #f1f1f1;
      box-shadow:0 2px 8px rgba(0,0,0,0.04);
      cursor:pointer;
      transition:0.2s;
    }

.page-edukasi-memahami-menopause .edu-card:hover {
      transform:translateY(-2px);
    }

.page-edukasi-memahami-menopause .edu-left {
      display:flex;
      align-items:center;
      gap:15px;
    }

.page-edukasi-memahami-menopause .edu-icon {
      width:52px;
      height:52px;
      border-radius:16px;
      display:flex;
      align-items:center;
      justify-content:center;
      font-size:26px;
      font-weight:bold;
    }

.page-edukasi-memahami-menopause .pink {
      background:#fdebf5;
      color:#c25592;
    }

.page-edukasi-memahami-menopause .orange {
      background:#fff1e7;
      color:#f28b32;
    }

.page-edukasi-memahami-menopause .blue {
      background:#ebf5ff;
      color:#4f9ef8;
    }

.page-edukasi-memahami-menopause .purple {
      background:#f3ebff;
      color:#8f58d6;
    }

.page-edukasi-memahami-menopause .dark {
      background:#ececff;
      color:#5b5fae;
    }

.page-edukasi-memahami-menopause .edu-text h3 {
      font-size:17px;
      color:#222;
      margin-bottom:5px;
    }

.page-edukasi-memahami-menopause .edu-text p {
      color:#777;
      font-size:13px;
      line-height:1.4;
    }

.page-edukasi-memahami-menopause .arrow {
      font-size:22px;
      color:#bbb;
    }

.page-edukasi-memahami-menopause .bottom-nav {
      margin-top:20px;
      display:flex;
      justify-content:space-between;
      border-top:1px solid #eee;
      padding-top:15px;
    }

.page-edukasi-memahami-menopause .nav-item {
      display:flex;
      flex-direction:column;
      align-items:center;
      font-size:12px;
      color:#999;
    }

.page-edukasi-memahami-menopause .nav-item.active {
      color:#b56ad8;
      font-weight:bold;
    }

.page-edukasi-memahami-menopause .nav-icon {
      font-size:22px;
      margin-bottom:5px;
    }

.page-edukasi-memahami-menopause .bottom-nav {
  margin-top:30px;
  display:flex;
  justify-content:space-between;
  align-items:center;
  border-top:1px solid #eee;
  padding-top:15px;
  background:white;
  position:sticky;
  bottom:0;
}

.page-edukasi-memahami-menopause .nav-item {
  display:flex;
  flex-direction:column;
  align-items:center;
  text-decoration:none;
  font-size:12px;
  color:#999;
  transition:0.3s;
}

.page-edukasi-memahami-menopause .nav-item:hover {
  transform:translateY(-3px);
  color:#b56ad8;
}

.page-edukasi-memahami-menopause .nav-item.active {
  color:#b56ad8;
  font-weight:bold;
}

.page-edukasi-memahami-menopause .nav-icon {
  font-size:22px;
  margin-bottom:5px;
}

/* ===== edukasi/nutrisi-diet.php :: inline style 1 ===== */
body.page-edukasi-nutrisi-diet {
  background:#fff7f0;
  font-family:Arial;
  padding:20px;
}

.page-edukasi-nutrisi-diet .container {
  max-width:420px;
  margin:auto;
  background:white;
  border-radius:24px;
  padding:24px;
}

.page-edukasi-nutrisi-diet h1 {
  color:#f28b32;
  margin-bottom:20px;
}

.page-edukasi-nutrisi-diet .food {
  padding:16px;
  background:#fff3ea;
  border-radius:16px;
  margin-bottom:15px;
}

.page-edukasi-nutrisi-diet .bottom-nav {
      margin-top:20px;
      display:flex;
      justify-content:space-between;
      border-top:1px solid #eee;
      padding-top:15px;
    }

.page-edukasi-nutrisi-diet .bottom-nav {
  margin-top:30px;
  display:flex;
  justify-content:space-between;
  align-items:center;
  border-top:1px solid #eee;
  padding-top:15px;
  background:white;
  position:sticky;
  bottom:0;
}

.page-edukasi-nutrisi-diet .nav-item {
  display:flex;
  flex-direction:column;
  align-items:center;
  text-decoration:none;
  font-size:12px;
  color:#999;
  transition:0.3s;
}

.page-edukasi-nutrisi-diet .nav-item:hover {
  transform:translateY(-3px);
  color:#b56ad8;
}

.page-edukasi-nutrisi-diet .nav-item.active {
  color:#b56ad8;
  font-weight:bold;
}

.page-edukasi-nutrisi-diet .nav-icon {
  font-size:22px;
  margin-bottom:5px;
}

/* ===== edukasi/olahraga.php :: inline style 1 ===== */
body.page-edukasi-olahraga {
  background:#eef6ff;
  font-family:Arial;
  padding:20px;
}

.page-edukasi-olahraga .container {
  max-width:420px;
  margin:auto;
  background:white;
  padding:24px;
  border-radius:24px;
}

.page-edukasi-olahraga h1 {
  color:#4f9ef8;
  margin-bottom:20px;
}

.page-edukasi-olahraga .exercise {
  background:#f3f8ff;
  padding:18px;
  border-radius:18px;
  margin-bottom:15px;
}

.page-edukasi-olahraga .bottom-nav {
      margin-top:20px;
      display:flex;
      justify-content:space-between;
      border-top:1px solid #eee;
      padding-top:15px;
    }

.page-edukasi-olahraga .bottom-nav {
  margin-top:30px;
  display:flex;
  justify-content:space-between;
  align-items:center;
  border-top:1px solid #eee;
  padding-top:15px;
  background:white;
  position:sticky;
  bottom:0;
}

.page-edukasi-olahraga .nav-item {
  display:flex;
  flex-direction:column;
  align-items:center;
  text-decoration:none;
  font-size:12px;
  color:#999;
  transition:0.3s;
}

.page-edukasi-olahraga .nav-item:hover {
  transform:translateY(-3px);
  color:#b56ad8;
}

.page-edukasi-olahraga .nav-item.active {
  color:#b56ad8;
  font-weight:bold;
}

.page-edukasi-olahraga .nav-icon {
  font-size:22px;
  margin-bottom:5px;
}

/* ===== edukasi/penuaan-perempuan.php :: inline style 1 ===== */
body.page-edukasi-penuaan-perempuan {
  background:#fff5ed;
  font-family:Arial;
  padding:20px;
}

.page-edukasi-penuaan-perempuan .container {
  max-width:420px;
  margin:auto;
  background:white;
  border-radius:24px;
  padding:24px;
}

.page-edukasi-penuaan-perempuan h1 {
  color:#f28b32;
  margin-bottom:20px;
}

.page-edukasi-penuaan-perempuan .box {
  background:#fff3ea;
  padding:18px;
  border-radius:18px;
  margin-bottom:15px;
}

.page-edukasi-penuaan-perempuan .bottom-nav {
      margin-top:20px;
      display:flex;
      justify-content:space-between;
      border-top:1px solid #eee;
      padding-top:15px;
    }

.page-edukasi-penuaan-perempuan .bottom-nav {
  margin-top:30px;
  display:flex;
  justify-content:space-between;
  align-items:center;
  border-top:1px solid #eee;
  padding-top:15px;
  background:white;
  position:sticky;
  bottom:0;
}

.page-edukasi-penuaan-perempuan .nav-item {
  display:flex;
  flex-direction:column;
  align-items:center;
  text-decoration:none;
  font-size:12px;
  color:#999;
  transition:0.3s;
}

.page-edukasi-penuaan-perempuan .nav-item:hover {
  transform:translateY(-3px);
  color:#b56ad8;
}

.page-edukasi-penuaan-perempuan .nav-item.active {
  color:#b56ad8;
  font-weight:bold;
}

.page-edukasi-penuaan-perempuan .nav-icon {
  font-size:22px;
  margin-bottom:5px;
}

/* ===== edukasi/perubahan-perempuan.php :: inline style 1 ===== */
body.page-edukasi-perubahan-perempuan {
  background:#f6f2f8;
  font-family:Arial;
  padding:20px;
}

.page-edukasi-perubahan-perempuan .container {
  max-width:420px;
  margin:auto;
  background:white;
  border-radius:24px;
  padding:24px;
}

.page-edukasi-perubahan-perempuan h1 {
  color:#d05b8e;
  margin-bottom:20px;
}

.page-edukasi-perubahan-perempuan .card {
  background:#faf7fc;
  padding:18px;
  border-radius:18px;
  margin-bottom:18px;
}

.page-edukasi-perubahan-perempuan .card h2 {
  margin-bottom:10px;
}

.page-edukasi-perubahan-perempuan .bottom-nav {
      margin-top:20px;
      display:flex;
      justify-content:space-between;
      border-top:1px solid #eee;
      padding-top:15px;
    }

.page-edukasi-perubahan-perempuan .bottom-nav {
  margin-top:30px;
  display:flex;
  justify-content:space-between;
  align-items:center;
  border-top:1px solid #eee;
  padding-top:15px;
  background:white;
  position:sticky;
  bottom:0;
}

.page-edukasi-perubahan-perempuan .nav-item {
  display:flex;
  flex-direction:column;
  align-items:center;
  text-decoration:none;
  font-size:12px;
  color:#999;
  transition:0.3s;
}

.page-edukasi-perubahan-perempuan .nav-item:hover {
  transform:translateY(-3px);
  color:#b56ad8;
}

.page-edukasi-perubahan-perempuan .nav-item.active {
  color:#b56ad8;
  font-weight:bold;
}

.page-edukasi-perubahan-perempuan .nav-icon {
  font-size:22px;
  margin-bottom:5px;
}

/* ===== edukasi/stress-mindfulness.php :: inline style 1 ===== */
body.page-edukasi-stress-mindfulness {
  background:#f5f0ff;
  font-family:Arial;
  padding:20px;
}

.page-edukasi-stress-mindfulness .container {
  max-width:420px;
  margin:auto;
  background:white;
  border-radius:24px;
  padding:24px;
}

.page-edukasi-stress-mindfulness h1 {
  color:#8f58d6;
  margin-bottom:20px;
}

.page-edukasi-stress-mindfulness .tip {
  background:#f6efff;
  padding:18px;
  border-radius:18px;
  margin-bottom:15px;
}

.page-edukasi-stress-mindfulness .bottom-nav {
      margin-top:20px;
      display:flex;
      justify-content:space-between;
      border-top:1px solid #eee;
      padding-top:15px;
    }

.page-edukasi-stress-mindfulness .bottom-nav {
  margin-top:30px;
  display:flex;
  justify-content:space-between;
  align-items:center;
  border-top:1px solid #eee;
  padding-top:15px;
  background:white;
  position:sticky;
  bottom:0;
}

.page-edukasi-stress-mindfulness .nav-item {
  display:flex;
  flex-direction:column;
  align-items:center;
  text-decoration:none;
  font-size:12px;
  color:#999;
  transition:0.3s;
}

.page-edukasi-stress-mindfulness .nav-item:hover {
  transform:translateY(-3px);
  color:#b56ad8;
}

.page-edukasi-stress-mindfulness .nav-item.active {
  color:#b56ad8;
  font-weight:bold;
}

.page-edukasi-stress-mindfulness .nav-icon {
  font-size:22px;
  margin-bottom:5px;
}

/* ===== edukasi/tidur-istirahat.php :: inline style 1 ===== */
body.page-edukasi-tidur-istirahat {
  background:#eef0ff;
  font-family:Arial;
  padding:20px;
}

.page-edukasi-tidur-istirahat .container {
  max-width:420px;
  margin:auto;
  background:white;
  border-radius:24px;
  padding:24px;
}

.page-edukasi-tidur-istirahat h1 {
  color:#5b5fae;
  margin-bottom:20px;
}

.page-edukasi-tidur-istirahat .sleep {
  background:#f1f3ff;
  padding:18px;
  border-radius:18px;
  margin-bottom:15px;
}

.page-edukasi-tidur-istirahat .bottom-nav {
      margin-top:20px;
      display:flex;
      justify-content:space-between;
      border-top:1px solid #eee;
      padding-top:15px;
    }

.page-edukasi-tidur-istirahat .bottom-nav {
  margin-top:30px;
  display:flex;
  justify-content:space-between;
  align-items:center;
  border-top:1px solid #eee;
  padding-top:15px;
  background:white;
  position:sticky;
  bottom:0;
}

.page-edukasi-tidur-istirahat .nav-item {
  display:flex;
  flex-direction:column;
  align-items:center;
  text-decoration:none;
  font-size:12px;
  color:#999;
  transition:0.3s;
}

.page-edukasi-tidur-istirahat .nav-item:hover {
  transform:translateY(-3px);
  color:#b56ad8;
}

.page-edukasi-tidur-istirahat .nav-item.active {
  color:#b56ad8;
  font-weight:bold;
}

.page-edukasi-tidur-istirahat .nav-icon {
  font-size:22px;
  margin-bottom:5px;
}

/* ===== edukasi1.php :: inline style 1 ===== */
.page-edukasi1 * {
      margin:0;
      padding:0;
      box-sizing:border-box;
      font-family: Arial, Helvetica, sans-serif;
    }

body.page-edukasi1 {
      background:#f6f2f8;
      display:flex;
      justify-content:center;
      padding:20px;
      min-height:100vh;
    }

.page-edukasi1 .phone {
      width:100%;
      max-width:420px;
      background:white;
      border-radius:30px;
      padding:22px;
      box-shadow:0 4px 15px rgba(0,0,0,0.08);
      position:relative;
      overflow:hidden;
    }

.page-edukasi1 .title {
      font-size:32px;
      font-weight:bold;
      color:#222;
      margin-bottom:20px;
    }

.page-edukasi1 .search-box {
      width:100%;
      background:#f5f5f5;
      border-radius:16px;
      padding:14px 16px;
      display:flex;
      align-items:center;
      gap:10px;
      margin-bottom:22px;
    }

.page-edukasi1 .search-box input {
      border:none;
      background:transparent;
      width:100%;
      outline:none;
      font-size:14px;
      color:#555;
    }

.page-edukasi1 .search-icon {
      font-size:18px;
      color:#999;
    }

.page-edukasi1 .edu-card {
      background:#fff;
      border-radius:20px;
      padding:18px;
      margin-bottom:15px;
      display:flex;
      justify-content:space-between;
      align-items:center;
      border:1px solid #f1f1f1;
      box-shadow:0 2px 8px rgba(0,0,0,0.04);
      cursor:pointer;
      transition:0.2s;
    }

.page-edukasi1 .edu-card:hover {
      transform:translateY(-2px);
    }

.page-edukasi1 .edu-left {
      display:flex;
      align-items:center;
      gap:15px;
    }

.page-edukasi1 .edu-icon {
      width:52px;
      height:52px;
      border-radius:16px;
      display:flex;
      align-items:center;
      justify-content:center;
      font-size:26px;
      font-weight:bold;
    }

.page-edukasi1 .pink {
      background:#fdebf5;
      color:#c25592;
    }

.page-edukasi1 .orange {
      background:#fff1e7;
      color:#f28b32;
    }

.page-edukasi1 .blue {
      background:#ebf5ff;
      color:#4f9ef8;
    }

.page-edukasi1 .purple {
      background:#f3ebff;
      color:#8f58d6;
    }

.page-edukasi1 .dark {
      background:#ececff;
      color:#5b5fae;
    }

.page-edukasi1 .edu-text h3 {
      font-size:17px;
      color:#222;
      margin-bottom:5px;
    }

.page-edukasi1 .edu-text p {
      color:#777;
      font-size:13px;
      line-height:1.4;
    }

.page-edukasi1 .arrow {
      font-size:22px;
      color:#bbb;
    }

.page-edukasi1 .bottom-nav {
      margin-top:20px;
      display:flex;
      justify-content:space-between;
      border-top:1px solid #eee;
      padding-top:15px;
    }

.page-edukasi1 .nav-item {
      display:flex;
      flex-direction:column;
      align-items:center;
      font-size:12px;
      color:#999;
    }

.page-edukasi1 .nav-item.active {
      color:#b56ad8;
      font-weight:bold;
    }

.page-edukasi1 .nav-icon {
      font-size:22px;
      margin-bottom:5px;
    }

/* ===== index.html :: inline style 1 ===== */
.page-index * {
      margin:0;
      padding:0;
      box-sizing:border-box;
      font-family: Arial, sans-serif;
    }

body.page-index {
      background:#fff8f6;
      color:#333;
      line-height:1.6;
    }

.page-index header {
      background:linear-gradient(135deg,#ff9eb5,#ffcad4);
      color:white;
      padding:80px 20px;
      text-align:center;
    }

.page-index header h1 {
      font-size:48px;
      margin-bottom:15px;
    }

.page-index header p {
      font-size:20px;
      max-width:700px;
      margin:auto;
    }

.page-index nav {
      background:white;
      padding:15px;
      display:flex;
      justify-content:center;
      gap:30px;
      box-shadow:0 2px 10px rgba(0,0,0,0.05);
      position:sticky;
      top:0;
      z-index:100;
    }

.page-index nav a {
      text-decoration:none;
      color:#ff5c8a;
      font-weight:bold;
    }

.page-index section {
      padding:70px 20px;
      max-width:1200px;
      margin:auto;
    }

.page-index .about {
      display:grid;
      grid-template-columns:1fr 1fr;
      gap:40px;
      align-items:center;
    }

.page-index .about img {
      width:100%;
      border-radius:20px;
    }

.page-index .section-title {
      text-align:center;
      margin-bottom:50px;
    }

.page-index .section-title h2 {
      font-size:36px;
      color:#ff5c8a;
      margin-bottom:10px;
    }

.page-index .cards {
      display:grid;
      grid-template-columns:repeat(auto-fit,minmax(250px,1fr));
      gap:25px;
    }

.page-index .card {
      background:white;
      padding:30px;
      border-radius:18px;
      box-shadow:0 5px 20px rgba(0,0,0,0.08);
      transition:0.3s;
    }

.page-index .card:hover {
      transform:translateY(-5px);
    }

.page-index .card h3 {
      color:#ff5c8a;
      margin-bottom:15px;
    }

.page-index .tips {
      background:#ffeef2;
      border-radius:20px;
      padding:50px;
    }

.page-index ul {
      margin-top:20px;
      padding-left:20px;
    }

.page-index .contact {
      text-align:center;
    }

.page-index .btn {
      display:inline-block;
      margin-top:20px;
      background:#ff5c8a;
      color:white;
      padding:14px 28px;
      border-radius:50px;
      text-decoration:none;
      font-weight:bold;
      transition:0.3s;
    }

.page-index .btn:hover {
      background:#e14b76;
    }

.page-index footer {
      background:#ffcad4;
      text-align:center;
      padding:20px;
      color:#555;
    }

@media(max-width:768px) {
.page-index .about {
        grid-template-columns:1fr;
      }

.page-index header h1 {
        font-size:36px;
      }
}

/* ===== index2.html :: inline style 1 ===== */
.page-index2 * {
      margin:0;
      padding:0;
      box-sizing:border-box;
      font-family:Arial, sans-serif;
    }

body.page-index2 {
      height:100vh;
      display:flex;
      justify-content:center;
      align-items:center;
      background:linear-gradient(135deg,#ff9eb5,#ffd6df);
    }

.page-index2 .login-container {
      background:white;
      width:350px;
      padding:40px;
      border-radius:20px;
      box-shadow:0 10px 25px rgba(0,0,0,0.1);
    }

.page-index2 .login-container h1 {
      text-align:center;
      margin-bottom:30px;
      color:#ff5c8a;
    }

.page-index2 .input-group {
      margin-bottom:20px;
    }

.page-index2 .input-group label {
      display:block;
      margin-bottom:8px;
      color:#555;
      font-weight:bold;
    }

.page-index2 .input-group input {
      width:100%;
      padding:12px;
      border:1px solid #ddd;
      border-radius:10px;
      font-size:16px;
    }

.page-index2 .input-group input:focus {
      outline:none;
      border-color:#ff5c8a;
    }

.page-index2 .btn {
      width:100%;
      padding:14px;
      background:#ff5c8a;
      border:none;
      border-radius:10px;
      color:white;
      font-size:16px;
      font-weight:bold;
      cursor:pointer;
      transition:0.3s;
    }

.page-index2 .btn:hover {
      background:#e14b76;
    }

.page-index2 .register {
      text-align:center;
      margin-top:20px;
      font-size:14px;
    }

.page-index2 .register a {
      color:#ff5c8a;
      text-decoration:none;
      font-weight:bold;
    }

.page-index2 .logo {
      text-align:center;
      font-size:40px;
      margin-bottom:10px;
    }

/* ===== instrument meno.html :: inline style 1 ===== */
.page-instrument-meno * {
      margin:0;
      padding:0;
      box-sizing:border-box;
      font-family:Arial, sans-serif;
    }

body.page-instrument-meno {
      background:#fff7f8;
      color:#444;
      padding:20px;
    }

.page-instrument-meno .container {
      max-width:1200px;
      margin:auto;
    }

/* HEADER */

.page-instrument-meno .header {
      text-align:center;
      margin-bottom:30px;
    }

.page-instrument-meno .header h1 {
      color:#ff5c8a;
      font-size:34px;
      margin-bottom:10px;
    }

.page-instrument-meno .header p {
      color:#777;
      font-size:16px;
    }

/* GRID */

.page-instrument-meno .grid {
      display:grid;
      grid-template-columns:repeat(auto-fit,minmax(320px,1fr));
      gap:20px;
    }

/* CARD */

.page-instrument-meno .card {
      background:white;
      border-radius:20px;
      padding:25px;
      box-shadow:0 4px 15px rgba(0,0,0,0.08);
      transition:0.3s;
    }

.page-instrument-meno .card:hover {
      transform:translateY(-5px);
    }

.page-instrument-meno .card h2 {
      color:#ff5c8a;
      margin-bottom:15px;
      font-size:24px;
    }

.page-instrument-meno .card p {
      margin-bottom:15px;
      line-height:1.7;
    }

/* LIST */

.page-instrument-meno ul {
      margin-left:20px;
      margin-bottom:15px;
    }

.page-instrument-meno li {
      margin-bottom:8px;
    }

/* BUTTON */

.page-instrument-meno .btn {
      width:100%;
      padding:14px;
      border:none;
      border-radius:10px;
      background:#ff5c8a;
      color:white;
      font-size:16px;
      cursor:pointer;
      transition:0.3s;
      margin-top:15px;
    }

.page-instrument-meno .btn:hover {
      background:#e14b76;
    }

/* RESULT */

.page-instrument-meno .result {
      margin-top:15px;
      background:#fff0f5;
      padding:15px;
      border-radius:12px;
      text-align:center;
      color:#d6336c;
      font-weight:bold;
      display:none;
    }

/* TABLE */

.page-instrument-meno table {
      width:100%;
      border-collapse:collapse;
      margin-top:15px;
    }

.page-instrument-meno table th,
.page-instrument-meno table td {
      border:1px solid #ffd9e2;
      padding:10px;
      text-align:left;
    }

.page-instrument-meno table th {
      background:#ffe6ee;
      color:#d6336c;
    }

/* RESPONSIVE */

@media(max-width:768px) {
.page-instrument-meno .header h1 {
        font-size:28px;
      }
}

/* ===== login.html :: inline style 1 ===== */
.page-login * {
      margin:0;
      padding:0;
      box-sizing:border-box;
      font-family:Arial, sans-serif;
    }

body.page-login {
      height:100vh;
      display:flex;
      justify-content:center;
      align-items:center;
      background:linear-gradient(135deg,#ff9eb5,#ffd6df);
    }

.page-login .login-container {
      background:white;
      width:350px;
      padding:40px;
      border-radius:20px;
      box-shadow:0 10px 25px rgba(0,0,0,0.1);
    }

.page-login .login-container h1 {
      text-align:center;
      margin-bottom:30px;
      color:#ff5c8a;
    }

.page-login .input-group {
      margin-bottom:20px;
    }

.page-login .input-group label {
      display:block;
      margin-bottom:8px;
      color:#555;
      font-weight:bold;
    }

.page-login .input-group input {
      width:100%;
      padding:12px;
      border:1px solid #ddd;
      border-radius:10px;
      font-size:16px;
    }

.page-login .input-group input:focus {
      outline:none;
      border-color:#ff5c8a;
    }

.page-login .btn {
      width:100%;
      padding:14px;
      background:#ff5c8a;
      border:none;
      border-radius:10px;
      color:white;
      font-size:16px;
      font-weight:bold;
      cursor:pointer;
      transition:0.3s;
    }

.page-login .btn:hover {
      background:#e14b76;
    }

.page-login .register {
      text-align:center;
      margin-top:20px;
      font-size:14px;
    }

.page-login .register a {
      color:#ff5c8a;
      text-decoration:none;
      font-weight:bold;
    }

.page-login .logo {
      text-align:center;
      font-size:40px;
      margin-bottom:10px;
    }

/* ===== masuk.html :: inline style 1 ===== */
.page-masuk * {
      margin:0;
      padding:0;
      box-sizing:border-box;
      font-family:Arial, sans-serif;
    }

body.page-masuk {
      height:100vh;
      display:flex;
      justify-content:center;
      align-items:center;
      background:linear-gradient(135deg,#ff9eb5,#ffd6df);
    }

.page-masuk .login-container {
      background:white;
      width:350px;
      padding:40px;
      border-radius:20px;
      box-shadow:0 10px 25px rgba(0,0,0,0.1);
    }

.page-masuk .logo {
      text-align:center;
      margin-bottom:15px;
    }

.page-masuk .logo img {
      width:90px;
      height:90px;
      object-fit:cover;
      border-radius:50%;
      border:4px solid #ffb6c8;
    }

.page-masuk .login-container h1 {
      text-align:center;
      margin-bottom:30px;
      color:#ff5c8a;
    }

.page-masuk .input-group {
      margin-bottom:20px;
    }

.page-masuk .input-group label {
      display:block;
      margin-bottom:8px;
      color:#555;
      font-weight:bold;
    }

.page-masuk .input-group input {
      width:100%;
      padding:12px;
      border:1px solid #ddd;
      border-radius:10px;
      font-size:16px;
    }

.page-masuk .input-group input:focus {
      outline:none;
      border-color:#ff5c8a;
    }

.page-masuk .btn {
      width:100%;
      padding:14px;
      background:#ff5c8a;
      border:none;
      border-radius:10px;
      color:white;
      font-size:16px;
      font-weight:bold;
      cursor:pointer;
      transition:0.3s;
    }

.page-masuk .btn:hover {
      background:#e14b76;
    }

.page-masuk .register {
      text-align:center;
      margin-top:20px;
      font-size:14px;
    }

.page-masuk .register a {
      color:#ff5c8a;
      text-decoration:none;
      font-weight:bold;
    }

/* ===== menopouse-alur.html :: inline style 1 ===== */
.page-menopouse-alur * {
      margin:0;
      padding:0;
      box-sizing:border-box;
      font-family:Arial, sans-serif;
    }

body.page-menopouse-alur {
      background:#f2f2f2;
      color:#333;
      padding:20px;
    }

.page-menopouse-alur .container {
      max-width:1400px;
      margin:auto;
    }

/* HEADER */

.page-menopouse-alur .header {
      text-align:center;
      margin-bottom:40px;
    }

.page-menopouse-alur .header h1 {
      font-size:38px;
      color:#efb082;
      margin-bottom:10px;
    }

.page-menopouse-alur .header p {
      color:#777;
      font-size:18px;
    }

/* DASHBOARD */

.page-menopouse-alur .dashboard {
      background:#efb082;
      color:white;
      padding:25px;
      border-radius:20px;
      text-align:center;
      margin-bottom:40px;
      box-shadow:0 4px 15px rgba(0,0,0,0.1);
    }

.page-menopouse-alur .dashboard h2 {
      font-size:30px;
      margin-bottom:10px;
    }

/* GRID */

.page-menopouse-alur .grid {
      display:grid;
      grid-template-columns:repeat(auto-fit,minmax(300px,1fr));
      gap:25px;
      margin-bottom:40px;
    }

/* CARD */

.page-menopouse-alur .card {
      background:#7c65b1;
      color:white;
      padding:25px;
      border-radius:25px;
      box-shadow:0 4px 15px rgba(0,0,0,0.1);
      transition:0.3s;
      position:relative;
    }

.page-menopouse-alur .card:hover {
      transform:translateY(-5px);
    }

.page-menopouse-alur .card h3 {
      margin-bottom:20px;
      font-size:24px;
      text-align:center;
    }

.page-menopouse-alur .card ul {
      margin-left:20px;
      line-height:2;
      font-size:18px;
    }

/* BUTTON */

.page-menopouse-alur .btn {
      width:100%;
      padding:14px;
      border:none;
      border-radius:12px;
      background:#efb082;
      color:white;
      font-size:16px;
      cursor:pointer;
      margin-top:20px;
      transition:0.3s;
    }

.page-menopouse-alur .btn:hover {
      background:#e89a63;
    }

/* EVALUASI */

.page-menopouse-alur .evaluation {
      background:#efb082;
      padding:30px;
      border-radius:25px;
      color:white;
      margin-bottom:30px;
      box-shadow:0 4px 15px rgba(0,0,0,0.1);
    }

.page-menopouse-alur .evaluation h2 {
      text-align:center;
      margin-bottom:20px;
      font-size:30px;
    }

.page-menopouse-alur .evaluation ul {
      margin-left:30px;
      line-height:2;
      font-size:20px;
    }

/* FEEDBACK */

.page-menopouse-alur .feedback {
      background:#efb082;
      padding:25px;
      border-radius:20px;
      color:white;
      text-align:center;
      box-shadow:0 4px 15px rgba(0,0,0,0.1);
    }

.page-menopouse-alur .feedback h2 {
      margin-bottom:15px;
      font-size:28px;
    }

.page-menopouse-alur textarea {
      width:100%;
      height:120px;
      border:none;
      border-radius:12px;
      padding:15px;
      margin-top:15px;
      resize:none;
      font-size:16px;
    }

/* MODAL */

.page-menopouse-alur .modal {
      display:none;
      position:fixed;
      top:0;
      left:0;
      width:100%;
      height:100%;
      background:rgba(0,0,0,0.5);
      justify-content:center;
      align-items:center;
      z-index:999;
    }

.page-menopouse-alur .modal-content {
      background:white;
      width:90%;
      max-width:500px;
      padding:30px;
      border-radius:20px;
      position:relative;
    }

.page-menopouse-alur .modal-content h2 {
      color:#7c65b1;
      margin-bottom:20px;
      text-align:center;
    }

.page-menopouse-alur .close {
      position:absolute;
      right:20px;
      top:10px;
      font-size:30px;
      cursor:pointer;
      color:#777;
    }

.page-menopouse-alur .result {
      margin-top:20px;
      background:#fbe7d8;
      padding:15px;
      border-radius:12px;
      text-align:center;
      color:#c96d1d;
      font-weight:bold;
      display:none;
    }

/* RESPONSIVE */

@media(max-width:768px) {
.page-menopouse-alur .header h1 {
        font-size:28px;
      }

.page-menopouse-alur .dashboard h2 {
        font-size:24px;
      }

.page-menopouse-alur .card h3 {
        font-size:22px;
      }
}

/* ===== menumenocare.php :: inline style 1 ===== */
.page-menumenocare * {
      margin:0;
      padding:0;
      box-sizing:border-box;
      font-family:Arial, sans-serif;
    }

body.page-menumenocare {
      min-height:100vh;
      display:flex;
      justify-content:center;
      align-items:center;
      background:linear-gradient(135deg,#ff9eb5,#ffd6df);
      padding:20px;
    }

.page-menumenocare .register-container {
      background:white;
      width:400px;
      padding:40px;
      border-radius:20px;
      box-shadow:0 10px 25px rgba(0,0,0,0.1);
    }

.page-menumenocare .logo {
      text-align:center;
      margin-bottom:15px;
    }

.page-menumenocare .logo img {
      width:90px;
      height:90px;
      object-fit:cover;
      border-radius:50%;
      border:4px solid #ffb6c8;
    }

.page-menumenocare h1 {
      text-align:center;
      color:#ff5c8a;
      margin-bottom:30px;
    }

.page-menumenocare .input-group {
      margin-bottom:18px;
    }

.page-menumenocare .input-group label {
      display:block;
      margin-bottom:8px;
      font-weight:bold;
      color:#555;
    }

.page-menumenocare .input-group input {
      width:100%;
      padding:12px;
      border:1px solid #ddd;
      border-radius:10px;
      font-size:15px;
    }

.page-menumenocare .input-group input:focus {
      outline:none;
      border-color:#ff5c8a;
    }

.page-menumenocare .btn {
      width:100%;
      padding:14px;
      background:#ff5c8a;
      border:none;
      border-radius:10px;
      color:white;
      font-size:16px;
      font-weight:bold;
      cursor:pointer;
      transition:0.3s;
      margin-top:10px;
    }

.page-menumenocare .btn:hover {
      background:#e14b76;
    }

.page-menumenocare .login-link {
      text-align:center;
      margin-top:20px;
      font-size:14px;
    }

.page-menumenocare .login-link a {
      color:#ff5c8a;
      text-decoration:none;
      font-weight:bold;
    }

.page-menumenocare .bottom-nav {
  margin-top:30px;
  display:flex;
  justify-content:space-between;
  align-items:center;
  border-top:1px solid #eee;
  padding-top:15px;
  background:white;
  position:sticky;
  bottom:0;
}

.page-menumenocare .nav-item {
  display:flex;
  flex-direction:column;
  align-items:center;
  text-decoration:none;
  font-size:12px;
  color:#999;
  transition:0.3s;
}

.page-menumenocare .nav-item:hover {
  transform:translateY(-3px);
  color:#b56ad8;
}

.page-menumenocare .nav-item.active {
  color:#b56ad8;
  font-weight:bold;
}

.page-menumenocare .nav-icon {
  font-size:22px;
  margin-bottom:5px;
}

.page-menumenocare .user-panel {
  position:absolute;
  top:20px;
  right:20px;
  text-align:right;
}

.page-menumenocare .user-name {
  font-weight:bold;
  color:#ff5c8a;
  margin-bottom:8px;
}

.page-menumenocare .user-btn {
  padding:8px 12px;
  border:none;
  border-radius:8px;
  cursor:pointer;
  margin-left:5px;
  color:white;
}

.page-menumenocare .edit-btn {
  background:#6c63ff;
}

.page-menumenocare .logout-btn {
  background:#ff5c8a;
}

/* ===== modul_edukesmeno.html :: inline style 1 ===== */
.page-modul_edukesmeno * {
      margin:0;
      padding:0;
      box-sizing:border-box;
      font-family:Arial, sans-serif;
    }

body.page-modul_edukesmeno {
      background:#fff7f8;
      color:#444;
      line-height:1.7;
    }

/* HEADER */

.page-modul_edukesmeno header {
      background:linear-gradient(135deg,#ffb6c8,#ffd9e2);
      color:white;
      text-align:center;
      padding:35px 20px;
    }

.page-modul_edukesmeno header h1 {
      font-size:34px;
      margin-bottom:10px;
    }

.page-modul_edukesmeno header p {
      font-size:16px;
    }

/* CONTAINER */

.page-modul_edukesmeno .container {
      width:90%;
      max-width:1200px;
      margin:30px auto;
    }

/* CARD */

.page-modul_edukesmeno .card {
      background:white;
      border-radius:20px;
      padding:30px;
      margin-bottom:25px;
      box-shadow:0 4px 15px rgba(0,0,0,0.08);
      transition:0.3s;
    }

.page-modul_edukesmeno .card:hover {
      transform:translateY(-5px);
    }

.page-modul_edukesmeno .card h2 {
      color:#ff5c8a;
      margin-bottom:15px;
      font-size:28px;
    }

.page-modul_edukesmeno .card h3 {
      color:#d6336c;
      margin-top:15px;
      margin-bottom:10px;
    }

.page-modul_edukesmeno ul {
      margin-left:25px;
      margin-top:10px;
    }

.page-modul_edukesmeno li {
      margin-bottom:8px;
    }

/* ICON BOX */

.page-modul_edukesmeno .icon {
      font-size:40px;
      margin-bottom:15px;
    }

/* RESPONSIVE */

@media(max-width:768px) {
.page-modul_edukesmeno header h1 {
        font-size:26px;
      }

.page-modul_edukesmeno .card h2 {
        font-size:22px;
      }
}

/* ===== modul_evaprogres.html :: inline style 1 ===== */
.page-modul_evaprogres * {
      margin:0;
      padding:0;
      box-sizing:border-box;
      font-family:Arial, sans-serif;
    }

body.page-modul_evaprogres {
      background:#fff7f8;
      color:#444;
      padding:20px;
    }

.page-modul_evaprogres .container {
      max-width:1200px;
      margin:auto;
    }

/* HEADER */

.page-modul_evaprogres .header {
      text-align:center;
      margin-bottom:30px;
    }

.page-modul_evaprogres .header h1 {
      color:#ff5c8a;
      font-size:34px;
      margin-bottom:10px;
    }

.page-modul_evaprogres .header p {
      color:#777;
      font-size:16px;
    }

/* GRID */

.page-modul_evaprogres .grid {
      display:grid;
      grid-template-columns:repeat(auto-fit,minmax(320px,1fr));
      gap:20px;
    }

/* CARD */

.page-modul_evaprogres .card {
      background:white;
      border-radius:20px;
      padding:25px;
      box-shadow:0 4px 15px rgba(0,0,0,0.08);
      transition:0.3s;
    }

.page-modul_evaprogres .card:hover {
      transform:translateY(-5px);
    }

.page-modul_evaprogres .card h2 {
      color:#ff5c8a;
      margin-bottom:20px;
      font-size:24px;
    }

/* INDIKATOR */

.page-modul_evaprogres .indicator {
      margin-bottom:18px;
    }

.page-modul_evaprogres .indicator-title {
      display:flex;
      justify-content:space-between;
      margin-bottom:8px;
      font-weight:bold;
    }

.page-modul_evaprogres .progress-bar {
      width:100%;
      height:22px;
      background:#ffd9e2;
      border-radius:20px;
      overflow:hidden;
    }

.page-modul_evaprogres .progress {
      height:100%;
      text-align:center;
      line-height:22px;
      color:white;
      font-size:13px;
      border-radius:20px;
      background:#ff5c8a;
    }

/* GRAFIK */

.page-modul_evaprogres .graph {
      display:flex;
      justify-content:space-between;
      align-items:flex-end;
      height:220px;
      margin-top:20px;
    }

.page-modul_evaprogres .graph-item {
      width:40px;
      text-align:center;
    }

.page-modul_evaprogres .bar {
      width:100%;
      background:#ff9eb5;
      border-radius:10px 10px 0 0;
      margin-bottom:8px;
    }

/* REPORT */

.page-modul_evaprogres .report-box {
      background:#fff0f5;
      padding:15px;
      border-radius:15px;
      margin-bottom:15px;
    }

.page-modul_evaprogres .report-box h3 {
      color:#d6336c;
      margin-bottom:10px;
    }

/* ACHIEVEMENT */

.page-modul_evaprogres .achievement {
      display:flex;
      align-items:center;
      gap:15px;
      background:#ffe6ee;
      padding:15px;
      border-radius:15px;
      margin-bottom:15px;
    }

.page-modul_evaprogres .achievement-icon {
      font-size:40px;
    }

.page-modul_evaprogres .achievement h3 {
      color:#d6336c;
      margin-bottom:5px;
    }

/* BUTTON */

.page-modul_evaprogres .btn {
      width:100%;
      padding:14px;
      border:none;
      background:#ff5c8a;
      color:white;
      border-radius:10px;
      cursor:pointer;
      font-size:16px;
      margin-top:20px;
      transition:0.3s;
    }

.page-modul_evaprogres .btn:hover {
      background:#e14b76;
    }

/* RESULT */

.page-modul_evaprogres .result {
      margin-top:20px;
      background:#fff0f5;
      padding:15px;
      border-radius:12px;
      text-align:center;
      font-size:18px;
      font-weight:bold;
      color:#d6336c;
    }

/* RESPONSIVE */

@media(max-width:768px) {
.page-modul_evaprogres .header h1 {
        font-size:28px;
      }
}

/* ===== modul_konsultasi.html :: inline style 1 ===== */
.page-modul_konsultasi * {
      margin:0;
      padding:0;
      box-sizing:border-box;
      font-family:Arial, sans-serif;
    }

body.page-modul_konsultasi {
      background:#fff7f8;
      color:#444;
      padding:20px;
    }

.page-modul_konsultasi .container {
      max-width:1200px;
      margin:auto;
    }

/* HEADER */

.page-modul_konsultasi .header {
      text-align:center;
      margin-bottom:30px;
    }

.page-modul_konsultasi .header h1 {
      color:#ff5c8a;
      font-size:34px;
      margin-bottom:10px;
    }

.page-modul_konsultasi .header p {
      color:#777;
    }

/* GRID */

.page-modul_konsultasi .grid {
      display:grid;
      grid-template-columns:repeat(auto-fit,minmax(320px,1fr));
      gap:20px;
    }

/* CARD */

.page-modul_konsultasi .card {
      background:white;
      border-radius:20px;
      padding:25px;
      box-shadow:0 4px 15px rgba(0,0,0,0.08);
      transition:0.3s;
    }

.page-modul_konsultasi .card:hover {
      transform:translateY(-5px);
    }

.page-modul_konsultasi .card h2 {
      color:#ff5c8a;
      margin-bottom:20px;
      font-size:24px;
    }

/* CHAT */

.page-modul_konsultasi .chat-box {
      height:250px;
      overflow-y:auto;
      background:#fff0f5;
      padding:15px;
      border-radius:15px;
      margin-bottom:15px;
    }

.page-modul_konsultasi .message {
      margin-bottom:12px;
      padding:10px 14px;
      border-radius:12px;
      max-width:80%;
    }

.page-modul_konsultasi .admin {
      background:#ffb6c8;
      color:white;
    }

.page-modul_konsultasi .user {
      background:#ffe6ee;
      margin-left:auto;
    }

.page-modul_konsultasi .chat-input {
      display:flex;
      gap:10px;
    }

.page-modul_konsultasi .chat-input input {
      flex:1;
      padding:12px;
      border:1px solid #ddd;
      border-radius:10px;
    }

.page-modul_konsultasi .btn {
      padding:12px 18px;
      border:none;
      background:#ff5c8a;
      color:white;
      border-radius:10px;
      cursor:pointer;
      transition:0.3s;
    }

.page-modul_konsultasi .btn:hover {
      background:#e14b76;
    }

/* FAQ */

.page-modul_konsultasi .faq-item {
      background:#fff0f5;
      padding:15px;
      border-radius:12px;
      margin-bottom:15px;
    }

.page-modul_konsultasi .faq-item h3 {
      color:#d6336c;
      margin-bottom:8px;
    }

/* RUJUKAN */

.page-modul_konsultasi .facility {
      background:#ffe6ee;
      padding:15px;
      border-radius:12px;
      margin-bottom:12px;
    }

.page-modul_konsultasi .facility h3 {
      color:#d6336c;
      margin-bottom:5px;
    }

/* FORUM */

.page-modul_konsultasi .forum-post {
      background:#fff0f5;
      padding:15px;
      border-radius:12px;
      margin-bottom:15px;
    }

.page-modul_konsultasi .forum-post h4 {
      color:#ff5c8a;
      margin-bottom:8px;
    }

.page-modul_konsultasi .forum-post p {
      margin-bottom:8px;
    }

.page-modul_konsultasi .comment {
      font-size:14px;
      color:#666;
    }

/* RESPONSIVE */

@media(max-width:768px) {
.page-modul_konsultasi .header h1 {
        font-size:28px;
      }
}

/* ===== modul_pantaukeluhan.html :: inline style 1 ===== */
.page-modul_pantaukeluhan * {
      margin:0;
      padding:0;
      box-sizing:border-box;
      font-family:Arial, sans-serif;
    }

body.page-modul_pantaukeluhan {
      background:#fff7f8;
      color:#444;
      padding:20px;
    }

.page-modul_pantaukeluhan .container {
      max-width:1200px;
      margin:auto;
    }

/* HEADER */

.page-modul_pantaukeluhan .header {
      text-align:center;
      margin-bottom:30px;
    }

.page-modul_pantaukeluhan .header h1 {
      color:#ff5c8a;
      margin-bottom:10px;
      font-size:34px;
    }

.page-modul_pantaukeluhan .header p {
      color:#777;
      font-size:16px;
    }

/* GRID */

.page-modul_pantaukeluhan .grid {
      display:grid;
      grid-template-columns:repeat(auto-fit,minmax(320px,1fr));
      gap:20px;
    }

/* CARD */

.page-modul_pantaukeluhan .card {
      background:white;
      border-radius:20px;
      padding:25px;
      box-shadow:0 4px 15px rgba(0,0,0,0.08);
    }

.page-modul_pantaukeluhan .card h2 {
      color:#ff5c8a;
      margin-bottom:20px;
      font-size:24px;
    }

.page-modul_pantaukeluhan .input-group {
      margin-bottom:15px;
    }

.page-modul_pantaukeluhan .input-group label {
      display:block;
      margin-bottom:8px;
      font-weight:bold;
    }

.page-modul_pantaukeluhan .input-group input {
      width:100%;
      padding:12px;
      border:1px solid #ddd;
      border-radius:10px;
      font-size:15px;
    }

/* BUTTON */

.page-modul_pantaukeluhan .btn {
      width:100%;
      padding:14px;
      background:#ff5c8a;
      color:white;
      border:none;
      border-radius:10px;
      cursor:pointer;
      font-size:16px;
      margin-top:20px;
      transition:0.3s;
    }

.page-modul_pantaukeluhan .btn:hover {
      background:#e14b76;
    }

/* RESULT */

.page-modul_pantaukeluhan .result {
      margin-top:20px;
      padding:15px;
      background:#fff0f5;
      border-radius:12px;
      text-align:center;
      color:#d6336c;
      font-weight:bold;
      font-size:18px;
    }

/* GRAFIK */

.page-modul_pantaukeluhan .graph {
      display:flex;
      justify-content:space-between;
      align-items:flex-end;
      height:220px;
      margin-top:20px;
    }

.page-modul_pantaukeluhan .graph-item {
      text-align:center;
      width:40px;
    }

.page-modul_pantaukeluhan .bar {
      width:100%;
      background:#ff9eb5;
      border-radius:10px 10px 0 0;
      margin-bottom:8px;
    }

/* HISTORY */

.page-modul_pantaukeluhan .history {
      margin-top:15px;
    }

.page-modul_pantaukeluhan .history p {
      background:#ffe6ee;
      padding:12px;
      border-radius:10px;
      margin-bottom:10px;
    }

/* RESPONSIVE */

@media(max-width:768px) {
.page-modul_pantaukeluhan .header h1 {
        font-size:28px;
      }
}

/* ===== modul_pengingat.html :: inline style 1 ===== */
.page-modul_pengingat * {
      margin:0;
      padding:0;
      box-sizing:border-box;
      font-family:Arial, sans-serif;
    }

body.page-modul_pengingat {
      background:#fff7f8;
      color:#444;
      padding:20px;
    }

.page-modul_pengingat .container {
      max-width:1200px;
      margin:auto;
    }

/* HEADER */

.page-modul_pengingat .header {
      text-align:center;
      margin-bottom:30px;
    }

.page-modul_pengingat .header h1 {
      color:#ff5c8a;
      font-size:34px;
      margin-bottom:10px;
    }

.page-modul_pengingat .header p {
      color:#777;
      font-size:16px;
    }

/* GRID */

.page-modul_pengingat .grid {
      display:grid;
      grid-template-columns:repeat(auto-fit,minmax(320px,1fr));
      gap:20px;
    }

/* CARD */

.page-modul_pengingat .card {
      background:white;
      border-radius:20px;
      padding:25px;
      box-shadow:0 4px 15px rgba(0,0,0,0.08);
      transition:0.3s;
    }

.page-modul_pengingat .card:hover {
      transform:translateY(-5px);
    }

.page-modul_pengingat .card h2 {
      color:#ff5c8a;
      margin-bottom:20px;
      font-size:24px;
    }

/* INPUT */

.page-modul_pengingat .input-group {
      margin-bottom:15px;
    }

.page-modul_pengingat .input-group label {
      display:block;
      margin-bottom:8px;
      font-weight:bold;
    }

.page-modul_pengingat .input-group input,
.page-modul_pengingat .input-group select {
      width:100%;
      padding:12px;
      border:1px solid #ddd;
      border-radius:10px;
      font-size:15px;
    }

/* BUTTON */

.page-modul_pengingat .btn {
      width:100%;
      padding:14px;
      border:none;
      background:#ff5c8a;
      color:white;
      border-radius:10px;
      font-size:16px;
      cursor:pointer;
      transition:0.3s;
      margin-top:15px;
    }

.page-modul_pengingat .btn:hover {
      background:#e14b76;
    }

/* REMINDER */

.page-modul_pengingat .reminder-box {
      background:#fff0f5;
      padding:15px;
      border-radius:12px;
      margin-bottom:12px;
      border-left:5px solid #ff5c8a;
    }

.page-modul_pengingat .reminder-box h3 {
      color:#d6336c;
      margin-bottom:8px;
    }

/* RESULT */

.page-modul_pengingat .result {
      margin-top:20px;
      background:#ffe6ee;
      padding:15px;
      border-radius:12px;
      text-align:center;
      color:#d6336c;
      font-weight:bold;
      font-size:18px;
    }

/* NOTIFICATION */

.page-modul_pengingat .notification {
      margin-top:15px;
      padding:15px;
      background:#fff4d6;
      border-radius:12px;
      border-left:5px solid #ffc107;
    }

.page-modul_pengingat .notification h3 {
      color:#cc8800;
      margin-bottom:10px;
    }

/* RESPONSIVE */

@media(max-width:768px) {
.page-modul_pengingat .header h1 {
        font-size:28px;
      }
}

/* ===== modul_selfmngmeno.html :: inline style 1 ===== */
.page-modul_selfmngmeno * {
      margin:0;
      padding:0;
      box-sizing:border-box;
      font-family:Arial, sans-serif;
    }

body.page-modul_selfmngmeno {
      background:#fff7f8;
      color:#444;
      padding:20px;
    }

.page-modul_selfmngmeno .container {
      max-width:1200px;
      margin:auto;
    }

/* HEADER */

.page-modul_selfmngmeno .header {
      text-align:center;
      margin-bottom:30px;
    }

.page-modul_selfmngmeno .header h1 {
      color:#ff5c8a;
      margin-bottom:10px;
      font-size:34px;
    }

.page-modul_selfmngmeno .header p {
      color:#777;
      font-size:16px;
    }

/* GRID */

.page-modul_selfmngmeno .grid {
      display:grid;
      grid-template-columns:repeat(auto-fit,minmax(320px,1fr));
      gap:20px;
    }

/* CARD */

.page-modul_selfmngmeno .card {
      background:white;
      border-radius:20px;
      padding:25px;
      box-shadow:0 4px 15px rgba(0,0,0,0.08);
      transition:0.3s;
    }

.page-modul_selfmngmeno .card:hover {
      transform:translateY(-5px);
    }

.page-modul_selfmngmeno .card h2 {
      color:#ff5c8a;
      margin-bottom:20px;
      font-size:24px;
    }

.page-modul_selfmngmeno .card h3 {
      margin-top:15px;
      margin-bottom:10px;
      color:#d6336c;
    }

/* INPUT */

.page-modul_selfmngmeno .input-group {
      margin-bottom:15px;
    }

.page-modul_selfmngmeno .input-group label {
      display:block;
      margin-bottom:8px;
      font-weight:bold;
    }

.page-modul_selfmngmeno .input-group input,
.page-modul_selfmngmeno .input-group select {
      width:100%;
      padding:12px;
      border:1px solid #ddd;
      border-radius:10px;
      font-size:15px;
    }

/* BUTTON */

.page-modul_selfmngmeno .btn {
      width:100%;
      padding:14px;
      background:#ff5c8a;
      color:white;
      border:none;
      border-radius:10px;
      cursor:pointer;
      font-size:16px;
      margin-top:15px;
      transition:0.3s;
    }

.page-modul_selfmngmeno .btn:hover {
      background:#e14b76;
    }

/* CHECKLIST */

.page-modul_selfmngmeno .checklist {
      margin-top:15px;
    }

.page-modul_selfmngmeno .checklist label {
      display:block;
      margin-bottom:12px;
      font-size:16px;
    }

/* QUOTE */

.page-modul_selfmngmeno .quote-box {
      background:#ffe6ee;
      padding:20px;
      border-radius:15px;
      text-align:center;
      margin-top:15px;
      font-style:italic;
      color:#d6336c;
      font-size:18px;
    }

/* BADGE */

.page-modul_selfmngmeno .badge {
      display:inline-block;
      margin-top:15px;
      padding:12px 20px;
      background:#ffb6c8;
      color:white;
      border-radius:30px;
      font-weight:bold;
      font-size:16px;
    }

/* PROGRESS */

.page-modul_selfmngmeno .progress-container {
      width:100%;
      background:#ffd9e2;
      border-radius:20px;
      overflow:hidden;
      height:25px;
      margin-top:15px;
    }

.page-modul_selfmngmeno .progress {
      height:100%;
      width:75%;
      background:#ff5c8a;
      text-align:center;
      color:white;
      line-height:25px;
      font-size:14px;
    }

/* RESULT */

.page-modul_selfmngmeno .result {
      margin-top:20px;
      padding:15px;
      background:#fff0f5;
      border-radius:12px;
      text-align:center;
      color:#d6336c;
      font-weight:bold;
      font-size:18px;
    }

/* RESPONSIVE */

@media(max-width:768px) {
.page-modul_selfmngmeno .header h1 {
        font-size:28px;
      }
}

/* ===== nutrisi-diet/nutrisi-diet-lanjutan.html :: inline style 1 ===== */
.page-nutrisi-diet-nutrisi-diet-lanjutan * {
  margin:0;
  padding:0;
  box-sizing:border-box;
  font-family:Arial, Helvetica, sans-serif;
}

body.page-nutrisi-diet-nutrisi-diet-lanjutan {
  background:#f7f3fb;
  display:flex;
  justify-content:center;
  padding:20px;
}

.page-nutrisi-diet-nutrisi-diet-lanjutan .phone {
  width:100%;
  max-width:420px;
  background:white;
  border-radius:30px;
  padding:22px;
  box-shadow:0 4px 15px rgba(0,0,0,0.08);
}

.page-nutrisi-diet-nutrisi-diet-lanjutan .top-bar {
  display:flex;
  align-items:center;
  margin-bottom:25px;
}

.page-nutrisi-diet-nutrisi-diet-lanjutan .back-btn {
  font-size:24px;
  cursor:pointer;
  margin-right:15px;
}

.page-nutrisi-diet-nutrisi-diet-lanjutan .title {
  flex:1;
  text-align:center;
  font-size:24px;
  font-weight:bold;
  color:#222;
  margin-right:35px;
}

.page-nutrisi-diet-nutrisi-diet-lanjutan .header-image {
  width:100%;
  height:220px;
  object-fit:cover;
  border-radius:22px;
  margin-bottom:25px;
}

.page-nutrisi-diet-nutrisi-diet-lanjutan .section {
  margin-bottom:28px;
}

.page-nutrisi-diet-nutrisi-diet-lanjutan .section h2 {
  color:#b56ad8;
  margin-bottom:12px;
  font-size:22px;
}

.page-nutrisi-diet-nutrisi-diet-lanjutan .section p {
  color:#555;
  line-height:1.8;
  font-size:16px;
}

.page-nutrisi-diet-nutrisi-diet-lanjutan .tip-card {
  background:#faf5fd;
  padding:18px;
  border-radius:18px;
  margin-bottom:15px;
}

.page-nutrisi-diet-nutrisi-diet-lanjutan .tip-card h3 {
  margin-bottom:8px;
  color:#333;
}

.page-nutrisi-diet-nutrisi-diet-lanjutan .tip-card p {
  color:#666;
  line-height:1.6;
}

.page-nutrisi-diet-nutrisi-diet-lanjutan .food-list {
  margin-top:15px;
}

.page-nutrisi-diet-nutrisi-diet-lanjutan .food-item {
  display:flex;
  align-items:center;
  gap:12px;
  margin-bottom:14px;
  background:#fff7fb;
  padding:14px;
  border-radius:16px;
}

.page-nutrisi-diet-nutrisi-diet-lanjutan .food-icon {
  width:45px;
  height:45px;
  border-radius:14px;
  display:flex;
  justify-content:center;
  align-items:center;
  font-size:22px;
  background:#fdebf5;
}

.page-nutrisi-diet-nutrisi-diet-lanjutan .food-text {
  color:#444;
  font-size:15px;
  line-height:1.5;
}

.page-nutrisi-diet-nutrisi-diet-lanjutan .button {
  margin-top:25px;
  width:100%;
  padding:16px;
  border:none;
  border-radius:18px;
  background:#b56ad8;
  color:white;
  font-size:17px;
  font-weight:bold;
  cursor:pointer;
  transition:0.3s;
}

.page-nutrisi-diet-nutrisi-diet-lanjutan .button:hover {
  opacity:0.9;
}

body.page-nutrisi-diet-nutrisi-diet-lanjutan {
  background:#fff5ed;
  font-family:Arial;
  padding:20px;
}

.page-nutrisi-diet-nutrisi-diet-lanjutan .container {
  max-width:420px;
  margin:auto;
  background:white;
  border-radius:24px;
  padding:24px;
}

.page-nutrisi-diet-nutrisi-diet-lanjutan h1 {
  color:#f28b32;
  margin-bottom:20px;
}

.page-nutrisi-diet-nutrisi-diet-lanjutan .box {
  background:#fff3ea;
  padding:18px;
  border-radius:18px;
  margin-bottom:15px;
}

.page-nutrisi-diet-nutrisi-diet-lanjutan .bottom-nav {
      margin-top:20px;
      display:flex;
      justify-content:space-between;
      border-top:1px solid #eee;
      padding-top:15px;
    }

.page-nutrisi-diet-nutrisi-diet-lanjutan .bottom-nav {
  margin-top:30px;
  display:flex;
  justify-content:space-between;
  align-items:center;
  border-top:1px solid #eee;
  padding-top:15px;
  background:white;
  position:sticky;
  bottom:0;
}

.page-nutrisi-diet-nutrisi-diet-lanjutan .nav-item {
  display:flex;
  flex-direction:column;
  align-items:center;
  text-decoration:none;
  font-size:12px;
  color:#999;
  transition:0.3s;
}

.page-nutrisi-diet-nutrisi-diet-lanjutan .nav-item:hover {
  transform:translateY(-3px);
  color:#b56ad8;
}

.page-nutrisi-diet-nutrisi-diet-lanjutan .nav-item.active {
  color:#b56ad8;
  font-weight:bold;
}

.page-nutrisi-diet-nutrisi-diet-lanjutan .nav-icon {
  font-size:22px;
  margin-bottom:5px;
}

/* ===== nutrisi-diet/nutrisi-diet1.html :: inline style 1 ===== */
.page-nutrisi-diet-nutrisi-diet1 * {
  margin:0;
  padding:0;
  box-sizing:border-box;
  font-family:Arial, Helvetica, sans-serif;
}

body.page-nutrisi-diet-nutrisi-diet1 {
  background:#f7f3fb;
  display:flex;
  justify-content:center;
  padding:20px;
  min-height:100vh;
}

.page-nutrisi-diet-nutrisi-diet1 .phone {
  width:100%;
  max-width:420px;
  background:white;
  border-radius:30px;
  padding:22px;
  box-shadow:0 4px 15px rgba(0,0,0,0.08);
}

.page-nutrisi-diet-nutrisi-diet1 .top-bar {
  display:flex;
  align-items:center;
  margin-bottom:25px;
}

.page-nutrisi-diet-nutrisi-diet1 .back-btn {
  font-size:24px;
  cursor:pointer;
  margin-right:15px;
}

.page-nutrisi-diet-nutrisi-diet1 .title {
  flex:1;
  text-align:center;
  font-size:28px;
  font-weight:bold;
  color:#222;
  margin-right:35px;
}

.page-nutrisi-diet-nutrisi-diet1 .banner {
  width:100%;
  height:220px;
  border-radius:22px;
  object-fit:cover;
  margin-bottom:25px;
}

.page-nutrisi-diet-nutrisi-diet1 .description {
  color:#555;
  line-height:1.8;
  font-size:17px;
  margin-bottom:30px;
}

.page-nutrisi-diet-nutrisi-diet1 .section-title {
  font-size:28px;
  font-weight:bold;
  color:#222;
  margin-bottom:25px;
}

.page-nutrisi-diet-nutrisi-diet1 .nutrition-item {
  display:flex;
  align-items:flex-start;
  gap:15px;
  padding:18px 0;
  border-bottom:1px solid #eee;
}

.page-nutrisi-diet-nutrisi-diet1 .icon {
  width:50px;
  height:50px;
  border-radius:16px;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:26px;
  flex-shrink:0;
}

.page-nutrisi-diet-nutrisi-diet1 .blue {
  background:#e9f5ff;
  color:#4f9ef8;
}

.page-nutrisi-diet-nutrisi-diet1 .pink {
  background:#fdebf5;
  color:#d45a9f;
}

.page-nutrisi-diet-nutrisi-diet1 .green {
  background:#eefbe8;
  color:#6ab04c;
}

.page-nutrisi-diet-nutrisi-diet1 .orange {
  background:#fff3e7;
  color:#f28b32;
}

.page-nutrisi-diet-nutrisi-diet1 .item-text h3 {
  font-size:19px;
  color:#222;
  margin-bottom:6px;
}

.page-nutrisi-diet-nutrisi-diet1 .item-text p {
  color:#777;
  line-height:1.6;
  font-size:15px;
}

.page-nutrisi-diet-nutrisi-diet1 .button {
  margin-top:35px;
  width:100%;
  padding:18px;
  border:none;
  border-radius:18px;
  background:#f7effb;
  color:#b56ad8;
  font-size:18px;
  font-weight:bold;
  cursor:pointer;
  transition:0.3s;
}

.page-nutrisi-diet-nutrisi-diet1 .button:hover {
  background:#b56ad8;
  color:white;
}

/* ===== outcome.html :: inline style 1 ===== */
.page-outcome * {
      margin:0;
      padding:0;
      box-sizing:border-box;
      font-family:Arial, sans-serif;
    }

body.page-outcome {
      background:#fff7f8;
      color:#444;
      padding:20px;
    }

.page-outcome .container {
      max-width:1200px;
      margin:auto;
    }

/* HEADER */

.page-outcome .header {
      text-align:center;
      margin-bottom:30px;
    }

.page-outcome .header h1 {
      color:#ff5c8a;
      font-size:34px;
      margin-bottom:10px;
    }

.page-outcome .header p {
      color:#777;
      font-size:16px;
    }

/* GRID */

.page-outcome .grid {
      display:grid;
      grid-template-columns:repeat(auto-fit,minmax(320px,1fr));
      gap:20px;
    }

/* CARD */

.page-outcome .card {
      background:white;
      border-radius:20px;
      padding:25px;
      box-shadow:0 4px 15px rgba(0,0,0,0.08);
      transition:0.3s;
      text-align:center;
    }

.page-outcome .card:hover {
      transform:translateY(-5px);
    }

.page-outcome .icon {
      font-size:50px;
      margin-bottom:15px;
    }

.page-outcome .card h2 {
      color:#ff5c8a;
      margin-bottom:15px;
      font-size:24px;
    }

.page-outcome .card p {
      line-height:1.7;
      color:#666;
    }

/* PROGRESS */

.page-outcome .progress-container {
      width:100%;
      background:#ffd9e2;
      border-radius:20px;
      overflow:hidden;
      height:22px;
      margin-top:20px;
    }

.page-outcome .progress {
      height:100%;
      background:#ff5c8a;
      text-align:center;
      line-height:22px;
      color:white;
      font-size:13px;
    }

/* SUMMARY */

.page-outcome .summary {
      margin-top:40px;
      background:white;
      padding:30px;
      border-radius:20px;
      box-shadow:0 4px 15px rgba(0,0,0,0.08);
    }

.page-outcome .summary h2 {
      color:#ff5c8a;
      margin-bottom:20px;
      text-align:center;
    }

.page-outcome .summary ul {
      margin-left:20px;
      line-height:2;
    }

/* BUTTON */

.page-outcome .btn {
      width:100%;
      padding:15px;
      background:#ff5c8a;
      border:none;
      border-radius:12px;
      color:white;
      font-size:16px;
      cursor:pointer;
      margin-top:25px;
      transition:0.3s;
    }

.page-outcome .btn:hover {
      background:#e14b76;
    }

/* RESULT */

.page-outcome .result {
      margin-top:20px;
      background:#fff0f5;
      padding:15px;
      border-radius:12px;
      text-align:center;
      color:#d6336c;
      font-weight:bold;
      display:none;
    }

/* RESPONSIVE */

@media(max-width:768px) {
.page-outcome .header h1 {
        font-size:28px;
      }
}

/* ===== pemantauan/pemantauan.html :: inline style 1 ===== */
.page-pemantauan-pemantauan * {
  margin:0;
  padding:0;
  box-sizing:border-box;
  font-family:Arial, Helvetica, sans-serif;
}

body.page-pemantauan-pemantauan {
  background:#f7f3fb;
  display:flex;
  justify-content:center;
  align-items:center;
  min-height:100vh;
  padding:20px;
}

.page-pemantauan-pemantauan .phone {
  width:100%;
  max-width:420px;
  background:white;
  border-radius:30px;
  padding:22px;
  box-shadow:0 4px 15px rgba(0,0,0,0.08);
}

.page-pemantauan-pemantauan .top-bar {
  display:flex;
  align-items:center;
  margin-bottom:25px;
}

.page-pemantauan-pemantauan .back-btn {
  font-size:24px;
  cursor:pointer;
  margin-right:15px;
}

.page-pemantauan-pemantauan .title {
  flex:1;
  text-align:center;
  font-size:26px;
  font-weight:bold;
  color:#222;
  margin-right:35px;
}

/* TAB */

.page-pemantauan-pemantauan .tabs {
  display:flex;
  justify-content:space-between;
  margin-bottom:20px;
  border-bottom:1px solid #eee;
}

.page-pemantauan-pemantauan .tab {
  flex:1;
  text-align:center;
  padding:12px 0;
  cursor:pointer;
  color:#777;
  font-weight:600;
  position:relative;
  transition:0.3s;
}

.page-pemantauan-pemantauan .tab.active {
  color:#b56ad8;
}

.page-pemantauan-pemantauan .tab.active::after {
  content:'';
  position:absolute;
  bottom:-1px;
  left:20%;
  width:60%;
  height:3px;
  background:#b56ad8;
  border-radius:10px;
}

/* DATE */

.page-pemantauan-pemantauan .date-box {
  background:#faf5fd;
  border-radius:18px;
  padding:16px;
  display:flex;
  justify-content:space-between;
  align-items:center;
  margin-bottom:20px;
}

.page-pemantauan-pemantauan .date-text {
  color:#555;
  font-size:15px;
}

.page-pemantauan-pemantauan .date-text span {
  color:#b56ad8;
  font-weight:bold;
}

.page-pemantauan-pemantauan .arrow {
  font-size:20px;
  color:#777;
}

/* DESCRIPTION */

.page-pemantauan-pemantauan .description {
  color:#555;
  line-height:1.7;
  margin-bottom:28px;
  font-size:15px;
}

/* CONTENT TAB */

.page-pemantauan-pemantauan .tab-content {
  display:none;
}

.page-pemantauan-pemantauan .tab-content.active {
  display:block;
}

/* SLIDER */

.page-pemantauan-pemantauan .slider-group {
  margin-bottom:28px;
}

.page-pemantauan-pemantauan .slider-header {
  display:flex;
  justify-content:space-between;
  align-items:center;
  margin-bottom:10px;
}

.page-pemantauan-pemantauan .slider-header h3 {
  font-size:17px;
  color:#222;
}

.page-pemantauan-pemantauan .slider-value {
  color:#8f58d6;
  font-size:26px;
  font-weight:bold;
}

.page-pemantauan-pemantauan input[type="range"] {
  width:100%;
  appearance:none;
  height:4px;
  background:#e5d3ef;
  border-radius:10px;
  outline:none;
}

.page-pemantauan-pemantauan input[type="range"]::-webkit-slider-thumb {
  appearance:none;
  width:18px;
  height:18px;
  border-radius:50%;
  background:#b56ad8;
  cursor:pointer;
}

/* BUTTON */

.page-pemantauan-pemantauan .save-btn {
  width:100%;
  padding:18px;
  border:none;
  border-radius:18px;
  background:#b56ad8;
  color:white;
  font-size:18px;
  font-weight:bold;
  cursor:pointer;
  transition:0.3s;
  margin-top:20px;
}

.page-pemantauan-pemantauan .save-btn:hover {
  opacity:0.9;
}

/* ===== pemantauan.php :: inline style 1 ===== */
.page-pemantauan * {
  margin:0;
  padding:0;
  box-sizing:border-box;
  font-family:Arial, Helvetica, sans-serif;
}

body.page-pemantauan {
  background:#f7f3fb;
  display:flex;
  justify-content:center;
  align-items:center;
  min-height:100vh;
  padding:20px;
}

.page-pemantauan .phone {
  width:100%;
  max-width:420px;
  background:white;
  border-radius:30px;
  padding:22px;
  box-shadow:0 4px 15px rgba(0,0,0,0.08);
}

.page-pemantauan .top-bar {
  display:flex;
  align-items:center;
  margin-bottom:25px;
}

.page-pemantauan .back-btn {
  font-size:24px;
  cursor:pointer;
  margin-right:15px;
}

.page-pemantauan .title {
  flex:1;
  text-align:center;
  font-size:26px;
  font-weight:bold;
  color:#222;
  margin-right:35px;
}

/* TAB */

.page-pemantauan .tabs {
  display:flex;
  justify-content:space-between;
  margin-bottom:20px;
  border-bottom:1px solid #eee;
}

.page-pemantauan .tab {
  flex:1;
  text-align:center;
  padding:12px 0;
  cursor:pointer;
  color:#777;
  font-weight:600;
  position:relative;
  transition:0.3s;
}

.page-pemantauan .tab.active {
  color:#b56ad8;
}

.page-pemantauan .tab.active::after {
  content:'';
  position:absolute;
  bottom:-1px;
  left:20%;
  width:60%;
  height:3px;
  background:#b56ad8;
  border-radius:10px;
}

/* DATE */

.page-pemantauan .date-box {
  background:#faf5fd;
  border-radius:18px;
  padding:16px;
  display:flex;
  justify-content:space-between;
  align-items:center;
  margin-bottom:20px;
}

.page-pemantauan .date-text {
  color:#555;
  font-size:15px;
}

.page-pemantauan .date-text span {
  color:#b56ad8;
  font-weight:bold;
}

.page-pemantauan .arrow {
  font-size:20px;
  color:#777;
}

/* DESCRIPTION */

.page-pemantauan .description {
  color:#555;
  line-height:1.7;
  margin-bottom:28px;
  font-size:15px;
}

/* CONTENT TAB */

.page-pemantauan .tab-content {
  display:none;
}

.page-pemantauan .tab-content.active {
  display:block;
}

/* SLIDER */

.page-pemantauan .slider-group {
  margin-bottom:28px;
}

.page-pemantauan .slider-header {
  display:flex;
  justify-content:space-between;
  align-items:center;
  margin-bottom:10px;
}

.page-pemantauan .slider-header h3 {
  font-size:17px;
  color:#222;
}

.page-pemantauan .slider-value {
  color:#8f58d6;
  font-size:26px;
  font-weight:bold;
}

.page-pemantauan input[type="range"] {
  width:100%;
  appearance:none;
  height:4px;
  background:#e5d3ef;
  border-radius:10px;
  outline:none;
}

.page-pemantauan input[type="range"]::-webkit-slider-thumb {
  appearance:none;
  width:18px;
  height:18px;
  border-radius:50%;
  background:#b56ad8;
  cursor:pointer;
}

/* BUTTON */

.page-pemantauan .save-btn {
  width:100%;
  padding:18px;
  border:none;
  border-radius:18px;
  background:#b56ad8;
  color:white;
  font-size:18px;
  font-weight:bold;
  cursor:pointer;
  transition:0.3s;
  margin-top:20px;
}

.page-pemantauan .save-btn:hover {
  opacity:0.9;
}

/* ===== pengingat.php :: inline style 1 ===== */
.page-pengingat * {
      margin:0;
      padding:0;
      box-sizing:border-box;
      font-family:Arial, sans-serif;
    }

body.page-pengingat {
      background:#fff7f8;
      color:#444;
      padding:20px;
    }

.page-pengingat .container {
      max-width:1200px;
      margin:auto;
    }

/* HEADER */

.page-pengingat .header {
      text-align:center;
      margin-bottom:30px;
    }

.page-pengingat .header h1 {
      color:#ff5c8a;
      font-size:34px;
      margin-bottom:10px;
    }

.page-pengingat .header p {
      color:#777;
      font-size:16px;
    }

/* GRID */

.page-pengingat .grid {
      display:grid;
      grid-template-columns:repeat(auto-fit,minmax(320px,1fr));
      gap:20px;
    }

/* CARD */

.page-pengingat .card {
      background:white;
      border-radius:20px;
      padding:25px;
      box-shadow:0 4px 15px rgba(0,0,0,0.08);
      transition:0.3s;
    }

.page-pengingat .card:hover {
      transform:translateY(-5px);
    }

.page-pengingat .card h2 {
      color:#ff5c8a;
      margin-bottom:20px;
      font-size:24px;
    }

/* INPUT */

.page-pengingat .input-group {
      margin-bottom:15px;
    }

.page-pengingat .input-group label {
      display:block;
      margin-bottom:8px;
      font-weight:bold;
    }

.page-pengingat .input-group input,
.page-pengingat .input-group select {
      width:100%;
      padding:12px;
      border:1px solid #ddd;
      border-radius:10px;
      font-size:15px;
    }

/* BUTTON */

.page-pengingat .btn {
      width:100%;
      padding:14px;
      border:none;
      background:#ff5c8a;
      color:white;
      border-radius:10px;
      font-size:16px;
      cursor:pointer;
      transition:0.3s;
      margin-top:15px;
    }

.page-pengingat .btn:hover {
      background:#e14b76;
    }

/* REMINDER */

.page-pengingat .reminder-box {
      background:#fff0f5;
      padding:15px;
      border-radius:12px;
      margin-bottom:12px;
      border-left:5px solid #ff5c8a;
    }

.page-pengingat .reminder-box h3 {
      color:#d6336c;
      margin-bottom:8px;
    }

/* RESULT */

.page-pengingat .result {
      margin-top:20px;
      background:#ffe6ee;
      padding:15px;
      border-radius:12px;
      text-align:center;
      color:#d6336c;
      font-weight:bold;
      font-size:18px;
    }

/* NOTIFICATION */

.page-pengingat .notification {
      margin-top:15px;
      padding:15px;
      background:#fff4d6;
      border-radius:12px;
      border-left:5px solid #ffc107;
    }

.page-pengingat .notification h3 {
      color:#cc8800;
      margin-bottom:10px;
    }

/* RESPONSIVE */

@media(max-width:768px) {
.page-pengingat .header h1 {
        font-size:28px;
      }

.page-pengingat .bottom-nav {
      margin-top:20px;
      display:flex;
      justify-content:space-between;
      border-top:1px solid #eee;
      padding-top:15px;
    }

.page-pengingat .bottom-nav {
  margin-top:30px;
  display:flex;
  justify-content:space-between;
  align-items:center;
  border-top:1px solid #eee;
  padding-top:15px;
  background:white;
  position:sticky;
  bottom:0;
}

.page-pengingat .nav-item {
  display:flex;
  flex-direction:column;
  align-items:center;
  text-decoration:none;
  font-size:12px;
  color:#999;
  transition:0.3s;
}

.page-pengingat .nav-item:hover {
  transform:translateY(-3px);
  color:#b56ad8;
}

.page-pengingat .nav-item.active {
  color:#b56ad8;
  font-weight:bold;
}

.page-pengingat .nav-icon {
  font-size:22px;
  margin-bottom:5px;
}
}

/* ===== profile (2).html :: inline style 1 ===== */
.page-profile-2 * {
      margin:0;
      padding:0;
      box-sizing:border-box;
      font-family:Arial, sans-serif;
    }

body.page-profile-2 {
      background:#fff7f8;
      color:#444;
    }

/* HEADER */

.page-profile-2 header {
      background:linear-gradient(135deg,#ffb6c8,#ffd9e2);
      padding:20px;
      text-align:center;
      color:#fff;
      box-shadow:0 2px 10px rgba(0,0,0,0.1);
    }

.page-profile-2 header h1 {
      font-size:32px;
    }

.page-profile-2 header p {
      margin-top:8px;
      font-size:16px;
    }

/* CONTAINER */

.page-profile-2 .container {
      width:90%;
      max-width:1200px;
      margin:30px auto;
    }

/* CARD */

.page-profile-2 .card {
      background:#fff;
      border-radius:18px;
      padding:25px;
      margin-bottom:25px;
      box-shadow:0 4px 15px rgba(0,0,0,0.08);
    }

.page-profile-2 .card h2 {
      color:#ff5c8a;
      margin-bottom:20px;
    }

/* PROFILE GRID */

.page-profile-2 .profile-grid {
      display:grid;
      grid-template-columns:repeat(auto-fit,minmax(250px,1fr));
      gap:20px;
    }

.page-profile-2 .input-group {
      display:flex;
      flex-direction:column;
    }

.page-profile-2 .input-group label {
      margin-bottom:8px;
      font-weight:bold;
      color:#666;
    }

.page-profile-2 .input-group input,
.page-profile-2 .input-group select,
.page-profile-2 .input-group textarea {
      padding:12px;
      border:1px solid #ddd;
      border-radius:10px;
      font-size:15px;
    }

.page-profile-2 textarea {
      resize:none;
    }

/* BUTTON */

.page-profile-2 .btn {
      margin-top:20px;
      padding:14px 25px;
      background:#ff5c8a;
      color:#fff;
      border:none;
      border-radius:10px;
      font-size:16px;
      cursor:pointer;
      transition:0.3s;
    }

.page-profile-2 .btn:hover {
      background:#e14b76;
    }

/* RESULT */

.page-profile-2 .result {
      margin-top:20px;
      padding:15px;
      background:#ffe6ee;
      border-radius:12px;
      font-size:18px;
      color:#d6336c;
      font-weight:bold;
      text-align:center;
    }

/* DASHBOARD */

.page-profile-2 .dashboard {
      display:grid;
      grid-template-columns:repeat(auto-fit,minmax(250px,1fr));
      gap:20px;
    }

.page-profile-2 .dashboard-card {
      background:#fff0f5;
      padding:20px;
      border-radius:15px;
      text-align:center;
    }

.page-profile-2 .dashboard-card h3 {
      margin-bottom:15px;
      color:#ff5c8a;
    }

.page-profile-2 .score {
      font-size:40px;
      font-weight:bold;
      color:#ff5c8a;
    }

/* PROGRESS BAR */

.page-profile-2 .progress-bar {
      width:100%;
      background:#f3d3dc;
      border-radius:20px;
      overflow:hidden;
      height:20px;
      margin-top:10px;
    }

.page-profile-2 .progress {
      height:100%;
      background:#ff5c8a;
    }

/* GRAPH */

.page-profile-2 .graph {
      display:flex;
      justify-content:space-around;
      align-items:flex-end;
      height:150px;
      margin-top:20px;
    }

.page-profile-2 .bar {
      width:40px;
      background:#ff9eb5;
      border-radius:10px 10px 0 0;
    }

.page-profile-2 .day {
      text-align:center;
      margin-top:5px;
      font-size:14px;
    }

/* RESPONSIVE */

@media(max-width:768px) {
.page-profile-2 header h1 {
        font-size:26px;
      }
}

/* ===== profile.html :: inline style 1 ===== */
.page-profile * {
      margin:0;
      padding:0;
      box-sizing:border-box;
      font-family:Arial, sans-serif;
    }

body.page-profile {
      background:#fff7f8;
      color:#444;
    }

/* HEADER */

.page-profile header {
      background:linear-gradient(135deg,#ffb6c8,#ffd9e2);
      padding:20px;
      text-align:center;
      color:#fff;
      box-shadow:0 2px 10px rgba(0,0,0,0.1);
    }

.page-profile header h1 {
      font-size:32px;
    }

.page-profile header p {
      margin-top:8px;
      font-size:16px;
    }

/* CONTAINER */

.page-profile .container {
      width:90%;
      max-width:1200px;
      margin:30px auto;
    }

/* CARD */

.page-profile .card {
      background:#fff;
      border-radius:18px;
      padding:25px;
      margin-bottom:25px;
      box-shadow:0 4px 15px rgba(0,0,0,0.08);
    }

.page-profile .card h2 {
      color:#ff5c8a;
      margin-bottom:20px;
    }

/* PROFILE GRID */

.page-profile .profile-grid {
      display:grid;
      grid-template-columns:repeat(auto-fit,minmax(250px,1fr));
      gap:20px;
    }

.page-profile .input-group {
      display:flex;
      flex-direction:column;
    }

.page-profile .input-group label {
      margin-bottom:8px;
      font-weight:bold;
      color:#666;
    }

.page-profile .input-group input,
.page-profile .input-group select,
.page-profile .input-group textarea {
      padding:12px;
      border:1px solid #ddd;
      border-radius:10px;
      font-size:15px;
    }

.page-profile textarea {
      resize:none;
    }

/* BUTTON */

.page-profile .btn {
      margin-top:20px;
      padding:14px 25px;
      background:#ff5c8a;
      color:#fff;
      border:none;
      border-radius:10px;
      font-size:16px;
      cursor:pointer;
      transition:0.3s;
    }

.page-profile .btn:hover {
      background:#e14b76;
    }

/* RESULT */

.page-profile .result {
      margin-top:20px;
      padding:15px;
      background:#ffe6ee;
      border-radius:12px;
      font-size:18px;
      color:#d6336c;
      font-weight:bold;
      text-align:center;
    }

/* DASHBOARD */

.page-profile .dashboard {
      display:grid;
      grid-template-columns:repeat(auto-fit,minmax(250px,1fr));
      gap:20px;
    }

.page-profile .dashboard-card {
      background:#fff0f5;
      padding:20px;
      border-radius:15px;
      text-align:center;
    }

.page-profile .dashboard-card h3 {
      margin-bottom:15px;
      color:#ff5c8a;
    }

.page-profile .score {
      font-size:40px;
      font-weight:bold;
      color:#ff5c8a;
    }

/* PROGRESS BAR */

.page-profile .progress-bar {
      width:100%;
      background:#f3d3dc;
      border-radius:20px;
      overflow:hidden;
      height:20px;
      margin-top:10px;
    }

.page-profile .progress {
      height:100%;
      background:#ff5c8a;
    }

/* GRAPH */

.page-profile .graph {
      display:flex;
      justify-content:space-around;
      align-items:flex-end;
      height:150px;
      margin-top:20px;
    }

.page-profile .bar {
      width:40px;
      background:#ff9eb5;
      border-radius:10px 10px 0 0;
    }

.page-profile .day {
      text-align:center;
      margin-top:5px;
      font-size:14px;
    }

/* RESPONSIVE */

@media(max-width:768px) {
.page-profile header h1 {
        font-size:26px;
      }
}

/* ===== profile1.html :: inline style 1 ===== */
.page-profile1 * {
      margin:0;
      padding:0;
      box-sizing:border-box;
      font-family:Arial, sans-serif;
    }

body.page-profile1 {
      background:#fff5f7;
      padding:30px;
      color:#444;
    }

.page-profile1 .container {
      max-width:900px;
      margin:auto;
      background:#fff;
      padding:30px;
      border-radius:20px;
      box-shadow:0 4px 15px rgba(0,0,0,0.1);
    }

.page-profile1 h1 {
      text-align:center;
      color:#ff5c8a;
      margin-bottom:10px;
    }

.page-profile1 .subtitle {
      text-align:center;
      margin-bottom:30px;
      color:#777;
    }

.page-profile1 .grid {
      display:grid;
      grid-template-columns:repeat(auto-fit,minmax(250px,1fr));
      gap:20px;
    }

.page-profile1 .input-group {
      display:flex;
      flex-direction:column;
    }

.page-profile1 .input-group label {
      margin-bottom:8px;
      font-weight:bold;
      color:#666;
    }

.page-profile1 .input-group input,
.page-profile1 .input-group select,
.page-profile1 .input-group textarea {
      padding:12px;
      border:1px solid #ddd;
      border-radius:10px;
      font-size:15px;
    }

.page-profile1 textarea {
      resize:none;
    }

.page-profile1 .btn {
      width:100%;
      margin-top:30px;
      padding:15px;
      background:#ff5c8a;
      color:white;
      border:none;
      border-radius:10px;
      font-size:16px;
      cursor:pointer;
      transition:0.3s;
    }

.page-profile1 .btn:hover {
      background:#e14b76;
    }

.page-profile1 .hasil {
      margin-top:25px;
      padding:20px;
      background:#ffe3ec;
      border-radius:12px;
      text-align:center;
      font-size:20px;
      font-weight:bold;
      color:#d6336c;
    }

.page-profile1 .info {
      margin-top:25px;
      padding:20px;
      background:#fff0f5;
      border-radius:12px;
      line-height:1.8;
    }

.page-profile1 .info h3 {
      color:#ff5c8a;
      margin-bottom:10px;
    }

/* ===== user.php :: inline style 1 ===== */
.page-user * {
      margin:0;
      padding:0;
      box-sizing:border-box;
      font-family: Arial, Helvetica, sans-serif;
    }

body.page-user {
      background:#f7f3fb;
      display:flex;
      justify-content:center;
      padding:20px;
      min-height:100vh;
    }

.page-user .phone {
      width:100%;
      max-width:420px;
      background:white;
      border-radius:30px;
      padding:20px;
      box-shadow:0 4px 15px rgba(0,0,0,0.08);
      position:relative;
      overflow:hidden;
    }

.page-user .top-header {
      display:flex;
      justify-content:space-between;
      align-items:flex-start;
      margin-bottom:25px;
    }

.page-user .hello h2 {
      font-size:28px;
      color:#222;
    }

.page-user .hello p {
      color:#777;
      margin-top:5px;
      font-size:15px;
    }

.page-user .notif {
      font-size:22px;
    }

.page-user .card {
      background:#fff;
      border-radius:24px;
      padding:20px;
      margin-bottom:20px;
      box-shadow:0 2px 10px rgba(0,0,0,0.05);
      border:1px solid #f1f1f1;
    }

.page-user .card-title {
      font-size:20px;
      font-weight:bold;
      margin-bottom:18px;
      color:#333;
    }

.page-user .summary-grid {
      display:grid;
      grid-template-columns:1fr 1fr;
      gap:15px;
    }

.page-user .summary-left {
      border-right:1px solid #eee;
      padding-right:15px;
    }

.page-user .score-status {
      color:#f4a300;
      font-weight:bold;
      font-size:22px;
      margin-top:10px;
    }

.page-user .score {
      margin-top:12px;
      font-size:52px;
      font-weight:bold;
      color:#f4a300;
    }

.page-user .score span {
      color:#444;
      font-size:26px;
    }

.page-user .summary-item {
      display:flex;
      align-items:center;
      margin-bottom:25px;
      gap:12px;
    }

.page-user .summary-item .icon {
      font-size:34px;
    }

.page-user .summary-item h4 {
      font-size:15px;
      color:#666;
      margin-bottom:5px;
    }

.page-user .summary-item p {
      font-size:22px;
      font-weight:bold;
      color:#222;
    }

.page-user .reminder-item {
      display:flex;
      justify-content:space-between;
      align-items:center;
      padding:15px 0;
      border-bottom:1px solid #eee;
    }

.page-user .reminder-left {
      display:flex;
      align-items:center;
      gap:15px;
    }

.page-user .reminder-icon {
      font-size:28px;
    }

.page-user .reminder-text {
      font-size:17px;
      color:#333;
    }

.page-user .reminder-time {
      color:#555;
      font-weight:bold;
      font-size:16px;
    }

.page-user .bottom-nav {
      margin-top:25px;
      display:flex;
      justify-content:space-between;
      border-top:1px solid #eee;
      padding-top:18px;
    }

.page-user .nav-item {
      display:flex;
      flex-direction:column;
      align-items:center;
      font-size:13px;
      color:#999;
    }

.page-user .nav-item.active {
      color:#b56ad8;
      font-weight:bold;
    }

.page-user .nav-icon {
      font-size:24px;
      margin-bottom:6px;
    }

.page-user .bottom-nav {
  margin-top:30px;
  display:flex;
  justify-content:space-between;
  align-items:center;
  border-top:1px solid #eee;
  padding-top:15px;
  background:white;
  position:sticky;
  bottom:0;
}

.page-user .nav-item {
  display:flex;
  flex-direction:column;
  align-items:center;
  text-decoration:none;
  font-size:12px;
  color:#999;
  transition:0.3s;
}

.page-user .nav-item:hover {
  transform:translateY(-3px);
  color:#b56ad8;
}

.page-user .nav-item.active {
  color:#b56ad8;
  font-weight:bold;
}

.page-user .nav-icon {
  font-size:22px;
  margin-bottom:5px;
}

/* ===== legacy root style.css, scoped for landing/static pages ===== */
/* RESET */

.page-index * {
  margin:0;
  padding:0;
  box-sizing:border-box;
  font-family: Arial, sans-serif;
}

/* BODY */

body.page-index {
  background:#fff8f6;
  color:#333;
  line-height:1.6;
}

/* HEADER */

.page-index header {
  background:linear-gradient(135deg,#ff9eb5,#ffcad4);
  color:white;
  padding:80px 20px;
  text-align:center;
}

.page-index header h1 {
  font-size:48px;
  margin-bottom:15px;
}

.page-index header p {
  font-size:20px;
  max-width:700px;
  margin:auto;
}

/* NAVBAR */

.page-index nav {
  background:white;
  padding:15px;
  display:flex;
  justify-content:center;
  gap:30px;
  box-shadow:0 2px 10px rgba(0,0,0,0.05);
  position:sticky;
  top:0;
  z-index:100;
}

.page-index nav a {
  text-decoration:none;
  color:#ff5c8a;
  font-weight:bold;
}

/* SECTION */

.page-index section {
  padding:70px 20px;
  max-width:1200px;
  margin:auto;
}

/* ABOUT */

.page-index .about {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:40px;
  align-items:center;
}

.page-index .about img {
  width:100%;
  border-radius:20px;
}

/* TITLE */

.page-index .section-title {
  text-align:center;
  margin-bottom:50px;
}

.page-index .section-title h2 {
  font-size:36px;
  color:#ff5c8a;
  margin-bottom:10px;
}

/* CARDS */

.page-index .cards {
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(250px,1fr));
  gap:25px;
}

.page-index .card {
  background:white;
  padding:30px;
  border-radius:18px;
  box-shadow:0 5px 20px rgba(0,0,0,0.08);
  transition:0.3s;
}

.page-index .card:hover {
  transform:translateY(-5px);
}

.page-index .card h3 {
  color:#ff5c8a;
  margin-bottom:15px;
}

/* TIPS */

.page-index .tips {
  background:#ffeef2;
  border-radius:20px;
  padding:50px;
}

.page-index ul {
  margin-top:20px;
  padding-left:20px;
}

/* CONTACT */

.page-index .contact {
  text-align:center;
}

/* BUTTON */

.page-index .btn {
  display:inline-block;
  margin-top:20px;
  background:#ff5c8a;
  color:white;
  padding:14px 28px;
  border-radius:50px;
  text-decoration:none;
  font-weight:bold;
  transition:0.3s;
}

.page-index .btn:hover {
  background:#e14b76;
}

/* FOOTER */

.page-index footer {
  background:#ffcad4;
  text-align:center;
  padding:20px;
  color:#555;
}

/* RESPONSIVE */

@media(max-width:768px) {
.page-index .about {
    grid-template-columns:1fr;
  }

.page-index header h1 {
    font-size:36px;
  }
}

/* ===== legacy nutrisi-diet/nutrisi.css ===== */
body.page-nutrisi-diet-nutrisi-diet {
  font-family: Arial, sans-serif;
  background: #f5f5f5;
  display: flex;
  justify-content: center;
}

.page-nutrisi-diet-nutrisi-diet .container {
  width: 360px;
  background: #fff;
  border-radius: 20px;
  padding: 15px;
  box-shadow: 0 4px 10px rgba(0,0,0,0.1);
}

/* Header */

.page-nutrisi-diet-nutrisi-diet .header {
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
}

.page-nutrisi-diet-nutrisi-diet .back {
  position: absolute;
  left: 0;
  font-size: 20px;
  cursor: pointer;
}

.page-nutrisi-diet-nutrisi-diet .header h2 {
  font-size: 18px;
}

/* Banner */

.page-nutrisi-diet-nutrisi-diet .banner {
  width: 100%;
  border-radius: 15px;
  margin: 10px 0;
}

/* Deskripsi */

.page-nutrisi-diet-nutrisi-diet .desc {
  font-size: 14px;
  color: #555;
}

/* Card */

.page-nutrisi-diet-nutrisi-diet .card {
  background: #fafafa;
  padding: 10px;
  border-radius: 15px;
  margin-top: 15px;
}

.page-nutrisi-diet-nutrisi-diet .card h3 {
  font-size: 15px;
  margin-bottom: 10px;
}

/* Item */

.page-nutrisi-diet-nutrisi-diet .item {
  display: flex;
  align-items: center;
  margin-bottom: 12px;
}

.page-nutrisi-diet-nutrisi-diet .item span {
  font-size: 22px;
  margin-right: 10px;
}

.page-nutrisi-diet-nutrisi-diet .item p {
  font-size: 12px;
  color: #666;
  margin: 2px 0;
}

/* Button */

.page-nutrisi-diet-nutrisi-diet button {
  width: 100%;
  padding: 12px;
  margin-top: 20px;
  border: none;
  border-radius: 25px;
  background: linear-gradient(to right, #a66cff, #8e44ad);
  color: white;
  font-size: 14px;
  cursor: pointer;
}


/* ===== generated utility classes from old inline style attributes ===== */
.u-style-1{display:none;}
.u-style-2{width:80%;}
.u-style-3{height:60px;}
.u-style-4{height:100px;}
.u-style-5{height:140px;}
.u-style-6{height:80px;}
.u-style-7{height:120px;}
.u-style-8{height:90px;}
.u-style-9{height:110px;}
.u-style-10{width:70%;}
.u-style-11{margin-top:15px;}
.u-style-12{background: #014CA0;color:#fff;padding:10px;}
.u-style-13{font-size:14px;font-weight:600;line-height: 20px;}
.u-style-14{background-image:url('https://cdn01.rumahweb.com/under-construction/img/dot.png');background-repeat:no-repeat;margin: -60px 0;padding: 60px 0;background-position: 30px 50px;}
.u-style-15{color: #FFC546;}
.u-style-16{padding: 80px 0;}
.u-style-17{font-size:36px; font-weight:600;color:#0D145A;line-height:50px;margin-bottom: 40px;}
.u-style-18{font-size: 48px;line-height:65px;color: #0D145A;margin-top: 40px;font-weight: 600;}
.u-style-19{font-size: 24px;line-height: 36px;color:#8689AC;font-weight: 200;}
.u-style-20{margin-top:40px;}
.u-style-21{font-size:24px;line-height: 32px;color: #0D145A;margin:80px 0 30px 0;}
.u-style-22{font-weight: 800;color:#0D145A;text-decoration: none;}
.u-style-23{line-height:1.8; text-align:center;}
.u-style-24{width:85%;}
.u-style-25{width:75%;}
.u-style-26{height:70px;}
.u-style-27{height:130px;}
.u-style-28{height:170px;}
.u-style-29{margin-top:25px;}
.u-style-30{height:150px;}
.u-style-31{border-bottom:none;}
.u-style-32{width:90%;}
.u-style-33{width:88%;}
.u-style-34{width:78%;}
.u-style-35{width:92%;}
.u-style-36{font-size:28px;}


/* ===== Menocare topbar/back button improvements ===== */
.app-topbar-space{margin-bottom:18px;}
.app-title{flex:1;text-align:center;font-size:22px;font-weight:800;color:var(--mc-text);padding-right:38px;}
.app-subtitle{color:var(--mc-muted);font-size:14px;line-height:1.5;}