/* =========================================================
   LUMI — jardim noturno
   ========================================================= */

:root{
  --tinta:#0A120F;
  --tinta-2:#0E1A15;
  --carta:#14231C;
  --carta-alta:#1B2E25;
  --borda:rgba(243,235,221,.09);
  --borda-forte:rgba(243,235,221,.18);

  --creme:#F3EBDD;
  --creme-2:rgba(243,235,221,.66);
  --creme-3:rgba(243,235,221,.40);

  --lima:#C7F24E;
  --lima-escura:#8FBF2F;
  --agua:#5CCBE8;
  --ambar:#FFC35C;
  --coral:#FF7A59;
  --lilas:#B79BFF;
  --rosa:#FF9BC2;

  --r-g:26px;
  --r-m:18px;
  --r-p:12px;

  --sombra:0 18px 40px -18px rgba(0,0,0,.8);
  --fonte-display:"Fraunces",Georgia,serif;
  --fonte:"Outfit",system-ui,sans-serif;
  --fonte-mono:"DM Mono",ui-monospace,monospace;

  --seguro-b:env(safe-area-inset-bottom,0px);
}

*{box-sizing:border-box;margin:0;padding:0;-webkit-tap-highlight-color:transparent}

/* regras de display abaixo (.campo, .onb, .carta-mini...) venceriam o [hidden]
   da folha do navegador — sem isto, elementos escondidos continuam aparecendo */
[hidden]{display:none!important}

html{-webkit-text-size-adjust:100%}

body{
  font-family:var(--fonte);
  background:var(--tinta);
  color:var(--creme);
  min-height:100svh;
  overflow-x:hidden;
  line-height:1.5;
  font-weight:400;
  letter-spacing:-.005em;
}

/* --------- atmosfera --------- */
.aurora{
  position:fixed;inset:0;z-index:0;pointer-events:none;
  background:
    radial-gradient(70% 45% at 18% -5%, rgba(199,242,78,.16), transparent 62%),
    radial-gradient(55% 40% at 92% 12%, rgba(92,203,232,.12), transparent 60%),
    radial-gradient(70% 50% at 50% 108%, rgba(255,122,89,.10), transparent 60%);
  animation:respira 16s ease-in-out infinite;
}
@keyframes respira{0%,100%{opacity:.85;transform:scale(1)}50%{opacity:1;transform:scale(1.06)}}

/* grão estático: uma camada fixa animada com blend-mode repinta a tela inteira
   sem parar — gasta bateria e causa falha de repaint ao rolar */
