/* =====================================================
   EDD Pro Panel — Auth (Login / Register) Page
   Uses the same CSS variables/design tokens as panel.css

   NOTE ON !important: many WordPress themes (especially
   RTL / marketplace / WooCommerce-based themes) ship global
   resets for <label>, <input>, <button> with !important
   (e.g. `label{margin:0 !important}`, `button{position:relative !important}`).
   Those silently break absolutely-positioned icons/toggles
   and spacing on this page. Every rule below that controls
   box-model or positioning is scoped under the high-specificity
   `body.epp-auth-page #eppPanel` prefix AND carries !important
   so it reliably wins regardless of theme load order.
===================================================== */

body.epp-auth-page #eppPanel.epp-auth,
body.epp-auth-page #eppPanel.epp-auth *,
body.epp-auth-page #eppPanel.epp-auth *::before,
body.epp-auth-page #eppPanel.epp-auth *::after {
  box-sizing: border-box !important;
  margin: 0 !important;
  padding: 0 !important;
}

body.epp-auth-page #eppPanel.epp-auth {
  display: flex !important;
  height: 100vh !important;
  width: 100% !important;
  overflow: hidden !important;
  direction: rtl !important;
  font-size: 14px !important;
  line-height: 1.6 !important;
  background: var(--epp-bg);
  color: var(--epp-text);
  font-family: 'IranYekan', Tahoma, sans-serif !important;
}

/* ═══════════════════════════════════════════════════
   VISUAL SIDE (gradient + mascot illustration)
═══════════════════════════════════════════════════ */
body.epp-auth-page #eppPanel .epp-auth__visual {
  position: relative !important;
  flex: 1.05 1.05 0% !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 60px 48px !important;
  overflow: hidden !important;
  color: #fff !important;
  background: linear-gradient(135deg, #8B6BFF 0%, #7C5CFA 32%, #6C63FF 62%, #453190 100%);
}

body.epp-auth-page #eppPanel .epp-auth__visual::before,
body.epp-auth-page #eppPanel .epp-auth__visual::after {
  content: '' !important;
  position: absolute !important;
  border-radius: 50% !important;
  filter: blur(70px);
  z-index: 0 !important;
  pointer-events: none !important;
}
body.epp-auth-page #eppPanel .epp-auth__visual::before {
  width: 280px !important; height: 280px !important;
  background: rgba(255,255,255,.16);
  top: -70px !important; right: -70px !important; left: auto !important;
  animation: epp-pulse 7s ease-in-out infinite;
}
body.epp-auth-page #eppPanel .epp-auth__visual::after {
  width: 340px !important; height: 340px !important;
  background: rgba(67,212,160,.28);
  bottom: -110px !important; left: -90px !important; right: auto !important;
  animation: epp-pulse 9s ease-in-out infinite reverse;
}

body.epp-auth-page #eppPanel .epp-auth__brand {
  position: absolute !important;
  top: 36px !important; right: 44px !important; left: auto !important;
  z-index: 3 !important;
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  font-weight: 700 !important;
  font-size: 16px !important;
  color: #fff !important;
}
body.epp-auth-page #eppPanel .epp-auth__brand img { max-height: 32px !important; max-width: 150px !important; object-fit: contain !important; display: block !important; }
body.epp-auth-page #eppPanel .epp-auth__brand-icon { display: flex !important; opacity: .95; }

body.epp-auth-page #eppPanel .epp-auth__visual-inner {
  position: relative !important;
  z-index: 2 !important;
  max-width: 400px !important;
  width: 100% !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  gap: 16px !important;
  text-align: center !important;
}

/* Mascot */
body.epp-auth-page #eppPanel .epp-auth__mascot {
  width: 260px !important;
  max-width: 78% !important;
  margin-bottom: 6px !important;
  display: block !important;
}
body.epp-auth-page #eppPanel .epp-auth__mascot svg { width: 100% !important; height: auto !important; display: block !important; overflow: visible; }

