/* ══════════════════════════════════════════════════════
   NutriTrack — Professional Design System v3
   ══════════════════════════════════════════════════════ */
:root {
  --primary:       #009688;
  --primary-dark:  #00796b;
  --primary-light: #e0f2f1;
  --primary-xlight:#f0faf9;
  --accent:        #ffa726;
  --danger:        #e53935;
  --danger-light:  #ffebee;
  --success:       #43a047;
  --success-light: #e8f5e9;
  --warning:       #fb8c00;
  --warning-light: #fff3e0;
  --info:          #1e88e5;
  --info-light:    #e3f2fd;
  --text:          #212121;
  --text-secondary:#616161;
  --text-muted:    #9e9e9e;
  --border:        #e0e0e0;
  --surface:       #fff;
  --bg:            #f5f7fa;
  --bg-dark:       #eeeeee;
  --sidebar-w:     260px;
  --topbar-h:      64px;
  --r:    12px;
  --r-sm:  8px;
  --r-lg: 20px;
  --shadow-sm: 0 1px 3px rgba(0,0,0,.07);
  --shadow:    0 4px 16px rgba(0,0,0,.10);
  --shadow-lg: 0 8px 32px rgba(0,0,0,.14);
  --t: .2s ease;
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0 }
html { font-size: 16px; scroll-behavior: smooth; -webkit-text-size-adjust: 100% }
body {
  font-family: 'Inter', system-ui, -apple-system, sans-serif;
  color: var(--text);
  background: var(--bg);
  line-height: 1.6;
  min-height: 100vh;
}
a { color: var(--primary); text-decoration: none }
a:hover { text-decoration: underline }
img { max-width: 100% }

