:root {
  --sw-orange-primary: #ff8a1f;
  --sw-orange-deep: #e06d12;
  --sw-blue-primary: #126bff;
  --sw-blue-deep: #0753d9;
  --sw-ink: #111a3d;
  --sw-muted: #6e7892;
  --sw-soft: #eef6ff;
  --sw-panel: #ffffff;
  --sw-border: #e6edf7;
  --sw-shadow: 0 18px 42px rgba(31, 105, 205, .14);
  --sw-soft-shadow: 0 10px 24px rgba(22, 92, 196, .1);
}

html {
  min-height: 100%;
  background: #eaf4ff;
}

body.sw-orange-body {
  min-height: 100vh;
  margin: 0;
  background:
    radial-gradient(circle at 88% 5%, rgba(255, 255, 255, .86), transparent 34%),
    radial-gradient(circle at 78% 24%, rgba(18, 107, 255, .12), transparent 34%),
    linear-gradient(180deg, #edf6ff 0%, #f8fbff 48%, #eef6ff 100%);
  color: var(--sw-ink);
  font-family: -apple-system, BlinkMacSystemFont, "PingFang SC", "Microsoft YaHei", Arial, sans-serif;
  font-size: 14px;
}

body.sw-orange-body * {
  box-sizing: border-box;
}

body.sw-orange-body button,
body.sw-orange-body input {
  font: inherit;
}

.sw-orange-login {
  position: relative;
  width: 100%;
  max-width: 430px;
  min-height: 100vh;
  margin: 0 auto;
  padding: 13px 18px 24px;
  overflow: hidden;
}

.sw-orange-login:before {
  content: "";
  position: absolute;
  top: 62px;
  right: -62px;
  width: 238px;
  height: 238px;
  border-radius: 50%;
  background:
    linear-gradient(rgba(255,255,255,.52), rgba(255,255,255,.52)),
    repeating-linear-gradient(72deg, rgba(18,107,255,.14) 0 1px, transparent 1px 14px);
  opacity: .65;
  display: none;
  pointer-events: none;
}

.sw-login-top {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding-top: 18px;
}

.sw-brand {
  display: inline-flex;
  align-items: center;
  flex: 1 1 auto;
  min-width: 0;
  max-width: calc(100% - 144px);
  overflow: hidden;
}

.sw-brand-logo {
  display: block;
  width: clamp(108px, 34vw, 150px);
  max-width: 100%;
  height: auto;
  object-fit: contain;
}

.sw-top-actions {
  display: flex;
  align-items: center;
  gap: 9px;
  flex: 0 0 auto;
}

.sw-language-button,
.lang-trigger,
.sw-support-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 0;
  background: transparent;
  color: #101733;
}

.sw-language-button,
.lang-trigger {
  gap: 6px;
  min-width: 0;
  padding: 5px 0;
  font-size: 13px;
  font-weight: 600;
}

.sw-support-button {
  width: 30px;
  height: 30px;
  padding: 0;
  font-size: 20px;
}

.sw-icon-globe,
.sw-icon-headset {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  color: currentColor;
}

.sw-svg-icon svg {
  display: block;
  width: 100%;
  height: 100%;
}

.sw-chevron {
  width: 7px;
  height: 7px;
  border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  transform: rotate(45deg) translateY(-2px);
}

.sw-hero-copy {
  position: relative;
  z-index: 2;
  margin-top: 30px;
}

.sw-title {
  margin: 0;
  color: var(--sw-ink);
  font-size: 17px;
  font-weight: 900;
  line-height: 1.22;
  letter-spacing: 0;
}

.sw-title-accent {
  color: var(--sw-blue-primary);
}

.sw-subtitle {
  margin: 12px 0 0;
  color: #5d6a82;
  font-size: 13px;
  line-height: 1.65;
  white-space: nowrap;
}

.sw-platform-strip {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: 1.2fr 1.1fr 1fr 1.1fr .85fr;
  align-items: center;
  gap: 0;
  min-height: 46px;
  margin-top: 12px;
  padding: 0 8px;
  border: 1px solid rgba(235, 241, 249, .92);
  border-radius: 14px;
  background: rgba(255, 255, 255, .96);
  box-shadow: 0 10px 20px rgba(28, 99, 186, .1);
}

.sw-platform {
  --sw-platform-logo-width: 58px;
  --sw-platform-logo-small-width: 51px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 0;
  height: 25px;
  padding: 0 3px;
  border-right: 1px solid #edf1f7;
  color: #121936;
  font-size: 10px;
  font-weight: 800;
  white-space: nowrap;
}

.sw-platform-logo {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: var(--sw-platform-logo-width);
  height: 16px;
}

.sw-platform-logo svg,
.sw-platform-logo img {
  width: 100%;
  height: 100%;
}

.sw-platform-logo img {
  display: block;
  object-fit: contain;
}

.sw-platform:last-child {
  border-right: 0;
}

