html, body { height: 100%; }

body.app.no-chrome{
  background-color:#0e0e0e !important;
  background-image:url("/static/images/back.png") !important;
  background-repeat:repeat !important;
  background-position:top left !important;
  background-size:auto !important;
  background-attachment:fixed !important;

  display:grid;
  place-items:center;
}

.app.no-chrome .page,
.app.no-chrome main,
.app.no-chrome .content,
.app.no-chrome .container{ background:transparent !important; }

.auth-shell{
  width:min(800px, 96vw);
  margin:0 auto;
  display:grid;
  grid-template-columns: 1fr 1fr;
  border-radius:14px;
  background:rgba(24,24,24,.92);
  border:1px solid rgba(255,255,255,.08);
  box-shadow:0 28px 90px rgba(0,0,0,.6);
  position:relative;
  overflow:visible;
  min-height:420px;
  transform: translateY(175px);
}

.auth-shell::after{
  content:"";
  position:absolute;
  top:0; bottom:0;
  left:50%;
  transform:translateX(-0.5px);
  width:1px;
  background:rgba(255,255,255,.08);
  pointer-events:none;
}

.auth-panel{
  padding:22px 22px;
  display:flex;
  flex-direction:column;
  justify-content:center;
}

.auth-head{ margin:0 0 20px; }
.auth-brand{
  margin:0 0 4px;
  font-size:32px;
  font-weight:900;
  line-height:1.1;
  letter-spacing:.14em;
  color:#fff;
  text-transform:uppercase;
  text-align:center;
}
.auth-sub{
  margin-top:2px;
  font-size:14px;
  color:#8e8e8e;
  letter-spacing:.06em;
  text-align:center;
}


.auth-form{ display:grid; gap:14px; }
.auth-form .form-group{ margin:0; }

.auth-form label{
  display:block;
  margin:0 0 6px;
  font-size:13px;
  font-weight:800;
  letter-spacing:.06em;
  color:#9ba3af;
}

.auth-form input[type="text"],
.auth-form input[type="password"],
.auth-form select.use-custom,
.auth-form .lh-select__button{
  width:100%;
  height:42px;
  padding:0 12px;
  font-size:16px;
  color:#e5e7eb;
  background:#141414;
  border:1px solid #2b2b2b;
  border-radius:12px;
  outline:none;
  transition:box-shadow .15s ease, border-color .15s ease, background .15s ease;
}
.auth-form input::placeholder{ color:#6b7280; }
.auth-form input:focus,
.auth-form select.use-custom:focus,
.auth-form .lh-select__button:focus{
  border-color:#5a5a5a;
  box-shadow:0 0 0 2px rgba(255,255,255,.05);
}
.lh-select__button{ display:flex; align-items:center; justify-content:space-between; }

.auth-submit{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:100%;
  height:42px;
  margin-top:8px;
  border-radius:12px;
  border:1px solid #2b2b2b;
  background:#e5e7eb;
  color:#111827;
  font-weight:800;
  font-size:14px;
  letter-spacing:.04em;
  cursor:pointer;
  transition:filter .15s ease, background .15s ease, border-color .15s ease;
}
.auth-submit:hover{ background:#d1d5db; border-color:#3b3b3b; }
.auth-submit:active{ filter:brightness(.96); }

.auth-aside{
  display:flex;
  align-items:center;
  justify-content:center;
  background:#1f1f1f;
  border-top-right-radius:14px;
  border-bottom-right-radius:14px;
  padding:22px;
}
.auth-logo{
  width:200px;
  height:200px;
  border-radius:24px;
  object-fit:cover;
  display:block;
  box-shadow:0 16px 48px rgba(0,0,0,.5);
}

:root[data-theme="light"] body.app.no-chrome{
  background-color:#f5f5f5 !important;
  background-image:url("/static/images/back.png") !important;
  background-repeat:repeat !important;
  background-position:top left !important;
  background-size:auto !important;
  background-attachment:fixed !important;
}
:root[data-theme="light"] .auth-shell{
  background:#ffffff;
  border-color:rgba(0,0,0,.06);
}
:root[data-theme="light"] .auth-aside{ background:#f1f1f1; }
:root[data-theme="light"] .auth-brand{ color:#0f172a; }
:root[data-theme="light"] .auth-sub{ color:#6b7280; }
:root[data-theme="light"] .auth-form input[type="text"],
:root[data-theme="light"] .auth-form input[type="password"],
:root[data-theme="light"] .auth-form select.use-custom,
:root[data-theme="light"] .auth-form .lh-select__button{
  background:#ffffff; color:#111827; border:1px solid #d7dde7;
}
:root[data-theme="light"] .auth-submit{
  background:#111827; color:#ffffff; border-color:#0b1220;
}

@media (max-width: 780px){
  .auth-shell{
    grid-template-columns:1fr;
    width:min(520px, 94vw);
    min-height:unset;
  }
  .auth-shell::after{ display:none; }
  .auth-aside{
    order:-1;
    border-radius:14px 14px 0 0;
    padding:18px;
  }
  .auth-logo{ width:160px; height:160px; }
  .auth-panel{ padding:18px; }
}