/* ===== CSS VARIABLES ===== */
:root {
  --bg: #0D0D1A;
  --bg2: #12121F;
  --bg3: #1A1A2E;
  --card: rgba(255,255,255,0.05);
  --card-border: rgba(255,255,255,0.08);
  --card-hover: rgba(255,255,255,0.09);
  --text: #E8E8FF;
  --text2: #9999BB;
  --text3: #6666AA;
  --accent: #6C63FF;
  --accent2: var(--c-err);
  --accent3: #43E97B;
  --accent4: #FA8231;
  --protein-c: #FF6584;
  --carbs-c: #FFC300;
  --fat-c: #FF6584;
  --fiber-c: #43E97B;
  --sidebar-w: 240px;
  --radius: var(--r-card);
  --radius-sm: var(--r-sm);
  --shadow: 0 8px 32px rgba(0,0,0,0.4);
  --shadow-glow: 0 0 30px rgba(108,99,255,0.2);
  --transition: 0.15s ease-out;
  --spring: 0.3s cubic-bezier(0.34,1.56,0.64,1);
  --track-bg: rgba(255,255,255,0.07);
  --input-bg: rgba(255,255,255,0.05);
  --surface: rgba(255,255,255,0.04);
  --surface-hover: rgba(255,255,255,0.03);
}
[data-theme="light"] {
  --bg: #F0F2FF;
  --bg2: #E8EAFF;
  --bg3: #FFFFFF;
  --card: rgba(255,255,255,0.9);
  --card-border: rgba(108,99,255,0.15);
  --card-hover: rgba(255,255,255,1);
  --text: #1A1A2E;
  --text2: #555580;
  --text3: #888AAA;
  --shadow: 0 4px 20px rgba(108,99,255,0.1);
  --shadow-glow: 0 0 30px rgba(108,99,255,0.15);
  --track-bg: rgba(108,99,255,0.1);
  --input-bg: #ffffff;
  --surface: rgba(0,0,0,0.04);
  --surface-hover: rgba(0,0,0,0.06);
}

/* Light theme: profile picker bg + toggle */
[data-theme="light"] #profilePicker {
  background-color: #F0F2FF;
  background-image:
    linear-gradient(rgba(108,99,255,0.06) 1px, transparent 1px),
    linear-gradient(90deg, rgba(108,99,255,0.06) 1px, transparent 1px);
  background-size: 28px 28px;
  background-position: -1px -1px;
}
[data-theme="light"] .toggle {
  background: rgba(0,0,0,0.1);
  border-color: rgba(0,0,0,0.1);
}

/* ===== SKIP LINK ===== */
.skip-link {
  position:absolute; top:-100%; left:16px; z-index:9999;
  padding:8px 16px; background:var(--accent); color:#fff;
  border-radius:0 0 8px 8px; font-weight:600; font-size:0.875rem;
  transition:top 0.15s; text-decoration:none;
}
.skip-link:focus-visible { top:0; outline:none; }

/* ===== SIDEBAR OVERLAY ===== */
.sidebar-overlay {
  display:none; position:fixed; inset:0; z-index:99;
  background:rgba(0,0,0,0.5); backdrop-filter:blur(2px);
}
.sidebar-overlay.visible { display:block; }

/* ===== ACCESSIBILITY — FOCUS STATES ===== */
:focus-visible { outline:2px solid var(--accent); outline-offset:2px; border-radius:4px; }
button:focus-visible, a:focus-visible { outline:2px solid var(--accent); outline-offset:2px; }
.nav-item:focus-visible { outline-offset:-2px; }
input:focus-visible, select:focus-visible, textarea:focus-visible {
  outline:2px solid var(--accent); outline-offset:0; border-radius:var(--r-sm);
}
.fi-delete:focus-visible, .ex-delete:focus-visible {
  opacity:1 !important; outline:2px solid var(--accent); outline-offset:2px; border-radius:4px;
}
.water-cup:focus-visible, .water-cup-big:focus-visible {
  outline:2px solid #38BDF8; outline-offset:2px;
}
.search-result-item:focus-visible, .ai-sug-item:focus-visible,
.pp-card:focus-visible, .qex-item:focus-visible {
  outline:2px solid var(--accent); outline-offset:2px; border-radius:var(--r-sm);
}

/* ===== RESET ===== */
*,*::before,*::after { box-sizing:border-box; margin:0; padding:0; }
html { font-size:16px; scroll-behavior:smooth; }
body {
  font-family:'Inter',sans-serif;
  background:var(--bg);
  color:var(--text);
  min-height:100vh;
  overflow-x:hidden;
  transition: background var(--transition), color var(--transition);
}
input,select,button,textarea { font-family:inherit; font-size:inherit; }
a { text-decoration:none; color:inherit; cursor:pointer; }
button { cursor:pointer; border:none; background:none; }
input[type=number]::-webkit-inner-spin-button { opacity:0.5; }

/* ===== STAGGERED CARD ENTRANCE ANIMATIONS ===== */
@keyframes cardStagger {
  from { opacity:0; transform:translateY(24px) scale(0.97); }
  to   { opacity:1; transform:translateY(0) scale(1); }
}
.page.active .card { animation: cardStagger 0.5s cubic-bezier(0.22,1,0.36,1) both; }
.page.active .card:nth-child(1) { animation-delay: 0.03s; }
.page.active .card:nth-child(2) { animation-delay: 0.08s; }
.page.active .card:nth-child(3) { animation-delay: 0.13s; }
.page.active .card:nth-child(4) { animation-delay: 0.18s; }
.page.active .card:nth-child(5) { animation-delay: 0.23s; }
.page.active .card:nth-child(6) { animation-delay: 0.28s; }
.page.active .card:nth-child(7) { animation-delay: 0.33s; }
.page.active .card:nth-child(8) { animation-delay: 0.38s; }

/* ===== ANIMATED NUMBER COUNTER ===== */
@keyframes countPulse {
  0% { transform:scale(1); }
  50% { transform:scale(1.05); }
  100% { transform:scale(1); }
}
.count-updated { animation: countPulse 0.3s ease; }

/* ===== SCROLLBAR ===== */
::-webkit-scrollbar { width:6px; }
::-webkit-scrollbar-track { background:transparent; }
::-webkit-scrollbar-thumb { background:var(--accent); border-radius:3px; }

/* ===== LOADING SCREEN ===== */
.loading-screen {
  position: fixed; inset: 0; z-index: 99999;
}

/* ===== PROFILE PICKER / LOGIN SPLIT ===== */
#profilePicker {
  position:fixed; inset:0; z-index:9000;
  background-color:var(--c-void);
  display:flex; align-items:stretch; justify-content:center;
  animation:pageIn 0.4s ease;
}

/* ── Split Container ────────────────────────────────────── */
.login-split {
  display:flex; width:100%; height:100vh; overflow:hidden;
}

/* ── Left Branding Panel — Cosmic Liquid Glass Experience ────────── */
.login-brand-panel {
  flex: 1.15;
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  background: radial-gradient(circle at 50% 30%, #1a0f30 0%, #0c071a 50%, #06040d 100%) !important;
  user-select: none;
  padding: 40px 24px;
}

.login-brand-mesh {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: 
    radial-gradient(circle 420px at 50% 25%, rgba(168, 85, 247, 0.22), transparent 70%),
    radial-gradient(circle 350px at 15% 75%, rgba(52, 211, 153, 0.12), transparent 60%),
    radial-gradient(circle 380px at 85% 65%, rgba(192, 132, 252, 0.15), transparent 60%);
  filter: blur(40px);
  z-index: 1;
}

.login-brand-decor {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: url('assets/loading_bg.jpg') center/cover no-repeat;
  opacity: 0.28;
  mix-blend-mode: screen;
  filter: saturate(1.2) contrast(1.1);
  z-index: 2;
}

.login-brand-particles {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 3;
}

.login-brand-showcase {
  position: relative;
  z-index: 10;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  width: 100%;
  max-width: 520px;
}

.login-showcase-title {
  font-family: 'Space Grotesk', -apple-system, sans-serif !important;
  font-size: 3rem !important;
  font-weight: 800 !important;
  color: #FFFFFF !important;
  letter-spacing: -0.025em !important;
  margin: 0 !important;
  line-height: 1.08 !important;
  text-shadow: 0 4px 28px rgba(168, 85, 247, 0.55), 0 2px 8px rgba(0, 0, 0, 0.8) !important;
}

.login-showcase-sub {
  font-family: 'Inter', -apple-system, sans-serif !important;
  font-size: 0.78rem !important;
  font-weight: 700 !important;
  color: #9F9CB8 !important;
  letter-spacing: 0.26em !important;
  margin-top: 6px !important;
  text-transform: uppercase !important;
}

.login-showcase-pills {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 14px !important;
  background: rgba(28, 18, 52, 0.55) !important;
  border: 1px solid rgba(168, 85, 247, 0.28) !important;
  border-radius: 99px !important;
  padding: 8px 20px !important;
  margin-top: 18px !important;
  margin-bottom: 28px !important;
  backdrop-filter: blur(16px) !important;
  -webkit-backdrop-filter: blur(16px) !important;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.25) !important;
}

.login-showcase-pill {
  display: flex !important;
  align-items: center !important;
  gap: 7px !important;
  font-size: 0.84rem !important;
  font-weight: 600 !important;
  color: #E6E6F5 !important;
}

.login-showcase-cards {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
  width: 100%;
}

.login-card-item {
  display: flex;
  align-items: center;
  gap: 12px;
  background: rgba(18, 12, 34, 0.65);
  border: 1px solid rgba(255, 255, 255, 0.09);
  border-radius: 16px;
  padding: 12px 14px;
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.35);
  transition: transform 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
  text-align: left;
}

.login-card-item:hover {
  transform: translateY(-2px);
  border-color: rgba(168, 85, 247, 0.4);
  box-shadow: 0 12px 28px rgba(168, 85, 247, 0.25);
}

.login-card-icon-wrap {
  width: 36px;
  height: 36px;
  border-radius: 10px;
  background: rgba(168, 85, 247, 0.16);
  border: 1px solid rgba(168, 85, 247, 0.3);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #C084FC;
  flex-shrink: 0;
}

.login-card-info {
  text-align: left;
}

.login-card-title {
  font-family: 'Space Grotesk', sans-serif;
  font-size: 0.85rem;
  font-weight: 700;
  color: #FFFFFF;
  line-height: 1.2;
}

.login-card-sub {
  font-family: 'Inter', sans-serif;
  font-size: 0.70rem;
  color: #8C89A8;
  margin-top: 2px;
}

/* ── Right Form Panel ───────────────────────────────────── */
.login-form-panel {
  flex:0 0 480px; display:flex; align-items:center; justify-content:center;
  background:var(--c-bg-0);
  border-left:1px solid var(--c-border-dim);
}
.login-form-inner {
  width:100%; max-width:380px; padding:40px 48px;
}
.login-form-title {
  font-family:var(--font-display); font-size:1.8rem; font-weight:800;
  color:var(--c-text-0); text-align:right; margin-bottom:36px;
  letter-spacing:-0.02em;
}

/* ── Form Fields ────────────────────────────────────────── */
.login-input-group {
  display:flex; flex-direction:column; gap:0; margin-bottom:16px;
}
.login-field {
  position:relative;
}
.login-field input {
  width:100%; padding:16px 44px 16px 16px; box-sizing:border-box;
  background:transparent; border:none;
  border-bottom:1px solid var(--c-border-mid);
  color:var(--c-text-0); font-family:var(--font-body);
  font-size:0.95rem; transition:border-color 0.2s;
}
.login-field input::placeholder { color:var(--c-text-1); }
.login-field input:focus {
  outline:none; border-bottom-color:var(--c-accent);
}
.login-field-icon {
  position:absolute; right:14px; top:50%; transform:translateY(-50%);
  font-size:0.9rem; color:var(--c-text-1); pointer-events:none;
}

/* ── Remember / Forgot ──────────────────────────────────── */
.login-options {
  display:flex; justify-content:space-between; align-items:center;
  margin:16px 0 28px; font-size:0.82rem;
}
.login-remember {
  display:flex; align-items:center; gap:6px; color:var(--c-text-1);
  cursor:pointer; font-family:var(--font-body);
}
.login-remember input[type="checkbox"] {
  accent-color:var(--c-accent); width:14px; height:14px; cursor:pointer;
}
.login-forgot {
  color:var(--c-text-1); text-decoration:none; font-family:var(--font-body);
  transition:color 0.2s;
}
.login-forgot:hover { color:var(--c-accent-bright); }

/* ── Submit Button ──────────────────────────────────────── */
.login-submit-btn {
  width:100%; padding:15px; border:none; border-radius:30px;
  background:linear-gradient(135deg, var(--c-accent), var(--c-accent-bright));
  color:#fff; font-family:var(--font-display); font-size:1rem;
  font-weight:700; cursor:pointer; letter-spacing:0.02em;
  transition:transform 0.2s, box-shadow 0.2s;
  box-shadow:0 4px 20px rgba(108,99,255,0.3);
}
.login-submit-btn:hover {
  transform:translateY(-2px);
  box-shadow:0 8px 30px rgba(108,99,255,0.45);
}
.login-submit-btn:active { transform:translateY(0); }

/* ── Divider ────────────────────────────────────────────── */
.login-divider {
  display:flex; align-items:center; gap:12px;
  margin:24px 0;
}
.login-divider span:first-child,
.login-divider span:last-child {
  flex:1; height:1px; background:var(--c-border-dim);
}
.login-divider-text {
  font-family:var(--font-mono); font-size:0.7rem; color:var(--c-text-2);
  letter-spacing:0.1em;
}

