.cs-page .cs-identity {
  margin-bottom: 20px;
  overflow: hidden;
  background: var(--bg-panel);
  border: 1px solid var(--border);
  border-radius: 8px;
}
.cs-page .cs-identity .hero {
  margin: 0;
  border-radius: 0;
}









.cs-page .cs-identity .hero__iconbox { position: relative; }
.cs-page .cs-identity .hero__iconbox::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(to bottom, rgba(8, 10, 16, 0.55), rgba(8, 10, 16, 0) 22%),
    linear-gradient(to top, rgba(8, 10, 16, 0.72), rgba(8, 10, 16, 0) 34%);
}




.cs-page .cs-identity .hero__name,
.cs-page .cs-identity .hero__no,
.cs-page .cs-identity .hero__rarity,
.cs-page .cs-identity .hero__element { z-index: 1; }




.cs-page .cs-identity .hero__element {
  top: 12px;
  left: 12px;
  width: 56px;
  height: 44px;
  padding: 3px 5px;
  background: rgba(10, 13, 20, 0.62);
  border: 1px solid var(--border-soft);
  border-radius: 6px;
  object-fit: contain;
}

.cs-page .cs-identity .hero__no {
  top: 12px;
  right: 14px;
  padding: 2px 9px;
  font-size: 15px;
  font-family: var(--font-game);
  letter-spacing: 0.06em;
  font-variant-numeric: tabular-nums;
  color: var(--text);
  background: rgba(10, 13, 20, 0.62);
  border: 1px solid var(--border-soft);
  border-radius: 999px;
}


.cs-page .cs-identity .hero__name {
  right: 40%;
  font-family: var(--font-game);
  font-size: clamp(19px, 2.6vw, 30px);
  line-height: 1.12;
  letter-spacing: 0.01em;
}


.cs-page .cs-controls {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  background: var(--bg-panel-2);
  border-top: 1px solid var(--border);
}

.cs-page .cs-controls:empty { display: none; }


.cs-page .cs-controls form.filters__row {
  max-width: none;
  margin: 0;
  padding: 0;
  gap: 8px;
  justify-content: flex-start;
  background: none;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  



  flex: 0 1 auto;
  min-width: 0;
}
.cs-page .cs-controls .filters__select { min-width: 0; max-width: 100%; }



.cs-page .cs-controls .section-label { margin: 0; }
.cs-page .cs-controls .section-label::after { display: none; }

.cs-page .cs-controls .assets__open { margin-top: 0; }





.cs-page .cs-controls form.filters__row ~ .assets__open { margin-left: auto; }
.cs-page .cs-controls .assets__open:focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: 2px;
}














.cs-page .cs-numbers {
  margin: var(--s6) 0 0;
  padding: var(--s1) 0 0;
  background: none;
  border: 0;
  border-top: var(--hair) solid var(--rule);
  border-radius: var(--radius-panel);
}








.cs-page .cs-numbers .lb-bar {
  

  margin-top: var(--s5);
  padding: 10px 14px;
  background: var(--bg-raised);
  border: var(--hair) solid var(--rule-strong);
  border-radius: var(--radius);
}


.cs-page .cs-numbers .star {
  font-size: 23px;
  padding: 0 2px;
  border-radius: 3px;
  transition: background-color 0.12s ease;
}
.cs-page .cs-numbers a.star:hover { background: rgba(255, 255, 255, 0.08); }
.cs-page .cs-numbers a.star:focus-visible,
.cs-page .cs-numbers .zk-lv:focus-visible,
.cs-page .cs-numbers .lb-bar__toggle:focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: 1px;
}





.cs-page .cs-numbers .lb-bar__toggle {
  padding: var(--s1) 10px;
  border: var(--hair) solid var(--rule-strong);
  border-radius: var(--radius);
  cursor: pointer;
  transition: border-color 0.15s ease;
}
.cs-page .cs-numbers .lb-bar__toggle:hover { border-color: var(--text-muted); }
.cs-page .cs-numbers .zk-lv { transition: border-color 0.15s ease, color 0.15s ease; }










@media (min-width: 1040px) {
  .cs-page .cs-numbers > section {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 340px;
    column-gap: 20px;
    align-items: start;
  }
  .cs-page .cs-numbers > section > .lb-bar,
  .cs-page .cs-numbers > section > .section-label { grid-column: 1 / -1; }
  .cs-page .cs-numbers > section > .panel,
  .cs-page .cs-numbers > section > .table-wrap,
  .cs-page .cs-numbers > section > .chips { grid-column: 1; }
  
  .cs-page .cs-numbers > section > .mt-4 {
    grid-column: 2;
    grid-row: 3 / span 3;
    margin-top: 0;
  }
  .cs-page .cs-numbers .radar { margin-top: 0; }
}














