.filters[hidden] {
  display: none !important;
}

.profile-page {
  display: grid;
  gap: 18px;
  max-width: 1580px;
  margin: 0 auto;
}

.profile-hero {
  position: relative;
  display: grid;
  grid-template-columns: 230px minmax(0, 1fr) 205px;
  align-items: center;
  gap: 28px;
  min-height: 276px;
  padding: 16px 24px 16px 16px;
  overflow: hidden;
  border: 1px solid #355477;
  border-radius: 14px;
  background: radial-gradient(circle at 64% 14%, #245d9455, transparent 36%), linear-gradient(120deg, #1b3451, #14243b 60%, #102037);
  box-shadow: 0 20px 48px #0000002b;
}

.profile-hero::after {
  position: absolute;
  right: -100px;
  bottom: -230px;
  width: 450px;
  height: 450px;
  border: 1px solid #73b3ff1f;
  border-radius: 50%;
  content: "";
  pointer-events: none;
}

.profile-portrait {
  align-self: stretch;
  min-height: 250px;
  overflow: hidden;
  border: 1px solid #6889a3;
  border-radius: 10px;
  background: #d4dce4;
}

.profile-portrait img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 28%;
}

.profile-intro,
.profile-score {
  position: relative;
  z-index: 1;
}

.profile-kicker,
.profile-section-heading span {
  color: #80b8ff;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .18em;
}

.profile-intro h2 {
  margin: 9px 0 14px;
  color: #f6faff;
  font-size: clamp(33px, 3.2vw, 52px);
  font-weight: 780;
  line-height: 1.02;
  letter-spacing: -.045em;
}

.profile-meta {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 9px 14px;
  color: #c3d3e8;
  font-size: 13px;
  font-weight: 600;
}

.profile-meta > span:not(:first-child) + span::before {
  margin-right: 14px;
  color: #557492;
  content: "•";
}

.nationality-display {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  white-space: nowrap;
}

.nationality-display img {
  display: block;
  flex: 0 0 22px;
  width: 22px;
  height: 15px;
  border-radius: 2px;
  object-fit: cover;
  box-shadow: 0 1px 4px #00000040;
}

.status-pill {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 5px 10px;
  border: 1px solid #38a98270;
  border-radius: 999px;
  background: #1c6c5544;
  color: #75e6bc;
  font-size: 11px;
  font-weight: 800;
  text-transform: uppercase;
}

.status-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #61e6ad;
  box-shadow: 0 0 0 3px #61e6ad22;
}

.profile-intro p {
  max-width: 580px;
  margin: 18px 0 0;
  color: #a8bed8;
  font-size: 13px;
  line-height: 1.6;
}

