/* ============================================================
   Telemart — Trade-in. Telegram Mini App (one-screen wizard).
   Дизайн-токени з Figma "Telemart ReDesign", компонування —
   застосунок без прокрутки сторінки: шапка + екран + нижня панель.
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@400;500;600;700&family=Unbounded:wght@300;400;500;600&display=swap');

:root {
  --ink:        #0E0E0E;
  --muted:      #7F7F7F;
  --muted-2:    #929292;
  --lime:       #A2C617;
  --lime-soft:  #C8DD7A;
  --lime-tint:  #F2F7E0;
  --bg:         #F5F5F5;
  --line:       #E3E3E3;
  --line-soft:  #F2F2F2;
  --input-line: #C9C9C9;
  --placeholder:#707070;
  --white:      #FFFFFF;
  --strike:     #A6A6A6;
  --info:       #8744F3;
  --danger:     #E05B4C;

  --r-card: 16px;
  --r-sub:  12px;
  --r-field:10px;
  --r-pill: 999px;

  --font-head: 'Unbounded', system-ui, sans-serif;
  --font-body: 'Montserrat', system-ui, sans-serif;
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html, body { height: 100%; }
body {
  font-family: var(--font-body);
  color: var(--ink);
  background: var(--white);
  -webkit-font-smoothing: antialiased;
  overflow: hidden;                  /* сторінка не скролиться взагалі */
  overscroll-behavior: none;
}
button { font-family: inherit; cursor: pointer; border: none; background: none; color: inherit; -webkit-tap-highlight-color: transparent; }
button:focus, button:focus-visible { outline: none; }
input { font-family: inherit; }
img { display: block; max-width: 100%; }
.hidden { display: none !important; }

/* ---------- Каркас: 100dvh, три зони ---------- */
.app {
  display: flex;
  flex-direction: column;
  height: 100dvh;
  max-width: 480px;
  margin: 0 auto;
  background: var(--white);
}

