/* Tenant login v3: rendered UI based on the health examination reference layout. */
body {
  padding:42px;
  background:
    linear-gradient(128deg,rgba(219,240,241,.48) 0,rgba(255,255,255,.82) 28%,transparent 47%),
    radial-gradient(circle at 92% 12%,rgba(183,239,224,.45),transparent 29%),
    radial-gradient(circle at 12% 86%,rgba(212,241,236,.52),transparent 31%),
    #f4fbfb;
}

body::before {
  content:"";
  position:fixed;
  left:-70px;
  top:-45px;
  width:min(950px,58vw);
  height:455px;
  z-index:0;
  pointer-events:none;
  background:
    linear-gradient(105deg,transparent 0 17%,rgba(88,137,142,.16) 18%,rgba(88,137,142,.045) 21%,transparent 23% 39%,rgba(88,137,142,.12) 40%,rgba(88,137,142,.035) 44%,transparent 46%),
    linear-gradient(84deg,transparent 0 9%,rgba(88,137,142,.12) 10%,rgba(88,137,142,.028) 13%,transparent 15% 29%,rgba(88,137,142,.085) 30%,transparent 34%);
  filter:blur(10px);
  opacity:.8;
  transform:rotate(-2deg);
}

.decor-left {
  left:-110px;
  top:auto;
  bottom:-155px;
  width:330px;
  height:330px;
  border-radius:50%;
  background:rgba(192,238,229,.42);
}

.decor-ring {
  right:75px;
  top:-280px;
  width:500px;
  height:500px;
  border:92px solid rgba(201,239,230,.36);
}

.decor-right {
  right:-125px;
  top:45px;
  width:410px;
  height:300px;
  border-radius:50%;
  background:linear-gradient(145deg,rgba(203,243,235,.28),rgba(109,218,193,.4));
  transform:rotate(-13deg);
}

.decor-bottom {
  display:none;
}

.corner-plant {
  left:auto;
  right:-24px;
  bottom:-28px;
  width:265px;
  height:390px;
  opacity:.52;
  filter:blur(2.7px) saturate(1.4) brightness(.82);
  transform:scaleX(-1);
}

.login-shell {
  width:min(1240px,82vw);
  min-height:min(610px,calc(100svh - 118px));
  grid-template-columns:60% 40%;
  border-radius:17px;
  box-shadow:0 30px 82px rgba(43,102,96,.16),0 8px 24px rgba(75,133,127,.07);
  transform:translateY(-18px);
}

