/* Тёплый минимал — тема гостевой PWA.
   Подключается ПОСЛЕ style.css, переопределяет :root каскадом.
   Спека: docs/superpowers/specs/2026-06-13-guest-pwa-warm-redesign-design.md */
:root {
  /* Палитра */
  --bg: #F7F1E8;
  --bg2: #F0E8DB;
  --card: #FFFDF9;
  --surface: #FFFDF9;
  --surface-2: #F0E8DB;
  --accent: #B34E30;
  --accent-hi: #993E25;
  --accent2: rgba(194,90,58,0.10);
  --secondary: #6B7355;
  --text: #2B2620;
  --text2: #8A7E6D;
  --border: #E8DECF;
  --success: #6B7355;
  --warning: #D9A441;
  --danger: #B23B2E;
  /* Форма */
  --radius-btn: 12px;
  --radius-card: 18px;
  --radius-sheet: 24px;
  /* Тени (тёплые, не серые) */
  --shadow-sm: 0 1px 2px rgba(43,38,32,0.06);
  --shadow-md: 0 4px 16px rgba(43,38,32,0.08);
  --shadow-lg: 0 12px 32px rgba(43,38,32,0.12);
  /* Типографика */
  --font-head: 'Spectral', Georgia, serif;
  --font-ui: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  /* Motion */
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --dur: 220ms;
}

html { background: var(--bg); }
body {
  font-family: var(--font-ui);
  background: var(--bg);
  color: var(--text);
  background-image: none;
}
::selection { background: rgba(194,90,58,0.22); }
::-webkit-scrollbar-thumb { background: rgba(194,90,58,0.25); }
::-webkit-scrollbar-thumb:hover { background: rgba(194,90,58,0.4); }

h1, h2, h3, .portal-card h1 { font-family: var(--font-head); letter-spacing: 0; }

/* ── Перебить positivus.css !important на заголовках ── */
.app-header h1, .app-header h2, .app-header h3 { font-family: var(--font-head) !important; }

/* ── Кнопки ── */
.btn, button.btn, .add-btn, .bill-pay-btn, .cart-btn {
  font-family: var(--font-ui);
  border-radius: var(--radius-btn);
  transition: transform var(--dur) var(--ease), background var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.btn:active, .add-btn:active, .bill-pay-btn:active, .cart-btn:active { transform: scale(0.97); }
.btn-primary, .add-btn, .bill-pay-btn {
  background: var(--accent); color: #fff; border: none;
  box-shadow: var(--shadow-sm);
  /* font-weight 600: терракота #C25A3A на белом = 4.36:1 (чуть ниже AA 4.5
     для обычного текста), но проходит как large/bold-текст при weight>=600 */
  font-weight: 600;
}
.btn-primary:hover, .add-btn:hover, .bill-pay-btn:hover { background: var(--accent-hi); }
.btn-secondary {
  background: transparent; color: var(--secondary);
  border: 1.5px solid var(--secondary); border-radius: var(--radius-btn);
}

/* ── Поля ввода ── */
input[type="text"], input[type="tel"], input[type="email"], input[type="number"], textarea {
  font-family: var(--font-ui);
  border: 1.5px solid var(--border);
  border-radius: var(--radius-btn);
  background: var(--surface);
  color: var(--text);
  transition: border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
input:focus, textarea:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent2);
}

/* ── Чипы категорий (пилюли, активная — олива) ── */
/* positivus.css перебивает cat-btn через !important — контрим точечно */
.cat-btn {
  font-family: var(--font-ui) !important;
  border-radius: 999px !important;
  border: 1.5px solid var(--border) !important;
  background: var(--surface) !important;
  color: var(--text2) !important;
  transition: background var(--dur) var(--ease), color var(--dur) var(--ease), border-color var(--dur) var(--ease) !important;
}
.cat-btn::after { display: none !important; }  /* убираем подчёркивание-индикатор positivus */
.cat-btn.active {
  background: var(--secondary) !important;
  color: #fff !important;
  border-color: var(--secondary) !important;
}

