/*
 文件名: app.css
 路径: /assets/css/app.css
 上次版本号: v0.1.2
 本次版本号: v0.1.6
 升级时间: 2025-11-03 02:20:00
*/

body{font-family:system-ui,-apple-system,Segoe UI,Roboto,Arial,Helvetica,sans-serif;margin:0;padding:0;background:#f6f8fa;color:#333}
header{background:#223; color:#fff; padding:12px 16px; display:flex; align-items:center; justify-content:space-between}
header, section.filters, section.results{max-width:720px; margin:0 auto}
section.home-banner{max-width:720px; margin:0 auto; padding:12px 16px}
section.home-banner .home-banner-inner{background:#fffbe6; border:1px solid #f0e1a0; color:#6b5500; padding:10px 12px; border-radius:8px}
header h1{font-size:24px; line-height:1.25; margin:0}
header a{color:#9cf; text-decoration:none; margin-left:12px}
header nav a{white-space:nowrap}
section.filters, section.results{padding:16px}
.filter-row{display:grid; grid-template-columns:1fr; gap:8px; align-items:center; margin-bottom:10px}
.filter-row label{font-weight:600; word-break:break-word}
.filter-row input{width:100%; padding:10px 12px; font-size:16px; border:1px solid #ccc; border-radius:6px; box-sizing:border-box}
.filter-row input:focus{border-color:#2c7; outline:none; box-shadow:0 0 0 2px rgba(34,204,119,.20)}
.filter-row.active label{color:#2c7}
.filter-row.active input{border-color:#2c7; box-shadow:0 0 0 2px rgba(34,204,119,.20); font-weight:600}
.filter-actions{margin-top:8px; position:sticky; bottom:0; background:#fff; padding:10px 12px; border-top:1px solid #eee; display:flex; gap:10px; z-index:5}
.filter-actions button{padding:10px 14px; font-size:16px; border-radius:6px; border:1px solid #ccc; background:#f7f7f7}
.filter-actions button[type="submit"]{background:#2c7; color:#fff; border-color:#2c7}
table{width:100%; border-collapse:collapse; background:#fff}
th,td{border:1px solid #ddd; padding:6px 8px; text-align:left; font-size:14px}
th{background:#f0f3f7}
.num-green{color:#2c7; font-weight:700}
.pagination{margin-top:8px; display:flex; gap:12px; align-items:center}
.hint{color:#888; margin-left:8px}
.error{color:#b00}
.success{color:#080}
.empty{text-align:center; color:#666}

/* 响应式：手机端竖向卡片布局 */
@media (max-width: 768px) {
  table.result-table{border-collapse:separate; border-spacing:0}
  table.result-table thead{display:none}
  table.result-table tr{display:block; margin-bottom:12px; border:1px solid #ddd; background:#fff}
  table.result-table td{display:flex; justify-content:space-between; align-items:flex-start; padding:10px 12px; border:none; border-bottom:1px solid #eee}
  table.result-table td::before{content:attr(data-label); font-weight:600; color:#555; margin-right:10px; min-width:40%}
  table.result-table td:last-child{border-bottom:none}
}

/* 响应式：宽屏将表单布局为两列 */
@media (min-width: 540px) {
  .filter-row{grid-template-columns: 220px 1fr}
  .filter-row .hint{grid-column: 1 / -1; margin-left:0; color:#666}
}

/* 移动端：头部与提示语折行优化 */
@media (max-width: 540px) {
  header{flex-direction:column; align-items:flex-start; gap:6px}
  header nav{width:100%}
  header nav a{display:block; background:rgba(255,255,255,.08); padding:6px 8px; border-radius:4px}
  header h1{font-size:22px}
  .hint{margin-left:0}
}

/* 子标题折行与弱化 */
header h1 .sub{display:block; font-size:.92em; font-weight:400; color:#ccd; margin-top:4px}
.filter-actions{flex-wrap:wrap}

/* 桌面端：取消内容区域宽度限制，全屏布局 */
@media (min-width: 1024px) {
  header, section.filters, section.results, section.home-banner{max-width:100%; margin:0}
}