/* Dieta Tracking — preto, vermelho como acento, branco e cinza para destaque */
:root{
  --bg:#060607;--panel:#101012;--panel2:#18181b;--panel3:#202024;--line:#26262b;--line2:#34343a;
  --text:#f4f4f5;--muted:#8d8d96;--faint:#5d5d66;
  --accent:#e5383b;--accent-hi:#ff5a5d;--accent-lo:#b3262a;--accent-soft:rgba(229,56,59,.14);--accent-ink:#fff;
  --p:#f4f4f5;--c:#9a9aa3;--f:#e5383b;
  --warn:#f4f4f5;--bad:#ff5a5d;
  --r:16px;--r-sm:12px;
  --nav-h:64px;
}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html{color-scheme:dark;-webkit-text-size-adjust:100%}
html,body{margin:0;background:var(--bg);color:var(--text);
  font:16px/1.45 -apple-system,BlinkMacSystemFont,"Inter","Segoe UI",Roboto,system-ui,sans-serif;
  -webkit-font-smoothing:antialiased;overscroll-behavior-y:none}
body{min-height:100dvh;padding-bottom:calc(var(--nav-h) + env(safe-area-inset-bottom) + 12px)}
nav,button,.fab,.pill,.thumb,.ring{-webkit-user-select:none;user-select:none;-webkit-touch-callout:none}
input,select,textarea{-webkit-user-select:text!important;user-select:text!important;-webkit-touch-callout:default;touch-action:manipulation}
button,input,select{font:inherit;color:inherit}
h1{font-size:1.6rem;letter-spacing:-.02em;margin:0;font-weight:700}
h2{font-size:1rem;margin:0 0 10px;font-weight:600;letter-spacing:-.005em}
svg{display:block}

/* campos e botões */
input,select{width:100%;background:var(--panel2);border:1px solid var(--line);border-radius:var(--r-sm);
  padding:12px 14px;min-height:48px;transition:border-color .15s,background .15s}
input::placeholder{color:var(--faint)}
input:focus,select:focus{outline:none;border-color:var(--accent);background:var(--panel3)}
input[type=file]{padding:10px}
input[type=date]{color-scheme:dark}
button{background:var(--panel2);border:1px solid var(--line);border-radius:var(--r-sm);padding:10px 16px;
  min-height:46px;cursor:pointer;font-weight:550;transition:transform .08s,background .15s,border-color .15s}
button:hover{border-color:var(--line2);background:var(--panel3)}
button:active{transform:scale(.97)}
button:focus-visible,input:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
button.primary{background:var(--accent);border-color:transparent;color:var(--accent-ink);font-weight:650}
button.primary:hover{background:var(--accent-hi)}
button.danger{color:var(--bad);background:transparent;border-color:rgba(229,56,59,.35)}
button.ghost{background:none;border:none;color:var(--muted);padding:6px 10px;min-height:40px;min-width:40px}
button.ghost:hover{color:var(--accent-hi);background:var(--accent-soft)}
button:disabled{opacity:.5;cursor:default}
label.muted{display:grid;gap:6px}