#eppMascotFloat { animation: epp-auth-float 6s ease-in-out infinite; transform-origin: center; }
#eppMascotArm {
  animation: epp-auth-wave 2.4s ease-in-out infinite;
  transform-box: fill-box;
  transform-origin: 14% 20%;
}
#eppMascotAntenna { animation: epp-auth-glow 2s ease-in-out infinite; transform-box: fill-box; transform-origin: center; }
.epp-auth-spark { animation: epp-auth-twinkle 2.6s ease-in-out infinite; transform-box: fill-box; transform-origin: center; }
.epp-auth-spark.s2 { animation-delay: .6s; }
.epp-auth-spark.s3 { animation-delay: 1.2s; }
#eppMascotShadow { animation: epp-auth-shadow 6s ease-in-out infinite; transform-box: fill-box; transform-origin: center; }

body.epp-auth-page #eppPanel .epp-auth__visual-title {
  font-size: 22px !important;
  font-weight: 700 !important;
  line-height: 1.5 !important;
  color: #fff !important;
}
body.epp-auth-page #eppPanel .epp-auth__visual-desc {
  font-size: 13px !important;
  color: rgba(255,255,255,.82) !important;
  line-height: 1.9 !important;
  max-width: 340px !important;
}

body.epp-auth-page #eppPanel .epp-auth__features {
  list-style: none !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 12px !important;
  align-self: stretch !important;
  text-align: right !important;
  margin-top: 8px !important;
}
body.epp-auth-page #eppPanel .epp-auth__feature {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  font-size: 12.5px !important;
  color: rgba(255,255,255,.92) !important;
  animation: epp-auth-feature-in .55s ease both;
}
body.epp-auth-page #eppPanel .epp-auth__feature:nth-child(1) { animation-delay: .1s; }
body.epp-auth-page #eppPanel .epp-auth__feature:nth-child(2) { animation-delay: .22s; }
body.epp-auth-page #eppPanel .epp-auth__feature:nth-child(3) { animation-delay: .34s; }
body.epp-auth-page #eppPanel .epp-auth__feature-icon {
  width: 28px !important; height: 28px !important;
  border-radius: 50% !important;
  background: rgba(255,255,255,.16);
  display: flex !important; align-items: center !important; justify-content: center !important;
  flex-shrink: 0 !important;
}

/* ═══════════════════════════════════════════════════
   FORM SIDE
═══════════════════════════════════════════════════ */
body.epp-auth-page #eppPanel .epp-auth__form-side {
  flex: 1 1 0% !important;
  display: flex !important;
  align-items: center !important;
  align-items: safe center !important;
  justify-content: center !important;
  padding: 40px 32px !important;
  overflow-y: auto !important;
  background: var(--epp-bg);
}

body.epp-auth-page #eppPanel .epp-auth__form-wrap {
  width: 100% !important;
  max-width: 380px !important;
  background: var(--epp-surface);
  border: 1px solid var(--epp-border) !important;
  border-radius: var(--epp-radius-xl) !important;
  box-shadow: var(--epp-shadow-lg);
  padding: 34px 30px !important;
  animation: epp-fade-in .5s ease;
  position: relative !important;
}

/* ═══════════════════════════════════════════════════
   LOADING OVERLAY (shown during login/register/forgot)
═══════════════════════════════════════════════════ */
body.epp-auth-page #eppPanel .epp-auth-loading {
  position: absolute !important;
  inset: 0 !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 18px !important;
  background: color-mix(in srgb, var(--epp-surface) 88%, transparent) !important;
  backdrop-filter: blur(6px) !important;
  -webkit-backdrop-filter: blur(6px) !important;
  border-radius: var(--epp-radius-xl) !important;
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
  transition: opacity .25s ease, visibility .25s ease;
  z-index: 20 !important;
}
body.epp-auth-page #eppPanel .epp-auth-loading--active {
  opacity: 1 !important;
  visibility: visible !important;
  pointer-events: auto !important;
}

