.achievement-card {
  position: relative;
  overflow: hidden;
  width: min(100%, 540px);
  aspect-ratio: 1080 / 1350;
  padding: clamp(24px, 5vw, 42px);
  border: 1px solid rgba(255,255,255,.15);
  border-radius: 38px;
  background:
    linear-gradient(155deg, rgba(255,255,255,.12), rgba(255,255,255,.035) 38%, rgba(255,255,255,.075)),
    radial-gradient(circle at 50% 8%, rgba(0,229,255,.24), transparent 34%),
    radial-gradient(circle at 10% 86%, rgba(47,140,255,.28), transparent 30%),
    linear-gradient(135deg, #07111f, #03050b);
  box-shadow:
    0 34px 100px rgba(0,0,0,.62),
    inset 0 0 0 1px rgba(255,255,255,.05);
}

.achievement-card::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(rgba(255,255,255,.045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.045) 1px, transparent 1px);
  background-size: 42px 42px;
  mask-image: radial-gradient(circle at 50% 36%, black, transparent 72%);
  opacity: .28;
}

.achievement-card::after {
  content: "";
  position: absolute;
  inset: 18px;
  border: 1px solid rgba(255,255,255,.1);
  border-radius: 30px;
  pointer-events: none;
}

.card-orbit {
  position: absolute;
  border: 1px solid rgba(0,229,255,.16);
  border-radius: 50%;
}

.card-orbit--one {
  width: 620px;
  height: 620px;
  top: -220px;
  left: 50%;
  transform: translateX(-50%);
}

.card-orbit--two {
  width: 420px;
  height: 420px;
  right: -170px;
  bottom: 170px;
}

.card-header,
.card-hero,
.card-stats,
.card-footer {
  position: relative;
  z-index: 2;
}

.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 18px;
}

.card-logo {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  min-width: 118px;
  height: 42px;
  justify-content: center;
  border: 1px solid rgba(0,229,255,.24);
  border-radius: 14px;
  background: rgba(0,229,255,.07);
  color: #f6f8ff;
  font-weight: 950;
  letter-spacing: -.04em;
}

.card-logo strong {
  color: var(--gold);
}

.card-header__label {
  display: block;
  color: var(--muted);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: .13em;
}

.card-header strong {
  display: block;
  margin-top: 3px;
  font-size: 13px;
}

.card-hero {
  display: grid;
  justify-items: center;
  text-align: center;
  padding-top: clamp(44px, 8vw, 76px);
}

.card-icon {
  width: clamp(92px, 18vw, 128px);
  height: clamp(92px, 18vw, 128px);
  display: grid;
  place-items: center;
  border: 1px solid rgba(0,229,255,.34);
  border-radius: 34px;
  background:
    radial-gradient(circle at 50% 30%, rgba(0,229,255,.22), transparent 62%),
    rgba(255,255,255,.06);
  box-shadow:
    0 0 52px rgba(0,229,255,.24),
    inset 0 0 28px rgba(255,255,255,.05);
}

.card-icon svg {
  width: 72%;
  height: 72%;
  fill: none;
  stroke: var(--cyan);
  stroke-width: 5;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.card-icon svg circle {
  stroke: rgba(245,197,66,.95);
}

.card-kicker {
  margin-top: 30px;
  color: var(--cyan);
  font-size: clamp(12px, 2vw, 15px);
  font-weight: 950;
  text-transform: uppercase;
  letter-spacing: .22em;
}

.achievement-card h1 {
  max-width: 92%;
  margin: 13px 0 0;
  font-size: clamp(35px, 7vw, 64px);
  line-height: .95;
  letter-spacing: -.065em;
}

.card-callsign {
  margin-top: 18px;
  font-size: clamp(46px, 10vw, 84px);
  line-height: .9;
  color: var(--gold);
  font-weight: 1000;
  letter-spacing: -.075em;
  text-shadow: 0 0 34px rgba(245,197,66,.2);
}

.card-main-value {
  margin-top: 20px;
  padding: 13px 20px;
  border: 1px solid rgba(255,255,255,.13);
  border-radius: 999px;
  background: rgba(255,255,255,.065);
  color: var(--text);
  font-size: clamp(19px, 4vw, 30px);
  font-weight: 950;
}

.card-subtitle {
  max-width: 78%;
  margin: 22px auto 0;
  color: var(--muted);
  font-size: clamp(15px, 2.3vw, 20px);
  line-height: 1.5;
}

.card-stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 11px;
  margin-top: clamp(44px, 8vw, 72px);
}

