:root {
  /* Фіксована світла тема під bzagro.com (сайт лише світлий) */
  --tg-bg: #ffffff;
  --tg-text: #212529;
  --tg-hint: #777777;
  --tg-card: #f4f5f3;
  --tg-link: #3f7201;
  --brand: #3f7201;          /* зелений «техніка з Європи» */
  --brand-dark: #2c5200;
  --brand-light: #eaf3e0;
  --gold: #fbb000;           /* золото логотипу BZ Agro */
  --ink: #1f1f29;
}

* { -webkit-tap-highlight-color: transparent; }

body {
  margin: 0;
  background: var(--tg-bg);
  color: var(--tg-text);
  font-family: "Helvetica Neue", Helvetica, Arial, -apple-system, sans-serif;
  overflow-x: hidden;
}

.card { background: var(--tg-card); }
.hint { color: var(--tg-hint); }

.tile {
  background: var(--tg-card);
  border: 1.5px solid transparent;
  transition: transform .08s ease, border-color .12s ease;
}
.tile:active { transform: scale(.97); }
.tile.sel { border-color: var(--brand); background: var(--brand-light); color: var(--brand-dark); }

.fade-in { animation: fade .25s ease both; }
@keyframes fade { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }

.progress-bar {
  height: 8px; border-radius: 99px; background: #e3e7e3; overflow: hidden;
}
.progress-fill {
  height: 100%; background: linear-gradient(90deg, var(--brand), #5aa83f);
  transition: width .6s ease; border-radius: 99px;
}

.shimmer {
  background: linear-gradient(100deg, #e9ece9 30%, #f5f7f5 50%, #e9ece9 70%);
  background-size: 200% 100%; animation: sh 1.2s infinite;
}
@keyframes sh { to { background-position: -200% 0; } }

.scroll-x { scrollbar-width: none; -ms-overflow-style: none; }
.scroll-x::-webkit-scrollbar { display: none; }

.snap { scroll-snap-type: x mandatory; }
.snap > * { scroll-snap-align: start; }

.lightbox {
  position: fixed; inset: 0; z-index: 50;
  background: rgba(0,0,0,.92);
  display: flex; align-items: center; justify-content: center;
  padding: 12px; animation: fade .15s ease both;
}
.lightbox img { max-width: 100%; max-height: 100%; object-fit: contain; border-radius: 8px; }

/* брендовий хедер (чорна смуга з офіційним лого BZ Agro, як на bzagro.com) */
#brandbar {
  position: fixed; top: 0; left: 0; right: 0; z-index: 41;
  background: var(--ink); text-align: center; padding: 9px 0;
}
#brandbar .bzlogo { height: 34px; width: auto; vertical-align: middle; }
.has-brandbar #app { padding-top: 52px; }

/* нижнє таб-меню */
.has-tabbar #app { padding-bottom: 80px; }
#tabbar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 40;
  display: flex; background: var(--tg-bg);
  border-top: 1px solid var(--tg-card);
  padding: 6px 4px calc(6px + env(safe-area-inset-bottom));
}
#tabbar .tab {
  flex: 1; display: flex; flex-direction: column; align-items: center; gap: 2px;
  background: none; border: 0; font-size: 11px; color: var(--tg-hint); padding: 4px 0;
}
#tabbar .tab span { font-size: 21px; line-height: 1; }
#tabbar .tab.active { color: var(--brand); font-weight: 600; }
#tabbar .tab.disabled { opacity: .38; }

/* сегмент-перемикач під замовлення / в наявності */
.seg { display: flex; background: var(--tg-card); border-radius: 12px; padding: 3px; }
.seg button {
  flex: 1; border: 0; background: none; padding: 9px 4px; border-radius: 9px;
  font-size: 13px; font-weight: 600; color: var(--tg-hint);
}
.seg button.on { background: var(--tg-bg); color: var(--brand); box-shadow: 0 1px 3px rgba(0,0,0,.1); }

/* чат з AI-менеджером */
#chatlog { padding-bottom: 150px; }
.chatrow { display: flex; }
.chatrow.user { justify-content: flex-end; }
.bubble { max-width: 82%; padding: 9px 12px; border-radius: 14px; font-size: 14px; line-height: 1.35; white-space: pre-wrap; }
.bubble.assistant { background: var(--tg-card); color: var(--tg-text); border-bottom-left-radius: 4px; }
.bubble.user { background: var(--brand); color: #fff; border-bottom-right-radius: 4px; }
.chatbar {
  position: fixed; left: 0; right: 0; bottom: 80px; z-index: 39;
  display: flex; gap: 8px; padding: 8px 12px;
  background: var(--tg-bg); border-top: 1px solid var(--tg-card);
}
.chatbar input {
  flex: 1; border: 1px solid var(--tg-card); border-radius: 20px;
  padding: 9px 14px; font-size: 14px; outline: none;
  background: var(--tg-bg); color: var(--tg-text);
}
.chatbar button { background: var(--brand); color: #fff; border: 0; border-radius: 50%; width: 40px; height: 40px; font-size: 16px; flex: none; }