/* Authentication routes: image collage on the left, line-art and form on the right. */
#app .auth-shell {
  min-height: 100vh;
  display: grid;
  grid-template-columns: minmax(540px, 1.16fr) minmax(430px, .84fr);
  background: #fff !important;
}

#app .auth-brand {
  order: 1;
  position: relative !important;
  isolation: isolate;
  min-height: 100vh;
  min-width: 0;
  padding: clamp(28px, 3.2vw, 52px);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  overflow: hidden;
  color: #fff;
  background: #10161b !important;
}

.auth-artwork {
  position: absolute;
  inset: 0;
  z-index: 0;
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 9px;
  padding: 9px;
  overflow: hidden;
}
.auth-artwork::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(180deg, rgba(7, 13, 17, .22), transparent 24%, transparent 64%, rgba(7, 13, 17, .62));
}
.auth-artwork-column {
  display: grid;
  grid-template-rows: 46% 54%;
  gap: 9px;
  min-width: 0;
  height: 110%;
}
.auth-artwork-column:nth-child(2) { grid-template-rows: 32% 68%; transform: translateY(-6%); }
.auth-artwork-column:nth-child(3) { grid-template-rows: 63% 37%; }
.auth-artwork-column:nth-child(4) { grid-template-rows: 55% 45%; transform: translateY(-9%); }
.auth-artwork-column:nth-child(5) { grid-template-rows: 38% 62%; }
.auth-artwork img {
  display: block;
  width: 100%;
  height: 100%;
  min-height: 0;
  object-fit: cover;
  border-radius: 8px;
}

#app .auth-brand::before,
#app .auth-brand::after { content: none !important; display: none !important; }
#app .auth-brand .brand,
#app .auth-brand .auth-message {
  position: relative;
  z-index: 1;
}
#app .auth-brand .brand { color: #fff; }
#app .auth-brand .brand strong,
#app .auth-brand .auth-message h1 { color: #fff; }
#app .auth-brand .brand span,
#app .auth-brand .auth-message p { color: rgba(255, 255, 255, .76); }
#app .auth-brand .auth-message {
  max-width: 580px;
  margin: 0 0 clamp(6px, 3vh, 34px);
  text-shadow: 0 2px 14px rgba(0, 0, 0, .45);
}
#app .auth-brand .auth-message h1 {
  font-size: clamp(34px, 3.65vw, 54px);
  line-height: 1.2;
  letter-spacing: 0;
  text-wrap: balance;
}
#app .auth-brand .auth-message p { font-size: 15px; }

#app .auth-form-wrap {
  order: 2;
  position: relative;
  isolation: isolate;
  display: grid;
  place-items: center;
  min-width: 0;
  min-height: 100vh;
  padding: clamp(32px, 5vw, 72px);
  overflow: hidden;
  background: #fff url("/static/images/auth-lineart.webp?v=auth-webp-1") center / cover no-repeat !important;
}
#app .auth-form-wrap::before { content: none !important; display: none !important; }
#app .auth-form {
  position: relative;
  z-index: 1;
  width: min(430px, 100%);
  color: #182433 !important;
}
#app .auth-form h2 { color: #152230 !important; }
#app .auth-form > p { color: #24384e !important; }
#app .auth-form .field label { color: #1e3349 !important; }
#app .auth-form .auth-switch { color: #24384e !important; }
#app .auth-form .field input {
  color: #172536 !important;
}
#app .auth-form .field input::placeholder { color: #2b4662 !important; opacity: 1; }
#app .auth-form .field input:-webkit-autofill,
#app .auth-form .field input:-webkit-autofill:hover,
#app .auth-form .field input:-webkit-autofill:focus {
  -webkit-text-fill-color: #172536 !important;
}

html[data-theme="dark"] #app .auth-shell { background: #fff !important; }
html[data-theme="dark"] #app .auth-brand { background: #10161b !important; }
html[data-theme="dark"] #app .auth-form-wrap { background: #fff url("/static/images/auth-lineart.webp?v=auth-webp-1") center / cover no-repeat !important; }
html[data-theme="dark"] #app .auth-form {
  color: #eef7ff !important;
}
html[data-theme="dark"] #app .auth-form :is(h2, .field label) { color: #f2f8fc !important; }
html[data-theme="dark"] #app .auth-form > p { color: #c0d0dc !important; }
html[data-theme="dark"] #app .auth-form .auth-switch { color: #c0d0dc !important; }
html[data-theme="dark"] #app .auth-form .field input {
  color: #f2f8fc !important;
}
html[data-theme="dark"] #app .auth-form .field input::placeholder { color: #aebfcb !important; }
html[data-theme="dark"] #app .auth-shell .auth-form .text-btn { color: #a8d9ff !important; }

@media (max-width: 900px) {
  #app .auth-shell { grid-template-columns: 1fr; }
  #app .auth-brand { display: none; }
  #app .auth-form-wrap { min-height: 100vh; padding: 28px 20px; }
}