.degree-intelligence-badges {
  display: inline-flex;
  align-items: center;
  margin: 4px 4px 0 0;
  vertical-align: middle;
}

.degree-intelligence-badges.compact {
  margin-top: 2px;
}

.degree-intelligence-chip {
  display: inline-flex;
  align-items: center;
  min-height: 24px;
  padding: 3px 9px;
  border: 1px solid #c9dafb;
  border-radius: 999px;
  background: linear-gradient(135deg, #f5f8ff, #eef4ff);
  color: #25569d;
  font-size: 11px;
  font-weight: 760;
  line-height: 1.35;
  letter-spacing: .01em;
  box-shadow: 0 4px 12px rgba(41, 92, 172, .08);
}

.degree-intelligence-chip::before {
  width: 6px;
  height: 6px;
  margin-right: 6px;
  border-radius: 50%;
  background: #3975dc;
  box-shadow: 0 0 0 3px rgba(57, 117, 220, .12);
  content: "";
}

.degree-intelligence-chip.related {
  border-color: #ddcfaa;
  background: linear-gradient(135deg, #fffdf7, #fff8e8);
  color: #805e12;
}

.degree-intelligence-chip.related::before {
  background: #d29b24;
  box-shadow: 0 0 0 3px rgba(210, 155, 36, .12);
}

.degree-intelligence-chip.unresolved {
  border-color: #dce3eb;
  background: #f7f9fb;
  color: #677487;
  box-shadow: none;
}

.degree-intelligence-chip.unresolved::before {
  background: #92a0b2;
  box-shadow: none;
}

.degree-intelligence-panel {
  position: relative;
  overflow: hidden;
  margin: 18px 0;
  padding: 22px;
  border: 1px solid #ccdafa;
  border-radius: 20px;
  background:
    radial-gradient(circle at 100% 0, rgba(65, 117, 221, .13), transparent 32%),
    linear-gradient(150deg, #fbfdff 0%, #f4f8ff 58%, #f8fbff 100%);
  box-shadow: 0 16px 38px rgba(28, 66, 127, .09);
}

.degree-intelligence-panel::before {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: 4px;
  background: linear-gradient(#3978df, #6fa3f4);
  content: "";
}

.degree-intelligence-panel.related {
  border-color: #eadbb5;
  background:
    radial-gradient(circle at 100% 0, rgba(212, 163, 52, .12), transparent 32%),
    linear-gradient(150deg, #fffefb 0%, #fffaf0 100%);
}

.degree-intelligence-panel.related::before {
  background: linear-gradient(#ca9320, #e2bb5d);
}

.degree-intelligence-panel.unresolved {
  border-color: #dfe5ec;
  background: linear-gradient(150deg, #fbfcfd, #f6f8fa);
  box-shadow: 0 10px 26px rgba(46, 60, 78, .06);
}

.degree-intelligence-panel.unresolved::before {
  background: #a7b2c0;
}

.degree-intelligence-panel > header {
  display: flex;
  gap: 18px;
  align-items: flex-start;
  justify-content: space-between;
}

.degree-intelligence-panel h3 {
  margin: 5px 0 6px;
  color: #162e50;
  font-size: 20px;
  letter-spacing: -.02em;
}

.degree-intelligence-panel header p {
  max-width: 720px;
  margin: 0;
  color: #63738a;
  font-size: 13px;
  line-height: 1.75;
}

.degree-evidence-grade {
  flex: 0 0 auto;
  padding: 7px 10px;
  border: 1px solid #cddbf4;
  border-radius: 10px;
  background: rgba(255, 255, 255, .82);
  color: #355c91;
  font-size: 11px;
  font-weight: 760;
  white-space: nowrap;
}

.degree-evidence-grade.grade-A2 {
  border-color: #e4d39e;
  color: #775b18;
}

.degree-evidence-grade.grade-NONE {
  border-color: #dfe4ea;
  color: #697689;
}

.degree-discipline-list {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 17px;
}

.degree-discipline-chip {
  display: inline-flex;
  gap: 6px;
  align-items: center;
  padding: 7px 10px;
  border: 1px solid rgba(189, 207, 240, .86);
  border-radius: 10px;
  background: rgba(255, 255, 255, .88);
  color: #2d486c;
  font-size: 12px;
}

.degree-discipline-chip b {
  color: #2866c4;
  font-family: ui-monospace, SFMono-Regular, Consolas, monospace;
  font-size: 11px;
}

.degree-discipline-chip em {
  padding-left: 6px;
  border-left: 1px solid #dce5f3;
  color: #728299;
  font-size: 10px;
  font-style: normal;
}

.degree-boundary {
  display: grid;
  gap: 5px;
  margin-top: 16px;
  padding: 13px 15px;
  border: 1px solid rgba(202, 215, 236, .78);
  border-radius: 12px;
  background: rgba(255, 255, 255, .72);
}

.degree-boundary b {
  color: #244a7b;
  font-size: 12px;
}

.degree-boundary span {
  color: #64738a;
  font-size: 11px;
  line-height: 1.65;
}

.degree-intelligence-panel details {
  margin-top: 12px;
  color: #68778c;
  font-size: 11px;
}

.degree-intelligence-panel details summary {
  cursor: pointer;
  color: #42668f;
  font-weight: 700;
}

.degree-intelligence-panel details ul {
  margin: 8px 0 0;
  padding-left: 18px;
  line-height: 1.65;
}

.degree-source-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  margin-top: 14px;
}

.degree-source-list article {
  display: flex;
  gap: 12px;
  align-items: center;
  justify-content: space-between;
  min-width: 0;
  padding: 10px 12px;
  border: 1px solid #dbe5f4;
  border-radius: 11px;
  background: rgba(255, 255, 255, .84);
}

.degree-source-list article > div {
  display: grid;
  min-width: 0;
}

.degree-source-list article b {
  overflow: hidden;
  color: #334b6d;
  font-size: 11px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.degree-source-list article span,
.degree-source-list article em {
  color: #8190a4;
  font-size: 10px;
  font-style: normal;
}

.degree-source-list article a {
  flex: 0 0 auto;
  padding: 5px 8px;
  border-radius: 8px;
  background: #eaf2ff;
  color: #2c68bc;
  font-size: 10px;
  font-weight: 700;
  text-decoration: none;
}

.degree-intelligence-panel > footer {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 4px 10px;
  margin-top: 14px;
  padding-top: 13px;
  border-top: 1px solid rgba(198, 212, 233, .72);
  color: #68788e;
}

.degree-intelligence-panel > footer b {
  color: #2d4f7d;
  font-size: 11px;
}

.degree-intelligence-panel > footer span {
  font-size: 11px;
  line-height: 1.6;
}

.degree-intelligence-panel > footer em {
  grid-column: 2;
  color: #50735f;
  font-size: 10px;
  font-style: normal;
  font-weight: 700;
}

@media (max-width: 760px) {
  .degree-intelligence-panel {
    padding: 17px;
    border-radius: 16px;
  }

  .degree-intelligence-panel > header {
    display: grid;
  }

  .degree-evidence-grade {
    justify-self: start;
    white-space: normal;
  }

  .degree-source-list {
    grid-template-columns: 1fr;
  }

  .degree-intelligence-panel > footer {
    grid-template-columns: 1fr;
  }

  .degree-intelligence-panel > footer em {
    grid-column: 1;
  }
}