/* EPICENTER: extracted from src/styles/passport/cp-passport-b2-booklet.css — homepage Passport cover parity only. Do not edit without syncing booklet source. */
:root {
  --de-b2-void: #07070c;
  --de-b2-gold: #c9a96e;
  /* Legacy Passport Gold Signal — preserved for premium accents (not cover availability ring) */
  --de-color-passport-gold-signal: #c9a96e;
  --de-color-passport-gold-signal-glow: rgba(201, 169, 110, 0.2);
  --de-color-passport-gold-signal-glow-soft: rgba(245, 210, 150, 0.1);
  --de-color-passport-gold-signal-border: rgba(201, 169, 110, 0.28);
  --de-color-passport-status-open: #5a7a6e;
  --de-color-passport-status-open-glow: rgba(90, 122, 110, 0.38);
  --de-color-passport-status-closed: #9a9082;
  --de-color-passport-status-closed-glow: rgba(154, 144, 130, 0.28);
  --de-b2-gdim: rgba(201, 169, 110, 0.11);
  --de-b2-gbdr: rgba(201, 169, 110, 0.28);
  --de-b2-ink: #f0ede4;
  --de-b2-muted: rgba(240, 237, 228, 0.45);
  --de-b2-serif: Georgia, "Times New Roman", serif;
  --de-b2-cover-grad: linear-gradient(160deg, #0d1830 0%, #0a1228 55%, #0d1830 100%);
  --de-b2-cover-grad-selected: linear-gradient(160deg, #224c82 0%, #1a3f6e 52%, #224c82 100%);
  --de-b2-cover-grad-inactive: linear-gradient(160deg, #040a12 0%, #02060c 55%, #040a12 100%);
  /* Cover safe-area — mirrors spread page__safe (outer inset + inner content pad) */
  --de-b2-cover-outer: 18px;
  --de-b2-cover-inner: 12px;
  --de-b2-cover-leather: linear-gradient(
    125deg,
    rgba(255, 255, 255, 0.04) 0%,
    transparent 24%,
    rgba(0, 0, 0, 0.22) 50%,
    transparent 76%,
    rgba(201, 169, 110, 0.05) 100%
  );
  --de-b2-pg: #f5f0e6;
  --de-b2-pg2: #ede8d8;
  --de-b2-pt: #1a1610;
  --de-b2-pm: #5e5648;
  --de-b2-pf: #9a9082;
  --de-b2-pgold: #7a5f18;
  --de-b2-pb: #c8c0b0;
  /* Physical passport proportions: closed 3.5×5 in, open spread 7×5 in */
  --de-b2-cover-ratio: 7 / 10;
  --de-b2-cover-max-w: 252px;
  --de-b2-spread-ratio: 7 / 5;
  --de-b2-spread-max-w: 820px;
  --de-b2-spread-width: min(94vw, 780px);
  /* Page-safe composition (quick spread interior) */
  --de-b2-page-outer: 58px;
  --de-b2-page-spine: 72px;
  --de-b2-page-top: 46px;
  --de-b2-page-bottom: 28px;
  --de-b2-page-col-max: 320px;
  --de-b2-page-outer-m: 24px;
  --de-b2-page-spine-m: 34px;
  --de-b2-page-top-m: 26px;
  --de-b2-page-bottom-m: 18px;
  --de-b2-page-col-max-m: 100%;
  --de-b2-page-control-clear: 36px;
  --de-b2-page-read-offset: 0px;
  --de-b2-page-read-offset-m: 0px;
  --de-b2-page-rule-gap: 13px;
  --de-b2-rhythm-after-rule: 13px;
  --de-b2-rhythm-after-label: 11px;
  --de-b2-rhythm-before-next: 17px;
  --de-b2-rhythm-cta-actions: 12px;
  --de-b2-rhythm-rule-color: rgba(122, 95, 24, 0.14);
  /* Quick-spread interior paper (shared with cover page-curl peel) */
  --de-b2-cover-interior-paper-hi: #fcf8ef;
  --de-b2-cover-interior-paper: var(--de-b2-pg);
  --de-b2-cover-interior-paper-warm: var(--de-b2-pg2);
}
@keyframes de-b2-cover-glow {
  0%,
  100% {
    box-shadow:
      0 0 0 1px rgba(201, 169, 110, 0.22),
      0 0 24px rgba(201, 169, 110, 0.06),
      8px 12px 44px rgba(0, 0, 0, 0.78),
      -4px 0 0 rgba(0, 0, 0, 0.55);
  }
  50% {
    box-shadow:
      0 0 0 1px rgba(201, 169, 110, 0.34),
      0 0 32px rgba(201, 169, 110, 0.14),
      10px 14px 50px rgba(0, 0, 0, 0.82),
      -4px 0 0 rgba(201, 169, 110, 0.14);
  }
}

@keyframes de-b2-cover-foil-shine {
  0%,
  100% {
    opacity: 0.42;
    transform: translateX(-18%) skewX(-12deg);
  }
  50% {
    opacity: 0.72;
    transform: translateX(18%) skewX(-12deg);
  }
}
.de-b2-cover {
  /* Emblem + future voice — tune tokens on .de-b2-cover, not one-off px in rules */
  container-type: inline-size;
  container-name: de-b2-cover;
  /* Medium tier defaults — sparse/dense modifiers override */
  --de-b2-cover-emblem-min: 96px;
  --de-b2-cover-emblem-max: 118px;
  --de-b2-cover-emblem-fluid: 40cqw;
  --de-b2-cover-emblem-size: clamp(
    var(--de-b2-cover-emblem-min),
    var(--de-b2-cover-emblem-fluid),
    var(--de-b2-cover-emblem-max)
  );
  --de-b2-cover-emblem-fallback-scale: 1.55;
  --de-b2-cover-voice-reserve: 0px;
  --de-b2-cover-page-curl-size: clamp(31px, 8.9cqw, 43px);
  --de-b2-cover-center-gap: 2px;
  --de-b2-cover-center-offset: 4px;
  --de-b2-cover-stage-justify: center;
  --de-b2-cover-feature-flex: 0 1 auto;
  --de-b2-cover-stage-padding-bottom: 0;
  position: relative;
  width: 100%;
  max-width: var(--de-b2-cover-max-w);
  aspect-ratio: var(--de-b2-cover-ratio);
  margin-left: auto;
  margin-right: auto;
  box-sizing: border-box;
  padding: 0;
  border-radius: 8px 14px 14px 8px;
  background: var(--de-b2-cover-grad);
  overflow: hidden;
  cursor: pointer;
  min-height: unset;
  display: flex;
  flex-direction: column;
  isolation: isolate;
  transform-style: preserve-3d;
  perspective: 900px;
  animation: de-b2-cover-glow 4.8s ease-in-out infinite;
  transition:
    border-color 0.24s ease,
    transform 0.24s ease,
    box-shadow 0.24s ease,
    background 0.28s ease,
    filter 0.28s ease;
  border: 1px solid rgba(201, 169, 110, 0.2);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.06),
    inset 0 -12px 22px rgba(0, 0, 0, 0.28);
}

.de-b2-cover__shell {
  position: relative;
  z-index: 0;
  flex: 1 1 auto;
  min-height: 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
  border-radius: 4px 9px 9px 4px;
  overflow: hidden;
}

/* Lifted interior page corner — cream paper peel (matches quick spread); no layout/hit-area */
.de-b2-cover__shell::before {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  width: var(--de-b2-cover-page-curl-size);
  height: var(--de-b2-cover-page-curl-size);
  z-index: 3;
  pointer-events: none;
  transform-origin: 100% 0;
  background: radial-gradient(
    ellipse 92% 92% at 100% 0%,
    rgba(0, 0, 0, 0.34) 0%,
    rgba(0, 0, 0, 0.14) 38%,
    rgba(0, 0, 0, 0.05) 58%,
    transparent 76%
  );
  clip-path: polygon(100% 0, 10% 2%, 2% 12%, 100% 100%);
  filter: drop-shadow(-2px 4px 6px rgba(12, 10, 8, 0.28));
  opacity: 0.78;
  transition:
    opacity 0.24s ease,
    transform 0.24s ease,
    filter 0.24s ease;
}

.de-b2-cover__shell::after {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  width: var(--de-b2-cover-page-curl-size);
  height: var(--de-b2-cover-page-curl-size);
  z-index: 4;
  pointer-events: none;
  transform-origin: 100% 0;
  border-top-right-radius: 7px;
  background: linear-gradient(
    148deg,
    var(--de-b2-cover-interior-paper-hi) 0%,
    var(--de-b2-cover-interior-paper) 36%,
    var(--de-b2-cover-interior-paper-warm) 60%,
    rgba(237, 232, 216, 0.96) 74%,
    transparent 78%
  );
  clip-path: polygon(100% 0, 8% 3%, 3% 10%, 100% 100%);
  box-shadow:
    -3px 5px 9px rgba(26, 22, 16, 0.26),
    -1px 2px 3px rgba(26, 22, 16, 0.14),
    inset 0 1px 0 rgba(255, 255, 255, 0.78),
    inset -1px 0 0 rgba(122, 95, 24, 0.08);
  opacity: 0.94;
  transition:
    opacity 0.24s ease,
    transform 0.24s ease,
    box-shadow 0.24s ease,
    filter 0.24s ease;
}

.de-b2-cover:hover .de-b2-cover__shell::before,
.de-b2-cover:focus-visible .de-b2-cover__shell::before {
  opacity: 0.94;
  transform: translate(-1px, 2px);
  filter: drop-shadow(-3px 6px 8px rgba(12, 10, 8, 0.34));
}

.de-b2-cover:hover .de-b2-cover__shell::after,
.de-b2-cover:focus-visible .de-b2-cover__shell::after {
  opacity: 1;
  transform: translate(-2px, 2px) rotate(-1.25deg);
  filter: brightness(1.05);
  box-shadow:
    -4px 7px 12px rgba(26, 22, 16, 0.3),
    -1px 3px 4px rgba(26, 22, 16, 0.16),
    inset 0 1px 0 rgba(255, 255, 255, 0.84),
    inset -1px 0 0 rgba(122, 95, 24, 0.09);
}

.de-b2-cover__fx {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
  border-radius: inherit;
}

.de-b2-cover__leather,
.de-b2-cover__grain,
.de-b2-cover__foil,
.de-b2-cover__glow,
.de-b2-cover__shine {
  position: absolute;
  inset: 0;
  pointer-events: none;
  border-radius: inherit;
}

.de-b2-cover__leather {
  background: var(--de-b2-cover-leather);
  mix-blend-mode: soft-light;
}

.de-b2-cover__grain {
  opacity: 0.55;
  background-image:
    repeating-linear-gradient(
      0deg,
      transparent,
      transparent 2px,
      rgba(255, 255, 255, 0.012) 2px,
      rgba(255, 255, 255, 0.012) 3px
    ),
    repeating-linear-gradient(
      90deg,
      transparent,
      transparent 3px,
      rgba(0, 0, 0, 0.04) 3px,
      rgba(0, 0, 0, 0.04) 4px
    ),
    repeating-linear-gradient(
      118deg,
      transparent,
      transparent 11px,
      rgba(201, 169, 110, 0.018) 11px,
      rgba(201, 169, 110, 0.018) 12px
    );
}

.de-b2-cover__foil {
  inset: 0;
  border-radius: inherit;
  border: 1px solid rgba(201, 169, 110, 0.34);
  box-shadow:
    inset 0 0 0 1px rgba(255, 248, 230, 0.05),
    inset 0 0 18px rgba(201, 169, 110, 0.06);
}

.de-b2-cover__glow {
  background: radial-gradient(ellipse 72% 58% at 50% 88%, rgba(201, 169, 110, 0.16) 0%, transparent 68%);
  opacity: 0.85;
  transition: opacity 0.24s ease;
}

.de-b2-cover__shine {
  top: -40%;
  bottom: auto;
  height: 55%;
  width: 42%;
  left: -8%;
  background: linear-gradient(
    105deg,
    transparent 0%,
    rgba(255, 248, 230, 0.07) 42%,
    rgba(201, 169, 110, 0.22) 50%,
    rgba(255, 248, 230, 0.05) 58%,
    transparent 100%
  );
  animation: de-b2-cover-foil-shine 5.6s ease-in-out infinite;
}

.de-b2-cover--featured {
  border-color: rgba(201, 169, 110, 0.42);
}

.de-b2-cover--default {
  border-color: rgba(201, 169, 110, 0.16);
}

/* Adaptive composition tiers (PassportCoverCard density helper) */
.de-b2-cover.de-b2-cover--sparse {
  --de-b2-cover-emblem-min: 112px;
  --de-b2-cover-emblem-max: 138px;
  --de-b2-cover-emblem-fluid: 47cqw;
  --de-b2-cover-emblem-fallback-scale: 1.82;
  --de-b2-cover-center-offset: 6px;
  --de-b2-cover-center-gap: 4px;
  --de-b2-cover-stage-justify: center;
  --de-b2-cover-feature-flex: 1 1 auto;
  --de-b2-cover-stage-padding-bottom: 0;
}

.de-b2-cover.de-b2-cover--medium {
  --de-b2-cover-emblem-min: 96px;
  --de-b2-cover-emblem-max: 118px;
  --de-b2-cover-emblem-fluid: 40cqw;
  --de-b2-cover-emblem-fallback-scale: 1.55;
  --de-b2-cover-center-offset: 4px;
  --de-b2-cover-center-gap: 2px;
  --de-b2-cover-stage-justify: center;
  --de-b2-cover-feature-flex: 0 1 auto;
  --de-b2-cover-stage-padding-bottom: 0;
}

.de-b2-cover.de-b2-cover--dense {
  --de-b2-cover-emblem-min: 69px;
  --de-b2-cover-emblem-max: 84px;
  --de-b2-cover-emblem-fluid: 29cqw;
  --de-b2-cover-emblem-fallback-scale: 1.15;
  --de-b2-cover-center-offset: 8px;
  --de-b2-cover-center-gap: 0px;
  --de-b2-cover-stage-justify: flex-end;
  --de-b2-cover-feature-flex: 0 0 auto;
  --de-b2-cover-stage-padding-bottom: 2px;
}

.de-b2-cover.de-b2-cover--dense .de-b2-cover__holder {
  gap: 2px;
}

.de-b2-cover.de-b2-cover--sparse .de-b2-cover__service-teaser {
  top: calc(100% + 8px);
}

.de-b2-cover.de-b2-cover--medium .de-b2-cover__service-teaser {
  top: calc(100% + 7px);
}

.de-b2-cover.de-b2-cover--dense .de-b2-cover__service-teaser {
  top: calc(100% + 9px);
  flex-direction: column;
  flex-wrap: nowrap;
  align-items: stretch;
  gap: 3px;
  max-width: 100%;
  overflow: visible;
}

.de-b2-cover.de-b2-cover--dense .de-b2-cover__service-teaser .de-b2-cover__credential--service {
  max-width: 100%;
  align-self: center;
}

.de-b2-cover.de-b2-cover--dense
  .de-b2-cover__service-teaser
  .de-b2-cover__credential--service
  .de-b2-cover__credential-id {
  overflow: visible;
  text-overflow: clip;
}

.de-b2-cover__featured-bar {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 2px;
  background: linear-gradient(90deg, transparent, #c9a96e, transparent);
  z-index: 3;
  pointer-events: none;
}

.de-b2-cover:hover,
.de-b2-cover:focus-visible {
  transform: translateY(-4px) rotateX(1.2deg);
  border-color: rgba(201, 169, 110, 0.52);
  outline: none;
}

.de-b2-directory-stage--open .de-b2-cover-slot--selected .de-b2-cover:hover,
.de-b2-directory-stage--open .de-b2-cover-slot--selected .de-b2-cover:focus-visible {
  transform: translateY(-2px) rotateX(0.6deg);
}

.de-b2-directory-stage--open .de-b2-cover-slot--peer .de-b2-cover:hover,
.de-b2-directory-stage--open .de-b2-cover-slot--peer .de-b2-cover:focus-visible {
  transform: translateY(-2px);
  border-color: rgba(201, 169, 110, 0.26);
}

.de-b2-cover:focus-visible {
  box-shadow:
    0 0 0 2px rgba(7, 7, 12, 0.95),
    0 0 0 4px rgba(201, 169, 110, 0.72),
    0 0 28px rgba(201, 169, 110, 0.18),
    8px 12px 44px rgba(0, 0, 0, 0.78);
}

.de-b2-cover:hover .de-b2-cover__glow,
.de-b2-cover:focus-visible .de-b2-cover__glow {
  opacity: 1;
}

.de-b2-cover:hover .de-b2-cover__body,
.de-b2-cover:focus-visible .de-b2-cover__body {
  transform: translateZ(10px) translateY(-1px);
}

.de-b2-cover__spine {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 11px;
  z-index: 2;
  background: linear-gradient(
    to right,
    rgba(201, 169, 110, 0.5),
    rgba(201, 169, 110, 0.14) 55%,
    transparent
  );
  border-right: 1px solid rgba(201, 169, 110, 0.18);
  box-shadow: inset -2px 0 6px rgba(0, 0, 0, 0.28);
  pointer-events: none;
}

.de-b2-cover__body {
  position: relative;
  z-index: 1;
  flex: 1;
  min-width: 0;
  min-height: 0;
  padding: var(--de-b2-cover-inner);
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 5px;
  transition: transform 0.24s ease;
}

.de-b2-cover__identity {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  width: 100%;
  min-width: 0;
  flex-shrink: 0;
}

.de-b2-cover__holder {
  position: relative;
  width: 100%;
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  flex-shrink: 0;
}

.de-b2-cover__center-stage {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  align-self: stretch;
  justify-content: var(--de-b2-cover-stage-justify, center);
  width: 100%;
  max-width: 100%;
  min-width: 0;
  min-height: 0;
  margin-top: calc(var(--de-b2-cover-center-gap) + var(--de-b2-cover-center-offset));
  padding-bottom: var(--de-b2-cover-stage-padding-bottom, 0);
  gap: 0;
  box-sizing: border-box;
}

.de-b2-cover__feature-zone {
  flex: var(--de-b2-cover-feature-flex, 0 1 auto);
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  max-width: 100%;
  min-height: var(--de-b2-cover-emblem-size);
  min-width: 0;
  margin-inline: auto;
  padding: 4px 0;
  pointer-events: none;
  box-sizing: border-box;
}

/* Reserved for Passport Voice — set --de-b2-cover-voice-reserve when teaser ships */
.de-b2-cover__voice-reserve {
  flex: 0 0 auto;
  width: min(100%, calc(var(--de-b2-cover-emblem-size) + 1.5rem));
  min-height: var(--de-b2-cover-voice-reserve);
  max-height: var(--de-b2-cover-voice-reserve);
  overflow: hidden;
  pointer-events: none;
}

.de-b2-cover__feature-placeholder {
  width: var(--de-b2-cover-emblem-size);
  height: var(--de-b2-cover-emblem-size);
  flex-shrink: 0;
  border-radius: 50%;
  border: 1px dashed rgba(201, 169, 110, 0.22);
  background:
    radial-gradient(
      ellipse 72% 68% at 50% 38%,
      rgba(201, 169, 110, 0.1) 0%,
      transparent 72%
    ),
    rgba(0, 0, 0, 0.12);
  box-shadow:
    inset 0 1px 0 rgba(255, 248, 230, 0.05),
    inset 0 -6px 12px rgba(0, 0, 0, 0.18);
  opacity: 0.62;
}

.de-b2-cover__feature-image {
  width: var(--de-b2-cover-emblem-size);
  height: var(--de-b2-cover-emblem-size);
  flex-shrink: 0;
  border-radius: 50%;
  display: block;
  box-sizing: border-box;
}

.de-b2-cover__feature-image--member {
  object-fit: cover;
  object-position: center;
}

.de-b2-cover__feature-image--fallback {
  /* Premium seal — ~97% fill + scale within fixed feature circle (no layout shift) */
  object-fit: contain;
  object-position: center;
  padding: 0;
  background: transparent;
  border-radius: 50%;
  box-shadow: none;
  transform: scale(var(--de-b2-cover-emblem-fallback-scale));
  transform-origin: center;
}

.de-b2-cover__brand {
  font-size: 6px;
  letter-spacing: 0.24em;
  color: rgba(201, 169, 110, 0.48);
  text-transform: uppercase;
  text-shadow:
    0 1px 0 rgba(0, 0, 0, 0.55),
    0 -1px 0 rgba(255, 248, 230, 0.06);
}

.de-b2-cover__title {
  font-family: var(--de-b2-serif);
  font-size: 11px;
  font-style: italic;
  color: rgba(248, 244, 236, 0.72);
  line-height: 1.2;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  text-shadow:
    0 1px 0 rgba(0, 0, 0, 0.5),
    0 -1px 0 rgba(255, 248, 230, 0.04);
}

.de-b2-cover__name {
  font-family: var(--de-b2-serif);
  font-size: 19px;
  font-weight: 400;
  color: var(--de-b2-ink);
  line-height: 1.15;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.42);
}

.de-b2-cover__meta {
  font-size: 10px;
  color: var(--de-b2-muted);
  line-height: 1.35;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.de-b2-cover__meta--brand {
  color: rgba(201, 169, 110, 0.58);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  font-size: 9px;
}

.de-b2-cover__meta--tagline {
  align-self: stretch;
  width: 100%;
  max-width: min(100%, 13.25rem);
  margin-inline: auto;
  font-style: italic;
  color: rgba(240, 237, 228, 0.52);
  line-height: 1.48;
  letter-spacing: 0.012em;
  text-align: center;
  white-space: normal;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  overflow: hidden;
  text-overflow: ellipsis;
  word-break: break-word;
  overflow-wrap: anywhere;
}

.de-b2-cover__service-teaser {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 5px;
  width: 100%;
  max-width: min(100%, 13.25rem);
  margin-inline: auto;
  padding: 0;
  min-width: 0;
  overflow: hidden;
  z-index: 2;
  pointer-events: none;
}

.de-b2-cover__service-teaser--single .de-b2-cover__credential--service {
  max-width: 100%;
}

/* Same box as footer Passport No. — layout/spacing only in holder */
.de-b2-cover__service-teaser .de-b2-cover__credential--service {
  flex: 0 1 auto;
  min-width: 0;
  max-width: calc(50% - 3px);
  pointer-events: auto;
  border-color: var(--de-color-passport-gold-signal-border);
  background: rgba(201, 169, 110, 0.08);
  box-shadow: 0 0 5px var(--de-color-passport-gold-signal-glow-soft);
}

.de-b2-cover__service-teaser .de-b2-cover__credential--service .de-b2-cover__credential-id {
  color: var(--de-color-passport-gold-signal);
}

.de-b2-cover__service-teaser .de-b2-cover__credential--service:hover,
.de-b2-cover__service-teaser .de-b2-cover__credential--service:focus-visible {
  border-color: var(--de-color-passport-gold-signal);
  background: rgba(201, 169, 110, 0.14);
  box-shadow: 0 0 6px var(--de-color-passport-gold-signal-glow);
}

.de-b2-cover__credential {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1px;
  max-width: 100%;
  flex-shrink: 0;
  padding: 3px 8px;
  border-radius: 2px;
  border: 1px solid rgba(201, 169, 110, 0.14);
  background: rgba(0, 0, 0, 0.22);
}

.de-b2-cover__credential-lbl {
  font-size: 6px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(201, 169, 110, 0.42);
  font-family: "Courier New", monospace;
}

.de-b2-cover__credential-id {
  font-size: 8px;
  letter-spacing: 0.08em;
  color: rgba(240, 237, 228, 0.52);
  font-family: "Courier New", monospace;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.de-b2-cover__foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  width: 100%;
  min-width: 0;
  margin-top: auto;
  padding-top: 4px;
  padding-right: 1px;
  font-size: 9px;
  color: rgba(240, 237, 228, 0.38);
  overflow: visible;
}

.de-b2-cover__score-ring {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: visible;
  padding: 3px;
  margin: -3px -2px -3px 0;
  box-sizing: content-box;
}

.de-b2-cover__score-ring svg {
  display: block;
  overflow: visible;
}

.de-b2-cover__foot-left {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  gap: 3px;
  min-width: 0;
  flex: 1 1 auto;
}

.de-b2-cover__foot-traffic {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  max-width: 100%;
  min-width: 0;
  margin-top: 3px;
  line-height: 1.35;
}

.de-b2-cover__status-dot {
  flex-shrink: 0;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--de-color-passport-status-closed);
  box-shadow: 0 0 5px var(--de-color-passport-status-closed-glow);
}

.de-b2-cover__foot-traffic--open .de-b2-cover__status-dot {
  background: var(--de-color-passport-status-open);
  box-shadow: 0 0 5px var(--de-color-passport-status-open-glow);
}

.de-b2-cover__foot-traffic-label {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.de-b2-cover__foot-left .de-b2-cover__credential {
  align-self: flex-start;
}

/* Homepage spotlight layout (not in Passport app) */
.de-hp-passport-spotlight { display:flex; flex-direction:column; gap:14px; }
.de-hp-passport-spotlight__tabs { display:flex; flex-wrap:wrap; gap:8px; }
.de-hp-passport-spotlight__tab { font-family:'DM Mono',monospace; font-size:9px; letter-spacing:.1em; text-transform:uppercase; padding:8px 12px; border-radius:4px; border:1px solid rgba(255,255,255,.12); background:rgba(255,255,255,.03); color:rgba(250,248,244,.45); cursor:pointer; }
.de-hp-passport-spotlight__tab.is-active { border-color:rgba(201,168,76,.45); background:rgba(201,168,76,.12); color:#e8d49a; }
.de-hp-passport-spotlight__panel { display:none; justify-content:center; }
.de-hp-passport-spotlight__panel.is-active { display:flex; }
.de-hp-passport-spotlight .de-b2-cover { max-width:280px; cursor:default; }
.de-hp-passport-spotlight a.de-b2-cover { cursor:pointer; text-decoration:none; color:inherit; }