/* Общие стили для ZeLiB Vape и Панели управления */
*, *::before, *::after { 
  box-sizing: border-box; 
  -webkit-tap-highlight-color: transparent; 
  font-family: system-ui, -apple-system, sans-serif; 
}

body { 
  background: #f7f9fc; 
  color: #1a1a1a; 
  margin: 0 auto; 
  padding: 0 24px 60px; 
  max-width: 100%; 
}

.focus-area { 
  padding: 40px 0 20px; 
  max-width: 1400px; 
  margin: 0 auto; 
}

.focus-area h1 { 
  font-size: 34px; 
  font-weight: 700; 
  margin: 0; 
  letter-spacing: -0.5px; 
}

.focus-area p { 
  margin: 6px 0 0; 
  color: #7a7a7a; 
  font-size: 15px; 
}

.layout-container { 
  display: flex; 
  gap: 20px; 
  align-items: flex-start; 
  max-width: 1400px; 
  margin: 0 auto; 
}

.sidebar { 
  width: 220px; 
  flex-shrink: 0; 
}

.main-content { 
  flex: 1; 
  min-width: 0; 
}

@media (max-width: 720px) { 
  .layout-container { flex-direction: column; } 
  .sidebar { width: 100%; } 
}

/* Компоненты UI (oui) */
.oui-card { 
  background: #fff; 
  border-radius: 22px; 
  padding: 33px; 
  box-shadow: 0 2px 10px rgba(0,0,0,0.04); 
  border: 1px solid #f0f2f5; 
}

.oui-btn { 
  background: #0377ff; 
  color: #fff; 
  border: none; 
  padding: 11px 18px; 
  border-radius: 16px; 
  font-size: 14px; 
  font-weight: 600; 
  cursor: pointer; 
  width: 100%; 
  transition: background .15s, transform .12s; 
}

.oui-btn:active { 
  transform: scale(0.97); 
  background: #0062d6; 
}

.oui-btn-secondary { 
  background: #edf1f7; 
  color: #1f1f1f; 
}

.oui-btn-secondary:active { 
  background: #dde3ec; 
}

.oui-btn-danger { 
  background: #ffe6e6; 
  color: #c62828; 
}

.oui-btn-sm { 
  padding: 7px 14px; 
  border-radius: 12px; 
  font-size: 13px; 
}

.oui-btn:disabled { 
  background: #e1e5eb; 
  color: #a1a7b0; 
  cursor: default; 
  transform: none; 
}

.oui-btn.success-blink { 
  background-color: #28a745 !important; 
  color: #fff !important; 
}

.oui-input { 
  width: 100%; 
  background: #f1f3f6; 
  border: 2px solid transparent; 
  padding: 13px 18px; 
  border-radius: 16px; 
  font-size: 15px; 
  color: #000; 
  outline: none; 
  margin: 5px 0; 
  transition: border .15s, background .15s; 
}

.oui-input:focus { 
  border-color: #0377ff; 
  background: #fff; 
}

.oui-select { 
  width: 100%; 
  background: #f1f3f6; 
  border: 2px solid transparent; 
  padding: 13px 18px; 
  border-radius: 16px; 
  font-size: 15px; 
  color: #000; 
  outline: none; 
  margin: 5px 0; 
  appearance: none; 
  cursor: pointer; 
}

/* Сетка товаров (Витрина) */
.products-grid { 
  display: grid; 
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); 
  gap: 14px; 
}

.product-card { 
  background: #fcfcfd; 
  border: 1px solid #edf1f7; 
  border-radius: 18px; 
  padding: 14px; 
  display: flex; 
  flex-direction: column; 
  justify-content: space-between; 
  transition: box-shadow .18s, transform .15s; 
}

.product-card:hover { 
  box-shadow: 0 4px 16px rgba(0,0,0,0.07); 
  transform: translateY(-1px); 
}

.product-card.out-of-stock { 
  opacity: 0.65; 
}

.product-info-wrapper { 
  display: flex; 
  flex-direction: column; 
  flex-grow: 1; 
}

.product-title { 
  font-size: 16px; 
  font-weight: 600; 
  margin: 0 0 6px; 
  color: #1f1f1f; 
  min-height: 44px; 
  word-break: break-word; 
}

.product-desc { 
  font-size: 13px; 
  color: #767676; 
  margin: 0 0 10px; 
  min-height: 36px; 
  flex-grow: 1; 
}

.product-price { 
  font-size: 17px; 
  font-weight: 700; 
  color: #0377ff; 
  margin-top: auto; 
  padding-top: 6px; 
}

