/* «Школьная Лавка» — стили. Токены совпадают с прототипом в Figma (коллекция переменных «Лавка»). */

@font-face { font-family: "Unbounded"; font-weight: 600; font-display: swap; src: url("../fonts/unbounded-cyrillic-600.woff2") format("woff2"); unicode-range: U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; }
@font-face { font-family: "Unbounded"; font-weight: 600; font-display: swap; src: url("../fonts/unbounded-latin-600.woff2") format("woff2"); unicode-range: U+0000-00FF, U+20AC, U+20BD, U+2122; }
@font-face { font-family: "Unbounded"; font-weight: 700; font-display: swap; src: url("../fonts/unbounded-cyrillic-700.woff2") format("woff2"); unicode-range: U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; }
@font-face { font-family: "Unbounded"; font-weight: 700; font-display: swap; src: url("../fonts/unbounded-latin-700.woff2") format("woff2"); unicode-range: U+0000-00FF, U+20AC, U+20BD, U+2122; }
@font-face { font-family: "Onest"; font-weight: 400; font-display: swap; src: url("../fonts/onest-cyrillic-400.woff2") format("woff2"); unicode-range: U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; }
@font-face { font-family: "Onest"; font-weight: 400; font-display: swap; src: url("../fonts/onest-latin-400.woff2") format("woff2"); unicode-range: U+0000-00FF, U+2000-206F, U+20AC, U+20BD, U+2122, U+2190-2199, U+2212; }
@font-face { font-family: "Onest"; font-weight: 500; font-display: swap; src: url("../fonts/onest-cyrillic-500.woff2") format("woff2"); unicode-range: U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; }
@font-face { font-family: "Onest"; font-weight: 500; font-display: swap; src: url("../fonts/onest-latin-500.woff2") format("woff2"); unicode-range: U+0000-00FF, U+2000-206F, U+20AC, U+20BD, U+2122, U+2190-2199, U+2212; }
@font-face { font-family: "Onest"; font-weight: 600; font-display: swap; src: url("../fonts/onest-cyrillic-600.woff2") format("woff2"); unicode-range: U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; }
@font-face { font-family: "Onest"; font-weight: 600; font-display: swap; src: url("../fonts/onest-latin-600.woff2") format("woff2"); unicode-range: U+0000-00FF, U+2000-206F, U+20AC, U+20BD, U+2122, U+2190-2199, U+2212; }
@font-face { font-family: "Onest"; font-weight: 700; font-display: swap; src: url("../fonts/onest-cyrillic-700.woff2") format("woff2"); unicode-range: U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; }
@font-face { font-family: "Onest"; font-weight: 700; font-display: swap; src: url("../fonts/onest-latin-700.woff2") format("woff2"); unicode-range: U+0000-00FF, U+2000-206F, U+20AC, U+20BD, U+2122, U+2190-2199, U+2212; }

:root {
  --bg: #FBF7EE;
  --surface: #FFFFFF;
  --ink: #17201B;
  --muted: #6B776F;
  --line: #E8E1D1;
  --primary: #1E5B45;
  --primary-soft: #E3EFE8;
  --on-primary: #FFFFFF;
  --accent: #FFC93C;
  --accent-soft: #FFF3CF;
  --danger: #D9483B;
  --danger-soft: #FBE4E1;
  --success: #2E9E5B;
  --chalk: #14392C;

  --r-sm: 12px;
  --r: 18px;
  --r-lg: 22px;
  --font: "Onest", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --display: "Unbounded", "Onest", system-ui, sans-serif;
  --tabbar-h: 68px;
  color-scheme: light;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font: 400 15px/1.4 var(--font);
  -webkit-font-smoothing: antialiased;
}
a { color: var(--primary); text-decoration: none; }
button, input, select, textarea { font: inherit; color: inherit; }
img, svg { display: block; }
h1, h2, h3 { font-family: var(--display); font-weight: 600; margin: 0; line-height: 1.2; letter-spacing: -0.01em; }
h1 { font-size: 22px; }
h2 { font-size: 18px; }
h3 { font-size: 15px; }
p { margin: 0; }
.muted { color: var(--muted); }
.small { font-size: 13px; }
.tiny { font-size: 12px; }
.num { font-family: var(--display); font-weight: 600; }
.ok-text { color: var(--success); }
.bad-text { color: var(--danger); }
.center { text-align: center; }
.stack { display: flex; flex-direction: column; gap: 12px; }
.stack-lg { display: flex; flex-direction: column; gap: 18px; }
.row { display: flex; align-items: center; gap: 12px; }
.row--between { justify-content: space-between; }
.grow { flex: 1; min-width: 0; }
.hidden { display: none !important; }
.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.ico { width: 20px; height: 20px; flex: none; }
.ico--sm { width: 16px; height: 16px; }
.ico--lg { width: 28px; height: 28px; }

/* ---------- каркас мобильных страниц ---------- */
.app { max-width: 480px; margin: 0 auto; min-height: 100dvh; position: relative; padding-bottom: calc(var(--tabbar-h) + 24px + env(safe-area-inset-bottom)); }
.app--bare { padding-bottom: 32px; }
.page { padding: 8px 20px 24px; }
.topbar { display: flex; align-items: center; gap: 12px; padding: 14px 20px 8px; }
.topbar__titles { min-width: 0; flex: 1; }
.topbar__titles h1 { font-size: 20px; }
.topbar__titles p { color: var(--muted); font-size: 13px; margin-top: 2px; }
.iconbtn { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 14px; background: var(--surface); border: 1px solid var(--line); color: var(--ink); flex: none; cursor: pointer; }
.page-title { padding: 18px 20px 6px; }
.loc__row { display: flex; align-items: center; gap: 6px; margin-top: 2px; color: var(--primary); }
.loc__row h1 { font-size: 18px; color: var(--ink); }
.page-title h1 { font-size: 24px; }

