/* Character Forge component refinement v2.67 */
#builderWorkspace{grid-template-columns:220px minmax(520px,1fr) 250px!important}
.step-rail,.budget-panel{padding:22px 14px!important}
.step-button{grid-template-columns:22px 1fr!important;padding:10px 9px!important}
.stage{padding:30px clamp(26px,4vw,54px)!important}
.stage-content{max-width:960px;width:100%;margin:0 auto}
.stage-head,.stage-actions{max-width:960px;width:100%;margin-left:auto;margin-right:auto}
.brief-card,.option-card,.summary-card,.stat-card{background:#0d1419!important}
.brief-card h3,.summary-card h3{font-size:14px!important}
.acknowledge{padding:14px 16px!important}
.budget-head{text-align:left!important}
.budget-head strong{margin:9px 0 5px!important}
.budget-row{font-weight:520!important}
.trait-row,.skill-row,.equipment-row{grid-template-columns:minmax(200px,1fr) 90px 100px!important}
@media(max-width:1180px){#builderWorkspace{grid-template-columns:205px 1fr!important}.budget-panel{display:none!important}}
@media(max-width:760px){#builderWorkspace{display:block!important}.stage{padding:20px 16px!important}.trait-row,.skill-row,.equipment-row{grid-template-columns:1fr!important}}


/* Character Forge catalogs v2.73 */
body #builderWorkspace{
  grid-template-columns:230px minmax(620px,1fr) 270px!important;
}
body .stage{
  padding:34px clamp(28px,4vw,60px)!important;
  background:#070b0f!important;
}
body .stage-head,
body .stage-actions,
body .stage-content{
  width:100%!important;
  max-width:1180px!important;
  margin-left:auto!important;
  margin-right:auto!important;
}
body .stage-head{
  padding-bottom:22px!important;
  border-bottom:1px solid #24333b!important;
}
body .stage-head h2,
body #stageTitle{
  color:#edf2f4!important;
  font:760 clamp(36px,4vw,52px)/1.05 Inter,system-ui,sans-serif!important;
  letter-spacing:-.045em!important;
}
body .stage-head p,
body #stageSubtitle{
  margin-top:10px!important;
  color:#9cabb1!important;
  font:400 15px/1.55 Inter,system-ui,sans-serif!important;
}
body .stage-content:has(.trait-card),
body .stage-content:has(.equipment-card){
  display:grid!important;
  grid-template-columns:repeat(2,minmax(0,1fr))!important;
  gap:12px!important;
  align-content:start!important;
}
body .stage-content:has(.trait-card)>.inline-note,
body .stage-content:has(.trait-card)>.search-row,
body .stage-content:has(.equipment-card)>.equipment-totals,
body .stage-content:has(.equipment-card)>.search-row,
body .stage-content:has(.equipment-card)>.custom-equipment-panel{
  grid-column:1/-1!important;
}
body .inline-note{
  margin:0 0 4px!important;
  padding:14px 16px!important;
  border:0!important;
  border-left:2px solid #49ddc4!important;
  border-radius:0 8px 8px 0!important;
  background:rgba(73,221,196,.07)!important;
  color:#adbec4!important;
  font:500 13px/1.55 Inter,system-ui,sans-serif!important;
}
body .search-row{
  display:grid!important;
  grid-template-columns:minmax(280px,1fr) minmax(190px,260px)!important;
  gap:10px!important;
  margin:0 0 5px!important;
  padding:0!important;
  background:transparent!important;
}
body .search-row input,
body .search-row select{
  min-height:46px!important;
  padding:10px 13px!important;
  border:1px solid #2a3a42!important;
  border-radius:8px!important;
  background:#0b1217!important;
  color:#e6edef!important;
  font:500 14px/1.25 Inter,system-ui,sans-serif!important;
}
body .search-row input:focus,
body .search-row select:focus{
  border-color:#49ddc4!important;
  outline:2px solid rgba(73,221,196,.18)!important;
  outline-offset:1px!important;
}
body .trait-card,
body .equipment-card{
  min-width:0!important;
  min-height:154px!important;
  margin:0!important;
  padding:0!important;
  overflow:hidden!important;
  border:1px solid #26363e!important;
  border-radius:10px!important;
  background:#0d151a!important;
  box-shadow:none!important;
  transition:border-color .16s ease,background .16s ease,transform .16s ease!important;
}
body .trait-card:hover,
body .equipment-card:hover{
  border-color:#3a5059!important;
  background:#101a20!important;
  transform:translateY(-1px)!important;
}
body .trait-card.selected,
body .trait-card.active,
body .trait-card.is-selected,
body .equipment-card.selected,
body .equipment-card.active,
body .equipment-card.is-selected{
  border-color:rgba(73,221,196,.55)!important;
  background:rgba(73,221,196,.07)!important;
}
body .trait-card-main,
body .equipment-card-main{
  display:flex!important;
  flex-direction:column!important;
  justify-content:space-between!important;
  gap:14px!important;
  min-height:152px!important;
  padding:16px!important;
}
body .trait-card-main>div:first-child,
body .equipment-card .row-main{
  min-width:0!important;
}
body .trait-card strong,
body .equipment-card strong{
  display:block!important;
  color:#e8eef1!important;
  font:720 16px/1.25 Inter,system-ui,sans-serif!important;
  letter-spacing:-.015em!important;
}
body .trait-meta{
  margin-top:6px!important;
  color:#789099!important;
  font:650 10px/1.35 Inter,system-ui,sans-serif!important;
  letter-spacing:.055em!important;
  text-transform:uppercase!important;
}
body .trait-card p,
body .equipment-card p{
  margin:10px 0 0!important;
  color:#aebdc2!important;
  font:400 13px/1.55 Inter,system-ui,sans-serif!important;
}
body .trait-card-controls,
body .equipment-card-controls{
  display:flex!important;
  align-items:center!important;
  justify-content:space-between!important;
  gap:12px!important;
  width:100%!important;
}
body .row-cost{
  color:#e6c278!important;
  font:700 13px/1.25 Inter,system-ui,sans-serif!important;
  letter-spacing:0!important;
  white-space:nowrap!important;
}
body .trait-buttons{
  display:flex!important;
  gap:7px!important;
  flex:0 0 auto!important;
}
body .trait-buttons button{
  min-width:68px!important;
  min-height:36px!important;
  padding:8px 11px!important;
  border-radius:8px!important;
  box-shadow:none!important;
  font:650 12px/1 Inter,system-ui,sans-serif!important;
  letter-spacing:0!important;
  text-transform:none!important;
}
body .trait-buttons .secondary{
  border:1px solid #30434c!important;
  background:#10181e!important;
  color:#c9d4d8!important;
}
body .trait-buttons .secondary:hover{
  border-color:#4a616b!important;
  background:#162129!important;
  color:#fff!important;
}
body .trait-buttons .primary{
  border:1px solid #49ddc4!important;
  background:#49ddc4!important;
  color:#06100e!important;
}
body .trait-buttons .primary:hover{
  border-color:#72ead8!important;
  background:#72ead8!important;
}
body .equipment-totals{
  display:grid!important;
  grid-template-columns:repeat(4,minmax(0,1fr))!important;
  gap:1px!important;
  margin:0 0 5px!important;
  overflow:hidden!important;
  border:1px solid #26363e!important;
  border-radius:10px!important;
  background:#26363e!important;
}
body .equipment-totals>div{
  min-height:82px!important;
  padding:15px!important;
  border:0!important;
  background:#0d151a!important;
}
body .equipment-totals span{
  color:#7f9198!important;
  font:700 10px/1.3 Inter,system-ui,sans-serif!important;
  letter-spacing:.06em!important;
  text-transform:uppercase!important;
}
body .equipment-totals strong{
  display:block!important;
  margin-top:7px!important;
  color:#edf2f4!important;
  font:730 22px/1.2 Inter,system-ui,sans-serif!important;
  letter-spacing:-.025em!important;
}
body .custom-equipment-panel{
  margin-top:8px!important;
  padding:22px!important;
  border:1px solid #26363e!important;
  border-radius:10px!important;
  background:#0d151a!important;
}
body .custom-equipment-panel .section-title{
  margin:0 0 18px!important;
  padding:0 0 15px!important;
  border-bottom:1px solid #24333b!important;
  background:transparent!important;
}
body .custom-equipment-panel .section-title h3{
  color:#e8eef1!important;
  font:720 20px/1.2 Inter,system-ui,sans-serif!important;
  letter-spacing:-.025em!important;
}
body .custom-equipment-panel .section-title span{
  color:#87989f!important;
  font:500 12px/1.4 Inter,system-ui,sans-serif!important;
}
body .custom-equipment-panel label{
  color:#87989f!important;
  font:650 11px/1.3 Inter,system-ui,sans-serif!important;
  letter-spacing:.045em!important;
}
body .custom-equipment-panel input,
body .custom-equipment-panel select,
body .custom-equipment-panel textarea{
  border:1px solid #2a3a42!important;
  border-radius:8px!important;
  background:#0a1116!important;
  color:#e6edef!important;
  font:500 14px/1.4 Inter,system-ui,sans-serif!important;
}
body .stage-actions{
  margin-top:18px!important;
  padding-top:18px!important;
  border-top:1px solid #24333b!important;
  background:#070b0f!important;
}
@media(max-width:1180px){
  body #builderWorkspace{grid-template-columns:210px minmax(0,1fr)!important}
  body .stage-content:has(.trait-card),
  body .stage-content:has(.equipment-card){grid-template-columns:1fr!important}
  body .stage-content:has(.trait-card)>*,
  body .stage-content:has(.equipment-card)>*{grid-column:auto!important}
}
@media(max-width:760px){
  body .stage{padding:22px 14px!important}
  body .search-row{grid-template-columns:1fr!important}
  body .equipment-totals{grid-template-columns:repeat(2,minmax(0,1fr))!important}
}


/* v2.77 modern catalogue dropdown used by Advantages, Disadvantages, Skills and Equipment */
body #stageContent .search-row #catalogFilter{
  width:100%!important;
  min-height:46px!important;
  padding:10px 42px 10px 13px!important;
  border:1px solid #2a3a42!important;
  border-radius:8px!important;
  background-color:#0b1217!important;
  background-image:
    linear-gradient(45deg,transparent 50%,#91a1a8 50%),
    linear-gradient(135deg,#91a1a8 50%,transparent 50%)!important;
  background-position:
    calc(100% - 18px) 19px,
    calc(100% - 13px) 19px!important;
  background-size:5px 5px,5px 5px!important;
  background-repeat:no-repeat!important;
  color:#e6edef!important;
  font:600 14px/1.25 Inter,system-ui,sans-serif!important;
  appearance:none!important;
  -webkit-appearance:none!important;
  box-shadow:none!important;
}
body #stageContent .search-row #catalogFilter:hover{
  border-color:#3a5059!important;
  background-color:#101920!important;
}
body #stageContent .search-row #catalogFilter:focus{
  border-color:#49ddc4!important;
  outline:2px solid rgba(73,221,196,.18)!important;
  outline-offset:1px!important;
}