/* ---------- Шапка ---------- */
.head {
  flex: none;
  padding: 10px 16px 8px;
  border-bottom: 1px solid var(--line-soft);
}
.head__row { display: flex; align-items: center; gap: 10px; }
.head__brand {
  font-family: var(--font-head);
  font-weight: 500;
  font-size: 19px;
  white-space: nowrap;
}
.head__brand .br { color: var(--lime); }
.head__meta { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.head__bonus { font-size: 12px; color: var(--muted); }
.head__bonus b { color: var(--ink); }
.head__ver { font-size: 9px; color: var(--line); margin-left: 4px; }
.head__stat { font-size: 11px; color: var(--muted); }
.head__stat b { color: var(--ink); font-weight: 600; }
.head__stat-time { color: var(--line); }
.head__info {
  width: 26px; height: 26px; flex: none;
  border-radius: 50%;
  background: var(--bg);
  color: var(--muted);
  font-weight: 700; font-size: 13px;
  font-family: Georgia, serif;
  font-style: italic;
}

/* Кроки */
.steps { display: flex; align-items: center; gap: 8px; margin-top: 10px; }
.step {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 12px; font-weight: 600;
  color: var(--muted-2);
}
.step__n {
  width: 20px; height: 20px;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 50%;
  background: var(--bg);
  color: var(--muted-2);
  font-size: 11px; font-weight: 700;
  transition: background .15s ease, color .15s ease;
}
.step.is-on { color: var(--ink); }
.step.is-on .step__n { background: var(--lime); color: var(--white); }
.step.is-done .step__n { background: var(--lime-tint); color: var(--lime); }
.step__sep { flex: 1 1 auto; height: 1px; background: var(--line); }

/* ---------- Екрани ---------- */
.screens { flex: 1 1 auto; min-height: 0; position: relative; }
.screen {
  position: absolute; inset: 0;
  overflow-y: auto;                    /* скрол лише всередині кроку */
  -webkit-overflow-scrolling: touch;
  padding: 14px 16px 16px;
  display: flex; flex-direction: column; gap: 12px;
}

.screen-title { font-family: var(--font-head); font-weight: 400; font-size: 16px; }
.screen-sub { font-size: 13px; color: var(--muted); margin-top: -6px; }

/* ---------- Сегмент-перемикач ---------- */
.seg {
  flex: none;
  display: flex; gap: 4px;
  padding: 4px;
  background: var(--bg);
  border-radius: var(--r-sub);
}
.seg__btn {
  flex: 1 1 0;
  padding: 9px 4px;
  border-radius: 9px;
  font-weight: 600; font-size: 13px;
  color: var(--muted);
  transition: background .15s ease, color .15s ease;
}
.seg__btn.is-on { background: var(--white); color: var(--ink); box-shadow: 0 1px 4px rgba(14,14,14,.06); }

/* ---------- Інпут ---------- */
.input {
  display: flex; align-items: center; gap: 8px;
  padding: 12px 14px;
  background: var(--white);
  border: 1px solid var(--input-line);
  border-radius: var(--r-field);
  transition: border-color .15s ease;
}
.input:focus-within { border-color: var(--lime); }
.input .ico { width: 18px; height: 18px; color: var(--input-line); flex: none; }
.input input {
  flex: 1 1 auto; min-width: 0;
  border: none; outline: none;
  font-size: 14px; color: var(--ink);
  background: transparent;
}
.input input::placeholder { color: var(--placeholder); }
.input--soft { background: var(--bg); border-color: transparent; }
.input--soft:focus-within { border-color: var(--lime); }

/* Популярні запити */
/* Чіпи-підказки в один рядок, симетрично розподілені по всій ширині
   (space-between) — щоб блок під рядком пошуку був рівномірно заповнений. */
.hints {
  display: flex; gap: 6px; flex-wrap: nowrap;
  justify-content: space-between;
}
.hint {
  flex: 0 1 auto;
  padding: 6px 10px;
  background: var(--bg);
  border-radius: var(--r-pill);
  font-size: 12px; font-weight: 600;
  color: var(--muted);
  white-space: nowrap;
}
.hint:active { background: var(--lime-tint); color: var(--ink); }

/* ---------- Результати пошуку ---------- */
.results { display: flex; flex-direction: column; gap: 8px; }
.res-note { font-size: 13px; color: var(--muted); text-align: center; padding: 12px 0; }
.res-card {
  display: flex; align-items: center; gap: 12px;
  width: 100%;
  padding: 10px 12px;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--r-sub);
  text-align: left;
  transition: border-color .12s ease, background .12s ease;
}
.res-card:active { border-color: var(--lime); background: var(--lime-tint); }
.res-card img { width: 34px; height: 42px; object-fit: contain; flex: none; }
.res-card__body { flex: 1 1 auto; min-width: 0; }
.res-card__name { font-weight: 600; font-size: 13px; line-height: 1.3; }
.res-card__meta { font-size: 12px; color: var(--muted); margin-top: 2px; }
.res-card__go {
  flex: none;
  width: 28px; height: 28px;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 50%;
  background: var(--lime-tint); color: var(--lime);
}
.res-card__go svg { width: 15px; height: 15px; }
.res-card.is-disabled { opacity: .5; }
.res-card.is-disabled:active { border-color: var(--line); background: var(--white); }

/* ---------- Категорії ---------- */
.cat-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.cat-chip {
  display: flex; align-items: center; gap: 8px;
  padding: 10px 12px;
  background: var(--white);
  border: 1px solid var(--line-soft);
  border-radius: var(--r-field);
  font-weight: 600; font-size: 12.5px;
  text-align: left;
  transition: border-color .15s ease;
}
.cat-chip:active { border-color: var(--lime); }
/* Уніфікований «тайл» іконки: усі категорії виглядають однаково незалежно від
   того, фото це чи піктограма (раніше вони були перемішані) */
.cat-chip__ic {
  width: 34px; height: 34px; flex: none;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--bg);
  border-radius: 9px;
  overflow: hidden;
}
.cat-chip__ic img { width: 22px; height: 22px; object-fit: contain; }
.cat-chip img { width: 24px; height: 24px; object-fit: contain; flex: none; }

/* обрана категорія */
.cat-current {
  display: flex; align-items: center; gap: 8px;
  padding: 10px 12px;
  background: var(--lime-tint);
  border-radius: var(--r-field);
  font-weight: 600; font-size: 13px;
}
.cat-current img { width: 22px; height: 22px; object-fit: contain; }
.cat-current__change { margin-left: auto; color: var(--lime); font-weight: 600; font-size: 13px; }

