.wk-skill-detail {
  max-width: 1120px;
  margin: 28px auto 16px;
  padding: 16px;
  border-radius: 16px;
  border: 1px solid rgba(255, 255, 255, 0.14);
  background: rgba(0, 0, 0, 0.22);
  box-shadow: 0 18px 60px rgba(0, 0, 0, 0.22);
  display: grid;
  grid-template-columns: 1fr;
  gap: 12px;
}

.wk-skill-detail__block {
  border: 1px solid rgba(255, 255, 255, 0.12);
  background: rgba(0, 0, 0, 0.18);
  border-radius: 14px;
  padding: 12px;
}

.wk-skill-detail__block--icon {
  padding: 14px 12px;
}

.wk-skill-detail__iconWrap {
  display: flex;
  justify-content: center;
}

.wk-skill-detail__icon {
  width: 78px;
  height: 78px;
  display: grid;
  place-items: center;
  border-radius: 14px;
  border: 1px solid rgba(255, 255, 255, 0.16);
  background: rgba(0, 0, 0, 0.28);
  box-shadow: 0 12px 34px rgba(0, 0, 0, 0.35);
  overflow: hidden;
}

.wk-skill-detail__icon img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  padding: 8px;
  box-sizing: border-box;
  display: block;
}

.wk-skill-detail__blockTitle {
  margin-bottom: 8px;
  font-weight: 900;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  font-size: 0.8rem;
  color: rgba(255, 255, 255, 0.78);
  text-align: center;
}

.wk-skill-detail__desc {
  color: rgba(255, 255, 255, 0.9);
  line-height: 1.5;
  display: grid;
  gap: 4px;
}

.wk-skill-detail__desc--center {
  text-align: center;
}

.wk-skill-detail__descLine {
  margin: 0;
}

.wk-skill-detail__descCard {
  border: 1px solid rgba(255, 255, 255, 0.1);
  background: rgba(255, 255, 255, 0.02);
  border-radius: 12px;
  padding: 10px;
}

.wk-skill-detail__stats {
  display: grid;
  gap: 8px;
}

.wk-skill-detail__stat {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  padding: 8px 10px;
  border-radius: 10px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  background: rgba(255, 255, 255, 0.02);
}

.wk-skill-detail__statKey {
  color: rgba(255, 255, 255, 0.72);
  font-weight: 700;
}

.wk-skill-detail__statVal {
  color: rgba(255, 255, 255, 0.94);
  font-weight: 900;
}

.wk-skill-detail__statVal.wk-f-guanyin { color: #03752b; }
.wk-skill-detail__statVal.wk-f-fujin { color: #007eb4; }
.wk-skill-detail__statVal.wk-f-jinong { color: #ff8a2a; }
.wk-skill-detail__statVal.wk-f-nangin { color: #97014c; }
.wk-skill-detail__statVal.wk-f-all-factions { color: #ffffff; }

.wk-skill-detail__statVal.wk-q-common    { color: #ffffff; }
.wk-skill-detail__statVal.wk-q-unique    { color: #ebab0b9d; }
.wk-skill-detail__statVal.wk-q-rare      { color: #ffd24a; }
.wk-skill-detail__statVal.wk-q-elite     { color: #b86bff; }
.wk-skill-detail__statVal.wk-q-legendary { color: #ff8a2a; }
.wk-skill-detail__statVal.wk-q-celestial { color: #76d7ff; }

.wk-skill-grades {
  display: grid;
  gap: 10px;
}

.wk-skill-grade {
  border: 1px solid rgba(255, 255, 255, 0.1);
  background: rgba(255, 255, 255, 0.02);
  border-radius: 12px;
  padding: 10px;
}

.wk-skill-grade__title {
  margin-bottom: 8px;
  font-weight: 900;
  color: #ffd470;
  text-align: center;
}

.wk-skill-grade__grid {
  display: grid;
  gap: 6px;
}

.wk-skill-grade__row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  padding: 6px 8px;
  border-radius: 8px;
  border: 1px solid rgba(255, 255, 255, 0.06);
  background: rgba(0, 0, 0, 0.18);
}

.wk-skill-grade__key {
  color: rgba(255, 255, 255, 0.7);
}

.wk-skill-grade__val {
  color: rgba(255, 255, 255, 0.94);
  font-weight: 800;
}

.wk-skill-detail__article {
  border: 1px solid rgba(255, 255, 255, 0.12);
  background: rgba(0, 0, 0, 0.18);
  border-radius: 14px;
  padding: 12px;
}

@media (max-width: 980px) {
  .wk-skill-detail {
    padding: 12px;
  }
}