html {
  overflow-y: scroll;
}

/* 固定垂直捲軸，避免標題跳動 */
body {
  font-family: 'Inter', 'Noto Sans TC', sans-serif;
  background: #f5f7fa;
  color: #333;
  margin: 0;
  padding: 0;
  overflow-x: hidden;
}

/* 展開動畫期間隱藏 body 的額外捲軸 */
body.no-scroll {
  overflow-y: hidden;
}

body.lock-scroll {
  position: fixed;
  width: 100%;
  overflow: hidden;
}

header {
  background: #1e2733;
  color: #fff;
  padding: 1rem;
  text-align: center;
  font-size: 1.5rem;
}

footer {
  background: #f5f7fa;
  padding: 0.5rem 1rem;
  text-align: right;
  font-size: 0.9rem;
  color: #666;
}

main {
  max-width: 1200px;
  margin: auto;
  /* 上方間距減少至 1.5rem，左右保留 2rem */
  padding: 1.5rem 2rem;
  display: flex;
  flex-direction: column;
  /* 卡片之間的間距由 2rem 調整為 1.5rem */
  gap: 1.5rem;
}

.card {
  background: #fff;
  border-radius: 8px;
  /* 減少標題上方留白，上下左右內距調整 */
  padding: 1.2rem;
  transition: all 0.3s cubic-bezier(0.3, 0, 0, 1);
}

.card:hover {
  transform: translateY(-4px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

.card p {
  line-height: 1.3;
}

/* 桌面版：伺服器狀態 6 個一行 */
.status-grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 1rem;
  align-items: center;
  justify-items: center;
}

.status-item {
  width: 100%;
  max-width: 160px;
  height: 80px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  background: #eef1f5;
  border-radius: 8px;
  font-size: 1rem;
  transition: background 0.3s cubic-bezier(0.3, 0, 0, 1), transform 0.3s cubic-bezier(0.3, 0, 0, 1);
  animation: pulseStatus 0.6s cubic-bezier(0.6, 0, 0, 1);
  box-sizing: border-box;
  /* 防止 padding 使寬度超出格子 */
}

.status-item:hover {
  transform: scale(1.05);
}

.status-item.online {
  background: #e8f5e9;
}

.status-item.offline {
  background: #ffebee;
}

.status-item.online i {
  color: #4caf50;
}

.status-item.offline i {
  color: #f44336;
}

@keyframes pulseStatus {
  0% {
    transform: scale(0.95);
    opacity: 0.7;
  }

  100% {
    transform: scale(1);
    opacity: 1;
  }
}

/* 桌面版：統計資料 4 個一行 */
.stats-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1rem;
  justify-items: center;
}

/* 垂直置中：主軸置中並以 gap 調整項目間距 */
.stats-item {
  background: #eef1f5;
  border-radius: 8px;
  padding: 0.5rem 1rem;
  width: 100%;
  max-width: 160px;
  min-width: 160px;
  /* 桌面版最小寬度 */
  height: 80px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.2rem;
  /* 減少項目間距，讓數字與標題更靠近 */
  font-size: 1.2rem;
  transition: background 0.3s cubic-bezier(0.3, 0, 0, 1), transform 0.3s cubic-bezier(0.3, 0, 0, 1);
  animation: pulseStatus 0.6s cubic-bezier(0.6, 0, 0, 1);
  box-sizing: border-box;
  /* 防止 padding 使寬度超出格子 */
}

.stats-item span {
  font-size: 1.8rem;
  margin-top: 0;
  min-height: 1.8rem;
  line-height: 1.2;
  /* 緊縮行高 */
}

.stats-item .stats-label {
  font-weight: bold;
  margin-top: 0.1rem;
  /* 減少標題與邊緣距離 */
  margin-bottom: 0.1rem;
  /* 減少標題與數字間距 */
}

.stats-item:hover {
  transform: scale(1.05);
}