.profile-score {
  display: flex;
  align-items: center;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  min-height: 220px;
  padding: 12px 10px;
  border: 1px solid #5c88ad70;
  border-radius: 12px;
  background: linear-gradient(150deg, #24486e99, #132a45dd);
  text-align: center;
}

.profile-score span {
  color: #acc9e8;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .09em;
  text-transform: uppercase;
}

.profile-score strong {
  display: block;
  margin: 4px 0;
  color: #f7fbff;
  font-size: 49px;
  font-weight: 800;
  line-height: 1.1;
  letter-spacing: -.05em;
}

.rating-donut {
  position: relative;
  width: 150px;
  height: 150px;
}

.rating-donut svg {
  display: block;
  width: 100%;
  height: 100%;
  overflow: visible;
}

.rating-track,
.rating-progress {
  fill: none;
  stroke-width: 14;
}

.rating-track {
  stroke: #8092a0;
  opacity: .52;
}

.rating-progress {
  stroke: url(#ratingGradient);
  stroke-linecap: round;
  transform: rotate(-90deg);
  transform-origin: 50% 50%;
}

.rating-value {
  position: absolute;
  top: 50%;
  left: 50%;
  display: flex;
  align-items: baseline;
  justify-content: center;
  white-space: nowrap;
  transform: translate(-50%, -50%);
}

.profile-score .rating-value strong {
  margin: 0;
  font-size: 34px;
  line-height: 1;
}

.profile-score .rating-value span {
  color: #dceefa;
  font-size: 17px;
  font-weight: 800;
  line-height: 1;
}

.profile-highlights {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
}

.profile-highlight {
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-height: 92px;
  padding: 15px 18px;
  border: 1px solid #2c4361;
  border-radius: 10px;
  background: linear-gradient(135deg, #182a42, #142238);
  box-shadow: 0 10px 24px #00000015;
}

.profile-highlight span {
  color: #9db4d0;
  font-size: 11px;
  font-weight: 650;
}

.profile-highlight strong {
  margin-top: 4px;
  color: #edf5ff;
  font-size: 23px;
  font-weight: 800;
  line-height: 1.2;
  letter-spacing: -.025em;
}

.profile-section-heading {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 20px;
  padding: 7px 2px 1px;
}

.profile-section-heading h3 {
  margin: 2px 0 0;
  font-size: 24px;
  font-weight: 750;
  letter-spacing: -.035em;
}

.profile-section-heading p {
  margin: 0 0 2px;
  color: #829bb9;
  font-size: 12px;
}

.profile-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
}

.profile-card {
  min-width: 0;
  padding: 19px 20px 12px;
  border: 1px solid #2b425f;
  border-radius: 10px;
  background: linear-gradient(155deg, #172840, #121f33);
  box-shadow: 0 10px 28px #00000018;
}

.profile-card-heading {
  min-height: 56px;
  padding-bottom: 15px;
  border-bottom: 1px solid #2c415d;
}

.profile-card h4 {
  margin: 0;
  color: #eff5ff;
  font-size: 16px;
  font-weight: 750;
}

.profile-card-heading p {
  margin: 4px 0 0;
  color: #7f9ab9;
  font-size: 11px;
}

.profile-card dl {
  margin: 0;
}

.profile-detail {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  min-height: 39px;
  padding: 10px 0;
  border-bottom: 1px solid #243750;
}

.profile-detail:last-child {
  border-bottom: 0;
}

.profile-detail dt {
  color: #92a9c4;
  font-size: 11px;
  white-space: nowrap;
}

.profile-detail dd {
  margin: 0;
  color: #edf5ff;
  font-size: 12px;
  font-weight: 700;
  text-align: right;
}

@media (max-width: 1220px) {
  .profile-hero { grid-template-columns: 190px minmax(0, 1fr) 175px; gap: 20px; }
  .profile-intro h2 { font-size: 38px; }
  .profile-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 760px) {
  .profile-hero { grid-template-columns: 110px minmax(0, 1fr); gap: 15px; padding: 14px; }
  .profile-portrait { min-height: 150px; }
  .profile-intro h2 { margin: 7px 0 9px; font-size: 30px; }
  .profile-intro p { margin-top: 10px; font-size: 11px; }
  .profile-meta { gap: 7px; font-size: 11px; }
  .profile-meta > span:not(:first-child) + span::before { display: none; }
  .profile-score { grid-column: 1 / -1; min-height: 190px; }
  .profile-highlights { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .profile-grid { grid-template-columns: 1fr; }
  .profile-section-heading { align-items: start; flex-direction: column; gap: 5px; }
}

@media (max-width: 420px) {
  .profile-hero { grid-template-columns: 86px minmax(0, 1fr); }
  .profile-portrait { min-height: 125px; }
  .profile-kicker { font-size: 8px; }
  .profile-intro h2 { font-size: 25px; }
  .profile-intro p { display: none; }
  .profile-highlight { min-height: 80px; padding: 12px; }
  .profile-highlight strong { font-size: 18px; }
  .profile-card { padding-inline: 14px; }
}

@media print {
  .profile-hero,
  .profile-card,
  .profile-highlight { background: white; color: #111; box-shadow: none; }
  .profile-intro h2,
  .profile-score strong,
  .profile-highlight strong,
  .profile-card h4,
  .profile-detail dd { color: #111; }
  .profile-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .profile-card { break-inside: avoid; }
}

/* Live profile: photo fallback, chooser, loading, and empty values. */
.profile-portrait { position: relative; display: grid; }
.profile-portrait > img { position: relative; z-index: 1; }
/* Font Awesome fixes an icon's width, so size the box explicitly to center the glyph. */
.profile-portrait-fallback { position: absolute; inset: 0 0 42px; display: grid; width: auto; height: auto; place-items: center; color: #8e9eab; font-size: 72px; }
.profile-portrait-caption { z-index: 2; }
.profile-empty-value { color: #aebdc9; font-style: italic; font-weight: 500; }
.profile-disclosure { margin: 14px 0 0; color: #b6c8d6; font-size: 11px; }
.profile-disclosure i { margin-right: 6px; color: #9dbfe2; }
.profile-loading { display: flex; align-items: center; justify-content: center; gap: 10px; min-height: 260px; color: #d1dce4; font-weight: 600; }
.profile-loading i { color: #b7dcff; }
.profile-chooser { display: flex; flex-direction: column; align-items: center; max-width: 480px; margin: 48px auto; padding: 34px 28px; border: 1px solid #73818d; border-radius: 12px; background: linear-gradient(155deg, var(--brand-slate), #3e4b56); text-align: center; }
.profile-chooser-icon { display: grid; width: 56px; height: 56px; margin-bottom: 14px; place-items: center; border: 1px solid #b7dcff55; border-radius: 50%; background: #b7dcff1a; color: #b7dcff; font-size: 22px; }
.profile-chooser h2 { margin: 0; font-size: 21px; }
.profile-chooser p { margin: 8px 0 18px; color: #d1dce4; }
.profile-chooser label { width: 100%; }
.profile-chooser select { width: 100%; height: 40px; padding: 0 10px; border: 1px solid #82909b; border-radius: 8px; outline: none; background: var(--brand-charcoal); color: var(--text); font-size: 14px; }
.profile-chooser select:focus { border-color: #b7dcff; box-shadow: 0 0 0 3px #b7dcff33; }
.profile-chooser .sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; }