#root, .main-container {
    height: 100vh;
    overflow: hidden;
}

img.logo {
    /* Заменяем саму картинку */
    content: url("/public/logo_custom.png") !important;
    
    /* Настраиваем размер */
    width: 500px !important; 
    height: auto !important;
    
    /* Опционально: если картинка должна быть разной для темной/светлой темы */
    filter: none !important; 
}
/* 1. УБИРАЕМ ВТОРУЮ КОЛОНКУ И ГИГАНТСКОЕ ЛОГО */
@media (min-width: 1024px) {
    /* Заставляем сетку быть в одну колонку */
    .lg\:grid-cols-2 {
        grid-template-columns: 1fr !important;
    }
    /* Скрываем правый блок с фоновым логотипом */
    .lg\:block.bg-muted, 
    div.hidden.lg\:block {
        display: none !important;
    }
}

/* 2. ЦЕНТРИРУЕМ ФОРМУ */
/* Растягиваем контейнер на весь экран и выравниваем по центру */
.min-h-svh {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 20px !important;
}

/* Ограничиваем ширину формы, чтобы она не была на весь экран */
div.mx-auto.flex.w-full.flex-col.justify-center.space-y-6 {
    max-width: 350px !important;
}

/* 3. ИСПРАВЛЯЕМ ПОЛЯ ВВОДА (РАМКИ) */
/* Используем переменные темы, чтобы рамки были видны и в белой, и в черной теме */
input {
    border: 1px solid hsl(var(--input)) !important; /* Стандартный цвет границы темы */
    background-color: transparent !important;
    color: hsl(var(--foreground)) !important;
    border-radius: var(--radius) !important;
    padding: 8px 12px !important;
    width: 100% !important;
    transition: border-color 0.2s !important;
}

/* Подсветка при клике */
input:focus {
    border-color: hsl(var(--primary)) !important;
    outline: none !important;
}

/* 4. ЛОГОТИП (АККУРАТНЫЙ И С БЛИКОМ) */
/* Контейнер логотипа */
.flex.justify-center.gap-2 {
    position: relative !important;
    overflow: hidden !important; /* Оставляем, чтобы блик не вылетал за круг */
    
    /* Убираем фон и рамку, которые создавали эффект кольца */
    background: none !important;
    border: none !important;
    
    /* Устанавливаем размер точно такой же, как у логотипа (150px) */
    width: 150px !important; 
    height: 150px !important;
    
    /* Делаем контейнер кругом */
    border-radius: 50% !important; 
    
    /* Центрируем */
    margin: 0 auto 20px auto !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

/* Эффект блика (Shimmer) — работает на любом фоне */
.flex.justify-center.gap-2::after {
    content: "";
    position: absolute;
    top: 0;
    left: -150%;
    width: 50%;
    height: 100%;
    background: linear-gradient(
        to right,
        transparent,
        rgba(128, 128, 128, 0.2), /* Мягкий серый блик, виден везде */
        transparent
    );
    transform: skewX(-25deg);
    animation: shimmer 6s infinite ease-in-out;
    z-index: 3;
}
/* background gradient */
.light .min-h-svh {
    background: linear-gradient(135deg, #f8fafc 0%, #e2e8f0 100%) !important;
}

/* Dark Theme Gradient */
.dark .min-h-svh {
    background: linear-gradient(135deg, #0f172a 0%, #020617 100%) !important;
}

@keyframes shimmer {
    0% { left: -150%; }
    30% { left: 150%; }
    100% { left: 150%; }
}

/* 5. КНОПКА SIGN IN */
button[type="submit"] {
    background-color: #531A56 !important;
    color: hsl(var(--primary-foreground)) !important;
    border-radius: var(--radius) !important;
    font-weight: 600 !important;
    width: 100% !important;
    transition: opacity 0.2s !important;
}

button[type="submit"]:hover {
    opacity: 0.9 !important;
}

/* Убираем лишние надписи внизу */
#powered-by {
    display: none !important;
}