/* Estilos exclusivos da página de login. */

.login-shell {
  min-height:100svh;
  display:grid;
  grid-template-columns:1fr 1fr;
  background:var(--lab-white)
}

.login-story {
  background:var(--deep-navy);
  color:var(--lab-white);
  padding:44px 56px 30px;
  display:flex;
  flex-direction:column;
  position:relative;
  overflow:hidden
}

.login-story:after {
  content:'';
  position:absolute;
  width:550px;
  height:550px;
  border:1px solid #89946E44;
  border-radius:50%;
  right:-350px;
  top:-180px;
  pointer-events:none
}

.login-brand {
  display:flex;
  align-items:center;
  gap:11px;
  font-size:30px;
  letter-spacing:-1.5px
}

.login-brand img {
  border:1px solid #F3F1E81a;
  border-radius:50%
}

.login-brand strong {
  font-weight:800
}

.login-brand i {
  color:var(--moss);
  font-style:normal
}

.login-story-content {
  margin:auto 0;
  padding:70px 0 55px;
  max-width:490px
}

.login-kicker {
  font-size:9px;
  font-weight:600;
  letter-spacing:2.5px;
  color:#69765A;
  display:block
}

.login-story .login-kicker {
  color:var(--sage-light)
}

.login-story h1 {
  font-size:clamp(32px,3.3vw,52px);
  line-height:1.17;
  font-weight:400;
  letter-spacing:-2px;
  margin:24px 0
}

.login-story h1 em {
  font-style:normal;
  color:var(--sage-light)
}

.login-story-content>p {
  font-size:13px;
  line-height:1.9;
  color:#BCC5C4;
  max-width:365px
}

.login-preview {
  display:flex;
  align-items:center;
  gap:20px;
  margin-top:46px
}

.preview-note {
  width:175px;
  background:var(--sage-light);
  color:var(--deep-navy);
  padding:20px;
  transform:rotate(-5deg);
  box-shadow:0 20px 40px #0B132033;
  flex-shrink:0
}

.preview-note>span,.preview-flow>span {
  font-size:8px;
  letter-spacing:1.8px;
  display:block
}

.preview-note strong {
  font-size:19px;
  font-weight:500;
  line-height:1.35;
  display:block;
  margin:23px 0 8px
}

.preview-note>i {
  font-size:26px;
  font-style:normal;
  display:block;
  text-align:right
}

.preview-flow {
  padding:22px 19px;
  border:1px solid #C9D0C233;
  border-radius:10px;
  flex:1;
  min-width:0;
  background:#F3F1E805
}

.preview-flow>span {
  color:var(--sage-light);
  margin-bottom:18px
}

.preview-flow>div {
  display:flex;
  align-items:center;
  font-size:10px;
  gap:8px;
  border-bottom:1px solid #C9D0C21a;
  padding:12px 0;
  white-space:nowrap
}

.preview-flow>div:last-child {
  border:0
}

.preview-flow i {
  font-style:normal;
  color:var(--sage-light);
  margin-left:auto
}

.flow-dot {
  width:5px;
  height:5px;
  border-radius:50%;
  background:var(--moss);
  flex-shrink:0
}

.login-story-footer {
  display:flex;
  justify-content:space-between;
  align-items:center;
  font-size:8px;
  letter-spacing:2px;
  color:var(--sage-light)
}

.story-dot {
  width:15px;
  height:15px;
  border-radius:50%;
  background:var(--moss)
}

.login-entry {
  display:flex;
  flex-direction:column;
  padding:44px 52px 30px
}

.login-topline,.login-bottom {
  display:flex;
  justify-content:space-between;
  color:#6C7568;
  gap:20px;
  font-size:8px;
  letter-spacing:1.6px
}

.login-panel {
  width:100%;
  max-width:380px;
  margin:auto;
   padding:60px 0
}

.login-symbol {
  margin-bottom:30px
}