/* ---------- Картка товару (крок 2) ---------- */
.prod-card {
  display: flex; align-items: center; gap: 12px;
  padding: 12px 14px;
  background: var(--bg);
  border-radius: var(--r-card);
}
.prod-card img { width: 42px; height: 52px; object-fit: contain; flex: none; }
.prod-card__body { flex: 1 1 auto; min-width: 0; }
.prod-card__name { font-weight: 600; font-size: 13.5px; line-height: 1.3; }
.prod-card__base { font-size: 12px; color: var(--muted); margin-top: 3px; }
.prod-card__base b { color: var(--ink); }
/* хрестик видалення в картці активного товару (крок «Стан») */
.prod-card__del { background: var(--white); }
.prod-card__del:active { color: var(--danger); }

/* крок «Стан»: активний товар + згорнуті товари */
.crit-active { display: flex; flex-direction: column; gap: 12px; }
.crit-collapsed { cursor: pointer; }
.crit-collapsed .sum-item__body { cursor: pointer; }
.crit-collapsed:active { background: var(--line-soft); }

/* ---------- Критерії: групи пігулок ---------- */
.crit { display: flex; flex-direction: column; gap: 8px; }
.crit__label {
  font-size: 11px; font-weight: 600;
  color: var(--muted);
  text-transform: uppercase; letter-spacing: .05em;
}
.crit__opts { display: flex; gap: 6px; flex-wrap: wrap; }
.crit-opt {
  padding: 9px 14px;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--r-pill);
  font-weight: 600; font-size: 13px;
  transition: background .12s ease, border-color .12s ease, color .12s ease;
}
.crit-opt.is-on { background: var(--lime); border-color: var(--lime); color: var(--white); }
.crit-opt.is-disabled { opacity: .35; }
.crit__desc { font-size: 12px; color: var(--muted); min-height: 15px; }
.crit__note { font-size: 12px; color: var(--info); }

