* { margin: 0; padding: 0; box-sizing: border-box; }
body { font-family: 'Roboto', sans-serif; background: #ECF0F1; min-height: 100vh; }

.log-container { 
    display: grid; 
    grid-template-columns: 1fr 1fr; 
    min-height: 100vh; 
}

.log-image { 
    flex: 1; 
    background: url('../img/log_fon.png') center/cover no-repeat; 
    position: relative; 
    display: flex; 
    align-items: flex-end; 
    justify-content: center; 
    padding: 60px 40px; 
    overflow: hidden; 
}
.log-image::before { 
    content: ''; 
    position: absolute; 
    top: 0; left: 0; right: 0; bottom: 0; 
    background: linear-gradient(135deg, rgba(198, 98, 53, 0.3) 0%, rgba(240, 208, 95, 0.2) 50%, rgba(0, 0, 0, 0.4) 100%); 
    z-index: 1; 
}
.log-image::after { 
    content: ''; 
    position: absolute; 
    bottom: -100px; left: -100px; 
    width: 400px; height: 400px; 
    background: radial-gradient(circle, rgba(255, 255, 255, 0.1) 0%, transparent 70%); 
    border-radius: 50%; 
    z-index: 2; 
}
.log-image-content { position: relative; z-index: 3; text-align: center; color: white; width: 100%; max-width: 400px; margin-bottom: 40px; }
.log-image-content h2 { font-family: 'Montserrat', sans-serif; font-size: 42px; font-weight: 700; margin-bottom: 15px; text-shadow: 2px 2px 8px rgba(0, 0, 0, 0.3); letter-spacing: 1px; }
.log-image-content p { font-size: 18px; opacity: 0.95; text-shadow: 1px 1px 4px rgba(0, 0, 0, 0.3); font-weight: 300; }
.log-image-content .decor-line { width: 80px; height: 4px; background: linear-gradient(90deg, #f0d05f, #c66235); margin: 20px auto; border-radius: 2px; }

.floating-svg { position: absolute; z-index: 2; opacity: 0.15; pointer-events: none; }
.floating-svg svg { fill: white; filter: drop-shadow(2px 2px 4px rgba(0, 0, 0, 0.2)); }
.float-1 { top: 10%; left: 10%; animation: float 6s ease-in-out infinite; }
.float-2 { top: 20%; right: 15%; animation: float 8s ease-in-out infinite reverse; }
.float-3 { bottom: 30%; left: 5%; animation: float 7s ease-in-out infinite; }
.float-4 { top: 50%; right: 8%; animation: float 9s ease-in-out infinite reverse; }
@keyframes float { 0%, 100% { transform: translateY(0px) rotate(0deg); } 50% { transform: translateY(-20px) rotate(5deg); } }

.log-form-container { 
    flex: 1; 
    display: flex; 
    align-items: center; 
    justify-content: center; 
    padding: 40px; 
    background: linear-gradient(135deg, #fff9f5 0%, #ffffff 50%, #fff5f0 100%); 
    position: relative; 
    overflow: hidden; 
}

.bg-svg-pattern { position: absolute; pointer-events: none; opacity: 0.08; z-index: 0; }
.bg-svg-pattern.pattern-1 { top: 10%; left: 5%; width: 120px; height: 120px; animation: rotate 20s linear infinite; }
.bg-svg-pattern.pattern-2 { top: 15%; right: 10%; width: 100px; height: 100px; animation: float 10s ease-in-out infinite; }
.bg-svg-pattern.pattern-3 { bottom: 20%; left: 8%; width: 80px; height: 80px; animation: rotate 15s linear infinite reverse; }
.bg-svg-pattern.pattern-4 { bottom: 15%; right: 5%; width: 140px; height: 140px; animation: float 12s ease-in-out infinite reverse; }
.bg-svg-pattern.pattern-5 { top: 50%; left: 3%; width: 60px; height: 60px; animation: rotate 18s linear infinite; }
.bg-svg-pattern.pattern-6 { top: 8%; left: 50%; width: 70px; height: 70px; animation: pulse 4s ease-in-out infinite; }
.bg-svg-pattern.pattern-7 { bottom: 30%; right: 12%; width: 90px; height: 90px; animation: float 11s ease-in-out infinite; }
.bg-svg-pattern.pattern-8 { top: 40%; right: 2%; width: 110px; height: 110px; animation: rotate 25s linear infinite reverse; }
@keyframes rotate { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }
@keyframes pulse { 0%, 100% { transform: scale(1); opacity: 0.08; } 50% { transform: scale(1.1); opacity: 0.12; } }

.log-form-container::before { content: ''; position: absolute; top: -50%; right: -20%; width: 600px; height: 600px; background: radial-gradient(circle, rgba(240, 208, 95, 0.15) 0%, transparent 70%); border-radius: 50%; z-index: 0; }
.log-form-container::after { content: ''; position: absolute; bottom: -30%; left: -10%; width: 400px; height: 400px; background: radial-gradient(circle, rgba(198, 98, 53, 0.1) 0%, transparent 70%); border-radius: 50%; z-index: 0; }

.log-form { width: 100%; max-width: 450px; position: relative; z-index: 1; }
.log-form h1 { font-family: 'Montserrat', sans-serif; font-size: 36px; color: #333; margin-bottom: 10px; text-align: center; }
.log-form .subtitle { color: #666; text-align: center; margin-bottom: 20px; font-size: 16px; }
.reg-link-top { text-align: center; margin-bottom: 30px; color: #666; font-size: 14px; }
.reg-link-top a { color: #c66235; text-decoration: none; font-weight: 600; }
.reg-link-top a:hover { text-decoration: underline; }

.form-group { margin-bottom: 25px; }
.form-group label { display: block; margin-bottom: 8px; color: #333; font-weight: 500; font-size: 14px; }
.form-group input { width: 100%; padding: 14px 16px; border: 2px solid #ddd0af; border-radius: 8px; font-size: 15px; font-family: 'Roboto', sans-serif; background: #f8f8f8; transition: all 0.3s ease; }
.form-group input:focus { outline: none; border-color: #f0cf5f; background: #ffffff; box-shadow: 0 0 0 4px rgba(240, 207, 95, 0.2); }
.form-group input::placeholder { color: #aaaaaa; }
.form-group input.error { border-color: #e74c3c; background: #fff; }
.form-group input.error:focus { box-shadow: 0 0 0 4px rgba(231, 76, 60, 0.1); }

.field-error { display: flex; align-items: center; gap: 6px; color: #e74c3c; font-size: 13px; margin-top: 6px; }
.field-error svg { width: 14px; height: 14px; fill: #e74c3c; flex-shrink: 0; }

.input-wrapper { position: relative; }
.input-wrapper input { width: 100%; padding: 14px 50px 14px 16px; border: 2px solid #ddd0af; border-radius: 8px; font-size: 15px; font-family: 'Roboto', sans-serif; background: #f8f8f8; transition: all 0.3s ease; }
.input-wrapper input:focus { outline: none; border-color: #f0cf5f; background: #ffffff; box-shadow: 0 0 0 4px rgba(240, 207, 95, 0.2); }
.input-wrapper input::placeholder { color: #aaaaaa; }
.input-wrapper input.error { border-color: #e74c3c; background: #fff; }
.input-wrapper input.error:focus { box-shadow: 0 0 0 4px rgba(231, 76, 60, 0.1); }

.toggle-password { position: absolute; right: 14px; top: 50%; transform: translateY(-50%); background: none; border: none; cursor: pointer; padding: 4px; display: flex; align-items: center; justify-content: center; opacity: 0.6; transition: opacity 0.3s ease; }
.toggle-password:hover { opacity: 1; }
.toggle-password svg { width: 20px; height: 20px; }
.toggle-password .eye-closed { display: block; }
.toggle-password .eye-open { display: none; }
.toggle-password.is-open .eye-closed { display: none; }
.toggle-password.is-open .eye-open { display: block; }
.toggle-password path { fill: none; stroke: #666; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

.btn-submit { width: 100%; padding: 16px; background: #f0d05f; border: none; border-radius: 8px; color: #333; font-size: 16px; font-weight: 600; cursor: pointer; transition: all 0.3s ease; margin-top: 10px; }
.btn-submit:hover { background: #dfba53; transform: translateY(-2px); box-shadow: 0 5px 15px rgba(240, 208, 95, 0.4); }

.forgot-password { text-align: center; margin-top: 20px; font-size: 14px; }
.forgot-password a { color: #666; text-decoration: none; }
.forgot-password a:hover { text-decoration: underline; color: #c66235; }

/* ==========================================
   АДАПТАЦИЯ ДЛЯ ЛОГИНА
   ========================================== */

@media (max-width: 768px) {
    .log-container {
        grid-template-columns: 1fr;
        background: #ECF0F1;
        display: flex;
        align-items: center;
        justify-content: center;
        min-height: 100vh;
        padding: 20px;
    }

    /* Превращаем левую картинку в фон на весь экран */
    .log-image {
        position: fixed;
        top: 0; left: 0;
        width: 100%; height: 100%;
        z-index: 0;
        padding: 0;
        display: flex;
        align-items: center;
        justify-content: center;
        /* Светлый градиент — фото хорошо видно */
        background: linear-gradient(135deg, rgba(0, 0, 0, 0.1) 0%, rgba(0, 0, 0, 0.2) 100%),
                    url('../img/log_fon.png') center/cover no-repeat;
    }

    /* Скрываем только текст "Время Есть" */
    .log-image-content { display: none; }
    
    /* Плавающие SVG остаются, но чуть прозрачнее */
    .floating-svg { opacity: 0.15; }
    .floating-svg svg { filter: drop-shadow(0 0 2px rgba(0,0,0,0.1)); }

    /* Контейнер формы поверх фона */
    .log-form-container {
        position: relative;
        z-index: 2;
        background: rgba(255, 255, 255, 0.92);
        backdrop-filter: blur(15px);
        -webkit-backdrop-filter: blur(15px);
        padding: 40px 30px;
        width: 100%;
        max-width: 460px;
        border-radius: 20px;
        box-shadow: 0 10px 40px rgba(0, 0, 0, 0.15);
        margin: 0;
    }

    /* SVG узоры внутри формы — остаются видимыми */
    .bg-svg-pattern { display: block !important; opacity: 0.08; }
    .bg-svg-pattern.pattern-1 { width: 80px; height: 80px; }
    .bg-svg-pattern.pattern-2 { width: 65px; height: 65px; }
    .bg-svg-pattern.pattern-3 { width: 50px; height: 50px; }
    .bg-svg-pattern.pattern-4 { width: 90px; height: 90px; }
    .bg-svg-pattern.pattern-5 { width: 40px; height: 40px; }
    .bg-svg-pattern.pattern-6 { width: 50px; height: 50px; }
    .bg-svg-pattern.pattern-7 { width: 60px; height: 60px; }
    .bg-svg-pattern.pattern-8 { width: 75px; height: 75px; }
}

@media (max-width: 700px) {
    .log-form-container { padding: 35px 25px; max-width: 440px; }
    .log-form h1 { font-size: 32px; }
    .bg-svg-pattern.pattern-1 { width: 70px; height: 70px; }
    .bg-svg-pattern.pattern-4 { width: 80px; height: 80px; }
    .bg-svg-pattern.pattern-8 { width: 65px; height: 65px; }
}

@media (max-width: 650px) {
    .log-form-container { padding: 30px 20px; max-width: 400px; }
    .log-form h1 { font-size: 30px; }
    .bg-svg-pattern { opacity: 0.07; }
    .bg-svg-pattern.pattern-1 { width: 60px; height: 60px; }
    .bg-svg-pattern.pattern-2 { width: 55px; height: 55px; }
    .bg-svg-pattern.pattern-4 { width: 70px; height: 70px; }
}

@media (max-width: 600px) {
    .log-form-container { margin: 20px auto; padding: 25px 20px; max-width: 90%; }
    .form-group input, .input-wrapper input { padding: 12px 14px; font-size: 16px; }
    .bg-svg-pattern.pattern-1 { width: 50px; height: 50px; }
    .bg-svg-pattern.pattern-3 { width: 40px; height: 40px; }
    .bg-svg-pattern.pattern-6 { width: 40px; height: 40px; }
}

@media (max-width: 550px) {
    .log-form h1 { font-size: 28px; }
    .log-form .subtitle { font-size: 15px; }
    .bg-svg-pattern { opacity: 0.06; }
    .bg-svg-pattern.pattern-1 { width: 45px; height: 45px; }
    .bg-svg-pattern.pattern-4 { width: 60px; height: 60px; }
    .bg-svg-pattern.pattern-7 { width: 50px; height: 50px; }
}

@media (max-width: 500px) {
    .log-form-container { padding: 20px 15px; }
    .form-group { margin-bottom: 20px; }
    .bg-svg-pattern.pattern-1 { width: 40px; height: 40px; }
    .bg-svg-pattern.pattern-2 { width: 35px; height: 35px; }
    .bg-svg-pattern.pattern-5 { width: 30px; height: 30px; }
    .bg-svg-pattern.pattern-8 { width: 50px; height: 50px; }
}

@media (max-width: 450px) {
    .log-form h1 { font-size: 26px; }
    .btn-submit { padding: 14px; font-size: 15px; }
    .bg-svg-pattern { opacity: 0.05; }
    .bg-svg-pattern.pattern-4 { width: 50px; height: 50px; }
    .bg-svg-pattern.pattern-6 { width: 35px; height: 35px; }
}

@media (max-width: 400px) {
    .log-form-container { padding: 15px 12px; margin: 10px auto; }
    .log-form h1 { font-size: 24px; margin-bottom: 5px; }
    .form-group label { font-size: 13px; }
    .form-group input, .input-wrapper input { padding: 10px 12px; font-size: 15px; }
    .toggle-password svg { width: 18px; height: 18px; }
    .bg-svg-pattern.pattern-1 { width: 30px; height: 30px; }
    .bg-svg-pattern.pattern-3 { width: 25px; height: 25px; }
    .bg-svg-pattern.pattern-7 { width: 40px; height: 40px; }
}

@media (max-width: 350px) {
    .log-form h1 { font-size: 22px; }
    .bg-svg-pattern { opacity: 0.04; }
    .bg-svg-pattern.pattern-2 { width: 25px; height: 25px; }
    .bg-svg-pattern.pattern-8 { width: 35px; height: 35px; }
}


        .code-input { letter-spacing: 8px; font-size: 24px; text-align: center; font-weight: 700; }
        
/* Новые уникальные позиции для плавающих иконок на левой части */
        .log-image .floating-svg.float-1 {
            top: 15% !important; 
            left: 12% !important; 
            bottom: auto !important;
            right: auto !important;
            width: 95px; height: 95px;
            animation-duration: 8s; 
        }
        .log-image .floating-svg.float-2 {
            top: auto !important;
            bottom: 18% !important; 
            right: 15% !important; 
            left: auto !important;
            width: 75px; height: 75px;
            animation-duration: 11s; 
            animation-direction: reverse;
        }
        .log-image .floating-svg.float-3 {
            top: 58% !important;
            bottom: auto !important;
            left: 18% !important; 
            right: auto !important;
            width: 85px; height: 85px;
            animation-duration: 9.5s; 
        }
        .log-image .floating-svg.float-4 {
            top: 22% !important; 
            right: 10% !important; 
            left: auto !important;
            bottom: auto !important;
            width: 80px; height: 80px;
            animation-duration: 12s; 
            animation-direction: reverse;
        }

        /* Адаптив для переопределенных плавающих иконок */
        @media (max-width: 768px) {
            .log-image .floating-svg.float-1 { width: 65px; height: 65px; }
            .log-image .floating-svg.float-3 { width: 60px; height: 60px; }
            .log-image .floating-svg.float-4 { width: 55px; height: 55px; }
        }