/* ── Меню: витрина ── */
/* positivus перебивает menu-item/cart-fab через !important — контрим точечно */
.menu-list, .items-grid { gap: 16px !important; }
.menu-section { padding: 16px !important; }
.menu-item {
  background: var(--surface) !important;
  border: 1px solid var(--border) !important;
  border-bottom: 1px solid var(--border) !important;
  border-radius: var(--radius-card) !important;
  box-shadow: var(--shadow-sm) !important;
  padding: 0 !important;
  transition: box-shadow var(--dur) var(--ease), transform var(--dur) var(--ease) !important;
  overflow: hidden !important;
}
.menu-item:hover { background: var(--surface) !important; }
.menu-item:active { transform: scale(0.97); }
.item-name {
  font-family: var(--font-head) !important;
  font-weight: 600 !important;
  color: var(--text) !important;
  letter-spacing: 0 !important;
}
.item-desc {
  font-family: var(--font-ui) !important;
  color: var(--text2) !important;
}
.item-price {
  font-family: var(--font-ui) !important;
  font-weight: 700 !important;
  font-style: normal !important;
  color: var(--accent) !important;
}
.item-img { border-radius: calc(var(--radius-card) - 6px); }
/* FAB: positivus даёт белый градиент с !important — перебиваем */
.cart-fab {
  background: var(--accent) !important;
  border-top: none !important;
  box-shadow: var(--shadow-md) !important;
  padding: 12px 16px calc(12px + env(safe-area-inset-bottom)) !important;
  transition: transform var(--dur) var(--ease), background var(--dur) var(--ease) !important;
}
.cart-fab:active { transform: scale(0.94); }
/* btn-fab в FAB — убираем посторонние стили посitivus */
.cart-fab .btn-fab {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  border-radius: var(--radius-btn) !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
  font-size: 15px !important;
  font-weight: 600 !important;
}
.establishment-bar {
  background: var(--surface) !important;
  border-bottom: 1px solid var(--border) !important;
  color: var(--text) !important;
  font-size: 13px !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
  padding: 8px 16px !important;
}
.establishment-bar #establishmentName::before,
.establishment-bar #establishmentName::after { content: "" !important; color: transparent !important; }

/* ══════════════════════════════════════════
   КОРЗИНА (cart.html)
   positivus.css перебивает всё через !important
   — используем встречные !important
   ══════════════════════════════════════════ */

/* Фон страницы */
.cart-page {
  background: var(--bg) !important;
}

/* Позиция корзины — тёплая карточка */
.cart-item {
  background: var(--surface) !important;
  border: 1px solid var(--border) !important;
  border-bottom: 1px solid var(--border) !important;
  border-radius: var(--radius-card) !important;
  box-shadow: var(--shadow-sm) !important;
  padding: 14px 16px !important;
  margin-bottom: 0 !important;
  transition: box-shadow var(--dur) var(--ease) !important;
}
.cart-item:active { box-shadow: var(--shadow-md) !important; }

/* Название блюда — шрифт Spectral */
.cart-item-name {
  font-family: var(--font-head) !important;
  font-weight: 600 !important;
  font-size: 17px !important;
  color: var(--text) !important;
  letter-spacing: 0 !important;
  margin-bottom: 4px !important;
}

/* Цена × количество */
.cart-item-price {
  font-family: var(--font-ui) !important;
  font-size: 13px !important;
  color: var(--text2) !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
  font-feature-settings: "tnum" !important;
}

/* Контролы +/- */
.cart-item-controls {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
}

/* Кнопки +/- */
.qty-btn {
  width: 32px !important;
  height: 32px !important;
  background: var(--bg2) !important;
  border: 1.5px solid var(--border) !important;
  border-radius: 50% !important;
  color: var(--text) !important;
  font-size: 18px !important;
  font-family: var(--font-ui) !important;
  cursor: pointer !important;
  transition: border-color var(--dur) var(--ease), background var(--dur) var(--ease) !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
}
.qty-btn:hover {
  border-color: var(--accent) !important;
  background: var(--accent2) !important;
  color: var(--accent) !important;
}
.qty-btn:active { transform: scale(0.92) !important; }

/* Счётчик количества */
.qty {
  min-width: 22px !important;
  text-align: center !important;
  font-family: var(--font-ui) !important;
  font-size: 17px !important;
  font-weight: 700 !important;
  color: var(--accent) !important;
  font-feature-settings: "tnum" !important;
}

/* Итоговая строка */
.cart-total {
  display: flex !important;
  justify-content: space-between !important;
  align-items: baseline !important;
  font-family: var(--font-ui) !important;
  font-size: 13px !important;
  color: var(--text2) !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
  border-top: 1.5px dashed var(--border) !important;
  padding: 16px 4px 8px !important;
  margin-top: 4px !important;
}
.cart-total strong {
  font-family: var(--font-head) !important;
  font-style: normal !important;
  font-weight: 700 !important;
  font-size: 26px !important;
  color: var(--accent) !important;
  letter-spacing: 0 !important;
  font-feature-settings: "tnum" !important;
}

