/* ============================================================
   NutriTrack — Design System
   ============================================================ */

/* === @property: register animatable color tokens === */
@property --bg           { syntax: '<color>'; inherits: true; initial-value: #272522; }
@property --surface      { syntax: '<color>'; inherits: true; initial-value: #5f5650; }
@property --surface-hover{ syntax: '<color>'; inherits: true; initial-value: #6a6058; }
@property --border       { syntax: '<color>'; inherits: true; initial-value: #b0b2b7; }
@property --accent       { syntax: '<color>'; inherits: true; initial-value: #d8b797; }
@property --text         { syntax: '<color>'; inherits: true; initial-value: #cdc3bc; }
@property --muted        { syntax: '<color>'; inherits: true; initial-value: #939ca8; }
/* Semantic aliases — registered so they also animate */
@property --bg-deep      { syntax: '<color>'; inherits: true; initial-value: #272522; }
@property --bg-surface   { syntax: '<color>'; inherits: true; initial-value: #5f5650; }
@property --accent-primary  { syntax: '<color>'; inherits: true; initial-value: #d8b797; }
@property --accent-dim      { syntax: '<color>'; inherits: true; initial-value: #b0b2b7; }
@property --text-highlight  { syntax: '<color>'; inherits: true; initial-value: #cdc3bc; }
@property --text-muted      { syntax: '<color>'; inherits: true; initial-value: #939ca8; }

/* === Reset === */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {
  /* ── Core theme tokens: legacy names (used throughout CSS) */
  --bg:            #272522;
  --surface:       #5f5650;
  --surface-hover: #6a6058;
  --border:        #b0b2b7;
  --accent:        #d8b797;
  --text:          #cdc3bc;
  --muted:         #939ca8;
  --white:         #FFFFFF;
  --error:         #B86358;
  --success:       #7A9E82;

  /* ── Semantic aliases: new 6-token architecture */
  --bg-deep:        var(--bg);
  --bg-surface:     var(--surface);
  --accent-primary: var(--accent);
  --accent-dim:     var(--border);
  --text-highlight: var(--text);
  --text-muted:     var(--muted);

  /* ── Derived accent tints (auto-update with color-mix) */
  --accent-bg:           color-mix(in srgb, var(--accent) 12%, transparent);
  --accent-subtle:       color-mix(in srgb, var(--accent)  7%, transparent);
  --accent-hover:        color-mix(in srgb, var(--accent) 17%, transparent);
  --accent-border:       color-mix(in srgb, var(--accent) 28%, transparent);
  --accent-border-strong:color-mix(in srgb, var(--accent) 45%, transparent);
  --accent-glow:         color-mix(in srgb, var(--accent) 13%, transparent);
  --error-bg:            rgba(184, 99, 88, 0.10);

  /* ── Nutrient colors */
  --protein: #C47070;
  --carbs:   #C08858;
  --fat:     #9484C0;
  --fiber:   #7A9E82;
  --micro:   #7099A8;

  /* ── Typography */
  --font-ui:       'Plus Jakarta Sans', system-ui, -apple-system, sans-serif;
  --selected-font: 'Plus Jakarta Sans', system-ui, -apple-system, sans-serif;
  --font-num:      'JetBrains Mono', 'Courier New', monospace;
  --font-scale:    1;

  /* ── Radii */
  --r:    12px;
  --r-sm:  8px;
  --r-xs:  6px;

  --sidebar-w: 220px;

  /* ── Global theme morph transition (0.6s ease-in-out as per spec) */
  transition:
    --bg           0.6s ease-in-out,
    --surface      0.6s ease-in-out,
    --surface-hover 0.6s ease-in-out,
    --border       0.6s ease-in-out,
    --accent       0.6s ease-in-out,
    --text         0.6s ease-in-out,
    --muted        0.6s ease-in-out;
}

/* ── Scrollbar colors (overridden inline per theme via JS) */
:root { scrollbar-color: var(--surface-hover) var(--bg); }

html, body { height: 100%; }

body {
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-ui);
  font-size: calc(14px * var(--font-scale, 1));
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  overflow: hidden;
  transition: background 0.6s ease-in-out,
              color 0.6s ease-in-out,
              opacity 0.2s ease;
}

/* Font-switch: fade body to opacity:0, swap font, fade back */
body.font-switching { opacity: 0; }

/* Apply selected font to all interactive elements */
button, input, select, textarea,
.stepper-input, .field-input, .num-stepper input {
  font-family: var(--selected-font);
}

/* Auto contrast-boost on active/accent interactive elements (set by JS when accent ≈ bg) */
.sidebar-link.active, .btn-primary, .theme-swatch.active {
  filter: var(--interactive-filter, none);
}

/* ::selection default (overridden per-theme by JS-injected <style>) */
::selection {
  background: var(--accent);
  color: var(--bg);
}

/* ============================================================
   Layout
   ============================================================ */
#app { display: flex; height: 100vh; overflow: hidden; }

/* ============================================================
   Sidebar
   ============================================================ */
.sidebar {
  width: var(--sidebar-w);
  flex-shrink: 0;
  background: var(--bg);
  border-right: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  height: 100vh;
  overflow-y: auto;
  overflow-x: hidden;
  scrollbar-width: none;
}
.sidebar::-webkit-scrollbar { display: none; }

.sidebar-brand {
  padding: 20px 16px 16px;
  display: flex;
  align-items: center;
  gap: 10px;
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
}

.sidebar-logo {
  font-family: var(--font-num);
  font-size: 13px;
  font-weight: 700;
  color: var(--accent);
  background: var(--accent-bg);
  border: 1px solid var(--accent-border);
  border-radius: var(--r-sm);
  padding: 4px 8px;
  letter-spacing: 1px;
  flex-shrink: 0;
}


/* Profile gate — dim non-profile sidebar links */
.sidebar.profile-locked .sidebar-link:not([data-view="profile"]) {
  opacity: 0.3;
  pointer-events: none;
  cursor: not-allowed;
}

/* Goals gate — dim non-goals/profile/settings sidebar links */
.sidebar.goals-locked .sidebar-link:not([data-view="goals"]):not([data-view="profile"]):not([data-view="settings"]) {
  opacity: 0.3;
  pointer-events: none;
  cursor: not-allowed;
}

.sidebar-app-name {
  font-size: 14px;
  font-weight: 700;
  color: var(--white);
  letter-spacing: -0.3px;
}

.sidebar-section-label {
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1.1px;
  color: var(--muted);
  padding: 14px 20px 5px;
}

.sidebar-nav {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 0 8px;
}

.sidebar-link {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 8px 10px;
  border-radius: var(--r-sm);
  color: var(--muted);
  text-decoration: none;
  font-size: 13px;
  font-weight: 500;
  opacity: 0.75;
  transition: background 0.3s ease, color 0.3s ease, opacity 0.3s ease;
}
.sidebar-link:hover  { background: var(--accent-subtle); color: var(--text); opacity: 1; }
.sidebar-link.active {
  color: var(--accent-primary);
  opacity: 1;
}

.sidebar-icon { width: 18px; height: 18px; flex-shrink: 0; }

.sidebar-back {
  margin-top: auto;
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 12px 20px;
  color: var(--muted);
  text-decoration: none;
  font-size: 12px;
  border-top: 1px solid var(--border);
  transition: color 0.15s;
  flex-shrink: 0;
}
.sidebar-back:hover { color: var(--text); }

/* ============================================================
   Content area
   ============================================================ */
.content-area {
  flex: 1;
  height: 100vh;
  overflow-y: auto;
  overflow-x: hidden;
}

.view {
  display: none;
  padding: 28px 32px;
  animation: fadeIn 0.15s ease;
}
.view.active { display: block; }

/* ============================================================
   View header
   ============================================================ */
.view-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  margin-bottom: 20px;
  gap: 12px;
  flex-wrap: wrap;
}
.view-title    { font-size: 24px; font-weight: 700; color: #E0E0E0; letter-spacing: -0.4px; }
.view-subtitle { font-size: 13px; color: var(--muted); margin-top: 2px; }

/* ============================================================
   Cards
   ============================================================ */
.card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r);
  padding: 18px;
  margin-bottom: 14px;
  box-shadow: 6px 6px 12px rgba(0,0,0,0.35), -4px -4px 10px rgba(255,255,255,0.03);
  transition: background 0.25s, box-shadow 0.25s;
}
.card:hover { background: var(--surface-hover); box-shadow: 0 4px 20px var(--accent-glow); }

.card-label {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.8px;
  color: var(--muted);
}

.card-header-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 12px;
}

/* ============================================================
   Forms
   ============================================================ */
.form-card { display: flex; flex-direction: column; gap: 14px; }

.form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}

.form-field { display: flex; flex-direction: column; gap: 5px; position: relative; }
.wizard-step .form-field { gap: 6px; }

.field-label {
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.6px;
  color: var(--muted);
}
.field-label .field-unit,
.field-label .wiz-unit,
.field-label .wiz-unit-weight { text-transform: none; letter-spacing: 0; }

.field-input {
  width: 100%;
  padding: 8px 11px;
  background: rgba(255,255,255,0.05);
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
  color: var(--white);
  font-size: 14px;
  font-family: var(--font-ui);
  outline: none;
  transition: border-color 0.15s;
  appearance: none;
}
.field-input:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent) 30%, transparent);
}
.field-input::placeholder { color: var(--muted); }
.field-input.sm { width: auto; }
select.field-input {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23838f8f' stroke-width='2'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 10px center;
  padding-right: 30px;
  cursor: pointer;
}
select.field-input option { background: var(--surface); color: var(--white); }

.field-display {
  padding: 8px 11px;
  border: 1px solid rgba(255,255,255,0.06);
  border-radius: var(--r-sm);
  font-family: var(--font-num);
  font-size: 15px;
  color: var(--accent);
  background: var(--accent-subtle);
  min-height: 36px;
}

.field-error {
  font-size: 12px;
  color: var(--error);
  min-height: 16px;
}

.field-hint {
  font-size: 12px;
  color: var(--muted);
  margin-top: 3px;
}

.form-actions { padding-top: 4px; }

.form-section-label {
  font-size: 12px; font-weight: 600; color: var(--muted);
  text-transform: uppercase; letter-spacing: 0.06em;
  margin: 14px 0 8px;
  padding-bottom: 6px;
  border-bottom: 1px solid var(--border);
  display: flex; align-items: center; gap: 8px;
}

/* ── Nutri-Score live widget — inline in form-section-label ── */
.wiz-ns-widget {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 3px;
  flex-shrink: 0;
}
.wiz-ns-grade {
  display: inline-flex; align-items: center; justify-content: center;
  width: 20px; height: 20px;
  border-radius: 4px;
  font-size: 10px; font-weight: 700;
  text-transform: none; letter-spacing: 0;
  opacity: 0.28;
  transition: opacity 0.25s, width 0.25s, height 0.25s, font-size 0.25s, border-radius 0.25s, box-shadow 0.25s;
}
.wiz-ns-grade[data-grade="A"] { background: rgba(122,158,130,0.18); color: #7A9E82; }
.wiz-ns-grade[data-grade="B"] { background: rgba(155,178,100,0.18); color: #9BB264; }
.wiz-ns-grade[data-grade="C"] { background: rgba(192,160,80,0.18);  color: #C0A050; }
.wiz-ns-grade[data-grade="D"] { background: rgba(196,112,112,0.18); color: #C47070; }
.wiz-ns-grade[data-grade="E"] { background: rgba(184,99,88,0.18);   color: #B86358; }
.wiz-ns-grade[data-grade="F"] { background: rgba(150,80,70,0.18);   color: #965046; }
.wiz-ns-grade.wiz-ns-active {
  opacity: 1;
  width: 30px; height: 30px;
  font-size: 15px;
  border-radius: 7px;
}
.wiz-ns-grade[data-grade="A"].wiz-ns-active { box-shadow: 0 0 0 1.5px #7A9E82; }
.wiz-ns-grade[data-grade="B"].wiz-ns-active { box-shadow: 0 0 0 1.5px #9BB264; }
.wiz-ns-grade[data-grade="C"].wiz-ns-active { box-shadow: 0 0 0 1.5px #C0A050; }
.wiz-ns-grade[data-grade="D"].wiz-ns-active { box-shadow: 0 0 0 1.5px #C47070; }
.wiz-ns-grade[data-grade="E"].wiz-ns-active { box-shadow: 0 0 0 1.5px #B86358; }
.wiz-ns-grade[data-grade="F"].wiz-ns-active { box-shadow: 0 0 0 1.5px #965046; }
.form-section-sub { font-size: 11px; font-weight: 400; color: var(--muted); text-transform: none; letter-spacing: 0; }

.input-row { display: flex; align-items: center; gap: 7px; flex-wrap: wrap; }
.input-suffix { font-size: 12px; color: var(--muted); white-space: nowrap; }
.field-header-row { display: flex; align-items: center; justify-content: space-between; }

/* Radio */
.radio-group { display: flex; gap: 10px; flex-wrap: wrap; }
.radio-option {
  display: flex;
  align-items: center;
  gap: 7px;
  cursor: pointer;
  padding: 7px 13px;
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
  font-size: 13px;
  transition: all 0.15s;
  user-select: none;
}
.radio-option:has(input:checked) { border-color: var(--accent); background: var(--accent-bg); color: var(--accent); }
.radio-option input { display: none; }

/* ============================================================
   Buttons
   ============================================================ */
.btn-primary {
  display: inline-flex; align-items: center; gap: 6px;
  background: var(--accent); color: var(--white);
  border: none; padding: 9px 18px;
  border-radius: var(--r-sm); font-size: 13px; font-weight: 600;
  font-family: var(--font-ui); cursor: pointer;
  transition: opacity 0.15s;
}
.btn-primary:hover { opacity: 0.88; }
.btn-square {
  width: 34px; height: 34px;
  padding: 0 !important;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 18px; line-height: 1;
  flex-shrink: 0;
}

.btn-secondary {
  display: inline-flex; align-items: center; gap: 6px;
  background: var(--accent-bg); color: var(--text);
  border: 1px solid var(--border); padding: 8px 16px;
  border-radius: var(--r-sm); font-size: 13px; font-weight: 500;
  font-family: var(--font-ui); cursor: pointer;
  transition: background 0.15s;
}
.btn-secondary:hover { background: var(--accent-hover); }
.btn-secondary.sm { padding: 5px 11px; font-size: 12px; }

.btn-ghost {
  background: none; border: none; color: var(--muted);
  padding: 5px 9px; border-radius: var(--r-xs);
  font-size: 12px; cursor: pointer; font-family: var(--font-ui);
  transition: color 0.15s, background 0.15s;
}
.btn-ghost:hover { color: var(--text); background: rgba(255,255,255,0.05); }
.btn-ghost.sm { font-size: 11px; padding: 3px 7px; }

.btn-icon {
  width: 30px; height: 30px;
  display: flex; align-items: center; justify-content: center;
  background: none; border: 1px solid var(--border);
  border-radius: var(--r-xs); color: var(--muted);
  cursor: pointer; transition: all 0.15s;
}
.btn-icon:hover { border-color: var(--accent); color: var(--accent); }
.btn-icon-danger { color: var(--error); border-color: rgba(184,99,88,0.3); }
.btn-icon-danger:hover { background: var(--error-bg); border-color: var(--error); }

.btn-icon-lg {
  width: 30px; height: 30px;
  display: flex; align-items: center; justify-content: center;
  background: rgba(255,255,255,0.04); border: 1px solid var(--border);
  border-radius: var(--r-xs); color: var(--muted);
  cursor: pointer; transition: all 0.15s;
}
.btn-icon-lg:hover { border-color: var(--accent); color: var(--accent); }

/* ============================================================
   Typography
   ============================================================ */
.kpi {
  font-family: var(--font-num);
  font-size: 30px; font-weight: 700;
  color: var(--accent); line-height: 1;
  letter-spacing: -1px;
}
.kpi-sm {
  font-family: var(--font-num);
  font-size: 20px; font-weight: 700;
  color: var(--accent); letter-spacing: -0.5px;
}
.kpi-sublabel { font-size: 11px; color: var(--muted); }

.divider { height: 1px; background: var(--border); margin: 12px 0; }

/* ============================================================
   Progress bars
   ============================================================ */
.progress-track {
  height: 6px;
  background: rgba(255,255,255,0.06);
  border-radius: 100px;
  overflow: hidden;
}
.progress-fill {
  height: 100%;
  border-radius: 100px;
  transition: width 0.45s cubic-bezier(0.4,0,0.2,1);
}
.flex1 { flex: 1; }

/* ============================================================
   Profile — completion card
   ============================================================ */
.completion-card { margin-bottom: 14px; }
.completion-header-row { display: flex; justify-content: space-between; align-items: center; }
.completion-pct { font-family: var(--font-num); font-size: 18px; font-weight: 700; color: var(--accent); }

/* Gate banner */
.gate-banner {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 16px;
  background: var(--error-bg);
  border: 1px solid rgba(184,99,88,0.4);
  border-radius: var(--r-sm);
  color: var(--error);
  font-size: 13px;
  font-weight: 500;
  margin-bottom: 16px;
}

/* ============================================================
   Goals
   ============================================================ */
.goal-options {
  display: grid;
  grid-template-columns: repeat(4,1fr);
  gap: 8px;
  margin-top: 6px;
}
.goal-option { cursor: pointer; }
.goal-option input { display: none; }
.goal-card {
  display: flex; flex-direction: column; gap: 3px;
  background: rgba(255,255,255,0.03);
  border: 1px solid var(--border);
  border-radius: var(--r);
  padding: 13px 10px;
  text-align: center;
  transition: all 0.18s;
}
.goal-option input:checked + .goal-card { border-color: var(--accent); background: var(--accent-bg); }
.goal-name  { font-size: 12px; font-weight: 600; color: var(--white); }
.goal-delta { font-family: var(--font-num); font-size: 15px; font-weight: 700; color: var(--accent); }
.goal-desc  { font-size: 11px; color: var(--muted); }

/* KPI grid */
.kpi-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 12px; }
.kpi-cell  { display: flex; flex-direction: column; gap: 4px; }

/* Macro targets */
.macro-targets { display: grid; grid-template-columns: repeat(3,1fr); gap: 10px; }
.macro-target-item {
  padding: 12px; background: rgba(255,255,255,0.03);
  border-radius: var(--r-sm); text-align: center;
}
.macro-target-label { font-size: 11px; color: var(--muted); margin-bottom: 4px; }
.macro-target-value { font-family: var(--font-num); font-size: 20px; color: var(--white); font-weight: 700; }

/* ============================================================
   Dashboard
   ============================================================ */
.kpi-strip {
  display: grid;
  grid-template-columns: repeat(3,1fr);
  gap: 0; margin-bottom: 14px;
}
.kpi-strip .kpi-cell { padding: 14px; border-right: 1px solid var(--border); }
.kpi-strip .kpi-cell:last-child { border-right: none; }

.scale-btns { display: flex; gap: 3px; }
.scale-btn {
  padding: 4px 10px; border-radius: 100px;
  border: 1px solid var(--border);
  font-size: 11px; font-weight: 600;
  background: none; color: var(--muted);
  font-family: var(--font-ui); cursor: pointer;
  transition: all 0.15s;
}
.scale-btn:hover { color: var(--text); border-color: var(--text); }
.scale-btn.active { background: var(--accent-bg); border-color: var(--accent); color: var(--accent); }

.chart-wrap { position: relative; width: 100%; }

.weight-stats { display: flex; gap: 14px; flex-wrap: wrap; margin-top: 10px; }
.stat-item    { font-size: 12px; color: var(--muted); }
.stat-item strong { color: var(--white); }

.inline-form { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }

/* Daily dashboard */
.prevision-banner {
  display: flex; align-items: center; gap: 10px;
  background: rgba(196,112,112,0.1);
  border: 1px solid rgba(196,112,112,0.35);
  border-radius: var(--r-sm);
  padding: 12px 16px;
  color: #C47070;
  font-size: 14px; font-weight: 700;
  letter-spacing: 0.5px;
  margin-bottom: 14px;
  text-transform: uppercase;
}

.daily-nav-row {
  display: flex; align-items: center; gap: 10px; justify-content: center;
}

.daily-macro-bars { display: flex; flex-direction: column; gap: 10px; }
.daily-bar-row {
  display: flex; align-items: center; gap: 12px;
}
.daily-bar-label {
  font-size: 12px; color: var(--muted);
  min-width: 80px; flex-shrink: 0;
}
.daily-bar-label strong { color: var(--text); }

/* ============================================================
   NutriTrack
   ============================================================ */
.date-nav-bar { display: flex; align-items: center; gap: 8px; }
.date-label {
  font-family: var(--font-num); font-size: 14px; color: var(--text);
  min-width: 80px; text-align: center;
}
.date-label-btn {
  background: none; border: none; cursor: pointer;
  border-radius: var(--r-xs);
  padding: 3px 6px;
  transition: background 0.15s;
}
.date-label-btn:hover { background: var(--accent-bg); color: var(--accent); }

/* Meal group headers in food log */
.log-meal-header td { padding: 10px 8px 4px; }
.log-meal-label {
  font-size: 10px; font-weight: 700; text-transform: uppercase;
  letter-spacing: 0.6px; color: var(--accent);
}
.log-meal-header:first-child td { padding-top: 4px; }

/* Lock icon in log rows */
.log-locked-icon {
  display: inline-flex; align-items: center;
  color: var(--muted); opacity: 0.5;
  padding: 4px;
}

/* Lock button in header */
.nt-lock-btn { color: var(--muted); }

.future-badge {
  padding: 3px 10px; border-radius: 100px;
  background: rgba(196,112,112,0.12);
  border: 1px solid rgba(196,112,112,0.35);
  color: #C47070; font-size: 11px; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.5px;
}

.nt-top-row {
  display: grid;
  grid-template-columns: 190px 1fr;
  gap: 12px; margin-bottom: 12px;
}
.donut-card {
  display: flex; align-items: center; justify-content: center; padding: 16px;
}
.donut-wrap { position: relative; width: 160px; height: 160px; flex-shrink: 0; }
.donut-center {
  position: absolute; inset: 0;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  pointer-events: none;
}
.donut-kcal  { font-family: var(--font-num); font-size: 26px; font-weight: 700; color: var(--accent); line-height: 1; }
.donut-unit  { font-size: 11px; color: var(--muted); margin-top: 2px; }
.donut-target { font-family: var(--font-num); font-size: 10px; color: var(--muted); margin-top: 1px; }

.macro-bars-card {
  display: flex; flex-direction: column;
  justify-content: center; gap: 10px; padding: 16px 18px;
}
.macro-bar-item {}
.macro-bar-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 4px; }
.macro-bar-name   { font-size: 12px; color: var(--text); display: flex; align-items: center; gap: 5px; }
.macro-bar-value  { font-family: var(--font-num); font-size: 11px; color: var(--muted); }
.macro-bar-value.over { color: var(--error); }

/* Macro icons — used in bars, table headers, dashboard */
.macro-icon {
  display: inline-flex; align-items: center; justify-content: center;
  width: 14px; height: 14px; flex-shrink: 0;
  opacity: 0.85;
}
.macro-icon svg { display: block; }

.th-macro {
  display: inline-flex; align-items: center; gap: 3px;
  vertical-align: middle;
}
.th-macro svg { opacity: 0.7; flex-shrink: 0; }

.nt-actions-row {
  display: flex; align-items: center; gap: 10px;
  flex-wrap: wrap; margin-bottom: 12px;
}

/* Log table */
.table-wrap { overflow-x: auto; }
.log-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.log-table th {
  text-align: left; padding: 7px 10px;
  color: var(--muted); font-weight: 600;
  font-size: 11px; text-transform: uppercase; letter-spacing: 0.5px;
  border-bottom: 1px solid var(--border);
}
.log-table td { padding: 7px 10px; border-bottom: 1px solid rgba(255,255,255,0.03); color: var(--text); }
.log-table td.num { font-family: var(--font-num); font-size: 12px; color: var(--muted); }
.log-table tr:last-child td { border-bottom: none; }
.log-group-header td {
  font-size: 11px; font-weight: 700; color: var(--accent);
  text-transform: uppercase; letter-spacing: 0.7px;
  padding: 10px 10px 4px;
  background: var(--accent-subtle);
}
.empty-row { text-align: center !important; color: var(--muted) !important; padding: 28px !important; }

/* Micro grid */
.micro-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(175px,1fr));
  gap: 10px;
}
.micro-item {}
.micro-header { display: flex; justify-content: space-between; margin-bottom: 4px; }
.micro-name   { font-size: 12px; color: var(--text); }
.micro-value  { font-family: var(--font-num); font-size: 11px; color: var(--muted); }
.micro-value.over { color: var(--error); }

/* Activity section in NutriTrack */
.act-inputs-grid {
  display: grid; grid-template-columns: 1fr 1fr; gap: 12px;
  margin-bottom: 4px;
}
.act-input-block { display: flex; flex-direction: column; gap: 5px; }
.act-kcal-badge {
  font-family: var(--font-num); font-size: 12px; color: var(--accent);
  background: var(--accent-bg); border-radius: var(--r-xs);
  padding: 3px 8px; white-space: nowrap;
}
.act-sport-row {
  display: flex; align-items: center; gap: 8px;
  padding: 6px 0; border-bottom: 1px solid rgba(255,255,255,0.04);
}
.act-sport-row:last-child { border-bottom: none; }
.act-sport-kcal { font-family: var(--font-num); font-size: 12px; color: var(--accent); min-width: 56px; text-align: right; }
.act-totals-row {
  display: flex; align-items: flex-end; gap: 20px;
  padding-top: 14px; margin-top: 10px;
  border-top: 1px solid var(--border);
  flex-wrap: wrap;
}
.act-total-item { display: flex; flex-direction: column; gap: 3px; }
.act-total-item.total { margin-left: auto; }
.act-total-val { font-family: var(--font-num); font-size: 14px; color: var(--text); }

/* ============================================================
   Database view
   ============================================================ */
.db-tabs {
  display: flex; gap: 4px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r);
  padding: 4px;
  margin-bottom: 14px;
  width: fit-content;
}
.db-tab-btn {
  display: flex; align-items: center; gap: 7px;
  padding: 7px 16px; border-radius: var(--r-sm);
  border: none; background: none;
  color: var(--muted); font-size: 13px; font-weight: 500;
  font-family: var(--font-ui); cursor: pointer;
  transition: all 0.18s;
}
.db-tab-btn.active { background: var(--accent-bg); color: var(--accent); }
.db-tab-btn:hover:not(.active) { color: var(--text); }

.db-toolbar {
  display: flex; align-items: center; gap: 8px;
  flex-wrap: wrap; margin-bottom: 12px;
}

.db-table .db-id   { font-family: var(--font-num); font-size: 11px; color: var(--muted); }
.db-table .db-cat  { font-size: 12px; color: var(--muted); }
.db-table .db-actions { white-space: nowrap; display: flex; gap: 4px; align-items: center; }

/* Numeric column alignment — header & cells sync */
.db-table th.num,
.db-table td.num { text-align: right; }

/* Selection column — uniform width + centered checkbox */
.db-table th.db-sel-col,
.db-table td.db-sel-col {
  width: 52px;
  min-width: 52px;
  padding: 0;
  text-align: center;
  vertical-align: middle;
}

/* Ghost action button — no border/bg by default */
.db-row-dots {
  border: none;
  background: transparent;
  border-radius: 50%;
  width: 26px; height: 26px;
}
.db-row-dots:hover { border: none; background: rgba(255,255,255,0.08); color: var(--text); }
.db-row-dots:focus { outline: none; }
.db-row-dots:active { transform: scale(0.92); }

/* Custom header checkbox — 20×20 square with radiant glow */
.db-header-cb {
  appearance: none;
  -webkit-appearance: none;
  width: 20px; height: 20px;
  border: 1.5px solid var(--border);
  border-radius: 4px;
  background: rgba(255,255,255,0.04);
  cursor: pointer;
  display: block;
  margin: 0 auto;
  position: relative;
  transition: border-color 0.15s, background 0.15s, box-shadow 0.15s;
}
.db-header-cb:hover { border-color: var(--accent); }
.db-header-cb:focus { outline: none; }
.db-header-cb:checked {
  background: var(--accent);
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-border), 0 0 12px var(--accent-glow);
}
.db-header-cb:checked::after {
  content: '';
  position: absolute;
  left: 50%; top: 45%;
  transform: translate(-50%, -50%) rotate(45deg);
  width: 5px; height: 9px;
  border: 2px solid var(--bg);
  border-top: none; border-left: none;
}

/* ============================================================
   Food add modal
   ============================================================ */
.modal-overlay {
  position: fixed; inset: 0;
  background: rgba(0,0,0,0);
  backdrop-filter: blur(0px);
  z-index: 100;
  display: flex;
  align-items: center; justify-content: center;
  padding: 20px;
  pointer-events: none;
  transition: background 0.22s ease, backdrop-filter 0.22s ease;
}
.modal-overlay.open {
  background: rgba(0,0,0,0.72);
  backdrop-filter: blur(6px);
  pointer-events: auto;
}

.modal {
  background: #3A3738;
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 24px;
  width: 100%; max-width: 500px;
  max-height: 90vh; overflow-y: auto;
  position: relative;
  opacity: 0;
  transform: translateY(8px) scale(0.97);
  transition: opacity 0.22s cubic-bezier(0.16,1,0.3,1), transform 0.22s cubic-bezier(0.16,1,0.3,1);
  box-shadow: 0 24px 64px rgba(0,0,0,0.55), 0 4px 16px rgba(0,0,0,0.3);
}
.modal-overlay.open .modal {
  opacity: 1;
  transform: translateY(0) scale(1);
}
/* When any modal overlay is closed, kill all child pointer-events regardless of explicit values */
.modal-overlay:not(.open) * { pointer-events: none !important; }

@keyframes popIn { from { opacity:0; transform:scale(0.95) translateY(6px); } to { opacity:1; transform:none; } }

.modal-header {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 18px;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--border);
}
.modal-title { font-size: 16px; font-weight: 700; color: var(--white); letter-spacing: -0.2px; }

.modal-search-row { display: flex; gap: 8px; margin-bottom: 8px; }
.modal-filter-row { display: flex; gap: 8px; margin-bottom: 8px; }

.food-results {
  max-height: 200px; overflow-y: auto;
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
  background: var(--bg);
}
.food-result-item {
  display: flex; flex-direction: column; align-items: flex-start;
  width: 100%; padding: 8px 12px;
  border-bottom: 1px solid rgba(255,255,255,0.04);
  background: none; border-left: none; border-right: none; border-top: none;
  cursor: pointer; text-align: left; font-family: var(--font-ui);
  transition: background 0.1s;
}
.food-result-item:last-child { border-bottom: none; }
.food-result-item:hover { background: var(--accent-bg); }
.food-result-name { font-size: 13px; color: var(--white); }
.food-result-meta { font-size: 11px; color: var(--muted); font-family: var(--font-num); margin-top: 1px; }

.food-add-header { margin-bottom: 4px; }
.food-selected-name { font-size: 14px; font-weight: 600; color: var(--white); }

.nutrient-preview {
  display: flex; gap: 12px; flex-wrap: wrap;
  padding: 9px 12px;
  background: rgba(255,255,255,0.04);
  border-radius: var(--r-sm); margin-top: 10px;
  font-family: var(--font-num); font-size: 12px; color: var(--accent);
}
.empty-hint { padding: 18px; text-align: center; color: var(--muted); font-size: 13px; }

.modal-actions { display: flex; gap: 8px; margin-top: 16px; flex-wrap: wrap; }

/* ============================================================
   Smart Add Food Wizard
   ============================================================ */
.wizard-modal {
  width: 800px;
  max-width: 95vw;
  height: 700px;
  max-height: 95vh;
  display: flex;
  flex-direction: column;
  padding: 0;
  overflow: hidden;
}

.wizard-close {
  position: absolute;
  top: 14px;
  right: 14px;
  z-index: 5;
}

/* Header */
.wizard-header {
  padding: 22px 24px 0;
  flex-shrink: 0;
  position: relative;
}
.wizard-title {
  font-size: 17px;
  font-weight: 700;
  color: var(--white);
  margin: 0 0 18px;
  letter-spacing: -0.2px;
}

/* Progress stepper */
.wizard-progress {
  display: flex;
  align-items: flex-start;
  margin-bottom: 20px;
}
.wiz-step-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 5px;
  flex-shrink: 0;
  cursor: pointer;
}
.wiz-step-item:hover .wiz-step-dot { border-color: var(--accent); }
.wiz-step-item.wiz-active { cursor: default; }
.wiz-step-item.wiz-active:hover .wiz-step-dot { border-color: var(--accent); }
.wiz-step-dot {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: 2px solid var(--border);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 15px;
  font-weight: 600;
  color: var(--muted);
  background: #3A3738;
  transform: scale(1);
  will-change: transform;
  transition:
    border-color 0.35s ease,
    background   0.35s ease,
    color        0.35s ease,
    transform    0.5s  cubic-bezier(0.34, 1.56, 0.64, 1);
}
.wiz-step-dot span {
  display: block;
  line-height: 1;
}
.wiz-step-dot span.check-pop {
  animation: checkPop 0.28s cubic-bezier(0.34, 1.56, 0.64, 1) both;
}
@keyframes checkPop {
  from { opacity: 0; transform: scale(0.5); }
  to   { opacity: 1; transform: scale(1); }
}
.wiz-step-item.wiz-active .wiz-step-dot {
  transform: scale(1.2);
  border-color: var(--accent);
  color: var(--accent);
}
.wiz-step-item.wiz-done .wiz-step-dot {
  transform: scale(1);
  border-color: var(--accent);
  background: var(--accent);
  color: #fff;
}
.wiz-step-name {
  font-size: 10px;
  color: var(--muted);
  transition: color 0.35s;
  white-space: nowrap;
}
.wiz-step-item.wiz-active .wiz-step-name,
.wiz-step-item.wiz-done  .wiz-step-name { color: var(--accent); }

.wiz-step-connector {
  flex: 1;
  height: 2px;
  background: var(--border);
  margin: 19px 4px 0;
  position: relative;
  overflow: hidden;
  border-radius: 1px;
}
.wiz-connector-fill {
  position: absolute;
  top: 0; left: 0;
  height: 100%;
  width: 0%;
  background: var(--accent);
  transition: width 0.45s cubic-bezier(0.4, 0, 0.2, 1);
}
.wiz-step-connector.wiz-done .wiz-connector-fill { width: 100%; }

/* Body fills between header and footer; forms a flex column so steps can fill it */
.wizard-body {
  flex: 1;
  min-height: 0;
  overflow: hidden;
  padding: 0;
  display: flex;
  flex-direction: column;
  position: relative;
  z-index: 50;
}

#db-food-form {
  flex: 1;
  min-height: 0;
  position: relative;
  display: flex;
  flex-direction: column;
}
/* Short steps float content in vertical center */
.wizard-step[data-step="1"] { justify-content: center; }
.wizard-step[data-step="2"] { justify-content: center; }

/* Remove native spinners inside the wizard */
#db-food-modal input[type=number]::-webkit-outer-spin-button,
#db-food-modal input[type=number]::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
#db-food-modal input[type=number] { -moz-appearance: textfield; }

/* Steps — full-width horizontal carousel */
.wizard-step {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  gap: 26px;
  padding: 0 24px;
  transform: translateX(100%);
  transition: transform 0.32s cubic-bezier(0.4, 0, 0.2, 1);
  pointer-events: none;
}
.wizard-step.active {
  transform: translateX(0);
  pointer-events: auto;
}
.wizard-step.wiz-past {
  transform: translateX(-100%);
}
@keyframes wizFieldIn {
  from { opacity: 0; transform: translateY(7px); }
  to   { opacity: 1; transform: none; }
}

/* ── Macro Step 2 Redesign ─────────────────────────────────── */
.macro-kcal-row {
  display: flex;
  align-items: flex-end;
  gap: 10px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--card-border);
  margin-bottom: -12px;
}
.macro-kcal-field { flex: 1; min-width: 0; }
.macro-salt-field { flex-shrink: 0; width: calc(33.333% - 5px); }
.macro-kcal-input-wrap {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
}
.macro-kcal-row .macro-kcal-field .wiz-num-wrap { flex: 1; }
.macro-calc-btn {
  flex-shrink: 0;
  width: 30px;
  height: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--card-border);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 6px;
  color: var(--muted);
  cursor: pointer;
  transition: background 0.2s, color 0.2s;
}
.macro-calc-btn:hover { background: var(--accent); color: #fff; }
.macro-kcal-error {
  display: none;
  font-size: 10px;
  color: var(--error);
  font-weight: 400;
  font-style: normal;
  margin-left: 5px;
}
.macro-kcal-error.visible { display: inline; }

.macro-big3-grid {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  border: 1px solid var(--card-border);
  border-radius: 10px;
  overflow: hidden;
  margin-bottom: 14px;
}
.macro-col {
  padding: 0 12px 12px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  border-top: 3px solid var(--macro-col-color, var(--card-border));
  padding-top: 12px;
}
.macro-col + .macro-col { border-left: 1px solid var(--card-border); }

/* Per-column muted color tokens */
.macro-col-prot { --macro-col-color: #6E8FAD; }
.macro-col-carb { --macro-col-color: #C0A855; }
.macro-col-fat  { --macro-col-color: #B87A6E; }

/* Color only the primary macro label, not sub-labels */
.macro-col-prot > .form-field > .field-label,
.macro-col-carb > .form-field > .field-label,
.macro-col-fat  > .form-field > .field-label { color: var(--macro-col-color); }

/* Sub-labels inherit the color of their parent column for subtle tinting */
.macro-col-subs .field-label { color: color-mix(in srgb, var(--macro-col-color) 55%, var(--muted)); }

.macro-col-subs {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding-top: 10px;
  padding-left: 10px;
  border-top: 1px solid rgba(255,255,255,0.05);
  border-left: 2px solid color-mix(in srgb, var(--macro-col-color) 40%, transparent);
}
.macro-sub-field .field-label { font-size: 10px; }
.macro-sub-field .wiz-dec,
.macro-sub-field .wiz-inc { width: 24px; height: 24px; line-height: 24px; border-radius: 50%; font-size: 14px; }
.macro-sub-field .field-input { font-size: 12px; }

@media (max-width: 580px) {
  .macro-big3-grid { grid-template-columns: 1fr; }
  .macro-col + .macro-col { border-left: none; }
}

/* Micro grid (Steps 3 & 4) — 4 columns, fills available height */
.wiz-micro-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-auto-rows: 56px;
  gap: 8px;
}
.wiz-micro-grid .form-field { justify-content: center; }
.wiz-micro-grid .field-label { font-size: 11px; margin-bottom: 3px; }
.wiz-micro-grid .field-input { padding: 5px 8px; font-size: 12px; }
.wiz-micro-grid .wiz-dec,
.wiz-micro-grid .wiz-inc  { width: 22px; height: 22px; line-height: 22px; border-radius: 50%; font-size: 13px; }
@media (max-width: 700px) { .wiz-micro-grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 520px) { .wiz-micro-grid { grid-template-columns: 1fr 1fr; } }

/* NOVA Quadrant selector */
.nova-quadrant-field {
  position: relative;
  z-index: 10;
}
.nova-quadrant {
  display: flex;
  gap: 6px;
  background: rgba(0,0,0,0.18);
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
  padding: 5px;
}
.nova-quad-btn {
  flex: 1;
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 2px solid transparent;
  border-radius: 5px;
  background: rgba(255,255,255,0.06);
  cursor: pointer;
  transition: border-color 0.15s, background 0.15s, transform 0.12s;
  font-family: var(--font-ui);
  position: relative;
}
.nova-quad-btn:hover { background: var(--card-border); }
.nova-quad-num  { font-size: 22px; font-weight: 700; line-height: 1; pointer-events: none; }
.nova-q1 { --nova-color: #7A9E82; } .nova-q1 .nova-quad-num { color: #7A9E82; }
.nova-q2 { --nova-color: #C0A855; } .nova-q2 .nova-quad-num { color: #C0A855; }
.nova-q3 { --nova-color: #C08858; } .nova-q3 .nova-quad-num { color: #C08858; }
.nova-q4 { --nova-color: #B86358; } .nova-q4 .nova-quad-num { color: #B86358; }
.nova-quad-btn.selected { transform: scale(1.06); }
.nova-q1.selected,
.nova-q2.selected,
.nova-q3.selected,
.nova-q4.selected {
  border-color: var(--accent);
  background: color-mix(in srgb, var(--accent) 18%, transparent);
}

/* NOVA tooltip */
.nova-quad-btn::after {
  content: attr(data-tooltip);
  position: absolute;
  bottom: calc(100% + 10px);
  left: 50%;
  transform: translateX(-50%) scale(0.95);
  width: 180px;
  padding: 7px 10px;
  background: #252223;
  border: 1px solid var(--nova-color);
  border-radius: 6px;
  font-size: 11px;
  font-weight: 400;
  color: #D1D1D1;
  line-height: 1.45;
  text-align: center;
  white-space: normal;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.15s ease, transform 0.15s ease;
  transition-delay: 0s;
  z-index: 200;
}
.nova-quad-btn::before {
  content: '';
  position: absolute;
  bottom: calc(100% + 4px);
  left: 50%;
  transform: translateX(-50%);
  border: 6px solid transparent;
  border-top-color: var(--nova-color);
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.15s ease;
  transition-delay: 0s;
  z-index: 200;
}
.nova-quad-btn:hover::after {
  opacity: 1;
  transform: translateX(-50%) scale(1);
  transition-delay: 0.2s;
}
.nova-quad-btn:hover::before {
  opacity: 1;
  transition-delay: 0.2s;
}

/* Type toggle (Solid / Liquid) — sliding pill */
.wiz-type-toggle {
  position: relative;
  display: flex;
  gap: 3px;
  background: var(--bg);
  border-radius: 8px;
  border: 1px solid var(--border);
  padding: 3px;
  height: 38px;
  overflow: hidden;
}
.wiz-type-toggle::before {
  content: '';
  position: absolute;
  left: 3px;
  top: 3px;
  width: calc(50% - 4.5px);
  height: calc(100% - 6px);
  background: var(--accent);
  border-radius: 6px;
  transition: transform 0.22s cubic-bezier(0.4, 0, 0.2, 1);
  pointer-events: none;
  z-index: 0;
}
.wiz-type-toggle:has(#wiz-liquid-btn.active)::before {
  transform: translateX(calc(100% + 3px));
}
.wiz-type-btn {
  position: relative;
  z-index: 1;
  flex: 1;
  padding: 0;
  border-radius: 6px;
  font-size: 12px;
  font-weight: 500;
  background: transparent;
  color: var(--muted);
  border: none;
  cursor: pointer;
  transition: color 0.2s;
  font-family: var(--font-ui);
}
.wiz-type-btn.active { background: transparent; color: #fff; }
.wiz-type-btn:active { transform: scale(0.95); }

/* Numeric stepper */
.wiz-num-wrap {
  display: flex;
  align-items: center;
  gap: 4px;
}
.wiz-num-wrap .field-input {
  flex: 1;
  text-align: center;
  min-width: 0;
}
.wiz-dec, .wiz-inc {
  width: 28px;
  height: 28px;
  flex-shrink: 0;
  border-radius: 50%;
  background: var(--accent);
  color: #fff;
  border: none;
  cursor: pointer;
  font-size: 17px;
  line-height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  user-select: none;
  font-family: var(--font-ui);
}
.wiz-dec:hover, .wiz-inc:hover { opacity: 0.8; }
.wiz-dec:active, .wiz-inc:active { transform: scale(0.92); opacity: 1; }

/* Footer */
.wizard-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 14px 24px 20px;
  border-top: 1px solid var(--border);
  flex-shrink: 0;
  background: var(--card);
  position: relative;
  z-index: 2;
}

/* Success overlay */
.wizard-success {
  position: absolute;
  inset: 0;
  background: #3A3738;
  display: grid;
  place-items: center;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.28s;
  border-radius: inherit;
  z-index: 10;
}
.wizard-success.show { opacity: 1; pointer-events: all; }
/* success-mode: hide header/body/footer, make success a compact flow element */
.wizard-modal.success-mode > .wizard-header,
.wizard-modal.success-mode > .wizard-body,
.wizard-modal.success-mode > .wizard-footer { display: none; }
.wizard-modal.success-mode .wizard-success {
  position: relative;
  inset: unset;
  padding: 48px 24px 40px;
  border-radius: inherit;
  opacity: 1;
  pointer-events: all;
}
/* Two-phase stacking — both occupy same grid cell */
.wiz-success-phase {
  grid-area: 1 / 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  transition: opacity 0.4s ease;
}
.wiz-check-svg { width: 68px; height: 68px; }
.wiz-check-circle {
  stroke: var(--success);
  stroke-width: 2;
  stroke-dasharray: 166;
  stroke-dashoffset: 166;
}
.wizard-success.show .wiz-check-circle {
  animation: wizCircleDash 0.55s ease forwards;
}
.wiz-check-mark {
  stroke: var(--success);
  stroke-width: 3;
  stroke-linecap: round;
  stroke-linejoin: round;
  fill: none;
  stroke-dasharray: 48;
  stroke-dashoffset: 48;
}
.wizard-success.show .wiz-check-mark {
  animation: wizCheckDash 0.38s 0.38s ease forwards;
}
.wiz-success-label { font-size: 17px; font-weight: 600; color: var(--success); }
@keyframes wizCircleDash { to { stroke-dashoffset: 0; } }
@keyframes wizCheckDash  { to { stroke-dashoffset: 0; } }

/* Shake animation (name validation) */
@keyframes wizShake {
  0%, 100% { transform: translateX(0); }
  15%  { transform: translateX(-7px); }
  30%  { transform: translateX(7px); }
  45%  { transform: translateX(-5px); }
  60%  { transform: translateX(5px); }
  75%  { transform: translateX(-3px); }
  90%  { transform: translateX(3px); }
}
.wiz-shake { animation: wizShake 0.45s ease both; }

@keyframes errorSlideIn {
  from { opacity: 0; transform: translateY(-5px); }
  to   { opacity: 0.8; transform: translateY(0); }
}

/* Inline validation error — in-flow with reserved height to prevent layout shift */
.wizard-step .wiz-field-error:not(.visible) { display: none; }
.wiz-field-error {
  display: block;
  position: static;
  min-height: 16px;
  width: 100%;
  font-size: 12px;
  color: var(--error);
  padding-top: 3px;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s ease, transform 0.2s ease;
}
.wiz-field-error.visible {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  opacity: 0.8;
  pointer-events: auto;
  animation: errorSlideIn 0.2s ease both;
  z-index: 5;
}
.wiz-field-warning { position: static; color: var(--accent); margin-top: 2px; }
/* Collapse the EAN "already exists" slot when invisible — avoids phantom 16px gap */
#dbf-ean-exists:not(.visible) { display: none; }

/* Error state: highlight the input when its error span is visible */
.form-field:has(.wiz-field-error.visible) .field-input {
  border-color: rgba(184, 99, 88, 0.5);
}

/* Custom dropdown (Category, Sub, NOVA) */
.wiz-select {
  position: relative;
}
.wiz-select-btn {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  width: 100%;
  height: 38px;
  padding: 0 11px;
  background: rgba(255,255,255,0.05);
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
  color: var(--white);
  font-size: 14px;
  font-family: var(--font-ui);
  cursor: pointer;
  text-align: left;
  transition: border-color 0.15s;
}
.wiz-select-btn:hover,
.wiz-select.open .wiz-select-btn { border-color: var(--accent); }
.wiz-select-arrow {
  flex-shrink: 0;
  color: var(--muted);
  transition: transform 0.2s;
}
.wiz-select.open .wiz-select-arrow { transform: rotate(180deg); }
.wiz-select-text { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wiz-select-list {
  position: absolute;
  top: calc(100% + 4px);
  left: 0; right: 0;
  background: #3A3738;
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
  max-height: 200px;
  overflow-y: auto;
  z-index: 10000;
  display: none;
  box-shadow: 0 8px 32px rgba(0,0,0,0.6), 0 2px 8px rgba(0,0,0,0.4);
  scrollbar-width: thin;
  scrollbar-color: var(--border) transparent;
}
/* Decreasing z-index per row so upper fields always dominate lower ones */
.wizard-step[data-step="1"] > *:nth-child(1) { position: relative; z-index: 6; }
.wizard-step[data-step="1"] > *:nth-child(2) { position: relative; z-index: 5; }
.wizard-step[data-step="1"] > *:nth-child(3) { position: relative; z-index: 4; }
.wizard-step[data-step="1"] > *:nth-child(4) { position: relative; z-index: 3; }
/* Elevate form-row and form-field when a dropdown is open — overrides row hierarchy */
#db-food-modal .form-row:has(.wiz-select.open) { position: relative; z-index: 150; }
#db-food-modal .form-field:has(.wiz-select.open) { position: relative; z-index: 80; }
/* Elevate brand row when autocomplete is active */
#db-food-modal .form-row.brand-ac-open { position: relative; z-index: 60; }
.wiz-select.open .wiz-select-list {
  display: block;
  animation: acDropIn 0.18s cubic-bezier(0.4, 0, 0.2, 1) both;
}
.wiz-dd-item {
  padding: 8px 12px;
  font-size: 13px;
  color: var(--text-dim);
  cursor: pointer;
  transition: background 0.12s, color 0.12s;
}
.wiz-dd-item:hover,
.wiz-dd-item.wiz-dd-hover { background: var(--accent-bg); color: var(--white); }
.wiz-dd-item.selected { color: var(--accent); background: var(--accent-bg); }

/* Autocomplete drop-in animation */
@keyframes acDropIn {
  from { opacity: 0; transform: translateY(-5px); }
  to   { opacity: 1; transform: none; }
}

/* Elevate the brand row so brand-new panel paints above wizard-footer */
#db-food-modal .form-row:has(#dbf-brand) { position: relative; z-index: 100; }

/* Brand autocomplete — list drops UP, max 5 items visible */
.wiz-autocomplete { position: relative; z-index: 50; }
.wiz-ac-list {
  position: absolute;
  bottom: calc(100% + 4px);
  top: auto;
  left: 0; right: 0;
  background: #3A3738;
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
  max-height: calc(5 * 35px + 10px);
  overflow-y: auto;
  z-index: 10000;
  box-shadow: 0 -8px 32px rgba(0,0,0,0.6), 0 -2px 8px rgba(0,0,0,0.4);
  scrollbar-width: thin;
  scrollbar-color: var(--border) transparent;
  animation: acDropUp 0.18s cubic-bezier(0.4, 0, 0.2, 1) both;
}
@keyframes acDropUp {
  from { opacity: 0; transform: translateY(5px); }
  to   { opacity: 1; transform: none; }
}
.wiz-ac-item {
  padding: 7px 12px;
  font-size: 13px;
  color: var(--text-dim);
  cursor: pointer;
  transition: background 0.12s, color 0.12s;
}
.wiz-ac-item:hover,
.wiz-ac-item.wiz-ac-hover { background: var(--accent-bg); color: var(--white); }
.wiz-ac-item strong { font-weight: 700; color: var(--white); }

/* New-brand confirmation — absolute overlay below brand input */
.wiz-brand-new {
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  right: 0;
  z-index: 20;
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 12px 14px;
  background: #3A3738;
  border: 1px solid var(--accent);
  border-radius: var(--r-sm);
  box-shadow: 0 4px 16px rgba(0,0,0,0.45);
  font-size: 12px;
  color: var(--text);
  animation: acDropIn 0.18s cubic-bezier(0.4, 0, 0.2, 1) both;
}
.wiz-brand-new-text {
  line-height: 1.5;
}
.wiz-brand-new-actions {
  display: flex;
  gap: 8px;
}
.wiz-brand-new-keep, .wiz-brand-new-clear {
  flex: 1;
  cursor: pointer;
  font-family: var(--font-ui);
  font-size: 13px;
  font-weight: 600;
  padding: 9px 16px;
  border-radius: var(--r-sm);
  transition: opacity 0.15s, background 0.15s;
}
.wiz-brand-new-keep {
  background: var(--accent);
  color: #fff;
  border: none;
}
.wiz-brand-new-keep:hover { opacity: 0.85; }
.wiz-brand-new-clear {
  background: transparent;
  color: var(--error);
  border: 1.5px solid var(--error);
}
.wiz-brand-new-clear:hover { background: var(--error-bg); }

.wiz-brand-accepted-msg {
  display: block;
  font-size: 12px;
  color: var(--success);
  padding-top: 5px;
}

/* Footer layout */
.wiz-footer-right {
  display: flex;
  align-items: center;
  gap: 8px;
}

/* Skip & Finish ghost button */
.btn-skip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: transparent;
  border: 1px solid var(--border);
  color: var(--text-dim);
  padding: 8px 16px;
  border-radius: var(--r-sm);
  font-size: 13px;
  font-weight: 500;
  font-family: var(--font-ui);
  cursor: pointer;
  transition: border-color 0.2s, color 0.2s;
}
.btn-skip:hover { border-color: var(--accent); color: var(--accent); }
.btn-skip:active { transform: scale(0.985); }

/* Post-success compact panel (outside the modal, appears after close) */
#wiz-post-success-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.85);
  z-index: 299;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s ease;
}
#wiz-post-success-overlay.show { opacity: 1; pointer-events: all; }

.wiz-post-success-panel {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) scale(0.93);
  background: var(--card);
  border: 1px solid var(--card-border);
  border-radius: 16px;
  padding: 44px 56px;
  display: grid;
  align-items: center;
  justify-items: center;
  min-width: 320px;
  min-height: 200px;
  z-index: 300;
  opacity: 0;
  pointer-events: none;
  box-shadow: 0 24px 64px rgba(0,0,0,0.65);
  transition: opacity 0.3s ease, transform 0.3s ease;
}
.wiz-post-success-panel.show {
  opacity: 1;
  transform: translate(-50%, -50%) scale(1);
  pointer-events: all;
}
/* Both phases share the same grid cell and cross-fade */
.wiz-ps-phase {
  grid-area: 1 / 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 22px;
  transition: opacity 0.4s ease, transform 0.4s ease;
  pointer-events: none;
}
/* When panel is hidden, kill all child pointer-events regardless of inline styles */
.wiz-post-success-panel:not(.show) * { pointer-events: none !important; }
#wiz-ps-phase2 {
  opacity: 0;
  transform: scale(0.95);
  pointer-events: none;
}
/* Check animation triggered by .show on the panel */
.wiz-post-success-panel.show .wiz-check-circle {
  animation: wizCircleDash 0.4s ease forwards;
}
.wiz-post-success-panel.show .wiz-check-mark {
  animation: wizCheckDash 0.38s 0.38s ease forwards;
}
.wiz-ps-label {
  font-size: 17px;
  font-weight: 600;
  color: var(--success);
}
.wiz-post-success-prompt {
  font-size: 16px;
  font-weight: 600;
  color: var(--text);
  text-align: center;
}
.wiz-post-success-actions {
  display: flex;
  gap: 12px;
}

/* ============================================================
   Toast
   ============================================================ */
.toast {
  position: fixed; bottom: 22px;
  left: calc(var(--sidebar-w) + 50%);
  transform: translateX(-50%) translateY(14px);
  background: var(--accent); color: var(--white);
  padding: 9px 22px; border-radius: 100px;
  font-size: 13px; font-weight: 600;
  opacity: 0; transition: opacity 0.2s, transform 0.2s;
  z-index: 200; pointer-events: none; white-space: nowrap;
}
.toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }
.toast.error { background: var(--error); }

/* ============================================================
   Scrollbar
   ============================================================ */
::-webkit-scrollbar { width: 5px; height: 5px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--border); border-radius: 100px; }

/* ============================================================
   Responsive — mobile (sidebar → bottom bar)
   ============================================================ */
@media (max-width: 768px) {
  body { overflow: hidden; }
  #app { flex-direction: column; }

  .sidebar {
    width: 100%; height: auto; flex-shrink: 0;
    flex-direction: row; position: fixed;
    bottom: 0; left: 0; right: 0; top: auto;
    border-right: none; border-top: 1px solid var(--border);
    padding: 0; z-index: 50;
  }
  .sidebar-brand, .sidebar-section-label, .sidebar-back, .sidebar-spacer { display: none; }
  .sidebar-nav { flex-direction: row; flex: 1; justify-content: space-around; align-items: center; padding: 4px; }
  .sidebar-link { flex-direction: column; align-items: center; gap: 3px; font-size: 9px; padding: 6px 4px; flex: 1; }
  .sidebar-icon { width: 20px; height: 20px; }

  .content-area { height: calc(100vh - 58px); }
  .view { padding: 14px 12px; }

  .form-row, .kpi-grid, .macro-targets,
  .goal-options, .act-inputs-grid { grid-template-columns: 1fr; }
  .goal-options { grid-template-columns: 1fr 1fr; }

  .micro-grid { grid-template-columns: 1fr 1fr; }
  .act-totals-row { gap: 12px; }
  .toast { left: 50%; }
  .date-nav-bar { flex-wrap: wrap; gap: 6px; }
  .nt-weight-entry { margin-left: 0; }
  .dash-daily-nutrition-row { flex-direction: column; gap: 14px; }
  .dash-donut-wrap { width: 120px; margin: 0 auto; }
}

/* ============================================================
   New elements — added features
   ============================================================ */

/* ── NutriTrack header weight entry ─────────────────────────── */
.nt-weight-entry {
  display: flex; align-items: center; gap: 6px;
  margin-left: auto;
  border-left: 1px solid var(--border);
  padding-left: 12px;
}

/* ── Donut card (now standalone, full-width strip) ─────────── */
.donut-card {
  display: flex; align-items: center; justify-content: center;
  padding: 16px;
}
.donut-wrap {
  position: relative; width: 160px; height: 160px; flex-shrink: 0;
}
.donut-center {
  position: absolute; inset: 0;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  pointer-events: none;
}
.donut-kcal  { font-family: var(--font-num); font-size: 32px; font-weight: 700; color: var(--accent); line-height: 1; }
.donut-unit  { font-size: 11px; color: var(--muted); margin-top: 2px; }

/* ── Micro expand inside macro-bars-card ───────────────────── */
.micro-expand-row {
  padding-top: 10px; margin-top: 6px;
  border-top: 1px solid rgba(255,255,255,0.05);
  display: flex; justify-content: flex-start;
}

/* ── Dashboard daily nutrition row ─────────────────────────── */
.dash-daily-nutrition-row {
  display: flex; align-items: flex-start; gap: 20px;
}
.dash-donut-wrap {
  position: relative; width: 120px; height: 120px; flex-shrink: 0;
}
.dash-donut-center {
  position: absolute; inset: 0;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  pointer-events: none;
}
.dash-donut-kcal { font-family: var(--font-num); font-size: 22px; font-weight: 700; color: var(--accent); line-height: 1; }
.dash-donut-unit { font-size: 10px; color: var(--muted); margin-top: 2px; }

.dash-macro-rows { flex: 1; display: flex; flex-direction: column; gap: 10px; justify-content: center; }
.dash-macro-row {
  display: flex; align-items: center; gap: 8px; font-size: 13px;
}
.dash-macro-dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }
.dash-macro-icon {
  display: inline-flex; align-items: center; justify-content: center;
  width: 16px; height: 16px; flex-shrink: 0; opacity: 0.85;
}
.dash-macro-icon svg { display: block; }
.dash-macro-name { color: var(--muted); min-width: 50px; }
.dash-macro-val { flex: 1; text-align: right; font-family: var(--font-num); font-size: 12px; color: var(--text); }
.dash-macro-delta {
  font-size: 11px; font-family: var(--font-num); min-width: 52px; text-align: right;
}
.dash-macro-delta.up   { color: var(--error); }
.dash-macro-delta.down { color: var(--success); }
.dash-macro-delta.eq   { color: var(--muted); }

/* ── Dashboard daily food log — grams column ───────────────── */
.dash-daily-food-list { max-height: calc(3 * 48px); overflow-y: auto; scrollbar-width: thin; }
.dash-food-row { display: flex; align-items: center; gap: 8px; padding: 6px 0; border-bottom: 1px solid rgba(255,255,255,0.03); min-height: 48px; }
.dash-food-row:last-child { border-bottom: none; }
.dash-food-info { flex: 1; min-width: 0; }
.dash-food-name { font-size: 13px; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; display: block; }
.dash-food-brand { font-size: 11px; color: var(--muted); display: block; }
.dash-food-qty  { font-family: var(--font-num); font-size: 11px; color: var(--muted); min-width: 44px; text-align: right; flex-shrink: 0; }
.dash-food-kcal { font-family: var(--font-num); font-size: 11px; color: var(--accent); min-width: 55px; text-align: right; }

/* ── Forecast food row ──────────────────────────────────────── */
tr.forecast-row { background: rgba(196,192,88,0.06); }
tr.forecast-row td { color: #C4C058; }
.forecast-badge {
  display: inline-block;
  font-size: 9px; font-weight: 700; font-family: var(--font-num);
  color: #C4C058; background: rgba(196,192,88,0.15);
  border: 1px solid rgba(196,192,88,0.35);
  border-radius: 3px; padding: 1px 4px; margin-left: 4px;
  vertical-align: middle;
}

/* ── Inline row action buttons ───────────────────────────────── */
td.row-actions {
  white-space: nowrap; width: 52px;
  display: flex; align-items: center; gap: 4px; justify-content: flex-end;
  padding-right: 6px;
}
.row-action-btn {
  background: none; border: none; cursor: pointer;
  color: var(--muted); padding: 4px; border-radius: var(--r-xs);
  display: inline-flex; align-items: center; justify-content: center;
  opacity: 0.55; transition: opacity 0.15s, color 0.15s, background 0.15s;
}
.row-action-btn:hover { opacity: 1; background: var(--accent-bg); }
.row-action-btn.delete-btn:hover { color: var(--error); background: var(--error-bg, rgba(184,99,88,0.1)); }

/* ── Sortable table headers ─────────────────────────────────── */
.log-table th.sortable { cursor: pointer; user-select: none; }
.log-table th.sortable:hover { color: var(--text); }
.log-table th.sortable.asc  .sort-icon::after { content: ' ↑'; }
.log-table th.sortable.desc .sort-icon::after { content: ' ↓'; }
.sort-icon { color: var(--border); font-size: 10px; }
.log-table th.sortable.asc  .sort-icon,
.log-table th.sortable.desc .sort-icon { color: var(--accent); }

/* ── Sport session ──────────────────────────────────────────── */
.act-sport-row .act-sport-intensity {
  font-size: 11px; color: var(--muted);
  background: rgba(255,255,255,0.05);
  border-radius: var(--r-xs); padding: 2px 6px;
}

/* ── Info tooltip (ⓘ) ──────────────────────────────────────── */
.info-btn {
  display: inline-flex; align-items: center; justify-content: center;
  width: 16px; height: 16px; border-radius: 50%;
  background: rgba(255,255,255,0.07); border: 1px solid rgba(255,255,255,0.15);
  color: var(--muted); font-size: 10px; cursor: pointer;
  margin-left: 4px; flex-shrink: 0; vertical-align: middle;
  transition: background 0.15s, color 0.15s;
}
.info-btn:hover { background: var(--accent-bg); color: var(--accent); }

.info-tooltip {
  position: fixed; z-index: 300;
  background: #3A3738; border: 1px solid var(--border);
  border-radius: var(--r-sm); padding: 10px 14px;
  max-width: 240px; font-size: 12px; color: var(--text);
  box-shadow: 0 8px 32px rgba(0,0,0,0.5);
  animation: tooltipIn 0.15s cubic-bezier(0.16,1,0.3,1);
  line-height: 1.5;
}
@keyframes tooltipIn {
  from { opacity: 0; transform: translateY(4px) scale(0.97); }
  to   { opacity: 1; transform: none; }
}

/* ── DB category select in modal ────────────────────────────── */
#dbf-cat, #dbf-sub { width: 100%; }

/* ── Danger button ──────────────────────────────────────────── */
.btn-danger {
  display: inline-flex; align-items: center; gap: 6px;
  background: var(--error); color: #fff;
  border: none; padding: 9px 18px;
  border-radius: var(--r-sm); font-size: 13px; font-weight: 600;
  font-family: var(--font-ui); cursor: pointer;
  transition: opacity 0.15s;
}
.btn-danger:hover { opacity: 0.85; }

/* Clear-data is theme-detached: always hardcoded red ghost style */
#settings-clear-data {
  background: transparent;
  border: 1px solid #ff4d4f;
  color: #ff4d4f;
  transition: background 0.2s, color 0.2s, opacity 0.15s;
}
#settings-clear-data:hover {
  background: #ff4d4f;
  color: #fff;
  opacity: 1;
}

/* ── Custom confirm dialog ──────────────────────────────────── */
#confirm-dialog { z-index: 800; } /* always above other modals (weight history = 100) */
.zero-confirm-list {
  display: flex; flex-direction: column; gap: 4px;
  margin-top: 4px;
  text-align: left;
}
.zero-confirm-row {
  display: flex; align-items: center; justify-content: space-between;
  padding: 7px 12px;
  background: rgba(255,255,255,0.04);
  border: 1px solid var(--border);
  border-radius: var(--r-xs);
}
.zero-confirm-label { font-size: 13px; color: var(--text); }
.zero-confirm-val   { font-family: var(--font-num); font-size: 13px; font-weight: 700; color: var(--error); }
.confirm-modal {
  text-align: center;
  padding: 28px 24px 20px;
}
.confirm-icon-wrap {
  width: 48px; height: 48px;
  display: flex; align-items: center; justify-content: center;
  margin: 0 auto 16px;
  background: var(--error-bg);
  border: 1px solid rgba(184,99,88,0.3);
  border-radius: 50%;
  color: var(--error);
}
.confirm-message {
  font-size: 14px; color: var(--text);
  line-height: 1.5; margin-bottom: 20px;
}

/* ── Edit qty food label ────────────────────────────────────── */
.edit-qty-food-label {
  font-size: 14px; font-weight: 600; color: var(--white);
  padding: 10px 12px; background: rgba(255,255,255,0.04);
  border-radius: var(--r-sm); margin-bottom: 4px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

/* ── Custom Chart.js tooltips ───────────────────────────────── */
.chart-tooltip {
  position: absolute;
  z-index: 400;
  background: #3A3738;
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
  padding: 8px 12px;
  font-family: var(--font-ui);
  -webkit-font-smoothing: antialiased;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.12s ease, left 0.06s ease, top 0.06s ease;
  box-shadow: 0 8px 24px rgba(0,0,0,0.45);
  min-width: 110px;
  white-space: nowrap;
}
.chart-tooltip-title {
  font-size: 11px; font-weight: 600;
  color: var(--muted); text-transform: uppercase;
  letter-spacing: 0.5px; margin-bottom: 5px;
}
.chart-tooltip-line {
  font-family: var(--font-num); font-size: 13px;
  color: var(--white); font-weight: 500;
}

/* ── Dashboard mode toggle buttons ─────────────────────────── */
.dash-mode-toggle {
  display: flex; gap: 0;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
  overflow: hidden;
}
.dash-mode-btn {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 7px 14px; border: none; background: none;
  color: var(--muted); font-size: 12px; font-weight: 600;
  font-family: var(--font-ui); cursor: pointer;
  transition: background 0.15s, color 0.15s;
}
.dash-mode-btn:first-child { border-right: 1px solid var(--border); }
.dash-mode-btn.active { background: var(--accent-bg); color: var(--accent); }
.dash-mode-btn:hover:not(.active) { background: rgba(255,255,255,0.03); color: var(--text); }
.dash-mode-btn:active { transform: scale(0.97); }

/* ── Context menu (3-dot dropdown) ─────────────────────────── */
.ctx-menu {
  position: fixed; z-index: 500;
  background: #3A3738;
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
  padding: 4px;
  box-shadow: 0 8px 32px rgba(0,0,0,0.55), 0 2px 8px rgba(0,0,0,0.3);
  min-width: 188px;
  animation: tooltipIn 0.14s cubic-bezier(0.16,1,0.3,1);
}
.ctx-item {
  display: flex; align-items: center; gap: 8px;
  width: 100%; padding: 7px 11px;
  background: none; border: none;
  color: var(--text); font-size: 13px; font-family: var(--font-ui);
  cursor: pointer; border-radius: var(--r-xs); text-align: left;
  transition: background 0.1s, color 0.1s;
}
.ctx-item:hover { background: var(--accent-bg); color: var(--accent); }
.ctx-item:active { transform: scale(0.98); }
.ctx-item-danger { color: var(--error); }
.ctx-item-danger:hover { background: var(--error-bg); color: var(--error); }
.ctx-divider { height: 1px; background: var(--border); margin: 3px 0; }

/* ── Dots button ─────────────────────────────────────────────── */
.dots-btn {
  background: none; border: none; cursor: pointer;
  color: var(--muted); padding: 4px 6px; border-radius: var(--r-xs);
  display: inline-flex; align-items: center; justify-content: center;
  opacity: 0.5; transition: opacity 0.14s, background 0.14s, color 0.14s;
}
.dots-btn:hover { opacity: 1; background: var(--accent-bg); color: var(--accent); }
tr:hover .dots-btn { opacity: 0.8; }

/* ── Forecast confirm button (replaces F badge after validation) ── */
.forecast-confirm-btn {
  display: inline-flex; align-items: center; justify-content: center;
  width: 18px; height: 18px; border-radius: 50%;
  background: rgba(122,158,130,0.18); border: 1px solid rgba(122,158,130,0.5);
  color: var(--success); cursor: pointer;
  margin-right: 5px; flex-shrink: 0; vertical-align: middle;
  transition: background 0.15s, transform 0.15s;
}
.forecast-confirm-btn:hover { background: rgba(122,158,130,0.3); transform: scale(1.15); }

/* ── Food name cell (badge + name) ──────────────────────────── */
.food-name-cell { display: flex; align-items: center; gap: 0; }
.forecast-badge { margin-right: 5px; }

/* ── Bulk action bar ─────────────────────────────────────────── */
.bulk-action-bar {
  display: flex; align-items: center; gap: 8px;
  padding: 8px 12px; margin-bottom: 10px;
  background: var(--accent-bg);
  border: 1px solid var(--accent-border);
  border-radius: var(--r-sm);
  flex-wrap: wrap;
}
.bulk-count {
  font-size: 12px; font-weight: 600; color: var(--accent);
  margin-right: 4px;
}
.btn-danger.sm { padding: 5px 11px; font-size: 12px; }
.btn-secondary.active { background: var(--accent-bg); border-color: var(--accent); color: var(--accent); }

/* ── NutriTrack summary card (donut left + macros right) ────── */
.nt-summary-card { padding: 18px; }
.nt-summary-layout {
  display: flex; gap: 24px; align-items: flex-start;
}
.nt-donut-col { flex-shrink: 0; }
.nt-macros-col { flex: 1; display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.nt-macros-col .macro-bar-item { margin: 0; }
.nt-macros-col .micro-expand-row { padding-top: 8px; margin-top: 4px; border-top: 1px solid rgba(255,255,255,0.05); }

@media (max-width: 600px) {
  .nt-summary-layout { flex-direction: column; align-items: center; }
  .nt-donut-col { width: 100%; display: flex; justify-content: center; }
}

/* ── Grams display next to food add qty ─────────────────────── */
.fa-grams { font-size: 11px; font-family: var(--font-num); white-space: nowrap; }

/* ── Steps count display ─────────────────────────────────────── */
#nt-act-steps-count { display: block; font-family: var(--font-num); }

/* ── Select button active state ─────────────────────────────── */
#nt-select-mode-btn.active { background: var(--accent-bg); border-color: var(--accent); color: var(--accent); }

/* ── Reduced motion ─────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: 0.01ms !important; animation-duration: 0.01ms !important; }
}

/* ============================================================
   Deep polish — micro-interactions & refinements
   ============================================================ */

/* Input focus ring — subtle glow instead of bare border change */
.field-input:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-hover);
}

/* Button active states — tactile press feedback */
.btn-primary:active  { opacity: 0.82; transform: scale(0.985); }
.btn-secondary:active { opacity: 0.8; transform: scale(0.985); }
.btn-ghost:active    { transform: scale(0.97); }
.btn-icon:active     { transform: scale(0.92); }
.btn-icon-lg:active  { transform: scale(0.92); }
.btn-danger:active   { opacity: 0.8; transform: scale(0.985); }

/* Radio option hover */
.radio-option:hover:not(:has(input:checked)) {
  border-color: var(--accent-border-strong);
  background: var(--accent-subtle);
}

/* Goal card hover */
.goal-card:hover { border-color: var(--accent-border-strong); background: var(--accent-subtle); }
.goal-option:has(input:checked) .goal-card:hover { border-color: var(--accent); }

/* Log table — row hover reveals actions, subtle bg tint */
.log-table tbody tr { transition: background 0.1s; }
.log-table tbody tr:not(.log-group-header):hover td { background: rgba(255,255,255,0.025); }
.log-table tbody tr:not(.log-group-header):hover .row-action-btn { opacity: 0.75; }

/* DB table — row hover reveals action buttons */
.db-table tbody tr { transition: background 0.1s; }
.db-table tbody tr:hover td { background: rgba(255,255,255,0.025); }
.db-table tbody tr:hover .row-action-btn { opacity: 0.75; }
/* DB tables use btn-icon, not row-action-btn — fade in on row hover */
.db-table .btn-icon { opacity: 0.4; transition: opacity 0.14s, color 0.14s, background 0.14s, border-color 0.14s; }
.db-table tbody tr:hover .btn-icon { opacity: 0.85; }

/* Scale buttons press */
.scale-btn:active { transform: scale(0.96); }

/* Food result item — smoother transition */
.food-result-item { transition: background 0.14s; }
.food-result-item:active { background: var(--accent-hover); }

/* Modal scrollbar */
.modal { scrollbar-width: thin; scrollbar-color: var(--border) transparent; }
.modal::-webkit-scrollbar { width: 4px; }
.modal::-webkit-scrollbar-track { background: transparent; }
.modal::-webkit-scrollbar-thumb { background: var(--border); border-radius: 100px; }

/* Progress fill — spring feel without bounce */
.progress-fill { transition: width 0.5s cubic-bezier(0.16, 1, 0.3, 1); }

/* KPI strip cells — subtle hover tint on global dashboard */
.kpi-strip .kpi-cell {
  transition: background 0.2s;
}
.kpi-strip .kpi-cell:hover { background: rgba(255,255,255,0.02); }

/* Stat items on weight card */
.stat-item { transition: color 0.15s; }
.stat-item:hover { color: var(--text); }
.stat-item:hover strong { color: var(--accent); }

/* Sidebar back link chevron shift on hover */
.sidebar-back svg { transition: transform 0.18s; }
.sidebar-back:hover svg { transform: translateX(-3px); }

/* DB tab button press */
.db-tab-btn:active { transform: scale(0.97); }

/* Empty hint — slightly warmer */
.empty-hint { font-style: italic; opacity: 0.65; }

/* Card — non-interactive cards should not change cursor */
.card { cursor: default; }

/* Macro bar progress animation — stagger via JS class, fallback here */
.progress-fill { will-change: width; }

/* Chart tooltip — smoother positioning */
.chart-tooltip {
  transition: opacity 0.12s ease, left 0.08s cubic-bezier(0.16,1,0.3,1), top 0.08s cubic-bezier(0.16,1,0.3,1);
}

/* Confirm dialog icon — pulse on appear */
@keyframes iconPulse {
  from { transform: scale(0.7); opacity: 0; }
  to   { transform: scale(1);   opacity: 1; }
}
.modal-overlay.open .confirm-icon-wrap {
  animation: iconPulse 0.25s cubic-bezier(0.16,1,0.3,1) both;
}

/* Edit qty modal — live preview glow on change */
.nutrient-preview { transition: background 0.2s; }

/* Forecasted row — subtle shimmer to indicate future data */
tr.forecast-row td { opacity: 0.82; }

/* ──────────────────────────────────────────────────────────── */
/*  BATCH: all new features                                    */
/* ──────────────────────────────────────────────────────────── */

/* ── 1. Sticky table headers ────────────────────────────────── */
.log-table thead th,
.db-table thead th {
  position: sticky;
  top: 0;
  background: var(--surface);
  z-index: 2;
  box-shadow: 0 1px 0 var(--border);
}
.db-table thead th {
  background: color-mix(in srgb, var(--surface) 88%, transparent);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  white-space: nowrap;
}
.table-wrap { overflow-x: auto; overflow-y: auto; max-height: 480px; }

/* DB tables: no inner scroll — let page scroll handle it */
#db-food-section .table-wrap,
#db-sport-section .table-wrap { max-height: none; overflow-y: visible; }

/* ── 2. Remove forecast background tint on NutriTrack view ─── */
#view-nutritrack.forecast-mode {
  background: none !important;
}

/* ── 3. Forecast badge — red + blink when in forecast mode ─── */
#view-nutritrack.forecast-mode #nt-future-badge {
  color: var(--error) !important;
  border-color: rgba(184, 99, 88, 0.45) !important;
  background: rgba(184, 99, 88, 0.12) !important;
  animation: forecastBlink 2s ease-in-out infinite;
}
@keyframes forecastBlink {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.45; }
}

/* ── 4. Subcategory select — prevent truncation ─────────────── */
#food-sub-filter { min-width: 180px; max-width: 260px; }
#food-cat-filter { min-width: 160px; }

/* ── 5. Custom styled checkboxes ────────────────────────────── */
input[type="checkbox"].log-select-cb,
input[type="checkbox"].db-sel-cb {
  appearance: none;
  -webkit-appearance: none;
  width: 20px; height: 20px;
  border: 1.5px solid var(--border);
  border-radius: 4px;
  background: rgba(255,255,255,0.04);
  cursor: pointer;
  position: relative;
  flex-shrink: 0;
  transition: border-color 0.15s, background 0.15s;
  vertical-align: middle;
}
input[type="checkbox"].log-select-cb:checked,
input[type="checkbox"].db-sel-cb:checked {
  background: var(--accent);
  border-color: var(--accent);
}
input[type="checkbox"].log-select-cb:checked::after,
input[type="checkbox"].db-sel-cb:checked::after {
  content: '';
  position: absolute;
  left: 4px; top: 1px;
  width: 5px; height: 9px;
  border: 2px solid #fff;
  border-top: none; border-left: none;
  transform: rotate(45deg);
}
input[type="checkbox"].log-select-cb:hover,
input[type="checkbox"].db-sel-cb:hover {
  border-color: var(--accent);
}

/* ── 6. Button size consistency in toolbar + modals ─────────── */
.db-toolbar .btn-primary,
.db-toolbar .btn-secondary,
.db-toolbar .csv-dropdown-trigger {
  height: 36px;
  padding-top: 0;
  padding-bottom: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

/* ── 7. Activity flashcards ─────────────────────────────────── */
.act-flashcard-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  margin-bottom: 12px;
}
.act-flashcard {
  background: rgba(255,255,255,0.03);
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
  padding: 12px 14px;
  display: flex;
  flex-direction: column;
  gap: 5px;
  cursor: default;
}
.act-fc-icon {
  width: 28px; height: 28px;
  display: flex; align-items: center; justify-content: center;
  border-radius: var(--r-xs);
  background: rgba(255,255,255,0.05);
  margin-bottom: 4px;
}
.act-fc-label {
  font-size: 10px; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.6px;
  color: var(--muted);
}
.act-fc-val {
  font-family: var(--font-num);
  font-size: 20px; font-weight: 700;
  color: var(--white); line-height: 1;
}
.act-fc-unit { font-size: 10px; color: var(--muted); font-weight: 400; }
.act-fc-kcal {
  font-family: var(--font-num);
  font-size: 11px; color: var(--accent); margin-top: 2px;
}
.act-fc-sub { font-size: 11px; color: var(--muted); margin-top: 1px; }
.act-sport-cards { display: flex; flex-direction: column; gap: 8px; }
.act-sport-card {
  background: rgba(255,255,255,0.03);
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
  padding: 10px 14px;
  display: flex; align-items: center; gap: 12px;
}
.act-sport-card-icon {
  width: 32px; height: 32px; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  background: rgba(112,153,168,0.12);
  border-radius: var(--r-xs);
  color: var(--micro);
}
.act-sport-card-info { flex: 1; min-width: 0; }
.act-sport-card-name { font-size: 13px; font-weight: 600; color: var(--white); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.act-sport-card-meta { font-size: 11px; color: var(--muted); margin-top: 2px; font-family: var(--font-num); }
.act-sport-card-kcal { font-family: var(--font-num); font-size: 13px; color: var(--accent); font-weight: 600; flex-shrink: 0; }
.act-sport-card-del {
  background: none; border: none; cursor: pointer;
  color: var(--muted); padding: 4px; border-radius: var(--r-xs);
  display: flex; align-items: center; justify-content: center;
  opacity: 0.4; transition: opacity 0.14s, color 0.14s;
}
.act-sport-card-del:hover { opacity: 1; color: var(--error); }
/* FAB button bottom-right of activity card */
.act-add-sport-fab {
  position: absolute; bottom: 16px; right: 16px;
  z-index: 2;
}
/* Make activity card a positioned container */
.card:has(.act-add-sport-fab) { position: relative; padding-bottom: 60px; }

@media (max-width: 600px) {
  .act-flashcard-grid { grid-template-columns: 1fr 1fr; }
}

/* ── 8. Flashcard detail panel (slide-in) ───────────────────── */
.fc-panel-overlay {
  position: fixed; inset: 0; z-index: 600;
  background: rgba(0,0,0,0);
  pointer-events: none;
  transition: background 0.25s;
}
.fc-panel-overlay.open {
  background: rgba(0,0,0,0.45);
  pointer-events: auto;
}
.fc-panel {
  position: fixed; right: 0; top: 0; bottom: 0;
  width: 340px; background: #3A3738;
  border-left: 1px solid var(--border);
  display: flex; flex-direction: column;
  transform: translateX(100%);
  transition: transform 0.28s cubic-bezier(0.16,1,0.3,1);
  z-index: 601;
  box-shadow: -12px 0 40px rgba(0,0,0,0.35);
}
.fc-panel-overlay.open .fc-panel {
  transform: translateX(0);
}
.fc-panel-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 18px 20px 14px;
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
}
.fc-panel-title { font-size: 14px; font-weight: 700; color: var(--white); }
.fc-panel-meta { font-size: 11px; color: var(--muted); margin-top: 2px; }
.fc-panel-close {
  background: none; border: none; cursor: pointer;
  color: var(--muted); padding: 6px;
  border-radius: var(--r-xs); display: flex; align-items: center;
  transition: color 0.14s, background 0.14s;
}
.fc-panel-close:hover { color: var(--white); background: rgba(255,255,255,0.08); }
.fc-panel-body { flex: 1; overflow-y: auto; padding: 12px 20px; }
.fc-panel-item {
  display: flex; align-items: center; gap: 10px;
  padding: 8px 0;
  border-bottom: 1px solid rgba(255,255,255,0.04);
}
.fc-panel-item:last-child { border-bottom: none; }
.fc-panel-rank {
  font-family: var(--font-num); font-size: 11px;
  color: var(--muted); min-width: 18px; text-align: right;
}
.fc-panel-food { flex: 1; min-width: 0; }
.fc-panel-food-name { font-size: 13px; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fc-panel-food-qty { font-size: 11px; color: var(--muted); font-family: var(--font-num); }
.fc-panel-val {
  font-family: var(--font-num); font-size: 13px;
  color: var(--accent); font-weight: 600; flex-shrink: 0;
}
.fc-panel-bar {
  height: 2px; background: rgba(255,255,255,0.06);
  border-radius: 100px; margin-top: 4px;
  overflow: hidden;
}
.fc-panel-bar-fill { height: 100%; border-radius: 100px; }

/* ── 9. Favorites panel ─────────────────────────────────────── */
.fav-panel {
  position: absolute; top: calc(100% + 4px); right: 0;
  width: 260px; background: #3A3738;
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
  z-index: 50;
  box-shadow: 0 12px 32px rgba(0,0,0,0.45);
  display: none;
}
.fav-panel.open { display: block; }
.fav-panel-header {
  padding: 10px 14px 6px;
  font-size: 10px; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.6px;
  color: var(--muted);
  border-bottom: 1px solid var(--border);
}
.fav-panel-list { max-height: 200px; overflow-y: auto; }
.fav-item {
  display: flex; align-items: center; gap: 8px;
  padding: 7px 14px; cursor: pointer;
  transition: background 0.12s;
}
.fav-item:hover { background: var(--accent-bg); }
.fav-item-name { flex: 1; font-size: 13px; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fav-item-meta { font-size: 11px; color: var(--muted); font-family: var(--font-num); flex-shrink: 0; }
.fav-item-remove {
  opacity: 0; width: 16px; height: 16px;
  display: flex; align-items: center; justify-content: center;
  border: none; background: none; color: var(--error); cursor: pointer;
  border-radius: 3px; font-size: 11px;
  transition: opacity 0.12s;
}
.fav-item:hover .fav-item-remove { opacity: 0.7; }
.fav-item-remove:hover { opacity: 1 !important; }
.fav-empty { padding: 14px; text-align: center; font-size: 12px; color: var(--muted); }
.fav-trigger-wrap { position: relative; }
.btn-fav {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 7px 12px; border: 1px solid var(--border);
  background: rgba(255,255,255,0.04);
  border-radius: var(--r-sm);
  color: var(--muted); font-size: 12px; font-family: var(--font-ui);
  cursor: pointer; transition: border-color 0.15s, color 0.15s, background 0.15s;
}
.btn-fav:hover { border-color: var(--accent); color: var(--accent); background: var(--accent-bg); }
.btn-fav.starred { color: #C4A84A; border-color: rgba(196,168,74,0.4); background: rgba(196,168,74,0.08); }

/* ── 10. Profile redesign ────────────────────────────────────── */
.profile-hero {
  display: flex; align-items: center; gap: 20px;
  padding: 20px 22px; margin-bottom: 14px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r);
  min-height: 100px;
}
.profile-avatar {
  width: 80px; height: 80px;
  border-radius: 50%;
  background: var(--accent-bg);
  border: 2px solid var(--accent-border);
  display: flex; align-items: center; justify-content: center;
  font-size: 26px; font-weight: 700; color: var(--accent);
  flex-shrink: 0;
  font-family: var(--font-num);
  position: relative;
  overflow: hidden;
  cursor: pointer;
  transition: transform 0.25s cubic-bezier(0.34,1.56,0.64,1);
}
.profile-avatar:hover {
  transform: scale(1.15);
}
#p-avatar-img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover; border-radius: 50%;
  display: none;
}
#p-avatar-initials { pointer-events: none; }
.profile-avatar-edit {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  background: rgba(0,0,0,0.5);
  opacity: 0; transition: opacity 0.18s;
  cursor: pointer; border-radius: 50%;
  color: #fff;
}
.profile-avatar:hover .profile-avatar-edit { opacity: 1; }
.profile-hero-info {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.profile-hero-info .profile-inline-progress { margin-bottom: 1px; margin-top: 6px; }
.profile-hero-name { font-size: 18px; font-weight: 700; color: var(--white); }
.profile-hero-sub { font-size: 12px; color: var(--muted); margin-top: 3px; }

/* Progress bar in header */
.profile-progress-wrap {
  display: flex; align-items: center; gap: 10px;
}
.profile-progress-wrap .completion-pct {
  font-size: 12px; color: var(--muted); font-family: var(--font-num); min-width: 28px; text-align: right;
}
.profile-progress-track {
  width: 140px; margin-top: 0; height: 8px;
}
.profile-progress-track .progress-fill {
  transition: width 0.5s cubic-bezier(0.16,1,0.3,1), background 0.4s;
}
@keyframes progressComplete {
  0%   { box-shadow: 0 0 0 0 rgba(122,158,130,0.7); }
  40%  { box-shadow: 0 0 0 6px rgba(122,158,130,0.3); }
  100% { box-shadow: 0 0 0 0 rgba(122,158,130,0); }
}
.progress-fill--complete {
  animation: progressComplete 0.8s ease-out forwards;
}
.profile-section-title {
  font-size: 12px; font-weight: 800; text-transform: uppercase;
  letter-spacing: 0.7px; color: var(--accent); margin-bottom: 12px;
}

/* ── 11. Goals KPI stack (vertical) ──────────────────────────── */
.goals-kpi-stack {
  display: flex;
  flex-direction: column;
  gap: 0;
  border-radius: var(--r-sm);
  border: 1px solid var(--border);
  overflow: hidden;
  margin-bottom: 14px;
}
.goals-kpi-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 14px;
  border-bottom: 1px solid var(--border);
}
.goals-kpi-row:last-child { border-bottom: none; }
.goals-kpi-row--target {
  background: var(--accent-subtle);
}
.goals-kpi-label { font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.6px; color: var(--muted); }
.goals-kpi-val {
  font-family: var(--font-num); font-size: 20px; font-weight: 700;
  color: var(--white); line-height: 1;
}
.goals-kpi-unit { font-size: 10px; color: var(--muted); }
.goals-macro-row {
  display: flex; align-items: center; justify-content: space-between;
  padding: 8px 0; border-bottom: 1px solid rgba(255,255,255,0.04);
}
.goals-macro-row:last-child { border-bottom: none; }
.goals-macro-label { font-size: 13px; color: var(--text); display: flex; align-items: center; gap: 8px; }
.goals-macro-dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }
.goals-macro-val { font-family: var(--font-num); font-size: 16px; font-weight: 700; color: var(--white); }

/* ── 12. Custom number stepper ────────────────────────────────── */
.num-stepper {
  display: inline-flex; align-items: center;
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
  overflow: hidden;
  background: rgba(255,255,255,0.04);
}
.num-stepper-btn {
  width: 30px; height: 34px;
  border: none; background: none;
  color: var(--muted); font-size: 16px;
  cursor: pointer; display: flex; align-items: center; justify-content: center;
  transition: background 0.12s, color 0.12s;
  flex-shrink: 0;
}
.num-stepper-btn:hover { background: var(--accent-bg); color: var(--accent); }
.num-stepper-btn:active { background: var(--accent-hover); }
.num-stepper input {
  width: 60px; border: none; background: none;
  text-align: center; color: var(--white);
  font-size: 14px; font-family: var(--font-num); font-weight: 600;
  padding: 0; outline: none;
  -moz-appearance: textfield;
}
.num-stepper input::-webkit-outer-spin-button,
.num-stepper input::-webkit-inner-spin-button { -webkit-appearance: none; }
.num-stepper input:focus { color: var(--white); }

/* ── 12b. New stepper-wrap (used in food qty + sport duration) ─ */
.stepper-wrap {
  display: inline-flex;
  align-items: center;
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
  overflow: hidden;
  background: rgba(255,255,255,0.04);
}
.stepper-btn {
  width: 30px; height: 34px;
  border: none; background: none;
  color: var(--muted); font-size: 16px; line-height: 1;
  cursor: pointer; display: flex; align-items: center; justify-content: center;
  transition: background 0.12s, color 0.12s;
  flex-shrink: 0;
}
.stepper-btn:hover  { background: var(--accent-bg); color: var(--accent); }
.stepper-btn:active { background: var(--accent-hover); }
.stepper-input {
  border: none !important; background: none !important;
  text-align: center; font-family: var(--font-num); font-weight: 600;
  -moz-appearance: textfield;
  border-radius: 0 !important;
}
.stepper-input::-webkit-outer-spin-button,
.stepper-input::-webkit-inner-spin-button { -webkit-appearance: none; }

/* ── 13. Calendar UI ─────────────────────────────────────────── */
.cal-popup {
  position: fixed; z-index: 700;
  background: #3A3738;
  border: 1px solid var(--border);
  border-radius: var(--r);
  padding: 16px;
  box-shadow: 0 16px 48px rgba(0,0,0,0.55);
  width: 280px;
  animation: tooltipIn 0.18s cubic-bezier(0.16,1,0.3,1);
  user-select: none;
}
.cal-nav {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 12px;
}
.cal-month-label {
  font-size: 14px; font-weight: 700; color: var(--white); letter-spacing: -0.2px;
  display: flex; align-items: center; gap: 4px;
}
.cal-sel {
  background: transparent;
  border: none; outline: none;
  color: var(--white);
  font-size: 14px; font-weight: 700;
  font-family: var(--font-ui);
  cursor: pointer;
  padding: 2px 2px;
  appearance: none; -webkit-appearance: none;
}
.cal-sel option { background: #3A3738; color: var(--text); font-weight: 400; }
.cal-nav-btn {
  background: none; border: none; cursor: pointer;
  color: var(--muted); width: 28px; height: 28px;
  border-radius: var(--r-xs); display: flex; align-items: center; justify-content: center;
  transition: background 0.12s, color 0.12s;
}
.cal-nav-btn:hover { background: rgba(255,255,255,0.08); color: var(--white); }
.cal-grid {
  display: grid; grid-template-columns: repeat(7, 1fr);
  gap: 2px;
}
.cal-dow {
  text-align: center; font-size: 10px; font-weight: 700;
  color: var(--muted); padding: 4px 0; text-transform: uppercase; letter-spacing: 0.4px;
}
.cal-day {
  text-align: center; font-size: 13px; font-family: var(--font-num);
  color: var(--text); padding: 5px 0;
  border-radius: var(--r-xs); cursor: pointer;
  transition: background 0.1s, color 0.1s;
  min-height: 30px; display: flex; align-items: center; justify-content: center;
}
.cal-day:hover { background: var(--accent-bg); color: var(--accent); }
.cal-day.today { color: var(--accent); font-weight: 700; }
.cal-day.selected { background: var(--accent); color: #fff; font-weight: 700; }
.cal-day.selected:hover { background: var(--accent); }
.cal-day.other-month { color: var(--muted); opacity: 0.4; }
.cal-day.future { color: var(--muted); }
.cal-day.empty { cursor: default; }
.cal-day.empty:hover { background: none; }

/* Log group header — slightly elevated */
.log-group-header td { position: relative; }

/* DB toolbar search input — transition on focus width */
.db-toolbar .field-input { transition: border-color 0.15s, box-shadow 0.15s; }

/* View fade-in — slightly longer for premium feel */
@keyframes fadeIn {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: none; }
}
.view.active { animation: fadeIn 0.2s cubic-bezier(0.16,1,0.3,1); }

/* ============================================================
   Phase 3 — New features
   ============================================================ */

/* ── Goals full-width stack layout ─────────────────────────── */
.goals-layout {
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.goals-layout #goals-form  { width: 100%; }
.goals-layout #goals-result { width: 100%; margin-bottom: 0; }

/* Goal options 2×2 grid on desktop */
.goal-options { grid-template-columns: repeat(2,1fr) !important; }

/* Sleep slider */
.sleep-slider-wrap {
  display: flex; align-items: center; gap: 10px; margin-top: 6px;
}
.sleep-slider-tick { font-size: 11px; color: var(--muted); min-width: 18px; }
.sleep-slider {
  flex: 1; height: 4px; cursor: pointer;
  -webkit-appearance: none; appearance: none;
  background: var(--border); border-radius: 100px; outline: none;
  accent-color: var(--accent);
}
.sleep-slider::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none;
  width: 16px; height: 16px; border-radius: 50%;
  background: var(--accent); cursor: pointer;
  box-shadow: 0 0 0 3px var(--accent-bg);
  transition: box-shadow 0.15s;
}
.sleep-slider::-webkit-slider-thumb:hover { box-shadow: 0 0 0 5px var(--accent-bg); }
.sleep-slider::-moz-range-thumb {
  width: 16px; height: 16px; border-radius: 50%;
  background: var(--accent); cursor: pointer; border: none;
}

/* ── (optional) italic label ────────────────────────────────── */
.field-opt {
  font-style: italic;
  font-size: 10px;
  font-weight: 400;
  text-transform: none;
  letter-spacing: 0;
  color: var(--muted);
  opacity: 0.75;
}

/* ── DB count line ───────────────────────────────────────────── */
.db-count-line {
  font-size: 11px;
  color: var(--muted);
  margin-bottom: 8px;
  font-style: italic;
}

/* ── DB Pagination ───────────────────────────────────────────── */
.db-pagination {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  padding: 10px 0 2px;
  flex-wrap: wrap;
}
.page-btn {
  min-width: 30px; height: 28px;
  display: inline-flex; align-items: center; justify-content: center;
  padding: 0 8px;
  background: none;
  border: 1px solid var(--border);
  border-radius: var(--r-xs);
  color: var(--muted);
  font-size: 12px; font-family: var(--font-ui);
  cursor: pointer;
  transition: all 0.14s;
}
.page-btn:hover:not(:disabled) { border-color: var(--accent); color: var(--accent); }
.page-btn.active { background: var(--accent-bg); border-color: var(--accent); color: var(--accent); font-weight: 700; }
.page-btn:disabled { opacity: 0.3; cursor: default; }
.page-ellipsis { color: var(--muted); font-size: 12px; padding: 0 4px; }

/* ── Comparison toggle (dashboard daily) ───────────────────── */
.comp-toggle {
  display: flex;
  background: rgba(255,255,255,0.04);
  border: 1px solid var(--border);
  border-radius: var(--r-xs);
  overflow: hidden;
  flex-shrink: 0;
}
.comp-btn {
  padding: 4px 10px;
  border: none; background: none;
  color: var(--muted);
  font-size: 11px; font-weight: 600; font-family: var(--font-ui);
  cursor: pointer;
  transition: background 0.14s, color 0.14s;
}
.comp-btn:first-child { border-right: 1px solid var(--border); }
.comp-btn.active { background: var(--accent-bg); color: var(--accent); }

/* ── Macro flashcards (dashboard daily) ─────────────────────── */
.dash-flashcard-grid {
  display: grid;
  grid-template-columns: repeat(6,1fr);
  gap: 8px;
  margin-top: 0;
}
.dash-flashcard {
  background: rgba(255,255,255,0.03);
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
  padding: 10px 10px 8px;
  display: flex; flex-direction: column; gap: 4px;
  transition: background 0.2s;
}
.dash-flashcard:hover { background: var(--accent-subtle); }
.dash-fc-name {
  font-size: 10px; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.6px;
  color: var(--muted);
}
.dash-fc-val {
  font-family: var(--font-num); font-size: 26px; font-weight: 700;
  color: var(--white); line-height: 1;
}
.dash-fc-val-lg {
  font-family: var(--font-num); font-size: 32px; font-weight: 700;
  line-height: 1;
}
.dash-fc-unit-below {
  font-size: 10px; font-family: var(--font-num); display: block; margin-top: 1px;
}
.dash-fc-sub {
  font-size: 10px; color: var(--muted); margin-top: 1px;
  font-family: var(--font-num);
}
.dash-fc-unit { font-size: 10px; color: var(--muted); font-weight: 400; }
.dash-fc-pct {
  font-size: 11px; font-family: var(--font-num);
  color: var(--accent); font-weight: 600;
}
.dash-fc-bar {
  height: 3px; border-radius: 100px;
  background: rgba(255,255,255,0.06);
  overflow: hidden; margin-top: 2px;
}
.dash-fc-bar-thick { height: 7px; margin-top: 4px; }
.dash-fc-bar-fill {
  height: 100%; border-radius: 100px;
  transition: width 0.45s cubic-bezier(0.16,1,0.3,1);
}
.dash-fc-delta {
  font-size: 10px; font-family: var(--font-num);
  color: var(--muted); margin-top: 1px;
}
.dash-fc-delta.up   { color: var(--error); }
.dash-fc-delta.down { color: var(--success); }

.dash-fc-icon {
  color: var(--muted);
  opacity: 0.7;
  flex-shrink: 0;
}

/* New flashcard inner layout */
.dash-fc-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 4px;
}
.dash-fc-bottom {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 4px;
  margin-top: 2px;
}
.dash-fc-unit-label {
  font-size: 10px;
  color: var(--muted);
  font-family: var(--font-num);
  white-space: nowrap;
}

@media (max-width: 900px) {
  .dash-flashcard-grid { grid-template-columns: repeat(3,1fr); }
}
@media (max-width: 480px) {
  .dash-flashcard-grid { grid-template-columns: repeat(2,1fr); }
}

/* ── Dashboard header controls (mode toggle + daily nav) ──── */
.dash-header-controls {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: nowrap;
}
#dash-daily-header-nav {
  display: flex;
  align-items: center;
  gap: 4px;
}
/* dead rule kept for legacy — remove on next cleanup */
#dash-header-date {
  width: 148px;
  font-size: 13px;
}


/* ── ID preview field in food modal ─────────────────────────── */
.dbf-id-preview {
  font-family: var(--font-num);
  font-size: 13px;
  color: rgba(255,255,255,0.4);
  height: 38px;
  padding: 0 11px;
  display: flex;
  align-items: center;
  background: rgba(0,0,0,0.15);
  border: 1px solid rgba(255,255,255,0.07);
  border-radius: var(--r-sm);
  letter-spacing: 0.5px;
  pointer-events: none;
  user-select: none;
  box-shadow: inset 0 2px 6px rgba(0,0,0,0.35);
}

/* ── Collapsible micro section toggle ───────────────────────── */
.micro-section-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  cursor: pointer;
  user-select: none;
}
.micro-section-header .form-section-label { flex: 1; margin: 0; padding-bottom: 0; border-bottom: none; }
#dbf-micro-panel {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  padding-top: 12px;
}
@media (max-width: 500px) {
  #dbf-micro-panel { grid-template-columns: 1fr; }
}

