:root{
  --accent: #0f6b6a;
  --accent-2: #0aa3a1;
  --cta: #e76f2b;
  --card-bg: #ffffff;
  --muted-white: rgba(255,255,255,0.9);
  --muted-gray: #6b6b6b;
}

/* Загальна структура */
.auth-split{
  min-height: 100vh;
  display: flex;
}

/* Ліва панель */
.left-panel{
  flex: 1 1 60%;
  background: linear-gradient(90deg, var(--accent) 0%, var(--accent-2) 100%);
  color: white;
  position: relative;
}

/* === ЛОГО ЯК НА ЗРАЗКУ BOOTSTRAPBRAIN === */
.logo-wrapper{
  position: absolute;
  top: 40px;
  left: 40px;
}

.logo-img{
  height: 42px;     /* МАСШТАБ 1-в-1, як на фото */
  width: auto;
  object-fit: contain;
  opacity: 0.95;
}

/* Контент лівої панелі (нижче логотипа) */
.left-content{
  margin-top: 140px; /* щоб відступ був як у прикладі */
}

.left-content h1{
  max-width: 520px;
  font-weight: 600;
  line-height: 1.12;
}

.left-content p{
  max-width: 520px;
  color: var(--muted-white);
}

.dots{
  width: 36px;
  height: 8px;
  background-image: radial-gradient(circle at 2px 2px, rgba(255,255,255,0.25) 2px, transparent 3px);
  background-size: 8px 8px;
  opacity: 0.35;
}

/* Права панель */
.right-panel{
  flex: 0 0 420px;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Картка входу */
.auth-card{
  border-radius: 12px;
  background: var(--card-bg);
  border: 1px solid rgba(20,20,20,0.05);
}

.auth-card .card-body{
  padding: 2rem;
}

.form-label{
  color: #222;
  font-weight: 500;
}

.btn-primary{
  background: linear-gradient(180deg, var(--accent-2) 0%, var(--accent) 100%);
  border: none;
  box-shadow: 0 8px 24px rgba(15,107,106,0.14);
  color: white;
  padding: 0.75rem;
  font-weight: 600;
  border-radius: 8px;
}

/* Адаптив */
@media (max-width: 767px){
  .left-panel{
    display: none;
  }
  .right-panel{
    flex: 1 1 100%;
    padding: 40px 20px;
  }
}