/* ============================================================
   PULSE — css/style.css
   Todo o visual do app, em seções com banners.
   ============================================================ */

/* ==========================================================
   TEMA E VARIÁVEIS DE COR
   ========================================================== */
:root{
  --purple-950:#0F0427;
  --purple-900:#1B0740;
  --purple-800:#280E5E;
  --purple-700:#3A1680;
  --purple-600:#4E1FA3;
  --purple-500:#6B2FC7;
  --purple-400:#8748D9;
  --purple-300:#B18CE8;
  --white:#FFFFFF;
  --glass: rgba(255,255,255,0.07);
  --glass-strong: rgba(255,255,255,0.14);
  --glass-border: rgba(255,255,255,0.16);
  --ink-soft: rgba(255,255,255,0.62);
  --ink-faint: rgba(255,255,255,0.40);
  --font: -apple-system, BlinkMacSystemFont, "SF Pro Display", "SF Pro Text", "Segoe UI", system-ui, sans-serif;
}

/* ==========================================================
   BASE: RESET, FUNDO E CONTAINER
   ========================================================== */
*{ box-sizing:border-box; -webkit-tap-highlight-color:transparent; }
html,body{ height:100%; }
body{
  margin:0;
  font-family:var(--font);
  color:var(--white);
  background:
    radial-gradient(circle at 10% -10%, rgba(107,47,199,0.28), transparent 45%),
    radial-gradient(circle at 100% 0%, rgba(58,22,128,0.55), transparent 55%),
    linear-gradient(165deg, var(--purple-950) 0%, var(--purple-900) 45%, var(--purple-800) 100%);
  min-height:100vh;
  overflow-x:hidden;
  position:relative;
}
.grain{ position:fixed; inset:0; pointer-events:none; opacity:0.05; mix-blend-mode:overlay; z-index:0; }
#app{ position:relative; z-index:1; max-width:480px; margin:0 auto; min-height:100vh; padding:0 18px 110px; }

/* ==========================================================
   CABEÇALHO, AVATAR E ENGRENAGEM
   ========================================================== */
