*{
margin:0;
padding:0;
box-sizing:border-box;
font-family:Inter,sans-serif;
}

body{
background:#f5f7fb;
color:#111827;
}

.topbar{
background:#0f172a;
padding:18px 40px;
display:flex;
justify-content:space-between;
align-items:center;
}

.logo{
color:white;
font-size:28px;
font-weight:700;
}

.healthBtn{
background:#2563eb;
color:white;
padding:12px 22px;
border-radius:12px;
text-decoration:none;
font-weight:600;
}

.hero{
display:grid;
grid-template-columns:1fr 1fr;
gap:25px;
padding:40px;
}

.profileCard,
.nutritionCard{
background:white;
padding:30px;
border-radius:20px;
box-shadow:0 10px 30px rgba(0,0,0,.08);
}

.progressBar{
height:18px;
background:#e5e7eb;
border-radius:50px;
margin:20px 0;
overflow:hidden;
}

.progress{
width:65%;
height:100%;
background:linear-gradient(90deg,#10b981,#3b82f6);
}

.stats{
display:grid;
grid-template-columns:repeat(2,1fr);
gap:20px;
margin-top:20px;
}

.stats div{
background:#f8fafc;
padding:20px;
border-radius:12px;
text-align:center;
}

.recommendations{
padding:40px;
}

.recommendations h2{
margin-bottom:25px;
}

.mealGrid{
display:grid;
grid-template-columns:repeat(3,1fr);
gap:25px;
}

.mealCard{
background:white;
border-radius:20px;
overflow:hidden;
box-shadow:0 10px 25px rgba(0,0,0,.08);
}

.mealCard img{
width:100%;
height:220px;
object-fit:cover;
}

.mealCard h3{
padding:15px;
}

.mealCard p{
padding:0 15px 15px;
color:#666;
}

.mealCard button{
width:calc(100% - 30px);
margin:0 15px 15px;
padding:14px;
border:none;
background:#2563eb;
color:white;
border-radius:10px;
font-weight:600;
cursor:pointer;
}

@media(max-width:900px){

.hero{
grid-template-columns:1fr;
}

.mealGrid{
grid-template-columns:1fr;
}

}.dashboardHero{
  padding:50px 40px 20px;
}

.dashboardHero h1{
  font-size:46px;
  color:#0f172a;
  margin:12px 0;
}

.dashboardHero p{
  font-size:18px;
  color:#475569;
}

.badge{
  display:inline-block;
  background:#dcfce7;
  color:#166534;
  padding:8px 14px;
  border-radius:999px;
  font-weight:700;
  font-size:14px;
}

.dashboardGrid{
  padding:30px 40px;
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:25px;
}

.disclaimerBox{
  margin:40px;
  padding:20px;
  background:#fff7ed;
  border-left:6px solid #f97316;
  border-radius:14px;
  color:#7c2d12;
}

.disclaimerBox h3{
  margin-bottom:8px;
}

@media(max-width:900px){
  .dashboardGrid{
    grid-template-columns:1fr;
    padding:20px;
  }

  .dashboardHero{
    padding:35px 20px 10px;
  }

  .dashboardHero h1{
    font-size:34px;
  }

  .disclaimerBox{
    margin:20px;
  }
}.healthProfileSection{
  padding:40px;
}

.healthFormCard{
  background:white;
  padding:30px;
  border-radius:20px;
  box-shadow:0 10px 30px rgba(0,0,0,.08);
}

.healthFormCard h2{
  margin-bottom:25px;
}

.formGrid{
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:20px;
}

.field{
  display:flex;
  flex-direction:column;
}

.field label{
  margin-bottom:8px;
  font-weight:600;
  color:#334155;
}

.field input,
.field select{
  padding:14px;
  border:1px solid #dbe2ea;
  border-radius:12px;
  font-size:15px;
}

.saveProfileBtn{
  margin-top:25px;
  padding:15px 30px;
  border:none;
  border-radius:12px;
  background:#2563eb;
  color:white;
  font-weight:700;
  cursor:pointer;
}

@media(max-width:900px){

  .formGrid{
    grid-template-columns:1fr;
  }

  .healthProfileSection{
    padding:20px;
  }

}/* SECTION TITLE */

.sectionTitle{
  text-align:center;
  padding:50px 20px 25px;
}

.sectionTitle h3{
  font-size:2rem;
  font-weight:700;
  color:#0f172a;
  margin:0;
}

/* CATEGORY GRID */

.categoryGrid{
  width:100%;
  max-width:1400px;
  margin:auto;
  padding:0 20px 60px;
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(220px,1fr));
  gap:24px;
}

/* CATEGORY CARD */

.categoryCard{
  background:#fff;
  border-radius:20px;
  overflow:hidden;
  box-shadow:0 8px 24px rgba(0,0,0,0.08);
  transition:.3s ease;
  cursor:pointer;
  text-align:center;
}

.categoryCard:hover{
  transform:translateY(-8px);
  box-shadow:0 16px 40px rgba(0,0,0,0.12);
}

.categoryCard img{
  width:100%;
  height:220px;
  object-fit:cover;
  display:block;
}

.categoryCard h4{
  padding:18px;
  margin:0;
  font-size:1.1rem;
  font-weight:600;
  color:#0f172a;
}

/* TABLET */

@media(max-width:900px){

  .categoryGrid{
    grid-template-columns:repeat(2,1fr);
    gap:18px;
  }

  .categoryCard img{
    height:180px;
  }

}

/* MOBILE */

