/* A warm, food-first UI that still adopts Telegram's colour theme. */
:root {
  --bg: var(--tg-theme-secondary-bg-color, #f7f5ef);
  --surface: var(--tg-theme-bg-color, #fffdfa);
  --surface-soft: color-mix(in srgb, var(--surface) 82%, var(--bg));
  --fg: var(--tg-theme-text-color, #20231e);
  --muted: var(--tg-theme-hint-color, #777b70);
  --line: color-mix(in srgb, var(--fg) 11%, transparent);
  --accent: var(--tg-theme-button-color, #e36d4b);
  --accent-fg: var(--tg-theme-button-text-color, #fff);
  --accent-text: var(--tg-theme-accent-text-color, #c65838);
  --link: var(--tg-theme-link-color, #c65b3c);
  --ok: #3d9a67;
  --over: #d35e4b;
  --shadow: 0 8px 24px rgba(43, 45, 35, .08);
}
@media (prefers-color-scheme: dark) {
  :root {
    --bg: var(--tg-theme-secondary-bg-color, #151713);
    --surface: var(--tg-theme-bg-color, #20231e);
    --surface-soft: color-mix(in srgb, var(--surface) 82%, var(--bg));
    --fg: var(--tg-theme-text-color, #f5f2e9);
    --muted: var(--tg-theme-hint-color, #a9ada2);
    --line: color-mix(in srgb, var(--fg) 12%, transparent);
    --accent: var(--tg-theme-button-color, #e47a59);
    --accent-text: var(--tg-theme-accent-text-color, #ef9274);
    --ok: #65bd88;
    --shadow: none;
  }
}

* { box-sizing: border-box; margin: 0; -webkit-tap-highlight-color: transparent; }
html { min-height: 100%; background: var(--bg); }
body {
  min-height: 100%; background: radial-gradient(circle at 100% -10%, color-mix(in srgb, var(--accent) 11%, transparent), transparent 28rem), var(--bg);
  color: var(--fg); font: 15px/1.45 -apple-system, BlinkMacSystemFont, "SF Pro Display", "SF Pro Text", Inter, Roboto, system-ui, sans-serif;
  letter-spacing: -.01em; padding-bottom: calc(76px + env(safe-area-inset-bottom));
}
button, input, select { font: inherit; }
button { touch-action: manipulation; }
/* верхний отступ: iOS-чёлка + системная зона Telegram-fullscreen (часы/кнопки Mini App) */
main { max-width: 680px; margin: 0 auto; padding: max(12px, env(safe-area-inset-top), calc(var(--tg-safe-area-inset-top, 0px) + var(--tg-content-safe-area-inset-top, 0px))) 16px 24px; }

h2 {
  color: var(--muted); font-size: 12px; font-weight: 750; letter-spacing: .075em; line-height: 1.2;
  margin: 26px 4px 9px; text-transform: uppercase;
}
.topbar { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin: 6px 0 12px; }
.topbar h2 { color: var(--fg); font-size: 25px; font-weight: 760; letter-spacing: -.045em; margin: 0; text-transform: none; }
.topbar h2::after { content: ""; display: block; width: 28px; height: 3px; margin-top: 7px; border-radius: 99px; background: var(--accent); }

.card {
  background: var(--surface); border: 1px solid color-mix(in srgb, var(--fg) 5%, transparent); border-radius: 18px;
  box-shadow: var(--shadow); margin-bottom: 10px; padding: 12px 14px;
}
.hint { color: var(--muted); font-size: 13px; }
.row { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.grow { flex: 1; min-width: 0; }
.bar { height: 7px; overflow: hidden; border-radius: 99px; background: color-mix(in srgb, var(--fg) 8%, transparent); margin: 11px 0 7px; }
.bar i { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, var(--accent), color-mix(in srgb, var(--accent) 72%, #ffb06e)); transition: width .3s ease; }
.bar i.over { background: var(--over); }

/* Dashboard composition — each main section starts with its own useful summary. */
.daily-hero, .plan-hero, .shop-hero, .family-hero { position: relative; display: flex; align-items: center; justify-content: space-between; min-height: 146px; margin: 2px 0 14px; padding: 21px 20px; overflow: hidden; border-radius: 25px; color: #fff; }
.daily-hero { background: linear-gradient(137deg, #df6749, #ef9b51); box-shadow: 0 14px 30px rgba(221, 103, 70, .27); }.daily-hero::after, .plan-hero::after, .shop-hero::after { content: ""; position: absolute; right: -42px; bottom: -65px; width: 180px; height: 180px; border: 32px solid rgba(255,255,255,.08); border-radius: 50%; }
.daily-hero-copy { position: relative; z-index: 1; min-width: 0; }.daily-hero-copy p, .plan-hero > div > span, .shop-hero > div > span, .family-hero > span { display: block; margin-bottom: 7px; font-size: 12px; font-weight: 700; opacity: .76; text-transform: capitalize; }.daily-hero h1 { margin: 0; color: #fff; font-size: 32px; font-weight: 760; letter-spacing: -.06em; line-height: 1; }.daily-hero-copy > span { display: block; max-width: 210px; margin-top: 11px; font-size: 12px; line-height: 1.35; opacity: .86; }
.daily-ring, .shop-ring { position: relative; z-index: 1; display: grid; width: 80px; height: 80px; flex: 0 0 80px; margin-left: 16px; border-radius: 50%; place-items: center; }.daily-ring > div, .shop-ring > div { display: flex; align-items: baseline; justify-content: center; width: 64px; height: 64px; border-radius: 50%; background: rgba(106, 55, 44, .27); color: #fff; }.daily-ring strong { font-size: 24px; letter-spacing: -.07em; }.daily-ring span, .shop-ring span { margin-left: 2px; font-size: 12px; font-weight: 650; opacity: .75; }.daily-hero-mark { position: relative; z-index: 1; font-size: 48px; opacity: .9; }
.quick-actions { display: flex; gap: 9px; margin-bottom: 2px; overflow-x: auto; }.quick-action { flex: 1; min-height: 48px; min-width: max-content; border: 1px solid var(--line); border-radius: 14px; background: var(--surface); box-shadow: var(--shadow); color: var(--accent-text); cursor: pointer; font-size: 17px; font-weight: 750; }.quick-action span { margin-left: 5px; font-size: 13px; }
.section-header { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 22px 5px 8px; }.section-title { color: var(--muted); font-size: 11px; font-weight: 750; letter-spacing: .08em; text-transform: uppercase; }.section-meta { color: var(--muted); font-size: 12px; }
.plan-hero { min-height: 132px; background: linear-gradient(135deg, #5369e8, #7b62df); box-shadow: 0 14px 30px rgba(82, 103, 232, .25); }.plan-hero > div, .shop-hero > div, .family-hero > * { position: relative; z-index: 1; }.plan-hero strong, .shop-hero strong, .family-hero strong { display: block; font-size: 28px; letter-spacing: -.055em; line-height: 1.05; }.plan-hero p, .shop-hero p, .family-hero p { max-width: 230px; margin: 9px 0 0; font-size: 12px; line-height: 1.35; opacity: .86; }.plan-hero > b { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; width: 67px; height: 67px; border: 1px solid rgba(255,255,255,.22); border-radius: 19px; background: rgba(255,255,255,.13); font-size: 25px; letter-spacing: -.06em; }.plan-hero small { margin-top: 1px; font-size: 10px; font-weight: 650; letter-spacing: 0; opacity: .78; }.hero-actions { display: flex; justify-content: flex-end; gap: 8px; margin: 0 0 3px; }
.shop-hero { --shop-ring: #fff; min-height: 132px; background: linear-gradient(135deg, #239576, #56bb84); box-shadow: 0 14px 30px rgba(43, 150, 111, .24); }.shop-ring > div { background: rgba(24, 92, 70, .28); }.shop-ring b { font-size: 23px; letter-spacing: -.07em; }
.family-hero { min-height: 126px; align-items: flex-start; flex-direction: column; justify-content: center; background: linear-gradient(135deg, #374254, #59687c); box-shadow: 0 13px 28px rgba(43, 55, 73, .22); }.family-hero p b { margin-left: 4px; font-size: 13px; letter-spacing: .06em; }
.tool-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }.tool-tile { min-height: 142px; display: flex; flex-direction: column; align-items: flex-start; padding: 14px; border: 1px solid var(--line); border-radius: 18px; background: var(--surface); box-shadow: var(--shadow); color: var(--fg); text-align: left; cursor: pointer; }.tool-tile:active { transform: scale(.98); }.tool-tile i { display: grid; width: 34px; height: 34px; margin-bottom: auto; border-radius: 11px; place-items: center; font-size: 18px; font-style: normal; }.tool-tile b { font-size: 14px; letter-spacing: -.025em; }.tool-tile span { margin-top: 3px; color: var(--muted); font-size: 11px; }.tool-tile.pantry i { background: #fff0d9; color: #bf7824; }.tool-tile.cook i { background: #ffe6df; color: #d46143; }.tool-tile.recipes i { background: #e7ecff; color: #596fdb; }.tool-tile.analytics i { background: #e1f5eb; color: #29946a; }
.scanner-link { display: flex; align-items: center; width: 100%; gap: 11px; margin-top: 12px; padding: 13px 14px; border: 1px solid var(--line); border-radius: 16px; background: var(--surface); box-shadow: var(--shadow); color: var(--fg); text-align: left; cursor: pointer; }.scanner-link > span { display: grid; width: 34px; height: 34px; flex: none; border-radius: 11px; place-items: center; background: color-mix(in srgb, var(--accent) 12%, transparent); color: var(--accent-text); font-size: 20px; }.scanner-link div { flex: 1; }.scanner-link b { display: block; font-size: 13px; }.scanner-link small { display: block; margin-top: 2px; color: var(--muted); font-size: 11px; }.scanner-link i { color: var(--muted); font-size: 23px; font-style: normal; }

/* Bottom navigation */
.tabs {
  position: fixed; z-index: 5; right: 0; bottom: 0; left: 0; display: flex; gap: 2px;
  padding: 8px 12px max(9px, env(safe-area-inset-bottom)); background: color-mix(in srgb, var(--surface) 88%, transparent);
  border-top: 1px solid var(--line); -webkit-backdrop-filter: blur(18px) saturate(150%); backdrop-filter: blur(18px) saturate(150%);
}
.tabs button { flex: 1; min-width: 0; padding: 5px 2px; border: 0; border-radius: 12px; background: transparent; color: var(--muted); cursor: pointer; font-size: 10px; font-weight: 650; }
.tabs button.active { color: var(--accent-text); background: color-mix(in srgb, var(--accent) 12%, transparent); }
.tabs .ico { display: block; height: 20px; margin-bottom: 2px; }
.tabs .ico svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }

/* Buttons and inputs */
.btn {
  min-height: 38px; border: 0; border-radius: 11px; padding: 8px 13px; background: var(--accent); color: var(--accent-fg);
  box-shadow: 0 3px 8px color-mix(in srgb, var(--accent) 26%, transparent); cursor: pointer; font-size: 14px; font-weight: 700; white-space: nowrap;
}
.btn:active { transform: scale(.97); opacity: .86; }
.btn:disabled { cursor: default; opacity: .45; }
.btn.ghost { background: color-mix(in srgb, var(--accent) 11%, transparent); box-shadow: none; color: var(--accent-text); }
.btn.small { min-height: 33px; padding: 6px 9px; border-radius: 9px; font-size: 13px; }
.btn.wide { width: 100%; min-height: 48px; margin-top: 11px; border-radius: 14px; font-size: 15px; }
input, select { width: 100%; min-height: 44px; border: 1px solid var(--line); border-radius: 12px; outline: none; padding: 10px 12px; background: var(--surface); color: var(--fg); -webkit-appearance: none; appearance: none; }
input:focus, select:focus { border-color: color-mix(in srgb, var(--accent) 70%, transparent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 14%, transparent); }
input::placeholder { color: color-mix(in srgb, var(--muted) 80%, transparent); }
.card input, .card select, .modal input, .modal select { background: var(--surface-soft); }
.addrow { display: flex; align-items: center; gap: 8px; margin-top: 12px; }
.addrow input { flex: 1; }

/* Lists */
.slot, .check, .ing, .menu-item { display: flex; align-items: center; gap: 10px; min-height: 51px; padding: 8px 0; border-bottom: 1px solid var(--line); }
.slot:last-child, .check:last-child, .ing:last-child, .menu-item:last-child { border-bottom: none; }
.slot { min-height: 68px; }
/* карточка-слот на «Сегодня»: сама себе контейнер — возвращаем отступы карточки */
.card.slot { padding: 12px 14px; border-bottom: none; }
.menu-item, .check { cursor: pointer; }
.menu-item:active, .check:active { background: color-mix(in srgb, var(--fg) 5%, transparent); margin: 0 -14px; padding-right: 14px; padding-left: 14px; }
.menu-item .ico { display: grid; width: 38px; height: 38px; flex: none; place-items: center; border-radius: 12px; background: color-mix(in srgb, var(--accent) 10%, transparent); font-size: 19px; }
.menu-item .arr, .arr { color: var(--muted); font-size: 23px; font-weight: 350; line-height: 1; }
.catname { margin: 11px 0 3px; color: var(--muted); font-size: 11px; font-weight: 750; letter-spacing: .06em; text-transform: uppercase; }
.check .box { display: grid; width: 23px; height: 23px; flex: none; place-items: center; border: 1.5px solid color-mix(in srgb, var(--muted) 62%, transparent); border-radius: 8px; color: var(--accent-fg); font-size: 14px; transition: .15s; }
.check.done .box { border-color: var(--ok); background: var(--ok); }
.check.done .name { color: var(--muted); text-decoration: line-through; }

.chip { display: inline-block; margin: 5px 5px 1px 0; padding: 8px 12px; border: 1px solid transparent; border-radius: 11px; background: color-mix(in srgb, var(--fg) 7%, transparent); color: var(--fg); cursor: pointer; font-size: 13px; font-weight: 600; }
.chip.sel { border-color: color-mix(in srgb, var(--accent) 22%, transparent); background: color-mix(in srgb, var(--accent) 16%, transparent); color: var(--accent-text); }
.seg { display: flex; gap: 6px; }
.seg .chip { flex: 1; margin: 0; text-align: center; }

/* Sheets */
.modal { position: fixed; z-index: 10; inset: 0; display: flex; align-items: flex-end; background: rgba(20, 22, 18, .48); }
.modal .sheet { width: 100%; max-height: min(85vh, 720px); overflow-y: auto; border-radius: 24px 24px 0 0; padding: 26px 18px max(22px, env(safe-area-inset-bottom)); background: var(--surface); box-shadow: 0 -8px 40px rgba(0, 0, 0, .15); animation: sheet-up .24s cubic-bezier(.2,.8,.2,1); }
.modal .sheet::before { content: ""; display: block; width: 36px; height: 4px; margin: -14px auto 16px; border-radius: 99px; background: color-mix(in srgb, var(--muted) 42%, transparent); }
.modal .sheet h2 { margin: 0 0 12px; color: var(--fg); font-size: 20px; font-weight: 750; letter-spacing: -.025em; text-transform: none; }
@keyframes sheet-up { from { opacity: .4; transform: translateY(22%); } to { opacity: 1; transform: translateY(0); } }

.empty { max-width: 330px; margin: 14vh auto; padding: 26px 18px; border: 1px dashed color-mix(in srgb, var(--muted) 30%, transparent); border-radius: 18px; color: var(--muted); font-size: 14px; line-height: 1.55; text-align: center; }
.backbar { display: flex; align-items: center; gap: 10px; margin: 5px 0 16px; }
.backbar button { width: 38px; height: 38px; border: 0; border-radius: 12px; padding: 0; overflow: hidden; background: var(--surface); box-shadow: var(--shadow); color: var(--accent-text); cursor: pointer; font-size: 0; }
.backbar button::first-letter { font-size: 28px; }
.backbar b { font-size: 21px; font-weight: 760; letter-spacing: -.035em; }

/* Feature-specific pieces */
.member-head { display: flex; align-items: baseline; gap: 8px; }
.member-head b { font-size: 17px; }
.weightbtn { border: 0; padding: 0; background: none; color: var(--link); cursor: pointer; font-size: 12px; }
.airow { display: flex; gap: 8px; margin: 12px 0 3px; }
.airow input { flex: 1; background: var(--surface); box-shadow: var(--shadow); }
.rgrid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin-top: 8px; }
.rcard { overflow: hidden; border: 1px solid var(--line); border-radius: 16px; background: var(--surface); box-shadow: var(--shadow); cursor: pointer; }
.rcard:active { transform: scale(.98); }
.rcard img, .rcard .noimg { display: block; width: 100%; aspect-ratio: 4/3; object-fit: cover; background: color-mix(in srgb, var(--accent) 9%, var(--surface)); }
.rcard .noimg { display: grid; place-items: center; font-size: 35px; }
.rcard .t { min-height: 58px; padding: 9px 10px 11px; font-size: 14px; font-weight: 650; line-height: 1.3; }
.rphoto { display: block; width: 100%; max-height: 280px; margin: 0 0 12px; border-radius: 18px; object-fit: cover; box-shadow: var(--shadow); }
.ing { min-height: 44px; justify-content: space-between; font-size: 14px; }
.ing .ok { color: var(--ok); font-weight: 650; }
.ing .miss { color: var(--over); }
.steps { padding-left: 20px; }
.steps li { margin: 9px 0; padding-left: 3px; }
.stepper { display: flex; align-items: center; gap: 4px; }
.stepper button { display: grid; width: 31px; height: 31px; place-items: center; border: 0; border-radius: 10px; background: color-mix(in srgb, var(--accent) 10%, transparent); color: var(--accent-text); cursor: pointer; font-size: 19px; }
.stepper span { min-width: 59px; text-align: center; font-size: 13px; font-variant-numeric: tabular-nums; }
.cover { min-width: 42px; color: var(--ok); font-size: 14px; font-weight: 750; text-align: right; }
.chart-wrap { overflow-x: auto; }
svg.chart { display: block; width: 100%; height: 190px; }
.legend { display: flex; flex-wrap: wrap; gap: 10px; margin: 10px 0 2px; color: var(--muted); font-size: 12px; }
.legend .dot { display: inline-block; width: 8px; height: 8px; margin-right: 4px; border-radius: 50%; }

/* Scanner and onboarding */
#scanner { position: fixed; z-index: 20; inset: 0; background: #000; }
#scanVideo { width: 100%; height: 100%; object-fit: cover; }
.scan-frame { position: absolute; top: 30%; right: 8%; left: 8%; height: 25%; border: 2px solid rgba(255,255,255,.9); border-radius: 18px; box-shadow: 0 0 0 100vmax rgba(0,0,0,.4); }
.scan-hint { position: absolute; top: 22%; right: 0; left: 0; color: #fff; font-size: 15px; text-align: center; text-shadow: 0 1px 3px #000; }
.scan-close { position: absolute; top: max(12px, env(safe-area-inset-top)); right: 12px; }
.scan-fallback { position: absolute; right: 12px; bottom: max(16px, env(safe-area-inset-bottom)); left: 12px; display: flex; gap: 8px; }
.scan-fallback input { flex: 1; background: rgba(255,255,255,.96); color: #171717; }
.form label { display: block; margin: 14px 0 6px; color: var(--muted); font-size: 12px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; }
.form input, .form select { width: 100%; }

@media (min-width: 560px) { main { padding-right: 24px; padding-left: 24px; } .tabs { left: 50%; max-width: 680px; transform: translateX(-50%); border-right: 1px solid var(--line); border-left: 1px solid var(--line); border-radius: 18px 18px 0 0; } }