:root{--brand:#16a34a;--brand-dark:#166534;--surface:#fff;--bg:#f5f8f6;--text:#17201b;--muted:#667085;--line:#e5e7eb}
body{background:radial-gradient(circle at top right,#ecfdf3 0,#f5f8f6 34%,#f5f8f6 100%);color:var(--text)}
header{backdrop-filter:blur(10px);background:rgba(255,255,255,.92)}
.topbar{min-height:58px}.brand{letter-spacing:-.3px}.card{box-shadow:0 8px 30px rgba(15,23,42,.05);transition:transform .18s ease,box-shadow .18s ease}.card:hover{box-shadow:0 10px 34px rgba(15,23,42,.07)}
nav{scrollbar-width:none}nav::-webkit-scrollbar{display:none}nav button{white-space:nowrap}nav button:focus-visible,.btn:focus-visible,input:focus-visible{outline:3px solid rgba(22,163,74,.25);outline-offset:2px}
.big-action{min-width:150px}.meals-card h2{margin:0}.meal{position:relative;padding:15px 0}.meal .danger{margin-top:8px}
.loading-card{display:flex;gap:12px;align-items:center;padding:15px;border:1px dashed #bbf7d0;border-radius:14px;background:#f0fdf4}.spinner{width:22px;height:22px;border:3px solid #bbf7d0;border-top-color:var(--brand);border-radius:50%;animation:spin .8s linear infinite;display:inline-block}@keyframes spin{to{transform:rotate(360deg)}}
.modalbox{position:relative}.modal-close{position:absolute;left:12px;top:10px;border:0;background:#f3f4f6;border-radius:50%;width:34px;height:34px;font-size:24px;line-height:1;cursor:pointer;color:#374151}.modalbox #modalBox{padding-top:10px}
#preview{box-shadow:0 4px 18px rgba(0,0,0,.08);object-fit:cover}
@media(max-width:560px){main{padding:12px 12px 40px}.wrap{padding:12px}.metric{font-size:25px}.card{border-radius:16px;padding:14px}.btn{padding:10px 12px}.topbar .brand{font-size:20px}}