.login-panel h2 {
  font-size:34px;
  line-height:1.24;
  font-weight:500;
  letter-spacing:-1.3px;
  white-space:pre-line;
  margin:17px 0
}

.login-panel>p {
  font-size:12px;
  line-height:1.9;
  color:#63705F;
  max-width:350px
}

.login-submit {
  margin-top:32px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  background:var(--deep-navy);
  color:var(--lab-white);
  border-radius:7px;
  padding:18px 21px;
  font-size:12px;
  font-weight:600;
  transition:background .15s,transform .15s
}

.login-submit:hover {
  background:var(--night-lab);
  transform:translateY(-1px)
}

.login-submit>span:last-child {
  font-size:18px;
  line-height:15px
}

.login-security {
  display:flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  color:#697363;
  font-size:10px;
  line-height:1.7;
  margin-top:20px
}

.login-security>span:first-child {
  font-size:21px;
  color:var(--moss)
}

.login-divider {
  height:1px;
  background:#D8DCD2;
  margin:32px 0 23px
}

.login-benefits {
  display:flex;
  justify-content:space-between;
  color:#63705F;
  font-size:10px
}

.login-bottom {
  letter-spacing:0;
  font-size:9px
}

.login-account {
  display:flex;
  align-items:center;
  gap:10px;
  padding:14px;
  border:1px solid #D8DCD2;
  border-radius:8px;
  margin-top:24px
}

.login-account strong {
  font-size:11px;
  display:block;
  overflow-wrap:anywhere
}

.login-account small {
  font-size:10px;
  color:#63705F;
  overflow-wrap:anywhere
}

.account-check {
  color:#63754E;
  margin-left:auto
}

.login-switch {
  display:block;
  text-align:center;
  margin-top:18px;
  font-size:11px;
  color:#586749;
  text-decoration:underline;
  text-underline-offset:4px
}

.profile-account {
  min-width:0;
  flex:1
}

.profile-account strong,.profile-account small {
  display:block;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap
}

.signout {
  font-size:21px;
  color:#52613F;
  padding:5px
}

.profile .avatar {
  flex-shrink:0
}


@media(min-width:1500px) {
  .login-story {
  padding-left:80px;
  padding-right:80px
}

.login-story-content {
  max-width:550px
}

.login-preview {
  gap:30px
}

.preview-note {
  width:195px
}

.preview-flow {
  padding:28px
}

.preview-flow>div {
  font-size:12px
}

.login-panel {
  max-width:400px
}

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


}


@media(max-width:1050px) {
  .login-story {
  padding:32px
}

.login-entry {
  padding:32px
}

.login-preview {
  gap:12px
}

.preview-note {
  width:145px;
  padding:16px
}

.preview-flow {
  padding:15px 10px
}

.preview-flow>div {
  font-size:9px;
  gap:5px
}

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


}


@media(max-width:760px) {
  .login-shell {
  grid-template-columns:1fr
}

.login-story {
  padding:22px 25px
}

.login-brand {
  font-size:25px
}

.login-brand img {
  width:38px;
  height:38px
}

.login-story-content {
  padding:25px 0 5px
}

.login-story h1 {
  font-size:31px;
  margin:12px 0;
  letter-spacing:-1px
}

.login-story h1 br:first-child {
  display:none
}

.login-story h1 br:first-child:after {
  content:' '
}

.login-story-content>p,.login-preview,.login-story-footer,.login-story-content>.login-kicker {
  display:none
}

.login-entry {
  padding:25px;
  min-height:570px
}

.login-topline {
  font-size:7px
}

.login-panel {
  padding:38px 0
}

.login-symbol {
  display:none
}

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

.login-bottom {
  font-size:8px
}

.profile {
  display:flex;
  flex-direction:column
}

.sidebar-bottom {
  display:block;
  padding:15px 0 0
}

.sidebar-bottom .tip,.profile-account,.profile>.avatar {
  display:none
}

.login-benefits {
  font-size:9px
}


}