.grao{
  position:fixed;inset:0;z-index:1;pointer-events:none;opacity:.055;mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* --------- tipografia --------- */
.titulo-display{
  font-family:var(--fonte-display);
  font-size:clamp(2rem,9vw,2.7rem);
  font-weight:600;
  line-height:1.05;
  letter-spacing:-.03em;
  font-variation-settings:"SOFT" 60,"WONK" 1,"opsz" 40;
  margin-bottom:.6rem;
}
.titulo-display em{font-style:italic;color:var(--lima);font-variation-settings:"SOFT" 100,"WONK" 1}

.titulo-tela{
  font-family:var(--fonte-display);
  font-size:1.9rem;font-weight:600;letter-spacing:-.03em;line-height:1.1;
  font-variation-settings:"SOFT" 60,"WONK" 1,"opsz" 30;
}

.sobrescrito{
  font-family:var(--fonte-mono);
  font-size:.68rem;text-transform:uppercase;letter-spacing:.16em;
  color:var(--creme-3);margin-bottom:.25rem;
}

.lead{color:var(--creme-2);font-size:1.02rem;margin-bottom:1.4rem;max-width:34ch}

.secao{
  font-family:var(--fonte-display);
  font-size:1.05rem;font-weight:600;letter-spacing:-.01em;
  margin:2rem 0 .75rem;display:flex;align-items:baseline;gap:.55rem;
  font-variation-settings:"SOFT" 40,"opsz" 20;
}
.secao-contagem{font-family:var(--fonte-mono);font-size:.7rem;color:var(--creme-3);letter-spacing:.06em}

/* =========================================================
   ONBOARDING
   ========================================================= */
.onb{
  position:relative;z-index:2;
  max-width:460px;margin:0 auto;
  padding:clamp(1.2rem,5vw,2rem) clamp(1.1rem,5vw,1.6rem) 3rem;
  min-height:100svh;display:flex;flex-direction:column;justify-content:center;
}
.onb-trilho{position:fixed;top:0;left:0;right:0;height:3px;background:rgba(243,235,221,.07);z-index:5}
.onb-progresso{height:100%;width:20%;background:linear-gradient(90deg,var(--lima-escura),var(--lima));transition:width .5s cubic-bezier(.34,1.3,.5,1);box-shadow:0 0 14px rgba(199,242,78,.6)}

.passo{animation:entra .55s cubic-bezier(.22,1,.36,1) both}
.passo>*{animation:sobe .6s cubic-bezier(.22,1,.36,1) both}
.passo>*:nth-child(1){animation-delay:.02s}
.passo>*:nth-child(2){animation-delay:.07s}
.passo>*:nth-child(3){animation-delay:.12s}
.passo>*:nth-child(4){animation-delay:.17s}
.passo>*:nth-child(5){animation-delay:.22s}
.passo>*:nth-child(6){animation-delay:.27s}
.passo>*:nth-child(7){animation-delay:.32s}
.passo>*:nth-child(8){animation-delay:.37s}
.passo>*:nth-child(9){animation-delay:.42s}
@keyframes entra{from{opacity:0}to{opacity:1}}
@keyframes sobe{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}

/* =========================================================
   BICHINHO
   ========================================================= */
.palco{display:flex;justify-content:center;align-items:center;padding:.5rem 0 1rem;position:relative}
.palco-onb{margin-bottom:.5rem}
.palco-mini{padding:0;flex:0 0 84px}
.palco-mini .lumi{width:84px}
/* faíscas e zzz saem do viewBox e cairiam por cima do texto ao lado */
.palco-mini .faisca,.palco-mini .zzz{display:none}

.lumi{width:min(200px,50vw);height:auto;overflow:visible;animation:flutua 4.5s ease-in-out infinite;transform-origin:50% 92%}
.palco-mini .lumi{animation-duration:5.5s}
@keyframes flutua{0%,100%{transform:translateY(0) rotate(-1deg)}50%{transform:translateY(-9px) rotate(1.5deg)}}

.lumi .halo{animation:pulsa-halo 5s ease-in-out infinite}
@keyframes pulsa-halo{0%,100%{opacity:.7;transform:scale(1)}50%{opacity:1;transform:scale(1.1)}transform-origin:center}

.lumi .corpo{transform-origin:100px 195px;animation:pulsa-corpo 4.5s ease-in-out infinite}
@keyframes pulsa-corpo{0%,100%{transform:scale(1,1)}50%{transform:scale(1.035,.97)}}

.lumi .olho{animation:pisca 5.2s infinite}
.lumi .olho-d{animation-delay:.04s}
@keyframes pisca{0%,93%,100%{transform:scaleY(1)}95.5%{transform:scaleY(.08)}}
.lumi .olho{transform-origin:center 126px;transform-box:fill-box}

.lumi .broto{transform-origin:100px 58px;animation:balanca 5.5s ease-in-out infinite}
@keyframes balanca{0%,100%{transform:rotate(-5deg)}50%{transform:rotate(6deg)}}

.lumi .zzz,.lumi .olho-dorme{opacity:0}
.lumi .z{fill:var(--creme-2);font-family:var(--fonte-display);font-size:19px;font-style:italic}
.lumi .f{fill:var(--lima);opacity:0}

/* humores */
.lumi[data-humor="dormindo"] .olhos .olho{opacity:0}
.lumi[data-humor="dormindo"] .olho-dorme{opacity:1}
.lumi[data-humor="dormindo"] .zzz{opacity:1}
.lumi[data-humor="dormindo"] .z1{animation:sobe-z 3s ease-out infinite}
.lumi[data-humor="dormindo"] .z2{animation:sobe-z 3s ease-out .5s infinite}
.lumi[data-humor="dormindo"] .z3{animation:sobe-z 3s ease-out 1s infinite}
@keyframes sobe-z{0%{opacity:0;transform:translateY(6px) scale(.7)}30%{opacity:.9}100%{opacity:0;transform:translateY(-14px) scale(1.15)}}

.lumi[data-humor="festa"]{animation:pula .55s cubic-bezier(.3,1.6,.5,1) infinite}
@keyframes pula{0%,100%{transform:translateY(0) rotate(0)}30%{transform:translateY(-22px) rotate(-7deg)}60%{transform:translateY(-4px) rotate(5deg)}}
.lumi[data-humor="festa"] .f{animation:faisca 1.1s ease-out infinite}
.lumi[data-humor="festa"] .f2{animation-delay:.18s}
.lumi[data-humor="festa"] .f3{animation-delay:.36s}
.lumi[data-humor="festa"] .f4{animation-delay:.54s}
@keyframes faisca{0%{opacity:0;transform:scale(.4)}40%{opacity:1;transform:scale(1.5)}100%{opacity:0;transform:scale(.6) translateY(-16px)}}

.lumi[data-humor="triste"]{animation:flutua 7s ease-in-out infinite}
.lumi[data-humor="triste"] .corpo{transform:translateY(5px) scale(.97)}
.lumi[data-humor="triste"] .bochechas{opacity:.35}
.lumi[data-humor="triste"] .broto{animation:none;transform:rotate(16deg) translateY(4px)}

.lumi[data-humor="sede"] .casca{filter:saturate(.55) brightness(.9)}
.lumi[data-humor="sede"] .broto{animation:none;transform:rotate(12deg)}

/* estágios do broto */
.lumi[data-estagio="1"] .folha-2,.lumi[data-estagio="1"] .florzinha,.lumi[data-estagio="1"] .florzinha-miolo{opacity:0}
.lumi[data-estagio="1"] .caule{d:path("M100 58 C100 50 100 46 100 42")}
.lumi[data-estagio="2"] .florzinha,.lumi[data-estagio="2"] .florzinha-miolo{opacity:0}
.lumi[data-estagio="3"] .florzinha,.lumi[data-estagio="3"] .florzinha-miolo{opacity:0}
.lumi[data-estagio="3"] .folha-1,.lumi[data-estagio="3"] .folha-2{transform:scale(1.15);transform-origin:100px 34px}
.lumi[data-estagio="5"] .florzinha{fill:var(--ambar)}

/* balão de fala */
.balao{
  position:absolute;top:-2px;right:max(4px,4vw);max-width:min(240px,62vw);
  background:var(--carta-alta);border:1px solid var(--borda-forte);
  border-radius:20px 20px 20px 6px;
  padding:.85rem 2.2rem .85rem 1rem;
  box-shadow:var(--sombra);
  animation:sobe .6s cubic-bezier(.22,1,.36,1) .25s both;
}
.balao p{font-size:.92rem;line-height:1.45;color:var(--creme)}
.balao::after{content:"";position:absolute;bottom:-9px;left:14px;width:14px;height:14px;background:var(--carta-alta);border-right:1px solid var(--borda-forte);border-bottom:1px solid var(--borda-forte);transform:rotate(45deg) skew(-8deg,-8deg);border-radius:0 0 4px 0}
.balao-mais{
  position:absolute;top:6px;right:6px;width:26px;height:26px;border-radius:50%;
  border:1px solid var(--borda);background:transparent;color:var(--creme-3);
  font-size:.85rem;cursor:pointer;transition:.2s;line-height:1;
}
.balao-mais:active{transform:rotate(180deg);color:var(--lima);border-color:var(--lima)}

/* =========================================================
   FORMULÁRIOS
   ========================================================= */
.campo{display:block;margin-bottom:1rem}
.campo>span{
  display:block;font-family:var(--fonte-mono);font-size:.68rem;
  text-transform:uppercase;letter-spacing:.13em;color:var(--creme-3);margin-bottom:.45rem;
}
.campo>span b{color:var(--lima);font-family:var(--fonte);font-size:.92rem;letter-spacing:0;text-transform:none;font-weight:600}

/* input:not([type]) incluído de propósito: sem o atributo, input[type=text]
   não casa e o campo volta pro branco padrão do navegador */
input:not([type]),input[type=text],input[type=number],input[type=date],input[type=time],select,textarea{
  width:100%;padding:.9rem 1rem;
  background:var(--carta);border:1px solid var(--borda);border-radius:var(--r-p);
  color:var(--creme);font-family:var(--fonte);font-size:1.02rem;font-weight:500;
  transition:border-color .2s,background .2s,box-shadow .2s;
}
textarea{resize:vertical;font-size:.98rem;font-weight:400;line-height:1.55}
input:focus,select:focus,textarea:focus{
  outline:none;border-color:var(--lima);background:var(--carta-alta);
  box-shadow:0 0 0 3px rgba(199,242,78,.13);
}
input::placeholder,textarea::placeholder{color:var(--creme-3)}
select{appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' fill='none'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%23F3EBDD' stroke-opacity='.5' stroke-width='1.8' stroke-linecap='round'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 1rem center;padding-right:2.4rem}
input[type=date],input[type=time]{min-height:3.1rem}
::-webkit-calendar-picker-indicator{filter:invert(.85) sepia(.2)}

.campo-slider>span{display:flex;justify-content:space-between;align-items:baseline}
input[type=range]{
  -webkit-appearance:none;appearance:none;width:100%;height:30px;background:transparent;cursor:pointer;
}
input[type=range]::-webkit-slider-runnable-track{height:6px;border-radius:99px;background:linear-gradient(90deg,var(--lima) var(--pct,50%),rgba(243,235,221,.12) var(--pct,50%))}
input[type=range]::-moz-range-track{height:6px;border-radius:99px;background:rgba(243,235,221,.12)}
input[type=range]::-moz-range-progress{height:6px;border-radius:99px;background:var(--lima)}
input[type=range]::-webkit-slider-thumb{
  -webkit-appearance:none;width:24px;height:24px;border-radius:50%;margin-top:-9px;
  background:var(--lima);border:4px solid var(--tinta-2);box-shadow:0 0 0 1px var(--lima),0 0 16px rgba(199,242,78,.5);
}
input[type=range]::-moz-range-thumb{width:18px;height:18px;border-radius:50%;background:var(--lima);border:4px solid var(--tinta-2);box-shadow:0 0 0 1px var(--lima)}

.grade-2{display:grid;grid-template-columns:1fr 1fr;gap:.8rem}
.grade-3{display:grid;grid-template-columns:repeat(3,1fr);gap:.6rem}
.carta-sub + .grade-2,.carta-sub + .grade-3{margin-top:.9rem}

.dica-inline{font-size:.82rem;color:var(--creme-3);line-height:1.5;margin:-.4rem 0 1.1rem}
.dica-inline b{color:var(--creme-2)}

/* chips */
.chips{display:flex;flex-wrap:wrap;gap:.5rem;margin-bottom:1.1rem}
.chip{
  flex:1 1 calc(50% - .25rem);min-width:140px;
  display:flex;flex-direction:column;gap:.12rem;align-items:flex-start;
  padding:.75rem .9rem;border-radius:var(--r-p);
  background:var(--carta);border:1px solid var(--borda);
  color:var(--creme-2);font-family:var(--fonte);font-size:.95rem;font-weight:600;
  cursor:pointer;transition:.22s cubic-bezier(.3,1.2,.5,1);text-align:left;
}
.chip small{font-family:var(--fonte-mono);font-size:.64rem;color:var(--creme-3);letter-spacing:.04em;font-weight:400}
.chip:active{transform:scale(.97)}
.chip[aria-checked=true],.chip.ativa{
  background:linear-gradient(160deg,rgba(199,242,78,.20),rgba(199,242,78,.07));
  border-color:var(--lima);color:var(--creme);
  box-shadow:0 0 0 1px var(--lima),0 8px 24px -14px var(--lima);
}
.chip[aria-checked=true] small{color:var(--lima)}
.chips-tom .chip{flex:1 1 100%}

/* =========================================================
   BOTÕES
   ========================================================= */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:.5rem;
  padding:.95rem 1.5rem;border:none;border-radius:99px;
  background:var(--lima);color:#0A120F;
  font-family:var(--fonte);font-size:1rem;font-weight:600;letter-spacing:-.01em;
  cursor:pointer;transition:transform .18s cubic-bezier(.3,1.4,.5,1),box-shadow .25s,filter .2s;
  box-shadow:0 10px 26px -12px rgba(199,242,78,.9);
}
.btn:hover{filter:brightness(1.06)}
.btn:active{transform:scale(.96)}
.btn-grande{width:100%;padding:1.15rem;font-size:1.06rem;margin-top:.4rem}
.btn-largo{width:100%;margin-top:.5rem}
.btn-fantasma{background:transparent;border:1px solid var(--borda-forte);color:var(--creme);box-shadow:none}
.btn-fantasma:hover{border-color:var(--lima);color:var(--lima)}
.btn-perigo{background:transparent;border:1px solid rgba(255,122,89,.4);color:var(--coral);box-shadow:none;margin-top:1rem}
.btn-perigo:hover{background:rgba(255,122,89,.1)}
.linha-btns{display:flex;gap:.7rem;margin-top:.6rem}
.linha-btns .btn{flex:1}

