:root {
  --bg: #121414;
  --surface: #1c1e1e;
  --surface2: #0e0f0f;
  --accent: #b4c5ff;
  --text: #e6e6e6;
  --muted: #9aa0a6;
  --border: #2c2f2f;
  --danger: #ff8b8b;
  --success: #8ff5a8;
  --warning: #f5e08f;
}

body {
  background: var(--bg);
  color: var(--text);
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  min-height: 100vh;
}

.navbar {
  background: var(--surface) !important;
  border-bottom: 1px solid var(--border);
}
.navbar-brand, .nav-link { color: var(--text) !important; }
.nav-link.active { color: var(--accent) !important; font-weight: 600; }
.nav-link:hover { color: var(--accent) !important; }

.card {
  background: var(--surface);
  border: 1px solid var(--border);
  color: var(--text);
}
.card-header { background: var(--surface2); border-bottom: 1px solid var(--border); font-weight: 600; }

table { color: var(--text); }
.table > :not(caption) > * > * { background: var(--surface); color: var(--text); border-color: var(--border); }
thead th { color: var(--muted); font-weight: 600; border-color: var(--border) !important; }

.btn-accent {
  background: var(--accent);
  border: none;
  color: #121414;
  font-weight: 600;
}
.btn-accent:hover { opacity: .85; color: #121414; }

.btn-outline-accent {
  border: 1px solid var(--accent);
  color: var(--accent);
  background: transparent;
}
.btn-outline-accent:hover { background: var(--accent); color: #121414; }

.form-control, .form-select {
  background: var(--surface2) !important;
  color: var(--text) !important;
  border: 1px solid var(--border) !important;
}
.form-control:focus, .form-select:focus {
  border-color: var(--accent) !important;
  box-shadow: 0 0 0 .2rem rgba(180, 197, 255, .15) !important;
}
.form-control::placeholder { color: var(--muted); }
label { color: var(--muted); font-size: .85rem; margin-bottom: 2px; }

.badge-pending { background: #4a4a1a; color: var(--warning); }
.badge-approved { background: #1a4a28; color: var(--success); }
.badge-rejected { background: #4a1a1a; color: var(--danger); }

.error-text { color: var(--danger); font-size: .9rem; }
.success-text { color: var(--success); font-size: .9rem; }

.login-wrapper {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
}
.login-card { width: 100%; max-width: 360px; }

.small-muted { color: var(--muted); font-size: .8rem; }

/* ── Светлая тема (переключается через buyer-settings.html) ──────────────── */
body.theme-light {
  --bg: #f4f5f7;
  --surface: #ffffff;
  --surface2: #eef0f3;
  --text: #1a1c1e;
  --muted: #6b7078;
  --border: #dfe2e6;
  --accent: #4a5fc4;
}
body.theme-light .btn-accent { color: #ffffff; }
body.theme-light .btn-outline-accent:hover { color: #ffffff; }

body.theme-purple {
  --bg:        #0A0A12;
  --surface:   #15151F;
  --surface2:  #0A0A12;
  --accent:    #A855F7;
  --text:      #E6E6F0;
  --muted:     #9AA0A6;
  --border:    #2A2A38;
}

body.theme-purple .btn-accent { color: #ffffff; }

body.theme-purple .btn-outline-accent {
  border-color: #A855F7;
  color: #A855F7;
}
body.theme-purple .btn-outline-accent:hover {
  background: #A855F7;
  color: #ffffff;
}

body.theme-purple .glass-panel {
  background: rgba(168, 85, 247, 0.06);
  border-color: rgba(168, 85, 247, 0.25);
}

body.theme-purple::before {
  content: '';
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background:
    radial-gradient(circle at 30% 25%, rgba(123, 47, 255, 0.35) 0%, transparent 55%),
    radial-gradient(circle at 75% 60%, rgba(42, 106, 255, 0.30) 0%, transparent 50%),
    radial-gradient(circle at 50% 85%, rgba(0, 230, 118, 0.20) 0%, transparent 45%),
    linear-gradient(180deg, #0A0A12 0%, #0F0F1A 100%);
  background-size: 200% 200%, 200% 200%, 200% 200%, 100% 100%;
  animation: purpleBlobs 24s ease-in-out infinite alternate;
}

@keyframes purpleBlobs {
  0%   { background-position: 0% 0%,   100% 0%,  50% 100%, 0 0; }
  50%  { background-position: 40% 30%, 60% 50%,  30% 70%,  0 0; }
  100% { background-position: 80% 60%, 20% 100%, 70% 30%,  0 0; }
}

body.theme-purple { font-family: 'Inter', system-ui, sans-serif; }
body.theme-purple h1, body.theme-purple h2, body.theme-purple h3,
body.theme-purple h4, body.theme-purple h5, body.theme-purple h6,
body.theme-purple .navbar-brand { font-family: 'Hanken Grotesk', sans-serif; }
body.theme-purple .small-muted, body.theme-purple label {
  font-family: 'JetBrains Mono', monospace;
}

/* ── Стеклянные панели (мобильный стиль для buyer-*.html) ─────────────────── */
.glass-panel {
  background: rgba(255, 255, 255, 0.04);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid var(--border);
  border-radius: 16px;
}
body.theme-light .glass-panel {
  background: rgba(255, 255, 255, 0.6);
}

.rounded-xl { border-radius: 16px !important; }
.rounded-xxl { border-radius: 22px !important; }

.store-card {
  position: relative;
  cursor: pointer;
  transition: transform .15s ease, border-color .15s ease;
}
.store-card:hover { transform: translateY(-2px); border-color: var(--accent); }

.map-marker {
  position: absolute;
  transform: translate(-50%, -50%);
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: #1a237e;
  border: 2px solid #fff;
  box-shadow: 0 2px 6px rgba(0,0,0,.4);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  cursor: pointer;
  transition: transform .15s ease;
  z-index: 10;
}
.map-marker:hover { transform: translate(-50%, -50%) scale(1.15); }

/* Адаптивные маркеры для узких экранов и мобильного приложения */
@media (max-width: 600px) {
  .map-marker {
    width: 26px;
    height: 26px;
    font-size: 13px;
    border-width: 1.5px;
  }
}

@media (max-width: 400px) {
  .map-marker {
    width: 22px;
    height: 22px;
    font-size: 11px;
  }
}

.thumb-60 { width: 60px; height: 60px; object-fit: cover; border-radius: 10px; }
.thumb-fallback {
  width: 60px; height: 60px; display: flex; align-items: center; justify-content: center;
  font-size: 28px; background: var(--surface2); border-radius: 10px;
}

.bottom-tabbar {
  position: fixed; bottom: 0; left: 0; right: 0;
  background: var(--surface); border-top: 1px solid var(--border);
  display: flex; justify-content: space-around; padding: 8px 0;
  z-index: 100;
}
.bottom-tabbar a { color: var(--muted); text-decoration: none; font-size: .75rem; text-align: center; }
.bottom-tabbar a.active { color: var(--accent); }
.bottom-tabbar .icon { font-size: 20px; display: block; }

.brand-logo {
  height: 64px;
  width: auto;
  display: block;
}
.brand-logo-lg {
  height: 140px;
  width: auto;
  margin: 0 auto 16px;
  display: block;
}

/* ── Уведомления продавца (колокольчик + лента) ───────────────────────────── */
.notif-badge {
  position: absolute;
  top: -6px;
  right: -6px;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  background: #FF5252;
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  line-height: 18px;
  text-align: center;
  border-radius: 9px;
  border: 2px solid var(--surface);
  box-shadow: 0 2px 6px rgba(0,0,0,0.3);
  z-index: 10;
}

.seller-nav .nav-orders-btn {
  position: relative;
}

.time-warn {
  font-size: 14px;
  margin-right: 4px;
  animation: pulse 1.5s ease-in-out infinite;
}
@keyframes pulse {
  0%,100% { opacity: 1; }
  50%     { opacity: 0.4; }
}

.notif-feed {
  position: fixed;
  top: 70px;
  right: 16px;
  width: 320px;
  max-width: calc(100vw - 32px);
  max-height: calc(100vh - 90px);
  overflow: hidden auto;
  z-index: 1500;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.notif-tile {
  background: rgba(255, 255, 255, 0.04);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 10px 12px;
  transition: opacity .3s ease, transform .3s ease,
              border-color .2s ease, background-color .2s ease;
  cursor: default;
}

.notif-order_new       { border-left: 3px solid #00E676; }
.notif-chat_message    { border-left: 3px solid #FFD54F; }
.notif-order_canceled  { border-left: 3px solid #FF5252; }
.notif-order_status    { border-left: 3px solid #FF9800; }
.notif-support_message { border-left: 3px solid #66BB6A; }

.notif-tile-hover { border-left-width: 4px; }
.notif-tile-out   { opacity: 0; transform: translateX(20px); }

/* ── Мобильная адаптация (узкие экраны) ─────────────────────────────── */
html, body {
  overflow-x: hidden;
  max-width: 100vw;
}

@media (max-width: 768px) {
  /* Навбар: две строки, кнопки меньше, всё выровнено вправо */
  .navbar .container-fluid {
    flex-direction: column;
    align-items: stretch;
    gap: 6px;
    padding: 8px 10px;
  }
  /* Первый child (логотип) — своя строка, слева */
  .navbar .container-fluid > *:first-child {
    align-self: flex-start;
  }
  /* Второй child (кнопки и ссылки) — своя строка, справа, с переносом */
  .navbar .container-fluid > .d-flex {
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 4px;
    row-gap: 6px;
  }
  .navbar .nav-link,
  .navbar .btn {
    font-size: 0.75rem;
    padding: 3px 8px;
    margin: 0;
    white-space: nowrap;
  }
  .navbar-brand {
    font-size: 0.95rem;
  }
  .brand-logo {
    height: 34px;
  }

  /* Общие контейнеры */
  .container-fluid { padding-left: 10px; padding-right: 10px; }
  .card { margin-bottom: 8px; }

  /* Таблицы — горизонтальный скролл только внутри таблицы */
  .table-responsive,
  table {
    display: block;
    overflow-x: auto;
    white-space: nowrap;
    -webkit-overflow-scrolling: touch;
  }
}


/* ══════════════════════════════════════════════════════════════════════════
   ПЕРЕКЛЮЧАТЕЛЬ ТЕМ (js/theme-switcher.js): кнопка-открывашка + меню на 6 тем
   ══════════════════════════════════════════════════════════════════════════ */

.theme-switcher {
  position: relative;
  display: inline-block;
}
.theme-switcher--full { display: block; }

/* Панель настроек с переключателем поднимаем над следующими панелями:
   .glass-panel создаёт свой слой (backdrop-filter), и меню иначе уходило бы под них. */
.theme-switcher-host { position: relative; z-index: 30; }

/* Кнопка-открывашка: выглядит как кнопка активной темы (класс theme-option--<тема>). */
.theme-switcher-toggle {
  /* FIX: БАГ 1.1 — кнопка получает класс активной темы (theme-option--liquid-glass и т.д.),
     а значит и её декоративный ::before. position/overflow/isolation держат его ВНУТРИ кнопки,
     текст — поверх (z-index у детей). */
  position: relative;
  overflow: hidden;
  isolation: isolate;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 14px;
  border-radius: 12px;
  font-size: .9rem;
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
  transition: box-shadow 200ms ease, transform 200ms ease;
}
.theme-switcher-toggle > * { position: relative; z-index: 1; }
.theme-switcher--full .theme-switcher-toggle {
  width: 100%;
  justify-content: space-between;
  padding: 10px 16px;
}
.theme-switcher-caret {
  font-size: .75rem;
  opacity: .8;
  transition: transform 200ms cubic-bezier(0.4, 0, 0.2, 1);
}
.theme-switcher.open .theme-switcher-caret { transform: rotate(180deg); }

/* Выпадающее меню */
.theme-switcher-menu {
  position: absolute;
  top: calc(100% + 8px);
  width: 260px;
  max-width: calc(100vw - 24px);
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 8px;
  border-radius: 16px;
  background: var(--surface);
  border: 1px solid var(--border);
  box-shadow: 0 16px 40px rgba(0, 0, 0, .45);
  z-index: 1050;
  opacity: 0;
  transform: translateY(-8px);
  pointer-events: none;
  visibility: hidden;
  transition:
    opacity 200ms cubic-bezier(0.4, 0, 0.2, 1),
    transform 200ms cubic-bezier(0.4, 0, 0.2, 1),
    visibility 0s linear 200ms;
}
.theme-switcher--align-right .theme-switcher-menu { right: 0; }
.theme-switcher--align-left  .theme-switcher-menu { left: 0; }
.theme-switcher.open .theme-switcher-menu {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
  visibility: visible;
  transition:
    opacity 200ms cubic-bezier(0.4, 0, 0.2, 1),
    transform 200ms cubic-bezier(0.4, 0, 0.2, 1),
    visibility 0s;
}

/* Кнопка темы в меню — общая геометрия */
.theme-option {
  position: relative;
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 10px 14px;
  border-radius: 12px;
  border: 1px solid transparent;
  font-size: .92rem;
  font-weight: 600;
  text-align: left;
  cursor: pointer;
  overflow: hidden;
  transition: box-shadow 200ms ease, transform 200ms ease, border-color 200ms ease;
}
.theme-option > * { position: relative; z-index: 1; } /* контент поверх декоративных ::before/::after */
.theme-option-icon { font-size: 1.05rem; }
.theme-option-name { flex-grow: 1; }
.theme-option-check { opacity: 0; font-weight: 700; }

/* Активная тема: ✓ справа, рамка 2px акцентом темы, лёгкое увеличение */
.theme-option.active {
  border: 2px solid var(--opt-accent, #b4c5ff);
  transform: scale(1.02);
}
.theme-option.active .theme-option-check { opacity: 1; }

/* ── 🌙 Dark ── */
.theme-option--dark {
  --opt-accent: #b4c5ff;
  background: #0F0F12;
  color: #E8E8EC;
  border-color: rgba(255, 255, 255, .12);
}
.theme-option--dark:hover { box-shadow: 0 0 18px rgba(255, 255, 255, .15); }

/* ── ☀️ Light ── */
.theme-option--light {
  --opt-accent: #F2A93B;
  background: #FFFFFF;
  color: #1A1A1A;
  border-color: rgba(0, 0, 0, .12);
}
.theme-option--light:hover { box-shadow: 0 0 20px rgba(255, 200, 100, .4); }

/* ── 💜 Purple ── */
.theme-option--purple {
  --opt-accent: #D7A6FF;
  background: linear-gradient(135deg, #4A1D7A, #8B3DBA);
  color: #FFFFFF;
  border-color: rgba(215, 166, 255, .35);
}
.theme-option--purple:hover { box-shadow: 0 0 22px rgba(180, 100, 255, .6); }

/* ── 🔷 Astra: машинный металл с верхним бликом ── */
.theme-option--astra {
  --opt-accent: #BBE7FA;
  background: linear-gradient(135deg, #52B5E0, #0079C0 60%, #004F6D);
  color: #FFFFFF;
  border: 1px solid rgba(82, 181, 224, .5);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .4);
  text-shadow: 0 1px 2px rgba(0, 35, 55, .6);
}
.theme-option--astra:hover {
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .4),
    0 0 24px rgba(0, 121, 192, .7),
    0 0 48px rgba(82, 181, 224, .4);
}

/* ── 💎 Liquid Glass: стекло + радужный переливающийся ободок при наведении ── */
.theme-option--liquid-glass {
  --opt-accent: #64D2FF;
  background: linear-gradient(135deg, rgba(255, 255, 255, .18), rgba(255, 255, 255, .06));
  -webkit-backdrop-filter: blur(20px) saturate(180%);
  backdrop-filter: blur(20px) saturate(180%);
  color: #FFFFFF;
  border: 1px solid rgba(255, 255, 255, .35);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .45), inset 0 -1px 0 rgba(255, 255, 255, .08);
}
/* FIX: БАГ 1.1 — раньше радуга была квадратом inset:-60% под тёмной "крышкой" ::after:
   у кнопки-открывашки она вылезала наружу и закрывала текст. Теперь это кольцо толщиной 2px
   РОВНО по краю кнопки (inset:0 + mask), "крышки" нет, центр остаётся стеклом.
   Вращение — через анимируемый угол @property; в браузерах без @property кольцо просто не крутится. */
@property --lg-aura-angle {
  syntax: '<angle>';
  inherits: false;
  initial-value: 0deg;
}
.theme-option--liquid-glass::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 0;
  border-radius: inherit;
  padding: 2px;
  background: conic-gradient(from var(--lg-aura-angle), #ff453a, #ffd60a, #30d158, #64d2ff, #bf5af2, #ff453a);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  opacity: 0;
  transition: opacity 250ms ease;
  animation: themeOptionAura 3s linear infinite;
  pointer-events: none;
}
/* FIX: БАГ 1.2 — подсветка только по контуру изнутри, центр не заливается */
.theme-option--liquid-glass:hover {
  box-shadow: inset 0 0 12px 1px rgba(100, 210, 255, .35), inset 0 1px 0 rgba(255, 255, 255, .45);
}
.theme-option--liquid-glass:hover::before { opacity: .95; }
@keyframes themeOptionAura { to { --lg-aura-angle: 360deg; } }

/* ── 🌿 Living Nature: заглушка "Скоро" ── */
.theme-option--nature {
  --opt-accent: #8FD9A8;
  background: linear-gradient(135deg, #2D5A3D, #5FAF6F 60%, #8FD9A8);
  color: #FFFFFF;
  border: 1px solid rgba(143, 217, 168, .5);
  text-shadow: 0 1px 2px rgba(0, 40, 10, .5);
}
.theme-option--nature::before {
  /* текстура листьев */
  content: '';
  position: absolute;
  inset: 0;
  z-index: 0;
  opacity: .15;
  pointer-events: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='48' height='48' viewBox='0 0 48 48'%3E%3Cg fill='none' stroke='%23ffffff' stroke-width='1.4'%3E%3Cpath d='M6 30c6-12 18-16 26-14-2 9-12 18-26 14z'/%3E%3Cpath d='M6 30c8-6 14-9 26-14'/%3E%3Cpath d='M30 44c2-8 8-12 14-12-1 6-6 11-14 12z'/%3E%3C/g%3E%3C/svg%3E");
  background-size: 48px 48px;
}
.theme-option--nature:hover { box-shadow: 0 0 22px rgba(95, 175, 111, .6); }
.theme-option--soon { cursor: not-allowed; }
.theme-option-badge {
  position: absolute !important;
  top: 6px;
  right: 8px;
  padding: 1px 7px;
  border-radius: 999px;
  font-size: .62rem;
  font-weight: 700;
  letter-spacing: .03em;
  text-transform: uppercase;
  background: rgba(255, 255, 255, .92);
  color: #2D5A3D;
  text-shadow: none;
}

/* Всплывающее уведомление ("Тема в разработке") */
.theme-toast {
  position: fixed;
  left: 50%;
  bottom: 24px;
  transform: translate(-50%, 12px);
  padding: 10px 18px;
  border-radius: 12px;
  background: var(--surface);
  color: var(--text);
  border: 1px solid var(--border);
  box-shadow: 0 8px 24px rgba(0, 0, 0, .4);
  z-index: 3000;
  opacity: 0;
  pointer-events: none;
  transition: opacity 200ms ease, transform 200ms ease;
}
.theme-toast.show { opacity: 1; transform: translate(-50%, 0); }

/* Плавная смена цветов при переключении темы (класс ставит theme-switcher.js на 450 мс) */
body.theme-transitioning,
body.theme-transitioning * {
  transition:
    background-color 400ms cubic-bezier(0.2, 0.8, 0.2, 1),
    color 400ms cubic-bezier(0.2, 0.8, 0.2, 1),
    border-color 400ms cubic-bezier(0.2, 0.8, 0.2, 1),
    box-shadow 400ms cubic-bezier(0.2, 0.8, 0.2, 1) !important;
}

@media (prefers-reduced-motion: reduce) {
  .theme-switcher-menu, .theme-option, .theme-switcher-caret, .theme-toast { transition: none !important; }
  .theme-option--liquid-glass::before { animation: none !important; }
}


/* ══════════════════════════════════════════════════════════════════════════
   ТЕМА ASTRA (Stitch, style-astra.css) — включается классом body.theme-astra
   ══════════════════════════════════════════════════════════════════════════
   Как встроено:
   - все селекторы Stitch обёрнуты в body.theme-astra (html, body → body.theme-astra),
     поэтому тема не влияет на остальные темы и на Bootstrap вне себя;
   - переменные --astra-* оставлены в :root — сами по себе они ничего не красят;
   - глобальный box-sizing Stitch пропущен: Bootstrap 5 уже задаёт его;
   - SVG-паттерн "astra-lines" из инструкции Stitch в CSS НЕ используется
     (сетка фона нарисована градиентами в body::before) — вставлять его в HTML
     не обязательно. Если понадобится, место вставки — сразу после <body>.
   ────────────────────────────────────────────────────────────────────────── */
:root {
  /* Brand Palette */
  --astra-blue: #0079C0;
  --astra-deep-blue: #004F6D;
  --astra-sky-blue: #52B5E0;
  --astra-warm-white: #EAEAAE;
  --astra-cool-gray: #9BACC1;
  --astra-dark-bg: #09121B;
  --astra-panel-bg: #0E1B26;
  --astra-text-light: #F5F7FA;
  --astra-text-muted: #9BACC1;
  --astra-text-dark: #0D1A26;
  
  /* Status Colors */
  --astra-success: #20BA78;
  --astra-warning: #E89E28;
  --astra-danger: #E03E3E;
  
  /* Elevation & Lighting Tokens */
  --panel-bevel-border: 1px solid rgba(82, 181, 224, 0.22);
  --machined-edge-highlight: inset 0 1px 0 rgba(255, 255, 255, 0.45);
  --machined-inset-bevel: inset 0 1px 0 rgba(255,255,255,0.7), inset 0 -1px 0 rgba(0,79,109,0.5);
  
  /* Transition curve */
  --astra-ease: cubic-bezier(0.2, 0.8, 0.2, 1);
  --astra-transition-fast: 200ms var(--astra-ease);
  --astra-transition-normal: 250ms var(--astra-ease);
  --astra-transition-slow: 400ms var(--astra-ease);
}

/* ==============================================================================
   GLOBAL RESET & HUD ATMOSPHERE
   ============================================================================== */

/* [обёртка] глобальный box-sizing пропущен — Bootstrap 5 уже задаёт его всем элементам */

body.theme-astra {
  min-height: 100vh;
  margin: 0;
  padding: 0;
  background-color: var(--astra-dark-bg);
  color: var(--astra-text-light);
  font-family: "PT Astra Fact", "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  font-size: 15px;
  line-height: 1.15;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  transition: background-color var(--astra-transition-slow), color var(--astra-transition-slow);
  overflow-x: hidden;
  position: relative;
}

/* HUD Atmospheric Background with Physical Grid Mesh */
body.theme-astra::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  background-image: 
    radial-gradient(ellipse 90% 70% at 50% -15%, rgba(0, 121, 192, 0.25) 0%, rgba(0, 79, 109, 0.12) 45%, transparent 80%),
    radial-gradient(circle 600px at 100% 100%, rgba(82, 181, 224, 0.08) 0%, transparent 70%),
    repeating-linear-gradient(
      -30deg,
      rgba(0, 121, 192, 0.04) 0px,
      rgba(0, 121, 192, 0.04) 1px,
      transparent 1px,
      transparent 40px
    ),
    repeating-linear-gradient(
      60deg,
      rgba(0, 79, 109, 0.03) 0px,
      rgba(0, 79, 109, 0.03) 1px,
      transparent 1px,
      transparent 40px
    );
  opacity: 0.95;
}

/* Body Vignette & Depth Layer */
body.theme-astra::after {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  box-shadow: inset 0 0 140px rgba(0, 15, 30, 0.85);
}

/* Typography per Astra Brandbook */
body.theme-astra h1,
body.theme-astra .h1 {
  font-family: "TT Norms Pro", "Inter", sans-serif;
  font-weight: 700;
  line-height: 0.9;
  letter-spacing: -0.02em;
  color: #FFFFFF;
}

body.theme-astra h2,
body.theme-astra .h2,
body.theme-astra h3,
body.theme-astra .h3,
body.theme-astra h4,
body.theme-astra .h4,
body.theme-astra h5,
body.theme-astra .h5,
body.theme-astra h6,
body.theme-astra .h6 {
  font-family: "TT Norms Pro", "Inter", sans-serif;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: #FFFFFF;
}

body.theme-astra small,
body.theme-astra .small {
  font-size: 0.825rem;
  line-height: 1.2;
}

body.theme-astra p,
body.theme-astra span,
body.theme-astra label,
body.theme-astra input,
body.theme-astra button {
  line-height: 1.15;
}

/* Page Mount Keyframe Stagger */
@keyframes astraMount {
  from {
    opacity: 0;
    transform: translateY(12px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

body.theme-astra .container,
body.theme-astra .container-fluid,
body.theme-astra main,
body.theme-astra .main-content,
body.theme-astra .card,
body.theme-astra .auth-box,
body.theme-astra .chat-panel,
body.theme-astra .map-container {
  animation: astraMount 350ms var(--astra-ease) backwards;
  position: relative;
  z-index: 1;
}

/* Mount Stagger utilities */
body.theme-astra .container > *:nth-child(1) { animation-delay: 60ms; }
body.theme-astra .container > *:nth-child(2) { animation-delay: 120ms; }
body.theme-astra .container > *:nth-child(3) { animation-delay: 180ms; }
body.theme-astra .container > *:nth-child(4) { animation-delay: 240ms; }
body.theme-astra .container > *:nth-child(5) { animation-delay: 300ms; }

/* ==============================================================================
   TOP NAVIGATION & HEADER HUD
   ============================================================================== */

body.theme-astra header,
body.theme-astra nav.navbar,
body.theme-astra .app-header {
  position: relative;
  z-index: 100;
  background: linear-gradient(180deg, #132230 0%, #0C1721 100%) !important;
  border-bottom: 1px solid rgba(82, 181, 224, 0.35);
  box-shadow: 
    0 1px 0 rgba(255, 255, 255, 0.08) inset,
    0 4px 16px rgba(0, 15, 30, 0.75),
    0 1px 3px rgba(0, 79, 109, 0.3);
  padding: 0.75rem 1.25rem;
}

/* Machined Specular Highlight on Header Top */
body.theme-astra header::before,
body.theme-astra nav.navbar::before,
body.theme-astra .app-header::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(82, 181, 224, 0.8) 30%, rgba(255, 255, 255, 0.9) 50%, rgba(82, 181, 224, 0.8) 70%, transparent);
}

body.theme-astra .navbar-brand,
body.theme-astra .logo-text {
  font-family: "TT Norms Pro", "Inter", sans-serif;
  font-weight: 700;
  color: #FFFFFF !important;
  text-shadow: 0 0 12px rgba(82, 181, 224, 0.6);
  display: flex;
  align-items: center;
  gap: 8px;
}

/* Nav Link Pill Buttons / Action Badges */
body.theme-astra .nav-link,
body.theme-astra .nav-btn,
body.theme-astra .header-link {
  color: var(--astra-cool-gray) !important;
  font-weight: 500;
  padding: 6px 14px !important;
  border-radius: 8px;
  transition: all var(--astra-transition-fast);
  border: 1px solid transparent;
}

body.theme-astra .nav-link:hover,
body.theme-astra .nav-btn:hover {
  color: #FFFFFF !important;
  background: rgba(0, 121, 192, 0.15);
  border-color: rgba(82, 181, 224, 0.3);
  box-shadow: 0 0 12px rgba(0, 121, 192, 0.25);
  transform: translateY(-1px);
}

/* Active or Outlined Top Actions */
body.theme-astra .nav-btn-outline,
body.theme-astra .btn-header-action {
  background: linear-gradient(180deg, #172838 0%, #101E2B 100%);
  border: 1px solid rgba(82, 181, 224, 0.4) !important;
  color: #FFFFFF !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.15), 0 2px 4px rgba(0,0,0,0.3);
}

body.theme-astra .nav-btn-outline:hover,
body.theme-astra .btn-header-action:hover {
  border-color: var(--astra-sky-blue) !important;
  box-shadow: 0 0 16px rgba(82, 181, 224, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.3);
}

/* Notification Counter (Order counter badge) */
body.theme-astra .badge-counter,
body.theme-astra .header-badge {
  background: linear-gradient(180deg, #FF5E5E 0%, #D82626 100%);
  color: #FFFFFF;
  border-radius: 999px;
  font-size: 0.7rem;
  font-weight: 700;
  padding: 2px 6px;
  box-shadow: 0 0 8px rgba(224, 62, 62, 0.6), inset 0 1px 0 rgba(255,255,255,0.4);
  border: 1px solid #FF8080;
}

/* ==============================================================================
   CARDS & PANELS: BEVELED METAL PLATES & HUD ENCLOSURES
   ============================================================================== */

/* Primary Beveled Metal Plate (Dark HUD Server Enclosure Variant) */
body.theme-astra .card,
body.theme-astra .panel,
body.theme-astra .auth-card,
body.theme-astra .store-card,
body.theme-astra .menu-item,
body.theme-astra .order-item,
body.theme-astra .booking-card {
  background: linear-gradient(180deg, #162433 0%, #111D2A 55%, #0B141E 100%) !important;
  border-radius: 16px !important;
  border: 1px solid rgba(82, 181, 224, 0.28) !important;
  position: relative;
  overflow: hidden;
  box-shadow: 
    inset 0 1px 0 rgba(255, 255, 255, 0.22),
    inset 0 2px 0 rgba(255, 255, 255, 0.08),
    inset 0 -2px 4px rgba(0, 0, 0, 0.4),
    0 1px 0 rgba(0, 79, 109, 0.3),
    0 2px 0 rgba(0, 79, 109, 0.2),
    0 4px 8px rgba(0, 15, 30, 0.35),
    0 8px 16px rgba(0, 15, 30, 0.25),
    0 24px 48px rgba(0, 15, 30, 0.5) !important;
  color: var(--astra-text-light);
  transition: transform var(--astra-transition-normal), box-shadow var(--astra-transition-normal), border-color var(--astra-transition-normal);
}

/* Light-Surfaced Beveled Plate Variant (Strictly applying prompt spec where applicable) */
body.theme-astra .card-light,
body.theme-astra .plate-light {
  background: linear-gradient(180deg, #F8FAFC 0%, #E8EDF3 50%, #D8E0E8 100%) !important;
  border-radius: 16px !important;
  border: 1px solid #CAD5E2 !important;
  color: var(--astra-text-dark) !important;
  box-shadow: 
    inset 0 1px 0 rgba(255,255,255,0.9), 
    inset 0 2px 0 rgba(255,255,255,0.5), 
    inset 0 -2px 4px rgba(0,79,109,0.08), 
    0 1px 0 rgba(0,79,109,0.15), 
    0 2px 0 rgba(0,79,109,0.1), 
    0 4px 8px rgba(0,79,109,0.08), 
    0 8px 16px rgba(0,79,109,0.06), 
    0 24px 48px rgba(0,79,109,0.12) !important;
}

/* Specular Reflection Pseudo Element (Top-Left Glint) */
body.theme-astra .card::before,
body.theme-astra .panel::before,
body.theme-astra .auth-card::before,
body.theme-astra .store-card::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 40%;
  height: 48%;
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.12), transparent 60%);
  border-radius: 16px 0 0 0;
  pointer-events: none;
  z-index: 1;
}

body.theme-astra .card-light::before,
body.theme-astra .plate-light::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 40%;
  height: 48%;
  background: linear-gradient(135deg, rgba(255,255,255,0.6), transparent 50%);
  border-radius: 16px 0 0 0;
  pointer-events: none;
  z-index: 1;
}

/* Subtle Hover Accent on Interactive Cards */
body.theme-astra .store-card:hover,
body.theme-astra .menu-item:hover,
body.theme-astra .booking-card:hover {
  border-color: rgba(82, 181, 224, 0.6) !important;
  transform: translateY(-2px);
  box-shadow: 
    inset 0 1px 0 rgba(255, 255, 255, 0.35),
    0 0 24px rgba(0, 121, 192, 0.28),
    0 12px 28px rgba(0, 15, 30, 0.6) !important;
}

/* ==============================================================================
   BUTTONS: MACHINED METAL & HUD TACTILE TRIGGERS
   ============================================================================== */

/* PRIMARY BUTTONS — MACHINED METAL WITH SPECULAR LAYERS */
body.theme-astra .btn-primary,
body.theme-astra button[type="submit"],
body.theme-astra .btn-login,
body.theme-astra .btn-checkout,
body.theme-astra .btn-send,
body.theme-astra .btn-order,
body.theme-astra .btn-confirm {
  background: linear-gradient(180deg, #4FB4DD 0%, #2595C8 45%, #0079C0 55%, #005F98 100%) !important;
  border: 1px solid #006CA8 !important;
  border-radius: 10px !important;
  color: #FFFFFF !important;
  font-family: "TT Norms Pro", "Inter", sans-serif;
  font-weight: 600;
  letter-spacing: 0.02em;
  padding: 10px 22px;
  position: relative;
  text-shadow: 0 1px 2px rgba(0, 35, 55, 0.65);
  box-shadow: 
    inset 0 1px 0 rgba(255,255,255,0.5), 
    inset 0 2px 0 rgba(255,255,255,0.2), 
    inset 0 -1px 0 rgba(0,79,109,0.3), 
    0 1px 0 #004F6D, 
    0 2px 4px rgba(0,121,192,0.3), 
    0 4px 8px rgba(0,121,192,0.2), 
    0 8px 16px rgba(0,121,192,0.15) !important;
  cursor: pointer;
  transition: transform var(--astra-transition-normal), box-shadow var(--astra-transition-normal), filter var(--astra-transition-normal);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  overflow: hidden;
}

/* PRIMARY BUTTON HOVER: Backlight Glow & Elevation */
body.theme-astra .btn-primary:hover,
body.theme-astra button[type="submit"]:hover,
body.theme-astra .btn-login:hover,
body.theme-astra .btn-checkout:hover,
body.theme-astra .btn-send:hover,
body.theme-astra .btn-order:hover,
body.theme-astra .btn-confirm:hover {
  box-shadow: 
    inset 0 1px 0 rgba(255,255,255,0.7), 
    0 0 32px rgba(82,181,224,0.55), 
    0 0 64px rgba(0,121,192,0.35),
    0 4px 12px rgba(0,121,192,0.4) !important;
  transform: translateY(-1px);
}

/* PRIMARY BUTTON ACTIVE: Tactical Mechanical Inset */
body.theme-astra .btn-primary:active,
body.theme-astra button[type="submit"]:active,
body.theme-astra .btn-login:active,
body.theme-astra .btn-checkout:active,
body.theme-astra .btn-send:active,
body.theme-astra .btn-order:active,
body.theme-astra .btn-confirm:active {
  transform: translateY(1px) !important;
  background: linear-gradient(180deg, #005F98 0%, #0079C0 45%, #2595C8 100%) !important;
  box-shadow: 
    inset 0 2px 4px rgba(0, 25, 45, 0.7), 
    inset 0 1px 2px rgba(0, 0, 0, 0.5),
    0 1px 2px rgba(0, 79, 109, 0.4) !important;
}

/* SECONDARY & OUTLINE BUTTONS (Machined Dark Aluminum) */
body.theme-astra .btn-secondary,
body.theme-astra .btn-outline,
body.theme-astra .btn-back,
body.theme-astra .btn-light-metal {
  background: linear-gradient(180deg, #1A2A3A 0%, #12202E 50%, #0C1722 100%) !important;
  border: 1px solid rgba(82, 181, 224, 0.35) !important;
  color: #E2E8F0 !important;
  border-radius: 10px !important;
  font-weight: 500;
  box-shadow: 
    inset 0 1px 0 rgba(255, 255, 255, 0.15),
    inset 0 -1px 0 rgba(0, 0, 0, 0.4),
    0 1px 0 rgba(0, 79, 109, 0.2),
    0 2px 4px rgba(0, 0, 0, 0.35);
  transition: all var(--astra-transition-fast);
}

body.theme-astra .btn-secondary:hover,
body.theme-astra .btn-outline:hover,
body.theme-astra .btn-back:hover {
  background: linear-gradient(180deg, #22374B 0%, #182B3D 100%) !important;
  border-color: var(--astra-sky-blue) !important;
  color: #FFFFFF !important;
  box-shadow: 
    inset 0 1px 0 rgba(255, 255, 255, 0.25),
    0 0 16px rgba(82, 181, 224, 0.3),
    0 3px 8px rgba(0, 0, 0, 0.4);
  transform: translateY(-1px);
}

body.theme-astra .btn-secondary:active,
body.theme-astra .btn-back:active {
  transform: translateY(1px);
  box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.6);
}

/* DANGER / CANCEL / DELETE BUTTON (Muted Red Titanium) */
body.theme-astra .btn-danger,
body.theme-astra .btn-delete,
body.theme-astra .btn-cancel {
  background: linear-gradient(180deg, #992828 0%, #751A1A 100%) !important;
  border: 1px solid #B83838 !important;
  color: #FFFFFF !important;
  border-radius: 10px !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.25), 0 2px 4px rgba(0,0,0,0.4);
}

body.theme-astra .btn-danger:hover,
body.theme-astra .btn-delete:hover,
body.theme-astra .btn-cancel:hover {
  background: linear-gradient(180deg, #B52F2F 0%, #8A1E1E 100%) !important;
  border-color: #FF5E5E !important;
  box-shadow: 0 0 18px rgba(224, 62, 62, 0.4), inset 0 1px 0 rgba(255,255,255,0.4);
  transform: translateY(-1px);
}

/* ==============================================================================
   INPUTS & SEARCH: INSET INSTRUMENT FIELDS
   ============================================================================== */

/* Inset fields with top inner shadow */
body.theme-astra input[type="text"],
body.theme-astra input[type="email"],
body.theme-astra input[type="password"],
body.theme-astra input[type="number"],
body.theme-astra input[type="search"],
body.theme-astra input[type="date"],
body.theme-astra input[type="time"],
body.theme-astra textarea,
body.theme-astra select,
body.theme-astra .form-control {
  background: #08111A !important;
  border: 1px solid rgba(82, 181, 224, 0.3) !important;
  border-radius: 10px !important;
  color: #FFFFFF !important;
  padding: 10px 14px !important;
  font-family: inherit;
  font-size: 0.95rem;
  box-shadow: 
    inset 0 3px 6px rgba(0, 0, 0, 0.65),
    inset 0 1px 2px rgba(0, 0, 0, 0.4),
    0 1px 0 rgba(255, 255, 255, 0.08) !important;
  transition: border-color var(--astra-transition-fast), box-shadow var(--astra-transition-fast), background-color var(--astra-transition-fast);
}

body.theme-astra input::placeholder,
body.theme-astra textarea::placeholder {
  color: #5D7287 !important;
  font-weight: 400;
}

body.theme-astra input:focus,
body.theme-astra textarea:focus,
body.theme-astra select:focus,
body.theme-astra .form-control:focus {
  outline: none !important;
  background: #0B1622 !important;
  border-color: var(--astra-sky-blue) !important;
  box-shadow: 
    inset 0 2px 4px rgba(0, 0, 0, 0.5),
    0 0 0 3px rgba(0, 121, 192, 0.3),
    0 0 14px rgba(82, 181, 224, 0.25) !important;
}

/* Search Bar HUD Element */
body.theme-astra .search-container,
body.theme-astra .search-bar-wrap {
  position: relative;
  margin-bottom: 1.25rem;
}

body.theme-astra .search-container input,
body.theme-astra .search-input {
  width: 100%;
  padding-left: 42px !important;
  border-radius: 12px !important;
  background: #08111A !important;
}

body.theme-astra .search-icon {
  position: absolute;
  left: 14px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--astra-sky-blue);
  pointer-events: none;
}

/* ==============================================================================
   BADGES & CHIPS: EMBOSSED LABELS
   ============================================================================== */

/* Embossed labels (inset highlight + drop shadow) */
body.theme-astra .badge,
body.theme-astra .tag,
body.theme-astra .status-pill,
body.theme-astra .chip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 4px 10px;
  border-radius: 6px;
  font-family: "TT Norms Pro", "Inter", sans-serif;
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  background: linear-gradient(180deg, #182736 0%, #0F1A24 100%);
  border: 1px solid rgba(82, 181, 224, 0.3);
  color: var(--astra-text-light);
  box-shadow: 
    inset 0 1px 0 rgba(255, 255, 255, 0.35),
    0 1px 2px rgba(0, 0, 0, 0.4),
    0 2px 4px rgba(0, 79, 109, 0.2);
}

/* Status variants */
body.theme-astra .badge-warning,
body.theme-astra .status-pending {
  background: linear-gradient(180deg, #4A3311 0%, #2A1D07 100%) !important;
  border-color: #D48C18 !important;
  color: #FFDA85 !important;
  box-shadow: inset 0 1px 0 rgba(255, 235, 180, 0.4), 0 0 10px rgba(232, 158, 40, 0.25);
}

body.theme-astra .badge-success,
body.theme-astra .status-confirmed,
body.theme-astra .status-ready {
  background: linear-gradient(180deg, #133D29 0%, #0B2418 100%) !important;
  border-color: #20BA78 !important;
  color: #79F0BA !important;
  box-shadow: inset 0 1px 0 rgba(180, 255, 215, 0.4), 0 0 10px rgba(32, 186, 120, 0.25);
}

body.theme-astra .badge-info,
body.theme-astra .status-in-progress {
  background: linear-gradient(180deg, #0A3249 0%, #051F2E 100%) !important;
  border-color: var(--astra-sky-blue) !important;
  color: #BBE7FA !important;
  box-shadow: inset 0 1px 0 rgba(187, 231, 250, 0.4), 0 0 10px rgba(0, 121, 192, 0.35);
}

/* ==============================================================================
   TOGGLES & SWITCHES: REALISTIC MECHANISM
   ============================================================================== */

/* Inset Track */
body.theme-astra .form-switch .form-check-input,
body.theme-astra .toggle-switch input[type="checkbox"],
body.theme-astra .switch-track {
  width: 46px !important;
  height: 24px !important;
  appearance: none;
  -webkit-appearance: none;
  background: #060D14 !important;
  border: 1px solid rgba(82, 181, 224, 0.35) !important;
  border-radius: 999px !important;
  position: relative;
  cursor: pointer;
  box-shadow: 
    inset 0 3px 5px rgba(0, 0, 0, 0.75), 
    inset 0 1px 2px rgba(0,0,0,0.5),
    0 1px 0 rgba(255, 255, 255, 0.1) !important;
  transition: all var(--astra-transition-fast);
}

/* Raised Machined Knob */
body.theme-astra .form-switch .form-check-input::after,
body.theme-astra .toggle-switch input[type="checkbox"]::after,
body.theme-astra .switch-knob {
  content: "";
  position: absolute;
  top: 2px;
  left: 2px;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: linear-gradient(180deg, #F0F4F8 0%, #B8C6D4 100%);
  border: 1px solid #758A9F;
  box-shadow: 
    inset 0 1px 0 rgba(255, 255, 255, 0.9), 
    0 2px 4px rgba(0, 0, 0, 0.5), 
    0 1px 2px rgba(0, 0, 0, 0.4);
  transition: transform var(--astra-transition-fast), background-color var(--astra-transition-fast);
}

/* Active Checked Toggle State */
body.theme-astra .form-switch .form-check-input:checked,
body.theme-astra .toggle-switch input[type="checkbox"]:checked {
  background: linear-gradient(180deg, #004F6D 0%, #0079C0 100%) !important;
  border-color: var(--astra-sky-blue) !important;
  box-shadow: 
    inset 0 2px 4px rgba(0, 30, 50, 0.6), 
    0 0 12px rgba(0, 121, 192, 0.4) !important;
}

body.theme-astra .form-switch .form-check-input:checked::after,
body.theme-astra .toggle-switch input[type="checkbox"]:checked::after {
  transform: translateX(22px);
  background: linear-gradient(180deg, #FFFFFF 0%, #E0EEF7 100%);
  border-color: #52B5E0;
  box-shadow: 
    inset 0 1px 0 rgba(255, 255, 255, 1), 
    0 0 8px rgba(82, 181, 224, 0.8),
    0 2px 4px rgba(0, 0, 0, 0.4);
}

/* Time Slot / Radio Selector Matrix (Booking screen slots) */
body.theme-astra .time-slot,
body.theme-astra .slot-button,
body.theme-astra .btn-slot {
  background: linear-gradient(180deg, #13212E 0%, #0E1822 100%);
  border: 1px solid rgba(82, 181, 224, 0.25);
  border-radius: 8px;
  color: var(--astra-cool-gray);
  padding: 8px 12px;
  font-size: 0.85rem;
  font-weight: 600;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.12), 0 2px 4px rgba(0,0,0,0.3);
  transition: all var(--astra-transition-fast);
}

body.theme-astra .time-slot:hover,
body.theme-astra .slot-button:hover {
  border-color: var(--astra-sky-blue);
  color: #FFFFFF;
  background: linear-gradient(180deg, #192D40 0%, #122130 100%);
  box-shadow: 0 0 10px rgba(0, 121, 192, 0.3);
}

body.theme-astra .time-slot.active,
body.theme-astra .slot-button.active,
body.theme-astra .time-slot:checked {
  background: linear-gradient(180deg, #0079C0 0%, #004F6D 100%) !important;
  border-color: var(--astra-sky-blue) !important;
  color: #FFFFFF !important;
  box-shadow: 
    inset 0 1px 0 rgba(255, 255, 255, 0.6), 
    0 0 16px rgba(82, 181, 224, 0.5),
    0 2px 6px rgba(0,0,0,0.5) !important;
}

/* ==============================================================================
   MAP HUD CONTAINER & MARKERS
   ============================================================================== */

body.theme-astra .map-container,
body.theme-astra #map,
body.theme-astra .buyer-map {
  border-radius: 16px;
  border: 1px solid rgba(82, 181, 224, 0.4) !important;
  box-shadow: 
    inset 0 0 24px rgba(0, 15, 30, 0.7),
    0 4px 16px rgba(0, 15, 30, 0.5);
  overflow: hidden;
  position: relative;
}

/* Tactical Corner Brackets for HUD feel */
body.theme-astra .map-container::after {
  content: "";
  position: absolute;
  inset: 6px;
  border: 1px dashed rgba(82, 181, 224, 0.25);
  border-radius: 12px;
  pointer-events: none;
}

/* Map Shop Markers */
body.theme-astra .map-marker,
body.theme-astra .store-pin {
  filter: drop-shadow(0 0 10px rgba(0, 121, 192, 0.7));
  transition: transform var(--astra-transition-fast);
}

body.theme-astra .map-marker:hover,
body.theme-astra .store-pin:hover {
  transform: scale(1.15) translateY(-3px);
  filter: drop-shadow(0 0 16px rgba(82, 181, 224, 0.9));
}

/* ==============================================================================
   MODALS, POPUPS & DETAIL DIALOGS
   ============================================================================== */

body.theme-astra .modal-content,
body.theme-astra .dish-modal,
body.theme-astra .order-modal {
  background: linear-gradient(180deg, #162534 0%, #0F1C28 100%) !important;
  border-radius: 20px !important;
  border: 1px solid rgba(82, 181, 224, 0.45) !important;
  box-shadow: 
    inset 0 1px 0 rgba(255, 255, 255, 0.35),
    inset 0 2px 0 rgba(255, 255, 255, 0.15),
    0 24px 64px rgba(0, 10, 20, 0.85),
    0 0 40px rgba(0, 79, 109, 0.4) !important;
  color: #FFFFFF;
}

body.theme-astra .modal-header {
  border-bottom: 1px solid rgba(82, 181, 224, 0.25) !important;
  padding: 1.25rem 1.5rem;
}

body.theme-astra .modal-footer {
  border-top: 1px solid rgba(82, 181, 224, 0.2) !important;
  padding: 1.25rem 1.5rem;
}

body.theme-astra .btn-close {
  filter: invert(1) brightness(1.5);
  opacity: 0.75;
  transition: transform var(--astra-transition-fast), opacity var(--astra-transition-fast);
}

body.theme-astra .btn-close:hover {
  opacity: 1;
  transform: rotate(90deg);
}

/* Modal Hero Image inside Food Preview */
body.theme-astra .dish-preview-img,
body.theme-astra .modal-body img {
  border-radius: 12px;
  border: 1px solid rgba(82, 181, 224, 0.2);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.4);
}

/* ==============================================================================
   CHAT INTERFACE (BUYER & SELLER CHAT HUDS)
   ============================================================================== */

body.theme-astra .chat-panel,
body.theme-astra .chat-container,
body.theme-astra .messages-viewport {
  background: #09121B !important;
  border: 1px solid rgba(82, 181, 224, 0.25) !important;
  border-radius: 14px;
  box-shadow: inset 0 3px 12px rgba(0, 0, 0, 0.6);
  padding: 1rem;
}

/* Incoming Message Bubble (System / Partner) */
body.theme-astra .message-incoming,
body.theme-astra .msg-received {
  background: linear-gradient(180deg, #162432 0%, #101B26 100%) !important;
  border: 1px solid rgba(82, 181, 224, 0.3) !important;
  color: #E6EDF5 !important;
  border-radius: 14px 14px 14px 4px !important;
  padding: 10px 16px;
  max-width: 75%;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.15), 0 2px 6px rgba(0, 0, 0, 0.35);
  position: relative;
}

/* Outgoing Message Bubble (Current User) */
body.theme-astra .message-outgoing,
body.theme-astra .msg-sent {
  background: linear-gradient(180deg, #0079C0 0%, #005689 100%) !important;
  border: 1px solid rgba(82, 181, 224, 0.6) !important;
  color: #FFFFFF !important;
  border-radius: 14px 14px 4px 14px !important;
  padding: 10px 16px;
  max-width: 75%;
  margin-left: auto;
  box-shadow: 
    inset 0 1px 0 rgba(255, 255, 255, 0.4), 
    0 2px 8px rgba(0, 79, 109, 0.4),
    0 0 14px rgba(0, 121, 192, 0.25);
  text-shadow: 0 1px 2px rgba(0, 30, 50, 0.5);
}

/* Chat Timestamp */
body.theme-astra .chat-time,
body.theme-astra .msg-time {
  font-size: 0.7rem;
  color: var(--astra-cool-gray);
  margin-top: 4px;
  display: block;
}

/* Image attachment in chat */
body.theme-astra .chat-attachment-img {
  border-radius: 10px;
  border: 1px solid rgba(82, 181, 224, 0.4);
  box-shadow: 0 4px 12px rgba(0,0,0,0.5);
  margin-top: 6px;
}

/* Chat Input Bar Enclosure */
body.theme-astra .chat-input-bar {
  background: linear-gradient(180deg, #13212F 0%, #0D1722 100%);
  border: 1px solid rgba(82, 181, 224, 0.3);
  border-radius: 14px;
  padding: 8px 12px;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.15), 0 4px 12px rgba(0, 0, 0, 0.4);
}

/* ==============================================================================
   ORDER ITEMS & QUANTITY COUNTERS
   ============================================================================== */

body.theme-astra .quantity-control,
body.theme-astra .counter-wrap {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

body.theme-astra .btn-counter {
  width: 30px;
  height: 30px;
  border-radius: 8px;
  background: linear-gradient(180deg, #182736 0%, #0F1A24 100%);
  border: 1px solid rgba(82, 181, 224, 0.35);
  color: #FFFFFF;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 2px 4px rgba(0, 0, 0, 0.3);
  transition: all var(--astra-transition-fast);
}

body.theme-astra .btn-counter:hover {
  border-color: var(--astra-sky-blue);
  color: #FFFFFF;
  box-shadow: 0 0 10px rgba(0, 121, 192, 0.4);
  transform: translateY(-1px);
}

body.theme-astra .btn-counter:active {
  transform: translateY(1px);
  box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.6);
}

body.theme-astra .counter-value {
  font-weight: 600;
  min-width: 24px;
  text-align: center;
  color: #FFFFFF;
}

/* ==============================================================================
   PRICING & CURRENCY HIGHLIGHTS
   ============================================================================== */

body.theme-astra .price-text,
body.theme-astra .total-amount,
body.theme-astra .order-price {
  font-family: "TT Norms Pro", "Inter", sans-serif;
  font-weight: 700;
  color: var(--astra-sky-blue);
  text-shadow: 0 0 12px rgba(82, 181, 224, 0.45);
}

/* ==============================================================================
   SCROLLBAR & THEME TRANSITIONS
   ============================================================================== */

body.theme-astra ::-webkit-scrollbar {
  width: 7px;
  height: 7px;
}

body.theme-astra ::-webkit-scrollbar-track {
  background: #08111A;
}

body.theme-astra ::-webkit-scrollbar-thumb {
  background: #182C3D;
  border-radius: 4px;
  border: 1px solid rgba(82, 181, 224, 0.2);
}

body.theme-astra ::-webkit-scrollbar-thumb:hover {
  background: var(--astra-blue);
  box-shadow: 0 0 8px rgba(0, 121, 192, 0.6);
}

/* Crossfade 400ms for Theme Switch */
body.theme-astra.theme-transitioning,
body.theme-astra.theme-transitioning * {
  transition: background-color 400ms var(--astra-ease), 
              color 400ms var(--astra-ease), 
              border-color 400ms var(--astra-ease), 
              box-shadow 400ms var(--astra-ease) !important;
}

/* Respect Accessibility Preferences */
@media (prefers-reduced-motion: reduce) {
  body.theme-astra *,
body.theme-astra *::before,
body.theme-astra *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
  body.theme-astra::before {
    animation: none !important;
  }
}


/* ── Мост Astra → классы проекта ─────────────────────────────────────────────
   Стили Stitch написаны под классы, которых в проекте нет (btn-primary,
   chat-bubble, card-light…). Здесь те же материалы переносятся на реальные
   классы TAKE it GO и задаются проектные переменные, на которых построены все
   страницы. Блок стоит ПОСЛЕ обёрнутых стилей Stitch и при равной
   специфичности побеждает. */

body.theme-astra {
  --bg: #09121B;
  --surface: #0E1B26;
  --surface2: #08111A;
  --accent: #52B5E0;
  --text: #F5F7FA;
  --muted: #9BACC1;
  --border: rgba(82, 181, 224, 0.28);
  --danger: #FF6B6B;
  --success: #79F0BA;
  --warning: #FFDA85;
}

/* Панели проекта — как бронированные пластины Stitch (.card) */
body.theme-astra .glass-panel {
  background: linear-gradient(180deg, #162433 0%, #111D2A 55%, #0B141E 100%) !important;
  border: 1px solid rgba(82, 181, 224, 0.28) !important;
  border-radius: 16px;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.22),
    inset 0 -2px 4px rgba(0, 0, 0, 0.4),
    0 4px 8px rgba(0, 15, 30, 0.35),
    0 16px 32px rgba(0, 15, 30, 0.45);
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}

/* Основная кнопка — машинный металл */
body.theme-astra .btn-accent {
  background: linear-gradient(180deg, #4FB4DD 0%, #2595C8 45%, #0079C0 55%, #005F98 100%) !important;
  border: 1px solid #006CA8 !important;
  border-radius: 10px;
  color: #FFFFFF !important;
  text-shadow: 0 1px 2px rgba(0, 35, 55, 0.65);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.5),
    inset 0 -1px 0 rgba(0, 79, 109, 0.3),
    0 1px 0 #004F6D,
    0 4px 8px rgba(0, 121, 192, 0.25);
  transition: transform 250ms cubic-bezier(0.2, 0.8, 0.2, 1), box-shadow 250ms cubic-bezier(0.2, 0.8, 0.2, 1);
}
body.theme-astra .btn-accent:hover {
  opacity: 1;
  color: #FFFFFF !important;
  transform: translateY(-1px);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.7),
    0 0 28px rgba(82, 181, 224, 0.5),
    0 4px 12px rgba(0, 121, 192, 0.4);
}
body.theme-astra .btn-accent:active {
  transform: translateY(1px);
  box-shadow: inset 0 2px 4px rgba(0, 25, 45, 0.7);
}

/* Контурная кнопка — тёмный алюминий */
body.theme-astra .btn-outline-accent {
  background: linear-gradient(180deg, #1A2A3A 0%, #12202E 50%, #0C1722 100%);
  border: 1px solid rgba(82, 181, 224, 0.35);
  border-radius: 10px;
  color: #E2E8F0;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.15), 0 2px 4px rgba(0, 0, 0, 0.35);
}
body.theme-astra .btn-outline-accent:hover {
  background: linear-gradient(180deg, #22374B 0%, #182B3D 100%);
  border-color: #52B5E0;
  color: #FFFFFF;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.25), 0 0 16px rgba(82, 181, 224, 0.3);
}

/* Статусы заказов/заявок — тиснёные бейджи Stitch */
body.theme-astra .badge-pending {
  background: linear-gradient(180deg, #4A3311 0%, #2A1D07 100%) !important;
  border-color: #D48C18 !important;
  color: #FFDA85 !important;
}
body.theme-astra .badge-approved {
  background: linear-gradient(180deg, #133D29 0%, #0B2418 100%) !important;
  border-color: #20BA78 !important;
  color: #79F0BA !important;
}
body.theme-astra .badge-rejected {
  background: linear-gradient(180deg, #4A1414 0%, #2A0A0A 100%) !important;
  border-color: #E03E3E !important;
  color: #FF9A9A !important;
}

/* Нижняя панель и лента уведомлений */
body.theme-astra .bottom-tabbar {
  background: linear-gradient(180deg, #132230 0%, #0C1721 100%);
  border-top: 1px solid rgba(82, 181, 224, 0.35);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08), 0 -4px 16px rgba(0, 15, 30, 0.6);
}
body.theme-astra .notif-tile {
  background: linear-gradient(180deg, #162433 0%, #0F1B27 100%);
  border-color: rgba(82, 181, 224, 0.3);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.15), 0 6px 16px rgba(0, 15, 30, 0.5);
}

/* Таблицы админки лежат на пластине, а не на своём фоне */
body.theme-astra .table > :not(caption) > * > * { background: transparent; }

/* Маркер карты: Stitch на hover заменяет transform целиком и сбивает центровку
   (translate(-50%,-50%) из базового стиля) — возвращаем её */
body.theme-astra .map-marker {
  background: linear-gradient(180deg, #0079C0 0%, #004F6D 100%);
  border-color: #52B5E0;
}
body.theme-astra .map-marker:hover {
  transform: translate(-50%, -50%) scale(1.15) translateY(-3px);
}

/* Stitch обрезает содержимое .store-card (overflow:hidden) — красный бейдж
   непрочитанных в углу карточки заказа (seller-orders) должен выступать наружу */
body.theme-astra .store-card { overflow: visible; }


/* ══════════════════════════════════════════════════════════════════════════
   ТЕМА LIQUID GLASS (Stitch, style-liquid-glass.css) — класс body.theme-liquid-glass
   ══════════════════════════════════════════════════════════════════════════
   Как встроено: все селекторы Stitch обёрнуты в body.theme-liquid-glass,
   переменные --lg-* оставлены в :root. SVG-фильтров в файле Stitch нет —
   размытие сделано через backdrop-filter, в HTML ничего вставлять не нужно.
   ────────────────────────────────────────────────────────────────────────── */
/* ==========================================================================
   TAKE IT GO — THEME: LIQUID GLASS (Apple iOS 26 / VisionOS Refraction)
   Compatible with Vanilla JS + HTML + Bootstrap 5.3
   ========================================================================== */

:root {
  /* --- Typography --- */
  --lg-font-family: -apple-system, BlinkMacSystemFont, "SF Pro Display", "SF Pro Text", "Inter", "Segoe UI", Roboto, system-ui, sans-serif;
  
  /* --- Glass Substrates & Backgrounds --- */
  --lg-bg-base: #070913;
  --lg-glass-bg-primary: linear-gradient(135deg, rgba(255, 255, 255, 0.18) 0%, rgba(255, 255, 255, 0.06) 50%, rgba(255, 255, 255, 0.12) 100%);
  --lg-glass-bg-subtle: linear-gradient(135deg, rgba(255, 255, 255, 0.10) 0%, rgba(255, 255, 255, 0.03) 60%, rgba(255, 255, 255, 0.07) 100%);
  --lg-glass-bg-card: rgba(255, 255, 255, 0.07);
  --lg-glass-bg-card-hover: rgba(255, 255, 255, 0.12);
  --lg-glass-bg-input: rgba(255, 255, 255, 0.06);
  --lg-glass-bg-nav: rgba(15, 18, 30, 0.55);

  /* --- Text & Highlights --- */
  --lg-text-primary: #ffffff;
  --lg-text-secondary: rgba(255, 255, 255, 0.74);
  --lg-text-muted: rgba(255, 255, 255, 0.48);
  --lg-text-shadow: 0 1px 2px rgba(0, 0, 0, 0.35);

  /* --- Accents & Aura --- */
  --lg-accent-cyan: #64d2ff;
  --lg-accent-blue: #0a84ff;
  --lg-accent-purple: #bf5af2;
  --lg-accent-violet: #8c82ff;
  --lg-accent-green: #30d158;
  --lg-accent-red: #ff453a;

  /* --- Physics & Springs --- */
  --lg-spring-bounce: cubic-bezier(0.32, 0.72, 0, 1);
  --lg-spring-smooth: cubic-bezier(0.16, 1, 0.3, 1);

  /* --- Pillar 3: 7-Stop Layered Glass Shadow --- */
  --lg-glass-shadow: 
    0 1px 1px rgba(0, 0, 0, 0.04),
    0 2px 4px rgba(0, 0, 0, 0.05),
    0 4px 8px rgba(0, 0, 0, 0.06),
    0 8px 16px rgba(0, 0, 0, 0.07),
    0 16px 32px rgba(0, 0, 0, 0.08),
    0 32px 64px rgba(0, 0, 0, 0.10),
    inset 0 1px 0 rgba(255, 255, 255, 0.42),
    inset 0 -1px 0 rgba(0, 0, 0, 0.08);

  --lg-glass-shadow-deep:
    0 4px 6px rgba(0, 0, 0, 0.08),
    0 12px 24px rgba(0, 0, 0, 0.14),
    0 24px 48px rgba(0, 0, 0, 0.18),
    0 48px 96px rgba(0, 0, 0, 0.22),
    inset 0 1.5px 0.5px rgba(255, 255, 255, 0.55),
    inset 0 -1px 0 rgba(0, 0, 0, 0.15);
}

/* ==========================================================================
   GLOBAL CANVAS & LIVING DRIFT BACKGROUND
   ========================================================================== */
body.theme-liquid-glass {
  min-height: 100vh;
  margin: 0;
  padding: 0;
  background-color: var(--lg-bg-base);
  color: var(--lg-text-primary);
  font-family: var(--lg-font-family);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}

/* Moving fluid orbs under the glass layer */
body.theme-liquid-glass::before {
  content: '';
  position: fixed;
  inset: -15%;
  width: 130vw;
  height: 130vh;
  z-index: -2;
  background: 
    radial-gradient(circle at 18% 22%, rgba(10, 132, 255, 0.55) 0%, transparent 42%),
    radial-gradient(circle at 82% 76%, rgba(191, 90, 242, 0.48) 0%, transparent 46%),
    radial-gradient(circle at 50% 105%, rgba(100, 210, 255, 0.42) 0%, transparent 52%),
    radial-gradient(circle at 75% 18%, rgba(48, 209, 88, 0.25) 0%, transparent 38%);
  filter: blur(45px);
  animation: lgDrift 24s ease-in-out infinite alternate;
  pointer-events: none;
}

body.theme-liquid-glass::after {
  content: '';
  position: fixed;
  inset: 0;
  z-index: -1;
  background: radial-gradient(circle at center, transparent 30%, rgba(7, 9, 19, 0.65) 100%);
  pointer-events: none;
}

@keyframes lgDrift {
  0% { transform: translate(0, 0) scale(1) rotate(0deg); }
  50% { transform: translate(35px, -25px) scale(1.06) rotate(1.5deg); }
  100% { transform: translate(-25px, 20px) scale(0.98) rotate(-1deg); }
}

/* ==========================================================================
   TYPOGRAPHY
   ========================================================================== */
body.theme-liquid-glass h1,
body.theme-liquid-glass h2,
body.theme-liquid-glass h3,
body.theme-liquid-glass h4,
body.theme-liquid-glass h5,
body.theme-liquid-glass h6,
body.theme-liquid-glass .h1,
body.theme-liquid-glass .h2,
body.theme-liquid-glass .h3,
body.theme-liquid-glass .h4,
body.theme-liquid-glass .h5,
body.theme-liquid-glass .h6 {
  font-family: var(--lg-font-family);
  font-weight: 600;
  letter-spacing: -0.022em;
  color: var(--lg-text-primary);
  text-shadow: var(--lg-text-shadow);
}

body.theme-liquid-glass p,
body.theme-liquid-glass span,
body.theme-liquid-glass label,
body.theme-liquid-glass small {
  letter-spacing: -0.01em;
}

/* ==========================================================================
   PILLAR 1 & 2: SPECULAR GLASS CORE PRIMITIVE
   ========================================================================== */
body.theme-liquid-glass .glass-panel,
body.theme-liquid-glass .card,
body.theme-liquid-glass .modal-content,
body.theme-liquid-glass .dropdown-menu,
body.theme-liquid-glass .list-group-item,
body.theme-liquid-glass .offcanvas,
body.theme-liquid-glass .nav-glass {
  position: relative;
  background: var(--lg-glass-bg-primary) !important;
  backdrop-filter: blur(50px) saturate(200%);
  -webkit-backdrop-filter: blur(50px) saturate(200%);
  border: none !important;
  box-shadow: var(--lg-glass-shadow);
  border-radius: 20px;
  color: var(--lg-text-primary);
  transition: transform 0.28s var(--lg-spring-bounce), box-shadow 0.28s var(--lg-spring-bounce), background 0.28s ease;
}

/* Pillar 2: Specular Edge Highlight via mask-composite */
body.theme-liquid-glass .glass-panel::before,
body.theme-liquid-glass .card::before,
body.theme-liquid-glass .modal-content::before,
body.theme-liquid-glass .dropdown-menu::before,
body.theme-liquid-glass .nav-glass::before,
body.theme-liquid-glass .btn-primary::before,
body.theme-liquid-glass .btn-glass::before,
body.theme-liquid-glass .form-control::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 1.5px;
  background: linear-gradient(
    135deg, 
    rgba(255, 255, 255, 0.88) 0%, 
    rgba(255, 255, 255, 0.15) 24%, 
    transparent 50%, 
    rgba(255, 255, 255, 0.35) 76%, 
    rgba(255, 255, 255, 0.75) 100%
  );
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  pointer-events: none;
  z-index: 2;
}

/* Optional Pillar 4: True Refraction Layer */
body.theme-liquid-glass .glass-refract {
  filter: url(#glass-refract);
}

/* ==========================================================================
   NAVBAR & HEADERS
   ========================================================================== */
body.theme-liquid-glass .navbar,
body.theme-liquid-glass header,
body.theme-liquid-glass .top-bar {
  position: sticky;
  top: 0;
  z-index: 1020;
  background: var(--lg-glass-bg-nav) !important;
  backdrop-filter: blur(60px) saturate(200%) !important;
  -webkit-backdrop-filter: blur(60px) saturate(200%) !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.12) !important;
  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.2);
}

body.theme-liquid-glass .navbar .nav-link,
body.theme-liquid-glass .top-bar .btn-link {
  color: var(--lg-text-secondary);
  font-weight: 500;
  transition: color 0.2s ease, transform 0.2s ease;
}

body.theme-liquid-glass .navbar .nav-link:hover,
body.theme-liquid-glass .navbar .nav-link.active {
  color: #ffffff;
  text-shadow: 0 0 12px rgba(255, 255, 255, 0.6);
}

/* Back navigation button */
body.theme-liquid-glass .btn-back,
body.theme-liquid-glass .nav-back-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--lg-accent-cyan);
  font-weight: 500;
  text-decoration: none;
  border: 1px solid rgba(100, 210, 255, 0.3);
  padding: 6px 14px;
  border-radius: 999px;
  background: rgba(100, 210, 255, 0.08);
  backdrop-filter: blur(16px);
  transition: all 0.2s var(--lg-spring-bounce);
}

body.theme-liquid-glass .btn-back:hover {
  background: rgba(100, 210, 255, 0.18);
  color: #fff;
  border-color: rgba(100, 210, 255, 0.6);
  transform: translateX(-3px);
}

/* ==========================================================================
   BUTTONS & SIRI AURA
   ========================================================================== */

/* --- Primary Button with Siri Aura --- */
body.theme-liquid-glass .btn-primary,
body.theme-liquid-glass .btn-action-primary {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 10px 24px;
  font-size: 0.95rem;
  font-weight: 600;
  border-radius: 22px !important;
  background: rgba(255, 255, 255, 0.16) !important;
  border: 1px solid rgba(255, 255, 255, 0.38) !important;
  backdrop-filter: blur(20px) saturate(180%);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
  color: #ffffff !important;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.4);
  box-shadow: 
    0 4px 14px rgba(0, 0, 0, 0.16),
    inset 0 1px 0 rgba(255, 255, 255, 0.65),
    inset 0 -1px 0 rgba(0, 0, 0, 0.12);
  cursor: pointer;
  overflow: visible;
  transition: 
    transform 0.12s var(--lg-spring-bounce), 
    box-shadow 0.2s var(--lg-spring-bounce), 
    background 0.2s ease;
  z-index: 1;
}

/* Aura Glow container */
body.theme-liquid-glass .btn-primary::after,
body.theme-liquid-glass .btn-action-primary::after {
  content: '';
  position: absolute;
  inset: -12px;
  border-radius: 34px;
  background: radial-gradient(
    ellipse at center, 
    rgba(100, 210, 255, 0.75) 0%, 
    rgba(140, 130, 255, 0.55) 32%, 
    rgba(200, 100, 220, 0.35) 64%, 
    transparent 100%
  );
  filter: blur(10px);
  opacity: 0;
  z-index: -1;
  pointer-events: none;
  transition: opacity 320ms ease-in, transform 320ms ease-in;
}

body.theme-liquid-glass .btn-primary:hover,
body.theme-liquid-glass .btn-action-primary:hover {
  background: rgba(255, 255, 255, 0.24) !important;
  transform: translateY(-1.5px) scale(1.02);
  box-shadow: 
    0 8px 24px rgba(100, 210, 255, 0.35),
    inset 0 1.5px 0 rgba(255, 255, 255, 0.85);
}

body.theme-liquid-glass .btn-primary:hover::after,
body.theme-liquid-glass .btn-action-primary:hover::after {
  opacity: 1;
  transform: scale(1.05);
  animation: auraRotate 6s linear infinite;
  transition: opacity 220ms cubic-bezier(0.4, 0, 0.2, 1);
}

body.theme-liquid-glass .btn-primary:active,
body.theme-liquid-glass .btn-action-primary:active {
  transform: scale(0.97) translateY(0.5px);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
  transition-duration: 80ms;
}

@keyframes auraRotate {
  0% { filter: blur(10px) hue-rotate(0deg); }
  100% { filter: blur(10px) hue-rotate(360deg); }
}

/* --- Regular Secondary / Glass Buttons --- */
body.theme-liquid-glass .btn-secondary,
body.theme-liquid-glass .btn-glass,
body.theme-liquid-glass .btn-outline-light {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 8px 18px;
  font-size: 0.9rem;
  font-weight: 500;
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.08) !important;
  border: 1px solid rgba(255, 255, 255, 0.16) !important;
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  color: var(--lg-text-primary) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.25);
  transition: all 0.2s var(--lg-spring-bounce);
}

body.theme-liquid-glass .btn-secondary:hover,
body.theme-liquid-glass .btn-glass:hover,
body.theme-liquid-glass .btn-outline-light:hover {
  background: rgba(255, 255, 255, 0.14) !important;
  border-color: rgba(255, 255, 255, 0.3) !important;
  transform: translateY(-1px);
}

body.theme-liquid-glass .btn-secondary:active,
body.theme-liquid-glass .btn-glass:active {
  transform: scale(0.97);
  background: rgba(255, 255, 255, 0.05) !important;
}

/* Status Action Buttons (In Orders/Seller Chat) */
body.theme-liquid-glass .btn-status-pending {
  background: rgba(255, 179, 64, 0.15) !important;
  border: 1px solid rgba(255, 179, 64, 0.35) !important;
  color: #ffb340 !important;
}

body.theme-liquid-glass .btn-status-active {
  background: rgba(48, 209, 88, 0.15) !important;
  border: 1px solid rgba(48, 209, 88, 0.35) !important;
  color: #30d158 !important;
}

body.theme-liquid-glass .btn-status-danger {
  background: rgba(255, 69, 58, 0.15) !important;
  border: 1px solid rgba(255, 69, 58, 0.35) !important;
  color: #ff453a !important;
}

/* ==========================================================================
   INPUTS & FORM CONTROLS
   ========================================================================== */
body.theme-liquid-glass .form-control,
body.theme-liquid-glass .form-select,
body.theme-liquid-glass input[type="text"],
body.theme-liquid-glass input[type="email"],
body.theme-liquid-glass input[type="password"],
body.theme-liquid-glass input[type="search"],
body.theme-liquid-glass textarea {
  position: relative;
  background: var(--lg-glass-bg-input) !important;
  backdrop-filter: blur(25px) saturate(180%);
  -webkit-backdrop-filter: blur(25px) saturate(180%);
  border: 1px solid rgba(255, 255, 255, 0.14) !important;
  border-radius: 16px !important;
  padding: 12px 18px !important;
  color: #ffffff !important;
  font-size: 0.95rem;
  box-shadow: 
    inset 0 1px 3px rgba(0, 0, 0, 0.2),
    inset 0 1px 0 rgba(255, 255, 255, 0.15);
  transition: all 0.22s var(--lg-spring-smooth);
}

body.theme-liquid-glass .form-control::placeholder,
body.theme-liquid-glass textarea::placeholder {
  color: var(--lg-text-muted);
}

body.theme-liquid-glass .form-control:focus,
body.theme-liquid-glass .form-select:focus,
body.theme-liquid-glass textarea:focus {
  background: rgba(255, 255, 255, 0.11) !important;
  border-color: rgba(100, 210, 255, 0.6) !important;
  outline: none !important;
  box-shadow: 
    0 0 0 3px rgba(100, 210, 255, 0.25),
    inset 0 1px 1px rgba(255, 255, 255, 0.4),
    0 4px 16px rgba(100, 210, 255, 0.2) !important;
  transform: translateY(-0.5px);
}

/* Search bar styling with glass pill shape */
body.theme-liquid-glass .search-pill {
  border-radius: 999px !important;
  padding-left: 20px !important;
  padding-right: 20px !important;
}

/* ==========================================================================
   CARDS & STORE LISTINGS (Buyer & Seller)
   ========================================================================== */
body.theme-liquid-glass .store-card,
body.theme-liquid-glass .item-card,
body.theme-liquid-glass .card-glass {
  background: var(--lg-glass-bg-card) !important;
  backdrop-filter: blur(40px) saturate(190%);
  -webkit-backdrop-filter: blur(40px) saturate(190%);
  border-radius: 20px;
  padding: 18px;
  margin-bottom: 16px;
  position: relative;
  overflow: hidden;
  box-shadow: var(--lg-glass-shadow);
  transform: translateY(0);
  transition: transform 0.24s var(--lg-spring-bounce), background 0.24s ease, box-shadow 0.24s ease;
  animation: lgCardMount 400ms var(--lg-spring-bounce) backwards;
}

body.theme-liquid-glass .store-card:hover,
body.theme-liquid-glass .item-card:hover {
  background: var(--lg-glass-bg-card-hover) !important;
  transform: translateY(-3px) scale(1.008);
  box-shadow: 
    0 8px 32px rgba(0, 0, 0, 0.2),
    0 2px 8px rgba(100, 210, 255, 0.15),
    inset 0 1.5px 0 rgba(255, 255, 255, 0.6);
}

/* Rating badge */
body.theme-liquid-glass .badge-glass-rating {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px 10px;
  border-radius: 12px;
  background: rgba(255, 214, 10, 0.15);
  border: 1px solid rgba(255, 214, 10, 0.35);
  color: #ffd60a;
  font-weight: 600;
  font-size: 0.85rem;
}

/* Price callout */
body.theme-liquid-glass .price-tag {
  font-size: 1.15rem;
  font-weight: 700;
  color: var(--lg-accent-cyan);
  text-shadow: 0 1px 8px rgba(100, 210, 255, 0.4);
}

/* ==========================================================================
   BOOKING TIME SLOTS (Pills & Chips)
   ========================================================================== */
body.theme-liquid-glass .time-slot-pill,
body.theme-liquid-glass .btn-time-slot {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 8px 14px;
  border-radius: 12px;
  font-size: 0.85rem;
  font-weight: 500;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.14);
  color: var(--lg-text-secondary);
  backdrop-filter: blur(12px);
  cursor: pointer;
  transition: all 0.16s var(--lg-spring-bounce);
}

body.theme-liquid-glass .time-slot-pill:hover {
  background: rgba(255, 255, 255, 0.14);
  border-color: rgba(255, 255, 255, 0.3);
  color: #fff;
  transform: scale(1.04);
}

body.theme-liquid-glass .time-slot-pill.active,
body.theme-liquid-glass .time-slot-pill:active {
  background: linear-gradient(135deg, rgba(100, 210, 255, 0.35), rgba(191, 90, 242, 0.35)) !important;
  border-color: rgba(100, 210, 255, 0.8) !important;
  color: #ffffff !important;
  box-shadow: 0 0 16px rgba(100, 210, 255, 0.45), inset 0 1px 0 rgba(255, 255, 255, 0.7);
  transform: scale(1.02);
}

/* ==========================================================================
   CHAT SYSTEM (Buyer & Seller Bubbles)
   ========================================================================== */
body.theme-liquid-glass .chat-window {
  background: rgba(255, 255, 255, 0.04);
  backdrop-filter: blur(45px);
  border-radius: 24px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  box-shadow: var(--lg-glass-shadow);
  padding: 20px;
}

body.theme-liquid-glass .chat-bubble {
  max-width: 72%;
  padding: 12px 18px;
  border-radius: 20px;
  position: relative;
  font-size: 0.95rem;
  line-height: 1.45;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12);
  margin-bottom: 12px;
}

/* Incoming bubble (Seller / Operator) */
body.theme-liquid-glass .chat-bubble-incoming {
  background: rgba(255, 255, 255, 0.12) !important;
  backdrop-filter: blur(30px);
  border: 1px solid rgba(255, 255, 255, 0.22);
  border-bottom-left-radius: 4px;
  color: #ffffff;
}

/* Outgoing bubble (Buyer / Self) */
body.theme-liquid-glass .chat-bubble-outgoing {
  background: linear-gradient(135deg, rgba(10, 132, 255, 0.42), rgba(191, 90, 242, 0.36)) !important;
  backdrop-filter: blur(30px);
  border: 1px solid rgba(255, 255, 255, 0.35);
  border-bottom-right-radius: 4px;
  color: #ffffff;
  margin-left: auto;
  box-shadow: 0 4px 20px rgba(10, 132, 255, 0.25);
}

body.theme-liquid-glass .chat-bubble-time {
  font-size: 0.72rem;
  color: rgba(255, 255, 255, 0.55);
  margin-top: 4px;
  text-align: right;
}

body.theme-liquid-glass .chat-image-preview {
  border-radius: 16px;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.3);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.3);
}

/* ==========================================================================
   MODALS, POPUPS & SHEETS
   ========================================================================== */
body.theme-liquid-glass .modal-backdrop.show {
  opacity: 0.72;
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  background-color: #030408;
}

body.theme-liquid-glass .modal-content {
  border-radius: 28px !important;
  box-shadow: var(--lg-glass-shadow-deep) !important;
  animation: lgModalMount 350ms var(--lg-spring-bounce) forwards;
}

body.theme-liquid-glass .modal-header {
  border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
}

body.theme-liquid-glass .modal-footer {
  border-top: 1px solid rgba(255, 255, 255, 0.08) !important;
}

/* Close button on glass */
body.theme-liquid-glass .btn-close-glass {
  background: rgba(255, 255, 255, 0.12);
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 50%;
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  transition: all 0.2s ease;
}

body.theme-liquid-glass .btn-close-glass:hover {
  background: rgba(255, 255, 255, 0.24);
  transform: rotate(90deg);
}

/* ==========================================================================
   KEYFRAME ANIMATIONS (Apple Spring Physics)
   ========================================================================== */
@keyframes lgCardMount {
  0% {
    opacity: 0;
    transform: translateY(20px) scale(0.96);
  }
  100% {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

@keyframes lgModalMount {
  0% {
    opacity: 0;
    transform: scale(0.94);
    filter: blur(4px);
  }
  100% {
    opacity: 1;
    transform: scale(1);
    filter: blur(0);
  }
}

/* Stagger list animations */
body.theme-liquid-glass .stagger-1 { animation-delay: 40ms; }
body.theme-liquid-glass .stagger-2 { animation-delay: 80ms; }
body.theme-liquid-glass .stagger-3 { animation-delay: 120ms; }
body.theme-liquid-glass .stagger-4 { animation-delay: 160ms; }
body.theme-liquid-glass .stagger-5 { animation-delay: 200ms; }

/* Reduced motion support */
@media (prefers-reduced-motion: reduce) {
  body.theme-liquid-glass::before,
body.theme-liquid-glass .store-card,
body.theme-liquid-glass .item-card,
body.theme-liquid-glass .modal-content,
body.theme-liquid-glass .btn-primary:hover::after {
    animation: none !important;
    transition: none !important;
  }
}


/* ── Мост Liquid Glass → классы проекта ──────────────────────────────────────
   Stitch стилизует .glass-panel/.card/.form-control напрямую, но кнопки,
   навбар, нижняя панель и карточки проекта у него называются иначе
   (btn-action-primary, nav-glass, top-bar…). Здесь тот же материал переносится
   на реальные классы TAKE it GO. Блок стоит ПОСЛЕ обёрнутых стилей Stitch. */

body.theme-liquid-glass {
  --bg: #070913;
  /* --surface — фон модалок и меню: почти непрозрачный, чтобы текст читался поверх страницы */
  --surface: #161A2C;
  --surface2: #1D2236;
  --accent: #64D2FF;
  --text: #FFFFFF;
  --muted: rgba(255, 255, 255, 0.62);
  --border: rgba(255, 255, 255, 0.14);
  --danger: #FF6B61;
  --success: #5BE584;
  --warning: #FFD60A;
}

/* Навбар — плавающее стекло (в Stitch это .nav-glass) */
body.theme-liquid-glass .navbar {
  background: rgba(15, 18, 30, 0.55) !important;
  -webkit-backdrop-filter: blur(30px) saturate(180%);
  backdrop-filter: blur(30px) saturate(180%);
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  box-shadow: inset 0 -1px 0 rgba(255, 255, 255, 0.04), 0 8px 24px rgba(0, 0, 0, 0.25);
}

/* Основная кнопка — пилюля с сиянием (в Stitch это .btn-action-primary) */
/* FIX: БАГ 1.2 — основная кнопка тоже стеклянная: цветной тинт с прозрачностью ≥ 62%
   (альфа ≤ 0.38), при наведении центр НЕ заливается — светится только край изнутри. */
body.theme-liquid-glass .btn-accent {
  background: linear-gradient(135deg, rgba(10, 132, 255, 0.36) 0%, rgba(140, 130, 255, 0.30) 55%, rgba(191, 90, 242, 0.34) 100%) !important;
  -webkit-backdrop-filter: blur(20px) saturate(180%);
  backdrop-filter: blur(20px) saturate(180%);
  border: 1px solid rgba(255, 255, 255, 0.30) !important;
  border-radius: 999px;
  color: #FFFFFF !important;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.35);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.45),
    0 6px 20px rgba(10, 132, 255, 0.22);
  transition: transform 240ms cubic-bezier(0.32, 0.72, 0, 1), box-shadow 240ms ease, border-color 240ms ease;
}
body.theme-liquid-glass .btn-accent:hover {
  opacity: 1;
  color: #FFFFFF !important;
  transform: translateY(-1px);
  border-color: rgba(255, 255, 255, 0.55) !important;
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.35),
    inset 0 0 14px 2px rgba(100, 210, 255, 0.50),
    0 8px 24px rgba(140, 130, 255, 0.28);
}
body.theme-liquid-glass .btn-accent:active { transform: scale(0.98); }

/* Контурная кнопка — стекло (в Stitch это .btn-outline-light) */
body.theme-liquid-glass .btn-outline-accent {
  background: rgba(255, 255, 255, 0.08);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
  backdrop-filter: blur(20px) saturate(180%);
  border: 1px solid rgba(255, 255, 255, 0.22);
  border-radius: 999px;
  color: #FFFFFF;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.25);
}
/* FIX: БАГ 1.2 — фон при наведении не меняется (центр остаётся стеклом), светится край изнутри */
body.theme-liquid-glass .btn-outline-accent:hover {
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(100, 210, 255, 0.60);
  color: #FFFFFF;
  box-shadow:
    inset 0 0 0 1px rgba(100, 210, 255, 0.30),
    inset 0 0 12px 1px rgba(100, 210, 255, 0.40);
}

/* Статусы — полупрозрачные цветные капсулы (в Stitch это .btn-status-*) */
body.theme-liquid-glass .badge-pending  { background: rgba(255, 214, 10, 0.16);  color: #FFD60A; border: 1px solid rgba(255, 214, 10, 0.35); }
body.theme-liquid-glass .badge-approved { background: rgba(48, 209, 88, 0.16);   color: #5BE584; border: 1px solid rgba(48, 209, 88, 0.35); }
body.theme-liquid-glass .badge-rejected { background: rgba(255, 69, 58, 0.16);   color: #FF6B61; border: 1px solid rgba(255, 69, 58, 0.35); }

/* Нижняя панель и лента уведомлений — стекло */
body.theme-liquid-glass .bottom-tabbar {
  background: rgba(15, 18, 30, 0.6);
  -webkit-backdrop-filter: blur(30px) saturate(180%);
  backdrop-filter: blur(30px) saturate(180%);
  border-top: 1px solid rgba(255, 255, 255, 0.1);
}
body.theme-liquid-glass .notif-tile {
  background: rgba(22, 26, 44, 0.78);
  border-color: rgba(255, 255, 255, 0.16);
  -webkit-backdrop-filter: blur(24px) saturate(180%);
  backdrop-filter: blur(24px) saturate(180%);
}

/* Таблицы админки — прозрачные ячейки поверх стеклянной карточки */
body.theme-liquid-glass .table > :not(caption) > * > * { background: transparent; color: var(--text); }

/* Маркер карты */
body.theme-liquid-glass .map-marker {
  background: linear-gradient(135deg, #0A84FF, #BF5AF2);
  border-color: rgba(255, 255, 255, 0.85);
}

/* Stitch обрезает содержимое .store-card (overflow:hidden) — красный бейдж
   непрочитанных в углу карточки заказа (seller-orders) должен выступать наружу.
   Отступы Stitch (padding/margin) перебиваются утилитами Bootstrap p-3/mb-2 на самих карточках. */
body.theme-liquid-glass .store-card { overflow: visible; }


/* ══════════════════════════════════════════════════════════════════════════
   ИСПРАВЛЕНИЯ ТЕМ И ИНТЕРФЕЙСА (блоки 1–9)
   ══════════════════════════════════════════════════════════════════════════ */

/* FIX: БАГ 1.3 — выпадающий список <select> в Liquid Glass: Stitch красит текст в белый
   с !important, а нативный список опций рисуется на белом фоне → белое на белом.
   Опциям задаём тёмный фон и белый текст (то же для Astra — там фон поля тоже тёмный). */
body.theme-liquid-glass select option,
body.theme-liquid-glass .form-select option,
body.theme-astra select option,
body.theme-astra .form-select option {
  background: #1A1A2E;
  color: #FFFFFF;
}

/* FIX: БАГ 2.1 — Liquid Glass: орбы под стеклом плавно плывут по экрану (26 с, туда-обратно).
   У Stitch сдвиг был ±35px — на большом экране его почти не видно. Слой body::before
   больше экрана на 15% с каждой стороны, поэтому при сдвиге края не открываются. */
body.theme-liquid-glass::before {
  animation: lgOrbsDrift 26s ease-in-out infinite alternate;
}
@keyframes lgOrbsDrift {
  0%   { transform: translate(0, 0) scale(1) rotate(0deg); }
  33%  { transform: translate(6vw, -5vh) scale(1.08) rotate(4deg); }
  66%  { transform: translate(-5vw, 4vh) scale(0.96) rotate(-3deg); }
  100% { transform: translate(4vw, 6vh) scale(1.04) rotate(2deg); }
}

/* FIX: БАГ 2.1 — Astra: медленно смещаем синие сияния фона (цвета те же, двигается только
   их положение). Слои полос сетки не трогаем — при сдвиге на них появились бы стыки. */
body.theme-astra::before {
  animation: astraGlowDrift 28s ease-in-out infinite alternate;
}
@keyframes astraGlowDrift {
  0%   { background-position: 0 0, 0 0, 0 0, 0 0; }
  50%  { background-position: 4vw 3vh, -3vw -4vh, 0 0, 0 0; }
  100% { background-position: -5vw 5vh, 4vw -5vh, 0 0, 0 0; }
}
/* При «уменьшенном движении» в системе Stitch уже отключает анимацию body::before
   (правила с !important выше) — новые анимации тоже выключатся. */

/* FIX: БАГ 3.1 — плавное появление страницы при переходах. Сделано CSS-анимацией, а не
   "opacity:0 + скрипт": если на странице упадёт любой скрипт, страница всё равно проявится.
   fill-mode backwards: после анимации стили body возвращаются к обычным. */
@keyframes pageFadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}
body {
  animation: pageFadeIn 220ms ease-out backwards;
}

/* FIX: БАГ 4.4 — стеклянная рамка Liquid Glass нарисована через ::before (position:absolute).
   У плашек с собственной прокруткой (модалки отзывов/товара и т.п. — overflow-y задан в разметке)
   этот слой становится частью прокручиваемого содержимого и уезжает вместе с текстом.
   Для таких плашек рамку рисуем box-shadow — он принадлежит самой рамке и не прокручивается. */
body.theme-liquid-glass .glass-panel[style*="overflow-y"]::before,
body.theme-liquid-glass .card[style*="overflow-y"]::before {
  display: none;
}
body.theme-liquid-glass .glass-panel[style*="overflow-y"],
body.theme-liquid-glass .card[style*="overflow-y"] {
  box-shadow:
    var(--lg-glass-shadow),
    inset 0 0 0 1.5px rgba(255, 255, 255, 0.28);
}

/* ── Плавные переходы между страницами (View Transitions, Chrome/Edge 126+; в остальных — обычный переход).
   Должно быть в общем style.css: оба документа должны включить переход до первой отрисовки. */
@view-transition { navigation: auto; }
::view-transition-old(root), ::view-transition-new(root) { animation-duration: 260ms; }
/* Живой фон при переходе: новая страница до загрузки модуля показывает снимок того же размытого фона
   (закреплённый слой #ln-warm-bg, см. lnWarmBackdrop в buyer/seller-common.js и theme-switcher.js) — страница
   прозрачная с первого кадра. */
html.ln-warm-start, html.ln-warm-start body { background: transparent !important; background-color: transparent !important; }
html.ln-warm-start body::before, html.ln-warm-start body::after { display: none !important; }

/* Переход в «Живой природе» — РАСФОКУС: старая страница целиком уходит в размытие с лёгким
   затемнением, новая появляется уже размытой (подмена не видна), затем вуаль #ln-veil на новой странице
   плавно убирается — когда живой фон уже нарисован (см. lnWarmBackdrop и living-nature.js).
   Псевдоэлементы перехода живут в НОВОЙ странице — условие html.ln-warm-start (пришли с «Живой природы»).
   Именованных слоёв нет: раньше они давали замороженные капли на чёрном фоне. */
html.ln-warm-start::view-transition-old(root) { animation: ln-defocus-out 220ms cubic-bezier(0.4, 0, 1, 1) both; }
html.ln-warm-start::view-transition-new(root) { animation: ln-defocus-in 120ms linear 200ms both; }
@keyframes ln-defocus-out { to { filter: blur(24px) brightness(0.72); } }
@keyframes ln-defocus-in { from { opacity: 0; } }
/* Вуаль на новой странице: размывает и притемняет всё под собой; убирается плавно (фокус возвращается) */
#ln-veil {
  position: fixed; inset: 0; z-index: 2147483000; pointer-events: none;
  backdrop-filter: blur(24px) brightness(0.72); -webkit-backdrop-filter: blur(24px) brightness(0.72);
  transition: opacity 400ms cubic-bezier(0, 0, 0.2, 1);
}
#ln-veil.ln-veil-off { opacity: 0; }
@media (prefers-reduced-motion: reduce) {
  html.ln-warm-start::view-transition-old(root), html.ln-warm-start::view-transition-new(root) { animation-duration: 1ms; animation-delay: 0s; }
  #ln-veil { transition-duration: 1ms; }
}

/* ── Кнопка «×» очистки полей поиска (js/buyer-common.js → attachSearchClearButtons): стеклянный кружок,
   появляется плавно, когда в поле есть текст. Работает во всех темах. */
.search-clear-wrap { position: relative; }
.search-clear-wrap > input { padding-right: 42px; }
.search-clear-btn {
  position: absolute; right: 8px; top: 50%; transform: translateY(-50%) scale(0.85);
  width: 26px; height: 26px; border-radius: 50%; padding: 0;
  display: flex; align-items: center; justify-content: center;
  font-size: 12px; line-height: 1; color: inherit; cursor: pointer;
  background: rgba(255, 255, 255, 0.14); border: 1px solid rgba(255, 255, 255, 0.28);
  backdrop-filter: blur(10px) saturate(160%); -webkit-backdrop-filter: blur(10px) saturate(160%);
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.18), inset 0 1px 0 rgba(255, 255, 255, 0.25);
  opacity: 0; pointer-events: none; transition: opacity 0.18s ease, transform 0.18s ease, background 0.15s ease;
}
.search-clear-wrap.has-value .search-clear-btn { opacity: 1; pointer-events: auto; transform: translateY(-50%) scale(1); }
.search-clear-btn:hover { background: rgba(255, 255, 255, 0.24); }
.search-clear-btn:active { transform: translateY(-50%) scale(0.92); }
body.theme-light .search-clear-btn { background: rgba(0, 0, 0, 0.06); border-color: rgba(0, 0, 0, 0.14); }

/* ── Единое окно чата для всех ролей — как у администратора (admin-support: карточка с глубоким сине-фиолетовым
   фоном под стеклом). Покупатель (buyer-chat) и продавец (seller-support) — та же карточка ПО ЦЕНТРУ на всю
   высоту экрана, строка ввода — той же ширины по центру; чат заказа у продавца (seller-order) — не маленькое
   окошко, а не меньше половины экрана. Разметка и скрипты чатов не менялись. Светлая тема — как была. */
body:not(.theme-light) #dialogMessages,
body:not(.theme-light) #messagesContainer,
body:not(.theme-light) #chatMessages {
  background:
    radial-gradient(120% 90% at 30% 70%, rgba(40, 110, 220, 0.38) 0%, rgba(40, 110, 220, 0) 60%),
    linear-gradient(160deg, rgba(22, 38, 84, 0.72) 0%, rgba(12, 18, 42, 0.82) 100%) !important;
  backdrop-filter: blur(30px) saturate(160%);
  -webkit-backdrop-filter: blur(30px) saturate(160%);
}
/* Покупатель и продавец (поддержка): карточка чата по центру */
body:not(.theme-light) #messagesContainer {
  max-width: 900px;
  margin: 12px auto 0;
  min-height: calc(100vh - 210px) !important;
  padding: 16px 18px 96px !important;
  border-radius: 20px;
  border: 1px solid rgba(255, 255, 255, 0.16);
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.28);
}
body:not(.theme-light):has(#messagesContainer) .bottom-tabbar {
  left: 50%; right: auto; bottom: 12px;
  width: min(900px, calc(100% - 24px));
  transform: translateX(-50%);
  border-radius: 16px;
  border: 1px solid rgba(255, 255, 255, 0.16);
}
/* Чат заказа у продавца — не маленькое окошко */
body:not(.theme-light) #chatMessages.chat-messages { min-height: 50vh; border-radius: 20px; }

/* ── Гостевой режим: окно входа поверх размытого экрана (js/buyer-common.js → openLoginModal).
   Внутри — login.html во фрейме (html.ln-embed): прозрачный фон, без своего переключателя тем и живого фона. */
.guest-login-overlay {
  position: fixed; inset: 0; z-index: 2000;
  display: flex; align-items: center; justify-content: center;
  background: rgba(5, 10, 20, 0.35);
  backdrop-filter: blur(14px) saturate(120%); -webkit-backdrop-filter: blur(14px) saturate(120%);
  opacity: 0; transition: opacity 0.25s ease;
}
.guest-login-overlay.open { opacity: 1; }
.guest-login-box {
  /* С запасом вокруг карточки формы: её тень рисуется внутри фрейма и раньше обрезалась его краями */
  position: relative; width: min(540px, calc(100% - 8px)); height: min(760px, calc(100% - 16px));
  padding: 0 !important; overflow: visible;
  transform: scale(0.96); transition: transform 0.25s ease;
}
.guest-login-overlay.open .guest-login-box { transform: scale(1); }
/* Фрейм проявляется только после загрузки и полного появления подложки (иначе форма на миг светлее, потом «темнеет») */
.guest-login-frame { display: block; width: 100%; height: 100%; border: 0; background: transparent; opacity: 0; transition: opacity 0.22s ease; }
.guest-login-frame.ready { opacity: 1; }
.guest-login-box .guest-login-close { opacity: 1; pointer-events: auto; top: 22px; right: 14px; transform: none; z-index: 2; }
.login-reason { font-size: 13px; font-weight: 500; opacity: 0.92; }   /* подсказка под «Вход в систему» (в окне входа) */
/* Окно «Настройки погоды» (компактный переключатель тем → theme-switcher.js openNatureSettingsModal) */
.ln-settings-modal {
  position: relative; width: min(460px, calc(100% - 24px)); max-height: calc(100% - 40px); overflow: auto;
  transform: scale(0.96); transition: transform 0.25s ease;
}
.guest-login-overlay.open .ln-settings-modal { transform: scale(1); }
.ln-settings-modal .guest-login-close { opacity: 1; pointer-events: auto; top: 12px; right: 12px; transform: none; z-index: 2; }   /* на строке заголовка */
.ln-settings-modal .ln-set-title { padding-right: 36px; }
.ln-settings-modal .ln-settings { margin-top: 0; background: rgba(18, 22, 34, 0.55); }
html.ln-embed, html.ln-embed body { background: transparent !important; overflow: hidden !important; }   /* во фрейме — без полосы прокрутки */
html.ln-embed .login-card { position: relative; }
.login-embed-close { position: absolute; top: 12px; right: 12px; opacity: 1 !important; pointer-events: auto !important; transform: none !important; z-index: 3; }   /* крестик в углу карточки формы */
html.ln-embed body::before, html.ln-embed body::after { display: none !important; }
/* Скелетоны — заготовки карточек, пока данные грузятся (buyer.js → showStoreSkeletons): мягкое мерцание вместо пустого места */
.skeleton-card { display: flex; gap: 14px; align-items: center; padding: 16px; min-height: 96px; margin-bottom: 12px; }
.skeleton {
  background: linear-gradient(90deg, rgba(255, 255, 255, 0.07) 0%, rgba(255, 255, 255, 0.18) 50%, rgba(255, 255, 255, 0.07) 100%);
  background-size: 200% 100%; animation: skeleton-shimmer 1.3s ease-in-out infinite; border-radius: 8px;
}
body.theme-light .skeleton { background-image: linear-gradient(90deg, rgba(0, 0, 0, 0.05) 0%, rgba(0, 0, 0, 0.11) 50%, rgba(0, 0, 0, 0.05) 100%); }
.skeleton-avatar { width: 44px; height: 44px; border-radius: 50%; flex: none; }
.skeleton-lines { flex: 1; display: flex; flex-direction: column; gap: 8px; }
.skeleton-line { height: 12px; }
@keyframes skeleton-shimmer { from { background-position: 200% 0; } to { background-position: -200% 0; } }
@media (prefers-reduced-motion: reduce) { .skeleton { animation: none; } }
/* ── Выбор даты и времени (js/date-time-picker.js): месячный календарь + сетка времени (24 ч).
   Только переменные темы (--accent, --surface, --border) — одинаково органично во всех темах. ── */
.dtp-wrap { display: grid; grid-template-columns: minmax(250px, 1.2fr) minmax(180px, 1fr); gap: 14px; }
@media (max-width: 576px) { .dtp-wrap { grid-template-columns: 1fr; } }
.dtp-panel { border: 1px solid var(--border); border-radius: 16px; padding: 12px; background: color-mix(in srgb, var(--surface) 70%, transparent); }
.dtp-label { font-size: 0.75rem; opacity: 0.7; margin-bottom: 6px; font-weight: 600; }
.dtp-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 8px; }
.dtp-month { font-weight: 700; font-size: 1.05rem; }
.dtp-nav { display: inline-flex; gap: 6px; }
.dtp-arrow { width: 32px; height: 32px; border-radius: 50%; border: 1px solid var(--border); background: transparent; color: inherit; font-size: 1.15rem; line-height: 1; }
.dtp-arrow:hover:not(:disabled) { border-color: var(--accent); color: var(--accent); }
.dtp-arrow:disabled { opacity: 0.3; }
.dtp-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; text-align: center; }
.dtp-dow { font-size: 0.72rem; opacity: 0.6; padding: 2px 0 4px; font-weight: 600; }
.dtp-day { aspect-ratio: 1; min-height: 32px; border: 0; border-radius: 50%; background: transparent; color: inherit; font-weight: 600; font-size: 0.9rem; transition: background 0.15s, transform 0.15s; }
.dtp-day:hover:not(:disabled) { background: color-mix(in srgb, var(--accent) 18%, transparent); }
.dtp-day.is-today { box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--accent) 70%, transparent); color: var(--accent); }
.dtp-day.is-selected { background: var(--accent); color: #fff; box-shadow: 0 4px 14px color-mix(in srgb, var(--accent) 45%, transparent); transform: scale(1.05); }
.dtp-day.is-off { opacity: 0.28; font-weight: 400; cursor: default; }
.dtp-empty { visibility: hidden; }
.dtp-times { display: grid; grid-template-columns: repeat(auto-fill, minmax(66px, 1fr)); gap: 6px; max-height: 272px; overflow: auto; padding-right: 2px; }
.dtp-time { border: 1px solid var(--border); border-radius: 10px; background: transparent; color: inherit; padding: 7px 0; font-weight: 600; font-variant-numeric: tabular-nums; transition: border-color 0.15s, background 0.15s; }
/* Наведение — только там, где есть мышь: на телефоне «залипший» hover после касания красил текст выбранного
   времени в цвет фона (время пропадало). Выбранное время — белым всегда, и под курсором тоже. */
@media (hover: hover) { .dtp-time:hover:not(:disabled) { border-color: var(--accent); color: var(--accent); } }
.dtp-time.is-selected, .dtp-time.is-selected:hover { background: var(--accent); border-color: var(--accent); color: #fff; }
.dtp-time.is-busy { opacity: 0.3; text-decoration: line-through; }
.dtp-empty-msg { font-size: 0.85rem; opacity: 0.75; padding: 8px 0; }
.dtp-seg { display: inline-flex; border: 1px solid var(--border); border-radius: 999px; padding: 3px; gap: 3px; flex-wrap: wrap; }
.dtp-seg button { border: 0; border-radius: 999px; padding: 6px 14px; background: transparent; color: inherit; font-weight: 600; font-size: 0.88rem; }
.dtp-seg button.is-active { background: var(--accent); color: #fff; }
.dtp-summary { font-size: 0.88rem; margin-top: 10px; }
/* Чипы (мастера в окне записи) */
.slot-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.slot-chip { border: 1px solid var(--border); border-radius: 999px; padding: 6px 12px; background: transparent; color: inherit; font-weight: 600; font-size: 0.88rem; }
.slot-chip:hover:not(:disabled) { border-color: var(--accent); }
.slot-chip.active { background: var(--accent); border-color: var(--accent); color: #fff; }
.slot-skeleton { height: 34px; border-radius: 10px; }
/* Окно записи на услугу поверх меню (js/booking-modal.js) */
.booking-overlay { position: fixed; inset: 0; z-index: 1900; display: flex; align-items: center; justify-content: center; padding: 12px;
  background: rgba(5, 10, 20, 0.35); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); opacity: 0; transition: opacity 0.2s ease; }
.booking-overlay.open { opacity: 1; }
.booking-box { width: min(720px, 100%); max-height: calc(100% - 16px); overflow: auto; padding: 16px !important; border-radius: 20px; background: var(--surface); }
.booking-footer { border-top: 1px solid var(--border); }
/* Плитки ленты уведомлений кликабельны — ведут в заказ или чат (notifications-common.js); без адреса — как раньше */
.notif-tile[data-url]:not([data-url=""]) { cursor: pointer; }
.notif-tile-open { font-size: 0.72rem; font-weight: 600; opacity: 0.75; margin-top: 4px; text-align: right; }
.notif-tile[data-url=""] .notif-tile-open { display: none; }
.notif-tile[data-url]:not([data-url=""]):hover .notif-tile-open { opacity: 1; }
/* Предложение включить системные уведомления (notifications-common.js → offerOsNotifications): стеклянная плашка
   справа снизу, плавно выезжает. position — с !important: у .glass-panel в стеклянных темах своё position: relative. */
.notif-os-prompt {
  position: fixed !important; right: 16px; bottom: 16px; z-index: 1700; max-width: min(380px, calc(100% - 32px));
  padding: 14px 16px !important; border-radius: 18px; display: flex; flex-direction: column; gap: 10px;
  opacity: 0; transform: translateY(12px); transition: opacity 0.25s ease, transform 0.25s ease;
}
.notif-os-prompt.open { opacity: 1; transform: none; }
.notif-os-prompt-text { font-size: 14px; line-height: 1.35; }
.notif-os-prompt-actions { display: flex; justify-content: flex-end; gap: 8px; }
@media (max-width: 576px) { .notif-os-prompt { left: 12px; right: 12px; bottom: 12px; max-width: none; } }
/* ── Всплывающие меню в стиле темы: списки (js/select-popover.js) и «Чаты» (buyer-common.js). Свой вид для
   тёмных тем, светлой и стеклянных — раньше меню чатов было .glass-panel и в других темах выглядело как «Живая природа». ── */
.tg-popover {
  position: fixed; z-index: 1950; min-width: 160px; max-height: min(60vh, 420px); overflow: auto; padding: 6px; border-radius: 14px;
  background: var(--surface); border: 1px solid var(--border); box-shadow: 0 14px 36px rgba(0, 0, 0, 0.35);
  display: flex; flex-direction: column; gap: 2px; animation: chats-menu-in 0.16s ease;
}
body.theme-light .tg-popover { background: #fff; border-color: rgba(0, 0, 0, 0.08); box-shadow: 0 14px 36px rgba(0, 0, 0, 0.14); }
body.theme-liquid-glass .tg-popover {
  background: rgba(22, 26, 44, 0.74); border-color: rgba(255, 255, 255, 0.18);
  backdrop-filter: blur(22px) saturate(160%); -webkit-backdrop-filter: blur(22px) saturate(160%);
}
.tg-popover-item { display: block; width: 100%; text-align: left; border: 0; background: transparent; color: inherit; padding: 9px 12px; border-radius: 10px; font-size: 14px; white-space: nowrap; }
.tg-popover-item:hover:not(:disabled) { background: color-mix(in srgb, var(--accent) 16%, transparent); }
.tg-popover-item.is-active { background: var(--accent); color: #fff; }
.tg-popover-item:disabled { opacity: 0.4; }
/* Кнопка вместо системного списка. Она несёт классы исходного списка: с .form-select — выглядит как поле
   формы темы (со своей стрелкой), без него — свой аккуратный вид ниже. Исходный список скрыт классом — код
   страницы (style.display = '') его уже не вернёт. */
.tg-native-hidden { display: none !important; }
.tg-select { cursor: pointer; text-align: left; }
.tg-select:not(.form-select) {
  display: inline-flex; align-items: center; justify-content: space-between; gap: 10px; min-width: 110px; max-width: 100%;
  padding: 6px 12px; border-radius: 10px; border: 1px solid var(--border); color: inherit; font-size: 0.95rem;
  background: color-mix(in srgb, var(--surface) 65%, transparent);
}
.tg-select:not(.form-select)::after { content: '▾'; opacity: 0.7; font-size: 0.85em; }
.tg-select:not(.form-select):hover:not(:disabled) { border-color: var(--accent); }
.tg-select:disabled { opacity: 0.5; cursor: default; }
.tg-select-label { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* Кнопка с классом .form-select: фон темы (!important выше) убирает стрелку Bootstrap — рисуем свою */
.tg-select.form-select { position: relative; padding-right: 2.2rem; }
.tg-select.form-select::after { content: '▾'; position: absolute; right: .85rem; top: 50%; transform: translateY(-50%); opacity: .7; font-size: .85em; pointer-events: none; }
/* «Чаты» на карте покупателя (buyer-common.js → toggleChatsMenu) */
.chats-menu { position: fixed; z-index: 1600; min-width: 220px; max-height: 60vh; overflow: auto; padding: 6px !important; border-radius: 16px;
  display: flex; flex-direction: column; gap: 2px; animation: chats-menu-in 0.18s ease; }
.chats-menu-item { display: block; padding: 9px 12px; border-radius: 10px; color: inherit; text-decoration: none; font-size: 14px; }
.chats-menu-item:hover { background: rgba(255, 255, 255, 0.12); }
.chats-menu-empty { padding: 10px 12px; font-size: 13px; opacity: 0.8; max-width: 240px; }
@keyframes chats-menu-in { from { opacity: 0; transform: translateY(-6px) scale(0.98); } to { opacity: 1; transform: none; } }
html.ln-embed #themeSwitcher { display: none !important; }

/* FIX: БАГ 4.4 — полоса прокрутки внутри скруглённых плашек: дорожка с отступами сверху/снизу,
   чтобы не залезать в скруглённые углы, и без собственного фона (не видно прямых углов). */
.glass-panel::-webkit-scrollbar,
.card::-webkit-scrollbar,
.card-body::-webkit-scrollbar { width: 8px; height: 8px; }
.glass-panel::-webkit-scrollbar-track,
.card::-webkit-scrollbar-track,
.card-body::-webkit-scrollbar-track { background: transparent; margin-block: 14px; }
.glass-panel::-webkit-scrollbar-thumb,
.card::-webkit-scrollbar-thumb,
.card-body::-webkit-scrollbar-thumb {
  background: rgba(127, 127, 127, 0.35);
  border-radius: 8px;
  border: 2px solid transparent;
  background-clip: padding-box;
}
/* Firefox не знает ::-webkit-scrollbar — для него тонкая полоса стандартными свойствами.
   Только там: в Chrome эти свойства отключили бы оформление выше. */
@supports not selector(::-webkit-scrollbar) {
  .glass-panel, .card, .card-body {
    scrollbar-width: thin;
    scrollbar-color: rgba(127, 127, 127, 0.45) transparent;
  }
}

/* FIX: БАГ 6.1 — ненавязчивое «проявление» элементов списков после загрузки данных:
   из почти прозрачного с лёгким подпрыгиванием, по очереди. Чистый CSS: срабатывает и для
   списков, которые дорисовываются позже (после ответа сервера), без правок их рендеров.
   fill-mode backwards — после анимации элемент живёт по обычным стилям (hover и т.п. не ломаются).
   Список обращений админа и сообщения чатов не анимируем: они перерисовываются на каждое событие. */
@keyframes skeletonBounce {
  0%   { opacity: 0.06; transform: translateY(8px); }
  60%  { opacity: 0.45; transform: translateY(-4px); }
  100% { opacity: 1;    transform: translateY(0); }
}
#storesList > *,
#menuList > *,
#ordersList > *,
#reviewsList > *,
#reviewsModalList > *,
#mastersList > *,
#cartItemsList > *,
#itemsList > * {
  animation: skeletonBounce 0.9s cubic-bezier(0.4, 0, 0.2, 1) backwards;
}
#storesList > :nth-child(2), #menuList > :nth-child(2), #ordersList > :nth-child(2), #reviewsList > :nth-child(2), #reviewsModalList > :nth-child(2), #mastersList > :nth-child(2), #cartItemsList > :nth-child(2), #itemsList > :nth-child(2) { animation-delay: 60ms; }
#storesList > :nth-child(3), #menuList > :nth-child(3), #ordersList > :nth-child(3), #reviewsList > :nth-child(3), #reviewsModalList > :nth-child(3), #mastersList > :nth-child(3), #cartItemsList > :nth-child(3), #itemsList > :nth-child(3) { animation-delay: 120ms; }
#storesList > :nth-child(4), #menuList > :nth-child(4), #ordersList > :nth-child(4), #reviewsList > :nth-child(4), #reviewsModalList > :nth-child(4), #mastersList > :nth-child(4), #cartItemsList > :nth-child(4), #itemsList > :nth-child(4) { animation-delay: 180ms; }
#storesList > :nth-child(5), #menuList > :nth-child(5), #ordersList > :nth-child(5), #reviewsList > :nth-child(5), #reviewsModalList > :nth-child(5), #mastersList > :nth-child(5), #cartItemsList > :nth-child(5), #itemsList > :nth-child(5) { animation-delay: 240ms; }
#storesList > :nth-child(6), #menuList > :nth-child(6), #ordersList > :nth-child(6), #reviewsList > :nth-child(6), #reviewsModalList > :nth-child(6), #mastersList > :nth-child(6), #cartItemsList > :nth-child(6), #itemsList > :nth-child(6) { animation-delay: 300ms; }
#storesList > :nth-child(7), #menuList > :nth-child(7), #ordersList > :nth-child(7), #reviewsList > :nth-child(7), #reviewsModalList > :nth-child(7), #mastersList > :nth-child(7), #cartItemsList > :nth-child(7), #itemsList > :nth-child(7) { animation-delay: 360ms; }
#storesList > :nth-child(8), #menuList > :nth-child(8), #ordersList > :nth-child(8), #reviewsList > :nth-child(8), #reviewsModalList > :nth-child(8), #mastersList > :nth-child(8), #cartItemsList > :nth-child(8), #itemsList > :nth-child(8) { animation-delay: 420ms; }
#storesList > :nth-child(n+9), #menuList > :nth-child(n+9), #ordersList > :nth-child(n+9), #reviewsList > :nth-child(n+9), #reviewsModalList > :nth-child(n+9), #mastersList > :nth-child(n+9), #cartItemsList > :nth-child(n+9), #itemsList > :nth-child(n+9) { animation-delay: 480ms; }

/* FIX: БАГ 9.1 — прямые углы шапки/подвала торчат из скруглённой карточки. В темах Stitch радиус
   .card вырос до 16–20px, а у .card-header остался маленький радиус Bootstrap и свой фон.
   Карточка обрезает содержимое по своему скруглению, шапка и подвал наследуют её радиус.
   (.glass-panel не обрезаем: внутри неё бывают выпадающие меню — например, выбор темы.) */
.card { overflow: hidden; }
.card > .card-header:first-child {
  border-top-left-radius: inherit;
  border-top-right-radius: inherit;
}
.card > .card-footer:last-child {
  border-bottom-left-radius: inherit;
  border-bottom-right-radius: inherit;
}

/* FIX: БАГ 4.3 — чат админа (admin-support.html) растягивается на высоту экрана.
   На широком экране обе колонки — flex-колонки высотой «экран минус навбар» (не меньше 70vh):
   шапка и поле ввода фиксированы, тело (flex-grow) занимает остаток и прокручивается.
   На телефоне колонки идут друг под другом — список обращений ограничен, диалог не меньше 70vh. */
.support-pane {
  display: flex;
  flex-direction: column;
  min-height: 70vh;
}
.support-pane > .support-pane-body {
  flex: 1 1 auto;
  min-height: 0;          /* без этого flex-ребёнок не сжимается и прокрутка не появляется */
  overflow-y: auto;
}
@media (min-width: 768px) {
  .support-pane { height: calc(100vh - 140px); }
}
@media (max-width: 767.98px) {
  .col-md-4 > .support-pane { min-height: 0; max-height: 45vh; }
  #dialogArea.support-pane { min-height: 70vh; }
}

@media (prefers-reduced-motion: reduce) {
  body { animation: none; }
  #storesList > *, #menuList > *, #ordersList > *, #reviewsList > *,
  #reviewsModalList > *, #mastersList > *, #cartItemsList > *, #itemsList > * { animation: none; }
}


/* FIX: БЛОК 11.1 — окно сообщений чата растёт по числу сообщений.
   Было: max-height:320px прямо в разметке — окно упиралось в 320px и дальше только скроллилось.
   Стало: от 200px (виден даже короткий чат) до 70vh; высота — по содержимому, полоса прокрутки
   появляется только когда сообщения не помещаются в 70vh. Сообщения идут колонкой с отступом 8px.
   Применяется классом .chat-messages (сейчас — seller-order.html); карточка чата высоту не задаёт. */
.chat-messages {
  display: flex;
  flex-direction: column;
  gap: 8px;
  height: auto;
  min-height: 200px;
  max-height: 70vh;
  overflow-y: auto;
  overflow-x: hidden;
}
.chat-messages > * { flex-shrink: 0; }  /* сообщения не сжимаются — лишнее уходит в прокрутку */

/* FIX: БЛОК 11.1 + БАГ 4.4 — правила рамки Liquid Glass (выше) привязаны к ИНЛАЙНОВОМУ overflow-y.
   Окно чата теперь прокручивается классом, поэтому те правила на него не действуют, и рамка
   (::before, position:absolute) снова уехала бы вместе с текстом. Повторяем их для .chat-messages. */
body.theme-liquid-glass .chat-messages::before { display: none; }
body.theme-liquid-glass .chat-messages {
  box-shadow:
    var(--lg-glass-shadow),
    inset 0 0 0 1.5px rgba(255, 255, 255, 0.28);
}