/* ===== 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.3s cubic-bezier(0.4,0,0.2,1);
  --spring: 0.5s 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; }

/* ===== 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:9999;
  background-color:var(--c-void);
  background-image:
    linear-gradient(var(--c-grid) 1px, transparent 1px),
    linear-gradient(90deg, var(--c-grid) 1px, transparent 1px);
  background-size: var(--grid-size) var(--grid-size);
  background-position: -1px -1px;
  display:flex; align-items:center; justify-content:center;
  transition:opacity 0.6s ease, transform 0.6s ease;
}
.loading-screen.hide { opacity:0; transform:scale(1.05); pointer-events:none; }
.loading-content { text-align:center; }
.loading-logo { display:flex; align-items:center; gap:16px; justify-content:center; margin-bottom:12px; }
.logo-orbit {
  width:56px; height:56px; border-radius:50%;
  border:2px solid transparent;
  border-top-color:var(--c-accent); border-right-color:var(--c-accent-bright);
  animation:spin 1s linear infinite;
  display:flex; align-items:center; justify-content:center; position:relative;
}
.orbit-dot {
  width:8px; height:8px; background:var(--c-accent-bright); border-radius:50%;
  position:absolute; top:2px; right:2px;
  animation:pulseDot 1s ease infinite;
}
@keyframes spin { to { transform:rotate(360deg); } }
@keyframes pulseDot { 0%,100% { transform:scale(1); opacity:1; } 50% { transform:scale(1.4); opacity:0.6; } }
.logo-text { font-family:var(--font-display); font-size:2.6rem; font-weight:800; color:var(--c-accent); letter-spacing:-0.02em; }
.loading-tagline { font-family:var(--font-mono); color:var(--c-text-1); font-size:0.72rem; margin-bottom:32px; letter-spacing:0.15em; text-transform:uppercase; }
.loading-bar-wrap { width:240px; height:2px; background:rgba(108,99,255,0.15); border-radius:1px; margin:0 auto; overflow:hidden; }
.loading-bar { height:100%; background:var(--c-accent); border-radius:1px; animation:loadBar 1.8s ease forwards; }
@keyframes loadBar { 0% { width:0; } 100% { width:100%; } }

/* ===== PROFILE PICKER ===== */
#profilePicker {
  position:fixed; inset:0; z-index:9000;
  background-color:var(--c-void);
  background-image:
    linear-gradient(var(--c-grid) 1px, transparent 1px),
    linear-gradient(90deg, var(--c-grid) 1px, transparent 1px);
  background-size: var(--grid-size) var(--grid-size);
  background-position: -1px -1px;
  display:flex; align-items:center; justify-content:center;
  animation:pageIn 0.4s ease;
}
.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:all 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:all 0.15s;
}
.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:var(--bg2);
  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;
}
.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:all var(--transition); position:relative; cursor:pointer;
}
.nav-item:hover { background:var(--card); color:var(--text); transform:translateX(4px); }
.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:20%; height:60%; width:2px; background:var(--c-accent); border-radius:1px; }
.ni { font-size:1.1rem; width:24px; text-align:center; flex-shrink:0; }
.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:all 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:all 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:all 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:all 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:all 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:all 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 ===== */
.pages { flex:1; padding:24px; overflow:auto; }
.page { display:none; animation:pageIn 0.4s var(--spring); }
.page.active { display:block; }
@keyframes pageIn { from { opacity:0; transform:translateY(16px); } 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 var(--transition);
  position:relative;
}
.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.3); box-shadow:var(--shadow-glow); }
.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:all 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:all 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:all 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:all 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:drop-shadow(0 0 8px rgba(108,99,255,0.5));
}
.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; }
.ring-sub { font-family:var(--font-mono); font-size:0.65rem; color:var(--text2); margin-top:4px; letter-spacing:0.08em; text-transform:uppercase; }
.ring-pct { font-family:var(--font-mono); font-size:0.72rem; font-weight:600; 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-mono); font-size:0.62rem; color:var(--text2); margin-top:2px; letter-spacing:0.08em; text-transform:uppercase; }

