.gac-datacron-panel {
  margin-top: .85rem;
  border: 1px solid rgba(168, 115, 255, .28);
  border-radius: .85rem;
  padding: .85rem;
  background:
    radial-gradient(circle at 88% 0%, rgba(156, 87, 255, .13), transparent 24rem),
    linear-gradient(145deg, rgba(9, 10, 24, .96), rgba(15, 11, 31, .96));
}
.gac-datacron-heading {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: .8rem;
  margin-bottom: .7rem;
}
.gac-datacron-heading h4 { margin: .12rem 0 .18rem; }
.gac-datacron-heading p { margin: 0; color: #8f94ab; font-size: .75rem; }
.gac-datacron-truth {
  border: 1px solid rgba(188, 132, 255, .34);
  border-radius: 999px;
  padding: .34rem .52rem;
  color: #d8b9ff;
  background: rgba(77, 32, 128, .2);
  font-size: .6rem;
  font-weight: 900;
  letter-spacing: .08em;
  white-space: nowrap;
}
.gac-datacron-sides {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: stretch;
  gap: .65rem;
}
.gac-datacron-side {
  border: 1px solid rgba(177, 126, 255, .16);
  border-radius: .72rem;
  padding: .7rem;
  background: rgba(5, 8, 19, .62);
}
.gac-datacron-side.enemy { border-color: rgba(255, 104, 124, .18); }
.gac-datacron-side > strong { display: block; color: #f1e7ff; margin-bottom: .5rem; }
.gac-datacron-metrics {
  display: grid;
  grid-template-columns: repeat(4, minmax(74px, 1fr));
  gap: .36rem;
}
.gac-datacron-metric {
  border: 1px solid rgba(149, 154, 184, .12);
  border-radius: .48rem;
  padding: .42rem;
  background: rgba(255, 255, 255, .025);
}
.gac-datacron-metric span,
.gac-datacron-metric strong { display: block; }
.gac-datacron-metric span { color: #757f98; font-size: .56rem; text-transform: uppercase; letter-spacing: .06em; }
.gac-datacron-metric strong { margin-top: .12rem; color: #dfe8f8; font-size: .76rem; }
.gac-datacron-vs { align-self: center; color: #9b73d5; font-weight: 950; font-size: .72rem; }
.gac-datacron-setline { margin-top: .45rem; color: #8f97aa; font-size: .66rem; }
.gac-datacron-inventory {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: .4rem;
  margin-top: .55rem;
}
.gac-datacron-card {
  border: 1px solid rgba(157, 111, 220, .16);
  border-radius: .58rem;
  padding: .5rem;
  background: rgba(10, 7, 22, .7);
}
.gac-datacron-card-head { display: flex; align-items: center; justify-content: space-between; gap: .4rem; }
.gac-datacron-card-head strong { color: #e9d8ff; font-size: .74rem; }
.gac-datacron-card-head span { color: #ad8bdc; font-size: .62rem; }
.gac-datacron-card > small { display: block; margin-top: .24rem; color: #737d93; font-size: .6rem; }
.gac-datacron-affixes { display: flex; flex-wrap: wrap; gap: .24rem; margin-top: .35rem; }
.gac-datacron-affix {
  border-radius: 999px;
  padding: .2rem .34rem;
  background: rgba(109, 64, 169, .18);
  color: #baa4d9;
  font-size: .55rem;
}
.gac-datacron-ability-details {
  display: grid;
  gap: .35rem;
  margin-top: .45rem;
}
.gac-datacron-ability-detail {
  border: 1px solid rgba(155, 119, 209, .15);
  border-radius: .48rem;
  padding: .46rem;
  background: rgba(4, 7, 16, .55);
}
.gac-datacron-ability-detail.is-resolved {
  border-color: rgba(107, 225, 169, .25);
  background: rgba(24, 84, 61, .1);
}
.gac-datacron-ability-detail.is-unresolved { border-style: dashed; }
.gac-datacron-ability-title {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: .4rem;
}
.gac-datacron-ability-title strong { color: #dbf6e8; font-size: .66rem; }
.gac-datacron-ability-title span {
  color: #78d5a4;
  font-size: .49rem;
  font-weight: 900;
  letter-spacing: .08em;
}
.gac-datacron-ability-detail p {
  margin: .28rem 0 0;
  color: #9fa8bb;
  font-size: .6rem;
  line-height: 1.45;
}
.gac-datacron-ability-detail small {
  display: block;
  margin-top: .2rem;
  color: #78958a;
  font-size: .55rem;
}
.gac-datacron-ability-detail code {
  display: inline-block;
  max-width: 100%;
  margin-top: .3rem;
  color: #786f89;
  font-size: .5rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.gac-datacron-ability-detail.is-unresolved strong { color: #a6adbd; font-size: .62rem; }
.gac-datacron-ability-detail.is-unresolved p { color: #71798b; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; }
.gac-datacron-unknown {
  padding: .7rem;
  border: 1px dashed rgba(147, 154, 177, .2);
  border-radius: .6rem;
  color: #858da0;
  font-size: .72rem;
}
.gac-datacron-footnote { margin-top: .65rem; color: #777f94; font-size: .62rem; }

@media (max-width: 850px) {
  .gac-datacron-heading { flex-direction: column; }
  .gac-datacron-sides { grid-template-columns: 1fr; }
  .gac-datacron-vs { justify-self: center; }
  .gac-datacron-metrics { grid-template-columns: repeat(2, minmax(74px, 1fr)); }
  .gac-datacron-ability-title { align-items: flex-start; flex-direction: column; }
}