/* нижнее меню */
.tabbar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 20; display: flex; justify-content: center; background: var(--surface); border-top: 1px solid var(--line); padding-bottom: env(safe-area-inset-bottom); }
.tabbar__in { display: flex; justify-content: space-around; width: 100%; max-width: 480px; height: var(--tabbar-h); }
.tabbar a { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; flex: 1; color: var(--muted); font-size: 11px; font-weight: 500; opacity: .7; position: relative; }
.tabbar a.is-active { color: var(--primary); font-weight: 600; opacity: 1; }
.tabbar .badge { position: absolute; top: 8px; left: calc(50% + 6px); }
.tabbar--dark { background: var(--chalk); border-top: 0; }
.tabbar--dark a { color: var(--on-primary); }
.tabbar--dark a.is-active { color: var(--accent); }

.badge { min-width: 18px; height: 18px; padding: 0 5px; border-radius: 9px; background: var(--accent); color: var(--ink); font-size: 11px; font-weight: 700; display: inline-flex; align-items: center; justify-content: center; }

/* ---------- кнопки ---------- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 52px; padding: 14px 20px; border-radius: 16px; border: 1.5px solid transparent; font-weight: 600; font-size: 16px; cursor: pointer; text-align: center; background: var(--surface); color: var(--ink); transition: transform .08s ease, opacity .15s; -webkit-tap-highlight-color: transparent; }
.btn:active { transform: scale(.98); }
.btn[disabled], .btn.is-disabled { opacity: .45; pointer-events: none; }
.btn--primary { background: var(--primary); color: var(--on-primary); }
.btn--accent { background: var(--accent); color: var(--ink); }
.btn--outline { background: transparent; border-color: var(--primary); color: var(--primary); }
.btn--outline-light { background: transparent; border-color: rgba(255,255,255,.7); color: var(--on-primary); }
.btn--danger { background: var(--danger-soft); color: var(--danger); }
.btn--ghost { background: transparent; color: var(--primary); min-height: 40px; padding: 8px 12px; }
.btn.bad-text { color: var(--danger); }
.btn--sm { min-height: 40px; padding: 8px 16px; font-size: 14px; border-radius: 12px; }
.btn--block { display: flex; width: 100%; }
.footer-actions { position: sticky; bottom: 0; padding: 10px 20px calc(18px + env(safe-area-inset-bottom)); background: linear-gradient(to top, var(--bg) 70%, rgba(251,247,238,0)); display: flex; flex-direction: column; gap: 10px; z-index: 10; }
.app:not(.app--bare) .footer-actions { bottom: calc(var(--tabbar-h) + env(safe-area-inset-bottom)); }

/* ---------- карточки, плашки, списки ---------- */
.card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); padding: 16px; }
.card--tight { padding: 12px; }
.card--chalk { background: var(--chalk); border: 0; color: var(--on-primary); }
.card--primary { background: var(--primary); border: 0; color: var(--on-primary); }
.card--accent { background: var(--accent-soft); border: 0; }
.card--outline { border: 2px solid var(--primary); }

.banner { display: flex; align-items: center; gap: 14px; padding: 16px; border-radius: var(--r-lg); }
.banner__icon { width: 44px; height: 44px; border-radius: 14px; display: flex; align-items: center; justify-content: center; flex: none; }
.banner h3 { font-size: 15px; }
.banner p { font-size: 13px; margin-top: 3px; }
.banner--ok { background: var(--primary); color: var(--on-primary); }
.banner--ok .banner__icon { background: var(--chalk); color: var(--accent); }
.banner--ok p { opacity: .8; }
.banner--wait { background: var(--accent-soft); border: 1.5px solid var(--accent); }
.banner--wait .banner__icon { background: var(--accent); }
.banner--wait p { color: var(--muted); }
.banner--bad { background: var(--danger-soft); }
.banner--bad .banner__icon { background: var(--danger); color: var(--on-primary); }
.banner--bad p { color: var(--muted); }
.banner--info { background: var(--accent-soft); }
.banner--info .banner__icon { background: transparent; width: 24px; height: 24px; }

.flash { margin: 8px 20px 0; padding: 12px 14px; border-radius: 14px; font-size: 14px; }
.flash--ok { background: var(--primary-soft); color: var(--primary); }
.flash--info { background: var(--accent-soft); }
.flash--error { background: var(--danger-soft); color: var(--danger); }

.list { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); padding: 4px 16px; }
.list__row { display: flex; align-items: center; gap: 12px; padding: 12px 0; color: var(--ink); }
.list__row + .list__row { border-top: 1px solid var(--line); }
.list__row .chev { color: var(--muted); }

.pill { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; border-radius: 10px; font-size: 12px; font-weight: 600; white-space: nowrap; }
.pill--accent { background: var(--accent); color: var(--ink); }
.pill--soft { background: var(--accent-soft); color: var(--ink); }
.pill--ok { background: var(--primary-soft); color: var(--primary); }
.pill--bad { background: var(--danger-soft); color: var(--danger); }
.pill--grey { background: var(--line); color: var(--muted); }
.pill--dark { background: var(--chalk); color: var(--on-primary); }