/* ---------- Заявка (крок 3) ---------- */
.sum-list { display: flex; flex-direction: column; gap: 8px; }
.sum-item {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 12px;
  background: var(--bg);
  border-radius: var(--r-sub);
}
.sum-item img { width: 30px; height: 38px; object-fit: contain; flex: none; }
.sum-item__body { flex: 1 1 auto; min-width: 0; }
.sum-item__name {
  font-weight: 600; font-size: 12.5px; line-height: 1.3;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.sum-item__val { font-size: 12px; color: var(--muted); margin-top: 2px; }
.sum-item__val b { color: var(--lime); }
.sum-item__btn {
  width: 32px; height: 32px; flex: none;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 50%;
  background: var(--white); color: var(--muted);
}
.sum-item__btn svg { width: 15px; height: 15px; }
.sum-item__btn--del:active { color: var(--danger); }

.row-add {
  display: flex; align-items: center; justify-content: center; gap: 6px;
  padding: 11px;
  border: 1px dashed var(--line);
  border-radius: var(--r-field);
  color: var(--lime); font-weight: 600; font-size: 13px;
  width: 100%;
}
.row-add .ico { width: 16px; height: 16px; }

/* Купую нове */
.newbuy { display: flex; flex-direction: column; gap: 8px; }
.newbuy__head {
  display: flex; align-items: center; gap: 6px;
  font-weight: 600; font-size: 13px;
  color: var(--ink);
}
.newbuy__head .opt { color: var(--muted); font-weight: 500; font-size: 12px; }
.newbuy__hint { display: inline-flex; align-items: center; gap: 4px; font-size: 12px; color: var(--lime); font-weight: 600; }
.newbuy__hint .ico { width: 15px; height: 15px; }

/* Контакти */
.contacts { display: flex; flex-direction: column; gap: 8px; }
.contacts__row { display: flex; gap: 8px; }
.contacts__row .input { flex: 1 1 0; }
.tg-btn {
  padding: 9px 12px;
  border: 1px solid var(--lime);
  border-radius: var(--r-pill);
  color: var(--lime);
  font-weight: 600; font-size: 12.5px;
}

/* ---------- Екран успіху ---------- */
.done {
  flex: 1 1 auto;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  gap: 14px; text-align: center;
  padding: 24px;
}
.done__icon {
  width: 76px; height: 76px;
  display: flex; align-items: center; justify-content: center;
  border-radius: 50%;
  background: var(--lime-tint); color: var(--lime);
}
.done__icon svg { width: 42px; height: 42px; }
.done__title { font-family: var(--font-head); font-size: 19px; }
.done__text { font-size: 13.5px; color: var(--muted); line-height: 1.5; max-width: 300px; }
.done__demo {
  padding: 9px 12px;
  background: var(--lime-tint);
  border-radius: var(--r-field);
  font-size: 12px; color: var(--muted);
  max-width: 300px;
}

/* ---------- Нижня панель ---------- */
.bottombar {
  flex: none;
  display: flex; align-items: center; gap: 12px;
  padding: 10px 16px calc(10px + env(safe-area-inset-bottom));
  border-top: 1px solid var(--line-soft);
  background: var(--white);
}
.bb-total { flex: 1 1 auto; min-width: 0; }
.bb-total__k { font-size: 11px; color: var(--muted); }
.bb-total__v {
  font-family: var(--font-head);
  font-weight: 400; font-size: 19px;
  line-height: 1.35;                 /* запас, щоб гліфи Unbounded не обрізались */
  padding-bottom: 1px;
  letter-spacing: -.02em;
  white-space: nowrap;
  overflow: visible;
}
/* довгі суми — зменшуємо, щоб не впиратись у кнопку */
.bb-total__v.is-long   { font-size: 16px; }
.bb-total__v.is-longer { font-size: 14px; }
.bb-total__v small { font-family: var(--font-body); font-weight: 600; font-size: 12px; }
.bb-total__v.is-accent { color: var(--lime); }
.bb-total__strike { font-size: 11px; color: var(--strike); text-decoration: line-through; }
.bb-cta {
  flex: none;
  display: inline-flex; align-items: center; justify-content: center;
  padding: 13px 22px;
  min-width: 128px;
  background: var(--lime);
  color: var(--white);
  border-radius: var(--r-pill);
  font-weight: 600; font-size: 14px;
  transition: filter .15s ease, background .15s ease;
}
.bb-cta:active { filter: brightness(.94); }
.bb-cta:disabled { background: var(--lime-soft); cursor: not-allowed; }
.bb-cta--ghost { background: var(--bg); color: var(--ink); }

/* ---------- Модалка ---------- */
.modal-overlay {
  position: fixed; inset: 0;
  background: rgba(14,14,14,.45);
  display: flex; align-items: flex-end; justify-content: center;
  z-index: 100;
  opacity: 0; visibility: hidden;
  transition: opacity .2s ease, visibility .2s ease;
}
.modal-overlay.is-open { opacity: 1; visibility: visible; }
.modal {
  background: var(--white);
  border-radius: var(--r-card) var(--r-card) 0 0;
  width: 100%; max-width: 480px;
  max-height: 80dvh; overflow-y: auto;
  padding: 20px 20px calc(20px + env(safe-area-inset-bottom));
  transform: translateY(24px);
  transition: transform .2s ease;
}
.modal-overlay.is-open .modal { transform: none; }
.modal__head { display: flex; align-items: center; gap: 12px; margin-bottom: 12px; }
.modal__title { font-family: var(--font-head); font-size: 16px; flex: 1 1 auto; }
.modal__close {
  width: 32px; height: 32px; flex: none;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 50%; background: var(--bg);
}
.modal__close svg { width: 16px; height: 16px; }
.modal__body { font-size: 13.5px; display: flex; flex-direction: column; gap: 10px; }
.modal__body p { color: var(--muted); line-height: 1.5; }
.modal__li { display: flex; gap: 8px; align-items: flex-start; font-size: 13px; }
.modal__li .ico { width: 16px; height: 16px; color: var(--lime); flex: none; margin-top: 1px; }
.modal__sect { font-weight: 700; font-size: 13px; margin-top: 6px; }

/* ---------- Тост ---------- */
.toast {
  position: fixed;
  left: 16px; right: 16px;
  bottom: calc(84px + env(safe-area-inset-bottom));
  z-index: 200;
  padding: 12px 16px;
  background: var(--ink); color: var(--white);
  border-radius: var(--r-field);
  font-size: 13px; text-align: center;
  opacity: 0; visibility: hidden;
  transform: translateY(8px);
  transition: opacity .2s ease, transform .2s ease, visibility .2s ease;
}
.toast.is-show { opacity: 1; visibility: visible; transform: none; }

/* ---------- Дрібниці ---------- */
.ico svg { width: 100%; height: 100%; }
/* Лоадер: три пульсуючі крапки бренд-кольору — виглядає як навмисна анімація,
   а не «завислий» спінер. Одна розмітка <span class="spinner"> на всіх етапах. */
.spinner {
  display: inline-block;
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--lime);
  margin: 12px auto;
  position: relative;
  animation: dot-pulse 1s infinite ease-in-out both;
  animation-delay: .16s;
}
.spinner::before, .spinner::after {
  content: ''; position: absolute; top: 0;
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--lime);
  animation: dot-pulse 1s infinite ease-in-out both;
}
.spinner::before { left: -11px; animation-delay: 0s; }
.spinner::after  { left: 11px;  animation-delay: .32s; }
@keyframes dot-pulse {
  0%, 80%, 100% { transform: scale(.45); opacity: .35; }
  40%           { transform: scale(1);   opacity: 1; }
}
@keyframes spin { to { transform: rotate(360deg); } }
/* лоадер на кольоровій кнопці — білі крапки */
.spinner--btn { background: var(--white); margin: 0 auto; }
.spinner--btn::before, .spinner--btn::after { background: var(--white); }

