/* --- 全局与布局 --- */
body {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif;
  background-color: #f4f7f9;
  color: #333;
  margin: 0;
  padding: 40px 20px;
  display: flex;
  justify-content: center;
  align-items: flex-start;
  min-height: 100vh;
}

.container {
  width: 100%;
  max-width: 800px;
  background-color: #ffffff;
  padding: 30px 40px;
  border-radius: 12px;
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.08);
}

h2 {
  color: #1a253c;
  text-align: center;
  margin-bottom: 30px;
  font-weight: 600;
}

/* --- 表单元素 --- */
.form-group {
  display: flex;
  gap: 10px;
  margin-bottom: 20px;
}

input[type="text"],
textarea {
  flex-grow: 1;
  padding: 12px 15px;
  border: 1px solid #dcdfe6;
  border-radius: 8px;
  font-size: 16px;
  transition: border-color 0.3s, box-shadow 0.3s;
}

input[type="text"]:focus,
textarea:focus {
  outline: none;
  border-color: #409eff;
  box-shadow: 0 0 0 2px rgba(64, 158, 255, 0.2);
}

textarea {
    height: 180px;
    resize: vertical;
}

.button-group {
    display: flex;
    gap: 15px;
    margin-top: 15px;
}

button {
  padding: 12px 25px;
  font-size: 16px;
  font-weight: 500;
  border: none;
  border-radius: 8px;
  cursor: pointer;
  transition: background-color 0.3s, transform 0.1s;
}

button:active {
    transform: scale(0.98);
}

.btn-primary {
  background-color: #409eff;
  color: white;
}

.btn-primary:hover {
  background-color: #66b1ff;
}

.btn-secondary {
  background-color: #6c757d;
  color: white;
}

.btn-secondary:hover {
  background-color: #868e96;
}

.btn-success {
    background-color: #67c23a;
    color: white;
}
.btn-success:hover {
    background-color: #85ce61;
}

/* --- 结果表格 (批量查询) --- */
.table-container {
    margin-top: 30px;
    overflow-x: auto; /* 保证在小屏幕上可以滚动 */
}

#resultTable {
  border-collapse: collapse;
  width: 100%;
  font-size: 14px;
}

#resultTable th,
#resultTable td {
  border: 1px solid #e0e6ed;
  padding: 12px 15px;
  text-align: left;
}

#resultTable thead th {
  background-color: #f5f7fa;
  color: #555;
  font-weight: 600;
}

#resultTable tbody tr:nth-of-type(even) {
  background-color: #fcfcfd;
}

#resultTable tbody tr:hover {
  background-color: #ecf5ff;
}

/* 失败/错误行高亮 */
#resultTable td.status-error {
    color: #f56c6c;
    font-weight: 500;
}

/* 导航链接 */
.nav-link {
    display: block;
    text-align: center;
    margin-top: 25px;
    color: #409eff;
    text-decoration: none;
    transition: color 0.3s;
}
.nav-link:hover {
    color: #66b1ff;
}

/* --- 新增：用于居中的样式 --- */

/* 用于包裹输入控件和按钮的容器 */
.form-center-container {
  display: flex;
  flex-direction: column;
  align-items: center; /* 核心：让内部元素水平居中 */
  gap: 15px; /* 设置元素之间的垂直间距 */
  margin-bottom: 20px;
}

/* 针对单卡查询的输入框和按钮组 */
.form-center-container .form-group {
  width: 100%;
  max-width: 500px; /* 限制单行输入框的最大宽度，避免在宽屏上过长 */
  margin-bottom: 0; /* 覆盖原有的 margin */
}

/* 针对批量查询的文本域 */
.form-center-container textarea {
  width: 100%;
  max-width: 500px; /* 同样限制文本域的最大宽度 */
  height: 200px;
}

/* 针对批量查询的按钮组 */
.form-center-container .button-group {
  margin-top: 0; /* 覆盖原有的 margin */
}

/* --- 新增：单卡查询结果列表样式 --- */
.result-list {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif;
  border: 1px solid #e0e6ed;
  border-radius: 8px;
  padding: 10px 25px;
  background-color: #fcfcfd;
}

.result-list-item {
  display: flex;
  align-items: center;
  padding: 12px 0;
  border-bottom: 1px solid #f0f2f5;
  font-size: 15px;
  line-height: 1.6;
}

.result-list-item:last-child {
  border-bottom: none;
}

.result-list-item dt {
  font-weight: 600;
  color: #606266; /* 标签颜色 */
  width: 100px;   /* 固定标签宽度，让冒号对齐 */
  flex-shrink: 0; /* 防止标签被压缩 */
}

.result-list-item dd {
  margin-left: 20px;
  color: #303133; /* 内容颜色 */
  word-break: break-all; /* 防止长数字溢出 */
}

/* --- 響應式設計：針對手機等小螢幕裝置 --- */
@media (max-width: 768px) {
    body {
        padding: 20px 10px; /* 減小頁面邊距 */
    }

    .container {
        padding: 20px; /* 減小容器內邊距 */
    }

    h2 {
        font-size: 24px; /* 調整標題大小 */
    }

    /* 讓單卡查詢的輸入框和按鈕在小螢幕下獨佔一行 */
    .form-center-container .form-group {
        flex-direction: column;
        max-width: 100%;
    }

    input[type="text"],
    button {
        font-size: 15px; /* 統一調整字體大小 */
    }

    /* 核心：優化單卡查詢結果的列表顯示 */
    /* 在小螢幕上，標籤(dt)和內容(dd)不再並排，而是上下堆疊顯示 */
    .result-list-item {
        flex-direction: column;
        align-items: flex-start; /* 左對齊 */
        padding: 8px 0;
    }

    .result-list-item dt {
        width: auto; /* 寬度自適應 */
        font-weight: 600; /* 加粗標籤以作區分 */
    }

    .result-list-item dd {
        margin-left: 0; /* 移除左邊距 */
        padding-top: 4px; /* 與標籤間增加一點距離 */
        color: #007bff; /* 讓內容更突出 */
    }

    /* 減小表格單元格的內邊距，讓批量查詢的表格能顯示更多內容 */
    #resultTable th,
    #resultTable td {
        padding: 8px 10px;
    }
}