:root{
  --brand:#ff7a00;
  --left-bg:#2f343b;
  --left-text:#ffffff;
  --page-bg:#ffffff;
}

*{
  box-sizing:border-box;
}

html,
body{
  height:100%;
  margin:0;
  padding:0;
  background:var(--page-bg);
  font-family:system-ui,-apple-system,"Segoe UI",Roboto,Ubuntu,Cantarell,"Helvetica Neue",Arial,"Noto Sans",sans-serif;
  overflow-x:hidden;
}

.split-wrap{
  min-height:100vh;
  display:grid;
  grid-template-columns: 1fr 1fr;
  width:100%;
}

.left{
  background:var(--left-bg);
  display:flex;
  align-items:center;
  justify-content:center;
  padding:2rem;
}

.left-inner{
  max-width:520px;
  width:100%;
  color:var(--left-text);
  text-align:center;
}

.logo{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:18px;
  flex-wrap:wrap;
}

.logo img{
  width:130px;
  max-width:40vw;
}

.brand-title{
  color:var(--brand);
  font-weight:800;
  font-size:clamp(26px,4vw,48px);
  letter-spacing:2px;
  line-height:1.1;
}

.brand-sub{
  color:#d8dde3;
  font-weight:600;
  letter-spacing:.35rem;
  font-size:clamp(11px,1.2vw,15px);
}

.right{
  display:flex;
  align-items:center;
  justify-content:center;
  padding:2rem;
  background:#fff;
}

.card-like{
  width:100%;
  max-width:420px;
}

.signin-title{
  font-size:clamp(20px,2vw,26px);
  font-weight:700;
  margin-bottom:14px;
}

.btn-brand{
  background-color:var(--brand);
  color:#fff;
  width:100%;
  height:42px;
  border:none;
  border-radius:6px;
  font-size:16px;
}

.btn-brand:focus{
  outline:2px solid #ffb366;
  outline-offset:2px;
}

.muted{
  color:#6c757d;
  font-size:.9rem;
}

.alert{
  padding:.55rem .75rem;
  font-size:.9rem;
}

@media (max-width: 1200px) {
  .left,
  .right{
    padding:1.75rem;
  }

  .left-inner{
    max-width:460px;
  }

  .card-like{
    max-width:380px;
  }
}

@media (max-width: 992px){
  .split-wrap{
    grid-template-columns: 1fr;
  }

  .left{
    min-height:30vh;
  }

  .right{
    align-items:flex-start;
    padding-top:1.5rem;
  }
}

@media (max-width: 768px){
  .left,
  .right{
    padding:1.5rem;
  }

  .card-like{
    max-width:100%;
  }
}

@media (max-width: 576px){
  .left,
  .right{
    padding:1.25rem;
  }

  .logo{
    flex-direction:column;
  }

  .brand-title{
    font-size:clamp(24px,8vw,32px);
  }

  .brand-sub{
    letter-spacing:.25rem;
  }

  .logo img{
    width:95px;
  }
}

@media (max-width: 360px){
  .brand-title{
    font-size:24px;
    letter-spacing:1px;
  }

  .brand-sub{
    font-size:12px;
  }

  input.form-control{
    font-size:14px;
  }

  .right{
    padding-inline:1rem;
  }
}

@media (min-width: 1000px) and (max-height: 900px){
  .left-inner{
    transform:scale(0.9);
  }

  .card-like{
    transform:scale(0.92);
  }
}