/* 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-mono); display:flex; align-items:center; gap:6px; font-size:0.68rem; color:var(--text2); width:70px; flex-shrink:0; letter-spacing:0.06em; }
.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; }
.protein-fill { background:var(--c-protein); }
.carbs-fill { background:var(--c-carbs); }
.fat-fill { background:var(--c-fat); }
.fiber-fill { background:var(--c-fiber); }
.macro-val { font-family:var(--font-mono); font-size:0.68rem; 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:all 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:hover { transform:translateY(-3px) scale(1.1); }
.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:flex; gap:20px; align-items:stretch;
}
#macroPhotoCardWrap {
  flex:0 0 300px; max-width:300px;
}

/* ── Quick Actions Panel ──────────────────────────────────────── */
.quick-actions-panel {
  flex:1; min-width:0;
  display:flex; flex-direction:column; gap:16px;
  padding:20px;
  min-height:300px;
}
.qa-summary {
  font-size:0.82rem; font-weight:600;
  color:var(--text2); text-align:center;
  letter-spacing:0.015em;
  padding:8px 12px;
  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:1fr 1fr;
  gap:12px; flex:1;
}
.qa-btn {
  display:flex; flex-direction:column;
  align-items:center; justify-content:center;
  gap:8px; padding:14px 8px;
  background:rgba(108,99,255,0.07);
  border:1px solid rgba(108,99,255,0.18);
  border-radius:16px;
  cursor:pointer; color:var(--text);
  transition:all 0.2s ease;
  font-family:inherit;
}
.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.5rem; line-height:1; }
.qa-label {
  font-family:var(--font-display);
  font-size:0.76rem; font-weight:700;
  color:var(--text); white-space:nowrap;
}

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

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

/* 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:10px; padding:0 0 0 14px;
  background:none; backdrop-filter:none; border:none; width:auto;
}
.mpc-ring-item {
  display:flex; flex-direction:column; align-items:center; gap:4px;
  background:rgba(10,12,22,0.58);
  backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px);
  border:1px solid rgba(255,255,255,0.12);
  border-radius:14px; padding:8px 10px;
  width:72px;
}
.mpc-ring-lbl {
  font-family:var(--font-mono); font-size:0.55rem; text-transform:uppercase;
  letter-spacing:0.1em; color:rgba(255,255,255,0.6);
}
.mpc-ring-wrap { position:relative; width:46px; height:46px; flex-shrink:0; }
.mpc-ring-svg  { width:46px; height:46px; }
.mpc-ring-track { fill:none; stroke:rgba(255,255,255,0.12); 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.95rem; font-weight:700; line-height:1;
}

/* 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.7) 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:all 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 canvas { 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:all var(--transition); }
.day-nav-btn:hover { background:var(--accent); border-color:var(--accent); color:#fff; }
.foodlog-date { font-family:var(--font-display); font-size:1.1rem; font-weight:600; }
.foodlog-totals { text-align:center; margin-bottom:20px; font-size:1.1rem; }
.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:all var(--transition); }
.meal-section-header:hover { border-color:rgba(108,99,255,0.3); }
.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:all var(--transition); }
.add-food-btn:hover { background:rgba(108,99,255,0.25); }
.msh-chevron { transition:transform var(--transition); color:var(--text2); }
.meal-items { overflow:hidden; transition:all var(--transition); }
.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); }
.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; }
.fi-delete { opacity:0; color:var(--accent2); font-size:0.9rem; transition:opacity var(--transition); cursor:pointer; padding:4px; }
.food-item:hover .fi-delete { 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:all 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); }

/* ===== 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; }
.recipes-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(260px,1fr)); gap:16px; }
.recipe-card { padding:20px; cursor:pointer; transition:all var(--transition); }
.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.1rem; font-weight:700; color:var(--accent); margin-top:8px; }
.recipe-delete-btn { float:right; color:var(--accent2); opacity:0; transition:opacity var(--transition); background:none; border:none; cursor:pointer; font-size:1rem; }
.recipe-card:hover .recipe-delete-btn { opacity:1; }

/* ===== 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:all 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:20px; 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:all 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; }
.weight-stats-row { display:grid; grid-template-columns:repeat(4,1fr); gap:12px; margin-bottom:20px; }
.ws-card { text-align:center; padding:16px; }
.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; }
.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:all 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:var(--c-accent); border-radius:3px; transition:width 1s ease; }
.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 var(--transition); position:relative; overflow:hidden;
}
.ach-item.unlocked { border-color:rgba(108,99,255,0.4); }
.ach-item.unlocked::before { content:''; position:absolute; inset:0; background:rgba(108,99,255,0.06); }
.ach-item.locked { opacity:0.45; filter:grayscale(0.7); }
.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; }
.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:all 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(8px); display:flex; align-items:center; justify-content:center; padding:20px; transition:opacity var(--transition); }
.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 var(--spring); box-shadow:var(--shadow); }
.modal.modal-sm { max-width:380px; }
.modal.modal-lg { max-width:700px; }
@keyframes modalIn { from { opacity:0; transform:scale(0.92) translateY(20px); } to { opacity:1; transform:scale(1) translateY(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:all var(--transition); cursor:pointer; }
.modal-close:hover { background:rgba(255,101,132,0.2); border-color:var(--accent2); color:var(--accent2); }
.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:all 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:10px 16px; 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:all var(--transition); cursor:pointer; }
.btn-scan:hover { background:rgba(108,99,255,0.25); }
.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:all 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:all 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); }

/* Serving */
.serving-food-card { padding:14px; background:rgba(108,99,255,0.08); border:1px solid rgba(108,99,255,0.2); border-radius:var(--r-sm); margin-bottom:16px; }
.sfc-name { font-weight:600; font-size:0.95rem; margin-bottom:6px; }
.sfc-macros { display:flex; gap:12px; flex-wrap:wrap; font-size:0.78rem; color:var(--text2); }
.serving-input-row { display:flex; align-items:center; gap:12px; margin-bottom:14px; }
.serving-input-row label { font-size:0.85rem; color:var(--text2); }
.serving-input-row input { 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; width:80px; text-align:center; }
.serving-input-row input:focus { border-color:var(--accent); }
.serving-unit { font-size:0.8rem; color:var(--text2); }
.serving-preview { padding:12px; background:var(--surface); border-radius:var(--r-sm); margin-bottom:16px; display:flex; gap:16px; flex-wrap:wrap; }
.sp-item { text-align:center; }
.sp-val { font-weight:700; font-size:1rem; }
.sp-lbl { font-size:0.7rem; color:var(--text2); }

