/* ==========================================================================
   魔兽世界：无限 · 九职业机制与改动页（classes-changes.html）
   --------------------------------------------------------------------------
   设计口径：
   · 底色 / 金色 / 字体全部复用 wow.css 的 :root 变量，不新造色相。
   · 这一页是「查数据」的页面，信息密度优先 —— 卡片留白比站内其他页紧一档。
   · 表格不用 <table>，改用 grid 行：手机上一键转成上下堆叠，天然不横向溢出
     （tips.html 那 132 张表就是这个坑，别在这里重犯）。
   · 状态色沿用天赋页角标那套：新增=绿 / 改动=黄 / 位置=蓝 / 重做=红。
   ========================================================================== */

/* ---------- 首屏数字条 ---------- */
.cf-stats{display:flex;flex-wrap:wrap;gap:10px;margin-top:22px}
.cf-stat{
  min-width:132px;padding:12px 18px 13px;border-radius:10px;
  background:linear-gradient(180deg,rgba(28,24,16,.72),rgba(12,11,8,.78));
  border:1px solid rgba(216,180,90,.3);
  box-shadow:inset 0 1px 0 rgba(255,240,200,.08);
}
.cf-stat b{
  display:block;font-family:var(--f-title);font-size:26px;line-height:1.1;
  color:var(--gold-hi);letter-spacing:1px;
}
.cf-stat span{display:block;margin-top:4px;font-size:11.5px;color:var(--parch-3);letter-spacing:.3px}

/* ---------- 总览表 ---------- */
.cf-ovw{
  border:1px solid rgba(216,180,90,.22);border-radius:12px;overflow:hidden;
  background:rgba(9,10,13,.55);
}
.cf-ovw-head,.cf-ovw-row{
  display:grid;
  grid-template-columns:200px 1fr 130px 120px 110px 110px minmax(220px,1.4fr) 84px;
  gap:10px;align-items:center;padding:11px 16px;
}
.cf-ovw-head{
  font-size:11.5px;letter-spacing:1.2px;color:var(--parch-3);
  background:rgba(216,180,90,.07);border-bottom:1px solid rgba(216,180,90,.22);
}
.cf-ovw-row{border-bottom:1px solid rgba(255,255,255,.055);transition:background .14s}
.cf-ovw-row:last-child{border-bottom:0}
.cf-ovw-row:hover{background:rgba(216,180,90,.055)}
.cf-ovw-cls{display:flex;align-items:center;gap:10px;text-decoration:none;min-width:0}
.cf-ovw-cls img{width:34px;height:34px;border-radius:6px;border:1px solid rgba(216,180,90,.4);flex:0 0 auto}
.cf-ovw-cls b{font-size:14.5px;color:var(--parch);font-weight:600;letter-spacing:.5px}
.cf-ovw-row:hover .cf-ovw-cls b{color:var(--gold-hi)}
.cf-ovw-t{font-size:12.6px;color:var(--parch-2)}
.cf-ovw-n{font-size:13px;color:var(--parch);font-variant-numeric:tabular-nums}
.cf-ovw-n i{font-style:normal;font-size:11px;color:var(--st-new);margin-left:4px}
.cf-ovw-rep{font-size:12px;color:var(--parch-3);line-height:1.7;min-width:0}
.cf-ovw-rep a{color:var(--parch-2);text-decoration:none;border-bottom:1px dotted rgba(200,190,160,.35)}
.cf-ovw-rep a:hover{color:var(--gold-hi);border-bottom-color:var(--gold)}
.cf-ovw-more{
  justify-self:end;padding:6px 12px;border-radius:7px;cursor:pointer;
  font-size:12px;font-family:inherit;letter-spacing:.3px;
  color:#241a06;background:linear-gradient(180deg,#f4e3ae,#d3ae5a);
  border:1px solid rgba(255,235,175,.7);
  transition:filter .14s,transform .14s;
}
.cf-ovw-more:hover{filter:brightness(1.08);transform:translateY(-1px)}

