/* NG Коуч: пошаговый мастер плана питания. Только presentation layer. */
.meal-plan-screen{padding-bottom:calc(156px + env(safe-area-inset-bottom))}
.mp-wizard-top{display:grid;gap:16px;margin:0 0 18px;padding:18px;border:1px solid rgba(183,255,0,.22);border-radius:24px;background:linear-gradient(145deg,rgba(20,44,39,.94),rgba(8,22,29,.96));box-shadow:0 18px 38px rgba(0,0,0,.22),inset 0 1px rgba(255,255,255,.08)}
.mp-wizard-progress{display:flex;align-items:center;gap:7px;width:100%}
.mp-wizard-progress-segment{height:6px;flex:1;border-radius:999px;background:rgba(255,255,255,.12);transition:background .25s ease,box-shadow .25s ease}
.mp-wizard-progress-segment.is-complete{background:#ff9b2f;box-shadow:0 0 12px rgba(255,155,47,.42)}
.mp-wizard-progress-segment.is-current{background:#b7ff00;box-shadow:0 0 14px rgba(183,255,0,.5)}
.mp-wizard-progress-copy{display:flex;align-items:baseline;justify-content:space-between;gap:12px}
.mp-wizard-step-count{color:#b7ff00;font-size:12px;font-weight:900;letter-spacing:.08em;text-transform:uppercase}
.mp-wizard-step-title{margin:3px 0 0;color:#f7fbff;font-size:clamp(21px,5vw,28px);font-weight:950;letter-spacing:-.035em;line-height:1.08}
.mp-wizard-step-description{margin:6px 0 0;color:rgba(223,237,238,.68);font-size:13px;line-height:1.45}
.mp-step-panel{display:none;min-width:0}
.mp-step-panel.is-active{display:block;animation:mpWizardEnter .24s ease both}
.mp-step-panel.is-back{animation-name:mpWizardBack}
.mp-step-panel .meal-plan-group{margin:0}
.mp-step-panel .meal-plan-group + .meal-plan-group{margin-top:14px}
.mp-wizard-actions{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.35fr);gap:10px;margin:18px 0 22px}
.mp-wizard-actions.is-final{grid-template-columns:minmax(0,1fr)}
.mp-wizard-actions .ng-btn-primary,.mp-wizard-actions .ng-btn-secondary{min-height:52px;border-radius:17px;font-size:14px;font-weight:950}
.mp-wizard-actions .mp-wizard-next,.mp-wizard-actions .mp-wizard-generate{color:#07120b;background:linear-gradient(135deg,#caff28,#8dff00);border:1px solid rgba(213,255,119,.78);box-shadow:0 10px 24px rgba(153,255,0,.2),inset 0 1px rgba(255,255,255,.45)}
.mp-wizard-actions .mp-wizard-next:hover,.mp-wizard-actions .mp-wizard-generate:hover,.mp-wizard-actions .mp-wizard-next:focus-visible,.mp-wizard-actions .mp-wizard-generate:focus-visible{background:linear-gradient(135deg,#d7ff62,#9aff13);box-shadow:0 12px 28px rgba(153,255,0,.3),0 0 0 3px rgba(183,255,0,.14);outline:none}
.mp-wizard-actions .mp-wizard-back{color:#211406;background:linear-gradient(135deg,#ffb348,#ff8611);border:1px solid rgba(255,196,112,.78);box-shadow:0 10px 22px rgba(255,138,0,.18),inset 0 1px rgba(255,255,255,.4)}
.mp-wizard-actions .mp-wizard-back:hover,.mp-wizard-actions .mp-wizard-back:focus-visible{background:linear-gradient(135deg,#ffc36b,#ff961f);box-shadow:0 12px 26px rgba(255,138,0,.28),0 0 0 3px rgba(255,155,47,.14);outline:none}
.mp-wizard-actions button:disabled{opacity:.48;cursor:not-allowed;box-shadow:none}
.mp-validation{display:none;margin:12px 0 0;padding:11px 13px;border:1px solid rgba(251,113,133,.38);border-radius:13px;background:rgba(127,29,29,.2);color:#fecdd3;font-size:12px;line-height:1.4}
.mp-validation.is-visible{display:block}
.mp-field.has-error .ng-input,.mp-field .ng-input.mp-input-error{border-color:#fb7185!important;box-shadow:0 0 0 3px rgba(251,113,133,.13)}
.mp-review-card{display:grid;gap:11px;margin-top:14px;padding:16px;border:1px solid rgba(183,255,0,.24);border-radius:20px;background:linear-gradient(145deg,rgba(26,49,40,.8),rgba(10,27,32,.92))}
.mp-review-card h3{margin:0;color:#f6faf8;font-size:17px;font-weight:950}
.mp-review-hint{margin:-4px 0 3px;color:rgba(224,238,238,.64);font-size:12px;line-height:1.4}
.mp-review-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:9px}
.mp-review-item{min-width:0;padding:11px 12px;border:1px solid rgba(255,255,255,.1);border-radius:14px;background:rgba(255,255,255,.045)}
.mp-review-item strong{display:block;margin-bottom:4px;color:rgba(212,230,231,.6);font-size:10px;font-weight:800;text-transform:uppercase;letter-spacing:.06em}
.mp-review-item span{display:block;overflow-wrap:anywhere;color:#f6faf8;font-size:13px;font-weight:800;line-height:1.35}
.mp-review-item.is-wide{grid-column:1/-1}
.mp-wizard-note{display:flex;align-items:flex-start;gap:9px;margin:12px 0 0;color:rgba(215,232,233,.64);font-size:11px;line-height:1.45}
.mp-wizard-note i{margin-top:2px;color:#b7ff00}
.mp-generation-ready{display:flex;align-items:flex-start;gap:9px;margin:12px 0 0;padding:11px 12px;border:1px solid rgba(183,255,0,.24);border-radius:14px;background:rgba(183,255,0,.08);color:rgba(231,246,207,.82);font-size:12px;line-height:1.45}
.mp-generation-ready i{margin-top:2px;color:#b7ff00;flex:0 0 auto}
.mp-fallback-notice{border:1px solid rgba(183,255,0,.28);background:linear-gradient(135deg,rgba(183,255,0,.14),rgba(15,38,32,.76));color:rgba(232,248,214,.92)}
.mp-fallback-notice i{color:#b7ff00}
.mp-wizard-actions [hidden]{display:none!important}
.mp-wizard-generate{display:flex;align-items:center;justify-content:center;gap:8px;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mp-wizard-generate i{flex:0 0 auto}
@keyframes mpWizardEnter{from{opacity:0;transform:translateX(14px)}to{opacity:1;transform:translateX(0)}}
@keyframes mpWizardBack{from{opacity:0;transform:translateX(-14px)}to{opacity:1;transform:translateX(0)}}
@media (max-width:560px){
  .meal-plan-screen{padding-left:14px;padding-right:14px;padding-bottom:calc(168px + env(safe-area-inset-bottom))}
  .mp-wizard-top{padding:15px;border-radius:20px}
  .mp-wizard-progress{gap:4px}
  .mp-wizard-progress-segment{height:5px}
  .mp-wizard-step-title{font-size:23px}
  .mp-wizard-actions{position:relative;grid-template-columns:minmax(0,.82fr) minmax(0,1.18fr);gap:8px;margin-top:16px}
  .mp-wizard-actions .ng-btn-primary,.mp-wizard-actions .ng-btn-secondary{min-height:50px;padding:10px 9px;font-size:13px}
  .mp-wizard-actions .mp-wizard-generate{font-size:13px;padding-left:8px;padding-right:8px}
  .mp-review-grid{grid-template-columns:1fr}
  .mp-review-item.is-wide{grid-column:auto}
}
@media (prefers-reduced-motion:reduce){.mp-step-panel.is-active,.mp-wizard-progress-segment{animation:none;transition:none}}
.mp-field-hint{display:block;margin-top:5px;color:rgba(214,230,232,.55);font-size:11px;line-height:1.35}.meal-plan-card-actions{display:flex;align-items:center;gap:6px}.meal-plan-replace-button,.meal-plan-add-button{min-height:36px;padding:0 9px;border-radius:11px;font-size:11px;font-weight:850}.meal-plan-replace-button{border:1px solid rgba(255,173,50,.4);color:#ffc46a;background:rgba(255,138,0,.1)}.meal-plan-add-button{border:1px solid rgba(183,255,0,.3);color:#caff63;background:rgba(183,255,0,.1)}.meal-replace-kicker{color:#b7ff00;font-size:10px;font-weight:900;letter-spacing:.1em;text-transform:uppercase}.meal-replace-option{display:flex;width:100%;flex-direction:column;align-items:flex-start;gap:4px;margin-top:8px;padding:12px;border:1px solid rgba(183,255,0,.2);border-radius:14px;color:#fff;background:rgba(255,255,255,.05);text-align:left;cursor:pointer}.meal-replace-option:hover,.meal-replace-option:focus-visible{border-color:rgba(183,255,0,.62);outline:none}.meal-replace-option strong{font-size:13px}.meal-replace-option span,.meal-replace-option small{color:#aebdc5;font-size:11px;line-height:1.35}.meal-replace-option span{color:#d4e5c5}

/* The planner is a full-width surface inside the app's content column. */
#screenContent .meal-plan-screen > .meal-plan-settings,
#screenContent .meal-plan-screen .mp-step-panel,
#screenContent .meal-plan-screen .meal-plan-group,
#screenContent .meal-plan-screen .mp-wizard-actions,
#screenContent .meal-plan-screen #mpResult {
  width: 100%;
  max-width: none;
}

#screenContent .meal-plan-screen select.ng-input {
  color: #f5fbff !important;
  background-color: #0b1a24 !important;
  color-scheme: dark;
}

#screenContent .meal-plan-screen select.ng-input option,
#screenContent .meal-plan-screen select.ng-input optgroup {
  color: #f5fbff;
  background-color: #0b1a24;
}

.mp-plan-heading,
.mp-plan-result-heading {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 14px;
}

.mp-delete-plan-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  flex: 0 0 auto;
  min-height: 40px;
  padding: 8px 12px;
  border: 1px solid rgba(251, 113, 133, .34);
  border-radius: 12px;
  background: rgba(127, 29, 29, .18);
  color: #fda4af;
  font-size: 11px;
  font-weight: 800;
}

.mp-delete-plan-button:hover,
.mp-delete-plan-button:focus-visible {
  border-color: rgba(251, 113, 133, .7);
  background: rgba(127, 29, 29, .32);
  outline: none;
}

@media (max-width: 560px) {
  .mp-plan-heading,
  .mp-plan-result-heading { align-items: stretch; flex-direction: column; }
  .mp-delete-plan-button { width: 100%; }
}

/* Keep every wizard step as wide as the planner surface, including when a
   host layout applies a narrow grid/flex basis to the first panel. */
#screenContent .meal-plan-screen > .meal-plan-settings {
  display: block;
  width: 100%;
  max-width: none;
}

#screenContent .meal-plan-screen > .meal-plan-settings > .mp-step-panel {
  width: 100%;
  max-width: none;
  min-width: 0;
}

#screenContent .meal-plan-screen > .meal-plan-settings > .mp-step-panel.is-active > .meal-plan-group,
#screenContent .meal-plan-screen > .meal-plan-settings > .mp-step-panel.is-active > .mp-review-card {
  box-sizing: border-box;
  width: 100%;
  max-width: none;
}