.auth { min-height: 100vh; min-height: 100dvh; display: grid; grid-template-columns: 1fr 1fr; background: #fff; }

.auth-left {
  position: relative;
  display: flex; flex-direction: column; justify-content: space-between;
  padding: 34px 44px;
  background: linear-gradient(160deg, #f4f7ff 0%, #eef1f8 100%);
  overflow: hidden;
}
.auth-logo { display: flex; align-items: center; gap: 11px; font-size: 16px; font-weight: 700; color: var(--text); position: relative; z-index: 5; }
.auth-logo img {
  width: 40px; height: 40px;
  object-fit: contain;
  background: #fff;
  border-radius: 10px;
  border: 1px solid var(--line);
  padding: 3px;
}
.auth-chars { position: relative; z-index: 5; display: flex; align-items: flex-end; justify-content: center; height: 400px; }
.auth-slogan { font-size: 14px; color: var(--muted); position: relative; z-index: 5; text-align: center; }
.auth-left::before, .auth-left::after { content: ""; position: absolute; border-radius: 50%; filter: blur(90px); z-index: 0; }
.auth-left::before { top: 16%; right: 6%; width: 300px; height: 300px; background: rgba(23, 25, 43, 0.14); }
.auth-left::after { bottom: 8%; left: -10%; width: 340px; height: 340px; background: rgba(18, 184, 134, 0.12); }

.chars-scene { position: relative; width: 480px; height: 360px; }

.char { position: absolute; bottom: 0; transition: transform 0.7s ease-in-out, height 0.7s ease-in-out; transform-origin: bottom center; }
.char-purple { left: 60px; width: 170px; height: 370px; background: #17192b; border-radius: 10px 10px 0 0; z-index: 1; }
.char-black { left: 220px; width: 115px; height: 290px; background: #1c2033; border-radius: 8px 8px 0 0; z-index: 2; }
.char-orange { left: 0; width: 230px; height: 190px; background: #ff9b6b; border-radius: 115px 115px 0 0; z-index: 3; }
.char-yellow { left: 290px; width: 135px; height: 215px; background: #ffd54d; border-radius: 68px 68px 0 0; z-index: 4; }
.eyes { position: absolute; display: flex; transition: left 0.35s ease, top 0.35s ease; }
.eyeball { border-radius: 50%; background: white; display: flex; align-items: center; justify-content: center; transition: height 0.15s ease; overflow: hidden; }
.pupil { border-radius: 50%; background: #1c2033; transition: transform 0.1s ease-out; }
.bare-pupil { width: 12px; height: 12px; border-radius: 50%; background: #1c2033; transition: transform 0.7s ease-in-out; }
.yellow-mouth { position: absolute; width: 50px; height: 4px; background: #1c2033; border-radius: 2px; transition: left 0.35s ease, top 0.35s ease; }
.orange-mouth { position: absolute; width: 28px; height: 14px; border: 3px solid #1c2033; border-top: none; border-radius: 0 0 14px 14px; opacity: 0; transition: left 0.35s ease, top 0.35s ease, opacity 0.7s ease; }
.orange-mouth.visible { opacity: 1; }
@keyframes shakeHead { 0%,100% { translate: 0 0; } 10% { translate: -9px 0; } 20% { translate: 7px 0; } 30% { translate: -6px 0; } 40% { translate: 5px 0; } 50% { translate: -4px 0; } 60% { translate: 3px 0; } 70% { translate: -2px 0; } 80% { translate: 1px 0; } 90% { translate: -0.5px 0; } }
.eyes.shake-head, .yellow-mouth.shake-head, .orange-mouth.shake-head { animation: shakeHead 0.8s cubic-bezier(0.36,0.07,0.19,0.97) both; }

.auth-right { display: flex; align-items: center; justify-content: center; padding: 40px 24px; }
.auth-form { width: 100%; max-width: 400px; }
.form-brand { text-align: center; margin-bottom: 30px; }
.form-brand img {
  width: 64px; height: 64px;
  object-fit: contain;
  background: #fff;
  border-radius: 16px;
  border: 1px solid var(--line);
  padding: 5px;
  margin: 0 auto 16px;

}
.form-brand h1 { font-size: 25px; font-weight: 700; letter-spacing: -0.4px; margin-bottom: 6px; }
.form-brand p { font-size: 13.5px; color: var(--muted); }

.form-group { display: block; margin-bottom: 17px; }
.form-label { display: block; font-size: 13px; font-weight: 600; color: var(--text-2); margin-bottom: 7px; }
.input-wrap { position: relative; }
.input-wrap input {
  width: 100%; height: 50px;
  border: 1.5px solid var(--line);
  border-radius: 14px;
  background: var(--bg);
  padding: 0 90px 0 15px;
  font-size: 15px;
}
.input-wrap input::placeholder { color: #b6b9c9; }
.input-badge {
  position: absolute; right: 14px; top: 50%; transform: translateY(-50%);
  font-size: 11px; font-weight: 700; color: var(--primary);
  background: var(--primary-soft); padding: 3px 9px; border-radius: 7px;
  pointer-events: none;
}
.send-code {
  position: absolute; right: 6px; top: 50%; transform: translateY(-50%);
  height: 38px; padding: 0 14px;
  border-radius: 10px;
  background: var(--primary-soft); color: var(--primary);
  font-size: 13px; font-weight: 600;
  transition: .2s;
}
.send-code:disabled, .send-code.cooling { background: #eef0f5; color: var(--muted); }

.form-err { color: var(--danger); font-size: 13px; line-height: 1.55; min-height: 20px; padding: 2px 2px 10px; }
.form-err.show { background: var(--danger-soft); border: 1px solid #ffdbe1; border-radius: 10px; padding: 9px 12px; }

.auth-agree { text-align: center; color: var(--muted); font-size: 12px; margin-top: 16px; }

@media (max-width: 900px) {
  .auth { grid-template-columns: 1fr; }
  .auth-left { display: none; }
  .auth-right { padding: max(24px, var(--safe-t)) 22px 24px; }
}