/* بات‌استودیو — استایل‌های سفارشی */
* { -webkit-tap-highlight-color: transparent; }
body { font-family: 'Vazirmatn', system-ui, sans-serif; }
::selection { background: rgba(59,130,246,.35); }

::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: #26314f; border-radius: 8px; }
::-webkit-scrollbar-thumb:hover { background: #34427a; }

.card {
  background: linear-gradient(180deg, rgba(20,26,46,.9), rgba(11,15,31,.95));
  border: 1px solid rgba(255,255,255,.06);
  border-radius: 1.25rem;
  padding: 1.25rem;
  box-shadow: 0 10px 40px -12px rgba(0,0,0,.6);
}

.section-title {
  font-weight: 800; font-size: .95rem; color: #e2e8f0;
  display: flex; align-items: center; gap: .5rem; margin-bottom: .75rem;
}

.input {
  width: 100%; background: rgba(7,10,22,.8);
  border: 1px solid rgba(255,255,255,.08);
  border-radius: .75rem; padding: .6rem .8rem;
  font-size: .875rem; color: #e2e8f0; outline: none;
  transition: border-color .15s, box-shadow .15s;
}
.input:focus {
  border-color: rgba(59,130,246,.6);
  box-shadow: 0 0 0 3px rgba(59,130,246,.15);
}
.input::placeholder { color: #475569; }

.lbl { display: block; font-size: .7rem; color: #94a3b8; margin-bottom: .3rem; }

.btn-primary, .btn-ghost, .btn-danger {
  display: inline-flex; align-items: center; justify-content: center;
  gap: .25rem; border-radius: .75rem; padding: .55rem 1rem;
  font-size: .8rem; font-weight: 700; cursor: pointer;
  transition: all .15s; border: 1px solid transparent;
}
.btn-primary {
  background: linear-gradient(135deg, #3b82f6, #7c3aed);
  color: #fff; box-shadow: 0 4px 20px -4px rgba(59,130,246,.5);
}
.btn-primary:hover { filter: brightness(1.1); transform: translateY(-1px); }
.btn-primary:active { transform: translateY(0); }
.btn-primary:disabled { opacity: .5; cursor: not-allowed; transform: none; }

.btn-ghost {
  background: rgba(255,255,255,.04); color: #cbd5e1;
  border-color: rgba(255,255,255,.08);
}
.btn-ghost:hover { background: rgba(255,255,255,.09); }

.btn-danger {
  background: rgba(239,68,68,.12); color: #fca5a5;
  border-color: rgba(239,68,68,.25);
}
.btn-danger:hover { background: rgba(239,68,68,.22); }

.badge {
  font-size: .65rem; padding: .2rem .6rem; border-radius: 999px; font-weight: 700;
}
.badge.on { background: rgba(16,185,129,.15); color: #6ee7b7; }
.badge.off { background: rgba(148,163,184,.15); color: #94a3b8; }

.tab {
  padding: .8rem 1rem; font-size: .78rem; font-weight: 700;
  color: #64748b; white-space: nowrap; cursor: pointer;
  border-bottom: 2px solid transparent; transition: all .15s;
}
.tab:hover { color: #cbd5e1; }
.tab.active { color: #60a5fa; border-bottom-color: #3b82f6; background: rgba(59,130,246,.06); }

.stat-card {
  display: flex; align-items: center; gap: .75rem;
  background: linear-gradient(180deg, rgba(20,26,46,.9), rgba(11,15,31,.95));
  border: 1px solid rgba(255,255,255,.06);
  border-radius: 1rem; padding: .9rem 1rem;
}
.stat-card i { font-size: 1.25rem; }
.stat-card b { display: block; font-size: 1.25rem; color: #fff; line-height: 1.2; }
.stat-card span { font-size: .65rem; color: #64748b; }

.bot-item {
  display: flex; align-items: center; gap: .6rem;
  padding: .7rem .8rem; border-radius: .9rem; cursor: pointer;
  border: 1px solid transparent; transition: all .15s;
}
.bot-item:hover { background: rgba(255,255,255,.04); }
.bot-item.active {
  background: rgba(59,130,246,.1);
  border-color: rgba(59,130,246,.35);
}

.cmd-item {
  background: rgba(7,10,22,.6);
  border: 1px solid rgba(255,255,255,.06);
  border-radius: .9rem; padding: .7rem .9rem;
  transition: border-color .15s;
}
.cmd-item:hover { border-color: rgba(59,130,246,.3); }
.cmd-item.inactive { opacity: .45; }

.code-area {
  background: #070a16 !important;
  line-height: 1.6; tab-size: 2;
  resize: vertical;
}

.log-row {
  display: flex; gap: .5rem; align-items: baseline;
  padding: .35rem .5rem; border-radius: .5rem;
}
.log-row:nth-child(odd) { background: rgba(255,255,255,.02); }
.log-in { color: #7dd3fc; }
.log-out { color: #86efac; }
.log-err { color: #fca5a5; }

.toast {
  background: #141a2e; border: 1px solid rgba(255,255,255,.1);
  border-radius: .9rem; padding: .7rem 1rem; font-size: .8rem;
  box-shadow: 0 10px 30px rgba(0,0,0,.5);
  animation: toast-in .25s ease-out;
  max-width: 320px;
}
.toast.ok { border-color: rgba(16,185,129,.4); color: #a7f3d0; }
.toast.err { border-color: rgba(239,68,68,.4); color: #fecaca; }
@keyframes toast-in {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: translateY(0); }
}

kbd {
  background: rgba(255,255,255,.08); border-radius: .3rem;
  padding: .1rem .35rem; font-size: .65rem; font-family: monospace;
}