/* The Calculate button asks for attention when the settings no longer match the plan on screen */
#optimize.needs-recalc { animation: recalc-pulse 1.8s ease-in-out infinite; color: #1a1030; font-weight: 800; border: 0; }
@keyframes recalc-pulse {
  0%   { background: #ffc857; box-shadow: 0 0 0 0 #ffc85799; }
  33%  { background: #ff7a59; box-shadow: 0 0 0 9px #ff7a5900; }
  66%  { background: #c58bff; box-shadow: 0 0 0 0 #c58bff99; }
  100% { background: #ffc857; box-shadow: 0 0 0 9px #ffc85700; }
}
@media (prefers-reduced-motion: reduce) {
  #optimize.needs-recalc { animation: none; background: #ffc857; outline: 3px solid #ff7a59; outline-offset: 2px; }
}
.recalc-note { display: flex; gap: 12px; align-items: flex-start; border-color: #ffc85777 !important; background: #2b2412 !important; color: #ffe9b8; margin: 12px 0; }
.recalc-note > div { display: grid; gap: 2px; }
.recalc-note b { color: #ffd77a; }
.recalc-note-icon { font-size: 22px; line-height: 1; color: #ffc857; }

/* imported setup gaps and New tags */
.advanced-facility-card.import-gap { border-color: #ffc85766 !important; background: #231f10 !important; box-shadow: inset 0 0 0 1px #ffc85722; }
.import-gap-note { display: block; color: #ffd77a !important; margin-top: 2px; }
.import-gap-hint { color: #ffd77a; }
.new-tag { display: inline-block; font-style: normal; font-size: 10px; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; background: #ffc857; color: #2a1c00; border-radius: 6px; padding: 1px 6px; margin-left: 6px; vertical-align: middle; line-height: 1.5; }
[data-advanced-tab] .new-tag { margin-left: 5px; }

/* Recipe Focus + owned ingredients */
#focus-menu .rf-list { display: grid; gap: 6px; margin: 8px 0; }
.rf-row, .rs-row { display: flex; align-items: center; gap: 8px; background: #172531; border: 1px solid #2b3c4b; border-radius: 10px; padding: 6px 8px; }
.rf-row.bad { border-color: #e9805b; background: #2a1c18; }
.rf-name, .rs-name { flex: 1; min-width: 0; display: grid; }
.rf-name small { color: #8ea2b3; }
.rf-btns { display: flex; gap: 3px; }
.rf-btns button, .rs-row > button { background: #22333f; border: 0; color: #cfe0ee; border-radius: 7px; width: 26px; height: 26px; cursor: pointer; }
.rf-btns button:disabled { opacity: .3; cursor: default; }
.rs-row input { width: 86px; background: #0d151d; border: 1px solid #34495a; color: #eaf2f8; border-radius: 8px; padding: 4px 6px; }
.rf-results { display: grid; gap: 4px; margin: 6px 0; }
.rf-add { display: flex; align-items: center; gap: 8px; text-align: left; background: #14212c; border: 1px dashed #34495a; color: inherit; border-radius: 10px; padding: 6px 8px; cursor: pointer; }
.rf-add > span { flex: 1; display: grid; min-width: 0; }
.rf-add small { color: #8ea2b3; }
.rf-add.off { opacity: .6; }
.rf-add i { font-style: normal; font-size: 18px; color: #7ecbfa; }
.rf-sub { margin: 16px 0 2px; font-size: 13px; color: #9eb0bf; text-transform: uppercase; letter-spacing: .05em; }
.rf-problem { display: grid; gap: 2px; margin: 6px 0; font-size: 13px; }
.focus-note { display: flex; gap: 12px; align-items: flex-start; margin: 10px 0; border-color: #5aa7d866 !important; background: #12222f !important; color: #cfe6f7; }
.focus-note > div { display: grid; gap: 2px; }
.focus-note b { color: #9fd3f5; }

/* ===================== Recipe Focus popup ===================== */
.focus-open { display: flex !important; align-items: center; justify-content: space-between; gap: 8px; text-align: left; width: 100%; margin: 8px 0 !important; cursor: pointer; }
.focus-open-title { font-weight: 700; }
.focus-open small { color: #a995c4; font-size: 12px; white-space: nowrap; }
.focus-open.active { background: #3a2a52; border-color: #bc86d9; }
.focus-dialog { width: min(1040px, calc(100vw - 24px)); max-width: 1040px; background: linear-gradient(150deg, #182335, #0e1822 65%); border: 1px solid #7660a0; box-shadow: 0 24px 100px #0009; }
.focus-dialog::backdrop { background: #030a13b8; backdrop-filter: blur(5px); }
.focus-dialog .advanced-setup-head p { margin: 4px 0 0; max-width: 70ch; }
.focus-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; padding: 16px 20px; overflow: auto; flex: 1 1 auto; min-height: 0; }
.focus-col { display: flex; flex-direction: column; gap: 8px; min-width: 0; padding: 14px; border-radius: 14px; background: #0f1823aa; border: 1px solid #2c3b4f; align-self: start; }
.focus-col-head { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
.focus-col-head h3 { margin: 0; font-size: 12.5px; font-weight: 850; letter-spacing: .12em; text-transform: uppercase; color: #e5dcff; }
.focus-col-head span { color: #7f92a3; font-size: 12px; }
.focus-col input[type=search] { background: #0b131b; border: 1px solid #34495a; color: #eaf2f8; border-radius: 10px; padding: 10px 12px; font-size: 14px; }
.focus-col input[type=search]:focus { outline: 2px solid #a07af055; border-color: #a07af0; }
.rf-problems { padding: 0 20px; display: grid; gap: 8px; }
.rf-problems:not(:empty) { padding-top: 14px; }
.rf-problem { display: grid; gap: 2px; padding: 10px 14px; border-radius: 10px; background: #2e1d1a; border: 1px solid #b4573f; color: #ffd9cf; font-size: 13.5px; }
.rf-problem b { color: #ffb59f; }
.rf-list { display: grid; gap: 6px; }
.rf-row { display: flex; align-items: center; gap: 10px; background: #172531; border: 1px solid #2b3c4b; border-radius: 12px; padding: 7px 10px; }
.rf-row.bad { border-color: #e9805b; background: #2a1c18; }
.rf-rank { flex: none; width: 22px; height: 22px; border-radius: 50%; background: #2b2147; color: #c9b6ff; font-size: 12px; font-weight: 800; display: grid; place-items: center; }
.rf-ico { flex: none; width: 38px; height: 38px; border-radius: 10px; background: #0e1720; border: 1px solid #25333f; display: grid; place-items: center; overflow: hidden; }
.rf-ico img { width: 32px; height: 32px; object-fit: contain; display: block; }
.rf-ico.rf-fallback { color: #7f92a3; font-weight: 800; font-size: 16px; }
.rf-name { flex: 1; min-width: 0; display: grid; line-height: 1.25; }
.rf-name b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 14px; }
.rf-name small { color: #8ea2b3; font-size: 12px; }
.rf-btns { display: flex; gap: 4px; }
.rf-btns button, .rs-del { background: #22333f; border: 0; color: #cfe0ee; border-radius: 8px; width: 28px; height: 28px; cursor: pointer; font-size: 14px; }
.rf-btns button:hover:not(:disabled), .rs-del:hover { background: #31485a; }
.rf-btns button:disabled { opacity: .3; cursor: default; }
.rs-amount { width: 96px; background: #0b131b; border: 1px solid #34495a; color: #eaf2f8; border-radius: 8px; padding: 6px 8px; text-align: right; font-variant-numeric: tabular-nums; }
.rf-results { display: grid; gap: 6px; }
.rf-add { display: flex; align-items: center; gap: 10px; text-align: left; background: #121d28; border: 1px dashed #3a4f63; color: inherit; border-radius: 12px; padding: 7px 10px; cursor: pointer; }
.rf-add:hover { border-color: #a07af0; background: #181f35; }
.rf-add > span { flex: 1; display: grid; min-width: 0; line-height: 1.25; }
.rf-add b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 14px; }
.rf-add small { color: #8ea2b3; font-size: 12px; }
.rf-add.off { opacity: .6; }
.rf-add i { font-style: normal; font-size: 20px; color: #a98cf5; }
.rf-empty { margin: 4px 0; color: #7f92a3; font-size: 13.5px; }
.focus-dialog .advanced-setup-footer { align-items: center; }
@media (max-width: 760px) { .focus-grid { grid-template-columns: 1fr; padding: 12px; } .focus-dialog .advanced-setup-footer { flex-wrap: wrap; } }

.focus-col-head { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; padding: 0; margin: 0; background: none; border: 0; min-height: 0; position: static; }
.rf-add > span:not(.rf-ico) { flex: 1; display: grid; min-width: 0; line-height: 1.25; }
.rf-add > .rf-ico { flex: none; }
.rf-name { flex: 1 1 0; min-width: 0; }
.rs-amount { flex: 0 0 104px !important; width: 104px !important; max-width: 104px !important; }
.rs-row-del, .rs-del { flex: none; }
.myrv-strip-inner { max-width: 940px; justify-content: center; }
.myrv-strip-text { text-align: left; }

/* ===================== one button system for the new dialogs ===================== */
.myrv-dialog .primary, .focus-dialog .primary, .myrv-ask .primary,
.myrv-dialog .secondary, .focus-dialog .secondary, .myrv-ask .secondary {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px; width: auto; min-height: 42px; padding: 0 20px; border-radius: 12px;
  font: 700 14px/1.2 'DM Sans', sans-serif; letter-spacing: .01em; cursor: pointer; transition: transform .12s, box-shadow .12s, background .12s, border-color .12s;
}
.myrv-dialog .primary, .focus-dialog .primary, .myrv-ask .primary { border: 0; color: #fff; background: linear-gradient(120deg, #7b55d6, #a07af0); box-shadow: 0 6px 18px #7b55d647; }
.myrv-dialog .primary:hover:not(:disabled), .focus-dialog .primary:hover:not(:disabled), .myrv-ask .primary:hover:not(:disabled) { transform: translateY(-1px); box-shadow: 0 10px 24px #7b55d680; }
.myrv-dialog .secondary, .focus-dialog .secondary, .myrv-ask .secondary { background: #182636; border: 1px solid #38506a; color: #e4edf6; box-shadow: none; }
.myrv-dialog .secondary:hover:not(:disabled), .focus-dialog .secondary:hover:not(:disabled), .myrv-ask .secondary:hover:not(:disabled) { background: #20344a; border-color: #5b7da3; transform: translateY(-1px); }
.myrv-dialog .danger-soft, .focus-dialog .danger-soft { color: #ffb4a6; border-color: #6b3a35; background: #241719; }
.myrv-dialog .danger-soft:hover:not(:disabled), .focus-dialog .danger-soft:hover:not(:disabled) { background: #33201f; border-color: #a35a50; }
.myrv-dialog button:disabled, .focus-dialog button:disabled { opacity: .45; cursor: not-allowed; transform: none; box-shadow: none; }
.myrv-dialog button:focus-visible, .focus-dialog button:focus-visible, .myrv-ask button:focus-visible { outline: 2px solid #b9a2ff; outline-offset: 2px; }
.myrv-dialog .mr-cancel { min-height: 32px; padding: 0 14px; font-size: 13px; }
.myrv-dialog .mr-prof-btns .secondary { min-height: 34px; padding: 0 14px; font-size: 13px; }
.myrv-dialog .mr-go { min-height: 46px; padding: 0 28px; }
.myrv-dialog .advanced-dialog-close, .focus-dialog .advanced-dialog-close { min-height: 0; width: 36px; height: 36px; padding: 0; border-radius: 10px; background: #1a2838; border: 1px solid #38506a; color: #dbe7f2; font-size: 20px; }
.mr-tabs button { border-radius: 10px 10px 0 0; font-weight: 700; padding: 11px 16px; }
.mr-tabs button:hover { color: #fff; background: #ffffff08; }
.mr-ask-btns .primary, .mr-ask-btns .secondary { min-height: 44px; }

.bench-advice { display: flex; gap: 12px; align-items: flex-start; margin: 10px 0; border-color: #6fb98f66 !important; background: #12251d !important; color: #d4f1e1; }
.bench-advice > div { display: grid; gap: 3px; }
.bench-advice b { color: #8fe3b4; }
.bench-advice .recalc-note-icon { color: #8fe3b4; }
.focus-delta { font-weight: 800; }
.focus-delta.up { color: #8fe3b4; }
.focus-delta.down { color: #ffb59f; }

.bench-advice em.bench-t { font-style: normal; font-weight: 700; font-size: inherit; color: #c6f5dc; white-space: nowrap; display: inline; }
.bench-advice span { line-height: 1.5; }

/* two advice notes stack in the wide column (the second one used to fall into the narrow label column) */
.upgrade-card > .bench-advice { grid-column: 2; }
@media (max-width: 700px) { .upgrade-card > .bench-advice { grid-column: 1 / -1; } }

/* ===================== round 7: attention tag + popup ===================== */
.upgrade-part { position: relative; }
.upgrade-part.attention { border: 2px solid #e8b13a; box-shadow: 0 0 0 3px #e8b13a22; padding-top: 28px; }
.upgrade-part.attention.borrow { border-color: #ee5d5d; box-shadow: 0 0 0 3px #ee5d5d22; }
.attention-tag { position: absolute; top: -1px; right: -1px; border: 0; border-radius: 0 10px 0 10px; padding: 4px 11px; font: inherit; font-size: 11.5px; font-weight: 800; letter-spacing: .02em; cursor: pointer; background: #e8b13a; color: #1c1400; }
.upgrade-part.attention.borrow .attention-tag { background: #ee5d5d; color: #fff; }
.attention-tag:hover { filter: brightness(1.12); }
.attention-tag:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
.attention-dialog { width: min(640px, 94vw); }
.att-head { align-items: flex-start; }
.att-title { display: flex; gap: 14px; align-items: center; }
.att-title > img.att-ico { width: 52px; height: 52px; }
.att-title small { color: #9fb3c4; text-transform: uppercase; letter-spacing: .08em; font-size: 11px; font-weight: 700; }
.att-title h2 { margin: 2px 0 0; font-size: 20px; }
.att-ico { width: 28px; height: 28px; object-fit: contain; vertical-align: middle; flex: none; }
.att-chip { display: inline-flex; align-items: center; gap: 7px; padding: 4px 11px 4px 6px; border-radius: 999px; background: #ffffff10; border: 1px solid #ffffff1c; font-size: 13px; vertical-align: middle; margin: 2px 0; }
.att-chip .facility-mini-icon { width: 26px; height: 26px; }
.att-arrow { color: #8fa4b6; font-size: 18px; margin: 0 6px; }
.att-result { display: flex; align-items: center; gap: 10px; margin: 6px 0 12px; padding: 12px 16px; border-radius: 12px; background: #11271f; border: 1px solid #2c5d49; font-size: 14px; }
.att-result b { font-size: 17px; }
.att-result .from { color: #f09a8f; text-decoration: line-through; text-decoration-thickness: 1px; }
.att-result .to { color: #7ee2ae; }
.att-why { line-height: 1.7; margin: 0 0 14px; color: #d7e2ea; }
.att-steps { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.att-steps li { display: flex; gap: 12px; padding: 12px 14px; border-radius: 12px; background: #ffffff08; border: 1px solid #ffffff14; }
.att-n { flex: none; width: 26px; height: 26px; border-radius: 50%; background: #6b46d1; color: #fff; display: grid; place-items: center; font-weight: 800; font-size: 13px; }
.att-body p { margin: 8px 0 0; line-height: 1.55; color: #c9d6df; font-size: 13.5px; }
.att-foot { display: flex; justify-content: flex-end; margin-top: 16px; }

.attention-dialog { max-height: 92dvh; overflow: auto; }
.att-wrap { padding: 20px 22px 22px; }
.att-wrap .advanced-setup-head { padding: 0 0 12px; border: 0; }

dialog.advanced-setup-dialog.attention-dialog { width: min(640px, 94vw) !important; max-width: 640px !important; max-height: 92dvh !important; margin: auto !important; overflow: auto !important; display: block; }
dialog.advanced-setup-dialog.attention-dialog:not([open]) { display: none; }