:root {
  --zt-red: #c8102e;
  --zt-red-deep: #9f1027;
  --zt-ink: #16191f;
  --zt-ink-soft: #252a33;
  --zt-paper: #f4f2ef;
  --zt-white: #ffffff;
  --zt-muted: #6f7580;
  --zt-line: #e3e0dc;
  --zt-logo: url("../img/ztdd-logo.png");
}

html,
body {
  min-height: 100%;
}

body,
.pf-v5-c-login {
  color: var(--zt-ink) !important;
  font-family: -apple-system, BlinkMacSystemFont, "PingFang SC", "Microsoft YaHei", sans-serif !important;
}

.pf-v5-c-login {
  position: relative !important;
  display: flex !important;
  min-height: 100vh !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 32px !important;
  overflow: hidden !important;
  background:
    linear-gradient(rgba(35, 39, 47, .045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(35, 39, 47, .045) 1px, transparent 1px),
    radial-gradient(700px 520px at 0 0, rgba(200, 16, 46, .09), transparent 66%),
    radial-gradient(620px 460px at 100% 100%, rgba(22, 25, 31, .07), transparent 68%),
    var(--zt-paper) !important;
  background-size: 52px 52px, 52px 52px, auto, auto, auto !important;
}

.pf-v5-c-login::before {
  content: "";
  position: fixed;
  top: 0;
  left: 0;
  z-index: 2;
  width: 100%;
  height: 4px;
  pointer-events: none;
  background: linear-gradient(90deg, var(--zt-red) 0 28%, var(--zt-ink) 28% 100%);
}

.pf-v5-c-login::after {
  content: "中土大地国际建筑设计有限公司  ·  统一账号  ·  分级授权  ·  登录审计";
  position: fixed;
  right: 34px;
  bottom: 18px;
  z-index: 1;
  color: #858991;
  font-size: 11px;
  letter-spacing: .06em;
}

.pf-v5-c-login__container {
  position: relative !important;
  z-index: 3 !important;
  display: grid !important;
  grid-template-columns: minmax(0, 1.15fr) minmax(390px, .85fr) !important;
  grid-template-areas: "header main" !important;
  grid-template-rows: minmax(560px, calc(100vh - 112px)) !important;
  width: min(1180px, calc(100vw - 80px)) !important;
  max-height: 660px !important;
  min-height: 560px !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow: hidden !important;
  border: 1px solid rgba(31, 35, 43, .12) !important;
  border-radius: 28px !important;
  background: var(--zt-white) !important;
  box-shadow: 0 30px 90px rgba(32, 35, 42, .16) !important;
  transform: translateY(-2vh);
}

.pf-v5-c-login__header {
  grid-area: header !important;
  position: relative !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: center !important;
  min-width: 0 !important;
  margin: 0 !important;
  padding: 58px 66px !important;
  overflow: hidden !important;
  color: var(--zt-white) !important;
  text-align: left !important;
  background:
    linear-gradient(rgba(255, 255, 255, .07) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, .07) 1px, transparent 1px),
    radial-gradient(560px 400px at 100% 0, rgba(200, 16, 46, .48), transparent 68%),
    linear-gradient(145deg, #171a21 0%, #252a33 74%, #1d2027 100%) !important;
  background-size: 48px 48px, 48px 48px, auto, auto !important;
}

.pf-v5-c-login__header::before {
  content: "ZT INT.  ·  IDENTITY ACCESS";
  position: absolute;
  top: 58px;
  left: 66px;
  color: #ffb6c2;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .24em;
}

.pf-v5-c-login__header::after {
  content: "一个账号，安全访问公司的业务系统与数字化服务。\A\A统一身份  ·  分级权限  ·  全程审计";
  display: block;
  max-width: 500px;
  margin-top: 32px;
  color: rgba(255, 255, 255, .7);
  font-size: 15px;
  line-height: 1.9;
  letter-spacing: .02em;
  white-space: pre-line;
}

.pf-v5-c-login__header::selection,
.pf-v5-c-login__header *::selection {
  background: rgba(200, 16, 46, .55);
}

#kc-header-wrapper {
  position: relative !important;
  margin: 0 !important;
  padding: 100px 0 0 !important;
  color: var(--zt-white) !important;
  font-size: 0 !important;
  font-weight: 800 !important;
  line-height: 1.12 !important;
  letter-spacing: -.04em !important;
  text-transform: none !important;
}

