.container{
  max-width: 1200px;
  margin: 0 auto;
  width: 90%;
  padding: 20px;
  text-align: center;
}

.result-section{
  max-width: 1200px;
  margin: 0 auto;
  width: 90%;
  padding: 20px;
}

h2 {
  color: #2c5282;
  font-size: 1.8rem;
  margin-bottom: 10px;
}

.subtitle {
  color: #777;
  font-size: 0.9rem;
  margin-bottom: 30px; /* 增加与输入区的间距 */
}

/* 重新定义 .search-form 的布局 */
.search-form {
  display: flex;
  flex-direction: column; /* 垂直堆叠 */
  gap: 12px; /* 行间距 */
  align-items: flex-start; /* 左对齐 */
  width: 100%;
}

/* 标签样式（单独一行） */
.search-form label {
  font-weight: 600;
  color: #333;
  margin-bottom: 0; /* 移除默认间距 */
}

/* 输入框全宽 */
.search-form input[type="text"] {
  width: 100%;
  padding: 12px 15px;
  border: 1px solid #ddd;
  border-radius: 6px;
  font-size: 1rem;
  transition: border-color 0.2s;
}

.search-form input[type="text"]:focus {
  outline: none;
  border-color: #2c5282;
  box-shadow: 0 0 0 2px rgba(44, 82, 130, 0.15);
}

/* 提示文字靠右 */
.hint-text {
  font-size: 0.8rem;
  color: #666;
  text-align: right;
  margin-top: 0;
  margin-bottom: 0;
  width: 100%; /* 确保占满宽度 */
  font-style: italic; /* 添加倾斜效果 */
}

/* 按钮组居中 */
.button-group {
  display: flex;
  gap: 12px;
  justify-content: center;
  width: 100%;
  margin-top: 10px;
}

.button-group button {
  padding: 10px 24px;
  font-size: 1rem;
  font-weight: 600;
  border: none;
  border-radius: 6px;
  cursor: pointer;
  transition: background 0.2s;
}

.button-group button:first-child {
  background-color: #2dc997;
  color: white;
}

.button-group button:first-child:hover {
  background-color: #25a77d;
}

.button-group button:last-child {
  background-color: #e0e0e0;
  color: #333;
}

.button-group button:last-child:hover {
  background-color: #ccc;
}

/* 查询结果区域 */
.result-section {
  margin-top: 30px;
  text-align: center;
}

.result-section h2 {
  color: #2c5282;
  font-size: 1.4rem;
  margin-bottom: 15px;
  text-align: left;
}

.result-count {
  font-weight: bold;
  color: #e74c3c;
}

.error {
  color: #e74c3c;
  font-size: 0.9rem;
  margin: 10px 0;
}

.no-results {
  color: #777;
  font-style: italic;
  margin: 20px 0;
}

/* 表格容器 */
.table-container {
  max-width: 1200px;
  margin: 0 auto;
  overflow-x: auto; /* 横向滚动 */
  border-radius: 8px;
  box-shadow: 0 2px 10px rgba(0,0,0,0.08);
  background: white;
  margin-top: 20px;
}

/* 数据表格 */
.data-table {
  width: 100%;
  border-collapse: collapse; /* 关键：合并边框 */
  margin: 0;
  font-size: 0.95rem;
  table-layout: fixed; /* 可选：让列宽更均匀 */
}

.data-table th,
.data-table td {
  padding: 12px 10px;
  text-align: center;        /* 水平居中 */
  vertical-align: middle;    /* 垂直居中 */
  border: 1px solid #ddd;    /* 四周都有边框！ */
  word-wrap: break-word;
}

.data-table th {
  background-color: #f0f2f5;
  color: #333;
  font-weight: 600;
  font-size: 0.95rem;
}

.data-table tr:hover {
  background-color: #f8f9fa;
}

.data-table tr:last-child td {
  border-bottom: none;
}

/* 呼号链接 */
.callsign-link {
  color: #2c5282;
  text-decoration: none;
  font-weight: 500;
}

.callsign-link:hover {
  text-decoration: underline;
  color: #1a365d;
}

        /* 移动端提示样式 */
        .mobile-hint {
            display: none;
            background-color: #fff3cd;
            color: #856404;
            padding: 10px 15px;
            border: 1px solid #ffeeba;
            border-radius: 4px;
            margin-bottom: 15px;
            font-weight: 500;
            text-align: center;
        }

        /* ========== 全局列宽定义（PC端默认） ========== */
        /* 显示列 */
        .col-serial { width: 5%; }    /* 序号 */
        .col-date { width: 9%; }     /* 通联日期 */
        .col-rank { width: 5%; }      /* 位次 */
        .col-callsign { width: 8%; }  /* 呼号 */
        .col-time { width: 8%; }      /* 通联时间 */
        .col-op { width: 8%; }        /* 值机主控 */
        
        /* 移动端隐藏列（仅PC端生效） */
        .col-qth { width: 15%; }      /* QTH */
        .col-device { width: 15%; }   /* 设备 */
        .col-power { width: 5%; }     /* 功率 */
        .col-access { width: 8%; }    /* 接入方式 */
        
        /* ========== 提示文本适配移动端 ========== */
        .hint-text .pc-text { display: inline; }    /* PC端显示 */
        .hint-text .mobile-text { display: none; }  /* 移动端默认隐藏 */
        
        /* ========== 媒体查询 - 移动端（≤768px） ========== */
        @media (max-width: 768px) {
            .mobile-hint {
                display: block;
            }
            /* 隐藏移动端不需要的列 */
            .hide-on-mobile {
                display: none !important;
            }
            /* 移动端列宽精细化调整 */
            .col-date { 
                width: 19% !important;              /* 通联日期：重点加宽，避免换行 */
                white-space: nowrap;                /* 强制不换行 */
                text-overflow: ellipsis;            /* 超长时显示省略号 */
                overflow: hidden;
            }     
            .col-rank { width: 9% !important; }      /* 位次：缩窄，减少浪费 */
            .col-time { width: 15% !important; }     /* 通联时间：保持 */
            .col-op { width: 18% !important; }       /* 值机主控：保持 */
            
            /* 移动端表格整体优化 */
            .data-table {
                width: 100%;
                table-layout: fixed; /* 固定表格布局，确保列宽生效 */
            }
            .data-table th, .data-table td {
                padding: 8px 5px !important;
                font-size: 13px !important;
                line-height: 1.2;
            }
            .table-container {
                overflow-x: auto; /* 允许横向滚动 */
                -webkit-overflow-scrolling: touch; /* 移动端顺滑滚动 */
                margin: 0 -10px; /* 增加左右边距，避免内容贴边 */
                padding: 0 10px;
            }
            /* 优化移动端查询结果标题 */
            .result-section h2 {
                font-size: 18px;
                line-height: 1.4;
                padding: 0 10px;
            }
            
            /* ========== 移动端提示文本切换（核心新增） ========== */
            .hint-text .pc-text { display: none; }    /* 隐藏PC端文本 */
            .hint-text .mobile-text { display: inline; }  /* 显示移动端文本 */
            .hint-text {
                font-size: 12px; /* 移动端文字更小，适配小屏 */
                padding: 0 5px;
            }
        }

        /* ========== PC端（≥769px） ========== */
        @media (min-width: 769px) {
            /* 强制显示所有隐藏列 */
            .hide-on-mobile {
                display: table-cell !important;
            }
            /* 恢复PC端表格布局 */
            .data-table {
                table-layout: auto; 
                width: 100%;
            }
            /* PC端单元格样式 */
            .data-table th, .data-table td {
                padding: 8px;
                box-sizing: border-box;
            }
        }