.btn-icone{
  width:46px;height:46px;border-radius:50%;flex:0 0 46px;
  background:var(--carta);border:1px solid var(--borda);
  display:grid;place-items:center;font-size:1.3rem;cursor:pointer;transition:.2s;
}
.btn-icone:active{transform:scale(.92)}

.pilula{
  display:inline-flex;flex-direction:column;align-items:center;gap:.05rem;
  padding:.62rem .72rem;border-radius:99px;
  background:rgba(243,235,221,.06);border:1px solid var(--borda);
  color:var(--creme);font-family:var(--fonte);font-size:.86rem;font-weight:600;
  cursor:pointer;transition:transform .16s cubic-bezier(.3,1.5,.5,1),background .2s,border-color .2s;
  white-space:nowrap;
}
.pilula small{font-family:var(--fonte-mono);font-size:.6rem;color:var(--creme-3);letter-spacing:.04em;font-weight:400}
.pilula:active{transform:scale(.9)}
.pilula-fantasma{color:var(--creme-3);font-size:1.1rem}
.pilula-min{padding:.5rem .4rem;font-size:.78rem}
/* grade de colunas iguais: em 375px quatro pílulas em flex estouravam a linha */
.botoes-rapidos{display:grid;grid-template-columns:repeat(4,1fr);gap:.35rem;margin-top:.9rem}
.carta-mini .botoes-rapidos{grid-template-columns:repeat(3,1fr)}
.botoes-rapidos .pilula{padding-inline:.35rem;font-size:.82rem;overflow:hidden}
.botoes-rapidos .pilula small{max-width:100%;overflow:hidden;text-overflow:ellipsis}

.carta-agua .pilula:not(.pilula-fantasma):active{background:rgba(92,203,232,.24);border-color:var(--agua)}
.carta-proteina .pilula:not(.pilula-fantasma):active{background:rgba(255,195,92,.24);border-color:var(--ambar)}

/* =========================================================
   APP · LAYOUT
   ========================================================= */
#app{position:relative;z-index:2;max-width:480px;margin:0 auto;padding:0 clamp(1rem,4.5vw,1.4rem)}
.tela{padding-top:clamp(1.4rem,5vw,2.2rem);padding-bottom:calc(6.5rem + var(--seguro-b));animation:entra .4s ease both}
.tela>*{animation:sobe .5s cubic-bezier(.22,1,.36,1) both}
.tela>*:nth-child(1){animation-delay:0s}
.tela>*:nth-child(2){animation-delay:.04s}
.tela>*:nth-child(3){animation-delay:.08s}
.tela>*:nth-child(4){animation-delay:.12s}
.tela>*:nth-child(5){animation-delay:.16s}
.tela>*:nth-child(n+6){animation-delay:.2s}

.cabecalho{display:flex;align-items:flex-start;justify-content:space-between;gap:1rem;margin-bottom:.4rem}

/* fita da jornada */
.fita-jornada{
  display:flex;align-items:center;justify-content:space-between;
  padding:.85rem .4rem;margin:.3rem 0 .2rem;
  background:linear-gradient(120deg,rgba(243,235,221,.05),rgba(243,235,221,.02));
  border:1px solid var(--borda);border-radius:var(--r-m);
}
.fita-jornada>div{flex:1;text-align:center;display:flex;flex-direction:column;gap:.05rem}
.fita-jornada b{font-family:var(--fonte-display);font-size:1.3rem;font-weight:600;letter-spacing:-.02em;font-variation-settings:"SOFT" 50}
.fita-jornada small{font-family:var(--fonte-mono);font-size:.58rem;text-transform:uppercase;letter-spacing:.12em;color:var(--creme-3)}
.fita-sep{flex:0 0 1px!important;height:26px;background:var(--borda)}

/* =========================================================
   CARTAS
   ========================================================= */
.carta{
  background:linear-gradient(165deg,var(--carta-alta),var(--carta));
  border:1px solid var(--borda);border-radius:var(--r-g);
  padding:1.15rem;margin-bottom:.8rem;
  box-shadow:var(--sombra);position:relative;overflow:hidden;
}
.carta::before{
  content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;
  background:radial-gradient(120% 70% at 0% 0%,rgba(255,255,255,.055),transparent 55%);
}
.carta h3{font-family:var(--fonte-display);font-size:1.08rem;font-weight:600;letter-spacing:-.01em;font-variation-settings:"SOFT" 40}
.carta-sub{font-size:.8rem;color:var(--creme-3);line-height:1.45;margin-top:.2rem}
.carta-topo{display:flex;align-items:center;gap:1rem}
.carta-info{flex:1;min-width:0}
.carta-valor{font-family:var(--fonte-display);font-size:1.55rem;font-weight:600;letter-spacing:-.03em;line-height:1.15;margin-top:.1rem;font-variation-settings:"SOFT" 50}
.carta-valor span{font-family:var(--fonte-mono);font-size:.78rem;color:var(--creme-3);letter-spacing:.02em;font-weight:400}

.carta-agua{border-color:rgba(92,203,232,.22)}
.carta-agua .carta-valor b{color:var(--agua)}
.carta-proteina{border-color:rgba(255,195,92,.22)}
.carta-proteina .carta-valor b{color:var(--ambar)}
.carta-movimento .carta-valor b{color:var(--lima)}
.carta-sono .carta-valor b{color:var(--lilas)}

.carta.completa{border-color:var(--lima);background:linear-gradient(165deg,rgba(199,242,78,.14),var(--carta))}
.carta.completa::after{
  content:"✓";position:absolute;top:.85rem;right:1rem;
  width:24px;height:24px;border-radius:50%;background:var(--lima);color:#0A120F;
  display:grid;place-items:center;font-size:.8rem;font-weight:700;
  animation:carimbo .45s cubic-bezier(.3,1.7,.5,1) both;
}
@keyframes carimbo{from{transform:scale(0) rotate(-40deg);opacity:0}to{transform:none;opacity:1}}