.card-stats div {
  min-height: 82px;
  display: grid;
  align-content: center;
  gap: 7px;
  padding: 13px;
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 20px;
  background: rgba(0,0,0,.18);
}

.card-stats span {
  color: var(--muted);
  font-size: 10px;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: .12em;
}

.card-stats strong {
  color: var(--text);
  font-size: clamp(13px, 2.2vw, 17px);
}

.card-footer {
  position: absolute;
  left: clamp(24px, 5vw, 42px);
  right: clamp(24px, 5vw, 42px);
  bottom: clamp(24px, 5vw, 42px);
  display: flex;
  justify-content: space-between;
  gap: 18px;
  color: var(--muted);
  font-size: clamp(10px, 2vw, 13px);
}

.card-footer strong {
  color: var(--text);
  letter-spacing: .12em;
}

@media (max-width: 620px) {
  .achievement-card {
    border-radius: 28px;
  }

  .card-stats {
    gap: 7px;
  }

  .card-stats div {
    padding: 10px 8px;
  }

  .card-subtitle {
    max-width: 92%;
  }

  .card-footer {
    flex-direction: column;
    gap: 5px;
  }
}

/* Step 2 visual fix: prevent bottom footer overlap */
.card-hero {
  padding-top: clamp(34px, 6vw, 54px);
}

.card-main-value {
  margin-top: 16px;
}

.card-subtitle {
  margin-top: 16px;
}

.card-stats {
  margin-top: clamp(26px, 5vw, 42px);
}

.card-footer {
  bottom: clamp(18px, 4vw, 30px);
  padding-top: 10px;
  border-top: 1px solid rgba(255,255,255,.08);
}

@media (min-width: 981px) {
  .achievement-card {
    width: min(100%, 500px);
  }
}

@media (max-width: 620px) {
  .card-hero {
    padding-top: 30px;
  }

  .card-stats {
    margin-top: 24px;
  }
}

/* Strong Step 2 layout fix: keep all card content inside clean vertical flow */
.achievement-card {
  display: flex;
  flex-direction: column;
  padding: 28px;
}

.card-header {
  flex: 0 0 auto;
}

.card-hero {
  flex: 0 0 auto;
  padding-top: 34px;
}

.card-icon {
  width: 94px;
  height: 94px;
  border-radius: 28px;
}

.card-kicker {
  margin-top: 22px;
  font-size: 12px;
  letter-spacing: .2em;
}

.achievement-card h1 {
  margin-top: 10px;
  font-size: clamp(34px, 5.8vw, 50px);
  line-height: .96;
}

.card-callsign {
  margin-top: 14px;
  font-size: clamp(48px, 8vw, 68px);
}

.card-main-value {
  margin-top: 14px;
  padding: 11px 18px;
  font-size: clamp(20px, 3.4vw, 28px);
}

.card-subtitle {
  max-width: 82%;
  margin-top: 14px;
  font-size: clamp(13px, 2vw, 17px);
}

.card-stats {
  flex: 0 0 auto;
  margin-top: 24px;
}

.card-stats div {
  min-height: 64px;
  padding: 10px;
}

.card-footer {
  position: relative;
  left: auto;
  right: auto;
  bottom: auto;
  flex: 0 0 auto;
  margin-top: auto;
  padding-top: 14px;
  border-top: 1px solid rgba(255,255,255,.08);
}

@media (min-width: 981px) {
  .achievement-card {
    width: min(100%, 500px);
  }
}

@media (max-width: 620px) {
  .achievement-card {
    padding: 22px;
  }

  .card-hero {
    padding-top: 26px;
  }

  .card-icon {
    width: 82px;
    height: 82px;
  }

  .achievement-card h1 {
    font-size: 36px;
  }

  .card-callsign {
    font-size: 50px;
  }

  .card-main-value {
    font-size: 20px;
  }

  .card-stats {
    margin-top: 18px;
  }
}

/* Step 2 final fit fix: make the whole 1080x1350 card visible in preview */
.preview-stage {
  overflow: visible;
  align-items: center;
}