/* ── Signup Link ────────────────────────────────────────── */
.login-signup-link {
  text-align:center; margin-top:28px; font-size:0.85rem;
  color:var(--c-text-1); font-family:var(--font-body);
}
.login-signup-link a {
  color:var(--c-accent-bright); text-decoration:none; font-weight:600;
  transition:color 0.2s;
}
.login-signup-link a:hover { color:#fff; }

/* ── Mobile Responsive ──────────────────────────────────── */
@media (max-width: 900px) {
  .login-split {
    flex-direction: column;
    height: auto;
    min-height: 100vh;
    overflow-y: auto;
  }
  .login-brand-panel {
    flex: 0 0 auto;
    padding: 32px 20px 24px;
    min-height: auto;
  }
  .login-logo-aura-container {
    transform: scale(0.85);
    margin-bottom: 8px !important;
  }
  .login-showcase-title {
    font-size: 2.2rem !important;
  }
  .login-showcase-pills {
    margin-top: 14px !important;
    margin-bottom: 18px !important;
    flex-wrap: wrap;
    gap: 8px !important;
    padding: 6px 14px !important;
  }
  .login-showcase-cards {
    display: none;
  }
  .login-form-panel {
    flex: 1;
    border-left: none;
    border-top: 1px solid var(--c-border-dim);
    padding: 24px 16px 40px;
  }
  .login-form-inner {
    padding: 16px 8px;
    max-width: 380px;
  }
  .login-form-title { text-align: center; }
}

/* ── Legacy compat (kept for profile cards) ─────────────── */
.pp-container {
  width:min(480px,92vw); text-align:center;
}
.pp-logo {
  font-family:var(--font-display); font-size:1.8rem; font-weight:800;
  color:var(--c-accent); letter-spacing:-0.02em;
  margin-bottom:8px;
}
.pp-title {
  font-family:var(--font-mono); font-size:0.78rem; color:var(--text2); font-weight:500;
  margin-bottom:28px; letter-spacing:0.12em; text-transform:uppercase;
}
.pp-grid {
  display:grid; grid-template-columns:repeat(auto-fill,minmax(120px,1fr));
  gap:12px; margin-bottom:20px; min-height:80px;
}
.pp-card {
  background:var(--card); border:1px solid var(--card-border); border-radius:var(--r-card);
  padding:20px 12px; cursor:pointer; position:relative;
  transition: background var(--transition), color var(--transition), border-color var(--transition), box-shadow var(--transition), transform var(--transition), opacity var(--transition);
  display:flex; flex-direction:column; align-items:center; gap:10px;
}
.pp-card:hover { background:var(--card-hover); border-color:var(--accent); transform:translateY(-2px); }
.pp-avatar {
  width:52px; height:52px; border-radius:50%;
  background:var(--c-accent);
  display:flex; align-items:center; justify-content:center;
  font-size:1.5rem; font-weight:700; color:#fff;
}
.pp-name { font-size:0.85rem; font-weight:600; color:var(--text); }
.pp-del-btn {
  position:absolute; top:6px; right:6px;
  background:var(--surface); border:none; color:var(--text3);
  width:22px; height:22px; border-radius:50%; font-size:0.7rem;
  cursor:pointer; display:flex; align-items:center; justify-content:center;
  transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease, transform 0.15s ease, opacity 0.15s ease;
}
.pp-del-btn:hover { background:rgba(244,67,54,0.2); color:#f44336; }
.pp-hint { color:var(--text3); font-size:0.85rem; padding:20px 0; }
.pp-add-btn { margin-bottom:16px; }
.pp-new-form {
  background:var(--card); border:1px solid var(--card-border);
  border-radius:var(--r-card); padding:20px; margin-top:12px;
  display:flex; flex-direction:column; gap:12px; text-align:left;
}
.pp-new-form input {
  width:100%; padding:10px 14px; background:var(--bg3);
  border:1px solid var(--card-border); border-radius:var(--r-sm);
  color:var(--text); font-size:0.9rem; box-sizing:border-box;
}
.pp-new-form input:focus { border-color:var(--accent); outline:none; }
.pp-form-btns { display:flex; gap:10px; justify-content:flex-end; }
.btn-text {
  background:none; border:none; color:var(--text2);
  cursor:pointer; font-size:0.85rem; padding:8px 12px;
  border-radius:var(--r-sm); transition:color 0.2s;
}
.btn-text:hover { color:var(--text); }
.pp-error {
  background:rgba(244,67,54,0.1); border:1px solid rgba(244,67,54,0.3);
  color:#f44336; border-radius:var(--r-sm); padding:10px 14px;
  font-size:0.85rem; margin-top:8px; text-align:left;
}

/* ===== APP LAYOUT ===== */
.app { display:flex; min-height:100vh; }

/* ===== SIDEBAR ===== */
.sidebar {
  width:var(--sidebar-w); height:100vh;
  background: linear-gradient(180deg, var(--bg2) 0%, rgba(18,18,31,0.97) 50%, var(--bg2) 100%);
  border-right:1px solid var(--card-border);
  display:flex; flex-direction:column; padding:20px 0;
  position:fixed; top:0; left:0; z-index:100;
  transition:transform var(--transition), width var(--transition);
  backdrop-filter:blur(20px);
  overflow-y:auto; overflow-x:hidden;
}
[data-theme="light"] .sidebar {
  background: linear-gradient(180deg, var(--bg2) 0%, rgba(232,234,255,0.97) 50%, var(--bg2) 100%);
}
.sidebar.collapsed { transform:translateX(-100%); }
.sidebar-top { padding:0 20px 16px; }
.brand { display:flex; align-items:center; gap:10px; }
.brand-icon { font-size:1.8rem; animation:float 3s ease-in-out infinite; }
@keyframes float { 0%,100% { transform:translateY(0); } 50% { transform:translateY(-4px); } }
.brand-name { font-family:var(--font-display); font-size:1.4rem; font-weight:800; color:var(--c-accent); letter-spacing:-0.02em; }
.user-card { padding:16px 20px; margin:0 12px 8px; background:var(--card); border:1px solid var(--card-border); border-radius:var(--radius-sm); display:flex; align-items:center; gap:12px; cursor:pointer; transition:background var(--transition), border-color var(--transition); position:relative; }
.user-card:hover { background:var(--c-accent-dim); border-color:var(--c-border-hot); }
.user-card-chevron { margin-left:auto; color:var(--text2); font-size:1.1rem; transition:transform var(--transition); line-height:1; }
.user-card[aria-expanded="true"] .user-card-chevron { transform:rotate(90deg); }
.user-avatar { width:40px; height:40px; border-radius:50%; background:var(--c-accent); display:flex; align-items:center; justify-content:center; font-weight:700; font-size:1.1rem; flex-shrink:0; overflow:hidden; }
.user-avatar img { width:100%; height:100%; object-fit:cover; border-radius:50%; }
.user-name { font-weight:600; font-size:0.9rem; }
.user-streak { font-size:0.75rem; color:var(--text2); margin-top:2px; }
/* ── Profile Dropdown ──────────────────────────────────────── */
.profile-dropdown { margin:0 12px 8px; background:var(--card); border:1px solid var(--c-border-hot); border-radius:var(--radius-sm); overflow:hidden; animation:pageIn 0.15s ease; flex-shrink:0; }
.profile-dropdown.hidden { display:none; }
.pd-item { display:flex; align-items:center; gap:10px; padding:11px 16px; font-size:0.85rem; color:var(--text2); cursor:pointer; transition:background var(--transition), color var(--transition); }
.pd-item:hover { background:var(--c-accent-dim); color:var(--text); }
.pd-icon { font-size:1rem; width:20px; text-align:center; }
.flame { animation:flameWiggle 0.5s ease-in-out infinite alternate; display:inline-block; }
@keyframes flameWiggle { from { transform:rotate(-5deg); } to { transform:rotate(5deg); } }
.nav { padding:8px 12px; }
.nav-item {
  display:flex; align-items:center; gap:10px; padding:11px 12px; border-radius:var(--radius-sm);
  margin-bottom:2px; color:var(--text2); transition: background var(--transition), color var(--transition), border-color var(--transition), box-shadow var(--transition), transform var(--transition), opacity var(--transition); position:relative; cursor:pointer;
}
.nav-item:hover { background:var(--card); color:var(--text); transform:translateX(4px); }
.nav-item:hover .ni { animation: navIconBounce 0.4s ease; }
@keyframes navIconBounce { 0%,100% { transform:scale(1); } 50% { transform:scale(1.25) rotate(-5deg); } }
.nav-item.active { background:rgba(108,99,255,0.12); color:var(--accent); font-weight:600; }
.nav-item.active::before {
  content:''; position:absolute; left:0; top:15%; height:70%; width:3px;
  background: linear-gradient(180deg, var(--c-accent), var(--c-accent-bright));
  border-radius:2px;
  box-shadow: 0 0 8px var(--c-accent-glow), 0 0 20px rgba(108,99,255,0.15);
  animation: navGlow 2s ease-in-out infinite alternate;
}
@keyframes navGlow {
  from { box-shadow: 0 0 8px var(--c-accent-glow), 0 0 20px rgba(108,99,255,0.15); opacity:0.8; }
  to   { box-shadow: 0 0 12px var(--c-accent-glow), 0 0 30px rgba(108,99,255,0.25); opacity:1; }
}
.ni { font-size:1.1rem; width:24px; text-align:center; flex-shrink:0; transition: transform 0.2s; }
.nl { font-family:var(--font-mono); font-size:0.78rem; letter-spacing:0.04em; }
.nav-badge { font-family:var(--font-mono); font-size:0.6rem; font-weight:600; background:var(--c-accent); color:#fff; border-radius:var(--r-sm); padding:2px 6px; margin-left:auto; }
.nav-badge.hidden { display:none; }
.sidebar-footer { padding:16px 20px 0; border-top:1px solid var(--card-border); margin-top:auto; }
.theme-btn { display:flex; align-items:center; gap:8px; padding:10px 14px; width:100%; border-radius:var(--radius-sm); background:var(--card); border:1px solid var(--card-border); color:var(--text2); font-size:0.85rem; transition: background var(--transition), color var(--transition), border-color var(--transition), box-shadow var(--transition), transform var(--transition), opacity var(--transition); }
.theme-btn:hover { background:var(--card-hover); color:var(--text); }

/* ===== MAIN ===== */
.main { margin-left:var(--sidebar-w); flex:1; display:flex; flex-direction:column; min-height:100vh; transition:margin-left var(--transition); }
.main.full { margin-left:0; }

/* ===== TOPBAR ===== */
.topbar {
  position:sticky; top:0; z-index:50; padding:16px 24px;
  background:rgba(13,13,26,0.85); backdrop-filter:blur(20px);
  border-bottom:1px solid var(--card-border);
  display:flex; align-items:center; justify-content:space-between;
  transition:background var(--transition);
}
[data-theme="light"] .topbar { background:rgba(240,242,255,0.85); }
.topbar-l { display:flex; align-items:center; gap:16px; }
.hamburger { font-size:1.3rem; color:var(--text2); padding:6px; border-radius:var(--r-sm); transition: background var(--transition), color var(--transition), border-color var(--transition), box-shadow var(--transition), transform var(--transition), opacity var(--transition); }
.hamburger:hover { background:var(--card); color:var(--text); }
.page-title { font-family:var(--font-display); font-size:1.4rem; font-weight:700; }
.topbar-r { display:flex; align-items:center; gap:12px; }
/* ── Date Navigation ───────────────────────────────────────── */
.date-nav { display:flex; align-items:center; gap:4px; position:relative; }
.date-step-btn { width:28px; height:28px; border-radius:var(--r-sm); background:var(--card); border:1px solid var(--card-border); color:var(--text2); font-size:1rem; display:flex; align-items:center; justify-content:center; transition: background var(--transition), color var(--transition), border-color var(--transition), box-shadow var(--transition), transform var(--transition), opacity var(--transition); cursor:pointer; }
.date-step-btn:hover:not(:disabled) { background:var(--c-accent); border-color:var(--c-accent); color:#fff; }
.date-step-btn:disabled { opacity:0.35; cursor:default; }
.date-display-wrap { position:relative; }
.date-display-btn { background:none; border:none; font-family:var(--font-mono); font-size:0.72rem; color:var(--text2); cursor:pointer; padding:4px 8px; border-radius:var(--r-sm); transition: background var(--transition), color var(--transition), border-color var(--transition), box-shadow var(--transition), transform var(--transition), opacity var(--transition); letter-spacing:0.04em; white-space:nowrap; }
.date-display-btn:hover { background:var(--card); color:var(--text); }
.today-jump-btn { font-family:var(--font-mono); font-size:0.65rem; padding:3px 8px; background:var(--c-accent); color:#fff; border:none; border-radius:var(--r-pill); cursor:pointer; letter-spacing:0.06em; text-transform:uppercase; margin-left:4px; }
.today-jump-btn.hidden { display:none; }
/* ── Calendar Popover ──────────────────────────────────────── */
.cal-popover { position:absolute; top:calc(100% + 8px); left:50%; transform:translateX(-50%); background:var(--bg2); border:1px solid var(--card-border); border-radius:var(--r-card); width:240px; z-index:300; box-shadow:0 8px 32px rgba(0,0,0,0.5); padding:12px; animation:pageIn 0.18s ease; }
.cal-popover.hidden { display:none; }
.cal-popover-hdr { display:flex; align-items:center; justify-content:space-between; margin-bottom:10px; }
.cal-nav-btn { width:24px; height:24px; border:none; background:var(--card); color:var(--text2); border-radius:var(--r-sm); cursor:pointer; font-size:0.9rem; }
.cal-nav-btn:hover { background:var(--c-accent); color:#fff; }
#calMonthLabel { font-family:var(--font-mono); font-size:0.72rem; color:var(--text); letter-spacing:0.08em; text-transform:uppercase; font-weight:600; }
.cal-dow-row { display:grid; grid-template-columns:repeat(7,1fr); text-align:center; margin-bottom:4px; }
.cal-dow-row span { font-family:var(--font-mono); font-size:0.6rem; color:var(--text2); }
.cal-days { display:grid; grid-template-columns:repeat(7,1fr); gap:1px; }
.cal-day { position:relative; display:flex; flex-direction:column; align-items:center; justify-content:center; aspect-ratio:1; font-size:0.75rem; font-family:var(--font-mono); border:none; background:transparent; color:var(--text2); border-radius:var(--r-sm); cursor:pointer; transition: background var(--transition), color var(--transition), border-color var(--transition), box-shadow var(--transition), transform var(--transition), opacity var(--transition); }
.cal-day:hover:not(.future):not(.blank) { background:var(--c-accent-dim); color:var(--text); }
.cal-day.is-today { color:var(--c-accent); font-weight:700; }
.cal-day.selected { background:var(--c-accent); color:#fff; }
.cal-day.future { opacity:0.3; cursor:default; }
.cal-day.blank { cursor:default; }
.cal-dot { display:block; width:4px; height:4px; border-radius:50%; position:absolute; bottom:2px; left:50%; transform:translateX(-50%); }
.cal-dot.has-data { background:var(--text2); }
.cal-dot.goal-met { background:var(--c-ok); }
.cal-legend { display:flex; align-items:center; gap:4px; margin-top:8px; padding-top:8px; border-top:1px solid var(--card-border); font-family:var(--font-mono); font-size:0.6rem; color:var(--text2); }
.cal-legend .cal-dot { position:static; transform:none; display:inline-block; }
.btn-quick-add {
  padding:9px 18px; border-radius:var(--r-pill); font-weight:600; font-size:0.875rem;
  background:var(--c-accent); color:#fff;
  transition: background var(--spring), color var(--spring), border-color var(--spring), box-shadow var(--spring), transform var(--spring), opacity var(--spring); box-shadow:0 4px 15px rgba(108,99,255,0.3);
}
.btn-quick-add:hover { transform:translateY(-2px) scale(1.02); box-shadow:0 6px 25px rgba(108,99,255,0.4); }
.btn-quick-add:active { transform:translateY(0) scale(0.98); }

/* ===== PAGES (Ultra Smooth Zero-Flicker Transitions) ===== */
.pages { flex:1; padding:24px; overflow-y:auto; overflow-x:hidden; }
.page { display:none; opacity:0; }
.page.active { 
  display:block; 
  animation: smoothPageFade 0.18s cubic-bezier(0.16, 1, 0.3, 1) forwards; 
}
@keyframes smoothPageFade { 
  from { opacity:0; transform:translateY(4px); } 
  to { opacity:1; transform:translateY(0); } 
}

/* ===== CARDS ===== */
.card {
  background:var(--card); border:1px solid var(--card-border);
  border-radius:var(--radius); padding:20px;
  backdrop-filter:blur(10px); transition:all 0.35s cubic-bezier(0.4,0,0.2,1);
  position:relative;
  overflow:hidden;
}
/* Inner glow overlay on hover */
.card::after {
  content:'';
  position:absolute; inset:0;
  pointer-events:none;
  background: radial-gradient(ellipse 80% 60% at 50% 0%, rgba(108,99,255,0.06) 0%, transparent 70%);
  opacity:0;
  transition: opacity 0.4s ease;
}
.card:hover::after { opacity:1; }
.card::before {
  content:'';
  position:absolute;
  inset:0;
  pointer-events:none;
  background-image:
    linear-gradient(var(--tick-color),var(--tick-color)),
    linear-gradient(var(--tick-color),var(--tick-color)),
    linear-gradient(var(--tick-color),var(--tick-color)),
    linear-gradient(var(--tick-color),var(--tick-color)),
    linear-gradient(var(--tick-color),var(--tick-color)),
    linear-gradient(var(--tick-color),var(--tick-color)),
    linear-gradient(var(--tick-color),var(--tick-color)),
    linear-gradient(var(--tick-color),var(--tick-color));
  background-size:
    var(--tick-weight) var(--tick-size), var(--tick-size) var(--tick-weight),
    var(--tick-weight) var(--tick-size), var(--tick-size) var(--tick-weight),
    var(--tick-weight) var(--tick-size), var(--tick-size) var(--tick-weight),
    var(--tick-weight) var(--tick-size), var(--tick-size) var(--tick-weight);
  background-position:
    0 0, 0 0,
    100% 0, 100% 0,
    0 100%, 0 100%,
    100% 100%, 100% 100%;
  background-repeat:no-repeat;
  opacity:0.4;
  transition:opacity var(--dur-base) var(--ease-std);
}
.card:hover::before { opacity:0.9; }
.card:hover { border-color:rgba(108,99,255,0.35); box-shadow: 0 0 30px rgba(108,99,255,0.12), 0 8px 32px rgba(0,0,0,0.3); transform:translateY(-2px); }
.card-title { font-weight:600; font-size:0.95rem; margin-bottom:16px; color:var(--text); }

/* ===== BUTTONS ===== */
.btn-primary {
  padding:11px 22px; border-radius:var(--r-pill); font-weight:600; font-size:0.875rem;
  background:var(--c-accent); color:#fff;
  transition: background var(--spring), color var(--spring), border-color var(--spring), box-shadow var(--spring), transform var(--spring), opacity var(--spring); box-shadow:0 4px 15px rgba(108,99,255,0.3);
  cursor:pointer; border:none;
}
.btn-primary:hover { transform:translateY(-2px); box-shadow:0 6px 25px rgba(108,99,255,0.4); }
.btn-primary:active { transform:translateY(0) scale(0.97); }
.btn-secondary {
  padding:10px 20px; border-radius:var(--r-pill); font-weight:500; font-size:0.875rem;
  background:var(--card); border:1px solid var(--card-border); color:var(--text);
  transition: background var(--transition), color var(--transition), border-color var(--transition), box-shadow var(--transition), transform var(--transition), opacity var(--transition); cursor:pointer; display:inline-block;
}
.btn-secondary:hover { background:var(--card-hover); border-color:var(--accent); color:var(--accent); }
.btn-danger {
  padding:10px 20px; border-radius:var(--r-pill); font-weight:500; font-size:0.875rem;
  background:rgba(255,68,68,0.1); border:1px solid rgba(255,68,68,0.3); color:#FF4444;
  transition: background var(--transition), color var(--transition), border-color var(--transition), box-shadow var(--transition), transform var(--transition), opacity var(--transition); cursor:pointer; margin-top:8px; display:inline-block;
}
.btn-danger:hover { background:rgba(255,68,68,0.2); }
.btn-sm { padding:6px 14px; border-radius:var(--r-pill); font-size:0.8rem; font-weight:600; background:var(--card); border:1px solid var(--card-border); color:var(--text2); transition: background var(--transition), color var(--transition), border-color var(--transition), box-shadow var(--transition), transform var(--transition), opacity var(--transition); }
.btn-sm:hover { border-color:var(--accent); color:var(--accent); }

/* ===== DASHBOARD ===== */
.dash-grid { display:grid; grid-template-columns:1fr 320px; gap:20px; }
.dash-col-main { display:flex; flex-direction:column; gap:20px; }
.dash-col-side { display:flex; flex-direction:column; gap:16px; }

/* Calorie Card */
.calorie-card { display:flex; flex-direction:column; align-items:center; padding:28px; }
.calorie-ring-wrap { position:relative; width:220px; height:220px; flex-shrink:0; }
.calorie-svg { width:100%; height:100%; transform:rotate(-90deg); }
.ring-track { fill:none; stroke:var(--track-bg); stroke-width:16; }
.ring-fill {
  fill:none; stroke:url(#ringGrad); stroke-width:16; stroke-linecap:round;
  stroke-dasharray:565.5; stroke-dashoffset:565.5;
  transition:stroke-dashoffset 1.2s cubic-bezier(0.4,0,0.2,1), filter 0.5s ease;
  filter:drop-shadow(0 0 8px rgba(108,99,255,0.5));
}
/* Calorie ring glow pulse when goal is met */
.ring-fill.goal-complete {
  filter:drop-shadow(0 0 14px rgba(0,196,106,0.7)) drop-shadow(0 0 30px rgba(0,196,106,0.3));
  animation: ringPulseGlow 2s ease-in-out infinite alternate;
}
@keyframes ringPulseGlow {
  from { filter:drop-shadow(0 0 14px rgba(0,196,106,0.5)) drop-shadow(0 0 24px rgba(0,196,106,0.2)); }
  to   { filter:drop-shadow(0 0 20px rgba(0,196,106,0.8)) drop-shadow(0 0 40px rgba(0,196,106,0.4)); }
}
.ring-center { position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center; }
.ring-remain { font-family:var(--font-display); font-size:clamp(2.4rem,5vw,3.2rem); font-weight:800; background:linear-gradient(135deg,var(--c-accent),var(--c-accent-bright)); -webkit-background-clip:text; -webkit-text-fill-color:transparent; line-height:1; transition: transform 0.3s ease; }
.ring-sub { font-family:var(--font-sans); font-size:0.72rem; color:var(--text2); margin-top:4px; letter-spacing:0.04em; text-transform:uppercase; font-weight:600; }
.ring-pct { font-family:var(--font-sans); font-size:0.78rem; font-weight:700; color:var(--accent); margin-top:4px; }
.cal-stats-row { display:flex; gap:24px; margin-top:20px; }
.cal-stat { text-align:center; }
.cs-val { font-family:var(--font-display); font-size:1.4rem; font-weight:700; }
.cs-lbl { font-family:var(--font-sans); font-size:0.72rem; color:var(--text2); margin-top:3px; letter-spacing:0.02em; font-weight:600; }

/* Macro Bars */
.macro-card .macro-bars { display:flex; flex-direction:column; gap:14px; }
.macro-row { display:flex; align-items:center; gap:12px; }
.macro-label { font-family:var(--font-sans); display:flex; align-items:center; gap:6px; font-size:0.74rem; font-weight:600; color:var(--text2); width:70px; flex-shrink:0; letter-spacing:0.02em; }
.macro-dot { width:8px; height:8px; border-radius:50%; flex-shrink:0; }
.protein-dot { background:var(--c-protein); }
.carbs-dot { background:var(--c-carbs); }
.fat-dot { background:var(--c-fat); }
.fiber-dot { background:var(--c-fiber); }
.macro-bar-wrap { flex:1; height:8px; background:var(--track-bg); border-radius:4px; overflow:hidden; }
.macro-bar-fill { height:100%; border-radius:4px; transition:width 1s cubic-bezier(0.4,0,0.2,1); width:0; position:relative; overflow:hidden; }
.macro-bar-fill::after {
  content:''; position:absolute; inset:0;
  background:linear-gradient(90deg, transparent 0%, rgba(255,255,255,0.2) 50%, transparent 100%);
  animation: macroShimmer 2.5s ease-in-out infinite;
}
@keyframes macroShimmer {
  0% { transform:translateX(-100%); }
  100% { transform:translateX(200%); }
}
.protein-fill { background: linear-gradient(90deg, var(--c-protein), #b8a4ff); }
.carbs-fill { background: linear-gradient(90deg, var(--c-carbs), #d4c8ff); }
.fat-fill { background: linear-gradient(90deg, var(--c-fat), #8899aa); }
.fiber-fill { background: linear-gradient(90deg, var(--c-fiber), #4fa87a); }
.macro-val { font-family:var(--font-sans); font-size:0.74rem; font-weight:600; color:var(--text2); width:90px; text-align:right; flex-shrink:0; }

/* Water Card */
.water-card { }
.water-cups { display:flex; flex-wrap:wrap; gap:6px; margin-bottom:8px; }
.water-cup {
  width:32px; height:40px; border-radius:4px 4px 8px 8px;
  background:var(--surface); border:1.5px solid var(--card-border);
  cursor:pointer; transition: background var(--spring), color var(--spring), border-color var(--spring), box-shadow var(--spring), transform var(--spring), opacity var(--spring); display:flex; align-items:flex-end;
  overflow:hidden; position:relative;
}
.water-cup.filled { border-color:#38BDF8; }
.water-cup .water-fill {
  position:absolute; bottom:0; left:0; right:0;
  background:linear-gradient(0deg,#0EA5E9,#38BDF8);
  transition:height var(--spring);
}
/* Water cup ripple effect on fill */
@keyframes waterRipple {
  0% { box-shadow: inset 0 0 0 0 rgba(56,189,248,0.5); }
  50% { box-shadow: inset 0 0 12px 4px rgba(56,189,248,0.3); }
  100% { box-shadow: inset 0 0 0 0 rgba(56,189,248,0); }
}
.water-cup.just-filled { animation: waterRipple 0.6s ease-out; }
.water-cup:hover { transform:translateY(-3px) scale(1.1); box-shadow: 0 4px 12px rgba(56,189,248,0.25); }
.water-info { font-family:var(--font-mono); font-size:0.72rem; color:var(--text2); text-align:center; letter-spacing:0.05em; }

/* Streak Card */
.streak-card { text-align:center; padding:20px; }
.streak-main { margin-bottom:16px; }
.streak-flame-big { font-size:2.5rem; display:block; margin-bottom:4px; animation:flamePulse 1s ease-in-out infinite alternate; }
@keyframes flamePulse { from { transform:scale(1); } to { transform:scale(1.1) rotate(3deg); } }
.streak-num { font-family:var(--font-display); font-size:3rem; font-weight:900; color:var(--text); line-height:1; }
.streak-lbl { font-family:var(--font-mono); font-size:0.65rem; color:var(--text2); margin-top:4px; letter-spacing:0.1em; text-transform:uppercase; }
.xp-row { display:flex; align-items:center; gap:8px; margin-top:12px; }
.xp-icon { font-size:1rem; }
.xp-bar-wrap { flex:1; height:6px; background:var(--track-bg); border-radius:3px; overflow:hidden; }
.xp-bar-fill { height:100%; background:var(--c-accent); border-radius:3px; transition:width 1s ease; width:0; }
.xp-val { font-family:var(--font-mono); font-size:0.68rem; color:var(--text2); white-space:nowrap; }

/* Weight Quick */
.weight-quick-card { }
.weight-display { font-family:var(--font-display); font-size:1.8rem; font-weight:700; color:var(--text); margin:8px 0; }

/* Meals Summary */
.meals-summary { display:flex; flex-direction:column; gap:8px; }
.meal-sum-item { display:flex; align-items:center; justify-content:space-between; padding:8px 12px; border-radius:var(--r-sm); background:var(--surface); border:1px solid var(--card-border); }
.msi-name { font-size:0.85rem; font-weight:500; }
.msi-cal { font-size:0.8rem; color:var(--text2); }

/* AI Suggestions */
.ai-card { }
.ai-sub { font-size:0.78rem; color:var(--text2); margin-top:-8px; margin-bottom:12px; }
/* ── Lazy food image loading ─────────────────────────────────── */
.food-img { display:block; width:100%; height:100%; object-fit:cover; transition:filter 0.55s ease, transform 0.55s ease; }
.food-img--loading { filter:blur(6px); transform:scale(1.03); }
.food-img--loaded  { filter:blur(0); transform:scale(1); }

/* ── Photo + Quick Actions row ────────────────────────────────── */
.photo-actions-row {
  display:grid; grid-template-columns:1fr 1fr; gap:20px; align-items:stretch;
  width:100%;
}
#macroPhotoCardWrap {
  width:100%; max-width:100%;
  display:flex; min-width:0;
}

/* ── Quick Actions Panel ──────────────────────────────────────── */
.quick-actions-panel {
  width:100%; min-width:0;
  display:flex; flex-direction:column; gap:12px;
  padding:16px 14px;
  min-height:300px;
}
.qa-summary {
  font-size:0.82rem; font-weight:600;
  color:var(--text2); text-align:center;
  letter-spacing:0.015em;
  padding:8px 10px;
  background:rgba(108,99,255,0.07);
  border:1px solid rgba(108,99,255,0.15);
  border-radius:10px;
  line-height:1.4;
}
.qa-summary.goal-met {
  color:#00C46A;
  background:rgba(0,196,106,0.08);
  border-color:rgba(0,196,106,0.25);
}
.qa-grid {
  display:grid; grid-template-columns:repeat(2, minmax(0, 1fr));
  gap:12px; flex:1; width:100%;
}
.qa-btn {
  display:flex; flex-direction:column;
  align-items:center; justify-content:center;
  gap:6px; padding:12px 4px;
  background:rgba(108,99,255,0.07);
  border:1px solid rgba(108,99,255,0.18);
  border-radius:14px;
  cursor:pointer; color:var(--text);
  transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease, transform 0.15s ease, opacity 0.15s ease;
  font-family:inherit;
  min-width:0; width:100%; box-sizing:border-box;
}
.qa-btn:hover {
  background:rgba(108,99,255,0.16);
  border-color:rgba(108,99,255,0.42);
  transform:translateY(-2px);
  box-shadow:0 6px 20px rgba(108,99,255,0.18);
}
.qa-btn:focus-visible {
  outline:2px solid var(--accent);
  outline-offset:2px;
}
.qa-btn:active { transform:translateY(0); }
.qa-icon { font-size:1.4rem; line-height:1; }
.qa-label {
  font-family:var(--font-display);
  font-size:0.72rem; font-weight:700;
  color:var(--text); white-space:nowrap;
  text-align:center; letter-spacing:-0.2px; line-height:1.2;
}

/* Macro Photo Card ────────────────────────────────────────────── */

.macro-photo-card {
  position:relative; min-height:290px; height:100%; overflow:hidden; padding:0;
  border-radius:20px !important;
  background:var(--c-bg-2);
  box-shadow:0 12px 40px rgba(0,0,0,0.5);
  width:100%;
}

/* Full-bleed photo fills the whole card */
.mpc-photo {
  position:absolute; inset:0;
  background:linear-gradient(135deg, var(--c-bg-3), var(--c-bg-1));
}
.mpc-photo .food-img {
  width:100%; height:100%;
  object-fit:cover; object-position:center 25%;
}

/* Ring chips — floating pills directly on the photo */
.mpc-glass {
  position:absolute; top:0; left:0; bottom:0; z-index:3;
  display:flex; flex-direction:column; justify-content:center;
  gap:8px; padding:16px 0 16px 14px;
  background:none; backdrop-filter:none; border:none; width:auto;
}
.mpc-ring-item {
  display:flex; flex-direction:column; align-items:center; gap:3px;
  background:rgba(255,255,255,0.08);
  backdrop-filter:blur(18px) saturate(1.8); -webkit-backdrop-filter:blur(18px) saturate(1.8);
  border:1px solid rgba(255,255,255,0.22);
  box-shadow:0 8px 24px rgba(0,0,0,0.25), inset 0 1px 1px rgba(255,255,255,0.28);
  border-radius:14px; padding:6px 8px;
  width:66px;
  transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease, transform 0.15s ease, opacity 0.15s ease;
}
.mpc-ring-item:hover {
  background:rgba(255,255,255,0.14);
  border-color:rgba(255,255,255,0.35);
  transform:translateY(-2px);
}
.mpc-ring-lbl {
  font-family:var(--font-mono); font-size:0.52rem; font-weight:700; text-transform:uppercase;
  letter-spacing:0.1em; color:rgba(255,255,255,0.85);
  text-shadow:0 1px 3px rgba(0,0,0,0.6);
}
.mpc-ring-wrap { position:relative; width:42px; height:42px; flex-shrink:0; }
.mpc-ring-svg  { width:42px; height:42px; }
.mpc-ring-track { fill:none; stroke:rgba(255,255,255,0.18); stroke-width:3.5; }
.mpc-ring-fill  { fill:none; stroke-width:3.5; stroke-linecap:round; transition:stroke-dashoffset 1.1s cubic-bezier(0.4,0,0.2,1); }
.mpc-ring-num {
  position:absolute; inset:0; display:flex; align-items:center; justify-content:center;
  font-family:var(--font-display); font-size:0.88rem; font-weight:800; line-height:1;
  text-shadow:0 1px 4px rgba(0,0,0,0.7);
}

/* Caption — bottom fade over photo */
.mpc-caption {
  position:absolute; bottom:0; left:0; right:0; z-index:3;
  padding:32px 14px 14px;
  background:linear-gradient(to top, rgba(0,0,0,0.75) 0%, transparent 100%);
  font-family:var(--font-display); font-size:0.82rem; font-weight:600; font-style:italic;
  color:rgba(255,255,255,0.95); line-height:1.4;
  text-shadow:0 1px 8px rgba(0,0,0,0.9);
}

/* ── AI Suggestions with photo strips ───────────────────────── */
.ai-suggestions { display:flex; flex-direction:column; gap:8px; }
.ai-sug-item {
  border-radius:var(--r-sm); border:1px solid rgba(108,99,255,0.2);
  background:rgba(108,99,255,0.06); cursor:pointer; overflow:hidden;
  transition: background var(--transition), color var(--transition), border-color var(--transition), box-shadow var(--transition), transform var(--transition), opacity var(--transition);
}
.ai-sug-item:hover { border-color:rgba(108,99,255,0.4); background:rgba(108,99,255,0.1); transform:translateX(4px); }
.asi-photo {
  height:68px; position:relative; overflow:hidden;
  background:linear-gradient(135deg, var(--c-bg-3) 0%, var(--c-bg-1) 100%);
}
.asi-photo .food-img { object-position:center 35%; }
.asi-photo-overlay {
  position:absolute; inset:0; z-index:1;
  background:linear-gradient(to bottom, transparent 30%, rgba(9,12,19,0.55) 100%);
}
.asi-body { padding:9px 12px 10px; }
.asi-top { display:flex; align-items:center; gap:8px; }
.asi-emoji { font-size:1.2rem; }
.asi-name { font-size:0.85rem; font-weight:600; }
.asi-cal { font-size:0.75rem; color:var(--text2); margin-left:auto; }
.asi-macro { font-size:0.72rem; color:var(--text3); margin-top:4px; }

/* Weekly Chart */
.chart-card { min-height: 250px; }
.chart-card canvas { width: 100% !important; max-height: 220px; }

/* ===== FOOD LOG ===== */
.foodlog-nav { display:flex; align-items:center; justify-content:center; gap:24px; margin-bottom:16px; }
.day-nav-btn { width:36px; height:36px; border-radius:50%; background:var(--card); border:1px solid var(--card-border); color:var(--text); font-size:1.2rem; display:flex; align-items:center; justify-content:center; transition: background var(--transition), color var(--transition), border-color var(--transition), box-shadow var(--transition), transform var(--transition), opacity var(--transition); }
.foodlog-date {
  font-family: var(--font-display);
  font-size: 1.05rem;
  font-weight: 600;
  cursor: pointer;
  padding: 6px 14px;
  border-radius: var(--radius-sm);
  background: var(--card);
  border: 1px solid var(--card-border);
  transition: background var(--transition), border-color var(--transition), transform var(--transition);
  display: inline-flex;
  align-items: center;
  gap: 6px;
  user-select: none;
}
.foodlog-date:hover {
  background: rgba(108,99,255,0.08);
  border-color: var(--accent);
}
.fl-total { font-family:var(--font-display); font-size:1.8rem; font-weight:800; color:var(--accent); }
.fl-net { font-size:0.85rem; color:var(--text2); margin-left:12px; }
.meal-section { margin-bottom:20px; }
.meal-section-header {
  display:flex; align-items:center; justify-content:space-between;
  padding:14px 16px; background:var(--card); border:1px solid var(--card-border);
  border-radius:var(--radius-sm); cursor:pointer; transition: background var(--transition), color var(--transition), border-color var(--transition), box-shadow var(--transition), transform var(--transition), opacity var(--transition);
  border-bottom: 2px solid transparent;
}
.meal-section-header:hover {
  border-color:rgba(108,99,255,0.3);
  border-bottom-color: var(--c-accent);
  background: linear-gradient(135deg, var(--card) 0%, rgba(108,99,255,0.04) 100%);
}
.msh-left { display:flex; align-items:center; gap:10px; }
.msh-icon { font-size:1.2rem; }
.msh-name { font-weight:600; font-size:0.95rem; }
.msh-cal { font-size:0.85rem; color:var(--text2); }
.msh-right { display:flex; align-items:center; gap:10px; }
.add-food-btn { padding:6px 14px; border-radius:var(--r-pill); background:rgba(108,99,255,0.15); border:1px solid rgba(108,99,255,0.3); color:var(--accent); font-size:0.8rem; font-weight:600; transition: background var(--transition), color var(--transition), border-color var(--transition), box-shadow var(--transition), transform var(--transition), opacity var(--transition); }
.add-food-btn:hover { background:rgba(108,99,255,0.25); transform:scale(1.05); }
.msh-chevron { transition:transform var(--transition); color:var(--text2); }
.meal-items { overflow:hidden; transition: background var(--transition), color var(--transition), border-color var(--transition), box-shadow var(--transition), transform var(--transition), opacity var(--transition); }
/* Food item slide-in animation */
@keyframes foodSlideIn {
  from { opacity:0; transform:translateX(-16px); }
  to   { opacity:1; transform:translateX(0); }
}
.food-item {
  display:flex; align-items:center; gap:12px; padding:10px 16px 10px 40px;
  border-top:1px solid rgba(255,255,255,0.04); transition:background var(--transition);
  animation: foodSlideIn 0.3s ease both;
}
.food-item:nth-child(1) { animation-delay: 0.02s; }
.food-item:nth-child(2) { animation-delay: 0.06s; }
.food-item:nth-child(3) { animation-delay: 0.10s; }
.food-item:nth-child(4) { animation-delay: 0.14s; }
.food-item:nth-child(5) { animation-delay: 0.18s; }
.food-item:hover { background:var(--surface); }
.fi-name { flex:1; font-size:0.875rem; }
.fi-serving { font-size:0.78rem; color:var(--text2); }
.fi-macros { display:flex; gap:8px; font-size:0.75rem; color:var(--text2); }
.fi-macro-pill { padding:2px 6px; border-radius:4px; background:var(--track-bg); }
.fi-cal { font-weight:600; font-size:0.875rem; min-width:60px; text-align:right; }
/* Color-coded calorie indicator */
.fi-cal.cal-under { color: var(--c-ok); }
.fi-cal.cal-near  { color: var(--c-warn); }
.fi-cal.cal-over  { color: var(--c-err); }
.fi-actions { display:flex; align-items:center; gap:6px; opacity:0; transition:opacity var(--transition); }
.food-item:hover .fi-actions { opacity:1; }
.fi-edit, .fi-delete { font-size:0.9rem; cursor:pointer; padding:4px 6px; border-radius:4px; transition:background var(--transition), transform 0.15s ease; }
.fi-edit { color:var(--c-accent, #C084FC); }
.fi-edit:hover { background:rgba(192, 132, 252, 0.15); transform:scale(1.15); }
.fi-delete { color:var(--accent2, #F87171); }
.fi-delete:hover { background:rgba(248, 113, 113, 0.15); transform:scale(1.15); }
@media (hover: none) {
  .fi-actions { opacity: 1; }
}
.water-log-card { margin-top:8px; }
.water-cups-big { display:flex; flex-wrap:wrap; gap:8px; }
.water-cup-big { width:42px; height:52px; border-radius:6px 6px 10px 10px; background:var(--surface); border:2px solid var(--card-border); cursor:pointer; transition: background var(--spring), color var(--spring), border-color var(--spring), box-shadow var(--spring), transform var(--spring), opacity var(--spring); position:relative; overflow:hidden; }
.water-cup-big.filled { border-color:#38BDF8; }
.water-cup-big .water-fill { position:absolute; bottom:0; left:0; right:0; background:linear-gradient(0deg,#0EA5E9,#38BDF8); transition:height var(--spring); }
.water-cup-big:hover { transform:translateY(-4px) scale(1.05); }

/* ===== CUSTOM FOODS & RECIPES ===== */
.page-header { display:flex; align-items:center; justify-content:space-between; margin-bottom:20px; }
.page-header h2 { font-family:var(--font-display); font-size:1.5rem; font-weight:700; }
.custom-foods-list, .recipes-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(260px,1fr)); gap:16px; }
.custom-food-card, .recipe-card { padding:20px; cursor:pointer; transition: background var(--transition), color var(--transition), border-color var(--transition), box-shadow var(--transition), transform var(--transition), opacity var(--transition); position:relative; }
.custom-food-card:hover, .recipe-card:hover { transform:translateY(-4px); }
.recipe-emoji { font-size:2.5rem; margin-bottom:12px; display:block; }
.recipe-name { font-size:1rem; font-weight:700; margin-bottom:6px; }
.recipe-meta { font-size:0.8rem; color:var(--text2); display:flex; gap:12px; flex-wrap:wrap; }
.recipe-cal { font-size:1.05rem; font-weight:700; color:var(--accent); margin-top:8px; }
.recipe-delete-btn { position:absolute; top:12px; right:12px; color:var(--accent2); opacity:0; transition:opacity var(--transition); background:none; border:none; cursor:pointer; font-size:1.1rem; padding:4px 8px; border-radius:6px; }
.custom-food-card:hover .recipe-delete-btn, .recipe-card:hover .recipe-delete-btn { opacity:0.8; }
.recipe-delete-btn:hover { opacity:1 !important; background:rgba(239,68,68,0.15); }

/* Exercise Burn Live Estimate */
.ex-burn-estimate { display:flex; align-items:center; gap:8px; padding:10px 14px; margin-bottom:14px; background:rgba(250,130,49,0.12); border:1px solid rgba(250,130,49,0.28); border-radius:10px; font-size:0.85rem; font-weight:600; color:#fb923c; }
.ex-burn-icon { font-size:1.1rem; }

/* ===== EXERCISE ===== */
.ex-summary-row { display:grid; grid-template-columns:repeat(3,1fr); gap:16px; margin-bottom:20px; }
.ex-sum-card { text-align:center; padding:20px; }
.ex-sum-val { font-family:var(--font-display); font-size:1.8rem; font-weight:800; color:var(--text); }
.ex-sum-lbl { font-family:var(--font-mono); font-size:0.62rem; color:var(--text2); margin-top:4px; letter-spacing:0.08em; text-transform:uppercase; }
.exercise-item { display:flex; align-items:center; gap:14px; padding:14px 16px; background:var(--card); border:1px solid var(--card-border); border-radius:var(--radius-sm); margin-bottom:8px; transition: background var(--transition), color var(--transition), border-color var(--transition), box-shadow var(--transition), transform var(--transition), opacity var(--transition); }
.exercise-item:hover { transform:translateX(4px); border-color:rgba(250,130,49,0.3); }
.ex-icon { font-size:1.4rem; }
.ex-info { flex:1; }
.ex-name { font-weight:600; font-size:0.9rem; }
.ex-meta { font-size:0.78rem; color:var(--text2); margin-top:2px; }
.ex-cal-badge { padding:4px 10px; border-radius:var(--r-pill); background:rgba(250,130,49,0.15); color:#FA8231; font-size:0.8rem; font-weight:600; }
.ex-delete { color:var(--accent2); opacity:0; transition:opacity var(--transition); cursor:pointer; }
.exercise-item:hover .ex-delete { opacity:1; }

/* ===== PROGRESS ===== */
.prog-tabs { display:flex; gap:8px; margin-bottom:16px; flex-wrap:wrap; }
.ptab { padding:9px 20px; border-radius:var(--r-pill); font-size:0.875rem; font-weight:500; background:var(--card); border:1px solid var(--card-border); color:var(--text2); transition: background var(--transition), color var(--transition), border-color var(--transition), box-shadow var(--transition), transform var(--transition), opacity var(--transition); cursor:pointer; }
.ptab:hover { border-color:var(--accent); color:var(--accent); }
.ptab.active { background:var(--c-accent); border-color:transparent; color:#fff; font-weight:600; box-shadow:0 0 12px var(--c-accent-glow); }
.ptab-content { display:none; }
.ptab-content.active { display:block; }

/* Progress Action & Reminder Bar */
.prog-action-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  background: var(--card);
  border: 1px solid var(--card-border);
  border-radius: var(--r-card);
  padding: 14px 18px;
  margin-bottom: 16px;
  flex-wrap: wrap;
}
.pab-left { display: flex; flex-direction: column; gap: 2px; }
.pab-title { font-size: 0.95rem; font-weight: 700; color: #FFFFFF; font-family: var(--font-display); }
.pab-subtitle { font-size: 0.78rem; color: var(--text2); }
.pab-actions { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.reminder-cadence-picker { display: flex; align-items: center; gap: 6px; }
.rcp-label { font-size: 0.78rem; color: var(--text2); font-weight: 600; }
.rcp-select {
  padding: 6px 10px;
  background: var(--surface);
  border: 1px solid var(--card-border);
  border-radius: var(--r-sm);
  color: var(--text);
  font-size: 0.78rem;
  font-weight: 600;
  outline: none;
  cursor: pointer;
  transition: border-color 0.2s;
}
.rcp-select:focus { border-color: var(--c-accent); }
.pab-btn { padding: 8px 16px; font-size: 0.82rem; font-weight: 700; border-radius: var(--r-pill); display: flex; align-items: center; gap: 6px; }

/* Progress Check-In Alert */
.prog-checkin-alert {
  background: linear-gradient(135deg, rgba(245, 158, 11, 0.15), rgba(168, 85, 247, 0.12));
  border: 1px solid rgba(245, 158, 11, 0.4);
  border-radius: var(--r-card);
  padding: 14px 18px;
  margin-bottom: 16px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  animation: alertPulseGlow 2.5s infinite alternate ease-in-out;
}
@keyframes alertPulseGlow {
  0% { box-shadow: 0 4px 12px rgba(245, 158, 11, 0.05); border-color: rgba(245, 158, 11, 0.3); }
  100% { box-shadow: 0 4px 24px rgba(245, 158, 11, 0.25); border-color: rgba(245, 158, 11, 0.7); }
}
.pca-icon { font-size: 1.6rem; flex-shrink: 0; }
.pca-body { flex: 1; }
.pca-title { font-size: 0.92rem; font-weight: 700; color: #FDE68A; margin-bottom: 2px; }
.pca-desc { font-size: 0.78rem; color: var(--text); line-height: 1.4; }
.pca-btn { padding: 8px 16px; font-size: 0.8rem; font-weight: 700; white-space: nowrap; flex-shrink: 0; }

.weight-stats-row { display:grid; grid-template-columns:repeat(4,1fr); gap:12px; margin-bottom:16px; }
.ws-card { text-align:center; padding:16px 12px; display:flex; flex-direction:column; justify-content:center; align-items:center; }
.ws-card.highlight { background:rgba(108,99,255,0.1); border-color:rgba(108,99,255,0.35); }
.ws-val { font-family:var(--font-display); font-size:1.6rem; font-weight:800; }
.ws-lbl { font-family:var(--font-mono); font-size:0.62rem; color:var(--text2); margin-top:4px; letter-spacing:0.08em; text-transform:uppercase; }
.ws-sub { font-size: 0.72rem; color: var(--text3); margin-top: 4px; font-weight: 500; }

/* Chart Header & Legend */
.chart-header-row { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; flex-wrap: wrap; gap: 8px; }
.chart-legend-pills { display: flex; align-items: center; gap: 8px; font-size: 0.75rem; }
.cl-pill { padding: 3px 8px; border-radius: 99px; font-weight: 600; }
.current-pill { background: rgba(67, 233, 123, 0.15); color: #43E97B; border: 1px solid rgba(67, 233, 123, 0.3); }
.goal-pill { background: rgba(168, 85, 247, 0.15); color: #C084FC; border: 1px dashed rgba(168, 85, 247, 0.4); }

.weight-chart-empty { text-align: center; padding: 32px 16px; }
.wce-icon { font-size: 2.2rem; margin-bottom: 8px; }
.wce-title { font-size: 1.1rem; font-weight: 700; color: #FFFFFF; margin-bottom: 4px; }
.wce-desc { font-size: 0.82rem; color: var(--text2); max-width: 360px; margin: 0 auto 16px; line-height: 1.4; }

/* Progress History Card */
.prog-history-card { margin-top: 16px; padding: 18px 20px; }
.phc-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 14px; }
.phc-count { font-size: 0.75rem; color: var(--text2); background: rgba(255,255,255,0.06); padding: 2px 8px; border-radius: 99px; }
.weight-history-list { display: flex; flex-direction: column; gap: 8px; max-height: 280px; overflow-y: auto; }
.wh-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 14px;
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid var(--card-border);
  border-radius: var(--r-sm);
  transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease, transform 0.15s ease, opacity 0.15s ease;
}
.wh-item:hover { background: rgba(255, 255, 255, 0.05); border-color: rgba(168, 85, 247, 0.3); }
.wh-left { display: flex; align-items: center; gap: 10px; }
.wh-dot { width: 8px; height: 8px; border-radius: 50%; background: #43E97B; }
.wh-date { font-size: 0.82rem; font-weight: 600; color: var(--text); }
.wh-right { display: flex; align-items: center; gap: 12px; }
.wh-weight { font-size: 0.92rem; font-weight: 700; color: #FFFFFF; font-family: var(--font-display); }
.wh-diff { font-size: 0.75rem; font-weight: 600; padding: 2px 6px; border-radius: 4px; }
.wh-diff.loss { color: #34D399; background: rgba(52, 211, 153, 0.12); }
.wh-diff.gain { color: #F59E0B; background: rgba(245, 158, 11, 0.12); }
.wh-diff.same { color: var(--text3); }
.wh-delete-btn { background: transparent; border: none; color: var(--text3); cursor: pointer; font-size: 0.85rem; padding: 4px; border-radius: 4px; transition: color 0.15s; }
.wh-delete-btn:hover { color: #EF4444; }

.measurements-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(160px,1fr)); gap:12px; }
.meas-card { padding:16px; text-align:center; }
.meas-val { font-family:var(--font-display); font-size:1.6rem; font-weight:700; color:var(--accent); }
.meas-lbl { font-family:var(--font-mono); font-size:0.62rem; color:var(--text2); margin-top:4px; letter-spacing:0.08em; text-transform:uppercase; }
.meas-change { font-size:0.75rem; margin-top:4px; }
.meas-change.pos { color:var(--accent2); }
.meas-change.neg { color:var(--accent3); }

/* ===== FASTING ===== */
.fasting-wrap { max-width:520px; margin:0 auto; text-align:center; }
.fasting-wrap h2 { font-family:var(--font-display); font-size:1.6rem; font-weight:700; margin-bottom:20px; }
.fast-types { display:flex; gap:10px; justify-content:center; margin-bottom:16px; flex-wrap:wrap; }
.fast-type-btn { padding:10px 20px; border-radius:var(--r-pill); font-weight:600; font-size:0.875rem; background:var(--card); border:1px solid var(--card-border); color:var(--text2); transition: background var(--transition), color var(--transition), border-color var(--transition), box-shadow var(--transition), transform var(--transition), opacity var(--transition); cursor:pointer; }
.fast-type-btn.active { background:var(--c-accent); border-color:transparent; color:#fff; }
.fast-info { color:var(--text2); font-size:0.85rem; margin-bottom:24px; }
.fasting-ring-wrap { position:relative; width:280px; height:280px; margin:0 auto 24px; }
.fasting-svg { width:100%; height:100%; transform:rotate(-90deg); }
.fast-track { fill:none; stroke:var(--track-bg); stroke-width:18; }
.fast-fill {
  fill:none; stroke:url(#ringGrad); stroke-width:18; stroke-linecap:round;
  stroke-dasharray:753.9; stroke-dashoffset:753.9;
  transition:stroke-dashoffset 0.5s ease;
  filter:drop-shadow(0 0 8px rgba(108,99,255,0.5));
}
.fast-fill.eating { stroke:url(#ringGradGreen); filter:drop-shadow(0 0 8px rgba(67,233,123,0.5)); }
.fast-center { position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center; }
.fast-time { font-family:var(--font-mono); font-size:2.2rem; font-weight:600; color:var(--c-accent); letter-spacing:0.04em; }
.fast-stage { color:var(--text2); font-size:0.85rem; margin-top:4px; }
.fast-pct { color:var(--accent); font-weight:600; margin-top:4px; }
.fast-controls { display:flex; gap:12px; justify-content:center; margin-bottom:24px; }
.fast-ctrl-btn { padding:12px 28px; min-width:140px; }
.fast-schedule { background:var(--card); border:1px solid var(--card-border); border-radius:var(--radius-sm); padding:16px; margin-bottom:24px; text-align:left; }
.fast-schedule-item { display:flex; justify-content:space-between; align-items:center; padding:6px 0; border-bottom:1px solid var(--card-border); font-size:0.875rem; }
.fast-schedule-item:last-child { border-bottom:none; }
.fsi-label { color:var(--text2); }
.fsi-value { font-weight:600; }
.fast-history-section { text-align:left; }
.fast-history-section h3 { font-size:1rem; font-weight:600; margin-bottom:12px; }
.fast-hist-item { display:flex; justify-content:space-between; padding:10px 14px; background:var(--card); border:1px solid var(--card-border); border-radius:var(--r-sm); margin-bottom:8px; font-size:0.85rem; }
.fhi-dur { font-weight:600; color:var(--accent); }

/* ===== ACHIEVEMENTS ===== */
.xp-level-card { display:flex; align-items:center; gap:20px; margin-bottom:20px; }
.level-num { font-family:var(--font-display); font-size:3rem; font-weight:900; color:var(--c-accent); }
.level-lbl { font-family:var(--font-mono); font-size:0.62rem; color:var(--text2); letter-spacing:0.1em; text-transform:uppercase; }
.level-progress-wrap { flex:1; }
.level-bar { height:6px; background:var(--track-bg); border-radius:3px; overflow:hidden; margin-bottom:6px; }
.level-fill { height:100%; background: linear-gradient(90deg, var(--c-accent), var(--c-accent-bright)); border-radius:3px; transition:width 1s ease; position:relative; }
.level-xp-info { font-size:0.8rem; color:var(--text2); }
.total-xp-display { font-family:var(--font-mono); font-weight:600; font-size:0.78rem; color:var(--accent); letter-spacing:0.06em; }
.ach-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(200px,1fr)); gap:12px; }
.ach-item {
  padding:16px; border-radius:var(--radius-sm); background:var(--card);
  border:1px solid var(--card-border); text-align:center;
  transition:all 0.35s cubic-bezier(0.4,0,0.2,1); position:relative; overflow:hidden;
}
.ach-item:hover { transform:translateY(-3px); }
/* Unlocked: shimmer effect */
.ach-item.unlocked { border-color:rgba(108,99,255,0.4); }
.ach-item.unlocked::before {
  content:''; position:absolute; inset:0;
  background: linear-gradient(105deg, transparent 30%, rgba(108,99,255,0.08) 45%, rgba(139,133,255,0.15) 50%, rgba(108,99,255,0.08) 55%, transparent 70%);
  animation: achShimmer 3s ease-in-out infinite;
}
@keyframes achShimmer {
  0% { transform:translateX(-100%); }
  100% { transform:translateX(200%); }
}
/* Locked: frosted glass overlay */
.ach-item.locked {
  opacity:0.55;
  filter:grayscale(0.6) blur(0.3px);
}
.ach-item.locked::before {
  content:'🔒'; position:absolute; inset:0;
  display:flex; align-items:center; justify-content:center;
  font-size:1.6rem;
  background:rgba(14,18,32,0.45);
  backdrop-filter:blur(2px); -webkit-backdrop-filter:blur(2px);
  z-index:2;
  opacity:0; transition:opacity 0.25s;
}
.ach-item.locked:hover::before { opacity:1; }
.ach-icon { font-size:2rem; margin-bottom:8px; display:block; }
.ach-name { font-weight:700; font-size:0.875rem; margin-bottom:4px; }
.ach-desc { font-size:0.75rem; color:var(--text2); margin-bottom:8px; }
.ach-xp { font-size:0.75rem; font-weight:600; color:var(--accent); }
.ach-unlocked-stamp { position:absolute; top:8px; right:8px; font-size:0.7rem; background:rgba(67,233,123,0.2); color:#43E97B; padding:2px 6px; border-radius:4px; font-weight:600; }

/* ===== INSIGHTS ===== */
.insights-header { margin-bottom:20px; }
.insights-header p { color:var(--text2); font-size:0.875rem; margin-top:4px; }
.score-section { margin-bottom:20px; }
.score-card { display:flex; align-items:center; gap:28px; flex-wrap:wrap; }
.score-ring-wrap { position:relative; width:180px; height:180px; flex-shrink:0; }
.score-svg { width:100%; height:100%; transform:rotate(-90deg); }
.score-track { fill:none; stroke:var(--track-bg); stroke-width:14; }
.score-fill { fill:none; stroke:url(#ringGradGreen); stroke-width:14; stroke-linecap:round; stroke-dasharray:439.8; stroke-dashoffset:439.8; transition:stroke-dashoffset 1.5s ease; filter:drop-shadow(0 0 8px rgba(67,233,123,0.4)); }
.score-center { position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center; }
.score-num { font-family:var(--font-display); font-size:2.6rem; font-weight:900; color:var(--c-accent); }
.score-lbl { font-size:0.75rem; color:var(--text2); }
.score-breakdown { display:flex; flex-direction:column; gap:8px; flex:1; }
.sb-row { display:flex; align-items:center; gap:10px; }
.sb-label { font-size:0.8rem; color:var(--text2); width:100px; }
.sb-bar-wrap { flex:1; height:6px; background:var(--track-bg); border-radius:3px; overflow:hidden; }
.sb-bar-fill { height:100%; border-radius:3px; background:var(--c-accent); }
.sb-score { font-size:0.8rem; font-weight:600; width:30px; text-align:right; }
.insights-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(280px,1fr)); gap:16px; }
.insight-card { padding:20px; border-left:3px solid; }
.insight-card.positive { border-left-color:#43E97B; }
.insight-card.warning { border-left-color:#FFC300; }
.insight-card.info { border-left-color:#6C63FF; }
.insight-card.negative { border-left-color:#FF6584; }
.ic-icon { font-size:1.5rem; margin-bottom:8px; }
.ic-title { font-weight:700; font-size:0.95rem; margin-bottom:6px; }
.ic-text { font-size:0.82rem; color:var(--text2); line-height:1.5; }

/* ===== GOALS ===== */
.goals-wrap h2 { font-family:var(--font-display); font-size:1.5rem; font-weight:700; margin-bottom:20px; }

/* Goal Blueprint Hero Card */
.goal-blueprint-hero-card {
  background: linear-gradient(135deg, rgba(26, 18, 48, 0.85) 0%, rgba(12, 9, 22, 0.95) 100%);
  border: 1px solid rgba(168, 85, 247, 0.28);
  border-radius: var(--r-card);
  padding: 24px;
  margin-bottom: 24px;
  box-shadow: 0 12px 36px rgba(0, 0, 0, 0.35), 0 0 24px rgba(168, 85, 247, 0.12);
  position: relative;
  overflow: hidden;
}
.goal-blueprint-hero-card::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0; height: 3px;
  background: linear-gradient(90deg, #38BDF8, #A855F7, #EC4899);
}
.gbh-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px;
  margin-bottom: 18px;
}
.gbh-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 14px;
  border-radius: var(--r-pill);
  background: rgba(168, 85, 247, 0.14);
  border: 1px solid rgba(168, 85, 247, 0.4);
  color: #C084FC;
  font-size: 0.82rem;
  font-weight: 700;
  letter-spacing: 0.03em;
  text-transform: uppercase;
}
.gbh-recalc-btn {
  padding: 8px 16px;
  border-radius: var(--r-pill);
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid var(--card-border);
  color: var(--text);
  font-size: 0.82rem;
  font-weight: 600;
  cursor: pointer;
  transition: background var(--transition), color var(--transition), border-color var(--transition), box-shadow var(--transition), transform var(--transition), opacity var(--transition);
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.gbh-recalc-btn:hover {
  background: rgba(168, 85, 247, 0.2);
  border-color: rgba(168, 85, 247, 0.5);
  color: #EDE9FE;
  transform: translateY(-1px);
}
.gbh-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
  gap: 12px;
  margin-bottom: 20px;
}
.gbh-metric {
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: var(--r-sm);
  padding: 12px 14px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.gbh-lbl {
  font-size: 0.75rem;
  color: var(--text2);
  text-transform: uppercase;
  font-weight: 600;
  letter-spacing: 0.02em;
}
.gbh-val {
  font-size: 1.25rem;
  font-weight: 800;
  color: #FFFFFF;
  font-family: var(--font-display);
}
.gbh-chart-card {
  background: rgba(0, 0, 0, 0.25);
  border: 1px solid rgba(255, 255, 255, 0.05);
  border-radius: var(--r-sm);
  padding: 16px 20px;
  margin-bottom: 20px;
}
.gbh-chart-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 10px;
}
.gbh-chart-title {
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--text);
}
.gbh-chart-badge {
  font-size: 0.78rem;
  font-weight: 700;
  color: #C084FC;
  background: rgba(168, 85, 247, 0.12);
  padding: 3px 10px;
  border-radius: var(--r-pill);
}
.gbh-chart-svg {
  width: 100%;
  height: 90px;
  overflow: visible;
}
.gbh-chart-labels {
  display: flex;
  justify-content: space-between;
  font-size: 0.75rem;
  color: var(--text2);
  font-weight: 600;
  margin-top: 6px;
}
.gbh-tags-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.gbh-tag {
  font-size: 0.78rem;
  padding: 5px 12px;
  border-radius: var(--r-pill);
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.08);
  color: var(--text2);
  font-weight: 500;
}
.gbh-tag strong {
  color: var(--text);
  font-weight: 700;
}

.goals-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(280px,1fr)); gap:16px; margin-bottom:20px; }
.goals-card h3 { font-size:1rem; font-weight:600; margin-bottom:14px; }
.goal-type-row { display:flex; flex-wrap:wrap; gap:8px; }
.goal-type-btn { padding:9px 16px; border-radius:var(--r-pill); font-size:0.82rem; font-weight:500; background:var(--card); border:1px solid var(--card-border); color:var(--text2); transition: background var(--transition), color var(--transition), border-color var(--transition), box-shadow var(--transition), transform var(--transition), opacity var(--transition); cursor:pointer; }
.goal-type-btn.active { background:var(--c-accent); border-color:transparent; color:#fff; font-weight:600; }
.goal-inputs { display:flex; flex-direction:column; gap:10px; }
.gi-row { display:flex; align-items:center; justify-content:space-between; gap:12px; }
.gi-row label { font-size:0.82rem; color:var(--text2); }
.gi-row input, .gi-row select { padding:8px 12px; border-radius:var(--r-sm); background:var(--input-bg); border:1px solid var(--card-border); color:var(--text); font-size:0.875rem; width:120px; outline:none; transition:border-color var(--transition); }
.gi-row input:focus, .gi-row select:focus { border-color:var(--accent); }
.gi-row select { background:var(--bg2); }
.save-goals-btn { width:100%; padding:14px; font-size:1rem; }
.tdee-result { margin-top:12px; padding:12px; border-radius:var(--r-sm); background:rgba(108,99,255,0.1); border:1px solid rgba(108,99,255,0.3); font-size:0.9rem; color:var(--text); }
.tdee-result strong { font-size:1.3rem; color:var(--accent); }

/* ===== SETTINGS ===== */
.settings-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(260px,1fr)); gap:16px; margin-bottom:20px; }
.settings-card h3 { font-size:1rem; font-weight:600; margin-bottom:14px; }
.si-row { margin-bottom:10px; }
.si-row label { display:block; font-size:0.8rem; color:var(--text2); margin-bottom:5px; }
.si-row input { width:100%; padding:9px 12px; border-radius:var(--r-sm); background:var(--input-bg); border:1px solid var(--card-border); color:var(--text); font-size:0.875rem; outline:none; transition:border-color var(--transition); }
.si-row input:focus { border-color:var(--accent); }
.toggle-row { display:flex; align-items:center; justify-content:space-between; flex-direction:row; }
.toggle-row label { margin-bottom:0; }
.toggle { width:44px; height:24px; border-radius:var(--r-sm); background:rgba(255,255,255,0.1); position:relative; cursor:pointer; transition:background var(--transition); flex-shrink:0; border:1px solid rgba(255,255,255,0.1); }
.toggle.active { background:var(--c-accent); border-color:transparent; }
.toggle-knob { width:18px; height:18px; border-radius:50%; background:#fff; position:absolute; top:2px; left:3px; transition:transform var(--transition); box-shadow:0 1px 4px rgba(0,0,0,0.3); }
.toggle.active .toggle-knob { transform:translateX(20px); }
.save-settings-btn { width:200px; }

/* ===== MODALS ===== */
.modal-overlay {
  position:fixed; inset:0; z-index:200;
  background:rgba(0,0,0,0.7); backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px);
  display:flex; align-items:center; justify-content:center; padding:20px;
  animation: overlayFadeIn 0.25s ease;
}
@keyframes overlayFadeIn { from { opacity:0; backdrop-filter:blur(0); } to { opacity:1; backdrop-filter:blur(12px); } }
.modal-overlay.hidden { display:none; }
.modal {
  background:var(--bg2); border:1px solid var(--card-border); border-radius:var(--r-card);
  width:100%; max-width:560px; max-height:80vh; overflow:hidden;
  display:flex; flex-direction:column;
  animation:modalIn 0.4s cubic-bezier(0.34,1.56,0.64,1);
  box-shadow: 0 24px 80px rgba(0,0,0,0.5), 0 0 0 1px rgba(108,99,255,0.1);
}
.modal.modal-sm { max-width:380px; }
.modal.modal-lg { max-width:700px; }
@keyframes modalIn {
  from { opacity:0; transform:scale(0.88) translateY(30px); filter:blur(4px); }
  to   { opacity:1; transform:scale(1) translateY(0); filter:blur(0); }
}
.modal-hdr { padding:20px 24px 16px; display:flex; align-items:center; justify-content:space-between; border-bottom:1px solid var(--card-border); flex-shrink:0; }
.modal-hdr h3 { font-family:var(--font-display); font-size:1.1rem; font-weight:700; }
.modal-close { width:32px; height:32px; border-radius:var(--r-sm); background:var(--card); border:1px solid var(--card-border); color:var(--text); font-size:1.2rem; display:flex; align-items:center; justify-content:center; transition: background var(--transition), color var(--transition), border-color var(--transition), box-shadow var(--transition), transform var(--transition), opacity var(--transition); cursor:pointer; }
.modal-close:hover { background:rgba(255,101,132,0.2); border-color:var(--accent2); color:var(--accent2); transform:rotate(90deg); }
.modal-bdy { padding:20px 24px; overflow-y:auto; flex:1; }
.modal-footer-row { margin-top:16px; padding-top:16px; border-top:1px solid var(--card-border); }

/* Category Filters */
.category-filter-row {
  display:flex; gap:6px; flex-wrap:wrap; margin-bottom:12px;
  padding-bottom:10px; border-bottom:1px solid var(--card-border);
}
.cat-btn {
  padding:5px 12px; border-radius:var(--r-pill); font-size:0.75rem; font-weight:500; white-space:nowrap;
  background:var(--surface); border:1px solid var(--card-border);
  color:var(--text2); transition: background var(--transition), color var(--transition), border-color var(--transition), box-shadow var(--transition), transform var(--transition), opacity var(--transition); cursor:pointer;
}
.cat-btn:hover { border-color:var(--accent); color:var(--accent); }
.cat-btn.active { background:rgba(108,99,255,0.18); border-color:rgba(108,99,255,0.45); color:var(--text); font-weight:600; }

/* Search */
.search-wrap { display:flex; gap:8px; margin-bottom:12px; }
.search-input { flex:1; padding:11px 16px; border-radius:var(--r-pill); background:var(--input-bg); border:1px solid var(--card-border); color:var(--text); font-size:0.9rem; outline:none; transition:border-color var(--transition); }
.search-input:focus { border-color:var(--accent); }
.search-input::placeholder { color:var(--text3); }
.btn-scan {
  padding: 6px 14px;
  border-radius: var(--r-pill);
  background: rgba(108,99,255,0.14);
  border: 1px solid rgba(108,99,255,0.28);
  color: var(--accent);
  font-size: 0.8rem;
  font-weight: 600;
  transition: background var(--transition), color var(--transition), border-color var(--transition), box-shadow var(--transition), transform var(--transition), opacity var(--transition);
  cursor: pointer;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  line-height: 1.1;
  flex-shrink: 0;
}
.btn-scan:hover { background:rgba(108,99,255,0.24); border-color:rgba(108,99,255,0.45); transform:translateY(-1px); }
.btn-scan .scan-btn-title { font-size: 0.78rem; font-weight: 600; }
.btn-scan .scan-tag {
  font-size: 0.58rem;
  font-weight: 700;
  letter-spacing: 0.4px;
  text-transform: uppercase;
  color: #a78bfa;
  background: rgba(167, 139, 250, 0.16);
  padding: 1px 6px;
  border-radius: 999px;
  line-height: 1.2;
}
.search-results { max-height:340px; overflow-y:auto; }
.search-result-item { display:flex; align-items:center; justify-content:space-between; padding:12px 14px; border-radius:var(--r-sm); cursor:pointer; transition: background var(--transition), color var(--transition), border-color var(--transition), box-shadow var(--transition), transform var(--transition), opacity var(--transition); border:1px solid transparent; margin-bottom:4px; }
.search-result-item:hover { background:rgba(108,99,255,0.08); border-color:rgba(108,99,255,0.2); }
.sri-left { flex:1; }
.sri-name { font-size:0.9rem; font-weight:500; }
.sri-meta { font-size:0.75rem; color:var(--text2); margin-top:2px; }
.sri-cal { font-weight:700; font-size:0.9rem; color:var(--accent); }
.sri-add { width:28px; height:28px; border-radius:50%; background:rgba(108,99,255,0.2); border:1px solid rgba(108,99,255,0.3); color:var(--accent); font-size:1.1rem; display:flex; align-items:center; justify-content:center; transition: background var(--spring), color var(--spring), border-color var(--spring), box-shadow var(--spring), transform var(--spring), opacity var(--spring); margin-left:8px; cursor:pointer; flex-shrink:0; }
.sri-add:hover { background:var(--accent); color:#fff; transform:scale(1.15); }
.no-results { text-align:center; padding:32px; color:var(--text2); font-size:0.875rem; }

/* Custom Food */
.cf-input { width:100%; padding:11px 14px; border-radius:var(--r-sm); background:var(--input-bg); border:1px solid var(--card-border); color:var(--text); font-size:0.9rem; outline:none; margin-bottom:14px; }
.cf-input:focus { border-color:var(--accent); }
.cf-grid { display:grid; grid-template-columns:1fr 1fr; gap:12px; margin-bottom:16px; }
.cf-group label { display:block; font-size:0.75rem; color:var(--text2); margin-bottom:4px; }
.cf-group input, .cf-group select { width:100%; padding:9px 12px; border-radius:var(--r-sm); background:var(--input-bg); border:1px solid var(--card-border); color:var(--text); font-size:0.875rem; outline:none; }
.cf-group input:focus, .cf-group select:focus { border-color:var(--accent); }
.cf-group select { background:var(--bg2); }

/* ============================================================ */
/* EDIT FOOD MODAL — LIQUID GLASS MODERN THEME                  */
/* ============================================================ */
.edit-food-modal-enhanced {
  max-width: 520px;
  width: 94%;
  background: radial-gradient(120% 120% at 50% 0%, rgba(30, 24, 54, 0.96) 0%, rgba(13, 10, 25, 0.98) 100%);
  border: 1px solid rgba(168, 85, 247, 0.28);
  border-radius: 24px;
  box-shadow: 0 24px 64px rgba(0, 0, 0, 0.7), 0 0 32px rgba(168, 85, 247, 0.15), inset 0 1px 1px rgba(255, 255, 255, 0.15);
  backdrop-filter: blur(24px) saturate(1.8);
  -webkit-backdrop-filter: blur(24px) saturate(1.8);
  padding: 0;
  overflow: hidden;
  animation: modalPop 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}

.edit-food-modal-enhanced .modal-hdr {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20px 24px 16px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.07);
}

.mf-hdr-title-wrap {
  display: flex;
  align-items: center;
  gap: 12px;
}

.mf-icon-badge {
  font-size: 1.4rem;
  width: 42px;
  height: 42px;
  border-radius: 12px;
  background: rgba(168, 85, 247, 0.15);
  border: 1px solid rgba(168, 85, 247, 0.3);
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 16px rgba(168, 85, 247, 0.2);
}

.edit-food-modal-enhanced .modal-hdr h3 {
  font-family: var(--font-display, 'Outfit', sans-serif);
  font-size: 1.15rem;
  font-weight: 700;
  color: #FFFFFF;
  margin: 0;
  letter-spacing: -0.3px;
}

.edit-food-modal-enhanced .modal-sub {
  font-size: 0.75rem;
  color: var(--text2, #94A3B8);
  margin: 2px 0 0;
}

.edit-food-modal-enhanced .modal-bdy {
  padding: 20px 24px 24px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

/* Food Name Banner */
.ef-food-card {
  display: flex;
  align-items: center;
  gap: 12px;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 16px;
  padding: 10px 14px;
}

.ef-food-icon {
  font-size: 1.5rem;
  flex-shrink: 0;
}

.ef-food-info {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.ef-name-input {
  flex: 1;
  background: transparent;
  border: none;
  color: #FFFFFF;
  font-family: var(--font-display, 'Outfit', sans-serif);
  font-size: 1.05rem;
  font-weight: 700;
  outline: none;
  padding: 4px 0;
}

.ef-name-input:focus {
  border-bottom: 1px solid var(--c-accent, #A855F7);
}

.ef-meal-badge {
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  padding: 3px 10px;
  border-radius: 99px;
  background: rgba(168, 85, 247, 0.18);
  color: #C084FC;
  border: 1px solid rgba(168, 85, 247, 0.35);
}

/* Prevent ugly browser spin arrows on number inputs */
.edit-food-modal-enhanced input[type="number"]::-webkit-inner-spin-button,
.edit-food-modal-enhanced input[type="number"]::-webkit-outer-spin-button {
  -webkit-appearance: none !important;
  margin: 0 !important;
}
.edit-food-modal-enhanced input[type="number"] {
  -moz-appearance: textfield !important;
  appearance: textfield !important;
}

.ef-unit-badge {
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--text2, #94A3B8);
}

/* Portion & Grams */
.ef-portion-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}

.ef-portion-card {
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 14px;
  padding: 12px 14px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.ef-label {
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--text2, #94A3B8);
  text-transform: uppercase;
  letter-spacing: 0.4px;
}

.ef-stepper-wrap {
  display: flex;
  align-items: center;
  gap: 6px;
  background: rgba(0, 0, 0, 0.35);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 10px;
  padding: 4px 6px;
}

.ef-step-btn {
  width: 28px;
  height: 28px;
  border-radius: 6px;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.12);
  color: #FFFFFF;
  font-size: 1.1rem;
  font-weight: 700;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease, transform 0.15s ease, opacity 0.15s ease;
  flex-shrink: 0;
}

.ef-step-btn:hover {
  background: rgba(168, 85, 247, 0.3);
  border-color: #A855F7;
  color: #FFFFFF;
}

.ef-stepper-input {
  min-width: 50px;
  max-width: 75px;
  flex: 1;
  background: transparent;
  border: none;
  color: #FFFFFF;
  font-family: var(--font-display, 'Outfit', sans-serif);
  font-size: 1.15rem;
  font-weight: 800;
  text-align: center;
  padding: 2px;
  outline: none;
}

.ef-stepper-input:focus {
  color: #C084FC;
}

.ef-serving-row {
  display: flex;
  align-items: center;
  gap: 6px;
}

.ef-serving-count-input {
  width: 48px;
  min-width: 42px;
  background: rgba(0, 0, 0, 0.35);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 8px;
  color: #FFFFFF;
  font-family: var(--font-display, 'Outfit', sans-serif);
  font-size: 1.05rem;
  font-weight: 700;
  text-align: center;
  padding: 6px 4px;
  outline: none;
}

.ef-serving-unit-input {
  flex: 1;
  min-width: 0;
  background: rgba(0, 0, 0, 0.35);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 8px;
  color: #FFFFFF;
  font-size: 0.85rem;
  font-weight: 500;
  padding: 7px 10px;
  outline: none;
}

.ef-serving-count-input:focus,
.ef-serving-unit-input:focus {
  border-color: #A855F7;
}

/* Quick Gram Chips */
.ef-quick-chips {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.ef-chip-btn {
  padding: 5px 12px;
  border-radius: 99px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.1);
  color: var(--text2, #94A3B8);
  font-size: 0.78rem;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease, transform 0.15s ease, opacity 0.15s ease;
}

.ef-chip-btn:hover {
  background: rgba(168, 85, 247, 0.2);
  border-color: rgba(168, 85, 247, 0.5);
  color: #FFFFFF;
  transform: translateY(-1px);
}

.ef-chip-btn.active {
  background: linear-gradient(135deg, #9333EA, #7C3AED);
  border-color: #C084FC;
  color: #FFFFFF;
  box-shadow: 0 4px 12px rgba(147, 51, 234, 0.35);
}

/* Calorie Hero Box */
.ef-calorie-hero {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: linear-gradient(135deg, rgba(249, 115, 22, 0.12), rgba(236, 72, 153, 0.08));
  border: 1px solid rgba(249, 115, 22, 0.35);
  border-radius: 16px;
  padding: 14px 18px;
}

.ef-cal-title {
  display: block;
  font-size: 0.95rem;
  font-weight: 700;
  color: #FDBA74;
}

.ef-cal-sub {
  font-size: 0.72rem;
  color: var(--text2, #94A3B8);
}

.ef-cal-right {
  display: flex;
  align-items: baseline;
  gap: 6px;
}

.ef-cal-input {
  width: 90px;
  background: rgba(0, 0, 0, 0.4);
  border: 1px solid rgba(249, 115, 22, 0.4);
  border-radius: 10px;
  color: #FFFFFF;
  font-family: var(--font-display, 'Outfit', sans-serif);
  font-size: 1.4rem;
  font-weight: 800;
  text-align: right;
  padding: 4px 10px;
  outline: none;
}

.ef-cal-input:focus {
  border-color: #F97316;
  box-shadow: 0 0 0 2px rgba(249, 115, 22, 0.3);
}

.ef-cal-unit {
  font-size: 0.9rem;
  font-weight: 700;
  color: #FDBA74;
}

/* Macro Cards Grid */
.ef-macros-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
}

.ef-macro-card {
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 14px;
  padding: 10px 8px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
}

.ef-macro-card.ef-protein { border-color: rgba(168, 85, 247, 0.25); background: rgba(168, 85, 247, 0.05); }
.ef-macro-card.ef-carbs   { border-color: rgba(245, 158, 11, 0.25); background: rgba(245, 158, 11, 0.05); }
.ef-macro-card.ef-fat     { border-color: rgba(236, 72, 153, 0.25); background: rgba(236, 72, 153, 0.05); }
.ef-macro-card.ef-fiber   { border-color: rgba(16, 185, 129, 0.25); background: rgba(16, 185, 129, 0.05); }

.ef-mc-hdr {
  display: flex;
  align-items: center;
  gap: 5px;
}

.ef-mc-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
}

.ef-mc-label {
  font-size: 0.72rem;
  font-weight: 700;
  color: var(--text, #FFFFFF);
  text-transform: uppercase;
  letter-spacing: 0.3px;
}

.ef-mc-val-wrap {
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: 3px;
  width: 100%;
}

.ef-macro-input {
  width: 54px;
  min-width: 46px;
  background: rgba(0, 0, 0, 0.35);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 6px;
  color: #FFFFFF;
  font-family: var(--font-display, 'Outfit', sans-serif);
  font-size: 1.05rem;
  font-weight: 700;
  text-align: center;
  padding: 5px 2px;
  outline: none;
}

.ef-macro-input:focus {
  border-color: #A855F7;
}

.ef-mc-unit {
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--text2, #94A3B8);
}

/* Action Footer */
.ef-modal-actions {
  display: flex;
  gap: 12px;
  justify-content: flex-end;
  margin-top: 6px;
}

.ef-save-btn {
  background: linear-gradient(135deg, #9333EA, #7C3AED) !important;
  color: #FFFFFF !important;
  font-weight: 700 !important;
  box-shadow: 0 4px 18px rgba(147, 51, 234, 0.4) !important;
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 10px 22px;
  border-radius: var(--r-pill, 99px);
  border: none;
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease, transform 0.15s ease, opacity 0.15s ease;
}

.ef-save-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(147, 51, 234, 0.6) !important;
}

@media (max-width: 600px) {
  .ef-portion-grid { grid-template-columns: 1fr; }
  .ef-macros-grid { grid-template-columns: repeat(2, 1fr); }
}

/* Serving & Unit Conversion Modal */
.serving-modal-enhanced { max-width:440px; width:100%; }
.serving-food-card { padding:14px; background:rgba(168,85,247,0.08); border:1px solid rgba(168,85,247,0.2); border-radius:var(--r-sm); margin-bottom:14px; }
.sfc-name { font-weight:700; font-size:1.05rem; margin-bottom:4px; }
.sfc-macros { display:flex; gap:12px; flex-wrap:wrap; font-size:0.8rem; color:var(--text2); }

.serving-unit-tabs { display:flex; gap:6px; margin-bottom:12px; background:rgba(255,255,255,0.04); padding:4px; border-radius:var(--r-sm); border:1px solid var(--card-border); }
.serving-unit-tab { flex:1; padding:6px 8px; font-size:0.78rem; font-weight:600; border:none; background:transparent; color:var(--text2); border-radius:6px; cursor:pointer; transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease, transform 0.15s ease, opacity 0.15s ease; text-align:center; }
.serving-unit-tab:hover { color:var(--text); background:rgba(255,255,255,0.06); }
.serving-unit-tab.active { background:var(--c-accent-bright, #A855F7); color:#FFFFFF; box-shadow:0 2px 8px rgba(168,85,247,0.35); }

.serving-input-container { display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:10px; background:rgba(255,255,255,0.03); padding:8px 12px; border-radius:var(--r-sm); border:1px solid var(--card-border); }
.serving-input-container label { font-size:0.85rem; font-weight:600; color:var(--text2); }
.serving-stepper-wrap { display:flex; align-items:center; gap:6px; }
.serving-step-btn { width:32px; height:32px; border-radius:8px; border:1px solid var(--card-border); background:rgba(255,255,255,0.06); color:var(--text); font-size:1.1rem; font-weight:700; cursor:pointer; display:flex; align-items:center; justify-content:center; transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease, transform 0.15s ease, opacity 0.15s ease; }
.serving-step-btn:hover { background:rgba(168,85,247,0.2); border-color:var(--c-accent-bright, #A855F7); color:var(--c-accent-bright, #A855F7); }
.serving-stepper-wrap input { padding:7px 8px; border-radius:8px; background:var(--input-bg); border:1px solid var(--card-border); color:var(--text); font-size:1.05rem; font-weight:700; outline:none; width:85px; text-align:center; }
.serving-stepper-wrap input:focus { border-color:var(--c-accent-bright, #A855F7); box-shadow:0 0 0 2px rgba(168,85,247,0.2); }
.serving-unit-badge { font-size:0.85rem; font-weight:600; color:var(--text2); min-width:32px; }

.serving-quick-chips { display:flex; gap:6px; flex-wrap:wrap; margin-bottom:14px; }
.serving-chip-btn { padding:4px 10px; border-radius:14px; background:rgba(255,255,255,0.04); border:1px solid var(--card-border); color:var(--text2); font-size:0.75rem; font-weight:600; cursor:pointer; transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease, transform 0.15s ease, opacity 0.15s ease; }
.serving-chip-btn:hover { background:rgba(168,85,247,0.15); border-color:rgba(168,85,247,0.4); color:#FFFFFF; }
.serving-chip-btn.active { background:rgba(168,85,247,0.25); border-color:var(--c-accent-bright, #A855F7); color:#FFFFFF; }

.serving-preview { padding:12px; background:var(--surface); border-radius:var(--r-sm); margin-bottom:16px; display:flex; gap:14px; justify-content:space-around; border:1px solid var(--card-border); }
.sp-item { text-align:center; }
.sp-val { font-weight:700; font-size:1.05rem; color:var(--text); }
.sp-lbl { font-size:0.7rem; color:var(--text2); margin-top:2px; }

/* Exercise Modal */
.quick-exercises { display:grid; grid-template-columns:repeat(auto-fill,minmax(140px,1fr)); gap:8px; margin-bottom:16px; }
.qex-item { padding:10px 12px; border-radius:var(--r-sm); background:var(--card); border:1px solid var(--card-border); cursor:pointer; transition: background var(--transition), color var(--transition), border-color var(--transition), box-shadow var(--transition), transform var(--transition), opacity var(--transition); font-size:0.82rem; display:flex; align-items:center; gap:6px; user-select:none; }
.qex-item:hover { border-color:rgba(250,130,49,0.4); background:rgba(250,130,49,0.08); color:var(--accent4); transform:translateY(-1px); }
.qex-item.active { border-color:rgba(250,130,49,0.7); background:rgba(250,130,49,0.22); color:#FA8231; font-weight:700; box-shadow:0 0 12px rgba(250,130,49,0.25); }
.divider { text-align:center; color:var(--text3); font-size:0.8rem; margin:16px 0; position:relative; }
.divider::before { content:''; position:absolute; left:0; top:50%; width:calc(50% - 60px); height:1px; background:var(--card-border); }
.divider::after { content:''; position:absolute; right:0; top:50%; width:calc(50% - 60px); height:1px; background:var(--card-border); }
.ex-form input { width:100%; margin-bottom:12px; padding:11px 14px; border-radius:var(--r-sm); background:var(--input-bg); border:1px solid var(--card-border); color:var(--text); font-size:0.9rem; outline:none; }
.ex-form input:focus { border-color:var(--accent4); }
.ex-form-row { display:grid; grid-template-columns:1fr 1fr; gap:12px; margin-bottom:12px; }
.ex-form-group label { display:block; font-size:0.75rem; color:var(--text2); margin-bottom:4px; }
.ex-form-group input { margin-bottom:0; }
.ex-type-row { display:flex; gap:8px; flex-wrap:wrap; margin-bottom:16px; }
.ex-type-btn { padding:7px 14px; border-radius:var(--r-pill); font-size:0.8rem; font-weight:500; background:var(--card); border:1px solid var(--card-border); color:var(--text2); transition: background var(--transition), color var(--transition), border-color var(--transition), box-shadow var(--transition), transform var(--transition), opacity var(--transition); cursor:pointer; }
.ex-type-btn.active { background:rgba(250,130,49,0.2); border-color:rgba(250,130,49,0.4); color:#FA8231; }

/* Weight Modal */
.weight-input-row { display:flex; align-items:center; gap:12px; margin-bottom:20px; }
.weight-input-row input { flex:1; padding:14px 16px; border-radius:var(--r-sm); background:var(--input-bg); border:1px solid var(--card-border); color:var(--text); font-size:1.3rem; font-weight:600; text-align:center; outline:none; }
.weight-input-row input:focus { border-color:var(--accent3); }
.weight-input-row span { font-size:1rem; color:var(--text2); }

/* Recipe Modal */
.recipe-form-top { display:grid; grid-template-columns:1fr auto; gap:12px; margin-bottom:14px; }
.recipe-form-top input { padding:11px 14px; border-radius:var(--r-sm); background:var(--input-bg); border:1px solid var(--card-border); color:var(--text); font-size:0.9rem; outline:none; }
.recipe-form-top input:focus { border-color:var(--accent); }
.recipe-search-wrap { position:relative; margin-bottom:14px; }
.recipe-search-wrap input { width:100%; padding:11px 14px; border-radius:var(--r-sm); background:var(--input-bg); border:1px solid var(--card-border); color:var(--text); font-size:0.9rem; outline:none; }
.recipe-search-wrap input:focus { border-color:var(--accent); }
.recipe-search-results { position:absolute; top:100%; left:0; right:0; background:var(--bg2); border:1px solid var(--card-border); border-radius:var(--r-sm); z-index:100; max-height:220px; overflow-y:auto; box-shadow:var(--shadow); }
.recipe-search-results:empty { display:none; }
.rsr-item { padding:10px 14px; cursor:pointer; display:flex; justify-content:space-between; align-items:center; font-size:0.875rem; transition:background var(--transition); border-bottom:1px solid rgba(255,255,255,0.03); }
.rsr-item:hover { background:rgba(108,99,255,0.12); }
.rsr-item-left { display:flex; flex-direction:column; gap:2px; }
.rsr-item-name { font-weight:500; color:var(--text); }
.rsr-item-meta { font-size:0.72rem; color:var(--text2); }
.rsr-item-cal { font-weight:600; color:var(--accent); font-size:0.82rem; white-space:nowrap; }
.recipe-ingredients { border:1px solid var(--card-border); border-radius:var(--r-sm); overflow:hidden; margin-bottom:12px; }
.ri-header { display:grid; grid-template-columns:1fr 90px 80px 32px; gap:8px; padding:8px 12px; background:var(--surface); font-size:0.75rem; color:var(--text2); font-weight:600; }
.ri-row { display:grid; grid-template-columns:1fr 90px 80px 32px; gap:8px; padding:8px 12px; border-top:1px solid var(--card-border); align-items:center; }
.ri-row:hover { background:var(--surface); }
.ri-name { font-size:0.85rem; font-weight:500; }
.ri-amount { display:flex; align-items:center; }
.ri-amount input { width:54px; padding:5px 6px; border-radius:6px; background:var(--input-bg); border:1px solid var(--card-border); color:var(--text); font-size:0.8rem; outline:none; text-align:center; }
.ri-unit { font-size:0.75rem; color:var(--text2); margin-left:4px; }
.ri-cal { font-size:0.82rem; color:var(--text2); }
.ri-del { color:var(--accent2); cursor:pointer; font-size:0.9rem; text-align:center; }
.recipe-totals { padding:12px; background:rgba(108,99,255,0.08); border:1px solid rgba(108,99,255,0.2); border-radius:var(--r-sm); margin-bottom:16px; display:flex; gap:20px; flex-wrap:wrap; font-size:0.85rem; }
.rt-item { display:flex; flex-direction:column; align-items:center; gap:2px; }
.rt-val { font-weight:700; color:var(--accent); }
.rt-lbl { font-size:0.72rem; color:var(--text2); }
.recipe-modal-actions { display:grid; grid-template-columns:1fr 1fr; gap:12px; }
.recipe-modal-actions button { width:100%; display:flex; align-items:center; justify-content:center; gap:6px; font-weight:600; }
@media (max-width: 520px) {
  .recipe-modal-actions { grid-template-columns:1fr; }
}

/* Measurements */
.meas-grid { display:grid; grid-template-columns:1fr 1fr; gap:12px; margin-bottom:16px; }
.meas-row label { display:block; font-size:0.78rem; color:var(--text2); margin-bottom:4px; }
.meas-row input { width:100%; padding:9px 12px; border-radius:var(--r-sm); background:var(--input-bg); border:1px solid var(--card-border); color:var(--text); font-size:0.9rem; outline:none; }
.meas-row input:focus { border-color:var(--accent); }

/* ===== BARCODE OVERLAY ===== */
.barcode-overlay { position:fixed; inset:0; z-index:300; background:rgba(0,0,0,0.92); display:flex; flex-direction:column; align-items:center; justify-content:center; gap:20px; }
.barcode-overlay.hidden { display:none; }
.barcode-frame { width:280px; height:200px; position:relative; }
.scan-line { position:absolute; width:100%; height:2px; background:linear-gradient(90deg,transparent,#43E97B,transparent); animation:scanMove 2s ease-in-out infinite; box-shadow:0 0 10px #43E97B; }
@keyframes scanMove { 0%,100% { top:0; } 50% { top:calc(100% - 2px); } }
.bc-corner { position:absolute; width:20px; height:20px; border-color:#43E97B; border-style:solid; }
.bc-corner.tl { top:0; left:0; border-width:3px 0 0 3px; }
.bc-corner.tr { top:0; right:0; border-width:3px 3px 0 0; }
.bc-corner.bl { bottom:0; left:0; border-width:0 0 3px 3px; }
.bc-corner.br { bottom:0; right:0; border-width:0 3px 3px 0; }
.bc-hint { color:var(--text2); font-size:0.875rem; }

/* ===== TOAST ===== */
.toast-wrap { position:fixed; bottom:24px; right:24px; z-index:500; display:flex; flex-direction:column; gap:8px; }
.toast {
  padding:12px 18px; border-radius:var(--r-pill); font-size:0.875rem; font-weight:500;
  background:var(--bg2); border:1px solid var(--card-border);
  box-shadow: 0 8px 32px rgba(0,0,0,0.4), 0 0 0 1px rgba(255,255,255,0.05);
  animation:toastIn 0.5s cubic-bezier(0.34,1.56,0.64,1);
  display:flex; align-items:center; gap:8px; min-width:240px;
  backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px);
  position:relative; overflow:hidden;
}
/* Auto-dismiss progress bar */
.toast::after {
  content:''; position:absolute; bottom:0; left:0; height:2px;
  background: currentColor; opacity:0.4;
  animation: toastProgress var(--toast-duration, 3s) linear forwards;
}
@keyframes toastProgress {
  from { width:100%; }
  to   { width:0%; }
}
.toast.success { border-color:rgba(67,233,123,0.4); background:rgba(67,233,123,0.12); color:#43E97B; }
.toast.error { border-color:rgba(255,68,68,0.4); background:rgba(255,68,68,0.12); color:#FF4444; }
.toast.info { border-color:rgba(108,99,255,0.4); background:rgba(108,99,255,0.12); color:#6C63FF; }
.toast.xp { border-color:rgba(255,195,0,0.4); background:rgba(255,195,0,0.12); color:#FFC300; }
@keyframes toastIn {
  from { opacity:0; transform:translateX(40px) scale(0.85); filter:blur(4px); }
  to   { opacity:1; transform:translateX(0) scale(1); filter:blur(0); }
}
@keyframes toastOut { to { opacity:0; transform:translateX(40px) scale(0.85); } }

/* ===== CONFETTI ===== */
.confetti-canvas { position:fixed; inset:0; pointer-events:none; z-index:400; }

/* ===== EMPTY STATES ===== */
.empty-state { text-align:center; padding:48px 20px; }
.empty-icon {
  font-size:3rem; margin-bottom:12px; display:inline-block;
  animation: emptyFloat 3s ease-in-out infinite;
}
@keyframes emptyFloat {
  0%,100% { transform:translateY(0) rotate(0deg); }
  25% { transform:translateY(-8px) rotate(-3deg); }
  75% { transform:translateY(-4px) rotate(3deg); }
}
.empty-text { color:var(--text2); font-size:0.9rem; line-height:1.6; }

/* ===== MISC ===== */
.hidden { display:none !important; }
.page-header { display:flex; align-items:center; justify-content:space-between; margin-bottom:20px; }
.page-header h2 { font-family:var(--font-display); font-size:1.5rem; font-weight:700; }

/* ===== RESPONSIVE ===== */

/* 900px: Sidebar slides off, dashboard goes single-column */
@media (max-width:900px) {
  :root { --sidebar-w:0px; }
  .sidebar { transform:translateX(-100%); z-index:200; }
  .sidebar.open { transform:translateX(0); width:260px; box-shadow:0 0 40px rgba(0,0,0,0.7); }
  .main { margin-left:0; }
  .dash-grid { grid-template-columns:1fr; }
  .weight-stats-row { grid-template-columns:1fr 1fr; }
  .ex-summary-row { grid-template-columns:1fr 1fr; }
  .settings-grid { grid-template-columns:repeat(auto-fill,minmax(220px,1fr)); }
}

/* 768px: Tablet — rings shrink, stacked score card, condensed grids */
@media (max-width:768px) {
  .calorie-ring-wrap { width:190px; height:190px; }
  .fasting-ring-wrap { width:240px; height:240px; }
  .score-ring-wrap { width:150px; height:150px; }
  .score-num { font-size:2.2rem; }
  .score-card { flex-direction:column; align-items:center; }
  .score-breakdown { width:100%; }
  .weight-stats-row { grid-template-columns:1fr 1fr; }
  .ex-summary-row { grid-template-columns:1fr 1fr; }
  .goals-grid { grid-template-columns:1fr; }
  .settings-grid { grid-template-columns:1fr; }
  .xp-level-card { flex-direction:column; text-align:center; }
  .level-progress-wrap { width:100%; }
}

/* 620px: Stack photo+actions row vertically */
@media (max-width:620px) {
  .photo-actions-row { flex-direction:column; }
  #macroPhotoCardWrap { flex:none; max-width:none; width:100%; height:200px; }
  .quick-actions-panel { min-height:auto; }
}

/* 600px: Mobile — compact layout, bottom-sheet modals, fully responsive buttons */
@media (max-width:600px) {
  .pages { padding:10px 10px 85px !important; }
  .topbar { padding:8px 12px; gap:8px; }
  .topbar-l { gap:8px; min-width:0; }
  .hamburger { min-width:40px; min-height:40px; font-size:1.25rem; }
  .page-title { font-size:1.1rem; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
  .topbar-r { gap:6px; }
  .date-nav { gap:3px; }
  .date-step-btn { width:28px; height:28px; font-size:0.85rem; }
  .date-display-btn { padding:5px 8px; font-size:0.72rem; }
  .btn-quick-add { padding:6px 10px; font-size:0.75rem; }

  /* Bottom-sheet modals on mobile */
  .modal-overlay { padding:0; align-items:flex-end; }
  .modal { border-radius:18px 18px 0 0; max-height:88vh; max-width:100%; width:100%; }
  .modal-hdr { padding:14px 16px 12px; }
  .modal-bdy { padding:14px 16px 24px; }

  /* Rings shrink */
  .calorie-ring-wrap { width:165px; height:165px; }
  .ring-remain { font-size:1.9rem; }
  .fasting-ring-wrap { width:200px; height:200px; }
  .fast-time { font-size:1.6rem; }
  .score-ring-wrap { width:125px; height:125px; }

  /* Food log: responsive food items displaying all details clearly */
  .food-item {
    flex-wrap: wrap;
    gap: 6px 10px;
    padding: 10px 12px;
  }
  .fi-left {
    flex: 1 1 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
  }
  .fi-name {
    font-size: 0.88rem;
    font-weight: 700;
  }
  .fi-serving {
    display: inline-block !important;
    font-size: 0.72rem;
    color: var(--text3);
    margin-left: 4px;
  }
  .fi-macros {
    display: flex !important;
    font-size: 0.72rem;
    gap: 8px;
    color: var(--text2);
    flex-wrap: wrap;
  }
  .fi-right {
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-top: 6px;
    margin-top: 2px;
    border-top: 1px solid rgba(255,255,255,0.05);
  }
  .fi-cal {
    font-size: 0.95rem;
    font-weight: 700;
    color: var(--text);
  }
  .fi-del {
    padding: 6px 10px;
    font-size: 1rem;
    min-height: 32px;
    min-width: 32px;
  }

  /* Meal sections header */
  .meal-section-header {
    padding: 12px 14px;
  }
  .add-food-btn {
    padding: 6px 12px;
    font-size: 0.76rem;
    font-weight: 700;
    white-space: nowrap;
  }

  /* Food search category pills touch scrolling */
  .category-filters {
    display: flex !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
    gap: 6px !important;
    padding-bottom: 6px !important;
    scrollbar-width: none;
  }
  .category-filters::-webkit-scrollbar { display: none; }
  .cat-btn {
    white-space: nowrap !important;
    flex-shrink: 0 !important;
    padding: 6px 12px !important;
    font-size: 0.75rem !important;
  }

  /* Search results add button touch target */
  .search-result-item {
    padding: 10px 12px !important;
    gap: 8px !important;
  }
  .sri-add {
    min-width: 40px !important;
    min-height: 40px !important;
    font-size: 1.15rem !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
  }

  /* Grids collapse */
  .ach-grid { grid-template-columns:1fr 1fr; }
  .weight-stats-row { grid-template-columns:1fr 1fr; }
  .ex-summary-row { grid-template-columns:1fr; }
  .recipes-grid { grid-template-columns:1fr; }
  .insights-grid { grid-template-columns:1fr; }
  .meas-grid { grid-template-columns:1fr; }

  /* Toast: full-width at bottom above navigation */
  .toast-wrap { bottom:74px; right:12px; left:12px; }
  .toast { min-width:0; width:100%; }

  /* Fasting */
  .fast-controls { flex-direction:column; align-items:stretch; }
  .fast-ctrl-btn { min-width:0; height:46px; }
  .fast-types { gap:6px; flex-wrap:wrap; }
  .fast-type-btn { flex:1 1 45%; }
}

/* 480px: Small phone — further compact */
@media (max-width:480px) {
  .pages { padding:8px 8px 85px !important; }
  .calorie-ring-wrap { width:150px; height:150px; }
  .ring-remain { font-size:1.7rem; }
  .cal-stats-row { gap:8px; }
  .cal-stat { padding:8px 4px !important; }
  .cs-val { font-size:1.05rem !important; }
  .cs-lbl { font-size:0.65rem !important; }
  .fasting-ring-wrap { width:180px; height:180px; }
  .fast-time { font-size:1.45rem; }
  .score-ring-wrap { width:115px; height:115px; }
  .score-num { font-size:1.7rem; }
  .page-header h2 { font-size:1.15rem; }
  .ex-form-row { grid-template-columns:1fr; }
  .cf-grid { grid-template-columns:1fr; }
  .water-cups-big { gap:4px; }
  .water-cup-big { width:32px; height:40px; }
  .macro-label { width:52px; font-size:0.75rem; }
  .macro-val { width:68px; font-size:0.7rem; }
}

/* ===== TRIAL BADGE (sidebar) ===== */
.trial-badge {
  display:inline-flex; align-items:center;
  padding:3px 8px; border-radius:var(--r-pill);
  font-size:0.68rem; font-weight:700; letter-spacing:0.02em;
  white-space:nowrap; cursor:pointer;
  margin-top:4px;
  transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease, transform 0.15s ease, opacity 0.15s ease;
}
.trial-badge.trialing {
  background:rgba(108,99,255,0.18);
  color:var(--accent);
  border:1px solid rgba(108,99,255,0.35);
}
.trial-badge.subscribed {
  background:rgba(0,196,106,0.15);
  color:#00C46A;
  border:1px solid rgba(0,196,106,0.35);
}
.trial-badge.expired {
  background:rgba(255,51,85,0.15);
  color:#FF3355;
  border:1px solid rgba(255,51,85,0.35);
}

/* Plans nav item — always accent-tinted */
.nav-item-plans { color:var(--accent) !important; }
.nav-item-plans .ni { filter:drop-shadow(0 0 4px rgba(108,99,255,0.6)); }

/* Paywall Locked Navigation State */
.nav.paywall-locked .nav-item:not([data-page="subscription"]) {
  opacity: 0.4;
  cursor: not-allowed;
  filter: grayscale(0.6);
}
.nav.paywall-locked .nav-item[data-page="subscription"] {
  background: rgba(139, 92, 246, 0.18) !important;
  color: #C084FC !important;
  font-weight: 700 !important;
  box-shadow: 0 0 16px rgba(139, 92, 246, 0.35);
  border: 1px solid rgba(168, 85, 247, 0.5);
  animation: paywallPulse 2.2s infinite ease-in-out;
}
@keyframes paywallPulse {
  0%, 100% { transform: scale(1); box-shadow: 0 0 12px rgba(139, 92, 246, 0.25); }
  50% { transform: scale(1.02); box-shadow: 0 0 22px rgba(139, 92, 246, 0.5); }
}

/* ===== SUBSCRIPTION PAGE ===== */
.sub-page {
  max-width:820px; margin:0 auto;
  display:flex; flex-direction:column; gap:28px;
}

/* Status card at top */
.sub-status-card {
  display:flex; align-items:center; gap:16px;
  padding:18px 22px; border-radius:16px;
  border:1px solid;
}
.sub-status-trial  { background:rgba(108,99,255,0.08); border-color:rgba(108,99,255,0.25); }
.sub-status-active { background:rgba(0,196,106,0.08);  border-color:rgba(0,196,106,0.3);  }
.sub-status-expired{ background:rgba(255,51,85,0.07);  border-color:rgba(255,51,85,0.25); }
.ssc-icon { font-size:2rem; flex-shrink:0; }
.ssc-body { flex:1; }
.ssc-title { font-family:var(--font-display); font-weight:700; font-size:1rem; }
.ssc-sub   { font-size:0.82rem; color:var(--text2); margin-top:3px; }

/* Plans grid */
.sub-plans-header {
  text-align: center;
  margin: 6px 0 16px;
}
.sub-plans-title {
  font-family: var(--font-display);
  font-size: 1.45rem;
  font-weight: 800;
  color: var(--c-text-0);
  margin-bottom: 4px;
  letter-spacing: -0.02em;
}
.sub-plans-subtitle {
  font-size: 0.82rem;
  color: var(--text2);
}

.sub-plans {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  max-width: 840px;
  margin: 0 auto 16px;
  gap: 18px;
  padding-top: 10px;
}
.sub-plan-card {
  position: relative;
  overflow: visible !important;
  background: var(--card);
  border: 1px solid var(--card-border);
  border-radius: 18px;
  padding: 22px 20px 20px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  transition: border-color 0.25s, box-shadow 0.25s, transform 0.25s;
}
.sub-plan-card:hover {
  border-color: rgba(168, 85, 247, 0.45);
  box-shadow: 0 12px 35px rgba(168, 85, 247, 0.15);
  transform: translateY(-2px);
}
.sub-plan-popular {
  border-color: rgba(168, 85, 247, 0.6) !important;
  box-shadow: 0 0 0 1px rgba(168, 85, 247, 0.35), 0 14px 40px rgba(139, 92, 246, 0.22) !important;
  background: rgba(26, 18, 52, 0.75) !important;
}
.sub-plan-current {
  border-color: rgba(0, 196, 106, 0.6) !important;
  box-shadow: 0 0 0 1px rgba(0, 196, 106, 0.3) !important;
}

/* Pro Gating UI */
.nav-item.gated-pro {
  opacity: 0.75;
  position: relative;
}
.nav-item.gated-pro:hover {
  opacity: 1;
}
.pro-lock-pill {
  margin-left: auto;
  font-size: 0.65rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  padding: 2px 8px;
  border-radius: 999px;
  background: linear-gradient(135deg, rgba(168, 85, 247, 0.25), rgba(236, 72, 153, 0.25));
  border: 1px solid rgba(168, 85, 247, 0.45);
  color: #EDE9FE;
  box-shadow: 0 2px 8px rgba(168, 85, 247, 0.2);
}

/* Pro Upgrade Modal */
.pro-upgrade-backdrop {
  position: fixed;
  inset: 0;
  z-index: 99999;
  background: rgba(8, 4, 18, 0.82);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
  animation: fadeIn 0.2s ease-out;
}
.pro-upgrade-modal {
  position: relative;
  width: 100%;
  max-width: 480px;
  background: radial-gradient(circle at top, rgba(38, 24, 76, 0.96), rgba(18, 12, 36, 0.98));
  border: 1px solid rgba(168, 85, 247, 0.45);
  border-radius: 24px;
  padding: 32px 28px;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.6), 0 0 40px rgba(168, 85, 247, 0.25);
  text-align: center;
}
.pum-badge {
  display: inline-block;
  font-size: 0.7rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  padding: 4px 12px;
  border-radius: 999px;
  background: linear-gradient(135deg, rgba(168, 85, 247, 0.3), rgba(236, 72, 153, 0.3));
  border: 1px solid rgba(168, 85, 247, 0.5);
  color: #F3E8FF;
  margin-bottom: 14px;
}
.pum-title {
  font-size: 1.45rem;
  font-weight: 800;
  color: #FFFFFF;
  margin-bottom: 8px;
  line-height: 1.25;
}
.pum-desc {
  font-size: 0.88rem;
  color: #A39DBE;
  margin-bottom: 20px;
  line-height: 1.5;
}
.pum-perks {
  display: flex;
  flex-direction: column;
  gap: 10px;
  text-align: left;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 16px;
  padding: 16px 18px;
  margin-bottom: 20px;
}
.pum-perk {
  font-size: 0.85rem;
  color: #E2E8F0;
  display: flex;
  align-items: center;
  gap: 10px;
}
.pum-perk span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: rgba(52, 211, 153, 0.2);
  color: #34D399;
  font-size: 0.75rem;
  font-weight: 700;
  flex-shrink: 0;
}
.pum-pricing-card {
  margin-bottom: 22px;
  padding: 12px;
  background: rgba(168, 85, 247, 0.08);
  border: 1px dashed rgba(168, 85, 247, 0.35);
  border-radius: 14px;
}
.pum-price-row {
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: 4px;
}
.pum-amount {
  font-size: 1.75rem;
  font-weight: 800;
  color: #FFFFFF;
}
.pum-period {
  font-size: 0.9rem;
  color: #94A3B8;
}
.pum-pkr {
  font-size: 0.78rem;
  color: #A855F7;
  font-weight: 600;
  margin-top: 2px;
}
.pum-actions {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.pum-upgrade-btn {
  width: 100%;
  padding: 14px 20px;
  font-size: 0.95rem;
  font-weight: 700;
  border-radius: 12px;
  background: linear-gradient(135deg, #8B5CF6, #EC4899);
  color: #FFFFFF;
  border: none;
  cursor: pointer;
  box-shadow: 0 8px 24px rgba(139, 92, 246, 0.4);
  transition: transform 0.2s, box-shadow 0.2s;
}
.pum-upgrade-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 30px rgba(139, 92, 246, 0.55);
}
.pum-close-btn {
  width: 100%;
  padding: 10px;
  font-size: 0.85rem;
  background: transparent;
  color: #94A3B8;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 10px;
  cursor: pointer;
}
.pum-close-btn:hover {
  background: rgba(255, 255, 255, 0.05);
  color: #FFFFFF;
}

/* ===== DATA EXPORT & STATEMENT MODAL ===== */
.data-export-btn {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  width: 100% !important;
  text-align: left !important;
  padding: 10px 14px !important;
  margin-bottom: 8px !important;
  cursor: pointer !important;
}
.data-export-btn .deb-left {
  display: flex;
  align-items: center;
  gap: 8px;
  font-weight: 500;
}
.data-export-btn.gated-pro-btn {
  opacity: 0.85;
}
.data-export-btn.gated-pro-btn:hover {
  opacity: 1;
  border-color: rgba(168, 85, 247, 0.4);
}

.export-modal-box {
  max-width: 520px !important;
  background: radial-gradient(circle at 50% 0%, #1a1230 0%, #0d091a 100%) !important;
  border: 1px solid rgba(168, 85, 247, 0.35) !important;
  box-shadow: 0 24px 80px rgba(0, 0, 0, 0.7), 0 0 35px rgba(168, 85, 247, 0.2) !important;
}

.export-type-tabs {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin-bottom: 20px;
}
.export-type-btn {
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 14px;
  padding: 12px 14px;
  text-align: left;
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease, transform 0.15s ease, opacity 0.15s ease;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.export-type-btn .etb-title {
  font-size: 0.92rem;
  font-weight: 700;
  color: var(--text);
}
.export-type-btn .etb-sub {
  font-size: 0.75rem;
  color: var(--text2);
}
.export-type-btn:hover {
  background: rgba(168, 85, 247, 0.08);
  border-color: rgba(168, 85, 247, 0.3);
}
.export-type-btn.active {
  background: rgba(168, 85, 247, 0.15);
  border-color: #A855F7;
  box-shadow: 0 0 16px rgba(168, 85, 247, 0.25);
}
.export-type-btn.active .etb-title {
  color: #F3E8FF;
}
.export-type-btn.active .etb-sub {
  color: #C084FC;
}

.export-range-section {
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.07);
  border-radius: 16px;
  padding: 16px;
  margin-bottom: 18px;
}
.export-section-label {
  display: block;
  font-size: 0.8rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--text2);
  margin-bottom: 10px;
}
.export-range-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 12px;
}
.range-chip-btn {
  padding: 6px 12px;
  border-radius: 999px;
  font-size: 0.8rem;
  font-weight: 600;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.12);
  color: var(--text2);
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease, transform 0.15s ease, opacity 0.15s ease;
}
.range-chip-btn:hover {
  background: rgba(255, 255, 255, 0.12);
  color: var(--text);
}
.range-chip-btn.active {
  background: linear-gradient(135deg, #8B5CF6, #6366F1);
  border-color: transparent;
  color: #FFFFFF;
  box-shadow: 0 2px 10px rgba(139, 92, 246, 0.35);
}

.export-custom-dates {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  padding-top: 10px;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
}
.export-custom-dates.hidden {
  display: none;
}
.ecd-group label {
  display: block;
  font-size: 0.76rem;
  color: var(--text2);
  margin-bottom: 4px;
  font-weight: 600;
}
.ecd-group input[type="date"] {
  width: 100%;
  padding: 8px 12px;
  border-radius: 10px;
  background: var(--input-bg);
  border: 1px solid var(--card-border);
  color: var(--text);
  font-size: 0.85rem;
  font-family: inherit;
  outline: none;
}
.ecd-group input[type="date"]:focus {
  border-color: var(--accent);
}

.export-summary-preview {
  background: rgba(12, 8, 24, 0.6);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 14px;
  padding: 14px 16px;
  margin-bottom: 20px;
}
.esp-header {
  font-size: 0.78rem;
  font-weight: 700;
  color: var(--text2);
  margin-bottom: 10px;
  letter-spacing: 0.02em;
}
.esp-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
}
.esp-item {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.esp-lbl {
  font-size: 0.7rem;
  color: #8C89A8;
}
.esp-val {
  font-size: 0.85rem;
  font-weight: 700;
  color: #FFFFFF;
}


.sub-popular-badge {
  position: absolute;
  top: -14px;
  left: 50%;
  transform: translateX(-50%);
  background: linear-gradient(135deg, #8B5CF6, #6366F1);
  color: #FFFFFF;
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  padding: 5px 16px;
  border-radius: 99px;
  text-transform: uppercase;
  white-space: nowrap;
  box-shadow: 0 4px 15px rgba(139, 92, 246, 0.5), 0 0 10px rgba(99, 102, 241, 0.4);
  border: 1px solid rgba(255, 255, 255, 0.35);
  z-index: 10;
}
.sub-premium-badge {
  background: linear-gradient(135deg, #F59E0B, #D97706) !important;
  box-shadow: 0 4px 15px rgba(245, 158, 11, 0.5) !important;
  border-color: rgba(255, 255, 255, 0.3) !important;
}

.sp-header { text-align: center; }
.sp-name {
  font-family: var(--font-display);
  font-size: 1.25rem;
  font-weight: 800;
  margin-bottom: 6px;
}
.sp-tagline {
  font-size: 0.78rem;
  color: var(--text3);
  margin-bottom: 12px;
  min-height: 32px;
  line-height: 1.35;
}
.sp-price {
  font-family: var(--font-mono);
  font-size: 2.3rem;
  font-weight: 900;
  color: var(--c-accent-bright);
  line-height: 1;
}
.sp-period { font-size: 0.85rem; font-weight: 500; color: var(--text2); }
.sp-pkr    { font-size: 0.78rem; color: var(--text3); margin-top: 4px; letter-spacing: 0.01em; }
.sp-trial  {
  margin-top: 10px;
  font-size: 0.76rem;
  font-weight: 700;
  color: #00C46A;
  background: rgba(0, 196, 106, 0.12);
  border: 1px solid rgba(0, 196, 106, 0.3);
  border-radius: var(--r-pill);
  padding: 4px 12px;
  display: inline-block;
}

.sp-features {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 7px;
  flex: 1;
}
.sp-feature {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  font-size: 0.79rem;
  color: var(--text2);
  line-height: 1.35;
}
.sp-feature-disabled {
  color: var(--text3);
  opacity: 0.6;
}
.sp-coming-soon-pill {
  display: inline-flex;
  align-items: center;
  font-size: 0.62rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: #c084fc;
  background: rgba(192, 132, 252, 0.12);
  border: 1px solid rgba(192, 132, 252, 0.28);
  padding: 1px 6px;
  border-radius: 999px;
  margin-left: 6px;
  line-height: 1.3;
  white-space: nowrap;
  vertical-align: middle;
}
.sp-check {
  color: #00C46A;
  font-weight: 800;
  font-size: 0.85rem;
  flex-shrink: 0;
  margin-top: 1px;
}
.sp-cross {
  color: #FF5577;
  font-weight: 800;
  font-size: 0.82rem;
  flex-shrink: 0;
  margin-top: 1px;
}

.sub-cta-btn {
  width: 100%;
  padding: 11px 16px;
  font-size: 0.86rem;
  font-weight: 700;
  border-radius: var(--r-pill);
  transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease, transform 0.15s ease, opacity 0.15s ease;
  cursor: pointer;
}
.sub-cta-btn:disabled { opacity: 0.6; cursor: not-allowed; }
.sub-cta-current { background: rgba(0, 196, 106, 0.15) !important; color: #00C46A !important; border: 1px solid rgba(0, 196, 106, 0.4) !important; }

/* Guarantee row */
.sub-guarantee {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  flex-wrap: wrap;
  font-size: 0.82rem;
  color: var(--text2);
  padding: 16px 20px;
  background: var(--card);
  border: 1px solid var(--card-border);
  border-radius: 14px;
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
}

/* Responsive */
@media (max-width: 1024px) {
  .sub-plans { grid-template-columns: 1fr; max-width: 480px; margin: 0 auto 24px; }
  .sub-guarantee { flex-direction: column; gap: 8px; text-align: center; }
}



/* ===== AVATAR LIGHTBOX ===== */
.av-lightbox {
  position:fixed; inset:0; z-index:600;
  display:flex; align-items:center; justify-content:center;
}
.av-lightbox.hidden { display:none !important; }

.alb-backdrop {
  position:absolute; inset:0;
  background:rgba(0,0,0,0.82);
  backdrop-filter:blur(22px);
  -webkit-backdrop-filter:blur(22px);
}

/* Open animation */
.av-lightbox.alb-opening .alb-backdrop  { animation:albFadeIn  0.28s ease forwards; }
.av-lightbox.alb-opening .alb-content   { animation:albZoomIn  0.28s cubic-bezier(0.34,1.56,0.64,1) forwards; }
/* Close animation */
.av-lightbox.alb-closing .alb-backdrop  { animation:albFadeOut 0.2s ease forwards; }
.av-lightbox.alb-closing .alb-content   { animation:albZoomOut 0.2s ease forwards; }

@keyframes albFadeIn  { from { opacity:0 } to { opacity:1 } }
@keyframes albFadeOut { from { opacity:1 } to { opacity:0 } }
@keyframes albZoomIn  { from { opacity:0; transform:scale(0.82) } to { opacity:1; transform:scale(1) } }
@keyframes albZoomOut { from { opacity:1; transform:scale(1) } to { opacity:0; transform:scale(0.82) } }

.alb-content {
  position:relative; z-index:1;
  display:flex; flex-direction:column; align-items:center;
  gap:18px; padding:0 20px;
  max-width:360px; width:90vw;
}

.alb-close {
  position:absolute; top:-52px; right:0;
  width:38px; height:38px;
  background:rgba(255,255,255,0.1);
  border:1px solid rgba(255,255,255,0.15);
  border-radius:50%; color:#fff;
  font-size:1rem; line-height:1;
  cursor:pointer;
  display:flex; align-items:center; justify-content:center;
  transition:background 0.18s, transform 0.18s;
}
.alb-close:hover { background:rgba(255,255,255,0.22); transform:scale(1.1); }

.alb-photo-wrap {
  width:260px; height:260px;
  border-radius:50%; overflow:hidden;
  border:3px solid rgba(255,255,255,0.14);
  box-shadow:0 0 0 3px rgba(108,99,255,0.45), 0 24px 64px rgba(0,0,0,0.6);
}
.alb-photo { width:100%; height:100%; object-fit:cover; display:block; }

.alb-name {
  font-family:var(--font-display);
  font-size:1.15rem; font-weight:700;
  color:#fff; letter-spacing:0.01em;
}

.alb-actions { display:flex; gap:10px; flex-wrap:wrap; justify-content:center; }

.alb-action-btn {
  padding:10px 20px;
  border-radius:var(--r-pill);
  font-size:0.82rem; font-weight:600;
  cursor:pointer; border:none;
  font-family:var(--font-display);
  transition:all 0.18s;
  display:inline-flex; align-items:center; gap:6px;
  background:rgba(255,255,255,0.13);
  color:#fff;
  border:1px solid rgba(255,255,255,0.18);
}
.alb-action-btn:hover { background:rgba(255,255,255,0.22); }
.alb-action-remove {
  background:rgba(255,51,85,0.15);
  color:#ff5577;
  border-color:rgba(255,51,85,0.3);
}
.alb-action-remove:hover { background:rgba(255,51,85,0.3); }

/* Make sidebar avatar show pointer when photo is set */
#sidebarAvatar { cursor:pointer; }
#sidebarAvatar:hover { opacity:0.85; }
#sidebarAvatar img { border-radius:50%; width:100%; height:100%; object-fit:cover; }

/* Touch devices: ensure minimum 44px tap targets */
@media (pointer:coarse) {
  .hamburger { min-width:44px; min-height:44px; display:flex; align-items:center; justify-content:center; }
  .modal-close { width:44px; height:44px; }
  .day-nav-btn { width:44px; height:44px; }
  .nav-item { padding:13px 12px; }
  .water-cup { height:44px; }
  .sri-add { width:44px; height:44px; }
  .cat-btn { padding:8px 14px; }
  .btn-sm { padding:10px 16px; }
}

/* ===== MOBILE BOTTOM NAVIGATION ===== */
.bottom-nav {
  display:none; position:fixed; bottom:0; left:0; right:0; z-index:150;
  background: rgba(14, 18, 32, 0.95);
  backdrop-filter:blur(24px); -webkit-backdrop-filter:blur(24px);
  border-top:1px solid rgba(255, 255, 255, 0.1);
  padding:4px 8px max(8px, env(safe-area-inset-bottom));
  box-shadow: 0 -8px 32px rgba(0,0,0,0.5);
}
[data-theme="light"] .bottom-nav {
  background: rgba(245, 247, 255, 0.95);
  border-top: 1px solid rgba(108, 99, 255, 0.15);
  box-shadow: 0 -4px 24px rgba(108, 99, 255, 0.12);
}
.bottom-nav-items {
  display:flex; justify-content:space-between; align-items:center;
  max-width:480px; margin:0 auto;
}
.bottom-nav-item {
  flex: 1;
  display:flex; flex-direction:column; align-items:center; gap:2px;
  padding:6px 4px; border-radius:12px;
  color:var(--text2); font-size:0.65rem; font-family:var(--font-sans);
  font-weight:600;
  letter-spacing:0.01em; cursor:pointer;
  transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease, transform 0.15s ease, opacity 0.15s ease; position:relative;
  -webkit-tap-highlight-color:transparent;
  background:none; border:none;
}
.bottom-nav-item .bn-icon { font-size:1.3rem; line-height:1; transition: transform 0.2s ease; }
.bottom-nav-item.active { color:#8B85FF; }
.bottom-nav-item.active .bn-icon { transform:scale(1.1); }
.bottom-nav-item.active::after {
  content:''; position:absolute; top:-4px;
  width:20px; height:3px; border-radius:0 0 3px 3px;
  background: var(--c-accent);
  box-shadow: 0 0 8px var(--c-accent-glow);
}
.bottom-nav-item:active { transform:scale(0.92); }

/* Center elevated Quick Add button */
.bottom-nav-center-action {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: linear-gradient(135deg, #6C63FF, #8B5CF6);
  border: 2px solid rgba(255, 255, 255, 0.2);
  color: #FFFFFF;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: -16px 6px 0 6px;
  box-shadow: 0 6px 20px rgba(108, 99, 255, 0.6);
  cursor: pointer;
  flex-shrink: 0;
  transition: all 0.2s cubic-bezier(0.34, 1.56, 0.64, 1);
  -webkit-tap-highlight-color: transparent;
}
.bottom-nav-center-action:active {
  transform: scale(0.9) translateY(2px);
  box-shadow: 0 2px 10px rgba(108, 99, 255, 0.4);
}
.bottom-nav-center-action .bn-center-icon {
  font-size: 24px;
  font-weight: 700;
  line-height: 1;
}

@media (max-width:900px) {
  .bottom-nav { display:block; }
  .pages { padding-bottom:85px !important; }
}

/* ===== GREETING SECTION ===== */
.dash-greeting {
  margin-bottom:20px;
  animation: cardStagger 0.4s ease both;
}
.greeting-text {
  font-family:var(--font-display); font-size:clamp(1.4rem, 3vw, 1.8rem);
  font-weight:800; color:var(--text); letter-spacing:-0.02em;
}
.greeting-text .greeting-name {
  background: linear-gradient(135deg, var(--c-accent), var(--c-accent-bright));
  -webkit-background-clip:text; -webkit-text-fill-color:transparent;
}
.greeting-sub {
  font-family:var(--font-sans); font-size:0.8rem; color:var(--text2);
  margin-top:6px; letter-spacing:0.01em;
  display:flex; align-items:center; gap:8px;
}

/* Global Cloud Food Search CTA & Results */
.global-search-cta {
  background: linear-gradient(135deg, rgba(168, 85, 247, 0.12), rgba(108, 99, 255, 0.15));
  border: 1px dashed rgba(168, 85, 247, 0.45);
  border-radius: var(--r-card);
  padding: 14px 18px;
  margin-top: 14px;
  margin-bottom: 8px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
}
.gsc-info { flex: 1; min-width: 200px; }
.gsc-title { font-size: 0.9rem; font-weight: 700; color: #EDE9FE; font-family: var(--font-display); }
.gsc-sub { font-size: 0.75rem; color: var(--text2); margin-top: 2px; line-height: 1.3; }
.gsc-btn { padding: 8px 16px; font-size: 0.8rem; font-weight: 700; white-space: nowrap; }

.no-local-results {
  text-align: center;
  padding: 24px 16px;
  background: rgba(255, 255, 255, 0.02);
  border: 1px dashed var(--card-border);
  border-radius: var(--r-card);
  margin: 10px 0;
}
.nlr-title { font-size: 0.95rem; font-weight: 700; color: #FFFFFF; }
.nlr-sub { font-size: 0.8rem; color: var(--text2); margin-top: 4px; }
.global-result-item { border-left: 3px solid #A855F7; }

/* ============================================================
   SUPER ADMIN MASQUERADE FLOATING WIDGET (COLLAPSIBLE / SLEEK)
   ============================================================ */
.nf-masquerade-widget {
  position: fixed;
  bottom: 24px;
  right: 24px;
  z-index: 9999999;
  font-family: var(--font-sans, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif);
}

.nf-masquerade-trigger {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: linear-gradient(135deg, #7C3AED 0%, #DB2777 100%);
  box-shadow: 0 4px 20px rgba(124, 58, 237, 0.55), 0 0 0 2px rgba(255, 255, 255, 0.25);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #FFFFFF;
  font-size: 1.35rem;
  cursor: pointer;
  border: none;
  transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.25s ease;
  position: relative;
  outline: none;
}

.nf-masquerade-trigger:hover {
  transform: scale(1.1);
  box-shadow: 0 6px 25px rgba(124, 58, 237, 0.75), 0 0 0 3px rgba(255, 255, 255, 0.4);
}

.nf-masquerade-trigger:active {
  transform: scale(0.95);
}

.nf-masquerade-pulse {
  position: absolute;
  top: -2px;
  right: -2px;
  width: 12px;
  height: 12px;
  background: #10B981;
  border-radius: 50%;
  border: 2px solid #0F172A;
  box-shadow: 0 0 8px #10B981;
  animation: nfPulseDot 2s infinite;
}

@keyframes nfPulseDot {
  0% { transform: scale(0.95); box-shadow: 0 0 0 0 rgba(16, 185, 129, 0.7); }
  70% { transform: scale(1.2); box-shadow: 0 0 0 8px rgba(16, 185, 129, 0); }
  100% { transform: scale(0.95); box-shadow: 0 0 0 0 rgba(16, 185, 129, 0); }
}

.nf-masquerade-panel {
  position: absolute;
  bottom: 60px;
  right: 0;
  width: 300px;
  max-width: calc(100vw - 32px);
  background: rgba(15, 23, 42, 0.95);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 18px;
  box-shadow: 0 16px 45px rgba(0, 0, 0, 0.75), 0 0 30px rgba(124, 58, 237, 0.35);
  padding: 16px;
  color: #FFFFFF;
  opacity: 0;
  pointer-events: none;
  transform: translateY(12px) scale(0.94);
  transform-origin: bottom right;
  transition: opacity 0.22s cubic-bezier(0.16, 1, 0.3, 1), transform 0.22s cubic-bezier(0.16, 1, 0.3, 1);
}

.nf-masquerade-panel.active {
  opacity: 1;
  pointer-events: auto;
  transform: translateY(0) scale(1);
}

.nf-masquerade-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 10px;
  padding-bottom: 8px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.nf-masquerade-title {
  font-size: 0.88rem;
  font-weight: 800;
  color: #E2E8F0;
  display: flex;
  align-items: center;
  gap: 6px;
}

.nf-masquerade-close {
  background: rgba(255, 255, 255, 0.1);
  border: none;
  color: #94A3B8;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  font-size: 0.75rem;
  font-weight: 700;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.15s ease;
}

.nf-masquerade-close:hover {
  background: rgba(255, 255, 255, 0.2);
  color: #FFFFFF;
}

.nf-masquerade-info {
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 12px;
  padding: 10px 12px;
  margin-bottom: 12px;
}

.nf-masquerade-user {
  font-size: 0.85rem;
  font-weight: 700;
  color: #FEF08A;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.nf-masquerade-sync {
  font-size: 0.72rem;
  color: #94A3B8;
  margin-top: 4px;
  display: flex;
  align-items: center;
  gap: 5px;
}

.nf-masquerade-exit-btn {
  width: 100%;
  background: linear-gradient(135deg, #7C3AED 0%, #DB2777 100%);
  color: #FFFFFF;
  border: none;
  border-radius: 12px;
  padding: 10px 14px;
  font-size: 0.85rem;
  font-weight: 800;
  cursor: pointer;
  box-shadow: 0 4px 15px rgba(124, 58, 237, 0.4);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.nf-masquerade-exit-btn:hover {
  transform: translateY(-1px);
  box-shadow: 0 6px 20px rgba(124, 58, 237, 0.6);
}

.nf-masquerade-exit-btn:active {
  transform: translateY(1px);
}

@media (max-width: 768px) {
  .nf-masquerade-widget {
    bottom: 84px;
    right: 16px;
  }
}