/* ── Canvas GPU compositing (prevents scroll lag) ────────── */
canvas {
  transform: translateZ(0);
  will-change: transform;
  backface-visibility: hidden;
}

/* ── CSV dropdown button ─────────────────────────────────── */
.csv-dropdown {
  position: relative;
}
.csv-dropdown-menu {
  display: none;
  position: absolute;
  top: calc(100% + 4px);
  right: 0;
  background: #3A3738;
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
  z-index: 40;
  min-width: 110px;
  box-shadow: 0 8px 24px rgba(0,0,0,0.4);
  overflow: hidden;
}
.csv-dropdown.open .csv-dropdown-menu { display: block; }
.csv-dropdown-menu button {
  display: block;
  width: 100%;
  padding: 8px 14px;
  text-align: left;
  background: none;
  border: none;
  color: var(--text);
  font-size: 13px;
  font-family: var(--font-ui);
  cursor: pointer;
  transition: background 0.13s;
}
.csv-dropdown-menu button:hover { background: var(--accent-bg); color: var(--white); }

/* ── Dashboard daily — activity flashcards ───────────────────── */
.dash-act-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  margin-bottom: 10px;
}
.dash-act-fc {
  background: rgba(255,255,255,0.03);
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
  padding: 10px 10px 8px;
  display: flex; flex-direction: column; gap: 3px;
}
.dash-act-fc-icon { opacity: 0.8; margin-bottom: 2px; }
.dash-act-fc-label {
  font-size: 10px; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.6px;
  color: var(--muted);
}
.dash-act-fc-val {
  font-family: var(--font-num); font-size: 18px; font-weight: 700;
  color: var(--white); line-height: 1;
}
.dash-act-fc-unit { font-size: 10px; color: var(--muted); }