#kc-header-wrapper::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 72px;
  height: 72px;
  border-radius: 50%;
  background: var(--zt-logo) center / contain no-repeat;
  filter: drop-shadow(0 10px 24px rgba(0, 0, 0, .22));
}

#kc-header-wrapper::after {
  content: "中土大地\A统一认证中心";
  display: block;
  max-width: 520px;
  color: var(--zt-white);
  font-size: clamp(36px, 4vw, 58px);
  line-height: 1.15;
  white-space: pre-line;
}

.pf-v5-c-login__main {
  grid-area: main !important;
  align-self: center !important;
  width: 100% !important;
  max-width: none !important;
  margin: 0 !important;
  padding: 0 54px !important;
  overflow: visible !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: var(--zt-white) !important;
  box-shadow: none !important;
}

.pf-v5-c-login__main::before {
  content: "统一身份认证";
  display: inline-flex;
  align-items: center;
  min-height: 28px;
  margin-bottom: 22px;
  padding: 0 11px;
  border: 1px solid rgba(200, 16, 46, .2);
  border-radius: 999px;
  background: rgba(200, 16, 46, .06);
  color: var(--zt-red);
  font-size: 11px;
  font-weight: 750;
  letter-spacing: .12em;
}

.pf-v5-c-login__main-header,
.pf-v5-c-login__main-body,
.pf-v5-c-login__main-footer {
  width: 100% !important;
  margin: 0 !important;
  padding-right: 0 !important;
  padding-left: 0 !important;
}

.pf-v5-c-login__main-header {
  padding-top: 0 !important;
}

#kc-page-title {
  margin: 0 0 10px !important;
  color: var(--zt-ink) !important;
  font-size: 30px !important;
  font-weight: 800 !important;
  line-height: 1.25 !important;
  letter-spacing: -.03em !important;
}

#kc-page-title::after {
  content: "使用您的致远 OA 账号继续";
  display: block;
  margin-top: 9px;
  color: var(--zt-muted);
  font-size: 13px;
  font-weight: 450;
  line-height: 1.7;
  letter-spacing: 0;
}

#kc-form-login {
  display: grid !important;
  gap: 17px !important;
  width: 100% !important;
  margin-top: 30px !important;
}

#kc-form-login .pf-v5-c-form__group,
#kc-form-login .form-group {
  margin: 0 !important;
}

.pf-v5-c-form__label,
.pf-v5-c-form__label-text {
  color: #454b55 !important;
  font-size: 13px !important;
  font-weight: 700 !important;
}

.pf-v5-c-form-control,
.pf-v5-c-input-group {
  width: 100% !important;
  min-height: 48px !important;
  border: 1px solid #d8d9dc !important;
  border-radius: 11px !important;
  background: #fbfbfa !important;
  box-shadow: none !important;
}

.pf-v5-c-form-control:focus-within,
.pf-v5-c-input-group:focus-within {
  border-color: var(--zt-red) !important;
  background: var(--zt-white) !important;
  box-shadow: 0 0 0 4px rgba(200, 16, 46, .1) !important;
}

#username,
#kc-attempted-username,
#password {
  min-height: 46px !important;
  color: var(--zt-ink) !important;
  -webkit-text-fill-color: var(--zt-ink) !important;
  caret-color: var(--zt-red) !important;
  font-size: 15px !important;
  font-weight: 600 !important;
  opacity: 1 !important;
}