/* ---------- 职业区块 ---------- */
.cf-cls{
  margin:0 0 16px;border:1px solid rgba(216,180,90,.2);border-radius:12px;
  background:linear-gradient(180deg,rgba(16,17,21,.9),rgba(9,10,13,.92));
  overflow:hidden;scroll-margin-top:104px;
}
.cf-cls.on{border-color:rgba(216,180,90,.5);box-shadow:0 0 0 1px rgba(216,180,90,.16),0 18px 44px -30px rgba(0,0,0,.9)}
.cf-hd{display:flex;align-items:center;gap:14px;padding:14px 18px;cursor:pointer;user-select:none}
.cf-hd:hover{background:rgba(216,180,90,.045)}
.cf-hd-ico{
  width:46px;height:46px;flex:0 0 auto;border-radius:8px;
  border:1px solid rgba(216,180,90,.45);box-shadow:0 2px 10px rgba(0,0,0,.6);
}
.cf-hd-m{min-width:0;flex:1 1 auto}
.cf-hd-m h3{
  font-family:var(--f-title);font-size:19px;color:var(--gold-hi);
  letter-spacing:1.4px;display:flex;align-items:baseline;gap:10px;
}
.cf-hd-m h3 em{font-style:normal;font-size:11.5px;color:var(--parch-3);letter-spacing:1px}
.cf-hd-m p{margin-top:4px;font-size:12.4px;color:var(--parch-3);letter-spacing:.2px}
.cf-hd-m p b{color:var(--parch-2);font-weight:600}
.cf-hd-btn{
  flex:0 0 auto;display:inline-flex;align-items:center;gap:7px;
  padding:7px 14px;border-radius:8px;font-size:12.5px;font-family:inherit;cursor:pointer;
  color:var(--gold-hi);background:rgba(216,180,90,.1);
  border:1px solid rgba(216,180,90,.38);transition:background .15s,border-color .15s;
}
.cf-hd-btn:hover{background:rgba(216,180,90,.2);border-color:rgba(216,180,90,.62)}
.cf-hd-btn i{
  width:7px;height:7px;border-right:1.8px solid currentColor;border-bottom:1.8px solid currentColor;
  transform:rotate(45deg) translate(-1px,-1px);transition:transform .16s;
}
.cf-cls.on .cf-hd-btn i{transform:rotate(-135deg) translate(-2px,-1px)}

.cf-bd{border-top:1px solid rgba(216,180,90,.16);padding:0 18px 18px}
.cf-bd[hidden]{display:none}

/* ---------- tab ---------- */
.cf-tabs{display:flex;flex-wrap:wrap;gap:8px;padding:14px 0 12px;position:sticky;top:88px;
  background:linear-gradient(180deg,rgba(13,14,18,.98),rgba(13,14,18,.9));z-index:2}
.cf-tab{
  display:inline-flex;align-items:center;gap:7px;padding:8px 14px;border-radius:8px;
  font-size:12.8px;font-family:inherit;cursor:pointer;letter-spacing:.3px;
  color:var(--parch-2);background:rgba(255,255,255,.04);
  border:1px solid rgba(255,255,255,.1);transition:all .14s;
}
.cf-tab b{font-size:11px;font-weight:600;color:var(--parch-3);font-variant-numeric:tabular-nums}
.cf-tab:hover{border-color:rgba(216,180,90,.4);color:var(--gold-hi)}
.cf-tab.on{
  color:#241a06;background:linear-gradient(180deg,#f0ddA4,#cfa951);
  border-color:rgba(255,235,175,.75);font-weight:700;
}
.cf-tab.on b{color:rgba(36,26,6,.62)}

/* ---------- 分组标题 ---------- */
.cf-grp{
  display:flex;align-items:center;gap:10px;margin:16px 0 9px;
  font-family:var(--f-title);font-size:14.5px;color:var(--gold);letter-spacing:1.4px;
}
.cf-grp::after{content:"";flex:1 1 auto;height:1px;
  background:linear-gradient(90deg,rgba(216,180,90,.34),transparent)}
.cf-grp span{font-family:var(--f-body);font-size:11px;color:var(--parch-3);letter-spacing:.4px}

