/* スクロールバーのスタイル */
::-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;
  user-select: none;
}
.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:#adb8ff; 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 {
  margin-top:24px; width:100%; padding:14px;
  border:none; border-radius:14px;
  background:linear-gradient(135deg,#6d75ff,#5865f2);
  color:#fff; font-weight:700; font-size:18px;
  letter-spacing:.5px; cursor:pointer; position:relative;
  box-shadow:
    0 4px 15px rgba(88,101,242,.4),
    0 0 10px rgba(255,255,255,.1),
    inset 0 0 5px rgba(255,255,255,.2);
  overflow:hidden; transition:all .3s;
}
button.primary:hover {
  background:linear-gradient(135deg,#7d89ff,#4e57e0);
  box-shadow:
    0 6px 22px rgba(88,101,242,.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;
}

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); }

/* 停止・退出ボタン強調 */
#stopSpam, #leaveBtn {
  width:48%; padding:10px;
  border:none; border-radius:10px;
  background:linear-gradient(135deg,#e74c3c,#c0392b);
  color:#fff; font-weight:700; font-size:14px;
  letter-spacing:.5px; cursor:pointer; transition:all .3s;
  margin-top:12px;
  box-shadow: 0 4px 10px rgba(255,0,0,0.3);
}
#stopSpam:hover, #leaveBtn:hover {
  background:linear-gradient(135deg,#c0392b,#e74c3c);
  transform:scale(1.03);
}
#stopSpam:active, #leaveBtn:active {
  transform:scale(0.96);
  box-shadow:inset 0 4px 6px rgba(0,0,0,.3);
}

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

/* アコーディオン */
.accordion { 
  margin-top: 18px; 
  border: 1px solid #4f545c;
  border-radius: 8px;
  overflow: hidden;
}
.accordion summary { 
  list-style:none; 
  padding: 16px 20px;
  cursor:pointer; 
  font-weight:600; 
  position:relative; 
  background: #40444b;
  transition: background .3s;
}
.accordion summary:hover {
  background: #484c53;
}
.accordion summary::-webkit-details-marker { display:none; }
.accordion summary::marker { content:none; }
.accordion summary::before { 
  content:'▶'; 
  position:absolute; 
  left:12px; 
  top:50%; 
  transform:translateY(-50%); 
  transition:transform .3s ease; 
}
.accordion[open] > summary::before { transform:translateY(-50%) rotate(90deg); }
.accordion .detail-content { 
  padding: 16px 20px;
  background: #36393f;
  transform-origin:top center; 
  transform:scaleY(0); 
  opacity:0; 
  transition:transform .3s ease, opacity .3s ease; 
}
.accordion[open] .detail-content { transform:scaleY(1); opacity:1; }

/* ネストされた詳細設定 */
.nested-details { 
  margin-top:18px; 
  border: 1px solid #4f545c;
  border-radius: 6px;
  overflow: hidden;
}
.nested-details summary { 
  list-style:none; 
  padding: 12px 16px;
  cursor:pointer; 
  font-weight:600; 
  position:relative; 
  background: #40444b;
  transition: background .3s;
  font-size: 14px;
}
.nested-details summary:hover {
  background: #484c53;
}
.nested-details summary::-webkit-details-marker { display:none; }
.nested-details summary::marker { content:none; }
.nested-details summary::before { 
  content:'▶'; 
  position:absolute; 
  left:8px; 
  top:50%; 
  transform:translateY(-50%); 
  transition:transform .3s ease; 
  font-size: 12px;
}
.nested-details[open] > summary::before { transform:translateY(-50%) rotate(90deg); }
.nested-details .detail-content { 
  padding: 12px 16px;
  background: #36393f;
  transform-origin:top center; 
  transform:scaleY(0); 
  opacity:0; 
  transition:transform .3s ease, opacity .3s ease; 
}
.nested-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;
}

/* ラジオボタン */
.radio-container {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  user-select: none;
  font-size: 14px;
  margin-right: 16px;
}
.radio-container input[type="radio"] {
  appearance: none;
  width: 20px;
  height: 20px;
  background: #4f545c;
  border: 2px solid #5865f2;
  border-radius: 50%;
  position: relative;
  transition: background .3s ease, border-color .3s ease;
}
.radio-container input[type="radio"]::before {
  content: "";
  position: absolute;
  top: 50%; left: 50%;
  width: 10px; height: 10px;
  background: #fff;
  border-radius: 50%;
  transform: translate(-50%, -50%) scale(0);
  transition: transform .2s ease-out;
}
.radio-container input[type="radio"]:checked {
  background: #5865f2;
  border-color: #7289da;
}
.radio-container input[type="radio"]:checked::before {
  transform: translate(-50%, -50%) scale(1);
}
.radio-container span {
  color: #fff;
  transition: color .3s;
}
.radio-container input[type="radio"]:checked + span {
  color: #adb8ff;
}

/* 開催期間セレクトボックス装飾 */
.styled-select {
  margin-top: 8px;
  width: 100%;
  padding: 10px;
  border-radius: 8px;
  border: none;
  background: #202225;
  color: #fff;
  font-family: monospace;
  font-size: 15px;
  appearance: none;
  outline: none;
  box-shadow: 0 2px 8px rgba(88,101,242,0.08);
  transition: border-color 0.2s, box-shadow 0.2s;
  cursor: pointer;
  position: relative;
  background-image: url('data:image/svg+xml;utf8,<svg fill="white" height="16" viewBox="0 0 24 24" width="16" xmlns="http://www.w3.org/2000/svg"><path d="M7 10l5 5 5-5z"/></svg>');
  background-repeat: no-repeat;
  background-position: right 12px center;
  background-size: 18px 18px;
}
.styled-select:focus {
  box-shadow: 0 0 0 3px rgba(114,137,218,0.3);
  border: 1px solid #7289da;
}
.styled-select option {
  background: #36393f;
  color: #fff;
}
.styled-select::-ms-expand {
  display: none;
}

/* トークンマスク用 */
.token-masked {
  font-family: 'text-security-disc','monospace';
  -webkit-text-security: disc;
  text-security: disc;
  letter-spacing: 2px;
}

/* レスポンシブデザイン */
@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 {
    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;
    gap: 8px;
  }
  #stopSpam, #leaveBtn {
    width: 100%;
  }
  .accordion summary {
    font-size: 13px;
    padding: 12px 16px;
  }
  .nested-details summary {
    font-size: 12px;
    padding: 10px 12px;
  }
  .checkbox-container {
    font-size: 13px;
  }
  #log {
    height: 80px;
    font-size: 11px;
  }
}