.error-text {
  color: #f44336;
  font-style: italic;
  /* 連線失敗文字大小調整 */
  font-size: 1.2rem !important;
  /* 桌面版字體大小 */
  line-height: 1.2;
}

/* 桌面版：修正 error-text 在 stats-item 中的行距 */
.stats-item span.error-text {
  min-height: auto !important;
  /* 覆蓋 span 的 min-height 設定 */
  line-height: 1.3 !important;
  /* 稍微緊縮行高 */
}

.button {
  display: inline-block;
  background: #4caf50;
  color: #fff;
  padding: 0.6rem 1.2rem;
  border-radius: 4px;
  text-decoration: none;
  margin-top: 0.5rem;
}

.button:hover {
  background: #45a049;
}

/* 工具卡片並排容器 */
.tools-container {
  display: flex;
  gap: 2rem;
}

.tools-container .card {
  flex: 1;
  min-width: 0;
}

.card h2 {
  margin-top: 0;
  margin-bottom: 1rem;
}

/* ---------- 新增：卡片放大／隱藏樣式 ---------- */
.card.expanded {
  /* 取消固定寬度，維持與一般卡片相同的流動寬度 */
  z-index: 999;
}

.card.hidden {
  opacity: 0;
  pointer-events: none;
  height: 0 !important;
  min-height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow: hidden !important;
}

/* 展開時移除 main 的 gap，避免頁尾留下空白 */
main.no-gap {
  gap: 0 !important;
}

/* ------------------------------------------- */

/* 只針對卡片展開後的內容放大段落文字 */
.detail-content p {
  font-size: 1.2rem;
  line-height: 1.6;
}

.detail-content p2 {
  font-size: 1.1rem;
  line-height: 1.5;
}

.detail-content h2 {
  font-size: 1.7rem;
  line-height: 1.3;
}

.detail-content h3 {
  font-size: 1.3rem;
  line-height: 1.3;
}