/* layout */
.wrap{max-width:760px;margin:0 auto;padding:calc(18px + env(safe-area-inset-top)) 16px 84px}
.top{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:16px}
.top .sub{color:var(--muted);font-size:.9rem;margin-top:2px}
.card{background:var(--panel);border:1px solid var(--line);border-radius:var(--r);padding:16px;margin-bottom:14px}
.row{display:flex;gap:10px;align-items:center}.row>*{flex:1;min-width:0}.row>.fit{flex:0 0 auto}
.stack{display:grid;gap:12px}
.muted{color:var(--muted);font-size:.9rem}
.item{display:flex;gap:12px;align-items:center;padding:12px 0;border-top:1px solid var(--line)}
.item:first-child{border-top:none}
.item .grow{flex:1;min-width:0}
.item .name{font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.thumb{width:48px;height:48px;border-radius:12px;object-fit:cover;background:var(--panel2);border:1px solid var(--line);
  flex:0 0 48px;display:grid;place-items:center;color:var(--faint)}
.thumb svg{width:22px;height:22px}
.pill{background:var(--panel2);border:1px solid var(--line);border-radius:99px;padding:3px 11px;font-size:.8rem;color:var(--muted);white-space:nowrap}
.pill.red{background:var(--accent-soft);border-color:transparent;color:var(--accent-hi)}
.empty{text-align:center;color:var(--muted);padding:18px 8px;font-size:.92rem}
.big{font-size:2rem;font-weight:700;line-height:1.1;letter-spacing:-.02em}
.err{color:var(--bad);min-height:1.2em;font-size:.92rem}

/* barras e macros */
.bar{height:6px;background:var(--panel3);border-radius:99px;overflow:hidden}
.bar>i{display:block;height:100%;background:var(--accent);border-radius:99px;transition:width .4s cubic-bezier(.2,.8,.2,1)}
.bar.over>i{background:var(--accent-hi)}
.macros{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-top:14px}
.macro{display:grid;gap:4px}
.macro b{font-size:1.02rem;letter-spacing:-.01em}
.macro .bar>i{background:var(--m)}
.meal-head{display:flex;justify-content:space-between;align-items:center;gap:10px;margin-bottom:6px}
.meal-head h2{margin:0}
.time{color:var(--accent-hi);font-variant-numeric:tabular-nums;font-weight:650;margin-right:8px}

/* anel de calorias */
.hero{display:grid;grid-template-columns:auto 1fr;gap:18px;align-items:center}
.ring{position:relative;width:148px;height:148px}
.ring svg{width:100%;height:100%;transform:rotate(-90deg)}
.ring .trk{stroke:var(--panel3)}
.ring .val{stroke:var(--accent);stroke-linecap:round;transition:stroke-dashoffset .6s cubic-bezier(.2,.8,.2,1)}
.ring.over .val{stroke:var(--accent-hi)}
.ring .mid{position:absolute;inset:0;display:grid;place-content:center;text-align:center}
.ring .mid b{font-size:1.9rem;line-height:1;letter-spacing:-.03em}
.ring .mid span{color:var(--muted);font-size:.78rem;margin-top:4px}
.stat{display:grid;gap:2px;margin-bottom:10px}
.stat:last-child{margin-bottom:0}
.stat b{font-size:1.15rem}
.stat span{color:var(--muted);font-size:.85rem}

/* navegação */
nav{position:fixed;left:0;right:0;bottom:0;z-index:20;display:flex;background:rgba(10,10,11,.92);
  -webkit-backdrop-filter:saturate(1.4) blur(16px);backdrop-filter:saturate(1.4) blur(16px);
  border-top:1px solid var(--line);padding-bottom:env(safe-area-inset-bottom)}
nav .brand{display:none}
nav button{flex:1;border:none;border-radius:0;background:none;color:var(--faint);min-height:var(--nav-h);
  font-size:.68rem;font-weight:550;display:grid;gap:3px;place-items:center;align-content:center;position:relative;padding:6px 2px}
nav button:hover{background:none;color:var(--muted)}
nav button svg{width:23px;height:23px}
nav button.on{color:var(--text)}
nav button.on svg{color:var(--accent)}
nav button.on::before{content:"";position:absolute;top:0;left:30%;right:30%;height:2px;border-radius:0 0 4px 4px;background:var(--accent)}

/* botão flutuante */
.fab{position:fixed;right:18px;bottom:calc(var(--nav-h) + env(safe-area-inset-bottom) + 16px);z-index:15;
  width:58px;height:58px;min-height:58px;border-radius:50%;padding:0;display:grid;place-items:center;
  background:var(--accent);border:none;color:#fff;box-shadow:0 8px 24px rgba(229,56,59,.4)}
.fab:hover{background:var(--accent-hi)}
.fab svg{width:26px;height:26px}

/* folhas (modais) */
.sheet-bg{position:fixed;inset:0;background:rgba(0,0,0,.66);z-index:50;display:flex;align-items:flex-end;justify-content:center;
  animation:fade .18s ease-out}
.sheet{background:var(--panel);border:1px solid var(--line);border-bottom:none;border-radius:22px 22px 0 0;width:100%;max-width:640px;
  max-height:90dvh;overflow:auto;padding:8px 18px;padding-bottom:calc(20px + env(safe-area-inset-bottom));
  animation:rise .26s cubic-bezier(.2,.8,.2,1)}
.sheet .grab{width:40px;height:4px;border-radius:4px;background:var(--line2);margin:6px auto 14px}
@keyframes fade{from{opacity:0}}
@keyframes rise{from{transform:translateY(40px);opacity:0}}
@media (min-width:700px){.sheet-bg{align-items:center}.sheet{border-radius:22px;border-bottom:1px solid var(--line);max-height:84dvh}}
.action-grid{display:grid;gap:10px}
.action{display:flex;align-items:center;gap:14px;text-align:left;padding:14px;min-height:64px}
.action .ico{width:42px;height:42px;border-radius:12px;background:var(--accent-soft);color:var(--accent-hi);display:grid;place-items:center;flex:0 0 42px}
.action .ico svg{width:22px;height:22px}
.action b{display:block}
.action span.muted{display:block;font-weight:400}

/* abas internas, tabela, gráfico */
.tabs{display:flex;gap:4px;margin-bottom:14px;background:var(--panel);border:1px solid var(--line);border-radius:14px;padding:4px}
.tabs button{flex:1;border:none;background:none;min-height:40px;color:var(--muted)}
.tabs button.on{background:var(--panel3);color:var(--text)}
table{width:100%;border-collapse:collapse;font-size:.88rem;font-variant-numeric:tabular-nums}
th,td{padding:8px 4px;text-align:right;border-top:1px solid var(--line)}
th:first-child,td:first-child{text-align:left}
th{color:var(--muted);font-weight:500;border-top:none}
.chart{display:flex;align-items:flex-end;gap:3px;height:120px;margin:10px 0 6px}
.chart .col{flex:1;display:flex;flex-direction:column;justify-content:flex-end;height:100%}
.chart .in{background:var(--accent);border-radius:4px 4px 0 0;min-height:1px}
.chart .ex{background:var(--text);opacity:.85;margin-top:2px;border-radius:0 0 3px 3px}
.legend{display:flex;gap:16px;font-size:.8rem;color:var(--muted)}
.legend i{display:inline-block;width:10px;height:10px;border-radius:3px;margin-right:6px}

/* aviso rápido */
#toast{position:fixed;left:50%;bottom:calc(var(--nav-h) + env(safe-area-inset-bottom) + 18px);transform:translate(-50%,10px);
  background:var(--text);color:#000;padding:11px 18px;border-radius:99px;font-weight:600;font-size:.92rem;opacity:0;
  pointer-events:none;transition:opacity .2s,transform .2s;z-index:80;max-width:calc(100vw - 32px);text-align:center}
#toast.show{opacity:1;transform:translate(-50%,0)}

/* login */
.login{max-width:380px;margin:0 auto;padding:max(10vh,calc(40px + env(safe-area-inset-top))) 20px calc(20px + env(safe-area-inset-bottom));min-height:100dvh;align-content:center}
.logo{width:56px;height:56px;border-radius:16px;background:var(--accent);display:grid;place-items:center;color:#fff;
  box-shadow:0 10px 30px rgba(229,56,59,.35)}
.logo svg{width:30px;height:30px}
.secret{-webkit-text-security:disc;text-security:disc}
.pad{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.pad button{min-height:54px;font-size:1.2rem}

/* chips, listas e colunas */
.chips{display:flex;flex-wrap:wrap;gap:8px;margin:10px 0}
.chips button{min-height:38px;min-width:38px;padding:6px 12px;font-size:.9rem;border-radius:99px}
.chips button.on{background:var(--accent);color:#fff;border-color:transparent}
.cols{display:grid;grid-template-columns:1fr 1fr;gap:14px;align-items:start}
.cols>.card{margin-bottom:0}
.cols>.card:last-child{position:sticky;top:12px;max-height:calc(100dvh - 100px);overflow:auto}
.stickybar{position:sticky;bottom:calc(var(--nav-h) + env(safe-area-inset-bottom) + 6px);background:var(--panel);
  padding:12px 0 4px;margin-top:10px;border-top:1px solid var(--line);z-index:3}
input[type=checkbox]{accent-color:var(--accent);width:22px;min-height:22px;height:22px;padding:0}

@media (max-width:820px){.cols{grid-template-columns:1fr}.cols>.card{margin-bottom:14px}
  .cols>.card:last-child{position:static;max-height:none}}
@media (max-width:520px){.ring{width:128px;height:128px}.ring .mid b{font-size:1.55rem}.hero{gap:14px}}
@media (max-width:330px){.hero{grid-template-columns:1fr;justify-items:center}.stat{text-align:center}}

/* computador: menu lateral */
@media (min-width:960px){
  body{padding-bottom:24px;padding-left:232px}
  nav{top:0;bottom:0;right:auto;width:232px;flex-direction:column;justify-content:flex-start;padding:22px 14px;
    border-top:none;border-right:1px solid var(--line);background:var(--panel);gap:4px}
  nav .brand{display:flex;align-items:center;gap:12px;padding:6px 10px 22px;font-weight:700;font-size:1.05rem}
  nav .brand .logo{width:38px;height:38px;border-radius:11px;box-shadow:none}
  nav .brand .logo svg{width:20px;height:20px}
  nav button{flex:0 0 auto;display:flex;flex-direction:row;gap:14px;justify-content:flex-start;min-height:46px;
    border-radius:12px;padding:0 14px;font-size:.95rem;color:var(--muted)}
  nav button:hover{background:var(--panel2);color:var(--text)}
  nav button.on{background:var(--accent-soft);color:var(--text)}
  nav button.on::before{display:none}
  .fab{bottom:28px;right:32px}
  #toast{bottom:28px;left:calc(50% + 116px)}
  .stickybar{bottom:0}
  .wrap{padding-top:28px}
}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}
/* teclado na tela do login */
#osk{background:var(--panel);border:1px solid var(--line);border-radius:var(--r);padding:10px}
#osk[hidden]{display:none}
.osk-row{display:flex;gap:5px;margin-bottom:5px;justify-content:center}
.osk-row button{flex:1;min-width:0;min-height:46px;padding:0;font-size:1.05rem;border-radius:10px}
.osk-row button.wide{flex:4}
.osk-row button.on{background:var(--accent);border-color:transparent;color:#fff}

/* histórico e avaliações */
.meas-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.hist{border-top:1px solid var(--line);padding:14px 0}
.hist:first-child{border-top:none}
.hist.example{opacity:.92}
.hist-head{display:flex;align-items:center;gap:8px;margin-bottom:8px}
.hist-head b{font-variant-numeric:tabular-nums}
.hist-head .ghost{margin-left:auto}
.chgs{display:grid;gap:4px;margin-bottom:8px}
.chg{display:flex;justify-content:space-between;gap:10px;font-size:.92rem}
.chg .arrow{font-style:normal;color:var(--accent-hi);margin:0 2px}
.snap{margin-bottom:8px}
.meas-list{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:8px}
.meas{display:grid;gap:2px;background:var(--panel2);border:1px solid var(--line);border-radius:12px;padding:8px 10px;font-size:.9rem}
.meas b{font-size:1rem}
.delta{font-size:.8rem;font-weight:600}
.delta{color:var(--muted)}
.note{margin-top:8px;color:var(--muted);font-size:.9rem;font-style:italic}

/* cumprimento da meta e comparação */
.adh{margin:10px 0 12px;padding:12px;background:var(--panel2);border:1px solid var(--line);border-radius:14px}
.adh-title{font-size:.82rem;color:var(--muted);margin-bottom:10px;font-weight:600}
.adh-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:12px}
.adh-item{display:grid;gap:5px}
.adh-top{display:flex;justify-content:space-between;align-items:baseline;font-size:.9rem}
.adh-item .bar i{transition:none}
.adh-item .muted{font-size:.78rem}
.train{margin:10px 0 0;font-size:.92rem}
.train .pill{margin-right:6px}
.open-eval{width:100%;margin-top:12px}
table.cmp{margin-bottom:6px}
table.cmp td:first-child{color:var(--muted)}
table.cmp th{font-size:.8rem}
.cmp-h{font-size:.95rem;margin:16px 0 6px}
.cmp-train{display:grid;grid-template-columns:1fr 1fr;gap:12px;font-size:.92rem}

/* barra "gerenciando outra conta" */
.manage-bar{position:sticky;top:0;z-index:30;display:flex;align-items:center;justify-content:space-between;gap:12px;
  background:var(--accent);color:#fff;padding:calc(8px + env(safe-area-inset-top)) 16px 8px;font-size:.9rem}
.manage-bar button{min-height:34px;padding:4px 12px;background:rgba(0,0,0,.25);border:none;color:#fff;border-radius:99px;font-size:.85rem}
@media (min-width:960px){.manage-bar{margin-left:-232px;padding-left:248px}}

/* dieta: barra de totais fixa e itens editáveis */
.diet-sum{position:sticky;top:var(--sticky-top,0);z-index:12;display:grid;grid-template-columns:1.25fr 1fr 1fr 1fr;gap:12px;
  background:rgba(10,10,11,.94);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);
  border:1px solid var(--line);border-radius:var(--r);padding:12px 14px;margin:0 0 14px;box-shadow:0 8px 24px rgba(0,0,0,.45)}
.wrap.managed{--sticky-top:48px}
.dt-cell{display:grid;gap:4px;min-width:0}
.dt-cell .muted{font-size:.74rem}
.dt-cell b{font-size:1.05rem;letter-spacing:-.01em;white-space:nowrap}
.dt-cell small{font-size:.72rem;font-weight:500;color:var(--muted)}
@media (max-width:420px){.diet-sum{gap:8px;padding:10px 12px}.dt-cell b{font-size:.92rem}.dt-cell small{font-size:.64rem}}
.item.editable{cursor:pointer;border-radius:10px;transition:background .15s}
.item.editable:hover{background:var(--panel2)}
.item.editable:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.edit-hint{font-size:.78rem;color:var(--faint);padding:4px 8px}
.item.editable:hover .edit-hint{color:var(--accent-hi)}
.qty-row{display:grid;grid-template-columns:56px 1fr 56px;gap:10px;align-items:center}
.qty-row button{min-height:56px;font-size:1.5rem;padding:0}
.qty-in{display:flex;align-items:center;gap:8px;background:var(--panel2);border:1px solid var(--line);border-radius:var(--r-sm);padding:0 14px}
.qty-in input{border:none;background:none;text-align:center;font-size:1.5rem;font-weight:700;min-height:56px;padding:0}
.qty-in input:focus{background:none}
.qty-in:focus-within{border-color:var(--accent)}

.muted b{color:var(--text)}
@media (max-width:520px){.edit-hint{display:none}}

/* refeições recolhíveis */
.meal{padding:0;overflow:hidden}
.meal-toggle{width:100%;display:flex;align-items:center;gap:8px;background:none;border:none;border-radius:0;
  padding:14px 16px;min-height:56px;text-align:left}
.meal-toggle:hover{background:var(--panel2)}
.meal-title{flex:1;min-width:0;font-weight:650;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.meal-title .time{margin-right:8px}
.chev{display:grid;place-items:center;color:var(--muted);transition:transform .2s}
.chev svg{width:20px;height:20px}
.meal.collapsed .chev{transform:rotate(-90deg)}
.meal-body{padding:0 16px 16px;border-top:1px solid var(--line)}
.meal.collapsed .meal-body{display:none}
.meal.collapsed .meal-toggle{border-radius:var(--r)}
.meal.done .meal-title{color:var(--muted)}
.meal.done .meal-title .time{color:var(--muted)}
.pill.ok{background:rgba(52,199,89,.14);color:#4ade80;border-color:transparent}
.meal-all{width:100%;margin-top:10px}

/* nome de exibição do site (apenas visual) */
.domain{color:var(--accent-hi);font-size:.85rem;font-weight:600;letter-spacing:.01em;margin-top:4px}
nav .brand span{display:grid;line-height:1.15}
nav .brand small.domain{margin-top:2px;font-size:.7rem;font-weight:550}

/* botão atualizar e puxar-para-atualizar */
.refresh-btn{position:fixed;top:calc(10px + env(safe-area-inset-top));right:14px;z-index:25;width:44px;height:44px;min-height:44px;padding:0;
  border-radius:50%;display:grid;place-items:center;background:var(--accent);border:none;color:#fff;
  box-shadow:0 6px 18px rgba(229,56,59,.35)}
.refresh-btn:hover{background:var(--accent-hi)}
.refresh-btn svg{width:22px;height:22px}
.refresh-btn.with-bar{top:calc(52px + env(safe-area-inset-top))}
.refresh-btn.spin svg{animation:spin .8s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
.ptr{position:fixed;top:calc(env(safe-area-inset-top) + 8px);left:50%;z-index:60;width:42px;height:42px;border-radius:50%;
  display:grid;place-items:center;background:var(--panel3);border:1px solid var(--line2);color:var(--muted);pointer-events:none;
  box-shadow:0 6px 18px rgba(0,0,0,.5)}
.ptr svg{width:20px;height:20px}
.ptr.ready{background:var(--accent);border-color:transparent;color:#fff}
/* o título não fica sob o botão */
.wrap .top{padding-right:54px}
@media (min-width:960px){.refresh-btn{top:18px;right:24px}.refresh-btn.with-bar{top:58px}}