.achievement-card {
  width: min(100%, 460px);
  padding: 24px;
  border-radius: 30px;
}

.achievement-card::after {
  inset: 16px;
  border-radius: 24px;
}

.card-header {
  align-items: flex-start;
}

.card-logo {
  min-width: 108px;
  height: 38px;
  border-radius: 13px;
}

.card-header__label {
  font-size: 10px;
}

.card-header strong {
  font-size: 12px;
}

.card-hero {
  padding-top: 26px;
}

.card-icon {
  width: 82px;
  height: 82px;
  border-radius: 24px;
}

.card-kicker {
  margin-top: 18px;
  font-size: 11px;
  letter-spacing: .18em;
}

.achievement-card h1 {
  margin-top: 8px;
  font-size: 42px;
  line-height: .96;
}

.card-callsign {
  margin-top: 10px;
  font-size: 58px;
  line-height: .9;
}

.card-main-value {
  margin-top: 12px;
  padding: 9px 18px;
  font-size: 24px;
}

.card-subtitle {
  max-width: 86%;
  margin-top: 13px;
  font-size: 15px;
  line-height: 1.35;
}

.card-stats {
  margin-top: 20px;
  gap: 9px;
}

.card-stats div {
  min-height: 58px;
  padding: 9px;
  border-radius: 16px;
}

.card-stats span {
  font-size: 9px;
}

.card-stats strong {
  font-size: 13px;
}

.card-footer {
  margin-top: 18px;
  padding-top: 11px;
  font-size: 11px;
}

@media (max-width: 620px) {
  .achievement-card {
    width: min(100%, 420px);
    padding: 20px;
  }

  .achievement-card h1 {
    font-size: 34px;
  }

  .card-callsign {
    font-size: 46px;
  }

  .card-main-value {
    font-size: 19px;
  }

  .card-subtitle {
    font-size: 13px;
  }

  .card-stats {
    grid-template-columns: 1fr;
  }
}