.steps-how { display: flex; gap: 6px; flex-wrap: wrap; }
.step-chip { display: inline-flex; align-items: center; gap: 6px; padding: 7px 10px; background: var(--surface); border: 1px solid var(--line); border-radius: 12px; font-size: 12px; font-weight: 500; }
.step-chip b { background: var(--accent); border-radius: 7px; padding: 0 6px; font-size: 12px; }

/* ---------- магазины ---------- */
.shop { display: flex; align-items: center; gap: 14px; padding: 14px 16px 14px 14px; background: var(--surface); border: 1px solid var(--line); border-radius: 20px; color: var(--ink); }
.shop.is-off { opacity: .45; }
.tile { width: 52px; height: 52px; border-radius: 16px; display: flex; align-items: center; justify-content: center; font: 700 20px var(--display); flex: none; }
.tile--sm { width: 36px; height: 36px; border-radius: 11px; font-size: 14px; }
.tone-red { background: var(--danger); color: var(--on-primary); }
.tone-pink { background: var(--danger-soft); color: var(--danger); }
.tone-green { background: var(--primary-soft); color: var(--primary); }
.tone-yellow { background: var(--accent); color: var(--ink); }
.tone-dark { background: var(--chalk); color: var(--accent); }
.shop h3 { font-size: 16px; }
.shop p { color: var(--muted); font-size: 13px; margin-top: 3px; }

/* ---------- каталог ---------- */
.search { display: flex; align-items: center; gap: 10px; background: var(--surface); border: 1px solid var(--line); border-radius: 14px; padding: 0 14px; }
.search input { border: 0; outline: 0; background: transparent; padding: 13px 0; width: 100%; font-size: 15px; }
.chips { display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none; margin: 0 -20px; padding: 2px 20px; }
.chips::-webkit-scrollbar { display: none; }
.chip { flex: none; padding: 8px 14px; border-radius: 12px; background: var(--surface); border: 1px solid var(--line); color: var(--ink); font-size: 13px; font-weight: 500; white-space: nowrap; }
.chip.is-active { background: var(--primary); border-color: var(--primary); color: var(--on-primary); }

