@charset "UTF-8";
/* 样式 · 组件层 */

/* 1. 区块标题 */
.kicker{
  display:inline-flex;align-items:center;gap:8px;flex-wrap:wrap;max-width:100%;
  font-family:var(--mono);font-size:clamp(11px,.95vw,12px);font-weight:500;
  letter-spacing:.18em;text-transform:uppercase;color:var(--gold-600);
}
.kicker::before{content:"";width:22px;height:1px;background:var(--gold-500);flex-shrink:0}
.kicker.center::before{display:none}
.sec-head{margin-bottom:clamp(28px,3.6vw,54px);max-width:760px}
.sec-head h2{font-size:clamp(23px,3.1vw,38px);margin-top:12px}
.sec-head .desc{margin-top:14px;color:var(--ink-500);font-size:clamp(14px,1.05vw,15.5px);max-width:680px}
.sec-head.center{text-align:center;margin-inline:auto}
.sec-head.center .desc{margin-inline:auto}
.sec-head.split{display:flex;justify-content:space-between;align-items:flex-end;gap:22px;flex-wrap:wrap;max-width:none}
.sec-head--tight{margin-bottom:clamp(22px,2.4vw,30px)}   /* 与正文同屏出现的小节标题，收紧下间距 */
.sec-head.center h2{text-wrap:balance}                   /* 居中标题避免末行只剩一两个字 */
.rule{width:48px;height:2px;background:var(--gold-500);margin-top:18px;position:relative}
.rule::after{ /* 横梁末端一颗「上珠」，呼应算盘的横梁意象——克制的文化点缀 */
  content:"";position:absolute;right:-9px;top:50%;transform:translateY(-50%);
  width:7px;height:7px;border-radius:50%;background:var(--gold-500);
  box-shadow:0 0 0 2px var(--cream-50,transparent);
}
.sec-head.center .rule{margin-inline:auto}
/* 深色底上的区块标题 */
.sec--navy .kicker{color:var(--gold-300)}
.sec--navy .sec-head h2{color:#fff}
.sec--navy .sec-head .desc{color:rgba(255,255,255,.68)}
.sec--navy .sec-head.center .rule{background:var(--gold-300)}

/* 2. 按钮 */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:9px;
  min-height:46px;padding:0 clamp(18px,1.7vw,26px);
  border:1px solid transparent;border-radius:var(--r-s);
  font-size:clamp(14px,1vw,15px);font-weight:500;line-height:1;white-space:nowrap;
  transition:background .25s var(--ease),color .25s,border-color .25s,transform .25s var(--ease),box-shadow .25s;
}
.btn svg{flex-shrink:0;transition:transform .25s var(--ease)}
.btn:hover svg{transform:translateX(3px)}
.btn-gold{background:var(--gold-500);color:#20170A}
.btn-gold:hover{background:var(--gold-300);transform:translateY(-2px);box-shadow:0 10px 26px rgba(201,164,76,.34)}
.btn-navy{background:var(--navy-700);color:#fff}
.btn-navy:hover{background:var(--navy-800);transform:translateY(-2px);box-shadow:var(--sh-2)}
.btn-ghost{border-color:rgba(255,255,255,.5);color:#fff}
.btn-ghost:hover{background:#fff;color:var(--navy-700);border-color:#fff}
.btn-line{border-color:var(--line-200);color:var(--navy-700);background:#fff}
.btn-line:hover{border-color:var(--gold-500);color:var(--gold-600)}
.btn-block{width:100%}
.btn-lg{min-height:52px;font-size:clamp(14.5px,1.06vw,16px)}
/* 文字链（区块右上「查看更多」） */
.more{
  display:inline-flex;align-items:center;gap:8px;font-size:14px;font-weight:500;color:var(--navy-700);
  padding-bottom:4px;border-bottom:1px solid var(--line-200);transition:color .25s,border-color .25s;
}
.more:hover{color:var(--gold-600);border-color:var(--gold-500)}
.more svg{transition:transform .25s var(--ease)}
.more:hover svg{transform:translateX(4px)}
.sec--navy .more{color:#fff;border-color:rgba(255,255,255,.28)}
.sec--navy .more:hover{color:var(--gold-300);border-color:var(--gold-300)}

@media (max-width:400px){
  .btn{font-size:13.5px;padding:0 16px}
}

/* 区块底部的居中操作区（如「立即入会」），替代内联 style */
.sec-foot{margin-top:clamp(28px,3.2vw,46px);display:flex;gap:12px;flex-wrap:wrap;justify-content:center}

.showcase-cap{
  display:flex;align-items:center;gap:12px;
  font-size:clamp(14.5px,1.1vw,16px);font-weight:600;color:var(--navy-700);
  margin-bottom:16px;
}
.showcase-cap::before{content:"";width:4px;height:16px;border-radius:2px;background:var(--gold-500);flex-shrink:0}
.showcase-cap::after{content:"";flex:1;height:1px;background:var(--line-200)}
.showcase-group+.showcase-group{margin-top:clamp(30px,3.4vw,48px)}

/* 3. 图标卡 .card-ico */
.card-ico{
  position:relative;background:#fff;border:1px solid var(--line-200);border-radius:var(--r-m);
  padding:clamp(22px,2.4vw,34px) clamp(18px,2vw,28px) clamp(24px,2.4vw,32px);
  display:flex;flex-direction:column;overflow:hidden;
  transition:transform .32s var(--ease),box-shadow .32s,border-color .32s;
}
.card-ico::before{ /* 顶部金线：悬停时从左展开 */
  content:"";position:absolute;left:0;right:0;top:0;height:3px;background:var(--gold-500);
  transform:scaleX(0);transform-origin:left;transition:transform .36s var(--ease);
}
.card-ico:hover{transform:translateY(-6px);box-shadow:var(--sh-2);border-color:transparent}
.card-ico:hover::before{transform:scaleX(1)}
.ci-num{ /* 编号徽标：外描边胶囊，浅色卡上是白底细描边，深色卡另配金色 */
  position:absolute;right:clamp(16px,1.6vw,24px);top:clamp(16px,1.6vw,22px);
  min-width:32px;padding:3px 9px;text-align:center;background:#fff;
  border:1px solid var(--line-200);border-radius:999px;
  font-family:var(--mono);font-size:11.5px;letter-spacing:.12em;color:var(--ink-400);
}
.ci-ico{
  width:clamp(48px,4vw,58px);height:clamp(48px,4vw,58px);border-radius:13px;display:grid;place-items:center;
  background:linear-gradient(135deg,rgba(15,52,96,.08),rgba(201,164,76,.2));
  color:var(--navy-700);margin-bottom:clamp(18px,2vw,24px);
  transition:background .3s var(--ease),color .3s;
}
.card-ico:hover .ci-ico{background:var(--navy-700);color:var(--gold-300)}
.card-ico .en{display:block;font-family:var(--mono);font-size:11px;letter-spacing:.11em;text-transform:uppercase;color:var(--gold-600);margin-bottom:10px}
.card-ico h3{font-size:clamp(16.5px,1.3vw,19px);color:var(--navy-700);margin-bottom:9px}

.card-ico > p{font-size:clamp(13.5px,.98vw,14.5px);color:var(--ink-500);line-height:1.8}

/* 3a. 变体 */
.card-level{padding-top:clamp(24px,2.6vw,36px);padding-bottom:clamp(20px,2vw,28px)}
.card-level h3{margin-top:2px}

.card-ico h3 .card-alias{display:inline-block;margin-left:7px;padding:1.5px 9px;border-radius:999px;
  font-size:12px;font-weight:600;letter-spacing:.04em;vertical-align:1px;
  color:var(--gold-600);background:var(--gold-100)}
.card-ico--invert:hover h3 .card-alias{color:var(--gold-300);background:rgba(201,164,76,.18)}
.card-level .ci-ico{width:clamp(44px,3.4vw,50px);height:clamp(44px,3.4vw,50px);border-radius:12px;margin-bottom:clamp(16px,1.7vw,20px)}
.card-level > p{flex:0 0 auto;min-height:calc(1.8em * 2)}
.card-level .cl-perks{margin-top:auto;padding-top:15px;border-top:1px dashed var(--line-200)}
.card-level .cl-perks .ticks{margin-bottom:clamp(16px,1.6vw,20px)}
.card-level .btn{align-self:stretch}

.card-ico--doc{padding:clamp(22px,2.6vw,40px)}
.card-ico--doc::before{display:none}
.card-ico--doc:hover{transform:none;box-shadow:none;border-color:var(--line-200)}

.card-ico--invert{transition:transform .32s var(--ease),box-shadow .32s,border-color .32s,background .32s var(--ease)}
.card-ico--invert:hover{
  background:linear-gradient(180deg,var(--navy-800),var(--navy-900));border-color:transparent;
}
.card-ico--invert:hover h3{color:#fff}
.card-ico--invert:hover .ci-num{color:var(--gold-300);background:rgba(201,164,76,.16);border-color:rgba(201,164,76,.5)}
.card-ico--invert:hover > p{color:rgba(255,255,255,.72)}
.card-ico--invert:hover .ci-ico{background:linear-gradient(135deg,rgba(255,255,255,.14),rgba(201,164,76,.24));color:var(--gold-300)}
.card-ico--invert:hover .en{color:var(--gold-300)}
.card-ico--invert:hover .ticks li{color:rgba(255,255,255,.82)}
.card-ico--invert:hover .ticks svg{color:var(--gold-300)}
.card-ico--invert:hover .ticks .tk-cap{color:rgba(255,255,255,.5)}
.card-ico--invert:hover .cl-perks{border-top-color:rgba(255,255,255,.18)}
.card-ico--invert:hover .stars svg{color:var(--gold-300)}
.card-ico--invert:hover .stars svg.off{color:rgba(255,255,255,.22)}

.card-level--top .ci-num{color:var(--gold-600);background:var(--cream-100);border-color:var(--gold-500)}
.card-level--top .ci-ico{box-shadow:0 0 0 1px rgba(201,164,76,.35) inset}

/* 4. 新闻卡 .card-news */
.card-news{
  display:flex;flex-direction:column;background:#fff;border:1px solid var(--line-200);
  border-radius:var(--r-m);overflow:hidden;box-shadow:0 2px 10px rgba(10,35,66,.045);
  transition:transform .3s var(--ease),box-shadow .3s,border-color .3s;
}
.card-news:hover{transform:translateY(-5px);box-shadow:var(--sh-2);border-color:transparent}
.card-news .ph{position:relative;aspect-ratio:16/9;overflow:hidden;background:var(--cream-100)}
.card-news .ph img{width:100%;height:100%;object-fit:cover;transition:transform .55s var(--ease)}
.card-news:hover .ph img{transform:scale(1.06)}
.card-news .ph .cat{
  position:absolute;left:10px;top:10px;background:rgba(6,22,41,.76);backdrop-filter:blur(6px);
  color:var(--gold-300);font-size:11.5px;padding:4px 10px;border-radius:999px;font-weight:500;
}
.card-news .bd{padding:clamp(15px,1.6vw,20px) clamp(15px,1.6vw,20px) clamp(16px,1.7vw,22px);display:flex;flex-direction:column;flex:1}
.card-news .date{font-family:var(--mono);font-size:11.5px;color:var(--ink-400);letter-spacing:.05em}
.card-news h3{font-size:clamp(14.5px,1.1vw,16px);color:var(--ink-900);line-height:1.6;margin-top:8px;font-weight:600;transition:color .25s}
.card-news:hover h3{color:var(--navy-700)}
.card-news p{font-size:13px;color:var(--ink-500);line-height:1.75;margin-top:9px;flex:1}
.card-news .go{display:inline-flex;align-items:center;gap:6px;font-size:12.5px;color:var(--gold-600);font-weight:500;margin-top:13px}

/* 4.1 新闻资讯 · 编辑部版式 */
/* —— 第一屏骨架（两栏等高，右栏沉底收尾） —— */
.ed-top{
  display:grid;grid-template-columns:minmax(0,1.55fr) minmax(0,1fr);
  gap:clamp(36px,4vw,56px);align-items:stretch;
}

/* —— 焦点文章 —— */
.edf-link{display:block}
.edf-media{
  position:relative;display:block;aspect-ratio:16/9;border-radius:var(--r-l);
  overflow:hidden;background:var(--cream-100);box-shadow:var(--sh-2);
}
.edf-media img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .6s var(--ease)}
.edf-link:hover .edf-media img{transform:scale(1.04)}
.edf-badge{
  position:absolute;top:14px;left:14px;z-index:2;
  display:inline-flex;align-items:center;gap:7px;padding:5px 13px;border-radius:999px;
  background:rgba(7,26,51,.72);color:#fff;font-size:11.5px;font-weight:600;letter-spacing:.1em;
}
.edf-badge::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--gold-300)}
.edf-meta{display:flex;align-items:center;gap:12px;margin-top:18px;flex-wrap:wrap}
.edf-cat{
  display:inline-flex;padding:3.5px 11px;border:1px solid rgba(201,164,76,.55);border-radius:999px;
  color:var(--gold-600);font-size:11.5px;font-weight:600;letter-spacing:.05em;
}
.edf-date{font-size:12px;color:var(--ink-400);letter-spacing:.08em}
.edf-title{
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
  margin-top:10px;font-size:clamp(19px,1.75vw,24px);line-height:1.5;font-weight:700;
  color:var(--ink-900);transition:color .25s;
}
.edf-link:hover .edf-title{color:var(--navy-700)}
.edf-desc{
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
  margin-top:10px;font-size:14px;line-height:1.85;color:var(--ink-500);
}
.edf-more{
  display:inline-flex;align-items:center;gap:7px;margin-top:14px;
  font-size:13px;font-weight:600;color:var(--gold-600);transition:gap .25s var(--ease),color .2s;
}
.edf-more:hover{gap:11px;color:var(--gold-500)}

.ed-side{display:flex;flex-direction:column;border-top:2px solid var(--navy-800);padding-top:16px}
.eds-head{display:flex;align-items:flex-end;gap:12px;margin-bottom:4px}
.eds-hgroup{flex:1;min-width:0}
.eds-kicker{font-size:10.5px;font-weight:700;letter-spacing:.22em;text-transform:uppercase;color:var(--gold-600)}
.eds-t{margin-top:2px;font-size:19px;font-weight:700;color:var(--navy-800)}
.eds-more{
  display:inline-flex;align-items:center;gap:5px;flex-shrink:0;padding-bottom:3px;
  font-size:12.5px;color:var(--ink-500);transition:color .2s,gap .25s var(--ease);
}
.eds-more:hover{color:var(--gold-600);gap:9px}
.eds-list{display:flex;flex-direction:column}
.eds-item{
  display:grid;grid-template-columns:auto minmax(0,1fr);gap:14px;
  padding:16px 0;border-bottom:1px solid var(--line-100);
}
.eds-item:last-child{border-bottom:0}
.eds-no{font-size:13px;font-weight:700;color:var(--gold-600);letter-spacing:.05em;padding-top:2px}
.eds-link{
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
  font-size:14.5px;line-height:1.6;font-weight:500;color:var(--ink-700);transition:color .2s;
}
.eds-link:hover{color:var(--navy-700)}
.eds-date{display:block;margin-top:4px;font-size:11.5px;color:var(--ink-400);letter-spacing:.08em}
.eds-empty{display:flex;align-items:center;gap:9px;padding:18px 0;color:var(--ink-400);font-size:13px}
.eds-empty svg{flex-shrink:0}
/* 沉底收尾：秘书处信箱 */
.eds-mail{
  margin-top:auto;display:flex;align-items:center;gap:11px;
  padding:12px 15px;border-radius:var(--r-m);
  background:rgba(201,164,76,.10);border:1px solid rgba(201,164,76,.28);
  transition:background .2s,border-color .2s;
}
.eds-mail:hover{background:rgba(201,164,76,.17);border-color:rgba(201,164,76,.45)}
.eds-mail svg{color:var(--gold-600);flex-shrink:0}
.edm-txt{display:flex;flex-direction:column;line-height:1.45;min-width:0}
.edm-txt b{font-size:12.5px;font-weight:600;color:var(--navy-800)}
.edm-txt .num{font-size:12px;color:var(--ink-500);letter-spacing:.04em}

.ed-cols{display:grid;grid-template-columns:repeat(3,minmax(0,1fr))}
.ed-col{display:flex;flex-direction:column;padding:2px clamp(22px,2.6vw,34px) 8px}
.ed-col:first-child{padding-left:0}
.ed-col:last-child{padding-right:0}
.ed-col + .ed-col{border-left:1px solid var(--line-200)}
.edc-head{
  display:flex;align-items:center;gap:10px;
  padding-bottom:12px;border-bottom:2px solid var(--navy-800);margin-bottom:2px;
}
.edc-ico{
  display:inline-flex;width:30px;height:30px;align-items:center;justify-content:center;
  border-radius:9px;background:var(--gold-100);color:var(--gold-600);flex-shrink:0;
}
.edc-name{font-size:16.5px;font-weight:700;color:var(--navy-800);flex:1;min-width:0}
.edc-more{
  display:inline-flex;flex-shrink:0;color:var(--ink-400);
  transition:color .2s,transform .25s var(--ease);
}
.edc-more:hover{color:var(--gold-600);transform:translateX(3px)}
.edc-row{
  display:grid;grid-template-columns:auto minmax(0,1fr);gap:12px;align-items:baseline;
  padding:11.5px 0;border-bottom:1px dashed var(--line-100);
}
.edc-date{font-size:12px;font-weight:600;color:var(--gold-600);letter-spacing:.06em}
.edc-t{
  font-size:14px;color:var(--ink-700);line-height:1.6;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;transition:color .2s;
}
.edc-row:hover .edc-t{color:var(--navy-700)}
.edc-empty{
  flex:1;margin-top:12px;padding:26px 18px;border:1px dashed var(--line-200);border-radius:var(--r-m);
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;
  color:var(--ink-400);font-size:12.5px;text-align:center;background:rgba(201,164,76,.05);
}
.edc-empty svg{opacity:.7}
/* 沉底收口：查看全部 */
.edc-foot{
  margin-top:auto;display:inline-flex;align-items:center;gap:6px;padding-top:13px;
  font-size:12.5px;font-weight:600;color:var(--gold-600);
  transition:gap .25s var(--ease),color .2s;align-self:flex-start;
}
.edc-foot:hover{gap:10px;color:var(--gold-500)}

/* —— 响应式 —— */
@media (max-width:1020px){
  .ed-top{grid-template-columns:minmax(0,1fr);gap:34px}
  .ed-cols{grid-template-columns:minmax(0,1fr)}
  .ed-col{padding:0 0 26px}
  .ed-col + .ed-col{border-left:0;border-top:1px solid var(--line-200);padding-top:26px}
  .ed-col:last-child{padding-bottom:0}
}
@media (max-width:640px){
  .edf-badge{top:10px;left:10px}
}

/* 5. 首屏焦点卡 .focus-card */
.focus-card{
  width:min(330px,100%);border-radius:var(--r-l);padding:14px;
  background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.22);
  backdrop-filter:blur(14px);box-shadow:0 20px 50px rgba(3,12,24,.35);
}
.focus-card .fc-tag{
  display:inline-flex;align-items:center;gap:6px;font-size:11.5px;font-weight:600;
  color:#20170A;background:var(--gold-500);border-radius:999px;padding:4px 11px;margin-bottom:12px;
}
.focus-card .fc-img{display:block;position:relative;border-radius:var(--r-m);overflow:hidden;aspect-ratio:16/9;background:var(--navy-800)}
.focus-card .fc-img img{width:100%;height:100%;object-fit:cover;transition:transform .5s var(--ease)}
.focus-card:hover .fc-img img{transform:scale(1.05)}
.focus-card h3{font-size:15.5px;color:#fff;margin-top:14px;line-height:1.55;font-weight:600}
.focus-card .fc-meta{font-size:12.5px;color:rgba(255,255,255,.6);margin-top:8px;display:flex;gap:12px;flex-wrap:wrap}
.focus-card .fc-go{display:inline-flex;align-items:center;gap:6px;font-size:13px;color:var(--gold-300);margin-top:12px}
/* 中屏以下转横向紧凑卡，避免一张大图把首屏拉长 */
@media (max-width:1080px){
  .focus-card{
    width:100%;max-width:100%;
    display:grid;grid-template-columns:minmax(0,clamp(96px,13vw,150px)) minmax(0,1fr);
    grid-template-areas:"tag tag" "img title" "img meta" "img go";
    column-gap:16px;row-gap:5px;align-items:start;
  }
  .focus-card .fc-tag{grid-area:tag;justify-self:start;margin-bottom:5px}
  .focus-card .fc-img{grid-area:img;aspect-ratio:1/1;align-self:start}
  .focus-card h3{grid-area:title;margin-top:0}
  .focus-card .fc-meta{grid-area:meta;margin-top:0}
  .focus-card .fc-go{grid-area:go;margin-top:2px}
}
@media (max-width:768px){
  .focus-card{
    display:grid;grid-template-columns:minmax(0,102px) minmax(0,1fr);
    grid-template-areas:"tag tag" "img title" "img meta" "img go";
    column-gap:13px;row-gap:5px;align-items:start;padding:12px;
  }
  .focus-card .fc-tag{grid-area:tag;justify-self:start;font-size:11px;padding:3px 10px;margin-bottom:4px}
  .focus-card .fc-img{grid-area:img;aspect-ratio:1/1;border-radius:10px;align-self:start}
  .focus-card h3{grid-area:title;margin-top:0;font-size:14px;line-height:1.5}
  .focus-card .fc-meta{grid-area:meta;font-size:11.5px;gap:9px;margin-top:0}
  .focus-card .fc-go{grid-area:go;margin-top:2px;font-size:12.5px}
}

/* 6. 人物卡 .card-person */
.card-person{
  display:flex;gap:clamp(13px,1.4vw,17px);align-items:center;
  background:#fff;border:1px solid var(--line-200);border-radius:var(--r-m);
  padding:clamp(15px,1.6vw,20px);
  transition:transform .3s var(--ease),box-shadow .3s,border-color .3s;
}
.card-person:hover{transform:translateY(-4px);box-shadow:var(--sh-2);border-color:transparent}
.avatar{
  width:clamp(50px,4.4vw,62px);height:clamp(50px,4.4vw,62px);flex-shrink:0;
  border-radius:50%;display:grid;place-items:center;overflow:hidden;
  background:linear-gradient(140deg,var(--navy-700),var(--navy-900));
  color:var(--gold-300);font-size:clamp(19px,1.7vw,23px);font-weight:600;
  border:2px solid rgba(201,164,76,.45);
}
.avatar img{width:100%;height:100%;object-fit:cover}
.cp-txt{min-width:0}
.cp-txt strong{display:block;font-size:clamp(14.5px,1.1vw,16px);color:var(--navy-700);font-weight:600;line-height:1.45}
.cp-txt .cp-role{
  display:inline-block;margin-top:6px;font-size:11.5px;font-weight:500;letter-spacing:.02em;
  color:var(--gold-600);background:rgba(201,164,76,.11);
  border:1px solid rgba(201,164,76,.34);border-radius:999px;padding:2px 9px;
}
.cp-txt p{margin-top:8px;font-size:13px;color:var(--ink-500);line-height:1.72}

.card-unit{
  display:grid;grid-template-columns:auto minmax(0,1fr);
  column-gap:clamp(14px,1.5vw,20px);align-items:start;
  background:#fff;border:1px solid var(--line-200);border-radius:var(--r-m);
  padding:clamp(17px,1.8vw,24px);
  transition:transform .3s var(--ease),box-shadow .3s,border-color .3s;
}
.card-unit:hover{transform:translateY(-4px);box-shadow:var(--sh-2);border-color:transparent}
.card-unit .cu-logo{
  width:clamp(56px,5vw,72px);height:clamp(56px,5vw,72px);border-radius:12px;
  display:grid;place-items:center;overflow:hidden;background:var(--cream-100);
  border:1px solid var(--line-200);
}
.card-unit .cu-logo img{width:78%;height:78%;object-fit:contain;background:none}
.card-unit .cu-logo span{font-size:clamp(17px,1.5vw,20px);font-weight:700;color:var(--navy-700)}
.card-unit .cu-head{min-width:0}
.card-unit h4{font-size:clamp(15px,1.15vw,17px);color:var(--navy-700);line-height:1.45}
.card-unit .cu-meta{display:flex;gap:8px;flex-wrap:wrap;margin-top:7px}
.card-unit p{grid-column:2;margin-top:9px;font-size:13px;color:var(--ink-500);line-height:1.8}

@media (min-width:981px){
  .grid-2 > :only-child.card-unit{
    grid-template-columns:auto minmax(0,.82fr) minmax(0,1.18fr);
    column-gap:clamp(22px,3vw,52px);align-items:center;
  }
  .grid-2 > :only-child.card-unit .cu-head{grid-column:2}
  .grid-2 > :only-child.card-unit p{grid-column:3;margin-top:0}
}

.card-unit--col{display:flex;flex-direction:column;align-items:center;text-align:center;gap:0}
.card-unit--col .cu-logo{margin-bottom:14px}
.card-unit--col .cu-head{display:flex;flex-direction:column;align-items:center}
.card-unit--col .cu-meta{justify-content:center}
.card-unit--col p{margin-top:10px}
.card-person--col{display:flex;flex-direction:column;align-items:center;text-align:center;gap:0}
.card-person--col .avatar{margin-bottom:12px}
.card-person--col .cp-txt{display:flex;flex-direction:column;align-items:center}
.card-person--col .cp-txt p{margin-top:10px}

/* 微件：小标签 .tag */
.tag{
  display:inline-flex;align-items:center;gap:5px;
  font-size:11.5px;font-weight:500;line-height:1;
  padding:5px 10px;border-radius:999px;
  color:var(--navy-700);background:var(--cream-100);border:1px solid var(--line-200);
}
.tag--gold{color:var(--gold-600);background:rgba(201,164,76,.11);border-color:rgba(201,164,76,.34)}

.tag--bad{color:var(--danger);background:var(--danger-bg);border-color:var(--danger-line)}

@media (max-width:560px){
  .card-ico{padding:20px 17px 22px}
  .card-person,.card-unit{padding:15px}
}

/* 7. 步骤条 .steps */
.steps{--sg:clamp(12px,1.6vw,20px);display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:var(--sg)}
.step{
  position:relative;display:flex;flex-direction:column;
  background:#fff;border:1px solid var(--line-200);border-radius:var(--r-m);
  padding:clamp(20px,2.1vw,28px) clamp(16px,1.7vw,22px);
  transition:transform .3s var(--ease),box-shadow .3s,border-color .3s;
}
.step:hover{transform:translateY(-4px);box-shadow:var(--sh-2);border-color:transparent}
.st-num{
  width:34px;height:34px;flex-shrink:0;border-radius:50%;display:grid;place-items:center;
  font-family:var(--mono);font-size:13px;font-weight:600;letter-spacing:.02em;
  color:var(--gold-600);background:rgba(201,164,76,.12);border:1px solid rgba(201,164,76,.45);
  margin-bottom:14px;
}
.step h4{font-size:clamp(14.5px,1.1vw,16px);color:var(--navy-700);line-height:1.5}
.step h4 a{border-bottom:1px solid rgba(201,164,76,.5);transition:color .2s}
.step h4 a:hover{color:var(--gold-600)}
.step p{margin-top:8px;font-size:13px;color:var(--ink-500);line-height:1.75}
/* 步骤之间的连接金线（画在空隙里，不占位） */
.step:not(:last-child)::after{
  content:"";position:absolute;top:calc(clamp(20px,2.1vw,28px) + 17px);
  right:calc(-1 * var(--sg));width:var(--sg);height:1px;
  background:linear-gradient(90deg,rgba(201,164,76,.5),rgba(201,164,76,.15));
}
/* 步数不是 5 时按需覆盖列数 */
.steps--3{grid-template-columns:repeat(3,minmax(0,1fr))}
.steps--4{grid-template-columns:repeat(4,minmax(0,1fr))}
@media (max-width:980px){
  .steps,.steps--3,.steps--4{grid-template-columns:minmax(0,1fr);gap:var(--sg)}
  .step{flex-direction:row;gap:14px;align-items:flex-start;padding:16px 18px}
  .st-num{margin-bottom:0;margin-top:2px}
  .step h4{margin-top:0}
  .step-body{min-width:0}
  /* 纵向时连接线改竖直 */
  .step:not(:last-child)::after{
    top:auto;bottom:calc(-1 * var(--sg));left:33px;
    width:1px;height:var(--sg);
    background:linear-gradient(180deg,rgba(201,164,76,.45),rgba(201,164,76,.12));
  }
}

/* 7.1 分步表单的导航状态 */
.steps--nav .step{cursor:default}
.steps--nav .step.is-cur{
  border-color:var(--gold-500);box-shadow:var(--sh-2);transform:translateY(-3px);
}
.steps--nav .step.is-cur .st-num{
  background:var(--gold-500);color:#20170A;border-color:var(--gold-500);
}
.steps--nav .step.is-cur:hover{transform:translateY(-3px)}

.steps--nav .step.is-done .st-num{
  background:rgba(46,125,90,.10);color:#2E7D5A;border-color:rgba(46,125,90,.45);
}
.steps--nav .step.is-done{border-color:rgba(46,125,90,.28)}
.steps--nav .step-body p{margin-top:6px}

.steps--nav .step-body p a,
.steps--nav .step-body p button{
  padding:0;border:0;background:none;cursor:pointer;
  font:inherit;font-size:12.5px;color:var(--ink-400);
  border-bottom:1px solid rgba(201,164,76,.45);
}
.steps--nav .step-body p a:hover,
.steps--nav .step-body p button:hover{color:var(--gold-600)}

/* 8. 打勾清单 .ticks */
.ticks ul{display:grid;gap:9px}
.ticks li{display:flex;gap:9px;align-items:flex-start;font-size:13.5px;color:var(--ink-500);line-height:1.72}
.ticks svg{flex-shrink:0;margin-top:5px;color:var(--gold-500)}
.ticks--inverse li{color:rgba(255,255,255,.78)}
.ticks--inverse svg{color:var(--gold-300)}
.ticks .tk-cap{
  font-family:var(--mono);font-size:11px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--ink-400);margin-bottom:12px;
}
.ticks--inverse .tk-cap{color:rgba(255,255,255,.42)}
.ticks--tight ul{gap:7px}
.ticks--tight li{font-size:13px;line-height:1.68}

/* 9. 手风琴 .faq */
.faq{display:grid;gap:10px;max-width:960px;margin-inline:auto}
.faq-item{
  background:#fff;border:1px solid var(--line-200);border-radius:var(--r-m);
  transition:border-color .25s,box-shadow .25s,background .25s;
}
.faq-item:hover{border-color:#D9D4C6}
.faq-item.on{border-color:rgba(201,164,76,.55);box-shadow:var(--sh-1);background:#fff}
.faq-q{
  display:flex;align-items:center;justify-content:space-between;gap:16px;width:100%;text-align:left;
  min-height:58px;padding:14px clamp(16px,1.8vw,24px);
  font-size:clamp(14.5px,1.1vw,16px);font-weight:600;color:var(--navy-700);line-height:1.55;
  transition:color .2s;
}
.faq-q:hover{color:var(--gold-600)}
.faq-item.on .faq-q{color:var(--navy-700)}
/* 加号 → 减号：纯 CSS 画，不用字符，任何字体下都居中 */
.faq-i{position:relative;width:26px;height:26px;flex-shrink:0;border-radius:50%;
  border:1px solid var(--line-200);transition:background .25s,border-color .25s,transform .3s var(--ease)}
.faq-i::before,.faq-i::after{
  content:"";position:absolute;left:50%;top:50%;background:var(--navy-700);
  transform:translate(-50%,-50%);transition:background .25s,opacity .25s;
}
.faq-i::before{width:11px;height:1.6px}
.faq-i::after{width:1.6px;height:11px}
.faq-item.on .faq-i{background:var(--gold-500);border-color:var(--gold-500);transform:rotate(180deg)}
.faq-item.on .faq-i::before,.faq-item.on .faq-i::after{background:#20170A}
.faq-item.on .faq-i::after{opacity:0}
.faq-a{display:grid;grid-template-rows:0fr;transition:grid-template-rows .34s var(--ease)}
.faq-a>div{overflow:hidden}
.faq-a p{
  padding:0 clamp(16px,1.8vw,24px) clamp(16px,1.8vw,22px);
  font-size:clamp(13.5px,1vw,14.5px);color:var(--ink-500);line-height:1.9;
  border-top:1px dashed var(--line-200);padding-top:14px;margin-top:0;
}
.faq-item.on .faq-a{grid-template-rows:1fr}
@supports not (grid-template-rows:0fr){
  .faq-a{display:none}
  .faq-item.on .faq-a{display:block}
}

/* 10. 表单 .frm-* */
.frm-form{margin-top:clamp(18px,1.9vw,24px)}
.frm-row{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:0 14px}
.frm-field{margin-bottom:14px}
.frm-lb{display:block;font-size:12.5px;font-weight:600;color:var(--ink-700);margin-bottom:7px;letter-spacing:.01em}
.frm-lb .req{color:var(--danger);font-weight:400;margin-left:3px}
.frm-lb .opt{color:var(--ink-400);font-weight:400;margin-left:4px;font-size:11.5px}
.frm-input{
  width:100%;height:46px;padding:0 13px;
  font-family:inherit;font-size:14.5px;color:var(--ink-900);background:#fff;
  border:1px solid var(--line-200);border-radius:10px;
  -webkit-appearance:none;appearance:none;
  transition:border-color .2s var(--ease),box-shadow .2s var(--ease),background .2s;
}
.frm-input::placeholder{color:#A7AEBA}
.frm-input:hover{border-color:#CFD6DF}
.frm-input:focus{outline:0;border-color:var(--gold-500);box-shadow:0 0 0 3px rgba(201,164,76,.18)}
textarea.frm-input{height:auto;min-height:68px;padding:11px 13px;line-height:1.7;resize:none}

.frm-code{display:flex;align-items:center;gap:10px}
.frm-code .frm-input{flex:1 1 auto;min-width:0}
.frm-code img{display:block;width:120px;height:40px;border:1px solid var(--line-200);border-radius:10px;background:#fff}

.frm-seg{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:9px}
.frm-opt{position:relative;display:flex;min-width:0}
.frm-opt input{position:absolute;inset:0;width:100%;height:100%;margin:0;opacity:0;cursor:pointer}
.frm-opt span{
  flex:1 1 auto;display:grid;place-items:center;min-height:44px;padding:7px 9px;
  font-size:13px;line-height:1.3;text-align:center;color:var(--ink-700);
  background:#fff;border:1px solid var(--line-200);border-radius:10px;
  transition:color .2s var(--ease),border-color .2s var(--ease),background .2s var(--ease),box-shadow .2s var(--ease);
}
.frm-opt:hover span{border-color:#CFD6DF}
.frm-opt input:checked+span{
  color:var(--navy-700);font-weight:600;border-color:var(--gold-500);
  background:rgba(201,164,76,.09);box-shadow:0 0 0 3px rgba(201,164,76,.14);
}
.frm-opt input:focus-visible+span{outline:2px solid var(--gold-500);outline-offset:2px}
/* 字段提示：常驻，但在报错时让位 */
.frm-tip{font-size:11.5px;color:var(--ink-400);line-height:1.55;margin-top:6px}
.frm-field.bad .frm-tip{display:none}
/* 字段级错误：只在出错时出现，不常驻占位 */
.frm-err{display:none;font-size:12px;color:var(--danger);line-height:1.5;margin-top:6px}
.frm-field.bad .frm-input{border-color:var(--danger-line);background:var(--danger-bg)}
.frm-field.bad .frm-err{display:block}
.frm-btn{
  width:100%;height:50px;margin-top:2px;border-radius:12px;
  display:inline-flex;align-items:center;justify-content:center;gap:9px;
  font-family:inherit;font-size:15px;font-weight:600;letter-spacing:.02em;color:#20170A;
  background:linear-gradient(135deg,var(--gold-300) 0%,var(--gold-500) 52%,var(--gold-600) 100%);
  box-shadow:0 12px 26px rgba(201,164,76,.3);
  transition:transform .22s var(--ease),box-shadow .22s var(--ease),filter .22s;
}
.frm-btn:hover{transform:translateY(-2px);box-shadow:0 18px 34px rgba(201,164,76,.4);filter:saturate(1.05)}
.frm-btn:active{transform:translateY(0)}
.frm-btn:disabled{cursor:default;transform:none;box-shadow:none;filter:saturate(.5);opacity:.7}   /* 提交中 */
.frm-note{display:flex;gap:8px;align-items:flex-start;margin-top:12px;font-size:12.5px;color:var(--ink-400);line-height:1.62}
.frm-note svg{flex-shrink:0;margin-top:3px;color:var(--gold-500)}
/* 站内消息列表（coach_notice.html）：未读条目左侧金条 + 浅底，扫一眼就能看出哪些没看过 */
.msg-list{display:grid;gap:14px}
.msg-unread{border-left:3px solid var(--gold-500);background:var(--cream-50, #FFFDF7)}
/* 提交成功态 */
.frm-done{display:none;text-align:center;padding:clamp(22px,3vw,38px) 4px 8px}
.frm-done.on{
  display:flex;flex-direction:column;justify-content:center;align-items:center;  
  min-height:300px;   /* 兜底值；实际高度由 JS 按原表单高度写入，保证切换不跳版 */
}
.frm-done .fd-ico{
  width:62px;height:62px;margin:0 auto 18px;border-radius:50%;display:grid;place-items:center;
  background:rgba(201,164,76,.13);border:1px solid rgba(201,164,76,.45);color:var(--gold-600);
}
.frm-done h4{font-size:clamp(17px,1.4vw,19px);color:var(--navy-700)}
.frm-done p{margin-top:9px;font-size:13.5px;color:var(--ink-500);line-height:1.85}
.frm-again{
  display:inline-flex;align-items:center;gap:6px;margin-top:18px;padding-bottom:2px;
  font-size:13px;color:var(--gold-600);
  border:0;border-bottom:1px solid rgba(201,164,76,.5);background:none;cursor:pointer;
  transition:color .2s;
}
.frm-again:hover{color:var(--gold-500)}

@media (max-width:768px){
  .frm-row{grid-template-columns:minmax(0,1fr)}   /* 字段改单列，避免窄屏挤压 */
  .frm-input{font-size:16px}                      /* ≥16px，防 iOS 聚焦时页面缩放 */
  .frm-btn{height:48px}
}
@media (max-width:560px){
  .frm-seg{grid-template-columns:repeat(2,minmax(0,1fr))}   /* 4 档 → 2×2，两行都排满 */
}

/* 10.1 申报材料分块 .frm-block */
.frm-block{
  margin:0 0 clamp(18px,2vw,26px);
  padding:clamp(16px,1.7vw,22px) 0 0;
  border:0;border-top:1px solid var(--line-200);
}
.frm-block:first-of-type{border-top:0;padding-top:0}
.fb-head{
  display:flex;align-items:center;gap:10px;
  margin:0 0 6px;padding:0;width:auto;
}
.fb-head .fb-dot{
  flex:0 0 auto;width:8px;height:8px;border-radius:50%;
  background:var(--gold-500);
}
.fb-head h3{
  flex:1 1 auto;min-width:0;margin:0;
  font-size:clamp(15px,1.2vw,17px);font-weight:700;color:var(--navy-700);letter-spacing:.01em;
}
.fb-head .fb-count{
  flex:0 0 auto;font-size:12px;color:var(--ink-400);
  padding:2px 9px;border:1px solid var(--line-200);border-radius:999px;
}
/* 标题旁的「选填 / 须上传」标记：由脚本按所选星级切换（技能培训证书块） */
.fb-head .fb-req{
  flex:0 0 auto;font-size:12px;line-height:1.6;
  padding:2px 9px;border-radius:999px;
  color:var(--ink-500);border:1px solid var(--line-200);
}
.fb-head .fb-req--must{
  color:#B3271E;background:rgba(179,39,30,.06);border-color:rgba(179,39,30,.32);
}
/* 该块当前为必填：左侧加一道金线，与其它块区分开 */
.frm-block--must{
  border-left:3px solid var(--gold-500);
  border-radius:6px;
  padding-left:clamp(12px,1.3vw,16px);
}
.fb-lead{
  margin:0 0 clamp(10px,1.2vw,14px);
  font-size:13px;line-height:1.8;color:var(--ink-500);
}

.frm-sstar{
  margin:0 0 clamp(16px,1.8vw,22px);
  padding:12px clamp(14px,1.5vw,18px);
  background:var(--navy-050,#F7F9FC);
  border:1px solid var(--line-200);border-left:3px solid var(--gold-500);
  border-radius:10px;
}
.frm-sstar p{margin:0;font-size:13.5px;line-height:1.8;color:var(--ink-600)}
.frm-sstar strong{color:var(--navy-700)}
.frm-sstar a{margin-left:8px;color:var(--gold-600);text-decoration:underline;text-underline-offset:2px}

/* 11. 行动区 .cta */
.cta{position:relative;overflow:hidden;background:var(--navy-900);color:#fff;padding:var(--sec-y) 0}
.cta::before{ /* 环境光：右上流金 + 左下深海蓝，避免整块死平 */
  content:"";position:absolute;inset:0;pointer-events:none;
  background:
    radial-gradient(48% 96% at 90% 4%,rgba(201,164,76,.2),transparent 62%),
    radial-gradient(56% 104% at 2% 104%,rgba(22,70,127,.62),transparent 62%);
}
.cta::after{ /* 极淡网格纹理，增加质感但不干扰阅读 */
  content:"";position:absolute;inset:0;pointer-events:none;opacity:.13;
  background-image:
    linear-gradient(rgba(255,255,255,.55) 1px,transparent 1px),
    linear-gradient(90deg,rgba(255,255,255,.55) 1px,transparent 1px);
  background-size:66px 66px;
  -webkit-mask-image:radial-gradient(72% 74% at 46% 42%,#000,transparent 76%);
  mask-image:radial-gradient(72% 74% at 46% 42%,#000,transparent 76%);
}
.cta .wrap{position:relative;z-index:2}
.cta-grid{
  display:grid;grid-template-columns:minmax(0,.82fr) minmax(0,1.18fr);
  gap:clamp(30px,3.6vw,60px);align-items:start;
}
.cta h2{font-size:clamp(22px,2.7vw,36px);color:#fff;margin:14px 0 18px;line-height:1.34}
.cta .kicker{color:var(--gold-300)}
.cta-lead{color:rgba(255,255,255,.72);font-size:clamp(14px,1.02vw,15.5px);max-width:560px;line-height:1.88}
/* 居中变体：内页 CTA */
.cta--center .cta-grid{grid-template-columns:minmax(0,1fr);justify-items:center;text-align:center;gap:clamp(22px,2.6vw,34px)}
.cta--center h2{margin-inline:auto}
.cta--center .cta-lead{margin-inline:auto}
.cta--center .cta-btns{display:flex;gap:12px;flex-wrap:wrap;justify-content:center}
/* 深色区里的浅色卡 */
.cta-card{
  position:relative;overflow:hidden;color:var(--ink-900);
  background:linear-gradient(180deg,#fff 0%,var(--cream-50) 100%);
  border-radius:var(--r-l);padding:clamp(24px,2.6vw,38px);
  box-shadow:0 34px 76px rgba(3,12,24,.42);
}
.cta-card::before{ /* 顶部流金细线，替代生硬描边 */
  content:"";position:absolute;left:0;right:0;top:0;height:3px;
  background:linear-gradient(90deg,var(--gold-500),var(--gold-300) 42%,transparent);
}
.cta-badge{display:inline-block;font-family:var(--mono);font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:var(--gold-600)}
.cta-card h3{font-size:clamp(18px,1.5vw,21px);color:var(--navy-700);margin:9px 0 8px;line-height:1.4}
.cta-sub{font-size:13.5px;color:var(--ink-500);line-height:1.72}
/* 左栏收尾：遇到问题时的求助入口，用一条极淡分割线收住整列 */
.cta-help{
  display:flex;gap:9px;align-items:flex-start;max-width:560px;
  margin-top:clamp(22px,2.4vw,30px);padding-top:18px;
  border-top:1px solid rgba(255,255,255,.13);
  font-size:13px;color:rgba(255,255,255,.66);line-height:1.7;
}
.cta-help svg{flex-shrink:0;margin-top:4px;color:var(--gold-300)}
.cta-help a{color:var(--gold-300);border-bottom:1px solid rgba(201,164,76,.42)}
.cta-help a:hover{color:#fff;border-color:#fff}

.cta .steps{margin-top:clamp(24px,2.6vw,34px)}
.cta .ticks{margin-top:clamp(22px,2.4vw,30px)}
.cta .steps .step{background:rgba(255,255,255,.05);border-color:rgba(255,255,255,.16)}
.cta .steps .step:hover{background:rgba(255,255,255,.09)}
.cta .steps .step h4{color:#fff}
.cta .steps .step p{color:rgba(255,255,255,.62)}
.cta .steps .st-num{color:var(--gold-300);border-color:rgba(201,164,76,.5);background:rgba(201,164,76,.14)}
.cta .steps .step:not(:last-child)::after{background:linear-gradient(90deg,rgba(201,164,76,.5),rgba(201,164,76,.12))}

@media (max-width:1080px){
  .cta-grid{grid-template-columns:minmax(0,1fr);gap:clamp(26px,3.4vw,38px)}
}
@media (max-width:768px){
  .cta h2{margin:12px 0 14px}
  .cta-card{padding:22px 20px 24px}
}

/* 12. 首屏与展示类组件 */
/* 12.1 首屏 */
.hero{
  position:relative;overflow:hidden;background:var(--navy-900);color:#fff;
  min-height:min(78dvh,700px);display:flex;flex-direction:column;
}

.hero-slides{position:relative;flex:1;display:grid}
.hero-slide{
  grid-area:1/1;min-width:0;
  display:flex;flex-direction:column;justify-content:center;
  opacity:0;visibility:hidden;pointer-events:none;
  transition:opacity .6s var(--ease),visibility .6s;
}
.hero-slide.is-active{opacity:1;visibility:visible;pointer-events:auto}
/* 第 2/3 屏：全宽文案，左右留白更大 */
.hero-copy--wide{max-width:780px}
.hero-h2{font-size:clamp(27px,3.9vw,54px);line-height:1.24;color:#fff;margin:16px 0 18px;letter-spacing:.005em}

.hero-dots{
  position:absolute;left:50%;bottom:clamp(58px,6.4vw,92px);transform:translateX(-50%);z-index:5;
  display:flex;gap:10px;
}
.hero-dot{
  width:10px;height:10px;border-radius:999px;background:rgba(255,255,255,.32);
  border:0;padding:0;cursor:pointer;transition:background .3s,width .3s var(--ease);
}
.hero-dot.is-active{background:var(--gold-500);width:26px}
.hero-bg{position:absolute;inset:0;background:url("../images/hero-1.jpg") right center/cover no-repeat}
.hero-bg::after{ /* 左侧压深，保证文字对比度；右侧放透明露出金色地球 */
  content:"";position:absolute;inset:0;
  background:linear-gradient(96deg,rgba(6,22,41,.97) 0%,rgba(6,22,41,.94) 30%,rgba(7,26,51,.74) 50%,rgba(7,26,51,.28) 72%,rgba(7,26,51,.06) 100%);
}
.hero::after{ /* 底边压深：上浮的快捷入口卡压在其上时，层次更清楚 */
  content:"";position:absolute;left:0;right:0;bottom:0;height:clamp(84px,9vw,150px);z-index:1;
  background:linear-gradient(180deg,rgba(4,14,28,0),rgba(4,14,28,.44));pointer-events:none;
}
.hero-inner{
  position:relative;z-index:2;flex:1;
  display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.66fr);
  align-items:center;gap:clamp(24px,4vw,56px);
  padding-top:clamp(38px,5vw,80px);padding-bottom:clamp(56px,5.6vw,96px);  /* 给上浮的快捷入口卡留出叠压空间 */
}
.hero-slide .hero-inner{flex:0 0 auto}
.hero-copy{max-width:660px;min-width:0}
.hero-copy h1{
  font-size:clamp(27px,3.9vw,54px);line-height:1.26;color:#fff;
  margin:16px 0 18px;letter-spacing:.005em;
}
.hero-copy h1 em{font-style:normal;color:var(--gold-300)}
.hero-copy .lead{font-size:clamp(14.5px,1.1vw,17px);color:rgba(255,255,255,.8);line-height:1.85;max-width:620px}
.hero-btns{display:flex;gap:12px;flex-wrap:wrap;margin-top:clamp(24px,2.6vw,36px)}
.hero-trust{
  display:flex;gap:clamp(14px,2vw,30px);flex-wrap:wrap;
  margin-top:clamp(22px,2.4vw,32px);padding-top:20px;
  border-top:1px solid rgba(255,255,255,.14);
}
.hero-trust li{display:flex;align-items:center;gap:8px;font-size:13px;color:rgba(255,255,255,.76)}
.hero-trust svg{color:var(--gold-500);flex-shrink:0}
.hero-side{display:grid;gap:14px;justify-items:end}

@media (max-width:1080px){
  .hero-inner{grid-template-columns:minmax(0,1fr);gap:clamp(22px,3vw,34px)}
  .hero-side{justify-items:stretch}
  .hero-bg{background-position:72% center}
}
@media (max-width:768px){
  .hero{min-height:auto}
  .hero-inner{padding-top:clamp(26px,7vw,40px);padding-bottom:clamp(48px,10vw,68px)}
  .hero-copy h1{font-size:clamp(23px,6vw,29px);margin:12px 0 14px}
  .hero-copy .lead{font-size:14.5px}
  .hero-btns{gap:10px}
  .hero-btns .btn{flex:1 1 auto;min-width:136px}
  .hero-trust{gap:12px 20px}
  .hero-trust li{font-size:12.5px}
}
@media (max-width:400px){
  .hero-copy .lead{font-size:14px}
}

/* 12.2 快捷入口 */
.quick{position:relative;z-index:6;margin-top:clamp(-44px,-3.2vw,-24px)}
.quick-card{
  position:relative;
  display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:1px;
  background:var(--line-200);border:1px solid var(--line-200);
  border-radius:var(--r-l);overflow:hidden;box-shadow:var(--sh-2);
}
.quick-card--6{grid-template-columns:repeat(6,minmax(0,1fr))}
.quick-card::before{ /* 顶部流金细线：压在深色首屏下沿时拉出层次，右侧渐隐 */
  content:"";position:absolute;left:0;right:0;top:0;height:2px;z-index:2;
  background:linear-gradient(90deg,var(--gold-500) 0%,var(--gold-300) 42%,rgba(227,200,120,0) 96%);
}
.q-item{
  position:relative;display:flex;align-items:center;gap:clamp(11px,1.2vw,15px);
  padding:clamp(19px,2vw,27px) clamp(15px,1.6vw,24px);
  background:#fff;transition:background .25s;
}
.q-item:hover{background:var(--cream-50)}
.q-ico{
  width:clamp(40px,3.4vw,48px);height:clamp(40px,3.4vw,48px);flex-shrink:0;border-radius:11px;
  display:grid;place-items:center;color:var(--navy-700);
  background:linear-gradient(135deg,rgba(15,52,96,.08),rgba(201,164,76,.18));
  transition:background .25s,color .25s,transform .25s var(--ease);
}
.q-item:hover .q-ico{background:var(--navy-700);color:var(--gold-300);transform:translateY(-2px)}
.q-txt{min-width:0}
.q-item strong{display:block;font-size:clamp(14px,1.05vw,15.5px);color:var(--navy-700);line-height:1.4;font-weight:600}
.q-item em{display:block;font-family:var(--mono);font-style:normal;font-size:11px;letter-spacing:.07em;color:var(--ink-400);margin-top:2px;text-transform:uppercase}
.q-desc{display:block;font-size:12.5px;color:var(--ink-400);line-height:1.55;margin-top:5px}
.q-item::after{ /* 悬停才出现的指向箭头，静止时保持干净 */
  content:"";width:6px;height:6px;margin-left:auto;flex-shrink:0;
  border-right:1.5px solid var(--gold-500);border-top:1.5px solid var(--gold-500);
  transform:rotate(45deg);opacity:0;transition:opacity .22s,transform .25s var(--ease);
}
.q-item:hover::after{opacity:1;transform:rotate(45deg) translate(2px,-2px)}

@media (max-width:1180px){
  .quick-card,.quick-card--6{grid-template-columns:repeat(2,minmax(0,1fr))}   /* 偶数项 → 2×N，不留空位 */
}
@media (max-width:1080px){
  .q-desc{display:none}                       /* 中屏以下格子变窄，收起说明行 */
}
@media (max-width:768px){
  .quick{margin-top:-28px}
  .q-item{padding:16px 14px;gap:11px}
  .q-ico{width:38px;height:38px;border-radius:9px}
  .q-item em{display:none}          /* 窄屏只留中文，避免英文副标挤断行 */
  .q-item::after{display:none}      /* 触屏没有 hover，箭头无意义 */
}
@media (max-width:400px){
  .q-item{padding:13px 11px;gap:9px}
  .q-item strong{font-size:13.5px}
}

/* 12.3 协会简介 */
.about-grid{display:grid;grid-template-columns:minmax(0,1.02fr) minmax(0,.98fr);gap:clamp(30px,4.4vw,76px);align-items:center}
.about-copy{display:flex;flex-direction:column;justify-content:center}
.about-copy p{color:var(--ink-500);font-size:clamp(14.5px,1.05vw,15.5px);margin-bottom:16px;line-height:1.9}
.about-copy > p:first-of-type{ /* 首段作导语：字号与色阶各提一级，建立阅读层次 */
  color:var(--ink-700);font-size:clamp(15px,1.12vw,16.5px);line-height:1.92;
}
.about-copy .more{margin-top:8px}

.about-media{position:relative}
.about-media .am-main{
  position:relative;border-radius:var(--r-l);overflow:hidden;aspect-ratio:4/3;
  box-shadow:var(--sh-3);background:var(--navy-800);
}
.about-media .am-main img{width:100%;height:100%;object-fit:cover}
.about-media .am-cap{
  position:absolute;left:clamp(14px,1.6vw,22px);right:clamp(14px,1.6vw,22px);bottom:clamp(14px,1.6vw,22px);
  background:rgba(6,22,41,.8);backdrop-filter:blur(8px);border-radius:var(--r-m);
  padding:clamp(12px,1.3vw,16px) clamp(14px,1.5vw,20px);
  display:flex;align-items:center;justify-content:space-between;gap:14px;flex-wrap:wrap;
}
.about-media .am-cap b{color:#fff;font-size:clamp(13.5px,1.05vw,15px);font-weight:600}
.about-media .am-cap em{font-style:normal;font-family:var(--mono);font-size:10.5px;letter-spacing:.12em;color:var(--gold-300);text-transform:uppercase}
.about-media::before{ /* 左上角金色 L 形装饰 */
  content:"";position:absolute;left:-14px;top:-14px;width:96px;height:96px;z-index:-1;
  border-left:2px solid var(--gold-500);border-top:2px solid var(--gold-500);border-radius:4px 0 0 0;
}

@media (max-width:980px){
  .about-grid{grid-template-columns:minmax(0,1fr);gap:clamp(28px,3.6vw,44px)}
  .about-media::before{left:auto;right:-10px;top:-10px;border-left:0;border-right:2px solid var(--gold-500);border-radius:0 4px 0 0}
}
@media (max-width:860px){
  .about-media .am-main{aspect-ratio:16/11}
}
@media (max-width:560px){
  .about-media .am-main{aspect-ratio:4/3}
  .about-media .am-cap{left:10px;right:10px;bottom:10px;padding:10px 12px;gap:8px}
  .about-media .am-cap b{font-size:12.5px}
}

/* 12.4 文化传承通栏视觉带 */
.band{position:relative;overflow:hidden;background:var(--cream-100);border-block:1px solid var(--line-200)}
.band-img{position:absolute;inset:0;background:url("../images/hero-3.jpg") center/cover no-repeat}
.band-abacus{
  position:absolute;right:clamp(20px,6vw,120px);top:50%;transform:translateY(-50%);
  color:rgba(15,52,96,.14);pointer-events:none;
}
@media (max-width:768px){
  .band-abacus{right:-16px;opacity:.6}
  .band-abacus svg{width:84px;height:84px}
}
.band-img::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(90deg,rgba(251,250,247,.97) 0%,rgba(251,250,247,.88) 34%,rgba(251,250,247,.32) 62%,rgba(251,250,247,0) 88%);
}
.band .wrap{position:relative;z-index:2;display:flex;flex-direction:column;justify-content:center;gap:12px;
  min-height:clamp(184px,17vw,266px);padding-block:clamp(30px,3.4vw,52px)}
.band h2{font-size:clamp(19px,2.2vw,30px);color:var(--navy-700);max-width:24ch;line-height:1.4}
.band p{font-size:clamp(13px,1vw,14.5px);color:var(--ink-500);max-width:640px}
.band .more{align-self:flex-start;margin-top:6px}

@media (max-width:980px){
  .band .wrap{min-height:clamp(150px,20vw,200px)}
}
@media (max-width:768px){
  .band-img::after{background:linear-gradient(90deg,rgba(251,250,247,.97),rgba(251,250,247,.86) 55%,rgba(251,250,247,.4))}
  .band .wrap{min-height:auto;padding-block:26px}
}

/* 13. 新增通用微件 */

/* 13.1 标签行 .chips */
.chips{display:flex;flex-wrap:wrap;gap:7px}
.chips--center{justify-content:center}

.card-ico .chips{margin-top:14px}
.card-ico .ticks{margin-top:14px}
.card-ico .stars{margin-bottom:10px}

/* 13.7 区块内的一句补充说明 .note */
.note{margin-top:18px;font-size:13px;color:var(--ink-400);line-height:1.78}
.note--center{text-align:center}

.note--bad{color:var(--danger)}
.note[hidden]{display:none}
.note a{color:var(--gold-600);border-bottom:1px solid rgba(201,164,76,.45)}
.note a:hover{color:var(--gold-500)}

.chips .chip-sep{
  align-self:center;width:14px;height:1px;flex-shrink:0;position:relative;
  background:linear-gradient(90deg,rgba(201,164,76,.15),var(--gold-500));
}
.chips .chip-sep::after{
  content:"";position:absolute;right:0;top:50%;width:4px;height:4px;
  border-right:1.4px solid var(--gold-500);border-top:1.4px solid var(--gold-500);
  transform:translateY(-50%) rotate(45deg);
}

/* 13.2 星级 .stars */
.stars{display:flex;gap:3px}
.stars svg{color:var(--gold-500)}
.stars svg.off{color:var(--line-200)}

.grid-5 .card-ico{padding:clamp(16px,1.6vw,22px) clamp(12px,1.3vw,18px)}
.grid-5 .card-ico .ci-ico{width:clamp(38px,3vw,44px);height:clamp(38px,3vw,44px);margin-bottom:14px}
.grid-5 .card-ico h3{font-size:clamp(14.5px,1.1vw,16.5px)}
.grid-5 .card-ico > p{font-size:12.8px;line-height:1.72}
.grid-5 .card-ico .ci-num{right:10px;top:10px;min-width:26px;padding:2px 7px;font-size:10.5px}
.grid-5 .stars{gap:2px}
.grid-5 .stars svg{width:13px;height:13px}

/* 13.3 通知行 .notice */
.notices{display:grid;gap:12px}
.notice{
  display:grid;grid-template-columns:auto minmax(0,1fr) auto;
  align-items:center;gap:clamp(14px,1.7vw,24px);
  background:#fff;border:1px solid var(--line-200);border-radius:var(--r-m);
  padding:clamp(15px,1.6vw,20px);
  transition:transform .3s var(--ease),box-shadow .3s,border-color .3s;
}
.notice:hover{transform:translateY(-3px);box-shadow:var(--sh-2);border-color:transparent}
.notice .n-date{
  width:clamp(56px,5vw,66px);flex-shrink:0;text-align:center;
  padding-right:clamp(12px,1.4vw,18px);border-right:1px dashed var(--line-200);
  font-family:var(--mono);
}
.notice .n-date b{display:block;font-size:clamp(20px,1.8vw,25px);color:var(--navy-700);line-height:1;font-weight:600}
.notice .n-date span{display:block;font-size:10.5px;color:var(--ink-400);letter-spacing:.05em;margin-top:5px}
.notice .n-body{min-width:0}
.notice h3{font-size:clamp(14.5px,1.1vw,16.5px);color:var(--ink-900);line-height:1.62;transition:color .25s}
.notice:hover h3{color:var(--navy-700)}
.notice p{font-size:13px;color:var(--ink-500);line-height:1.75;margin-top:6px}
.notice .n-go{
  display:inline-flex;align-items:center;gap:7px;flex-shrink:0;
  font-size:13px;font-weight:500;color:var(--gold-600);
  padding-bottom:3px;border-bottom:1px solid rgba(201,164,76,.45);
}
.notice .n-go:hover{color:var(--gold-500)}
.notice .n-go svg{transition:transform .25s var(--ease)}
.notice:hover .n-go svg{transform:translateX(3px)}

.notice--link{cursor:pointer}
@media (max-width:860px){
  .notice{grid-template-columns:minmax(0,1fr);gap:12px}
  .notice .n-date{
    display:flex;align-items:baseline;gap:8px;width:auto;text-align:left;
    padding:0 0 0 0;border-right:0;border-bottom:0;
  }
  .notice .n-date b{font-size:15px}
  .notice .n-date span{margin-top:0;font-size:11.5px}
  .notice .n-go{align-self:flex-start}
}

/* 13.35 证书类型 Tab .cert-tabs */
.cert-tabs{
  display:inline-flex;gap:6px;flex-wrap:wrap;
  padding:5px;border:1px solid var(--line-200);border-radius:999px;background:var(--cream-100);
  margin-bottom:clamp(20px,2.4vw,30px);
}
.cert-tab{
  border:0;background:transparent;cursor:pointer;padding:9px 22px;border-radius:999px;
  font-size:14px;font-weight:500;color:var(--ink-500);white-space:nowrap;
  transition:background .25s,color .25s;
}
.cert-tab:hover{color:var(--navy-700)}
.cert-tab.is-active{background:var(--navy-700);color:#fff;font-weight:600}
@media (max-width:560px){
  .cert-tabs{display:flex;width:100%}
  .cert-tab{flex:1;padding:9px 0;text-align:center}
}

/* 13.4 分页 .pagination */
.pagination{
  display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:8px;
  margin-top:clamp(28px,3.2vw,46px);list-style:none;
}
.pagination li{display:flex}
.pagination li a,.pagination li span{
  display:inline-flex;align-items:center;justify-content:center;
  min-width:42px;height:42px;padding:0 13px;
  font-size:13.5px;color:var(--ink-700);background:#fff;
  border:1px solid var(--line-200);border-radius:10px;
  transition:border-color .2s var(--ease),color .2s,background .2s;
}
.pagination li a:hover{border-color:var(--gold-500);color:var(--gold-600)}
.pagination li.active a,.pagination li.active span{
  background:var(--navy-700);border-color:var(--navy-700);color:#fff;font-weight:600;
}
.pagination li.disabled a,.pagination li.disabled span{
  color:var(--ink-400);background:var(--cream-100);border-color:var(--line-100);
}
@media (max-width:560px){
  .pagination li a,.pagination li span{min-width:38px;height:38px;padding:0 10px;font-size:13px}
}

.meta{
  display:flex;flex-wrap:wrap;align-items:center;gap:9px 22px;
  margin-top:16px;font-size:12.5px;color:var(--ink-400);
}
.meta li{display:flex}
.meta span{display:inline-flex;align-items:center;gap:6px}
.meta svg{color:var(--gold-500);flex-shrink:0}
.meta--center{justify-content:center}
/* 用在卡片顶端时不要额外上间距 */
.meta--flush{margin-top:0}
.prevnext{
  display:grid;gap:10px;margin-top:clamp(30px,3.4vw,46px);
  padding-top:clamp(22px,2.4vw,30px);border-top:1px solid var(--line-200);
}
.prevnext a{
  display:flex;gap:14px;align-items:baseline;
  padding:13px 16px;background:#fff;border:1px solid var(--line-200);border-radius:var(--r-m);
  font-size:14px;color:var(--ink-700);transition:border-color .25s var(--ease),color .25s,transform .25s var(--ease);
}
.prevnext a:hover{border-color:var(--gold-500);color:var(--navy-700);transform:translateX(3px)}
.prevnext b{flex-shrink:0;font-weight:500;font-size:13px;color:var(--ink-400)}
.figcap{margin-top:10px;font-size:12.5px;color:var(--ink-400);text-align:center;line-height:1.7}

.fig-block{position:relative;overflow:hidden;margin-top:clamp(22px,2.4vw,32px);border-radius:var(--r-m)}
.fig-block img{width:100%;height:auto;border-radius:var(--r-m);cursor:zoom-in;transition:transform .34s var(--ease)}

.cert-card-body{display:grid;grid-template-columns:minmax(0,1fr) 208px;gap:20px;align-items:start}
.cert-card-fig{align-self:start}
.cert-card-fig .fig-block{margin-top:0}
.cert-card-info dl{margin-top:0}
@media (max-width:760px){
  .cert-card-body{grid-template-columns:minmax(0,1fr);gap:14px}
  .cert-card-fig{order:-1;max-width:300px}
}

.cert-detail{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,340px);gap:clamp(20px,2.6vw,40px);align-items:start}
.cert-detail .fig-block{margin-top:0}
.cert-detail .figcap{margin-top:12px}
@media (max-width:900px){
  .cert-detail{grid-template-columns:minmax(0,1fr)}
}

/* 13.6 进场动效 .reveal */
html.js .reveal{opacity:0;transform:translateY(14px);transition:opacity .6s var(--ease),transform .6s var(--ease)}
html.js .reveal.in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){
  html.js .reveal{opacity:1;transform:none;transition:none}
}

/* 14. 查询结果面板 .qres */
.qres{display:none;margin-top:clamp(22px,2.4vw,32px)}
.qres.show{display:block}
.qres .qr-box{
  background:#fff;border:1px solid var(--line-200);border-left:3px solid var(--gold-500);
  border-radius:var(--r-m);padding:clamp(18px,2vw,26px);
}
.qres h4{font-size:clamp(16px,1.3vw,18px);color:var(--navy-700);margin-bottom:10px;line-height:1.5}
.qres p{font-size:13.5px;color:var(--ink-500);line-height:1.88}
.qres a{color:var(--gold-600);border-bottom:1px solid rgba(201,164,76,.45)}
.qres a:hover{color:var(--gold-500)}
.qres dl{
  display:grid;grid-template-columns:auto minmax(0,1fr);
  gap:9px clamp(16px,2vw,28px);margin-top:14px;font-size:13.5px;line-height:1.7;
}
.qres dt{color:var(--ink-400);white-space:nowrap}
.qres dd{color:var(--ink-900);min-width:0;overflow-wrap:break-word}
.qres--bad .qr-box{border-left-color:var(--danger)}
.qres--bad h4{color:var(--danger)}
@media (max-width:560px){
  .qres dl{grid-template-columns:minmax(0,1fr);gap:2px}
  .qres dt{margin-top:8px}
}

/* 15. 表单样式映射 */
.form-group{
  display:grid;grid-template-columns:auto minmax(0,1fr);
  gap:8px clamp(14px,1.8vw,24px);
  
  align-items:start;
  margin-bottom:16px;
}
.form-group > .control-label{
  font-size:12.5px;font-weight:600;color:var(--ink-700);
  margin:0;text-align:left;white-space:nowrap;
  /* 与单行控件（46px）首行对齐，避免顶端对齐后标签显得偏高 */
  padding-top:14px;
}

.form-group > [class*="col-md-"]:not(.control-label){width:auto;min-width:0;padding:0}
/* 系统的字段引擎会把「字段宽度」写在输入框的行内样式里；
   这里统一撑满整行，宽度一律由外层栏宽决定（日期字段见第 19.1 节，单独处理）。 */
.form-control{
  width:100%!important;height:46px;padding:0 13px;
  font-family:inherit;font-size:14.5px;color:var(--ink-900);background:#fff;
  border:1px solid var(--line-200);border-radius:10px;
  -webkit-appearance:none;appearance:none;
  transition:border-color .2s var(--ease),box-shadow .2s var(--ease);
}
.form-control:focus{outline:0;border-color:var(--gold-500);box-shadow:0 0 0 3px rgba(201,164,76,.18)}
textarea.form-control{height:auto!important;min-height:104px;padding:11px 13px;line-height:1.7;resize:vertical}
select.form-control{padding-right:34px;background-image:linear-gradient(45deg,transparent 50%,var(--ink-400) 50%),linear-gradient(135deg,var(--ink-400) 50%,transparent 50%);background-position:calc(100% - 18px) 21px,calc(100% - 13px) 21px;background-size:5px 5px,5px 5px;background-repeat:no-repeat}
.help-block{display:block;margin-top:6px;font-size:11.5px;color:var(--ink-400);line-height:1.6}
.required{color:var(--danger)}
.form-actions{margin-top:clamp(22px,2.4vw,30px)}
.form-actions .btn.green,
.btn.green{background:var(--gold-500);color:#20170A}
.form-actions .btn.green:hover,
.btn.green:hover{background:var(--gold-300);transform:translateY(-2px);box-shadow:0 10px 26px rgba(201,164,76,.34)}
.form-actions .btn{margin-inline:auto}

.form-actions--split{display:flex;flex-wrap:wrap;gap:12px;align-items:center}
.form-actions--split .btn{margin-inline:0}
/* 按钮组里的子分组：整组一起折行 —— 一行放得下就与前面的按钮同排，
   放不下就整组移到下一行，不会把一组按钮拆散在上下两行。 */
.form-actions__group{display:flex;flex-wrap:wrap;gap:12px;align-items:center}
/* 表单控件的按钮与结构 */
.btn.blue{background:var(--navy-700);color:#fff}
.btn.blue:hover{background:var(--navy-800);transform:translateY(-2px);box-shadow:var(--sh-2)}
.btn.red{background:transparent;color:var(--danger);border-color:rgba(194,69,61,.42)}
.btn.red:hover{background:var(--danger);color:#fff;border-color:var(--danger)}

.btn-sm{min-height:34px;padding:0 14px;font-size:13px;border-radius:8px}
.btn-xs{min-height:28px;padding:0 11px;font-size:12.5px;border-radius:7px}

.finecms-file-ts,
p.finecms-file-ts{margin:8px 0 0;font-size:11.5px;line-height:1.7;color:var(--ink-400)}

.fileupload-buttonbar{display:flex;flex-wrap:wrap;gap:10px;align-items:center;margin-bottom:10px}
.fileupload-progress{height:6px;border-radius:99px;background:var(--line-200);overflow:hidden;margin-bottom:10px}
.fileupload-progress .progress-bar{height:100%;background:var(--gold-500)}
.files_row_preview,
.fileupload-preview{display:inline-flex;align-items:center;gap:6px;margin:6px 8px 0 0}
.files_row_preview img,
.fileupload-preview img{border:1px solid var(--line-200);border-radius:8px}
.files_row_preview a,
.fileupload-preview a{font-size:12.5px;color:var(--navy-700)}

.dropzone-images-area{display:flex;flex-wrap:wrap;gap:12px;min-height:0}
.dz-image img{border:1px solid var(--line-200);border-radius:10px}
.dz-preview .dz-remove{font-size:11.5px;color:var(--danger)}

.dropzone-images-area .dz-remove i.icon-fa,
.dropzone-images-area .dz-remove i[class*="fa-"]{display:none}
.dropzone-images-area .dz-remove::after{content:'删除'}
.dropzone-images-area .dz-remove{display:inline-block;margin-top:4px;cursor:pointer;text-decoration:none}
.dropzone-images-area .dz-remove:hover{text-decoration:underline}

/* 证件号码填写规则 */
.idrule{
  margin-top:18px;border:1px solid var(--line-200);border-radius:var(--r-m);
  background:var(--cream-100);overflow:hidden;
}
.idrule > summary{
  cursor:pointer;padding:13px 16px;font-size:13.5px;font-weight:600;color:var(--navy-700);
  list-style:none;
}
.idrule > summary::-webkit-details-marker{display:none}
.idrule > summary::before{content:"+";display:inline-block;width:16px;font-weight:700;color:var(--gold-600)}
.idrule[open] > summary::before{content:"−"}
.idrule-body{padding:0 16px 16px}
.idrule-body ul{display:grid;gap:14px}
.idrule-body li{padding-top:12px;border-top:1px solid var(--line-200)}
.idrule-body h4{font-size:13px;color:var(--navy-700);margin-bottom:5px}
.idrule-body p{font-size:12.5px;line-height:1.85;color:var(--ink-500)}
.idrule-sample{
  display:inline-block;margin-top:7px;padding:3px 9px;border-radius:6px;
  background:#fff;border:1px solid var(--line-200);
  font-family:var(--mono);font-size:12px;color:var(--ink-700);
}
.idrule-tip{margin-top:12px;padding-top:12px;border-top:1px dashed var(--line-200);font-size:11.5px;color:var(--ink-400)}
.list-unstyled{list-style:none}
.text-center{text-align:center}

.pre-line{white-space:pre-line}
.margin-top-30{margin-top:30px}
/* 表单列表页的行 */
.fc-list-form{display:grid;gap:10px}
.fc-list-form > li{
  display:flex;align-items:baseline;justify-content:space-between;gap:16px;
  padding:13px 16px;background:#fff;border:1px solid var(--line-200);border-radius:var(--r-m);
}
.fc-list-form .title{font-size:14.5px;color:var(--navy-700);font-weight:500}
.fc-list-form .title:hover{color:var(--gold-600)}
.fc-list-form > li > span{font-family:var(--mono);font-size:12px;color:var(--ink-400);flex-shrink:0}
@media (max-width:768px){
  .form-group{grid-template-columns:minmax(0,1fr);gap:7px}
  .form-group > .control-label{padding-top:0}   /* 单列时标签在控件上方，无需补高 */
  .form-control{font-size:16px}   /* ≥16px，防 iOS 聚焦时页面缩放 */
  .fc-list-form > li{flex-direction:column;gap:6px}
}

/* 16. 在线考试答题 */

/* 16.1 吸顶状态条 */
.exam-bar{
  position:sticky;top:0;z-index:30;
  display:flex;flex-wrap:wrap;align-items:center;gap:12px 16px;
  padding:11px clamp(14px,2.4vw,26px);
  background:rgba(255,255,255,.96);
  backdrop-filter:blur(6px);
  border-bottom:1px solid var(--line-200);
  box-shadow:0 2px 12px rgba(15,52,96,.06);
}
.exam-bar .eb-title{font-size:14.5px;font-weight:600;color:var(--navy-700);min-width:0}
.exam-bar .eb-spacer{margin-left:auto}
.exam-timer{
  display:inline-flex;align-items:center;gap:7px;
  font-family:var(--mono);font-size:15px;font-weight:600;letter-spacing:.04em;
  color:var(--navy-700);padding:6px 13px;border-radius:999px;
  background:var(--cream-50);border:1px solid var(--line-200);
}
.exam-timer svg{color:var(--gold-500)}

.exam-timer.warn{
  color:var(--danger);background:var(--danger-bg);border-color:rgba(194,69,61,.35);
  animation:exam-breath 1.8s ease-in-out infinite;
}
.exam-timer.warn svg{color:var(--danger)}
@keyframes exam-breath{0%,100%{opacity:1}50%{opacity:.62}}

/* 16.2 题号导航 */
.exam-nav{display:grid;grid-template-columns:repeat(auto-fill,minmax(36px,1fr));gap:7px}
.exam-nav button{
  height:36px;padding:0;cursor:pointer;
  border:1px solid var(--line-200);border-radius:9px;background:#fff;
  font-family:var(--mono);font-size:12.5px;color:var(--ink-500);
  transition:background .2s var(--ease),border-color .2s var(--ease),color .2s var(--ease);
}
.exam-nav button:hover{border-color:#CFD6DF}
.exam-nav button.done{background:rgba(201,164,76,.12);border-color:var(--gold-500);color:var(--navy-700);font-weight:600}
.exam-nav button.cur{background:var(--navy-700);border-color:var(--navy-700);color:#fff}
/* 练习模式才用得上对错底色；正式考试交卷前不显示（那是答案） */
.exam-nav button.right{background:var(--ok-bg);border-color:var(--ok-line);color:var(--ok)}
.exam-nav button.wrong{background:var(--danger-bg);border-color:var(--danger-line);color:var(--danger)}

/* 16.3 单题 */
/* 答题页 · 测试项分段标题（第一部分 单选 / 第二部分 多选 …） */
.exam-part{
  max-width:920px;margin:0 auto 20px;padding-bottom:10px;
  font-size:16px;font-weight:600;color:var(--navy-700);
  border-bottom:2px solid var(--line-200);
}
.exam-part-n{font-size:13px;font-weight:400;color:var(--ink-500);margin-left:8px}
.exam-fill{max-width:920px;margin-inline:auto;margin-top:12px}
.exam-fill .frm-input{max-width:520px}

.exam-q{max-width:920px;margin-inline:auto}
.exam-q .eq-no{
  display:inline-block;font-family:var(--mono);font-size:11.5px;letter-spacing:.08em;
  text-transform:uppercase;color:var(--ink-400);
}
.exam-q .eq-title{
  font-size:clamp(15px,1.15vw,16.5px);color:var(--navy-700);line-height:1.85;
  margin:9px 0 18px;font-weight:500;
}
.exam-opts{display:grid;gap:9px}

.exam-opts .frm-opt span{
  justify-items:start;text-align:left;min-height:0;
  padding:11px 15px;line-height:1.75;font-size:14px;
}

/* 16.4 解析块 */
.exam-ana{
  margin-top:16px;padding:14px 17px;border-radius:var(--r-m);
  background:var(--cream-50);border-left:3px solid var(--gold-500);
  font-size:13.5px;color:var(--ink-500);line-height:1.85;
}
.exam-ana b{color:var(--navy-700)}
.exam-ana--ok{background:var(--ok-bg);border-left-color:var(--ok-line)}
.exam-ana--bad{background:var(--danger-bg);border-left-color:var(--danger-line)}

/* 16.5 成绩页的分数牌 */
.exam-score{
  display:flex;flex-wrap:wrap;align-items:baseline;gap:8px 18px;
  padding:clamp(18px,2.2vw,26px);border-radius:var(--r-m);background:#fff;
  border:1px solid var(--line-200);border-left:3px solid var(--gold-500);
}
.exam-score .es-num{font-family:var(--mono);font-size:clamp(30px,4vw,44px);font-weight:600;color:var(--navy-700);line-height:1}
.exam-score .es-unit{font-size:14px;color:var(--ink-400)}
.exam-score .es-cap{font-size:13px;color:var(--ink-500)}
.exam-score--bad{border-left-color:var(--danger-line)}
.exam-score--bad .es-num{color:var(--danger)}

/* 16.6 窄屏 */
@media (max-width:768px){
  .exam-bar{gap:9px 12px;padding:10px 14px}
  .exam-bar .eb-title{font-size:13.5px}
  .exam-timer{font-size:14px;padding:5px 11px}
  .exam-nav{grid-template-columns:repeat(auto-fill,minmax(32px,1fr));gap:6px}
  .exam-nav button{height:32px;font-size:12px;border-radius:8px}
  .exam-opts .frm-opt span{padding:10px 13px;font-size:13.5px}
}

/* 17. 扫码支付 */
.pay-scan{margin-top:clamp(18px,2.2vw,26px);text-align:center}
.pay-scan-amt{
  display:flex;align-items:baseline;justify-content:center;gap:8px;flex-wrap:wrap;
  padding:clamp(14px,1.7vw,20px) 16px;border-radius:var(--r-m);
  background:var(--cream-50);border:1px solid var(--line-200);
}
.pay-scan-lb{font-size:13px;color:var(--ink-400)}
.pay-scan-num{font-family:var(--mono);font-size:clamp(26px,3.4vw,36px);font-weight:600;color:var(--navy-700);line-height:1}
.pay-scan-cur{font-size:14px;color:var(--ink-500)}
.pay-scan .wxpay{
  display:block;width:min(220px,64vw);height:auto;margin:clamp(18px,2.2vw,26px) auto 0;
  padding:10px;background:#fff;border:1px solid var(--line-200);border-radius:var(--r-m);
}
.pay-scan .fc-weixin-pay{
  display:inline-flex;align-items:center;justify-content:center;min-height:50px;
  margin:clamp(18px,2.2vw,26px) 0 0;padding:0 34px;border:0;border-radius:var(--r-s);
  font-family:inherit;font-size:15px;font-weight:600;letter-spacing:.02em;color:#20170A;
  background:var(--gold-500);text-decoration:none;cursor:pointer;transition:background .22s var(--ease);
}
.pay-scan .fc-weixin-pay:hover{background:var(--gold-300)}
.pay-scan-tip{margin-top:14px;font-size:12.5px;color:var(--ink-400);line-height:1.7}

/* 18. 缴费方式与收款信息 */
.frm-pick{display:flex;flex-wrap:wrap;gap:9px}
.frm-pick .frm-opt{flex:0 0 auto}
.frm-pick .frm-opt span{min-width:108px;padding:7px 18px;white-space:nowrap}
.frm-row--coupon{grid-template-columns:minmax(0,1fr) auto;align-items:start}
.frm-row--coupon .btn{min-height:46px;white-space:nowrap}
.pay-off{
  display:grid;grid-template-columns:minmax(0,232px) minmax(0,1fr);
  gap:clamp(16px,2.2vw,26px);align-items:start;margin-top:20px;
}
.pay-off--single{grid-template-columns:minmax(0,232px)}
.pay-off-qr img{display:block;width:100%;height:auto;padding:6px;background:#fff;border:1px solid var(--line-200);border-radius:var(--r-m)}
.pay-off-qr .figcap{text-align:left;margin-top:10px}
.pay-off-acc{
  display:flex;flex-direction:column;gap:9px;padding:clamp(16px,1.8vw,22px);
  border-radius:var(--r-m);background:var(--cream-50);border:1px solid var(--line-200);
}
.pay-off-acc h4{font-size:15px;color:var(--navy-700);line-height:1.5}
.pay-off-acc .pre-line{font-size:13.5px;color:var(--ink-500);line-height:1.85}

/* 18.1 窄屏 */
@media (max-width:640px){
  .pay-off,.pay-off--single{grid-template-columns:1fr}
  .frm-row--coupon{grid-template-columns:1fr}
}

/* 19. 日期选择器浮层（系统字段引擎自带的那一个）
   申报表单里的出生日期等字段用的是系统的日期控件：输入框 + 日历按钮，
   点开后是一个浮在页面上的日历面板。

   这个面板自身的配色、格子、悬停都带在控件的样式里，但它的外层容器
   （定位、白底、边框、阴影）在系统的默认假设里由 Bootstrap 提供，
   而本主题不引 Bootstrap —— 于是面板会掉进正常文档流、被全局的
   表格宽度规则撑满整屏、也没有底色和边框，点开等于没反应。

   下面只补容器这一层，面板内部外观仍由控件自带样式决定；
   选择器带上 .datepicker-dropdown，不会波及其它下拉菜单。 */
.datepicker-dropdown.datepicker{
  position:absolute;top:0;left:0;z-index:1051;float:left;
  min-width:200px;padding:6px;
  background:#fff;color:#333;
  border:1px solid var(--line-200);border-radius:var(--r-m);
  box-shadow:var(--sh-2);
  font-size:13px;line-height:20px;
}
.datepicker-dropdown table{width:auto}
.datepicker-dropdown table>thead>tr>th,
.datepicker-dropdown table>tbody>tr>td{padding:4px 5px;border:0}

/* 19.1 日期字段排成一行
   输入框宽度按字段自身的设置显示：字段宽度写在输入框的行内样式里，
   而主题给所有输入框设了统一的整行宽度（见第 8 节 .form-control），
   所以这里把行内宽度重新提升为最优先，别的字段不受影响。
   日历按钮跟在输入框右侧、与输入框等高。
   按钮里的日历图标在系统那边是图标字体，而本站没引图标字体 —— 不补的话它是个空按钮，
   所以这里用矢量图标填上，颜色跟随按钮自身，悬停时一并变金。 */
.input-group.date{display:flex;align-items:center;gap:10px;width:fit-content;max-width:100%}
.input-group.date .form-control{flex:0 1 auto;min-width:140px}
.input-group.date .input-group-btn{display:block;flex:0 0 auto;font-size:0;line-height:0}
.input-group.date .date-set{
  width:46px;height:46px;padding:0;gap:0;
  background:#fff;border-color:var(--line-200);border-radius:10px;color:var(--ink-400);
  cursor:pointer;
}
.input-group.date .date-set:hover,
.input-group.date .date-set:focus-visible{
  border-color:var(--gold-500);color:var(--gold-600);outline:0;
  box-shadow:0 0 0 3px rgba(201,164,76,.18);
}
.input-group.date .date-set i{
  display:block;width:18px;height:18px;background:currentColor;
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='4' width='18' height='18' rx='2'/%3E%3Cpath d='M16 2v4M8 2v4M3 10h18'/%3E%3C/svg%3E") center/contain no-repeat;
          mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='4' width='18' height='18' rx='2'/%3E%3Cpath d='M16 2v4M8 2v4M3 10h18'/%3E%3C/svg%3E") center/contain no-repeat;
}

/* 19.2 日期面板的左右翻页箭头
   面板顶部左右两个翻页按钮里放的是图标字体的字符，而本站没引图标字体 ——
   不补的话两个按钮都是空白的（只剩悬停时的一小块灰底，看着像显示坏了）。
   这里换成本站自绘的矢量箭头，颜色跟随文字色，
   所以悬停变灰底、翻到头变禁用色时，箭头都会跟着一起变。 */
.datepicker-dropdown th.prev i,
.datepicker-dropdown th.next i{
  display:block;width:16px;height:20px;margin:0 auto;
  background:currentColor;
}
.datepicker-dropdown th.prev i{
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M15 18l-6-6 6-6'/%3E%3C/svg%3E") center/14px 14px no-repeat;
          mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M15 18l-6-6 6-6'/%3E%3C/svg%3E") center/14px 14px no-repeat;
}
.datepicker-dropdown th.next i{
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 18l6-6-6-6'/%3E%3C/svg%3E") center/14px 14px no-repeat;
          mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 18l6-6-6-6'/%3E%3C/svg%3E") center/14px 14px no-repeat;
}

/* 20. 图片放大查看（点击证书 / 资料图，全屏看原图） */
.figbox{
  position:fixed;inset:0;z-index:140;
  display:flex;align-items:center;justify-content:center;
  padding:clamp(14px,3.6vw,44px);
  background:rgba(8,18,32,.86);
  opacity:0;visibility:hidden;
  transition:opacity .22s var(--ease),visibility .22s var(--ease);
}
.figbox.on{opacity:1;visibility:visible}
.figbox-i{
  max-width:100%;max-height:100%;width:auto;height:auto;
  border-radius:var(--r-m);background:#fff;cursor:zoom-out;
  box-shadow:0 26px 64px rgba(0,0,0,.4);
}
.figbox-x{
  position:absolute;top:clamp(10px,2.2vw,20px);right:clamp(10px,2.2vw,20px);
  width:40px;height:40px;display:flex;align-items:center;justify-content:center;
  border:0;padding:0;border-radius:50%;
  background:rgba(255,255,255,.16);color:#fff;cursor:pointer;
  transition:background .2s,color .2s;
}
.figbox-x:hover{background:#fff;color:var(--navy-700)}
html.figbox-lock{overflow:hidden}
@media (prefers-reduced-motion:reduce){
  .figbox{transition:none}
}