/* ============================================================
   DESIGN TOKENS — portado do protótipo UX Pilot (leaf green + coral)
   ============================================================ */
:root{
  --bg:#F4F6F4;
  --paper:#FFFFFF;
  --ink:#111827;
  --ink-muted:#6B7280;
  --ink-dim:rgba(17,24,39,.5);
  --border:#F3F4F6;
  --border-strong:#E5E7EB;

  --leaf-50:#F0F6F1;
  --leaf-100:#DCEBE0;
  --leaf-300:#8DB9A6;
  --leaf-400:#639F85;
  --leaf-500:#2F7D63;
  --leaf-600:#23644E;
  --leaf-700:#1D4F3D;
  --leaf-900:#14211B;

  --coral:#D9383A;
  --terracotta:#C2703D;
  --amber:#D97706;

  --accent: var(--leaf-500);
  --accent-strong: var(--leaf-600);
  --accent-soft: var(--leaf-50);
  --danger: var(--coral);
  --warn: var(--amber);
  --ok: var(--leaf-500);

  --radius-lg:24px;
  --radius-md:16px;
  --radius-sm:12px;

  --font-display:'Inter', sans-serif;
  --font-body:'Inter', sans-serif;

  --shadow-card: 0 1px 3px rgba(20,33,27,.06);
  --shadow-float: 0 10px 40px -12px rgba(20,33,27,.35);
  --shadow-accent: 0 8px 20px -8px rgba(35,100,78,.45);
}
[data-profile="raissa"]{ --accent: #DB2777; --accent-strong:#BE185D; --accent-soft:#FCE7F3; --shadow-accent:0 8px 20px -8px rgba(219,39,119,.35); }

*{ box-sizing:border-box; -webkit-tap-highlight-color:transparent; touch-action:manipulation; }
html,body{ margin:0; padding:0; touch-action:manipulation; }
body{
  min-height:100vh;
  color:var(--ink);
  font-family:var(--font-body);
  line-height:1.6;
  background:var(--bg);
  -webkit-font-smoothing:antialiased;
}
#app{ max-width:640px; margin:0 auto; padding:0 0 104px 0; min-height:100vh; position:relative; }
svg.lucide{ width:1em; height:1em; stroke-width:2; }
.hidden{ display:none !important; }
.no-scrollbar::-webkit-scrollbar{ display:none; }
.no-scrollbar{ -ms-overflow-style:none; scrollbar-width:none; }

/* ============================================================
   LOGIN + LOADING
   ============================================================ */
.login-screen{ position:fixed; inset:0; background:var(--bg); display:flex; align-items:center; justify-content:center; padding:24px; z-index:500; }
.login-card{ width:100%; max-width:360px; background:var(--paper); border:1px solid var(--border); border-radius:var(--radius-lg); padding:36px 30px 32px 30px; text-align:center; box-shadow:0 4px 24px -8px rgba(20,33,27,.1); }
.login-mark{
  width:64px; height:64px; margin:0 auto 20px auto; border-radius:var(--radius-lg); background:var(--leaf-600); color:#fff;
  display:flex; align-items:center; justify-content:center; box-shadow:0 12px 28px -8px rgba(35,100,78,.4);
}
.login-mark svg, .loading-mark svg{ width:28px; height:28px; }
.login-card h1{ font-family:var(--font-display); font-weight:800; font-size:26px; margin:0 0 6px 0; letter-spacing:-.01em; }
.login-card p{ margin:0 0 26px 0; font-size:13px; color:var(--ink-muted); }
.login-field{ display:flex; align-items:center; gap:10px; border:1px solid var(--border-strong); border-radius:var(--radius-md); padding:13px 14px; background:var(--bg); }
.login-field i{ color:var(--ink-dim); width:16px; height:16px; flex:none; }
.login-field input{ flex:1; border:none; background:none; outline:none; font-family:var(--font-body); font-size:14.5px; color:var(--ink); min-width:0; }
.login-field input::placeholder{ color:#9CA3AF; }
.login-eye{ background:none; border:none; color:var(--ink-dim); cursor:pointer; display:flex; padding:0; }
.login-submit{
  width:100%; margin-top:16px; background:var(--leaf-600); color:#fff; border:none;
  font-family:var(--font-display); font-weight:700; font-size:14.5px; padding:14px 18px; border-radius:var(--radius-md); cursor:pointer;
  display:flex; align-items:center; justify-content:center; gap:8px; box-shadow:var(--shadow-accent);
}
.login-submit svg{ width:15px; height:15px; }
.login-submit:active{ opacity:.88; }
.login-error{ color:var(--danger); font-size:12.5px; margin:16px 0 0 0; min-height:16px; }
.login-error.hidden{ visibility:hidden; }
@keyframes shakeCard{
  10%,90%{transform:translateX(-1px);} 20%,80%{transform:translateX(2px);}
  30%,50%,70%{transform:translateX(-5px);} 40%,60%{transform:translateX(5px);}
}
.login-card.shake{ animation:shakeCard .5s cubic-bezier(.36,.07,.19,.97); }

.loading-screen{ position:fixed; inset:0; background:var(--bg); display:flex; flex-direction:column; align-items:center; justify-content:center; gap:16px; z-index:300; }
.loading-mark{ width:64px; height:64px; border-radius:var(--radius-lg); background:var(--leaf-600); color:#fff; display:flex; align-items:center; justify-content:center; animation:pulseMark 1.4s ease-in-out infinite; }
@keyframes pulseMark{ 0%,100%{opacity:1;} 50%{opacity:.5;} }
.loading-screen p{ color:var(--ink-muted); font-size:13px; }

/* ============================================================
   HEADER
   ============================================================ */
.app-header{ padding:16px 16px 12px 16px; position:sticky; top:0; z-index:20; background:color-mix(in srgb, var(--bg) 90%, transparent); backdrop-filter:blur(8px); }
.header-top{ display:flex; align-items:center; justify-content:space-between; gap:10px; }
.brand-mini{ display:flex; align-items:center; gap:9px; flex:none; }
.brand-mark{ width:34px; height:34px; border-radius:12px; flex:none; background:var(--accent); color:#fff; display:flex; align-items:center; justify-content:center; transition:background .3s ease; }
.brand-mark svg{ width:17px; height:17px; }
.brand-name{ font-family:var(--font-display); font-weight:800; font-size:17px; letter-spacing:-.01em; white-space:nowrap; }

.header-actions{ display:flex; align-items:center; gap:10px; flex:none; }
.sync-status{ width:32px; height:32px; border-radius:50%; background:var(--paper); border:1px solid var(--border); box-shadow:var(--shadow-card); display:flex; align-items:center; justify-content:center; color:#9CA3AF; cursor:pointer; flex:none; padding:0; }
.sync-status svg{ width:14px; height:14px; }
.sync-status.on{ color:var(--leaf-500); border-color:var(--leaf-100); }

.profile-slider{ position:relative; display:flex; align-items:center; width:142px; height:36px; border-radius:999px; background:var(--paper); border:1px solid var(--border); box-shadow:var(--shadow-card); padding:3px; user-select:none; flex:none; }
.ps-label{ position:relative; z-index:2; flex:1; text-align:center; font-family:var(--font-display); font-weight:600; font-size:11.5px; color:var(--ink-muted); transition:color .25s ease; pointer-events:none; }
.ps-label.active-label{ color:#fff; }
.ps-pill{ position:absolute; top:3px; left:3px; width:calc(50% - 3px); height:calc(100% - 6px); border-radius:999px; background:var(--accent); transition:left .3s cubic-bezier(.4,0,.2,1), background .3s ease; cursor:grab; z-index:1; touch-action:none; }
.ps-pill.dragging{ transition:none; cursor:grabbing; }

/* ============================================================
   DAY STRIP
   ============================================================ */
.day-nav-row{ display:flex; align-items:center; justify-content:center; padding:12px 16px 4px 16px; }
.day-nav-row.hidden{ display:none; }
.date-strip{ position:relative; display:flex; align-items:center; gap:5px; width:100%; overflow-x:auto; }
.ds-arrow{ width:26px; height:26px; border-radius:50%; border:none; background:var(--paper); box-shadow:var(--shadow-card); color:var(--ink-muted); display:flex; align-items:center; justify-content:center; cursor:pointer; flex:none; }
.ds-arrow svg{ width:12px; height:12px; }
.ds-arrow:disabled{ opacity:.35; cursor:not-allowed; }
.ds-track{ display:flex; flex:1; align-items:center; gap:5px; overflow-x:auto; }
.ds-cell{ flex:1; min-width:0; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:3px; padding:9px 2px; border-radius:var(--radius-md); border:1px solid var(--border); background:var(--paper); box-shadow:var(--shadow-card); cursor:pointer; color:var(--ink-muted); }
.ds-cell .ds-weekday{ font-size:9.5px; font-weight:700; letter-spacing:.03em; text-transform:uppercase; color:#9CA3AF; }
.ds-cell .ds-num{ font-family:var(--font-display); font-weight:700; font-size:13.5px; color:var(--ink); }
.ds-cell.is-today:not(.selected){ box-shadow:inset 0 0 0 1.5px var(--accent); }
.ds-cell.is-today:not(.selected) .ds-num{ color:var(--accent); }
.ds-cell.selected{ background:var(--accent); border-color:var(--accent); box-shadow:var(--shadow-accent); }
.ds-cell.selected .ds-weekday, .ds-cell.selected .ds-num{ color:#fff; }
.ds-cell.disabled{ opacity:.35; pointer-events:none; }

/* ============================================================
   TAB NAV — pílula com 4 abas + botão de adicionar flutuante
   ============================================================ */
.navbar-row{
  position:fixed; left:50%; transform:translateX(-50%); bottom:calc(14px + env(safe-area-inset-bottom)); z-index:30;
  width:calc(100% - 28px); max-width:520px; display:flex; align-items:center; gap:10px;
}
.pill-nav{
  flex:1; min-width:0; display:flex; align-items:center; gap:2px;
  background:var(--paper); border-radius:999px; padding:6px; box-shadow:var(--shadow-float);
}
.pill-item{
  flex:1; min-width:0; display:flex; align-items:center; justify-content:center; gap:6px;
  background:none; border:none; padding:11px 6px; border-radius:999px; cursor:pointer;
  color:var(--ink-dim); font-family:var(--font-display); font-weight:700; font-size:12.5px;
  transition:background .25s ease, color .25s ease, flex-grow .25s ease;
}
.pill-item .icon{ width:19px; height:19px; flex:none; }
.pill-item .pill-label{
  max-width:0; overflow:hidden; opacity:0; white-space:nowrap;
  transition:max-width .25s ease, opacity .2s ease, margin-left .25s ease;
}
.pill-item.active{ background:var(--accent-soft); color:var(--accent-strong); flex-grow:1.7; }
.pill-item.active .pill-label{ max-width:80px; opacity:1; margin-left:1px; }

.fab-add{
  flex:none; width:52px; height:52px; border-radius:50%; border:none; cursor:pointer;
  background:var(--accent-strong); color:#fff; display:flex; align-items:center; justify-content:center;
  box-shadow:var(--shadow-accent);
}
.fab-add svg{ width:24px; height:24px; }
.fab-add:active{ transform:scale(.93); }

main#content{ padding:12px 16px 40px 16px; display:flex; flex-direction:column; gap:16px; }

/* ============================================================
   PAGE HERO
   ============================================================ */
.page-hero{ text-align:center; padding:4px 8px 12px 8px; }
.hero-title-row{ display:flex; align-items:center; justify-content:center; gap:9px; margin-bottom:3px; }
.hero-icon-inline{ width:32px; height:32px; border-radius:11px; flex:none; display:flex; align-items:center; justify-content:center; color:#fff; background:var(--accent); box-shadow:var(--shadow-accent); }
.hero-icon-inline svg{ width:16px; height:16px; }
.page-hero h1{ font-family:var(--font-display); font-weight:800; font-size:20px; margin:0; letter-spacing:-.01em; }
.page-hero p{ margin:2px 0 0 0; font-size:12.5px; color:var(--ink-muted); }

/* ============================================================
   GENERIC CARD
   ============================================================ */
.card{ background:var(--paper); border:1px solid var(--border); border-radius:var(--radius-lg); padding:20px; box-shadow:var(--shadow-card); }
.card h2{ font-family:var(--font-display); font-weight:700; font-size:15.5px; margin:0 0 16px 0; text-align:center; letter-spacing:-.005em; display:flex; align-items:center; justify-content:center; gap:7px; color:var(--ink); }
.card h2 svg{ width:15px; height:15px; color:var(--accent); }
.field-label{ display:block; font-size:11px; color:var(--ink-muted); font-weight:700; margin-bottom:8px; text-transform:uppercase; letter-spacing:.06em; text-align:center; }

/* collapsible */
.collapsible-header{ width:100%; display:flex; align-items:center; gap:8px; background:none; border:none; padding:0; margin:0; cursor:pointer; font-family:var(--font-display); font-size:14.5px; font-weight:700; color:var(--ink); text-align:left; }
.collapsible-title{ display:flex; align-items:center; gap:7px; flex:1; min-width:0; }
.collapsible-title svg{ width:15px; height:15px; color:var(--accent); flex:none; }
.collapsible-meta{ font-size:12px; color:var(--ink-muted); font-weight:500; flex:none; }
.collapsible-chevron{ width:15px; height:15px; color:#9CA3AF; flex:none; transition:transform .2s ease; }
.collapsible-chevron.open{ transform:rotate(180deg); }
.collapsible-body{ display:none; margin-top:14px; }
.collapsible-body.open{ display:block; }
.empty-hint{ color:#9CA3AF; font-size:13px; text-align:center; padding:16px 0; }

/* ============================================================
   TODAY CARD (Início) — anel de progresso + macros ao lado
   ============================================================ */
.today-card{ padding:22px; }
.today-card-top{ display:flex; align-items:center; justify-content:space-between; margin-bottom:14px; }
.today-eyebrow{ font-family:var(--font-display); font-weight:700; font-size:15px; color:var(--ink); }
.today-badge{ font-size:11px; font-weight:600; color:var(--accent); background:var(--accent-soft); padding:4px 10px; border-radius:999px; }
.today-body{ display:flex; align-items:center; gap:22px; }
.ring-outer{ position:relative; width:130px; height:130px; flex:none; }
.ring-svg{ width:100%; height:100%; transform:rotate(-90deg); }
.ring-track{ fill:none; stroke:var(--border); stroke-width:11; }
.ring-progress{ fill:none; stroke:var(--accent); stroke-width:11; stroke-linecap:round; transition:stroke-dashoffset 1.1s cubic-bezier(.16,1,.3,1); }
.ring-progress.over{ stroke:var(--danger); }
.ring-inner{ position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center; }
.ring-num{ font-family:var(--font-display); font-weight:800; font-size:24px; color:var(--ink); line-height:1; font-variant-numeric:tabular-nums; }
.ring-goal{ font-size:10.5px; color:var(--ink-muted); margin-top:4px; }
.today-macros{ flex:1; display:flex; flex-direction:column; gap:11px; min-width:0; }
.today-macro-row{ display:flex; flex-direction:column; gap:5px; }
.today-macro-label{ display:flex; justify-content:space-between; align-items:baseline; font-size:11.5px; }
.today-macro-label .tm-name{ font-weight:600; color:var(--ink-muted); }
.today-macro-label .tm-vals{ color:#9CA3AF; font-size:10.5px; }
.today-macro-label .tm-pct{ font-family:var(--font-display); font-weight:700; color:var(--ink); font-size:11.5px; }
.today-macro-label .tm-pct.over{ color:var(--danger); }
.today-macro-bar-track{ height:6px; border-radius:99px; background:var(--border); overflow:hidden; }
.today-macro-bar-fill{ display:block; height:100%; border-radius:99px; background:var(--accent); transition:width 1.1s cubic-bezier(.16,1,.3,1); }
.today-macro-bar-fill.warn{ background:var(--danger); }
.today-alert{ display:flex; align-items:center; gap:7px; margin-top:16px; background:#FDECEC; color:var(--danger); font-weight:600; font-size:12px; padding:9px 14px; border-radius:var(--radius-sm); }
.today-alert svg{ width:14px; height:14px; flex:none; }
.today-caption{ margin-top:14px; font-size:12px; color:var(--ink-muted); text-align:center; }
.incomplete-link{ display:block; width:100%; margin-top:10px; background:none; border:none; padding:6px 0 0 0; text-align:center; font-size:11.5px; color:#9CA3AF; text-decoration:underline; cursor:pointer; }
.incomplete-badge{
  display:flex; align-items:center; justify-content:center; gap:8px; width:100%; margin-top:12px;
  background:#FEF3E2; color:var(--amber); border:none; border-radius:var(--radius-sm); padding:10px 12px;
  font-size:12px; font-weight:700; cursor:pointer;
}
.incomplete-badge svg{ width:14px; height:14px; flex:none; }
.incomplete-badge .ib-x{ width:13px; height:13px; margin-left:auto; opacity:.6; }

/* ============================================================
   FOOD ROWS (Início)
   ============================================================ */
.hist-meal-group{ margin-bottom:14px; }
.hist-day-group{ margin-bottom:16px; }
.hist-meal-title{ font-size:10.5px; text-transform:uppercase; letter-spacing:.07em; color:#9CA3AF; font-weight:800; margin-bottom:8px; text-align:left; }
.food-row{ display:flex; align-items:center; gap:12px; padding:10px 0; border-bottom:1px solid var(--border); }
.hist-meal-group .food-row:last-of-type{ border-bottom:none; }
.fr-icon{ width:36px; height:36px; border-radius:12px; flex:none; display:flex; align-items:center; justify-content:center; background:var(--bg); color:#9CA3AF; }
.fr-icon svg{ width:16px; height:16px; }
.fr-info{ flex:1; min-width:0; display:flex; flex-direction:column; gap:1px; }
.fr-name{ font-size:13.5px; font-weight:600; color:var(--ink); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.fr-sub{ font-size:11.5px; color:var(--ink-muted); }
.fr-kcal{ flex:none; font-family:var(--font-display); font-weight:700; font-size:13px; color:var(--ink); white-space:nowrap; }
.fr-delete{ flex:none; background:none; border:none; color:#D1D5DB; cursor:pointer; display:flex; padding:4px; }
.fr-delete svg{ width:15px; height:15px; }
.fr-delete:active{ color:var(--danger); }
.food-row.clickable{ cursor:pointer; }
.food-row.clickable:active{ background:var(--bg); }

/* ============================================================
   BUTTONS
   ============================================================ */
.btn-primary, .btn-gradient, .btn-outline{ border:none; cursor:pointer; font-family:var(--font-display); font-weight:700; font-size:14px; padding:13px 18px; border-radius:var(--radius-md); display:flex; align-items:center; justify-content:center; gap:8px; }
.btn-primary{ background:var(--bg); color:var(--ink); border:1px solid var(--border-strong); }
.btn-gradient{ background:var(--accent-strong); color:#fff; box-shadow:var(--shadow-accent); }
.btn-outline{ background:transparent; color:var(--ink); border:1px solid var(--border-strong); }
.btn-primary:active, .btn-gradient:active, .btn-outline:active{ opacity:.85; }
.btn-gradient svg, .btn-outline svg, .btn-primary svg{ width:15px; height:15px; }
.full{ width:100%; margin-top:6px; }
.btn-small{ padding:9px 14px; font-size:12.5px; border-radius:var(--radius-sm); margin-top:0; }
.btn-gradient:disabled, .btn-primary:disabled, .btn-outline:disabled{ opacity:.45; cursor:not-allowed; }

/* ============================================================
   COMPOSER (Adicionar / Cardápio food picker)
   ============================================================ */
.composer-hero{ background:transparent; border:none; padding:0; box-shadow:none; position:relative; z-index:5; }
.search-wrap{ position:relative; }
.search-input-icon{ position:absolute; left:15px; top:50%; transform:translateY(-50%); color:#9CA3AF; }
.search-input-icon svg{ width:16px; height:16px; }
#foodSearchInput, #deSearchInput{ width:100%; background:var(--paper); border:1px solid var(--border-strong); color:var(--ink); font-family:var(--font-body); font-size:14.5px; padding:14px 14px 14px 42px; border-radius:var(--radius-md); outline:none; box-shadow:var(--shadow-card); }
#foodSearchInput::placeholder, #deSearchInput::placeholder{ color:#9CA3AF; }
#foodSearchInput:focus, #deSearchInput:focus{ border-color:var(--accent); }
.dropdown{ position:absolute; top:calc(100% + 8px); left:0; right:0; border-radius:var(--radius-md); max-height:300px; overflow-y:auto; z-index:15; box-shadow:var(--shadow-float); background:var(--paper) !important; border:1px solid var(--border); }
.dropdown.hidden{ display:none; }
.dropdown-item{ padding:11px 14px; cursor:pointer; border-bottom:1px solid var(--border); display:flex; align-items:center; gap:10px; }
.dropdown-item:last-child{ border-bottom:none; }
.dropdown-item:active{ background:var(--bg); }
.di-icon{ width:30px; height:30px; border-radius:11px; background:var(--bg); display:flex; align-items:center; justify-content:center; color:var(--accent); flex:none; }
.di-icon svg{ width:14px; height:14px; }
.di-text{ min-width:0; flex:1; }
.di-name{ font-size:13.5px; font-weight:600; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.di-cat{ font-size:10.5px; color:#9CA3AF; }
.dropdown-empty{ padding:16px; font-size:13px; color:var(--ink-muted); text-align:center; }

.category-chips{ display:flex; gap:8px; overflow-x:auto; padding:2px 0 2px 0; margin-top:12px; }
.cat-chip{ flex:none; background:var(--paper); border:1px solid var(--border-strong); color:var(--ink-muted); font-family:var(--font-body); font-weight:600; font-size:11.5px; padding:8px 14px; border-radius:999px; cursor:pointer; box-shadow:var(--shadow-card); white-space:nowrap; }
.cat-chip.active{ background:var(--accent-strong); border-color:var(--accent-strong); color:#fff; }

.food-ticket{ margin-top:14px; background:var(--paper); border:1px solid var(--border); border-radius:var(--radius-md); padding:16px; box-shadow:var(--shadow-card); display:none; }
.food-ticket.show{ display:block; }
.ft-top{ display:flex; align-items:center; gap:12px; margin-bottom:14px; }
.ft-icon{ width:38px; height:38px; border-radius:12px; background:var(--accent-soft); color:var(--accent); display:flex; align-items:center; justify-content:center; flex:none; }
.ft-icon svg{ width:18px; height:18px; }
.ft-name{ font-family:var(--font-display); font-weight:700; font-size:15px; }
.ft-cat{ font-size:11px; color:var(--ink-muted); }
.ft-macros{ display:grid; grid-template-columns:repeat(4,1fr); gap:8px; }
.ft-macro{ background:var(--bg); border-radius:var(--radius-sm); padding:8px 4px; text-align:center; }
.ft-macro .fm-val{ font-family:var(--font-display); font-weight:700; font-size:13.5px; font-variant-numeric:tabular-nums; }
.ft-macro .fm-label{ font-size:9px; color:var(--ink-muted); text-transform:uppercase; letter-spacing:.03em; }

.qty-control{ display:flex; align-items:center; justify-content:center; gap:22px; margin:16px 0; }
.qty-btn{ width:40px; height:40px; border-radius:50%; background:var(--bg); border:1px solid var(--border-strong); color:var(--ink); cursor:pointer; display:flex; align-items:center; justify-content:center; }
.qty-btn svg{ width:16px; height:16px; }
.qty-btn:active{ background:var(--border); }
.qty-display{ font-family:var(--font-display); font-size:22px; font-weight:800; min-width:110px; text-align:center; font-variant-numeric:tabular-nums; }
.qty-sub{ display:block; font-size:10.5px; color:#9CA3AF; font-weight:600; margin-top:2px; text-transform:uppercase; letter-spacing:.05em; }
.quick-qty{ display:grid; grid-template-columns:repeat(4,1fr); gap:8px; }
.quick-btn{ background:var(--bg); border:1px solid var(--border-strong); color:var(--ink-muted); font-family:var(--font-display); font-weight:700; font-size:12px; padding:9px 4px; border-radius:var(--radius-sm); cursor:pointer; }
.quick-btn.active{ background:var(--accent-strong); color:#fff; border-color:transparent; }

.meal-type-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:6px; margin-bottom:6px; }
.meal-type-btn{ background:none; border:none; box-shadow:none; padding:0; cursor:pointer; display:flex; flex-direction:column; align-items:center; gap:8px; font-family:var(--font-display); }
.mtb-circle{ width:60px; height:60px; border-radius:50%; background:var(--paper); border:1px solid var(--border); display:flex; align-items:center; justify-content:center; color:var(--ink-muted); }
.mtb-circle svg{ width:22px; height:22px; }
.meal-type-btn.active .mtb-circle{ background:var(--accent); border-color:var(--accent); color:#fff; box-shadow:var(--shadow-accent); }
.mtb-label{ font-size:12px; font-weight:700; color:var(--ink-muted); text-align:center; line-height:1.25; }
.meal-type-btn.active .mtb-label{ color:var(--accent-strong); }

.items-list{ display:flex; flex-direction:column; gap:8px; margin-bottom:4px; }
.item-row{ display:flex; justify-content:space-between; align-items:center; gap:8px; background:var(--bg); border:1px solid var(--border); border-radius:var(--radius-md); padding:11px 13px; }
.item-row .ir-info{ min-width:0; flex:1; display:flex; align-items:center; gap:10px; }
.item-row .ir-dot{ width:6px; height:6px; border-radius:50%; background:var(--accent); flex:none; }
.item-row .ir-name{ font-size:13.5px; font-weight:600; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.item-row .ir-sub{ font-size:11px; color:var(--ink-muted); }
.item-row .ir-remove{ background:none; border:none; color:var(--danger); cursor:pointer; flex:none; display:flex; }
.item-row .ir-remove svg{ width:15px; height:15px; }
.queue-total{ display:flex; justify-content:space-between; align-items:center; padding:6px 4px 14px 4px; font-size:12.5px; color:var(--ink-muted); }
.queue-total b{ font-family:var(--font-display); color:var(--ink); font-size:14px; font-weight:800; }

/* ============================================================
   CARDÁPIO — chips compactos
   ============================================================ */
.menu-meal-card{ position:relative; }
.menu-meal-header{ display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; gap:4px; margin-bottom:16px; padding-bottom:16px; border-bottom:1px solid var(--border); }
.menu-meal-icon{ width:42px; height:42px; border-radius:14px; display:flex; align-items:center; justify-content:center; color:#fff; margin-bottom:6px; background:var(--accent); box-shadow:var(--shadow-accent); }
.menu-meal-icon svg{ width:19px; height:19px; }
.menu-meal-title{ font-family:var(--font-display); font-weight:800; font-size:16px; letter-spacing:-.01em; }
.menu-meal-sub{ font-size:11.5px; color:var(--ink-muted); }

.menu-view-toprow{ display:flex; align-items:center; gap:8px; }
.menu-view-header{ flex:1; min-width:0; display:flex; align-items:center; gap:12px; background:none; border:none; padding:0; cursor:pointer; text-align:left; }
.menu-edit-pencil{ flex:none; width:34px; height:34px; border-radius:50%; background:var(--bg); border:1px solid var(--border-strong); color:var(--ink-muted); cursor:pointer; display:flex; align-items:center; justify-content:center; }
.menu-edit-pencil svg{ width:14px; height:14px; }
.menu-edit-pencil:active{ background:var(--accent-soft); color:var(--accent); }
.menu-view-icon{ width:44px; height:44px; border-radius:14px; display:flex; align-items:center; justify-content:center; color:#fff; flex:none; background:var(--accent); box-shadow:var(--shadow-accent); }
.menu-view-icon svg{ width:20px; height:20px; }
.menu-view-info{ flex:1; min-width:0; display:flex; flex-direction:column; gap:2px; }
.menu-view-name{ font-family:var(--font-display); font-weight:800; font-size:15px; color:var(--ink); }
.menu-view-sub{ font-size:12px; color:var(--ink-muted); }
.menu-view-right{ display:flex; flex-direction:column; align-items:flex-end; gap:4px; flex:none; }
.menu-view-kcal{ font-family:var(--font-display); font-weight:800; font-size:14px; color:var(--accent); }
.menu-view-chevron{ width:15px; height:15px; color:#9CA3AF; transition:transform .2s ease; }
.menu-view-chevron.open{ transform:rotate(180deg); }
.menu-view-body{ display:none; margin-top:14px; padding-top:14px; border-top:1px solid var(--border); }
.menu-view-body.open{ display:block; }

.menu-food-chips{ display:flex; flex-direction:column; gap:10px; margin-bottom:14px; }
.mf-chip{ display:flex; align-items:center; gap:11px; background:var(--bg); border:1px solid var(--border); border-radius:999px; padding:10px 16px 10px 12px; cursor:pointer; width:100%; }
.mf-chip.view{ cursor:default; padding:10px 16px; }
.mf-chip-check{ width:18px; height:18px; border-radius:50%; border:1.5px solid #D1D5DB; flex:none; display:flex; align-items:center; justify-content:center; color:transparent; }
.mf-chip.checked{ background:var(--accent-soft); border-color:var(--accent); }
.mf-chip.checked .mf-chip-check{ background:var(--accent); border-color:transparent; color:#fff; }
.mf-chip-icon{ width:24px; height:24px; border-radius:50%; background:var(--paper); color:var(--accent); display:flex; align-items:center; justify-content:center; flex:none; }
.mf-chip-icon svg{ width:12px; height:12px; }
.mf-chip-text{ display:flex; flex-direction:column; min-width:0; flex:1; }
.mf-chip-name{ font-size:13.5px; font-weight:700; color:var(--ink); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:100%; }
.mf-chip-sub{ font-size:10.5px; color:var(--ink-muted); }
.mf-chip-kcal{ font-family:var(--font-display); font-weight:700; font-size:12px; color:var(--accent); flex:none; }
.mf-chip-remove{ flex:none; width:22px; height:22px; border-radius:50%; background:#FDECEC; border:none; color:var(--danger); cursor:pointer; display:flex; align-items:center; justify-content:center; padding:0; }
.mf-chip-remove svg{ width:14px; height:14px; }

.menu-add-food-btn{ width:100%; margin-top:4px; background:transparent; border:1px dashed var(--border-strong); color:var(--ink-muted); font-family:var(--font-display); font-weight:700; font-size:13px; padding:12px; border-radius:var(--radius-md); cursor:pointer; display:flex; align-items:center; justify-content:center; gap:8px; }
.menu-add-food-btn svg{ width:14px; height:14px; }
.menu-meal-footer{ display:flex; align-items:center; justify-content:space-between; gap:10px; margin-top:14px; padding-top:14px; border-top:1px solid var(--border); }
.menu-meal-footer .mf-total{ font-size:12px; color:var(--ink-muted); }
.menu-meal-footer .mf-total b{ font-family:var(--font-display); color:var(--ink); font-size:14px; font-weight:800; }
.menu-save-btn{ flex:none; display:flex; align-items:center; gap:6px; background:var(--accent-strong); color:#fff; border:none; font-family:var(--font-display); font-weight:700; font-size:12.5px; padding:10px 16px; border-radius:var(--radius-md); cursor:pointer; box-shadow:var(--shadow-accent); }
.menu-save-btn:disabled{ opacity:.45; cursor:not-allowed; }
.menu-save-btn svg{ width:13px; height:13px; }
.menu-empty-slots{ text-align:center; color:#9CA3AF; font-size:12.5px; padding:6px 0 12px 0; }

.modal-box-tall{ max-height:88vh; overflow-y:auto; -webkit-overflow-scrolling:touch; }
.sheet-drag-handle{ width:34px; height:4px; border-radius:99px; background:var(--border-strong); margin:0 auto 14px auto; }
.sheet-subtitle{ text-align:center; font-size:12px; color:var(--ink-muted); margin-top:-10px; margin-bottom:16px; }
.name-input{ width:100%; background:var(--bg); border:1px solid var(--border-strong); color:var(--ink); font-family:var(--font-body); font-size:14.5px; padding:12px 14px; border-radius:var(--radius-md); outline:none; }
.name-input:focus{ border-color:var(--accent); }

/* ============================================================
   TOAST
   ============================================================ */
.toast{ position:fixed; left:50%; bottom:104px; transform:translate(-50%, 20px); background:var(--leaf-900); color:#fff; padding:12px 18px; border-radius:var(--radius-md); font-size:13.5px; font-weight:600; opacity:0; pointer-events:none; transition:all .3s ease; z-index:200; max-width:calc(100% - 32px); width:max-content; text-align:center; box-shadow:var(--shadow-float); }
.toast.show{ opacity:1; transform:translate(-50%, 0); }

/* ============================================================
   CALENDÁRIO
   ============================================================ */
.cal-header{ display:flex; align-items:center; justify-content:space-between; margin-bottom:14px; }
.cal-nav-btn{ background:var(--bg); border:1px solid var(--border-strong); color:var(--ink); width:32px; height:32px; border-radius:var(--radius-sm); cursor:pointer; display:flex; align-items:center; justify-content:center; }
.cal-nav-btn svg{ width:15px; height:15px; }
.cal-month-label{ font-family:var(--font-display); font-weight:700; font-size:15px; text-transform:capitalize; }
.cal-clock{ display:flex; align-items:center; justify-content:center; gap:6px; font-size:11.5px; color:var(--ink-muted); text-align:center; margin-bottom:12px; font-variant-numeric:tabular-nums; }
.cal-clock svg{ width:12px; height:12px; }
.cal-weekdays{ display:grid; grid-template-columns:repeat(7,1fr); gap:4px; margin-bottom:6px; }
.cal-weekdays span{ text-align:center; font-size:10.5px; color:#9CA3AF; font-weight:700; }
.cal-grid{ display:grid; grid-template-columns:repeat(7,1fr); gap:4px; }
.cal-day{ aspect-ratio:1; display:flex; align-items:center; justify-content:center; border-radius:var(--radius-sm); font-size:13px; background:var(--bg); border:1px solid transparent; cursor:pointer; position:relative; font-family:var(--font-display); font-weight:600; font-variant-numeric:tabular-nums; }
.cal-day.empty{ background:transparent; cursor:default; }
.cal-day.today{ border-color:var(--accent); }
.mark-dieta_treino{ background:var(--leaf-600); color:#fff; font-weight:800; }
.mark-dieta{ background:var(--leaf-400); color:#fff; font-weight:800; }
.mark-treino{ background:var(--terracotta); color:#fff; font-weight:800; }
.cal-day-picked{ background:var(--accent-strong); color:#fff; font-weight:800; }
.cal-legend{ display:flex; flex-wrap:wrap; justify-content:center; gap:14px; margin-top:16px; }
.legend-item{ display:flex; align-items:center; gap:7px; font-size:11.5px; color:var(--ink-muted); }
.legend-dot{ width:9px; height:9px; border-radius:50%; flex:none; }
.cal-counters{ display:grid; grid-template-columns:1fr 1fr 1fr; gap:10px; }
.counter-card{ background:var(--paper); border:1px solid var(--border); border-radius:var(--radius-md); padding:12px; text-align:center; box-shadow:var(--shadow-card); }
.counter-card .cc-num{ font-family:var(--font-display); font-size:20px; font-weight:800; }
.counter-card .cc-label{ font-size:10px; color:var(--ink-muted); margin-top:3px; }

/* ============================================================
   MODAL
   ============================================================ */
.modal-overlay{ position:fixed; inset:0; background:rgba(17,24,39,.45); z-index:100; display:flex; align-items:flex-end; justify-content:center; }
.modal-overlay.hidden{ display:none; }
.modal-box{ background:var(--paper); border-radius:24px 24px 0 0; width:100%; max-width:640px; padding:22px 20px 28px 20px; }
.modal-box h3{ font-family:var(--font-display); font-weight:800; font-size:17px; margin:0 0 16px 0; text-align:center; }
.modal-options{ display:flex; flex-direction:column; gap:10px; }
.modal-opt-btn{ text-align:left; padding:14px 16px; border-radius:var(--radius-md); border:1px solid var(--border); background:var(--bg); color:var(--ink); font-family:var(--font-display); font-weight:700; font-size:14px; cursor:pointer; display:flex; align-items:center; gap:10px; }
.modal-opt-btn svg{ width:17px; height:17px; }
.modal-opt-btn.remove{ color:var(--danger); border-color:#F5C6C6; }
.modal-close{ margin-top:14px; width:100%; text-align:center; background:transparent; border:none; color:var(--ink-muted); font-size:13px; padding:8px; cursor:pointer; }
.modal-field{ margin-bottom:12px; }
.modal-field label{ display:block; font-size:11.5px; color:var(--ink-muted); font-weight:700; margin-bottom:6px; }

/* ============================================================
   HISTÓRICO
   ============================================================ */
.filter-segment{ display:grid; grid-template-columns:repeat(4,1fr); gap:6px; margin-bottom:16px; }
.seg-btn{ background:var(--paper); border:1px solid var(--border-strong); color:var(--ink-muted); font-family:var(--font-display); font-weight:700; font-size:12.5px; padding:9px 4px; border-radius:var(--radius-sm); cursor:pointer; box-shadow:var(--shadow-card); }
.seg-btn.active{ background:var(--accent-strong); color:#fff; border-color:transparent; }
.hist-day-card{ background:var(--paper); border:1px solid var(--border); border-radius:var(--radius-md); padding:12px 14px; margin-bottom:10px; box-shadow:var(--shadow-card); }
.hist-date-title{ font-family:var(--font-display); font-weight:800; font-size:14px; margin-bottom:8px; text-align:center; }
.hist-day-total{ font-size:11.5px; color:var(--ink-muted); margin-top:2px; text-align:center; }
.hist-meal-total{ font-size:11.5px; color:var(--ink-muted); text-align:right; padding:2px 4px 0 4px; }
.hist-meal-total b{ font-family:var(--font-display); color:var(--ink); font-weight:800; }
.hist-day-header{ width:100%; display:flex; align-items:center; gap:12px; background:none; border:none; padding:0; cursor:pointer; text-align:left; }
.hist-day-main{ flex:1; min-width:0; display:flex; flex-direction:column; gap:7px; }
.hist-day-titlerow{ display:flex; flex-direction:column; align-items:flex-start; gap:4px; }
.hist-day-title{ font-family:var(--font-display); font-weight:800; font-size:14.5px; color:var(--ink); }
.hist-status-pill{ font-size:10px; font-weight:800; letter-spacing:.03em; padding:3px 9px; border-radius:999px; }
.hist-status-pill.ok{ background:var(--leaf-50); color:var(--leaf-600); }
.hist-status-pill.warn{ background:#FEF3E2; color:var(--amber); }
.hist-status-pill.over{ background:#FDECEC; color:var(--coral); }
.hist-status-pill.incomplete{ background:#FEF3E2; color:var(--amber); display:inline-flex; align-items:center; gap:4px; }
.hist-status-pill.incomplete svg{ width:11px; height:11px; }
.incomplete-toggle-small{
  display:flex; align-items:center; justify-content:center; gap:6px; width:100%; margin-top:12px;
  background:var(--bg); border:1px solid var(--border-strong); border-radius:var(--radius-sm); padding:9px 12px;
  font-size:11.5px; font-weight:700; color:var(--ink-muted); cursor:pointer;
}
.incomplete-toggle-small svg{ width:13px; height:13px; }
.hist-day-metarow{ display:flex; align-items:center; gap:16px; }
.hist-meta-item{ display:flex; align-items:center; gap:6px; font-size:12.5px; font-weight:600; color:var(--ink-muted); }
.hist-meta-item svg{ width:14px; height:14px; color:#9CA3AF; }
.hist-day-chevron{ flex:none; width:16px; height:16px; color:#9CA3AF; transition:transform .2s ease; }
.hist-day-chevron.open{ transform:rotate(180deg); }
.hist-detail-label{ font-size:10.5px; font-weight:800; letter-spacing:.08em; text-transform:uppercase; color:#9CA3AF; margin-bottom:8px; }
.week-insights{ display:flex; flex-direction:column; gap:9px; margin-top:14px; }
.week-insight-line{ display:flex; align-items:flex-start; gap:8px; font-size:12.5px; color:var(--ink-muted); line-height:1.5; margin:0; }
.week-insight-line svg{ width:14px; height:14px; color:var(--accent); flex:none; margin-top:1px; }

.week-chart{ display:flex; justify-content:space-between; gap:6px; margin-top:16px; padding-top:14px; border-top:1px solid var(--border); }
.week-bar-col{ flex:1; display:flex; flex-direction:column; align-items:center; gap:6px; }
.week-bar-track{ width:100%; max-width:22px; height:56px; display:flex; align-items:flex-end; background:var(--bg); border-radius:6px; overflow:hidden; }
.week-bar-fill{ width:100%; border-radius:6px 6px 0 0; background:var(--accent); transition:height .5s ease; }
.week-bar-fill.over{ background:var(--coral); }
.week-bar-fill.empty{ background:var(--border-strong); }
.week-bar-fill.incomplete{ background:repeating-linear-gradient(135deg, var(--amber), var(--amber) 3px, #FEF3E2 3px, #FEF3E2 6px); }
.week-bar-label{ font-size:9.5px; font-weight:700; color:#9CA3AF; text-transform:uppercase; }
.week-bar-label.is-today{ color:var(--accent-strong); }
.hist-meal-summary{ width:100%; display:flex; align-items:center; justify-content:space-between; background:none; border:none; padding:10px 0; cursor:pointer; border-bottom:1px solid var(--border); }
.hist-meal-group:last-of-type .hist-meal-summary{ border-bottom:none; }
.hist-meal-summary-name{ font-size:13.5px; font-weight:600; color:var(--ink); }
.hist-meal-summary-right{ display:flex; align-items:center; gap:8px; }
.hist-meal-summary-kcal{ font-size:12.5px; color:#9CA3AF; }
.hist-meal-summary-chevron{ width:14px; height:14px; color:#9CA3AF; transition:transform .2s ease; }
.hist-meal-summary-chevron.open{ transform:rotate(180deg); }
.hist-meal-detail{ display:none; padding:2px 0 6px 0; }
.hist-meal-detail.open{ display:block; }
.hist-edit-day-btn{ width:100%; margin-top:12px; background:var(--accent-soft); color:var(--accent-strong); border:none; font-family:var(--font-display); font-weight:700; font-size:12.5px; padding:11px; border-radius:var(--radius-sm); cursor:pointer; text-transform:uppercase; letter-spacing:.04em; }
.hist-edit-day-btn:active{ opacity:.85; }
.hist-day-body{ display:none; margin-top:12px; padding-top:12px; border-top:1px dashed var(--border-strong); }
.hist-day-body.open{ display:block; }

/* ============================================================
   PESOS / PERFIL
   ============================================================ */
.form-grid{ display:grid; grid-template-columns:1fr 1fr; gap:10px; margin-bottom:14px; }
.form-field{ display:flex; flex-direction:column; gap:6px; }
.form-field label{ font-size:11px; color:var(--ink-muted); font-weight:700; text-align:center; }
.form-field input{ background:var(--bg); border:1px solid var(--border-strong); color:var(--ink); font-family:var(--font-display); font-size:15px; padding:11px 12px; border-radius:var(--radius-sm); outline:none; width:100%; text-align:center; font-variant-numeric:tabular-nums; }
.form-field input:focus{ border-color:var(--accent); }
.goal-summary{ display:grid; grid-template-columns:1fr 1fr; gap:10px; margin-bottom:14px; }
.goal-chip{ background:var(--bg); border:1px solid var(--border); border-radius:var(--radius-md); padding:12px; text-align:center; }
.goal-chip .gc-val{ font-family:var(--font-display); font-size:17px; font-weight:800; font-variant-numeric:tabular-nums; }
.goal-chip .gc-label{ font-size:10.5px; color:var(--ink-muted); margin-top:3px; }
.progress-capsule{ height:20px; border-radius:99px; background:var(--border); overflow:hidden; position:relative; }
.progress-capsule-fill{ height:100%; width:0%; border-radius:99px; background:var(--accent); display:flex; align-items:center; justify-content:flex-end; }
.progress-capsule-fill span{ font-family:var(--font-display); font-size:10px; color:#fff; font-weight:800; padding-right:8px; }
.ring-caption{ margin-top:12px; font-size:13px; color:var(--ink-muted); text-align:center; }
.weight-history-list{ display:flex; flex-direction:column; gap:7px; margin-top:12px; max-height:220px; overflow-y:auto; }
.wh-row{ display:flex; justify-content:space-between; background:var(--bg); border:1px solid var(--border); border-radius:var(--radius-sm); padding:9px 13px; font-size:13px; }
.wh-row .wh-val{ font-family:var(--font-display); font-weight:800; font-variant-numeric:tabular-nums; }
.wh-row-clickable{ cursor:pointer; }
.wh-row-clickable:active{ background:#FDECEC; }
.inline-row{ display:flex; gap:10px; align-items:flex-end; }
.inline-row .form-field{ flex:1; }

@media (prefers-reduced-motion: reduce){ *{ animation:none !important; transition:none !important; } }
button:focus-visible, input:focus-visible, textarea:focus-visible{ outline:2px solid var(--accent); outline-offset:2px; }