/* ============================================================
 * style.css —— 汽车召回查询网（仅本站使用）
 * 深灰 + 警示黄公告检索风格：深灰横幅（底部警示斜纹装饰条）+
 * 公文硬投影查询卡 + 黄底黑字按钮 + fields 公告条目卡（黄底黑字标签徽章）。
 * ============================================================ */
:root {
  --zc-dark: #374151;      /* 主深灰 */
  --zc-darker: #1f2937;    /* 更深灰（页脚/横幅深端） */
  --zc-yellow: #ca8a04;    /* 警示黄 */
  --zc-yellow-bright: #fbbf24; /* 亮黄（深底强调） */
  --zc-bg: #f9fafb;        /* 页面底 */
  --zc-card: #ffffff;
  --zc-text: #111827;
  --zc-muted: #6b7280;
  --zc-line: #e5e7eb;
  --zc-warn-soft: #fffbeb; /* 浅警示底 */
  --zc-warn-line: #fde68a;
}
* { box-sizing: border-box; }
body {
  margin: 0; background: var(--zc-bg); color: var(--zc-text);
  font-family: system-ui, -apple-system, "PingFang SC", "Microsoft YaHei", "Noto Sans CJK SC", sans-serif;
  line-height: 1.6;
}
.zc-wrap { max-width: 760px; margin: 0 auto; padding: 0 16px; }
a { color: inherit; }