/* 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:all var(--transition); font-size:0.82rem; display:flex; align-items:center; gap:6px; }
.qex-item:hover { border-color:rgba(250,130,49,0.4); background:rgba(250,130,49,0.08); color:var(--accent4); }
.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:all 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:10; max-height:200px; 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); }
.rsr-item:hover { background:rgba(108,99,255,0.08); }
.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 80px 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 80px 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; }
.ri-amount input { width:70px; padding:5px 8px; 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-cal { font-size:0.82rem; color:var(--text2); }
.ri-del { color:var(--accent2); cursor:pointer; font-size:0.9rem; }
.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); }

/* 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:var(--shadow); animation:toastIn 0.4s var(--spring);
  display:flex; align-items:center; gap:8px; min-width:220px;
  backdrop-filter:blur(10px);
}
.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(30px) scale(0.9); } to { opacity:1; transform:translateX(0) scale(1); } }
@keyframes toastOut { to { opacity:0; transform:translateX(30px) scale(0.9); } }

/* ===== 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; }
.empty-text { color:var(--text2); font-size:0.9rem; }

/* ===== 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%); }
  .sidebar.open { transform:translateX(0); width:240px; }
  .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; }
  .quick-actions-panel { min-height:auto; }
}

/* 600px: Mobile — compact layout, bottom-sheet modals */
@media (max-width:600px) {
  .pages { padding:12px; }
  .topbar { padding:10px 14px; }
  .date-display-btn { font-size:0.65rem; }
  .btn-quick-add { padding:8px 14px; font-size:0.8rem; }
  .page-title { font-size:1.2rem; }

  /* Bottom-sheet modals on mobile */
  .modal-overlay { padding:0; align-items:flex-end; }
  .modal { border-radius:3px 3px 0 0; max-height:92vh; }
  .modal-hdr { padding:16px 20px 14px; }
  .modal-bdy { padding:16px 20px; }

  /* Rings shrink */
  .calorie-ring-wrap { width:170px; height:170px; }
  .ring-remain { font-size:2rem; }
  .fasting-ring-wrap { width:220px; height:220px; }
  .fast-time { font-size:1.8rem; }
  .score-ring-wrap { width:130px; height:130px; }

  /* Food log: hide verbose columns on small screens */
  .fi-serving { display:none; }
  .fi-macros { display:none; }

  /* 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 */
  .toast-wrap { bottom:12px; 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; }
  .fast-types { gap:6px; }
}