/* Step 3 theme variants */
.achievement-card.theme-dx {
  background:
    linear-gradient(155deg, rgba(255,255,255,.12), rgba(255,255,255,.035) 38%, rgba(255,255,255,.075)),
    radial-gradient(circle at 50% 8%, rgba(0,229,255,.2), transparent 34%),
    radial-gradient(circle at 20% 80%, rgba(245,197,66,.16), transparent 34%),
    linear-gradient(135deg, #06121c, #03050b);
}

.achievement-card.theme-gold .card-callsign,
.achievement-card.theme-gold .card-logo strong {
  color: var(--gold);
}

.achievement-card.theme-gold {
  background:
    linear-gradient(155deg, rgba(255,255,255,.12), rgba(255,255,255,.035) 38%, rgba(255,255,255,.075)),
    radial-gradient(circle at 50% 8%, rgba(245,197,66,.22), transparent 34%),
    radial-gradient(circle at 10% 86%, rgba(47,140,255,.14), transparent 30%),
    linear-gradient(135deg, #120f05, #03050b);
}

.achievement-card.theme-supporter {
  background:
    linear-gradient(155deg, rgba(255,255,255,.12), rgba(255,255,255,.035) 38%, rgba(255,255,255,.075)),
    radial-gradient(circle at 50% 8%, rgba(245,197,66,.19), transparent 34%),
    radial-gradient(circle at 10% 86%, rgba(0,229,255,.12), transparent 30%),
    linear-gradient(135deg, #111016, #03050b);
}

.achievement-card.theme-platinum .card-callsign,
.achievement-card.theme-platinum .card-logo strong {
  color: var(--platinum);
}

.achievement-card.theme-platinum {
  background:
    linear-gradient(155deg, rgba(255,255,255,.14), rgba(255,255,255,.04) 38%, rgba(255,255,255,.09)),
    radial-gradient(circle at 50% 8%, rgba(216,232,255,.24), transparent 34%),
    radial-gradient(circle at 10% 86%, rgba(0,229,255,.12), transparent 30%),
    linear-gradient(135deg, #101822, #03050b);
}

.achievement-card.theme-rare .card-callsign,
.achievement-card.theme-rare .card-logo strong {
  color: #ff4f7b;
}

.achievement-card.theme-rare {
  background:
    linear-gradient(155deg, rgba(255,255,255,.12), rgba(255,255,255,.035) 38%, rgba(255,255,255,.075)),
    radial-gradient(circle at 50% 8%, rgba(255,79,123,.2), transparent 34%),
    radial-gradient(circle at 10% 86%, rgba(0,229,255,.14), transparent 30%),
    linear-gradient(135deg, #170711, #03050b);
}

/* Step 4 icon polish */
.card-icon {
  transition: border-color .2s ease, box-shadow .2s ease, background .2s ease;
}

.card-icon svg {
  display: block;
}

.achievement-card.theme-dx .card-icon {
  border-color: rgba(0,229,255,.46);
  box-shadow: 0 0 54px rgba(0,229,255,.24), inset 0 0 26px rgba(255,255,255,.05);
}

.achievement-card.theme-gold .card-icon {
  border-color: rgba(245,197,66,.5);
  box-shadow: 0 0 54px rgba(245,197,66,.2), inset 0 0 26px rgba(255,255,255,.05);
}

.achievement-card.theme-gold .card-icon svg {
  stroke: var(--gold);
}

.achievement-card.theme-supporter .card-icon {
  border-color: rgba(245,197,66,.46);
  box-shadow: 0 0 54px rgba(245,197,66,.18), inset 0 0 26px rgba(255,255,255,.05);
}

.achievement-card.theme-supporter .card-icon svg {
  stroke: var(--gold);
}

.achievement-card.theme-platinum .card-icon {
  border-color: rgba(216,232,255,.58);
  box-shadow: 0 0 58px rgba(216,232,255,.18), inset 0 0 28px rgba(255,255,255,.07);
}

.achievement-card.theme-platinum .card-icon svg {
  stroke: var(--platinum);
}

.achievement-card.theme-rare .card-icon {
  border-color: rgba(255,79,123,.55);
  box-shadow: 0 0 58px rgba(255,79,123,.2), inset 0 0 28px rgba(255,255,255,.05);
}

.achievement-card.theme-rare .card-icon svg {
  stroke: #ff4f7b;
}

.achievement-card.theme-rare .card-kicker {
  color: #ff4f7b;
}

.achievement-card.theme-platinum .card-kicker {
  color: var(--platinum);
}

.achievement-card.theme-gold .card-kicker,
.achievement-card.theme-supporter .card-kicker {
  color: var(--gold);
}

/* Step 5 export stabilization */
.achievement-card.is-exporting {
  transform: none !important;
  animation: none !important;
}

.achievement-card.is-exporting *,
.achievement-card.is-exporting *::before,
.achievement-card.is-exporting *::after {
  animation: none !important;
  transition: none !important;
}

/* Step 5 PNG export background fix
   html2canvas can render CSS masks / grid overlays strangely.
   Use a cleaner export-safe background only during PNG rendering. */
.achievement-card.is-exporting {
  background:
    radial-gradient(circle at 50% 8%, rgba(0,229,255,.22), transparent 34%),
    radial-gradient(circle at 8% 82%, rgba(47,140,255,.24), transparent 32%),
    linear-gradient(155deg, rgba(255,255,255,.105), rgba(255,255,255,.035) 42%, rgba(255,255,255,.07)),
    linear-gradient(135deg, #07111f 0%, #05070d 52%, #10131b 100%) !important;
}

.achievement-card.is-exporting::before {
  display: none !important;
}

.achievement-card.is-exporting .card-orbit {
  opacity: .55;
}

.achievement-card.is-exporting.theme-gold,
.achievement-card.is-exporting.theme-supporter {
  background:
    radial-gradient(circle at 50% 8%, rgba(245,197,66,.22), transparent 34%),
    radial-gradient(circle at 8% 82%, rgba(47,140,255,.16), transparent 32%),
    linear-gradient(155deg, rgba(255,255,255,.105), rgba(255,255,255,.035) 42%, rgba(255,255,255,.07)),
    linear-gradient(135deg, #141006 0%, #05070d 54%, #11131b 100%) !important;
}

.achievement-card.is-exporting.theme-platinum {
  background:
    radial-gradient(circle at 50% 8%, rgba(216,232,255,.24), transparent 34%),
    radial-gradient(circle at 8% 82%, rgba(0,229,255,.14), transparent 32%),
    linear-gradient(155deg, rgba(255,255,255,.13), rgba(255,255,255,.04) 42%, rgba(255,255,255,.085)),
    linear-gradient(135deg, #111a25 0%, #05070d 54%, #10131b 100%) !important;
}

.achievement-card.is-exporting.theme-rare {
  background:
    radial-gradient(circle at 50% 8%, rgba(255,79,123,.22), transparent 34%),
    radial-gradient(circle at 8% 82%, rgba(0,229,255,.14), transparent 32%),
    linear-gradient(155deg, rgba(255,255,255,.105), rgba(255,255,255,.035) 42%, rgba(255,255,255,.07)),
    linear-gradient(135deg, #170711 0%, #05070d 54%, #11131b 100%) !important;
}

.achievement-card.is-exporting.theme-dx {
  background:
    radial-gradient(circle at 50% 8%, rgba(0,229,255,.22), transparent 34%),
    radial-gradient(circle at 8% 82%, rgba(245,197,66,.13), transparent 32%),
    linear-gradient(155deg, rgba(255,255,255,.105), rgba(255,255,255,.035) 42%, rgba(255,255,255,.07)),
    linear-gradient(135deg, #06121c 0%, #05070d 54%, #10131b 100%) !important;
}

/* Ultra-clean PNG export mode
   Removes all risky gradient/mask/orbit/pseudo effects during html2canvas capture. */
.achievement-card.is-exporting {
  background: #070b13 !important;
  box-shadow: none !important;
  border: 2px solid rgba(255,255,255,.18) !important;
}

.achievement-card.is-exporting::before,
.achievement-card.is-exporting::after {
  display: none !important;
  content: none !important;
}

.achievement-card.is-exporting .card-orbit,
.achievement-card.is-exporting .card-orbit--one,
.achievement-card.is-exporting .card-orbit--two {
  display: none !important;
}

.achievement-card.is-exporting .card-header,
.achievement-card.is-exporting .card-hero,
.achievement-card.is-exporting .card-stats,
.achievement-card.is-exporting .card-footer {
  position: relative !important;
  z-index: 5 !important;
}

.achievement-card.is-exporting .card-logo,
.achievement-card.is-exporting .card-icon,
.achievement-card.is-exporting .card-main-value,
.achievement-card.is-exporting .card-stats div {
  background: rgba(255,255,255,.075) !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

.achievement-card.is-exporting.theme-activation {
  background:
    radial-gradient(circle at 50% 18%, rgba(0,229,255,.18), transparent 34%),
    linear-gradient(135deg, #081827 0%, #070b13 52%, #05070d 100%) !important;
}

.achievement-card.is-exporting.theme-dx {
  background:
    radial-gradient(circle at 50% 18%, rgba(0,229,255,.16), transparent 34%),
    linear-gradient(135deg, #071521 0%, #070b13 52%, #05070d 100%) !important;
}

.achievement-card.is-exporting.theme-gold,
.achievement-card.is-exporting.theme-supporter {
  background:
    radial-gradient(circle at 50% 18%, rgba(245,197,66,.16), transparent 34%),
    linear-gradient(135deg, #151107 0%, #070b13 52%, #05070d 100%) !important;
}

.achievement-card.is-exporting.theme-platinum {
  background:
    radial-gradient(circle at 50% 18%, rgba(216,232,255,.18), transparent 34%),
    linear-gradient(135deg, #121b26 0%, #070b13 52%, #05070d 100%) !important;
}

.achievement-card.is-exporting.theme-rare {
  background:
    radial-gradient(circle at 50% 18%, rgba(255,79,123,.18), transparent 34%),
    linear-gradient(135deg, #180812 0%, #070b13 52%, #05070d 100%) !important;
}

/* Step 6 card polish */
.achievement-card h1 {
  overflow-wrap: anywhere;
  text-wrap: balance;
}

.card-callsign,
.card-main-value {
  max-width: 100%;
  overflow-wrap: anywhere;
}

.card-subtitle {
  text-wrap: balance;
}

.card-stats strong {
  overflow-wrap: anywhere;
}

.card-footer span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.achievement-card.is-exporting .card-footer span {
  white-space: normal;
}

/* Step 7: long callsign and stats containment fix */
.card-callsign {
  width: 100%;
  max-width: 100%;
  padding-inline: 4px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: clip;
  font-size: clamp(42px, 7.2vw, 58px);
  line-height: .92;
}

.card-callsign.callsign-long {
  font-size: clamp(34px, 5.8vw, 48px);
  letter-spacing: -.055em;
}

.card-callsign.callsign-xl {
  font-size: clamp(28px, 4.7vw, 38px);
  letter-spacing: -.045em;
}

.card-callsign.callsign-xxl {
  font-size: clamp(23px, 3.8vw, 31px);
  letter-spacing: -.035em;
}

.card-stats {
  width: 100%;
  max-width: calc(100% - 18px);
  margin-left: auto;
  margin-right: auto;
}

.card-stats div {
  min-width: 0;
  overflow: hidden;
}

.card-stats strong,
.card-stats span {
  display: block;
  max-width: 100%;
}

.card-stats strong {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.card-footer {
  width: 100%;
  max-width: calc(100% - 18px);
  margin-left: auto;
  margin-right: auto;
}

@media (max-width: 620px) {
  .card-callsign {
    font-size: 42px;
  }

  .card-callsign.callsign-long {
    font-size: 34px;
  }

  .card-callsign.callsign-xl {
    font-size: 27px;
  }

  .card-callsign.callsign-xxl {
    font-size: 22px;
  }
}

/* Export mode: keep long callsigns on one clean line */
.achievement-card.is-exporting .card-callsign {
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: clip !important;
}

.achievement-card.is-exporting .card-stats {
  max-width: calc(100% - 22px) !important;
}

/* Step 8: stronger export-only border/frame */
.achievement-card.is-exporting {
  border: 3px solid rgba(255,255,255,.18) !important;
  border-radius: 34px !important;
  box-shadow: none !important;
  position: relative;
  overflow: hidden;
}

.achievement-card.is-exporting::after {
  content: "";
  display: block !important;
  position: absolute;
  inset: 18px;
  border: 1px solid rgba(255,255,255,.10);
  border-radius: 24px;
  pointer-events: none;
}

.achievement-card.is-exporting .card-stats,
.achievement-card.is-exporting .card-footer {
  position: relative;
  z-index: 3;
}

.achievement-card.is-exporting .card-footer {
  border-top: 1px solid rgba(255,255,255,.08);
  padding-top: 14px;
}

/* Step 8 correction: export PNG inner frame only, no stronger outer border */
.achievement-card.is-exporting {
  border: 2px solid rgba(255,255,255,.18) !important;
  border-radius: 34px !important;
  box-shadow: none !important;
  position: relative;
  overflow: hidden;
}

.achievement-card.is-exporting::after {
  content: "";
  display: block !important;
  position: absolute;
  inset: 22px;
  border: 1px solid rgba(255,255,255,.11);
  border-radius: 24px;
  pointer-events: none;
  z-index: 2;
}

.achievement-card.is-exporting .card-header,
.achievement-card.is-exporting .card-hero,
.achievement-card.is-exporting .card-stats,
.achievement-card.is-exporting .card-footer {
  position: relative !important;
  z-index: 5 !important;
}

/* Step 8 final: real export-only inner frame */
.export-inner-frame {
  display: none;
}

.achievement-card.is-exporting {
  border: 2px solid rgba(255,255,255,.18) !important;
  position: relative !important;
  overflow: hidden !important;
}

.achievement-card.is-exporting::after {
  display: none !important;
  content: none !important;
}

.achievement-card.is-exporting .export-inner-frame {
  display: block !important;
  position: absolute !important;
  inset: 36px !important;
  border: 2px solid rgba(255,255,255,.14) !important;
  border-radius: 28px !important;
  pointer-events: none !important;
  z-index: 4 !important;
}

.achievement-card.is-exporting .card-header,
.achievement-card.is-exporting .card-hero,
.achievement-card.is-exporting .card-stats,
.achievement-card.is-exporting .card-footer {
  position: relative !important;
  z-index: 6 !important;
}

/* Step 8 final: real export-only inner frame */
.export-inner-frame {
  display: none;
}

.achievement-card.is-exporting {
  border: 2px solid rgba(255,255,255,.18) !important;
  position: relative !important;
  overflow: hidden !important;
}

.achievement-card.is-exporting::after {
  display: none !important;
  content: none !important;
}

.achievement-card.is-exporting .export-inner-frame {
  display: block !important;
  position: absolute !important;
  inset: 36px !important;
  border: 2px solid rgba(255,255,255,.14) !important;
  border-radius: 28px !important;
  pointer-events: none !important;
  z-index: 4 !important;
}

.achievement-card.is-exporting .card-header,
.achievement-card.is-exporting .card-hero,
.achievement-card.is-exporting .card-stats,
.achievement-card.is-exporting .card-footer {
  position: relative !important;
  z-index: 6 !important;
}

/* Step 8 correction: thin export inner frame, positioned away from logo/stats */
.achievement-card.is-exporting .export-inner-frame {
  display: block !important;
  position: absolute !important;

  /* keep frame away from logo/header and stat boxes */
  top: 165px !important;
  left: 48px !important;
  right: 48px !important;
  bottom: 145px !important;

  border: 1px solid rgba(255,255,255,.075) !important;
  border-radius: 24px !important;
  pointer-events: none !important;
  z-index: 1 !important;
  opacity: .75 !important;
}

/* keep all real content above frame */
.achievement-card.is-exporting .card-header,
.achievement-card.is-exporting .card-hero,
.achievement-card.is-exporting .card-stats,
.achievement-card.is-exporting .card-footer {
  position: relative !important;
  z-index: 6 !important;
}

/* make stat boxes hide anything behind them */
.achievement-card.is-exporting .card-stats div,
.achievement-card.is-exporting .card-logo,
.achievement-card.is-exporting .card-main-value {
  background: rgba(20,24,32,.94) !important;
}

/* Step 8 final correction:
   Export inner frame should match the web preview:
   full card inner frame, subtle, close to edge, no stronger outer border. */
.achievement-card.is-exporting .export-inner-frame {
  display: block !important;
  position: absolute !important;

  top: 18px !important;
  right: 18px !important;
  bottom: 18px !important;
  left: 18px !important;

  border: 1px solid rgba(255,255,255,.10) !important;
  border-radius: 24px !important;
  opacity: 1 !important;

  pointer-events: none !important;
  z-index: 1 !important;
}

/* Keep all card content above the inner frame */
.achievement-card.is-exporting .card-header,
.achievement-card.is-exporting .card-hero,
.achievement-card.is-exporting .card-stats,
.achievement-card.is-exporting .card-footer {
  position: relative !important;
  z-index: 6 !important;
}

/* Make these elements cover the line behind them, like the web preview */
.achievement-card.is-exporting .card-logo,
.achievement-card.is-exporting .card-icon,
.achievement-card.is-exporting .card-main-value,
.achievement-card.is-exporting .card-stats div {
  background: rgba(18,23,32,.96) !important;
}

/* Do not strengthen the outer border */
.achievement-card.is-exporting {
  border: 2px solid rgba(255,255,255,.18) !important;
}

/* Step 9: real LOG11DX logo badge */
.card-logo--image {
  min-width: 122px;
  width: 122px;
  height: 58px;
  padding: 4px;
  overflow: hidden;
  border-radius: 18px;
  background:
    radial-gradient(circle at 50% 35%, rgba(0,229,255,.12), transparent 58%),
    rgba(4,8,15,.72);
  border: 1px solid rgba(0,229,255,.28);
}

.card-logo--image img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: contain;
  border-radius: 14px;
}

/* Remove old text-logo color behavior when image logo is used */
.card-logo--image strong,
.card-logo--image span {
  display: none;
}

/* Export-safe logo rendering */
.achievement-card.is-exporting .card-logo--image {
  background: rgba(8,13,22,.96) !important;
  border: 1px solid rgba(0,229,255,.32) !important;
  box-shadow: none !important;
}

.achievement-card.is-exporting .card-logo--image img {
  object-fit: contain !important;
}

/* Step 9 correction: real logo without badge/frame/background */
.card-logo--image {
  min-width: 118px !important;
  width: 118px !important;
  height: 64px !important;
  padding: 0 !important;
  overflow: visible !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

.card-logo--image img {
  width: 100% !important;
  height: 100% !important;
  display: block !important;
  object-fit: contain !important;
  border-radius: 0 !important;
  background: transparent !important;
}

/* Export mode: keep logo clean */
.achievement-card.is-exporting .card-logo--image {
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
}

.achievement-card.is-exporting .card-logo--image img {
  object-fit: contain !important;
  background: transparent !important;
}