.dash-act-sports { display: flex; flex-direction: column; gap: 4px; }
.dash-act-sport-row {
  display: flex; align-items: center; gap: 8px;
  padding: 6px 8px;
  background: rgba(255,255,255,0.02);
  border: 1px solid var(--border);
  border-radius: var(--r-xs);
  font-size: 12px;
}
.dash-act-sport-icon { color: var(--muted); flex-shrink: 0; }
.dash-act-sport-name { flex: 1; color: var(--text); }
.dash-act-sport-time { color: var(--muted); font-family: var(--font-num); }
.dash-act-sport-kcal { color: var(--accent); font-family: var(--font-num); font-weight: 700; }

/* ============================================================
   Feature batch — pending items
   ============================================================ */

/* ── 1. Dashboard flashcard 2-2-1 grid (5 cards) ────────────── */
/* Override: 3-column grid, first card (kcal) spans 2 cols      */
.dash-flashcard-grid {
  grid-template-columns: repeat(3, 1fr) !important;
}
.dash-flashcard:first-child {
  grid-column: span 2;
}

/* ── 2. Macro bar values — consumed (prominent) + target (muted) */
.macro-bar-header { align-items: baseline; }
.macro-val-consumed {
  font-family: var(--font-num);
  font-size: 14px;
  font-weight: 700;
  line-height: 1;
}
.macro-val-sep {
  font-size: 11px;
  color: var(--muted);
  margin: 0 2px;
}
.macro-val-target {
  font-family: var(--font-num);
  font-size: 11px;
  color: var(--muted);
  font-weight: 400;
}