/* ---------- 品牌条：深灰横幅 + 底部警示黄斜纹装饰 ---------- */
.zc-top {
  position: relative;
  background: linear-gradient(160deg, var(--zc-dark), var(--zc-darker) 80%);
  color: #fff; padding: 20px 0 30px;
}
.zc-top::after {
  content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 8px;
  background: repeating-linear-gradient(-45deg, var(--zc-yellow) 0 14px, rgba(255, 255, 255, .1) 14px 28px);
}
.zc-top-row { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.zc-brand { margin: 0; font-size: 22px; font-weight: 800; letter-spacing: 1px; }
.zc-brand b { color: var(--zc-yellow-bright); }
.zc-slogan { margin: 4px 0 0; font-size: 13px; color: #d1d5db; }
.zc-warn {
  flex: 0 0 auto; margin: 0; text-align: center; font-size: 11.5px; color: #fde68a; line-height: 1.7;
  border: 1px solid rgba(251, 191, 36, .45); border-radius: 4px; padding: 8px 10px; max-width: 190px;
  background: rgba(202, 138, 4, .14);
}
@media (max-width: 520px) { .zc-warn { display: none; } }

/* ---------- 广告位（≤90px） ---------- */
.zc-ad {
  min-height: 60px; max-height: 90px; margin: 14px 0;
  border: 1px dashed var(--zc-line); border-radius: 4px;
  display: flex; align-items: center; justify-content: center;
  color: var(--zc-muted); font-size: 12.5px; background: var(--zc-card); overflow: hidden;
}

/* ---------- 查询面板：公文卡（2px 深灰描边 + 硬投影） ---------- */
.zc-hero { padding: 12px 0 4px; }
.zc-hero h1 { font-size: 24px; margin: 0 0 6px; color: var(--zc-text); }
.zc-hero h1 b { color: var(--zc-yellow); }
.zc-sub { margin: 0 0 14px; font-size: 14px; color: var(--zc-muted); }
.zc-card {
  background: var(--zc-card); border: 2px solid var(--zc-dark); border-radius: 4px; padding: 20px;
  box-shadow: 5px 5px 0 rgba(55, 65, 81, .12);
}
.zc-filters { display: flex; gap: 12px; }
.zc-field { display: flex; flex-direction: column; gap: 6px; }
.zc-field-grow { flex: 1; }
.zc-label { font-size: 12.5px; font-weight: 600; color: var(--zc-muted); }
.zc-city, .zc-area {
  height: 46px; padding: 0 12px; border: 1.5px solid var(--zc-line); border-radius: 2px;
  font-size: 15px; color: var(--zc-text); background: #fff; outline: none; min-width: 0; font-family: inherit;
}
.zc-city:focus, .zc-area:focus { border-color: var(--zc-yellow); }
.zc-city {
  appearance: none; -webkit-appearance: none; padding-right: 32px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5l5 5 5-5' fill='none' stroke='%23374151' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 10px center;
}

/* ---------- 日期胶囊 chips（方角标签形，选中黄底黑字） ---------- */
.zc-days { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }
.zc-chip {
  padding: 6px 16px; border: 1.5px solid var(--zc-line); border-radius: 2px;
  background: #fff; font-size: 13px; color: var(--zc-text); cursor: pointer; font-family: inherit; font-weight: 600;
}
.zc-chip:hover { border-color: var(--zc-yellow); color: var(--zc-yellow); }
.zc-chip[aria-pressed="true"] { background: var(--zc-yellow); border-color: var(--zc-yellow); color: #1c1917; }

/* ---------- 操作按钮：黄底黑字方角主按钮 + 深灰描边次按钮 ---------- */
.zc-actions { display: flex; gap: 10px; margin-top: 16px; }
.zc-btn-main {
  min-width: 132px; height: 46px; border: none; border-radius: 2px;
  background: var(--zc-yellow); color: #111827; font-size: 16px; font-weight: 800;
  letter-spacing: 4px; text-indent: 4px; cursor: pointer;
}
.zc-btn-main:hover { background: var(--zc-yellow-bright); }
.zc-btn-main:disabled { opacity: .5; cursor: not-allowed; }
.zc-btn-ghost {
  height: 46px; padding: 0 18px; border: 2px solid var(--zc-dark); border-radius: 2px;
  background: #fff; color: var(--zc-dark); font-size: 14px; font-weight: 600; cursor: pointer;
}
.zc-btn-ghost:hover { background: var(--zc-dark); color: #fff; }

/* ---------- 维护横条 ---------- */
.zc-banner {
  display: none; margin: 14px 0 0; padding: 10px 14px; border-radius: 2px;
  font-size: 13px; font-weight: 600; background: var(--zc-warn-soft);
  border: 1px solid var(--zc-yellow); border-left-width: 4px; color: #78350f;
}

/* ---------- 四态面板（data-state 控制显隐） ---------- */
.zc-panel { margin-top: 4px; }
.zc-panel-default, .zc-panel-loading, .zc-panel-result, .zc-panel-empty { display: none; }
.zc-panel[data-state="idle"] .zc-panel-default { display: block; }
.zc-panel[data-state="loading"] .zc-panel-loading { display: flex; align-items: center; justify-content: center; gap: 10px; }
.zc-panel[data-state="result"] .zc-panel-result { display: block; }
.zc-panel[data-state="empty"] .zc-panel-empty { display: block; }
.zc-hint { margin: 16px 0 2px; text-align: center; font-size: 13.5px; color: var(--zc-muted); }
.zc-panel-loading { margin-top: 16px; color: var(--zc-muted); font-size: 14px; }
.zc-spin {
  width: 18px; height: 18px; border: 3px solid var(--zc-warn-line); border-top-color: var(--zc-yellow);
  border-radius: 50%; animation: zc-spin .8s linear infinite;
}
@keyframes zc-spin { to { transform: rotate(360deg); } }

/* ---------- 结果态：公告 headline + 公告条目列表（标签黄底黑字徽章） ---------- */
.zc-result-headline {
  margin: 16px 0 0; font-size: 16.5px; color: var(--zc-text);
  padding-left: 10px; border-left: 4px solid var(--zc-yellow);
}
.zc-result-headline strong { color: var(--zc-dark); font-size: 19px; margin-right: 4px; }
.zc-notice-date { color: var(--zc-muted); font-size: 13px; }
.zc-notices { display: flex; flex-direction: column; gap: 8px; margin: 14px 0 2px; }
.zc-entry {
  display: flex; align-items: flex-start; gap: 10px; padding: 9px 12px;
  background: var(--zc-card); border: 1px solid var(--zc-line); border-left: 4px solid var(--zc-yellow);
  border-radius: 3px;
}
.zc-tag {
  flex: 0 0 auto; display: inline-block; padding: 2px 8px; margin-top: 1px;
  font-size: 12px; font-weight: 700; line-height: 1.6; color: #1c1917;
  background: var(--zc-yellow); border-radius: 2px; white-space: nowrap;
}
.zc-val { font-size: 13.5px; color: var(--zc-text); line-height: 1.75; }
/* 强调条目（召回批次）：浅警示底 + 数值加重 */
.zc-entry-hot { background: var(--zc-warn-soft); border-color: var(--zc-warn-line); }
.zc-entry-hot .zc-val { font-weight: 800; font-size: 15px; color: #78350f; }
.zc-area-note {
  display: none; margin: 12px 0 0; padding: 8px 12px; border-radius: 2px;
  font-size: 13px; color: #78350f; background: var(--zc-warn-soft); border: 1px dashed var(--zc-warn-line);
}
.zc-result-meta {
  margin: 14px 0 0; padding-top: 10px; border-top: 1px dashed var(--zc-line);
  font-size: 12.5px; color: var(--zc-muted);
}
.zc-result-meta .zc-src { color: var(--zc-dark); font-weight: 600; }
.zc-result-meta .zc-note { color: var(--zc-muted); }

/* ---------- 无结果态 ---------- */
.zc-panel-empty { margin-top: 18px; text-align: center; padding: 6px 0 2px; }
.zc-empty-title { margin: 0 0 6px; font-size: 16px; font-weight: 700; color: var(--zc-text); }
.zc-empty-sub { margin: 0 0 14px; font-size: 13.5px; color: var(--zc-muted); }
.zc-btn-sub {
  height: 42px; padding: 0 20px; border: 2px solid var(--zc-yellow); border-radius: 2px;
  background: var(--zc-yellow); color: #111827; font-size: 14px; font-weight: 700; cursor: pointer;
}
.zc-btn-sub:hover { background: var(--zc-yellow-bright); border-color: var(--zc-yellow-bright); }
.zc-empty-link { display: inline-block; margin-left: 12px; font-size: 13.5px; color: var(--zc-dark); text-decoration: none; font-weight: 600; }
.zc-empty-link:hover { color: var(--zc-yellow); text-decoration: underline; }

/* ---------- 相关查询（黄底斜纹浅饰标题条） ---------- */
.zc-links { margin: 26px 0 8px; }
.zc-links h2, .zc-content h2, .zc-cities h2 {
  font-size: 16px; margin: 0 0 10px; color: var(--zc-dark);
  padding: 6px 10px; border-left: 4px solid var(--zc-yellow);
  background: linear-gradient(90deg, var(--zc-warn-soft), rgba(255, 251, 235, 0));
}
.zc-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.zc-chips a {
  padding: 7px 14px; background: #fff; border: 1px solid var(--zc-line);
  border-radius: 2px; font-size: 13.5px; text-decoration: none; color: var(--zc-text); font-weight: 500;
}
.zc-chips a:hover { border-color: var(--zc-yellow); color: #78350f; background: var(--zc-warn-soft); }

/* ---------- FAQ 内容区（构建期生成，类名 zc-content / zc-ai-badge / zc-src-note） ---------- */
.zc-content {
  margin: 26px 0; background: #fff; border: 1px solid var(--zc-line);
  border-radius: 4px; padding: 18px 20px;
}
.zc-content article { margin-bottom: 14px; }
.zc-content article:last-child { margin-bottom: 0; }
.zc-content h3 { font-size: 14.5px; margin: 0 0 6px; }
.zc-content p { font-size: 13.5px; color: #4b5563; margin: 0 0 4px; }
.zc-src-note { font-size: 12px; color: var(--zc-muted); }
.zc-ai-badge {
  display: inline-block; padding: 1px 8px; margin-left: 6px;
  font-size: 11px; font-weight: 700; vertical-align: 1px;
  color: #78350f; background: var(--zc-warn-soft); border: 1px solid var(--zc-warn-line); border-radius: 2px;
}

/* ---------- 品牌查询矩阵 ---------- */
.zc-cities { margin: 26px 0; }
.zc-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(104px, 1fr)); gap: 8px; }
.zc-grid a {
  padding: 10px 6px; text-align: center; background: #fff; border: 1px solid var(--zc-line);
  border-radius: 2px; font-size: 13.5px; text-decoration: none; color: var(--zc-text); font-weight: 600;
}
.zc-grid a:hover { border-color: var(--zc-yellow); color: #78350f; background: var(--zc-warn-soft); }

/* ---------- 合规页脚（构建期生成：zc-foot / zc-links / zc-disc / zc-src / zc-ai；深灰底） ---------- */
.zc-foot { background: var(--zc-darker); color: #d1d5db; margin-top: 26px; }
.zc-foot .zc-wrap { padding-top: 24px; padding-bottom: 32px; }
.zc-foot .zc-links { display: flex; flex-wrap: wrap; gap: 6px 18px; margin: 0 0 10px; font-size: 13px; }
.zc-foot a { color: #e5e7eb; text-decoration: none; }
.zc-foot a:hover { color: var(--zc-yellow-bright); text-decoration: underline; }
.zc-foot .zc-strong { font-weight: 600; color: #fff; }
.zc-foot .zc-disc, .zc-foot .zc-src, .zc-foot .zc-ai { margin: 0 0 6px; font-size: 12.5px; color: #9ca3af; line-height: 1.9; }

/* ---------- 移动适配 ---------- */
@media (max-width: 520px) {
  .zc-card { padding: 16px 14px; }
  .zc-filters { flex-direction: column; }
  .zc-btn-main { flex: 1; min-width: 0; }
  .zc-entry { flex-direction: column; gap: 4px; }
  .zc-tag { align-self: flex-start; }
  .zc-grid { grid-template-columns: repeat(auto-fill, minmax(88px, 1fr)); }
}