/* Cards */
.card{
  background:var(--paper);
  border-radius:18px;
  padding:16px;
  box-shadow:0 1px 2px rgba(22,33,31,0.06);
  margin-bottom:14px;
}
.card-flex{ display:flex; align-items:center; gap:18px; }

/* XP HUD (game-style header) */
.xp-hud{
  display:flex; align-items:center; gap:12px;
  background:linear-gradient(135deg, #1E2C29, #17211F);
  border:1px solid rgba(217,164,65,0.25);
  border-radius:16px; padding:12px 14px; margin-bottom:16px;
}
.xp-badge{
  width:44px; height:44px; border-radius:12px; flex-shrink:0;
  background:linear-gradient(135deg, var(--xp), #B4801F);
  display:flex; align-items:center; justify-content:center;
  font-family:'IBM Plex Mono',monospace; font-weight:600; font-size:15px; color:var(--ink);
}
.xp-info{ flex:1; }
.xp-top{ display:flex; justify-content:space-between; font-size:11px; color:rgba(243,238,226,0.65); margin-bottom:4px; }
.xp-top span:last-child{ font-family:'IBM Plex Mono',monospace; }
.xp-track{ height:6px; border-radius:99px; background:rgba(243,238,226,0.12); overflow:hidden; }
.xp-fill{ height:100%; border-radius:99px; background:linear-gradient(90deg, var(--xp), #F0C060); transition:width 0.5s ease; }

/* Ring */
.ring-wrap{ position:relative; width:140px; height:140px; flex-shrink:0; }
.ring-wrap svg{ transform:rotate(-90deg); }
.ring-center{
  position:absolute; inset:0; display:flex; flex-direction:column;
  align-items:center; justify-content:center;
}
.ring-num{ font-family:'IBM Plex Mono',monospace; font-size:22px; color:var(--text); font-weight:500; }
.ring-label{ font-size:11px; color:var(--muted); }

/* Macro bars */
.macro-row{ margin-bottom:10px; }
.macro-row:last-child{ margin-bottom:0; }
.macro-top{ display:flex; justify-content:space-between; font-size:12px; color:var(--muted); margin-bottom:4px; }
.macro-top span:last-child{ font-family:'IBM Plex Mono',monospace; }
.bar-track{ height:6px; border-radius:99px; background:var(--track); overflow:hidden; }
.bar-fill{ height:100%; border-radius:99px; transition:width 0.4s ease; }

/* Grid + mini cards */
.grid-2{ display:grid; grid-template-columns:1fr 1fr; gap:12px; }
.mini-label{ display:flex; align-items:center; gap:6px; font-size:12px; font-weight:700; color:var(--text); margin-bottom:6px; }
.mini-title{ font-family:'Fraunces',serif; font-size:16px; color:var(--text); }
.mini-sub{ font-size:12px; color:var(--muted); }

.yoga-teaser{ background:linear-gradient(135deg, var(--moss), var(--moss-deep)); color:var(--paper); cursor:pointer; }
.yoga-teaser .mini-label{ color:var(--paper); }
.teaser-row{ display:flex; justify-content:space-between; align-items:center; }
.teaser-title{ font-family:'Fraunces',serif; font-size:17px; }
.teaser-sub{ font-size:12px; color:rgba(243,238,226,0.8); }

/* Nutrition */
.kcal-big{ font-family:'IBM Plex Mono',monospace; font-size:28px; color:var(--text); }
.kcal-of{ font-size:12px; color:var(--muted); }
.kcal-top{ display:flex; justify-content:space-between; align-items:flex-end; margin-bottom:8px; }

.action-row{ display:flex; gap:10px; margin-bottom:14px; }
.action-btn{
  flex:1; background:var(--paper); border:none; border-radius:14px;
  padding:14px 6px; display:flex; flex-direction:column; align-items:center; gap:6px;
  color:var(--text); font-family:'Manrope'; font-size:11px; cursor:pointer;
}
.action-btn svg{ stroke:var(--coral); }

.meal-row{ position:relative; display:flex; justify-content:space-between; align-items:center; }
.meal-name{ font-size:14px; font-weight:600; color:var(--text); }
.meal-sub{ font-size:11px; color:var(--muted); }
.meal-kcal{ font-family:'IBM Plex Mono',monospace; font-size:14px; color:var(--text); }
.meal-del{ background:none; border:none; cursor:pointer; padding:4px; margin-left:8px; }
.meal-del svg{ stroke:var(--muted); width:16px; height:16px; }
.meal-del:hover svg{ stroke:var(--coral); }
.empty-state{ text-align:center; padding:24px 12px; color:var(--muted); font-size:13px; }

/* Workout */
.exercise-row{
  display:flex; justify-content:space-between; align-items:center;
  padding:10px 0; border-top:1px solid var(--track);
}
.exercise-row:first-of-type{ margin-top:6px; }
.exercise-name{ font-size:13px; color:var(--text); }
.exercise-sets{ font-family:'IBM Plex Mono',monospace; font-size:12px; color:var(--muted); }
.start-btn{
  width:100%; margin-top:14px; padding:14px; border:none; border-radius:14px;
  background:var(--coral); color:var(--paper); font-family:'Manrope'; font-weight:700; font-size:13px;
  cursor:pointer;
}
.start-btn:disabled{ background:var(--track); color:var(--muted); cursor:default; }
.xp-reward-tag{
  display:inline-flex; align-items:center; gap:4px; font-family:'IBM Plex Mono',monospace;
  font-size:11px; color:var(--xp); background:rgba(217,164,65,0.12); padding:3px 8px; border-radius:99px;
}

/* Yoga */
.flow-card{ display:flex; justify-content:space-between; align-items:center; cursor:pointer; }
.flow-focus{ font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:0.06em; color:var(--moss); }
.flow-title{ font-family:'Fraunces',serif; font-size:17px; color:var(--text); }
.flow-sub{ font-size:12px; color:var(--muted); }
.flow-play{
  width:40px; height:40px; border-radius:99px; border:none; background:var(--moss);
  display:flex; align-items:center; justify-content:center; cursor:pointer;
  animation:breathe 3.4s ease-in-out infinite;
}
.flow-play svg{ stroke:var(--paper); }
.flow-done .flow-play{ background:var(--gold); animation:none; }

@keyframes breathe{ 0%,100%{transform:scale(1);} 50%{transform:scale(1.12);} }

/* Sheets / modals */
.sheet-overlay, .form-overlay{
  display:none; position:fixed; inset:0; background:rgba(22,33,31,0.6);
  align-items:flex-end; justify-content:center; z-index:50;
}
.sheet-overlay.active, .form-overlay.active{ display:flex; }
.sheet{
  width:100%; max-width:420px; background:var(--moss-deep);
  border-radius:26px 26px 0 0; padding:20px 24px 32px;
}
.sheet-close{ display:flex; justify-content:flex-end; background:none; border:none; cursor:pointer; }
.sheet-close svg{ stroke:var(--paper); }
.breath-outer{
  width:120px; height:120px; border-radius:99px; background:rgba(243,238,226,0.15);
  display:flex; align-items:center; justify-content:center; margin:14px auto 20px;
  animation:breathe 4s ease-in-out infinite;
}
.breath-inner{
  width:80px; height:80px; border-radius:99px; background:rgba(243,238,226,0.25);
  display:flex; align-items:center; justify-content:center;
}
.breath-inner svg{ stroke:var(--paper); }
.sheet-title{ font-family:'Fraunces',serif; font-size:20px; color:var(--paper); text-align:center; }
.sheet-sub{ font-size:12px; color:rgba(243,238,226,0.75); text-align:center; margin-top:4px; }
.sheet-complete-btn{
  width:100%; margin-top:20px; padding:14px; border:none; border-radius:14px;
  background:var(--gold); color:var(--ink); font-family:'Manrope'; font-weight:700; font-size:13px;
  cursor:pointer;
}
.sheet-complete-btn:disabled{ background:rgba(243,238,226,0.2); color:rgba(243,238,226,0.5); cursor:default; }

.form-sheet{
  width:100%; max-width:420px; background:var(--paper);
  border-radius:26px 26px 0 0; padding:20px 22px 28px; max-height:85vh; overflow-y:auto;
}
.form-sheet h2{ font-family:'Fraunces',serif; font-size:19px; color:var(--text); margin:0 0 14px; }
.form-field{ margin-bottom:12px; }
.form-field label{ display:block; font-size:11px; color:var(--muted); margin-bottom:5px; text-transform:uppercase; letter-spacing:0.06em; }
.form-field input{
  width:100%; padding:11px 12px; border-radius:10px; border:1px solid var(--track);
  background:#fff; font-family:'Manrope'; font-size:14px; color:var(--text);
}
.form-row3{ display:grid; grid-template-columns:1fr 1fr 1fr; gap:10px; }
.form-actions{ display:flex; gap:10px; margin-top:16px; }
.btn-secondary{
  flex:1; padding:13px; border-radius:12px; border:1px solid var(--track); background:none;
  font-family:'Manrope'; font-weight:600; font-size:13px; color:var(--text); cursor:pointer;
}
.btn-primary{
  flex:1; padding:13px; border-radius:12px; border:none; background:var(--coral);
  font-family:'Manrope'; font-weight:700; font-size:13px; color:var(--paper); cursor:pointer;
}

/* Toast */
.toast{
  position:fixed; left:50%; bottom:100px; transform:translateX(-50%) translateY(20px);
  background:var(--ink); color:var(--paper); padding:10px 18px; border-radius:99px;
  font-size:12px; font-family:'Manrope'; opacity:0; pointer-events:none; transition:all 0.25s ease;
  z-index:80; white-space:nowrap;
}
.toast.show{ opacity:1; transform:translateX(-50%) translateY(0); }
.toast.xp-toast{ background:linear-gradient(90deg, var(--xp), #B4801F); color:var(--ink); font-weight:700; }
.toast.levelup-toast{ background:linear-gradient(90deg, var(--coral), #E0451F); color:var(--paper); font-weight:700; }

/* Tab bar */
.tabbar{
  position:absolute; left:0; right:0; bottom:0; height:76px;
  background:rgba(15,22,20,0.92); backdrop-filter:blur(8px);
  border-top:1px solid rgba(243,238,226,0.08);
  display:flex; justify-content:space-around; align-items:center;
}
@media(max-width:479px){ .tabbar{ position:fixed; } }
.tab-btn{
  background:none; border:none; display:flex; flex-direction:column; align-items:center;
  gap:4px; padding:8px 10px; cursor:pointer;
}
.tab-btn svg{ stroke:rgba(243,238,226,0.45); width:20px; height:20px; }
.tab-btn span{ font-size:10px; font-weight:500; color:rgba(243,238,226,0.45); }
.tab-btn.active svg{ stroke:var(--coral); }
.tab-btn.active span{ color:var(--paper); font-weight:700; }