body { font-family: system-ui, Arial, sans-serif; margin:0; }
.topbar { display:flex; justify-content:space-between; align-items:center; background:#111; color:#fff; }
.topbar a { color:#fff; margin-left:12px; text-decoration:none; }
.layout { display:grid; grid-template-columns: 280px 1fr; gap:16px; padding:16px; }
.sidebar label { display:block; margin-top:8px; font-size:14px; color:#333; }
.sidebar input, .sidebar select { width:100%; padding:8px; margin-top:4px; }
.products { display:grid; grid-template-columns: repeat(auto-fill, minmax(220px,1fr)); gap:16px; }
.card { border:1px solid #eee; border-radius:12px; overflow:hidden; background:#fff; box-shadow:0 2px 6px rgba(0,0,0,.04); }
.card img { width:100%; height:160px; object-fit:cover; }
.card-body { padding:12px; }
.card .price { font-weight:700; margin-top:4px; }
.card .meta { color:#666; font-size:12px; margin-top:4px; }
.muted { color:#777; padding:16px; }
.auth-card { max-width:360px; margin:60px auto; border:1px solid #eee; border-radius:12px; padding:16px; }
.container {  margin: 20px auto; padding: 0 16px; }
.table { width:100%; border-collapse: collapse; }
.table th, .table td { border:1px solid #ddd; padding:8px; text-align:left; }
.chat { max-width:720px; margin:20px auto; border:1px solid #eee; border-radius:12px; }
.chat-window { height:420px; overflow:auto; padding:12px; background:#fafafa; }
.chat-form { display:flex; gap:8px; padding:12px; }
.msg { margin-bottom:6px; }
.msg.user { text-align:right; }
/* === Компактный список: заменяет .products grid на vertical list === */
/* Вставь этот блок *после* существующих правил, чтобы переопределить их */

.products {
  display: flex !important;
  flex-direction: column !important;
  gap: 10px !important;
  padding: 6px 0;
}

/* Компактная строка карточки */
.card {
  display: flex !important;
  flex-direction: row !important;
  align-items: center;
  gap: 12px;
  padding: 8px 10px;
  min-height: 72px;
  border-radius: 10px;
  box-shadow: 0 6px 14px rgba(2,6,23,0.04);
  border: 1px solid #eef2f7;
  background: #fff;
  transition: transform .12s ease, box-shadow .12s ease;
  overflow: hidden;
}

/* Миниатюра слева, фиксированный размер */
.card img {
  flex: 0 0 96px;
  object-fit: contain !important;
  border-radius: 6px;
  background: #f7f9fc;
  display: block;
}

/* Текстовый блок — занимает оставшееся пространство */
.card-body {
  padding: 0 6px 0 0;
  flex: 1 1 auto;
  min-width: 0; /* важно для text-overflow */
  display: flex;
  flex-direction: column;
  gap: 4px;
}

/* Заголовок — усечение длинных названий */
.card-body .title,
.card .title {
  font-size: 1rem;
  font-weight: 700;
  color: #0f172a;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Мета/производитель — компактно */
.card-body .meta,
.card .meta {
  font-size: 0.86rem;
  color: #666;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Цена — справа внутри карточки, чуть выделена */
.card .price {
  font-weight: 800;
  font-size: 0.95rem;
  color: var(--accent, #0b57a4);
  white-space: nowrap;
}

/* Footer / actions — справа, компактные кнопки */
.card-footer {
  border-top: 0 !important;
  padding: 0;
  margin-left: 12px;
  display: flex;
  gap: 6px;
  align-items: center;
  justify-content: flex-end;
  flex: 0 0 auto;
  min-width: 140px;
}

/* Кнопки — уменьшенные */
.actions a, .actions button {
  padding: 6px 8px;
  font-size: 0.84rem;
  border-radius: 8px;
}

.item-premium {
  background: linear-gradient(90deg, #fffaf0 0%, #fff4d6 50%, #fffaf0 100%);
  border: 1px solid rgba(255, 210, 77, 0.22);
  box-shadow: 0 8px 20px rgba(255, 183, 0, 0.06);
}
.badge-premium {
  display:inline-block;
  background: linear-gradient(180deg,#ffd86b,#ffb74d);
  color:#6b3700;
  padding:6px 8px;border-radius:8px;font-weight:800;font-size:.9rem;
}


/* Hover эффект */
.card:hover { transform: translateY(-4px); box-shadow: 0 10px 24px rgba(2,6,23,0.08); }

/* Responsive: на узких экранах — карточки вертикально, thumb растёт */
@media (max-width: 700px) {
  .card {
    flex-direction: column;
    align-items: stretch;
    min-height: auto;
    padding: 10px;
  }
  .card img {
    width: 100% !important;
    height: 140px !important;
    flex: 0 0 auto;
    border-radius: 8px;
  }
  .card-footer {
    margin-left: 0;
    justify-content: flex-start;
    padding-top: 8px;
  }
}