:root{
  --green:#2e7d32;
  --light:#e8f5e9;
  --accent:#64b5f6;
  --muted:#777;
}
*{box-sizing:border-box}
body{font-family:Inter,system-ui,Arial; margin:0; background:linear-gradient(180deg,#f7fff7, #ffffff); color:#123; -webkit-font-smoothing:antialiased}
.screen{height:100vh; width:100vw; display:flex; align-items:center; justify-content:center}
.hidden{display:none}
.splash-inner{display:flex; flex-direction:column; align-items:center; gap:16px}
.apple{width:140px; filter:drop-shadow(0 6px 12px rgba(0,0,0,0.12))}
.bubble{background:var(--light); color:var(--green); padding:12px 18px; border-radius:20px; box-shadow:0 6px 18px rgba(46,125,50,0.12); font-weight:600}
.primary{background:var(--green); color:white; border:none; padding:10px 16px; border-radius:10px; cursor:pointer}
.app-header{padding:18px 20px; text-align:center}
.app-header h1{margin:0; color:var(--green); font-size:22px}
.subtitle{margin:6px 0 0; color:var(--muted)}

/* cards and form */
.card{max-width:960px; margin:14px auto; background:white; border-radius:12px; padding:18px; box-shadow:0 8px 30px rgba(20,80,20,0.04); border:3px solid rgba(46,125,50,0.08)}
.form-grid{display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:10px}
.form-grid label{display:flex; flex-direction:column; text-align:left; font-weight:600; color:#234}
input, textarea{padding:10px; border-radius:8px; border:1px solid rgba(46,125,50,0.14); outline:none}
input:focus, textarea:focus{box-shadow:0 0 0 4px rgba(46,125,50,0.06)}

/* goals */
.goal-grid{display:flex; gap:12px; flex-wrap:wrap}
.goal-box{flex:1; padding:12px; border-radius:10px; border:1px dashed rgba(46,125,50,0.12)}

/* nav bubbles */
.bubble-nav{position:fixed; left:50%; transform:translateX(-50%); bottom:18px; display:flex; gap:14px; align-items:center}
.bubble{width:62px; height:62px; border-radius:50%; display:flex; align-items:center; justify-content:center; background:linear-gradient(180deg,var(--light),#fff); box-shadow:0 10px 30px rgba(46,125,50,0.15); cursor:pointer; border:3px solid rgba(46,125,50,0.08); font-size:22px}
.main-bubble{width:86px; height:86px; background:linear-gradient(180deg,var(--green),#5db86b); color:white; transform:translateY(-6px) rotate(0.02deg); box-shadow:0 20px 50px rgba(46,125,50,0.25)}

/* content areas */
.content-area{padding:10px}
.arc{height:220px; position:relative; display:flex; align-items:flex-end; justify-content:center}
.arc .day{position:absolute; width:40px; height:40px; border-radius:50%; display:flex; align-items:center; justify-content:center; color:white; font-weight:700; cursor:pointer; box-shadow:0 6px 20px rgba(0,0,0,0.12)}
.day-schedule{margin-top:12px}
.water-box{display:flex; gap:12px; align-items:center}
.cup{width:60px; height:80px; border-radius:8px; border:2px solid rgba(0,0,0,0.06); background:#f6fbff; overflow:hidden; position:relative}
.fill{position:absolute; bottom:0; width:100%; background:linear-gradient(180deg,#64b5f6,#1976d2)}

/* meals list */
.meals-list{display:flex; flex-direction:column; gap:10px; margin-top:12px}
.meal-item{display:flex; gap:12px; align-items:center; padding:10px; border-radius:10px; background:linear-gradient(180deg,#f1f9f1,#ffffff); border:1px solid rgba(46,125,50,0.06)}
.meal-circle{width:54px;height:54px;border-radius:50%;display:flex;align-items:center;justify-content:center;background:linear-gradient(180deg,#4caf50,#2e7d32);color:white;font-weight:800;box-shadow:inset 0 -6px 0 rgba(0,0,0,0.08)}
.meal-meta{flex:1;text-align:left}
.actions{display:flex;gap:8px}
.action-btn{padding:6px 8px;border-radius:8px;border:none;background:#fff;box-shadow:0 6px 18px rgba(0,0,0,0.06);cursor:pointer}

/* profile and medals */
.profile-card{display:flex;gap:12px;align-items:center}
.av{width:80px;height:80px;border-radius:50%;background:linear-gradient(180deg,#4caf50,#2e7d32);color:white;display:flex;align-items:center;justify-content:center;font-size:28px}
.medals-row{display:flex;gap:8px;flex-wrap:wrap;margin-top:8px}
.medal{width:60px;height:80px;border-radius:10px;display:flex;flex-direction:column;align-items:center;justify-content:center;color:white}

/* posts */
#postsList, #posts{display:flex;flex-direction:column;gap:10px}
.post{padding:10px;border-radius:8px;background:#fff;box-shadow:0 8px 20px rgba(0,0,0,0.04)}

/* responsive tweaks */
@media (max-width:640px){
  .bubble{width:48px;height:48px;font-size:18px}
  .main-bubble{width:68px;height:68px}
  .arc{height:160px}
}