:root {
  --ssj-midnight: #05040b;
  --ssj-navy: #0f1020;
  --ssj-ivory: #f7f0e9;
  --ssj-muted: #69616d;
  --ssj-line: #ded8e0;
  --ssj-primary: #c30765;
  --ssj-primary-bright: #c47ae0;
  --ssj-gold: #d7b45a;
  --ssj-font: "Yu Gothic UI", "Yu Gothic", "Hiragino Kaku Gothic ProN", "Meiryo", sans-serif;
}

html:lang(zh), html:lang(zh-CN) {
  --ssj-font: "Microsoft YaHei UI", "Microsoft YaHei", "PingFang SC", sans-serif;
}

html:lang(en) {
  --ssj-font: "Segoe UI Variable", "Segoe UI", Arial, sans-serif;
}

html, body, .login-pf, .login-pf body {
  min-height: 100%;
  font-family: var(--ssj-font) !important;
  font-synthesis: none;
}

body.login-pf,
.login-pf body,
.pf-v5-c-login {
  background:
    radial-gradient(circle at 76% 16%, rgba(122, 44, 255, .2), transparent 30rem),
    radial-gradient(circle at 12% 78%, rgba(154, 77, 204, .2), transparent 28rem),
    linear-gradient(135deg, #05040b 0%, #0a0b1e 55%, #130719 100%) !important;
}

.pf-v5-c-login::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  opacity: .34;
  background-image:
    radial-gradient(circle at 15% 18%, rgba(88,231,255,.34) 0 1px, transparent 2px),
    radial-gradient(circle at 72% 32%, rgba(215,180,90,.42) 0 1px, transparent 2px),
    radial-gradient(circle at 88% 78%, rgba(196,122,224,.46) 0 1.2px, transparent 2.2px);
  background-size: 180px 180px, 240px 240px, 310px 310px;
}

.pf-v5-c-login__container {
  grid-template-areas: "header" "main" !important;
  grid-template-columns: minmax(320px, 520px) !important;
  grid-template-rows: auto auto !important;
  align-content: center;
  justify-content: center;
  padding: 32px 20px !important;
}

#kc-header,
.pf-v5-c-login__header {
  margin: 0 0 24px !important;
  color: var(--ssj-ivory) !important;
  text-align: center;
}

#kc-header-wrapper {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 14px;
  padding: 0 !important;
  color: var(--ssj-ivory) !important;
  font-family: var(--ssj-font) !important;
  font-size: clamp(21px, 4vw, 30px) !important;
  font-weight: 700 !important;
  letter-spacing: .12em !important;
  text-transform: uppercase;
  text-shadow: 0 0 28px rgba(196,122,224,.24);
}

#kc-header-wrapper::before {
  content: "";
  width: 32px;
  height: 32px;
  flex: 0 0 32px;
  background: linear-gradient(145deg, #fffdf7 10%, #f4d68a 48%, #c30765 88%);
  clip-path: polygon(50% 0, 58% 42%, 100% 50%, 58% 58%, 50% 100%, 42% 58%, 0 50%, 42% 42%);
  filter: drop-shadow(0 0 14px rgba(196,122,224,.56));
}

.pf-v5-c-login__main,
.card-pf {
  overflow: hidden;
  border: 1px solid rgba(247,240,233,.18) !important;
  border-top: 3px solid var(--ssj-primary-bright) !important;
  border-radius: 12px !important;
  background: rgba(255,255,255,.975) !important;
  box-shadow: 0 28px 80px rgba(0,0,0,.5) !important;
}

.pf-v5-c-login__main-header,
.pf-v5-c-login__main-body,
.card-pf {
  color: #18151c;
}

.pf-v5-c-login__main-header {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) !important;
  gap: 16px !important;
}

.pf-v5-c-login__main-header-utilities {
  justify-self: start !important;
}

#kc-page-title {
  color: #18151c;
  font-family: var(--ssj-font) !important;
  font-size: clamp(24px, 4vw, 31px) !important;
  font-weight: 600 !important;
  letter-spacing: -.02em;
  white-space: nowrap;
}

label,
.pf-v5-c-form__label-text,
.pf-v5-c-form-control,
.pf-v5-c-button,
input,
select {
  font-family: var(--ssj-font) !important;
}

.pf-v5-c-form__label-text,
label {
  color: #332c35 !important;
  font-weight: 600 !important;
}

.pf-v5-c-form-control,
input[type="text"],
input[type="email"],
input[type="password"] {
  min-height: 48px;
  border-color: #bdb5c0 !important;
  border-radius: 7px !important;
  background: #fff !important;
  color: #18151c !important;
  box-shadow: none !important;
}

.pf-v5-c-form-control:focus-within,
input:focus {
  outline: 3px solid rgba(8,125,145,.24) !important;
  outline-offset: 1px;
  border-color: #087d91 !important;
}

#kc-login,
.pf-v5-c-button.pf-m-primary {
  min-height: 48px;
  border: 1px solid var(--ssj-primary) !important;
  border-radius: 7px !important;
  background: linear-gradient(135deg, #c30765 0%, #a846c8 100%) !important;
  color: #fff !important;
  font-weight: 700 !important;
  box-shadow: none !important;
}

#kc-login:hover,
.pf-v5-c-button.pf-m-primary:hover {
  background: linear-gradient(135deg, #a60055 0%, #8f35b0 100%) !important;
}

a { color: var(--ssj-primary) !important; }

.pf-v5-c-alert.pf-m-info,
.alert-info {
  border-left: 3px solid #087d91 !important;
  background: #eef7f8 !important;
  color: #22515a !important;
}

#kc-locale-dropdown button,
#kc-locale-dropdown .pf-v5-c-dropdown__toggle {
  color: #332c35 !important;
}

@media (max-width: 600px) {
  .pf-v5-c-login__container { padding: 18px 14px !important; }
  #kc-header-wrapper { font-size: 20px !important; letter-spacing: .08em !important; }
  #kc-header-wrapper::before { width: 27px; height: 27px; flex-basis: 27px; }
  .pf-v5-c-login__main, .card-pf { border-radius: 9px !important; }
  #kc-page-title { white-space: normal; }
}