@media(max-width:600px){

  .sectionTitle h3{
    font-size:1.6rem;
  }

  .categoryGrid{
    grid-template-columns:repeat(2,1fr);
    gap:14px;
    padding:0 14px 40px;
  }

  .categoryCard{
    border-radius:16px;
  }

  .categoryCard img{
    height:130px;
  }

  .categoryCard h4{
    font-size:.95rem;
    padding:12px;
  }

}.topbar{
  background:#0f172a;
  padding:16px 20px;
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:15px;
  flex-wrap:wrap;
}

.logo{
  color:#fff;
  font-size:28px;
  font-weight:700;
}

.healthBtn{
  background:#2563eb;
  color:#fff;
  padding:12px 18px;
  border-radius:12px;
  text-decoration:none;
  font-weight:600;
  white-space:nowrap;
  transition:.3s;
}

.healthBtn:hover{
  background:#1d4ed8;
}

/* Mobile */

@media(max-width:768px){

  .topbar{
    flex-direction:column;
    align-items:stretch;
  }

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

  .healthBtn{
    width:100%;
    text-align:center;
    margin-bottom:8px;
  }

}/* =========================
   HEALTH HEADER BUTTON
========================= */

.healthBtn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-width:220px;
  height:48px;
  padding:0 22px;
  background:#2563eb;
  color:#fff;
  border:none;
  border-radius:12px;
  text-decoration:none;
  font-size:15px;
  font-weight:700;
  cursor:pointer;
  transition:.25s ease;
  white-space:nowrap;
}

.healthBtn:hover{
  background:#1d4ed8;
  transform:translateY(-2px);
}

.healthBtn:active{
  transform:scale(.98);
}

@media (max-width:768px){

  .topbar{
    display:flex;
    flex-direction:column;
    gap:12px;
    padding:18px;
  }

  .logo{
    text-align:center;
  }

  .healthBtn{
    width:100%;
    min-width:0;
  }

}.authModal{
  position:fixed;
  inset:0;
  background:rgba(15,23,42,.72);
  z-index:999999;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:20px;
}

.authBox{
  width:min(92vw,420px);
  background:white;
  border-radius:22px;
  padding:28px;
  position:relative;
  box-shadow:0 25px 80px rgba(0,0,0,.35);
}

.authClose{
  position:absolute;
  top:12px;
  right:14px;
  border:none;
  background:#f1f5f9;
  width:36px;
  height:36px;
  border-radius:50%;
  font-size:24px;
  cursor:pointer;
}

.authBox h2{
  margin-bottom:8px;
  color:#0f172a;
}

.authSub{
  color:#64748b;
  margin-bottom:20px;
  line-height:1.4;
}

.authBox input{
  width:100%;
  padding:14px;
  border:1px solid #dbe2ea;
  border-radius:12px;
  margin-bottom:12px;
  font-size:15px;
}

.googleBtn,
.authPrimary,
.authSecondary,
.logoutBtn{
  width:100%;
  padding:14px;
  border:none;
  border-radius:12px;
  font-weight:800;
  cursor:pointer;
  margin-top:10px;
}

.googleBtn{
  background:#111827;
  color:white;
}

.authPrimary{
  background:#2563eb;
  color:white;
}

.authSecondary{
  background:#e0f2fe;
  color:#075985;
}

.logoutBtn{
  background:#fee2e2;
  color:#991b1b;
}

.authDivider{
  text-align:center;
  margin:18px 0;
  color:#94a3b8;
  font-weight:700;
}/* SUCCESS TOAST */

#successToast{
    position:fixed;
    left:50%;
    bottom:30px;
    transform:translateX(-50%) translateY(40px);
    background:#16a34a;
    color:#fff;
    padding:16px 28px;
    border-radius:14px;
    font-weight:700;
    box-shadow:0 10px 30px rgba(0,0,0,.25);
    opacity:0;
    transition:.3s ease;
    z-index:999999;
}

#successToast.show{
    opacity:1;
    transform:translateX(-50%) translateY(0);
}/* KH2 / Kenny's Matching Colors */

body{
  background:#f6f8f3;
  color:#0b2f1b;
  font-family:'Poppins',Arial,sans-serif;
}

.topbar{
  background:linear-gradient(90deg,#06351d,#0b4c28);
  color:#fff;
}

.logo{
  color:#fff;
}

.healthBtn,
.saveProfileBtn{
  background:#58a820;
  color:#fff;
  border:none;
}

.healthBtn:hover,
.saveProfileBtn:hover{
  background:#63b829;
}

.dashboardHero{
  background:
    linear-gradient(90deg,rgba(2,31,17,.96),rgba(2,31,17,.55)),
    url("store2.png") center/cover no-repeat;
  color:#fff;
}

.badge{
  background:#f0d629;
  color:#06351d;
}

.dashboardHero h1{
  color:#5ca52e;
}

.dashboardHero p{
  color:#fff;
}

.healthFormCard,
.profileCard,
.disclaimerBox{
  background:#fff;
  border:1px solid rgba(11,76,40,.12);
  box-shadow:0 16px 40px rgba(0,0,0,.10);
}

.healthFormCard h2,
.profileCard h2,
.disclaimerBox h3{
  color:#0b2f1b;
}

.field label{
  color:#0b2f1b;
}

.field input,
.field select{
  border:1px solid #cfd8d1;
  background:#f9fbf7;
  color:#0b2f1b;
}

.field input:focus,
.field select:focus{
  outline:none;
  border-color:#58a820;
  box-shadow:0 0 0 3px rgba(88,168,32,.18);
}

.progressBar{
  background:#dfe8df;
}

.progress{
  background:linear-gradient(90deg,#58a820,#f0d629);
}

.disclaimerBox{
  border-left:6px solid #f0d629;
}

.disclaimerBox p{
  color:#4f5b54;
}