/* ========== 響應式設計 - 小手機版本 ========== */
@media (max-width: 459px) {

  /* 調整整體佈局 - 小手機優化 */
  main {
    padding: 0.6rem;
    /* 小手機上進一步減少內距 */
    gap: 0.6rem;
    /* 減少卡片間距 */
  }

  header {
    font-size: 1rem;
    /* 小手機上進一步縮小標題 */
    padding: 0.5rem;
  }

  /* 調整卡片樣式 */
  .card {
    padding: 0.6rem;
    /* 小手機上進一步減少卡片內距 */
  }

  .card h2 {
    font-size: 1.1rem;
    /* 小手機上進一步縮小卡片標題 */
    margin-bottom: 0.5rem;
  }

  /* 狀態網格 - 小手機上改為 2x3 佈局，更緊湊 */
  .status-grid {
    display: grid !important;
    grid-template-columns: repeat(2, 1fr) !important;
    grid-template-rows: repeat(3, 1fr) !important;
    gap: 1rem !important;
    grid-auto-rows: minmax(50px, auto) !important;
    padding: 0.2rem !important;
    /* 進一步減少外框內距 */
  }

  .status-item {
    max-width: 100px;
    /* 小手機上比網頁版更小 */
    height: 50px;
    /* 小手機上比網頁版更小 */
    font-size: 0.7rem;
    /* 小手機上比網頁版更小字體 */
    flex-direction: column;
    /* 圖示和文字垂直排列 */
    gap: 0.2rem;
    /* 減少間距 */
    text-align: center;
    padding: 0.2rem;
    /* 小手機上進一步減少內距 */
    min-width: 0;
    /* 允許收縮 */
  }

  .status-item i {
    font-size: 0.7rem;
    /* 小手機上比網頁版更小圖示 */
  }

  /* 統計網格 - 小手機上改為 2x2 佈局，更緊湊 */
  .stats-grid {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(100px, 1fr)) !important;
    /* 設定最小寬度限制 */
    grid-template-rows: repeat(2, 1fr) !important;
    gap: 1.5rem !important;
    /* 增加間距至少與高度一樣寬 */
    grid-auto-rows: minmax(50px, auto) !important;
    padding: 0.2rem !important;
    /* 增加外框內距 */
  }

  .stats-item {
    max-width: 160px !important;
    /* 小手機上比網頁版更小 */
    min-width: 100px !important;
    /* 設定最小寬度，與網格設定一致 */
    height: 70px !important;
    /* 小手機上比網頁版更小 */
    font-size: 0.9rem !important;
    /* 小手機上比網頁版更小字體 */
    padding: 0.2rem 0.4rem !important;
    /* 小手機上進一步減少內距 */
    gap: 0.4rem !important;
    /* 減少間距 */
  }

  .stats-item span {
    font-size: 1.3rem !important;
    /* 小手機上比網頁版更小數字，使用 !important 確保優先級 */
  }

  .stats-item .stats-label {
    font-size: 1.1rem;
    /* 小手機上標籤字體稍微增大 */
    margin-top: 0.2rem !important;
    /* 減少標題與邊緣距離 */
    margin-bottom: 0.2rem !important;
    /* 減少標題與數字間距 */
  }

  /* 工具卡片 - 小手機上改為垂直堆疊 */
  .tools-container {
    flex-direction: column;
    gap: 0.8rem;
  }

  /* 按鈕樣式調整 */
  .button {
    padding: 0.6rem 1rem;
    /* 小手機上調整按鈕大小 */
    font-size: 0.85rem;
    display: block;
    /* 小手機上按鈕佔滿寬度 */
    text-align: center;
    margin-top: 0.6rem;
  }

  /* 調整錯誤文字大小 - 小手機版本 */
  .stats-item .error-text {
    font-size: 0.95rem !important;
  }

  /* 小手機上隱藏 hover 效果，避免觸控問題 */
  .card:hover {
    transform: none;
    box-shadow: none;
  }

  .status-item:hover {
    transform: none;
  }

  .stats-item:hover {
    transform: none;
  }

  /* 調整 footer */
  footer {
    font-size: 0.75rem;
    text-align: center;
    /* 小手機上置中顯示 */
    padding: 0.4rem;
  }

  /* 小手機模式下隱藏「（每10秒更新）」文字 */
  h2 small {
    display: none !important;
  }
}