/* Пустая корзина */
.empty-cart {
  font-family: var(--font-ui) !important;
  font-style: normal !important;
  font-size: 16px !important;
  color: var(--text2) !important;
}

/* Нижняя панель кнопок */
.call-buttons {
  background: linear-gradient(to top, var(--bg) 65%, transparent) !important;
  border-top: 1px solid var(--border) !important;
  gap: 10px !important;
}

/* «Добавить ещё» — вторичная кнопка */
.call-barman {
  background: var(--surface) !important;
  color: var(--text) !important;
  border: 1.5px solid var(--border) !important;
  border-radius: var(--radius-btn) !important;
  font-family: var(--font-ui) !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
  transition: border-color var(--dur) var(--ease), color var(--dur) var(--ease) !important;
}
.call-barman:hover {
  border-color: var(--secondary) !important;
  color: var(--secondary) !important;
}

/* «Вызов официанта» — акцентная кнопка (терракота) */
.call-waiter {
  background: var(--accent) !important;
  color: #fff !important;
  border: none !important;
  border-radius: var(--radius-btn) !important;
  font-family: var(--font-ui) !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
  box-shadow: var(--shadow-md) !important;
  transition: background var(--dur) var(--ease), box-shadow var(--dur) var(--ease), transform var(--dur) var(--ease) !important;
}
.call-waiter:hover {
  background: var(--accent-hi) !important;
  box-shadow: var(--shadow-lg) !important;
}
.call-waiter:active { transform: scale(0.97) !important; }
.call-waiter:disabled {
  opacity: 0.45 !important;
  cursor: not-allowed !important;
  box-shadow: none !important;
}

/* ══════════════════════════════════════════
   SCAN (scan.html) — экран приветствия / сканирования
   ══════════════════════════════════════════ */

/* Фон и цвет текста страницы */
.scan-page {
  background: var(--bg) !important;
  color: var(--text) !important;
}

/* Заголовки */
.scan-page h1,
.scan-page h2 {
  font-family: var(--font-head) !important;
  color: var(--text) !important;
  letter-spacing: 0 !important;
}

/* Подсказки / описания */
.scan-page p,
.scan-page .hint,
.nfc-status {
  font-family: var(--font-ui) !important;
  color: var(--text2) !important;
}

/* NFC-статус в акцентном цвете темы (терракота) */
.nfc-status {
  color: var(--accent) !important;
}

/* Кнопка QR-сканирования — терракота */
.scan-page .btn-primary {
  background: var(--accent) !important;
  color: #fff !important;
  border-radius: 999px !important;
  font-family: var(--font-ui) !important;
  font-weight: 600 !important;
  box-shadow: var(--shadow-md) !important;
  transition: background var(--dur) var(--ease), box-shadow var(--dur) var(--ease), transform var(--dur) var(--ease) !important;
}
.scan-page .btn-primary:hover { background: var(--accent-hi) !important; }
.scan-page .btn-primary:active { transform: scale(0.97) !important; }

/* Кнопка «Забронировать стол» */
.scan-page .btn-secondary {
  color: var(--secondary) !important;
  border-color: var(--secondary) !important;
  font-family: var(--font-ui) !important;
}

/* Иконка сканера */
.scan-icon {
  font-size: 64px;
  margin-bottom: 8px;
}

/* Модальные оверлеи авторизации — тёплый фон */
.rules-overlay {
  background: rgba(43,38,32,0.55) !important;
  backdrop-filter: blur(6px);
}
.rules-modal {
  background: var(--surface) !important;
  border-radius: var(--radius-sheet) !important;
  border: 1px solid var(--border) !important;
  box-shadow: var(--shadow-lg) !important;
  color: var(--text) !important;
}
.rules-modal-header {
  font-family: var(--font-head) !important;
  color: var(--text) !important;
  border-bottom: 1px solid var(--border) !important;
  background: var(--surface) !important;
}

/* Кнопка «Войти через Telegram» */
.rules-accept-btn {
  background: var(--accent) !important;
  color: #fff !important;
  border: none !important;
  border-radius: var(--radius-btn) !important;
  font-family: var(--font-ui) !important;
  font-weight: 600 !important;
  box-shadow: var(--shadow-sm) !important;
  transition: background var(--dur) var(--ease), transform var(--dur) var(--ease) !important;
}
.rules-accept-btn:hover { background: var(--accent-hi) !important; }
.rules-accept-btn:active { transform: scale(0.97) !important; }
.rules-accept-btn:disabled { opacity: 0.45 !important; cursor: not-allowed !important; }