body.epp-auth-page #eppPanel .epp-auth-loading__ring {
  position: relative !important;
  width: 64px !important;
  height: 64px !important;
}
body.epp-auth-page #eppPanel .epp-auth-loading__ring span {
  position: absolute !important;
  inset: 0 !important;
  border-radius: 50% !important;
  border: 3px solid transparent !important;
}
body.epp-auth-page #eppPanel .epp-auth-loading__ring span:nth-child(1) {
  border-top-color: var(--epp-primary) !important;
  border-right-color: var(--epp-primary) !important;
  animation: epp-auth-ring-spin 1s cubic-bezier(.55,0,.45,1) infinite;
}
body.epp-auth-page #eppPanel .epp-auth-loading__ring span:nth-child(2) {
  inset: 9px !important;
  border-bottom-color: var(--epp-secondary, #FF6584) !important;
  border-left-color: var(--epp-secondary, #FF6584) !important;
  animation: epp-auth-ring-spin-rev 1.4s cubic-bezier(.55,0,.45,1) infinite;
}
body.epp-auth-page #eppPanel .epp-auth-loading__ring span:nth-child(3) {
  inset: 24px !important;
  background: linear-gradient(135deg, var(--epp-primary), var(--epp-secondary, #FF6584)) !important;
  border: none !important;
  animation: epp-auth-pulse-dot 1s ease-in-out infinite;
}

body.epp-auth-page #eppPanel .epp-auth-loading__dots {
  display: flex !important;
  gap: 6px !important;
}
body.epp-auth-page #eppPanel .epp-auth-loading__dots i {
  width: 6px !important;
  height: 6px !important;
  border-radius: 50% !important;
  background: var(--epp-primary) !important;
  display: block !important;
  animation: epp-auth-dot-bounce 1s ease-in-out infinite;
}
body.epp-auth-page #eppPanel .epp-auth-loading__dots i:nth-child(2) { animation-delay: .15s !important; background: var(--epp-secondary, #FF6584) !important; }
body.epp-auth-page #eppPanel .epp-auth-loading__dots i:nth-child(3) { animation-delay: .3s !important; }

body.epp-auth-page #eppPanel .epp-auth-loading__text {
  font-size: 13px !important;
  font-weight: 600 !important;
  color: var(--epp-text-2) !important;
  margin: 0 !important;
}

@keyframes epp-auth-ring-spin     { to { transform: rotate(360deg); } }
@keyframes epp-auth-ring-spin-rev { to { transform: rotate(-360deg); } }
@keyframes epp-auth-pulse-dot {
  0%, 100% { transform: scale(.75); opacity: .7; }
  50%      { transform: scale(1);   opacity: 1;  }
}
@keyframes epp-auth-dot-bounce {
  0%, 80%, 100% { transform: translateY(0);    opacity: .5; }
  40%           { transform: translateY(-6px); opacity: 1;  }
}

body.epp-auth-page #eppPanel .epp-auth__mobile-brand {
  display: none !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
  margin-bottom: 22px !important;
  font-weight: 700 !important;
  font-size: 16px !important;
  color: var(--epp-primary) !important;
}
body.epp-auth-page #eppPanel .epp-auth__mobile-brand img { max-height: 30px !important; max-width: 140px !important; object-fit: contain !important; }

body.epp-auth-page #eppPanel .epp-auth__title-only { text-align: center !important; margin-bottom: 22px !important; }
body.epp-auth-page #eppPanel .epp-auth__title-only h1 { font-size: 18px !important; font-weight: 700 !important; margin-bottom: 6px !important; color: var(--epp-text) !important; }
body.epp-auth-page #eppPanel .epp-auth__title-only p { font-size: 12.5px !important; color: var(--epp-text-muted) !important; }

/* Tabs */
body.epp-auth-page #eppPanel .epp-auth__tabs {
  position: relative !important;
  display: flex !important;
  background: var(--epp-surface-2);
  border-radius: var(--epp-radius) !important;
  padding: 4px !important;
  margin-bottom: 26px !important;
  border: none !important;
}
body.epp-auth-page #eppPanel .epp-auth__tab {
  position: relative !important;
  z-index: 2 !important;
  flex: 1 1 0% !important;
  background: none !important;
  border: none !important;
  outline: none !important;
  padding: 10px 0 !important;
  margin: 0 !important;
  font-size: 13.5px !important;
  font-weight: 700 !important;
  color: var(--epp-text-2) !important;
  cursor: pointer !important;
  border-radius: calc(var(--epp-radius) - 4px) !important;
  font-family: inherit !important;
  transition: color .25s ease;
  width: auto !important;
  height: auto !important;
  line-height: normal !important;
  box-shadow: none !important;
}
body.epp-auth-page #eppPanel .epp-auth__tab--active { color: #fff !important; }
body.epp-auth-page #eppPanel .epp-auth__tab-indicator {
  position: absolute !important;
  top: 4px !important; right: 4px !important; left: auto !important; bottom: auto !important;
  width: calc(50% - 4px) !important;
  height: calc(100% - 8px) !important;
  background: var(--epp-primary);
  border-radius: calc(var(--epp-radius) - 4px) !important;
  box-shadow: 0 4px 14px rgba(var(--epp-primary-rgb),.35);
  z-index: 1 !important;
  transition: transform .32s cubic-bezier(.4,0,.2,1);
  margin: 0 !important;
}
body.epp-auth-page #eppPanel .epp-auth__tab-indicator--register { transform: translateX(-100%); }

