/* ===========================
   DDoS 檢測專用樣式
   =========================== */

/* 包裝容器 */
.pay-wrap {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
  margin: 0 auto;
  max-width: 1300px;
}

/* 卡片容器 */
.pay-card {
  border-radius: 18px;
  border: 1px solid var(--border);
  overflow: hidden;
  color: var(--text);
  box-shadow: 0 4px 16px rgba(2,6,23,.06);
}

/* === 主題感知：卡片背景漸層 === */
html[data-theme="light"] .pay-card,
body.theme-light .pay-card {
  background:
    radial-gradient(800px 420px at 85% -20%, rgba(6,182,212,.15), transparent 60%),
    radial-gradient(700px 380px at -10% 0%, rgba(37,99,235,.14), transparent 60%),
    linear-gradient(180deg, #f1f7ff 0%, #ffffff 60%);
}

html[data-theme="dark"] .pay-card,
body.theme-dark .pay-card {
  background:
    radial-gradient(800px 420px at 85% -20%, rgba(34,211,238,.12), transparent 60%),
    radial-gradient(700px 380px at -10% 0%, rgba(59,130,246,.12), transparent 60%),
    linear-gradient(180deg, #0f172a 0%, #0b1220 60%);
}

/* === 標題列 === */
.pay-header {
  padding: 14px 20px;
  font-weight: 700;
  font-size: 1.1rem;
  border-bottom: 1px solid var(--border);
}

/* 標題列漸層：亮色 / 暗色 */
html[data-theme="light"] .pay-header,
body.theme-light .pay-header {
  background: linear-gradient(90deg, #e8f4ff 0%, #ffffff 100%);
  color: var(--text);
}
html[data-theme="dark"] .pay-header,
body.theme-dark .pay-header {
  background: linear-gradient(90deg, #1e293b 0%, #0f172a 100%);
  color: #e5e7eb;
}

/* === 說明段落（常見攻擊型態、檢測清單等） === */
.section {
  background: rgba(255,255,255,.5);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 12px 14px;
  margin-bottom: 1.25rem;
}
html[data-theme="dark"] .section,
body.theme-dark .section {
    
    
  background: rgba(2,6,23,.35);
}

/* 小標題 */
.subhead {
  font-size: 1.05rem;
  font-weight: 700;
  margin-bottom: .5rem;
}

/* 列表 */
.list { margin: 0; padding-left: 1.2rem; }
.list li { margin: .35rem 0; color: var(--text); }
.list strong { color: var(--text); font-weight: 700; }

/* === 兩欄並排 (Web / Game) === */
.grid-2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.5rem;
}
@media (max-width: 1300px) {
  .grid-2 { grid-template-columns: 1fr; }
}

/* === Badge 標籤 === */
.badge {
  display: inline-block;
  font-size: .8rem;
  font-weight: 600;
  padding: .25rem .6rem;
  border-radius: .5rem;
  background: var(--bg-soft);
  color: var(--text);
}

/* === 按鈕 === */
.pay-actions {
  margin-top: 1rem;
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
  border-top: 1px solid var(--border);
  padding-top: 1rem;
}

.primary-btn, .danger-btn, .btn, .xs-btn {
  border: 1px solid var(--border);
  border-radius: .5rem;
  padding: .45rem .9rem;
  font-size: .9rem;
  font-weight: 600;
  cursor: pointer;
  text-decoration: none;
  display: inline-block;
  transition: .15s ease;
}

/* 藍色 */
.primary-btn{
  font-size:14px;
  padding:8px 14px;
  background:var(--c-code-bg);
  color:var(--c-text);
}
.primary-btn:hover{ filter:brightness(1.05); }
.primary-btn:active{ transform:translateY(1px); }

/* 紅色按鈕（危險／緊急救援） */
.danger-btn{
  font-size:14px;
  padding:8px 14px;
  background:#dc2626;        /* 紅色 */
  border-color:#b91c1c;
  color:#ffffff !important;
}
.danger-btn:hover{ background:#b91c1c; filter:brightness(1.05); }
.danger-btn:active{ transform:translateY(1px); }

/* 灰色 */
.-btn{
  font-size:14px;
  padding:8px 16px;
  background:#03A9F4;        /* 天藍色 */
  border-color:#0288D1;
  color:#ffffff !important;
  border-radius:8px;
  font-weight:700;
  display:inline-flex;
  align-items:center;
}
.-btn:hover{ background:#0288D1; filter:brightness(1.05); }
.-btn:active{ transform:translateY(1px); }

/* 超小 */
.xs-btn {
  padding: .25rem .5rem;
  font-size: .8rem;
  background: var(--bg-soft);
  color: var(--text);
}
.xs-btn:hover { background: var(--bg); }

/* === Code 區塊 === */
pre {
  background: var(--bg-soft);
  padding: .75rem 1rem;
  border-radius: .5rem;
  font-size: .85rem;
  overflow-x: auto;
  margin-bottom: 1rem;
}
pre code { font-family: "JetBrains Mono", monospace; }

/* === 風險評分條 === */
.meter-wrap { margin-top: .75rem; }
.meter {
  background: var(--bg-soft);
  border-radius: .5rem;
  overflow: hidden;
  height: 10px;
}
.meter div {
  height: 100%;
  width: 0%;
  background: linear-gradient(90deg, #3b82f6, #22d3ee);
  transition: width .3s ease;
}
/* 頁面頂部與導覽列保持距離 */
#ddos-detect,
.pay-wrap {
  margin-top: 2.5rem;  /* 可以依需要調整，例如 24px */
}

.pay-card:first-child {
  margin-top: 0; /* 避免重複加大 */
}