/* Профиль-оверлей */
.profile-overlay {
  background: rgba(43,38,32,0.55) !important;
  backdrop-filter: blur(6px);
}
.profile-modal {
  background: var(--surface) !important;
  border-radius: var(--radius-sheet) var(--radius-sheet) 0 0 !important;
  border: 1px solid var(--border) !important;
  box-shadow: var(--shadow-lg) !important;
}
.profile-header {
  font-family: var(--font-head) !important;
  color: var(--text) !important;
  border-bottom: 1px solid var(--border) !important;
  background: var(--surface) !important;
}
.profile-close {
  background: var(--bg2) !important;
  border: 1px solid var(--border) !important;
  color: var(--text2) !important;
  border-radius: 50% !important;
}

/* Рамка QR-сканера (тёплая, вместо дефолтного цвета) */
#qrOverlay > div:last-of-type {
  border-color: var(--accent) !important;
}

/* lang-btn — тёплый */
.lang-btn {
  background: var(--bg2) !important;
  color: var(--text2) !important;
  border: 1px solid var(--border) !important;
  border-radius: var(--radius-btn) !important;
  font-family: var(--font-ui) !important;
  transition: color var(--dur) var(--ease), border-color var(--dur) var(--ease) !important;
}
.lang-btn:hover {
  color: var(--accent) !important;
  border-color: var(--accent) !important;
}

/* ══════════════════════════════════════════
   СТОЛ (table.html)
   Покрываем: шапка, чат, пузыри, bottom-bar,
   quick-order модал, split-bill, feedback, ai-chat
   ══════════════════════════════════════════ */

/* Шапка */
.app-header {
  background: var(--surface) !important;
  border-bottom: 1px solid var(--border) !important;
  color: var(--text) !important;
}
#tableName {
  font-family: var(--font-head) !important;
  color: var(--text) !important;
}

/* Чат */
.chat-wrap {
  background: var(--bg) !important;
}
.chat-messages {
  background: var(--bg) !important;
}

/* Пузыри сообщений */
.msg-bubble {
  font-family: var(--font-ui) !important;
  border-radius: var(--radius-card) !important;
}
/* Входящие (персонал/стойка) — тёплая поверхность */
.msg-bubble.staff-msg,
.msg-bubble:not(.guest-msg) {
  background: var(--surface) !important;
  color: var(--text) !important;
  border: 1px solid var(--border) !important;
}
/* Исходящие (гость) — терракота */
.msg-bubble.guest-msg {
  background: var(--accent) !important;
  color: #fff !important;
  border: none !important;
}
.msg-time {
  font-family: var(--font-ui) !important;
  color: var(--text2) !important;
}
/* Аватар (логотип заведения в пузыре) */
.msg-avatar-logo {
  border: 1.5px solid var(--border) !important;
  background: var(--surface) !important;
}

/* Bottom bar — основная нижняя панель */
.bottom-bar {
  background: var(--surface) !important;
  border-top: 1px solid var(--border) !important;
}
.bottom-btn {
  font-family: var(--font-ui) !important;
  color: var(--text2) !important;
  background: transparent !important;
  border-radius: var(--radius-btn) !important;
  transition: color var(--dur) var(--ease), background var(--dur) var(--ease) !important;
}
.bottom-btn:hover,
.bottom-btn:focus {
  color: var(--accent) !important;
  background: var(--accent2) !important;
}
.bottom-dropdown {
  background: var(--surface) !important;
  border: 1px solid var(--border) !important;
  border-radius: var(--radius-card) !important;
  box-shadow: var(--shadow-md) !important;
}
.bottom-dropdown button {
  font-family: var(--font-ui) !important;
  color: var(--text) !important;
}
.bottom-dropdown button:hover {
  background: var(--accent2) !important;
  color: var(--accent) !important;
}

