/* === Стили группы: auth === */
/* Страницы: login.html, register.html, forgot_password.html, reset_password.html */

/* --- login.html --- */
body { font-family: system-ui, -apple-system, sans-serif; background: #f5f5f5; display: flex; justify-content: center; align-items: center; min-height: 100vh; }
        .container { background: white; padding: 40px; border-radius: 16px; box-shadow: 0 4px 20px rgba(0,0,0,0.1); width: 100%; max-width: 450px; }
        h1 { text-align: center; margin-bottom: 30px; color: #333; }
        .form-group { margin-bottom: 20px; position: relative; }
        label { display: block; margin-bottom: 8px; font-weight: 500; color: #555; }
        input { width: 100%; padding: 12px; border: 1px solid #ddd; border-radius: 8px; font-size: 16px; transition: border-color 0.2s; }
        input:focus { outline: none; border-color: #007bff; }
        button { width: 100%; padding: 12px; background: #007bff; color: white; border: none; border-radius: 8px; font-size: 16px; font-weight: 600; cursor: pointer; transition: background 0.2s; }
        button:hover { background: #0056b3; }

        .footer { text-align: center; margin-top: 20px; color: #888; }
        .footer a { color: #007bff; text-decoration: none; }
        .footer a:hover { text-decoration: underline; }
        .forgot-link { margin-top: 15px; }

        /* Cookie-баннер */

        @media (max-width: 600px) {  }

        /* Глазок для пароля */
        .password-toggle {
            position: absolute;
            right: 12px;
            top: 38px;
            cursor: pointer;
            font-size: 18px;
            user-select: none;
            color: #888;
            background: none;
            border: none;
            padding: 5px;
            width: auto;
        }
        .password-toggle:hover {
            color: #555;
        }

/* --- register.html --- */
body { font-family: system-ui, -apple-system, sans-serif; background: #f5f5f5; display: flex; justify-content: center; align-items: center; min-height: 100vh; }
        .container { background: white; padding: 40px; border-radius: 16px; box-shadow: 0 4px 20px rgba(0,0,0,0.1); width: 100%; max-width: 450px; }
        h1 { text-align: center; margin-bottom: 30px; color: #333; }
        .form-group { margin-bottom: 20px; position: relative; }
        label { display: block; margin-bottom: 8px; font-weight: 500; color: #555; }
        input { width: 100%; padding: 12px; border: 1px solid #ddd; border-radius: 8px; font-size: 16px; transition: border-color 0.2s; }
        input:focus { outline: none; border-color: #007bff; }
        button { width: 100%; padding: 12px; background: #007bff; color: white; border: none; border-radius: 8px; font-size: 16px; font-weight: 600; cursor: pointer; transition: background 0.2s; }
        button:hover { background: #0056b3; }

        .footer { text-align: center; margin-top: 20px; color: #888; }
        .footer a { color: #007bff; text-decoration: none; }
        .footer a:hover { text-decoration: underline; }

        /* Cookie-баннер */

        @media (max-width: 600px) {  }

        /* Чекбокс согласия */
        .consent-group { margin: 20px 0; display: flex; align-items: flex-start; gap: 10px; }
        .consent-group input[type="checkbox"] { width: 18px; height: 18px; margin-top: 2px; flex-shrink: 0; accent-color: #007bff; cursor: pointer; }
        .consent-group label { font-size: 14px; color: #555; line-height: 1.5; cursor: pointer; margin: 0; }
        .consent-group label a { color: #007bff; text-decoration: none; }
        .consent-group label a:hover { text-decoration: underline; }
        .consent-error { color: #dc3545; font-size: 13px; margin-top: 4px; display: none; }
        
        /* Глазок для пароля */
        .password-toggle {
            position: absolute;
            right: 12px;
            top: 38px;
            cursor: pointer;
            font-size: 18px;
            user-select: none;
            color: #888;
            background: none;
            border: none;
            padding: 5px;
            width: auto;
        }
        .password-toggle:hover {
            color: #555;
        }

/* --- forgot_password.html --- */
body { font-family: system-ui, -apple-system, sans-serif; background: #f5f5f5; display: flex; justify-content: center; align-items: center; min-height: 100vh; }
        .container { background: white; padding: 40px; border-radius: 16px; box-shadow: 0 4px 20px rgba(0,0,0,0.1); width: 100%; max-width: 450px; }
        h1 { text-align: center; margin-bottom: 30px; color: #333; }
        .form-group { margin-bottom: 20px; }
        label { display: block; margin-bottom: 8px; font-weight: 500; color: #555; }
        input { width: 100%; padding: 12px; border: 1px solid #ddd; border-radius: 8px; font-size: 16px; }
        button { width: 100%; padding: 12px; background: #007bff; color: white; border: none; border-radius: 8px; font-size: 16px; cursor: pointer; }
        .footer { text-align: center; margin-top: 20px; }
        .footer a { color: #007bff; text-decoration: none; }

        @media (max-width: 600px) {  }

/* --- reset_password.html --- */
body { font-family: system-ui, -apple-system, sans-serif; background: #f5f5f5; display: flex; justify-content: center; align-items: center; min-height: 100vh; }
        .container { background: white; padding: 40px; border-radius: 16px; box-shadow: 0 4px 20px rgba(0,0,0,0.1); width: 100%; max-width: 450px; }
        h1 { text-align: center; margin-bottom: 30px; color: #333; }
        .form-group { margin-bottom: 20px; position: relative; }
        label { display: block; margin-bottom: 8px; font-weight: 500; color: #555; }
        input { width: 100%; padding: 12px; border: 1px solid #ddd; border-radius: 8px; font-size: 16px; }
        button { width: 100%; padding: 12px; background: #007bff; color: white; border: none; border-radius: 8px; font-size: 16px; cursor: pointer; }

        /* Глазок для пароля */
        .password-toggle {
            position: absolute;
            right: 12px;
            top: 38px;
            cursor: pointer;
            font-size: 18px;
            user-select: none;
            color: #888;
            background: none;
            border: none;
            padding: 5px;
            width: auto;
        }
        .password-toggle:hover {
            color: #555;
        }

        @media (max-width: 600px) {  }