/* ── 3. Saturated fat — dark overlay segment in fat bar ────── */
.progress-track-fat { position: relative; }
.progress-fill-satfat {
  position: absolute;
  left: 0; top: 0; height: 100%;
  border-radius: 100px;
  background: #6B5E9A;  /* darker than --fat (#9484C0) */
  pointer-events: none;
  z-index: 1;
}
.macro-satfat-label {
  font-family: var(--font-num);
  font-size: 10px;
  color: #9484C0;
  opacity: 0.8;
  margin-left: 4px;
}

/* ── 4. Checkbox checkmark — properly centered ───────────────── */
input[type="checkbox"].log-select-cb:checked::after,
input[type="checkbox"].db-sel-cb:checked::after {
  left: 50%;
  top: 50%;
  transform: translate(-50%, -60%) rotate(45deg);
}

/* ── 5. Column truncation — food/sport name columns ────────── */
/* Sport table: name is 2nd child, category is 3rd */
#db-sport-table td:nth-child(2),
#db-sport-table td:nth-child(3) {
  max-width: 180px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
/* Food table: name is 5th child */
#db-food-table td:nth-child(5) {
  max-width: 160px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.log-table td:first-child {
  max-width: 160px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.db-table th:nth-child(2),
.db-table th:nth-child(3),
.log-table th:first-child {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* ── 6. Log merge badge (3×) ────────────────────────────────── */
.log-merge-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-num);
  font-size: 10px;
  font-weight: 700;
  color: var(--accent);
  background: var(--accent-bg);
  border: 1px solid var(--accent-border);
  border-radius: var(--r-xs);
  padding: 1px 5px;
  margin-left: 5px;
  white-space: nowrap;
  flex-shrink: 0;
}
/* When log-name-truncate is applied to the td itself (alongside food-name-cell),
   switch to block display so text-overflow works */
