body { font-family: Arial, sans-serif; margin:0; padding:0; background:#fdfdfd; }
.hidden { display:none; }
.intro-screen { display:flex; flex-direction:column; align-items:center; justify-content:center; height:100vh; background:lightgreen; }
.apple { font-size:5rem; }
.app-header { background:#2e7d32; color:white; padding:1rem; text-align:center; }
#goalProgressBar { width:80%; margin:1rem auto; background:#ccc; border-radius:20px; overflow:hidden; height:20px; }
#goalProgress { background:#4caf50; height:100%; width:40%; transition:width 0.5s; }
.bubble-nav { display:flex; justify-content:space-around; padding:1rem; background:#e8f5e9; position:fixed; bottom:0; width:100%; }
.bubble { width:50px; height:50px; background:#a5d6a7; border-radius:50%; display:flex; align-items:center; justify-content:center; cursor:pointer; font-size:1.5rem; box-shadow:0 4px 6px rgba(0,0,0,0.2); }
.modal { display:none; position:fixed; z-index:1000; left:0; top:0; width:100%; height:100%; background:rgba(0,0,0,0.5); justify-content:center; align-items:center; }
.modal-content { background:white; padding:2rem; border-radius:10px; width:90%; max-width:500px; position:relative; }
.close { position:absolute; top:10px; right:20px; font-size:2rem; cursor:pointer; }