/* ── Base ─────────────────────────────────── */
body {
  background-color: #0f1117;
  color: #e0e0e0;
  font-family: 'Segoe UI', system-ui, sans-serif;
}

/* ── Auth Card ───────────────────────────── */
.auth-card {
  background: #1a1d27;
  border: 1px solid #2d3044;
  border-radius: 16px;
  padding: 2.5rem;
  width: 100%;
  max-width: 420px;
  box-shadow: 0 8px 32px rgba(0,0,0,0.4);
}

/* ── Navbar ──────────────────────────────── */
.navbar {
  background-color: #12151f !important;
  box-shadow: 0 2px 12px rgba(0,0,0,0.3);
}
.navbar-brand { font-size: 1.2rem; letter-spacing: 0.5px; }
.nav-link { color: #9ea3b0 !important; transition: color 0.2s; }
.nav-link:hover, .nav-link.active { color: #ffc107 !important; }

/* ── Cards ───────────────────────────────── */
.card {
  background-color: #1a1d27 !important;
  border: 1px solid #2d3044 !important;
  border-radius: 12px;
}
.card-header {
  background-color: transparent;
  border-bottom: 1px solid #2d3044 !important;
  font-size: 0.9rem;
}

/* ── Stat Cards ──────────────────────────── */
.stat-card .card-body { padding: 1.25rem; }
.stat-icon {
  width: 44px; height: 44px;
  border-radius: 10px;
  display: flex; align-items: center; justify-content: center;
  font-size: 1.2rem;
  margin-bottom: 0.75rem;
}
.stat-value { font-size: 1.4rem; font-weight: 700; line-height: 1.2; }
.stat-label { font-size: 0.75rem; color: #9ea3b0; margin-top: 2px; }

/* ── Bot Cards ───────────────────────────── */
.bot-card { transition: transform 0.2s, box-shadow 0.2s; position: relative; overflow: hidden; }
.bot-card:hover { transform: translateY(-4px); box-shadow: 0 12px 32px rgba(0,0,0,0.4); }
.popular-card { border: 1px solid #ffc107 !important; }
.ribbon {
  position: absolute; top: 14px; right: -20px;
  background: #ffc107; color: #000;
  font-size: 0.7rem; font-weight: 700;
  padding: 3px 30px;
  transform: rotate(30deg);
}
.pricing-block { background: rgba(255,193,7,0.08); border: 1px solid rgba(255,193,7,0.2); }

/* ── Action Cards (admin) ─────────────────── */
.action-card { transition: background 0.2s; }
.action-card:hover { background: #21253a !important; }
.action-card .card-body { padding: 1.25rem; }

/* ── Tables ──────────────────────────────── */
.table { color: #e0e0e0; }
.table > :not(caption) > * > * { background: transparent; border-color: #2d3044; }
.table-hover > tbody > tr:hover > * { background-color: rgba(255,193,7,0.04); }
thead th { font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.5px; color: #9ea3b0; }

/* ── Forms ───────────────────────────────── */
.form-control, .form-select, .input-group-text {
  background-color: #12151f;
  border-color: #2d3044;
  color: #e0e0e0;
}
.form-control:focus, .form-select:focus {
  background-color: #12151f;
  border-color: #ffc107;
  color: #e0e0e0;
  box-shadow: 0 0 0 0.2rem rgba(255,193,7,0.2);
}
.form-control::placeholder { color: #5a5f72; }

/* ── Buttons ─────────────────────────────── */
.btn-warning { color: #000 !important; font-weight: 600; }
.btn-outline-secondary { border-color: #2d3044; color: #9ea3b0; }
.btn-outline-secondary:hover { background: #2d3044; color: #fff; }

/* ── Modals ──────────────────────────────── */
.modal-content { background: #1a1d27; border: 1px solid #2d3044; }
.modal-header, .modal-footer { border-color: #2d3044; }

/* ── Badges ──────────────────────────────── */
.badge { font-weight: 500; }

/* ── Progress ────────────────────────────── */
.progress { background-color: #2d3044; }

/* ── Alerts ──────────────────────────────── */
.alert { border-radius: 8px; border: none; }
.alert-dark { background: #12151f; border: 1px solid #2d3044 !important; }
.alert-secondary { background: #1e2235; border: 1px solid #2d3044 !important; }

/* ── Nav Tabs ────────────────────────────── */
.nav-tabs { border-bottom-color: #2d3044; }
.nav-tabs .nav-link { color: #9ea3b0; border-color: transparent; }
.nav-tabs .nav-link.active {
  background: #1a1d27;
  border-color: #2d3044 #2d3044 #1a1d27;
  color: #ffc107;
}
.nav-tabs .nav-link:hover { border-color: transparent; color: #ffc107; }

/* ── Dropdown ────────────────────────────── */
.dropdown-menu {
  background: #1a1d27;
  border: 1px solid #2d3044;
}
.dropdown-item { color: #e0e0e0; }
.dropdown-item:hover { background: #2d3044; color: #fff; }
.dropdown-divider { border-color: #2d3044; }

/* ── Bot Card Animations ─────────────────── */
@keyframes float {
  0%, 100% { transform: translateY(0); }
  50%       { transform: translateY(-6px); }
}
@keyframes glow-pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(255,193,7,0); }
  50%       { box-shadow: 0 0 20px 4px rgba(255,193,7,0.2); }
}
@keyframes shimmer {
  0%   { background-position: -400px 0; }
  100% { background-position: 400px 0; }
}

.bot-card { animation: float 6s ease-in-out infinite; }
.bot-card:nth-child(2) { animation-delay: -1.5s; }
.bot-card:nth-child(3) { animation-delay: -3s; }
.bot-card:nth-child(4) { animation-delay: -4.5s; }
.popular-card { animation: float 6s ease-in-out infinite, glow-pulse 3s ease-in-out infinite; }

.stat-card:hover { animation: glow-pulse 1.5s ease-in-out infinite; }

/* Animate number values */
.stat-value {
  background: linear-gradient(90deg, #e0e0e0 25%, #ffc107 50%, #e0e0e0 75%);
  background-size: 400px 100%;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: shimmer 4s linear infinite;
}

/* ── Scrollbar ───────────────────────────── */
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: #12151f; }
::-webkit-scrollbar-thumb { background: #2d3044; border-radius: 3px; }

/* ── Utilities ───────────────────────────── */
.letter-spacing-3 { letter-spacing: 0.3em; }
.font-monospace { font-size: 0.82rem; }
code { color: #ffc107; background: rgba(255,193,7,0.1); padding: 2px 6px; border-radius: 4px; }