/* ============ RESET & BASE ============ */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{font-size:16px;-webkit-text-size-adjust:100%}
body{font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Helvetica,Arial,sans-serif;background:#0d0d0d;color:#e5e5e5;min-height:100vh;overflow-x:hidden;-webkit-tap-highlight-color:transparent}
input,select,button,textarea{font-family:inherit;font-size:inherit}
a{color:#10b981;text-decoration:none}

/* ============ SCREENS ============ */
.screen{display:none;min-height:100vh}
.screen.active{display:flex;flex-direction:column}

/* ============ AUTH ============ */
.auth-container{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:2rem;max-width:380px;margin:0 auto;width:100%}
.auth-logo{text-align:center;margin-bottom:2rem}
.auth-logo h1{font-size:2rem;font-weight:700;color:#fff;margin-top:.75rem;letter-spacing:-.5px}
.auth-subtitle{color:#666;font-size:.875rem;margin-top:.25rem}
#auth-form{width:100%}
#auth-form input{width:100%;padding:.875rem 1rem;background:#1a1a1a;border:1px solid #2a2a2a;border-radius:10px;color:#fff;font-size:1rem;margin-bottom:.75rem;outline:none;transition:border-color .2s}
#auth-form input:focus{border-color:#10b981}
.btn-primary{width:100%;padding:.875rem;background:#10b981;color:#fff;border:none;border-radius:10px;font-size:1rem;font-weight:600;cursor:pointer;transition:background .2s,transform .1s}
.btn-primary:active{transform:scale(.98);background:#0d9668}
.error-text{color:#ef4444;font-size:.8rem;text-align:center;margin-top:.5rem;min-height:1.2rem}
.success-text{color:#10b981;font-size:.8rem;text-align:center;margin-top:.5rem}
.auth-toggle{text-align:center;margin-top:1rem;color:#666;font-size:.875rem}
.auth-toggle a{margin-left:.25rem;font-weight:600}
.forgot-link{display:block;text-align:center;margin-top:.75rem;color:#666;font-size:.8rem}

/* ============ APP LAYOUT ============ */
#app-screen{display:none;flex-direction:column}
#app-screen.active{display:flex}
.page{display:none;flex-direction:column;padding:1rem 1rem 5.5rem;min-height:100vh}
.page.active{display:flex}

/* ============ DATE HEADER ============ */
.date-header{display:flex;align-items:center;justify-content:space-between;padding:.5rem 0 1rem}
.date-nav{background:none;border:1px solid #2a2a2a;border-radius:50%;width:40px;height:40px;display:flex;align-items:center;justify-content:center;color:#888;cursor:pointer;transition:border-color .2s}
.date-nav:active{border-color:#10b981;color:#10b981}
.date-center{text-align:center}
.date-center h1{font-size:1.125rem;font-weight:600;color:#fff}
.mode-badge{display:inline-block;font-size:.65rem;font-weight:600;text-transform:uppercase;letter-spacing:1px;padding:.15rem .6rem;border-radius:20px;margin-top:.25rem;background:rgba(16,185,129,.15);color:#10b981}
.mode-badge.cutting{background:rgba(245,158,11,.15);color:#f59e0b}
.mode-badge.over{color:#ef4444;background:rgba(239,68,68,.15)}

/* ============ GAUGES CARD ============ */
.gauges-card{background:#1a1a1a;border-radius:16px;padding:1rem .75rem .75rem;margin-bottom:1rem;border:1px solid #2a2a2a}
.calorie-gauge-wrap{position:relative;width:100%;max-width:200px;margin:0 auto}
.calorie-svg{width:100%;height:auto}
.calorie-center{position:absolute;bottom:4px;left:50%;transform:translateX(-50%);text-align:center}
.calorie-number{display:block;font-size:2rem;font-weight:700;color:#fff;line-height:1}
.calorie-label{display:block;font-size:.6rem;text-transform:uppercase;letter-spacing:1.5px;color:#10b981;margin-top:2px}
.gauge-range-text{font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif}
.gauge-tick{stroke:#888;stroke-width:2}

.macro-gauges{display:flex;justify-content:space-around;margin-top:.5rem}
.mini-gauge{text-align:center;flex:1}
.mini-svg{width:50px;height:auto}
.mini-value{display:block;font-size:.8rem;font-weight:700;color:#fff;margin-top:-2px}
.mini-label{display:block;font-size:.55rem;text-transform:uppercase;letter-spacing:1px;color:#888}
.mini-target{display:block;font-size:.5rem;color:#555;margin-top:1px}

/* ============ SODIUM ============ */
.sodium-card{background:#1a1a1a;border-radius:16px;padding:1rem;margin-bottom:1rem;border:1px solid #2a2a2a}
.sodium-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:.5rem}
.sodium-title{font-size:.8rem;text-transform:uppercase;letter-spacing:1px;color:#888}
.sodium-value{font-size:.8rem;color:#ccc}
.sodium-bar-bg{height:6px;background:#2a2a2a;border-radius:3px;overflow:hidden}
.sodium-bar-fill{height:100%;background:#10b981;border-radius:3px;transition:width .6s ease,background .3s;width:0}
.sodium-bar-fill.warn{background:#f59e0b}
.sodium-bar-fill.danger{background:#ef4444}
.sodium-warning{display:flex;align-items:center;gap:6px;font-size:.7rem;color:#ef4444;margin-top:.5rem;animation:fadeIn .3s}

/* ============ WATER ============ */
.water-card{background:#1a1a1a;border-radius:16px;padding:1rem;margin-bottom:1rem;border:1px solid #2a2a2a}
.water-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:.5rem}
.water-title{font-size:.8rem;text-transform:uppercase;letter-spacing:1px;color:#888}
.water-count{font-size:.85rem;color:#3b82f6;font-weight:600}
.water-cups{display:flex;gap:4px;flex-wrap:wrap;margin-bottom:.5rem}
.water-cup{width:28px;height:28px;border-radius:6px;background:#1e3a5f;display:flex;align-items:center;justify-content:center;font-size:.7rem;transition:background .2s}
.water-cup.filled{background:#3b82f6}
.water-add{background:none;border:1px dashed #2a2a2a;border-radius:8px;color:#3b82f6;padding:.4rem .75rem;font-size:.75rem;cursor:pointer}
.water-add:active{background:rgba(59,130,246,.1)}

/* ============ DAILY MEALS HEADER ============ */
.daily-meals-header{display:flex;justify-content:space-between;align-items:center;padding:.25rem 0 .5rem}
.daily-meals-title{font-size:.7rem;font-weight:700;text-transform:uppercase;letter-spacing:2px;color:#666}
.reset-day-btn{background:none;border:1px solid #333;border-radius:8px;color:#666;font-size:.65rem;font-weight:600;padding:.3rem .6rem;cursor:pointer;transition:all .2s;text-transform:uppercase;letter-spacing:.5px}
.reset-day-btn:active{border-color:#ef4444;color:#ef4444;background:rgba(239,68,68,.1)}

/* ============ MEALS ============ */
.meals-section{display:flex;flex-direction:column;gap:.75rem}
.meal-card{background:#1a1a1a;border-radius:16px;border:1px solid #2a2a2a;overflow:hidden}
.meal-header{display:flex;justify-content:space-between;align-items:center;padding:.875rem 1rem;cursor:pointer}
.meal-header-left{display:flex;align-items:baseline;gap:.5rem}
.meal-name{font-size:.75rem;font-weight:700;text-transform:uppercase;letter-spacing:1.5px;color:#ccc}
.meal-total{font-size:.7rem;color:#666}
.meal-add-btn{background:none;border:none;color:#10b981;font-size:1.25rem;cursor:pointer;width:32px;height:32px;display:flex;align-items:center;justify-content:center;border-radius:50%;transition:background .2s}
.meal-add-btn:active{background:rgba(16,185,129,.15)}
.meal-items{border-top:1px solid #222}
.meal-item{display:flex;justify-content:space-between;align-items:flex-start;padding:.625rem 1rem;border-bottom:1px solid #1f1f1f}
.meal-item:last-child{border-bottom:none}
.meal-item-info{flex:1}
.meal-item-name{font-size:.85rem;color:#ddd;margin-bottom:2px;display:flex;align-items:center;gap:6px}
.meal-item-macros{display:flex;gap:.5rem;font-size:.65rem;color:#666;flex-wrap:wrap}
.meal-item-macros span:first-child{color:#aaa}
.meal-item-remove{background:none;border:none;color:#444;font-size:1rem;cursor:pointer;padding:4px 8px;transition:color .2s}
.meal-item-remove:active{color:#ef4444}
.meal-empty{padding:.75rem 1rem;color:#555;font-size:.8rem;font-style:italic}
.food-tag{font-size:.55rem;padding:.1rem .4rem;border-radius:4px;font-weight:600;text-transform:uppercase;letter-spacing:.5px}
.food-tag.homemade{background:rgba(16,185,129,.2);color:#10b981}
.food-tag.takeout{background:rgba(245,158,11,.2);color:#f59e0b}
.food-tag.hungryroot{background:rgba(139,92,246,.2);color:#8b5cf6}

/* ============ BOTTOM NAV ============ */
.bottom-nav{position:fixed;bottom:0;left:0;right:0;background:#111;border-top:1px solid #2a2a2a;display:flex;justify-content:space-around;padding:.5rem 0 calc(.5rem + env(safe-area-inset-bottom));z-index:100}
.nav-btn{background:none;border:none;color:#555;display:flex;flex-direction:column;align-items:center;gap:2px;cursor:pointer;padding:.25rem .75rem;min-width:60px;transition:color .2s}
.nav-btn.active{color:#10b981}
.nav-btn span{font-size:.6rem;text-transform:uppercase;letter-spacing:.5px}

/* ============ MODALS ============ */
.modal-overlay{display:none;position:fixed;inset:0;background:rgba(0,0,0,.7);z-index:200;align-items:flex-end;justify-content:center;backdrop-filter:blur(4px)}
.modal-overlay.active{display:flex}
.modal{background:#1a1a1a;border-radius:20px 20px 0 0;width:100%;max-width:500px;max-height:90vh;display:flex;flex-direction:column;animation:slideUp .3s ease}
.modal-small{border-radius:16px;max-height:none;margin:auto 1rem;animation:fadeIn .2s}
.modal-header{display:flex;justify-content:space-between;align-items:center;padding:1rem 1.25rem;border-bottom:1px solid #2a2a2a}
.modal-header h2{font-size:1.1rem;font-weight:600;color:#fff}
.modal-close{background:none;border:none;color:#666;font-size:1.5rem;cursor:pointer;padding:4px}
.modal-tabs{display:flex;border-bottom:1px solid #2a2a2a}
.modal-tab{flex:1;padding:.75rem;background:none;border:none;color:#666;font-size:.8rem;font-weight:600;cursor:pointer;border-bottom:2px solid transparent;transition:color .2s,border-color .2s}
.modal-tab.active{color:#10b981;border-bottom-color:#10b981}
.modal-body{flex:1;overflow-y:auto;padding:1rem 1.25rem}
.tab-content{display:none}
.tab-content.active{display:block}
.modal-search{width:100%;padding:.75rem 1rem;background:#0d0d0d;border:1px solid #2a2a2a;border-radius:10px;color:#fff;font-size:.9rem;outline:none;margin-bottom:.75rem}
.modal-search:focus{border-color:#10b981}
.search-input-wrap{display:flex;gap:.5rem;margin-bottom:.75rem}
.search-input-wrap .modal-search{margin-bottom:0;flex:1}
.search-btn{padding:.75rem 1rem;background:#10b981;color:#fff;border:none;border-radius:10px;font-weight:600;cursor:pointer;font-size:.85rem;white-space:nowrap}
.search-btn:active{background:#0d9668}

.modal-gap-hint{padding:.5rem .75rem;background:rgba(16,185,129,.1);border:1px solid rgba(16,185,129,.2);border-radius:8px;font-size:.75rem;color:#10b981;text-align:center;font-weight:600}
.modal-food-list{display:flex;flex-direction:column;gap:.5rem}
.modal-food-item{background:#0d0d0d;border:1px solid #2a2a2a;border-radius:10px;padding:.75rem;cursor:pointer;transition:border-color .2s}
.modal-food-item:active{border-color:#10b981}
.modal-food-name{font-size:.85rem;color:#ddd;margin-bottom:4px;font-weight:500}
.modal-food-serving{font-size:.65rem;color:#666;margin-bottom:4px}
.modal-food-macros{display:flex;gap:.5rem;font-size:.65rem;color:#888}
.modal-food-macros span:first-child{color:#10b981}

/* Score badge */
.modal-food-item{position:relative;padding-right:3rem}
.score-badge{position:absolute;right:.75rem;top:50%;transform:translateY(-50%);width:28px;height:28px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:.65rem;font-weight:700;color:#fff;flex-shrink:0}
.score-badge.score-green{background:#22c55e}
.score-badge.score-yellow{background:#eab308}
.score-badge.score-red{background:#ef4444}

/* Category filter pills in modal */
.modal-category-pills{display:flex;gap:.375rem;overflow-x:auto;padding:.375rem 0 .75rem;-webkit-overflow-scrolling:touch;scrollbar-width:none}
.modal-category-pills::-webkit-scrollbar{display:none}
.modal-cat-pill{padding:.3rem .6rem;background:#111;border:1px solid #2a2a2a;border-radius:16px;color:#888;font-size:.65rem;font-weight:600;white-space:nowrap;cursor:pointer;transition:all .2s}
.modal-cat-pill.active{background:rgba(16,185,129,.15);color:#10b981;border-color:rgba(16,185,129,.3)}

/* Protein highlight */
.protein-highlight{color:#4ade80!important;font-weight:600}
.protein-gap-badge{display:inline-block;font-size:.55rem;font-weight:700;color:#4ade80;background:rgba(74,222,128,.12);padding:.1rem .4rem;border-radius:4px;text-transform:uppercase;letter-spacing:.5px;margin-left:4px}

.servings-row{display:flex;align-items:center;gap:.75rem;padding:.75rem 1.25rem;border-top:1px solid #2a2a2a;background:#151515}
.servings-row label{font-size:.85rem;color:#888}
.serv-btn{width:32px;height:32px;border-radius:50%;border:1px solid #2a2a2a;background:none;color:#fff;font-size:1.1rem;cursor:pointer;display:flex;align-items:center;justify-content:center}
.serv-btn:active{background:#2a2a2a}
#serv-count{font-size:1rem;font-weight:600;color:#fff;min-width:24px;text-align:center}
.serv-confirm{width:auto;padding:.5rem 1.25rem;font-size:.85rem}

/* ============ QUICK FORM ============ */
.quick-form input,.quick-form select{width:100%;padding:.7rem .75rem;background:#0d0d0d;border:1px solid #2a2a2a;border-radius:8px;color:#fff;font-size:.875rem;outline:none;margin-bottom:.5rem}
.quick-form input:focus,.quick-form select:focus{border-color:#10b981}
.quick-form select{-webkit-appearance:none;appearance:none;cursor:pointer}
.quick-form .form-row{display:flex;gap:.5rem}
.quick-form .form-field{flex:1}
.quick-form .form-field.full{flex:1 1 100%}
.quick-form .form-field label{display:block;font-size:.65rem;color:#666;text-transform:uppercase;letter-spacing:.5px;margin-bottom:.25rem}
.quick-form .btn-primary{margin-top:.75rem}
.checkbox-label{display:flex;align-items:center;gap:.5rem;font-size:.8rem;color:#888;margin-bottom:.5rem;cursor:pointer}
.checkbox-label input{width:auto;margin:0}

/* ============ STATS ============ */
.page-header{padding:.5rem 0 1rem}
.page-header h1{font-size:1.25rem;font-weight:700;color:#fff}
.stats-toggle{display:flex;gap:0;margin-top:.75rem;background:#111;border-radius:8px;overflow:hidden;border:1px solid #2a2a2a}
.stats-btn{flex:1;padding:.5rem;background:none;border:none;color:#666;font-size:.8rem;font-weight:600;cursor:pointer;transition:all .2s}
.stats-btn.active{background:#10b981;color:#fff}
.stats-content{display:flex;flex-direction:column;gap:1rem;padding-top:.5rem}
.stat-card{background:#1a1a1a;border-radius:12px;padding:1rem;border:1px solid #2a2a2a}
.stat-card h3{font-size:.7rem;text-transform:uppercase;letter-spacing:1px;color:#888;margin-bottom:.75rem}
.stat-row{display:flex;justify-content:space-between;align-items:center;padding:.35rem 0}
.stat-label{font-size:.8rem;color:#aaa}
.stat-value{font-size:.85rem;font-weight:600;color:#fff}
.stat-bar-wrap{margin-top:.35rem}
.stat-bar-bg{height:8px;background:#2a2a2a;border-radius:4px;overflow:hidden;margin-top:4px}
.stat-bar-fill{height:100%;border-radius:4px;transition:width .6s ease}
.stat-bar-fill.green{background:#10b981}
.stat-bar-fill.yellow{background:#f59e0b}
.stat-bar-fill.red{background:#ef4444}
.stat-bar-fill.blue{background:#3b82f6}
.stat-pct{font-size:.7rem;color:#666;margin-top:2px}
.top-foods-list{display:flex;flex-direction:column;gap:.35rem}
.top-food-item{display:flex;justify-content:space-between;align-items:center;font-size:.8rem}
.top-food-name{color:#ccc}
.top-food-count{color:#888;font-size:.7rem}

/* ============ LIBRARY ============ */
.library-search-wrap{display:flex;align-items:center;gap:.5rem;margin-top:.75rem;background:#111;border:1px solid #2a2a2a;border-radius:10px;padding:0 .75rem}
.library-search-wrap input{flex:1;padding:.65rem 0;background:none;border:none;color:#fff;font-size:.9rem;outline:none}
.library-filters{margin-bottom:.75rem}
.filter-row{display:flex;gap:.375rem;overflow-x:auto;padding:.375rem 0;-webkit-overflow-scrolling:touch;scrollbar-width:none}
.filter-row::-webkit-scrollbar{display:none}
.filter-pill{padding:.35rem .7rem;background:#111;border:1px solid #2a2a2a;border-radius:20px;color:#888;font-size:.7rem;font-weight:600;white-space:nowrap;cursor:pointer;transition:all .2s}
.filter-pill.active{background:rgba(16,185,129,.15);color:#10b981;border-color:rgba(16,185,129,.3)}
.library-list{display:flex;flex-direction:column;gap:.5rem;flex:1;overflow-y:auto}
.lib-food-card{background:#1a1a1a;border-radius:12px;padding:.875rem 1rem;border:1px solid #2a2a2a;display:flex;justify-content:space-between;align-items:flex-start}
.lib-food-info{flex:1}
.lib-food-name{font-size:.875rem;color:#ddd;font-weight:500;margin-bottom:2px}
.lib-food-serving{font-size:.65rem;color:#666;margin-bottom:4px}
.lib-food-macros{display:flex;gap:.5rem;font-size:.6rem;color:#888}
.lib-food-macros span:first-child{color:#10b981}
.lib-food-tags{display:flex;gap:4px;margin-top:4px}
.lib-food-actions{display:flex;gap:.25rem}
.lib-action-btn{background:none;border:none;color:#555;padding:6px;cursor:pointer;border-radius:6px;transition:color .2s}
.lib-action-btn:active{color:#10b981}
.lib-action-btn.delete:active{color:#ef4444}
.library-actions{padding:1rem 0;display:flex;gap:.5rem}
.library-actions .btn-primary{flex:1}

/* ============ SETTINGS ============ */
.settings-content{display:flex;flex-direction:column;gap:1rem}
.settings-section{background:#1a1a1a;border-radius:12px;padding:1rem;border:1px solid #2a2a2a}
.settings-section h3{font-size:.7rem;text-transform:uppercase;letter-spacing:1px;color:#888;margin-bottom:.75rem}
.setting-row{display:flex;justify-content:space-between;align-items:center;padding:.5rem 0;border-bottom:1px solid #1f1f1f}
.setting-row:last-child{border-bottom:none}
.setting-label{font-size:.85rem;color:#ccc}
.setting-label small{display:block;font-size:.65rem;color:#666;margin-top:1px}
.setting-input{width:100px;padding:.4rem .5rem;background:#0d0d0d;border:1px solid #2a2a2a;border-radius:6px;color:#fff;font-size:.85rem;text-align:right;outline:none}
.setting-input:focus{border-color:#10b981}
.mode-buttons{display:flex;gap:.375rem;flex-wrap:wrap}
.mode-btn{padding:.4rem .75rem;background:#0d0d0d;border:1px solid #2a2a2a;border-radius:8px;color:#888;font-size:.75rem;font-weight:600;cursor:pointer;transition:all .2s}
.mode-btn.active{background:rgba(16,185,129,.15);color:#10b981;border-color:rgba(16,185,129,.3)}
.settings-actions{display:flex;gap:.5rem;margin-top:.5rem}
.settings-actions button{flex:1}
.btn-secondary{padding:.6rem;background:none;border:1px solid #2a2a2a;border-radius:8px;color:#888;font-size:.8rem;cursor:pointer;transition:all .2s}
.btn-secondary:active{border-color:#10b981;color:#10b981}
.btn-danger{padding:.6rem;background:none;border:1px solid #ef4444;border-radius:8px;color:#ef4444;font-size:.8rem;cursor:pointer}
.btn-danger:active{background:rgba(239,68,68,.15)}
.setting-email{font-size:.85rem;color:#10b981}
.sync-status{font-size:.7rem;padding:.25rem .5rem;border-radius:6px;background:rgba(16,185,129,.1);color:#10b981}
.sync-status.offline{background:rgba(245,158,11,.1);color:#f59e0b}

/* ============ SETTINGS - ENHANCED ============ */
.dual-input{display:flex;align-items:center;gap:.25rem;flex-wrap:wrap}
.dual-input .setting-input{width:70px}
.unit-label{font-size:.7rem;color:#666;min-width:18px}
.settings-mode-label{font-size:.6rem;color:#10b981;font-weight:600;text-transform:none;letter-spacing:0;margin-left:.5rem}
.genome-tag{font-size:.6rem;color:#ef4444;font-weight:600;text-transform:none;letter-spacing:0}

/* Goal Weight Progress */
.goal-progress-card{background:#111;border-radius:8px;padding:.75rem;margin-top:.5rem}
.goal-progress-text{font-size:.8rem;color:#ccc;line-height:1.5}
.goal-progress-text strong{color:#fff}
.goal-diff{color:#f59e0b;font-size:.75rem;margin-left:.25rem}
.goal-diff.gain{color:#3b82f6}
.goal-diff.at-goal{color:#10b981}
.goal-eta{font-size:.7rem;color:#666;margin-top:.35rem;padding-top:.35rem;border-top:1px solid #1f1f1f}

/* Formula / TDEE Display */
.formula-card{background:#111;border-radius:8px;padding:.75rem;border:1px solid #1f1f1f}
.formula-title{font-size:.7rem;font-weight:700;text-transform:uppercase;letter-spacing:1px;color:#10b981;margin-bottom:.35rem}
.formula-equation{font-size:.75rem;color:#888;font-family:'SF Mono',Menlo,monospace;margin-bottom:.5rem;padding:.35rem .5rem;background:#0d0d0d;border-radius:4px}
.formula-steps{display:flex;flex-direction:column;gap:.25rem}
.formula-step{display:flex;justify-content:space-between;align-items:center;font-size:.75rem;color:#aaa;padding:.2rem 0}
.formula-step span:last-child{color:#ccc;text-align:right}
.formula-step strong{color:#fff}
.formula-step.highlight{background:rgba(16,185,129,.08);border-radius:6px;padding:.35rem .5rem;margin-top:.25rem}
.formula-step.highlight span:first-child{color:#10b981;font-weight:600}

.setting-select{width:100%;padding:.4rem .5rem;background:#0d0d0d;border:1px solid #2a2a2a;border-radius:6px;color:#fff;font-size:.75rem;outline:none;-webkit-appearance:none;appearance:none;cursor:pointer;margin-top:.25rem}
.setting-select:focus{border-color:#10b981}

.tdee-result{background:#111;border-radius:8px;padding:.75rem;margin-top:.75rem;text-align:center}
.tdee-equation{font-size:1rem;color:#fff;font-weight:600;letter-spacing:.5px}
.tdee-equation strong{color:#10b981;font-size:1.1rem}
.tdee-op{color:#666;margin:0 .35rem;font-weight:400}
.tdee-labels{display:flex;justify-content:space-around;margin-top:.35rem}
.tdee-labels span{font-size:.55rem;text-transform:uppercase;letter-spacing:1px;color:#555}

/* Macro Target Explanations */
.macro-target-row{padding:.15rem 0}
.macro-target-row .stat-row{padding:.35rem 0 .1rem}
.macro-explanation{font-size:.65rem;color:#666;font-style:italic;padding:0 0 .35rem;border-bottom:1px solid #1f1f1f;line-height:1.3}
.macro-target-row:last-child .macro-explanation{border-bottom:none}
.macro-target-row:last-child .stat-row{border-bottom:none}

/* ============ ANIMATIONS ============ */
@keyframes slideUp{from{transform:translateY(100%)}to{transform:translateY(0)}}
@keyframes fadeIn{from{opacity:0}to{opacity:1}}

/* ============ FOOTER ============ */
.app-footer{padding:2rem 0 1rem;text-align:center}
.app-footer p{font-size:.6rem;text-transform:uppercase;letter-spacing:2px;color:#333}

/* ============ LOADING ============ */
.loading-spinner{display:inline-block;width:20px;height:20px;border:2px solid #2a2a2a;border-top-color:#10b981;border-radius:50%;animation:spin .6s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}

/* ============ DESCRIBE TAB ============ */
.describe-input-wrap{position:relative;margin-bottom:.75rem}
.describe-input-wrap .describe-textarea{margin-bottom:0;padding-right:3rem}
.describe-textarea{width:100%;padding:.75rem;background:#0d0d0d;border:1px solid #2a2a2a;border-radius:10px;color:#fff;font-size:.9rem;outline:none;resize:vertical;font-family:inherit;min-height:70px}
.describe-textarea:focus{border-color:#10b981}
.describe-textarea::placeholder{color:#555}
.describe-estimate-btn{margin-bottom:1rem}

/* Mic button */
.describe-mic-btn{position:absolute;right:8px;top:8px;width:36px;height:36px;border-radius:50%;border:1px solid #2a2a2a;background:#1a1a1a;color:#888;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all .2s;padding:0;flex-direction:column;gap:0}
.describe-mic-btn:active{background:#2a2a2a}
.describe-mic-btn.recording{background:rgba(239,68,68,.2);border-color:#ef4444;color:#ef4444;animation:mic-pulse 1.5s ease-in-out infinite}
.describe-mic-btn.recording .mic-icon{stroke:#ef4444}
.describe-mic-btn .mic-status{display:none}
.describe-mic-btn.recording .mic-status{display:block;position:absolute;bottom:-16px;font-size:.5rem;color:#ef4444;white-space:nowrap;font-weight:600;text-transform:uppercase;letter-spacing:.5px}
.describe-mic-btn.unsupported{opacity:.3;cursor:not-allowed}
@keyframes mic-pulse{0%,100%{box-shadow:0 0 0 0 rgba(239,68,68,.3)}50%{box-shadow:0 0 0 8px rgba(239,68,68,0)}}
.describe-results{display:flex;flex-direction:column;gap:.5rem;margin-bottom:.75rem}
.describe-result-card{background:#0d0d0d;border-radius:10px;padding:.75rem;border:2px solid #2a2a2a;position:relative}
.describe-result-card.confidence-exact{border-color:#22c55e}
.describe-result-card.confidence-fuzzy{border-color:#eab308}
.describe-result-card.confidence-unknown{border-color:#ef4444}
.describe-result-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:4px}
.describe-result-name{font-size:.85rem;color:#ddd;font-weight:500}
.describe-result-qty{font-size:.75rem;color:#888;font-weight:600}
.describe-result-macros{display:flex;gap:.5rem;font-size:.65rem;color:#888;margin-bottom:4px}
.describe-result-macros span:first-child{color:#10b981}
.describe-confidence-tag{display:inline-block;font-size:.55rem;font-weight:700;padding:.1rem .4rem;border-radius:4px;text-transform:uppercase;letter-spacing:.5px}
.describe-confidence-tag.exact{background:rgba(34,197,94,.15);color:#22c55e}
.describe-confidence-tag.fuzzy{background:rgba(234,179,8,.15);color:#eab308}
.describe-confidence-tag.unknown{background:rgba(239,68,68,.15);color:#ef4444}
.describe-unknown-link{font-size:.75rem;color:#10b981;cursor:pointer;margin-top:4px;display:inline-block}
.describe-unknown-link:hover{text-decoration:underline}
.describe-log-btn{margin-top:.25rem}
.describe-edit-row{display:flex;gap:.35rem;margin-top:.5rem;flex-wrap:wrap}
.describe-edit-row input{width:70px;padding:.35rem .5rem;background:#1a1a1a;border:1px solid #2a2a2a;border-radius:6px;color:#fff;font-size:.75rem;outline:none}
.describe-edit-row input:focus{border-color:#10b981}
.describe-edit-row label{font-size:.55rem;color:#666;display:block;margin-bottom:2px}

/* Photo Tab */
.photo-capture-area{display:flex;justify-content:center;padding:2rem 0}
.photo-upload-label{display:flex;flex-direction:column;align-items:center;gap:.75rem;padding:2rem;border:2px dashed #2a2a2a;border-radius:16px;cursor:pointer;transition:border-color .2s,background .2s;text-align:center;width:100%}
.photo-upload-label:active{border-color:#10b981;background:rgba(16,185,129,.05)}
.photo-upload-label span{color:#888;font-size:.9rem}
.photo-upload-hint{font-size:.75rem!important;color:#555!important}
.photo-file-input{display:none}
.photo-preview-area{display:flex;flex-direction:column;gap:.75rem}
.photo-preview-wrap{position:relative;border-radius:12px;overflow:hidden;background:#0d0d0d}
.photo-preview-img{width:100%;max-height:250px;object-fit:cover;display:block;border-radius:12px}
.photo-retake-btn{position:absolute;top:8px;right:8px;width:36px;height:36px;border-radius:50%;background:rgba(0,0,0,.7);border:1px solid #444;color:#fff;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:background .2s}
.photo-retake-btn:active{background:rgba(16,185,129,.3)}
.photo-identify-section{display:flex;flex-direction:column;gap:.5rem}
.photo-identify-prompt{color:#888;font-size:.8rem;margin:0}
.photo-identify-input-wrap{position:relative}

/* ============ VOICE TAB ============ */
.voice-area{display:flex;flex-direction:column;align-items:center;gap:.75rem;padding:1rem 0}
.voice-mic-btn{width:80px;height:80px;border-radius:50%;border:2px solid #2a2a2a;background:#1a1a1a;color:#888;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all .3s;padding:0}
.voice-mic-btn:active{background:#2a2a2a}
.voice-mic-btn.recording{background:rgba(239,68,68,.15);border-color:#ef4444;color:#ef4444;animation:voice-pulse 1.5s ease-in-out infinite}
.voice-mic-btn.recording svg{stroke:#ef4444}
.voice-mic-btn.unsupported{opacity:.3;cursor:not-allowed}
@keyframes voice-pulse{0%,100%{box-shadow:0 0 0 0 rgba(239,68,68,.4)}50%{box-shadow:0 0 0 16px rgba(239,68,68,0)}}
.voice-status{color:#888;font-size:.85rem;margin:0;min-height:1.2em}
.voice-status.active{color:#ef4444;font-weight:600}
.voice-transcript{width:100%;display:flex;flex-direction:column;gap:.25rem}
.voice-transcript-label{font-size:.7rem;color:#666;text-transform:uppercase;letter-spacing:.5px;font-weight:600}
.voice-transcript textarea{min-height:50px;resize:none}
.voice-estimate-btn{width:100%}
.voice-unsupported{color:#ef4444;font-size:.85rem;text-align:center;padding:1rem;background:rgba(239,68,68,.08);border-radius:10px;border:1px solid rgba(239,68,68,.2)}

/* ============ EAT OUT TAB ============ */
.eatout-remaining{background:linear-gradient(135deg,rgba(16,185,129,.12),rgba(16,185,129,.05));border:1px solid rgba(16,185,129,.2);border-radius:12px;padding:.75rem;margin-bottom:.75rem}
.eatout-remaining-title{font-size:.65rem;text-transform:uppercase;letter-spacing:1px;color:#10b981;font-weight:700;margin-bottom:.5rem}
.eatout-remaining-macros{display:flex;gap:.5rem;justify-content:space-between}
.eatout-remain-chip{flex:1;background:#0d0d0d;border-radius:8px;padding:.4rem .25rem;text-align:center;border:1px solid #2a2a2a}
.eatout-remain-chip.protein{border-color:rgba(74,222,128,.3);background:rgba(74,222,128,.08)}
.eatout-remain-val{display:block;font-size:.9rem;font-weight:700;color:#fff}
.eatout-remain-chip.protein .eatout-remain-val{color:#4ade80}
.eatout-remain-label{display:block;font-size:.5rem;text-transform:uppercase;letter-spacing:.5px;color:#666;margin-top:1px}
.eatout-remaining-note{font-size:.65rem;color:#888;text-align:center;margin-top:.5rem;font-style:italic}

.eatout-saved-pills{display:flex;gap:.375rem;overflow-x:auto;padding:.25rem 0 .75rem;-webkit-overflow-scrolling:touch;scrollbar-width:none}
.eatout-saved-pills::-webkit-scrollbar{display:none}
.eatout-saved-pill{padding:.4rem .75rem;background:rgba(16,185,129,.12);border:1px solid rgba(16,185,129,.25);border-radius:20px;color:#10b981;font-size:.75rem;font-weight:600;white-space:nowrap;cursor:pointer;transition:all .2s}
.eatout-saved-pill:active{background:rgba(16,185,129,.25)}

.eatout-restaurant-list{display:flex;flex-direction:column;gap:.5rem}
.eatout-restaurant-card{background:#0d0d0d;border:1px solid #2a2a2a;border-radius:12px;padding:.875rem 1rem;cursor:pointer;transition:border-color .2s}
.eatout-restaurant-card:active{border-color:#10b981}
.eatout-rest-name{font-size:.95rem;font-weight:600;color:#fff;margin-bottom:2px}
.eatout-rest-meta{font-size:.7rem;color:#888}

.eatout-menu-header{display:flex;align-items:center;gap:.5rem;margin-bottom:.75rem}
.eatout-menu-header h3{flex:1;font-size:1rem;font-weight:600;color:#fff}
.eatout-back-btn{background:none;border:1px solid #2a2a2a;border-radius:8px;color:#888;font-size:1rem;cursor:pointer;padding:.25rem .5rem;transition:all .2s}
.eatout-back-btn:active{border-color:#10b981;color:#10b981}
.eatout-save-btn{background:none;border:none;font-size:1.25rem;color:#666;cursor:pointer;padding:.25rem;transition:color .2s}
.eatout-save-btn.saved{color:#f59e0b}

.eatout-suggest-bar{display:flex;gap:0;background:#111;border-radius:8px;overflow:hidden;border:1px solid #2a2a2a;margin-bottom:.75rem}
.eatout-suggest-btn{flex:1;padding:.5rem .25rem;background:none;border:none;color:#666;font-size:.7rem;font-weight:600;cursor:pointer;transition:all .2s;white-space:nowrap}
.eatout-suggest-btn.active{background:#10b981;color:#fff}

.eatout-top-pick{background:linear-gradient(135deg,rgba(16,185,129,.15),rgba(16,185,129,.05));border:2px solid rgba(16,185,129,.4);border-radius:12px;padding:.875rem;margin-bottom:.75rem;cursor:pointer;transition:border-color .2s}
.eatout-top-pick:active{border-color:#10b981}
.eatout-top-pick-label{font-size:.55rem;text-transform:uppercase;letter-spacing:1px;color:#10b981;font-weight:700;margin-bottom:.35rem}
.eatout-top-pick-name{font-size:1rem;font-weight:600;color:#fff;margin-bottom:.25rem}
.eatout-top-pick-macros{font-size:.75rem;color:#ccc;margin-bottom:.25rem}
.eatout-top-pick-why{font-size:.65rem;color:#888;font-style:italic}

.eatout-menu-items{display:flex;flex-direction:column;gap:.5rem}
.eatout-menu-item{background:#0d0d0d;border:1px solid #2a2a2a;border-radius:10px;padding:.75rem;display:flex;align-items:center;gap:.5rem;transition:border-color .2s}
.eatout-menu-item:active{border-color:#10b981}
.eatout-item-info{flex:1;min-width:0}
.eatout-item-name{font-size:.85rem;color:#ddd;font-weight:500;margin-bottom:2px}
.eatout-item-macros{display:flex;gap:.4rem;font-size:.65rem;color:#888;flex-wrap:wrap}
.eatout-item-protein{color:#4ade80!important;font-weight:600}
.eatout-item-fit{font-size:.6rem;color:#888;margin-top:2px;font-style:italic}
.eatout-over{color:#ef4444!important}
.eatout-sodium-warn{color:#f59e0b!important;font-weight:600}
.eatout-add-btn{background:#10b981;border:none;color:#fff;width:32px;height:32px;border-radius:50%;font-size:1.1rem;cursor:pointer;display:flex;align-items:center;justify-content:center;flex-shrink:0;transition:background .2s}
.eatout-add-btn:active{background:#0d9668}

/* ============ WEIGHT TRACKER ============ */
.weight-card{background:#1a1a1a;border-radius:16px;padding:1rem;margin-bottom:1rem;border:1px solid #2a2a2a}
.weight-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:.75rem}
.weight-header-left{display:flex;align-items:baseline;gap:.5rem}
.weight-title{font-size:.8rem;text-transform:uppercase;letter-spacing:1px;color:#888}
.weight-current{font-size:1rem;font-weight:700;color:#fff}
.weight-btn{background:rgba(16,185,129,.15);border:1px solid rgba(16,185,129,.3);border-radius:8px;color:#10b981;font-size:.75rem;font-weight:600;padding:.35rem .75rem;cursor:pointer;transition:all .2s}
.weight-btn:active{background:rgba(16,185,129,.25)}
.weight-progress-wrap{margin-top:.25rem}
.weight-progress-labels{display:flex;justify-content:space-between;font-size:.6rem;color:#666;margin-bottom:4px}
.weight-progress-bg{position:relative;height:8px;background:#2a2a2a;border-radius:4px;overflow:visible}
.weight-progress-fill{position:absolute;left:0;top:0;height:100%;background:linear-gradient(90deg,#10b981,#4ade80);border-radius:4px;transition:width .6s ease;max-width:100%}
.weight-progress-marker{position:absolute;top:-3px;width:14px;height:14px;background:#fff;border:2px solid #10b981;border-radius:50%;transform:translateX(-50%);transition:left .6s ease;box-shadow:0 0 6px rgba(16,185,129,.4)}
.weight-progress-stats{display:flex;justify-content:space-between;font-size:.65rem;color:#888;margin-top:6px}
.weight-progress-stats span{display:flex;align-items:center;gap:3px}
.weight-progress-stats .lost{color:#4ade80}
.weight-progress-stats .remaining{color:#f59e0b}

/* Weight Stats Section */
.weight-stats-section{margin-top:1rem}
.weight-stats-section h3{font-size:.7rem;text-transform:uppercase;letter-spacing:1px;color:#888;margin-bottom:.75rem}
.weight-chart-wrap{background:#1a1a1a;border-radius:12px;padding:1rem;border:1px solid #2a2a2a;margin-bottom:1rem}
.weight-chart-wrap svg{width:100%;height:auto}
.weight-summary-grid{display:grid;grid-template-columns:1fr 1fr;gap:.5rem;margin-bottom:1rem}
.weight-summary-item{background:#1a1a1a;border-radius:10px;padding:.75rem;border:1px solid #2a2a2a;text-align:center}
.weight-summary-value{font-size:1.1rem;font-weight:700;color:#fff;display:block}
.weight-summary-label{font-size:.6rem;text-transform:uppercase;letter-spacing:.5px;color:#666;margin-top:2px;display:block}
.weight-summary-item.green .weight-summary-value{color:#4ade80}
.weight-summary-item.yellow .weight-summary-value{color:#f59e0b}
.weight-summary-item.blue .weight-summary-value{color:#3b82f6}
.weight-entries-list{display:flex;flex-direction:column;gap:.35rem}
.weight-entry-row{display:flex;justify-content:space-between;align-items:center;padding:.5rem .75rem;background:#1a1a1a;border-radius:8px;border:1px solid #2a2a2a;font-size:.8rem}
.weight-entry-date{color:#888}
.weight-entry-value{color:#fff;font-weight:600}
.weight-entry-note{color:#666;font-size:.7rem;font-style:italic;max-width:120px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.weight-entry-delete{background:none;border:none;color:#444;cursor:pointer;font-size:.9rem;padding:2px 6px}
.weight-entry-delete:active{color:#ef4444}

/* ============ MACRO SLIDERS ============ */
.macro-adapt-row{display:flex;justify-content:space-between;align-items:center;padding:.6rem .75rem;background:#111;border-radius:10px;margin-bottom:.75rem;border:1px solid #1f1f1f}
.macro-adapt-label{font-size:.8rem;color:#ccc;font-weight:500}
.macro-adapt-label small{display:block;font-size:.6rem;color:#666;margin-top:2px;font-weight:400}
.toggle-switch{position:relative;width:44px;height:24px;flex-shrink:0}
.toggle-switch input{opacity:0;width:0;height:0}
.toggle-track{position:absolute;inset:0;background:#2a2a2a;border-radius:12px;cursor:pointer;transition:background .3s}
.toggle-track::after{content:'';position:absolute;left:3px;top:3px;width:18px;height:18px;background:#666;border-radius:50%;transition:transform .3s,background .3s}
.toggle-switch input:checked+.toggle-track{background:rgba(16,185,129,.3)}
.toggle-switch input:checked+.toggle-track::after{transform:translateX(20px);background:#10b981}

.macro-slider-row{padding:.5rem 0;border-bottom:1px solid #1f1f1f;transition:opacity .3s}
.macro-slider-row:last-child{border-bottom:none}
.macro-slider-row.locked{opacity:.85}
.macro-slider-header{display:flex;align-items:center;gap:.5rem;margin-bottom:.35rem}
.macro-slider-label{flex:1;font-size:.85rem;color:#ccc;font-weight:500}
.macro-slider-value{font-size:.9rem;font-weight:700;color:#fff;min-width:40px;text-align:right;font-variant-numeric:tabular-nums}
.macro-slider-value small{font-size:.65rem;color:#888;font-weight:400;margin-left:1px}
.macro-lock-btn{background:none;border:none;cursor:pointer;padding:4px;color:#555;transition:color .2s,transform .2s;display:flex;align-items:center;justify-content:center;-webkit-tap-highlight-color:transparent}
.macro-lock-btn:active{transform:scale(.9)}
.macro-lock-btn.locked{color:#10b981}
.macro-lock-btn svg{width:18px;height:18px}

.macro-slider-wrap{position:relative;height:28px;display:flex;align-items:center;padding:0 2px}
.macro-slider-range-bg{position:absolute;left:0;right:0;height:6px;background:#1a1a1a;border-radius:3px;top:50%;transform:translateY(-50%)}
.macro-slider-range-highlight{position:absolute;height:6px;background:rgba(16,185,129,.2);border-radius:3px;top:50%;transform:translateY(-50%);border:1px solid rgba(16,185,129,.15);transition:left .3s,width .3s}
.macro-slider-row.locked .macro-slider-range-highlight{background:rgba(16,185,129,.1);border-color:rgba(16,185,129,.08)}

.macro-slider-wrap input[type=range]{position:relative;-webkit-appearance:none;appearance:none;width:100%;height:28px;background:transparent;outline:none;z-index:2;cursor:pointer}
.macro-slider-wrap input[type=range]::-webkit-slider-runnable-track{height:6px;background:transparent;border-radius:3px}
.macro-slider-wrap input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:22px;height:22px;background:#fff;border:3px solid #10b981;border-radius:50%;margin-top:-8px;cursor:pointer;box-shadow:0 0 8px rgba(16,185,129,.3);transition:box-shadow .2s,transform .15s}
.macro-slider-wrap input[type=range]::-webkit-slider-thumb:active{transform:scale(1.15);box-shadow:0 0 12px rgba(16,185,129,.5)}
.macro-slider-wrap input[type=range]::-moz-range-track{height:6px;background:transparent;border-radius:3px;border:none}
.macro-slider-wrap input[type=range]::-moz-range-thumb{width:22px;height:22px;background:#fff;border:3px solid #10b981;border-radius:50%;cursor:pointer;box-shadow:0 0 8px rgba(16,185,129,.3);border:3px solid #10b981}
.macro-slider-row.locked .macro-slider-wrap input[type=range]{cursor:not-allowed;pointer-events:none}
.macro-slider-row.locked .macro-slider-wrap input[type=range]::-webkit-slider-thumb{background:#2a2a2a;border-color:#555;box-shadow:none}
.macro-slider-row.locked .macro-slider-wrap input[type=range]::-moz-range-thumb{background:#2a2a2a;border-color:#555;box-shadow:none}

.macro-slider-bounds{display:flex;justify-content:space-between;font-size:.55rem;color:#444;padding:0 2px;margin-top:-2px}
.macro-slider-explain{font-size:.6rem;color:#555;font-style:italic;margin-top:2px;line-height:1.3;transition:color .3s}
.macro-slider-cal-hint{font-size:.55rem;color:#444;text-align:right;margin-top:1px;font-variant-numeric:tabular-nums}

.macro-total-row{display:flex;justify-content:space-between;align-items:center;padding:.6rem .75rem;background:rgba(16,185,129,.08);border-radius:10px;margin-top:.75rem;border:1px solid rgba(16,185,129,.15)}
.macro-total-label{font-size:.75rem;color:#888;font-weight:500}
.macro-total-value{font-size:.9rem;font-weight:700;color:#10b981;font-variant-numeric:tabular-nums}
.macro-total-value.over{color:#ef4444}
.macro-total-value.under{color:#f59e0b}

.macro-reset-btn{display:block;margin:.5rem auto 0;background:none;border:1px solid #2a2a2a;border-radius:8px;color:#666;font-size:.7rem;padding:.35rem .75rem;cursor:pointer;transition:all .2s}
.macro-reset-btn:active{border-color:#10b981;color:#10b981}

/* ============ TOAST ============ */
.toast{position:fixed;bottom:80px;left:50%;transform:translateX(-50%);background:#333;color:#fff;padding:.6rem 1.25rem;border-radius:8px;font-size:.8rem;z-index:300;animation:fadeIn .2s;pointer-events:none}

/* ── Edit Serving Modal ── */
.es-food-name{font-size:1.1rem;font-weight:600;color:#e5e5e5;margin-bottom:.5rem}
.es-macros-preview{font-size:.8rem;color:#888;margin-bottom:1rem}
.es-label{font-size:.85rem;color:#aaa;display:block;margin-bottom:.5rem}
.es-serving-controls{display:flex;align-items:center;gap:.75rem;margin-bottom:.75rem}
.es-serving-input{width:80px;text-align:center;background:#1a1a1a;border:1px solid #333;color:#e5e5e5;border-radius:8px;padding:.5rem;font-size:1.1rem;-moz-appearance:textfield}
.es-serving-input::-webkit-outer-spin-button,.es-serving-input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
.es-quick-btns{display:flex;gap:.5rem;flex-wrap:wrap;margin-bottom:1rem}
.es-quick-btn{background:#1a1a1a;border:1px solid #333;color:#ccc;padding:.4rem .75rem;border-radius:8px;font-size:.85rem;cursor:pointer;transition:all .15s}
.es-quick-btn:hover,.es-quick-btn.active{background:#10b981;color:#fff;border-color:#10b981}
.es-updated-macros{background:#1a1a1a;border-radius:10px;padding:.75rem;margin-bottom:1rem;font-size:.85rem;color:#ccc}
.es-updated-macros .es-macro-row{display:flex;justify-content:space-between;padding:.2rem 0}
.es-updated-macros .es-macro-row span:last-child{color:#e5e5e5;font-weight:500}
.es-actions{display:flex;flex-direction:column;gap:.5rem}
.es-delete-btn{background:transparent;border:1px solid #ef4444;color:#ef4444;padding:.6rem;border-radius:10px;font-size:.9rem;cursor:pointer;transition:all .15s}
.es-delete-btn:hover{background:#ef4444;color:#fff}
.meal-item{cursor:pointer;transition:background .15s}
.meal-item:active{background:rgba(255,255,255,.05)}
.meal-item-servings{font-size:.75rem;color:#10b981;font-weight:500;margin-left:.25rem}
.meal-item-info{flex:1;cursor:pointer}