.sw-platform-tiktok {
  --sw-platform-logo-width: 62px;
  --sw-platform-logo-small-width: 56px;
}

.sw-platform-lazada,
.sw-platform-shopee {
  --sw-platform-logo-width: 58px;
  --sw-platform-logo-small-width: 52px;
}

.sw-platform-amazon {
  --sw-platform-logo-width: 51px;
  --sw-platform-logo-small-width: 46px;
}

.sw-platform-ebay {
  --sw-platform-logo-width: 42px;
  --sw-platform-logo-small-width: 38px;
}

.sw-platform-etsy {
  --sw-platform-logo-width: 52px;
  --sw-platform-logo-small-width: 47px;
}

.sw-platform-rakuten {
  --sw-platform-logo-width: 56px;
  --sw-platform-logo-small-width: 50px;
}

.sw-platform-bonanza {
  --sw-platform-logo-width: 58px;
  --sw-platform-logo-small-width: 52px;
}

.sw-platform-tiktok { color: #111; }
.sw-platform-lazada { color: #6b43df; }
.sw-platform-amazon { color: #101010; }
.sw-platform-shopee { color: #f0582d; }
.sw-platform-ebay { color: #2776e7; }
.sw-platform-ebay { color: #2776e7; }
.sw-platform-etsy { color: #f1641e; }
.sw-platform-rakuten { color: #bf0000; }
.sw-platform-bonanza { color: #5aa400; }

.sw-hero-art {
  position: relative;
  z-index: 1;
  aspect-ratio: 720 / 420;
  margin: 10px -28px 0;
  overflow: hidden;
}

.sw-hero-art img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center bottom;
  mix-blend-mode: normal;
}

.sw-card {
  position: relative;
  z-index: 3;
  margin-top: -12px;
  padding: 0 16px 18px;
  border: 1px solid rgba(232, 239, 248, .86);
  border-radius: 22px;
  background: rgba(255, 255, 255, .96);
  box-shadow: var(--sw-shadow);
  backdrop-filter: blur(12px);
}

.sw-tabs {
  display: grid;
  grid-template-columns: 1fr 1fr;
  height: 65px;
  margin: 0 -2px;
}

.sw-tab {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 0;
  background: transparent;
  color: #59647d;
  font-size: 17px;
  font-weight: 700;
  text-decoration: none;
}

.sw-tab.is-active {
  color: var(--sw-blue-primary);
}

.sw-tab.is-active:after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 0;
  width: 48px;
  height: 3px;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--sw-orange-primary), var(--sw-blue-primary));
  transform: translateX(-50%);
}

.sw-login-form {
  padding-top: 14px;
}

.sw-field {
  display: flex;
  align-items: center;
  min-height: 52px;
  margin-bottom: 12px;
  padding: 0 12px;
  border: 1px solid var(--sw-border);
  border-radius: 9px;
  background: #fff;
}

.sw-field-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 25px;
  width: 25px;
  height: 25px;
  color: #9099aa;
}

.sw-field-icon svg {
  width: 20px;
  height: 20px;
}

.sw-field input {
  flex: 1 1 auto;
  min-width: 0;
  height: 50px;
  border: 0;
  background: transparent;
  color: var(--sw-ink);
  font-size: 14px;
}

.sw-field input::placeholder {
  color: #a2aaba;
}

.sw-password-toggle,
.sw-code-button {
  flex: 0 0 auto;
  border: 0;
  background: transparent;
  color: #7a8498;
}

.sw-password-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  padding: 0;
}

.sw-password-toggle svg {
  width: 20px;
  height: 20px;
}

.sw-code-button {
  min-width: 92px;
  padding: 0 0 0 12px;
  border-left: 1px solid #eef2f7;
  color: var(--sw-blue-primary);
  font-size: 14px;
  font-weight: 700;
  white-space: nowrap;
}

.sw-form-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin: 4px 1px 17px;
  color: #7a8496;
  font-size: 13px;
}

.sw-remember {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}

.sw-remember input {
  width: 18px;
  height: 18px;
  margin: 0;
  accent-color: var(--sw-orange-primary);
}

.sw-forgot-link {
  color: var(--sw-blue-primary);
  font-weight: 600;
  text-decoration: none;
  white-space: nowrap;
}

.sw-login-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: 56px;
  border: 0;
  border-radius: 10px;
  background: linear-gradient(100deg, #005ef8 0%, #268cff 100%);
  color: #fff;
  font-size: 17px;
  font-weight: 800;
  box-shadow: 0 12px 24px rgba(18, 107, 255, .22);
}

.sw-login-button:active,
.sw-social-button:active,
.sw-tab:active,
.sw-code-button:active,
.sw-language-button:active,
.lang-trigger:active,
.sw-support-button:active {
  transform: translateY(1px) scale(.99);
}

.sw-login-button,
.sw-social-button,
.sw-tab,
.sw-code-button,
.sw-password-toggle,
.sw-language-button,
.lang-trigger,
.sw-support-button,
.lang-option,
.lang-close {
  transition: transform .18s ease, opacity .18s ease, background-color .18s ease, color .18s ease;
}

.sw-social-title {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 18px;
  color: #8b94a5;
  font-size: 13px;
  text-align: center;
}

.sw-social-title:before,
.sw-social-title:after {
  content: "";
  flex: 1 1 auto;
  height: 1px;
  background: #edf1f6;
}

.sw-socials {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 26px;
  margin-top: 13px;
}

.sw-social-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 46px;
  height: 46px;
  border: 1px solid #eef2f8;
  border-radius: 50%;
  background: #fff;
  box-shadow: var(--sw-soft-shadow);
}

.sw-social-button svg {
  width: 21px;
  height: 21px;
}

.sw-social-google { color: #4285f4; }
.sw-social-apple { color: #080808; }
.sw-social-wechat { color: #22c55e; }

.sw-register-row {
  margin-top: 18px;
  padding-top: 17px;
  border-top: 1px solid #edf1f6;
  color: #8a93a5;
  font-size: 14px;
  text-align: center;
}

.sw-register-row a {
  margin-left: 8px;
  color: var(--sw-blue-primary);
  font-weight: 800;
  text-decoration: none;
}

.sw-agreement {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  margin-top: 17px;
  color: #8a93a5;
  font-size: 12px;
  line-height: 1.6;
  text-align: center;
}

.sw-agreement a {
  color: var(--sw-blue-primary);
  text-decoration: none;
}

.sw-lock {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: 18px;
  height: 18px;
  color: #8d96a8;
}

.enbox {
  position: fixed;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  z-index: 50;
  display: none;
  align-items: flex-end;
  justify-content: center;
  background: rgba(12, 19, 38, .38);
}

.lang-panel {
  width: 100%;
  max-width: 430px;
  padding: 18px 18px 24px;
  border-radius: 20px 20px 0 0;
  background: #fff;
  box-shadow: 0 -12px 34px rgba(17, 24, 42, .18);
}

.lang-panel-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 12px;
}

.lang-panel-title {
  color: var(--sw-ink);
  font-size: 18px;
  font-weight: 800;
}

.lang-close {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  width: 34px !important;
  height: 34px !important;
  padding: 0 !important;
  border: 0;
  border-radius: 50% !important;
  background: #f2f5f9 !important;
  color: #667085 !important;
  font-size: 24px !important;
  line-height: 1 !important;
}

.lang-option {
  position: relative;
  display: block;
  width: 100%;
  min-height: 46px;
  margin-top: 10px;
  border: 1px solid #f0e3d8;
  border-radius: 10px;
  background: #fffaf5;
  color: #222b45;
  font-size: 15px;
  font-weight: 600;
  text-align: center;
}

.lang-option.is-active {
  border-color: rgba(18, 107, 255, .45);
  background: linear-gradient(135deg, #eaf4ff 0%, #fffaf5 100%);
  color: var(--sw-blue-primary);
  font-weight: 800;
  box-shadow: inset 0 0 0 1px rgba(18, 107, 255, .12);
}

.lang-option.is-active:after {
  content: "";
  position: absolute;
  right: 14px;
  top: 50%;
  width: 7px;
  height: 12px;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: translateY(-58%) rotate(45deg);
}

.lang-option:active {
  background: var(--sw-orange-primary);
  color: #fff;
}

html[dir="rtl"] .sw-orange-login {
  direction: rtl;
}

html[dir="rtl"] .sw-login-top,
html[dir="rtl"] .sw-brand,
html[dir="rtl"] .sw-top-actions,
html[dir="rtl"] .sw-field,
html[dir="rtl"] .sw-form-row,
html[dir="rtl"] .sw-remember,
html[dir="rtl"] .sw-agreement {
  direction: rtl;
}

html[dir="rtl"] .sw-subtitle {
  white-space: normal;
}

html[dir="rtl"] .sw-code-button {
  padding: 0 12px 0 0;
  border-left: 0;
  border-right: 1px solid #eef2f7;
}

html[dir="rtl"] .sw-register-row a {
  margin-left: 0;
  margin-right: 8px;
}

html[dir="rtl"] .lang-option.is-active:after {
  right: auto;
  left: 14px;
}

@media (max-width: 374px) {
  .sw-orange-login {
    padding-left: 14px;
    padding-right: 14px;
  }

  .sw-title {
    font-size: 27px;
  }

  .sw-subtitle {
    font-size: 12px;
    white-space: normal;
  }

  .sw-platform {
    font-size: 10px;
    padding: 0 3px;
  }

  .sw-platform-logo {
    width: var(--sw-platform-logo-small-width);
  }

  .sw-hero-art {
    margin-left: -44px;
    margin-right: -44px;
  }

  .sw-socials {
    gap: 22px;
  }
}