/* Калькулятор блюд (03.10.2026): две колонки — состав слева, итог справа закреплён; на узких экранах итог
   уезжает в нижнюю шторку. Классы с префиксом kc-, старые calc-* остаются для других страниц (дневник и т.п.). */
.kc {
  --kc-p: #3E7CB1; --kc-f: #C9853A; --kc-c: #5E9A3E;
  --kc-g-bg: #E3F1E8; --kc-g: #2E7D52; --kc-a-bg: #FBF1DC; --kc-a: #9A6512; --kc-r-bg: #FBEAE9; --kc-r: #B3261E;
}
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .kc {
  --kc-p: #8DB8E0; --kc-f: #E8B27A; --kc-c: #A6D08A;
  --kc-g-bg: #1E3A2C; --kc-g: #8FD6AE; --kc-a-bg: #3A3220; --kc-a: #E8C27A; --kc-r-bg: #3A2323; --kc-r: #E5766D; } }
:root[data-theme="dark"] .kc {
  --kc-p: #8DB8E0; --kc-f: #E8B27A; --kc-c: #A6D08A;
  --kc-g-bg: #1E3A2C; --kc-g: #8FD6AE; --kc-a-bg: #3A3220; --kc-a: #E8C27A; --kc-r-bg: #3A2323; --kc-r: #E5766D; }

.kc [hidden], .kc-menu [hidden] { display: none !important; }
.kc.container { padding-top: 28px; padding-bottom: 56px; }
.kc-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 24px; align-items: start; }
.kc-main { min-width: 0; display: flex; flex-direction: column; gap: 14px; }
.kc-h1 { font-size: clamp(30px, 4vw, 40px); margin: 0; }
.kc-sub { color: var(--color-text-muted); margin: -4px 0 2px; max-width: 64ch; }
.kc-note { font-size: 13px; color: var(--color-text-muted); margin: 6px 0 0; }
.kc-lbl { font-size: 11.5px; font-weight: 800; letter-spacing: .07em; text-transform: uppercase; color: var(--color-text-muted); }
.kc-status { font-size: 14px; color: var(--color-text-muted); margin: 0; min-height: 0; }
.kc-status:empty { display: none; }
.kc-status.err { color: var(--color-danger); }
.kc-status a { font-weight: 700; }

/* строка ввода */
.kc-input { display: flex; flex-direction: column; gap: 10px; }
.kc-inbar { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px; align-items: center; background: var(--color-surface); border: 1px solid var(--color-border); border-radius: 18px; padding: 8px 8px 8px 14px; box-shadow: var(--shadow-card); }
.kc-inbar:focus-within { border-color: var(--color-primary); }
.kc-q { display: flex; align-items: flex-start; gap: 10px; color: var(--color-text-muted); cursor: text; min-width: 0; }
.kc-q .ico { flex: none; margin-top: 9px; }
.kc-q textarea { flex: 1; min-width: 0; height: 37px; overflow: hidden; white-space: pre-wrap; text-overflow: ellipsis; border: 0; outline: 0; resize: none; background: transparent; color: var(--color-text); font: inherit; font-size: 15.5px; line-height: 1.45; padding: 7px 0; max-height: 180px; }
.kc-q textarea:placeholder-shown { white-space: nowrap; }
.kc-q textarea::placeholder { color: var(--color-text-muted); opacity: .85; }
.kc-inbtns { display: flex; gap: 6px; align-self: start; }
.kc-ib { display: inline-flex; align-items: center; gap: 6px; height: 38px; padding: 0 12px; border-radius: 999px; border: 1px solid var(--color-border); background: var(--color-surface); color: var(--color-text); font: inherit; font-size: 13.5px; font-weight: 700; cursor: pointer; white-space: nowrap; }
.kc-ib:hover { border-color: var(--color-primary); color: var(--color-primary); }
.kc-ib.rec { background: var(--color-danger); border-color: var(--color-danger); color: #fff; animation: kc-pulse 1.2s infinite; }
@keyframes kc-pulse { 50% { box-shadow: 0 0 0 6px rgba(179, 38, 30, .18); } }
.kc-results { position: absolute; left: 0; right: 0; top: calc(100% + 6px); z-index: 40; background: var(--color-surface); border: 1px solid var(--color-border); border-radius: 16px; box-shadow: 0 16px 40px rgba(20, 40, 30, .16); max-height: 380px; overflow-y: auto; padding: 6px; }
.kc-r { display: grid; grid-template-columns: 30px minmax(0, 1fr) auto; gap: 10px; align-items: center; padding: 8px 10px; border-radius: 12px; cursor: pointer; }
.kc-r:hover, .kc-r.on { background: var(--color-surface-muted); }
.kc-r b { display: block; font-size: 14.5px; font-weight: 700; }
.kc-r small { display: block; font-size: 12px; color: var(--color-text-muted); }
.kc-r kbd { font: inherit; font-size: 11px; color: var(--color-text-muted); border: 1px solid var(--color-border); border-radius: 6px; padding: 1px 6px; }
.kc-r-parse { background: var(--color-accent-soft); margin-bottom: 4px; }
.kc-r-parse:hover, .kc-r-parse.on { background: var(--color-accent-soft); outline: 2px solid var(--color-accent); }
.kc-ico-ai { --c: var(--color-accent); }
.kc-r-empty { padding: 12px; font-size: 14px; color: var(--color-text-muted); }
.kc-link { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px; }
.kc-link input { min-width: 0; padding: 10px 12px; border-radius: 12px; border: 1px solid var(--color-border); background: var(--color-surface); color: var(--color-text); font: inherit; font-size: 14px; }
.kc-link .kc-note { grid-column: 1 / -1; margin: 0; }
.kc-quick { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; font-size: 13px; color: var(--color-text-muted); }
.kc-quick-l { margin-right: 2px; }
.kc-chip-btn { padding: 5px 11px; border-radius: 999px; border: 1px solid var(--color-border); background: var(--color-surface); color: var(--color-text); font: inherit; font-size: 13px; font-weight: 600; cursor: pointer; }
.kc-chip-btn:hover { border-color: var(--color-primary); color: var(--color-primary); }
.kc-limit { font-size: 12.5px; color: var(--color-text-muted); margin: -4px 0 0; }
.kc-banner { margin: 0; padding: 10px 14px; border-radius: 14px; background: var(--color-accent-soft); font-size: 14px; }
.kc-banner a { font-weight: 800; color: var(--color-badge-text); }
.kc-unmatched { background: var(--color-surface); border: 1px dashed var(--color-border); border-radius: 16px; padding: 10px 12px; display: flex; flex-direction: column; gap: 8px; }
.kc-um-h { margin: 0; font-size: 13px; color: var(--color-text-muted); }
.kc-um { display: grid; grid-template-columns: minmax(90px, auto) minmax(0, 1fr) 28px; gap: 8px; align-items: center; font-size: 14px; }
.kc-um > span:first-child { font-weight: 700; }
.kc-um-opts { display: flex; flex-wrap: wrap; gap: 6px; font-size: 13px; color: var(--color-text-muted); }
.kc-um-x { width: 28px; height: 28px; border-radius: 50%; border: 0; background: var(--color-surface-muted); color: var(--color-text-muted); cursor: pointer; font-size: 16px; }

/* пустое состояние */
.kc-empty { display: grid; grid-template-columns: 88px minmax(0, 1fr); gap: 16px; align-items: center; background: var(--color-surface); border: 1px solid var(--color-border); border-radius: 18px; padding: 16px 18px; }
.kc-empty-ill { width: 88px; height: 88px; }
.kc-empty p { margin: 0; font-size: 15px; }
.kc-ex { margin-top: 8px !important; color: var(--color-text-muted); font-size: 14px !important; }
.kc-ex a { display: inline-block; margin: 4px 4px 0 0; padding: 4px 11px; border-radius: 999px; background: var(--color-surface-muted); text-decoration: none; font-weight: 700; font-size: 13px; }

/* состав */
.kc-ing { background: var(--color-surface); border: 1px solid var(--color-border); border-radius: 18px; box-shadow: var(--shadow-card); }
.kc-ing-h { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; padding: 12px 14px; border-bottom: 1px solid var(--color-border); }
.kc-ing-h b { font-size: 15px; }
.kc-ing-h span { font-size: 13px; color: var(--color-text-muted); }
.kc-row { display: grid; grid-template-columns: 32px minmax(0, 1fr) 150px 132px 32px; gap: 10px; align-items: center; padding: 9px 12px 9px 14px; border-bottom: 1px solid var(--color-border); }
.kc-row:last-child { border-bottom: 0; }
.kc-ico { width: 30px; height: 30px; border-radius: 9px; display: grid; place-items: center; font-size: 16px; background: color-mix(in srgb, var(--c, #5C6B73) 14%, transparent); }
.kc-nm { min-width: 0; display: block; }
.kc-nm b { display: block; font-size: 14.5px; font-weight: 700; line-height: 1.3; overflow-wrap: anywhere; }
.kc-meta { display: block; font-size: 12px; color: var(--color-text-muted); line-height: 1.35; }
.kc-bar { display: block; height: 4px; border-radius: 99px; background: var(--color-border); margin-top: 5px; overflow: hidden; max-width: 260px; }
.kc-bar i { display: block; height: 100%; width: 0; background: var(--color-accent); border-radius: 99px; transition: width .25s; }
.kc-qty { display: grid; grid-template-columns: minmax(0, 1fr) auto; border: 1px solid var(--color-border); border-radius: 11px; overflow: hidden; background: var(--color-surface); }
.kc-qty:focus-within { border-color: var(--color-primary); }
.kc-qty input { width: 100%; min-width: 0; border: 0; outline: 0; padding: 8px 6px 8px 10px; text-align: right; font: inherit; font-size: 14.5px; font-weight: 700; background: transparent; color: var(--color-text); -moz-appearance: textfield; }
.kc-qty input::-webkit-outer-spin-button, .kc-qty input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.kc-qty select { border: 0; border-left: 1px solid var(--color-border); outline: 0; background: var(--color-surface-muted); color: var(--color-text-muted); font: inherit; font-size: 13px; padding: 0 6px; cursor: pointer; max-width: 82px; }
.kc-meth { min-width: 0; width: 100%; padding: 8px 8px; border-radius: 999px; border: 1px solid var(--color-border); background: var(--color-surface-muted); color: var(--color-text); font: inherit; font-size: 13px; font-weight: 600; cursor: pointer; }
.kc-meth-none { text-align: center; color: var(--color-text-muted); border-color: transparent; background: transparent; cursor: default; }
.kc-more { width: 32px; height: 32px; border-radius: 50%; border: 0; background: transparent; color: var(--color-text-muted); font-size: 20px; font-weight: 800; line-height: 1; cursor: pointer; }
.kc-more:hover { background: var(--color-surface-muted); color: var(--color-text); }
.kc-menu { position: absolute; z-index: 80; background: var(--color-surface); border: 1px solid var(--color-border); border-radius: 16px; box-shadow: 0 16px 40px rgba(20, 40, 30, .18); padding: 8px; display: flex; flex-direction: column; gap: 4px; }
.kc-menu button { text-align: left; padding: 9px 10px; border-radius: 10px; border: 0; background: transparent; color: var(--color-text); font: inherit; font-size: 14px; font-weight: 600; cursor: pointer; }
.kc-menu button:hover { background: var(--color-surface-muted); }
.kc-menu button.danger { color: var(--color-danger); }
.kc-menu-f { display: flex; flex-direction: column; gap: 4px; padding: 6px 10px; font-size: 12px; font-weight: 700; color: var(--color-text-muted); }
.kc-menu-f select { padding: 7px 8px; border-radius: 10px; border: 1px solid var(--color-border); background: var(--color-surface); color: var(--color-text); font: inherit; font-size: 14px; }
.kc-menu-n { margin: 0; padding: 0 10px 4px; font-size: 12px; color: var(--color-text-muted); }

/* параметры */
.kc-opts { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 10px; }
.kc-opt { background: var(--color-surface); border: 1px solid var(--color-border); border-radius: 16px; padding: 10px 14px; display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.kc-step { display: flex; align-items: center; gap: 6px; }
.kc-step button { width: 32px; height: 32px; border-radius: 50%; border: 1px solid var(--color-border); background: var(--color-surface); color: var(--color-primary); font-size: 18px; font-weight: 800; cursor: pointer; }
.kc-step input { width: 46px; text-align: center; border: 0; background: transparent; color: var(--color-text); font: inherit; font-weight: 800; font-size: 17px; -moz-appearance: textfield; }
.kc-step input::-webkit-outer-spin-button, .kc-step input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.kc-w { font-size: 14px; display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; }
.kc-wl { color: var(--color-text-muted); display: inline-flex; align-items: center; gap: 6px; }
.kc-wl input { width: 78px; padding: 6px 8px; border-radius: 10px; border: 1px solid var(--color-border); background: var(--color-surface); color: var(--color-text); font: inherit; font-weight: 700; }

/* откуда нутриенты */
.kc-contrib { background: var(--color-surface); border: 1px solid var(--color-border); border-radius: 18px; padding: 12px 14px; box-shadow: var(--shadow-card); transition: box-shadow .3s; }
.kc-contrib.flash { box-shadow: 0 0 0 3px var(--color-accent); }
.kc-contrib-h { display: flex; justify-content: space-between; align-items: center; gap: 8px 12px; flex-wrap: wrap; }
.kc-contrib-h > b { font-size: 15px; }
.kc-contrib-n { margin: 8px 0 6px; font-size: 13.5px; color: var(--color-text-muted); }
.kc-contrib-n b { color: var(--color-text); }
.kc-stack { display: flex; height: 26px; border-radius: 8px; overflow: hidden; background: var(--color-surface-muted); }
.kc-stack i { display: block; height: 100%; transition: width .25s; }
.kc-stack i + i { box-shadow: inset 2px 0 0 var(--color-surface); }
.kc-stleg { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 4px 16px; margin-top: 8px; font-size: 13.5px; }
.kc-stleg > span { display: block; min-width: 0; line-height: 1.4; }
.kc-stleg > span > i { display: inline-block; width: 10px; height: 10px; border-radius: 3px; margin-right: 6px; vertical-align: -1px; }
.kc-stleg small { color: var(--color-text-muted); }
.kc-seg { display: inline-flex; background: var(--color-surface-muted); border-radius: 999px; padding: 3px; max-width: 100%; }
.kc-seg-scroll { overflow-x: auto; scrollbar-width: none; }
.kc-seg-scroll::-webkit-scrollbar { display: none; }
.kc-seg button { border: 0; background: transparent; padding: 5px 11px; border-radius: 999px; font: inherit; font-size: 12.5px; font-weight: 700; color: var(--color-text-muted); cursor: pointer; white-space: nowrap; }
.kc-seg button.on { background: var(--color-surface); color: var(--color-text); box-shadow: 0 1px 3px rgba(20, 40, 30, .14); }

/* итог */
.kc-res { display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.kc-sheet-h { display: none; }
.kc-card { background: var(--color-surface); border: 1px solid var(--color-border); border-radius: 18px; padding: 14px 16px; box-shadow: var(--shadow-card); }
.kc-row-sb { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.kc-big { display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 10px; margin: 10px 0 2px; }
.kc-big b { font-family: var(--font-display); font-weight: 400; font-size: 44px; line-height: 1; color: var(--color-text); }
.kc-big span { color: var(--color-text-muted); font-size: 14px; }
.kc-norm { margin: 0 0 8px; font-size: 13px; color: var(--color-text-muted); min-height: 1em; }
.kc-ebar { display: flex; height: 10px; border-radius: 99px; overflow: hidden; background: var(--color-surface-muted); }
.kc-ebar i { display: block; height: 100%; width: 0; transition: width .25s; }
.kc-ebar .p, .kc i.p { background: var(--kc-p); } .kc-ebar .f, .kc i.f { background: var(--kc-f); } .kc-ebar .c, .kc i.c { background: var(--kc-c); }
.kc-mrow { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin-top: 10px; }
.kc-mrow > div { background: var(--color-surface-muted); border-radius: 12px; padding: 7px 9px; min-width: 0; }
.kc-mrow b { display: block; font-size: 17px; }
.kc-mrow small { display: block; font-size: 11.5px; color: var(--color-text-muted); line-height: 1.3; }
.kc-mrow small i, .kc-sheet-m i { font-style: normal; font-weight: 800; background: none !important; }
.kc-mrow small i.p, .kc-sheet-m i.p { color: var(--kc-p); } .kc-mrow small i.f, .kc-sheet-m i.f { color: var(--kc-f); } .kc-mrow small i.c, .kc-sheet-m i.c { color: var(--kc-c); }
.kc-warn { margin: 8px 0 0; font-size: 12.5px; color: var(--kc-a); }
.kc-q-help { width: 22px; height: 22px; border-radius: 50%; border: 1px solid var(--color-border); background: transparent; color: var(--color-text-muted); font: inherit; font-size: 12px; font-weight: 800; cursor: pointer; }
.kc-help { margin: 6px 0 8px; }
.kc-lights { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; margin-top: 8px; }
.kc-lt { border-radius: 12px; padding: 7px 4px; text-align: center; font-size: 11.5px; line-height: 1.25; background: var(--color-surface-muted); color: var(--color-text-muted); }
.kc-lt b { display: block; font-size: 14px; margin-bottom: 1px; }
.kc-lt small { display: block; font-size: 10.5px; opacity: .85; margin-top: 1px; }
.kc-lt.kc-g { background: var(--kc-g-bg); color: var(--kc-g); } .kc-lt.kc-a { background: var(--kc-a-bg); color: var(--kc-a); } .kc-lt.kc-r { background: var(--kc-r-bg); color: var(--kc-r); }
.kc-hs { display: grid; grid-template-columns: 44px minmax(0, 1fr); gap: 10px; align-items: center; margin-top: 10px; }
.kc-hs-badge { width: 44px; height: 44px; border-radius: 12px; display: grid; place-items: center; font-weight: 800; font-size: 16px; color: #fff; background: #4CAF50; }
.kc-hs-badge.none { background: var(--color-surface-muted); color: var(--color-text-muted); }
.kc-hs b { display: block; font-size: 15px; }
.kc-hs small { display: block; font-size: 12px; color: var(--color-text-muted); line-height: 1.35; }
.kc-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.kc-chips-l { flex-basis: 100%; margin: 6px 0 0; font-size: 11.5px; color: var(--color-text-muted); }
.kc-chip { font-size: 12.5px; font-weight: 700; padding: 4px 10px; border-radius: 999px; background: var(--color-surface-muted); color: var(--color-text); }
.kc-chip-more { border: 1px dashed var(--color-border); background: transparent; color: var(--color-primary); font: inherit; font-size: 12.5px; font-weight: 800; cursor: pointer; }
.kc-chip.ok { background: var(--kc-g-bg); color: var(--kc-g); }
.kc-chip.warn { background: var(--kc-a-bg); color: var(--kc-a); }
.kc-chip.bad { background: var(--kc-r-bg); color: var(--kc-r); }
.kc-gi, .kc-cost { margin: 10px 0 0; font-size: 13px; color: var(--color-text-muted); }
.kc-gi b, .kc-cost b { color: var(--color-text); }
.kc-ret { display: inline-flex; align-items: center; gap: 5px; font-size: 12px; color: var(--color-text-muted); cursor: pointer; white-space: nowrap; }
.kc-mic, .kc-qrow { display: grid; width: 100%; border: 0; background: transparent; color: var(--color-text); font: inherit; text-align: left; cursor: pointer; border-radius: 10px; }
.kc-mic { grid-template-columns: minmax(0, 116px) minmax(0, 1fr) 54px; grid-template-rows: auto auto; column-gap: 8px; align-items: center; padding: 5px 6px; font-size: 13px; }
.kc-mic small { grid-column: 3; grid-row: 2; text-align: right; font-size: 11px; color: var(--color-text-muted); }
.kc-mic em { font-style: normal; text-align: right; font-weight: 700; font-size: 12.5px; }
.kc-mic:hover, .kc-qrow:hover { background: var(--color-surface-muted); }
.kc-mic.on, .kc-qrow.on { background: var(--color-accent-soft); }
.kc-mb { height: 7px; border-radius: 99px; background: var(--color-surface-muted); overflow: hidden; }
.kc-mb i { display: block; height: 100%; background: var(--color-primary); border-radius: 99px; }
.kc-more-btn { margin-top: 4px; border: 0; background: transparent; color: var(--color-primary); font: inherit; font-size: 13px; font-weight: 800; cursor: pointer; padding: 4px 6px; }
.kc-qual { border-top: 1px solid var(--color-border); margin-top: 8px; padding-top: 6px; }
.kc-qual:empty { display: none; }
.kc-qrow { grid-template-columns: minmax(0, 1fr) auto 44px; gap: 8px; padding: 5px 6px; font-size: 13px; }
.kc-qrow em { font-style: normal; text-align: right; color: var(--color-text-muted); font-size: 12px; }
.kc-acts { display: flex; flex-direction: column; gap: 8px; }
.kc-acts input[type="text"] { padding: 9px 12px; border-radius: 12px; border: 1px solid var(--color-border); background: var(--color-surface); color: var(--color-text); font: inherit; font-size: 14px; }
.kc-diary { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 8px; }
.kc-diary select { padding: 0 8px; border-radius: 12px; border: 1px solid var(--color-border); background: var(--color-surface); color: var(--color-text); font: inherit; font-size: 14px; }
.kc-acts .btn { width: 100%; }
.kc-act2 { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.kc-pill { display: inline-flex; justify-content: center; align-items: center; gap: 6px; padding: 9px 10px; border-radius: 999px; border: 1px solid var(--color-border); background: var(--color-surface); color: var(--color-text); font: inherit; font-size: 13.5px; font-weight: 700; cursor: pointer; }
.kc-pill:hover { border-color: var(--color-primary); color: var(--color-primary); }
.kc-link-btn { border: 0; background: transparent; color: var(--color-primary); font: inherit; font-size: 13px; font-weight: 700; cursor: pointer; padding: 2px 0; text-align: left; }
.kc-acts .kc-status { font-size: 13px; }
.kc-foot { margin: 0; font-size: 12px; color: var(--color-text-muted); line-height: 1.45; }
.kc-toast { position: fixed; left: 50%; transform: translateX(-50%); bottom: calc(var(--kc-bottom, 0px) + 96px); z-index: 90; display: flex; align-items: center; gap: 12px; background: #1C2521; color: #fff; padding: 10px 12px 10px 16px; border-radius: 14px; box-shadow: 0 12px 30px rgba(0, 0, 0, .25); font-size: 14px; max-width: calc(100vw - 32px); }
.kc-toast button { border: 0; background: rgba(255, 255, 255, .14); color: #fff; font: inherit; font-weight: 800; padding: 6px 12px; border-radius: 10px; cursor: pointer; }

/* шторка (узкие экраны) */
.kc-sheet { display: none; }
.kc-sheet-bar { width: 100%; display: flex; flex-direction: column; gap: 6px; text-align: left; border: 0; background: transparent; color: var(--color-text); font: inherit; padding: 6px 16px 10px; cursor: pointer; }
.kc-grab { width: 40px; height: 4px; border-radius: 99px; background: var(--color-border); align-self: center; }
.kc-sheet-top { display: flex; justify-content: space-between; align-items: baseline; }
.kc-sheet-top b { font-family: var(--font-display); font-weight: 400; font-size: 24px; }
.kc-sheet-top span { font-size: 12.5px; color: var(--color-text-muted); font-weight: 700; }
.kc-sheet-bar .kc-ebar { height: 7px; }
.kc-sheet-m { display: flex; gap: 12px; font-size: 13px; color: var(--color-text-muted); }
.kc-sheet-more { margin-left: auto; color: var(--color-primary); font-weight: 800; }

/* компьютер: две колонки */
@media (min-width: 920px) {
  body:not(.app-kab) .kc-grid { grid-template-columns: minmax(0, 1fr) 360px; gap: 24px; }
  body:not(.app-kab) .kc-res { position: sticky; top: 16px; max-height: calc(100vh - 32px); overflow-y: auto; scrollbar-width: thin; padding-bottom: 4px; }
}
@media (min-width: 1200px) {
  body.app-kab .kc-grid { grid-template-columns: minmax(0, 1fr) 350px; gap: 22px; }
  body.app-kab .kc-res { position: sticky; top: 16px; max-height: calc(100vh - 32px); overflow-y: auto; scrollbar-width: thin; padding-bottom: 4px; }
}
@media (min-width: 920px) and (max-width: 1060px) {
  body:not(.app-kab) .kc-row { grid-template-columns: 30px minmax(0, 1fr) 132px 112px 30px; }
}

/* узкие экраны: итог в шторке снизу (гость — до 919 px, в кабинете с боковым меню — до 1199 px) */
@media (max-width: 919px) {
  body:not(.app-kab) .kc-sheet:not([hidden]) { display: block; }
  body:not(.app-kab) .kc-res { position: fixed; left: 0; right: 0; bottom: 0; z-index: 70; max-height: 88vh; overflow-y: auto; background: var(--color-bg); border-radius: 22px 22px 0 0; padding: 0 12px calc(16px + env(safe-area-inset-bottom, 0px)); box-shadow: 0 -12px 40px rgba(20, 40, 30, .22); transform: translateY(105%); transition: transform .28s ease; visibility: hidden; }
  body:not(.app-kab).kc-open .kc-res { transform: none; visibility: visible; }
  body:not(.app-kab) .kc-sheet-h { display: flex; }
  body:not(.app-kab) .kc.kc-has .kc-main { padding-bottom: 96px; }
}
@media (max-width: 1199px) {
  body.app-kab .kc-sheet:not([hidden]) { display: block; }
  body.app-kab .kc-res { position: fixed; left: 0; right: 0; bottom: 0; z-index: 70; max-height: 88vh; overflow-y: auto; background: var(--color-bg); border-radius: 22px 22px 0 0; padding: 0 12px calc(16px + env(safe-area-inset-bottom, 0px)); box-shadow: 0 -12px 40px rgba(20, 40, 30, .22); transform: translateY(105%); transition: transform .28s ease; visibility: hidden; }
  body.app-kab.kc-open .kc-res { transform: none; visibility: visible; }
  body.app-kab .kc-sheet-h { display: flex; }
  body.app-kab .kc.kc-has .kc-main { padding-bottom: 96px; }
}
@media (max-width: 1199px) and (min-width: 761px) { body.app-kab .kc-res, body.app-kab .kc-sheet { left: auto; width: min(440px, 100vw); right: 16px; } }
@media (max-width: 919px) and (min-width: 600px) { body:not(.app-kab) .kc-res, body:not(.app-kab) .kc-sheet { left: auto; width: min(440px, 100vw); right: 16px; } }
.kc-sheet { position: fixed; left: 0; right: 0; bottom: var(--kc-bottom, 0px); z-index: 65; background: var(--color-surface); border-top: 1px solid var(--color-border); border-radius: 20px 20px 0 0; box-shadow: 0 -10px 28px rgba(20, 40, 30, .12); padding-bottom: env(safe-area-inset-bottom, 0px); }
body.app-kab .kc-sheet { padding-bottom: 0; }
.kc-sheet-h { position: sticky; top: 0; z-index: 2; justify-content: space-between; align-items: center; padding: 14px 4px 10px; background: var(--color-bg); }
.kc-sheet-h b { font-size: 17px; }
.kc-sheet-h button { border: 0; background: transparent; color: var(--color-primary); font: inherit; font-weight: 800; cursor: pointer; }
body.kc-open .kc-sheet { visibility: hidden; }
body.kc-open::after { content: ""; position: fixed; inset: 0; background: rgba(10, 20, 15, .35); z-index: 66; }

/* телефон: строка продукта в две линии */
@media (max-width: 640px) {
  .kc.container { padding-top: 16px; }
  .kc-h1 { font-size: 28px; }
  .kc-sub { font-size: 14.5px; }
  .kc-inbar { grid-template-columns: minmax(0, 1fr); padding: 6px 6px 6px 12px; }
  .kc-inbtns { justify-content: flex-start; }
  .kc-ib { height: 34px; padding: 0 10px; font-size: 13px; }
  .kc-row { grid-template-columns: 28px minmax(0, 1fr) 112px 28px; gap: 8px; padding: 9px 8px 9px 10px; }
  .kc-row .kc-meth { display: none; }
  .kc-ico { width: 28px; height: 28px; font-size: 15px; }
  .kc-qty input { padding: 7px 4px 7px 6px; font-size: 14px; }
  .kc-qty select { font-size: 12.5px; padding: 0 3px; max-width: 64px; }
  .kc-more { width: 28px; }
  .kc-opts { grid-template-columns: minmax(0, 1fr); }
  .kc-quick { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; margin-inline: -16px; padding-inline: 16px; }
  .kc-quick::-webkit-scrollbar { display: none; }
  .kc-quick > * { flex: none; }
  .kc-empty { grid-template-columns: 64px minmax(0, 1fr); padding: 14px; }
  .kc-empty-ill { width: 64px; height: 64px; }
  .kc-um { grid-template-columns: minmax(0, 1fr) 28px; }
  .kc-um-opts { grid-column: 1 / -1; grid-row: 2; }
  .kc-mic { grid-template-columns: minmax(0, 104px) minmax(0, 1fr) 50px; }
}

/* ===== 09.10.2026: строка состава — шапка (иконка, название, калории, «⋯») + поля под ней (артефакт «Строка калькулятора») =====
   Вес уже (112 px), способ приготовления — всё остальное место; шрифты на полразмера меньше. На телефоне способ виден сразу. */
.kc-row, body:not(.app-kab) .kc-row { display: flex; flex-direction: column; align-items: stretch; gap: 8px; padding: 10px 12px 11px; grid-template-columns: none; }
.kc-rh { display: grid; grid-template-columns: 26px minmax(0, 1fr) auto 28px; gap: 8px; align-items: center; }
.kc-rh .kc-ico { width: 26px; height: 26px; border-radius: 8px; font-size: 14px; }
.kc-rh .kc-nm { font-size: 13.5px; font-weight: 700; line-height: 1.25; overflow-wrap: anywhere; }
.kc-rh .kc-meta { font-size: 12px; color: var(--color-text-muted); white-space: nowrap; font-variant-numeric: tabular-nums; text-align: right; }
.kc-rh .kc-meta b { font-size: 12.5px; color: var(--color-text); font-weight: 800; }
.kc-rh .kc-more { width: 28px; height: 28px; font-size: 17px; }
.kc-rf { display: grid; grid-template-columns: 112px minmax(0, 1fr); gap: 8px; padding-left: 34px; }
.kc-rf .kc-qty input { font-size: 13.5px; padding: 6px 4px 6px 8px; }
.kc-rf .kc-qty select { font-size: 12px; padding: 0 4px; max-width: 58px; }
.kc-rf .kc-meth { display: block !important; font-size: 12.5px; padding: 6px 10px; }
.kc-rf .kc-meth-none { font-size: 12.5px; color: var(--color-text-muted); padding: 6px 2px; text-align: left; border: 0; background: transparent; }
.kc-row > .kc-bar { height: 3px; margin: 0 0 0 34px; max-width: none; }
@media (max-width: 640px) {
  .kc-row { padding: 10px 10px 11px; }
  .kc-rf { padding-left: 0; grid-template-columns: 100px minmax(0, 1fr); }
  .kc-row > .kc-bar { margin-left: 0; }
}
/* 09.10.2026 (по скриншоту Игоря): поле веса и способ приготовления — одной ширины; у списка единиц постоянная ширина
   (помещается «стакан»), стрелка у всех списков одна и та же — своя, а не браузерная (та зависела от ширины списка) */
.kc-rf { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
.kc-rf .kc-qty { grid-template-columns: minmax(0, 1fr) 88px; }
.kc-rf .kc-qty select, .kc-rf select.kc-meth {
  -webkit-appearance: none; appearance: none; cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M3 4.5l3 3 3-3' fill='none' stroke='%237C8B84' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-size: 12px 12px; background-position: right 8px center;
}
.kc-rf .kc-qty select { width: 88px; max-width: none; padding: 0 24px 0 9px; text-overflow: ellipsis; }
.kc-rf select.kc-meth { padding: 6px 28px 6px 12px; background-position: right 11px center; text-overflow: ellipsis; white-space: nowrap; overflow: hidden; }
.kc-rf .kc-meth-none { padding: 6px 12px; border: 1px dashed var(--color-border); border-radius: 999px; background: transparent; }
@media (max-width: 640px) { .kc-rf { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } .kc-rf .kc-qty { grid-template-columns: minmax(0, 1fr) 80px; } .kc-rf .kc-qty select { width: 80px; } }
/* 09.10.2026 (просьба Игоря): «Голосом / Фото / Ссылка» — три круглые иконки без подписей в конце строки ввода.
   Название — во всплывающей подсказке (title) и для экранного диктора (aria-label); запись голоса — красный пульс (.rec). */
.kc-ib { width: 38px; height: 38px; padding: 0; justify-content: center; gap: 0; flex: none; }
.kc-ib span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.kc-ib svg { width: 19px; height: 19px; }
.kc-inbtns { align-self: center; }
@media (max-width: 640px) {
  .kc-inbar { grid-template-columns: minmax(0, 1fr) auto; padding: 6px 6px 6px 12px; }
  .kc-inbtns { gap: 4px; }
  .kc-ib { width: 34px; height: 34px; }
  .kc-ib svg { width: 17px; height: 17px; }
}

/* 09.10.2026: «Очистить рецепт» внизу состава */
.kc-clear { display: inline-flex; align-items: center; gap: 7px; align-self: flex-start; margin-top: 4px; padding: 9px 16px; border-radius: 999px;
  border: 1px solid var(--color-border); background: var(--color-surface); color: var(--color-text-muted); font: inherit; font-size: 14px; font-weight: 700; cursor: pointer; }
.kc-clear:hover { border-color: var(--color-danger); color: var(--color-danger); }
.kc-clear[hidden] { display: none; }
/* 03.11.2026: красный уровень светофора (.kc-lt.kc-r) совпадал по классу со строкой результатов поиска (.kc-r — сетка
   в 3 колонки) — плитка «Жиры» разваливалась. Возвращаем плитке её раскладку. */
.kc-lt.kc-r { display: block; padding: 7px 4px; cursor: default; }
.kc-lt.kc-r:hover { background: var(--kc-r-bg); }