/**
 * 防雷网 - 防雷资质查询页专用样式（完整版 + 响应式）
 * 文件：/skin/zz.css
 * 蓝工业风、政务风、无卡通元素；PC 优先 + 移动端自适应。
 */

:root{
  --zz-primary:#1565c0;
  --zz-primary-d:#0d3b82;
  --zz-primary-l:#e8f1fb;
  --zz-ink:#1f2d3d;
  --zz-sub:#5b6b7b;
  --zz-line:#e3e9f0;
  --zz-bg:#f3f7fc;
  --zz-warn-bg:#fff3e0;
  --zz-warn-bd:#ffb74d;
  --zz-warn-ink:#b45309;
  --zz-valid:#2e7d32;  --zz-valid-bg:#e8f5e9;
  --zz-exp:#e65100;    --zz-exp-bg:#fff3e0;
  --zz-cancel:#757575; --zz-cancel-bg:#eeeeee;
}

.zz-wrap{
  max-width:1200px;
  margin:0 auto;
  padding:22px 20px 40px;
  color:var(--zz-ink);
  font-size:15px;
  line-height:1.7;
}

/* ════ 顶部橙色警示条（常驻） ════ */
.zz-alert{
  display:flex; align-items:flex-start; gap:12px;
  background:var(--zz-warn-bg);
  border:1px solid var(--zz-warn-bd);
  border-left:5px solid #ef6c00;
  border-radius:10px;
  padding:14px 18px;
  margin-bottom:22px;
}
.zz-alert > i{ color:#ef6c00; font-size:20px; margin-top:2px; flex:0 0 auto; }
.zz-alert-txt{ font-size:14px; color:var(--zz-warn-ink); }
.zz-alert-txt b{ color:#c2410c; }

/* ════ 标题 ════ */
.zz-h1{
  font-size:26px; font-weight:800; color:var(--zz-ink);
  display:flex; align-items:center; gap:10px; margin:6px 0 18px;
}
.zz-h1 > i{ color:var(--zz-primary); }
.zz-h1 span{
  font-size:14px; font-weight:600; color:var(--zz-primary);
  background:var(--zz-primary-l); padding:4px 12px; border-radius:20px;
}
.zz-block{ margin-bottom:26px; }
.zz-h2{
  font-size:20px; font-weight:700; color:var(--zz-primary-d);
  display:flex; align-items:center; gap:9px;
  padding-bottom:10px; margin:0 0 14px;
  border-bottom:2px solid var(--zz-primary);
}
.zz-h2 > i{ color:var(--zz-primary); }
.zz-h2-sub{ font-size:13px; font-weight:500; color:var(--zz-sub); border:1px solid var(--zz-line); border-radius:14px; padding:2px 10px; }
.zz-lead{ font-size:14px; color:var(--zz-sub); margin:0 0 16px; }
.zz-lead b{ color:var(--zz-primary); }

/* ════ 模块一：双官方卡片 ════ */
.zz2-grid{ display:grid; grid-template-columns:1fr 1fr; gap:18px; }
.zz-off-card{
  background:#fff; border:1px solid var(--zz-line); border-radius:12px;
  padding:20px; display:flex; flex-direction:column; gap:12px;
  box-shadow:0 2px 10px rgba(21,101,192,.05);
}
.zz-off-head{ display:flex; align-items:center; gap:12px; }
.zz-off-head > i{
  width:44px; height:44px; border-radius:10px; flex:0 0 auto;
  display:flex; align-items:center; justify-content:center;
  font-size:20px; color:#fff; background:linear-gradient(135deg,#1e88e5,#0d3b82);
}
.zz-off-title{ font-size:17px; font-weight:700; }
.zz-off-sub{ font-size:12.5px; color:var(--zz-sub); }
.zz-off-desc{ font-size:13.5px; color:var(--zz-sub); margin:0; flex:1; }
.zz-off-form{ display:flex; gap:8px; }
.zz-off-form input{
  flex:1; min-width:0; padding:10px 12px; font-size:14px;
  border:1px solid var(--zz-line); border-radius:8px; outline:none;
}
.zz-off-form input:focus{ border-color:var(--zz-primary); }
.zz-off-btn{
  flex:0 0 auto; padding:10px 16px; border:none; border-radius:8px; cursor:pointer;
  background:var(--zz-primary); color:#fff; font-size:14px; font-weight:600; white-space:nowrap;
  transition:background .15s;
}
.zz-off-btn:hover{ background:var(--zz-primary-d); }
.zz-off-btn-2{ background:#0d47a1; }
.zz-off-btn-2:hover{ background:#08306b; }
.zz-off-link{ font-size:13px; color:var(--zz-primary); text-decoration:none; align-self:flex-start; }
.zz-off-link:hover{ text-decoration:underline; }

/* ════ 图文教程 ════ */
.zz-tutorial{
  margin-top:18px; background:#fff; border:1px solid var(--zz-line);
  border-radius:12px; padding:18px 20px;
}
.zz-tut-h{ font-size:15px; font-weight:700; color:var(--zz-primary-d); display:flex; align-items:center; gap:8px; margin-bottom:12px; }
.zz-tut-list{ margin:0; padding-left:0; list-style:none; counter-reset:none; display:flex; flex-direction:column; gap:10px; }
.zz-tut-list li{ display:flex; gap:10px; font-size:14px; color:var(--zz-ink); align-items:flex-start; }
.zz-tut-list li > i{
  flex:0 0 auto; width:22px; height:22px; border-radius:50%;
  background:var(--zz-primary-l); color:var(--zz-primary);
  display:flex; align-items:center; justify-content:center; font-size:12px; font-weight:700; margin-top:1px;
}
.zz-tut-list b{ color:var(--zz-primary-d); }

/* ════ 中间导流卡片 ════ */
.zz-promo{
  display:flex; align-items:center; justify-content:space-between; gap:18px;
  background:linear-gradient(120deg,#e8f1fb,#dbeafe);
  border:1px solid #bcd4f0; border-radius:12px; padding:18px 22px;
  margin:0 0 26px; text-decoration:none; color:var(--zz-ink);
  box-shadow:0 2px 10px rgba(21,101,192,.06);
}
.zz-promo:hover{ box-shadow:0 4px 16px rgba(21,101,192,.14); }
.zz-promo-l{ display:flex; align-items:center; gap:14px; }
.zz-promo-ic{
  width:46px; height:46px; border-radius:12px; flex:0 0 auto;
  background:var(--zz-primary); color:#fff; font-size:22px;
  display:flex; align-items:center; justify-content:center;
}
.zz-promo-t{ font-size:16px; font-weight:700; }
.zz-promo-d{ font-size:13px; color:var(--zz-sub); }
.zz-promo-btn{
  flex:0 0 auto; background:var(--zz-primary); color:#fff; font-weight:700; font-size:14px;
  padding:10px 18px; border-radius:8px; white-space:nowrap;
}
.zz-promo-btn i{ margin-left:4px; }

/* ════ 模块二：筛选 + 表格 ════ */
.zz-filter{ display:flex; flex-wrap:wrap; align-items:flex-end; gap:12px; margin-bottom:14px; }
.zz-filter-item{ display:flex; flex-direction:column; gap:5px; }
.zz-filter-item label{ font-size:12.5px; color:var(--zz-sub); display:flex; align-items:center; gap:5px; }
.zz-filter-item select{
  padding:9px 12px; min-width:150px; font-size:14px;
  border:1px solid var(--zz-line); border-radius:8px; background:#fff; outline:none;
}
.zz-filter-item select:focus{ border-color:var(--zz-primary); }
.zz-filter-search{ display:flex; gap:0; margin-left:auto; }
.zz-filter-search input{
  padding:9px 12px; min-width:220px; font-size:14px;
  border:1px solid var(--zz-line); border-right:none; border-radius:8px 0 0 8px; outline:none;
}
.zz-filter-search input:focus{ border-color:var(--zz-primary); }
.zz-filter-search button{
  padding:9px 16px; border:1px solid var(--zz-primary); border-radius:0 8px 8px 0;
  background:var(--zz-primary); color:#fff; cursor:pointer; font-size:14px;
}
.zz-filter-search button:hover{ background:var(--zz-primary-d); }

.zz-table-wrap{ overflow-x:auto; border:1px solid var(--zz-line); border-radius:10px; background:#fff; }
.zz-table{ width:100%; border-collapse:collapse; font-size:13.5px; min-width:860px; }
.zz-table thead th{
  background:var(--zz-primary-l); color:var(--zz-primary-d);
  font-weight:700; text-align:left; padding:11px 14px; white-space:nowrap;
  border-bottom:2px solid #bcd4f0;
}
.zz-table tbody td{ padding:11px 14px; border-bottom:1px solid #f0f3f7; vertical-align:top; }
.zz-table tbody tr:last-child td{ border-bottom:none; }
.zz-co-name{ font-weight:600; color:var(--zz-ink); min-width:200px; }
.zz-co-code{ font-family:ui-monospace,Menlo,Consolas,monospace; font-size:12.5px; color:var(--zz-sub); }
.zz-level{ display:inline-block; padding:2px 10px; border-radius:12px; font-size:12.5px; font-weight:700; }
.zz-level.a{ background:#e3f2fd; color:#0d47a1; }
.zz-level.b{ background:#ede7f6; color:#5e35b1; }
.zz-status{ display:inline-block; padding:2px 12px; border-radius:12px; font-size:12.5px; font-weight:700; white-space:nowrap; }
.zz-status.valid{ background:var(--zz-valid-bg); color:var(--zz-valid); }
.zz-status.expired{ background:var(--zz-exp-bg); color:var(--zz-exp); }
.zz-status.cancel{ background:var(--zz-cancel-bg); color:var(--zz-cancel); }
.zz-note-row td{
  background:#fffaf2; font-size:12px; color:var(--zz-warn-ink);
  border-bottom:1px solid #f0e6d8 !important; padding-top:2px; padding-bottom:10px;
}
.zz-note-row i{ margin-right:5px; }

.zz-empty{
  text-align:center; padding:46px 20px; background:#fff; border:1px dashed var(--zz-line);
  border-radius:10px; color:var(--zz-sub);
}
.zz-empty i{ font-size:34px; color:#c2cdda; display:block; margin-bottom:10px; }
.zz-empty p{ margin:0; font-size:14px; }
.zz-empty b{ color:var(--zz-primary); }

.zz-pager{ display:flex; flex-wrap:wrap; gap:6px; margin:16px 0 6px; }
.zz-pager a{
  padding:7px 13px; border:1px solid var(--zz-line); border-radius:7px;
  text-decoration:none; color:var(--zz-sub); font-size:13px; background:#fff;
}
.zz-pager a:hover{ border-color:var(--zz-primary); color:var(--zz-primary); }
.zz-pager a.active{ background:var(--zz-primary); border-color:var(--zz-primary); color:#fff; }
.zz-list-foot{ font-size:13px; color:var(--zz-sub); margin-top:10px; }
.zz-list-foot b{ color:var(--zz-primary); }

/* ════ 底部免责声明 ════ */
.zz-disclaimer{
  background:#fff; border:1px solid var(--zz-line); border-radius:12px;
  padding:20px 22px; margin-top:8px;
}
.zz-disc-h{ font-size:16px; font-weight:700; color:var(--zz-ink); display:flex; align-items:center; gap:8px; margin-bottom:12px; }
.zz-disclaimer ol{ margin:0; padding-left:20px; display:flex; flex-direction:column; gap:9px; }
.zz-disclaimer li{ font-size:13px; color:var(--zz-sub); line-height:1.7; }
.zz-disclaimer li b{ color:var(--zz-ink); }

/* ════ 移动端适配 ════ */
@media (max-width:768px){
  .zz-wrap{ padding:16px 12px 32px; font-size:14px; }
  .zz-h1{ font-size:21px; flex-wrap:wrap; }
  .zz-h2{ font-size:17px; }

  .zz2-grid{ grid-template-columns:1fr; }

  .zz-promo{ flex-direction:column; align-items:stretch; gap:12px; padding:16px; }
  .zz-promo-btn{ text-align:center; }

  .zz-filter{ flex-direction:column; align-items:stretch; }
  .zz-filter-item{ width:100%; }
  .zz-filter-item select{ width:100%; }
  .zz-filter-search{ margin-left:0; width:100%; }
  .zz-filter-search input{ flex:1; min-width:0; width:100%; }
  .zz-filter-search button{ flex:0 0 auto; }

  .zz-table{ min-width:640px; }
  .zz-table-wrap{ margin:0 -12px; border-radius:0; border-left:none; border-right:none; }
}
@media (max-width:480px){
  .zz-off-form{ flex-direction:column; }
  .zz-off-form input, .zz-off-btn{ width:100%; }
}