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

body {
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  font-size: 14px;
  background: #f5f5f5;
  color: #1a1a1a;
}

header {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 12px 24px;
  background: #111;
  color: #fff;
}
.logo { font-weight: 700; font-size: 16px; letter-spacing: 1px; }
.brand { color: #888; font-size: 12px; }
nav { margin-left: auto; display: flex; gap: 8px; }
nav button {
  background: none; border: 1px solid #444; color: #ccc;
  padding: 6px 14px; border-radius: 4px; cursor: pointer; font-size: 13px;
}
nav button.active { background: #fff; color: #111; border-color: #fff; }

section { max-width: 960px; margin: 24px auto; padding: 0 16px; }

.filters { margin-bottom: 12px; }
.filters select { padding: 6px 10px; border-radius: 4px; border: 1px solid #ccc; }

.card {
  background: #fff;
  border-radius: 8px;
  padding: 16px;
  margin-bottom: 12px;
  border-left: 4px solid #ddd;
}
.card.shadow { border-left-color: #f59e0b; }
.card.sent   { border-left-color: #22c55e; }
.card.human  { border-left-color: #6366f1; }
.card.error  { border-left-color: #ef4444; }
.card.pending { border-left-color: #94a3b8; }

.card-header { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; flex-wrap: wrap; }
.badge {
  font-size: 11px; font-weight: 600; padding: 2px 8px;
  border-radius: 4px; text-transform: uppercase;
}
.badge.pre     { background: #dbeafe; color: #1d4ed8; }
.badge.pos     { background: #f3e8ff; color: #7c3aed; }
.badge.classify { background: #f0fdf4; color: #166534; }
.badge.status  { background: #f1f5f9; color: #475569; }
.meta { color: #888; font-size: 12px; }
.meta.time { margin-left: auto; }

.buyer-text { color: #374151; line-height: 1.5; }
.bot-reply  { color: #166534; margin-top: 8px; font-size: 13px; line-height: 1.5; }
.error-msg  { color: #b91c1c; margin-top: 8px; font-size: 12px; }

.card-actions { display: flex; gap: 8px; margin-top: 10px; }
.btn-human { padding: 5px 12px; border-radius: 4px; border: 1px solid #6366f1; color: #6366f1; background: none; cursor: pointer; }
.btn-retry { padding: 5px 12px; border-radius: 4px; border: 1px solid #059669; color: #059669; background: none; cursor: pointer; }

.empty { text-align: center; color: #888; padding: 40px; }

/* FAQs */
.faq-form { background: #fff; border-radius: 8px; padding: 16px; margin-bottom: 20px; }
.faq-form h3 { margin-bottom: 12px; font-size: 14px; font-weight: 600; }
.faq-form input, .faq-form textarea {
  width: 100%; padding: 8px 10px; border: 1px solid #ddd; border-radius: 4px;
  margin-bottom: 8px; font-size: 13px; font-family: inherit;
}
.faq-form textarea { min-height: 80px; resize: vertical; }
.btn-save { padding: 7px 16px; background: #111; color: #fff; border: none; border-radius: 4px; cursor: pointer; }

.faq-card { background: #fff; border-radius: 8px; padding: 14px; margin-bottom: 10px; }
.faq-card.inactive { opacity: 0.5; }
.faq-header { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; }
.faq-header code { background: #f1f5f9; padding: 2px 6px; border-radius: 3px; font-size: 12px; flex: 1; }
.hits { font-size: 11px; color: #888; }
.faq-header button { padding: 4px 10px; border-radius: 4px; border: 1px solid #ccc; cursor: pointer; font-size: 12px; }
.btn-del { color: #dc2626; border-color: #dc2626; }

/* Stats */
.stats-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 16px; }
.stat-card { background: #fff; border-radius: 8px; padding: 24px; text-align: center; }
.stat-n { font-size: 36px; font-weight: 700; }
.stat-label { font-size: 12px; color: #888; margin-top: 4px; text-transform: uppercase; letter-spacing: 1px; }