* { box-sizing: border-box; font-family: system-ui, -apple-system, 'Segoe UI', Roboto, Arial, sans-serif; }
body { background:#f7f7f8; color:#111; padding:30px; }
main{ max-width:520px; margin:0 auto; background:#fff; padding:20px; border-radius:8px; box-shadow:0 4px 12px rgba(0,0,0,0.06);} 
h1{ margin-top:0 }
.row{ display:flex; gap:12px; align-items:center; margin-bottom:12px }
.row label{ min-width:120px }
input[type=number], select{ flex:1; padding:8px; border:1px solid #ddd; border-radius:6px }
button{ padding:10px 14px; border:none; background:#0078d4; color:#fff; border-radius:6px }
.hidden{ display:none }
.note{ font-size:0.9rem; color:#555 }

.recipe-list{ padding-left:1.1rem }
.recipe-list li{ padding:6px 8px; border-radius:6px }
.recipe-list li.active{ background:linear-gradient(90deg, #fff8e1, #fff3d6); border:1px solid #ffd166 }

.controls{ display:flex; gap:8px; align-items:center; margin-top:12px }
.controls button{ 
	padding:8px 14px; 
	border-radius:6px; 
	border:1px solid #ccc; 
	background:#0078d4; 
	color:#fff; 
	min-width:72px;
	height:36px;
	cursor:pointer;
	font-weight:600;
}
.controls button:disabled{ opacity:0.6; cursor:default }
.controls #timerDisplay{ margin-left:8px; font-weight:600 }