/* Simple responsive layout */
:root{
  --accent:#2b7a78;
  --muted:#666;
  --bg:#f7f7f8;
  --card:#fff;
}
*{box-sizing:border-box}
body{font-family:system-ui,-apple-system,Segoe UI,Roboto,"Helvetica Neue",Arial;margin:0;background:var(--bg);color:#111}
header{background:var(--accent);color:#fff;padding:1rem}
header h1{margin:0}
main{padding:1rem}
.controls{display:flex;gap:.5rem;align-items:center;margin-bottom:1rem}
.controls input{flex:1;padding:.5rem;border:1px solid #ccc;border-radius:4px}
.controls button{background:var(--accent);color:#fff;border:none;padding:.5rem 1rem;border-radius:4px}
.layout{display:flex;gap:1rem}
.recipe-list{width:280px;max-height:70vh;overflow:auto;background:var(--card);padding:0.5rem;border-radius:6px}
.recipe-card{padding:.5rem;border-bottom:1px solid #eee;cursor:pointer}
.recipe-card:hover{background:#fbfbfd}
.recipe-view{flex:1;background:var(--card);padding:1rem;border-radius:6px;min-height:60vh}
.placeholder{color:var(--muted)}
.btn-inline{background:#eee;border:none;padding:.25rem .5rem;border-radius:4px;margin-left:.5rem}
.modal{position:fixed;inset:0;display:flex;align-items:center;justify-content:center;background:rgba(0,0,0,.35)}
.modal.hidden{display:none}
.modal-content{background:var(--card);padding:1rem;border-radius:8px;max-width:720px;width:95%;max-height:90vh;overflow:auto;position:relative}
.close{position:absolute;right:8px;top:8px;border:none;background:transparent;font-size:1.5rem}
label{display:block;margin:.5rem 0}
input,textarea,select{width:100%;padding:.5rem;border:1px solid #ddd;border-radius:4px}
#ingredientsList .ingredient-row{display:flex;gap:.5rem}
#ingredientsList .ingredient-row input{flex:1}
.form-actions{display:flex;gap:.5rem;justify-content:flex-end;margin-top:.5rem}
.small{font-size:.9rem;color:var(--muted)}
/* Image styles */
.recipe-image {
    max-width: 100%;
    height: auto;
    max-height: 400px;
    object-fit: cover;
    border-radius: 8px;
    margin-bottom: 20px;
}

.preview-image {
    max-width: 200px;
    max-height: 200px;
    margin-top: 10px;
    display: none;
}

.preview-image[src] {
    display: block;
}

@media(max-width:800px){.layout{flex-direction:column}.recipe-list{width:100%;max-height:30vh}}