/* 480px: Small phone — further compact */
@media (max-width:480px) {
  .pages { padding:10px; }
  .calorie-ring-wrap { width:150px; height:150px; }
  .ring-remain { font-size:1.7rem; }
  .cal-stats-row { gap:12px; }
  .fasting-ring-wrap { width:190px; height:190px; }
  .fast-time { font-size:1.5rem; }
  .score-ring-wrap { width:120px; height:120px; }
  .score-num { font-size:1.8rem; }
  .ach-grid { grid-template-columns:1fr 1fr; }
  .weight-stats-row { grid-template-columns:1fr 1fr; }
  .page-header h2 { font-size:1.2rem; }
  .ex-form-row { grid-template-columns:1fr; }
  .cf-grid { grid-template-columns:1fr; }
  .water-cups-big { gap:5px; }
  .water-cup-big { width:36px; }
  .macro-label { width:55px; font-size:0.78rem; }
  .macro-val { width:70px; font-size:0.72rem; }
}

/* ===== 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:all 0.2s;
}
.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)); }

/* ===== 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 {
  display:grid; grid-template-columns:1fr 1fr; gap:20px;
}
.sub-plan-card {
  position:relative;
  background:var(--card);
  border:1px solid var(--card-border);
  border-radius:20px;
  padding:28px 24px;
  display:flex; flex-direction:column; gap:20px;
  transition:border-color 0.2s, box-shadow 0.2s;
}
.sub-plan-card:hover {
  border-color:rgba(108,99,255,0.4);
  box-shadow:0 8px 32px rgba(108,99,255,0.1);
}
.sub-plan-popular {
  border-color:rgba(108,99,255,0.5);
  box-shadow:0 0 0 1px rgba(108,99,255,0.25), 0 8px 40px rgba(108,99,255,0.12);
}
.sub-plan-current {
  border-color:rgba(0,196,106,0.5);
  box-shadow:0 0 0 1px rgba(0,196,106,0.2);
}
.sub-popular-badge {
  position:absolute; top:-13px; left:50%; transform:translateX(-50%);
  background:var(--accent); color:#fff;
  font-size:0.7rem; font-weight:800; letter-spacing:0.06em;
  padding:4px 14px; border-radius:var(--r-pill);
  text-transform:uppercase; white-space:nowrap;
}

.sp-header { text-align:center; }
.sp-name {
  font-family:var(--font-display); font-size:1.2rem; font-weight:800;
  margin-bottom:8px;
}
.sp-price {
  font-family:var(--font-mono); font-size:2.2rem; font-weight:900;
  color:var(--accent); 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:8px; font-size:0.78rem; font-weight:600;
  color:#00C46A;
  background:rgba(0,196,106,0.1); border:1px solid rgba(0,196,106,0.25);
  border-radius:var(--r-pill); padding:3px 10px; display:inline-block;
}

.sp-features {
  list-style:none; padding:0; margin:0;
  display:flex; flex-direction:column; gap:10px;
  flex:1;
}
.sp-feature {
  display:flex; align-items:flex-start; gap:10px;
  font-size:0.84rem; color:var(--text2); line-height:1.4;
}
.sp-check {
  color:#00C46A; font-weight:800; font-size:0.9rem;
  flex-shrink:0; margin-top:1px;
}

.sub-cta-btn {
  width:100%; padding:14px;
  font-size:0.9rem; font-weight:700;
  border-radius:var(--r-pill);
  transition:all 0.2s;
}
.sub-cta-btn:disabled { opacity:0.6; cursor:not-allowed; }
.sub-cta-current { background:rgba(0,196,106,0.15) !important; color:#00C46A !important; }

/* Guarantee row */
.sub-guarantee {
  display:flex; align-items:center; justify-content:center;
  gap:12px; flex-wrap:wrap;
  font-size:0.78rem; color:var(--text3);
  padding:16px; background:var(--card);
  border:1px solid var(--card-border); border-radius:12px;
}

/* Responsive */
@media (max-width:600px) {
  .sub-plans { grid-template-columns:1fr; }
  .sub-guarantee { flex-direction:column; gap:6px; 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; }
}