/* ---------- 技能改动行 ---------- */
.cf-row{
  display:grid;grid-template-columns:250px 112px 1fr;gap:12px;align-items:start;
  padding:10px 0;border-bottom:1px solid rgba(255,255,255,.05);
}
.cf-row:last-child{border-bottom:0}
.cf-id{display:flex;align-items:flex-start;gap:9px;min-width:0}
.cf-id img{
  width:32px;height:32px;flex:0 0 auto;border-radius:5px;
  border:1px solid rgba(216,180,90,.32);background:#0b0c10;
}
.cf-id b{font-size:13.4px;color:var(--parch);font-weight:600;letter-spacing:.2px;line-height:1.5}
.cf-id i{display:block;margin-top:2px;font-style:normal;font-size:11px;color:var(--parch-3);line-height:1.5}
.cf-tag{
  display:inline-block;padding:2px 8px;border-radius:5px;font-size:11px;
  letter-spacing:.2px;white-space:nowrap;
}
/* 类型标签最长「位置+效果」4 字，列宽 112px 刚好；再长的走 data 里的短名映射 */
.cf-tag.t-new{color:#0d1a10;background:#7ee2a0}
.cf-tag.t-mech{color:#231a05;background:#e8c46a}
.cf-tag.t-num{color:#0b1626;background:#7fb2f0}
.cf-tag.t-move{color:#1a1026;background:#b9a0f0}
.cf-tag.t-rework{color:#2a0d0d;background:#f08a7f}
.cf-tag.t-base{color:#1b1e24;background:#c9cfd8}
.cf-tx{font-size:13px;color:var(--parch-2);line-height:1.8}

/* ---------- 天赋改动行 ---------- */
.cf-trow{
  display:grid;grid-template-columns:220px 112px 1fr 1fr;gap:10px;align-items:start;
  padding:10px 0;border-bottom:1px solid rgba(255,255,255,.05);
}
.cf-trow:last-child{border-bottom:0}
.cf-trow .cf-cell{font-size:12.4px;line-height:1.75;color:var(--parch-2);min-width:0}
.cf-trow .cf-cell em{
  display:block;margin-bottom:3px;font-style:normal;font-size:10.5px;
  letter-spacing:.8px;color:var(--parch-3);
}
.cf-trow .cf-cell.now em{color:rgba(216,180,90,.8)}
.cf-trow .cf-cell.old{color:var(--parch-3)}
.cf-trow .cf-cell.old em{color:rgba(140,148,160,.85)}
.cf-same{color:var(--st-same)}

/* ---------- 专精卡 ---------- */
.cf-specs{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-top:14px}
.cf-spec{
  border:1px solid rgba(216,180,90,.22);border-radius:10px;padding:13px 14px;
  background:rgba(255,255,255,.022);
}
.cf-spec-h{display:flex;align-items:center;gap:9px}
.cf-spec-h img{width:34px;height:34px;border-radius:6px;border:1px solid rgba(216,180,90,.4)}
.cf-spec-h b{font-size:15px;color:var(--gold-hi);letter-spacing:1px;font-family:var(--f-title)}
.cf-spec-h span{
  margin-left:auto;padding:2px 8px;border-radius:5px;font-size:10.5px;
  color:var(--parch-2);background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.1);
}
.cf-spec-u{margin-top:11px;padding-top:10px;border-top:1px dashed rgba(216,180,90,.24)}
.cf-spec-u-h{display:flex;align-items:center;gap:7px}
.cf-spec-u-h img{width:22px;height:22px;border-radius:4px;border:1px solid rgba(216,180,90,.35)}
.cf-spec-u-h b{font-size:12.6px;color:var(--parch);font-weight:600}
.cf-spec-u-h i{font-style:normal;font-size:10.5px;color:var(--gold);letter-spacing:.3px}
.cf-spec-u p{margin-top:6px;font-size:11.8px;line-height:1.75;color:var(--parch-3)}
.cf-spec-t{margin-top:10px;font-size:11.2px;color:var(--st-changed);letter-spacing:.3px}

/* ---------- 可选种族 ---------- */
.cf-races{display:grid;grid-template-columns:1fr 1fr;gap:9px;margin-top:14px}
.cf-race{
  display:grid;grid-template-columns:34px auto 1fr auto;gap:9px;align-items:center;
  padding:9px 12px;border-radius:9px;border:1px solid rgba(255,255,255,.07);
  background:rgba(255,255,255,.022);
}
.cf-race img{width:30px;height:30px;border-radius:50%;border:1px solid rgba(216,180,90,.35);background:#0b0c10}
.cf-race b{font-size:13px;color:var(--parch);font-weight:600;white-space:nowrap}
.cf-race span{font-size:11px;color:var(--parch-3);white-space:nowrap}
.cf-race em{font-style:normal;font-size:11.6px;color:var(--parch-2);line-height:1.6;min-width:0}
.cf-race i{
  font-style:normal;font-size:10px;padding:2px 7px;border-radius:4px;white-space:nowrap;
  color:var(--parch-3);border:1px solid rgba(255,255,255,.12);
}
.cf-race i.n{color:#8ff0b0;border-color:rgba(126,226,160,.4);background:rgba(126,226,160,.08)}

/* ---------- 新增组合 ---------- */
.cf-mods{border:1px solid rgba(216,180,90,.22);border-radius:12px;overflow:hidden;background:rgba(9,10,13,.55)}
.cf-mod{
  display:grid;grid-template-columns:150px 120px 1fr 1fr;gap:12px;align-items:center;
  padding:11px 16px;border-bottom:1px solid rgba(255,255,255,.055);font-size:12.8px;
}
.cf-mod:last-child{border-bottom:0}
.cf-mod-h{
  display:grid;grid-template-columns:150px 120px 1fr 1fr;gap:12px;padding:10px 16px;
  font-size:11.5px;letter-spacing:1.1px;color:var(--parch-3);
  background:rgba(216,180,90,.07);border-bottom:1px solid rgba(216,180,90,.22);
}
.cf-mod b{color:var(--gold-hi);font-size:13.5px;font-weight:600}
.cf-mod .f{color:var(--parch-3);font-size:12px}
.cf-mod .n{color:#8ff0b0;font-weight:600}
.cf-mod .o{color:var(--parch-3);font-size:12px}

/* ---------- FAQ ---------- */
.cf-faq{display:flex;flex-direction:column;gap:9px}
.cf-faq details{
  border:1px solid rgba(255,255,255,.08);border-radius:9px;background:rgba(255,255,255,.022);
  padding:12px 16px;
}
.cf-faq summary{
  cursor:pointer;font-size:13.6px;color:var(--parch);font-weight:600;letter-spacing:.2px;
  list-style:none;
}
.cf-faq summary::-webkit-details-marker{display:none}
.cf-faq summary::before{content:"▸";display:inline-block;width:16px;color:var(--gold);transition:transform .15s}
.cf-faq details[open] summary::before{transform:rotate(90deg)}
.cf-faq details p{margin:9px 0 0 16px;font-size:12.8px;line-height:1.85;color:var(--parch-2)}
.cf-faq details p a{color:var(--gold);text-decoration:none;border-bottom:1px solid rgba(216,180,90,.4)}

.cf-src{
  margin-top:22px;padding:13px 16px;border-radius:9px;font-size:12px;line-height:1.85;
  color:var(--parch-3);background:rgba(255,255,255,.022);border:1px dashed rgba(216,180,90,.24);
}
.cf-src b{color:var(--parch-2);font-weight:500}

/* ---------- 响应式 ---------- */
@media(max-width:1180px){
  .cf-ovw-head{display:none}
  .cf-ovw-row{
    grid-template-columns:1fr auto;gap:6px 12px;padding:13px 15px;
  }
  .cf-ovw-cls{grid-column:1}
  .cf-ovw-more{grid-column:2;grid-row:1;align-self:center}
  .cf-ovw-row > .cf-ovw-t:nth-of-type(1),
  .cf-ovw-row > .cf-ovw-t:nth-of-type(2),
  .cf-ovw-row > .cf-ovw-n{display:none}
  .cf-ovw-rep{grid-column:1/-1;font-size:11.6px}
  .cf-specs{grid-template-columns:1fr}
  .cf-races{grid-template-columns:1fr}
}
@media(max-width:820px){
  .cf-tabs{position:static;padding:12px 0 10px}
  .cf-hd{padding:12px 13px;gap:10px}
  .cf-hd-ico{width:38px;height:38px}
  .cf-hd-m h3{font-size:16.5px;letter-spacing:1px}
  .cf-hd-m p{font-size:11.4px;line-height:1.65}
  .cf-hd-btn{padding:7px 10px;font-size:11.5px}
  .cf-bd{padding:0 13px 15px}
  .cf-cls{scroll-margin-top:132px}

  /* 技能行 → 卡片式堆叠 */
  .cf-row{grid-template-columns:1fr;gap:6px;padding:11px 0}
  .cf-row .cf-tag{justify-self:start}
  .cf-tx{font-size:12.4px;line-height:1.8}
  /* 天赋行 → 名称 + 类型一行，两栏效果并排转上下 */
  .cf-trow{grid-template-columns:1fr;gap:5px;padding:12px 0}
  .cf-trow .cf-cell{padding-left:2px}
  .cf-trow .cf-cell em{display:inline;margin-right:6px}
  .cf-trow .cf-cell.old{padding-top:6px;border-top:1px dashed rgba(255,255,255,.07)}

  .cf-race{grid-template-columns:30px auto 1fr;gap:8px}
  .cf-race em{grid-column:1/-1;font-size:11.4px}
  .cf-race i{grid-column:3;justify-self:start;margin-top:-2px}

  .cf-mod,.cf-mod-h{grid-template-columns:1fr 1fr;gap:6px 10px}
  .cf-mod-h{display:none}
  .cf-mod b{grid-column:1}
  .cf-mod .f{grid-column:2;text-align:right}
  .cf-mod .n,.cf-mod .o{grid-column:1/-1;font-size:11.8px;line-height:1.7}
  .cf-mod .o::before{content:"经典 60：";color:var(--parch-3)}

  .cf-stat{min-width:calc(50% - 5px);padding:10px 14px 11px}
  .cf-stat b{font-size:22px}
}
@media(max-width:820px){
  /* 四个 tab 必须在 360~390 宽里排成一行：字号与内距各收一档 */
  .cf-tabs{gap:6px}
  .cf-tab{padding:7px 9px;font-size:11.6px;gap:5px}
  .cf-tab b{font-size:10.4px}
}
@media(max-width:370px){
  .cf-hd-m h3 em{display:none}
  .cf-hd-btn span{display:none}
  .cf-hd-btn{padding:8px 10px}
}