#password-show-password,
.pf-v5-c-input-group > .pf-v5-c-button:not(.pf-m-primary) {
  border-color: #d8d9dc !important;
  background: #fbfbfa !important;
  color: var(--zt-red) !important;
}

#login-select-toggle,
.pf-v5-c-login__main-header-utilities {
  display: none !important;
}

#kc-login,
.pf-v5-c-button.pf-m-primary {
  width: 100% !important;
  min-height: 50px !important;
  margin-top: 7px !important;
  border: 0 !important;
  border-radius: 11px !important;
  background: linear-gradient(135deg, #d41536 0%, var(--zt-red) 62%, var(--zt-red-deep) 100%) !important;
  color: var(--zt-white) !important;
  font-size: 15px !important;
  font-weight: 750 !important;
  letter-spacing: .12em !important;
  box-shadow: 0 13px 28px rgba(200, 16, 46, .22) !important;
  transition: transform .16s ease, box-shadow .16s ease, filter .16s ease !important;
}

#kc-login:hover,
.pf-v5-c-button.pf-m-primary:hover {
  filter: brightness(.97) !important;
  transform: translateY(-1px) !important;
  box-shadow: 0 16px 32px rgba(200, 16, 46, .28) !important;
}

#kc-login:focus-visible,
.pf-v5-c-button.pf-m-primary:focus-visible {
  outline: 3px solid rgba(200, 16, 46, .22) !important;
  outline-offset: 3px !important;
}

.pf-v5-c-login__main-body::after {
  content: "账号密码仅用于统一身份验证，业务系统不会保存您的 OA 密码。";
  display: block;
  margin-top: 23px;
  color: #8a8f98;
  font-size: 11px;
  line-height: 1.75;
  text-align: center;
}

.pf-v5-c-alert.pf-m-danger {
  border-color: #efbdc6 !important;
  border-radius: 10px !important;
  background: #fff4f6 !important;
}

a {
  color: var(--zt-red) !important;
}

@media (max-width: 860px) {
  .pf-v5-c-login {
    align-items: flex-start !important;
    padding: 18px !important;
    overflow-y: auto !important;
  }

  .pf-v5-c-login::after {
    display: none;
  }

  .pf-v5-c-login__container {
    grid-template-columns: minmax(0, 1fr) !important;
    grid-template-areas: "header" "main" !important;
    grid-template-rows: auto auto !important;
    width: min(520px, calc(100vw - 36px)) !important;
    min-height: 0 !important;
    max-height: none !important;
    margin: 18px auto !important;
    border-radius: 22px !important;
    transform: none !important;
  }

  .pf-v5-c-login__header {
    min-height: 168px !important;
    padding: 32px 34px !important;
  }

  .pf-v5-c-login__header::before {
    top: 28px;
    left: 112px;
    font-size: 9px;
  }

  .pf-v5-c-login__header::after {
    content: "统一身份  ·  分级权限  ·  登录审计";
    margin: 17px 0 0 78px;
    font-size: 11px;
    line-height: 1.4;
    white-space: normal;
  }

  #kc-header-wrapper {
    min-height: 62px;
    padding: 7px 0 0 78px !important;
  }

  #kc-header-wrapper::before {
    width: 58px;
    height: 58px;
  }

  #kc-header-wrapper::after {
    content: "中土大地统一认证中心";
    font-size: 24px;
    line-height: 1.3;
    white-space: normal;
  }

  .pf-v5-c-login__main {
    padding: 38px 34px 34px !important;
  }
}

