:root{
  --bg:#0f1115; --card:#181b22; --card2:#20242e; --border:#2b2f3a;
  --txt:#eef1f6; --muted:#8b93a5; --consumido:#4da6ff; --quemado:#ff7847;
  --accent:#28c76f; --danger:#ff5c5c; --radius:16px;
}
*{box-sizing:border-box}
body{margin:0;font-family:'Segoe UI',system-ui,sans-serif;background:var(--bg);color:var(--txt);}
.app{max-width:480px;margin:0 auto;min-height:100vh;display:flex;flex-direction:column;padding-bottom:80px;}
header.topbar{padding:18px 20px 6px;display:flex;justify-content:space-between;align-items:center;}
header.topbar h1{font-size:1.1rem;margin:0;font-weight:600;}
header.topbar input[type=date]{background:var(--card2);color:var(--txt);border:1px solid var(--border);border-radius:10px;padding:6px 10px;}

.ring-wrap{display:flex;flex-direction:column;align-items:center;padding:10px 20px 4px;}
.ring-container{position:relative;width:230px;height:230px;}
.ring-container svg{transform:rotate(-90deg);}
.ring-bg{stroke:var(--border);}
.ring-consumo{stroke:var(--consumido);transition:stroke-dashoffset .6s ease;}
.ring-quema{stroke:var(--quemado);transition:stroke-dashoffset .6s ease;}
.ring-center{position:absolute;top:0;left:0;width:100%;height:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;}
.ring-center .kcal-num{font-size:2rem;font-weight:700;}
.ring-center .kcal-label{font-size:.75rem;color:var(--muted);}

.legend{display:flex;gap:18px;margin-top:14px;font-size:.85rem;}
.legend span{display:flex;align-items:center;gap:6px;}
.dot{width:10px;height:10px;border-radius:50%;display:inline-block;}
.dot.consumido{background:var(--consumido);}
.dot.quemado{background:var(--quemado);}

.macros{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;padding:16px 20px;}
.macro-card{background:var(--card);border:1px solid var(--border);border-radius:12px;padding:10px;text-align:center;}
.macro-card .val{font-weight:700;font-size:1rem;}
.macro-card .lbl{font-size:.7rem;color:var(--muted);}

section.card{background:var(--card);border:1px solid var(--border);border-radius:var(--radius);margin:10px 20px;padding:14px;}
section.card h2{margin:0 0 10px;font-size:.95rem;color:var(--muted);font-weight:600;text-transform:uppercase;letter-spacing:.5px;}

.meal-row{display:flex;justify-content:space-between;align-items:center;padding:8px 0;border-bottom:1px solid var(--border);}
.meal-row:last-child{border-bottom:none;}
.meal-row .meal-name{font-weight:600;}
.meal-row .meal-kcal{color:var(--muted);font-size:.8rem;}
.meal-items{margin-top:6px;font-size:.82rem;color:var(--muted);}
.meal-items div{display:flex;justify-content:space-between;padding:2px 0;}
.btn-add{background:var(--accent);color:#08130d;border:none;border-radius:8px;padding:5px 10px;font-size:.75rem;font-weight:600;cursor:pointer;}
.btn-add.small{padding:3px 8px;}
.btn-fav{background:var(--card2);border:1px solid var(--border);color:var(--txt);border-radius:8px;padding:5px 8px;font-size:.7rem;cursor:pointer;}

canvas{width:100%!important;height:220px!important;}

nav.bottom-menu{position:fixed;bottom:0;left:0;right:0;background:var(--card);border-top:1px solid var(--border);
  display:flex;justify-content:space-around;padding:8px 4px;max-width:480px;margin:0 auto;}
nav.bottom-menu button{background:none;border:none;color:var(--muted);display:flex;flex-direction:column;align-items:center;
  font-size:.65rem;gap:3px;cursor:pointer;flex:1;padding:4px 0;}
nav.bottom-menu button.active{color:var(--accent);}
nav.bottom-menu button .icon{font-size:1.2rem;}

.modal-overlay{position:fixed;inset:0;background:rgba(0,0,0,.6);display:none;align-items:flex-end;justify-content:center;z-index:50;}
.modal-overlay.open{display:flex;}
.modal{background:var(--card);border-radius:20px 20px 0 0;max-width:480px;width:100%;max-height:85vh;overflow-y:auto;padding:18px;}
.modal h3{margin-top:0;}
.modal .field{margin-bottom:10px;}
.modal label{display:block;font-size:.75rem;color:var(--muted);margin-bottom:4px;}
.modal input, .modal select, .modal textarea{width:100%;background:var(--card2);border:1px solid var(--border);
  color:var(--txt);border-radius:8px;padding:8px;font-size:.9rem;}
.modal .row-2{display:grid;grid-template-columns:1fr 1fr;gap:10px;}
.modal .actions{display:flex;gap:10px;margin-top:14px;}
.modal button.primary{flex:1;background:var(--accent);color:#08130d;border:none;border-radius:10px;padding:10px;font-weight:700;cursor:pointer;}
.modal button.secondary{flex:1;background:var(--card2);color:var(--txt);border:1px solid var(--border);border-radius:10px;padding:10px;cursor:pointer;}
.close-x{position:absolute;right:16px;top:16px;background:none;border:none;color:var(--muted);font-size:1.3rem;cursor:pointer;}

.food-list{max-height:260px;overflow-y:auto;margin-top:8px;}
.food-item{display:flex;justify-content:space-between;align-items:center;padding:8px 6px;border-bottom:1px solid var(--border);}
.food-item:hover{background:var(--card2);}
.tabs{display:flex;gap:8px;margin-bottom:10px;}
.tab{flex:1;text-align:center;padding:6px;border-radius:8px;background:var(--card2);cursor:pointer;font-size:.75rem;color:var(--muted);}
.tab.active{background:var(--accent);color:#08130d;font-weight:700;}

.history-item{padding:10px 0;border-bottom:1px solid var(--border);}
.history-item .date{font-weight:700;}
.history-item .sub{font-size:.8rem;color:var(--muted);display:flex;justify-content:space-between;}

.empty{color:var(--muted);font-size:.85rem;text-align:center;padding:10px;}