/* 设计 Token · 优路同款「红主蓝辅」现代活力风（规格 §2） */
:root{
  --brand-red:#E62117; --brand-red-deep:#C41A10;
  --blue:#1A73E8; --blue-bg:#EAF1FE; --blue-border:#D2E2FB;
  --sky:#2E9BE6; --orange:#FF9900; --orange-text:#E07F00;
  --ink:#1C2530; --ink-2:#1F2733; --text:#374151; --text-2:#525C6B;
  --muted:#8A95A4; --line:#E4E7EC; --bg:#F4F6F8; --bg-card:#FFFFFF;
  --pink-wash-top:#FFF0F2;
  --ok:#1F9D57; --ok-bg:#E6F6EC; --warn:#C77A12; --warn-bg:#FBF1DD;
  --hot:#E62117; --hot-bg:#FDECEC; --dark:#102338; --topbar:#0F2D52;
  --radius-card:10px; --radius-btn:8px; --radius-tag:4px;
  --maxw:1280px;
}
*{box-sizing:border-box;margin:0;padding:0}
body{font-family:"Noto Sans SC",system-ui,sans-serif;color:var(--text);
  background:var(--bg);line-height:1.7;font-size:15px}
h1,h2,h3{font-family:"Noto Serif SC",serif;color:var(--ink);font-weight:700}
a{color:inherit;text-decoration:none}
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 20px}
.num{font-family:"DM Sans",sans-serif}

