::-webkit-scrollbar { width: 6px; }
::-webkit-scrollbar-track { background: #202225; border-radius: 3px; }
::-webkit-scrollbar-thumb { background: #5865f2; border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: #7289da; }

*, *::before, *::after { box-sizing: border-box; }
body {
  font-family: 'Inter', sans-serif;
  background: linear-gradient(135deg,#2f3136,#1e1f22);
  color:#fff;
  margin:0; padding:0;
  display:flex; justify-content:center; align-items:center;
  height:100vh;
}
.card {
  background:#36393f;
  padding:32px;
  border-radius:20px;
  box-shadow:0 15px 35px rgba(0,0,0,.5);
  width:100%; max-width:600px;
  animation:fadeIn .8s ease;
  overflow:auto; max-height:95vh;
}
@keyframes fadeIn {
  from { opacity:0; transform:translateY(20px); }
  to   { opacity:1; transform:translateY(0); }
}
h2 { color:#9b59b6; text-align:center; margin:0 0 24px; font-weight:600; }
label { display:block; margin-top:18px; font-size:14px; }

input[type="text"], textarea {
  width:100%; padding:10px; margin-top:6px;
  border-radius:8px; border:none;
  background:#202225; color:#fff;
  font-family:monospace; resize:vertical;
}
textarea { overflow-y:auto; }
input[type="number"] {
  padding:6px; margin-top:6px;
  border-radius:8px; border:none;
  background:#202225; color:#fff;
  font-family:monospace; appearance:none;
  width:80px;
}
input[type=number]::-webkit-inner-spin-button,
input[type=number]::-webkit-outer-spin-button {
  -webkit-appearance:none; margin:0;
}

.row {
  display:flex; gap:12px; align-items:center;
}
.row > * { flex:none; }
.row label,
.row .checkbox-container { margin-top:0; }

.checkbox-container {
  display:flex; align-items:center; gap:8px;
  cursor:pointer; font-size:14px; user-select:none;
  margin-top:6px;
}
.checkbox-container input {
  appearance:none; width:36px; height:18px;
  background:#4f545c; border-radius:18px;
  position:relative; transition:background .3s ease;
}
.checkbox-container:hover input { background:#5a5f68; }
.checkbox-container input:focus {
  outline:none; box-shadow:0 0 0 3px rgba(114,137,218,0.5);
}
.checkbox-container input::before {
  content:''; position:absolute;
  width:14px; height:14px; border-radius:50%;
  background:#fff; top:2px; left:2px;
  transition:transform .3s cubic-bezier(.68,-.55,.27,1.55);
}
.checkbox-container input:checked { background:#7289da; }
.checkbox-container input:checked::before {
  transform:translateX(18px);
}
.checkbox-container span { transition:color .3s; }
.checkbox-container input:checked + span {
  color:#adb8ff;
}

button.primary,
#stopSpam,
#leaveBtn {
  margin-top:24px; width:100%; padding:14px;
  border:none; border-radius:14px;
  font-weight:700; font-size:18px;
  letter-spacing:.5px; cursor:pointer;
  color:#fff; text-align:center;
  overflow:hidden; transition:all .3s;
  box-shadow:
    0 4px 15px rgba(255,255,255,.1),
    0 0 10px rgba(255,255,255,.1),
    inset 0 0 5px rgba(255,255,255,.2);
}

button.primary {
  background:linear-gradient(135deg,#4caf50,#2e7d32);
  box-shadow:
    0 4px 15px rgba(76,175,80,.4),
    0 0 10px rgba(255,255,255,.1),
    inset 0 0 5px rgba(255,255,255,.2);
}
button.primary:hover {
  background:linear-gradient(135deg,#66bb6a,#1b5e20);
  box-shadow:
    0 6px 22px rgba(76,175,80,.6),
    0 0 24px rgba(255,255,255,.2),
    inset 0 0 10px rgba(255,255,255,.3);
  transform:scale(1.03);
}
button.primary:active {
  transform:scale(0.96);
  box-shadow:inset 0 4px 6px rgba(0,0,0,.3);
}
button.primary.loading {
  color: #ffffffa2; pointer-events:none;
}

#stopSpam {
  background: linear-gradient(135deg,#fb8c00,#ef6c00);
  box-shadow:
    0 4px 15px rgba(251,140,0,.4),
    0 0 10px rgba(255,255,255,.1),
    inset 0 0 5px rgba(255,255,255,.2);
}
#stopSpam:hover {
  background: linear-gradient(135deg,#ef6c00,#fb8c00);
  box-shadow:
    0 6px 22px rgba(251,140,0,.6),
    0 0 24px rgba(255,255,255,.2),
    inset 0 0 10px rgba(255,255,255,.3);
  transform: scale(1.03);
}
#stopSpam:active {
  transform: scale(0.96);
  box-shadow: inset 0 4px 6px rgba(0,0,0,.3);
}

#leaveBtn {
  background: linear-gradient(135deg,#e74c3c,#c0392b);
  box-shadow:
    0 4px 15px rgba(231,76,60,.4),
    0 0 10px rgba(255,255,255,.1),
    inset 0 0 5px rgba(255,255,255,.2);
}
#leaveBtn:hover {
  background: linear-gradient(135deg,#c0392b,#e74c3c);
  box-shadow:
    0 6px 22px rgba(231,76,60,.6),
    0 0 24px rgba(255,255,255,.2),
    inset 0 0 10px rgba(255,255,255,.3);
  transform: scale(1.03);
}
#leaveBtn:active {
  transform: scale(0.96);
  box-shadow: inset 0 4px 6px rgba(0,0,0,.3);
}

button.secondary {
  margin-top:8px; padding:6px 12px;
  background:#5865f2; color:#fff;
  font-size:14px; border:none; border-radius:6px;
  position:relative; overflow:hidden;
}
button.secondary::after {
  content:''; position:absolute;
  top:0; left:0; width:100%; height:100%;
  background:rgba(255,255,255,0.1);
  opacity:0; transition:opacity .3s;
}
button.secondary:hover::after { opacity:1; }
button.secondary:active::after { background:rgba(255,255,255,0.2); }

.button-container {
  display: flex;
  gap: 10px;
  justify-content: center;
}

details { margin-top:18px; }
summary { list-style:none; padding-left:20px; cursor:pointer; font-weight:600; position:relative; margin-top:0; }
summary::-webkit-details-marker { display:none; }
summary::marker { content:none; }
summary::before { content:'▶'; position:absolute; left:0; top:50%; transform:translateY(-50%); transition:transform .3s ease; }
details[open] > summary::before { transform:translateY(-50%) rotate(90deg); }
.detail-content { transform-origin:top center; transform:scaleY(0); opacity:0; transition:transform .3s ease, opacity .3s ease; }
details[open] .detail-content { transform:scaleY(1); opacity:1; }

#log {
  margin-top:20px; padding:10px;
  height:120px; overflow-y:auto;
  background:#202225; border-radius:10px;
  font-family:monospace; font-size:12px;
  white-space:pre-wrap; resize: vertical;
}

@media (max-width: 600px) {
  .card {
    padding: 16px;
    max-width: 100%;
    max-height: 100vh;
    border-radius: 10px;
  }

  h2 {
    font-size: 18px;
    margin-bottom: 16px;
  }

  label {
    font-size: 13px;
    margin-top: 12px;
  }

  input[type="text"],
  textarea,
  input[type="number"] {
    padding: 8px;
    font-size: 12px;
  }

  button.primary,
  #stopSpam,
  #leaveBtn {
    padding: 12px;
    font-size: 16px;
  }

  button.secondary {
    padding: 8px 12px;
    font-size: 13px;
  }

  .row {
    flex-direction: column;
    align-items: stretch;
  }

  .row label {
    width: 100%;
  }

  .button-container {
    flex-direction: column;
  }

  #stopSpam, #leaveBtn {
    width: 100%;
    margin-top: 8px;
  }
}