/* Quick Order Options Modal */
.qo-options-modal {
  background: var(--surface) !important;
  border-radius: var(--radius-sheet) var(--radius-sheet) 0 0 !important;
}
.qo-options-header {
  font-family: var(--font-head) !important;
  color: var(--text) !important;
}
.qo-options-header button {
  color: var(--text2) !important;
}
.qo-option-label {
  font-family: var(--font-ui) !important;
  color: var(--text2) !important;
  text-transform: uppercase !important;
  letter-spacing: 0.4px !important;
}
.qo-option-btn {
  border: 1.5px solid var(--border) !important;
  background: var(--surface) !important;
  color: var(--text) !important;
  border-radius: var(--radius-btn) !important;
  font-family: var(--font-ui) !important;
  transition: border-color var(--dur) var(--ease), background var(--dur) var(--ease), color var(--dur) var(--ease) !important;
}
.qo-option-btn.active {
  border-color: var(--accent) !important;
  background: var(--accent2) !important;
  color: var(--accent) !important;
}
.qo-submit-btn {
  background: var(--accent) !important;
  color: #fff !important;
  border-radius: var(--radius-btn) !important;
  font-family: var(--font-ui) !important;
  font-weight: 600 !important;
  transition: background var(--dur) var(--ease) !important;
}
.qo-submit-btn:active { background: var(--accent-hi) !important; }
/* Quantity selector в быстром заказе */
.qo-qty-wrap {
  border: 1.5px solid var(--border) !important;
  border-radius: var(--radius-btn) !important;
}
.qo-qty-btn {
  background: var(--bg2) !important;
  color: var(--text) !important;
  transition: background var(--dur) var(--ease) !important;
}
.qo-qty-btn:active { background: var(--accent2) !important; }
.qo-qty-val {
  color: var(--accent) !important;
  font-family: var(--font-ui) !important;
  font-weight: 700 !important;
}

/* Feedback modal */
.feedback-overlay {
  background: rgba(43,38,32,0.55) !important;
  backdrop-filter: blur(6px) !important;
}
.feedback-modal {
  background: var(--surface) !important;
  border-radius: var(--radius-sheet) !important;
  border: 1px solid var(--border) !important;
  box-shadow: var(--shadow-lg) !important;
}
.feedback-modal-header {
  font-family: var(--font-head) !important;
  color: var(--text) !important;
  border-bottom: 1px solid var(--border) !important;
}
.feedback-close {
  background: var(--bg2) !important;
  color: var(--text2) !important;
  border: 1px solid var(--border) !important;
  border-radius: 50% !important;
}
.feedback-type-btn {
  font-family: var(--font-ui) !important;
  border: 1.5px solid var(--border) !important;
  background: var(--surface) !important;
  color: var(--text2) !important;
  border-radius: var(--radius-btn) !important;
  transition: border-color var(--dur) var(--ease), color var(--dur) var(--ease), background var(--dur) var(--ease) !important;
}
.feedback-type-btn.active {
  border-color: var(--accent) !important;
  color: var(--accent) !important;
  background: var(--accent2) !important;
}
.feedback-textarea {
  background: var(--bg2) !important;
  color: var(--text) !important;
  border: 1.5px solid var(--border) !important;
  border-radius: var(--radius-btn) !important;
  font-family: var(--font-ui) !important;
}
.feedback-submit {
  background: var(--accent) !important;
  color: #fff !important;
  border: none !important;
  border-radius: var(--radius-btn) !important;
  font-family: var(--font-ui) !important;
  font-weight: 600 !important;
}
.feedback-submit:hover { background: var(--accent-hi) !important; }

/* AI Chat modal */
.ai-overlay {
  background: rgba(43,38,32,0.55) !important;
  backdrop-filter: blur(6px) !important;
}
.ai-modal {
  background: var(--surface) !important;
  border-radius: var(--radius-sheet) var(--radius-sheet) 0 0 !important;
  border: 1px solid var(--border) !important;
  box-shadow: var(--shadow-lg) !important;
}
.ai-modal-header {
  font-family: var(--font-head) !important;
  color: var(--text) !important;
  border-bottom: 1px solid var(--border) !important;
}
.ai-close {
  background: var(--bg2) !important;
  color: var(--text2) !important;
  border: 1px solid var(--border) !important;
  border-radius: 50% !important;
}
.ai-messages {
  background: var(--bg) !important;
}
.ai-msg {
  font-family: var(--font-ui) !important;
  border-radius: var(--radius-card) !important;
}
.ai-msg.ai-msg-bot {
  background: var(--surface) !important;
  color: var(--text) !important;
  border: 1px solid var(--border) !important;
}
.ai-input {
  background: var(--bg2) !important;
  color: var(--text) !important;
  border: 1.5px solid var(--border) !important;
  border-radius: var(--radius-btn) !important;
  font-family: var(--font-ui) !important;
}
.ai-send {
  background: var(--accent) !important;
  color: #fff !important;
  border: none !important;
  border-radius: var(--radius-btn) !important;
}
.ai-send:hover { background: var(--accent-hi) !important; }

