.nav-btn { color: #71717a; }
.nav-btn:hover { background: rgba(255,255,255,.04); color: #d4d4d8; }
.nav-btn.active { background: rgba(99,102,241,.15); color: #a5b4fc; }

.card {
  background: #12121a;
  border: 1px solid rgba(255,255,255,.06);
  border-radius: 1rem;
}

.stat-card {
  background: #12121a;
  border: 1px solid rgba(255,255,255,.06);
  border-radius: 1rem;
  padding: 1.25rem 1.5rem;
}
.stat-label { font-size: .7rem; font-weight: 600; text-transform: uppercase; letter-spacing: .05em; color: #71717a; }
.stat-value { font-size: 1.75rem; font-weight: 700; margin-top: .25rem; color: #f4f4f5; }

.field-label { display: block; font-size: .7rem; font-weight: 600; text-transform: uppercase; letter-spacing: .05em; color: #71717a; margin-bottom: .375rem; }
.field-input {
  width: 100%;
  padding: .625rem 1rem;
  border-radius: .625rem;
  background: #1a1a26;
  border: 1px solid rgba(255,255,255,.06);
  color: #f4f4f5;
  font-size: .875rem;
  transition: border-color .15s, box-shadow .15s;
}
.field-input:focus { outline: none; border-color: rgba(99,102,241,.5); box-shadow: 0 0 0 3px rgba(99,102,241,.15); }

.btn-primary {
  padding: .625rem 1.25rem;
  border-radius: .625rem;
  background: #4f46e5;
  color: #fff;
  font-size: .875rem;
  font-weight: 600;
  transition: background .15s;
}
.btn-primary:hover:not(:disabled) { background: #6366f1; }
.btn-primary:disabled { opacity: .4; cursor: not-allowed; }

.btn-secondary {
  padding: .625rem 1.25rem;
  border-radius: .625rem;
  background: #1a1a26;
  border: 1px solid rgba(255,255,255,.08);
  color: #d4d4d8;
  font-size: .875rem;
  font-weight: 500;
}
.btn-secondary:hover { background: #222233; }

.tab-btn {
  padding: .375rem .875rem;
  border-radius: .5rem;
  font-size: .75rem;
  font-weight: 600;
  color: #71717a;
  transition: all .15s;
}
.tab-btn.active { background: rgba(99,102,241,.2); color: #a5b4fc; }
.tab-btn:hover:not(.active) { color: #d4d4d8; }

.brand-btn {
  padding: .5rem .625rem;
  border-radius: .5rem;
  font-size: .75rem;
  font-weight: 500;
  text-align: left;
  color: #a1a1aa;
  transition: all .12s;
}
.brand-btn:hover { background: rgba(255,255,255,.04); color: #e4e4e7; }
.brand-btn.active { background: rgba(99,102,241,.2); color: #c7d2fe; border: 1px solid rgba(99,102,241,.3); }

.tpl-btn {
  padding: .625rem .875rem;
  border-radius: .5rem;
  text-align: left;
  transition: all .12s;
  border: 1px solid transparent;
}
.tpl-btn:hover { background: rgba(255,255,255,.03); }
.tpl-btn.active { background: rgba(99,102,241,.12); border-color: rgba(99,102,241,.25); }
.tpl-btn .tpl-label { font-size: .8125rem; font-weight: 500; color: #e4e4e7; }
.tpl-btn .tpl-desc { font-size: .6875rem; color: #71717a; margin-top: .125rem; }

.pulse-dot {
  width: 10px; height: 10px; border-radius: 50%; display: inline-block;
}
.pulse-dot.online { background: #22c55e; box-shadow: 0 0 8px rgba(34,197,94,.6); animation: pulse 2s infinite; }
.pulse-dot.offline { background: #ef4444; }

@keyframes pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: .5; }
}

.alert-success { padding: .875rem 1rem; border-radius: .625rem; background: rgba(34,197,94,.1); border: 1px solid rgba(34,197,94,.2); color: #86efac; font-size: .875rem; }
.alert-error { padding: .875rem 1rem; border-radius: .625rem; background: rgba(239,68,68,.1); border: 1px solid rgba(239,68,68,.2); color: #fca5a5; font-size: .875rem; }

table tbody tr { border-bottom: 1px solid rgba(255,255,255,.04); }
table tbody tr:last-child { border-bottom: none; }
table tbody tr:hover { background: rgba(255,255,255,.02); }

.bot-card { padding: 1.25rem; }
.bot-card .bot-name { font-weight: 600; font-size: .9375rem; }
.bot-card .bot-pid { font-size: .75rem; color: #71717a; margin-top: .25rem; }