/* Alert box */
body.epp-auth-page #eppPanel .epp-auth-alert {
  display: none !important;
  align-items: center !important;
  gap: 8px !important;
  padding: 10px 14px !important;
  border-radius: var(--epp-radius-sm) !important;
  font-size: 12.5px !important;
  font-weight: 600 !important;
  margin-bottom: 16px !important;
  animation: epp-fade-in .3s ease;
  border: none !important;
}
body.epp-auth-page #eppPanel .epp-auth-alert svg { flex-shrink: 0 !important; }
body.epp-auth-page #eppPanel .epp-auth-alert--error   { display: flex !important; background: rgba(239,68,68,.1) !important;  color: #DC2626 !important; }
body.epp-auth-page #eppPanel .epp-auth-alert--success { display: flex !important; background: rgba(34,197,94,.1) !important; color: #16A34A !important; }

/* Panels */
body.epp-auth-page #eppPanel .epp-auth__panels { position: relative !important; }
body.epp-auth-page #eppPanel .epp-auth__panel {
  display: none !important;
  flex-direction: column !important;
}
body.epp-auth-page #eppPanel .epp-auth__panel--active {
  display: flex !important;
  animation: epp-auth-panel-in .35s ease;
}

/* Fields */
body.epp-auth-page #eppPanel .epp-auth-field { position: relative !important; margin-bottom: 15px !important; }
body.epp-auth-page #eppPanel .epp-auth-field label {
  display: block !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  color: var(--epp-text-2) !important;
  margin: 0 0 6px !important;
  padding: 0 !important;
  line-height: 1.5 !important;
}
body.epp-auth-page #eppPanel .epp-auth-input-wrap { position: relative !important; display: block !important; width: 100% !important; }
body.epp-auth-page #eppPanel .epp-auth-input-wrap input.epp-input {
  width: 100% !important;
  display: block !important;
  height: 44px !important;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
  padding-right: 42px !important;
  padding-left: 16px !important;
  box-sizing: border-box !important;
  position: relative !important;
  text-align: right !important;
  font-family: inherit !important;
  font-size: 13.5px !important;
  background: var(--epp-surface) !important;
}
body.epp-auth-page #eppPanel .epp-auth-input-wrap.has-toggle input.epp-input { padding-left: 42px !important; }

/* Neutralize the browser's blue/lavender autofill tint so filled fields stay on-brand */
body.epp-auth-page #eppPanel .epp-auth-input-wrap input.epp-input:-webkit-autofill,
body.epp-auth-page #eppPanel .epp-auth-input-wrap input.epp-input:-webkit-autofill:hover,
body.epp-auth-page #eppPanel .epp-auth-input-wrap input.epp-input:-webkit-autofill:focus {
  -webkit-text-fill-color: var(--epp-text) !important;
  -webkit-box-shadow: 0 0 0 1000px var(--epp-surface) inset !important;
  box-shadow: 0 0 0 1000px var(--epp-surface) inset !important;
  transition: background-color 9999s ease-in-out 0s !important;
  caret-color: var(--epp-text) !important;
}
body.epp-auth-page #eppPanel .epp-auth-icon {
  position: absolute !important;
  right: 14px !important; left: auto !important;
  top: 50% !important; bottom: auto !important;
  transform: translateY(-50%) !important;
  display: flex !important;
  align-items: center !important;
  color: var(--epp-text-muted) !important;
  pointer-events: none !important;
  transition: color .2s ease;
  z-index: 2 !important;
  line-height: 0 !important;
  margin: 0 !important;
}
body.epp-auth-page #eppPanel .epp-auth-icon svg { display: block !important; width: 18px !important; height: 18px !important; }
body.epp-auth-page #eppPanel .epp-auth-input-wrap:focus-within .epp-auth-icon { color: var(--epp-primary) !important; }