@media (max-width: 430px) {
  .pf-v5-c-login {
    padding: 10px !important;
  }

  .pf-v5-c-login__container {
    width: calc(100vw - 20px) !important;
    margin: 8px auto !important;
    border-radius: 18px !important;
  }

  .pf-v5-c-login__header {
    min-height: 142px !important;
    padding: 25px 24px !important;
  }

  .pf-v5-c-login__header::before {
    top: 24px;
    left: 92px;
  }

  .pf-v5-c-login__header::after {
    margin-left: 68px;
  }

  #kc-header-wrapper {
    min-height: 52px;
    padding-left: 68px !important;
  }

  #kc-header-wrapper::before {
    width: 50px;
    height: 50px;
  }

  #kc-header-wrapper::after {
    font-size: 20px;
  }

  .pf-v5-c-login__main {
    padding: 31px 24px 28px !important;
  }

  .pf-v5-c-login__main::before {
    margin-bottom: 17px;
  }

  #kc-page-title {
    font-size: 26px !important;
  }
}

/*
 * The application drawer already carries its own title and help copy.  An
 * explicit embed=1 login therefore uses a compact Keycloak composition rather
 * than inheriting the stacked mobile landing page.  Full-page and phone login
 * layouts stay unchanged because the marker is added only by the theme script
 * for the explicit embedded OIDC flow.
 */
html.zt-embedded-login,
html.zt-embedded-login body {
  min-height: 100% !important;
  background: var(--zt-white) !important;
}

html.zt-embedded-login .pf-v5-c-login {
  min-height: 100% !important;
  align-items: flex-start !important;
  justify-content: flex-start !important;
  padding: 0 !important;
  overflow-y: auto !important;
  background: var(--zt-white) !important;
}

html.zt-embedded-login .pf-v5-c-login::after {
  display: none !important;
}

html.zt-embedded-login .pf-v5-c-login__container {
  grid-template-columns: minmax(0, 1fr) !important;
  grid-template-areas: "header" "main" !important;
  grid-template-rows: auto auto !important;
  width: 100% !important;
  min-height: 0 !important;
  max-height: none !important;
  margin: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  transform: none !important;
}

html.zt-embedded-login .pf-v5-c-login__header {
  min-height: 104px !important;
  padding: 21px 28px !important;
}

html.zt-embedded-login .pf-v5-c-login__header::before,
html.zt-embedded-login .pf-v5-c-login__header::after {
  display: none !important;
}

html.zt-embedded-login #kc-header-wrapper {
  min-height: 62px !important;
  padding: 13px 0 0 72px !important;
}

html.zt-embedded-login #kc-header-wrapper::before {
  width: 58px !important;
  height: 58px !important;
}

html.zt-embedded-login #kc-header-wrapper::after {
  content: "中土大地统一认证中心";
  font-size: 22px !important;
  line-height: 1.3 !important;
  white-space: normal !important;
}

html.zt-embedded-login .pf-v5-c-login__main {
  align-self: start !important;
  padding: 22px 28px 26px !important;
}

html.zt-embedded-login .pf-v5-c-login__main::before {
  display: none !important;
}

html.zt-embedded-login #kc-page-title {
  margin-bottom: 5px !important;
  font-size: 25px !important;
}

html.zt-embedded-login #kc-page-title::after {
  margin-top: 5px !important;
  font-size: 12px !important;
}

html.zt-embedded-login #kc-form-login {
  gap: 14px !important;
  margin-top: 18px !important;
}

html.zt-embedded-login .pf-v5-c-form-control,
html.zt-embedded-login .pf-v5-c-input-group {
  min-height: 46px !important;
}

html.zt-embedded-login #username,
html.zt-embedded-login #kc-attempted-username,
html.zt-embedded-login #password {
  min-height: 44px !important;
}

html.zt-embedded-login #kc-login,
html.zt-embedded-login .pf-v5-c-button.pf-m-primary {
  min-height: 48px !important;
}

html.zt-embedded-login .pf-v5-c-login__main-body::after {
  margin-top: 17px !important;
}

@media (prefers-reduced-motion: reduce) {
  #kc-login,
  .pf-v5-c-button.pf-m-primary {
    transition: none !important;
  }
}