/* ========== 響應式設計 - 常規手機版本 ========== */
@media (min-width: 460px) and (max-width: 699px) {

  /* 調整整體佈局 */
  main {
    padding: 0.8rem;
    /* 手機上減少內距 */
    gap: 0.8rem;
    /* 減少卡片間距 */
  }

  header {
    font-size: 1.1rem;
    /* 手機上縮小標題 */
    padding: 0.6rem;
  }

  /* 調整卡片樣式 */
  .card {
    padding: 0.8rem;
    /* 手機上減少卡片內距 */
  }

  .card h2 {
    font-size: 1.2rem;
    /* 手機上縮小卡片標題 */
    margin-bottom: 0.6rem;
  }

  /* 狀態網格 - 手機上改為 2x3 佈局，允許換行 */
  .status-grid {
    display: grid !important;
    grid-template-columns: repeat(2, 1fr) !important;
    grid-template-rows: repeat(3, 1fr) !important;
    gap: 1rem !important;
    grid-auto-rows: minmax(80px, auto) !important;
    padding: 0.4rem !important;
    /* 增加外框內距 */
  }

  .status-item {
    max-width: 160px;
    /* 與電腦版保持一致 */
    height: 80px;
    /* 與電腦版保持一致 */
    font-size: 1rem;
    /* 與電腦版保持一致 */
    flex-direction: column;
    /* 圖示和文字垂直排列 */
    gap: 0.5rem;
    /* 與電腦版保持一致 */
    text-align: center;
    padding: 0.5rem;
    /* 與電腦版保持一致 */
    min-width: 0;
    /* 允許收縮 */
  }

  .status-item i {
    font-size: 1rem;
    /* 圖示稍微縮小 */
  }

  /* 統計網格 - 手機上改為 2x2 佈局，允許換行 */
  .stats-grid {
    display: grid !important;
    grid-template-columns: repeat(2, 1fr) !important;
    grid-template-rows: repeat(2, 1fr) !important;
    gap: 1rem !important;
    grid-auto-rows: minmax(80px, auto) !important;
    padding: 0.4rem !important;
    /* 增加外框內距 */
  }

  .stats-item {
    max-width: 160px !important;
    /* 與電腦版保持一致 */
    min-width: 160px !important;
    /* 常規手機版最小寬度 */
    height: 80px !important;
    /* 與電腦版保持一致 */
    font-size: 1.2rem !important;
    /* 與電腦版保持一致 */
    padding: 0.5rem 1rem !important;
    /* 與電腦版保持一致 */
  }

  .stats-item span {
    font-size: 1.4rem !important;
    /* 縮小數字大小，使用 !important 確保優先級 */
  }

  .stats-item .stats-label {
    font-size: 1.2rem;
    /* 與電腦版保持一致 */
  }

  /* 工具卡片 - 手機上改為垂直堆疊 */
  .tools-container {
    flex-direction: column;
    gap: 1rem;
  }

  /* 按鈕樣式調整 */
  .button {
    padding: 0.7rem 1.2rem;
    /* 手機上增大按鈕，方便觸控 */
    font-size: 0.9rem;
    display: block;
    /* 手機上按鈕佔滿寬度 */
    text-align: center;
    margin-top: 0.8rem;
  }

  /* 調整錯誤文字大小 - 常規手機版本 */
  .stats-item .error-text {
    font-size: 1rem !important;
  }

  /* 手機上隱藏 hover 效果，避免觸控問題 */
  .card:hover {
    transform: none;
    box-shadow: none;
  }

  .status-item:hover {
    transform: none;
  }

  .stats-item:hover {
    transform: none;
  }

  /* 調整 footer */
  footer {
    font-size: 0.8rem;
    text-align: center;
    /* 手機上置中顯示 */
    padding: 0.5rem;
  }
}


/* ========== 響應式設計 - 平板版本 ========== */
@media (min-width: 700px) and (max-width: 1049px) {
  main {
    padding: 1.2rem 1.5rem;
  }

  /* 狀態網格 - 平板上使用 3x2 佈局 */
  .status-grid {
    display: grid !important;
    grid-template-columns: repeat(3, 1fr) !important;
    grid-template-rows: repeat(2, 1fr) !important;
    gap: 1rem !important;
    grid-auto-rows: minmax(80px, auto) !important;
  }

  /* 統計網格 - 平板上保持 4 欄，設定最小寬度 */
  .stats-grid {
    display: grid !important;
    /* 平板維持單行四欄，並允許子卡片自由縮放 */
    grid-template-columns: repeat(4, 1fr) !important;
    gap: 1rem !important;
    grid-auto-rows: minmax(80px, auto) !important;
    justify-items: stretch !important;
  }

  /* 平板版本統計卡片設定 */
  .stats-item {
    width: 100% !important;
    /* 填滿格線欄寬 */
    max-width: 160px !important;
    /* 與桌面版保持一致的最大寬度 */
    min-width: 0 !important;
    /* 解除下限，允許自動縮放 */
    height: 80px !important;
    /* 與桌面版保持一致 */
    font-size: 1.2rem !important;
    /* 與桌面版保持一致 */
    padding: 0.5rem 1rem !important;
    /* 與桌面版保持一致 */
  }

  /* 工具卡片保持並排，但間距稍小 */
  .tools-container {
    gap: 1.5rem;
  }

  /* 調整錯誤文字大小 - 平板版本 */
  .stats-item span.error-text {
    font-size: 1.1rem !important;
    min-height: auto !important;
    /* 覆蓋 span 的 min-height 設定 */
    line-height: 1.3 !important;
    /* 稍微緊縮行高 */
  }
}