:root{--mint: #3EB489;--mint-light: #e8f7f1;--mint-dark: #2d8a67;--bg: #f5f6fa;--surface: #ffffff;--border: #e2e8f0;--text: #1a202c;--text-muted: #718096;--shadow: 0 1px 3px rgba(0, 0, 0, .08), 0 1px 2px rgba(0, 0, 0, .04);--shadow-md: 0 4px 6px rgba(0, 0, 0, .07), 0 2px 4px rgba(0, 0, 0, .05);--radius: 12px;--radius-sm: 8px}*,*:before,*:after{box-sizing:border-box;margin:0;padding:0}body{font-family:-apple-system,BlinkMacSystemFont,Segoe UI,sans-serif;background:var(--bg);color:var(--text);line-height:1.5;min-height:100vh}button{cursor:pointer;font-family:inherit}input,select,textarea{font-family:inherit}.auth-page{min-height:100vh;display:flex;align-items:center;justify-content:center;background:linear-gradient(135deg,var(--mint-light) 0%,var(--bg) 60%)}.auth-card{background:var(--surface);border-radius:var(--radius);box-shadow:var(--shadow-md);padding:2.5rem;width:100%;max-width:420px}.auth-card h1{font-size:1.75rem;font-weight:700;color:var(--mint-dark);margin-bottom:.25rem}.auth-card .subtitle{color:var(--text-muted);font-size:.9rem;margin-bottom:2rem}.form-group{margin-bottom:1rem}.form-group label{display:block;font-size:.85rem;font-weight:500;color:var(--text-muted);margin-bottom:.4rem;text-transform:uppercase;letter-spacing:.04em}.form-group input{width:100%;padding:.65rem .9rem;border:1.5px solid var(--border);border-radius:var(--radius-sm);font-size:.95rem;transition:border-color .15s;background:var(--surface);color:var(--text)}.form-group input:focus{outline:none;border-color:var(--mint)}.btn-primary{width:100%;padding:.75rem;background:var(--mint);color:#fff;border:none;border-radius:var(--radius-sm);font-size:.95rem;font-weight:600;transition:background .15s;margin-top:.5rem}.btn-primary:hover{background:var(--mint-dark)}.btn-secondary{background:transparent;color:var(--mint);border:1.5px solid var(--mint);border-radius:var(--radius-sm);padding:.5rem 1rem;font-size:.875rem;font-weight:500;transition:background .15s,color .15s}.btn-secondary:hover{background:var(--mint-light)}.auth-switch{text-align:center;margin-top:1.5rem;font-size:.875rem;color:var(--text-muted)}.auth-switch a{color:var(--mint);text-decoration:none;font-weight:500}.auth-switch a:hover{text-decoration:underline}.error-msg{background:#fff5f5;color:#c53030;border:1px solid #fed7d7;border-radius:var(--radius-sm);padding:.6rem .9rem;font-size:.875rem;margin-bottom:1rem}.dashboard{display:grid;grid-template-rows:auto 1fr;min-height:100vh}.topbar{display:flex;align-items:center;justify-content:space-between;padding:.875rem 1.5rem;background:var(--surface);border-bottom:1px solid var(--border);box-shadow:var(--shadow);position:sticky;top:0;z-index:10}.topbar-brand{font-size:1.2rem;font-weight:700;color:var(--mint-dark);letter-spacing:-.02em}.topbar-brand span{color:var(--mint)}.topbar-actions{display:flex;gap:.75rem;align-items:center}.btn-logout{background:transparent;color:var(--text-muted);border:1px solid var(--border);border-radius:var(--radius-sm);padding:.4rem .85rem;font-size:.85rem;transition:color .15s,border-color .15s}.btn-logout:hover{color:var(--text);border-color:var(--text-muted)}.btn-add-meal{background:var(--mint);color:#fff;border:none;border-radius:var(--radius-sm);padding:.5rem 1.1rem;font-size:.875rem;font-weight:600;transition:background .15s}.btn-add-meal:hover{background:var(--mint-dark)}.dashboard-body{display:grid;grid-template-columns:1fr 320px;gap:1.25rem;padding:1.25rem;align-items:start;max-width:1400px;margin:0 auto;width:100%}.meals-panel{background:var(--surface);border-radius:var(--radius);box-shadow:var(--shadow);padding:1.25rem}.panel-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:1rem}.panel-title{font-size:1rem;font-weight:600;color:var(--text)}.filter-bar{display:flex;gap:.4rem;flex-wrap:wrap;margin-bottom:1.1rem}.filter-chip{padding:.3rem .75rem;border-radius:99px;font-size:.78rem;font-weight:500;border:1.5px solid var(--border);background:var(--surface);color:var(--text-muted);transition:all .15s}.filter-chip:hover{border-color:var(--mint);color:var(--mint)}.filter-chip.active{background:var(--mint);border-color:var(--mint);color:#fff}.meals-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:.85rem}.meal-card{border:1.5px solid var(--border);border-radius:var(--radius-sm);padding:1rem;transition:border-color .15s,box-shadow .15s;cursor:pointer;background:var(--surface);position:relative}.meal-card:hover{border-color:var(--mint);box-shadow:var(--shadow-md)}.meal-card.selected{border-color:var(--mint);background:var(--mint-light)}.meal-card-top{display:flex;align-items:flex-start;justify-content:space-between;gap:.5rem;margin-bottom:.6rem}.meal-card-name{font-size:.95rem;font-weight:600;color:var(--text)}.meal-checkbox{width:18px;height:18px;accent-color:var(--mint);flex-shrink:0;margin-top:2px}.meal-tags{display:flex;gap:.3rem;flex-wrap:wrap;margin-bottom:.6rem}.meal-tag{font-size:.7rem;font-weight:500;padding:.15rem .5rem;border-radius:99px;background:var(--mint-light);color:var(--mint-dark)}.meal-ingredient-count{font-size:.78rem;color:var(--text-muted)}.shopping-sidebar{background:var(--surface);border-radius:var(--radius);box-shadow:var(--shadow);padding:1.25rem;position:sticky;top:calc(56px + 1.25rem);max-height:calc(100vh - 56px - 2.5rem);overflow-y:auto}.shopping-empty{text-align:center;color:var(--text-muted);font-size:.875rem;padding:2rem 0}.shopping-empty .icon{font-size:2rem;margin-bottom:.5rem}.ingredient-list{list-style:none;margin-top:.75rem}.ingredient-item{display:flex;justify-content:space-between;align-items:baseline;padding:.45rem 0;border-bottom:1px solid var(--border);font-size:.875rem}.ingredient-item:last-child{border-bottom:none}.ingredient-name{color:var(--text)}.ingredient-amount{color:var(--text-muted);font-size:.8rem;white-space:nowrap;margin-left:.5rem}.btn-copy{width:100%;margin-top:1rem;padding:.65rem;background:var(--mint);color:#fff;border:none;border-radius:var(--radius-sm);font-size:.875rem;font-weight:600;transition:background .15s}.btn-copy:hover,.btn-copy.copied{background:var(--mint-dark)}.modal-overlay{position:fixed;top:0;right:0;bottom:0;left:0;background:#0006;display:flex;align-items:center;justify-content:center;z-index:100;padding:1rem}.modal{background:var(--surface);border-radius:var(--radius);box-shadow:0 20px 60px #00000026;padding:2rem;width:100%;max-width:560px;max-height:90vh;overflow-y:auto}.modal-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:1.5rem}.modal-title{font-size:1.15rem;font-weight:700}.btn-close{background:transparent;border:none;font-size:1.25rem;color:var(--text-muted);line-height:1;padding:.2rem}.btn-close:hover{color:var(--text)}.tags-grid{display:flex;flex-wrap:wrap;gap:.4rem;margin-top:.4rem}.tag-toggle{padding:.3rem .75rem;border-radius:99px;font-size:.78rem;font-weight:500;border:1.5px solid var(--border);background:var(--surface);color:var(--text-muted);transition:all .15s}.tag-toggle.active{background:var(--mint);border-color:var(--mint);color:#fff}.ingredient-row{display:grid;grid-template-columns:1fr 80px 90px auto;gap:.5rem;align-items:center;margin-bottom:.5rem}.ingredient-row input,.ingredient-row select{padding:.5rem .65rem;border:1.5px solid var(--border);border-radius:var(--radius-sm);font-size:.875rem;width:100%;background:var(--surface);color:var(--text)}.ingredient-row input:focus,.ingredient-row select:focus{outline:none;border-color:var(--mint)}.btn-remove-row{background:transparent;border:none;color:#e53e3e;font-size:1.1rem;padding:.2rem .4rem;line-height:1}.btn-add-row{background:transparent;border:1.5px dashed var(--border);border-radius:var(--radius-sm);color:var(--text-muted);font-size:.8rem;padding:.5rem;width:100%;margin-top:.25rem;transition:border-color .15s,color .15s}.btn-add-row:hover{border-color:var(--mint);color:var(--mint)}.modal-footer{display:flex;gap:.75rem;justify-content:space-between;align-items:center;margin-top:1.5rem}.btn-cancel{background:transparent;border:1.5px solid var(--border);border-radius:var(--radius-sm);padding:.6rem 1.2rem;font-size:.875rem;color:var(--text-muted);transition:border-color .15s}.btn-cancel:hover{border-color:var(--text-muted);color:var(--text)}.btn-submit{background:var(--mint);color:#fff;border:none;border-radius:var(--radius-sm);padding:.6rem 1.4rem;font-size:.875rem;font-weight:600;transition:background .15s}.btn-submit:hover{background:var(--mint-dark)}.section-label{font-size:.8rem;font-weight:600;color:var(--text-muted);text-transform:uppercase;letter-spacing:.05em;margin-bottom:.5rem;margin-top:1.1rem}@media (max-width: 768px){.dashboard-body{grid-template-columns:1fr}.shopping-sidebar{position:static;max-height:none}}.meal-card-bottom{display:flex;align-items:center;justify-content:space-between;margin-top:.6rem}.meal-stars{font-size:.9rem;color:var(--mint);margin-bottom:.3rem;letter-spacing:.05em}.meal-prep-time{font-size:.78rem;color:var(--text-muted);margin-bottom:.35rem}.meal-url-icon{font-size:.8rem;text-decoration:none;margin-left:.35rem;vertical-align:middle}.grocery-banner{display:flex;align-items:center;justify-content:space-between;background:var(--mint-light);border:1.5px solid var(--mint);border-radius:var(--radius-sm);padding:.6rem 1rem;margin-bottom:1rem;font-size:.875rem;color:var(--mint-dark)}.grocery-banner button{background:var(--mint);color:#fff;border:none;border-radius:var(--radius-sm);padding:.4rem .9rem;font-size:.8rem;font-weight:600;cursor:pointer;transition:background .15s}.grocery-banner button:hover{background:var(--mint-dark)}.btn-clear{width:100%;margin-top:.5rem;padding:.55rem;background:transparent;border:1.5px solid var(--border);border-radius:var(--radius-sm);color:var(--text-muted);font-size:.8rem;cursor:pointer;transition:border-color .15s,color .15s}.btn-clear:hover{border-color:#e53e3e;color:#e53e3e}.modal-detail{padding:0;overflow:hidden;display:flex;flex-direction:column}.modal-detail form{padding:1.75rem 2rem 2rem;overflow-y:auto;flex:1}.modal-image{width:100%;height:192px;object-fit:cover;display:block;flex-shrink:0}.modal-name-input{flex:1;font-size:1.1rem;font-weight:700;border:none;border-bottom:2px solid var(--border);border-radius:0;padding:.2rem 0;background:transparent;color:var(--text);min-width:0}.modal-name-input:focus{outline:none;border-bottom-color:var(--mint)}.star-rating{display:flex;gap:.1rem;margin-bottom:1rem}.star-rating button{background:transparent;border:none;font-size:1.4rem;color:var(--mint);padding:0;line-height:1;cursor:pointer;transition:transform .1s}.star-rating button:hover{transform:scale(1.2)}.image-upload-row{display:flex;align-items:center;gap:.75rem}.image-upload-row input[type=file]{font-size:.85rem;color:var(--text-muted);flex:1}.modal textarea{width:100%;padding:.65rem .9rem;border:1.5px solid var(--border);border-radius:var(--radius-sm);font-size:.875rem;resize:vertical;min-height:100px;background:var(--surface);color:var(--text);margin-top:.4rem}.modal textarea:focus{outline:none;border-color:var(--mint)}.btn-delete{background:transparent;border:1.5px solid #e53e3e;border-radius:var(--radius-sm);padding:.6rem 1.1rem;font-size:.875rem;color:#e53e3e;cursor:pointer;transition:background .15s,color .15s}.btn-delete:hover{background:#e53e3e;color:#fff}