/* ============================================================
   Геймізація: піньята + конфеті + анімація цифр
   ============================================================ */

/* ---------- Піньята: літаючий overlay ----------
   Висить на довгій мотузці з верхнього краю екрана поверх усіх
   кроків. Кут гойдання задає JS-фізика (маятник + сенсори). */
/* ---------- Піньята: підвішена до кнопки «i» (overlay) ---------- */
.pinata-fly {
  position: fixed;
  width: 0;
  z-index: 60;                     /* під модалкою (100), над екранами */
  pointer-events: none;            /* інтерфейс не блокує */
  perspective: 420px;              /* глибина для руху на глядача */
}
.pinata-arm {
  width: 60px; margin-left: -30px; /* центр на точці підвісу */
  transform-origin: top center;
  will-change: transform;
  display: flex; flex-direction: column; align-items: center;
}
.pinata-fwd {
  transform-origin: top center;    /* завал «на глядача» — навколо підвісу */
  transform-style: preserve-3d;
  will-change: transform;
  display: flex; flex-direction: column; align-items: center;
}
/* кільце-гачок на кнопці «i» — СТАТИЧНЕ (поза рукою, що гойдається),
   металеве, щоб читалось як кільце ланцюга, а не «маленька піньята» */
.pinata-ring {
  width: 12px; height: 12px;
  margin: 0 0 -2px -6px;     /* центр на точці підвісу (fly має width:0) */
  border: 2px solid #b4b4bb;
  border-radius: 50%;
  background: transparent;
  box-shadow: 0 0 0 .5px rgba(255,255,255,.4), inset 0 0 1.5px rgba(255,255,255,.5);
}