/* Repeat overlay */
.repeat-overlay {
  background: rgba(43,38,32,0.55) !important;
  backdrop-filter: blur(6px) !important;
}
.repeat-popup {
  background: var(--surface) !important;
  border-radius: var(--radius-sheet) !important;
  border: 1px solid var(--border) !important;
  box-shadow: var(--shadow-lg) !important;
}
.repeat-title {
  font-family: var(--font-head) !important;
  color: var(--text) !important;
  border-bottom: 1px solid var(--border) !important;
}
.repeat-btn-cancel {
  background: var(--surface) !important;
  color: var(--text2) !important;
  border: 1.5px solid var(--border) !important;
  border-radius: var(--radius-btn) !important;
  font-family: var(--font-ui) !important;
}
.repeat-btn-confirm {
  background: var(--accent) !important;
  color: #fff !important;
  border: none !important;
  border-radius: var(--radius-btn) !important;
  font-family: var(--font-ui) !important;
  font-weight: 600 !important;
  box-shadow: var(--shadow-sm) !important;
}
.repeat-btn-confirm:hover { background: var(--accent-hi) !important; }
.repeat-btn-confirm:active { transform: scale(0.97) !important; }

/* Split Bill Modal */
.split-bill-overlay {
  background: rgba(43,38,32,0.55) !important;
  backdrop-filter: blur(6px) !important;
}
.split-bill-modal {
  background: var(--surface) !important;
  border-radius: var(--radius-sheet) !important;
  border: 1px solid var(--border) !important;
  box-shadow: var(--shadow-lg) !important;
}
.split-bill-header {
  font-family: var(--font-head) !important;
  color: var(--text) !important;
  border-bottom: 1px solid var(--border) !important;
}
.split-bill-close {
  background: var(--bg2) !important;
  color: var(--text2) !important;
  border: 1px solid var(--border) !important;
  border-radius: 50% !important;
}
.split-bill-tabs {
  border-bottom: 1px solid var(--border) !important;
  background: var(--surface) !important;
}
.split-tab {
  font-family: var(--font-ui) !important;
  color: var(--text2) !important;
  border-bottom: 2px solid transparent !important;
  background: transparent !important;
  transition: color var(--dur) var(--ease), border-color var(--dur) var(--ease) !important;
}
.split-tab.active {
  color: var(--accent) !important;
  border-bottom-color: var(--accent) !important;
}
.split-bill-confirm {
  background: var(--accent) !important;
  color: #fff !important;
  border: none !important;
  border-radius: var(--radius-btn) !important;
  font-family: var(--font-ui) !important;
  font-weight: 600 !important;
  box-shadow: var(--shadow-sm) !important;
}
.split-bill-confirm:hover { background: var(--accent-hi) !important; }
.split-bill-back {
  background: transparent !important;
  color: var(--text2) !important;
  border: 1.5px solid var(--border) !important;
  border-radius: var(--radius-btn) !important;
  font-family: var(--font-ui) !important;
}
.split-counter-btn {
  background: var(--bg2) !important;
  color: var(--text) !important;
  border: 1.5px solid var(--border) !important;
  border-radius: 50% !important;
  transition: border-color var(--dur) var(--ease) !important;
}
.split-counter-btn:hover {
  border-color: var(--accent) !important;
  color: var(--accent) !important;
}
.split-person-card {
  background: var(--surface) !important;
  border: 1px solid var(--border) !important;
  border-radius: var(--radius-card) !important;
}

/* Game menu */
.game-menu-dropdown {
  background: var(--surface) !important;
  border: 1px solid var(--border) !important;
  border-radius: var(--radius-card) !important;
  box-shadow: var(--shadow-md) !important;
}
.game-menu-title {
  font-family: var(--font-head) !important;
  color: var(--text2) !important;
  border-bottom: 1px solid var(--border) !important;
}
.game-menu-item {
  font-family: var(--font-ui) !important;
  color: var(--text) !important;
  background: transparent !important;
  transition: background var(--dur) var(--ease), color var(--dur) var(--ease) !important;
}
.game-menu-item:hover {
  background: var(--accent2) !important;
  color: var(--accent) !important;
}
.game-menu-divider {
  border-top: 1px solid var(--border) !important;
}

/* Game overlay */
.game-overlay {
  background: rgba(43,38,32,0.55) !important;
  backdrop-filter: blur(6px) !important;
}
.game-modal {
  background: var(--surface) !important;
  border-radius: var(--radius-sheet) !important;
  border: 1px solid var(--border) !important;
  box-shadow: var(--shadow-lg) !important;
}
.game-modal-header {
  font-family: var(--font-head) !important;
  color: var(--text) !important;
  border-bottom: 1px solid var(--border) !important;
}

