* { box-sizing: border-box; margin: 0; padding: 0; }
body { font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; background: #0f0f0f; color: #f0f0f0; min-height: 100vh; padding: 24px 16px 60px; }

#authScreen { display: flex; flex-direction: column; align-items: center; justify-content: center; min-height: 80vh; gap: 24px; text-align: center; }
#authScreen h2 { font-size: 28px; font-weight: 700; }
#authScreen p { color: #888; font-size: 14px; max-width: 280px; line-height: 1.6; }
.google-btn { display: flex; align-items: center; gap: 12px; background: #fff; color: #222; border: none; border-radius: 12px; padding: 14px 24px; font-size: 15px; font-weight: 600; cursor: pointer; transition: opacity 0.2s; }
.google-btn:hover { opacity: 0.85; }

#userBar { display: none; align-items: center; gap: 10px; margin-bottom: 16px; }
#userBar.visible { display: flex; }
#userAvatar { width: 30px; height: 30px; border-radius: 50%; border: 2px solid #2a2a2a; }
#userName { font-size: 13px; color: #888; flex: 1; }
#signOutBtn { font-size: 12px; color: #555; background: none; border: 1px solid #2a2a2a; border-radius: 8px; padding: 4px 10px; cursor: pointer; }
#signOutBtn:hover { color: #888; border-color: #444; }
#syncStatus { font-size: 11px; color: #444; text-align: right; margin-bottom: 8px; transition: color 0.3s; }
#syncStatus.synced { color: #2a6645; }
#syncStatus.syncing { color: #7a5220; }

#onboardScreen { display: none; flex-direction: column; gap: 20px; max-width: 400px; margin: 40px auto; }
#onboardScreen.visible { display: flex; }
#onboardScreen h2 { font-size: 22px; font-weight: 700; }
#onboardScreen p { color: #888; font-size: 13px; }
.ob-label { font-size: 12px; color: #666; text-transform: uppercase; letter-spacing: .06em; margin-bottom: 6px; }
.ob-input { width: 100%; background: #1a1a1a; border: 1px solid #2a2a2a; border-radius: 10px; padding: 12px 14px; font-size: 14px; color: #f0f0f0; font-family: inherit; }
.ob-input:focus { outline: none; border-color: #4ecb8d; }
.ob-goal-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.ob-goal-btn { padding: 12px; border-radius: 10px; border: 1px solid #2a2a2a; background: #141414; color: #888; font-size: 13px; font-weight: 600; cursor: pointer; transition: all 0.2s; text-align: center; }
.ob-goal-btn.selected { background: #0d2a1c; border-color: #4ecb8d; color: #4ecb8d; }
.ob-submit { width: 100%; padding: 14px; border-radius: 12px; border: none; background: #4ecb8d; color: #0d2a1c; font-size: 15px; font-weight: 700; cursor: pointer; margin-top: 8px; }
.ob-submit:hover { background: #6dd9a0; }
#appContent { display: none; }
#appContent.visible { display: block; }
h1 { font-size: 22px; font-weight: 700; letter-spacing: .02em; margin-bottom: 4px; }
.subtitle { font-size: 13px; color: #888; margin-bottom: 20px; }

/* SECTION TOGGLE */
.section-toggle { display: flex; gap: 8px; margin-bottom: 28px; }
.stab {
  padding: 10px 18px;
  border-radius: 10px;
  border: 1px solid #2a2a2a;
  border-left-width: 3px;
  background: #141414;
  cursor: pointer;
  font-size: 13px;
  font-weight: 700;
  color: #555;
  letter-spacing: .04em;
  text-transform: uppercase;
  transition: all 0.2s ease;
  display: flex;
  align-items: center;
  gap: 7px;
}
.stab:hover { background: #1a1a1a; color: #888; }

/* ROUTINE — green */
.stab[data-section="gym"]               { border-left-color: #2a5a40; }
.stab[data-section="gym"]:hover         { border-left-color: #4ecb8d; color: #4ecb8d; }
.stab[data-section="gym"].active        { background: #0d2a1c; border-color: #1a4a30; border-left-color: #4ecb8d; color: #4ecb8d; }

/* MEAL PLAN — orange */
.stab[data-section="meal"]              { border-left-color: #5a3a10; }
.stab[data-section="meal"]:hover        { border-left-color: #d4943a; color: #d4943a; }
.stab[data-section="meal"].active       { background: #2a1a08; border-color: #4a2e10; border-left-color: #d4943a; color: #d4943a; }

/* TRACKER — purple */
.stab[data-section="tracker"]           { border-left-color: #3a2a5a; }
.stab[data-section="tracker"]:hover     { border-left-color: #a89cf0; color: #a89cf0; }
.stab[data-section="tracker"].active    { background: #1a1430; border-color: #352860; border-left-color: #a89cf0; color: #a89cf0; }
.section { display: none; }
.section.active { display: block; }

/* ── COLOR CARRY-THROUGH PER SECTION ─────────────────────────────── */

/* ROUTINE (green) accents */
#gym .sec-label        { color: #2a6645; }
#gym .tabs             { margin-bottom: 18px; }
#gym .tab.active       { background: #0d2a1c; color: #4ecb8d; border-color: #1a6645; border-left: 3px solid #4ecb8d; }
#gym .tab:hover        { color: #4ecb8d; border-color: #2a5a40; }
#gym .schedule-bar     { margin-bottom: 20px; }
#gym .stats-bar        { margin-bottom: 20px; }
#gym .row-head         { color: #2a6645; }
#gym .note             { border-top-color: #1a3326; color: #3a7a55; }

/* MEAL PLAN (orange) accents */
#meal .meal-label      { color: #d4943a; }
#meal .meal-time       { color: #7a5220; }
#meal .divider         { background: #3a2a10; }
#meal > div:first-child { /* daily meals label */
  color: #7a5220 !important;
  border-bottom: 1px solid #3a2a10;
  padding-bottom: 10px;
  margin-bottom: 16px;
}

/* TRACKER (purple) accents */
#tracker .tracker-title        { color: #a89cf0; }
#tracker .weekday              { color: #4a3a7a; }
#tracker #monthSelect          { border-color: #3a2a5a; color: #a89cf0; background: #1a1430; }
#tracker #monthSelect:hover    { border-color: #a89cf0; }
#tracker .cal-day:hover        { border-color: #a89cf0; }
#tracker .cal-day.went         { border-color: #1a6645; background: #0d3326; }
#tracker .cal-day.rest         { border-color: #1a3a66; background: #0d2a4d; }
#tracker .cal-day.skipped      { border-color: #664d4d; background: #4d1a1a; }

/* One clean separator under the nav tabs only */
.section-toggle { border-bottom: 1px solid #1e1e1e; padding-bottom: 22px; margin-bottom: 24px; }
.stats-bar { display: flex; gap: 10px; margin-bottom: 20px; flex-wrap: wrap; }
.stat { background: #1a1a1a; border: 1px solid #262626; border-radius: 8px; padding: 8px 14px; font-size: 12px; color: #666; }
.stat span { color: #f0f0f0; font-weight: 600; }

/* SCHEDULE */
.schedule-bar { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 20px; }
.day-pill { padding: 6px 13px; border-radius: 20px; font-size: 12px; font-weight: 500; border: 1px solid #333; }
.day-active { background: #0d3326; color: #4ecb8d; border-color: #1a6645; }
.day-rest { background: #1a1a1a; color: #555; }

/* GYM TABS */
.tabs { display: flex; gap: 6px; margin-bottom: 16px; flex-wrap: wrap; }
.tab { padding: 9px 16px; border-radius: 10px; border: 1px solid #333; background: transparent; cursor: pointer; font-size: 13px; font-weight: 600; color: #888; }
.tab.active { background: #1e1e1e; color: #f0f0f0; border-color: #555; }
.panel { display: none; }
.panel.active { display: block; }

/* ROWS */
.row-head { display: grid; grid-template-columns: 1fr 62px 80px 72px; gap: 6px; padding: 4px 12px; font-size: 11px; color: #555; font-weight: 600; text-transform: uppercase; letter-spacing: .06em; margin-bottom: 4px; }
.row { display: grid; grid-template-columns: 1fr 62px 80px 72px; gap: 6px; align-items: center; padding: 11px 12px; border-radius: 10px; margin-bottom: 3px; font-size: 13px; background: #1a1a1a; border: 1px solid #262626; }
.machine-name { font-weight: 500; color: #f0f0f0; display: flex; align-items: center; gap: 7px; }
.num { text-align: center; color: #ccc; }
.cardio-row { display: flex; align-items: center; gap: 8px; padding: 7px 12px; margin-bottom: 6px; border-radius: 8px; background: #141414; font-size: 12px; color: #666; border-left: 2px solid #2a2a2a; }
.badge { font-size: 10px; padding: 2px 7px; border-radius: 20px; font-weight: 600; flex-shrink: 0; }
.b-db { background: #1e1a3a; color: #a89cf0; }
.b-machine { background: #0d2e1f; color: #4ecb8d; }
.b-cardio { background: #2a1e08; color: #d4943a; }
.sec-label { font-size: 10px; font-weight: 700; color: #444; margin: 14px 0 5px 4px; text-transform: uppercase; letter-spacing: .08em; }
.note { font-size: 12px; color: #444; margin-top: 16px; padding-top: 14px; border-top: 1px solid #222; line-height: 1.6; }

/* MEAL PLAN */
.meal-card { background: #1a1a1a; border: 1px solid #262626; border-radius: 12px; padding: 14px 16px; margin-bottom: 8px; display: flex; align-items: flex-start; gap: 14px; }
.meal-time { font-size: 12px; font-weight: 600; color: #555; min-width: 56px; padding-top: 2px; }
.meal-label { font-size: 13px; font-weight: 600; color: #f0f0f0; margin-bottom: 7px; }
.pills { display: flex; flex-wrap: wrap; gap: 6px; }
.pill { font-size: 12px; padding: 3px 10px; border-radius: 20px; font-weight: 500; }
.p-rice { background: #2a1e08; color: #d4943a; }
.p-meat { background: #0d2e1f; color: #4ecb8d; }
.p-veg { background: #173404; color: #97C459; }
.p-egg { background: #1e1a3a; color: #a89cf0; }
.p-coffee { background: #1e1208; color: #c47c3a; }
.p-no { background: #1a1a1a; color: #444; border: 1px solid #2a2a2a; text-decoration: line-through; }
/* SNACK & FRUIT COLORS */
.p-banana { background: #332b00; color: #ffd700; }
.p-orange { background: #331a00; color: #ffa500; }
.p-watermelon { background: #331414; color: #ff6b6b; }
.p-mango { background: #332200; color: #ffcc00; }
.p-nuts { background: #332414; color: #e6a863; }
.p-siomai { background: #2b2b2b; color: #e6e6e6; }
.gym-card { background: #0d2e1f; border: 1px solid #1a6645; border-radius: 12px; padding: 14px 16px; margin-bottom: 8px; display: flex; align-items: center; gap: 14px; }
.gym-time { font-size: 12px; font-weight: 600; color: #4ecb8d; min-width: 56px; }
.gym-label { font-size: 13px; font-weight: 700; color: #4ecb8d; }
.cheat-box { border: 1px solid #2a2a2a; border-radius: 10px; padding: 12px 16px; margin-top: 12px; }
.cheat-title { font-size: 11px; font-weight: 700; color: #444; text-transform: uppercase; letter-spacing: .06em; margin-bottom: 8px; }
.divider { height: 0.5px; background: #222; margin: 16px 0; }
.coffee-note { font-size: 12px; color: #555; background: #1a1208; border: 1px solid #2a1a08; border-radius: 8px; padding: 10px 14px; margin-top: 8px; line-height: 1.6; }

/* Mobile Responsiveness */
@media (max-width: 600px) {
  body { padding: 16px 12px 40px; font-size: 14px; }
  h1 { font-size: 18px; }
  .subtitle { font-size: 12px; margin-bottom: 16px; }
  .section-toggle { gap: 4px; margin-bottom: 20px; }
  .stab { padding: 8px 16px; font-size: 13px; }
  .stats-bar { gap: 6px; flex-wrap: wrap; }
  .stat { padding: 6px 10px; font-size: 11px; }
  .schedule-bar { gap: 6px; }
  .day-pill { padding: 4px 10px; font-size: 11px; }
  .tabs { gap: 4px; margin-bottom: 12px; }
  .tab { padding: 7px 12px; font-size: 12px; }
  .row-head { grid-template-columns: 1fr 40px 58px 55px; gap: 4px; padding: 2px 8px; font-size: 10px; }
  .row { grid-template-columns: 1fr 40px 58px 55px; gap: 4px; align-items: center; padding: 8px 8px; font-size: 12px; }
  .machine-name { gap: 5px; }
  .badge { font-size: 9px; padding: 1px 5px; }
  .num { font-size: 11px; }
  .cardio-row { padding: 5px 8px; font-size: 11px; }
  .sec-label { margin: 10px 0 3px 2px; font-size: 9px; }
  .note { font-size: 11px; margin-top: 12px; padding-top: 10px; }
  .meal-card { padding: 12px 12px; margin-bottom: 6px; gap: 10px; }
  .meal-time { min-width: 50px; font-size: 11px; }
  .meal-label { font-size: 12px; margin-bottom: 5px; }
  .pills { gap: 4px; flex-wrap: wrap; }
  .pill { font-size: 11px; padding: 2px 8px; }
  .gym-card { padding: 12px 12px; margin-bottom: 6px; gap: 10px; }
  .gym-time { min-width: 50px; font-size: 11px; }
  .gym-label { font-size: 12px; }
  .cheat-box { padding: 10px 12px; margin-top: 10px; }
  .cheat-title { font-size: 10px; margin-bottom: 6px; }
  .divider { margin: 12px 0; }
  .coffee-note { font-size: 11px; padding: 8px 12px; margin-top: 6px; }
  .tracker-header { flex-direction: column; align-items: flex-start; gap: 10px; }
  .tracker-title { font-size: 13px; }
  #monthSelect { font-size: 13px; width: 100%; max-width: none; }
  .calendar-grid { gap: 4px; }
  .cal-day { padding: 8px 4px; }
  .cal-date { font-size: 12px; margin-bottom: 6px; }
  .cal-status { font-size: 16px; }
  .note-modal-content { width: 95%; max-width: none; padding: 16px; }
  .note-modal-header { font-size: 13px; }
  .note-modal-input { font-size: 12px; min-height: 60px; }
  .note-modal-btn { font-size: 12px; padding: 6px 10px; }

}/* === ANIMATIONS === */
/* Smooth fade in for tabs */
@keyframes fadeIn {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: translateY(0); }
}
.section.active {
  display: block;
  animation: fadeIn 0.4s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

/* Hover pop effect for pills */
.pill { transition: transform 0.2s ease, filter 0.2s ease; }
.pill:hover { transform: scale(1.08); filter: brightness(1.2); cursor: default; }

/* Pulse effect for the Gym Session card to hype you up */
@keyframes glowPulse {
  0% { box-shadow: 0 0 0px #5e8e0b; }
  30% { box-shadow: 0 0 12px #5e8e0b; }
  50% { box-shadow: 0 0 0px #5e8e0b; }
}
.gym-card { animation: glowPulse 8s infinite; }


/* === TRACKER CSS === */
.tracker-header { margin-bottom: 20px; display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 12px; }
.tracker-title { font-size: 14px; font-weight: 600; color: #f0f0f0; }
#monthSelect { background: #1e1e1e; color: #f0f0f0; border: 1px solid #333; padding: 8px 12px; border-radius: 8px; font-size: 14px; font-weight: 600; outline: none; cursor: pointer; transition: all 0.2s ease; }
#monthSelect:hover { border-color: #555; background: #252525; }
.calendar-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 6px; margin-top: 14px; }
.calendar-weekdays { display: grid; grid-template-columns: repeat(7, 1fr); gap: 6px; margin-bottom: 8px; }
.weekday { font-size: 11px; font-weight: 700; color: #555; text-align: center; text-transform: uppercase; padding: 4px 0; }
.cal-day { background: #151515; border: 1px solid #2a2a2a; border-radius: 8px; padding: 10px 6px; text-align: center; transition: all 0.2s ease; cursor: pointer; position: relative; }
.cal-day:hover { transform: translateY(-2px); border-color: #555; background: #1a1a1a; }
.cal-date { font-size: 13px; font-weight: 700; color: #888; margin-bottom: 8px; min-height: 18px; }
.cal-status { font-size: 18px; transition: all 0.3s ease; height: 24px; display: flex; align-items: center; justify-content: center; }
.cal-note-btn { font-size: 10px; color: #555; cursor: pointer; transition: all 0.2s; margin-top: 4px; opacity: 0; position: absolute; top: 2px; right: 2px; }
.cal-day:hover .cal-note-btn { opacity: 0.6; }
.cal-note-btn:hover { opacity: 1; color: #f0f0f0; }

/* Status colors */
.cal-day.went { border-color: #1a6645; background: #0d3326; }
.cal-day.went .cal-date { color: #4ecb8d; }
.cal-day.went .cal-status { color: #4ecb8d; }

.cal-day.rest { border-color: #1a3a66; background: #0d2a4d; }
.cal-day.rest .cal-date { color: #5ba8d6; }
.cal-day.rest .cal-status { color: #5ba8d6; }

.cal-day.skipped { border-color: #664d4d; background: #4d1a1a; }
.cal-day.skipped .cal-date { color: #ff6b6b; }
.cal-day.skipped .cal-status { color: #ff6b6b; }

/* Note modal */
.note-modal { display: none; position: fixed; top: 0; left: 0; right: 0; bottom: 0; background: rgba(0, 0, 0, 0.7); z-index: 1000; align-items: center; justify-content: center; }
.note-modal.active { display: flex; }
.note-modal-content { background: #1e1e1e; border: 1px solid #333; border-radius: 12px; padding: 20px; width: 90%; max-width: 400px; }
.note-modal-header { font-size: 14px; font-weight: 700; color: #f0f0f0; margin-bottom: 14px; }
.note-modal-input { width: 100%; background: #151515; border: 1px solid #2a2a2a; border-radius: 6px; padding: 10px 12px; font-size: 13px; color: #f0f0f0; font-family: inherit; min-height: 80px; resize: vertical; margin-bottom: 12px; }
.note-modal-input:focus { outline: none; border-color: #555; }
.note-modal-buttons { display: flex; gap: 8px; }
.note-modal-btn { padding: 8px 14px; border-radius: 6px; border: none; font-size: 13px; font-weight: 600; cursor: pointer; transition: all 0.2s; }
.btn-save { background: #4ecb8d; color: #0d3326; }
.btn-save:hover { background: #6dd9a0; }
.btn-cancel { background: #2a2a2a; color: #f0f0f0; }
.btn-cancel:hover { background: #333; }
.btn-delete { background: #663333; color: #ff6b6b; flex: 1; text-align: center; }
.btn-delete:hover { background: #804040; }
</style>