td.food-name-cell.log-name-truncate {
  display: block;
  max-width: 160px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.log-name-truncate {
  max-width: 160px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* ── 7. FC panel separator + comparison section ─────────────── */
.fc-panel-sep {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 12px 0 8px;
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.6px;
  color: var(--muted);
}
.fc-panel-sep::before,
.fc-panel-sep::after {
  content: '';
  flex: 1;
  height: 1px;
  background: var(--border);
}
.fc-panel-comp-list { display: flex; flex-direction: column; }

/* ── 8. No-weight warning banner ────────────────────────────── */
.nt-no-weight-warn {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 14px;
  background: rgba(184,99,88,0.10);
  border: 1px solid rgba(184,99,88,0.35);
  border-radius: var(--r-sm);
  color: var(--error);
  font-size: 12px;
  font-weight: 500;
  margin-bottom: 10px;
}

/* ── 9. Weight history modal list ───────────────────────────── */
.wh-list {
  display: flex;
  flex-direction: column;
  max-height: 380px;
  overflow-y: auto;
  padding: 4px 0;
}
.wh-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 16px;
  border-bottom: 1px solid rgba(255,255,255,0.04);
  transition: background 0.12s;
}
.wh-row:last-child { border-bottom: none; }
.wh-row:hover { background: rgba(255,255,255,0.03); }
.wh-date {
  font-family: var(--font-num);
  font-size: 12px;
  color: var(--muted);
  min-width: 90px;
}
.wh-val {
  font-family: var(--font-num);
  font-size: 15px;
  font-weight: 700;
  color: var(--white);
  flex: 1;
}
.wh-unit { font-size: 11px; color: var(--muted); }
.wh-del {
  background: none; border: none; cursor: pointer;
  color: var(--muted); padding: 3px;
  border-radius: var(--r-xs);
  display: flex; align-items: center;
  opacity: 0.4;
  transition: opacity 0.14s, color 0.14s;
}
.wh-del:hover { opacity: 1; color: var(--error); }
.wh-empty {
  padding: 24px 16px;
  text-align: center;
  color: var(--muted);
  font-size: 13px;
}

/* ── 10. Activity flashcard inline inputs ───────────────────── */
.act-fc-input-row {
  display: flex;
  align-items: baseline;
  gap: 4px;
}
.act-fc-inline-input {
  width: 100%;
  background: rgba(255,255,255,0.06);
  border: 1px solid var(--border);
  border-radius: var(--r-xs);
  color: var(--white);
  font-family: var(--font-num);
  font-size: 18px;
  font-weight: 700;
  padding: 2px 6px;
  outline: none;
  transition: border-color 0.15s;
  -moz-appearance: textfield;
}
.act-fc-inline-input::-webkit-outer-spin-button,
.act-fc-inline-input::-webkit-inner-spin-button { -webkit-appearance: none; }
.act-fc-inline-input:focus {
  border-color: var(--accent);
  background: var(--accent-bg);
}
.act-fc-inline-input::placeholder { color: var(--muted); font-weight: 400; }

/* ── Section fade transitions (db tabs, dashboard modes) ──────── */
.db-section-hidden {
  display: none !important;
}
/* Sections visible get a fade-in */
#db-food-section:not(.db-section-hidden),
#db-sport-section:not(.db-section-hidden),
#dash-global-section:not(.db-section-hidden),
#dash-daily-section:not(.db-section-hidden) {
  animation: sectionFadeIn 0.2s cubic-bezier(0.16,1,0.3,1);
}
@keyframes sectionFadeIn {
  from { opacity: 0; transform: translateY(4px); }
  to   { opacity: 1; transform: none; }
}

/* ── Dashboard global: two-column adaptive chart grid ─────────── */
#dash-global-section {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(450px, 1fr));
  gap: 14px;
}
#dash-global-section > .card { margin-bottom: 0; }

/* ── Database: category filter bar (All / Favorites) ──────────── */
.db-cat-filter-bar {
  display: flex;
  gap: 4px;
  margin-bottom: 8px;
}
.db-cat-btn {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 4px 12px;
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
  background: none;
  color: var(--muted);
  font-size: 12px; font-weight: 500; font-family: var(--font-ui);
  cursor: pointer;
  transition: background 0.15s, color 0.15s, border-color 0.15s;
}
.db-cat-btn:hover { background: var(--accent-bg); color: var(--text); border-color: var(--accent); }
.db-cat-btn.active { background: var(--accent-bg); color: var(--accent); border-color: var(--accent); }

/* ── Database: favorites heart button in food rows ────────────── */
.db-fav-btn {
  color: var(--muted);
  opacity: 0.35;
  padding: 2px;
  transition: opacity 0.12s, color 0.12s;
}
.db-fav-btn:hover { opacity: 1; color: #E8708A; }
.db-fav-btn.db-fav-active { opacity: 1; color: #E8708A; }

/* ============================================================
   Settings view
   ============================================================ */
.settings-group {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r);
  padding: 20px 24px;
  margin-bottom: 16px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.settings-group-title {
  font-size: 13px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--muted);
}

.settings-group-desc {
  font-size: 13px;
  color: var(--muted);
  margin-top: -8px;
}

.settings-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 12px 0;
}
.settings-row + .settings-row {
  border-top: 1px solid var(--border);
}

.settings-row-info {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.settings-row-label {
  font-size: 14px;
  font-weight: 500;
  color: var(--white);
}

.settings-row-desc {
  font-size: 12px;
  color: var(--muted);
}

/* Unit toggle */
.unit-toggle {
  display: flex;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
  padding: 3px;
  gap: 2px;
  flex-shrink: 0;
}

.unit-btn {
  padding: 6px 16px;
  border-radius: 6px;
  font-size: 13px;
  font-weight: 500;
  color: var(--muted);
  background: transparent;
  border: none;
  cursor: pointer;
  transition: background 0.15s, color 0.15s;
}

.unit-btn.active {
  background: var(--accent);
  color: #fff;
}

.unit-btn:not(.active):hover {
  color: var(--text);
  background: var(--border);
}

/* Font grid */
.font-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  margin-bottom: 4px;
}

.font-card {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 3px;
  padding: 12px 14px;
  border-radius: var(--r-sm);
  border: 2px solid transparent;
  background: var(--bg);
  cursor: pointer;
  transition: border-color 0.15s, background 0.15s;
  text-align: left;
}

.font-card:hover { background: var(--border); }
.font-card.active { border-color: var(--accent); background: var(--accent-bg); }

.font-card-name {
  font-size: 15px;
  font-weight: 600;
  color: var(--text);
}

.font-card-tag {
  font-size: 10px;
  font-weight: 400;
  color: var(--muted);
}

/* Theme grid — fluid: fills width with 180px min cards */
.theme-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 10px;
}

.theme-swatch {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 10px;
  padding: 14px 14px 12px;
  border-radius: var(--r-sm);
  border: 2px solid transparent;
  background: var(--bg);
  cursor: pointer;
  transition: border-color 0.15s, background 0.15s,
              box-shadow 0.15s;
}

.theme-swatch:hover { background: color-mix(in srgb, var(--bg) 80%, var(--surface)); }

/* Active card uses its own palette accent (set via --card-accent inline style) */
.theme-swatch.active {
  border-color: var(--card-accent, var(--accent));
  box-shadow: 0 0 0 1px var(--card-accent, var(--accent)),
              0 4px 18px color-mix(in srgb, var(--card-accent, var(--accent)) 25%, transparent);
}

/* Pill strip: continuous 6-segment bar showing full palette */
.theme-pill {
  display: flex;
  height: 14px;
  border-radius: 7px;
  overflow: hidden;
  width: 100%;
  box-shadow: 0 1px 4px rgba(0,0,0,0.45);
}

.theme-pill span {
  flex: 1;
  display: block;
}

.theme-swatch-label {
  font-size: 12px;
  font-weight: 600;
  color: var(--text);
  letter-spacing: 0.01em;
  font-family: var(--selected-font);
}

/* Sidebar spacer — pushes settings + back to bottom */
.sidebar-spacer { flex: 1; }

@media (max-width: 767px) {
  .theme-grid { grid-template-columns: repeat(2, 1fr); }
  .font-grid  { grid-template-columns: repeat(2, 1fr); }
  .settings-row { flex-wrap: wrap; }
}
@media (max-width: 480px) {
  .theme-grid { grid-template-columns: 1fr 1fr; }
}

/* ============================================================
   Profile – Avatar overlay button (replacing old label)
   ============================================================ */
.profile-avatar-overlay {
  position: absolute;
  inset: 0;
  background: transparent;
  border: none;
  cursor: pointer;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: opacity 0.18s, background 0.18s;
  color: #fff;
}
.profile-avatar:hover .profile-avatar-overlay { opacity: 1; background: rgba(0,0,0,0.45); }

/* Height stepper — flex wrapper so cm label sits outside overflow clip */
.height-input-wrap { display: inline-flex; align-items: center; gap: 8px; }
.height-stepper .stepper-input { max-width: 72px; }

/* ============================================================
   Profile – Crop modal
   ============================================================ */
.p-crop-modal-inner { max-width: 380px; width: 100%; }
.p-crop-hint { font-size: 12px; color: var(--muted); text-align: center; margin-bottom: 10px; }
.p-crop-canvas-wrap { display: flex; justify-content: center; }
#p-crop-canvas {
  width: 320px; height: 320px;
  border-radius: var(--r-sm);
  background: #1a1a1a;
  cursor: grab;
  display: block;
  touch-action: none;
}
#p-crop-canvas:active { cursor: grabbing; }

/* ============================================================
   Database – Filter panel (3-col grid, animated)
   ============================================================ */
.db-filter-panel {
  background: color-mix(in srgb, var(--surface) 85%, transparent);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid var(--border);
  border-radius: var(--r);
  padding: 20px 20px 18px;
  margin-bottom: 12px;
  /* animation state — starts hidden */
  opacity: 0;
  transform: translateY(-8px) scale(0.98);
  pointer-events: none;
  transition: opacity 0.4s cubic-bezier(0.4, 0, 0.2, 1),
              transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  display: none;
}
.db-filter-panel.panel-open {
  opacity: 1;
  transform: translateY(0) scale(1);
  pointer-events: auto;
}

.db-filter-grid {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 24px;
  align-items: start;
}

.db-filter-section-title {
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--muted);
  margin-bottom: 10px;
}
.db-filter-unit {
  font-weight: 400;
  text-transform: none;
  letter-spacing: 0;
  font-size: 10px;
}