.no-stock-label { 
  color: #d32f2f; 
  font-weight: 700; 
  font-size: 14px; 
  text-align: center; 
  margin-top: 20px; 
  padding: 8px; 
  background: #ffebee; 
  border-radius: 12px; 
  letter-spacing: 0.3px; 
}

/* Категории и Меню */
.cat-item { 
  margin-bottom: 1px; 
}

.cat-btn { 
  display: flex; 
  align-items: center; 
  justify-content: space-between; 
  width: 100%; 
  text-align: left; 
  background: transparent; 
  border: none; 
  border-radius: 13px; 
  font-weight: 600; 
  color: #1f1f1f; 
  cursor: pointer; 
  transition: background .15s; 
}

.cat-btn:hover { 
  background: #f1f3f6; 
}

.cat-btn.active { 
  background: #edf1f7; 
  color: #0377ff; 
}

.cat-depth-0 { padding: 10px 14px; font-size: 14px; }
.cat-depth-1 { padding: 8px 14px 8px 26px; font-size: 13px; font-weight: 600; }
.cat-depth-2 { padding: 7px 14px 7px 40px; font-size: 12px; font-weight: 500; color: #5a5a5a; }
.cat-depth-3 { padding: 6px 14px 6px 54px; font-size: 12px; font-weight: 400; color: #7a7a7a; }

.cat-arrow { 
  width: 16px; 
  height: 16px; 
  flex-shrink: 0; 
  display: flex; 
  align-items: center; 
  justify-content: center; 
  transition: transform .2s; 
}

.cat-arrow svg { 
  width: 10px; 
  height: 10px; 
  fill: none; 
  stroke: #b0b0b0; 
  stroke-width: 2; 
  stroke-linecap: round; 
  stroke-linejoin: round; 
}

.cat-btn.open > .cat-arrow svg { 
  transform: rotate(90deg); 
}

.cat-children { 
  overflow: hidden; 
  max-height: 0; 
  transition: max-height .22s ease; 
}

.cat-children.open { 
  max-height: 2000px; 
}

/* Бейджи статусов */
.subcat-badge { 
  display: inline-block; 
  font-size: 11px; 
  font-weight: 600; 
  color: #0377ff; 
  background: #e8f0fe; 
  border-radius: 7px; 
  padding: 2px 7px; 
  margin-bottom: 6px; 
  align-self: flex-start; 
}

.stock-badge { 
  display: inline-block; 
  font-size: 11px; 
  font-weight: 600; 
  border-radius: 7px; 
  padding: 2px 7px; 
  margin-left: 4px; 
  align-self: flex-start; 
}

.stock-ok { color: #1b7f3a; background: #e6f4ec; }
.stock-no { color: #b71c1c; background: #fde8e8; }

/* Информационная панель синхронизации */
.sync-bar { 
  display: flex; 
  align-items: center; 
  gap: 12px; 
  background: #fff; 
  border: 1px solid #edf1f7; 
  border-radius: 16px; 
  padding: 10px 18px; 
  margin-bottom: 18px; 
  font-size: 13px; 
  color: #555; 
  max-width: 1400px; 
  margin-left: auto; 
  margin-right: auto; 
}

.sync-bar strong { 
  color: #1f1f1f; 
}

.sync-dot { 
  width: 8px; 
  height: 8px; 
  border-radius: 50%; 
  background: #4caf50; 
  flex-shrink: 0; 
}

/* Корзина */
.cart-item { 
  display: flex; 
  justify-content: space-between; 
  align-items: center; 
  padding: 11px 0; 
  border-bottom: 1px solid #f1f3f6; 
  gap: 8px; 
}

.cart-item:last-child { 
  border-bottom: none; 
}

.total-price { 
  font-size: 22px; 
  font-weight: 700; 
  text-align: right; 
  margin: 18px 0; 
}

.qty-controls { 
  display: flex; 
  align-items: center; 
  background: #edf1f7; 
  border-radius: 12px; 
  padding: 3px; 
  gap: 4px; 
}

.qty-btn { 
  background: #fff; 
  border: none; 
  width: 28px; 
  height: 28px; 
  border-radius: 9px; 
  font-size: 15px; 
  font-weight: 700; 
  color: #1a1a1a; 
  cursor: pointer; 
  display: flex; 
  align-items: center; 
  justify-content: center; 
  box-shadow: 0 1px 3px rgba(0,0,0,0.05); 
}

.qty-btn:active { 
  background: #f4f5f8; 
}

.qty-num { 
  font-size: 14px; 
  font-weight: 700; 
  min-width: 24px; 
  text-align: center; 
  color: #1a1a1a; 
}

.tg-input-wrapper { 
  display: flex; 
  align-items: center; 
  background: #f1f3f6; 
  border: 2px solid transparent; 
  border-radius: 16px; 
  padding-left: 18px; 
  margin: 8px 0; 
  transition: border .15s, background .15s; 
}

.tg-input-wrapper:focus-within { 
  border-color: #0377ff; 
  background: #fff; 
}

.tg-prefix { 
  font-size: 16px; 
  font-weight: 600; 
  color: #8a8a8f; 
  margin-right: -12px; 
  user-select: none; 
}

.tg-input-wrapper .oui-input { 
  background: transparent !important; 
  border: none !important; 
  padding-left: 14px !important; 
  margin: 0 !important; 
}

.bottom-cart-section { 
  margin-top: 36px; 
}

.admin-link { 
  display: block; 
  text-align: center; 
  margin-top: 36px; 
  color: #b0b0b0; 
  text-decoration: none; 
  font-size: 13px; 
}

.admin-link:hover { 
  color: #0377ff; 
}

/* Мобильная плавающая кнопка корзины */
.mobile-cart-floater { 
  position: fixed; 
  bottom: 24px; 
  right: 24px; 
  width: 56px; 
  height: 56px; 
  background: rgba(3,119,255,0.85); 
  color: #fff; 
  border-radius: 50%; 
  border: none; 
  box-shadow: 0 4px 16px rgba(3,119,255,0.4); 
  display: flex; 
  align-items: center; 
  justify-content: center; 
  cursor: pointer; 
  z-index: 999; 
  opacity: 0; 
  transform: scale(0.5); 
  pointer-events: none; 
  transition: opacity 0.3s cubic-bezier(0.12,0.4,0.29,1.46), transform 0.3s cubic-bezier(0.12,0.4,0.29,1.46); 
}

.mobile-cart-floater.visible { 
  opacity: 1; 
  transform: scale(1); 
  pointer-events: auto; 
}

.mobile-cart-floater svg { 
  width: 24px; 
  height: 24px; 
  stroke: #fff; 
  stroke-width: 2.5; 
  fill: none; 
  stroke-linecap: round; 
  stroke-linejoin: round; 
}

@media (min-width: 992px) {
  .mobile-cart-floater { display: none !important; }
  .layout-container { display: grid; grid-template-columns: 220px 1fr 340px; gap: 30px; align-items: start; }
  .bottom-cart-section { position: sticky; top: 20px; margin-top: 0; width: 100%; }
}

/* Стили для панели управления (Админка) */
.admin-product-card { 
  background: #fcfcfd; 
  border: 1px solid #edf1f7; 
  border-radius: 18px; 
  padding: 14px; 
  display: flex; 
  flex-direction: row; 
  align-items: center; 
  justify-content: space-between; 
  margin-bottom: 10px; 
}

.cat-path-editor { 
  display: flex; 
  flex-direction: column; 
  gap: 6px; 
  margin: 5px 0; 
}

.cat-path-row { 
  display: flex; 
  align-items: center; 
  gap: 6px; 
}

.cat-path-row .oui-input { 
  margin: 0; 
  flex: 1; 
  font-size: 14px; 
  padding: 10px 14px; 
}

.cat-path-sep { 
  color: #b0b0b0; 
  font-size: 18px; 
  font-weight: 300; 
  user-select: none; 
  flex-shrink: 0; 
}

.cat-path-add { 
  background: #edf1f7; 
  border: none; 
  border-radius: 10px; 
  padding: 8px 14px; 
  font-size: 13px; 
  font-weight: 600; 
  color: #0377ff; 
  cursor: pointer; 
  width: 100%; 
  margin-top: 2px; 
}

.cat-path-remove { 
  background: #ffe6e6; 
  border: none; 
  border-radius: 9px; 
  width: 28px; 
  height: 28px; 
  font-size: 16px; 
  font-weight: 700; 
  color: #c62828; 
  display: flex; 
  align-items: center; 
  justify-content: center; 
  flex-shrink: 0; 
  cursor: pointer; 
}

.cat-path-label { 
  font-size: 12px; 
  color: #888; 
  margin: 8px 0 2px; 
  font-weight: 600; 
}

.icon-btn { 
  display: inline-flex; 
  align-items: center; 
  gap: 6px; 
}

.icon-btn svg { 
  width: 14px; 
  height: 14px; 
  stroke: currentColor; 
  fill: none; 
  stroke-width: 2; 
  stroke-linecap: round; 
  stroke-linejoin: round; 
}

#login-screen { 
  display: flex; 
  flex-direction: column; 
  justify-content: center; 
  min-height: 90vh; 
}

#admin-screen { 
  display: none; 
}