dialog::backdrop { background: rgb(0 0 0 / .55); }
dialog[open] { margin: auto; max-height: 90dvh; overflow-y: auto; }
.cooking-dialog { width: min(95vw, 900px); padding: clamp(1rem, 3vw, 2rem); border-radius: 1rem; }
.cooking-toolbar, .cooking-actions { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: .75rem; }
.cooking-toolbar button, .cooking-actions button { padding: .85rem 1rem; border: 1px solid #d1d5db; border-radius: .5rem; min-height: 48px; }
.cooking-actions button:disabled { opacity: .4; }
.cooking-step-host { min-height: 35vh; padding: 2rem 0; }
.cooking-step-host label p { font-size: clamp(1.2rem, 3vw, 1.8rem); line-height: 1.65; }
.cooking-step-host .timer-btn { font-size: 1.2rem; padding: 1rem; }
.timer-finished { background: #dcfce7; color: #166534; }
.step-checkbox:focus-visible + label { outline: 3px solid #d97706; outline-offset: 3px; }
body.cooking-active { overflow: hidden; }
@media print { .no-print, dialog, header { display: none !important; } }

.cooking-actions { display: grid; grid-template-columns: 1fr 1fr; }
.cooking-actions #completeCookingStep { grid-column: 1 / -1; grid-row: 1; }
.cooking-actions #previousCookingStep { grid-column: 1; grid-row: 2; }
.cooking-actions #nextCookingStep { grid-column: 2; grid-row: 2; }