.carta-mini{padding:.95rem;margin-bottom:0;display:flex;flex-direction:column;gap:.1rem}
.carta-mini .mini-emoji{font-size:1.2rem;line-height:1}
.carta-mini .carta-valor{font-size:1.3rem}
.carta-mini .botoes-rapidos{margin-top:.6rem;gap:.3rem}
.grade-missoes{margin-bottom:.8rem;align-items:stretch}

/* anéis */
.anel{flex:0 0 68px;width:68px;height:68px;position:relative}
.anel svg{width:100%;height:100%;transform:rotate(-90deg)}
.anel .trilho{fill:none;stroke:rgba(243,235,221,.09);stroke-width:7}
.anel .barra{fill:none;stroke-width:7;stroke-linecap:round;transition:stroke-dashoffset .8s cubic-bezier(.22,1,.36,1)}
.anel .rotulo{
  position:absolute;inset:0;display:grid;place-items:center;
  font-family:var(--fonte-mono);font-size:.78rem;color:var(--creme-2);
}
#anel-agua .barra{stroke:var(--agua);filter:drop-shadow(0 0 6px rgba(92,203,232,.55))}
#anel-proteina .barra{stroke:var(--ambar);filter:drop-shadow(0 0 6px rgba(255,195,92,.5))}

/* copinhos de água */
.copos{display:flex;gap:4px;margin-top:.9rem;flex-wrap:wrap}
.copo{
  width:13px;height:19px;border-radius:2px 2px 6px 6px;
  border:1.5px solid rgba(92,203,232,.35);background:transparent;transition:.35s;
}
.copo.cheio{background:linear-gradient(180deg,var(--agua),rgba(92,203,232,.55));border-color:var(--agua);box-shadow:0 0 10px rgba(92,203,232,.4)}

/* escalas / sintomas */
.chips-sintoma{margin:.8rem 0 .4rem;gap:.4rem}
.chips-sintoma .chip{
  flex:0 1 auto;min-width:0;padding:.45rem .75rem;font-size:.84rem;
  flex-direction:row;align-items:center;gap:.3rem;border-radius:99px;
}
.chips-sintoma .chip[aria-checked=true]{
  background:linear-gradient(160deg,rgba(255,122,89,.22),rgba(255,122,89,.07));
  border-color:var(--coral);box-shadow:0 0 0 1px var(--coral)
}
.escala{display:flex;align-items:center;justify-content:space-between;gap:.8rem;margin-top:.7rem}
.escala>span{font-family:var(--fonte-mono);font-size:.68rem;text-transform:uppercase;letter-spacing:.12em;color:var(--creme-3)}
.escala-btns{display:flex;gap:.3rem}
.escala-btns button{
  width:34px;height:34px;border-radius:50%;border:1px solid var(--borda);
  background:rgba(243,235,221,.05);color:var(--creme-3);
  font-size:1rem;cursor:pointer;transition:.2s;display:grid;place-items:center;
}
.escala-btns button.ativa{background:var(--lima);border-color:var(--lima);transform:scale(1.14);box-shadow:0 0 16px rgba(199,242,78,.4)}
.dica-sintoma{
  margin-top:.9rem;padding:.8rem .9rem;border-radius:var(--r-p);
  background:rgba(255,122,89,.08);border:1px solid rgba(255,122,89,.22);
  font-size:.85rem;line-height:1.5;color:var(--creme-2);
  animation:sobe .4s ease both;
}
.dica-sintoma b{color:var(--coral)}

.linha-peso{display:flex;gap:.6rem;margin-top:.8rem}
.linha-peso input{flex:1}
.btn-peso{flex:0 0 auto;padding-inline:1.3rem}