/* 顶栏 */
.topbar{background:var(--topbar);color:#cfe;font-size:13px}
.topbar .wrap{display:flex;justify-content:space-between;padding:6px 20px}
header.nav{background:var(--bg-card);border-bottom:1px solid var(--line);position:sticky;top:0;z-index:50}
header.nav .wrap{display:flex;align-items:center;gap:28px;height:64px}
.logo{font-family:"Noto Serif SC";font-weight:900;font-size:22px;color:var(--brand-red)}
.nav-links{display:flex;gap:22px;font-weight:500}
.nav-links a:hover{color:var(--brand-red)}
.nav-spacer{flex:1}
.btn{display:inline-block;padding:9px 18px;border-radius:var(--radius-btn);
  font-weight:600;cursor:pointer;border:none}
.btn-red{background:var(--brand-red);color:#fff}
.btn-red:hover{background:var(--brand-red-deep)}
.btn-ghost{border:1px solid var(--line);background:#fff;color:var(--text)}

/* hero */
.hero{background:linear-gradient(180deg,var(--pink-wash-top),#fff);padding:48px 0 36px}
.hero-grid{display:grid;grid-template-columns:1fr 360px;gap:36px;align-items:center}
.hero-card{box-shadow:0 12px 30px rgba(230,33,23,.10)}
.hero h1{font-size:34px;font-weight:900;color:var(--ink)}
.hero p{color:var(--text-2);margin:12px 0 20px;font-size:16px}
.stats{display:flex;gap:36px;margin-top:22px}
.stats .n{font-size:28px;font-weight:800;color:var(--brand-red)}
.stats .l{font-size:13px;color:var(--muted)}

/* 卡片 */
.section{padding:34px 0}
.section h2{font-size:22px;margin-bottom:18px;border-left:4px solid var(--brand-red);padding-left:12px}
.grid{display:grid;gap:16px}
.g4{grid-template-columns:repeat(4,1fr)}
.g3{grid-template-columns:repeat(3,1fr)}
.g2{grid-template-columns:repeat(2,1fr)}
.card{background:var(--bg-card);border:1px solid var(--line);border-radius:var(--radius-card);
  padding:18px;transition:.18s}
.card:hover{transform:translateY(-3px);box-shadow:0 12px 30px rgba(230,33,23,.13)}
.tag{display:inline-block;background:var(--blue-bg);color:var(--blue);
  border:1px solid var(--blue-border);border-radius:var(--radius-tag);
  padding:2px 8px;font-size:12px}
.stars{color:var(--orange)}
.chip{display:inline-block;border:1px solid var(--line);border-radius:999px;padding:4px 12px;font-size:13px;margin:3px}
.badge-hot{background:var(--hot-bg);color:var(--hot);border-radius:var(--radius-tag);padding:2px 8px;font-size:12px}
.badge-ok{background:var(--ok-bg);color:var(--ok);border-radius:var(--radius-tag);padding:2px 8px;font-size:12px}

/* 面包屑 */
.crumb{font-size:13px;color:var(--muted);padding:14px 0}
.crumb a{color:var(--blue)}

/* 留资卡 */
.lead{background:var(--topbar);color:#fff;border-radius:var(--radius-card);padding:22px}
.lead h3{color:#fff;font-size:18px;margin-bottom:12px}
.lead input,.lead select{width:100%;padding:10px;border-radius:6px;border:none;margin-bottom:10px}
.lead label{font-size:12px;color:#bcd;display:flex;gap:6px;align-items:flex-start;margin-bottom:10px}

/* 速览数据条 / FAQ */
.databar{display:flex;flex-wrap:wrap;gap:0;border:1px solid var(--line);border-radius:var(--radius-card);overflow:hidden;background:#fff}
.databar div{flex:1;min-width:120px;padding:14px;border-right:1px solid var(--line)}
.databar .k{font-size:12px;color:var(--muted)}
.databar .v{font-weight:700;color:var(--ink)}
.faq{background:#fff;border:1px solid var(--line);border-radius:var(--radius-card);padding:8px 18px}
.faq details{border-bottom:1px solid var(--line);padding:12px 0}
.faq summary{font-weight:600;cursor:pointer;color:var(--ink)}
.faq p{margin-top:8px;color:var(--text-2)}

/* 两栏 */
.cols{display:grid;grid-template-columns:1fr 320px;gap:24px}
.aside .card{margin-bottom:16px}

/* footer */
footer{background:var(--dark);color:#9fb;margin-top:40px;padding:30px 0}
footer .cols4{display:grid;grid-template-columns:repeat(4,1fr);gap:20px;font-size:13px}
footer a{color:#cde}
footer .legal{border-top:1px solid #234;margin-top:20px;padding-top:14px;color:#7a8;font-size:12px}

/* ===== 还原设计稿:悬停大菜单 + 悬浮卡 + 链接 hover ===== */
.navitem{position:relative}
.megapanel{display:none;position:absolute;top:100%;left:0;z-index:70}
.navitem:hover>.megapanel{display:flex}
.navitem:hover{color:var(--blue) !important}
.megapanel a:hover{color:var(--blue) !important}
.hovcard{transition:border-color .15s,box-shadow .15s,transform .15s}
.hovcard:hover{border-color:var(--brand-red) !important;box-shadow:0 12px 30px rgba(230,33,23,.13);transform:translateY(-3px)}
/* 0711 相关证书推荐卡:常驻箭头=可点提示(移动端无hover);桌面 hover 箭头变蓝右移+底色 */
.relcard{cursor:pointer}
.relcard .relcard-arrow{transition:color .15s,transform .15s}
.relcard:hover{background:#FBFCFE !important}
.relcard:hover .relcard-arrow{color:var(--blue);transform:translateX(3px)}
.lnk:hover{color:var(--brand-red-deep) !important}
.dc-btn{cursor:pointer;border:none}
.dc-btn:hover{filter:brightness(.94)}
.mobile-nav{display:none}

@media(max-width:1080px){
  /* 0808 平板漏网:降列断点原本只有 760px,但 .cols 是"正文+340px侧栏"结构,
     1024/768 下正文被挤成 634px 定值 → 整页横向溢出(实测 scrollW 1034>768)。
     侧栏类布局提前到 1080px 就单列;卡片网格另按 760 走。 */
  .cols,[class*="cols"]{grid-template-columns:minmax(0,1fr) !important}
  .hero-grid{grid-template-columns:minmax(0,1fr) !important}
  html,body{overflow-x:hidden;max-width:100%}
}
@media(max-width:980px){
  .dc-desktop-only{display:none !important}
}
@media(max-width:760px){
  /* 0808 M端横向溢出根治:模板里 31 处把 grid-template-columns 写成了**行内样式**,
     行内优先级高于媒体查询,连 !important 都压不住(CSS 规则的 !important 才压得住
     行内的非 !important——这里正是靠 !important 生效;但仍有漏网的写法,
     所以再加两道兜底:①任何带这些 class 的元素强制单列 ②全局禁横向滚动)。
     实测病灶:首页 .cols 行内写 "1fr 340px",390px 视口下第一列被撑成 634px,
     整个 <main> scrollWidth 666 > 390,右侧"更多"和日期被切在屏幕外。 */
  /* ⚠ 必须 minmax(0,1fr) 不能写 1fr:grid 轨道默认最小值是 auto(由内容决定),
     写 1fr 时长内容照样把轨道撑爆——实测 .cols 单列后仍是 620px。
     ⚠ 且不能靠"列举 class 名"覆盖:实测 .news-top-card(行内 1fr 300px)
     类名不含 grid/cols 被漏掉,300px 封面列占死,文字列塌成 21px → 标题竖排一字一行。
     所以改成命中"任何行内写了 grid-template-columns 的元素",一网打尽;
     确实要在窄屏保持多列的(省份格/国家格/分地区chip),在本规则**之后**单独恢复。 */
  [style*="grid-template-columns"]{grid-template-columns:minmax(0,1fr) !important}
  [class*="g2"],[class*="g3"],[class*="g4"],[class*="cols"],[class*="hero-grid"],
  [class*="grid"]{grid-template-columns:minmax(0,1fr) !important}
  .g4,.g3,.g2,.cols,footer .cols4,.hero-grid{grid-template-columns:minmax(0,1fr) !important}
  /* flex 子项默认 min-width:auto,长中文标题不肯收缩会顶开整行——
     实测"安徽省消防救援总队…"那行 span 撑到 501px。置 0 才让 ellipsis 生效 */
  [style*="flex:1"],[style*="flex: 1"]{min-width:0 !important}
  .data-strip{grid-template-columns:1fr !important}  /* 0711:字段值改完整全文后,窄屏单列才读得舒服 */
  .stat-grid{grid-template-columns:1fr !important}
  /* 0808:首页 H1 桌面 46px,M端换成三线定位后第二行折三行太散,缩到 30px 两行落地 */
  .home-hero-title{font-size:30px !important;line-height:1.25 !important}
  /* ↓ 窄屏仍要多列的少数几个,放在通用兜底之后覆盖回来 */
  .prov-grid{grid-template-columns:repeat(3,minmax(0,1fr)) !important}
  .country-grid{grid-template-columns:repeat(2,minmax(0,1fr)) !important}
  .cert-chip-grid{grid-template-columns:repeat(4,minmax(0,1fr)) !important}
  .liuxue-hero-row{display:block !important}
  .liuxue-tabs{margin-top:18px;width:100%}
  .liuxue-tabs a{flex:1;text-align:center;padding-left:0 !important;padding-right:0 !important}
  .calendar-head{display:block !important}
  .month-switch{margin-top:14px;justify-content:space-between}
  .calendar-filters{
    overflow-x:auto;
    flex-wrap:nowrap !important;
    padding-bottom:2px;
    scrollbar-width:none;
  }
  .calendar-filters::-webkit-scrollbar{display:none}
  .calendar-filters a,.calendar-filters span{flex:none}
  .calendar-layout{grid-template-columns:1fr !important}
  .calendar-grid{grid-auto-rows:54px !important}
  .calendar-grid > div{padding:5px 5px !important}
  .calendar-grid > div > div:first-child{font-size:12px !important}
  .calendar-grid [title]{font-size:9px !important;padding:1px 3px !important;margin-top:3px !important}
  .nav-links{display:none}
  .stats{gap:20px}
  /* 移动端顶栏：缩 logo、隐藏顶功能条与搜索框，避免拥挤 */
  .topbar{display:none}
  .site-header-main{
    height:54px !important;
    padding:0 16px !important;
    gap:10px !important;
    top:0;
  }
  .site-logo-mark{
    width:34px !important;
    height:34px !important;
    border-radius:6px !important;
    font-size:17px !important;
    flex:none;
  }
  .site-logo-title{
    font-size:16px !important;
    line-height:1.05 !important;
    white-space:nowrap;
  }
  .site-logo-sub{
    display:none !important;
  }
  .header-consult{
    display:none !important;
    height:32px !important;
    padding:0 12px !important;
    flex:none;
    font-size:13px !important;
    line-height:1 !important;
    white-space:nowrap;
    border-radius:6px !important;
  }
  .site-header-main.mobile-show-consult .header-consult{display:flex !important;align-items:center}
  .mobile-menu-btn{
    display:flex !important;  /* 0711:压过按钮内联 display:none,此前M端汉堡钮不显示 */
    flex-direction:column;
    gap:3px;
    flex:none;
  }
  .mobile-menu-btn span{
    display:block;
    width:18px;
    height:2px;
    border-radius:2px;
    background:#1C2530;
  }
  .mobile-nav{display:none !important}
  header.nav .wrap{height:54px;gap:10px}
  .logo{font-size:18px;white-space:nowrap}
  header.nav form{display:none !important}
  .hero h1{font-size:26px}
}
@media(max-width:380px){
  .logo{font-size:16px}
  .btn{padding:8px 12px}
  .site-header-main{padding:0 12px !important;gap:8px !important}
  .site-logo-title{font-size:15px !important}
  /* 0712:移动端 logo 显当前页名,桌面恒显站名 */
  .site-logo-title .logo-desktop{display:none}
  .site-logo-title .logo-mobile{display:inline !important}
  .header-consult{font-size:12px !important;padding:0 10px !important}
}

/* ── 0808 M端兜底:横向永不溢出 ────────────────────────────
   规矩(照 artifact 规范):页面主体绝不横向滚动;确实要横滑的宽内容
   (对比表/批次表)自己套 .tbl-scroll 容器内部滚,不许把整页顶出去。 */
@media(max-width:760px){
  html,body{overflow-x:hidden;max-width:100%}
  img,video,table{max-width:100%}
  /* 长标题/长URL不撑破容器 */
  h1,h2,h3,p,span,a,td,th{overflow-wrap:anywhere}
}