/* ── Scrollbar ─────────────────────────────────────────────── */
::-webkit-scrollbar { width: 6px; height: 6px }
::-webkit-scrollbar-track { background: transparent }
::-webkit-scrollbar-thumb { background: #ccc; border-radius: 3px }

/* ── Sidebar ───────────────────────────────────────────────── */
.sidebar {
  width: var(--sidebar-w);
  background: linear-gradient(180deg, #00695c 0%, #004d40 100%);
  display: flex;
  flex-direction: column;
  position: fixed;
  top: 0; left: 0;
  height: 100vh;
  z-index: 1000;
  overflow-y: auto;
  transition: transform var(--t);
  scrollbar-width: thin;
  scrollbar-color: rgba(255,255,255,.2) transparent;
}
.sidebar-brand {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 20px 20px 16px;
  border-bottom: 1px solid rgba(255,255,255,.12);
  color: #fff;
  font-size: 1.2rem;
  font-weight: 700;
  letter-spacing: -.02em;
}
.brand-icon {
  width: 38px; height: 38px;
  background: rgba(255,255,255,.18);
  border-radius: var(--r-sm);
  display: flex; align-items: center; justify-content: center;
  font-size: 1.3rem;
  flex-shrink: 0;
}
.sidebar-user { padding: 12px 20px; border-bottom: 1px solid rgba(255,255,255,.10) }
.sidebar-user-name  { color: #fff; font-size: .875rem; font-weight: 600; overflow: hidden; white-space: nowrap; text-overflow: ellipsis }
.sidebar-user-role  { color: rgba(255,255,255,.6); font-size: .72rem; margin-top: 2px }
.sidebar-nav  { flex: 1; padding: 8px 0; overflow-y: auto }
.sidebar-section {
  padding: 10px 20px 4px;
  font-size: .68rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .1em;
  color: rgba(255,255,255,.4);
}
.sidebar-nav a {
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 10px 20px;
  color: rgba(255,255,255,.8);
  font-size: .875rem;
  font-weight: 500;
  transition: background var(--t), color var(--t);
  text-decoration: none;
  border-left: 3px solid transparent;
  margin: 1px 0;
}
.sidebar-nav a:hover { background: rgba(255,255,255,.1); color: #fff; text-decoration: none }
.sidebar-nav a.active { background: rgba(255,255,255,.16); color: #fff; border-left-color: #80cbc4 }
.nav-icon { width: 20px; text-align: center; font-size: 1rem; flex-shrink: 0 }
.sidebar-footer { padding: 10px 0; border-top: 1px solid rgba(255,255,255,.10) }
.sidebar-footer a {
  display: flex; align-items: center; gap: 11px;
  padding: 10px 20px;
  color: rgba(255,255,255,.7);
  font-size: .875rem;
  font-weight: 500;
  transition: var(--t);
  text-decoration: none;
}
.sidebar-footer a:hover { background: rgba(255,255,255,.1); color: #fff; text-decoration: none }
.logout-btn  { color: #ef9a9a !important }
.logout-btn:hover { background: rgba(229,57,53,.22) !important; color: #ff8a80 !important }

.sidebar-overlay {
  display: none;
  position: fixed; inset: 0;
  background: rgba(0,0,0,.5);
  z-index: 999;
}

/* ── Topbar (mobile) ───────────────────────────────────────── */
.topbar {
  display: none;
  position: fixed; top: 0; left: 0; right: 0;
  height: var(--topbar-h);
  background: #00695c;
  align-items: center;
  padding: 0 16px;
  z-index: 998;
  box-shadow: var(--shadow);
}
.topbar-toggle {
  background: none; border: none;
  color: #fff; font-size: 1.5rem;
  cursor: pointer; padding: 6px;
  border-radius: 6px;
  margin-right: 12px;
  transition: background var(--t);
}
.topbar-toggle:hover { background: rgba(255,255,255,.15) }
.topbar-brand { color: #fff; font-size: 1.1rem; font-weight: 700 }

/* ── Main content ──────────────────────────────────────────── */
.main-content { margin-left: var(--sidebar-w); min-height: 100vh; padding: 32px }

/* ── Auth layout ───────────────────────────────────────────── */
.auth-root {
  min-height: 100vh;
  display: flex; align-items: center; justify-content: center;
  background: linear-gradient(135deg, #004d40 0%, #009688 55%, #4db6ac 100%);
  padding: 24px 16px;
}
.auth-card {
  background: #fff;
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-lg);
  padding: 40px 40px 36px;
  width: 100%; max-width: 460px;
  animation: slideUp .35s ease;
}
.auth-card.wide { max-width: 680px }
.auth-logo { text-align: center; margin-bottom: 28px }
.logo-icon {
  width: 64px; height: 64px;
  background: var(--primary-light);
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 2rem;
  margin: 0 auto 12px;
}
.auth-logo h1 { font-size: 1.5rem; font-weight: 700; color: var(--primary-dark) }
.auth-logo p  { color: var(--text-secondary); font-size: .875rem; margin-top: 4px }
.auth-divider {
  text-align: center; color: var(--text-muted); font-size: .8rem;
  margin: 20px 0; position: relative;
}
.auth-divider::before, .auth-divider::after {
  content: ''; position: absolute; top: 50%;
  width: calc(50% - 24px); height: 1px; background: var(--border);
}
.auth-divider::before { left: 0 }
.auth-divider::after  { right: 0 }

/* ── Page header ───────────────────────────────────────────── */
.page-header { margin-bottom: 28px }
.page-header h1 { font-size: 1.75rem; font-weight: 700; line-height: 1.2 }
.page-header p  { color: var(--text-secondary); margin-top: 6px; font-size: .95rem }

/* ── Cards ─────────────────────────────────────────────────── */
.card {
  background: var(--surface);
  border-radius: var(--r);
  box-shadow: var(--shadow-sm);
  border: 1px solid var(--border);
  padding: 24px;
}
.card-title {
  font-size: 1rem; font-weight: 700;
  margin-bottom: 16px;
  display: flex; align-items: center; gap: 8px;
}

/* ── Stat/summary cards ────────────────────────────────────── */
.summary-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 16px;
  margin-bottom: 28px;
}
.stat-card {
  background: var(--surface);
  border-radius: var(--r);
  padding: 20px;
  border: 1px solid var(--border);
  display: flex; align-items: center; gap: 16px;
  box-shadow: var(--shadow-sm);
  transition: box-shadow var(--t), transform var(--t);
}
.stat-card:hover { box-shadow: var(--shadow); transform: translateY(-2px) }
.stat-card-icon {
  width: 52px; height: 52px;
  border-radius: var(--r); display: flex;
  align-items: center; justify-content: center;
  font-size: 1.5rem; flex-shrink: 0;
}
.stat-card-icon.teal   { background: var(--primary-light) }
.stat-card-icon.orange { background: #fff3e0 }
.stat-card-icon.blue   { background: var(--info-light) }
.stat-card-icon.green  { background: var(--success-light) }
.stat-card-value { font-size: 1.75rem; font-weight: 800; line-height: 1.1 }
.stat-card-label { font-size: .78rem; color: var(--text-secondary); margin-top: 3px; font-weight: 500 }

/* ── Dashboard specific ────────────────────────────────────── */
.dash-grid {
  display: grid;
  grid-template-columns: 280px 1fr;
  gap: 20px;
  margin-bottom: 24px;
  align-items: start;
}
.profile-table { display: flex; flex-direction: column; gap: 0 }
.profile-row {
  display: flex; gap: 12px;
  padding: 7px 0;
  border-bottom: 1px solid var(--border);
  font-size: .875rem;
  align-items: baseline;
}
.profile-row:last-child { border-bottom: none }
.profile-label { color: var(--text-muted); min-width: 52px; font-size: .78rem; text-transform: uppercase; letter-spacing: .04em; flex-shrink: 0 }

/* Quick links row on dashboard */
.quick-links {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(130px, 1fr));
  gap: 12px;
}
.quick-link-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
  padding: 16px 12px;
  text-align: center;
  display: flex; flex-direction: column;
  align-items: center; gap: 8px;
  font-size: .85rem; font-weight: 600;
  color: var(--text-secondary);
  text-decoration: none;
  transition: all var(--t);
}
.quick-link-card:hover { border-color: var(--primary); color: var(--primary); box-shadow: var(--shadow); transform: translateY(-2px); text-decoration: none }
.quick-link-icon { font-size: 1.5rem }

/* ── Forms ─────────────────────────────────────────────────── */
.form-group  { margin-bottom: 18px }
.form-label  { display: block; font-size: .875rem; font-weight: 600; color: var(--text-secondary); margin-bottom: 6px }
.form-control {
  width: 100%; padding: 11px 14px;
  border: 1.5px solid var(--border);
  border-radius: var(--r-sm);
  font-size: .95rem; font-family: inherit;
  color: var(--text); background: var(--surface);
  transition: border-color var(--t), box-shadow var(--t);
  outline: none;
  -webkit-appearance: none;
}
.form-control:focus { border-color: var(--primary); box-shadow: 0 0 0 3px rgba(0,150,136,.12) }
.form-control.is-invalid { border-color: var(--danger); box-shadow: 0 0 0 3px rgba(229,57,53,.1) }
.form-control::placeholder { color: var(--text-muted) }
select.form-control {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='%23757575' d='M6 8L0 0h12z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 14px center;
  padding-right: 36px;
  cursor: pointer;
}
textarea.form-control { resize: vertical; min-height: 100px }
.form-row  { display: grid; grid-template-columns: 1fr 1fr; gap: 16px }
.form-text { font-size: .78rem; color: var(--text-muted); margin-top: 4px }
.input-group { position: relative; display: flex; align-items: center }
.input-group .form-control { padding-right: 44px }
.input-group-btn {
  position: absolute; right: 10px;
  background: none; border: none;
  cursor: pointer; color: var(--text-muted);
  padding: 4px; font-size: 1.1rem;
  transition: color var(--t);
}
.input-group-btn:hover { color: var(--primary) }
.password-strength { height: 4px; border-radius: 2px; background: var(--border); margin-top: 8px; overflow: hidden }
.password-strength-bar { height: 100%; border-radius: 2px; transition: width .3s, background .3s; width: 0 }
.strength-text { font-size: .75rem; margin-top: 4px; font-weight: 500 }

/* ── Buttons ───────────────────────────────────────────────── */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  padding: 10px 20px;
  border-radius: var(--r-sm);
  font-size: .9rem; font-weight: 600; font-family: inherit;
  border: 1.5px solid transparent;
  cursor: pointer;
  transition: all var(--t);
  text-decoration: none;
  white-space: nowrap;
  -webkit-appearance: none;
  user-select: none;
  line-height: 1.4;
}
.btn:hover { text-decoration: none }
.btn:disabled { opacity: .55; cursor: not-allowed }
.btn-primary   { background: var(--primary);  color: #fff; border-color: var(--primary)  }
.btn-primary:hover { background: var(--primary-dark); border-color: var(--primary-dark); color: #fff }
.btn-secondary { background: var(--bg-dark);  color: var(--text-secondary); border-color: var(--border) }
.btn-secondary:hover { background: #e0e0e0; color: var(--text) }
.btn-danger  { background: var(--danger);  color: #fff; border-color: var(--danger)  }
.btn-danger:hover  { background: #c62828; color: #fff }
.btn-success { background: var(--success); color: #fff; border-color: var(--success) }
.btn-success:hover { background: #2e7d32; color: #fff }
.btn-outline { background: transparent; color: var(--primary); border-color: var(--primary) }
.btn-outline:hover { background: var(--primary-light) }
.btn-ghost   { background: transparent; color: var(--text-secondary); border-color: transparent }
.btn-ghost:hover { background: var(--bg-dark); color: var(--text) }
.btn-info    { background: var(--info); color: #fff; border-color: var(--info) }
.btn-info:hover { background: #1565c0; color: #fff }
.btn-sm  { padding: 7px 14px; font-size: .8rem }
.btn-lg  { padding: 13px 24px; font-size: 1rem }
.btn-xl  { padding: 13px 28px; font-size: 1rem; border-radius: var(--r) }
.btn-block { width: 100% }
.btn-loading { pointer-events: none }
.btn-loading::after {
  content: '';
  width: 14px; height: 14px;
  border: 2px solid rgba(255,255,255,.4);
  border-top-color: #fff;
  border-radius: 50%;
  animation: spin .7s linear infinite;
  margin-left: 8px;
}

/* ── Alerts ────────────────────────────────────────────────── */
.alert {
  padding: 12px 16px;
  border-radius: var(--r-sm);
  font-size: .875rem;
  display: flex; align-items: flex-start; gap: 10px;
  margin-bottom: 16px;
  border: 1px solid transparent;
  animation: fadeIn .3s ease;
}
.alert-icon  { font-size: 1.1rem; flex-shrink: 0; margin-top: 1px }
.alert-danger  { background: var(--danger-light);  color: #b71c1c; border-color: #ffcdd2 }
.alert-success { background: var(--success-light); color: #1b5e20; border-color: #c8e6c9 }
.alert-warning { background: var(--warning-light); color: #e65100; border-color: #ffe0b2 }
.alert-info    { background: var(--info-light);    color: #0d47a1; border-color: #bbdefb }

/* ── Badges ────────────────────────────────────────────────── */
.badge {
  display: inline-flex; align-items: center;
  padding: 3px 10px; border-radius: 20px;
  font-size: .72rem; font-weight: 700;
}
.badge-teal   { background: var(--primary-light); color: var(--primary-dark) }
.badge-green  { background: var(--success-light); color: #2e7d32 }
.badge-orange { background: var(--warning-light); color: #e65100 }
.badge-red    { background: var(--danger-light);  color: #b71c1c }
.badge-blue   { background: var(--info-light);    color: #0d47a1 }
.badge-grey   { background: var(--bg-dark);       color: var(--text-secondary) }

/* ── Progress bars ─────────────────────────────────────────── */
.progress {
  height: 10px; background: var(--bg-dark);
  border-radius: 10px; overflow: hidden;
}
.progress-bar {
  height: 100%; border-radius: 10px;
  background: var(--primary);
  transition: width .4s ease;
}
.progress-bar.success { background: var(--success) }
.progress-bar.warning { background: var(--warning) }
.progress-bar.danger  { background: var(--danger)  }

/* ── Tabs ──────────────────────────────────────────────────── */
.tabs {
  display: flex; gap: 4px;
  border-bottom: 2px solid var(--border);
  margin-bottom: 20px;
  overflow-x: auto;
  scrollbar-width: none;
}
.tabs::-webkit-scrollbar { display: none }
.tab-btn {
  background: none; border: none;
  padding: 10px 16px;
  font-size: .875rem; font-weight: 600;
  color: var(--text-secondary);
  cursor: pointer;
  border-bottom: 3px solid transparent;
  margin-bottom: -2px;
  transition: color var(--t), border-color var(--t);
  white-space: nowrap;
  font-family: inherit;
}
.tab-btn:hover { color: var(--primary) }
.tab-btn.active { color: var(--primary); border-bottom-color: var(--primary) }
.tab-pane { display: none }
.tab-pane.active { display: block; animation: fadeIn .2s ease }

/* ── Tables ────────────────────────────────────────────────── */
.table-wrap { overflow-x: auto; border-radius: var(--r-sm); border: 1px solid var(--border) }
table { width: 100%; border-collapse: collapse; font-size: .875rem }
thead tr { background: var(--bg-dark) }
th {
  padding: 11px 14px;
  text-align: left;
  font-size: .75rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: .04em;
  color: var(--text-secondary);
  border-bottom: 2px solid var(--border);
  white-space: nowrap;
}
td {
  padding: 11px 14px;
  border-bottom: 1px solid var(--border);
  color: var(--text);
  vertical-align: middle;
}
tbody tr:last-child td  { border-bottom: none }
tbody tr:hover { background: var(--primary-xlight) }

/* ── Empty states ──────────────────────────────────────────── */
.empty-state {
  text-align: center;
  padding: 32px 16px;
  color: var(--text-muted);
}
.empty-icon { font-size: 2.5rem; margin-bottom: 8px }
.empty-state p { margin-bottom: 16px; font-size: .9rem }

/* ── BMI gauge ─────────────────────────────────────────────── */
.bmi-gauge {
  position: relative;
  height: 20px;
  border-radius: 10px;
  overflow: visible;
  background: linear-gradient(to right, #2196f3 0%, #43a047 30%, #fb8c00 60%, #e53935 100%);
}
.bmi-gauge .marker {
  position: absolute; top: -5px;
  width: 8px; height: 30px;
  background: #fff;
  border: 2px solid #333;
  border-radius: 4px;
  transform: translateX(-50%);
  box-shadow: 0 2px 6px rgba(0,0,0,.35);
  transition: left .5s ease;
  pointer-events: none;
}
.bmi-gauge-labels {
  display: flex; justify-content: space-between;
  font-size: .7rem; color: var(--text-muted); margin-top: 6px;
}

/* ── BMI page layout ───────────────────────────────────────── */
.bmi-layout {
  display: grid;
  grid-template-columns: 320px 1fr;
  gap: 20px;
  align-items: start;
}

/* ── Calorie counter layout ────────────────────────────────── */
.cal-layout {
  display: grid;
  grid-template-columns: 1fr 310px;
  gap: 20px;
  align-items: start;
}
.cal-side { display: flex; flex-direction: column; gap: 16px }
.cat-filter { display: flex; flex-wrap: wrap; gap: 6px }

/* ── Food cards ────────────────────────────────────────────── */
.food-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(110px, 1fr));
  gap: 10px;
}
.food-card {
  background: var(--surface);
  border: 1.5px solid var(--border);
  border-radius: var(--r-sm);
  padding: 10px 8px;
  text-align: center;
  cursor: pointer;
  transition: all var(--t);
  user-select: none;
}
.food-card:hover  { border-color: var(--primary); box-shadow: 0 4px 12px rgba(0,150,136,.12); transform: translateY(-2px) }
.food-card.selected { background: var(--primary-light); border-color: var(--primary) }
.food-card:focus  { outline: 2px solid var(--primary); outline-offset: 2px }
.food-emoji { font-size: 1.75rem; display: block; margin-bottom: 4px }
.food-name  { font-size: .78rem; font-weight: 600; line-height: 1.3 }
.food-kcal  { font-size: .72rem; color: var(--text-muted); margin-top: 2px }

/* ── Water tracker layout ──────────────────────────────────── */
.water-layout {
  display: grid;
  grid-template-columns: 460px 1fr;
  gap: 20px;
  align-items: start;
}

/* ── Glass grid ────────────────────────────────────────────── */
.glass-grid { display: flex; flex-wrap: wrap; gap: 8px; margin: 12px 0 }
.glass {
  width: 44px; height: 54px;
  border: 2.5px solid var(--border);
  border-radius: 4px 4px 8px 8px;
  display: flex; align-items: flex-end; justify-content: center;
  font-size: 1.3rem; padding-bottom: 3px;
  transition: all var(--t);
  cursor: pointer;
  background: #fff;
  position: relative;
}
.glass.filled {
  border-color: var(--info);
  background: var(--info-light);
}
.glass.filled::after { content: '💧'; font-size: 1.1rem }

/* ── Nutritionists ─────────────────────────────────────────── */
.nutri-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(290px, 1fr)); gap: 20px }
.nutri-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r);
  padding: 20px;
  transition: box-shadow var(--t), transform var(--t);
}
.nutri-card:hover { box-shadow: var(--shadow); transform: translateY(-3px) }
.nutri-card h3   { font-size: 1rem; font-weight: 700; margin-bottom: 4px }
.nutri-card .spec  { color: var(--primary-dark); font-size: .83rem; font-weight: 600; margin-bottom: 12px }
.nutri-card .info  { font-size: .83rem; color: var(--text-secondary) }
.nutri-card .info div { margin-bottom: 4px; display: flex; align-items: center; gap: 6px }
.nutri-card .rating { color: var(--accent); font-weight: 700 }
.nutri-contact { display: flex; gap: 8px; margin-top: 14px; flex-wrap: wrap }

/* ── Diet plans ────────────────────────────────────────────── */
.diet-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 20px; margin-bottom: 24px }
.diet-card { border-radius: var(--r); overflow: hidden; box-shadow: var(--shadow-sm); border: 1px solid var(--border) }
.diet-card-header { padding: 20px; color: #fff; font-weight: 700; font-size: 1rem }
.diet-card-body   { background: var(--surface); padding: 20px }
.diet-card-body ul { padding-left: 20px; font-size: .875rem; color: var(--text-secondary); line-height: 2.1 }

/* ── Timers ────────────────────────────────────────────────── */
.timer-display {
  font-size: 4rem; font-weight: 800;
  font-variant-numeric: tabular-nums;
  color: var(--text);
  text-align: center;
  letter-spacing: 4px;
  margin: 16px 0;
}
.timer-controls { display: flex; gap: 12px; justify-content: center; margin-top: 16px; flex-wrap: wrap }

/* ── Admin ─────────────────────────────────────────────────── */
.admin-stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 16px;
  margin-bottom: 28px;
}
.admin-stat {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r);
  padding: 20px;
  text-align: center;
  box-shadow: var(--shadow-sm);
}
.admin-stat-value { font-size: 2.2rem; font-weight: 800; color: var(--primary-dark) }
.admin-stat-label { font-size: .8rem; color: var(--text-secondary); font-weight: 500; margin-top: 4px }

/* ── Toast ─────────────────────────────────────────────────── */
.toast-container {
  position: fixed; bottom: 24px; right: 24px;
  z-index: 9999;
  display: flex; flex-direction: column; gap: 10px;
}
.toast {
  background: #323232; color: #fff;
  padding: 14px 20px;
  border-radius: var(--r-sm);
  font-size: .875rem;
  box-shadow: var(--shadow-lg);
  display: flex; align-items: center; gap: 10px;
  animation: slideUp .3s ease;
  max-width: 320px;
  word-break: break-word;
}
.toast.success { background: var(--success) }
.toast.danger  { background: var(--danger)  }
.toast.warning { background: var(--warning) }

/* ── Contact page ──────────────────────────────────────────── */
.contact-layout {
  display: grid;
  grid-template-columns: 1fr 360px;
  gap: 24px;
  align-items: start;
}
.contact-info-item {
  display: flex; align-items: flex-start; gap: 12px;
  padding: 14px 0; border-bottom: 1px solid var(--border);
  font-size: .9rem;
}
.contact-info-item:last-child { border-bottom: none }
.contact-info-icon { font-size: 1.3rem; flex-shrink: 0 }

/* ── Privacy / Terms page ──────────────────────────────────── */
.legal-content { max-width: 800px }
.legal-content h2 { font-size: 1.15rem; font-weight: 700; margin: 28px 0 10px; color: var(--primary-dark) }
.legal-content p  { margin-bottom: 12px; color: var(--text-secondary); font-size: .9rem; line-height: 1.8 }
.legal-content ul { padding-left: 20px; margin-bottom: 12px; color: var(--text-secondary); font-size: .9rem; line-height: 2 }

/* ── Utility helpers ───────────────────────────────────────── */
.text-center   { text-align: center }
.text-muted    { color: var(--text-muted) }
.text-danger   { color: var(--danger) }
.text-success  { color: var(--success) }
.text-primary-c{ color: var(--primary) }
.mt-1 { margin-top: 8px  } .mt-2 { margin-top: 16px } .mt-3 { margin-top: 24px } .mt-4 { margin-top: 32px }
.mb-1 { margin-bottom: 8px } .mb-2 { margin-bottom: 16px } .mb-3 { margin-bottom: 24px } .mb-4 { margin-bottom: 32px }
.d-flex { display: flex } .align-center { align-items: center } .justify-between { justify-content: space-between }
.gap-1 { gap: 8px } .gap-2 { gap: 16px } .flex-1 { flex: 1 } .flex-wrap { flex-wrap: wrap }
.hidden { display: none !important }
.separator { border: none; border-top: 1px solid var(--border); margin: 20px 0 }
.no-break { white-space: nowrap }

/* ── Animations ────────────────────────────────────────────── */
@keyframes fadeIn    { from { opacity: 0 } to { opacity: 1 } }
@keyframes spin      { to { transform: rotate(360deg) } }
@keyframes slideUp   { from { opacity: 0; transform: translateY(24px) } to { opacity: 1; transform: translateY(0) } }

/* ═══════════════════════════════════════════════
   RESPONSIVE — 900 px tablet / large mobile
═══════════════════════════════════════════════ */
@media (max-width: 900px) {
  .sidebar { transform: translateX(-100%) }
  .sidebar.open { transform: translateX(0); box-shadow: 4px 0 24px rgba(0,0,0,.3) }
  .sidebar-overlay.visible { display: block }
  .topbar { display: flex }
  .main-content { margin-left: 0; padding: 24px 16px; padding-top: calc(var(--topbar-h) + 24px) }

  .dash-grid    { grid-template-columns: 1fr }
  .bmi-layout   { grid-template-columns: 1fr }
  .cal-layout   { grid-template-columns: 1fr }
  .water-layout { grid-template-columns: 1fr }
  .contact-layout { grid-template-columns: 1fr }
  .form-row     { grid-template-columns: 1fr }
  .nutri-grid   { grid-template-columns: 1fr }
  .summary-grid { grid-template-columns: repeat(2, 1fr) }
}

/* ═══════════════════════════════════════════════
   RESPONSIVE — 600 px mobile
═══════════════════════════════════════════════ */
@media (max-width: 600px) {
  .main-content { padding: 16px 12px; padding-top: calc(var(--topbar-h) + 16px) }
  .page-header h1 { font-size: 1.35rem }
  .summary-grid { grid-template-columns: 1fr 1fr; gap: 10px }
  .stat-card { padding: 14px }
  .stat-card-value { font-size: 1.4rem }
  .stat-card-icon  { width: 42px; height: 42px; font-size: 1.2rem }
  .card { padding: 16px }
  .auth-card { padding: 28px 20px }
  .auth-card.wide { padding: 24px 16px }
  .food-grid { grid-template-columns: repeat(auto-fill, minmax(90px, 1fr)); gap: 8px }
  .timer-display { font-size: 2.8rem; letter-spacing: 2px }
  .btn-xl { padding: 13px 20px; font-size: .95rem }
  .tabs { gap: 0 }
  .tab-btn { padding: 8px 12px; font-size: .8rem }
  .diet-grid { grid-template-columns: 1fr }
  .admin-stats { grid-template-columns: repeat(2, 1fr) }
  .toast-container { bottom: 12px; right: 12px; left: 12px }
  .toast { max-width: 100% }
  table { font-size: .8rem }
  th, td { padding: 10px 8px }
  .quick-links { grid-template-columns: repeat(3, 1fr); gap: 8px }
  .quick-link-card { padding: 12px 8px; font-size: .78rem }
  .nutri-grid { grid-template-columns: 1fr }
  .bmi-gauge-labels { font-size: .65rem }
}

/* ═══════════════════════════════════════════════
   RESPONSIVE — 360 px extra-small
═══════════════════════════════════════════════ */
@media (max-width: 380px) {
  .summary-grid { grid-template-columns: 1fr }
  .quick-links  { grid-template-columns: repeat(2, 1fr) }
  .auth-card { padding: 24px 14px }
  .form-row  { grid-template-columns: 1fr }
  .timer-display { font-size: 2.4rem }
}