.intro {
  min-height:610px;
  padding:50px 60px 35px;
  background:linear-gradient(116deg,#fff 3%,#f9fdfc 58%,#eefaf7 100%);
}

.intro::before {
  content:"";
  position:absolute;
  right:-220px;
  top:-100px;
  width:660px;
  height:760px;
  border-radius:50%;
  background:linear-gradient(180deg,rgba(199,241,230,.62) 0%,rgba(202,242,231,.45) 38%,rgba(216,246,239,.18) 70%,rgba(231,250,246,0) 100%);
  opacity:.88;
}

.intro::after {
  display:none;
}

.intro-copy {
  position:relative;
  z-index:5;
  width:54%;
  margin-top:0;
}

.kicker {
  padding:0;
  border:0;
  color:#20a786;
  font-size:13px;
  line-height:1.6;
  font-weight:650;
  letter-spacing:.2em;
}

.kicker::after {
  content:"";
  display:block;
  width:52px;
  height:3px;
  margin-top:23px;
  border-radius:3px;
  background:linear-gradient(90deg,#16a781,#75d8be);
}

.intro h1 {
  margin:43px 0 9px;
  color:var(--ink);
  font-size:clamp(34px,2.35vw,42px);
  line-height:1.25;
  letter-spacing:.01em;
  font-weight:790;
  white-space:nowrap;
}

.intro h1 em {
  color:#13a67f;
}

.intro-desc {
  color:#7f8da0;
  font-size:20px;
  line-height:1.7;
  font-weight:500;
}

.intro-meta {
  margin-top:29px;
  color:#738197;
  font-size:14px;
  font-weight:650;
  letter-spacing:.36em;
  white-space:nowrap;
}

.art-window {
  right:8px;
  bottom:35px;
  width:60%;
  height:420px;
  overflow:visible;
  background:transparent;
}

.art-window::before {
  content:"";
  position:absolute;
  z-index:0;
  left:6%;
  right:-2%;
  bottom:-2px;
  height:78px;
  border-radius:50%;
  background:radial-gradient(ellipse at center,rgba(86,174,157,.29) 0,rgba(113,197,181,.14) 38%,rgba(159,220,208,.04) 68%,transparent 76%);
  filter:blur(18px);
  transform:scaleX(1.08);
}

.art-window::after {
  display:none;
}

.art-window img {
  position:absolute;
  z-index:1;
  left:auto;
  right:-84px;
  top:auto;
  bottom:0;
  width:630px;
  filter:saturate(.9) brightness(1.035) contrast(.95);
}

.intro-foot {
  left:60px;
  bottom:35px;
  color:#8492a1;
  font-size:12px;
  letter-spacing:.12em;
}

.intro-foot::before {
  content:"";
  display:inline-block;
  width:44px;
  margin-right:14px;
  vertical-align:middle;
  border-top:1px solid #9aa8b2;
}

.intro-foot::after {
  display:none;
}

.login-panel {
  min-height:610px;
  padding:65px 58px 52px;
  background:rgba(255,255,255,.98);
}

.panel-inner {
  max-width:390px;
  transform:translateY(-22px);
}

.login-header {
  display:flex;
  align-items:center;
  gap:16px;
  margin-bottom:33px;
}

.login-brand-logo {
  display:block;
  flex:0 0 72px;
  width:72px;
  height:72px;
  object-fit:contain;
}

.login-title {
  font-size:31px;
  line-height:1.3;
}

.login-subtitle {
  margin-top:8px;
  color:#8593a5;
  font-size:17px;
}

.field-label {
  position:absolute;
  width:1px;
  height:1px;
  padding:0;
  margin:-1px;
  overflow:hidden;
  clip:rect(0,0,0,0);
  white-space:nowrap;
  border:0;
}

.layui-form-item {
  margin-bottom:19px;
}

.field-icon {
  left:19px;
  width:21px;
  height:21px;
}

.login-panel .layui-input {
  height:56px;
  padding:0 50px 0 55px;
  border-color:#d9e2e8;
  border-radius:8px;
  color:#253849;
  background:#fbfcfd;
  font-size:14px;
  box-shadow:0 3px 10px rgba(48,72,77,.025);
}

.login-panel .layui-input:-webkit-autofill,
.login-panel .layui-input:-webkit-autofill:hover,
.login-panel .layui-input:-webkit-autofill:focus,
.login-panel .layui-input:-webkit-autofill:active {
  -webkit-text-fill-color:#253849 !important;
  caret-color:#253849;
  box-shadow:0 0 0 1000px #fbfcfd inset,0 3px 10px rgba(48,72,77,.025) !important;
  transition:background-color 9999s ease-out 0s;
}

.password-toggle {
  width:52px;
  height:56px;
}

.login-panel .login-btn {
  height:58px;
  line-height:58px;
  margin-top:1px;
  border-radius:8px;
  background:linear-gradient(100deg,#56cfa5,#2dbf92);
  box-shadow:0 10px 24px rgba(42,185,143,.19);
  font-size:17px;
}

.login-options {
  min-height:28px;
  margin-top:-5px;
  font-size:14px;
}

.checkmark {
  width:20px;
  height:20px;
  border-radius:4px;
}

.forgot {
  font-size:14px;
  font-weight:650;
}

.browser-tip {
  gap:17px;
  margin-top:34px;
  color:#9ba8b5;
  font-size:11px;
}

.page-footer {
  position:fixed;
  z-index:2;
  left:50%;
  bottom:max(22px,calc(50% - 380px));
  transform:translateX(-50%);
  color:#8796a8;
  font-size:12px;
  letter-spacing:.04em;
  white-space:nowrap;
}

@media (max-width:1240px) {
  .login-shell {
    width:min(1080px,92vw);
    grid-template-columns:57% 43%;
  }

  .intro {
    padding-left:42px;
    padding-right:38px;
  }

  .intro-copy {
    width:61%;
  }

  .intro h1 {
    font-size:35px;
  }

  .art-window {
    right:-8px;
    width:54%;
  }

  .art-window img {
    right:-68px;
    width:545px;
  }

  .intro-foot {
    left:42px;
  }

  .login-panel {
    padding-left:42px;
    padding-right:42px;
  }
}

@media (max-width:860px) {
  body {
    padding:18px;
    overflow:auto;
  }

  body::before,
  .decor,
  .corner-plant,
  .page-footer {
    display:none;
  }

  .login-shell {
    width:min(470px,100%);
    min-height:0;
    display:block;
    border-radius:20px;
    transform:none;
  }

  .intro {
    min-height:205px;
    padding:27px 30px;
  }

  .intro::before {
    right:-105px;
    top:-70px;
    width:300px;
    height:340px;
  }

  .intro-copy {
    width:68%;
  }

  .kicker,
  .intro-desc,
  .intro-meta,
  .intro-foot {
    display:none;
  }

  .intro h1 {
    margin:8px 0 0;
    font-size:28px;
    line-height:1.35;
    white-space:normal;
  }

  .art-window {
    right:0;
    bottom:0;
    width:45%;
    height:195px;
    overflow:hidden;
  }

  .art-window img {
    left:auto;
    right:-10px;
    top:auto;
    bottom:0;
    width:235px;
    filter:saturate(.92) brightness(1.03) contrast(.96);
  }

  .login-panel {
    min-height:475px;
    padding:42px 34px 30px;
  }

  .panel-inner {
    transform:none;
  }

  .login-header {
    margin-bottom:27px;
  }

  .login-title {
    font-size:28px;
  }

  .login-subtitle {
    font-size:15px;
  }
}

@media (max-width:430px) {
  body {
    padding:0;
    align-items:stretch;
    background:#fff;
  }

  .login-shell {
    width:100%;
    border-radius:0;
    box-shadow:none;
  }

  .intro {
    min-height:180px;
    padding:24px 22px;
  }

  .intro h1 {
    font-size:25px;
  }

  .login-panel {
    min-height:calc(100svh - 180px);
    align-items:flex-start;
    padding:38px 23px 27px;
  }

  .browser-tip {
    white-space:normal;
    gap:11px;
    text-align:center;
  }
}

@media (max-height:760px) and (min-width:861px) {
  body {
    padding:20px;
  }

  .login-shell {
    min-height:570px;
    transform:translateY(-8px);
  }

  .intro,
  .login-panel {
    min-height:570px;
  }

  .intro {
    padding-top:38px;
  }

  .intro h1 {
    margin-top:31px;
  }

  .art-window {
    bottom:35px;
    height:365px;
  }

  .intro-foot {
    bottom:26px;
  }

  .login-panel {
    padding-top:50px;
    padding-bottom:44px;
  }

  .panel-inner {
    transform:translateY(-10px);
  }

  .login-header {
    margin-bottom:26px;
  }

  .layui-form-item {
    margin-bottom:16px;
  }

  .browser-tip {
    margin-top:25px;
  }
}