/* ланцюг: тонкі металеві ланки, що чергуються (ефект 3D-кручення) */
.pinata-chain { display: flex; flex-direction: column; align-items: center; }
.rope-seg {
  position: relative;
  width: 6px; height: 9px;
  margin: -2px auto 0;
  background: transparent;
  border: 1.6px solid #a9a9b0;
  border-radius: 50%;
  box-shadow: 0 0 0 .4px rgba(255,255,255,.3), inset 0 0 1px rgba(255,255,255,.55);
  transform-origin: top center;
  will-change: transform;
}
/* перпендикулярна ланка — світліша й трохи нижча: візуально дає об'єм ланцюга */
.rope-seg--b { border-color: #ccccd2; height: 7px; }
/* Плоский ланцюг: ланки й піньята — flow-сусіди у flex-колонці .pinata-chain
   (центруються align-items:center). Без вкладеного absolute — не відчіплюється. */
.pinata-end {
  display: flex; flex-direction: column; align-items: center;
  margin-top: -1px;
}
.pinata-btn {
  pointer-events: auto;
  width: 66px; height: 60px;
  margin-top: -1px;
  display: block;
  -webkit-tap-highlight-color: transparent;
}
.pinata-spin {
  position: relative;
  width: 66px; height: 60px;
  transform-style: preserve-3d;   /* шари тримають глибину */
  will-change: transform;
}
/* шари об'ємного ослика */
.pinata-spin .pl {
  position: absolute; left: 0; top: 0;
  width: 66px; height: 60px;
  object-fit: contain;
  display: block;
  backface-visibility: visible;
}
.pinata-spin .pl--in { filter: brightness(.72) saturate(1.1); }  /* «бік» фігурки */
.pinata-spin .pl--front { filter: drop-shadow(0 8px 9px rgba(14,14,14,.25)); }

.pinata-btn--shake .pinata-spin { animation: pinata-shake .4s cubic-bezier(.36,.07,.19,.97); }
@keyframes pinata-shake {
  0%   { transform: perspective(300px) scale(1); }
  30%  { transform: perspective(300px) scale(1.16) rotate(9deg) rotateY(35deg); }
  60%  { transform: perspective(300px) scale(.95) rotate(-7deg) rotateY(-25deg); }
  100% { transform: perspective(300px) scale(1); }
}
.pinata-btn--break .pinata-spin { animation: pinata-brk .9s ease forwards; }
@keyframes pinata-brk {
  0%   { transform: perspective(300px) scale(1); opacity: 1; }
  25%  { transform: perspective(300px) scale(1.35) rotate(14deg) rotateY(60deg); }
  100% { transform: perspective(300px) scale(.15) rotate(80deg) rotateY(240deg) translateY(120px); opacity: 0; }
}

/* бірка-підказка під піньятою */
.pinata-tag {
  margin-top: 4px;
  padding: 3px 9px;
  background: var(--ink);
  color: var(--white);
  border-radius: var(--r-pill);
  font-size: 10.5px; font-weight: 600;
  white-space: nowrap;
  opacity: .88;
}
.pinata-tag b { color: var(--lime-soft); }
.pinata-tag.is-win { background: var(--lime); opacity: 1; }
.pinata-end .pinata-tag {
  display: inline-block;
  transform: translateX(-50%);
  margin-top: 2px;
}

/* конфеті (fixed, у точці розбиття) */
.confetti-host { position: fixed; z-index: 90; pointer-events: none; width: 0; height: 0; }
.confetti {
  position: absolute; left: 0; top: 0;
  width: 8px; height: 11px;
  border-radius: 2px;
  pointer-events: none;
  animation: confetti-fall 1.1s ease-in forwards;
}
@keyframes confetti-fall {
  0%   { transform: translate(0, 0) rotate(0); opacity: 1; }
  100% { transform: translate(var(--cx, 0px), var(--cy, 130px)) rotate(var(--cr, 360deg)); opacity: 0; }
}

/* ============================================================
   Особистий кабінет
   ============================================================ */

/* кнопка-аватар у шапці */
.head__profile {
  width: 26px; height: 26px; flex: none;
  border-radius: 50%;
  background: var(--bg);
  color: var(--muted);
  font-size: 10px; font-weight: 600;
  display: flex; align-items: center; justify-content: center;
}
.head__profile.is-auth { background: var(--lime); color: var(--white); }

/* вхід */
.cab-login { text-align: center; padding: 6px 4px 4px; }
.cab-login__icon {
  width: 52px; height: 52px;
  margin: 0 auto 10px;
  border-radius: 50%;
  background: var(--lime-tint); color: var(--lime);
  display: flex; align-items: center; justify-content: center;
}
.cab-login__icon svg { width: 26px; height: 26px; }
.cab-login__text { font-size: 13.5px; color: var(--muted); line-height: 1.5; margin-bottom: 14px; }
.cab-login__tg { width: 100%; margin-top: 10px; }
.cab-login__note { font-size: 12px; color: var(--muted-2); margin-top: 8px; }

/* шапка кабінету */
.cab-head { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; }
.cab-head__ava {
  width: 40px; height: 40px; flex: none;
  border-radius: 50%;
  background: var(--lime); color: var(--white);
  font-size: 14px; font-weight: 600;
  display: flex; align-items: center; justify-content: center;
}
.cab-head__id { flex: 1 1 auto; min-width: 0; }
.cab-head__name { font-weight: 600; font-size: 14px; }
.cab-head__phone { font-size: 12px; color: var(--muted); }

/* баланс */
.cab-balance {
  display: flex; align-items: baseline; gap: 6px;
  padding: 12px 14px;
  background: var(--lime-tint);
  border-radius: var(--r-sub);
  margin-bottom: 14px;
}
.cab-balance__k { font-size: 12px; color: var(--muted); flex: 1 1 auto; }
.cab-balance__v { font-family: var(--font-head); font-size: 20px; }
.cab-balance__u { font-size: 11px; color: var(--muted); }
.cab-balance--empty { font-size: 12.5px; color: var(--muted); display: block; }

/* секції та рядки */
.cab-sect {
  font-size: 11px; font-weight: 600;
  color: var(--muted);
  text-transform: uppercase; letter-spacing: .05em;
  margin: 12px 0 6px;
}
.cab-note { font-size: 12.5px; color: var(--muted); padding: 8px 2px; }
.cab-row {
  display: flex; align-items: center; gap: 8px;
  padding: 9px 11px;
  border: 0.5px solid var(--line-soft);
  border-radius: var(--r-field);
  margin-bottom: 5px;
}
.cab-dot { width: 7px; height: 7px; border-radius: 50%; flex: none; }
.cab-row__name {
  flex: 1 1 auto; min-width: 0;
  font-size: 12.5px; font-weight: 600;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.cab-row__meta { font-size: 11.5px; color: var(--muted); white-space: nowrap; }

/* замовлення, що розгортаються */
.cab-order {
  border: 0.5px solid var(--line-soft);
  border-radius: var(--r-field);
  margin-bottom: 5px;
  overflow: hidden;
}
.cab-order__head {
  display: flex; align-items: center; gap: 8px;
  width: 100%;
  padding: 9px 11px;
  text-align: left;
}
.cab-order.is-open .cab-order__head { background: var(--bg); }
.cab-order__num { flex: 1 1 auto; font-size: 12.5px; font-weight: 600; }
.cab-order__chev { width: 14px; height: 14px; color: var(--muted); transition: transform .2s ease; }
.cab-order.is-open .cab-order__chev { transform: rotate(180deg); }

/* товар у замовленні */
.cab-prod {
  display: flex; align-items: center; gap: 8px;
  padding: 8px 11px;
  border-top: 0.5px solid var(--line-soft);
}
.cab-prod.is-off { opacity: .55; }
.cab-prod img { width: 24px; height: 30px; object-fit: contain; flex: none; }
.cab-prod__body { flex: 1 1 auto; min-width: 0; }
.cab-prod__name {
  font-size: 12px; line-height: 1.3;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.cab-prod__meta { font-size: 11px; color: var(--lime); margin-top: 2px; }
.cab-prod.is-off .cab-prod__meta { color: var(--muted-2); }
.cab-prod__btn {
  flex: none;
  padding: 6px 10px;
  background: var(--lime); color: var(--white);
  border-radius: var(--r-pill);
  font-size: 11px; font-weight: 600;
  white-space: nowrap;
}
.cab-prod__btn:active { filter: brightness(.94); }

/* вихід */
.cab-logout {
  width: 100%;
  margin-top: 14px;
  padding: 10px;
  font-size: 12.5px; color: var(--muted);
  text-align: center;
}

/* ============================================================
   Відновлені секції (рядок піньята-бонуса + анімація цифр)
   ============================================================ */
.sum-item--pinata { background: var(--lime-tint); }
.sum-item__emoji { font-size: 24px; width: 30px; text-align: center; flex: none; }
.sum-item__emoji img { width: 28px; height: 24px; display: block; margin: 0 auto; }

.bb-total__v { transform-origin: left center; }
.bb-pulse.is-up   { animation: bb-pulse-up .35s ease; }
.bb-pulse.is-down { animation: bb-pulse-down .35s ease; }
@keyframes bb-pulse-up {
  0%   { transform: scale(1); }
  35%  { transform: scale(1.07) translateY(-1px); color: var(--lime); }
  100% { transform: scale(1); }
}
@keyframes bb-pulse-down {
  0%   { transform: scale(1); }
  35%  { transform: scale(.95) translateY(1px); color: var(--danger); }
  100% { transform: scale(1); }
}