/* Стили экранов рецептов/продуктов/коллекций (поверх core/styles.css и menuplan-local.css) */
.mp-actions { display: flex; gap: 8px; flex-wrap: wrap; padding: 8px 0; }
.mp-chips { display: flex; gap: 6px; flex-wrap: wrap; padding: 4px 0 8px; }
.mp-chip { padding: 5px 11px; border-radius: 999px; font-size: 12px; font-weight: 600; cursor: pointer;
  background: var(--bg2); border: 1px solid var(--border); color: var(--text2); user-select: none; }
.mp-chip.on { background: rgba(91,110,245,.18); border-color: var(--accent); color: var(--accent2); }

.recipe-view, .recipe-edit, .product-edit { max-width: 720px; margin: 0 auto; }
.rv-header, .re-header, .pe-header { display: flex; align-items: center; gap: 8px; padding: 4px 0 12px; }
.re-header h2, .pe-header h2 { flex: 1; font-size: 17px; }
.rv-image { width: 100%; max-height: 320px; object-fit: cover; border-radius: var(--r); margin-bottom: 12px; background: var(--bg2); }
.rv-emoji { font-size: 64px; text-align: center; margin: 4px 0; }
.rv-title { font-size: 22px; font-weight: 800; margin-bottom: 6px; word-break: break-word; }
.rv-desc { color: var(--text2); font-size: 14px; line-height: 1.5; margin-bottom: 10px; }
.rv-meta { display: flex; gap: 14px; flex-wrap: wrap; font-size: 13px; color: var(--text2); margin-bottom: 10px; }
.rv-tags { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 10px; }
.rv-tag { padding: 3px 10px; border-radius: 999px; font-size: 12px; background: var(--bg2); border: 1px solid var(--border); color: var(--text2); }
.rv-section { margin-top: 18px; }
.rv-section h3 { font-size: 14px; margin-bottom: 8px; }
.rv-ingredients { list-style: none; padding: 0; }
.rv-ingredients li { padding: 7px 0; border-bottom: 1px solid var(--border); font-size: 14px; }
.ing-qty { color: var(--accent2); font-family: var(--m); margin-right: 6px; }
.rv-steps { list-style: none; padding: 0; counter-reset: s; }
.rv-steps li { display: flex; flex-wrap: wrap; gap: 4px 10px; padding: 10px 0; border-bottom: 1px solid var(--border); font-size: 14px; line-height: 1.5; }
.rv-steps .step-text { flex: 1 1 70%; }
.step-num { width: 22px; height: 22px; border-radius: 50%; background: var(--accent); color: #fff; font-size: 12px; font-weight: 700; display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; }
.step-timer, .step-tip { font-size: 12px; color: var(--text3); }
.rv-steps .step-timer, .rv-steps .step-tip { flex-basis: 100%; padding-left: 32px; }

.re-form, .pe-form { display: flex; flex-direction: column; gap: 12px; }
.re-row label, .pe-row label, .re-row-group label { display: block; font-size: 12px; color: var(--text3); margin-bottom: 4px; }
.re-row input[type=text], .re-row input[type=number], .re-row textarea, .re-row select,
.pe-row input, .pe-row select, .re-row-group input { width: 100%; padding: 9px 10px; border-radius: 8px;
  background: var(--bg2); border: 1px solid var(--border2); color: inherit; font: inherit; }
.re-row-group { display: flex; gap: 8px; }
.re-row-group > div { flex: 1; min-width: 0; }
.re-section h3 { font-size: 14px; margin-bottom: 8px; }
.re-add-btn { padding: 8px 12px; border-radius: 8px; background: var(--bg3); border: 1px solid var(--border2); color: var(--text2); font-size: 13px; font-weight: 600; cursor: pointer; margin-top: 6px; }
.re-checkbox-group { display: flex; gap: 6px; flex-wrap: wrap; }
.re-checkbox { padding: 5px 11px; border-radius: 999px; font-size: 12px; background: var(--bg2); border: 1px solid var(--border); cursor: pointer; }
.re-checkbox.checked { border-color: var(--accent); color: var(--accent2); }
.re-checkbox input { display: none; }
.re-photo { width: 100%; max-height: 220px; object-fit: cover; border-radius: var(--r); margin-bottom: 8px; display: block; }

.ing-row { display: flex; gap: 6px; align-items: center; margin-bottom: 6px; }
.ing-row .ing-name { flex: 1; min-width: 0; padding: 8px; border-radius: 8px; background: var(--bg2); border: 1px solid var(--border2); color: inherit; font: inherit; }
.ing-row .ing-qty { width: 72px; padding: 8px; border-radius: 8px; background: var(--bg2); border: 1px solid var(--border2); color: inherit; font: inherit; margin: 0; }
.ing-row .ing-unit { width: 56px; padding: 8px; border-radius: 8px; background: var(--bg2); border: 1px solid var(--border2); color: inherit; font: inherit; }
.step-row { display: flex; flex-wrap: wrap; gap: 6px; align-items: flex-start; margin-bottom: 10px; }
.step-row textarea { flex: 1 1 60%; padding: 8px; border-radius: 8px; background: var(--bg2); border: 1px solid var(--border2); color: inherit; font: inherit; }
.step-row .step-timer { width: 64px; padding: 8px; border-radius: 8px; background: var(--bg2); border: 1px solid var(--border2); color: inherit; font: inherit; }
.step-row .step-tip { flex: 1 1 60%; margin-left: 28px; padding: 8px; border-radius: 8px; background: var(--bg2); border: 1px solid var(--border2); color: inherit; font: inherit; }
.ing-remove, .step-remove { cursor: pointer; color: var(--text3); padding: 6px; }
.col-card .icon-btn { flex-shrink: 0; }