/* PWA Install Banner */
.pwa-install-banner {
  background: var(--surface) !important;
  border-bottom: 1px solid var(--border) !important;
  box-shadow: var(--shadow-sm) !important;
}
.pwa-install-btn {
  background: var(--accent) !important;
  color: #fff !important;
  border: none !important;
  border-radius: var(--radius-btn) !important;
  font-family: var(--font-ui) !important;
  font-weight: 600 !important;
}
.pwa-install-close {
  color: var(--text2) !important;
  background: transparent !important;
  border: none !important;
}

/* Чекмарки в пузырях (прочитано — тёплый вместо cyan) */
.checks-read .check-svg { stroke: var(--secondary) !important; }

/* challenge-game-btn — кнопка выбора игры при вызове */
.challenge-game-btn {
  font-family: var(--font-ui) !important;
  background: var(--surface) !important;
  border: 1.5px solid var(--border) !important;
  border-radius: var(--radius-btn) !important;
  color: var(--text) !important;
  transition: border-color var(--dur) var(--ease), background var(--dur) var(--ease) !important;
}
.challenge-game-btn:hover {
  border-color: var(--accent) !important;
  background: var(--accent2) !important;
}

/* ── Auth-оверлей (Task 8) ── */

/* Поля ввода внутри auth-оверлея: тёплый focus-ring */
#authName, #authPhone, #authSmsCode {
  font-family: var(--font-ui) !important;
  transition: border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease) !important;
}
#authName:focus, #authPhone:focus, #authSmsCode:focus {
  border-color: var(--accent) !important;
  box-shadow: 0 0 0 3px var(--accent2) !important;
  outline: none !important;
}

/* Кнопка «Войти через Telegram» — терракота (основной вход) */
#authTgWidgetBtn {
  background: var(--accent) !important;
  color: #fff !important;
  border: none !important;
  font-weight: 600 !important;  /* контраст: терракота на белом → weight 600 для AA как large-bold */
}
#authTgWidgetBtn:hover:not(:disabled) { background: var(--accent-hi) !important; }

/* Кнопка «Получить SMS» — тёплая, не зелёная (#10b981 погашен) */
#authSmsBtn {
  background: var(--secondary) !important;
  color: #fff !important;
  border: none !important;
}
#authSmsBtn:hover:not(:disabled) { filter: brightness(1.07) !important; }

/* Кнопка «Подтвердить» код SMS — вторичная (secondary) */
#authSmsVerifyBtn {
  background: var(--secondary) !important;
  color: #fff !important;
  border: none !important;
}
#authSmsVerifyBtn:hover:not(:disabled) { filter: brightness(1.07) !important; }

/* Яндекс-кнопка — тёплый контур (убираем жёсткие rgba(252,63,29,...) инлайн) */
#authYandexBtn {
  border: 1.5px solid rgba(194,90,58,0.25) !important;
  background: var(--accent2) !important;
  color: var(--text) !important;
  border-radius: var(--radius-btn) !important;
  font-family: var(--font-ui) !important;
  font-weight: 600 !important;
  transition: border-color var(--dur) var(--ease), background var(--dur) var(--ease) !important;
}
#authYandexBtn:hover { border-color: var(--accent) !important; background: rgba(194,90,58,0.12) !important; }

/* Ошибки auth (#f87171 → var(--danger)) */
#authError, #authSmsError {
  color: var(--danger) !important;
  font-family: var(--font-ui) !important;
}

/* Подсказочный текст в auth */
#authStep1 p, #authStep2 p, #authStepSms p {
  font-family: var(--font-ui) !important;
}

/* Ссылка «Открыть бота» — тёплый акцент */
#authBotLink {
  background: var(--bg2) !important;
  border: 1px solid var(--border) !important;
  color: var(--accent) !important;
  border-radius: 100px !important;
  font-family: var(--font-ui) !important;
}
#authBotLink:hover { background: var(--accent2) !important; }

/* Статус ожидания Telegram */
#authWaitStatus {
  color: var(--text2) !important;
  font-family: var(--font-ui) !important;
}

/* Кнопка «← Назад» в auth-шагах */
#authStep2 [onclick="authBackToStep1()"],
#authStepSms [onclick="authBackToStep1()"] {
  color: var(--text2) !important;
  font-family: var(--font-ui) !important;
}

/* ══════════════════════════════════════════
   ПУСТЫЕ / ЗАГРУЗОЧНЫЕ / ОШИБОЧНЫЕ СОСТОЯНИЯ (Task 9 — harden)
   Тёплая заглушка с иконкой/заголовком вместо голого экрана.
   ══════════════════════════════════════════ */

