/* MQTT Hub login design — scoped to login view */
#login-view{
  grid-template-columns:57% 43%;
  background:#fff;
  color:#1c2c32;
}
#login-view .login-intro{
  min-height:100vh;
  padding:48px clamp(32px,4.5vw,80px);
  color:#1c2c32;
  background-color:#f1f6f5;
  background-image:
    linear-gradient(#d8e4e533 1px,transparent 1px),
    linear-gradient(90deg,#d8e4e533 1px,transparent 1px);
  background-size:64px 64px;
}
#login-view .brand{
  font-size:26px;
  letter-spacing:-.7px;
  gap:13px;
}
#login-view .logo{
  width:42px;height:42px;
  border-radius:11px;
  font-size:26px;
  background:#078775;
}
#login-view .intro-body{margin:64px 0 48px}
#login-view .intro-body h1{
  font-size:clamp(28px,3vw,46px);
  letter-spacing:-1.5px;
  line-height:1.3;
  margin:0 0 18px;
}
#login-view .intro-body p{
  color:#63767b;
  font-size:16px;
  line-height:1.8;
}
#login-view .hub-diagram{
  display:block;
  width:100%;
  height:auto;
  margin:48px auto 0;
  overflow:visible;
}
#login-view .login-intro>small{
  color:#657a7e;
  font-size:13px;
  letter-spacing:.5px;
}
#login-view .login-form{
  padding:56px clamp(28px,5vw,88px);
}
#login-view .login-box{width:min(390px,100%)}
#login-view .login-box h2{
  font-size:34px;
  line-height:1.35;
  letter-spacing:-1px;
  margin-bottom:12px;
}
#login-view .login-box>.muted{
  font-size:15px;
  color:#78868b;
}
#login-view .login-box form{margin:44px 0 26px}
#login-view label{
  font-size:14px;
  font-weight:600;
  margin-bottom:24px;
}
#login-view input{
  height:50px;
  padding:12px 15px;
  border:1px solid #ccd8dc;
  border-radius:7px;
  background:#fff;
  font-size:15px;
  margin-top:10px;
}
#login-view input:focus{
  border-color:#078775;
  outline:3px solid #07877518;
  outline-offset:1px;
}
#login-view input::placeholder{color:#9aa5ac}
#login-view .primary{
  height:50px;
  align-items:center;
  padding:0 20px;
  background:#078775;
  box-shadow:none;
  font-size:15px;
  border-radius:7px;
  margin-top:8px;
}
#login-view .primary:hover{background:#066f61}
#login-view .primary:disabled{cursor:wait;opacity:.6}
#login-view .primary span{font-size:22px;font-weight:400}
#login-view .login-box>small{font-size:12px;color:#8a969b}
#login-view .error{margin:15px 0 0}
@media(max-width:1100px) and (min-width:701px){
  #login-view{grid-template-columns:52% 48%}
  #login-view .login-intro{padding:36px 28px}
  #login-view .login-form{padding:40px 32px}
  #login-view .intro-body h1{font-size:30px}
  #login-view .intro-body p{font-size:14px}
}
@media(max-width:700px){
  #login-view{grid-template-columns:1fr}
  #login-view .login-intro{display:none}
  #login-view .login-form{min-height:100svh;padding:40px 26px}
  #login-view .login-box:before{
    content:"M  /  MQTT Hub";
    display:block;
    color:#078775;
    font-size:20px;
    font-weight:700;
    margin-bottom:54px;
  }
  #login-view .login-box h2{font-size:29px}
}