/* alerta de aplicação */
.alerta{
  display:flex;gap:.9rem;align-items:center;
  padding:1rem 1.1rem;border-radius:var(--r-m);margin:.9rem 0 0;
  background:linear-gradient(120deg,rgba(255,122,89,.2),rgba(255,122,89,.05));
  border:1px solid rgba(255,122,89,.4);
  animation:bate 2.6s ease-in-out infinite;
}
@keyframes bate{0%,100%{box-shadow:0 0 0 0 rgba(255,122,89,.28)}50%{box-shadow:0 0 0 9px rgba(255,122,89,0)}}
.alerta-ic{font-size:1.5rem;flex:0 0 auto}
.alerta b{display:block;font-family:var(--fonte-display);font-size:1rem;font-weight:600;margin-bottom:.1rem}
.alerta p{font-size:.82rem;color:var(--creme-2);line-height:1.4}
.alerta button{margin-left:auto;flex:0 0 auto;padding:.6rem 1rem;font-size:.85rem;border-radius:99px;border:none;background:var(--coral);color:#140805;font-weight:700;cursor:pointer}
.alerta.alerta-calmo{background:linear-gradient(120deg,rgba(92,203,232,.16),rgba(92,203,232,.04));border-color:rgba(92,203,232,.3);animation:none}
.alerta.alerta-ok{background:linear-gradient(120deg,rgba(199,242,78,.16),rgba(199,242,78,.04));border-color:rgba(199,242,78,.32);animation:none}

/* =========================================================
   PROGRESSO
   ========================================================= */
.carta-destaque{text-align:center;padding:1.6rem 1.2rem}
.destaque-num{display:flex;align-items:baseline;justify-content:center;gap:.3rem}
.destaque-num b{
  font-family:var(--fonte-display);font-size:4rem;font-weight:600;line-height:1;
  letter-spacing:-.05em;color:var(--lima);font-variation-settings:"SOFT" 70,"WONK" 1;
  text-shadow:0 0 40px rgba(199,242,78,.35);
}
.destaque-num span{font-family:var(--fonte-mono);font-size:1rem;color:var(--creme-3)}
.destaque-legenda{font-family:var(--fonte-mono);font-size:.66rem;text-transform:uppercase;letter-spacing:.16em;color:var(--creme-3);margin-top:.35rem}

.barra-meta{height:10px;border-radius:99px;background:rgba(243,235,221,.08);margin:1.4rem 0 .5rem;position:relative;overflow:visible}
.barra-meta-preenchida{height:100%;border-radius:99px;background:linear-gradient(90deg,var(--lima-escura),var(--lima));box-shadow:0 0 18px rgba(199,242,78,.45);transition:width 1s cubic-bezier(.22,1,.36,1);position:relative}
.barra-meta-marca{position:absolute;top:50%;width:16px;height:16px;border-radius:50%;background:var(--lima);border:3px solid var(--tinta-2);transform:translate(-50%,-50%);transition:left 1s cubic-bezier(.22,1,.36,1);box-shadow:0 0 14px rgba(199,242,78,.6)}
.barra-meta-labels{display:flex;justify-content:space-between;font-family:var(--fonte-mono);font-size:.68rem;color:var(--creme-3)}
.barra-meta-labels span:nth-child(2){color:var(--lima)}

.carta-grafico{padding:1.2rem .9rem}
#grafico-peso svg,#grafico-habito svg{width:100%;height:auto;display:block;overflow:visible}
.legenda-grafico{display:flex;gap:1rem;flex-wrap:wrap;margin-top:.8rem;padding-inline:.3rem;font-family:var(--fonte-mono);font-size:.64rem;color:var(--creme-3);letter-spacing:.04em}
.legenda-grafico span{display:flex;align-items:center;gap:.35rem}
.ponto{width:9px;height:9px;border-radius:50%;display:inline-block}
.ponto-lima{background:var(--lima)}
.ponto-tracejado{background:none;border-top:2px dashed var(--creme-3);border-radius:0;height:0;width:12px}

.abas-mini{display:flex;gap:.3rem;margin-bottom:1rem;background:rgba(243,235,221,.05);padding:.25rem;border-radius:99px}
.aba-mini{
  flex:1;padding:.45rem;border:none;background:transparent;border-radius:99px;
  color:var(--creme-3);font-family:var(--fonte);font-size:.82rem;font-weight:600;cursor:pointer;transition:.25s;
}
.aba-mini.ativa{background:var(--carta-alta);color:var(--creme);box-shadow:0 2px 10px rgba(0,0,0,.3)}

.lista-medidas{margin-top:1rem;display:flex;flex-direction:column;gap:.4rem}
.medida-linha{display:flex;justify-content:space-between;align-items:center;padding:.6rem .8rem;background:rgba(243,235,221,.04);border-radius:var(--r-p);font-size:.85rem}
.medida-linha .md-data{font-family:var(--fonte-mono);font-size:.7rem;color:var(--creme-3)}
.medida-linha .md-vals{display:flex;gap:.8rem;font-family:var(--fonte-mono);font-size:.76rem}
.medida-linha .md-vals b{color:var(--lima);font-weight:500}

.grade-conquistas{display:grid;grid-template-columns:repeat(auto-fill,minmax(96px,1fr));gap:.6rem}
.conquista{
  aspect-ratio:1;border-radius:var(--r-m);padding:.6rem .4rem;
  background:var(--carta);border:1px solid var(--borda);
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.25rem;text-align:center;
  opacity:.35;filter:grayscale(1);transition:.4s;
}
.conquista.ganha{opacity:1;filter:none;border-color:rgba(199,242,78,.35);background:linear-gradient(165deg,rgba(199,242,78,.12),var(--carta))}
.conquista .cq-ic{font-size:1.5rem;line-height:1}
.conquista .cq-nome{font-size:.68rem;font-weight:600;line-height:1.2}
.conquista .cq-desc{font-family:var(--fonte-mono);font-size:.54rem;color:var(--creme-3);line-height:1.25}

/* =========================================================
   PROTOCOLO
   ========================================================= */
.carta-contagem{text-align:center;padding:1.6rem 1.2rem}
.contagem-grande{
  font-family:var(--fonte-display);font-size:3rem;font-weight:600;line-height:1.05;
  letter-spacing:-.04em;font-variation-settings:"SOFT" 70,"WONK" 1;margin:.2rem 0;
}
.contagem-grande.hoje{color:var(--coral);text-shadow:0 0 40px rgba(255,122,89,.35)}
.prot-dose{
  display:inline-flex;align-items:center;gap:.6rem;margin-top:.9rem;
  padding:.5rem 1rem;border-radius:99px;background:rgba(243,235,221,.06);border:1px solid var(--borda);
  font-family:var(--fonte-mono);font-size:.8rem;color:var(--creme-2);
}
.prot-dose b{color:var(--lima);font-size:.95rem}
.btn-aplicar{background:var(--coral);color:#190803;box-shadow:0 10px 26px -12px rgba(255,122,89,.9);margin-top:1.1rem}
.btn-aplicar[disabled]{background:rgba(243,235,221,.1);color:var(--creme-3);box-shadow:none;cursor:default}

.corpo-mapa{display:flex;flex-direction:column;align-items:center;gap:.7rem;margin:1rem 0 .6rem}
.corpo-mapa svg{width:min(210px,62%);height:auto}
.mapa-legenda{display:flex;gap:1.1rem;font-family:var(--fonte-mono);font-size:.62rem;color:var(--creme-3);letter-spacing:.04em}
.mapa-legenda span{display:flex;align-items:center;gap:.35rem}
.ponto-zona{width:9px;height:9px;border-radius:50%;display:inline-block;border:1px solid}
.ponto-zona.proxima{background:rgba(199,242,78,.4);border-color:var(--lima)}
.ponto-zona.recente{background:rgba(255,122,89,.35);border-color:var(--coral)}
.corpo-mapa .silhueta{fill:rgba(243,235,221,.06);stroke:var(--borda-forte);stroke-width:1.2}
.corpo-mapa .zona{fill:rgba(243,235,221,.10);stroke:var(--borda-forte);stroke-width:1;transition:.4s}
.corpo-mapa .zona.recente{fill:rgba(255,122,89,.35);stroke:var(--coral)}
.corpo-mapa .zona.proxima{fill:rgba(199,242,78,.4);stroke:var(--lima);animation:pisca-zona 2s ease-in-out infinite}
@keyframes pisca-zona{0%,100%{opacity:1}50%{opacity:.45}}
.corpo-mapa .rot{font-family:var(--fonte-mono);font-size:7px;fill:var(--creme-3);text-anchor:middle}
.proximo-local{text-align:center;font-size:.9rem;color:var(--creme-2)}
.proximo-local b{color:var(--lima);font-weight:600}

.janela{display:flex;gap:.35rem;margin-bottom:.9rem}
.janela-dia{
  flex:1;padding:.6rem .2rem;border-radius:var(--r-p);text-align:center;
  background:rgba(243,235,221,.05);border:1px solid var(--borda);
}
.janela-dia b{display:block;font-family:var(--fonte-mono);font-size:.62rem;color:var(--creme-3);letter-spacing:.06em}
.janela-dia i{display:block;font-style:normal;font-size:1.1rem;margin-top:.2rem}
.janela-dia.atual{border-color:var(--lima);background:rgba(199,242,78,.12);box-shadow:0 0 0 1px var(--lima)}

.historico{display:flex;flex-direction:column;gap:.45rem}
.hist-linha{
  display:flex;align-items:center;gap:.8rem;padding:.75rem .9rem;
  background:var(--carta);border:1px solid var(--borda);border-radius:var(--r-p);
}
.hist-ic{width:30px;height:30px;border-radius:50%;background:rgba(255,122,89,.15);display:grid;place-items:center;font-size:.85rem;flex:0 0 auto}
.hist-txt{flex:1;min-width:0}
.hist-txt b{font-size:.9rem;font-weight:600}
.hist-txt small{display:block;font-family:var(--fonte-mono);font-size:.66rem;color:var(--creme-3)}
.hist-dose{font-family:var(--fonte-mono);font-size:.78rem;color:var(--lima)}

/* =========================================================
   DIÁRIO
   ========================================================= */
.padroes{display:flex;flex-direction:column;gap:.7rem}
.padrao{display:flex;gap:.7rem;align-items:flex-start;font-size:.88rem;line-height:1.45;color:var(--creme-2)}
.padrao span{flex:0 0 auto;font-size:1.05rem}
.padrao b{color:var(--lima);font-weight:600}

.linha-tempo{display:flex;flex-direction:column;gap:.5rem}
.lt-item{
  padding:.85rem 1rem;border-radius:var(--r-m);
  background:var(--carta);border:1px solid var(--borda);
  border-left:3px solid var(--borda-forte);
}
.lt-item.tem-aplicacao{border-left-color:var(--coral)}
.lt-item.dia-bom{border-left-color:var(--lima)}
.lt-data{font-family:var(--fonte-mono);font-size:.66rem;text-transform:uppercase;letter-spacing:.1em;color:var(--creme-3);margin-bottom:.35rem}
.lt-tags{display:flex;flex-wrap:wrap;gap:.3rem;margin-top:.4rem}
.lt-tag{font-family:var(--fonte-mono);font-size:.62rem;padding:.16rem .5rem;border-radius:99px;background:rgba(243,235,221,.07);color:var(--creme-2)}
.lt-tag.tg-agua{background:rgba(92,203,232,.16);color:var(--agua)}
.lt-tag.tg-prot{background:rgba(255,195,92,.16);color:var(--ambar)}
.lt-tag.tg-sint{background:rgba(255,122,89,.16);color:var(--coral)}
.lt-tag.tg-peso{background:rgba(199,242,78,.16);color:var(--lima)}
.lt-nota{font-size:.88rem;color:var(--creme-2);line-height:1.5;margin-top:.35rem;font-style:italic}

/* =========================================================
   VOCÊ
   ========================================================= */
.carta-perfil{display:flex;gap:1rem;align-items:center}
.carta-perfil>div:last-child{flex:1;min-width:0}
.carta-perfil h3{font-size:1.25rem;color:var(--lima)}
.barra-xp{height:7px;border-radius:99px;background:rgba(243,235,221,.08);margin:.6rem 0 .35rem;overflow:hidden}
#barra-xp-preenchida{height:100%;border-radius:99px;background:linear-gradient(90deg,var(--lima-escura),var(--lima));transition:width .9s cubic-bezier(.22,1,.36,1);box-shadow:0 0 12px rgba(199,242,78,.5)}

.troca{display:flex;align-items:center;justify-content:space-between;gap:1rem;padding:.3rem 0 .8rem;cursor:pointer;font-size:.98rem;font-weight:500}
.troca input{display:none}
.troca i{
  flex:0 0 50px;width:50px;height:29px;border-radius:99px;background:rgba(243,235,221,.12);
  position:relative;transition:.3s;border:1px solid var(--borda);
}
.troca i::after{content:"";position:absolute;top:3px;left:3px;width:21px;height:21px;border-radius:50%;background:var(--creme-3);transition:.3s cubic-bezier(.3,1.5,.5,1)}
.troca input:checked + i{background:rgba(199,242,78,.3);border-color:var(--lima)}
.troca input:checked + i::after{left:26px;background:var(--lima);box-shadow:0 0 12px rgba(199,242,78,.7)}

.aviso{
  display:flex;gap:.8rem;align-items:flex-start;
  padding:.9rem 1rem;border-radius:var(--r-m);margin-bottom:1.3rem;
  background:rgba(255,195,92,.07);border:1px solid rgba(255,195,92,.22);
}
.aviso .ic{width:20px;height:20px;flex:0 0 20px;color:var(--ambar);margin-top:1px}
.aviso p{font-size:.8rem;line-height:1.5;color:var(--creme-2)}
.aviso strong{color:var(--ambar)}
.aviso-rodape{margin-top:2rem;background:rgba(255,122,89,.07);border-color:rgba(255,122,89,.22)}
.aviso-rodape strong{color:var(--coral)}

.rodape-legal{font-size:.72rem;color:var(--creme-3);text-align:center;margin-top:1.6rem;line-height:1.5;padding-inline:1rem}
.assinatura{text-align:center;font-family:var(--fonte-display);font-style:italic;font-size:.9rem;color:var(--creme-3);margin-top:1.5rem}

/* =========================================================
   ABAS INFERIORES
   ========================================================= */
.abas{
  position:fixed;left:50%;transform:translateX(-50%);
  bottom:calc(.7rem + var(--seguro-b));width:min(430px,calc(100% - 1.6rem));
  display:flex;gap:.1rem;padding:.4rem;z-index:20;
  background:rgba(14,26,21,.82);backdrop-filter:blur(22px) saturate(1.5);
  -webkit-backdrop-filter:blur(22px) saturate(1.5);
  border:1px solid var(--borda-forte);border-radius:99px;
  box-shadow:0 16px 40px -14px rgba(0,0,0,.9);
}
.aba{
  flex:1;display:flex;flex-direction:column;align-items:center;gap:.1rem;
  padding:.5rem .1rem;border:none;background:transparent;border-radius:99px;
  color:var(--creme-3);font-family:var(--fonte);font-size:.6rem;font-weight:600;
  cursor:pointer;transition:.28s cubic-bezier(.3,1.2,.5,1);letter-spacing:.01em;
}
.aba-ic{font-size:1.05rem;line-height:1;transition:.28s cubic-bezier(.3,1.6,.5,1);filter:grayscale(.6) opacity(.65)}
.aba.ativa{color:var(--creme);background:rgba(199,242,78,.11)}
.aba.ativa .aba-ic{transform:translateY(-2px) scale(1.18);filter:none}
.aba:active .aba-ic{transform:scale(.85)}

/* =========================================================
   TOAST · CONFETE · MODAL
   ========================================================= */
.toast{
  position:fixed;left:50%;bottom:calc(5.6rem + var(--seguro-b));transform:translate(-50%,20px);
  z-index:40;padding:.8rem 1.2rem;border-radius:99px;max-width:calc(100% - 2rem);
  background:var(--creme);color:#0A120F;font-size:.9rem;font-weight:600;text-align:center;
  box-shadow:0 14px 34px -12px rgba(0,0,0,.8);
  opacity:0;pointer-events:none;transition:.35s cubic-bezier(.22,1,.36,1);
}
.toast.aparece{opacity:1;transform:translate(-50%,0)}
.toast.lima{background:var(--lima)}
.toast.coral{background:var(--coral);color:#190803}

.confete{position:fixed;inset:0;z-index:50;pointer-events:none;overflow:hidden}
.pedaco{position:absolute;width:9px;height:14px;border-radius:2px;animation:cai 2.4s cubic-bezier(.3,.6,.5,1) forwards}
@keyframes cai{
  0%{transform:translateY(-10vh) rotate(0) scale(1);opacity:1}
  100%{transform:translateY(105vh) rotate(720deg) scale(.6);opacity:0}
}

.modal{
  /* margin:auto centraliza o <dialog>; o reset *{margin:0} acima o zeraria */
  margin:auto;
  border:none;padding:1.4rem;max-width:min(400px,92vw);width:100%;
  background:linear-gradient(165deg,var(--carta-alta),var(--carta));
  color:var(--creme);border-radius:var(--r-g);border:1px solid var(--borda-forte);
  box-shadow:0 30px 70px -20px rgba(0,0,0,.95);
}
.modal::backdrop{background:rgba(5,10,8,.75);backdrop-filter:blur(5px)}
.modal[open]{animation:sobe .35s cubic-bezier(.22,1,.36,1) both}
.modal-corpo h3{font-family:var(--fonte-display);font-size:1.4rem;margin-bottom:.5rem;font-variation-settings:"SOFT" 60,"WONK" 1}
.modal-corpo p{font-size:.92rem;color:var(--creme-2);line-height:1.55;margin-bottom:.6rem}
.modal-corpo .palco{padding:0 0 .8rem}

/* =========================================================
   V2 · MODOS, NUTRIÇÃO, TREINO, MEDICAÇÃO, EXAMES
   ========================================================= */

.rotulo-grupo{
  font-family:var(--fonte-mono);font-size:.68rem;text-transform:uppercase;
  letter-spacing:.13em;color:var(--creme-3);margin:.2rem 0 .6rem;
}
.rotulo-grupo small{text-transform:none;letter-spacing:0;font-family:var(--fonte);font-size:.75rem;opacity:.75}

.chips-modo .chip,.chips-coluna .chip{flex:1 1 100%}
.chips-sexo .chip,.chips-sn .chip{flex:1 1 auto;min-width:0;text-align:center;align-items:center}

/* ---- projeção do objetivo ---- */
.projecao-carta{
  display:grid;grid-template-columns:repeat(3,1fr);gap:.6rem;
  padding:1rem;border-radius:var(--r-m);margin-bottom:1rem;
  background:linear-gradient(150deg,rgba(199,242,78,.14),rgba(199,242,78,.03));
  border:1px solid rgba(199,242,78,.3);
}
.projecao-carta>div{text-align:center;display:flex;flex-direction:column;gap:.1rem}
.projecao-carta b{font-family:var(--fonte-display);font-size:1.2rem;font-weight:600;letter-spacing:-.02em;color:var(--lima)}
.projecao-carta small{font-family:var(--fonte-mono);font-size:.56rem;text-transform:uppercase;letter-spacing:.1em;color:var(--creme-3)}
.projecao-data{grid-column:1/-1;border-top:1px solid rgba(199,242,78,.22);padding-top:.6rem}
.projecao-data b{font-size:1.05rem}

/* ---- cartão de cálculo ---- */
.carta-calculo,.calculo-resumo{padding:1.1rem;margin-bottom:1.2rem}
.calculo-resumo{background:rgba(243,235,221,.04);border-radius:var(--r-m);padding:.9rem;margin:.8rem 0}
.calc-linha{
  display:flex;justify-content:space-between;align-items:baseline;gap:1rem;
  padding:.55rem 0;border-bottom:1px solid var(--borda);font-size:.92rem;
}
.calc-linha:last-child{border-bottom:none}
.calc-linha span{color:var(--creme-2)}
.calc-linha span small{display:block;font-family:var(--fonte-mono);font-size:.6rem;color:var(--creme-3);letter-spacing:.06em}
.calc-linha b{font-family:var(--fonte-mono);font-size:.95rem;white-space:nowrap}
.calc-linha.neg b{color:var(--coral)}
.calc-linha.pos b{color:var(--agua)}
.calc-linha.destaque{border-top:1px solid var(--borda-forte);margin-top:.3rem;padding-top:.8rem}
.calc-linha.destaque b{font-family:var(--fonte-display);font-size:1.3rem;color:var(--lima);letter-spacing:-.02em}
.calc-nota{font-size:.82rem;color:var(--creme-3);line-height:1.5;margin-top:.8rem}
.calc-nota b{color:var(--creme-2)}
.alerta-nota{padding:.7rem .85rem;border-radius:var(--r-p);background:rgba(255,195,92,.08);border:1px solid rgba(255,195,92,.25);color:var(--creme-2)}

/* ---- energia e macros ---- */
.carta-energia .energia-topo{display:flex;align-items:center;gap:1.1rem}
.anel-grande{flex:0 0 92px;width:92px;height:92px}
#anel-kcal .barra,#anel-kcal-2 .barra{stroke:var(--lima);filter:drop-shadow(0 0 7px rgba(199,242,78,.55))}
.anel-grande .rotulo{font-size:.95rem;color:var(--creme)}
.energia-num{flex:1;min-width:0}
.energia-num .carta-valor{font-size:2rem}
.energia-num .carta-valor b{color:var(--lima)}

.macros{display:flex;flex-direction:column;gap:.6rem;margin-top:1rem}
.macro-topo{display:flex;justify-content:space-between;align-items:baseline;font-size:.82rem;margin-bottom:.25rem}
.macro-topo span{color:var(--creme-2)}
.macro-topo b{font-family:var(--fonte-mono);font-size:.82rem}
.macro-topo b i{font-style:normal;color:var(--creme-3);font-size:.72rem}
.macro-trilho{height:6px;border-radius:99px;background:rgba(243,235,221,.08);overflow:hidden}
.macro-barra{height:100%;border-radius:99px;transition:width .7s cubic-bezier(.22,1,.36,1)}
.macro-barra.ambar{background:linear-gradient(90deg,#B5822F,var(--ambar))}
.macro-barra.agua{background:linear-gradient(90deg,#2E8AA5,var(--agua))}
.macro-barra.lilas{background:linear-gradient(90deg,#7B5FC4,var(--lilas))}

/* ---- trilha de refeições ---- */
.trilha-refeicoes{display:flex;gap:.45rem;overflow-x:auto;padding-bottom:.4rem;margin-bottom:.8rem;scrollbar-width:none}
.trilha-refeicoes::-webkit-scrollbar{display:none}
.ref-bolha{
  flex:1 0 auto;min-width:72px;display:flex;flex-direction:column;align-items:center;gap:.15rem;
  padding:.7rem .5rem;border-radius:var(--r-m);cursor:pointer;
  background:var(--carta);border:1px solid var(--borda);color:var(--creme-2);
  font-family:var(--fonte);transition:.22s;
}
.ref-bolha:active{transform:scale(.95)}
.ref-emoji{font-size:1.15rem;line-height:1}
.ref-rot{font-size:.72rem;font-weight:600}
.ref-val{font-family:var(--fonte-mono);font-size:.58rem;color:var(--creme-3)}
.ref-bolha.feita{background:linear-gradient(160deg,rgba(199,242,78,.16),var(--carta));border-color:rgba(199,242,78,.4)}
.ref-bolha.feita .ref-val{color:var(--lima)}
.ref-bolha.atrasada{border-color:rgba(255,122,89,.45);background:linear-gradient(160deg,rgba(255,122,89,.12),var(--carta))}
.ref-bolha.atrasada .ref-val{color:var(--coral)}

/* ---- cartas de refeição ---- */
.carta-refeicao{padding:1rem;position:relative}
.ref-cab{display:flex;align-items:center;gap:.8rem}
.ref-cab>div{flex:1;min-width:0}
.ref-cab b{display:block;font-family:var(--fonte-display);font-size:1rem;font-weight:600}
.ref-cab small{display:block;font-family:var(--fonte-mono);font-size:.66rem;color:var(--creme-3);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ref-kcal{font-family:var(--fonte-mono);font-size:.85rem;color:var(--lima);text-align:right;flex:0 0 auto}
.ref-kcal i{display:block;font-style:normal;font-size:.66rem;color:var(--creme-3)}
.carta-refeicao.feita{border-color:rgba(199,242,78,.3)}
.btn-limpar{
  position:absolute;top:.6rem;right:.6rem;width:26px;height:26px;border-radius:50%;
  border:1px solid var(--borda);background:transparent;color:var(--creme-3);cursor:pointer;font-size:.8rem;
}
.btn-limpar:hover{border-color:var(--coral);color:var(--coral)}

/* ---- sugestões ---- */
.sugestoes{display:flex;flex-direction:column;gap:.5rem;margin-top:.8rem}
.sugestao{
  text-align:left;padding:.8rem .9rem;border-radius:var(--r-p);cursor:pointer;
  background:rgba(243,235,221,.05);border:1px solid var(--borda);color:var(--creme);
  font-family:var(--fonte);transition:.22s;width:100%;
}
.sugestao:active{transform:scale(.98)}
.sugestao:hover{border-color:var(--lima);background:rgba(199,242,78,.08)}
.sug-topo{display:flex;justify-content:space-between;align-items:baseline;gap:.6rem}
.sug-topo b{font-size:.95rem;font-weight:600}
.sug-topo span{font-family:var(--fonte-mono);font-size:.78rem;color:var(--lima);white-space:nowrap}
.sug-itens{font-size:.76rem;color:var(--creme-3);line-height:1.4;margin-top:.25rem}
.sug-macros{display:flex;gap:.5rem;margin-top:.45rem}
.sug-macros i{font-style:normal;font-family:var(--fonte-mono);font-size:.62rem;color:var(--creme-3);
  padding:.12rem .45rem;border-radius:99px;background:rgba(243,235,221,.07)}
.sug-macros .tg-prot{color:var(--ambar);background:rgba(255,195,92,.14)}

.carta-fechar{border-color:rgba(199,242,78,.25)}
.fechar-ok,.treino-feito{display:flex;gap:.9rem;align-items:center}
.fechar-ok span,.treino-feito span{font-size:1.8rem;flex:0 0 auto}
.fechar-slot{margin-top:1rem}
.fechar-rot{font-family:var(--fonte-mono);font-size:.68rem;text-transform:uppercase;letter-spacing:.12em;color:var(--creme-3)}

.resultado-busca{display:flex;flex-direction:column;gap:.35rem;margin:-.5rem 0 1rem}
.alimento{
  display:flex;align-items:baseline;gap:.5rem;padding:.6rem .8rem;border-radius:var(--r-p);
  background:rgba(243,235,221,.05);border:1px solid var(--borda);color:var(--creme);
  font-family:var(--fonte);font-size:.88rem;cursor:pointer;text-align:left;transition:.2s;
}
.alimento:hover{border-color:var(--lima)}
.alimento b{font-weight:600}
.alimento small{font-family:var(--fonte-mono);font-size:.62rem;color:var(--creme-3)}
.alimento span{margin-left:auto;font-family:var(--fonte-mono);font-size:.7rem;color:var(--lima);white-space:nowrap}

/* ---- treino ---- */
.plano-meta{display:flex;flex-wrap:wrap;gap:.4rem;margin-top:.8rem}
.plano-meta span{font-family:var(--fonte-mono);font-size:.64rem;padding:.25rem .6rem;border-radius:99px;
  background:rgba(243,235,221,.07);color:var(--creme-2)}
.fase{display:flex;align-items:baseline;justify-content:space-between;gap:.6rem;margin-top:.9rem;
  padding:.6rem .8rem;border-radius:var(--r-p);background:rgba(199,242,78,.1);border:1px solid rgba(199,242,78,.28)}
.fase b{font-family:var(--fonte-display);font-size:.95rem;color:var(--lima)}
.fase small{font-family:var(--fonte-mono);font-size:.62rem;color:var(--creme-3)}

.exercicios{display:flex;flex-direction:column;gap:.5rem;margin:1rem 0}
.exercicio{display:flex;align-items:center;gap:.7rem;padding:.7rem .8rem;border-radius:var(--r-p);
  background:rgba(243,235,221,.04);border:1px solid var(--borda)}
.ex-check{
  flex:0 0 26px;width:26px;height:26px;border-radius:50%;cursor:pointer;
  border:2px solid var(--borda-forte);background:transparent;transition:.22s cubic-bezier(.3,1.5,.5,1);
}
.ex-check.marcado{background:var(--lima);border-color:var(--lima);box-shadow:0 0 14px rgba(199,242,78,.5)}
.ex-check.marcado::after{content:"✓";color:#0A120F;font-size:.8rem;font-weight:700;display:block;line-height:22px}
.ex-info{flex:1;min-width:0}
.ex-info b{display:block;font-size:.92rem;font-weight:600}
.ex-info small{display:block;font-family:var(--fonte-mono);font-size:.64rem;color:var(--creme-3)}
.ex-info em{display:block;font-size:.72rem;color:var(--creme-3);font-style:italic;margin-top:.15rem}
.ex-carga{flex:0 0 58px;width:58px;padding:.45rem .3rem!important;text-align:center;
  font-family:var(--fonte-mono)!important;font-size:.8rem!important}

.semana-treino{display:flex;gap:.3rem;margin-bottom:.8rem}
.dia-semana{flex:1;padding:.6rem .2rem;border-radius:var(--r-p);text-align:center;cursor:pointer;
  background:rgba(243,235,221,.04);border:1px solid var(--borda);transition:.22s}
.dia-semana b{display:block;font-family:var(--fonte-mono);font-size:.6rem;text-transform:uppercase;color:var(--creme-3)}
.dia-semana i{display:block;font-style:normal;font-size:.9rem;margin-top:.15rem;color:var(--creme-3);min-height:1.1em}
.dia-semana.treina{border-color:rgba(199,242,78,.35);background:rgba(199,242,78,.08)}
.dia-semana.treina i{color:var(--lima)}
.dia-semana.feito{background:rgba(199,242,78,.2);border-color:var(--lima)}
.dia-semana.atual{box-shadow:0 0 0 2px var(--creme-3)}

.opcoes-plano{display:flex;flex-direction:column;gap:.55rem;margin:.9rem 0}
.opcao-plano{text-align:left;padding:.85rem .95rem;border-radius:var(--r-p);cursor:pointer;
  background:rgba(243,235,221,.05);border:1px solid var(--borda);color:var(--creme);font-family:var(--fonte);transition:.22s}
.opcao-plano:hover{border-color:var(--lima)}
.opcao-plano.atual{border-color:var(--lima);background:rgba(199,242,78,.1)}
.opcao-plano b{display:block;font-size:.96rem;font-weight:600}
.opcao-plano small{display:block;font-family:var(--fonte-mono);font-size:.62rem;color:var(--creme-3);margin:.15rem 0 .35rem}
.opcao-plano p{font-size:.78rem;color:var(--creme-2);line-height:1.45}

/* ---- medicações ---- */
.carta-med{position:relative}
.carta-med.hoje{border-color:rgba(255,122,89,.42);background:linear-gradient(165deg,rgba(255,122,89,.1),var(--carta))}
.med-cab{display:flex;align-items:flex-start;justify-content:space-between;gap:.6rem}
.med-info{display:flex;flex-wrap:wrap;gap:.4rem;margin:.6rem 0}
.med-info span{font-family:var(--fonte-mono);font-size:.68rem;padding:.25rem .6rem;border-radius:99px;
  background:rgba(243,235,221,.07);color:var(--creme-2)}
.med-dose{color:var(--lima)!important;background:rgba(199,242,78,.12)!important}
.med-via{color:var(--lilas)!important;background:rgba(183,155,255,.14)!important}
.med-quando{font-size:.85rem;color:var(--creme-2);margin-bottom:.8rem}
.med-quando .urgente{color:var(--coral)}

/* ---- exames ---- */
.lista-exames{margin-top:1rem}
.exame-resumo{display:flex;align-items:center;justify-content:space-between;gap:1rem;
  padding:.8rem .9rem;border-radius:var(--r-p);background:rgba(243,235,221,.05);margin-bottom:.6rem}
.exame-resumo b{font-family:var(--fonte-display);font-size:1rem}
.exame-resumo small{display:block;font-family:var(--fonte-mono);font-size:.62rem;color:var(--creme-3)}
.selo-fora,.selo-ok{font-family:var(--fonte-mono);font-size:.64rem;padding:.3rem .7rem;border-radius:99px;white-space:nowrap}
.selo-fora{background:rgba(255,195,92,.16);color:var(--ambar);border:1px solid rgba(255,195,92,.35)}
.selo-ok{background:rgba(199,242,78,.14);color:var(--lima);border:1px solid rgba(199,242,78,.32)}
.form-exame{max-height:50vh;overflow-y:auto;margin-bottom:1rem;padding-right:.3rem}
.exame-bloco{margin-bottom:1.2rem}
.exame-item{display:flex;justify-content:space-between;gap:1rem;padding:.4rem 0;
  border-bottom:1px solid var(--borda);font-size:.86rem}
.exame-item b{font-family:var(--fonte-mono);font-size:.82rem}
.exame-item.fora b{color:var(--ambar)}
.exame-item.fora::after{content:"⚠";margin-left:.3rem;color:var(--ambar)}

/* ---- refeições nos ajustes ---- */
.cfg-slots{display:flex;flex-direction:column;gap:.2rem}
.troca-mini{padding:.5rem 0;font-size:.9rem;font-weight:500;border-bottom:1px solid var(--borda)}
.troca-mini:last-child{border-bottom:none}
.troca-mini>span{flex:1}
.troca-mini input[type=time]{flex:0 0 96px;width:96px;padding:.4rem .5rem!important;font-size:.8rem!important;min-height:0}

/* ---- sono na carta de humor ---- */
.botoes-sono{display:flex!important;grid-template-columns:none!important;align-items:center;margin-top:0;gap:.3rem}
.sono-valor{font-family:var(--fonte-mono);font-size:.8rem;color:var(--lilas);margin-left:.3rem}
.lt-tag.tg-treino{background:rgba(199,242,78,.16);color:var(--lima)}

/* ---- 6 abas ---- */
.abas{gap:0;padding:.35rem}
.aba{font-size:.55rem;padding:.45rem .05rem;gap:.08rem}
.aba-ic{font-size:.98rem}

/* =========================================================
   RESPONSIVO / ACESSIBILIDADE
   ========================================================= */
@media (min-width:560px){
  .balao{max-width:260px}
  .grade-conquistas{grid-template-columns:repeat(auto-fill,minmax(110px,1fr))}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.05ms!important}
  .aurora,.grao{animation:none}
}
:focus-visible{outline:2px solid var(--lima);outline-offset:3px;border-radius:6px}