/* Category chips */
.db-filter-chips-wrap {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.db-filter-chip {
  padding: 4px 10px;
  border-radius: 20px;
  border: 1px solid var(--border);
  background: transparent;
  color: var(--text-dim);
  font-size: 12px;
  font-weight: 500;
  cursor: pointer;
  transition: background 0.2s, border-color 0.2s, color 0.2s, transform 0.15s;
  white-space: nowrap;
}
.db-filter-chip:hover {
  background: var(--accent-bg);
  border-color: var(--accent);
  color: var(--accent);
}
.db-filter-chip.active {
  background: var(--accent-bg);
  border-color: var(--accent);
  color: var(--accent);
}

/* Compact slider group */
.db-slider-group { margin-bottom: 20px; }
.db-slider-group:last-child { margin-bottom: 0; }
.db-slider-label {
  font-size: 11px;
  color: var(--text-dim);
  margin-bottom: 8px;
  font-weight: 500;
}

/* Dual-range slider */
.dual-range-wrap {
  position: relative;
  height: 4px;
  margin: 0 0 22px;
}
.dual-range-track-bg {
  position: absolute;
  inset: 0;
  background: var(--border);
  border-radius: 2px;
}
.dual-range-fill {
  position: absolute;
  top: 0;
  height: 100%;
  background: var(--accent);
  border-radius: 2px;
  pointer-events: none;
}
.dual-range {
  position: absolute;
  width: 100%;
  top: 50%;
  transform: translateY(-50%);
  -webkit-appearance: none;
  appearance: none;
  background: transparent;
  pointer-events: none;
  margin: 0;
  padding: 0;
  height: 20px;
}
.dual-range::-webkit-slider-thumb {
  -webkit-appearance: none;
  pointer-events: all;
  width: 13px; height: 13px;
  border-radius: 50%;
  background: var(--accent);
  border: 2px solid var(--bg);
  cursor: pointer;
  box-shadow: 0 0 0 1px var(--accent);
  transition: transform 0.15s;
}
.dual-range::-webkit-slider-thumb:hover { transform: scale(1.2); }
.dual-range::-moz-range-thumb {
  pointer-events: all;
  width: 9px; height: 9px;
  border-radius: 50%;
  background: var(--accent);
  border: 2px solid var(--bg);
  cursor: pointer;
}
.dual-range-vals {
  position: absolute;
  top: 14px;
  left: 0; right: 0;
  display: flex;
  justify-content: space-between;
  font-size: 10px;
  color: var(--muted);
  pointer-events: none;
}

/* Expert col */
.db-filter-expert-col { display: flex; flex-direction: column; }

/* NutriScore filter chips */
.db-filter-score-row {
  display: flex;
  gap: 5px;
  flex-wrap: wrap;
}
.db-score-filter-chip {
  width: 28px; height: 28px;
  border-radius: 6px;
  border: 2px solid transparent;
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
  color: #fff;
  opacity: 0.4;
  transition: opacity 0.2s, border-color 0.2s, transform 0.15s;
}
.db-score-filter-chip:hover { opacity: 0.75; }
.db-score-filter-chip.active { opacity: 1; border-color: rgba(255,255,255,0.5); }
.score-chip-A { background: #3D7A52; }
.score-chip-B { background: #7A9E82; }
.score-chip-C { background: #C5B060; }
.score-chip-D { background: #C08858; }
.score-chip-E { background: #B86358; }
.score-chip-F { background: #5A6666; }

/* NOVA filter row */
.db-filter-nova-row { display: flex; gap: 5px; flex-wrap: wrap; }
.db-nova-filter-btn {
  padding: 3px 9px;
  border-radius: 4px;
  border: 1px solid var(--border);
  background: transparent;
  color: var(--text-dim);
  font-size: 11px;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s, color 0.15s;
}
.db-nova-filter-btn:hover { background: var(--accent-bg); border-color: var(--accent); }
.db-nova-filter-btn.active { background: var(--accent-bg); border-color: var(--accent); color: var(--accent); }

/* Brand input */
.db-filter-brand-input {
  font-size: 12px;
  padding: 6px 10px;
  height: 30px;
}

/* Actions row */
.db-filter-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: auto;
  padding-top: 16px;
}
.db-filter-live-count {
  flex: 1;
  text-align: center;
  font-size: 11px;
  color: var(--muted);
  font-variant-numeric: tabular-nums;
  transition: color 0.2s;
}
.db-filter-apply-glow {
  box-shadow: 0 0 12px rgba(116, 116, 97, 0.45);
  transition: box-shadow 0.3s, transform 0.15s, background 0.2s;
}
.db-filter-apply-glow:hover { box-shadow: 0 0 20px rgba(116, 116, 97, 0.65); }

/* Filter button active state */
.btn-secondary.active {
  background: var(--accent-bg);
  color: var(--accent);
  border-color: var(--accent);
}

/* ── Button press micro-interaction ─────────────────────────── */
.btn-primary:active,
.btn-secondary:active,
.btn-ghost:active,
.db-score-filter-chip:active,
.db-filter-chip:active,
.db-nova-filter-btn:active { transform: scale(0.95); }

/* ── Score badge tooltip ─────────────────────────────────────── */
.score-badge[data-score] { position: relative; cursor: pointer; }
.score-badge[data-score]::after {
  content: attr(data-score) '/100';
  position: absolute;
  bottom: calc(100% + 6px);
  left: 50%;
  transform: translateX(-50%) translateY(5px);
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 5px;
  padding: 3px 7px;
  font-size: 10px;
  font-weight: 600;
  color: var(--text-dim);
  white-space: nowrap;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.2s, transform 0.2s;
  z-index: 50;
}
.score-badge[data-score]:hover::after {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}

/* ── Skeleton screen ─────────────────────────────────────────── */
.db-skeleton-wrap {
  padding: 8px 0;
}
.skeleton-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 12px;
  border-bottom: 1px solid var(--border);
}
.skeleton-cell {
  height: 10px;
  border-radius: 5px;
  background: linear-gradient(90deg, var(--border) 25%, var(--card-border) 50%, var(--border) 75%);
  background-size: 200% 100%;
  animation: skeleton-shimmer 1.4s infinite;
}
@keyframes skeleton-shimmer {
  0%   { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

/* ── Filter responsive ───────────────────────────────────────── */
@media (max-width: 900px) {
  .db-filter-grid { grid-template-columns: 1fr 1fr; }
  .db-filter-expert-col { grid-column: span 2; }
  .db-filter-actions { justify-content: flex-end; }
}
@media (max-width: 600px) {
  .db-filter-grid { grid-template-columns: 1fr; }
  .db-filter-expert-col { grid-column: span 1; }
}

/* ============================================================
   Database – Bulk queue panel
   ============================================================ */
.bulk-queue-panel {
  position: fixed;
  top: 0;
  right: 0;
  width: 220px;
  height: 100vh;
  background: var(--surface);
  border-left: 1px solid var(--border);
  z-index: 200;
  display: flex;
  flex-direction: column;
  box-shadow: -4px 0 24px rgba(0,0,0,0.25);
}

.bulk-queue-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 14px 12px;
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
}

.bulk-queue-title {
  font-size: 13px;
  font-weight: 600;
  color: var(--white);
}

.bulk-queue-progress {
  font-size: 11px;
  font-family: var(--font-num);
  color: var(--muted);
  margin-left: 6px;
}

.bulk-queue-list {
  flex: 1;
  overflow-y: auto;
  padding: 8px 0;
  scrollbar-width: thin;
}

.bulk-queue-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 14px;
  cursor: default;
  transition: background 0.12s;
  font-size: 12px;
}

.bulk-queue-item.current {
  background: var(--accent-bg);
}

.bulk-queue-item.done {
  opacity: 0.45;
}

.bulk-queue-status {
  font-size: 11px;
  color: var(--accent);
  font-family: var(--font-num);
  flex-shrink: 0;
  width: 14px;
  text-align: center;
}

.bulk-queue-item.done .bulk-queue-status { color: var(--success); }

.bulk-queue-name {
  color: var(--text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Adjust modal position when bulk queue panel is open */
body:has(#bulk-queue-panel[style*="flex"]) #db-food-modal .modal,
body:has(#bulk-queue-panel[style*="flex"]) #db-sport-modal .modal {
  margin-right: 220px;
}

/* ============================================================
   Database – btn-secondary sm (missing)
   ============================================================ */
.btn-secondary.sm { font-size: 12px; padding: 5px 10px; }
.btn-ghost.sm     { font-size: 12px; padding: 5px 10px; }
.btn-danger.sm    { font-size: 12px; padding: 5px 10px; }

/* ============================================================
   New styles — pending batch
   ============================================================ */

/* ── Stepper: inline unit label ─────────────────────────────── */
.stepper-unit {
  font-size: 12px;
  color: var(--muted);
  flex-shrink: 0;
  margin: 0 2px;
  user-select: none;
}

/* ── Stepper: size "sm" variant (for weight field) ──────────── */
.stepper-btn.sm {
  width: 26px;
  height: 30px;
  flex-shrink: 0;
}

/* ── Height stepper: make − and + SVG buttons the same size ─── */
.height-stepper .stepper-btn {
  width: 30px;
  height: 34px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

/* ── Dashboard flashcard: number block (value + unit) ──────── */
.dash-fc-num-block {
  display: flex;
  align-items: baseline;
  gap: 3px;
  text-align: right;
}

/* ── Dashboard flashcard: icon larger, vertically centered ─── */
.dash-fc-icon {
  display: inline-flex;
  align-items: center;
  flex-shrink: 0;
}

/* ── Dashboard daily food log: macro columns ────────────────── */
.dash-food-macro {
  font-family: var(--font-num);
  font-size: 11px;
  min-width: 36px;
  text-align: right;
  flex-shrink: 0;
  opacity: 0.85;
}

/* ── Dashboard flashcard sub-label (incl. sugar / sat. fat) ─── */
.dash-fc-sub-label {
  font-size: 10px;
  opacity: 0.75;
}

/* ── Bulk action bar: icon-only layout ──────────────────────── */
.bulk-action-bar {
  justify-content: space-between;
}
.bulk-bar-actions {
  display: flex;
  align-items: center;
  gap: 4px;
}

/* ── Filter badge (count bubble on filter button) ───────────── */
.filter-badge {
  position: absolute;
  top: 2px;
  right: 2px;
  min-width: 14px;
  height: 14px;
  background: var(--accent);
  color: #fff;
  font-size: 9px;
  font-weight: 700;
  font-family: var(--font-num);
  border-radius: 7px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 3px;
  pointer-events: none;
  line-height: 1;
}


/* ── Weight input: disabled state ───────────────────────────── */
#nt-weight-input:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

/* ── NutriTrack weight entry: tighter gap for steppers ──────── */
.nt-weight-entry { gap: 3px; }

/* ============================================================
   Profile — new batch (lock, progress bar, gender cards, etc.)
   ============================================================ */

/* ── View header actions (right side) ───────────────────────── */
.view-header-actions {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  flex-shrink: 0;
  padding-top: 2px;
}

/* ── Lock button ─────────────────────────────────────────────── */
.profile-lock-btn {
  width: 38px; height: 38px;
  display: inline-flex; align-items: center; justify-content: center;
  background: rgba(255,255,255,0.04);
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
  color: var(--muted);
  cursor: pointer;
  transition: background 0.2s, border-color 0.2s, color 0.2s;
  flex-shrink: 0;
}
.profile-lock-btn:hover { border-color: var(--accent); color: var(--accent); background: var(--accent-bg); }
.profile-lock-btn.locked {
  color: var(--accent);
  border-color: var(--accent-border-strong);
  background: var(--accent-bg);
}

/* ── Profile: progress bar embedded in header ────────────────── */
.profile-header-progress {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 14px;
}
.profile-progress-bar-track {
  flex: 1;
  max-width: 320px;
  height: 8px;
  background: rgba(255,255,255,0.06);
  border-radius: 100px;
  overflow: hidden;
}
.profile-header-progress .completion-pct {
  font-family: var(--font-num);
  font-size: 12px;
  font-weight: 700;
  color: var(--muted);
  min-width: 30px;
}

/* ── Gender card selector ────────────────────────────────────── */
.gender-cards {
  display: flex;
  gap: 8px;
}
.gender-card { flex: 1; cursor: pointer; }
.gender-card input { display: none; }
.gender-card-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: 12px 8px;
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
  color: var(--muted);
  font-size: 12px;
  font-weight: 500;
  transition: border-color 0.18s, background 0.18s, color 0.18s;
  user-select: none;
}
.gender-card:hover .gender-card-inner {
  border-color: var(--accent-border-strong);
  color: var(--text);
  background: rgba(255,255,255,0.03);
}
.gender-card:has(input:checked) .gender-card-inner {
  border-color: var(--accent);
  background: var(--accent-bg);
  color: var(--accent);
}
.gender-card:has(input:disabled) .gender-card-inner { cursor: not-allowed; }
.gender-card-icon { width: 26px; height: 26px; }

/* ── Identity row (DOB | Height | Bio Sex) — flex not grid ───── */
.identity-row {
  display: flex !important;
  grid-template-columns: unset !important;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: 12px;
}
.identity-row .form-field { flex: 1 1 130px; }
.identity-row .height-field { flex: 0 0 auto; }

/* ── Height stepper: cm now after + ─────────────────────────── */
.height-stepper { align-items: center; }

/* ── Float-label: label moves up on focus ────────────────────── */
.float-label-field { position: relative; }
.float-label-field .field-label {
  display: inline-block;
  transition: transform 0.2s ease, color 0.2s ease;
}
.float-label-field:focus-within .field-label {
  transform: translateY(-2px);
  color: var(--accent);
}

/* ── Field border focus glow ─────────────────────────────────── */
.field-input:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-bg);
}

/* ── Shake animation for invalid fields ─────────────────────── */
@keyframes fieldShake {
  0%, 100% { transform: translateX(0); }
  18%  { transform: translateX(-6px); }
  36%  { transform: translateX(6px); }
  54%  { transform: translateX(-4px); }
  72%  { transform: translateX(4px); }
}
.field-shake { animation: fieldShake 0.34s ease-out; }

/* ── Height stepper button bounce ───────────────────────────── */
@keyframes stepperBtnBounce {
  0%   { transform: scale(1); }
  30%  { transform: scale(0.82); }
  65%  { transform: scale(1.12); }
  100% { transform: scale(1); }
}
.stepper-btn-bounce { animation: stepperBtnBounce 0.22s cubic-bezier(0.34,1.56,0.64,1); }

/* ── Height value fade ───────────────────────────────────────── */
@keyframes heightFadeIn {
  from { opacity: 0.2; }
  to   { opacity: 1; }
}
.height-fading { animation: heightFadeIn 0.14s ease-out; }

/* ── field-error: always in flow, hidden via visibility ──────── */
.field-error { visibility: hidden; }
.field-error.visible { visibility: visible; }

/* ── Profile form actions: right-aligned ─────────────────────── */
.profile-form-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  padding-top: 8px;
}

/* ── Revert button ───────────────────────────────────────────── */
.profile-revert-btn {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 12px; padding: 6px 12px;
}

/* ── Save disk icon button ───────────────────────────────────── */
.profile-save-btn {
  width: 40px; height: 40px;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--accent); color: #fff;
  border: none; border-radius: var(--r-sm);
  cursor: pointer;
  transition: opacity 0.15s, transform 0.12s;
  flex-shrink: 0;
}
.profile-save-btn:hover { opacity: 0.85; transform: scale(1.06); }
.profile-save-btn:active { transform: scale(0.95); }

/* ── Spinner rotation ────────────────────────────────────────── */
@keyframes spinCW {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}
.spin-anim { animation: spinCW 0.75s linear infinite; }

/* ============================================================
   Profile & Goals — card header, toggle cards, activity cards,
   goal glow, results animation, progress in hero
   ============================================================ */

/* ── Profile card header (title + lock button inline) ──────── */
.profile-card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 12px;
}
.profile-card-header .profile-section-title { margin-bottom: 0; }

/* ── Progress bar in hero card ─────────────────────────────── */
.profile-hero-progress {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 10px;
}
.profile-hero-progress .profile-progress-bar-track {
  flex: 1;
  height: 6px;
  background: rgba(255,255,255,0.07);
  border-radius: 100px;
  overflow: hidden;
}
.completion-pct-sm {
  font-family: var(--font-num);
  font-size: 11px;
  font-weight: 700;
  color: var(--muted);
  min-width: 26px;
}

/* ── Identity row: DOB narrower, gender matches height ───────── */
.identity-row .dob-field   { flex: 0 1 105px !important; min-width: 90px; }
.identity-row .gender-field { flex: 0 0 auto !important; }

/* ── Profile action buttons (revert + save) ─────────────────── */
.profile-action-btn {
  width: 40px; height: 40px;
  display: inline-flex; align-items: center; justify-content: center;
  background: rgba(255,255,255,0.05);
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
  color: var(--muted);
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s, color 0.15s, transform 0.12s;
  flex-shrink: 0;
}
.profile-action-btn:hover  { background: var(--accent-hover); border-color: var(--accent); color: var(--accent); }
.profile-action-btn:active { transform: scale(0.95); }

/* ── Toggle cards grid (dietary preference) ─────────────────── */
.toggle-cards-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 4px;
}
.toggle-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 5px;
  padding: 10px 10px 8px;
  background: rgba(255,255,255,0.03);
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
  color: var(--muted);
  font-family: var(--font-ui);
  cursor: pointer;
  transition: background 0.18s, border-color 0.18s, color 0.18s, transform 0.15s;
  flex: 1 1 68px;
  min-width: 64px;
}
.toggle-card:hover {
  background: var(--accent-subtle);
  border-color: var(--accent-border-strong);
  color: var(--text);
  transform: translateY(-1px);
}
.toggle-card:active { transform: scale(0.97); }
.toggle-card.active {
  border-color: var(--accent);
  background: var(--accent-bg);
  color: var(--accent);
}
.toggle-card[disabled] {
  opacity: 0.4;
  cursor: not-allowed;
  pointer-events: none;
}
.toggle-card-icon { flex-shrink: 0; }
.toggle-card-label {
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.4px;
  text-align: center;
  line-height: 1.2;
}

/* ── Activity cards (Goals — physical activity) ─────────────── */
.activity-cards-grid {
  display: flex;
  flex-direction: column;
  gap: 5px;
  margin-top: 6px;
}
.activity-card {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 14px;
  background: rgba(255,255,255,0.03);
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
  color: var(--text);
  cursor: pointer;
  transition: background 0.18s, border-color 0.18s, transform 0.15s, box-shadow 0.18s;
  font-family: var(--font-ui);
  text-align: left;
  width: 100%;
}
.activity-card:hover {
  background: var(--accent-subtle);
  border-color: var(--accent-border-strong);
  transform: scale(1.005);
}
.activity-card:active { transform: scale(0.995); }
.activity-card.active {
  border-color: var(--accent);
  background: var(--accent-bg);
}
.activity-card-icon {
  color: var(--muted);
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 24px;
}
.activity-card.active .activity-card-icon { color: var(--accent); }
.activity-card-info { flex: 1; min-width: 0; }
.activity-card-title {
  font-size: 13px;
  font-weight: 600;
  color: var(--white);
  line-height: 1.2;
}
.activity-card.active .activity-card-title { color: var(--accent); }
.activity-card-desc {
  font-size: 11px;
  color: var(--muted);
  margin-top: 1px;
}

/* ── Goal card: position:relative for check icon ─────────────── */
.goal-card { position: relative; overflow: hidden; }

/* ── Goal card: animated glow on selected ───────────────────── */
.goal-option input:checked + .goal-card {
  border-color: var(--accent);
  background: var(--accent-bg);
  animation: goalGlow 1.8s ease-in-out infinite alternate;
}
@keyframes goalGlow {
  from { box-shadow: 0 0 0 1px var(--accent-border-strong), 0 0 6px var(--accent-glow); }
  to   { box-shadow: 0 0 0 1px var(--accent), 0 0 18px var(--accent-border); }
}

/* ── Goal card: dim non-selected when one is checked ─────────── */
.goal-options:has(input:checked) .goal-option:not(:has(input:checked)) .goal-card {
  opacity: 0.55;
  transition: opacity 0.25s;
}
.goal-options:has(input:checked) .goal-option:not(:has(input:checked)):hover .goal-card {
  opacity: 0.85;
  border-color: var(--accent-border-strong);
}

/* ── Goal check icon (top-right of selected card) ────────────── */
.goal-check-icon {
  position: absolute;
  top: 7px; right: 7px;
  width: 18px; height: 18px;
  display: flex; align-items: center; justify-content: center;
  background: var(--accent);
  border-radius: 50%;
  color: #fff;
  opacity: 0;
  transform: scale(0.5);
  transition: opacity 0.22s, transform 0.22s cubic-bezier(0.34,1.56,0.64,1);
  pointer-events: none;
}
.goal-option input:checked + .goal-card .goal-check-icon {
  opacity: 1;
  transform: scale(1);
}

/* ── Goals results: slide-up + fade-in on first show ─────────── */
#goals-result.results-entering {
  animation: resultsSlideUp 0.38s cubic-bezier(0.16,1,0.3,1) both;
}
@keyframes resultsSlideUp {
  from { opacity: 0; transform: translateY(16px); }
  to   { opacity: 1; transform: none; }
}

/* ============================================================
   Phase 5 — Identity layout, DatePicker, Goals lock, Sleep
   ============================================================ */

/* ── Card header: accommodate inline progress bar ───────────── */
.profile-card-header { margin-bottom: 6px; }
.profile-card-header-right {
  display: flex;
  align-items: center;
  gap: 10px;
}
.profile-inline-progress {
  display: flex;
  align-items: center;
  gap: 7px;
}
.profile-progress-track-sm {
  width: 90px;
  height: 6px;
  border-radius: 100px;
  overflow: hidden;
}
.profile-complete-label {
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.6px;
  text-transform: uppercase;
  color: var(--accent);
  white-space: nowrap;
  animation: completeLabelIn 0.4s cubic-bezier(0.16,1,0.3,1) both;
}
@keyframes completeLabelIn {
  from { opacity: 0; transform: translateX(-6px); }
  to   { opacity: 1; transform: none; }
}
@keyframes progressBlink {
  0%, 100% { opacity: 1; }
  35%       { opacity: 0.15; }
}
.progress-track-blinking { animation: progressBlink 0.5s ease-in-out 2 forwards; }

/* ── Horizontal field rows (identity form) ──────────────────── */
#profile-form.form-card { gap: 8px; }
.profile-field-row {
  display: flex;
  align-items: flex-start;
  gap: 12px;
}
.pfield-label {
  min-width: 108px;
  flex-shrink: 0;
  padding-top: 9px;
  margin-bottom: 0 !important;
}
.profile-field-control {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.profile-field-control .field-input { width: 100%; }
.profile-field-control .stepper-wrap { width: fit-content; }

/* ── Segmented control (biological sex) ─────────────────────── */
.seg-control {
  display: flex;
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
  overflow: hidden;
  width: fit-content;
  height: 36px;
}
.seg-btn {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 0 18px;
  background: none;
  border: none;
  color: var(--muted);
  font-size: 13px;
  font-weight: 500;
  font-family: var(--font-ui);
  cursor: pointer;
  transition: background 0.15s, color 0.15s;
  white-space: nowrap;
}
.seg-btn:not(:last-child) { border-right: 1px solid var(--border); }
.seg-btn:hover:not(.active):not([disabled]) {
  background: var(--accent-subtle);
  color: var(--text);
}
.seg-btn.active { background: var(--accent-bg); color: var(--accent); }
.seg-btn[disabled] { opacity: 0.4; cursor: not-allowed; pointer-events: none; }

/* ── Profile form actions — visible only when unlocked ───────── */
.profile-actions-animate {
  display: none;
}
.profile-actions-animate.visible {
  display: flex;
  width: 100%;
  padding-bottom: 2px;
}
.profile-actions-animate.visible .form-actions {
  width: 100%;
}

/* ── Custom DOB Date Picker ──────────────────────────────────── */
.dob-picker-pop {
  position: fixed;
  z-index: 750;
  background: #282426;
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 16px;
  padding: 14px;
  width: 308px;
  box-shadow: 0 24px 64px rgba(0,0,0,0.7), 0 4px 16px rgba(0,0,0,0.4);
  animation: tooltipIn 0.18s cubic-bezier(0.16,1,0.3,1);
  user-select: none;
}
/* ── Header row ─────────────────────────── */
.dp-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 14px;
}
/* Left card: [←] [Month name] [→] */
.dp-month-nav-wrap {
  display: flex;
  align-items: center;
  flex: 1;
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 10px;
  overflow: hidden;
}
/* Arrows inside the wrap: no individual border */
.dp-month-nav-wrap .dp-nav-btn {
  width: 36px; height: 36px;
  border: none; border-radius: 0;
  background: transparent;
  color: var(--muted);
  display: flex; align-items: center; justify-content: center;
  cursor: pointer; flex-shrink: 0;
  transition: background 0.12s, color 0.12s;
}
.dp-month-nav-wrap .dp-nav-btn:hover:not([disabled]) {
  background: rgba(255,255,255,0.08); color: var(--white);
}
.dp-month-nav-wrap .dp-nav-btn[disabled] { opacity: 0.2; cursor: default; }
/* Standalone nav btn (outside wrap — not used currently but keep as fallback) */
.dp-nav-btn {
  width: 32px; height: 32px;
  display: flex; align-items: center; justify-content: center;
  background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.08);
  cursor: pointer; color: var(--muted); border-radius: 8px;
  transition: background 0.12s, color 0.12s;
  flex-shrink: 0;
}
.dp-nav-btn:hover:not([disabled]) { background: rgba(255,255,255,0.1); color: var(--white); }
.dp-nav-btn[disabled] { opacity: 0.2; cursor: default; }
/* Month name button inside the wrap */
.dp-mname {
  flex: 1;
  display: inline-flex; align-items: center; justify-content: center;
  gap: 6px;
  height: 36px;
  padding: 0 4px;
  background: transparent; border: none; border-radius: 0;
  color: var(--white);
  font-size: 13px; font-weight: 700; font-family: var(--font-ui);
  cursor: pointer; white-space: nowrap;
  transition: color 0.15s;
}
.dp-mname:hover { color: var(--accent); }
.dp-mname.dp-pill-active { color: var(--accent); }
/* Today dot inside month name */
.dp-today-dot {
  width: 5px; height: 5px;
  background: var(--accent);
  border-radius: 50%;
  display: inline-block;
  flex-shrink: 0;
}
/* Year pill — right side, standalone */
.dp-year-pill {
  display: inline-flex; align-items: center;
  padding: 0 12px;
  height: 36px;
  background: var(--accent-bg);
  border: 1px solid var(--accent-border);
  border-radius: 10px;
  color: var(--accent);
  font-size: 13px; font-weight: 700; font-family: var(--font-ui);
  cursor: pointer; flex-shrink: 0; white-space: nowrap;
  transition: background 0.15s, border-color 0.15s;
}
.dp-year-pill:hover { background: var(--accent-hover); border-color: var(--accent); }
.dp-year-pill.dp-pill-active {
  background: var(--accent-hover);
  border-color: var(--accent);
  color: var(--accent);
}
/* ── Calendar grid ──────────────────────── */
.dp-cal { display: grid; grid-template-columns: repeat(7,1fr); gap: 3px; }
.dp-dow { display: none; }
.dp-day {
  text-align: center;
  font-size: 14px; font-family: var(--font-num); color: var(--text);
  min-height: 36px; padding: 4px 0;
  display: flex; align-items: center; justify-content: center;
  border-radius: 50%;
  background: none; border: none; cursor: pointer;
  transition: background 0.1s, color 0.1s;
}
.dp-day:hover:not([disabled]):not(.dp-sel) { background: var(--accent-hover); color: var(--accent); }
.dp-today { color: var(--accent); font-weight: 700; }
.dp-sel { background: var(--accent) !important; color: #fff !important; font-weight: 700; border-radius: 50%; }
.dp-other { opacity: 0.22; pointer-events: none; cursor: default; }
.dp-day[disabled]:not(.dp-other) { color: var(--muted); opacity: 0.3; cursor: default; }
/* Today button (DatePickerPop) */
.dp-today-row { margin-top: 8px; text-align: center; }
.dp-today-btn {
  background: none; border: 1px solid rgba(255,255,255,0.1); border-radius: 100px;
  color: var(--accent); font-size: 12px; font-weight: 600; padding: 3px 16px;
  cursor: pointer; transition: background 0.15s, border-color 0.15s;
}
.dp-today-btn:hover { background: var(--accent-bg); border-color: var(--accent); }
/* ── Month grid (3×4) ───────────────────── */
.dp-month-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 6px;
  margin-top: 8px;
}
.dp-mon-btn {
  padding: 10px 4px;
  text-align: center;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 8px;
  color: var(--text);
  font-size: 13px; font-family: var(--font-ui);
  cursor: pointer;
  transition: background 0.12s, border-color 0.12s, color 0.12s;
}
.dp-mon-btn:hover:not([disabled]) {
  background: var(--accent-bg); border-color: var(--accent-border-strong); color: var(--accent);
}
.dp-mon-sel {
  background: var(--accent) !important; border-color: var(--accent) !important;
  color: #fff !important; font-weight: 700;
}
.dp-mon-btn[disabled] { opacity: 0.2; cursor: default; }
/* ── Year grid (4×4) ────────────────────── */
.dp-year-grid { display: grid; grid-template-columns: repeat(4,1fr); gap: 6px; margin-top: 8px; }
.dp-yr-btn {
  padding: 8px 4px; text-align: center;
  background: rgba(255,255,255,0.03);
  border: 1px solid var(--border); border-radius: var(--r-sm);
  color: var(--text); font-size: 13px; font-family: var(--font-num);
  cursor: pointer;
  transition: background 0.12s, border-color 0.12s, color 0.12s, transform 0.1s;
}
.dp-yr-btn:hover:not([disabled]) {
  background: var(--accent-bg); border-color: var(--accent-border-strong);
  color: var(--accent); transform: scale(1.04);
}
.dp-yr-sel { background: var(--accent) !important; border-color: var(--accent) !important; color: #fff !important; font-weight: 700; }
.dp-yr-btn[disabled] { opacity: 0.25; cursor: default; }
.dp-zoom-in { animation: dpZoomIn 0.22s cubic-bezier(0.16,1,0.3,1); }
@keyframes dpZoomIn {
  from { opacity: 0.5; transform: scale(0.96); }
  to   { opacity: 1; transform: scale(1); }
}

/* ── Goals: field header (label + lock button row) ──────────── */
.goals-field-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 8px;
}
.goals-field-header .field-label { margin: 0; }

/* ── Goals lock button ──────────────────────────────────────── */
.goals-lock-btn {
  width: 28px; height: 28px;
  display: flex; align-items: center; justify-content: center;
  background: rgba(255,255,255,0.04);
  border: 1px solid var(--border); border-radius: var(--r-xs);
  color: var(--muted); cursor: pointer; flex-shrink: 0;
  transition: background 0.15s, border-color 0.15s, color 0.15s, transform 0.12s;
}
.goals-lock-btn:hover { border-color: var(--accent); color: var(--accent); background: var(--accent-bg); }
.goals-lock-btn.locked { color: var(--accent); border-color: var(--accent-border-strong); background: var(--accent-bg); }
.goals-lock-btn:active { transform: scale(0.9); }

