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

body {
  font-family: "Microsoft YaHei", "PingFang SC", sans-serif;
  background: #f4f6f8;
  color: #26303b;
  line-height: 1.6;
}

.container { max-width: 860px; margin: 0 auto; padding: 24px 16px 60px; }

header { margin-bottom: 20px; }
header h1 { font-size: 24px; color: #1d2733; }
.meta { font-size: 13px; color: #7a8699; margin-top: 4px; }
.meta a { color: #2f6fed; text-decoration: none; }

.card {
  background: #fff;
  border-radius: 10px;
  padding: 20px;
  margin-bottom: 16px;
  box-shadow: 0 1px 3px rgba(16, 35, 60, .08);
}
.card h2 { font-size: 16px; margin-bottom: 12px; color: #33404f; }

textarea, input[type="text"] {
  width: 100%;
  padding: 10px 12px;
  border: 1px solid #d4dbe4;
  border-radius: 8px;
  font-size: 14px;
  font-family: Consolas, monospace;
  resize: vertical;
  background: #fafbfc;
}
textarea:focus, input[type="text"]:focus {
  outline: none;
  border-color: #2f6fed;
  background: #fff;
}

.actions { margin-top: 12px; display: flex; align-items: center; gap: 12px; }
.search-row { display: flex; gap: 10px; }
.search-row input { flex: 1; }

.btn {
  padding: 9px 22px;
  border: none;
  border-radius: 8px;
  font-size: 14px;
  cursor: pointer;
  transition: opacity .15s;
}
.btn:hover { opacity: .88; }
.btn.primary { background: #2f6fed; color: #fff; }
.btn.ghost { background: #eef1f5; color: #3c4a5a; }

.tip { font-size: 13px; color: #7a8699; }

.results { margin-top: 14px; }
.result-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 9px 12px;
  border-bottom: 1px solid #eef1f5;
  font-size: 14px;
}
.result-row:last-child { border-bottom: none; }
.r-card { font-family: Consolas, monospace; font-weight: 600; min-width: 160px; word-break: break-all; }
.r-state { min-width: 90px; }
.r-detail { color: #5b6b7d; font-size: 13px; flex: 1; word-break: break-all; }

.badge {
  display: inline-block;
  padding: 2px 10px;
  border-radius: 12px;
  font-size: 12px;
  font-weight: 600;
}
.badge-online   { background: #e3f6ee; color: #0e9f6e; }
.badge-offline  { background: #e8f1ff; color: #2f6fed; }
.badge-invalid  { background: #fdeaea; color: #d64545; }
.badge-error    { background: #fdf3e3; color: #c47a0a; }
.badge-unknown  { background: #eef1f5; color: #5b6b7d; }
.badge-pending  { background: #f0f4fa; color: #7a8699; }

.table { width: 100%; border-collapse: collapse; font-size: 13px; }
.table th, .table td {
  text-align: left;
  padding: 8px 10px;
  border-bottom: 1px solid #eef1f5;
  vertical-align: top;
}
.table th { color: #7a8699; font-weight: 600; white-space: nowrap; }
.td-detail { color: #5b6b7d; word-break: break-all; }
.empty { text-align: center; color: #aab4c0; padding: 24px 0; }