/* Password show/hide toggle — hardened against theme `button{position:...}` resets */
body.epp-auth-page #eppPanel .epp-auth-input-wrap .epp-input-toggle-pass {
  position: absolute !important;
  left: 12px !important; right: auto !important;
  top: 50% !important; bottom: auto !important;
  transform: translateY(-50%) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 22px !important; height: 22px !important;
  background: none !important;
  border: none !important;
  outline: none !important;
  padding: 0 !important;
  margin: 0 !important;
  color: var(--epp-text-muted) !important;
  cursor: pointer !important;
  z-index: 2 !important;
  line-height: 0 !important;
}
body.epp-auth-page #eppPanel .epp-auth-input-wrap .epp-input-toggle-pass svg { display: block !important; width: 18px !important; height: 18px !important; }
body.epp-auth-page #eppPanel .epp-auth-input-wrap .epp-input-toggle-pass:hover { color: var(--epp-primary) !important; }

body.epp-auth-page #eppPanel .epp-password-strength { margin: 6px 0 0 !important; }
body.epp-auth-page #eppPanel .epp-password-strength__bar { height: 4px !important; background: var(--epp-border); border-radius: 2px !important; overflow: hidden !important; margin: 0 0 4px !important; width: 100% !important; }
body.epp-auth-page #eppPanel .epp-password-strength__bar span { display: block !important; height: 100% !important; width: 0 !important; border-radius: 2px !important; transition: width .4s, background .4s; margin: 0 !important; }
body.epp-auth-page #eppPanel .epp-password-strength > span { font-size: 11px !important; font-weight: 600 !important; }

body.epp-auth-page #eppPanel .epp-auth-row {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 10px !important;
  margin: 0 0 20px !important;
  font-size: 12.5px !important;
  flex-wrap: wrap !important;
}
body.epp-auth-page #eppPanel .epp-auth-check {
  display: flex !important;
  align-items: center !important;
  gap: 7px !important;
  font-size: 12.5px !important;
  color: var(--epp-text-2) !important;
  cursor: pointer !important;
  user-select: none !important;
  margin: 0 !important;
}
body.epp-auth-page #eppPanel .epp-auth-check input {
  width: 16px !important; height: 16px !important;
  min-width: 16px !important;
  accent-color: var(--epp-primary);
  cursor: pointer !important;
  margin: 0 !important;
  padding: 0 !important;
  flex-shrink: 0 !important;
}
body.epp-auth-page #eppPanel .epp-auth-check--terms { margin: 0 0 20px !important; }

body.epp-auth-page #eppPanel .epp-auth-input-wrap button.epp-link,
body.epp-auth-page #eppPanel .epp-auth-row button.epp-link {
    background: #ffffff !important;
    width: auto;
    padding-right: 5px !important;
    padding-left: 5px !important;
    margin: 0 !important;
    font-family: inherit !important;
    font-size: 12.5px !important;
    cursor: pointer !important;
    font-weight: 600 !important;
    position: static !important;
    text-decoration: none !important;
    -webkit-text-decoration: none !important;
    color: #9C27B0;
    border: 1px solid #9C27B0;
}

body.epp-auth-page #eppPanel .epp-auth__submit {
  width: 100% !important;
  margin-top: 4px !important;
  height: 46px !important;
  font-size: 14px !important;
  position: relative !important;
}

body.epp-auth-page #eppPanel .epp-auth__switch {
  text-align: center !important;
  margin: 18px 0 0 !important;
  font-size: 12.5px !important;
  color: var(--epp-text-muted) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 5px !important;
  flex-wrap: wrap !important;
}
body.epp-auth-page #eppPanel .epp-auth__switch .epp-link {
    font-weight: 700 !important;
    background: #ffffff !important;
    padding: 0 !important;
    cursor: pointer !important;
    font-size: 12.5px !important;
    font-family: inherit !important;
    text-decoration: none !important;
    -webkit-text-decoration: none !important;
    color: #4CAF50;
    border: 1px solid #4CAF50;
}