/* ── Goals edit actions (save + discard icon buttons) ──────── */
.goals-form-actions-wrap { padding-top: 2px; }
.goals-edit-actions {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 8px;
}
.goals-icon-action-btn {
  width: 40px; height: 40px;
  display: flex; align-items: center; justify-content: center;
  background: rgba(255,255,255,0.05);
  border: 1px solid var(--border); border-radius: var(--r-sm);
  color: var(--muted); cursor: pointer; flex-shrink: 0;
  transition: background 0.15s, border-color 0.15s, color 0.15s, transform 0.12s;
}
.goals-icon-action-btn:hover { background: var(--accent-hover); border-color: var(--accent); color: var(--accent); }
.goals-icon-action-btn:active { transform: scale(0.94); }
.goals-icon-save-btn { background: var(--accent); border-color: var(--accent); color: #fff; }
.goals-icon-save-btn:hover { opacity: 0.88; border-color: var(--accent); color: #fff; }

/* ── Sleep target designer ──────────────────────────────────── */
.sleep-designer {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 8px;
  padding-top: 36px;
  padding-bottom: 4px;
}
.sleep-end-icon { flex-shrink: 0; opacity: 0.6; }
.sleep-moon { color: #8ca0c0; }
.sleep-sun  { color: #c4a855; }
.sleep-track-area {
  flex: 1;
  position: relative;
  display: flex;
  flex-direction: column;
}
.sleep-ticks {
  display: flex;
  justify-content: space-between;
  padding: 0 8px;
  margin-top: 3px;
}
.sleep-ticks span {
  width: 1px;
  background: var(--border);
  flex-shrink: 0;
  opacity: 0.7;
}
.sleep-ticks span:nth-child(5n+1) { height: 8px; }
.sleep-ticks span:not(:nth-child(5n+1)) { height: 4px; }
.sleep-val-bubble {
  position: absolute;
  top: -36px;
  transform: translateX(-50%);
  background: var(--accent);
  color: #fff;
  font-family: var(--font-num);
  font-size: 11px; font-weight: 700;
  padding: 2px 8px; border-radius: 100px;
  white-space: nowrap; pointer-events: none;
  transition: left 0.06s linear;
}
.sleep-val-bubble::after {
  content: '';
  position: absolute;
  bottom: -4px; left: 50%; transform: translateX(-50%);
  border-left: 4px solid transparent;
  border-right: 4px solid transparent;
  border-top: 4px solid var(--accent);
}

/* ── Disable activity cards + goal radios when goals locked ─── */
.activity-card[disabled] { opacity: 0.45; cursor: not-allowed; pointer-events: none; }
.goal-option input[disabled] + .goal-card { opacity: 0.45; cursor: not-allowed; pointer-events: none; }

/* ── Profile avatar — locked state ─────────────────────────── */
.profile-avatar.locked { cursor: default; }
.profile-avatar.locked:hover { transform: none; }
.profile-avatar.locked .profile-avatar-overlay { opacity: 0 !important; pointer-events: none !important; cursor: default; }

/* ── Locked state — dim editable fields ─────────────────────── */
#profile-form[data-locked="true"] .field-input:not([type=hidden]) {
  opacity: 0.5;
  background: rgba(255,255,255,0.02);
}
#profile-form[data-locked="true"] .height-stepper { opacity: 0.5; }
#profile-form[data-locked="true"] .seg-control { opacity: 0.5; }
/* dietary cards are already disabled and have opacity:0.4 via [disabled] rule */

/* "COMPLETED PROFILE" label — uses theme accent ──────────────── */
.profile-complete-label { color: var(--accent); }

/* ── Dietary preference tooltips ─────────────────────────────── */
.toggle-card[data-tooltip] { position: relative; overflow: visible; }
.toggle-card[data-tooltip]:not([disabled]):hover::after {
  content: attr(data-tooltip);
  position: absolute;
  bottom: calc(100% + 9px);
  left: 50%;
  transform: translateX(-50%);
  background: #1C1A1B;
  color: var(--text);
  font-size: 11px;
  font-family: var(--font-ui);
  font-weight: 400;
  line-height: 1.45;
  padding: 6px 10px;
  border-radius: 8px;
  border: 1px solid rgba(255,255,255,0.1);
  width: max-content;
  max-width: 170px;
  white-space: normal;
  text-align: center;
  pointer-events: none;
  z-index: 200;
  box-shadow: 0 8px 24px rgba(0,0,0,0.55);
  text-transform: none;
  letter-spacing: 0;
}
.toggle-card[data-tooltip]:not([disabled]):hover::before {
  content: '';
  position: absolute;
  bottom: calc(100% + 4px);
  left: 50%;
  transform: translateX(-50%);
  border: 5px solid transparent;
  border-top-color: rgba(255,255,255,0.1);
  pointer-events: none;
  z-index: 201;
}
/* Ensure tooltip stays on top of sibling cards */
.toggle-cards-grid { overflow: visible; }

/* ── Weight Onboarding Modal ─────────────────────────────────── */
.weight-onboard-overlay { pointer-events: none; }
.weight-onboard-overlay.open { pointer-events: all; }
/* No backdrop click to close — intentionally blocking */
.weight-onboard-modal-inner {
  max-width: 360px;
  text-align: center;
  padding: 36px 32px 28px;
}
.weight-onboard-icon {
  width: 60px; height: 60px;
  background: var(--accent-bg);
  border: 1px solid var(--accent-border);
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  margin: 0 auto 20px;
  color: var(--accent);
}
.weight-onboard-title {
  font-size: 20px; font-weight: 700;
  color: var(--white);
  margin-bottom: 8px;
}
.weight-onboard-desc {
  font-size: 13px; color: var(--muted);
  margin-bottom: 22px;
  line-height: 1.55;
  max-width: 260px; margin-left: auto; margin-right: auto;
}
.weight-onboard-input-row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  margin-bottom: 8px;
}
.weight-onboard-unit {
  font-size: 14px;
  color: var(--muted);
  font-weight: 500;
}

/* ── Welcome overlay ─────────────────────────────────────────── */
.welcome-overlay {
  position: fixed;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
  z-index: 3000;
  background: rgba(47,44,46,0.7);
  backdrop-filter: blur(4px);
}
.welcome-message {
  font-size: 36px;
  font-weight: 700;
  color: var(--white);
  letter-spacing: -0.5px;
  text-align: center;
  padding: 0 32px;
  animation: welcomeFadeInOut 3.5s cubic-bezier(0.16,1,0.3,1) forwards;
}
@keyframes welcomeFadeInOut {
  0%   { opacity: 0; transform: translateY(20px) scale(0.92); }
  18%  { opacity: 1; transform: translateY(0) scale(1); }
  72%  { opacity: 1; transform: translateY(0) scale(1); }
  100% { opacity: 0; transform: translateY(-10px) scale(1.04); }
}

/* ═══════════════════════════════════════════════════════════════
   WEIGHT HISTORY — DUAL VIEW (List + Calendar)
   ═══════════════════════════════════════════════════════════════ */

/* View toggle pill */
.wh-view-toggle {
  display: flex;
  gap: 2px;
  background: rgba(255,255,255,0.06);
  border-radius: 6px;
  padding: 3px;
  margin-left: auto;
  margin-right: 8px;
}
.wh-view-btn {
  padding: 4px 12px;
  font-size: 12px;
  font-weight: 500;
  border: none;
  background: none;
  border-radius: 4px;
  cursor: pointer;
  color: var(--muted);
  font-family: var(--font);
  transition: background 0.15s, color 0.15s;
}
.wh-view-btn.active { background: var(--card-border); color: var(--text); }

/* Modal body */
.wh-body { max-height: 480px; overflow-y: auto; overscroll-behavior: contain; }

/* ── Timeline list view ─────────────────────────────────────── */
.wh-timeline-wrap { padding: 8px 0 16px; }
.wh-month-group { margin-bottom: 4px; }
.wh-month-header {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--accent);
  padding: 12px 16px 6px;
}
.wh-tl-list { display: flex; flex-direction: column; padding: 0 16px; }
.wh-tl-row  { display: flex; align-items: flex-start; gap: 10px; position: relative; }
.wh-tl-body .wh-cell-actions { position: static; margin-left: auto; opacity: 0; transition: opacity 0.15s; }
.wh-tl-row:hover .wh-cell-actions { opacity: 1; }
.wh-tl-track {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding-top: 5px;
  width: 14px;
  flex-shrink: 0;
}
.wh-tl-dot  { width: 7px; height: 7px; background: var(--accent); border-radius: 50%; flex-shrink: 0; }
.wh-tl-line { width: 1px; flex: 1; min-height: 28px; background: var(--border); }
.wh-tl-row:last-child .wh-tl-line { display: none; }
.wh-tl-body { display: flex; align-items: center; gap: 8px; padding-bottom: 10px; flex: 1; min-height: 34px; }
.wh-tl-day  { font-size: 12px; color: var(--muted); min-width: 46px; }
.wh-tl-val  { font-family: var(--font-num); font-size: 15px; font-weight: 600; color: var(--text-dim); flex: 1; }

/* ── Calendar view ──────────────────────────────────────────── */
.wh-cal-wrap { padding: 12px 16px 16px; }
.wh-cal-nav {
  display: flex;
  align-items: stretch;
  justify-content: space-between;
  margin-bottom: 14px;
  gap: 8px;
}
.wh-cal-label { font-size: 14px; font-weight: 600; color: var(--text); }
.wh-cal-grid  {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 2px;
}
.wh-cal-dow {
  font-size: 10px;
  font-weight: 600;
  text-align: center;
  color: var(--muted);
  padding: 4px 0;
}
.wh-cal-empty { aspect-ratio: 1; }
.wh-cal-day {
  position: relative;
  aspect-ratio: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  cursor: default;
  user-select: none;
  -webkit-user-select: none;
}
/* Strip pseudo-element: pipe background for in-range / edge half-strips */
.wh-cal-day::before {
  content: '';
  position: absolute;
  top: 12%; bottom: 12%;
  left: 0; right: 0;
  background: transparent;
  transition: background 0.1s;
  z-index: -2;
  pointer-events: none;
}
/* Circle pseudo-element: edge caps, hover glow, selected, today outline */
.wh-cal-day::after {
  content: '';
  position: absolute;
  width: 76%;
  height: 76%;
  border-radius: 50%;
  background: transparent;
  transition: background 0.12s;
  z-index: -1;
  pointer-events: none;
}
.wh-cal-day:not(.wh-cal-outside) { cursor: pointer; }
.wh-cal-day:not(.wh-cal-outside):not(.selected):not(.range-start):not(.range-end):hover::after {
  background: rgba(255,255,255,0.08);
}
/* In-range: full-width strip + matching text/dot colors */
.wh-cal-day.in-range::before    { background: rgba(116,116,97,0.22); }
.wh-cal-day.in-range .wh-cal-daynum { color: rgba(255,255,255,0.80); }
.wh-cal-day.in-range .wh-cal-dot    { background: rgba(255,255,255,0.65); }
/* Range start: right half-strip + accent circle */
.wh-cal-day.range-start::before { left: 50%; right: 0; background: rgba(116,116,97,0.22); }
.wh-cal-day.range-start::after  { background: var(--accent); }
.wh-cal-day.range-start .wh-cal-daynum { color: #fff; font-weight: 700; }
.wh-cal-day.range-start .wh-cal-dot   { background: rgba(255,255,255,0.85); }
/* Range end: left half-strip + accent circle */
.wh-cal-day.range-end::before   { left: 0; right: 50%; background: rgba(116,116,97,0.22); }
.wh-cal-day.range-end::after    { background: var(--accent); }
.wh-cal-day.range-end .wh-cal-daynum { color: #fff; font-weight: 700; }
.wh-cal-day.range-end .wh-cal-dot   { background: rgba(255,255,255,0.85); }
/* Today: outline on circle (only when not also a range edge or selected) */
.wh-cal-day.today:not(.range-start):not(.range-end):not(.selected)::after        { outline: 1.5px solid var(--accent); outline-offset: -1px; }
.wh-cal-day.today:not(.range-start):not(.range-end):not(.selected) .wh-cal-daynum { color: var(--accent); font-weight: 700; }
/* Single-day selection */
.wh-cal-day.selected::after     { background: var(--accent) !important; }
.wh-cal-day.selected .wh-cal-daynum { color: #fff !important; font-weight: 700; }
.wh-cal-day.selected .wh-cal-dot    { background: rgba(255,255,255,0.85); opacity: 1; }
.wh-cal-daynum {
  font-size: 12px;
  font-weight: 500;
  color: var(--text-dim);
  line-height: 1;
}
.wh-cal-dot {
  width: 4px; height: 4px;
  background: var(--accent);
  border-radius: 50%;
  margin-top: 3px;
  opacity: 0.85;
}

/* Weight tooltip on calendar day */
.wh-tooltip {
  position: absolute;
  bottom: calc(100% + 5px);
  left: 50%;
  transform: translateX(-50%);
  background: var(--card-border);
  color: var(--text);
  font-size: 11px;
  font-weight: 600;
  font-family: var(--font-num);
  padding: 3px 7px;
  border-radius: 4px;
  white-space: nowrap;
  z-index: 20;
  pointer-events: none;
  box-shadow: 0 2px 8px rgba(0,0,0,0.35);
}
.wh-tooltip::after {
  content: '';
  position: absolute;
  top: 100%; left: 50%;
  transform: translateX(-50%);
  border: 4px solid transparent;
  border-top-color: var(--card-border);
}

/* Range trend summary bar */
.wh-range-trend {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 10px;
  padding: 8px 12px;
  background: rgba(116,116,97,0.1);
  border-radius: 6px;
  flex-wrap: wrap;
}
.wh-range-label { font-size: 11px; color: var(--muted); }
.wh-range-stat  { font-size: 12px; color: var(--text-dim); }
.wh-range-stat strong { color: var(--accent); }

/* ── Weight history modal: sidebar expansion ────────────────── */
.wh-modal { max-width: 420px; transition: max-width 0.25s ease; }
.wh-modal.has-sidebar { max-width: 640px; }
.wh-content-wrap { display: flex; flex-direction: row; min-height: 0; }
.wh-body { flex: 1; min-width: 0; }
.wh-sidebar-panel {
  width: 210px;
  flex-shrink: 0;
  border-left: 1px solid var(--card-border);
  overflow-y: auto;
  max-height: 480px;
  padding: 12px 10px;
  display: none;
}
.wh-sidebar-panel:not(:empty) { display: block; }
.wh-sb-row { display: flex; align-items: center; gap: 5px; padding: 4px 0; min-height: 28px; }
.wh-sb-date { font-size: 11px; color: var(--muted); flex-shrink: 0; min-width: 36px; }
.wh-sb-val  { font-family: var(--font-num); font-size: 13px; font-weight: 600; color: var(--text-dim); flex: 1; }
.wh-sb-unit { font-size: 10px; font-weight: 400; color: var(--muted); margin-left: 1px; }
.wh-sb-input { width: 50px !important; text-align: center; }

/* ── Accordion list ─────────────────────────────────────────── */
.wh-month-header {
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: space-between;
  user-select: none;
  -webkit-user-select: none;
}
.wh-chevron { flex-shrink: 0; color: var(--muted); transition: transform 0.2s ease; }
.wh-month-group:not(.open) .wh-chevron { transform: rotate(-90deg); }
.wh-month-group:not(.open) .wh-tl-list  { display: none; }
.wh-month-group.open .wh-tl-list        { display: flex; }
.wh-month-group:not(.open) .wh-grid-2col { display: none; }

/* ── Calendar edit popover (fixed position, near clicked cell) ── */
.wh-cal-day { cursor: pointer; }
.wh-cal-popover {
  position: fixed;
  z-index: 1000;
  background: var(--card);
  border: 1px solid var(--card-border);
  border-radius: 8px;
  padding: 7px 10px;
  display: flex;
  align-items: center;
  gap: 6px;
  box-shadow: 0 8px 32px rgba(0,0,0,0.55);
  white-space: nowrap;
}

/* ── Locked field visual ────────────────────────────────────── */
.field-input.locked-field {
  background: #2a2a2a !important;
  color: var(--muted) !important;
  border-color: transparent !important;
  cursor: not-allowed;
}

/* ── Weight input: hide browser spinner arrows ──────────────── */
#nt-weight-input::-webkit-inner-spin-button,
#nt-weight-input::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }
#nt-weight-input { -moz-appearance: textfield; text-align: center; }

/* Remove spinners from history grid and sidebar inputs */
.wh-input::-webkit-inner-spin-button,
.wh-input::-webkit-outer-spin-button,
.wh-sb-input::-webkit-inner-spin-button,
.wh-sb-input::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }
.wh-input, .wh-sb-input { -moz-appearance: textfield; text-align: center; }

/* ── Calendar nav: label buttons + picker ───────────────────── */
.wh-cal-nav-left {
  display: flex;
  align-items: center;
  gap: 2px;
  flex: 1;
  background: rgba(255,255,255,0.07);
  border-radius: 20px;
  padding: 4px 6px;
  justify-content: space-between;
}
.wh-cal-nav-left .wh-cal-label-btn { flex: 1; text-align: center; }
.wh-cal-nav .btn-icon {
  border: none;
  background: none;
  width: 26px; height: 26px;
  color: var(--text-dim);
  border-radius: 50%;
}
.wh-cal-nav .btn-icon:hover { background: rgba(255,255,255,0.1); color: var(--text); border: none; }
.wh-cal-label-btn {
  background: transparent;
  border: none;
  color: var(--text);
  font-size: 14px;
  font-weight: 600;
  font-family: var(--font-ui);
  cursor: pointer;
  padding: 2px 4px;
  border-radius: 6px;
  transition: color 0.15s, background 0.15s;
  line-height: 1;
}
.wh-cal-label-btn:hover { color: var(--accent); background: var(--accent-bg); }
.wh-cal-outside { pointer-events: none; cursor: default; }
.wh-cal-grid.is-dragging .wh-cal-outside { pointer-events: auto; }
.wh-cal-outside .wh-cal-daynum { color: rgba(205,195,188,0.18); }
.wh-cal-year-btn {
  display: flex;
  align-items: center;
  background: var(--accent-bg);
  color: var(--accent);
  border-radius: 20px;
  padding: 0 16px;
  font-size: 13px;
  letter-spacing: 0.01em;
}
.wh-cal-year-btn:hover { background: var(--accent-hover); color: var(--accent); }

/* ── Month / year picker grids ──────────────────────────────── */
.wh-picker-grid {
  display: grid;
  gap: 4px;
  padding: 4px 0 8px;
}
.wh-month-picker-grid { grid-template-columns: repeat(3, 1fr); }
.wh-year-picker-grid  { grid-template-columns: repeat(4, 1fr); }
.wh-picker-cell {
  background: transparent;
  border: none;
  border-radius: 8px;
  padding: 10px 4px;
  font-size: 13px;
  font-weight: 500;
  color: var(--text-dim);
  cursor: pointer;
  font-family: var(--font-ui);
  transition: background 0.12s, color 0.12s;
}
.wh-picker-cell:hover { background: rgba(255,255,255,0.06); color: var(--text); }
.wh-picker-cell.active { background: var(--accent); color: #fff; }

/* ── History grid layout ────────────────────────────────────── */
.wh-grid-wrap {
  padding: 0 16px 16px;
  min-height: 440px;
}
.wh-grid-empty {
  min-height: 440px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.wh-grid-month-divider {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--accent);
  padding: 14px 0 6px;
}
.wh-grid-2col {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px;
  margin-bottom: 4px;
}
.wh-grid-cell {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 3px;
  padding: 10px 10px 8px;
  background: rgba(255,255,255,0.03);
  border-radius: 8px;
  transition: background 0.15s;
  min-height: 64px;
}
.wh-grid-cell:hover { background: rgba(255,255,255,0.06); }
.wh-cell-date {
  font-size: 11px;
  color: var(--muted);
  letter-spacing: 0.02em;
}
.wh-cell-val {
  font-family: var(--font-num);
  font-size: 17px;
  font-weight: 600;
  color: var(--text);
}
.wh-cell-actions {
  position: absolute;
  top: 6px;
  right: 6px;
  display: flex;
  gap: 1px;
  opacity: 0;
  transition: opacity 0.15s;
}
.wh-grid-cell:hover .wh-cell-actions { opacity: 1; }
.wh-edit--active { color: var(--accent) !important; }
.wh-cell-stepper {
  display: flex;
  align-items: center;
  gap: 2px;
  margin-top: 2px;
}
.wh-hidden { display: none !important; }
.wh-step-btn {
  background: none;
  border: none;
  color: var(--text-dim);
  font-size: 17px;
  line-height: 1;
  cursor: pointer;
  padding: 2px 5px;
  transition: color 0.12s;
}
.wh-step-btn:hover { color: var(--accent); }
.wh-cell-input {
  -moz-appearance: textfield;
  text-align: center;
  background: none;
  border: none;
  border-bottom: 1px solid rgba(255,255,255,0.15);
  color: var(--text);
  font-size: 14px;
  font-family: var(--font-num);
  width: 52px;
  padding: 1px 0;
  outline: none;
}
.wh-cell-input::-webkit-inner-spin-button,
.wh-cell-input::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }

/* ── Sidebar header row ─────────────────────────────────────── */
.wh-sb-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 10px;
}


/* ═══════════════════════════════════════════════════════════════════
   LIBRARY MODULE
   ═══════════════════════════════════════════════════════════════════ */

/* ── Filter pills ────────────────────────────────────────────────── */
.lib-filters {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  padding-bottom: 20px;
}
.lib-filter-btn {
  padding: 5px 14px;
  border-radius: 20px;
  border: 1px solid var(--border);
  background: transparent;
  color: var(--muted);
  font-size: 12px;
  font-weight: 500;
  cursor: pointer;
  font-family: var(--font-ui);
  transition: background 0.15s, color 0.15s, border-color 0.15s;
}
.lib-filter-btn:hover  { background: var(--accent-bg); color: var(--accent); border-color: var(--accent-border); }
.lib-filter-btn.active { background: var(--accent-bg); color: var(--accent); border-color: var(--accent-border-strong); }

/* ── Layout ──────────────────────────────────────────────────────── */
.lib-layout {
  display: flex;
  gap: 0;
  align-items: flex-start;
  min-height: 0;
  flex: 1;
}
.lib-grid {
  flex: 1;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(170px, 1fr));
  gap: 10px;
  align-content: start;
}

/* ── Cards ───────────────────────────────────────────────────────── */
.lib-card {
  background: var(--surface);
  border-radius: 12px;
  padding: 16px;
  cursor: pointer;
  border: 1.5px solid transparent;
  transition: background 0.18s, transform 0.15s, border-color 0.15s;
  --c: var(--accent);
}
.lib-card:hover { background: var(--surface-hover); transform: translateY(-1px); }
.lib-card--active { border-color: var(--c); background: var(--surface-hover); }
.lib-card-dot {
  width: 9px; height: 9px;
  border-radius: 50%;
  background: var(--c);
  margin-bottom: 10px;
}
.lib-card-name { font-size: 14px; font-weight: 600; color: var(--text); margin-bottom: 4px; }
.lib-card-tag  { font-size: 11px; color: var(--muted); line-height: 1.4; margin-bottom: 10px; }
.lib-card-cat  {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--c);
}

/* ── Side panel ──────────────────────────────────────────────────── */
.lib-panel {
  width: 0;
  overflow: hidden;
  flex-shrink: 0;
  transition: width 0.25s ease;
  border-left: 1px solid transparent;
}
.lib-panel--open {
  width: 310px;
  border-color: var(--border);
}
.lib-panel-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 8px;
  padding: 16px 16px 14px;
  border-bottom: 1px solid var(--border);
  --c: var(--accent);
}
.lib-panel-cat {
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--c);
  margin-bottom: 5px;
}
.lib-panel-name    { font-size: 18px; font-weight: 700; color: var(--text); margin-bottom: 3px; white-space: nowrap; }
.lib-panel-tagline { font-size: 12px; color: var(--muted); white-space: nowrap; }
.lib-panel-body    { padding: 14px 16px; overflow-y: auto; max-height: calc(100vh - 290px); }
.lib-panel-section { margin-bottom: 18px; }
.lib-panel-label   {
  font-size: 10px; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.08em;
  color: var(--muted); margin-bottom: 8px;
}
.lib-panel-text { font-size: 13px; color: var(--text-dim); line-height: 1.65; }
.lib-panel-rdi  {
  font-size: 13px; font-weight: 600;
  color: var(--accent);
  background: var(--accent-bg);
  border-radius: 6px;
  padding: 7px 10px;
}
.lib-sources       { list-style: none; display: flex; flex-direction: column; }
.lib-source-item   {
  font-size: 12px; color: var(--text-dim);
  padding: 5px 0;
  border-bottom: 1px solid rgba(255,255,255,0.04);
  display: flex; align-items: center; gap: 7px;
}
.lib-source-item::before { content: '·'; color: var(--c, var(--accent)); font-size: 18px; line-height: 0; }
.lib-panel-tip {
  background: var(--accent-subtle);
  border-left: 3px solid var(--accent);
  padding: 10px 12px;
  border-radius: 0 6px 6px 0;
  font-size: 12px; color: var(--text-dim);
  display: flex; gap: 8px; line-height: 1.55;
  margin-top: 4px;
}
.lib-tip-label {
  flex-shrink: 0;
  font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em;
  color: var(--accent); padding-top: 1px;
}


/* ═══════════════════════════════════════════════════════════════════
   SHAPE MODULE
   ═══════════════════════════════════════════════════════════════════ */

/* ── Layout ──────────────────────────────────────────────────────── */
.shape-layout {
  display: flex;
  gap: 32px;
  align-items: flex-start;
}
.shape-svg-wrap {
  width: 260px;
  flex-shrink: 0;
  position: sticky;
  top: 20px;
}

/* ── SVG body — blueprint aesthetic ─────────────────────────────── */
.shape-svg {
  width: 100%;
  height: auto;
  display: block;
  transition: filter 0.3s;
}
.shape-svg--locked { filter: opacity(0.35); }

/* Non-interactive context paths (head, forearms, hands, feet) */
.body-outline > * {
  fill: none;
  stroke: var(--border);
  stroke-width: 0.7;
}

/* Zone divider line */
.body-divider {
  stroke: var(--border);
  opacity: 0.35;
}

/* View labels */
.body-view-label {
  font-size: 9px;
  fill: var(--muted);
  font-family: var(--font-ui);
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

/* Interactive muscle zones */
.body-zone > * {
  fill: none;
  stroke: var(--accent-dim);
  stroke-width: 0.85;
  transition: fill 0.25s ease, stroke 0.25s ease;
}
.shape-svg:not(.shape-svg--locked) .body-zone {
  cursor: pointer;
}
.shape-svg:not(.shape-svg--locked) .body-zone:hover > * {
  fill: color-mix(in srgb, var(--accent) 18%, transparent);
  stroke: var(--accent);
  stroke-width: 1;
}
.body-zone.zone-active > * {
  fill: color-mix(in srgb, var(--accent) 28%, transparent);
  stroke: var(--accent);
  stroke-width: 1;
}

/* ── Floating tooltip ────────────────────────────────────────────── */
.body-tooltip {
  position: absolute;
  background: var(--surface);
  color: var(--text);
  font-size: 11px;
  font-family: var(--font-ui);
  padding: 4px 9px;
  border-radius: var(--r-xs);
  border: 1px solid var(--border);
  pointer-events: none;
  white-space: nowrap;
  z-index: 20;
  opacity: 0;
  transition: opacity 0.12s;
}
.body-tooltip.visible { opacity: 1; }

/* ── Measurement panel ───────────────────────────────────────────── */
.shape-measures { flex: 1; min-width: 0; }

.sm-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 14px;
}
.sm-title         { font-size: 15px; font-weight: 600; color: var(--text); }
.sm-header-actions{ display: flex; align-items: center; gap: 8px; }
.sm-date          { font-size: 12px; color: var(--muted); }
.sm-lock-btn--locked { color: var(--error) !important; }

.sm-list { display: flex; flex-direction: column; gap: 2px; margin-bottom: 14px; }
.sm-row  {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 7px 10px;
  border-radius: 8px;
  transition: background 0.15s;
}
.sm-row:hover       { background: var(--surface); }
.sm-row--focused    { background: var(--accent-subtle) !important; }
.sm-label { font-size: 13px; color: var(--text-dim); width: 96px; flex-shrink: 0; }

