#join-modal.peakpy-invite {
  padding: 20px !important;
  background: rgba(2, 4, 9, .82) !important;
  backdrop-filter: blur(18px) saturate(.8) !important;
  -webkit-backdrop-filter: blur(18px) saturate(.8) !important;
}

#join-modal.peakpy-invite article {
  width: min(760px, 100%) !important;
  max-height: calc(100dvh - 40px) !important;
  overflow: hidden !important;
  padding: 0 !important;
  border: 1px solid #526078 !important;
  border-radius: 24px !important;
  background: linear-gradient(145deg, #171d2b 0%, #0c111a 72%) !important;
  box-shadow: 0 30px 100px #000d, inset 0 1px #ffffff12 !important;
  text-align: left !important;
}

.peakpy-invite-shell { display: grid; grid-template-columns: .8fr 1.2fr; min-height: 480px; }
.peakpy-invite-visual { position: relative; display: grid; place-items: center; overflow: hidden; padding: 70px 28px 48px; background: radial-gradient(circle at 45% 35%, #6d52ff42, transparent 42%), linear-gradient(155deg, #161d2b, #080c13); }
.peakpy-invite-visual::before,.peakpy-invite-visual::after { position: absolute; border: 1px solid #7d8aff35; border-radius: 50%; content: ""; animation: peakPulse 4s ease-in-out infinite; }
.peakpy-invite-visual::before { width: 250px; height: 250px; }
.peakpy-invite-visual::after { width: 190px; height: 190px; animation-delay: -.8s; }
.peakpy-invite-visual img { position: relative !important; z-index: 2 !important; width: min(240px, 90%) !important; margin: 0 !important; filter: drop-shadow(0 22px 24px #000b) !important; animation: peakFloat 3.4s ease-in-out infinite; }
.peakpy-invite-brand { position: absolute; z-index: 4; top: 24px; left: 24px; display: flex; gap: 9px; align-items: center; color: #f4f6fb; font: 700 15px "Oxanium",sans-serif; letter-spacing: .1em; }
.peakpy-invite-brand img { width: 29px !important; height: 29px !important; margin: 0 !important; object-fit: contain; animation: none !important; filter: none !important; }
.peakpy-invite-brand span span { color: #aeb7ff; }
.peakpy-invite-content { position: relative; display: flex; flex-direction: column; min-width: 0; padding: 50px 42px 34px; }
.peakpy-invite-content .close { top: 14px !important; right: 14px !important; z-index: 8 !important; display: grid !important; place-items: center !important; width: 34px !important; height: 34px !important; padding: 0 !important; border: 1px solid #465168 !important; border-radius: 50% !important; background: #111722 !important; color: #dce3f0 !important; font: 500 22px/1 Arial,sans-serif !important; }
.peakpy-invite-eyebrow { margin: 0 0 14px; color: #8f9cff; font: 700 10px "Oxanium", sans-serif; letter-spacing: .17em; }
.peakpy-invite-stages { position: relative; min-height: 244px; }
.peakpy-invite-stage { position: absolute; inset: 0; opacity: 0; visibility: hidden; transition: opacity .65s ease, visibility .65s ease; }
.peakpy-invite-stage.is-active { opacity: 1; visibility: visible; }
.peakpy-invite-step { display: inline-grid; place-items: center; width: 38px; height: 38px; margin-bottom: 17px; border: 1px solid #7482ff; border-radius: 12px; background: #5865f220; color: #aab2ff; font: 700 12px "Oxanium", sans-serif; }
.peakpy-invite-stage h2 { max-width: 430px !important; margin: 0 0 16px !important; color: #f4f6fb !important; font: 600 clamp(31px, 4vw, 48px)/1.02 "Oxanium",sans-serif !important; letter-spacing: -.055em !important; text-align: left !important; }
.peakpy-invite-stage h2 em { color: #65dca1 !important; font-style: normal; }
.peakpy-invite-stage p { max-width: 430px; margin: 0; color: #aeb8c9; font: 500 15px/1.55 "DM Sans",sans-serif; }
.peakpy-invite-progress { display: flex; gap: 8px; margin: auto 0 22px; }
.peakpy-invite-progress span { width: 9px; height: 9px; border-radius: 999px; background: #424c60; transition: width .35s ease, background .35s ease; }
.peakpy-invite-progress span.is-active { width: 30px; background: #65dca1; }
.peakpy-invite-actions { display: block; min-height: 54px; }
#join-modal .peakpy-invite-join { display: inline-flex !important; width: 100% !important; min-height: 68px !important; margin: 0 !important; padding: 0 22px !important; gap: 13px !important; border: 1px solid #8e97ff !important; border-radius: 14px !important; background: linear-gradient(135deg,#5865f2,#4752c4) !important; box-shadow: 0 13px 30px #20287aaa, inset 0 1px #ffffff2b !important; color: #fff !important; font: 700 14px/1.2 "Oxanium",sans-serif !important; text-align: center !important; }
#join-modal .peakpy-invite-join:hover,#join-modal .peakpy-invite-join:focus-visible { background: linear-gradient(135deg,#6975ff,#5865f2) !important; box-shadow: 0 16px 34px #20287acc, inset 0 1px #ffffff38 !important; transform: translateY(-2px); }
#join-modal .peakpy-discord-icon { flex: 0 0 auto; width: 29px !important; height: 29px !important; fill: currentColor !important; stroke: none !important; }
#join-modal .peakpy-invite-join span { display: inline-block; }

@keyframes peakFloat { 50% { transform: translateY(-10px) rotate(1deg); } }
@keyframes peakPulse { 50% { transform: scale(1.08); opacity: .55; } }

@media (max-width: 680px) {
  #join-modal.peakpy-invite { align-items: center !important; padding: 12px !important; }
  #join-modal.peakpy-invite article { width: calc(100vw - 24px) !important; max-width: calc(100vw - 24px) !important; max-height: calc(100dvh - 24px) !important; overflow-x: hidden !important; overflow-y: auto !important; border-radius: 19px !important; }
  .peakpy-invite-shell { display: block; min-height: 0; }
  .peakpy-invite-visual { min-height: 178px; padding: 48px 22px 20px; }
  .peakpy-invite-visual img { width: 145px !important; }
  .peakpy-invite-brand { top: 15px; left: 17px; font-size: 12px; }
  .peakpy-invite-brand img { width: 24px !important; height: 24px !important; }
  .peakpy-invite-content { min-height: 390px; padding: 30px 22px 22px; }
  .peakpy-invite-stages { min-height: 220px; }
  .peakpy-invite-stage h2 { font-size: clamp(29px, 9vw, 39px) !important; }
  .peakpy-invite-stage p { font-size: 14px; }
  .peakpy-invite-actions { position: sticky; bottom: 0; min-height: 62px; }
  #join-modal .peakpy-invite-join { min-height: 62px !important; padding: 0 16px !important; font-size: 12px !important; }
  #join-modal .peakpy-discord-icon { width: 26px !important; height: 26px !important; }
}

@media (prefers-reduced-motion: reduce) {
  .peakpy-invite-visual::before,.peakpy-invite-visual::after,.peakpy-invite-visual img { animation: none !important; }
}