.products { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.product { background: var(--surface); border: 1px solid var(--line); border-radius: 18px; padding: 8px 8px 10px; display: flex; flex-direction: column; gap: 6px; }
.product__img { height: 104px; border-radius: 12px; display: flex; align-items: center; justify-content: center; overflow: hidden; }
.product__img img { width: 64px; height: 64px; }
.product__img.is-photo { background: #fff; }
.product__img.is-photo img { width: 100%; height: 100%; object-fit: contain; }
.line__img.is-photo { background: #fff; border: 1px solid var(--line); }
.line__img.is-photo img { width: 48px; height: 48px; object-fit: contain; }
.product__name { font-weight: 500; font-size: 14px; line-height: 18px; min-height: 36px; padding: 0 2px;
  display: -webkit-box; -webkit-line-clamp: 3; line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.product__unit { color: var(--muted); font-size: 12px; padding: 0 2px; }
.product__foot { display: flex; align-items: center; justify-content: space-between; gap: 6px; margin-top: auto; padding-left: 2px; }
.product__price { font: 600 15px var(--display); }
.bg-accent-soft { background: var(--accent-soft); }
.bg-primary-soft { background: var(--primary-soft); }
.bg-danger-soft { background: var(--danger-soft); }

.addbtn { width: 36px; height: 36px; border-radius: 11px; border: 0; background: var(--primary); color: var(--on-primary); display: inline-flex; align-items: center; justify-content: center; cursor: pointer; }
.stepper { display: inline-flex; align-items: center; gap: 2px; background: var(--primary-soft); border-radius: 12px; padding: 3px; }
.stepper button { width: 30px; height: 30px; border: 0; border-radius: 9px; background: var(--surface); color: var(--primary); display: inline-flex; align-items: center; justify-content: center; cursor: pointer; }
.stepper output { min-width: 22px; text-align: center; font-weight: 600; font-size: 14px; }

.cartbar { position: fixed; left: 50%; transform: translateX(-50%); bottom: calc(var(--tabbar-h) + 12px + env(safe-area-inset-bottom)); width: calc(100% - 32px); max-width: 448px; z-index: 15; display: flex; align-items: center; gap: 12px; padding: 12px 18px; border-radius: 20px; background: var(--chalk); color: var(--on-primary); box-shadow: 0 10px 30px rgba(20,57,44,.25); }
.cartbar .badge { height: 26px; min-width: 26px; border-radius: 10px; font-size: 14px; }
.cartbar__sum { font: 600 16px var(--display); color: var(--accent); }

/* ---------- корзина и формы ---------- */
.line { display: flex; align-items: center; gap: 12px; padding: 10px; background: var(--surface); border: 1px solid var(--line); border-radius: 18px; }
.line__img { width: 56px; height: 56px; border-radius: 12px; display: flex; align-items: center; justify-content: center; flex: none; }
.line__img img { width: 38px; height: 38px; }
.line__name { font-weight: 500; font-size: 14px; }
.line.is-missing { opacity: .55; }
.line.is-missing .line__name { text-decoration: line-through; }

.sum { display: flex; flex-direction: column; gap: 10px; }
.sum__row { display: flex; justify-content: space-between; gap: 12px; }
.sum__row span:first-child { color: var(--muted); }
.sum__total { border-top: 1px solid var(--line); padding-top: 10px; align-items: center; }
.sum__total span:first-child { color: var(--ink); font-weight: 600; font-size: 16px; }
.sum__total span:last-child { font: 600 18px var(--display); }

.field { display: flex; flex-direction: column; gap: 6px; }
.field > span { font-size: 13px; font-weight: 500; color: var(--muted); }
.field input, .field select, .field textarea { width: 100%; padding: 14px 16px; border-radius: 14px; border: 1.5px solid var(--line); background: var(--surface); font-size: 16px; outline: 0; }
.field textarea { resize: vertical; min-height: 80px; }
.field input:focus, .field select:focus, .field textarea:focus { border-color: var(--primary); }
.field .hint { font-size: 12px; color: var(--muted); }
.field.has-error input { border-color: var(--danger); }
.field .err { font-size: 12px; color: var(--danger); }

.seg { display: flex; gap: 4px; padding: 4px; background: var(--surface); border: 1px solid var(--line); border-radius: 14px; }
.seg label { flex: 1; }
.seg input { position: absolute; opacity: 0; pointer-events: none; }
.seg span { display: block; text-align: center; padding: 10px 6px; border-radius: 10px; font-weight: 600; font-size: 14px; color: var(--muted); cursor: pointer; }
.seg input:checked + span { background: var(--primary); color: var(--on-primary); }
.seg input:focus-visible + span { outline: 2px solid var(--accent); }

.switch { display: flex; align-items: center; gap: 12px; cursor: pointer; }
.switch input { position: absolute; opacity: 0; }
.switch__ui { width: 46px; height: 28px; border-radius: 14px; background: var(--line); position: relative; flex: none; transition: background .15s; }
.switch__ui::after { content: ""; position: absolute; top: 3px; left: 3px; width: 22px; height: 22px; border-radius: 50%; background: var(--surface); transition: transform .15s; box-shadow: 0 1px 2px rgba(0,0,0,.15); }
.switch input:checked + .switch__ui { background: var(--primary); }
.switch input:checked + .switch__ui::after { transform: translateX(18px); }
.switch input:focus-visible + .switch__ui { outline: 2px solid var(--accent); }

.place { display: flex; align-items: center; gap: 12px; }
.place__pin { width: 40px; height: 40px; border-radius: 12px; background: var(--primary-soft); color: var(--primary); display: flex; align-items: center; justify-content: center; flex: none; }

/* план школы */
.floors { display: flex; gap: 4px; padding: 4px; background: var(--surface); border: 1px solid var(--line); border-radius: 14px; }
.floors button { flex: 1; padding: 9px 6px; border: 0; border-radius: 10px; background: transparent; font-weight: 600; font-size: 13px; color: var(--muted); cursor: pointer; }
.floors button.is-active { background: var(--primary); color: var(--on-primary); }
.plan { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r); padding: 12px; }
.plan__grid { display: grid; gap: 6px; }
.room { border: 0; border-radius: 12px; background: var(--primary-soft); color: var(--primary); font: 600 15px var(--display); min-height: 64px; cursor: pointer; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; }
.room small { font: 600 10px var(--font); color: var(--accent); display: none; }
.room.is-selected { background: var(--primary); color: var(--on-primary); outline: 3px solid var(--accent); }
.room.is-selected small { display: block; }
.plan__svg { width: 100%; height: auto; }
.room-svg rect { fill: var(--primary-soft); transition: fill .15s; }
.room-svg text { fill: var(--primary); font: 600 15px var(--display); text-anchor: middle; dominant-baseline: central; pointer-events: none; }
.room-svg:hover rect { fill: #d3e6db; }
.room-svg.is-selected rect { fill: var(--primary); stroke: var(--accent); stroke-width: 3; }
.room-svg.is-selected text { fill: var(--on-primary); }
.place-pick summary { list-style: none; cursor: pointer; }
.place-pick summary::-webkit-details-marker { display: none; }
.place-pick[open] summary { margin-bottom: 14px; }
.place__room { display: block; font-size: 16px; }
.plan__corridor { border-radius: 8px; background: var(--bg); color: var(--muted); font-size: 11px; text-align: center; padding: 7px; }

/* статус заказа */
.code { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; }
.code b { background: var(--surface); color: var(--ink); border-radius: 14px; padding: 10px 0; text-align: center; font: 600 28px var(--display); }
.progress { display: flex; gap: 4px; }
.progress i { flex: 1; height: 6px; border-radius: 3px; background: var(--chalk); }
.progress i.is-on { background: var(--accent); }
.timeline { display: flex; flex-direction: column; gap: 12px; }
.timeline__row { display: flex; align-items: center; gap: 12px; color: var(--muted); }
.timeline__dot { width: 22px; height: 22px; border-radius: 11px; background: var(--line); color: var(--muted); display: flex; align-items: center; justify-content: center; flex: none; }
.timeline__dot svg { width: 14px; height: 14px; }
.timeline__row.is-done { color: var(--ink); }
.timeline__row.is-done .timeline__dot { background: var(--success); color: var(--on-primary); }
.timeline__row.is-now { color: var(--ink); font-weight: 600; }
.timeline__row.is-now .timeline__dot { background: var(--accent); color: var(--ink); }
.timeline__time { margin-left: auto; font-size: 12px; color: var(--muted); font-weight: 400; }
.avatar { width: 44px; height: 44px; border-radius: 16px; background: var(--accent); display: flex; align-items: center; justify-content: center; font: 600 18px var(--display); flex: none; }
.avatar--primary { background: var(--primary); color: var(--on-primary); }
.avatar--lg { width: 56px; height: 56px; border-radius: 20px; font-size: 22px; }

.stars { display: flex; gap: 10px; justify-content: center; }
.stars input { position: absolute; opacity: 0; }
.stars label { cursor: pointer; color: var(--line); }
.stars label svg { width: 38px; height: 38px; fill: currentColor; }
.stars:has(input:checked) label { color: var(--accent); }
.stars input:checked + label ~ label { color: var(--line); }   /* звёзды правее выбранной — серые */
.stars input:focus-visible + label { outline: 2px solid var(--primary); border-radius: 8px; }
.balance-num { font-size: 18px; }
.row--top { align-items: flex-start; }
.ok-accent { color: var(--accent); letter-spacing: .06em; }
.pay-amount { font-size: 34px; }
.tags { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; }
.tags input { position: absolute; opacity: 0; }
.tags span { display: inline-block; padding: 8px 14px; border-radius: 12px; background: var(--surface); border: 1px solid var(--line); font-size: 13px; font-weight: 500; cursor: pointer; }
.tags input:checked + span { background: var(--primary-soft); border-color: var(--primary); color: var(--primary); }

.hero-done { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 14px; padding: 40px 28px 0; }
.hero-done__icon { width: 84px; height: 84px; border-radius: 42px; display: flex; align-items: center; justify-content: center; }
.hero-done__icon svg { width: 40px; height: 40px; }

.empty { text-align: center; padding: 48px 24px; color: var(--muted); display: flex; flex-direction: column; align-items: center; gap: 12px; }
.empty img { width: 72px; height: 72px; opacity: .9; }

/* ---------- вход ---------- */
body.is-dark { background: var(--chalk); }
body.is-dark .app { padding-bottom: 0; }
.login { min-height: 100dvh; display: flex; flex-direction: column; background: var(--chalk); color: var(--on-primary); }
.login__hero { padding: 48px 28px 24px; display: flex; flex-direction: column; gap: 16px; }
.login__hero h1 { font-size: 38px; line-height: 46px; }
.login__hero p { opacity: .8; font-size: 16px; line-height: 23px; }
.login__mark { display: flex; align-items: center; gap: 8px; }
.login__mark b { background: var(--accent); color: var(--ink); border-radius: 10px; padding: 6px 10px; font: 700 13px var(--display); }
.login__mark span { color: var(--accent); font-weight: 500; font-size: 14px; }
.login__food { display: flex; gap: 10px; }
.login__food span { border-radius: 20px; padding: 12px; }
.login__food img { width: 44px; height: 44px; }
.login__sheet { margin-top: auto; background: var(--surface); color: var(--ink); border-radius: 28px 28px 0 0; padding: 24px 24px calc(32px + env(safe-area-inset-bottom)); display: flex; flex-direction: column; gap: 10px; }
.dev-box { margin-top: 10px; padding: 12px; border: 1.5px dashed var(--line); border-radius: 16px; display: flex; flex-direction: column; gap: 8px; }
.dev-box .btn { border-color: var(--line); }
.tg-login { display: flex; justify-content: center; min-height: 44px; }
.login-wrap { max-width: 480px; margin: 0 auto; width: 100%; min-height: 100dvh; display: flex; flex-direction: column; }
.codebox { display: grid; grid-template-columns: repeat(6, 1fr); gap: 8px; }
.codebox input { text-align: center; font: 600 22px var(--display); padding: 12px 0; }

/* ---------- курьер ---------- */
.courier-top { background: var(--chalk); color: var(--on-primary); padding: 14px 20px 18px; display: flex; flex-direction: column; gap: 14px; }
.modes { display: inline-flex; gap: 4px; padding: 4px; background: var(--primary); border-radius: 14px; }
.modes a, .modes span { padding: 8px 14px; border-radius: 10px; font-size: 13px; font-weight: 600; color: var(--on-primary); opacity: .75; }
.modes .is-active { background: var(--accent); color: var(--ink); opacity: 1; }
.online { display: inline-flex; align-items: center; gap: 8px; padding: 7px 12px; border-radius: 12px; border: 0; font-weight: 600; font-size: 13px; cursor: pointer; }
.online i { width: 8px; height: 8px; border-radius: 50%; background: currentColor; }
.online--on { background: var(--success); color: var(--on-primary); }
.online--off { background: rgba(255,255,255,.12); color: var(--on-primary); }
.kpis { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.kpi { background: var(--primary); border-radius: 14px; padding: 10px 12px; }
.kpi span { display: block; font-size: 11px; opacity: .7; }
.kpi b { font: 600 15px var(--display); }
.kpi--light { background: var(--surface); border: 1px solid var(--line); }
.kpi--light span { color: var(--muted); opacity: 1; }
.job { display: flex; flex-direction: column; gap: 10px; }
.job.is-locked { opacity: .55; }
.earn { font: 600 18px var(--display); color: var(--primary); }
.check { width: 26px; height: 26px; border-radius: 8px; border: 2px solid var(--line); background: var(--surface); display: inline-flex; align-items: center; justify-content: center; cursor: pointer; flex: none; color: transparent; }
.check.is-on { background: var(--success); border-color: var(--success); color: var(--on-primary); }
.check svg { width: 16px; height: 16px; }
.dropzone { display: flex; align-items: center; gap: 12px; padding: 14px; border: 1.5px dashed var(--primary); background: var(--primary-soft); border-radius: 20px; cursor: pointer; }
.keypad { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.keypad button { border: 0; background: var(--surface); border-radius: 14px; padding: 14px 0; font: 600 20px var(--display); cursor: pointer; }
.keypad button:empty { visibility: hidden; }
.codein { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; }
.codein input { text-align: center; font: 600 28px var(--display); padding: 14px 0; border-radius: 16px; border: 1.5px solid var(--line); background: var(--surface); width: 100%; }
.codein input:focus { border-color: var(--primary); outline: 0; }
.item-img { width: 32px; height: 32px; }
.strike { text-decoration: line-through; }
.list__row.is-missing { opacity: .7; }
.balance-head .small { opacity: .8; }
.balance-big { font-size: 38px; color: var(--accent); }
.done-dark { color: var(--on-primary); padding-top: 64px; }
.done-dark p { opacity: .85; }
.done-earn { font-size: 44px; color: var(--accent); }
.done-card { width: 100%; text-align: left; }
.done-card .sum__row span:first-child { color: var(--on-primary); opacity: .75; }
.done-card .sum__total { border-color: rgba(255,255,255,.2); }
.done-card .sum__total span:first-child { color: var(--on-primary); opacity: 1; }
.footer-dark { background: linear-gradient(to top, var(--chalk) 70%, rgba(20,57,44,0)); }
progress.meter { width: 100%; height: 8px; border: 0; border-radius: 4px; background: var(--line); overflow: hidden; appearance: none; }
progress.meter::-webkit-progress-bar { background: var(--line); border-radius: 4px; }
progress.meter::-webkit-progress-value { background: var(--success); border-radius: 4px; }
progress.meter::-moz-progress-bar { background: var(--success); border-radius: 4px; }
.bar { height: 8px; border-radius: 4px; background: var(--line); overflow: hidden; }
.bar i { display: block; height: 100%; background: var(--success); border-radius: 4px; }

/* ---------- админка ---------- */
.admin { display: grid; grid-template-columns: 240px minmax(0, 1fr); min-height: 100dvh; }
.admin__side { background: var(--chalk); color: var(--on-primary); padding: 28px 20px; display: flex; flex-direction: column; gap: 6px; position: sticky; top: 0; height: 100dvh; }
.admin__logo { padding: 0 8px 24px; color: var(--on-primary); }
.admin__logo h2 { font-size: 18px; line-height: 22px; }
.admin__logo span { color: var(--accent); font-size: 12px; }
.admin__nav a { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 12px; color: var(--on-primary); opacity: .75; font-weight: 500; }
.admin__nav a.is-active { background: var(--primary); opacity: 1; font-weight: 600; }
.admin__nav a.is-active svg { color: var(--accent); }
.admin__nav .badge { margin-left: auto; }
.admin__now { margin-top: auto; background: var(--primary); border-radius: 14px; padding: 14px; font-size: 13px; }
.admin__now span { display: block; font-size: 11px; opacity: .7; }
.admin__now em { font-style: normal; color: var(--accent); font-size: 12px; }
.admin__main { padding: 32px 36px; display: flex; flex-direction: column; gap: 20px; min-width: 0; }
.admin__head { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; flex-wrap: wrap; }
.admin__head h1 { font-size: 26px; }
.stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 14px; }
.stat { background: var(--surface); border: 1px solid var(--line); border-radius: 16px; padding: 16px; }
.stat span { font-size: 12px; color: var(--muted); }
.stat b { display: block; font: 600 22px var(--display); margin-top: 6px; }
.stat--dark { background: var(--chalk); border: 0; color: var(--on-primary); }
.stat--dark span { color: var(--on-primary); opacity: .75; }
.stat--dark b { color: var(--accent); }
.table-wrap { background: var(--surface); border: 1px solid var(--line); border-radius: 16px; overflow-x: auto; }
.table { width: 100%; border-collapse: collapse; font-size: 14px; }
.table th { text-align: left; font-size: 12px; font-weight: 600; color: var(--muted); background: var(--bg); padding: 12px; white-space: nowrap; }
.table td { padding: 12px; border-top: 1px solid var(--line); vertical-align: middle; }
.table tr.is-problem td { background: #FFF8F6; }
.table .r { text-align: right; }
.toolbar { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.toolbar .chip { padding: 8px 14px; }
.inline-form { display: inline-flex; gap: 6px; align-items: center; }
.inline-form input { width: 90px; padding: 6px 8px; border-radius: 8px; border: 1px solid var(--line); }
.grid-2 { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 20px; align-items: start; }
.grid-3 { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 14px; }
.kv { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 6px 0; }
.kv input { width: 140px; text-align: right; padding: 8px 10px; border-radius: 10px; border: 1px solid var(--line); background: var(--bg); font-weight: 600; }
.kv input.wide { width: 220px; }

.badge--bad { background: var(--danger); color: var(--on-primary); }
.admin-thumb { width: 40px; height: 40px; border-radius: 10px; display: flex; align-items: center; justify-content: center; flex: none; overflow: hidden; }
.admin-thumb img { width: 28px; height: 28px; }
.admin-thumb.is-photo { background: #fff; border: 1px solid var(--line); }
.admin-thumb.is-photo img { width: 100%; height: 100%; object-fit: contain; }
.table tr.is-hidden td { opacity: .45; }
.mt { margin-top: 14px; }
.photo-form .btn { cursor: pointer; }
.flash--admin { margin: 0; }
.add-product { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 12px; align-items: end; margin-top: 14px; }
.add-product .field input, .add-product .field select { padding: 10px 12px; font-size: 14px; }
.bell-row { gap: 8px; }
.bell-row input { width: 64px; padding: 6px 8px; border-radius: 8px; border: 1px solid var(--line); background: var(--bg); text-align: center; font-weight: 600; }
.admin .card summary { cursor: pointer; }
.admin h2 { font-size: 16px; }

@media (max-width: 860px) {
  .admin { grid-template-columns: 1fr; }
  .admin__side { position: static; height: auto; flex-direction: row; flex-wrap: wrap; align-items: center; padding: 14px 16px; }
  .admin__logo { padding: 0 12px 0 0; }
  .admin__nav { display: flex; flex-wrap: wrap; gap: 4px; }
  .admin__now { display: none; }
  .admin__main { padding: 20px 16px; }
}

.toast { position: fixed; left: 50%; bottom: calc(var(--tabbar-h) + 90px); transform: translate(-50%, 20px); max-width: calc(100% - 32px); background: var(--ink); color: #fff; padding: 12px 16px; border-radius: 14px; font-size: 14px; opacity: 0; pointer-events: none; transition: opacity .2s, transform .2s; z-index: 50; }
.toast.is-on { opacity: 1; transform: translate(-50%, 0); }
form.is-busy { opacity: .6; }

/* ---------- ошибки ---------- */
.error-page { min-height: 70dvh; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; gap: 12px; padding: 24px; }
.error-page b { font: 700 54px var(--display); color: var(--primary); }

:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* ---------- встречающий экран ---------- */
.login__options { display: flex; flex-direction: column; gap: 10px; }
.login__sheet h2 { font-size: 20px; line-height: 26px; }
.btn--vk { background: #0077FF; color: #fff; }
.vk-mark { font: 800 12px var(--font); letter-spacing: -.02em; background: #fff; color: #0077FF; border-radius: 6px; padding: 2px 4px; }
.g-mark { width: 20px; height: 20px; border-radius: 50%; background: #fff; border: 1.5px solid currentColor; display: inline-flex; align-items: center; justify-content: center; font: 700 12px var(--font); }
.more { margin-top: 6px; border-top: 1px solid var(--line); padding-top: 4px; }
.more summary { list-style: none; cursor: pointer; display: flex; align-items: center; justify-content: center; gap: 6px; padding: 10px; color: var(--muted); font-size: 14px; font-weight: 500; }
.more summary::-webkit-details-marker { display: none; }
.more__chev { transition: transform .25s ease; }
.more[open] .more__chev { transform: rotate(180deg); }
.more form { display: flex; flex-direction: column; gap: 6px; padding-bottom: 4px; }

.fly-ghost { position: fixed; z-index: 60; pointer-events: none; object-fit: contain; border-radius: 12px; }
.confetti { position: fixed; z-index: 60; width: 8px; height: 12px; border-radius: 2px; pointer-events: none; }

/* ---------- анимации ----------
   Только если человек не просил «уменьшить движение» в настройках телефона. Без них всё работает так же. */
@keyframes rise      { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
@keyframes fade      { from { opacity: 0; } to { opacity: 1; } }
@keyframes pop       { 0% { transform: scale(1); } 40% { transform: scale(1.3); } 100% { transform: scale(1); } }
@keyframes pop-in    { 0% { opacity: 0; transform: scale(.4); } 70% { transform: scale(1.12); } 100% { opacity: 1; transform: scale(1); } }
@keyframes bob       { 0%, 100% { transform: translateY(0) rotate(var(--tilt, 0deg)); } 50% { transform: translateY(-9px) rotate(calc(var(--tilt, 0deg) * -1)); } }
@keyframes sheet-up  { from { opacity: 0; transform: translateY(60px); } to { opacity: 1; transform: none; } }
@keyframes bar-up    { from { opacity: 0; transform: translate(-50%, 140%); } to { opacity: 1; transform: translate(-50%, 0); } }
@keyframes ring      { 0% { box-shadow: 0 0 0 0 rgba(255, 201, 60, .65); } 100% { box-shadow: 0 0 0 12px rgba(255, 201, 60, 0); } }
@keyframes ring-ok   { 0% { box-shadow: 0 0 0 0 rgba(46, 158, 91, .6); } 100% { box-shadow: 0 0 0 10px rgba(46, 158, 91, 0); } }
@keyframes stripes   { from { background-position: 0 0; } to { background-position: 24px 0; } }
@keyframes flip-in   { from { opacity: 0; transform: perspective(300px) rotateX(-80deg); } to { opacity: 1; transform: none; } }
@keyframes wiggle    { 0%, 100% { transform: rotate(0); } 20% { transform: rotate(-12deg); } 40% { transform: rotate(10deg); } 60% { transform: rotate(-6deg); } 80% { transform: rotate(4deg); } }
@keyframes vt-out    { to { opacity: 0; } }
@keyframes vt-in     { from { opacity: 0; } }

@media (prefers-reduced-motion: no-preference) {
  /* плавный переход между страницами (Chrome/Android; где не поддерживается — просто обычный переход) */
  @view-transition { navigation: auto; }
  ::view-transition-old(root) { animation: vt-out .14s ease-in both; }
  ::view-transition-new(root) { animation: vt-in .2s ease-out both; }

  /* появление содержимого страницы лесенкой */
  .topbar, .page-title, .flash { animation: rise .35s cubic-bezier(.2, .7, .2, 1) both; }
  .page > * { animation: rise .4s cubic-bezier(.2, .7, .2, 1) both; }
  .page > *:nth-child(2) { animation-delay: .04s; }
  .page > *:nth-child(3) { animation-delay: .08s; }
  .page > *:nth-child(4) { animation-delay: .12s; }
  .page > *:nth-child(5) { animation-delay: .16s; }
  .page > *:nth-child(n+6) { animation-delay: .2s; }

  /* магазины, товары, позиции, заказы курьера — каждая карточка чуть позже предыдущей */
  .shop, .products > .product, .line, .job, .stack > a.card { animation: rise .45s cubic-bezier(.2, .7, .2, 1) both; }
  .stack > .shop:nth-of-type(2), .products > .product:nth-child(2), .line:nth-of-type(2), .job:nth-of-type(2) { animation-delay: .06s; }
  .stack > .shop:nth-of-type(3), .products > .product:nth-child(3), .line:nth-of-type(3), .job:nth-of-type(3) { animation-delay: .12s; }
  .stack > .shop:nth-of-type(4), .products > .product:nth-child(4), .line:nth-of-type(4), .job:nth-of-type(4) { animation-delay: .18s; }
  .products > .product:nth-child(5) { animation-delay: .22s; }
  .products > .product:nth-child(6) { animation-delay: .26s; }
  .products > .product:nth-child(n+7) { animation-delay: .3s; }

  /* кнопки и плитки — живые на касание */
  .btn, .shop, .product, .chip, .iconbtn, .addbtn, .stepper button, .card { transition: transform .15s ease, box-shadow .2s ease, background-color .2s ease, opacity .2s; }
  .shop:hover, .product:hover { transform: translateY(-2px); box-shadow: 0 8px 20px rgba(23, 32, 27, .07); }
  .shop:active, .product:active { transform: scale(.985); }
  .btn--primary:hover, .btn--accent:hover { transform: translateY(-1px); box-shadow: 0 6px 16px rgba(30, 91, 69, .18); }
  .addbtn:active, .stepper button:active, .iconbtn:active, .chip:active { transform: scale(.88); }
  .product__img img { transition: transform .3s ease; }
  .product:hover .product__img img { transform: scale(1.06) rotate(-2deg); }

  /* меню снизу */
  .tabbar a svg { transition: transform .25s cubic-bezier(.2, 1.6, .4, 1); }
  .tabbar a.is-active svg { transform: translateY(-2px) scale(1.08); }
  .tabbar a:active svg { transform: scale(.85); }

  /* корзина */
  .is-pop { animation: pop .4s cubic-bezier(.2, 1.6, .4, 1); }
  .cartbar:not(.hidden) { animation: bar-up .45s cubic-bezier(.2, .9, .2, 1) both; }

  /* плашка «можно заказывать» — пульс; «урок идёт» — покачивание часов */
  .banner--ok .banner__icon { animation: ring 2.2s ease-out infinite; }
  .banner--wait .banner__icon svg { animation: wiggle 2.8s ease-in-out infinite; transform-origin: 50% 50%; }

  /* вход и встречающий экран */
  .login__hero h1 { animation: rise .55s cubic-bezier(.2, .7, .2, 1) both .05s; }
  .login__hero p { animation: rise .55s cubic-bezier(.2, .7, .2, 1) both .15s; }
  .login__mark { animation: rise .5s both; }
  .login__food span { animation: pop-in .5s cubic-bezier(.2, 1.4, .4, 1) both, bob 3.6s ease-in-out infinite .6s; }
  .login__food span:nth-child(1) { --tilt: -4deg; animation-delay: .2s, .7s; }
  .login__food span:nth-child(2) { --tilt: 3deg;  animation-delay: .28s, 1.3s; }
  .login__food span:nth-child(3) { --tilt: -3deg; animation-delay: .36s, .9s; }
  .login__food span:nth-child(4) { --tilt: 4deg;  animation-delay: .44s, 1.6s; }
  .login__sheet { animation: sheet-up .55s cubic-bezier(.2, .9, .2, 1) both .2s; }
  .more[open] form { animation: rise .3s both; }

  /* статус заказа */
  .progress i.is-on { background: repeating-linear-gradient(-45deg, var(--accent) 0 8px, #ffd66a 8px 12px); background-size: 24px 100%; animation: stripes 1s linear infinite; }
  .timeline__row.is-now .timeline__dot { animation: ring 1.6s ease-out infinite; }
  .code b { animation: flip-in .5s cubic-bezier(.2, .8, .2, 1) both; }
  .code b:nth-child(2) { animation-delay: .08s; }
  .code b:nth-child(3) { animation-delay: .16s; }
  .code b:nth-child(4) { animation-delay: .24s; }
  .hero-done__icon { animation: pop-in .6s cubic-bezier(.2, 1.5, .4, 1) both .1s; }
  .done-earn { animation: pop-in .6s cubic-bezier(.2, 1.5, .4, 1) both .3s; display: inline-block; }
  .stars label svg { transition: transform .2s cubic-bezier(.2, 1.6, .4, 1); }
  .stars label:hover svg, .stars input:checked + label svg { transform: scale(1.18); }
  .tags span { transition: all .15s ease; }
  .tags input:checked + span { animation: pop .3s; }

  /* курьер */
  .online--on i { animation: ring-ok 1.6s ease-out infinite; border-radius: 50%; }
  .check.is-on { animation: pop .3s cubic-bezier(.2, 1.6, .4, 1); }
  .room-svg.is-selected rect { animation: pop .35s; transform-box: fill-box; transform-origin: center; }

  /* раскрытие «на плане» и прочих details */
  details[open] > :not(summary) { animation: rise .3s both; }
  .toast { transition: opacity .25s, transform .3s cubic-bezier(.2, 1.4, .4, 1); }
}