.research-hero{padding-bottom:34px}
.research-section{padding-top:24px}
.research-toolbar{padding:18px;border:1px solid #304151;background:linear-gradient(145deg,#101b27,#09131e)}
.research-search-wrap>label,.research-filters label{display:block;color:#aab6c2;font-size:.7rem;font-weight:850;text-transform:uppercase;letter-spacing:.055em}
.research-search-box{display:flex;align-items:center;gap:9px;margin-top:7px;height:48px;padding:0 11px;border:1px solid #405267;border-radius:8px;background:#050e17}
.research-search-box:focus-within{border-color:var(--orange);box-shadow:0 0 0 2px rgba(255,153,0,.12)}
.research-search-box>span{font-size:1.25rem;color:#91a0ae}
.research-search-box input{flex:1;min-width:0;border:0;outline:0;background:transparent;color:#f2f5f7;font:inherit;font-size:1rem}
.research-search-box input::placeholder{color:#68798a}
.research-search-box button{width:31px;height:31px;border:0;border-radius:50%;background:#1c2935;color:#cdd5dd;font-size:1.25rem;cursor:pointer}
.research-filters{display:grid;grid-template-columns:1.2fr 1fr 1fr 1fr;gap:11px;margin-top:15px}
.research-filters select{display:block;width:100%;height:42px;margin-top:6px;padding:0 10px;border:1px solid #405267;border-radius:7px;background:#07121d;color:#e8edf1;font:inherit}
.research-summary{display:flex;align-items:center;gap:22px;padding:14px 2px;color:#8f9eac}
.research-summary>div{display:flex;align-items:baseline;gap:6px}.research-summary strong{color:#fff;font-size:1.1rem}.research-summary span{font-size:.72rem}
.research-summary p{margin-left:auto;font-size:.7rem}.point-dot{display:inline-block;width:9px;height:9px;border-radius:50%;margin:0 5px 0 12px}.point-dot.valor{background:#5ca7ff}.point-dot.conquest{background:#f2a431}
.research-results{display:grid;gap:11px}
.research-category-heading{display:flex;align-items:center;gap:10px;margin:18px 0 8px;padding:0 2px}.research-category-heading h2{margin:0;color:#fff;font-size:1.05rem;text-transform:uppercase}.research-category-heading span{color:#778797;font-size:.7rem}
.research-item{border:1px solid #2f4253;border-radius:9px;background:#091521;overflow:hidden}
.research-item summary{display:grid;grid-template-columns:minmax(220px,1.5fr) 150px 135px 34px;align-items:center;gap:12px;min-height:64px;padding:10px 14px;cursor:pointer;list-style:none}
.research-item summary::-webkit-details-marker{display:none}
.research-item summary:hover{background:#0d1c29}
.research-name strong{display:block;color:#f2f5f7;font-size:.92rem}.research-name span{display:block;margin-top:4px;color:#7f90a0;font-size:.66rem}
.point-badge{display:inline-flex;align-items:center;justify-content:center;min-height:29px;padding:0 9px;border:1px solid;border-radius:999px;font-size:.66rem;font-weight:900;text-align:center}.point-badge.valor{color:#8bc3ff;border-color:#2f6faa;background:#0b2942}.point-badge.conquest{color:#ffc967;border-color:#805a18;background:#2b1e08}
.research-total{text-align:right}.research-total strong{display:block;color:#fff;font-size:.84rem}.research-total span{display:block;color:#768797;font-size:.61rem;margin-top:3px}
.research-chevron{color:var(--orange);font-size:1.1rem;text-align:center;transition:transform .15s ease}.research-item[open] .research-chevron{transform:rotate(90deg)}
.research-details{padding:0 14px 14px;border-top:1px solid rgba(255,255,255,.06)}
.level-cost-grid{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:7px;padding-top:12px}
.level-cost{min-height:57px;padding:8px;border:1px solid #26394a;border-radius:7px;background:#06111b}.level-cost .level{display:block;color:#718394;font-size:.59rem;font-weight:850;text-transform:uppercase}.level-cost .cost{display:block;margin-top:5px;color:#f4f6f7;font-size:.78rem;font-weight:800}.level-cost.empty .cost{color:#4b5966}
.research-details-footer{display:flex;justify-content:space-between;gap:12px;margin-top:10px;color:#778897;font-size:.64rem}.research-details-footer b{color:#bcc7d1}
.research-empty{text-align:center;padding:36px 20px}.research-empty h2{margin-top:0}.research-load-more-wrap{text-align:center;padding:18px}.research-load-more{background:#101d29;color:#e4e9ee;border:1px solid #405367}
.research-note{margin-top:18px;padding:14px 16px;border-color:#304151}.research-note strong{color:var(--orange-bright);text-transform:uppercase;font-size:.72rem}.research-note p{margin:5px 0 0;color:#91a0ae;font-size:.74rem;line-height:1.5}
@media(max-width:820px){.research-filters{grid-template-columns:1fr 1fr}.research-item summary{grid-template-columns:minmax(0,1fr) 120px 34px}.research-item summary .point-badge{display:none}.level-cost-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.research-summary{flex-wrap:wrap}.research-summary p{width:100%;margin:0}}
@media(max-width:520px){.research-toolbar{padding:13px}.research-filters{grid-template-columns:1fr}.research-summary{gap:13px}.research-item summary{grid-template-columns:minmax(0,1fr) 105px 24px;padding:10px}.research-total strong{font-size:.75rem}.level-cost-grid{grid-template-columns:1fr 1fr}.research-details-footer{flex-direction:column}.research-category-heading{margin-top:14px}}


/* ==========================================================================
   v27 RESEARCH ICONS
   Category artwork and Valor / Conquest Point badges from the game interface.
   ========================================================================== */

.research-category-heading{
  min-height:52px;
}
.research-category-heading-icon{
  width:48px;
  height:48px;
  flex:0 0 48px;
  object-fit:cover;
  border-radius:7px;
  border:1px solid #73501f;
  box-shadow:0 3px 10px rgba(0,0,0,.25);
}
.research-category-heading>div{
  min-width:0;
}
.research-category-heading>div span{
  display:block;
  margin-top:3px;
}

.research-item summary{
  grid-template-columns:54px minmax(220px,1.5fr) 168px 135px 34px;
}
.research-item-icon{
  width:52px;
  height:52px;
  object-fit:cover;
  border-radius:7px;
  border:1px solid #6f4f25;
  box-shadow:0 3px 9px rgba(0,0,0,.24);
}
.point-badge{
  gap:7px;
  justify-content:flex-start;
  padding:4px 9px 4px 5px;
  min-height:36px;
}
.point-badge img{
  width:27px;
  height:27px;
  flex:0 0 27px;
  object-fit:cover;
  border-radius:50%;
}
.point-badge>span{
  line-height:1.05;
}

/* Make point identity visually obvious without relying on text alone. */
.research-summary p{
  display:flex;
  align-items:center;
  gap:7px;
  flex-wrap:wrap;
}
.research-summary .summary-point-icon{
  width:23px;
  height:23px;
  object-fit:cover;
  border-radius:50%;
}

@media(max-width:900px){
  .research-item summary{
    grid-template-columns:50px minmax(0,1fr) 145px 100px 28px;
    gap:9px;
  }
  .research-item-icon{
    width:48px;
    height:48px;
  }
  .point-badge{
    font-size:.61rem;
  }
  .point-badge img{
    width:24px;
    height:24px;
    flex-basis:24px;
  }
}

@media(max-width:700px){
  .research-item summary{
    grid-template-columns:46px minmax(0,1fr) 88px 22px;
    grid-template-areas:
      "icon name total chevron"
      "icon badge total chevron";
    align-items:center;
  }
  .research-item-icon{
    grid-area:icon;
    width:44px;
    height:44px;
  }
  .research-name{grid-area:name}
  .point-badge{
    grid-area:badge;
    display:inline-flex!important;
    width:max-content;
    max-width:100%;
    margin-top:5px;
    min-height:27px;
    padding:2px 7px 2px 3px;
    font-size:.57rem;
  }
  .point-badge img{
    width:21px;
    height:21px;
    flex-basis:21px;
  }
  .research-total{grid-area:total}
  .research-chevron{grid-area:chevron}
}

@media(max-width:420px){
  .research-category-heading-icon{
    width:44px;
    height:44px;
    flex-basis:44px;
  }
  .research-item summary{
    grid-template-columns:42px minmax(0,1fr) 78px 18px;
    gap:7px;
    padding:9px 8px;
  }
  .research-item-icon{
    width:40px;
    height:40px;
  }
  .research-name strong{
    font-size:.82rem;
  }
  .research-name span{
    font-size:.59rem;
  }
  .research-total strong{
    font-size:.7rem;
  }
  .point-badge>span{
    max-width:100px;
  }
}


/* v28 — larger filter text, Unlock/Boost classification, subgroup artwork */
.research-filters{grid-template-columns:1.05fr 1.2fr 1fr 1fr 1fr}
.research-filters select{font-size:1rem;font-weight:700;line-height:1.2}
.research-filters select option{font-size:1rem}
.research-search-wrap>label,.research-filters label{font-size:.76rem}
.research-type-tag{display:inline-block;padding:2px 7px;border-radius:999px;font-size:.61rem;font-weight:900;letter-spacing:.04em;text-transform:uppercase;vertical-align:middle}
.research-type-tag.unlock{color:#9ecaff;background:#0b2942;border:1px solid #2f6faa}
.research-type-tag.boost{color:#ffc967;background:#2b1e08;border:1px solid #805a18}
.research-item-icon{object-fit:cover;object-position:center}
@media(max-width:980px){.research-filters{grid-template-columns:1fr 1fr 1fr}}
@media(max-width:700px){.research-filters{grid-template-columns:1fr 1fr}.research-filters select{font-size:1.05rem}}
@media(max-width:520px){.research-filters{grid-template-columns:1fr}.research-filters select{height:48px;font-size:1.08rem}}


/* v28 full-card subgroup crop integration */
.research-item summary{
  grid-template-columns:64px minmax(220px,1.5fr) 168px 135px 34px;
  min-height:86px;
}
.research-item-icon{
  width:58px!important;
  height:76px!important;
  object-fit:contain!important;
  object-position:center!important;
  border:0!important;
  border-radius:4px!important;
  background:transparent!important;
  box-shadow:0 3px 10px rgba(0,0,0,.22)!important;
}
@media(max-width:900px){
  .research-item summary{
    grid-template-columns:58px minmax(0,1fr) 145px 100px 28px;
  }
  .research-item-icon{
    width:52px!important;
    height:69px!important;
  }
}
@media(max-width:700px){
  .research-item summary{
    grid-template-columns:54px minmax(0,1fr) 88px 22px;
  }
  .research-item-icon{
    width:48px!important;
    height:64px!important;
  }
}
@media(max-width:420px){
  .research-item summary{
    grid-template-columns:48px minmax(0,1fr) 78px 18px;
  }
  .research-item-icon{
    width:44px!important;
    height:58px!important;
  }
}