.cs-page .panel__title {
  font-size: var(--t-lead);
  line-height: var(--lh-tight);
  text-transform: none;
  letter-spacing: var(--track-h);
  







  color: var(--accent-blue);
}














.cs-page .cs-zone--kit .panel,
.cs-page .cs-zone--kit .arts-row {
  padding: var(--s3);
  background: var(--bg-card);
  border: var(--hair) solid var(--rule);
}









.cs-page .zabilities { gap: var(--s3); }









.cs-page .cs-zone {
  margin-top: var(--s6);
  padding-top: var(--s1);
  border-top: var(--hair) solid var(--rule);
}





.cs-page .cs-zone--rel {
  margin-top: var(--s6);
  padding: var(--s1) 0 var(--s5);
  background: none;
  border: 0;
  border-top: var(--hair) solid var(--rule);
  border-radius: var(--radius-panel);
}



@media (min-width: 900px) {
  .cs-page .cs-tags {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 0 24px;
    align-items: start;
  }
  .cs-page .cs-tags > section > .section-label { margin-top: 20px; }
  

  .cs-page .cs-tags > section:only-child { grid-column: 1 / -1; }
}









.cs-page .pill {
  transition: border-color 0.12s ease, color 0.12s ease, background-color 0.12s ease;
}
.cs-page a.pill:focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: 2px;
}



.cs-page .zrow__head {
  cursor: pointer;
  transition: background-color 0.12s ease;
}




.cs-page .zrow__head:hover { background: var(--bg-raised); }
.cs-page .zrow__head:focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: -2px;
}
.cs-page .zrow[open] .zrow__head { background: rgba(255, 206, 110, 0.08); }









.cs-page .xref > summary {
  padding: var(--s1) 0;
  transition: color 0.12s ease;
}

.cs-page .xref > summary:hover { color: var(--accent); }
.cs-page .xref > summary:focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: 2px;
}






.cs-page .cs-equip {
  max-height: 52vh;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: var(--s3);
  background: var(--bg-panel);
  border: var(--hair) solid var(--rule);
  border-radius: var(--radius-panel);
}
.cs-page .cs-equip .pills { gap: 14px; }
.cs-page .cs-equip a:focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: 2px;
}











@media (max-width: 620px) {
  .cs-page .cs-controls { padding: 10px; }
  

  .cs-page .cs-identity .hero__name { right: 42%; bottom: 6px; left: 12px; }
  .cs-page .cs-identity .hero__element { width: 44px; height: 36px; }
  





  .cs-page .cs-identity .hero:has(.hero__iconbox--cutin) { display: flex; flex-wrap: wrap; }
  .cs-page .cs-identity .hero__iconbox--cutin { flex: 0 0 100%; }
  


  .cs-page .cs-identity .hero:has(.hero__iconbox--cutin) .hero__name,
  .cs-page .cs-identity .hero:has(.hero__iconbox--cutin) .hero__rarity {
    position: static;
    padding: 6px 12px 8px;
    background: rgba(8, 10, 16, 0.72);
  }
  

  .cs-page .cs-identity .hero:has(.hero__iconbox--cutin) .hero__name { flex: 1; }
  


  .cs-page .cs-identity .hero:has(.hero__iconbox--cutin) .hero__rarity {
    width: 128px;
    max-width: none;
    object-fit: contain;
  }
  

  .cs-page .cs-numbers .lb-bar__stars { flex-wrap: wrap; }
  .cs-page .cs-numbers .star { font-size: 19px; }
  .cs-page .cs-equip { max-height: 60vh; padding: 8px; }
}



@media (prefers-reduced-motion: reduce) {
  .cs-page .cs-numbers .star,
  .cs-page .cs-numbers .lb-bar__toggle,
  .cs-page .cs-numbers .zk-lv,
  .cs-page .pill,
  .cs-page .zrow__head,
  .cs-page .xref > summary { transition: none; }
}






.cs-page .cb-list { list-style: none; margin: 0; padding: 0; }
.cs-page .cb-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: var(--s2);
  padding: 6px 8px;
  border-bottom: 1px solid var(--border-soft);
}
.cs-page .cb-row:last-child { border-bottom: 0; }


.cs-page .cb-row:nth-child(even) { background: var(--bg-row-alt); }
.cs-page .cb-name { color: var(--text); text-decoration: none; }
.cs-page .cb-name:hover { color: var(--brand); text-decoration: underline; }
.cs-page .cb-date {
  color: var(--text-muted);
  font-size: 13px;
  white-space: nowrap;
  

  flex: 0 0 auto;
}
@media (max-width: 520px) {
  

  .cs-page .cb-row { flex-direction: column; gap: 2px; }
}