.empty-state, .empty-cart, .loading, .error-state {
  text-align: center !important;
  padding: 56px 24px !important;
  color: var(--text2) !important;
  font-family: var(--font-ui) !important;
  font-style: normal !important;
  font-size: 16px !important;
  line-height: 1.5 !important;
}

/* Иконка-эмодзи */
.empty-state .icon, .empty-cart .icon, .error-state .icon, .loading .icon {
  font-size: 48px !important;
  line-height: 1 !important;
  opacity: 0.5 !important;
  margin-bottom: 14px !important;
  display: block !important;
  filter: none !important;
}

/* Заголовок заглушки — Spectral */
.empty-state .title, .empty-cart .title, .error-state .title {
  font-family: var(--font-head) !important;
  font-weight: 500 !important;
  font-style: normal !important;
  font-size: 21px !important;
  color: var(--text) !important;
  margin-bottom: 6px !important;
  letter-spacing: 0 !important;
}

/* Подзаголовок-подсказка */
.empty-state .hint, .empty-cart .hint, .error-state .hint {
  font-size: 14px !important;
  color: var(--text2) !important;
}

/* Загрузка — тёплый текст + мягкая пульсация (перебить positivus ✦/серый) */
.loading {
  color: var(--text2) !important;
  font-family: var(--font-ui) !important;
  font-style: normal !important;
  font-size: 16px !important;
}
.loading::after {
  color: var(--accent) !important;
  animation: warm-pulse 1.4s ease-in-out infinite !important;
}
@keyframes warm-pulse { 0%, 100% { opacity: 0.35; } 50% { opacity: 1; } }

/* Ошибочное состояние — мягкий, не кричащий */
.error-state .title { color: var(--text) !important; }
.error-state .icon { opacity: 0.6 !important; }

/* Тёплый спиннер с border (вместо синего #3b82f6).
   На 5 гостевых экранах сейчас спиннеров нет (loading через .loading::after),
   правило задел на будущее — чтобы любой добавленный .spinner был в теме. */
.spinner, .loading-spinner {
  border-color: var(--border) !important;
  border-top-color: var(--accent) !important;
}

/* ── Поля ввода — единый радиус (фикс #authName: positivus гасил в 0px) ── */
input[type="text"], input[type="tel"], input[type="email"],
input[type="number"], input[type="search"], input[type="password"],
#authName {
  border-radius: var(--radius-btn) !important;
}

/* ── Микро-анимации (Task 10 «animate») — сдержанно, для ощущения качества ── */

/* Появление карточек меню каскадом — мягкий подъём */
@keyframes warm-rise {
  from { opacity: 0; transform: translateY(12px); }
  to   { opacity: 1; transform: none; }
}
.menu-item { animation: warm-rise var(--dur) var(--ease) both; }
.menu-item:nth-child(2)    { animation-delay: 30ms; }
.menu-item:nth-child(3)    { animation-delay: 60ms; }
.menu-item:nth-child(4)    { animation-delay: 90ms; }
.menu-item:nth-child(n+5)  { animation-delay: 120ms; }
/* нажатие карточки усилено: 0.99 → 0.97 (см. .menu-item:active выше) */

/* Выезд листов/модалок снизу.
   ВНИМАНИЕ: .qo-options-modal НЕ включаем — у неё собственный
   transform: translateY(100%) → 0 через .open, keyframe бы его сломал.
   .bottom-dropdown.open ТОЖЕ НЕ включаем — у автора приятный spring
   dropdownPop (style.css:642, overshoot cubic-bezier(.34,1.56,.64,1)),
   наш плоский warm-sheet-up его перебивал. Оставляем авторский spring. */
@keyframes warm-sheet-up {
  from { opacity: 0; transform: translateY(24px); }
  to   { opacity: 1; transform: none; }
}
.rules-modal,
.split-bill-modal {
  animation: warm-sheet-up 260ms var(--ease);
}

/* Кнопки нижнего бара / отправки — мягкое нажатие */
.bottom-btn:active,
.qo-submit-btn:active { transform: scale(0.95); }

/* Уважать prefers-reduced-motion — гасим всё движение */
@media (prefers-reduced-motion: reduce) {
  .menu-item,
  .rules-modal,
  .bottom-dropdown.open,
  .split-bill-modal { animation: none !important; }  /* dropdown тоже гасим в reduced-motion */
  *, *::before, *::after {
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
  }
}