body.epp-auth-page #eppPanel .epp-auth__back {
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
    margin: 0 0 18px !important;
    transition: color .2s ease;
    position: static !important;
    font-weight: 700 !important;
    background: #ffffff !important;
    padding: 0 !important;
    cursor: pointer !important;
    font-size: 12.5px !important;
    font-family: inherit !important;
    text-decoration: none !important;
    -webkit-text-decoration: none !important;
    color: #4CAF50;
    border: 1px solid #4CAF50;
    width: 110px;
}
body.epp-auth-page #eppPanel .epp-auth__back:hover { color: var(--epp-primary) !important; }
body.epp-auth-page #eppPanel .epp-auth__back svg { transform: scaleX(-1); }

body.epp-auth-page #eppPanel .epp-auth__forgot-desc {
  font-size: 12.5px !important;
  color: var(--epp-text-muted) !important;
  margin: 0 0 20px !important;
  line-height: 1.9 !important;
}

body.epp-auth-page #eppPanel .epp-auth__home-link {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 6px !important;
  margin: 22px 0 0 !important;
  font-size: 12px !important;
  color: var(--epp-text-muted) !important;
  text-decoration: none !important;
  transition: color .2s ease;
}
body.epp-auth-page #eppPanel .epp-auth__home-link:hover { color: var(--epp-primary) !important; }
body.epp-auth-page #eppPanel .epp-auth__home-link svg { width: 14px !important; height: 14px !important; }

/* ═══════════════════════════════════════════════════
   ANIMATIONS
═══════════════════════════════════════════════════ */
@keyframes epp-auth-float {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-14px); }
}
@keyframes epp-auth-wave {
  0%, 100% { transform: rotate(0deg); }
  20%      { transform: rotate(-22deg); }
  40%      { transform: rotate(6deg); }
  60%      { transform: rotate(-16deg); }
  80%      { transform: rotate(4deg); }
}
@keyframes epp-auth-glow {
  0%, 100% { opacity: 1; transform: scale(1); }
  50%      { opacity: .55; transform: scale(1.25); }
}
@keyframes epp-auth-twinkle {
  0%, 100% { opacity: .25; transform: scale(.7); }
  50%      { opacity: 1; transform: scale(1.1); }
}
@keyframes epp-auth-shadow {
  0%, 100% { opacity: .28; transform: scaleX(1); }
  50%      { opacity: .14; transform: scaleX(.82); }
}
@keyframes epp-auth-feature-in {
  from { opacity: 0; transform: translateX(14px); }
  to   { opacity: 1; transform: none; }
}
@keyframes epp-auth-panel-in {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: none; }
}
body.epp-auth-page #eppPanel .epp-auth-input-wrap.epp-auth-shake { animation: epp-auth-shake .4s ease; }
@keyframes epp-auth-shake {
  0%, 100% { transform: translateX(0); }
  25%      { transform: translateX(-6px); }
  75%      { transform: translateX(6px); }
}

/* ═══════════════════════════════════════════════════
   RESPONSIVE
═══════════════════════════════════════════════════ */
@media (max-width: 900px) {
  body.epp-auth-page #eppPanel .epp-auth__visual { display: none !important; }
  body.epp-auth-page #eppPanel .epp-auth__form-side {
    padding: 32px 18px !important;
    width: 100% !important;
    align-items: flex-start !important;
    justify-content: flex-start !important;
  }
  body.epp-auth-page #eppPanel .epp-auth__mobile-brand { display: flex !important; }
  body.epp-auth-page #eppPanel.epp-auth { height: 100vh !important; overflow-y: auto !important; }
  body.epp-auth-page #eppPanel .epp-auth__form-wrap { margin: 0 auto !important; }
}
@media (max-width: 420px) {
  body.epp-auth-page #eppPanel .epp-auth__form-wrap { padding: 26px 20px !important; border-radius: var(--epp-radius-lg) !important; }
  body.epp-auth-page #eppPanel .epp-auth-row { gap: 12px !important; }
}
@media (max-height: 700px) {
  body.epp-auth-page #eppPanel .epp-auth__visual { padding: 30px 40px !important; }
  body.epp-auth-page #eppPanel .epp-auth__mascot { width: 190px !important; }
  body.epp-auth-page #eppPanel .epp-auth__visual-desc { display: none !important; }
}