.login-page {
  min-width:320px;
  min-height:100vh;
  margin:0;
  background:radial-gradient(circle at 5% 10%,#ffedd1a8,transparent 31%),radial-gradient(circle at 98% 92%,#cce9e5,transparent 33%),#f5f7f3
}


.login-shell {
  display:grid;
  grid-template-columns:1.12fr .88fr;
  width:min(1450px,calc(100% - 56px));
  min-height:min(844px,calc(100vh - 56px));
  margin:28px auto;
  overflow:hidden;
  border-radius:32px;
  background:#fff;
  box-shadow:0 26px 82px rgba(37,91,92,.12),0 2px 12px rgba(37,91,92,.035)
}


.login-hero,.login-zone {
  position:relative;
  overflow:hidden
}

.login-hero {
  display:flex;
  min-height:785px;
  flex-direction:column;
  padding:43px 53px 37px;
  isolation:isolate;
  background:linear-gradient(149deg,#fffaed 1%,#fff7e0 38%,#e3f3e8 100%)
}

.login-hero::before,.login-hero::after,.login-zone::before {
  position:absolute;
  z-index:-1;
  border-radius:50%;
  content:""
}

.login-hero::before {
  right:-130px;
  bottom:-265px;
  left:-130px;
  height:455px;
  background:linear-gradient(35deg,#b2dfcf66,#d9eed670)
}

.login-hero::after {
  top:-147px;
  right:-132px;
  width:310px;
  height:310px;
  background:#ffe5a3aa
}


.login-brand {
  display:flex;
  align-items:center;
  gap:13px
}

.login-brand-mark {
  display:grid;
  width:53px;
  height:53px;
  place-items:center;
  border:2px solid #fff9de;
  border-radius:17px;
  background:#fff0c9;
  box-shadow:0 6px 14px #d4a44b2b;
  font-size:31px
}

.login-brand strong,.login-brand small,.login-feature strong,.login-feature small {
  display:block
}

.login-brand strong {
  color:#173d4d;
  font-size:23px;
  font-weight:850;
  letter-spacing:1px
}

.login-brand small {
  margin-top:4px;
  color:#68828b;
  font-size:12px;
  font-weight:600;
  letter-spacing:2.8px
}


.login-introduction {
  margin-top:70px
}

.login-kicker {
  display:inline-flex;
  align-items:center;
  gap:9px;
  margin:0;
  padding:9px 15px;
  border:1px solid #f4db9a;
  border-radius:100px;
  color:#926f3a;
  background:#ffe9b28c;
  font-size:13px;
  font-weight:750;
  letter-spacing:1.1px
}

.login-kicker span {
  width:9px;
  height:9px;
  border-radius:50%;
  background:#efa638;
  box-shadow:0 0 0 4px #f5d68c80
}

.login-introduction h1 {
  max-width:560px;
  margin:21px 0 14px;
  color:#173d48;
  font-size:clamp(31px,3.1vw,47px);
  font-weight:850;
  letter-spacing:-1.25px;
  line-height:1.37
}

.login-introduction h1 em {
  color:#e6a14e;
  font-style:normal
}

.login-introduction>p:last-child {
  max-width:500px;
  margin:0;
  color:#728780;
  font-size:15px;
  line-height:1.95
}


.mascot-stage {
  position:relative;
  display:flex;
  min-height:258px;
  flex:1;
  align-items:center;
  justify-content:center;
  margin:5px 0 -5px
}

.stage-hill {
  position:absolute;
  bottom:9px;
  width:430px;
  height:110px;
  border-radius:50%;
  background:#b9dbc98c
}

.stage-hill::after {
  position:absolute;
  inset:29px 60px -17px;
  border-radius:50%;
  background:#d4e7d2;
  content:""
}

.stage-squirrel {
  display:grid;
  z-index:1;
  width:clamp(185px,17vw,235px);
  aspect-ratio:1;
  place-items:center;
  border:5px solid #fff7de;
  border-radius:32%;
  background:linear-gradient(145deg,#ffe9bd,#ffd27f);
  box-shadow:0 23px 33px #c89b5c30,inset 0 2px #fff9e7;
  font-size:clamp(95px,9vw,132px);
  transform:rotate(-5deg)
}

.stage-spark {
  position:absolute;
  z-index:2;
  color:#e4a244;
  font-size:27px
}

.stage-spark.one {
  top:17%;
  left:21%;
  transform:rotate(15deg)
}

.stage-spark.two {
  top:15%;
  right:20%;
  color:#6fb7a1;
  font-size:23px
}

.stage-note {
  position:absolute;
  z-index:2;
  display:flex;
  align-items:center;
  gap:9px;
  padding:11px 15px;
  border:1px solid #fff;
  border-radius:16px;
  color:#4c696a;
  background:#fffdf7f2;
  box-shadow:0 9px 23px #526e5c18;
  font-size:12px;
  font-weight:700;
  white-space:nowrap
}

.stage-note span {
  display:grid;
  width:27px;
  height:27px;
  place-items:center;
  border-radius:10px;
  color:#d39332;
  background:#ffe9b8;
  font-size:17px
}

.stage-note.left {
  top:39%;
  left:8%;
  transform:rotate(-7deg)
}

.stage-note.right {
  right:1%;
  bottom:23%;
  transform:rotate(6deg)
}

.stage-note.right span {
  color:#4b977e;
  background:#daf1e6
}


.login-features {
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:12px
}

.login-feature {
  display:flex;
  align-items:center;
  gap:11px;
  min-width:0;
  padding:16px 12px;
  border:1px solid #ffffffc9;
  border-radius:18px;
  background:#ffffffad
}

.login-feature i {
  display:grid;
  width:38px;
  height:38px;
  flex:0 0 38px;
  place-items:center;
  border-radius:13px;
  font-size:18px;
  font-style:normal;
  font-weight:900
}

.login-feature i.amber {
  color:#ce8c35;
  background:#fff0c9
}

.login-feature i.aqua {
  color:#378f91;
  background:#e0f3f1
}

.login-feature i.violet {
  color:#9174c5;
  background:#efe9fc
}

.login-feature strong {
  color:#324c54;
  font-size:13px;
  font-weight:850;
  white-space:nowrap
}

.login-feature small {
  margin-top:3px;
  color:#83928a;
  font-size:11px;
  white-space:nowrap
}


.login-zone {
  display:flex;
  align-items:center;
  justify-content:center;
  padding:60px 65px;
  background:#fffefd
}

.login-zone::before {
  right:-180px;
  bottom:-150px;
  width:260px;
  height:260px;
  background:#eff9f7
}

.login-panel {
  width:100%;
  max-width:430px
}

.welcome-icon {
  display:grid;
  width:58px;
  height:58px;
  place-items:center;
  margin-bottom:25px;
  border:1px solid #ebf0eb;
  border-radius:20px;
  color:#518e76;
  background:#f1f8f1;
  font-size:30px
}

.login-panel-kicker {
  margin:0 0 13px;
  color:#d19d50;
  font-size:13px;
  font-weight:750;
  letter-spacing:1.2px
}

.login-panel h2 {
  margin:0;
  color:#153d49;
  font-size:39px;
  font-weight:850;
  letter-spacing:-1px;
  line-height:1.25
}

.login-panel h2 span {
  color:#eba93f;
  font-size:.78em
}

.login-description {
  margin:17px 0 41px;
  color:#7f9193;
  font-size:15px;
  line-height:1.8
}

.login-panel label {
  display:block;
  margin-bottom:12px;
  color:#35525b;
  font-size:14px;
  font-weight:800
}


.license-field {
  display:flex;
  height:61px;
  align-items:center;
  border:1.5px solid #dce8e7;
  border-radius:15px;
  background:#fcfefe;
  transition:border-color .2s,box-shadow .2s
}

.license-field:focus-within {
  border-color:#5faab0;
  box-shadow:0 0 0 4px #54acb014
}

.license-field.is-invalid {
  border-color:#d47970;
  box-shadow:0 0 0 4px #d4797014
}

.license-icon {
  margin-left:20px;
  color:#90a8aa;
  font-size:22px
}

.license-field input {
  width:100%;
  height:100%;
  min-width:0;
  border:0;
  padding:0 10px 0 13px;
  outline:0;
  color:#214550;
  background:transparent;
  font-size:16px;
  letter-spacing:1px
}

.license-field input::placeholder {
  color:#a4b4b4;
  font-size:14px;
  letter-spacing:0
}

.visibility-toggle {
  display:grid;
  width:39px;
  height:39px;
  flex:0 0 39px;
  place-items:center;
  margin-right:12px;
  border:0;
  border-radius:11px;
  color:#91a5a7;
  background:transparent;
  cursor:pointer;
  font-size:16px
}

.visibility-toggle:hover {
  color:#387c83;
  background:#eef6f5
}

.login-message {
  min-height:20px;
  margin:10px 0 0;
  color:#96a5a5;
  font-size:12px;
  line-height:1.65
}

.login-message.is-error {
  color:#bf665e
}

.login-message.is-success {
  color:#248476
}


.login-submit {
  display:flex;
  width:100%;
  height:61px;
  align-items:center;
  justify-content:center;
  gap:12px;
  margin-top:25px;
  border:0;
  border-radius:15px;
  color:#fff;
  background:linear-gradient(120deg,#258b91,#237781);
  box-shadow:0 10px 21px #25868c30;
  cursor:pointer;
  font-size:16px;
  font-weight:800;
  letter-spacing:1.1px;
  transition:transform .16s,box-shadow .16s
}

.login-submit:hover:not(:disabled) {
  transform:translateY(-2px);
  box-shadow:0 13px 23px #25868c40
}

.login-submit:disabled {
  cursor:wait;
  opacity:.72
}

.login-submit b {
  font-size:21px;
  font-weight:500
}

.login-help {
  display:flex;
  align-items:flex-start;
  gap:10px;
  margin-top:27px;
  padding:17px 16px;
  border:1px solid #edf5f1;
  border-radius:14px;
  color:#819394;
  background:#f6faf8;
  font-size:12px;
  line-height:1.85
}

.login-help>span {
  display:grid;
  width:17px;
  height:17px;
  flex:0 0 17px;
  place-items:center;
  margin-top:2px;
  border:1px solid #7a9b97;
  border-radius:50%;
  color:#7a9b97;
  font-family:serif;
  font-weight:800;
  line-height:1
}

.login-help p {
  margin:0
}

.login-footer {
  position:absolute;
  right:0;
  bottom:38px;
  left:0;
  margin:0;
  text-align:center;
  color:#b3c0bd;
  font-size:11px;
  letter-spacing:1.3px
}


@media(max-width:960px) {
  .login-shell {
  width:calc(100% - 28px);
  margin:14px auto;
  grid-template-columns:1fr 1fr;
  min-height:760px
}

.login-hero {
  min-height:760px;
  padding:35px 28px 31px
}

.login-zone {
  padding:38px 34px
}

.login-introduction {
  margin-top:65px
}

.login-introduction h1 {
  font-size:32px
}

.stage-note {
  display:none
}

.login-features {
  gap:6px
}

.login-feature {
  flex-direction:column;
  gap:7px;
  padding:13px 8px;
  text-align:center
}

.login-feature i {
  width:33px;
  height:33px;
  flex-basis:33px
}

.login-feature small {
  font-size:10px
}

.login-panel h2 {
  font-size:34px
}


}


@media(max-width:720px) {
  .login-shell {
  display:flex;
  width:100%;
  min-height:100vh;
  margin:0;
  border-radius:0;
  box-shadow:none;
  flex-direction:column
}

.login-hero {
  min-height:0;
  padding:24px 24px 21px
}

.login-hero::before {
  bottom:-370px
}

.login-brand {
  gap:10px
}

.login-brand-mark {
  width:43px;
  height:43px;
  border-radius:13px;
  font-size:25px
}

.login-brand strong {
  font-size:19px
}

.login-brand small {
  margin-top:2px;
  font-size:10px
}

.login-introduction {
  margin-top:25px
}

.login-kicker {
  padding:7px 11px;
  font-size:11px
}

.login-introduction h1 {
  max-width:290px;
  margin:12px 0 7px;
  font-size:27px;
  line-height:1.4
}

.login-introduction>p:last-child {
  max-width:340px;
  font-size:12px;
  line-height:1.65
}

.mascot-stage {
  position:absolute;
  top:166px;
  right:13px;
  width:119px;
  height:105px;
  min-height:0;
  pointer-events:none
}

.stage-squirrel {
  width:95px;
  border-width:3px;
  font-size:55px;
  transform:rotate(8deg)
}

.stage-hill,.stage-spark,.stage-note {
  display:none
}

.login-features {
  width:100%;
  max-width:430px;
  margin-top:27px;
  gap:7px
}

.login-feature {
  padding:10px 4px;
  border-radius:12px
}

.login-feature i {
  width:30px;
  height:30px;
  flex-basis:30px;
  border-radius:10px
}

.login-feature strong {
  font-size:11px
}

.login-feature small {
  display:none
}

.login-zone {
  display:block;
  flex:1;
  padding:32px 26px 70px
}

.login-panel {
  margin:0 auto
}

.welcome-icon {
  display:none
}

.login-panel-kicker {
  margin-bottom:8px;
  font-size:12px
}

.login-panel h2 {
  font-size:29px
}

.login-description {
  margin:10px 0 26px;
  font-size:13px
}

.license-field,.login-submit {
  height:56px
}

.login-help {
  margin-top:23px
}

.login-footer {
  bottom:19px;
  font-size:10px
}


}


@media(max-width:370px) {
  .login-hero {
  padding-right:16px;
  padding-left:16px
}

.login-introduction h1 {
  font-size:24px
}

.mascot-stage {
  right:0
}

.login-zone {
  padding-right:18px;
  padding-left:18px
}


}