.sm-ctrl  { display: flex; align-items: center; gap: 4px; }
.sm-step  {
  background: none;
  border: 1px solid var(--border);
  border-radius: 4px;
  width: 22px; height: 22px;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer;
  color: var(--text-dim);
  font-size: 15px; line-height: 1;
  flex-shrink: 0;
  transition: background 0.12s, color 0.12s, border-color 0.12s;
}
.sm-step:hover:not(:disabled) { background: var(--accent-bg); color: var(--accent); border-color: var(--accent-border); }
.sm-step:disabled { opacity: 0.28; cursor: default; }

.sm-input {
  width: 64px !important;
  text-align: center;
  -moz-appearance: textfield;
  padding: 3px 6px !important;
  height: 26px !important;
  font-size: 13px !important;
}
.sm-input::-webkit-inner-spin-button,
.sm-input::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }
.sm-input[readonly] { cursor: default; opacity: 0.65; }

.sm-unit      { font-size: 11px; color: var(--muted); flex-shrink: 0; margin-left: 2px; }
.sm-graph-btn { opacity: 0; transition: opacity 0.15s; width: 24px; height: 24px; margin-left: auto; flex-shrink: 0; }
.sm-row:hover .sm-graph-btn { opacity: 1; }

.sm-footer { display: flex; justify-content: flex-end; padding-top: 8px; }

/* ── Responsive: stack on narrow screens ─────────────────────────── */
@media (max-width: 680px) {
  .shape-layout { flex-direction: column; align-items: center; gap: 20px; }
  .shape-svg-wrap { width: 220px; position: static; }
  .lib-panel--open { width: 100%; border-left: none; border-top: 1px solid var(--border); }
  .lib-layout { flex-direction: column; }
}

/* ═══════════════════════════════════════════════════════════════════
   NutriTrack Score badges & NOVA
   ═══════════════════════════════════════════════════════════════════ */

.score-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  font-size: 11px;
  font-weight: 700;
  font-family: var(--font-ui);
  letter-spacing: 0;
  flex-shrink: 0;
  color: #fff;
}
.score-badge--lg {
  width: 36px;
  height: 36px;
  font-size: 15px;
}

/* Grade palette — aligned with design system warm tones */
.score-A { background: #3D7A52; }
.score-B { background: #7A9E82; }
.score-C { background: #C5B060; }
.score-D { background: #C08858; }
.score-E { background: #B86358; }
.score-F { background: #5A6666; }

/* NOVA inline badge in table */
.nova-badge {
  display: inline-block;
  font-size: 9px;
  font-weight: 600;
  font-family: var(--font-ui);
  padding: 1px 4px;
  border-radius: 3px;
  margin-top: 3px;
  letter-spacing: 0.02em;
  color: #fff;
}
.nova-1 { background: #7A9E82; }
.nova-2 { background: #7099A8; }
.nova-3 { background: #C08858; }
.nova-4 { background: #B86358; }

/* NOVA table column */
.db-nova-col {
  width: 52px;
  text-align: center;
  vertical-align: middle;
}
.nova-none { color: var(--muted); font-size: 12px; }

/* NutriScore column in table */
.db-score-col {
  width: 72px;
  text-align: center;
  vertical-align: middle;
}
/* Brand column */
.db-brand {
  font-size: 12px;
  color: var(--muted);
  max-width: 100px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Active row highlight */
.db-food-row.db-row-active td {
  background: color-mix(in srgb, var(--accent) 8%, transparent) !important;
}
.db-food-row { cursor: pointer; }

/* ═══════════════════════════════════════════════════════════════════
   Food side panel
   ═══════════════════════════════════════════════════════════════════ */

.db-side-panel {
  position: fixed;
  right: 0;
  top: 0;
  height: 100dvh;
  width: 280px;
  background: var(--card);
  border-left: 1px solid var(--card-border);
  display: flex;
  flex-direction: column;
  z-index: 60;
  transform: translateX(100%);
  transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1);
  overflow: hidden;
}
.db-side-panel.open {
  transform: translateX(0);
}

.db-side-panel-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  padding: 16px;
  border-bottom: 1px solid var(--card-border);
  flex-shrink: 0;
}
.dsp-title-row {
  display: flex;
  align-items: center;
  gap: 10px;
}
.dsp-food-name {
  font-size: 14px;
  font-weight: 600;
  color: var(--text);
  line-height: 1.3;
  max-width: 170px;
  word-break: break-word;
}
.dsp-food-brand {
  font-size: 11px;
  color: var(--muted);
  margin-top: 2px;
}

.db-side-panel-body {
  flex: 1;
  overflow-y: auto;
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 20px;
  scrollbar-width: thin;
  scrollbar-color: var(--border) transparent;
}

.dsp-section { display: flex; flex-direction: column; gap: 8px; }

.dsp-section-title {
  font-size: 11px;
  font-weight: 600;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  display: flex;
  align-items: center;
  gap: 6px;
}
.dsp-unit { font-weight: 400; text-transform: none; letter-spacing: 0; }

/* Score breakdown rows */
.dsp-score-total {
  font-size: 14px;
  font-weight: 600;
  color: var(--text);
  padding-bottom: 6px;
  border-bottom: 1px solid var(--border);
  margin-bottom: 2px;
}
.dsp-score-row {
  display: flex;
  justify-content: space-between;
  font-size: 12px;
  padding: 3px 0;
}
.dsp-score-label { color: var(--text-dim); }
.dsp-score-val   { font-family: var(--font-num); font-weight: 600; }
.dsp-score-bonus .dsp-score-val { color: #7A9E82; }
.dsp-score-malus .dsp-score-val { color: #B86358; }
.dsp-score-neutral .dsp-score-val { color: var(--muted); }

/* Brand input */
.dsp-brand-input {
  font-size: 13px;
  height: 34px;
  padding: 0 10px;
}

/* AddedSugars stepper */
.dsp-stepper {
  display: flex;
  align-items: center;
  gap: 0;
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
  overflow: hidden;
  width: fit-content;
}
.dsp-stepper-btn {
  width: 36px;
  height: 36px;
  background: var(--card-border);
  color: var(--text);
  font-size: 18px;
  font-weight: 300;
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.15s;
  user-select: none;
}
.dsp-stepper-btn:hover { background: var(--accent); color: #fff; }
.dsp-stepper-btn:active { transform: scale(0.92); }
.dsp-stepper-val {
  min-width: 60px;
  text-align: center;
  font-family: var(--font-num);
  font-size: 14px;
  font-weight: 600;
  color: var(--text);
  padding: 0 4px;
}

/* NOVA selector */
.dsp-nova-selector {
  display: flex;
  gap: 6px;
}
.nova-select-btn {
  width: 36px;
  height: 36px;
  border-radius: var(--r-sm);
  border: 1px solid var(--border);
  background: transparent;
  color: var(--text-dim);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.15s, color 0.15s, border-color 0.15s;
}
.nova-select-btn:hover { border-color: var(--accent); color: var(--accent); }
.nova-select-btn.active { color: #fff; border-color: transparent; }
.nova-select-btn[data-nova="0"].active { background: var(--muted); }
.nova-select-btn[data-nova="1"].active { background: #7A9E82; }
.nova-select-btn[data-nova="2"].active { background: #7099A8; }
.nova-select-btn[data-nova="3"].active { background: #C08858; }
.nova-select-btn[data-nova="4"].active { background: #B86358; }

.dsp-nova-label {
  font-size: 11px;
  color: var(--muted);
  margin-top: 2px;
}

/* Side panel responsive */
@media (max-width: 768px) {
  .db-side-panel {
    width: 100%;
    height: 60dvh;
    top: auto;
    bottom: 0;
    transform: translateY(100%);
    border-left: none;
    border-top: 1px solid var(--card-border);
  }
  .db-side-panel.open { transform: translateY(0); }
}

/* ============================================================
   Scanner View
   ============================================================ */
:root { --scanner-accent: #A855F7; --scanner-accent-bg: rgba(168,85,247,0.12); }

.scanner-layout {
  display: flex;
  flex-direction: column;
  gap: 16px;
  max-width: 600px;
}

/* ── Camera viewfinder ── */
.scan-cam-wrap {
  position: relative;
  width: 100%;
  height: 30vh;
  min-height: 160px;
  max-height: 260px;
  border-radius: var(--radius);
  overflow: hidden;
  background: #000;
  border: 1px solid var(--card-border);
}

.scan-cam-view { width: 100%; height: 100%; }
/* html5-qrcode injects a video element — make it fill the container */
.scan-cam-view video {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
}
/* hide the default html5-qrcode UI chrome */
.scan-cam-view > div:not([id='qr-shaded-region']) { display: none !important; }
#qr-shaded-region { opacity: 0 !important; }

.scan-cam-placeholder {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  color: var(--text-muted); font-size: 13px; text-align: center;
  padding: 16px; pointer-events: none;
}

.scan-aim-overlay {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  pointer-events: none;
}
.scan-aim-box {
  width: 240px; height: 80px;
  border: 2px solid var(--scanner-accent);
  border-radius: 4px;
  box-shadow: 0 0 0 2000px rgba(0,0,0,0.35);
}

.scan-cam-bar {
  position: absolute; bottom: 0; left: 0; right: 0;
  display: flex; align-items: center; justify-content: space-between;
  padding: 6px 10px;
  background: rgba(0,0,0,0.55);
  backdrop-filter: blur(4px);
}
.scan-status-text { font-size: 12px; color: rgba(255,255,255,0.8); }

.scan-cam-restart-btn {
  color: rgba(255,255,255,0.7);
  background: transparent;
  border: none;
}
.scan-cam-restart-btn:hover { color: #fff; }

/* ── Manual entry ── */
.scan-manual-wrap {
  display: flex;
  gap: 8px;
  align-items: center;
}

.scan-ean-input {
  flex: 1;
  height: 56px;
  font-size: 15px;
  letter-spacing: 0.5px;
}

.scan-ean-btn {
  height: 56px;
  padding: 0 20px;
  display: flex; align-items: center; gap: 8px;
  font-size: 14px;
  background: var(--scanner-accent);
  color: #fff;
  border: none; border-radius: var(--radius-sm);
  cursor: pointer; white-space: nowrap;
  transition: opacity 0.2s;
}
.scan-ean-btn:hover { opacity: 0.85; }
.scan-ean-btn:active { opacity: 1; transform: scale(0.97); }

/* ── Recent scans ── */
.scan-recents-wrap {}
.scan-recents-title {
  font-size: 11px; font-weight: 600; letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--text-muted);
  margin-bottom: 10px;
}
.scan-empty { font-size: 13px; color: var(--text-muted); padding: 10px 0; }

.scan-recent-item {
  display: flex; align-items: center; gap: 12px;
  padding: 10px 12px;
  border-radius: var(--radius-sm);
  background: var(--card);
  border: 1px solid var(--card-border);
  cursor: pointer;
  transition: background 0.2s;
  margin-bottom: 6px;
}
.scan-recent-item:hover { background: var(--card-border); }

.scan-recent-img {
  width: 40px; height: 40px;
  object-fit: contain; border-radius: 4px;
  background: var(--surface-hover);
  flex-shrink: 0;
}
.scan-recent-img-ph { background: var(--card-border); border-radius: 4px; }
.scan-recent-img.hidden { display: none; }

.scan-recent-body { flex: 1; min-width: 0; }
.scan-recent-name { font-size: 13px; font-weight: 500; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.scan-recent-meta { font-size: 11px; color: var(--text-muted); margin-top: 2px; }
.scan-recent-ai {
  font-size: 10px; font-weight: 700; letter-spacing: 0.06em;
  color: var(--scanner-accent);
  border: 1px solid var(--scanner-accent);
  border-radius: 3px; padding: 1px 5px;
  flex-shrink: 0;
}

/* ── Product preview panel ── */
.scan-preview-panel {
  position: fixed; top: 0; right: 0;
  width: min(420px, 100vw);
  height: 100dvh;
  background: var(--card);
  border-left: 1px solid var(--card-border);
  transform: translateX(100%);
  transition: transform 0.28s cubic-bezier(0.4, 0, 0.2, 1);
  z-index: 200;
  overflow-y: auto;
}
.scan-preview-panel.open { transform: translateX(0); }

.scan-preview-inner {
  padding: 24px 20px 32px;
  position: relative;
}

.scan-preview-close-btn {
  position: absolute; top: 16px; right: 16px;
}

.scan-preview-top {
  display: flex; gap: 14px; align-items: flex-start;
  margin-bottom: 20px; padding-right: 32px;
}
.scan-preview-img {
  width: 72px; height: 72px;
  object-fit: contain; border-radius: 8px;
  background: var(--bg); border: 1px solid var(--card-border);
  flex-shrink: 0;
}
.scan-preview-img-ph {
  width: 72px; height: 72px;
  display: flex; align-items: center; justify-content: center;
  border-radius: 8px; background: var(--bg); border: 1px solid var(--card-border);
  color: var(--text-muted); flex-shrink: 0;
}

.scan-preview-meta { flex: 1; min-width: 0; }
.scan-preview-name {
  font-size: 15px; font-weight: 600; color: var(--text);
  line-height: 1.3; margin-bottom: 4px;
}
.scan-preview-brand { font-size: 12px; color: var(--text-muted); margin-bottom: 3px; }
.scan-preview-barcode { font-size: 11px; color: var(--text-muted); font-variant-numeric: tabular-nums; }
.scan-ai-badge {
  display: inline-block; margin-top: 5px;
  font-size: 10px; font-weight: 700; letter-spacing: 0.06em;
  color: var(--scanner-accent);
  border: 1px solid var(--scanner-accent);
  border-radius: 3px; padding: 1px 6px;
  background: var(--scanner-accent-bg);
}

/* ── Macro grid ── */
.scan-macro-grid {
  display: grid; grid-template-columns: repeat(4, 1fr);
  gap: 8px; margin-bottom: 20px;
}
.scan-macro-cell {
  text-align: center;
  background: var(--bg); border-radius: var(--radius-sm);
  padding: 10px 6px;
  border: 1px solid var(--card-border);
}
.scan-macro-val { font-size: 18px; font-weight: 700; color: var(--scanner-accent); }
.scan-macro-lbl { font-size: 10px; color: var(--text-muted); margin-top: 2px; text-transform: uppercase; letter-spacing: 0.05em; }

/* ── Micro grid ── */
.scan-micro-section { margin-bottom: 20px; }
.scan-micro-title {
  font-size: 12px; font-weight: 600; color: var(--text-muted);
  margin-bottom: 10px; text-transform: uppercase; letter-spacing: 0.07em;
}
.scan-micro-sub { font-weight: 400; }
.scan-micro-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(80px, 1fr));
  gap: 6px;
}
.scan-micro-cell {
  background: var(--bg); border-radius: var(--radius-sm);
  border: 1px solid var(--card-border);
  padding: 8px 6px; text-align: center;
}
.scan-micro-val {
  font-size: 14px; font-weight: 600; color: var(--text);
  display: flex; align-items: baseline; justify-content: center; gap: 1px;
}
.scan-micro-unit { font-size: 9px; color: var(--text-muted); }
.scan-micro-lbl { font-size: 10px; color: var(--text-muted); margin-top: 2px; }

/* ── Actions ── */
.scan-preview-actions {
  display: flex; gap: 8px; flex-wrap: wrap;
  margin-bottom: 16px;
}
.scan-import-btn-el { background: var(--scanner-accent); border-color: var(--scanner-accent); }
.scan-import-btn-el:hover { opacity: 0.85; }
.scan-analyze-el {
  display: flex; align-items: center; gap: 6px;
  border-color: var(--scanner-accent); color: var(--scanner-accent);
}

/* ── Spinner ── */
.scan-spinner-wrap {
  display: flex; align-items: center; gap: 12px;
  padding: 14px 0; color: var(--text-muted); font-size: 13px;
}
.scan-spinner-ring {
  width: 20px; height: 20px; border-radius: 50%;
  border: 2px solid var(--card-border);
  border-top-color: var(--scanner-accent);
  animation: spin 0.7s linear infinite; flex-shrink: 0;
}
@keyframes spin { to { transform: rotate(360deg); } }

.hidden { display: none !important; }

/* ── AI action bar (below micronutrient steps 3 & 4) ─────────── */
.wiz-ai-action-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 24px 10px;
  border-top: 1px solid var(--border);
  flex-shrink: 0;
}
.wizard-modal .field-input { height: 38px; padding: 0 11px; }
/* Restore compact sizing in micro-grid and num-wrap */
.wizard-modal .wiz-micro-grid .field-input { height: 32px; padding: 0 8px; }
.wizard-modal .wiz-num-wrap .field-input   { height: 38px; padding: 0 10px; }
.wiz-ai-disclaimer-wrap { flex: 1; min-width: 0; }
.wiz-ai-disclaimer {
  display: block;
  font-size: 12px;
  color: var(--muted);
  opacity: 1;
  transition: opacity 0.2s ease, transform 0.2s ease;
}
.wiz-ai-disclaimer.wiz-ai-fade-out { opacity: 0; transform: translateY(4px); }
.wiz-ai-success-msg {
  color: var(--success) !important;
  text-shadow: 0 0 8px color-mix(in srgb, var(--success) 40%, transparent);
}
.wiz-ai-btn {
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 16px;
  border-radius: var(--radius-sm, 8px);
  background: var(--surface);
  border: 1px solid var(--border);
  color: var(--text);
  cursor: pointer;
  font-size: 13px;
  font-weight: 500;
  white-space: nowrap;
  flex-shrink: 0;
  transition: background 0.18s, color 0.18s, border-color 0.18s;
}
.wiz-ai-btn:hover:not(:disabled) { background: var(--accent); color: var(--bg); border-color: var(--accent); }
.wiz-ai-btn:disabled { opacity: 0.45; cursor: not-allowed; }
.wiz-ai-icon { display: flex; align-items: center; flex-shrink: 0; }
.wiz-ai-progress-bar {
  position: absolute;
  left: 0;
  bottom: 0;
  height: 2px;
  background: var(--accent);
  transition: width 0.4s ease;
  pointer-events: none;
}
.wiz-ai-spin-svg { animation: wiz-ai-spin 0.9s linear infinite; transform-origin: center; }
@keyframes wiz-ai-spin { to { transform: rotate(360deg); } }

/* ── Macro integrity warning ─────────────────────────────────── */
.wiz-macro-warning {
  margin-top: -3px;
  padding: 10px 14px;
  border-radius: var(--radius-sm, 8px);
  background: color-mix(in srgb, var(--error) 10%, transparent);
  border: 1px solid color-mix(in srgb, var(--error) 25%, transparent);
  color: var(--error);
  font-size: 13px;
  line-height: 1.5;
}

/* ── Category AI badge ───────────────────────────────────────── */
.cat-ai-badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 3px 9px;
  margin-top: 5px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--accent) 12%, transparent);
  border: 1px solid color-mix(in srgb, var(--accent) 25%, transparent);
  color: var(--muted);
  font-size: 11px;
  animation: cat-badge-pulse 1.4s ease-in-out infinite;
}
@keyframes cat-badge-pulse {
  0%, 100% { opacity: 0.55; }
  50%       { opacity: 1;    }
}

/* ── EAN field in wizard ─────────────────────────────────────── */
.ean-row { margin-top: 0; }
.ean-float-wrap { position: relative; }
.ean-id-inline-row {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 10px;
  align-items: start;
}
.ean-col {
  grid-column: span 6;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.ean-country-col {
  grid-column: span 3;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
#dbf-id-row {
  grid-column: span 3;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.ean-id-sublabel {
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.6px;
  color: var(--muted);
}
/* Country ComboBox */
.ean-country-wrap {
  position: relative;
}
.ean-country-input {
  height: 38px;
  padding: 0 11px;
}
.ean-country-dropdown {
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  right: 0;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
  z-index: 50;
  max-height: 180px;
  overflow-y: auto;
  transform-origin: top center;
}
.ean-country-item {
  padding: 8px 11px;
  cursor: pointer;
  font-size: 13px;
  color: var(--white);
  transition: background 0.1s;
}
.ean-country-item:hover,
.ean-country-item.active { background: rgba(255,255,255,0.07); }
.ean-country-item strong { color: var(--accent); }
@media (max-width: 600px) {
  .ean-id-inline-row {
    grid-template-columns: 1fr;
  }
  .ean-col, .ean-country-col, #dbf-id-row {
    grid-column: span 1;
  }
}
.ean-input-wrap {
  display: flex;
  gap: 0;
  align-items: stretch;
}
.ean-input {
  flex: 1;
  min-width: 0;
  border-right: none;
  border-radius: var(--r-sm) 0 0 var(--r-sm);
}
.ean-btn-group {
  display: flex;
  flex-shrink: 0;
  border: 1px solid var(--border);
  border-left: 1px solid var(--border);
  border-radius: 0 var(--r-sm) var(--r-sm) 0;
  overflow: hidden;
}
.ean-btn-group .ean-action-btn + .ean-action-btn {
  border-left: 1px solid var(--border);
}
.ean-action-btn {
  flex-shrink: 0;
  width: 32px;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: none;
  border-radius: 0;
  color: var(--muted);
  cursor: pointer;
  transition: color 0.15s, background 0.15s;
}
.ean-action-btn:hover { background: rgba(255,255,255,0.05); color: var(--accent); }
.ean-action-btn:disabled { opacity: 0.45; cursor: not-allowed; }
.ean-input-error { border-color: rgba(184, 99, 88, 0.5) !important; }
@keyframes ean-shake {
  0%,100% { transform: translateX(0); }
  20%      { transform: translateX(-3px); }
  40%      { transform: translateX(3px); }
  60%      { transform: translateX(-3px); }
  80%      { transform: translateX(3px); }
}
.ean-shake { animation: ean-shake 0.3s ease; }
.wiz-field-error.ean-not-found {
  display: flex;
  align-items: center;
  gap: 4px;
  color: rgba(184, 99, 88, 0.85);
  font-size: 11.5px;
}
.ean-cam-container {
  margin-top: 8px;
  border-radius: var(--radius, 8px);
  overflow: hidden;
  border: 1px solid var(--border);
  background: #000;
}
#dbf-ean-cam-view {
  width: 100%;
  height: 160px;
  overflow: hidden;
  position: relative;
}
#dbf-ean-cam-view video {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover;
}
#dbf-ean-cam-view > div:not([id='qr-shaded-region']) { display: none !important; }
#dbf-ean-cam-view #qr-shaded-region { opacity: 0 !important; }
.ean-cam-hint {
  padding: 5px 10px;
  font-size: 11px;
  color: var(--text-muted);
  text-align: center;
  background: var(--surface);
}
.ean-cam-close-btn {
  display: block;
  width: 100%;
  padding: 7px 10px;
  font-size: 12px;
  background: var(--surface);
  border: none;
  border-top: 1px solid var(--border);
  cursor: pointer;
  color: var(--text-muted);
  text-align: center;
  transition: background 0.15s;
}
.ean-cam-close-btn:hover { background: var(--surface-hover); }

/* EAN product confirmation — full-screen overlay above all modals */
.ean-confirm-overlay {
  position: fixed;
  top: 0; left: 0; right: 0; bottom: 0;
  z-index: 9999;
  background: rgba(0, 0, 0, 0.6);
  display: flex;
  align-items: center;
  justify-content: center;
}
.ean-confirm-card {
  width: min(440px, 90vw);
  background: var(--card, #423F40);
  border: 1px solid var(--accent);
  border-radius: var(--radius, 8px);
  overflow: hidden;
  box-shadow: 0 16px 48px rgba(0,0,0,0.55);
}
.ean-confirm-inner {
  display: flex;
  gap: 12px;
  padding: 12px;
  align-items: flex-start;
}
.ean-confirm-img {
  width: 72px;
  height: 72px;
  object-fit: contain;
  border-radius: 6px;
  background: var(--surface-hover);
  flex-shrink: 0;
}
.ean-confirm-img-ph {
  width: 72px;
  height: 72px;
  border-radius: 6px;
  background: var(--surface-hover);
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-muted);
}
.ean-confirm-body {
  flex: 1;
  min-width: 0;
}
.ean-confirm-question {
  font-size: 11px;
  font-weight: 600;
  color: var(--accent);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: 4px;
}
.ean-confirm-name {
  font-size: 14px;
  font-weight: 600;
  color: var(--text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.ean-confirm-brand {
  font-size: 12px;
  color: var(--text-muted);
  margin-top: 2px;
}
.ean-confirm-kcal {
  font-size: 12px;
  color: var(--text-dim);
  margin-top: 4px;
}
.ean-confirm-actions {
  display: flex;
  gap: 8px;
  padding: 10px 12px;
  border-top: 1px solid var(--border);
  background: var(--surface-hover);
}
.ean-confirm-yes {
  flex: 1;
  padding: 7px 12px;
  font-size: 13px;
  font-weight: 500;
  background: var(--accent);
  color: #fff;
  border: none;
  border-radius: var(--radius-sm, 6px);
  cursor: pointer;
  transition: opacity 0.15s;
}
.ean-confirm-yes:hover { opacity: 0.85; }
.ean-confirm-no {
  flex: 1;
  padding: 7px 12px;
  font-size: 13px;
  font-weight: 500;
  background: transparent;
  color: var(--text-dim);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm, 6px);
  cursor: pointer;
  transition: background 0.15s;
}

.ean-confirm-no:hover { background: var(--surface); }