/* Seleção de classe — composição profissional compacta */
#creation .creation-card.creation-wizard{
  width:min(1180px,94vw)!important;
  max-height:92vh!important;
  overflow:auto!important;
  padding:18px 20px 20px!important;
}
#creationClassStep>h2{margin:2px 0 10px!important;font-size:clamp(20px,2.1vw,30px)!important;letter-spacing:.08em}
.creation-identity-row{margin-bottom:12px!important;gap:12px!important}
.class-selection-stage{
  display:grid!important;
  grid-template-columns:minmax(0,1.65fr) minmax(250px,.72fr)!important;
  gap:18px!important;
  align-items:stretch!important;
}
.class-list-column{min-width:0!important}
#classGrid{
  display:grid!important;
  grid-template-columns:repeat(3,minmax(0,1fr))!important;
  gap:10px!important;
}
#classGrid .class-choice{
  min-height:215px!important;
  padding:10px!important;
  border-radius:14px!important;
}
#classGrid .class-preview{
  height:86px!important;
  min-height:86px!important;
  padding:0!important;
  display:grid!important;
  place-items:center!important;
  overflow:hidden!important;
}
#classGrid .class-emblem{
  width:52px!important;
  height:52px!important;
  margin:0 auto!important;
  font-size:25px!important;
}
#classGrid .class-meta{padding-top:8px!important}
#classGrid .class-meta>b{font-size:15px!important}
#classGrid .class-meta>small{font-size:10px!important;line-height:1.25!important}
#classGrid .class-subtitle{margin-top:5px!important;padding:4px 8px!important;font-size:8.5px!important}
#classGrid .class-lore{font-size:10px!important;line-height:1.25!important;margin:6px 0!important;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
#classGrid .class-tags{gap:4px!important}
#classGrid .class-tags span{padding:3px 6px!important;font-size:8px!important}
#classGrid .class-file-tag{display:none!important}
.class-front-preview-panel{
  position:relative!important;
  min-width:0!important;
  width:100%!important;
  min-height:0!important;
  padding:12px 12px 14px!important;
  border-radius:18px!important;
  align-self:stretch!important;
  display:grid!important;
  grid-template-rows:auto 1fr auto auto!important;
  overflow:hidden!important;
}
.class-front-preview-panel>small{font-size:9px!important;letter-spacing:.15em!important;margin-bottom:7px!important}
.class-front-preview{
  height:360px!important;
  min-height:0!important;
  max-height:42vh!important;
  width:100%!important;
  overflow:hidden!important;
  border-radius:14px!important;
  position:relative!important;
}
.class-preview-canvas{
  position:absolute!important;
  inset:0!important;
  width:100%!important;
  height:100%!important;
  display:block!important;
}
.class-front-preview-panel>strong{font-size:18px!important;margin-top:8px!important;letter-spacing:.08em!important}
.class-front-preview-panel>span{font-size:9px!important;margin-top:2px!important}
.creation-next-button{margin-top:14px!important;min-height:44px!important;padding:10px 18px!important;font-size:12px!important}

@media (max-width:900px){
  #creation .creation-card.creation-wizard{width:min(760px,96vw)!important;padding:12px!important}
  .class-selection-stage{grid-template-columns:1fr!important;gap:10px!important}
  .class-front-preview-panel{order:0!important;grid-template-rows:auto 230px auto auto!important}
  .class-front-preview{height:230px!important;max-height:none!important}
  #classGrid{grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:8px!important}
  #classGrid .class-choice{min-height:184px!important;padding:8px!important}
  #classGrid .class-preview{height:68px!important;min-height:68px!important}
  #classGrid .class-emblem{width:44px!important;height:44px!important;font-size:21px!important}
}
@media (max-width:520px){
  .creation-identity-row{grid-template-columns:1fr!important}
  .class-front-preview-panel{grid-template-rows:auto 190px auto auto!important}
  .class-front-preview{height:190px!important}
  #classGrid .class-choice{min-height:174px!important}
  #classGrid .class-lore{display:none!important}
}