.bots-section { position: relative; }
.bot-section-heading { align-items: center; }
.bot-summary-pill {
  padding: 9px 13px;
  border: 1px solid rgba(56, 214, 139, .24);
  border-radius: 999px;
  background: rgba(56, 214, 139, .08);
  color: #8ff0bb;
  font-size: .74rem;
  font-weight: 900;
  white-space: nowrap;
}
.bot-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 15px;
}
.bot-card {
  position: relative;
  overflow: hidden;
  min-height: 330px;
  padding: 18px;
  border: 1px solid rgba(102, 141, 209, .22);
  border-radius: 21px;
  background:
    radial-gradient(circle at 100% 0, rgba(51, 220, 139, .13), transparent 34%),
    linear-gradient(145deg, rgba(20, 33, 60, .98), rgba(8, 19, 36, .98));
  box-shadow: 0 22px 55px rgba(0, 0, 0, .20);
}
.bot-card.bot-blue { background: radial-gradient(circle at 100% 0, rgba(72, 142, 255, .16), transparent 34%), linear-gradient(145deg, rgba(20, 33, 60, .98), rgba(8, 19, 36, .98)); }
.bot-card.bot-green { background: radial-gradient(circle at 100% 0, rgba(126, 225, 66, .14), transparent 34%), linear-gradient(145deg, rgba(20, 40, 45, .98), rgba(8, 20, 29, .98)); }
.bot-card-head { display: flex; align-items: center; gap: 13px; }
.bot-avatar-wrap {
  position: relative;
  display: grid;
  place-items: center;
  width: 72px;
  height: 72px;
  flex: 0 0 72px;
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 18px;
  background: linear-gradient(145deg, rgba(55, 221, 144, .14), rgba(93, 115, 255, .12));
}
.bot-avatar-wrap img { width: 57px; height: 70px; object-fit: contain; filter: drop-shadow(0 8px 10px rgba(0,0,0,.45)); }
.bot-identity { min-width: 0; }
.bot-identity h3 { margin: 5px 0 2px; color: #fff; font-size: 1.08rem; }
.bot-identity small { color: #8194b2; font-size: .70rem; }
.bot-state {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  color: #a8b6cb;
  font-size: .66rem;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: .08em;
}
.bot-state i { width: 8px; height: 8px; border-radius: 50%; background: #7b8799; box-shadow: 0 0 10px rgba(123,135,153,.55); }
.bot-state.online { color: #74e9a8; }
.bot-state.online i { background: #31da83; box-shadow: 0 0 12px rgba(49,218,131,.78); }
.bot-state.connecting { color: #b4b8ff; }
.bot-state.connecting i { background: #858dff; box-shadow: 0 0 12px rgba(133,141,255,.75); animation: botPulse 1.1s ease-in-out infinite; }
.bot-state.paused { color: #ffd08a; }
.bot-state.paused i { background: #ffb95b; box-shadow: 0 0 12px rgba(255,185,91,.70); }
@keyframes botPulse { 50% { opacity: .35; transform: scale(.75); } }
.bot-task {
  margin-top: 16px;
  padding: 13px 14px;
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 13px;
  background: rgba(0,0,0,.13);
}
.bot-task span, .bot-task strong { display: block; }
.bot-task span { margin-bottom: 4px; color: #8093b0; font-size: .65rem; text-transform: uppercase; letter-spacing: .08em; }
.bot-task strong { color: #ecf2ff; font-size: .83rem; }
.bot-metrics { display: grid; grid-template-columns: 1fr 1fr; gap: 9px; margin-top: 10px; }
.bot-metrics > div { min-width: 0; padding: 11px; border: 1px solid rgba(255,255,255,.07); border-radius: 12px; background: rgba(255,255,255,.025); }
.bot-metrics span, .bot-metrics strong { display: block; }
.bot-metrics span { margin-bottom: 4px; color: #8093b0; font-size: .64rem; }
.bot-metrics strong { overflow: hidden; color: #e7effd; font-size: .72rem; text-overflow: ellipsis; white-space: nowrap; }
.bot-vitals { display: grid; gap: 9px; margin-top: 12px; }
.bot-vitals span { display: flex; justify-content: space-between; gap: 12px; color: #879ab7; font-size: .65rem; }
.bot-vitals b { color: #dae5f7; }
.bot-vitals i { display: block; overflow: hidden; height: 6px; margin-top: 5px; border-radius: 99px; background: rgba(255,255,255,.07); }
.bot-vitals em { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, #30d77e, #6be3a5); }
.bot-vitals > div:nth-child(2) em { background: linear-gradient(90deg, #ffb34e, #ffd070); }
.bot-visible { margin: 13px 0 0; color: #8193ac; font-size: .68rem; line-height: 1.45; }
.bot-visible span { color: #a8b8ce; font-weight: 800; }
.bot-command-panel {
  display: grid;
  grid-template-columns: 82px minmax(0,1fr);
  align-items: center;
  gap: 15px;
  margin-top: 15px;
  padding: 15px 17px;
  border: 1px solid rgba(108, 126, 255, .20);
  border-radius: 17px;
  background: linear-gradient(135deg, rgba(87, 102, 226, .10), rgba(30, 213, 132, .07));
}
.bot-command-avatar { width: 72px; height: 86px; object-fit: contain; filter: drop-shadow(0 10px 12px rgba(0,0,0,.42)); }
.bot-command-panel strong { display:block; color:#fff; font-size:.88rem; }
.bot-command-panel p { margin: 6px 0 0; color: #91a4bf; font-size: .74rem; line-height: 1.55; }
.bot-command-panel code { padding: 2px 5px; border: 1px solid rgba(255,255,255,.10); border-radius: 6px; background: rgba(0,0,0,.16); color: #b9c6ff; font-size: .70rem; }
.bot-card-loading, .bot-card-error { display:grid; place-items:center; align-content:center; gap:8px; min-height:210px; color:#b5c2d6; text-align:center; }
.bot-card-error small { color:#ff969e; }
.bot-loading-pulse { width:38px; height:38px; border:4px solid rgba(255,255,255,.10); border-top-color:#54dd98; border-radius:50%; animation:botSpin 1s linear infinite; }
@keyframes botSpin { to { transform:rotate(360deg); } }
@media(max-width:700px) {
  .bot-section-heading { align-items:flex-start; }
  .bot-summary-pill { margin-top:8px; }
  .bot-grid { grid-template-columns:1fr; }
  .bot-metrics { grid-template-columns:1fr; }
  .bot-command-panel { grid-template-columns:60px minmax(0,1fr); }
  .bot-command-avatar { width:54px; height:68px; }
}