/* ============ 基础 ============ */
:root{
  --bg:#0d1117;
  --bg-2:#131a24;
  --panel:#161d28;
  --panel-2:#1c2532;
  --line:#2a3442;
  --line-soft:#222c39;
  --txt:#dfe6f0;
  --txt-2:#9aa8bd;
  --txt-3:#6b7a91;
  --gold:#f0c060;
  --gold-dim:#8a6d2f;
  --frost:#6fc7f0;
  --alliance:#2f6fd0;
  --horde:#c0392b;
  --radius:8px;
  --shadow:0 2px 10px rgba(0,0,0,.45);
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{
  background:var(--bg);
  color:var(--txt);
  font-family:"Microsoft YaHei","PingFang SC","Hiragino Sans GB",system-ui,sans-serif;
  font-size:14px;
  line-height:1.6;
  min-height:100vh;
  background-image:
    radial-gradient(1100px 500px at 50% -140px, rgba(80,160,220,.13), transparent 70%),
    radial-gradient(700px 400px at 100% 100%, rgba(150,60,60,.08), transparent 70%);
}
.hidden{display:none !important}
b{color:var(--gold);font-weight:600}

/* ============ 头部 ============ */
.site-header{
  background:linear-gradient(180deg,#141c27 0%,#101720 100%);
  border-bottom:1px solid var(--line);
  position:sticky;top:0;z-index:50;
  box-shadow:0 2px 14px rgba(0,0,0,.5);
}
.header-inner{
  max-width:1560px;margin:0 auto;padding:14px 20px;
  display:grid;grid-template-columns:auto 1fr auto;gap:22px;align-items:center;
}
.brand{display:flex;align-items:center;gap:12px}
.brand-mark{
  width:46px;height:46px;flex:0 0 46px;border-radius:50%;
  background:linear-gradient(145deg,#2b6fa8,#12304a);
  border:2px solid var(--gold-dim);
  display:flex;align-items:center;justify-content:center;
  font-weight:800;font-size:17px;color:var(--gold);
  text-shadow:0 1px 3px #000;
}
.brand-text h1{font-size:19px;letter-spacing:.5px;color:#fff;font-weight:700}
.brand-text p{font-size:12px;color:var(--txt-3);margin-top:2px}

.search-wrap{position:relative;display:flex;align-items:center}
#search{
  width:100%;padding:10px 38px 10px 14px;
  background:#0c121a;border:1px solid var(--line);border-radius:var(--radius);
  color:var(--txt);font-size:13.5px;font-family:inherit;outline:none;transition:.15s;
}
#search:focus{border-color:var(--frost);box-shadow:0 0 0 3px rgba(111,199,240,.12)}
#search::placeholder{color:#55637a}
#clearSearch{
  position:absolute;right:8px;background:none;border:none;color:var(--txt-3);
  cursor:pointer;font-size:14px;padding:4px 6px;border-radius:4px;
}
#clearSearch:hover{color:var(--txt);background:#1c2532}
.stat-bar{
  font-size:12px;color:var(--txt-3);text-align:right;line-height:1.7;white-space:nowrap;
}
.stat-bar span{color:var(--gold);font-weight:600}

/* ============ 两大板块切换 ============ */
.board-tabs{
  max-width:1560px;margin:18px auto 0;padding:0 20px;
  display:flex;gap:12px;
}
.board-tab{
  flex:1;background:var(--panel);border:1px solid var(--line);
  border-radius:var(--radius);padding:14px 18px;cursor:pointer;text-align:left;
  transition:.18s;display:flex;flex-direction:column;gap:2px;color:var(--txt);
  font-family:inherit;
}
.board-tab:hover{border-color:#3d4b5e;background:var(--panel-2)}
.board-tab.active{
  border-color:var(--gold-dim);
  background:linear-gradient(180deg,#1e2735,#161d28);
  box-shadow:inset 0 2px 0 var(--gold-dim);
}
.bt-title{font-size:16px;font-weight:700;letter-spacing:1px}
.board-tab.active .bt-title{color:var(--gold)}
.bt-sub{font-size:11.5px;color:var(--txt-3)}

.board{max-width:1560px;margin:0 auto;padding:18px 20px 40px}

/* ============ 职业左侧导航 ============ */
.class-layout{display:grid;grid-template-columns:168px 1fr;gap:16px;align-items:start}
.class-nav{
  position:sticky;top:96px;
  background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);
  padding:8px;display:flex;flex-direction:column;gap:3px;
}
.cn-item{
  display:flex;align-items:center;gap:9px;padding:8px 9px;border-radius:6px;
  cursor:pointer;border:none;background:none;color:var(--txt-2);
  font-size:13.5px;font-family:inherit;text-align:left;transition:.13s;width:100%;
}
.cn-item:hover{background:#1e2735;color:var(--txt)}
.cn-item.active{background:#243044;color:#fff;font-weight:600}
.cn-item.active .cn-bar{opacity:1}
.cn-bar{width:3px;height:22px;border-radius:2px;opacity:.45;flex:0 0 3px;background:currentColor}
.cn-name{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cn-count{font-size:11px;color:var(--txt-3);font-weight:400}

/* ============ 职业主体 ============ */
.class-main{min-width:0}
.cls-hero{
  background:linear-gradient(135deg,var(--panel) 0%,#121a24 100%);
  border:1px solid var(--line);border-left:4px solid var(--cc,var(--gold));
  border-radius:var(--radius);padding:16px 18px;margin-bottom:14px;
}
.cls-title{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.cls-title h2{font-size:22px;color:#fff;letter-spacing:1px}
.cls-title .cls-en{font-size:12.5px;color:var(--txt-3);letter-spacing:.5px}
.cls-tags{display:flex;gap:6px;flex-wrap:wrap;margin-top:9px}
.tag{
  font-size:11.5px;padding:2.5px 9px;border-radius:11px;
  background:#20293a;border:1px solid var(--line);color:var(--txt-2);
}
.tag.armor{border-color:#4a5568;color:#b9c6d8}
.tag.res{border-color:var(--gold-dim);color:var(--gold)}
.cls-desc{margin-top:10px;color:var(--txt-2);font-size:13px;line-height:1.75;max-width:960px}
.cls-hero img{margin-top:12px}

/* 三系专精 */
.spec-cards{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-bottom:16px}
.spec-card{
  background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);
  padding:12px 13px;display:flex;gap:11px;align-items:flex-start;
}
.spec-card img{width:38px;height:38px;border-radius:6px;flex:0 0 38px;border:1px solid #000}
.spec-card h3{font-size:14.5px;color:var(--gold);margin-bottom:3px}
.spec-card p{font-size:12px;color:var(--txt-2);line-height:1.6}

/* 子标签：技能 / 天赋 */
.sub-tabs{display:flex;gap:8px;margin-bottom:14px;border-bottom:1px solid var(--line);padding-bottom:0}
.sub-tab{
  background:none;border:none;border-bottom:2px solid transparent;
  color:var(--txt-3);padding:9px 15px;font-size:14px;cursor:pointer;
  font-family:inherit;transition:.15s;
}
.sub-tab:hover{color:var(--txt)}
.sub-tab.active{color:var(--gold);border-bottom-color:var(--gold);font-weight:600}

/* ============ 技能卡片 ============ */
.group{margin-bottom:20px}
.group-head{
  display:flex;align-items:center;gap:10px;margin-bottom:10px;
  padding-bottom:6px;border-bottom:1px solid var(--line-soft);
}
.group-head h3{font-size:15px;color:#fff;font-weight:600;letter-spacing:.5px}
.group-head .gh-spec{
  font-size:11px;padding:1.5px 8px;border-radius:10px;
  background:#243044;color:var(--frost);border:1px solid #2f4358;
}
.group-head .gh-count{font-size:11.5px;color:var(--txt-3);margin-left:auto}

.skill-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(330px,1fr));gap:9px}
.skill{
  display:flex;gap:11px;padding:10px 12px;
  background:var(--panel);border:1px solid var(--line-soft);border-radius:6px;
  transition:.13s;
}
.skill:hover{border-color:#3d4b5e;background:var(--panel-2)}
.skill img{
  width:42px;height:42px;flex:0 0 42px;border-radius:5px;
  border:1px solid #000;box-shadow:0 1px 4px rgba(0,0,0,.5);
}
.sk-body{min-width:0;flex:1}
.sk-top{display:flex;align-items:baseline;gap:7px;flex-wrap:wrap}
.sk-name{font-size:14px;color:#e9eef7;font-weight:600}
.sk-en{font-size:11px;color:var(--txt-3)}
.sk-lv{
  margin-left:auto;font-size:10.5px;color:var(--txt-3);
  border:1px solid var(--line);border-radius:9px;padding:0 7px;flex:0 0 auto;
}
.sk-meta{display:flex;gap:6px;flex-wrap:wrap;margin:5px 0 4px}
.sk-meta span{
  font-size:10.5px;color:#8fa3bd;background:#101923;
  border:1px solid #22303f;border-radius:3px;padding:1px 6px;
}
.sk-desc{font-size:12.5px;color:var(--txt-2);line-height:1.68}

/* ============ 天赋 ============ */
.talent-specs{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.ts-col{background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);padding:13px}
.ts-head{
  display:flex;align-items:center;gap:9px;padding-bottom:9px;margin-bottom:10px;
  border-bottom:1px solid var(--line-soft);
}
.ts-head img{width:32px;height:32px;border-radius:5px;border:1px solid #000}
.ts-head h3{font-size:15px;color:var(--gold)}
.ts-head .ts-n{font-size:11.5px;color:var(--txt-3);margin-left:auto}
.talent{
  display:flex;gap:10px;padding:8px;border-radius:5px;
  border:1px solid transparent;transition:.13s;
}
.talent:hover{background:#1b2431;border-color:var(--line-soft)}
.talent.ultimate{
  background:linear-gradient(90deg,rgba(240,192,96,.09),transparent);
  border-color:var(--gold-dim);
}
.talent img{
  width:34px;height:34px;flex:0 0 34px;border-radius:5px;
  border:1px solid #000;box-shadow:0 1px 3px rgba(0,0,0,.5);
}
.tl-body{min-width:0;flex:1}
.tl-top{display:flex;align-items:baseline;gap:7px}
.tl-name{font-size:13.5px;color:#e9eef7;font-weight:600}
.tl-en{font-size:10.5px;color:var(--txt-3);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.tl-pts{
  margin-left:auto;flex:0 0 auto;font-size:10.5px;color:#111;
  background:var(--gold);border-radius:8px;padding:0 7px;font-weight:700;
}
.tl-tier{font-size:10px;color:var(--txt-3)}
.tl-desc{font-size:12px;color:var(--txt-2);line-height:1.62;margin-top:2px}
.talent.ultimate .tl-name{color:var(--gold)}

/* ============ 种族板块 ============ */
.race-intro{
  background:var(--panel);border:1px solid var(--line);border-left:3px solid var(--frost);
  border-radius:var(--radius);padding:12px 16px;margin-bottom:18px;
  font-size:13px;color:var(--txt-2);
}
.race-factions{display:grid;grid-template-columns:1fr 1fr;gap:18px;align-items:start}
.faction-col h2{
  font-size:16px;padding:9px 14px;border-radius:var(--radius);margin-bottom:12px;letter-spacing:1px;
}
.faction-col.alliance h2{background:linear-gradient(90deg,rgba(47,111,208,.28),transparent);color:#8ab4f0;border-left:3px solid var(--alliance)}
.faction-col.horde h2{background:linear-gradient(90deg,rgba(192,57,43,.28),transparent);color:#e88b80;border-left:3px solid var(--horde)}

.race-card{
  background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);
  margin-bottom:12px;overflow:hidden;
}
.race-head{
  display:flex;align-items:center;gap:11px;padding:12px 14px;
  background:linear-gradient(90deg,var(--panel-2),var(--panel));
  border-bottom:1px solid var(--line-soft);
}
.race-head img{width:40px;height:40px;border-radius:6px;border:1px solid #000}
.race-head h3{font-size:16px;color:#fff}
.race-head .race-en{font-size:11.5px;color:var(--txt-3)}
.race-classes{display:flex;gap:4px;flex-wrap:wrap;margin-top:5px}
.race-classes span{
  font-size:10px;color:var(--txt-2);background:#101923;
  border:1px solid #22303f;border-radius:3px;padding:0 5px;
}
.race-body{padding:12px 14px 14px}
.rk-group{margin-bottom:14px}
.rk-group:last-child{margin-bottom:0}
.rk-group-head{
  display:flex;align-items:center;gap:8px;margin-bottom:8px;
  font-size:13px;font-weight:600;letter-spacing:.5px;
}
.rk-group-head .rk-badge{
  font-size:10.5px;font-weight:500;padding:1px 8px;border-radius:10px;
}
.rk-active .rk-badge{background:rgba(240,192,96,.16);color:var(--gold);border:1px solid var(--gold-dim)}
.rk-passive .rk-badge{background:rgba(111,199,240,.14);color:var(--frost);border:1px solid #2f5a72}
.rk-group-head .rk-n{color:var(--txt-3);font-size:11px;font-weight:400}
.rk-list{display:flex;flex-direction:column;gap:7px}
.rk-item{
  display:flex;gap:10px;padding:8px 10px;border-radius:5px;
  background:#121a24;border:1px solid var(--line-soft);
}
.rk-item img{width:34px;height:34px;flex:0 0 34px;border-radius:5px;border:1px solid #000}
.rk-item .rk-name{font-size:13.5px;color:#e9eef7;font-weight:600}
.rk-item .rk-en{font-size:10.5px;color:var(--txt-3);margin-left:6px}
.rk-item .rk-desc{font-size:12px;color:var(--txt-2);line-height:1.6;margin-top:2px}
.rk-item .sk-meta{margin:4px 0 2px}

/* ============ 其他 ============ */
.empty-state{
  max-width:1560px;margin:0 auto;padding:70px 20px;text-align:center;color:var(--txt-3);
}
.es-icon{font-size:38px;margin-bottom:12px;opacity:.5}
.site-footer{
  border-top:1px solid var(--line);padding:18px 20px;text-align:center;
  font-size:11.5px;color:var(--txt-3);background:#0b1017;
}

mark{background:rgba(240,192,96,.28);color:#ffe6a8;border-radius:2px;padding:0 1px}

/* ============ 响应式 ============ */
@media (max-width:1180px){
  .spec-cards,.talent-specs{grid-template-columns:1fr}
  .race-factions{grid-template-columns:1fr}
  .header-inner{grid-template-columns:1fr;gap:12px}
  .stat-bar{text-align:left}
}
@media (max-width:760px){
  .class-layout{grid-template-columns:1fr}
  .class-nav{position:static;flex-direction:row;overflow-x:auto}
  .cn-item{width:auto;white-space:nowrap}
  .cn-count{display:none}
  .skill-grid{grid-template-columns:1fr}
  .board-tabs{flex-direction:column}
}