/* test-ipv6 样式 - 简洁专业 */

* { box-sizing: border-box; margin: 0; padding: 0; }

body {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  background: #0d1117;
  color: #c9d1d9;
  line-height: 1.6;
  min-height: 100vh;
}

/* JS 警告 */
.warning {
  display: none;
  padding: 60px 20px;
  text-align: center;
  color: #f0883e;
  font-size: 1.1em;
  background: #1c2128;
  border: 1px solid #f0883e;
  border-radius: 8px;
  margin: 40px auto;
  max-width: 600px;
}

/* 导航 */
.nav {
  background: #161b22;
  padding: 12px 24px;
  display: flex;
  gap: 20px;
  border-bottom: 1px solid #30363d;
}
.nav a {
  color: #58a6ff;
  text-decoration: none;
  font-size: 0.95em;
}
.nav a:hover { text-decoration: underline; }

/* 主区域 */
.hero {
  text-align: center;
  padding: 60px 20px 40px;
  border-bottom: 1px solid #30363d;
}
.hero h1 {
  font-size: 2.2em;
  font-weight: 700;
  color: #f0f6fc;
  margin-bottom: 30px;
}

/* 大状态显示 */
.big-status {
  font-size: 1.4em;
  font-weight: 600;
  padding: 30px;
  border-radius: 12px;
  display: inline-block;
  min-width: 280px;
  background: #161b22;
  border: 1px solid #30363d;
}
.big-status .grade { font-size: 3em; font-weight: 700; }
.big-status .grade-desc { font-size: 0.85em; margin-top: 8px; color: #8b949e; }
.big-status .loader {
  font-size: 1.2em;
  color: #58a6ff;
  animation: pulse 1.5s ease-in-out infinite;
}
@keyframes pulse { 0%,100% { opacity:1; } 50% { opacity: 0.4; } }

/* 评分颜色 */
.grade-perfect  { color: #3fb950; border-color: #3fb950 !important; }
.grade-good     { color: #58a6ff; border-color: #58a6ff !important; }
.grade-partial  { color: #d29922; border-color: #d29922 !important; }
.grade-ipv4     { color: #f78166; border-color: #f78166 !important; }
.grade-fail     { color: #f85149; border-color: #f85149 !important; }

/* 分区 */
.section {
  max-width: 900px;
  margin: 0 auto;
  padding: 40px 20px;
  border-bottom: 1px solid #21262d;
}
.section h2 {
  font-size: 1.3em;
  color: #f0f6fc;
  margin-bottom: 20px;
  padding-bottom: 8px;
  border-bottom: 2px solid #30363d;
}
.section h2 a { color: inherit; text-decoration: none; }

/* 客服区 */
.help-desk {
  background: #161b22;
  border: 1px solid #30363d;
  border-radius: 8px;
  padding: 24px;
}
.help-summary { font-size: 1.2em; margin-bottom: 12px; }
.help-details { font-size: 0.9em; color: #8b949e; }

/* 测试项网格 */
.tests-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 16px;
}

.test-item {
  background: #161b22;
  border: 1px solid #21262d;
  border-radius: 8px;
  padding: 16px;
  transition: border-color 0.2s;
}
.test-item.status-running { border-color: #58a6ff; }
.test-item.status-pass    { border-color: #238636; }
.test-item.status-fail    { border-color: #da3633; }

.test-name { font-weight: 600; font-size: 0.95em; color: #f0f6fc; margin-bottom: 4px; }
.test-desc { font-size: 0.8em; color: #8b949e; margin-bottom: 10px; }

.test-status {
  display: inline-block;
  font-size: 0.8em;
  font-weight: 600;
  padding: 3px 10px;
  border-radius: 12px;
  margin-bottom: 6px;
}
.status-running { background: #1f3a5f; color: #58a6ff; }
.status-pass    { background: #1a3d2a; color: #3fb950; }
.status-fail    { background: #3d1a1a; color: #f85149; }
.status-pending { background: #21262d; color: #8b949e; }

.test-message { font-size: 0.82em; color: #8b949e; word-break: break-all; }

/* 页脚 */
footer {
  text-align: center;
  padding: 30px 20px;
  color: #8b949e;
  font-size: 0.85em;
}
footer a { color: #58a6ff; text-decoration: none; }
footer a:hover { text-decoration: underline; }

/* 响应式 */
@media (max-width: 600px) {
  .hero h1 { font-size: 1.6em; }
  .big-status { font-size: 1.1em; min-width: auto; width: 100%; }
  .tests-grid { grid-template-columns: 1fr; }
}

/* 简要测试 */
.simple-result {
  font-size: 1.2em;
  text-align: center;
  padding: 40px;
}
.simple-result .label { color: #8b949e; margin-bottom: 8px; }
.simple-result .value { font-size: 1.5em; font-weight: 700; }
.simple-result .value.pass { color: #3fb950; }
.simple-result .value.fail { color: #f85149; }

/* FAQ */
.faq-item {
  margin-bottom: 20px;
  padding: 16px;
  background: #161b22;
  border-radius: 8px;
}
.faq-item h3 { color: #f0f6fc; margin-bottom: 8px; font-size: 1em; }
.faq-item p { color: #8b949e; font-size: 0.9em; }