header{ padding:26px 2px 14px; display:flex; align-items:center; justify-content:space-between; }
header .greet-label{ font-size:26px; font-weight:800; letter-spacing:-0.02em; color:var(--white); }
header .date{ font-size:13px; color:var(--ink-soft); margin-top:4px; }
.avatar{
  width:44px; height:44px; border-radius:50%; flex:none; overflow:hidden; cursor:pointer;
  background:var(--glass); border:1px solid var(--glass-border);
  display:flex; align-items:center; justify-content:center;
  font-weight:800; font-size:16px; color:var(--white);
}
.avatar img{ width:100%; height:100%; object-fit:cover; }
.avatar-edit{
  width:92px; height:92px; border-radius:50%; cursor:pointer; overflow:hidden; text-align:center; padding:6px;
  border:1.5px dashed var(--glass-border); background:var(--glass);
  display:flex; align-items:center; justify-content:center;
}
.avatar-edit span{ font-size:11px; color:var(--ink-soft); font-weight:600; }
.avatar-edit img{ width:100%; height:100%; object-fit:cover; }
.avatar-picker{ display:grid; grid-template-columns:repeat(4, 1fr); gap:10px; margin-bottom:16px; }
.avatar-option{ width:100%; aspect-ratio:1; border-radius:50%; border:2px solid transparent; cursor:pointer; overflow:hidden; background:var(--glass); transition:transform .12s ease, border-color .12s ease; }
.avatar-option img{ width:100%; height:100%; object-fit:cover; display:block; }
.avatar-option:active{ transform:scale(0.92); }
.avatar-option.selected{ border-color:#fff; background:var(--glass-strong); }
.toggle-row{ display:flex; align-items:center; gap:10px; font-size:14px; font-weight:600; margin-bottom:12px; cursor:pointer; }
.toggle-row input[type="checkbox"]{ width:19px; height:19px; accent-color: var(--purple-400); }
.gear-btn{
  width:40px;height:40px;border-radius:50%;
  background:var(--glass); border:1px solid var(--glass-border);
  display:flex;align-items:center;justify-content:center; cursor:pointer;
  transition:transform .15s ease, background .15s ease;
}
.gear-btn:active{ transform:scale(0.90) rotate(35deg); background:var(--glass-strong); }
.gear-btn svg{ width:19px; height:19px; }

/* ==========================================================
   CARTÕES E TÍTULOS DE SEÇÃO
   ========================================================== */
.card{
  background:var(--glass);
  backdrop-filter: blur(22px) saturate(180%);
  -webkit-backdrop-filter: blur(22px) saturate(180%);
  border:1px solid var(--glass-border);
  border-radius:22px;
  box-shadow:0 10px 30px rgba(5,0,20,0.35);
  padding:18px;
  margin-bottom:14px;
}
.section-title{ font-size:12px; font-weight:700; text-transform:uppercase; letter-spacing:0.08em; color:var(--ink-soft); margin:20px 2px 10px; }
.section-title:first-of-type{ margin-top:6px; }

/* ==========================================================
   ANÉIS DE PROGRESSO (TELA INÍCIO)
   ========================================================== */
.rings-card{ display:flex; align-items:center; gap:12px; padding-left:14px; padding-right:14px; }
.rings-wrap{ position:relative; width:148px; height:148px; flex:none; }
.rings-wrap svg{ width:100%; height:100%; transform:rotate(-90deg); }
.ring{ transition:stroke-dashoffset 1.1s cubic-bezier(.3,.8,.3,1), filter .5s ease; }
.ring.done{ filter:drop-shadow(0 0 5px currentColor); }
.rings-center{ position:absolute; inset:0; display:flex; align-items:center; justify-content:center; pointer-events:none; }
.rings-center b{ font-size:12px; font-weight:800; letter-spacing:-0.02em; }
.legend-row .sub.done{ color:#7FE0A8; font-weight:600; }
.legend-row.ok .dot{ box-shadow:0 0 0 3px rgba(127,224,168,.40); }
@media (prefers-reduced-motion: reduce){ .ring{ transition:none; } }
.ring-legend{ display:flex; flex-direction:column; gap:10px; flex:1; min-width:0; }
.legend-row{ display:flex; align-items:center; gap:7px; flex-wrap:wrap; row-gap:0; font-size:13px; }
.dot{ width:9px;height:9px;border-radius:50%; flex:none; }
.legend-row b{ font-size:14px; }
.legend-row span.sub{ color:var(--ink-soft); font-size:11.5px; margin-left:auto; white-space:nowrap; }

/* ==========================================================
   CARTÕES DE ESTATÍSTICA
   ========================================================== */
.stat-grid{ display:grid; grid-template-columns:1fr 1fr; gap:12px; }
.stat-card{ background:var(--glass); border:1px solid var(--glass-border); border-radius:18px; padding:14px; backdrop-filter: blur(16px); }
.stat-card .label{ font-size:11.5px; color:var(--ink-soft); font-weight:600; text-transform:uppercase; letter-spacing:.05em; }
.stat-card .value{ font-size:22px; font-weight:800; margin-top:4px; letter-spacing:-0.01em; }
.stat-card .value small{ font-size:12px; font-weight:600; color:var(--ink-soft); }
.stat-card.accent{ background:linear-gradient(135deg, rgba(135,72,217,0.35), rgba(78,31,163,0.35)); }

/* ==========================================================
   FORMULÁRIOS E BOTÕES
   ========================================================== */
.field-row{ display:flex; gap:10px; margin-bottom:10px; }
.field-row-time{ flex-direction:column; }
.field-row-time input[type="time"]{ width:100%; }
.field{ flex:1; display:flex; flex-direction:column; gap:5px; min-width:0; }
.field label{ font-size:11.5px; color:var(--ink-soft); font-weight:600; text-transform:uppercase; letter-spacing:.04em; }
input, select{
  background:rgba(255,255,255,0.07); border:1px solid var(--glass-border); color:var(--white);
  border-radius:12px; padding:11px 12px; font-size:15px; font-family:var(--font); font-weight:500;
  outline:none; width:100%;
}
input::placeholder{ color:var(--ink-faint); }
select{ appearance:none; }
select option{ color:#000; }
input:focus, select:focus{ border-color:var(--purple-300); background:rgba(255,255,255,0.11); }

.btn{
  width:100%; padding:13px; border:none; border-radius:14px; font-family:var(--font);
  font-size:15px; font-weight:700; letter-spacing:-0.01em; cursor:pointer;
  background:linear-gradient(135deg, var(--purple-500), var(--purple-700));
  color:var(--white); box-shadow:0 6px 18px rgba(58,22,128,0.55);
  transition:transform .12s ease;
}
.btn:active{ transform:scale(0.97); }
.btn.ghost{ background:var(--glass); box-shadow:none; border:1px solid var(--glass-border); }
.btn.small{ width:auto; padding:10px 16px; font-size:13.5px; }

/* ==========================================================
   TUTORIAL DE BOAS-VINDAS
   ========================================================== */
.tutorial-screen{ position:fixed; inset:0; z-index:250; background:linear-gradient(165deg, var(--purple-950) 0%, var(--purple-900) 45%, var(--purple-800) 100%); }
.tutorial-stage{ position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center; padding:36px 30px; text-align:center; }
.tutorial-icon-circle{ width:88px; height:88px; border-radius:50%; background:var(--glass); border:1px solid var(--glass-border); display:flex; align-items:center; justify-content:center; margin-bottom:28px; }
.tutorial-title{ font-size:20px; font-weight:800; color:var(--white); margin-bottom:10px; }
.tutorial-desc{ font-size:14px; line-height:1.6; color:var(--ink-soft); max-width:260px; }
.tutorial-dots{ display:flex; justify-content:center; gap:6px; margin-bottom:22px; }
.tutorial-dot{ height:6px; border-radius:3px; background:rgba(255,255,255,0.3); display:inline-block; transition:width .2s ease, background .2s ease; cursor:pointer; }
.tutorial-dot.active{ background:#fff; }

/* ==========================================================
   CHIPS, GRÁFICO E LISTAS DE REGISTROS
   ========================================================== */
.quick-row{ display:flex; gap:9px; margin-bottom:12px; }
.chip{
  flex:1; padding:12px 6px; text-align:center; border-radius:14px; font-weight:700; font-size:13.5px;
  background:linear-gradient(135deg, rgba(135,72,217,0.5), rgba(78,31,163,0.5));
  border:1px solid var(--glass-border); cursor:pointer;
  transition:transform .12s ease, background .12s ease;
}
.chip:active{ transform:scale(0.93); }
.chip.small{ padding:9px 4px; font-size:12px; }
.chip.active{ background:linear-gradient(135deg, var(--purple-400), var(--purple-600)); border-color:transparent; }
.evo-chart{ width:100%; height:130px; margin-top:4px; }

.log-item{ display:flex; align-items:center; gap:12px; padding:11px 4px; border-bottom:1px solid rgba(255,255,255,0.08); }
.log-item:last-child{ border-bottom:none; }
.log-icon{ width:34px;height:34px;border-radius:10px; background:rgba(255,255,255,0.09); display:flex;align-items:center;justify-content:center; flex:none; }
.log-icon svg{ width:17px; height:17px; }
.log-main{ flex:1; min-width:0; }
.log-main .t1{ font-size:14.5px; font-weight:700; }
.log-main .t2{ font-size:12px; color:var(--ink-soft); }
.log-del{ width:26px;height:26px;border-radius:50%; background:rgba(255,255,255,0.07); border:none; color:var(--ink-soft); font-size:14px; cursor:pointer; flex:none; }
.log-del:active{ background:rgba(255,255,255,0.18); }
.log-edit{ width:26px;height:26px;border-radius:50%; background:rgba(255,255,255,0.07); border:none; color:var(--ink-soft); cursor:pointer; flex:none; display:flex; align-items:center; justify-content:center; }
.log-edit svg{ width:13px; height:13px; }
.log-edit:active{ background:rgba(255,255,255,0.18); }
.empty{ text-align:center; padding:22px 8px; color:var(--ink-faint); font-size:13.5px; }

/* ==========================================================
   ESTADOS VAZIOS (ÍCONE, TEXTO E BOTÃO DE AÇÃO)
   ========================================================== */
.empty-state{ text-align:center; padding:20px 10px 16px; }
.empty-icon{ --c:#B18CE8; width:62px; height:62px; border-radius:50%; margin:0 auto 12px; display:flex; align-items:center; justify-content:center;
  background:radial-gradient(circle at 50% 40%, color-mix(in srgb, var(--c) 30%, transparent), color-mix(in srgb, var(--c) 8%, transparent));
  border:1px solid color-mix(in srgb, var(--c) 35%, transparent); box-shadow:0 0 26px color-mix(in srgb, var(--c) 28%, transparent);
  animation:emptyFloat 3.4s ease-in-out infinite; }
.empty-icon svg{ width:28px; height:28px; }
.empty-title{ font-size:15.5px; font-weight:800; letter-spacing:-0.01em; margin-bottom:4px; }
.empty-sub{ font-size:13px; color:var(--ink-soft); line-height:1.45; max-width:270px; margin:0 auto 14px; }
.empty-state .btn.small{ display:inline-flex; align-items:center; gap:6px; }
.empty-quick{ display:grid; grid-template-columns:repeat(3, 1fr); gap:8px; }
.empty-quick button{ background:var(--glass); border:1px solid var(--glass-border); border-radius:14px; padding:12px 4px 10px; color:var(--white);
  font:inherit; font-size:12.5px; font-weight:700; display:flex; flex-direction:column; align-items:center; gap:7px; cursor:pointer; transition:transform .12s ease, background .12s ease; }
.empty-quick button:active{ transform:scale(0.94); background:var(--glass-strong); }
@keyframes emptyFloat{ 0%,100%{ transform:translateY(0); } 50%{ transform:translateY(-4px); } }
@media (prefers-reduced-motion: reduce){ .empty-icon{ animation:none; } }

/* ==========================================================
   REFEIÇÕES AGRUPADAS POR TIPO (COR E ÍCONE POR TIPO)
   ========================================================== */
.meal-group{ padding:10px 12px 4px; border-radius:16px; border:1px solid rgba(255,255,255,0.06);
  background:linear-gradient(100deg, color-mix(in srgb, var(--c) 13%, transparent), transparent 75%); }
.meal-group + .meal-group{ margin-top:10px; }
.meal-group-head{ display:flex; align-items:center; gap:8px; font-size:11.5px; font-weight:800; text-transform:uppercase; letter-spacing:.06em; color:var(--c); padding:0 2px 2px; }
.meal-group-head::before{ content:''; width:8px; height:8px; border-radius:50%; background:var(--c); box-shadow:0 0 8px var(--c); }
.meal-group-head span{ margin-left:auto; color:var(--ink-soft); font-weight:700; letter-spacing:0; text-transform:none; font-size:12px; }
.meal-group .log-item{ padding-left:0; padding-right:0; }

/* ==========================================================
   NAVEGAÇÃO INFERIOR E TROCA DE TELAS
   ========================================================== */
nav{ position:fixed; left:0; right:0; bottom:0; z-index:5; display:flex; justify-content:center; }
.nav-inner{
  width:calc(100% - 32px); max-width:448px; margin-bottom:14px;
  background:rgba(15,4,41,0.65);
  backdrop-filter: blur(26px) saturate(180%);
  -webkit-backdrop-filter: blur(26px) saturate(180%);
  border:1px solid var(--glass-border);
  border-radius:24px; display:flex; padding:8px;
  box-shadow:0 12px 30px rgba(0,0,0,0.45);
}
.nav-btn{ flex:1; display:flex; flex-direction:column; align-items:center; gap:3px; padding:8px 2px; border-radius:16px; cursor:pointer; color:var(--ink-soft); transition:background .15s ease, color .15s ease; }
.nav-btn svg{ width:21px; height:21px; }
.nav-btn span{ font-size:10.5px; font-weight:700; letter-spacing:0.01em; }
.nav-btn.active{ color:var(--white); background:var(--glass-strong); }

.view{ display:none; animation:fadein .28s ease; }
.view.active{ display:block; }
@keyframes fadein{ from{ opacity:0; transform:translateY(6px);} to{opacity:1; transform:translateY(0);} }
@media (prefers-reduced-motion: reduce){ .view{ animation:none; } .btn, .chip, .gear-btn, .nav-btn{ transition:none; } }

/* ==========================================================
   MODAIS
   ========================================================== */
.modal-backdrop{ position:fixed; inset:0; background:rgba(5,0,15,0.6); backdrop-filter:blur(4px); display:none; align-items:flex-end; justify-content:center; z-index:20; }
.modal-backdrop.open{ display:flex; }
.modal{ width:100%; max-width:480px; max-height:88vh; overflow-y:auto; background:linear-gradient(180deg, var(--purple-800), var(--purple-950)); border-radius:26px 26px 0 0; padding:22px 20px 28px; border:1px solid var(--glass-border); border-bottom:none; animation:slideup .25s ease; }
@keyframes slideup{ from{ transform:translateY(100%);} to{ transform:translateY(0);} }

/* ==========================================================
   BOTÃO REDONDO DO GOOGLE
   ========================================================== */
.google-wrap{ display:flex; justify-content:center; margin:2px 0 16px; }
.google-round{ width:56px; height:56px; border-radius:50%; border:1px solid rgba(255,255,255,.35); background:#fff; display:flex; align-items:center; justify-content:center; padding:0; cursor:pointer; box-shadow:0 4px 14px rgba(0,0,0,.28); transition:transform .15s ease, box-shadow .15s ease; -webkit-tap-highlight-color:transparent; }
.google-round:hover{ transform:translateY(-1px); box-shadow:0 6px 18px rgba(0,0,0,.34); }
.google-round:active{ transform:scale(.93); box-shadow:0 2px 8px rgba(0,0,0,.3); }
.google-round:focus-visible{ outline:3px solid rgba(255,255,255,.6); outline-offset:3px; }
.google-round:disabled{ opacity:.6; cursor:default; }

/* ==========================================================
   COMPARTILHAR PROGRESSO
   ========================================================== */
.head-flex{ display:flex; align-items:center; justify-content:space-between; }
.share-mini{ display:inline-flex; align-items:center; gap:6px; }
.share-mini svg{ width:14px; height:14px; }
.seg{ display:grid; grid-template-columns:1fr 1fr; gap:6px; background:var(--glass); border:1px solid var(--glass-border); border-radius:14px; padding:4px; margin-bottom:14px; }
.seg button{ border:none; background:none; color:var(--ink-soft); font-family:var(--font); font-size:13.5px; font-weight:700; padding:9px 0; border-radius:10px; cursor:pointer; }
.seg button.on{ background:linear-gradient(135deg, var(--purple-500), var(--purple-700)); color:#fff; }
.share-preview{ display:flex; justify-content:center; margin-bottom:14px; }
.share-preview canvas{ max-width:100%; max-height:50vh; width:auto; height:auto; border-radius:16px; box-shadow:0 14px 34px rgba(0,0,0,0.45); }

/* ==========================================================
   ROTINAS DE TREINO
   ========================================================== */
.routines-head{ display:flex; align-items:center; justify-content:space-between; }
.mini-btn{ background:var(--glass); border:1px solid var(--glass-border); color:var(--white); font-family:var(--font); font-size:12.5px; font-weight:700; padding:7px 13px; border-radius:999px; cursor:pointer; }
.mini-btn:active{ transform:scale(0.95); background:var(--glass-strong); }
.routine-card{ background:var(--glass); border:1px solid var(--glass-border); border-radius:18px; padding:14px; margin-bottom:10px; }
.routine-card.today{ border-color:var(--purple-300); box-shadow:0 0 0 1px rgba(177,140,232,0.35) inset; }
.routine-top{ display:flex; align-items:center; gap:12px; }
.routine-main{ flex:1; min-width:0; }
.routine-name{ font-size:15.5px; font-weight:800; display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
.routine-sub{ font-size:12px; color:var(--ink-soft); margin-top:2px; }
.routine-badge{ font-size:10px; font-weight:800; text-transform:uppercase; letter-spacing:0.06em; padding:3px 8px; border-radius:999px; background:rgba(177,140,232,0.25); color:#E3D4FF; }
.routine-badge.done{ background:rgba(140,233,154,0.2); color:#B9F5C2; }
.routine-days{ display:grid; grid-template-columns:repeat(7,1fr); gap:5px; margin-top:10px; }
.routine-day{ text-align:center; font-size:10.5px; font-weight:700; padding:5px 0; border-radius:8px; background:rgba(255,255,255,0.05); color:var(--ink-faint); }
.routine-day.on{ background:rgba(177,140,232,0.28); color:#fff; }
.routine-day.now{ outline:1.5px solid rgba(255,255,255,0.55); }
.routine-card .btn{ margin-top:12px; }
.routine-card .btn[disabled]{ opacity:0.65; cursor:default; }
.template-row{ display:flex; gap:8px; flex-wrap:wrap; justify-content:center; }
.day-picker{ display:grid; grid-template-columns:repeat(7,1fr); gap:6px; margin-bottom:12px; }
.day-pick{ text-align:center; padding:9px 0; border-radius:10px; background:var(--glass); border:1px solid var(--glass-border); font-size:12px; font-weight:700; color:var(--ink-soft); cursor:pointer; user-select:none; }
.day-pick.on{ background:linear-gradient(135deg, var(--purple-500), var(--purple-700)); color:#fff; border-color:transparent; }
.routine-preview{ text-align:center; font-size:13px; color:var(--ink-soft); margin:0 0 12px; min-height:18px; }
.link-btn{ text-align:center; font-size:13px; color:var(--ink-soft); text-decoration:underline; cursor:pointer; margin-top:10px; padding:6px; }
.modal h2{ margin:2px 0 16px; font-size:19px; font-weight:800; }
.modal-close{ text-align:center; margin-top:6px; color:var(--ink-soft); font-size:13.5px; padding:10px; cursor:pointer; }

/* ==========================================================
   BARRAS DE PROGRESSO
   ========================================================== */
.progress-track{ height:8px; border-radius:6px; background:rgba(255,255,255,0.09); overflow:hidden; margin-top:8px; }
.progress-fill{ height:100%; border-radius:6px; background:linear-gradient(90deg, var(--purple-400), var(--purple-300)); transition:width .4s ease; }

/* ==========================================================
   DIETA: MONTAGEM DE REFEIÇÃO E BUSCA DE ALIMENTOS
   ========================================================== */
.draft-list{ margin-top:4px; }
.draft-item{ display:flex; align-items:center; gap:10px; padding:9px 0; border-bottom:1px solid rgba(255,255,255,0.08); font-size:13.5px; }
.draft-item:last-child{ border-bottom:none; }
.draft-item .di-main{ flex:1; }
.draft-item .di-sub{ color:var(--ink-soft); font-size:12px; }
.draft-total{ display:flex; justify-content:space-between; align-items:center; margin:12px 0; padding:12px 14px; background:rgba(255,255,255,0.06); border-radius:14px; }
.draft-total b{ font-size:17px; }
.hint{ font-size:12px; color:var(--ink-faint); margin:-4px 0 10px; }
.field-head{ display:flex; align-items:center; justify-content:space-between; }
.search-btn{ background:var(--glass); border:1px solid var(--glass-border); color:var(--white); width:30px; height:30px; border-radius:50%; display:flex; align-items:center; justify-content:center; cursor:pointer; padding:0; transition:transform .12s ease, background .12s ease, border-color .12s ease; }
.search-btn svg{ width:16px; height:16px; }
.search-btn:active{ transform:scale(0.9); }
.search-btn.active{ background:var(--glass-strong); border-color:var(--purple-300); }
.food-search-row{ display:flex; gap:8px; align-items:center; }
.food-search-row input{ flex:1; min-width:0; }
.search-close{ background:none; border:none; color:var(--ink-soft); font-size:15px; cursor:pointer; padding:6px 8px; flex:none; }
.food-search-hint{ font-size:12px; color:var(--ink-faint); }

/* ==========================================================
   GARRAFA DE ÁGUA
   ========================================================== */
.bottle-wrap{ display:flex; justify-content:center; padding:6px 0 4px; }
#bottleSvg{ overflow:visible; transition:filter .6s ease; }
#bottleSvg.full{ filter:drop-shadow(0 0 12px rgba(127,224,232,.6)); }
#waterLevel{ transition:transform .9s cubic-bezier(.3,.8,.3,1), opacity .4s ease; }
.wave{ animation:waveMove 2.4s linear infinite; }
.wave-back{ animation-duration:3.6s; animation-direction:reverse; }
@keyframes waveMove{ from{ transform:translateX(0);} to{ transform:translateX(-38px);} }
.bubble{ fill:rgba(255,255,255,.55); opacity:0; animation:bubbleUp 3.6s ease-in infinite; }
@keyframes bubbleUp{ 0%{ transform:translateY(0); opacity:0;} 15%{ opacity:.8;} 85%{ opacity:.6;} 100%{ transform:translateY(calc(var(--r) * -1)); opacity:0;} }
@media (prefers-reduced-motion: reduce){ .wave, .bubble{ animation:none; } }

/* ==========================================================
   AVISO (TOAST)
   ========================================================== */
.toast{
  position:fixed; top:16px; left:50%; z-index:50;
  transform:translateX(-50%) translateY(-16px);
  background:rgba(20,6,45,0.94); border:1px solid var(--glass-border);
  backdrop-filter: blur(20px);
  padding:11px 20px; border-radius:14px; font-size:13.5px; font-weight:600;
  box-shadow:0 12px 26px rgba(0,0,0,0.4);
  opacity:0; pointer-events:none; transition:opacity .25s ease, transform .25s ease;
  max-width:88%; text-align:center;
}
.toast.show{ opacity:1; transform:translateX(-50%) translateY(0); }

/* ==========================================================
   COMEMORAÇÃO DE META BATIDA (CONFETE + CARTÃO)
   ========================================================== */
#confettiCanvas{ position:fixed; inset:0; width:100%; height:100%; pointer-events:none; z-index:300; }
.celebrate{
  position:fixed; left:50%; top:18%; z-index:301; width:calc(100% - 48px); max-width:340px;
  transform:translate(-50%, -12px) scale(.92); opacity:0; pointer-events:none;
  display:flex; align-items:center; gap:14px; padding:16px 18px; border-radius:22px;
  background:rgba(20,6,45,0.94); border:1px solid var(--glass-border);
  backdrop-filter:blur(20px); -webkit-backdrop-filter:blur(20px);
  box-shadow:0 18px 40px rgba(0,0,0,.5), 0 0 0 1px rgba(255,255,255,.04) inset;
  transition:opacity .3s ease, transform .45s cubic-bezier(.2,1.4,.4,1);
}
.celebrate.show{ opacity:1; transform:translate(-50%, 0) scale(1); pointer-events:auto; }
.celebrate-icon{ width:48px; height:48px; border-radius:50%; flex:none; display:flex; align-items:center; justify-content:center; box-shadow:0 0 18px var(--c); background:var(--c); }
.celebrate-icon svg{ width:24px; height:24px; color:#1B0740; }
.celebrate.perfect .celebrate-icon{ background:conic-gradient(#F45B9C, #FFB84D, #5BD8F4, #C6A8F5, #F45B9C); box-shadow:0 0 22px rgba(255,255,255,.35); }
.celebrate-text{ display:flex; flex-direction:column; gap:3px; min-width:0; text-align:left; }
.celebrate-text b{ font-size:15.5px; font-weight:800; letter-spacing:-0.01em; }
.celebrate-text span{ font-size:12.5px; color:var(--ink-soft); }
@media (prefers-reduced-motion: reduce){ .celebrate{ transition:opacity .2s ease; } }

/* ==========================================================
   BANNERS: INSTALAR O APP E MODO OFFLINE
   ========================================================== */
.install-banner{
  position:relative; z-index:2; width:calc(100% - 36px); max-width:444px; margin:14px auto 0; padding:12px 14px;
  display:flex; align-items:center; gap:12px;
  background:var(--glass); border:1px solid var(--glass-border); border-radius:18px;
  backdrop-filter: blur(18px);
}
.install-text{ flex:1; display:flex; flex-direction:column; gap:2px; font-size:12.5px; color:var(--ink-soft); }
.install-text b{ font-size:13.5px; color:var(--white); }
.install-dismiss{ background:none; border:none; color:var(--ink-faint); font-size:14px; cursor:pointer; flex:none; padding:4px; }
.offline-banner{
  position:relative; z-index:2; width:calc(100% - 36px); max-width:444px; margin:14px auto 0; padding:12px 14px;
  display:flex; align-items:center; gap:12px;
  background:var(--glass); border:1px solid rgba(255,184,77,0.4); border-radius:18px;
  backdrop-filter: blur(18px);
}
.offline-dot{ width:9px; height:9px; border-radius:50%; background:#FFB84D; flex:none; animation: offlinePulse 1.6s infinite; }
@keyframes offlinePulse{ 0%,100%{opacity:1;} 50%{opacity:0.3;} }
.offline-text{ display:flex; flex-direction:column; gap:2px; font-size:12.5px; color:var(--ink-soft); }
.offline-text b{ font-size:13.5px; color:var(--white); }

/* ==========================================================
   MACROS DA DIETA
   ========================================================== */
.macro-row{ display:flex; gap:10px; margin-top:12px; }
.macro-chip{ flex:1; background:rgba(255,255,255,0.06); border:1px solid var(--glass-border); border-radius:14px; padding:10px; text-align:center; }
.macro-chip .label{ font-size:10.5px; color:var(--ink-soft); text-transform:uppercase; font-weight:700; letter-spacing:.04em; }
.macro-list{ display:flex; flex-direction:column; gap:12px; margin-top:16px; }
.macro-top{ display:flex; align-items:baseline; justify-content:space-between; gap:8px; margin-bottom:6px; }
.macro-top b{ display:flex; align-items:center; gap:7px; font-size:13px; font-weight:700; }
.macro-top b::before{ content:''; width:8px; height:8px; border-radius:50%; background:var(--c); box-shadow:0 0 8px var(--c); }
.macro-top > span{ font-size:12.5px; color:var(--ink-soft); white-space:nowrap; }
.macro-top strong{ color:var(--white); font-size:14px; font-weight:800; }
.macro-track{ height:8px; border-radius:6px; background:rgba(255,255,255,0.08); overflow:hidden; }
.macro-fill{ height:100%; width:0%; border-radius:6px; background:linear-gradient(90deg, color-mix(in srgb, var(--c) 75%, #fff), var(--c)); box-shadow:0 0 10px color-mix(in srgb, var(--c) 55%, transparent); transition:width .9s cubic-bezier(.3,.8,.3,1); }
.macro-item.over .macro-top > span{ color:#FFB84D; }
.macro-note{ font-size:11px; color:var(--ink-faint); line-height:1.4; }
@media (prefers-reduced-motion: reduce){ .macro-fill{ transition:none; } }

/* ==========================================================
   TELA DE LOGIN E CADASTRO
   ========================================================== */
.auth-screen{
  position:fixed; inset:0; z-index:200; display:flex; align-items:center; justify-content:center; padding:24px;
  background: radial-gradient(circle at 10% -10%, rgba(107,47,199,0.28), transparent 45%),
    radial-gradient(circle at 100% 0%, rgba(58,22,128,0.55), transparent 55%),
    linear-gradient(165deg, var(--purple-950) 0%, var(--purple-900) 45%, var(--purple-800) 100%);
}
.auth-card{ width:100%; max-width:360px; background:var(--glass); border:1px solid var(--glass-border); border-radius:26px; padding:30px 22px; backdrop-filter: blur(20px); text-align:center; }
.auth-title{ font-size:26px; font-weight:800; margin:0 0 4px; letter-spacing:-0.02em; }
.auth-sub{ font-size:13px; color:var(--ink-soft); margin:0 0 18px; }
.auth-error{ background:rgba(244,91,110,0.18); border:1px solid rgba(244,91,110,0.4); color:#FFB4BE; font-size:12.5px; padding:9px 12px; border-radius:12px; margin-bottom:12px; }
.auth-switch{ margin-top:12px; font-size:12.5px; color:var(--ink-soft); }
.auth-divider{ display:flex; align-items:center; gap:10px; color:var(--ink-faint); font-size:12px; margin:4px 0 14px; }
.auth-divider::before, .auth-divider::after{ content:''; flex:1; height:1px; background:var(--glass-border); }
.auth-switch span{ color:var(--white); font-weight:700; cursor:pointer; text-decoration:underline; }
.auth-card .field-row{ text-align:left; }

/* ==========================================================
   ESTADO INICIAL: APP OCULTO ATÉ O LOGIN
   ========================================================== */
#app{ display:none; }
nav{ display:none; }

/* ==========================================================
   MEDALHAS (PERFIL)
   ========================================================== */
.medals-title{ font-size:12px; font-weight:700; text-transform:uppercase; letter-spacing:.06em; color:var(--ink-soft); margin:6px 2px 10px; }
.medals-row{ display:grid; grid-template-columns:repeat(3,1fr); gap:10px; margin-bottom:14px; }
.medal-box{ background:var(--glass); border:1px solid var(--glass-border); border-radius:16px; padding:12px 6px 10px; text-align:center; }
.medal-box svg{ width:34px; height:34px; display:block; margin:0 auto 4px; }
.medal-box.empty svg{ opacity:0.35; filter:grayscale(1); }
.medal-box b{ display:block; font-size:20px; font-weight:800; line-height:1.1; }
.medal-box span{ font-size:11px; color:var(--ink-soft); font-weight:600; text-transform:uppercase; letter-spacing:.05em; }
.medal-week{ display:grid; grid-template-columns:repeat(7,1fr); gap:5px; margin-bottom:10px; }
.medal-day{ text-align:center; border-radius:10px; padding:6px 0; background:var(--glass); border:1px solid var(--glass-border); }
.medal-day span{ display:block; font-size:10.5px; font-weight:700; color:var(--ink-soft); }
.medal-day i{ display:block; font-style:normal; height:16px; line-height:16px; font-size:13px; font-weight:800; }
.medal-day.ok{ background:rgba(205,127,50,.30); border-color:rgba(205,127,50,.7); }
.medal-day.fail{ background:rgba(244,91,91,.20); border-color:rgba(244,91,91,.5); }
.medal-day.today{ outline:2px solid rgba(255,255,255,.55); }
.medal-line{ display:flex; justify-content:space-between; font-size:13px; margin:6px 2px; }
.medal-line span{ color:var(--ink-soft); font-weight:600; }